---
version: alpha
name: "IDEO"
description: "Human-centered design consultancy — dark navy canvas, electric alchemy yellow-green, and custom Fhoscar at light weight for editorial impact"

colors:
  # Surface / canvas
  background: "#151f27"   # --ideo-darkest — the primary dark canvas
  surface: "#1e2b38"      # lifted surface, approximately --ideo-darkest at 10% brightness lift /* estimated */
  surface-light: "#ffffff" # --ideo-bright — used for white sections and form fields

  # Text / ink
  ink: "#ffffff"           # --ideo-bright — primary text on dark canvas
  ink-muted: "#7b92a5"    # --ideo-dark — secondary/muted text
  on-background: "#ffffff"
  on-surface: "#151f27"   # text on white/light surfaces

  # Brand accent — "alchemy"
  primary: "#d9ff00"      # --ideo-alchemy — electric yellow-green; the sole chromatic interrupt
  on-primary: "#151f27"   # --ideo-darkest recycled as text on alchemy surfaces
  primary-container: "#2d3a00" # very dark yellow-green for subtle accent containers /* estimated */

  # State / interaction
  text-hover: "#536575"   # --ideo-darker — hover text on dark surfaces
  focus-ring: "#d9ff00"   # --ideo-alchemy — focus ring uses brand accent

  # Semantic
  error: "#e53e3e"
  success: "#38a169"

  # Borders
  border: "#536575"       # --ideo-darker — 1px solid border, the primary divider rule
  border-dark: "#151f27"  # --ideo-darkest — dark border on light form fields

  # Shadow tints
  shadow-soft: "#0a1018"  # near-black shadow, approximated from rgb(21,31,39) at low opacity /* estimated */

typography:
  display-hero:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 90px
    fontWeight: 300
    lineHeight: 0.98
    letterSpacing: -1px
  display:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 60px
    fontWeight: 300
    lineHeight: 0.95
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0px
  body:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0px
  nav-link:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.04em
  caption:
    fontFamily: "Fhoscar, Verdana, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 50px
  3xl: 80px
  4xl: 100px

rounded:
  none: 0px
  sm: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 18px 12px
  button-primary-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 18px 12px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "1px solid {colors.ink-muted}"
    padding: 10px 16px
  button-secondary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.surface-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-text-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
    padding: 14px 20px
  button-large-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
    padding: 14px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    border: "1px solid {colors.border-dark}"
    padding: 10px 20px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.surface-light}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 6px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 20px
---

# IDEO Design System

## Overview

IDEO's website opens with a hard statement: a near-black navy canvas (`{colors.background}`) filling the entire viewport, the logo rendered as a geometric grid of ruled squares — an "I" constructed from intersection points, as if sketched in a design sprint. Then, at the top right, a single button blazes: "Say hello" in electric `{colors.primary}`, zero border-radius, just 90px of Fhoscar at weight 300 capping a dark expanse. The effect is immediate. This is a design firm that treats its own interface as a portfolio piece — restrained, confident, and willing to put most of the real estate in service of photography and ideas rather than chrome.

Fhoscar is the system's typographic backbone — a self-hosted, proprietary grotesque serving all display and body roles across the site. At 90px with weight 300 and a line-height of 0.98, the hero heading nearly collapses into a solid mass, letterforms grazing one another with the relaxed closeness of a lithograph headline. The lightness of the weight (300) is deliberate: the firm's authority doesn't come from visual mass, but from precision and the confidence to let ideas breathe in space. At 40px and below, the family opens into comfortable reading proportion — still light, still unhurried. Supporting body copy falls back to Manrope (Google Fonts) for long-form rich text contexts, a practical interoperability layer that preserves the Fhoscar character in UI chrome while ensuring web fallback.

The chromatic system runs on four named CSS variables — `--ideo-darkest` (`{colors.background}`), `--ideo-darker` (`{colors.text-hover}`), `--ideo-dark` (`{colors.ink-muted}`), and `--ideo-alchemy` (`{colors.primary}`) — a naming convention that encodes tone as a gradated scale from deep navy to electric citron. The alchemy yellow-green is not used sparingly in the conventional sense; it appears on every primary CTA, in the footer eyebrow bar, and as a hover state for navigation links. But because the canvas is so dark and flat, the color never feels excessive — it reads as a single, recurring accent rather than a scattered pattern. The system is the same emotional logic as Instrument but inverted in context: human warmth and optimism instead of technical precision.

