# IDEO : Human-centered design — Design System

## North Star
> A design firm whose own site embodies its brief: bold human-centered ideas in a high-contrast, no-nonsense voice.

**Theme:** light
**Category:** agency
**Tags:** `cool` · `sans-only` · `dark` · `bold` · `high-contrast` · `minimal` · `agency` · `editorial`

## Description
IDEO leans hard into a near-black canvas with a single radioactive-yellow accent for headlines, CTAs, and FAQ chevrons. Massive display type sets the tone (Human-centered ingenuity), while editorial photography of work, people, and case studies fills card grids underneath. Sans-serif throughout, generous vertical rhythm, and a unified design-system feel: black, yellow, gray, no third color. The site is its own portfolio.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-50-1 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| green-100 | `#d9ff00` | green | green step 100 | — |
| neutral-800-1 | `#151f27` | neutral | neutral step 800 | — |
| neutral-700 | `#333333` | neutral | neutral step 700 | — |
| blue-400 | `#7b92a5` | blue | blue step 400 | — |
| blue-600-1 | `#0000ee` | blue | blue step 600 | — |
| neutral-800-2 | `#212d3a` | neutral | neutral step 800 | `gray-800` (Δ0.015) |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-400 | `#959494` | neutral | neutral step 400 | — |
| neutral-50-2 | `#f5f8fa` | neutral | neutral step 50 | `slate-50` (Δ0.007) |
| blue-700 | `#253342` | blue | blue step 700 | — |
| blue-600-2 | `#516383` | blue | blue step 600 | — |
| blue-600-3 | `#536575` | blue | blue step 600 | — |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#959494` | Cards / elevated panels |
| 2 | surface-2 | `#333333` | Elevation tier 2 |
| 3 | surface-floor | `#151f27` | Elevation tier 3 |

**Elevation philosophy.** Cards stay flat against the dark canvas with a thin lighter border. The yellow accent is the only true 'foreground' tier — everything else lives in a quiet two-tone hierarchy.

## Typography

### Fhoscar — weight 400
*body*

### Manrope — weight 400
*body*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `display` | 90px | 0.98 |  |
| `h2` | 40px | 1 |  |
| `h3` | 40px | 1 |  |
| `ui-action` | 25px | 1.16 |  |
| `ui-input` | 25px | 1.4 |  |
| `body` | 14px | 1.43 |  |
| `link` | 14px | 1.43 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `xs`: 2px

**Spacing**
- `base`: 1px

## Layout
Vertical rhythm: hero headline → card grid of recent projects → second display headline → photo grid of people → FAQ accordion. Generous whitespace; sections breathe.

## Imagery
Editorial photography of design work, case studies, and people — color-rich photos floating on the dark canvas. Yellow occasionally appears as a graphic element overlaid on imagery.

## Do
- Pair the near-black background (#0E0E0E) with a single high-saturation yellow accent
- Use display-scale headlines as the primary navigational rhythm
- Frame photos in soft-cornered cards with thin borders, never shadowed
- Reserve yellow for CTAs, expand chevrons, and important inline emphasis

## Don't
- Don't introduce a third color — black, yellow, gray IS the system
- Don't soften the contrast; the punch is the personality
- Don't use serif type — IDEO's voice is engineered sans, not editorial
- Don't shadow the cards — clean borders on the dark canvas do the elevation