---
version: alpha
name: State of AI Design
description: Editorial research-report minimalism — Beausite Classic grotesque with tight negative tracking, oversized display headlines (up to 120px), pure-white canvas with warm off-white sections, true-black ink, and a tri-tone accent kit (electric blue, lavender, orange) used as section signals. Geist Mono for technical/index labels.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f6f4"     # warm off-white section band — rgb(247,246,244)
  ink: "#000000"
  ink-soft: "#212121"
  ink-2b: "#2b2b2b"           # rgb(43,43,43) — strong body
  ink-secondary: "#999999"    # rgb(153,153,153) — muted meta/caption

  # Tri-tone accent kit — section/chapter signals
  primary: "#0099ff"          # electric blue — links, primary signal
  accent-lavender: "#cdabfe"  # rgb(205,171,254)
  accent-orange: "#fe7141"    # rgb(254,113,65)
  accent-indigo: "#334891"    # deep indigo highlight
  accent-sage: "#d1ddd3"      # rgb(209,221,211) — soft sage tint

  # Borders / dividers
  border: "#e6e4e0"           # hairline on warm canvas
  border-strong: "#000000"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"
  on-accent: "#000000"

typography:
  display-mega:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 120px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -6px
  display-hero:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 85px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -4px
  display-large:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -3px
  section-heading:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.92px
  sub-heading:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.96px
  card-title:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.72px
  body-large:
    fontFamily: "Beausite Classic Regular, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.2px
  body:
    fontFamily: "Beausite Classic Regular, Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.18px
  body-small:
    fontFamily: "Beausite Classic Regular, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  body-medium:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.15px
  ui-label:
    fontFamily: "Beausite Classic Medium, Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.14px
  caption:
    fontFamily: "Beausite Classic Regular, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  pill: 9999px

components:
  # Primary CTA — solid black
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.ink-2b}"
    textColor: "{colors.on-ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 22px

  # Secondary — outline on white
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"

  # Accent link / inline emphasis
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"

  # Index / chapter label chip
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  # Case-study / content card
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Warm section panel
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 40px

  # Subscribe input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# State of AI Design Design System

## Overview

State of AI Design reads like a printed research annual translated to the web — an editorial report broken into numbered chapters (Tools, Craft, Teams), where typography does almost all the work and color is rationed for signal, never decoration. The canvas is pure white (`{colors.background}`), broken occasionally by a warm off-white band (`{colors.surface-soft}`) that gives the long-form reading rhythm without introducing a true second color. Ink is true black (`{colors.ink}`), and the whole page carries the calm authority of a typeset document rather than a marketing site.

The voice of the system is the Beausite Classic grotesque — a clean, slightly humanist neo-grotesque set with tight negative tracking. Display headlines run enormous (up to 120px) with heavy negative letter-spacing (down to roughly -0.04em to -0.06em), so titles compress into dense, confident blocks. Medium is the workhorse weight for headings and UI; Regular carries body copy. The effect is magazine-grade: oversized, tightly-tracked headers over generous, readable body text. Geist Mono handles index numbers, chapter labels, and technical captions — a quiet nod to the subject matter (AI tooling) without leaning on cliché.

Color appears as a tri-tone accent kit rather than a brand color: electric blue (`{colors.primary}`) for links and primary signal, lavender (`{colors.accent-lavender}`) and orange (`{colors.accent-orange}`) as chapter/section accents, with deep indigo and soft sage as occasional highlights. These accents punctuate an otherwise achromatic layout — a colored rule, a highlighted phrase, a chapter marker — and never flood a surface. Chrome stays black-on-white; the color lives in the editorial layer.

Structure is built on hairline rules and whitespace. Sections are separated by thin dividers (`{colors.border}`) and very large vertical spacing (up to `{spacing.4xl}`), letting the giant headlines breathe. Corners are mostly squared or barely rounded; pills appear only on CTAs and chips. The result is restrained, literary, and unmistakably a *report* — closer to a design publication than a product page.

**Key Characteristics:**
- Beausite Classic grotesque (Medium for headings/UI, Regular for body) with tight negative tracking (-0.04em to -0.06em at display)
- Oversized editorial display scale — 120px / 85px / 72px headlines
- Pure-white canvas alternating with a warm off-white band (`{colors.surface-soft}`)
- True-black (`{colors.ink}`) ink for maximum print-like contrast
- Tri-tone accent kit (blue / lavender / orange) used as chapter signals, never as surface fills
- Geist Mono for index numbers, chapter labels, and technical captions
- Hairline rules + massive whitespace for section rhythm
- Squared-to-barely-rounded corners; pills reserved for CTAs and chips

## Colors

### Canvas & Ink
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark.
- **Warm Off-White** (`{colors.surface-soft}`): Alternating section bands, soft panels, chip backgrounds.
- **True Black** (`{colors.ink}`): Headlines, body emphasis, chrome, primary CTA fill.
- **Soft Ink** (`{colors.ink-soft}`) / **Strong Body** (`{colors.ink-2b}`): Slightly relaxed black for large body blocks and hover states.
- **Muted Meta** (`{colors.ink-secondary}`): Captions, metadata, secondary labels.

### Accent Kit (chapter signals)
- **Electric Blue** (`{colors.primary}`): Links, primary signal, active markers.
- **Lavender** (`{colors.accent-lavender}`): Chapter/section accent, highlights.
- **Orange** (`{colors.accent-orange}`): Chapter/section accent, callouts.
- **Deep Indigo** (`{colors.accent-indigo}`): Occasional editorial highlight.
- **Soft Sage** (`{colors.accent-sage}`): Subtle tinted panel accent.