**Key Characteristics:**
- Fhoscar at weight 300 for all display text — a proprietary grotesque available in four weights; weight 300 signals approachability and design confidence simultaneously
- `{colors.primary}` alchemy yellow-green (`#d9ff00`) applied to all primary CTAs, hover link states, and the footer strip — the system's single chromatic exclamation point
- `{colors.background}` navy (`#151f27`) as the dominant canvas — not pure black, a deep navy with blue undertone that reads as considered darkness rather than stark void
- Zero border-radius on all primary buttons and content containers — sharp edges as a design stance; only utility chrome (cookies, checkbox) uses `6px` rounding
- CSS variable vocabulary: `--ideo-alchemy`, `--ideo-darkest`, `--ideo-darker`, `--ideo-dark`, `--ideo-bright` — the entire palette expressed as a named tone scale
- Navigation links hover to `{colors.primary}` — the brand accent doubles as the interactive affordance signal across the full UI
- Light-on-dark photography section as the hero; sections alternate between dark canvas, white field, and alchemy yellow-green for page-level rhythm
- Eyebrow labels in uppercase Fhoscar at 12px with 0.04em letter-spacing — the system's only tracked-out tier, reserved for category markers
- All transitions at 0.3s ease for links and overlays, 0.2s ease-out for buttons — consistent, unhurried interaction rhythm
- `--ideo-alchemy` underline hover on text links (`box-shadow: 0 2px 0 -1px`) — a hairline underscore that appears at the baseline rather than as a text-decoration

## Colors

### Primary Canvas
- **Deep Navy** (`{colors.background}`): The site's dominant surface — `rgb(21, 31, 39)`, the value of `--ideo-darkest`. Blue-shifted near-black that carries human warmth against pure black's starkness. Navbar, hero, dark editorial sections, and the primary page ground all resolve here.
- **Lifted Surface** (`{colors.surface}`): Approximately 10% brightness lift from the background — used for card containers, content panels, and hover-state backgrounds on the dark canvas.
- **White Field** (`{colors.surface-light}`): `--ideo-bright` — the counterpoint to the navy canvas. Rich text sections, form containers, and light editorial panels all use the full white surface. Button hover states flash to white, reversing the primary's dark text without changing shape or size.

### Brand Accent
- **Alchemy Yellow-Green** (`{colors.primary}`): `#d9ff00` — `--ideo-alchemy`. The firm's chromatic signature. Applied to: all primary CTA buttons, the footer alchemy bar, link hover states, and the `ts-link` underline hover shadow. On `{colors.primary}` surfaces, text is `{colors.on-primary}` — the darkest navy recycled, creating a two-color loop.
- **Accent Container** (`{colors.primary-container}`): A very dark yellow-green for badge backgrounds that suggest the alchemy accent without full saturation.

### Text Hierarchy
- **Bright White** (`{colors.ink}`): `--ideo-bright` — all primary text on navy surfaces. Headings, body copy, nav links at rest.
- **Steel Blue-Grey** (`{colors.ink-muted}`): `--ideo-dark` (`#7b92a5`) — secondary text, captions, subheadings on dark canvas. The color that signals "this is context, not content."
- **Mid Tone** (`{colors.text-hover}`): `--ideo-darker` (`#536575`) — hover destination for inline text links and secondary navigation. A measured step toward the canvas without crossing into invisible.

### Borders
- **Steel Divider** (`{colors.border}`): `#536575` — the `--ideo-darker` value used for `1px solid` borders on link elements and section dividers. At 30 instances in the extraction — the primary separator rule.
- **Dark Form Border** (`{colors.border-dark}`): `--ideo-darkest` used as `1px solid` on text field inputs — a border that nearly disappears into the surface, relying on background contrast to define the field.

### Shadows
- One shadow in the extraction: `rgb(21, 31, 39) 0px 1px 0px 0px` — a 1px bottom shadow in the darkest navy. The system is effectively shadowless; surfaces are differentiated through color, not depth.

## Typography

