---
name: IDEO
description: "This site is a quintessential example of high-end studio branding that balances creative experimentation with rigorous structural clarity."
version: alpha

colors:
  background: "#151F27"
  primary: "#333333"
  secondary: "#FFFFFF"
  tertiary: "#D9FF00"
  neutral: "#7B92A5"
  bg-soft: "#F7FAFC"
  bg-quiet: "#2B2E35"
  line: "rgba(123,146,165,0.2)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium design consultancy showcasing human-centered futures with bold, restrained confidence.

*A high-end creative agency portfolio that feels both experimental and rigorously structured.*

## Colors

High contrast dark mode with a singular, vibrant chartreuse accent for maximum impact.

- **Background (`#151F27`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#D9FF00`)** — uses `accent` token
- **Muted (`#7B92A5`)** — uses `muted` token
- **Borders (`rgba(123,146,165,0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* 8px base grid with generous 24px and 32px padding for breathing room.

## Elevation & Depth

- 0px 1px 0px 0px rgb(21, 31, 39) for subtle border effects
- Borders: Minimal use of 1px solid borders, primarily for structural separation.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast chartreuse CTA with black text; secondary buttons are dark with subtle borders.
- **card:** Clean, borderless cards featuring large photography and overlaid typography.
- **chip:** Minimal, text-based navigation chips without heavy containers.
- **input:** Standard form inputs with subtle borders and dark backgrounds matching the theme.
- **hero:** Full-bleed photographic hero with bold typography overlay and geometric wireframe graphics.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```