# Unmade Design System

> High-contrast industrial utility meets Swiss-inspired precision through monochromatic foundations and bold primary color blocks.

**Source:** https://unmade.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Unmade operates on a high-contrast, Swiss-style typographic grid anchored by **Unica 77 LL**. The system is fundamentally monochromatic, utilizing a neutral palette of deep blacks (#000000), stark whites (#ffffff), and a mid-tone industrial gray (#939393). This neutral floor is punctuated by large, full-width flood-fills of primary blue (#2748ac) and bright yellow (#fff691), creating a "color-block" architecture. Components favor extreme corner radii (80px to 160px) for cards and buttons, contrasting against a strict 0px radius for layout containers and section dividers.

## Signature DNA
1. **The Color Flood** (Large sections of the page are flooded with #fff691 or #2748ac, serving as high-energy breaks between industrial gray and black content blocks.)
2. **Hyper-Rounded Geometry** (Primary interactive elements and feature cards use radii between 80px and 160px, creating a "pill" or "stadium" aesthetic that softens the otherwise rigid grid.)
3. **Unica 77 LL Typography** (A single-family system used at 400 weight across all roles, relying on massive scale shifts—up to 70px—and tight negative letter spacing to establish hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, button backgrounds, logo | 46 | 1.0 | `--drop-shadow` |
| `{color.white}` | `#ffffff` | Surface background, button text, borders | 45 | 0.8 | Computed |
| `{color.gray.medium}` | `#939393` | Section backgrounds, secondary text | 17 | 1.0 | `--type-on-dark` |
| `{color.gray.light}` | `#f6f6f6` | Subtle surface backgrounds | 5 | 1.0 | `--bg-grey` |
| `{color.gray.dark}` | `#707070` | Secondary body text | 15 | 1.0 | `--type-on-light` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue}` | `#2748ac` | Section flood-fill, primary accent | 8 | 1.0 | `--blue` |
| `{color.yellow}` | `#fff691` | Decorative flood-fill, CTA background | 2 | 1.0 | `--yellow` (decorative_only) |
| `{color.orange}` | `#f0983f` | Hero background accent | 1 | 1.0 | `--orange` (decorative_only) |
| `{color.blue.light}` | `#c4d2ff` | Text on blue surfaces | 2 | 1.0 | `--type-on-blue` (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Unica 77 LL | 400 | All roles (Display, Body, UI) | Inter or Helvetica Neue | Licensed (Lineto) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 70px | 75px | -1.4px | 400 | Hero headlines | `h3.title-one` |
| `{type.display.lg}` | 40px | 24px | normal | 400 | UI Arrows/Large icons | `div.css-arrow.is-left` |
| `{type.heading.md}` | 30px | 40px | -0.32px | 400 | Section titles | `h2.title-three` |
| `{type.heading.sm}` | 22px | 29.2px | -0.16px | 400 | Large body/Intro | `div.body-large` |
| `{type.button.lg}` | 22px | 22px | normal | 400 | Jumbo CTA | `a.button.cta-jumbo-button` |
| `{type.body.md}` | 18px | 24px | normal | 400 | Navigation/Default body | `aside.navigation-bar` |
| `{type.body.sm}` | 16px | 16px | normal | 400 | Nav links | `a.nav-link_block` |
| `{type.tagline}` | 14px | 14px | 1.6px | 400 | Uppercase labels | `div.tagline` |

### Principles
1. **Weight Invariance**: Hierarchy is never achieved through bolding; only size, color contrast, and letter spacing change.
2. **Negative Tracking on Display**: As font size increases above 22px, letter spacing tightens (up to -1.4px).
3. **Wide Tracking for Metadata**: Small labels (14px) use wide tracking (1.6px) for legibility and "tag" feel.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 3 |
| `{space.sm}` | 16px | 3 |
| `{space.md}` | 32px | 14 |
| `{space.lg}` | 48px | 3 |
| `{space.xl}` | 80px | 5 |
| `{space.section}` | 130px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout sections, sharp containers | 92 occurrences |
| `{radius.card}` | 80px | Content cards, secondary buttons | 8 occurrences |
| `{radius.button}` | 128px | Primary CTA buttons | 5 occurrences |
| `{radius.pill}` | 160px | Maximum rounded UI elements | 3 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** https://unmade.com
**Spec:** Background `{color.black}` (#000000) / Text `{color.white}` (#ffffff) / Radius 128px / Padding 18px 32px / Typography `{type.body.md}` (18px)
**States observed:** Default | Hover: captured

#### Rounded Button (Secondary)
**Role:** Alternative actions
**Pages observed:** https://unmade.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius 128px / Padding 18px 32px / Typography `{type.body.md}` (18px)
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting platform capabilities
**Pages observed:** https://unmade.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius 80px / Padding 0px / Typography `{type.body.md}` (18px)
**States observed:** Default: captured

#### Tagline Label
**Role:** Metadata and section categorization
**Pages observed:** https://unmade.com
**Spec:** Typography `{type.tagline}` (14px) / Letter spacing 1.6px / Color `{color.gray.medium}` (#939393)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Gray Surface Section
**Role:** Standard content grouping
**Pages observed:** https://unmade.com
**Spec:** Background `{color.gray.light}` (#f6f6f6) / Radius 0px / Padding 32px 32px 130px
**States observed:** Default: captured

#### Blue Surface Section
**Role:** High-impact brand messaging
**Pages observed:** https://unmade.com
**Spec:** Background `{color.blue}` (#2748ac) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 80px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px (Desktop) |
| Section Padding (Vertical) | 130px |
| Section Padding (Horizontal) | 32px |
| Grid Type | Columnar with 0px radius dividers |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked card layouts, reduced display type size, hamburger menu navigation. |
| Desktop | 1440px | Multi-column feature grids, full-width flood sections. |

## Imagery & decoration
Unmade uses high-contrast photography (e.g., black and white textures of asphalt or fabric) alongside clean product renders. Decoration is strictly geometric, using large color blocks (#fff691, #2748ac) to define page regions.

## Do's
- Use **Unica 77 LL** for all text; hierarchy must be size-based.
- Flood entire sections with `{color.blue}` or `{color.yellow}` for brand emphasis.
- Apply `{radius.button}` (128px) to all primary interactive elements.
- Maintain a strict `{radius.none}` (0px) for all layout-level containers.
- Use negative letter spacing (e.g., -1.4px) for headlines above 40px.

## Don'ts
- **Wrong:** Using a sub-brand color (like the orange #f0983f) as a primary button background. **Right:** Use #000000 or #ffffff. **Reason:** Saturated colors are for section floods, not UI components.
- **Wrong:** Bolding text for emphasis. **Right:** Increase size or change color to #000000. **Reason:** The system is built on a single 400-weight typeface.
- **Wrong:** Adding drop shadows to cards. **Right:** Use flat backgrounds or 1px borders. **Reason:** The system is flat and industrial; no shadow tokens were captured.

## Similar brands
- Vitra (Swiss typography, bold color blocks)
- On Running (Technical, monochromatic, high-performance aesthetic)
- Teenage Engineering (Industrial utility, specific color accents)

## Quick start

### CSS Custom Properties
```css
:root {
  --unmade-black: #000000;
  --unmade-white: #ffffff;
  --unmade-gray-medium: #939393;
  --unmade-gray-light: #f6f6f6;
  --unmade-blue: #2748ac;
  --unmade-yellow: #fff691;
  --font-primary: "Unica 77 LL", sans-serif;
  --radius-button: 128px;
  --radius-card: 80px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #000000;
  --color-accent-blue: #2748ac;
  --color-accent-yellow: #fff691;
  --font-unica: "Unica 77 LL";
  --radius-jumbo: 128px;
  --radius-large: 80px;
}
```

## Known gaps
- Hover and active states for the "Jumbo CTA" were not fully captured in the automated run.
- The specific mobile breakpoint for the transition from 3-column to 1-column grids is inferred from 390px/1440px samples but not explicitly tokenized.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://unmade.com | 1440px | 2026-06-06 |
| Homepage (Mobile) | https://unmade.com | 390px | 2026-06-06 |