### Font Family
- **Primary**: `Fhoscar`, with fallback: `Verdana, sans-serif` — self-hosted across four weights (Light `.otf`, Regular `.otf`, Medium `.otf`, Bold `.otf`). A proprietary grotesque with wide apertures and a humanist stroke contrast at the lighter weights.
- **Rich Text / Long-Form**: `Manrope` (Google Fonts), served from CDN for the `.text-rich-text` context — weight 400, 18px, 1.5 line-height. A practical choice for editorial body text that needs web-standard fallback.
- **Secondary UI (utility/forms)**: `Inter` (Google Fonts subset) — appears at 14–16px for form labels and cookie consent UI. Not the primary design voice; a pragmatic layer for third-party embedded contexts.
- **OpenType Features**: No `font-feature-settings` declared — Fhoscar runs with default ligatures and kerning. The type is differentiated through size, weight, and letter-spacing rather than OTF tricks.

*Note: Fhoscar is a commercial typeface. Closest Google Font substitute by character is Barlow Condensed (weight 300) or Archivo Narrow. For body and display work requiring web-licensed equivalents, Barlow or Space Grotesk at light weight approximate the proportions.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Homepage and section hero statements — 90px weight 300, line-height 0.98 |
| `display` | Large section headings and CTA labels — 60px weight 300 |
| `heading-section` | Mid-tier section anchors — 40px weight 300 |
| `heading-sub` | Card headings, page subheadings, dropdown links — 30px weight 400 |
| `body-large` | Lead paragraph text, large UI labels — 25px weight 400 |
| `body` | Standard body copy and navigation labels at rest — 20px weight 400 |
| `nav-link` | Navigation link text — 20px weight 400 |
| `button-ui` | CTA labels and form buttons — 20px weight 500 |
| `eyebrow` | Category labels, section markers — 12px weight 600 uppercase `letter-spacing: 0.04em` |
| `caption` | Metadata, fine print, form hints — 14px weight 400 |

### Principles
- **Weight 300 as the display declaration**: At 90px, Fhoscar Light is structural, not decorative. The thin strokes at large scale give the heroic type a tensioned quality — present without shouting. Weight 400 steps in at body sizes for legibility; weight 500 for button labels that need to hold in a yellow-green field.
- **Tight line-height at display scale**: 0.98 at 90px, 0.95 at 60px — the descenders of one line graze the ascenders of the next. This is not a mistake; it is the same editorial density choice Pentagram makes at smaller scales, applied here at consultancy-hero proportions.
- **Uppercase eyebrows are isolated**: The only tracked-out uppercase tier is the `ts-eyebrow` token — `text-transform: uppercase`, `letter-spacing: 0.04em`, 12px weight 600. Everything else runs sentence or mixed case. The eyebrow signals taxonomy (services, sectors, case study labels) without imposing a shouty register on the broader type system.
- **Single family for nearly all UI**: Fhoscar handles every display, navigation, button, and body role. Manrope and Inter appear in narrow editorial and utility contexts — the system's practical concession to web fallback, not a design choice.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The most-used spacing values: 2px (80 instances — micro gaps), 20px (77 instances — the primary horizontal padding unit), 24px (27 instances — card and section internal padding), 4px and 8px for tight UI. Section-level breathing room extends to 100px. The 2px micro-spacing is distinctive — it suggests a system built on hairline precision rather than gestural expansion.

### Grid & Container
- Max content width: approximately 1440px at desktop (breakpoints: 430px → 480px → 768px → 992px → 1280px → 1440px → 1920px)
- Horizontal padding: 20px at all sizes — a fixed left/right rail that does not scale with viewport
- Hero section: full-viewport-width photography block, no padding, zero border-radius on imagery
- Section vertical rhythm: 100px between major sections, 50px for sub-section gaps
- Sections alternate: dark navy (`{colors.background}`) → white (`{colors.surface-light}`) → alchemy yellow-green (`{colors.primary}`) — the surface itself encodes content priority

### Whitespace Philosophy
- **Generous verticals, compact horizontals**: 100px section gaps create the impression of an un-rushed editorial magazine; the 20px fixed side rail keeps content from feeling lost at wide viewports.
- **Photography as whitespace**: Full-bleed work images function as rest zones — large chromatic surfaces that give eyes a pause before the next text block. The dark canvas amplifies the sense of space between text elements.
- **The alchemy bar claims its own zone**: The yellow-green footer/CTA strip doesn't shrink or tuck — it occupies a full-width section height, acting as a visual destination that you scroll toward. Its brightness creates a visual weight that anchors the bottom of every page.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | `{colors.background}` — all default surfaces, buttons, cards, imagery |
| Surface Step (Level 1) | `{colors.background}` → `{colors.surface}` | Card hover states — a color-step lift with no physical shadow |
| Section Break (Level 2) | Dark → White → Alchemy | Full-section background alternation as the primary depth/priority signal |
| Focus Ring | `outline: 2px solid` | Keyboard focus on interactive elements |

