# IDEO · Design system migration spec

> Source: https://www.ideo.com  ·  Curated by OpenDesign  ·  en

> This site is a quintessential example of high-end studio branding that balances creative experimentation with rigorous structural clarity.

## 1. Identity DNA

This design system is a high-end creative agency portfolio that feels both experimental and rigorously structured. It is a premium design consultancy showcasing human-centered futures with bold, restrained confidence, balancing creative experimentation with rigorous structural clarity.

**One-liner:** Premium design consultancy showcasing human-centered futures with bold, restrained confidence.
**Keywords:** design · innovation · human-centered · creative studio · strategic
**Analogy:** A high-end creative agency portfolio that feels both experimental and rigorously structured.

## 2. Color

The palette is built on a deep navy-charcoal foundation, accented by a singular, vibrant chartreuse for maximum impact. This high-contrast dark mode establishes a singular, dominant accent against dark backgrounds.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151F27` | main background |
| `--bg-soft` | `#F7FAFC` | card background |
| `--bg-quiet` | `#2B2E35` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#7B92A5` | placeholder |
| `--accent` | `#D9FF00` | single accent |
| `--line` | `rgba(123,146,165,0.2)` | divider |

**Color principle:** High contrast dark mode with a singular, vibrant chartreuse accent for maximum impact.

The principle is disciplined contrast: a strict, singular accent color against a deep, neutral canvas.

## 3. Typography

The typographic voice pairs a sharp, elegant Didone serif for primary display text with a clean humanist sans-serif for all supporting UI copy. This establishes a premium, sophisticated hierarchy, with tight negative tracking on large display text for a dense, intentional look.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Large hero headlines |
| heading | 40px | 1.1 | 400 | 0 | Section titles and testimonial names |
| body | 18px | 1.5 | 400 | 0 | General content and descriptions |

**Type rules:**
- Use a sharp, elegant Didone serif for primary display text to establish a premium feel.
- Pair with a clean humanist sans-serif for all supporting UI text and body copy.
- Maintain tight negative tracking on large display text for a dense, intentional look.

## 4. Spacing

The system is built on an 8px base grid, using generous padding to create rhythmic, airy breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous 24px and 32px padding for breathing room.

## 5. Surfaces

Depth is communicated through subtle, single-pixel border effects rather than heavy shadows or rounded shapes. The aesthetic relies on structural separation and clean geometric lines.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px rgb(21, 31, 39) for subtle border effects
- **Borders:** Minimal use of 1px solid borders, primarily for structural separation.

## 6. Layout

The layout alternates between wide, full-bleed photographic heroes and content constrained to a centered 1280px container. This creates a rhythmic, spacious flow that prioritizes clear, focused presentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Wide, full-bleed photography heroes followed by content constrained to a 1280px centered container.

## 7. Motion & Interaction

Motion philosophy favors smooth, 0.3-second transitions applied globally for a refined and intentional feel. Transform-based animations provide subtle positional shifts, while interaction feedback is immediate and crisp.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth 0.3s transitions on interactive elements like buttons and hovers.
  - Transform-based animations for subtle positional shifts on scroll or interaction.

- **Hover:** Subtle background color shifts or text color changes on interactive elements.
- **Click:** Immediate visual feedback with 0.1s background-color transitions.
- **Transition:** Global 0.3s transition applied to most properties for smooth state changes.
- **Keyboard:** Standard focus states using the primary accent color for visibility.

## 8. Voice & Don'ts

The editorial voice is authoritative, visionary, and deeply human-centered. Headlines are bold, evocative, and concise, while calls to action are direct and inviting, emphasizing connection over corporate jargon.

- **Tone:** Authoritative, visionary, and deeply human-centered.
- **Headline style:** Bold, evocative, and concise statements that challenge conventional thinking.
- **CTA style:** Direct and inviting (e.g., 'Say hello'), emphasizing connection.
- **Avoid:** Jargon-heavy corporate speak / Aggressive sales language / Overly casual or playful slang

### Don'ts
- ❌ Don't use multiple competing accent colors — screenshot shows a single, dominant chartreuse accent against dark backgrounds.
- ❌ Don't use overly rounded or bubbly shapes — screenshot shows sharp geometric lines and precise wireframe overlays.
- ❌ Don't clutter the layout with dense text blocks — screenshot shows generous whitespace and large photographic breaks.
- ❌ Don't use playful or comic-style fonts — screenshot shows a sophisticated Didone serif and clean sans-serif pairing.
- ❌ Don't use bright, multi-colored gradients — screenshot shows solid dark backgrounds with flat, high-contrast accents.
- ❌ Don't obscure primary content with heavy UI overlays — screenshot shows clear, focused presentation of key information.

They deliberately avoid cluttered layouts, multiple accent colors, and any form of playful or comic-style typography.

## System Prompt (paste into AI tool)

```
This is a premium design studio website characterized by a sophisticated dark mode aesthetic with a single, vibrant chartreuse accent (#D9FF00). The layout uses a sharp Didone serif for headlines and a clean humanist sans-serif for body text, set against a deep navy-blue background (#151F27). Key elements include full-bleed photography, geometric wireframe overlays, and generous whitespace that emphasizes a visionary, human-centered approach. Critical design constraints: Do not introduce multiple accent colors; maintain the strict two-typeface hierarchy; and preserve the large-scale, airy layout without cluttering it with unnecessary UI elements or heavy borders. The overall feel is premium, structured, and intentionally experimental.
```