### Borders
- **Hairline Border** (`{colors.border}`): Dividers, card outlines on white.
- **Strong Border** (`{colors.border-strong}`): Outline buttons, inputs — full black hairline.

## Typography

### Font Family
- **Primary**: `Beausite Classic` (Medium for headings/UI, Regular for body), fallbacks `Inter, Arial, sans-serif`.
- **Monospace**: `Geist Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. (Fragment Mono appears as a secondary mono in places.)

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-mega` | 120px chapter/cover headlines — maximum impact |
| `display-hero` | 85px primary hero headline |
| `display-large` | 72px large section openers |
| `section-heading` | 48px section titles |
| `sub-heading` | 32px sub-sections |
| `card-title` | 24px card / case-study titles |
| `body-large` | 20px lead paragraphs |
| `body` | 18px standard reading text |
| `body-small` | 16px secondary copy |
| `body-medium` | 15px emphasized UI text |
| `ui-label` | 14px nav, buttons, labels |
| `caption` | 13px metadata |
| `mono-label` | 13px Geist Mono index/chapter labels |
| `mono-caption` | 12px Geist Mono technical captions |

### Principles
- **Oversized & tight**: Display headlines run very large with aggressive negative tracking (-0.04em to -0.06em) — the editorial signature.
- **Two weights, clear roles**: Medium (500) for headings and UI, Regular (400) for body. Heavier weights (700/900) appear only for rare display emphasis.
- **Mono as index voice**: Geist Mono carries chapter numbers and technical labels, separating the "publication apparatus" from the prose.
- **Body stays generous**: Reading text sits at 18–20px with relaxed line-height for long-form comfort.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Sections use very large vertical spacing (`{spacing.3xl}`–`{spacing.4xl}`) to let oversized headlines breathe.

### Grid & Container
- Centered single-column reading measure for prose, widening to multi-column for card grids
- Generous outer margins; content rarely spans full viewport width
- Section bands (`{colors.surface-soft}`) span edge-to-edge to mark chapter shifts

### Whitespace Philosophy
- **Publication rhythm**: Big vertical gaps and hairline rules pace the report like printed pages.
- **Compressed text, expanded space**: Tightly-tracked giant headlines are offset by large surrounding whitespace.
- **Color as punctuation**: Accents interrupt the achromatic field at chapter boundaries only.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Squared section panels, rules |
| `xs` | 4px | Chips, small labels |
| `sm` | 8px | Inputs |
| `md` | 12px | Small cards |
| `lg` | 16px | Cards, soft panels |
| `pill` | 9999px | CTA buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid black pill, white text, 14px Beausite Medium.
- **`button-secondary`** — White with full-black hairline outline, pill.

### Cards
- **`card`** — White with hairline border, 16px radius.
- **`card-soft`** — Warm off-white panel for chapter callouts, 40px padding.

### Chips & Labels
- **`badge`** — Off-white chip with Geist Mono label (chapter index / tag).

### Inputs
- **`input`** — White, black hairline outline, subscribe field.

### Navigation
- **`nav-bar`** — White sticky header, black 14px Beausite Medium links, hairline bottom border.

## Do's and Don'ts

### Do
- Set headlines very large with tight negative tracking (-0.04em to -0.06em)
- Use Beausite Medium for headings/UI, Regular for body
- Keep chrome achromatic — black ink on white, with the warm band for rhythm
- Use accents (blue/lavender/orange) as chapter signals and link/highlight color only
- Use Geist Mono for index numbers and technical labels
- Pace sections with hairline rules and large whitespace

### Don't
- Don't flood surfaces with the accent colors — they are punctuation
- Don't loosen tracking on display headlines
- Don't introduce a true second background color beyond the warm off-white band
- Don't use pill radius on cards — pills are for CTAs and chips
- Don't mix mono into running prose — it marks apparatus, not reading text

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}` / warm band `{colors.surface-soft}`
- Heading + body text: True Black `{colors.ink}`
- Muted meta: `{colors.ink-secondary}`
- Link / primary signal: Electric Blue `{colors.primary}`
- Chapter accents: Lavender `{colors.accent-lavender}`, Orange `{colors.accent-orange}`
- Border: Hairline `{colors.border}` / strong `{colors.border-strong}`

### Example Component Prompts
- "Create an editorial hero on white. Headline at 85px Beausite Classic Medium, line-height 1.0, letter-spacing -4px, color `{colors.ink}`. Lead paragraph at 20px Regular, `{colors.ink-2b}`. Black pill CTA (`{colors.ink}`, 9999px radius, 12px 22px) and outline ghost (white, black hairline)."
- "Build a chapter marker: Geist Mono 13px index label in an off-white chip (`{colors.surface-soft}`, 4px radius), followed by a 48px Beausite Medium section title, letter-spacing -1.92px."
- "Design a content card: white, 1px `{colors.border}`, 16px radius, 24px padding. Title 24px Beausite Medium letter-spacing -0.72px, body 16px Regular `{colors.ink-2b}`."

### Iteration Guide
1. Oversize and tighten headlines first — that is the identity.
2. Two weights only: Medium (announce/UI), Regular (read).
3. Keep the canvas black-on-white; reach for the warm band before any other color.
4. Accents are chapter signals and links — never surface fills.
5. Geist Mono marks the report apparatus (indices, labels), not prose.

---

## 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 State of AI Design. Brand names and trademarks belong to their respective owners.