**Shadow Philosophy**: One shadow in the entire extraction — a `1px 0px 0px` bottom-rule in navy. IDEO does not use elevation to communicate hierarchy; it uses surface color. The navy-to-white-to-alchemy page rhythm does the work that shadows do in systems with more neutral palettes. When the canvas itself is dark and the CTA is electric yellow, you don't need a drop shadow to make a button stand out.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, content cards, images, input fields, nav — the overwhelming default |
| `sm` | 6px | Cookie consent buttons and checkbox chrome — third-party utility UI only |
| `pill` | 9999px | Unused in core UI — system is binary: hard-edged or nothing |

IDEO's shape system is the most austere in the corpus: `0px` radius on every designed element. Buttons are rectangular. Cards are rectangular. Inputs are rectangular. The `6px` that appears in the data comes exclusively from the Fides consent overlay — not IDEO's own design. The discipline is consistent enough to be a deliberate statement: sharp corners as the aesthetic language of ideas that don't need to be softened.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Alchemy yellow-green (`{colors.primary}`) fill, dark navy text (`{colors.on-primary}`), rectangular (zero radius), 9px/18px/12px padding. The `.button` class. On hover, transitions to white fill in 0.1s ease — not a color inversion, a brightness step to maximum.
- **`button-large`** — Same alchemy fill and radius, `{typography.display}` (30px) font size, expanded padding — used for section-level CTAs and the "Say hello" hero button.
- **`button-text`** — Transparent background, `{colors.primary}` text, no border. Hover shows a `0 2px 0 -1px` alchemy bottom-shadow — a hairline underscore that slides in at the baseline, distinct from standard `text-decoration: underline`.
- **`button-secondary`** — Transparent background, `{colors.ink-muted}` text and border. On hover, fills with the muted steel color — the system's de-emphasized action that avoids stealing focus from the primary alchemy CTA.

### Cards

Work and case study cards use zero border-radius, `{colors.surface}` fill, and no visible border or shadow at rest. The card image fills full card width at a fixed 420px height (`object-fit: cover`). Card title uses `{typography.heading-sub}` (30px weight 400). Category eyebrow labels render in uppercase 12px weight 600. No hover animation detected — interaction is expressed through cursor change and link navigation, not visual lift.

### Inputs

Text fields are drawn with zero border-radius, a `1px solid` border in `{colors.border-dark}` (dark navy on white surfaces, same navy on dark surfaces that creates an almost-invisible field), and 10px/20px padding. Focus border transitions to white in 0.3s ease. The field is functionally invisible until focused — the placeholder text and border are the same dark navy, relying entirely on the contrast of the surrounding white section to define the input zone. This is an intentional design choice: the form feels more like a draft surface than a data entry widget.

### Badges / Tags

Tags use the `ts-tag` pattern: `background-color: #f4f5f7`, `border: 1px solid #a6b1bf`, `8px` radius — a neutral off-white chip for content taxonomy in light-surface contexts. Category eyebrows in dark contexts use `text-transform: uppercase` Fhoscar at 12px, no container — bare uppercase text as the label format.

### Navigation

The sticky navbar sits at `{colors.background}`, 20px vertical padding. The IDEO logomark (geometric grid outline, 150×150px visually cropped) floats left. Navigation links are bare `{typography.nav-link}` (20px Fhoscar weight 400), no pill container, no visible border. At rest: dark navy text (`{colors.on-primary}` on white sections) or white text on dark. On hover: transitions to `{colors.primary}` alchemy in 0.3s ease — the entire navigation affordance is expressed through this color shift. The "Say hello" CTA renders as a filled alchemy button at top-right, providing the single contained interactive element in an otherwise text-link-only nav.

## Do's and Don'ts

