{
  "theme": "light",
  "category": "agency",
  "tags": [
    "cool",
    "sans-only",
    "dark",
    "bold",
    "high-contrast",
    "minimal",
    "agency",
    "editorial"
  ],
  "northStar": "A design firm whose own site embodies its brief: bold human-centered ideas in a high-contrast, no-nonsense voice.",
  "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": "neutral-50-1",
      "hex": "#ffffff",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "zinc-50",
        "hex": "#fafafa",
        "deltaE": 0.015
      }
    },
    {
      "name": "green-100",
      "hex": "#d9ff00",
      "group": "green",
      "role": "green step 100",
      "tailwind": null
    },
    {
      "name": "neutral-800-1",
      "hex": "#151f27",
      "group": "neutral",
      "role": "neutral step 800",
      "tailwind": null
    },
    {
      "name": "neutral-700",
      "hex": "#333333",
      "group": "neutral",
      "role": "neutral step 700",
      "tailwind": null
    },
    {
      "name": "blue-400",
      "hex": "#7b92a5",
      "group": "blue",
      "role": "blue step 400",
      "tailwind": null
    },
    {
      "name": "blue-600-1",
      "hex": "#0000ee",
      "group": "blue",
      "role": "blue step 600",
      "tailwind": null
    },
    {
      "name": "neutral-800-2",
      "hex": "#212d3a",
      "group": "neutral",
      "role": "neutral step 800",
      "tailwind": {
        "name": "gray-800",
        "hex": "#1e2939",
        "deltaE": 0.015
      }
    },
    {
      "name": "neutral-950",
      "hex": "#000000",
      "group": "neutral",
      "role": "neutral step 950",
      "tailwind": null
    },
    {
      "name": "neutral-400",
      "hex": "#959494",
      "group": "neutral",
      "role": "neutral step 400",
      "tailwind": null
    },
    {
      "name": "neutral-50-2",
      "hex": "#f5f8fa",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "slate-50",
        "hex": "#f8fafc",
        "deltaE": 0.007
      }
    },
    {
      "name": "blue-700",
      "hex": "#253342",
      "group": "blue",
      "role": "blue step 700",
      "tailwind": null
    },
    {
      "name": "blue-600-2",
      "hex": "#516383",
      "group": "blue",
      "role": "blue step 600",
      "tailwind": null
    },
    {
      "name": "blue-600-3",
      "hex": "#536575",
      "group": "blue",
      "role": "blue step 600",
      "tailwind": null
    }
  ],
  "surfaces": [
    {
      "level": 0,
      "name": "background",
      "hex": "#ffffff",
      "purpose": "Page background"
    },
    {
      "level": 1,
      "name": "surface-1",
      "hex": "#959494",
      "purpose": "Cards / elevated panels"
    },
    {
      "level": 2,
      "name": "surface-2",
      "hex": "#333333",
      "purpose": "Elevation tier 2"
    },
    {
      "level": 3,
      "name": "surface-floor",
      "hex": "#151f27",
      "purpose": "Elevation tier 3"
    }
  ],
  "elevationPhilosophy": "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": [
    {
      "family": "Fhoscar",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "Manrope",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    }
  ],
  "typeScale": [
    {
      "role": "display",
      "size": 90,
      "lineHeight": 0.98,
      "letterSpacing": null
    },
    {
      "role": "h2",
      "size": 40,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "h3",
      "size": 40,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "ui-action",
      "size": 25,
      "lineHeight": 1.16,
      "letterSpacing": null
    },
    {
      "role": "ui-input",
      "size": 25,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "body",
      "size": 14,
      "lineHeight": 1.43,
      "letterSpacing": null
    },
    {
      "role": "link",
      "size": 14,
      "lineHeight": 1.43,
      "letterSpacing": null
    }
  ],
  "spacing": {
    "radius": {
      "none": "0",
      "xs": "2px"
    },
    "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.",
  "dos": [
    "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"
  ],
  "donts": [
    "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"
  ],
  "brandColor": {
    "hex": "#d9ff00",
    "source": "heuristic",
    "chroma": 0.223
  }
}