### Do
- Use `{colors.primary}` for all primary CTA buttons and button hover states — the alchemy yellow-green is the system's action color; it should appear exactly where action is invited
- Apply `{rounded.none}` to all designed elements — buttons, cards, inputs, modals; sharp edges are the aesthetic commitment, not a default
- Use Fhoscar weight 300 for all display text (90px, 60px, 40px) — the lightness at scale is the voice; never step up to weight 400 or 500 at display sizes
- Let sections alternate surface — navy → white → alchemy — as the primary hierarchy signal; the surface change IS the section break, no gap or divider required
- Apply `letter-spacing: 0.04em` and `text-transform: uppercase` only on the `{typography.eyebrow}` token — 12px weight 600 for category labels only; no uppercase elsewhere in the design language
- Use `0.3s ease` for link and overlay transitions, `0.2s ease-out` for button transitions — the system's specific timing constants are intentional
- Reference `{colors.primary}` for hover states on navigation text links — the nav affordance and the CTA affordance use the same accent color
- Use the alchemy bottom-shadow (`box-shadow: 0 2px 0 -1px {colors.primary}`) for inline `button-text` hover rather than `text-decoration: underline`

### Don't
- Don't introduce any mid-tone or warm-neutral accent — the palette is a named tone scale (`ideo-darkest` → `ideo-dark`); adding an orange, teal, or coral breaks the emotional logic
- Don't round buttons or cards — the `6px` radius in the extraction comes from third-party consent chrome, not IDEO's own UI; `{rounded.none}` is the design language
- Don't use Fhoscar weight 700 (bold) for display headings — bold exists in the font file but is reserved for specific emphasis moments in body text; display hierarchy is expressed through size, not weight
- Don't add shadows — not on buttons, not on cards, not on dropdowns; the dark canvas makes shadows redundant and visually muddy
- Don't use `{colors.primary}` alchemy as a background for anything other than CTAs, the footer bar, and alchemy-section backgrounds — it is a destination, not an ambient field
- Don't break the `0px` border-radius commitment on content elements — even large content modules, hero images, and case study covers are hard-edged
- Don't use Inter or Manrope for navigation or headings — those fonts appear only in rich text body copy and embedded utility UI; Fhoscar owns all designed UI surfaces

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <430px | Single column, hero at reduced height, nav collapses to hamburger, display type scales down |
| Mobile | 430–479px | Standard mobile layout, full-bleed photography continues, CTA at full width |
| Mobile Wide | 480–767px | Slight grid expansion, dual-column possible for card grids |
| Tablet | 768–991px | Two-column card grid, nav may show partial links |
| Tablet Large | 992–1023px | Wider two-column, section padding increases |
| Desktop Small | 1024–1279px | Three-column work grid, full nav visible, hero at desktop scale |
| Desktop | 1280–1439px | Full layout, maximum section padding |
| Desktop Wide | 1440–1919px | Standard max-width container, content centers within 1440px |
| Large Desktop | 1920px+ | Content locked to container, full-bleed photography fills wider viewport |

### Touch Targets
- Primary buttons: `9px 18px` padding at 20px font — approximately 38px height; mobile variants should use `button-large` spec (14px top/bottom) for 44px minimum
- Navigation links: bare text links; mobile nav should expand to full-height item rows with adequate tap area
- Form fields: 10px/20px padding at 25px font — approximately 50px height, meets touch target standards

### Collapsing Strategy
- **Navigation**: Desktop sticky bar collapses to hamburger icon at ~480px or below; the "Say hello" CTA may persist as an always-visible element
- **Display type**: 90px hero type scales proportionally on mobile — likely 40–48px on 430px viewport. Weight 300 is maintained throughout; no weight-up on smaller screens
- **Card grid**: 3-column desktop → 2-column tablet → 1-column mobile
- **Section rhythm**: 100px vertical gaps → 50px on tablet → 24–32px on mobile; the alternating surface logic persists at all breakpoints
- **CTA bar (alchemy)**: Full-width alchemy strip maintains prominence at all breakpoints; key CTA stays above fold on mobile

### Image Behavior
- Work card images: 420px fixed height at desktop, `object-fit: cover`, zero border-radius at all breakpoints
- Hero photography: full-bleed, no radius, `object-fit: cover`, centered crop
- No art direction noted in extraction

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#151f27)
- Primary Text: `{colors.ink}` (#ffffff)
- Brand Accent: `{colors.primary}` (#d9ff00)
- Secondary Text: `{colors.ink-muted}` (#7b92a5)
- Border: `{colors.border}` (#536575)
- CTA background: `{colors.primary}`, text: `{colors.on-primary}`
- White section background: `{colors.surface-light}` (#ffffff)
- Hover link color: `{colors.primary}` (#d9ff00)

### Example Component Prompts

- "Build the IDEO hero section: full-viewport `{colors.background}` canvas. Sticky navbar at top with `{colors.background}` background, 20px vertical padding — left: IDEO grid logomark, right: 'Say hello' button in `{colors.primary}` fill, `{colors.on-primary}` text, Fhoscar 20px weight 500, zero border-radius, `9px 18px 12px` padding. Below navbar: full-bleed photography block, zero border-radius, edge-to-edge. Below the image: section heading in Fhoscar 90px weight 300, `{colors.ink}`, `line-height: 0.98`, `letter-spacing: -1px`. No shadows, no decorative elements."

- "Create an IDEO-style CTA section: `{colors.primary}` full-width background block, 100px vertical padding. Inside: large heading in Fhoscar 60px weight 300, `{colors.on-primary}`, `line-height: 0.95`. Below: a 'Get in touch' button — `{colors.surface-light}` fill, `{colors.on-surface}` text, Fhoscar 20px weight 500, zero border-radius, `9px 18px 12px` padding. On hover: button transitions to `{colors.on-primary}` text on `{colors.primary}` — the alchemy-on-dark reversal. No shadows, no rounded corners."

- "Design a work case study card for a three-column grid on `{colors.background}`: zero border-radius, no shadow, no visible border. Full-width image above (420px fixed height, `object-fit: cover`, zero radius). Below: category eyebrow in Fhoscar 12px weight 600, uppercase, `letter-spacing: 0.04em`, `{colors.ink-muted}` color. Below that: case study title in Fhoscar 30px weight 400, `{colors.ink}`, `line-height: 1.3`. Body excerpt in Fhoscar 20px weight 400, `{colors.ink-muted}`. Padding: 24px bottom."

- "Build an IDEO contact form on a `{colors.surface-light}` white section: section heading in Fhoscar 60px weight 300, `{colors.on-surface}`, `line-height: 0.95`. Text fields: transparent background, `1px solid {colors.border-dark}` border, zero border-radius, Fhoscar 25px weight 400, `10px 20px` padding. Focus: border transitions to `{colors.surface-light}` in 0.3s ease. Submit button: `{colors.primary}` fill, `{colors.on-primary}` text, Fhoscar 25px weight 400, zero border-radius, full-width, 14px top/bottom padding. Button hover: fill transitions to `{colors.surface-light}`, text to `{colors.on-surface}` in 0.1s."

- "Create the IDEO-style navigation with link hover behavior: sticky `{colors.background}` bar, 20px vertical padding, no border, no shadow. Nav links in Fhoscar 20px weight 400, `{colors.ink}` at rest. On hover: color transitions to `{colors.primary}` in 0.3s ease — no underline added, color is the only affordance signal. Active/current link also in `{colors.primary}`. Right: 'Say hello' alchemy button with 0.1s background transition to white on hover."

### Iteration Guide

1. Start with `{colors.background}` — the deep navy is the foundation. Every decision is made against this surface. Never lighten it toward a grey or introduce a mid-dark alternative.
2. The alchemy (`{colors.primary}`) appears wherever action is invited — buttons, CTAs, the footer bar, link hover states. It is not decorative. If you are considering placing `{colors.primary}` on an element that doesn't require a response from the user, reconsider.
3. Zero radius everywhere. No exceptions for designed elements. If a radius appears in context, it is from embedded third-party UI (cookie overlays, form widgets) — not IDEO's design language.
4. Fhoscar weight 300 at display sizes (90px, 60px, 40px). Weight 400 for body and reading text. Weight 500 for button labels only. Never use weight 700 for anything visible in the hero or editorial sections.
5. Section surfaces alternate: navy (`{colors.background}`) → white (`{colors.surface-light}`) → alchemy (`{colors.primary}`). Use a surface change to signal a new content zone instead of adding a divider, margin, or gap element.
6. Transitions: 0.3s ease for links and section-level overlays; 0.2s ease-out for buttons. The system does not use spring animations, transforms, or scale effects — transitions are color-only.
7. The alchemy button hover is always white (`{colors.surface-light}`) — not a darker yellow, not transparent. The bright flip is the interaction signature: alchemy → white → return.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by IDEO. Brand names and trademarks belong to their respective owners.