DESIGN.md inspired by Magic

---
name: Magic
tagline: 'Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent.'
updated_at: 2026-05-29T21:43:38.103Z
published_at: 2026-05-29T21:43:38.103Z
author: webdesignhot
source_url: https://magic.dev
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [light, minimal, sans, research, sharp]
preview_swatch: ['#ffffff', '#0090ff', '#1c2024']
related: []
description: 'Magic builds frontier code-generation models, and the site reads like the lab notebook rather than the launch poster. The canvas is pure white `#ffffff`, the ink is a cool near-black `#1c2024` (Radix gray-12), and the display family is Aeonik — held at weight 400 even at the 46px hero, paired with Suisse Intl for body at a calm 17.5px. The only chromatic voltage is a single radix blue `#0090ff` (--color-blue-9), used as an accent rather than a hero CTA fill — the audit found no colored hero button at all. Corners are sharp (0px radius on the document body), depth is hairline-only, and the whole surface holds a sparse research register: lots of white, very little decoration, type doing nearly all the work.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: border-strong

themes:
  default: light
  available: [light]
  switch-via: 'none — light-only research surface; no theme toggle present in production'

colors:
  bg: '#ffffff'                  # pure white page canvas
  surface: '#ffffff'            # cards share the canvas — depth via hairline only
  surface-soft: '#fcfcfd'       # Radix gray-1 — faintest tonal break band
  surface-muted: '#f9f9fb'      # Radix gray-2 — alternate quiet band
  text: '#1c2024'               # cool near-black ink (Radix gray-12)
  text-strong: '#1c2024'
  text-body: '#2c2d2f'          # Radix gray-11.5 — running paragraph ink
  text-muted: '#60646c'         # Radix gray-11 — secondary copy, captions (AA on white)
  text-faint: '#80838d'         # Radix gray-10 — low-emphasis hints
  text-disabled: '#8b8d98'      # Radix gray-9 — disabled / placeholder
  brand: '#0090ff'              # radix blue-9 — the single accent; not a hero CTA fill
  brand-hover: '#0586f0'        # radix blue-10 — hover/press step
  brand-strong: '#0d74ce'       # radix blue-11 — AA-safe blue for body-size links
  brand-ink: '#113264'          # radix blue-12 — deepest blue, rare emphasis
  on-brand: '#ffffff'           # white on blue — for the rare filled blue surface
  link: '#0d74ce'               # body-size links use blue-11 (AA), not blue-9
  link-hover: '#0090ff'         # hover lifts to the brand blue-9
  border: '#e8e8ec'             # Radix gray-4 — 1px hairline divider, the primary depth tool
  border-soft: '#f0f0f3'        # Radix gray-3 — lighter divider for nested rows
  border-strong: '#d9d9e0'      # Radix gray-6 — input / focused panel outline
  border-translucent: 'rgba(0, 8, 48, 0.094)'  # Radix gray-a4 — alpha hairline over imagery
  diff-insert-bg: '#ecfdee'     # inserted-line gutter tint inside code/diff blocks
  diff-delete-bg: '#feeced'     # removed-line gutter tint inside code/diff blocks
  diff-delete-surface: '#fcf7f8' # removed-line body tint inside code/diff blocks
  success: '#2c8849'            # quiet green — confirmation states
  warning: '#bb6a00'            # amber — caution states (rare on a research surface)
  danger: '#c62a44'             # red — validation errors, destructive confirms
  info: '#0090ff'              # informational banners reuse the brand blue
  shadow-tint: 'rgba(0, 5, 9, 0.06)'  # cool ink-with-alpha — every shadow is tinted, never pure black

typography:
  display:
    family: 'Aeonik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
    opentype: ['kern', 'liga']
  body:
    family: '"Suisse Intl", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600, 700]
    opentype: ['kern', 'liga']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 64, weight: 400, lineHeight: 1.04, tracking: '-0.02em',  family: display }
    display-lg:      { size: 52, weight: 400, lineHeight: 1.06, tracking: '-0.018em', family: display }
    h1:              { size: 46, weight: 400, lineHeight: 1.08, tracking: '-0.016em', family: display }
    h2:              { size: 34, weight: 500, lineHeight: 1.15, tracking: '-0.012em', family: display }
    h3:              { size: 26, weight: 500, lineHeight: 1.22, tracking: '-0.008em', family: display }
    h4:              { size: 20, weight: 500, lineHeight: 1.3,  tracking: '-0.004em', family: display }
    eyebrow:         { size: 15.5, weight: 700, lineHeight: 1.3, tracking: '0',       family: body }
    body-lg:         { size: 17.5, weight: 400, lineHeight: 1.6, tracking: '0',       family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0.01em',   family: body }
    button:          { size: 15, weight: 500, lineHeight: 1.0,  tracking: '0',        family: body }
    code:            { size: 13.5, weight: 400, lineHeight: 1.55, tracking: '0',      family: mono }
    code-label:      { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: mono }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 6
  lg: 8
  xl: 12
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1200
  prose-width: 680
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 120
  duration-standard: 200
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — transitions collapse to opacity-only'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none — depth comes from 1px hairline + white-canvas contrast'
  ambient: 'rgba(0, 5, 9, 0.04) 0 1px 2px'
  standard: 'rgba(0, 5, 9, 0.06) 0 4px 16px'
  elevated: 'rgba(0, 5, 9, 0.10) 0 12px 32px'
  ring: '0 0 0 2px rgba(0, 144, 255, 0.45)'

accessibility:
  contrast-text-on-bg: 16.39        # #1c2024 on #ffffff — AAA at all sizes
  contrast-body-on-bg: 5.94         # #60646c muted on #ffffff — AA at body
  contrast-link-on-bg: 4.77         # #0d74ce blue-11 on #ffffff — AA at body
  contrast-brand-on-bg: 3.26        # #0090ff blue-9 on #ffffff — UI/large only, NOT AA body
  focus-ring: '2px solid #0090ff with 2px offset on #ffffff'
  reduced-motion-honored: true
  keyboard-nav: 'tab order follows visual order; visible focus ring on every interactive element'

components:
  button-primary:
    background: '#1c2024'
    text: '#ffffff'
    radius: 6
    padding: '10px 18px'
    height: 40
    font: button
    hover: 'background #2c2d2f; no transform'
    use: 'primary action — ink-on-white, the page has no colored hero CTA so ink carries it'
  button-secondary:
    background: '#ffffff'
    text: '#1c2024'
    border: '1px solid #d9d9e0'
    radius: 6
    padding: '9px 17px'
    height: 40
    font: button
    hover: 'background #fcfcfd; border #cdced6'
    use: 'secondary action — bordered ghost on white'
  button-ghost:
    background: 'transparent'
    text: '#1c2024'
    radius: 6
    padding: '9px 14px'
    font: button
    hover: 'background rgba(0, 8, 48, 0.094)'
    use: 'tertiary text-only action in dense rows / nav'
  button-link:
    background: 'transparent'
    text: '#0d74ce'
    radius: 0
    padding: '0'
    font: button
    hover: 'text #0090ff; underline appears'
    use: 'inline blue text action — the closest thing to a brand-colored button'
  card:
    background: '#ffffff'
    text: '#1c2024'
    border: '1px solid #e8e8ec'
    radius: 8
    padding: 24
    shadow: 'none — hairline + white-canvas contrast'
    use: 'feature card / research entry / index row'
  input:
    background: '#ffffff'
    text: '#1c2024'
    border: '1px solid #d9d9e0'
    radius: 6
    padding: '10px 14px'
    height: 40
    focus: 'border #0090ff; ring 0 0 0 2px rgba(0, 144, 255, 0.20)'
    use: 'email / search / form input'
  badge:
    background: '#f0f0f3'
    text: '#60646c'
    radius: 4
    padding: '3px 8px'
    font: label
    use: 'NEW / RESEARCH / status tag — quiet gray, sharp corners'
  badge-accent:
    background: '#e7f4fe'
    text: '#0d74ce'
    radius: 4
    padding: '3px 8px'
    font: label
    use: 'accented tag — pale blue-3 ground, blue-11 text'
  nav-link:
    background: 'transparent'
    text: '#1c2024'
    font: button
    padding: '8px 12px'
    hover: 'text #0090ff'
    use: 'top-nav menu items'

dark-mode: none

lineage:
  summary: |
    Magic's site is frontier-lab minimalism. The canvas is pure
    white `#ffffff`, the ink is a cool near-black `#1c2024` (the top
    step of the Radix gray scale, gray-12), and the entire neutral
    system is Radix gray 1–12 plus its alpha companions — a deliberate,
    engineered ramp rather than ad-hoc grays. Display runs in Aeonik,
    held at weight 400 even at the 46px hero, with negative tracking;
    body is Suisse Intl at a calm 17.5px, also weight 400. The only
    chromatic voltage is a single radix blue `#0090ff` (--color-blue-9),
    and the audit found it used as an accent — links, focus, the odd
    highlight — never as a filled hero CTA. Corners are sharp (the
    document body computes 0px radius), depth is hairline-only, and
    diff/code surfaces carry their own quiet green/red gutter tints.
    Where most AI-lab marketing reaches for gradients, glow and a loud
    hero button, Magic does the opposite: white space, restrained type,
    one blue, and a register that reads like a research note. The two
    Swiss-Intl/Aeonik families place it squarely in the modern
    Swiss-grotesque dev-tool lineage — closer to a typeset paper than
    a SaaS landing page.
  influences:
    - name: 'Aeonik'
      role: 'Geometric grotesque display family — held at weight 400 across the hero and headings for a calm, neutral voice'
      url: 'https://cstmfonts.com/aeonik'
    - name: 'Suisse Intl'
      role: 'Swiss neo-grotesque body family — running text at 17.5px/400, the quiet workhorse of the page'
      url: 'https://www.swisstypefaces.com/fonts/suisse/'
    - name: 'Radix Colors'
      role: 'The entire neutral (gray 1–12 + alpha) and accent (blue 1–12) ramp — gray-12 ink, blue-9 brand'
      url: 'https://www.radix-ui.com/colors'
    - name: 'Stripe Press'
      role: 'Paper-white editorial restraint, hairline-only depth, type-led layout with generous whitespace'
      url: 'https://press.stripe.com'
    - name: 'Linear'
      role: 'Dev-tool grotesque discipline — sharp neutral surfaces, a single cool accent, minimal chrome'
      url: 'https://linear.app'
    - name: 'Anthropic Research'
      role: 'Frontier-lab research register — sparse, sober, type-forward pages that read like notes, not pitches'
      url: 'https://www.anthropic.com/research'
---

## 1. Visual Theme & Atmosphere

Magic builds frontier code-generation models, and the marketing
surface is tuned to read like the lab's notebook rather than its
launch poster. The canvas is pure white `#ffffff` — no cream, no
tint, no gradient wash — and the ink is `#1c2024`, a cool near-black
that is literally the top step of the Radix gray scale (gray-12).
The whole neutral system underneath is Radix gray 1 through 12 plus
the alpha companions, which means every divider, every muted caption,
every faint hint is a considered step on an engineered ramp rather
than an ad-hoc gray. The effect is sober and precise.

The display family is Aeonik, a geometric grotesque, and the most
telling decision is that it is held at weight **400** even at the
46px hero. Where nearly every AI-lab site reaches for 600/700 to
shout, Magic lets a regular-weight grotesque carry the headline with
negative tracking (`-0.016em` at h1). Body is Suisse Intl — a Swiss
neo-grotesque — at a calm 17.5px, also weight 400, with a generous
1.6 line height. The one place weight jumps is the small eyebrow /
sub-label (15.5px at weight 700), which acts as a typographic
punctuation mark inside the otherwise even-weight field.

The single chromatic voltage is a radix blue `#0090ff` — Radix
blue-9, `hsl(206, 100%, 50%)`. Critically, the audit found **no
colored hero CTA**: the page does not lean on a big blue button.
The blue shows up as an accent — links (in its AA-safe blue-11 step
`#0d74ce` at body size), focus rings, the occasional highlight — and
otherwise the page is ink-on-white. Primary actions, where they
exist, are carried by ink `#1c2024` on white, not by chroma.

Corners are sharp. The document body computes a 0px radius, and the
radius ladder stays tight (6–8px on the few rounded elements). Depth
is hairline-only: a 1px Radix gray-4 `#e8e8ec` border does the work
that a drop shadow does elsewhere, and the rare shadow is cool-tinted
(`rgba(0, 5, 9, alpha)`) rather than pure black. Even the code and
diff surfaces are restrained — quiet green `#ecfdee` and red `#feeced`
gutter tints, nothing saturated.

Reading the page feels like reading a typeset research note:
abundant white space, restrained type, one blue, and almost no
decoration. The type does nearly all of the work, and the sparseness
is the message — this is a lab confident enough to under-design.

**Key Characteristics:**
- Pure white canvas `#ffffff` — never tinted, never gradient-washed.
- Cool near-black ink `#1c2024` — Radix gray-12, not pure black.
- Aeonik display held at weight 400 even at the 46px hero.
- Suisse Intl body at 17.5px/400 with calm 1.6 line height.
- Single accent: radix blue `#0090ff` (blue-9) — used as accent, not hero CTA.
- No colored hero button — primary action is ink-on-white.
- Body-size links use AA-safe blue-11 `#0d74ce`, not blue-9.
- Entire neutral ramp is Radix gray 1–12 + alpha companions.
- Sharp corners (0px body radius; 6–8px on the few rounded elements).
- Hairline-only depth — 1px `#e8e8ec` borders, cool-tinted shadows.
- Sparse research register — whitespace-led, decoration-minimal.

## 2. Color Palette & Roles

### Canvas / Surface

- **Background** (`#ffffff`) [→ body bg]: pure white page canvas. Cards share it; depth is hairline, not fill.
- **Surface** (`#ffffff`): cards and panels sit on the same white as the page — separation comes from a 1px border.
- **Surface Soft** (`#fcfcfd`) [→ --color-gray-1]: faintest tonal break for an alternate band.
- **Surface Muted** (`#f9f9fb`) [→ --color-gray-2]: second quiet band, e.g. table zebra or footer ground.

### Text

- **Text** (`#1c2024`) [→ --color-gray-12]: cool near-black ink. Carries display and body alike — AAA on white.
- **Text Body** (`#2c2d2f`) [→ --color-gray-11.5]: long-form running paragraph ink, a hair softer than gray-12.
- **Text Muted** (`#60646c`) [→ --color-gray-11]: secondary copy, captions, metadata — AA at body on white.
- **Text Faint** (`#80838d`) [→ --color-gray-10]: low-emphasis hints (large/UI only).
- **Text Disabled** (`#8b8d98`) [→ --color-gray-9]: disabled labels and placeholder text.

### Brand / Accent

- **Brand** (`#0090ff`) [→ --color-blue-9]: the single accent. UI accent, focus, highlights — not a filled hero CTA. UI/large contrast only.
- **Brand Hover** (`#0586f0`) [→ --color-blue-10]: hover / press step on interactive blue.
- **Brand Strong** (`#0d74ce`) [→ --color-blue-11]: the AA-safe blue for body-size text and links on white.
- **Brand Ink** (`#113264`) [→ --color-blue-12]: deepest blue, rare heavy emphasis on pale blue grounds.

### Interactive

- **Link** (`#0d74ce`): body-size links default to blue-11 for AA contrast — never raw blue-9.
- **Link Hover** (`#0090ff`): hover lifts to brand blue-9; underline appears.
- **Focus Ring** (`rgba(0, 144, 255, 0.45)`): blue focus ring on every interactive element.

### Borders

- **Border** (`#e8e8ec`) [→ --color-gray-4]: 1px hairline divider — the system's primary depth tool.
- **Border Soft** (`#f0f0f3`) [→ --color-gray-3]: lighter divider for nested rows and table lines.
- **Border Strong** (`#d9d9e0`) [→ --color-gray-6]: input outlines and stronger panel edges.
- **Border Translucent** (`rgba(0, 8, 48, 0.094)`) [→ --color-gray-a4]: alpha hairline for overlays on imagery.

### Code & Diff

- **Diff Insert BG** (`#ecfdee`): inserted-line gutter tint inside code / diff blocks.
- **Diff Delete BG** (`#feeced`): removed-line gutter tint inside code / diff blocks.
- **Diff Delete Surface** (`#fcf7f8`): removed-line body tint, softer than the gutter.

### Shadow

- **Shadow Tint** (`rgba(0, 5, 9, 0.06)`): every shadow is cool ink-with-alpha, never pure black — keeps the neutral cool.

### Semantic

- **Success** (`#2c8849`): quiet green — confirmation states, success toasts.
- **Warning** (`#bb6a00`): amber — caution states (rare on a research surface).
- **Danger** (`#c62a44`): red — validation errors, destructive confirms.
- **Info** (`#0090ff`): informational banners reuse the brand blue.

## 3. Typography Rules

### Font Family

- **Display:** `Aeonik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`. Aeonik is a geometric grotesque held at weight 400 across the hero and headings — neutral, calm, slightly mechanical apertures.
- **Body:** `"Suisse Intl", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`. Suisse Intl is a Swiss neo-grotesque — the running-text workhorse at 17.5px/400.
- **Mono:** `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. System mono on code and diff surfaces; no licensed mono shipped.
- **OpenType features:** `kern`, `liga` enabled site-wide.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Aeonik | 64 | 400 | 1.04 | -0.02em | Largest hero, top of homepage |
| display-lg | Aeonik | 52 | 400 | 1.06 | -0.018em | Section-opening display |
| h1 | Aeonik | 46 | 400 | 1.08 | -0.016em | Page h1 — calm 400 weight (live: 46.4px) |
| h2 | Aeonik | 34 | 500 | 1.15 | -0.012em | Section heads |
| h3 | Aeonik | 26 | 500 | 1.22 | -0.008em | Sub-section heads |
| h4 | Aeonik | 20 | 500 | 1.30 | -0.004em | Card group titles |
| eyebrow | Suisse Intl | 15.5 | 700 | 1.30 | 0 | Bold mini-label / kicker (live: 15.5px/700) |
| body-lg | Suisse Intl | 17.5 | 400 | 1.60 | 0 | Default running body (live: 17.5px/400) |
| body | Suisse Intl | 16 | 400 | 1.60 | 0 | Dense paragraph copy |
| body-sm | Suisse Intl | 14 | 400 | 1.55 | 0 | Footer body, fine print |
| label | Suisse Intl | 13 | 500 | 1.40 | 0 | Form labels, badge text |
| caption | Suisse Intl | 12 | 400 | 1.40 | 0.01em | Figure / photo captions |
| button | Suisse Intl | 15 | 500 | 1.00 | 0 | Button labels |
| code | mono | 13.5 | 400 | 1.55 | 0 | Default code / diff block |
| code-label | mono | 12 | 500 | 1.40 | 0.02em | Code-block filename header |

### Principles

- **Display stays at weight 400.** Aeonik carries the 46px hero at regular weight; the calm, neutral voice depends on refusing 600/700 at headline scale.
- **Negative tracking on display only.** Range is roughly `-0.02em` at hero down to `-0.004em` at h4. Body holds at neutral tracking.
- **One bold note: the eyebrow.** The single place weight jumps to 700 is the 15.5px sub-label — it punctuates the otherwise even-weight field.
- **Two-family contract.** Aeonik for display, Suisse Intl for body — both Swiss-grotesque, so the page reads as one coherent typographic voice with a quiet display/body distinction.
- **Body breathes at 1.6.** Suisse Intl running text uses a generous line height to keep the research register readable in long passages.
- **Open-source substitutes.** Inter at 400 with `-1%` tracking approximates Aeonik for cloned implementations; Inter or Helvetica Neue stand in for Suisse Intl.
- **No bold body copy.** Emphasis comes from the eyebrow weight or the blue link color, never from setting paragraph text to 700.

## 4. Component Stylings

### Buttons

**Primary (Ink)** — Background `#1c2024`, text `#ffffff`, 6px radius, padding `10px 18px`, height 40px, button font (15/500). Hover lifts to `#2c2d2f` with no transform. **Use:** the primary action. Because the page has no colored hero CTA, ink-on-white carries the strongest button.

**Secondary (Bordered)** — Background `#ffffff`, text `#1c2024`, 1px `#d9d9e0` border, 6px radius, padding `9px 17px`. Hover: background `#fcfcfd`, border deepens to `#cdced6`. **Use:** secondary action beside the ink primary.

**Ghost** — Background transparent, text `#1c2024`, 6px radius, padding `9px 14px`. Hover background `rgba(0, 8, 48, 0.094)` (gray-a4). **Use:** tertiary text-only action inside dense rows and the nav.

**Link (Blue text)** — Transparent, text `#0d74ce` (blue-11), no padding, square. Hover shifts to brand blue `#0090ff` and reveals an underline. **Use:** inline text action — the closest the system gets to a brand-colored button.

### Cards

**Feature / Research Card** — Background `#ffffff` (shares the canvas), 1px `#e8e8ec` border, 8px radius, padding 24px. **No shadow** — depth is the hairline plus white-canvas contrast. Heading in Aeonik 20/500, body in Suisse Intl 16/400.

**Index Row** — A borderless variant: 1px `#f0f0f3` (gray-3) divider between rows, no card fill. Used for research lists and link indexes. Hover tints the row with `#fcfcfd`.

### Badges & Tags

**Badge (Neutral)** — Background `#f0f0f3` (gray-3), text `#60646c` (gray-11), 4px radius, padding `3px 8px`, label font (13/500). Sharp-ish corners, not pills. **Use:** NEW / RESEARCH / status tags.

**Badge (Accent)** — Background `#e7f4fe` (blue-3), text `#0d74ce` (blue-11), 4px radius, padding `3px 8px`. **Use:** accented status tag where a touch of blue is warranted.

### Inputs & Forms

**Text Input** — Background `#ffffff`, 1px `#d9d9e0` border, 6px radius, padding `10px 14px`, height 40px, body 16/400. Focus: border `#0090ff`, ring `0 0 0 2px rgba(0, 144, 255, 0.20)`. Placeholder in `#8b8d98` (gray-9). **Use:** email / search / contact form.

### Navigation

**Top Nav** — Background `#ffffff` (matches canvas), 64px height, optional 1px `#e8e8ec` bottom hairline on scroll. Layout: Magic wordmark left, sparse horizontal menu, single ink or ghost action right. No colored CTA in the nav.

**Nav Link** — Transparent background, ink `#1c2024` text, button font (15/500), `8px 12px` padding. Hover shifts text to brand blue `#0090ff`.

### Code Block

**Code / Diff Surface** — `#ffffff` or `#fcfcfd` ground, 1px `#e8e8ec` border, 8px radius, system mono 13.5/400. Inserted lines tint `#ecfdee`, removed lines `#feeced` (gutter) / `#fcf7f8` (body). Filename header in code-label mono (12/500/0.02em).

## 5. Layout Principles

### Spacing System

- **Base unit:** 4px.
- **Scale:** 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- **Section padding:** 64–96px standard; up to 128px between major regions.
- **Density:** generous, research-note pacing — whitespace is the dominant element on every screen.

### Grid & Container

- **Max content width:** ~1200px.
- **Prose width:** ~680px — narrow measure for long-form research reading.
- **Feature grids:** 2-up for splits, 3-up for benefit rows; collapse on narrower viewports.
- **Footer:** multi-column at desktop, ink wordmark plus quiet gray links.

### Whitespace Philosophy

White space is the primary design material. Headlines sit alone with
ample margin; sections are separated by air rather than rules or
bands. The page resists filling the canvas — emptiness reads as
confidence, and the single blue accent only registers because so
little else competes with it.

### Section Cadence

- White hero (ink h1, body subhead, ink or ghost action) → white research / feature band → optional faint `#fcfcfd` band for a quiet break → white CTA region → white footer.
- No dark sections, no gradient bands, no colored hero. The whole page stays white with hairline separation.

## 6. Shapes & Radius Scale

| Token | Value | Tier | Use |
|---|---|---|---|
| none | 0px | Sharp | Document body, dividers, many edges (live body radius = 0) |
| micro | 2px | Micro | Tiny inline chips |
| sm | 4px | Standard | Badges, tags |
| md | 6px | Comfortable | Buttons, inputs — the interactive default |
| lg | 8px | Relaxed | Cards, code blocks |
| xl | 12px | Large | Larger feature shells (rare) |
| pill | 9999px | Pill | Avatars, the rare round element |

The defining shape note is **sharpness**: the document body computes
a 0px radius, and rounded elements stay tight (6px buttons, 8px
cards). Aeonik's geometric grotesque forms echo the rectilinear
edges — flat baselines, even apertures — so the type and the shape
language agree. There is no soft, pill-heavy SaaS rounding here.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | `#ffffff` canvas | Body regions, footer |
| 1 — Card | `#ffffff` + 1px `#e8e8ec` hairline | Feature / research cards, code blocks |
| 2 — Ambient | `#ffffff` + hairline + `rgba(0, 5, 9, 0.04) 0 1px 2px` | Subtle lift on a hovered card |
| 3 — Elevated | `#ffffff` + hairline + `rgba(0, 5, 9, 0.10) 0 12px 32px` | Dropdowns, popovers (rare) |

### Shadow Philosophy

The system uses **hairline-only depth** as its default — every card
relies on a 1px `#e8e8ec` (gray-4) border, and shadows appear only on
transient floating UI like dropdowns. When a shadow is used it is
cool ink-with-alpha (`rgba(0, 5, 9, alpha)`), never neutral black, so
elevation keeps the cool character of the gray ramp. On a pure-white
canvas, contrast and a single hairline read as cleanly as a drop
shadow would — and far more quietly, which suits the research tone.

## 8. Interaction & Motion

### Easing & Duration

- **ease-standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — material-style; most UI transitions.
- **ease-out:** `cubic-bezier(0, 0, 0.2, 1)` — content fading in from below.
- **duration-fast:** 120ms — color shifts on hover (links, nav, buttons).
- **duration-standard:** 200ms — opacity / border transitions on cards.
- **duration-slow:** 320ms — larger reveals (rare).

### Per-Component Micro-States

- **Button hover:** color shift only, no transform. Ink primary `#1c2024` → `#2c2d2f` over 120ms.
- **Card hover:** border deepens from `#e8e8ec` to `#d9d9e0`, or a faint `#fcfcfd` row tint. No shadow jump. 200ms.
- **Link hover:** blue-11 `#0d74ce` → brand blue `#0090ff`, underline appears. 120ms.
- **Input focus:** border shifts to `#0090ff`, blue ring fades in over 120ms.
- **Nav link hover:** ink → brand blue `#0090ff`. 120ms.

### Page Transitions

The page is largely static from first paint — no autoplaying hero,
no scroll-jacking. Sections may fade in from below on first scroll
(ease-out, 200–320ms), but nothing animates continuously. The
stillness is part of the research register.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. When set, all transitions
collapse to opacity-only, scroll-reveal fades are disabled (content
appears immediately), and hover color shifts are retained because
they carry meaning, not decoration.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | WCAG |
|---|---|---|
| `#1c2024` ink on `#ffffff` | 16.39 | AAA at all sizes |
| `#2c2d2f` body ink on `#ffffff` | 14.0+ | AAA at body |
| `#60646c` muted on `#ffffff` | 5.94 | AA at body |
| `#0d74ce` link (blue-11) on `#ffffff` | 4.77 | AA at body |
| `#0090ff` brand (blue-9) on `#ffffff` | 3.26 | UI / large text only — NOT AA body |
| `#ffffff` on `#1c2024` ink button | 16.39 | AAA at all sizes |
| `#80838d` faint (gray-10) on `#ffffff` | 3.78 | UI / large only |

The critical rule: **`#0090ff` blue-9 only clears 3.26 on white**, so
it is valid for UI elements, icons and large display text, but body
links and small text must use blue-11 `#0d74ce` (4.77, AA).

### Focus Indicators

2px solid `#0090ff` focus ring with 2px offset on the white canvas.
Applied to every interactive element — buttons, links, inputs, nav.
Never `outline: none` without an equivalent replacement.

### ARIA Patterns

- **Combobox:** `role="combobox"` with `aria-expanded` + `aria-controls` on any search field.
- **Dialog:** `role="dialog"` + `aria-modal="true"` + focus trap on modals.
- **Navigation:** `nav` landmark with `aria-label`; current page marked `aria-current="page"`.

### Keyboard Nav

- Tab order follows visual order strictly.
- Skip-link present in the header, visible on focus.
- Escape closes modals and popovers; arrow keys move within menus.

### Screen Reader

- Decorative imagery and code mockups marked `aria-hidden="true"`.
- Diff blocks expose inserted/removed lines via hidden labels, not color alone.
- Icon-only actions carry a visually-hidden text label.

### Reduced Motion

Honored — see §8.

## 10. Responsive Behavior

| Breakpoint | Range | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 46→30px; feature grid 1-up; nav hamburger; section padding 48–64px |
| Tablet | 640–1024px | Hero h1 ~38px; feature grid 2-up; section padding 64px |
| Desktop | 1024–1280px | Full hero h1 46px; feature grid 3-up; section padding 96px |
| Wide | > 1280px | Content caps at 1200px; prose caps at 680px |

### Touch Targets

- Primary / secondary buttons: 40px height — padded internally to a comfortable tap target.
- Nav links: 32px visual, padded to a 44px tap zone on mobile.
- Inputs: 40px height; spacing increases on touch viewports.

### Collapsing Strategy

- Top nav switches to a hamburger below ~768px.
- Feature grid: 3-up → 2-up → 1-up.
- Code blocks: horizontal scroll preserved (no wrap) so code stays readable.
- Multi-column footer stacks to a single column on mobile.

### Image Behavior

Product / research figures use `srcset` for 1x/2x. Diagrams sit on the
white canvas with a 1px hairline frame; no rounded raster cards.

### Container Queries

Used where cards reflow independently of the viewport — feature grids
inside a constrained column swap to a stacked layout based on the
card's own width.

## 11. Content & Voice

### Tone

Sober, precise, research-forward. Magic's voice sounds like a frontier
lab describing its work to peers — declarative sentences, no hype, no
exclamation marks, no emoji. Copy reads like a note from the team, not
a sales pitch. Claims are specific and quantified where possible.

### Microcopy Patterns

- **Button verbs:** "Read the research", "Get in touch", "Join us", "Learn more". Plain, infinitive, no urgency punctuation.
- **Error recipe:** `[What failed] — [Why] — [What to do]`. Example: "Couldn't send. Your message was empty. Add a note and try again."
- **Success confirmations:** terse — "Sent", "Saved", "Subscribed". No exclamation.
- **Empty states:** describe the mechanism, not the feeling. "No results. Try a different query."

### CTA Verb Conventions

- Primary: "Read the research", "Get in touch", "Join us".
- Secondary: "Learn more", "View the paper".
- Avoid: "Sign up now!", "Get started free", "Join the revolution", "Supercharge your...".

### Empty States

Empty and loading states stay minimal — a single line of muted gray-11
text on white, no illustration. The blank space is consistent with the
rest of the page rather than dressed up.

## 12. Dark Mode & Theming

Magic's site is **light-only**. The audit found no theme toggle and no
dark companion — the pure-white canvas is the brand. There is no
`prefers-color-scheme` dark override in production.

If a dark variant were ever derived, it should invert through the same
Radix ramp rather than switching palettes: `bg` → Radix gray-1 dark
(`#111113`), `text` → Radix gray-12 dark (`#eeeef0`), borders → Radix
gray-4 dark, and the brand blue `#0090ff` retained (its blue-9 step
holds AA against a dark ground). But this is hypothetical — ship
light-only to match production.

## 13. Lineage & Influences

Magic sits at the intersection of three traditions: **Swiss grotesque
type discipline** (Aeonik display, Suisse Intl body — both
neo-grotesque faces), **frontier-lab research minimalism** (sober,
type-led pages that read like notes rather than pitches), and
**engineered color systems** (the entire neutral and accent ramp is
Radix Colors — gray 1–12 for neutrals, blue 1–12 for the accent). It
rejects the AI-lab orthodoxy of gradients, glow, dark hero sections
and a big colored CTA. There is no hero button at all; primary action
is ink-on-white, and the lone blue `#0090ff` is an accent, not a fill.

The deepest signal is restraint. Where most code-tool marketing fills
the canvas, Magic empties it — whitespace, two grotesque families held
mostly at weight 400, sharp corners, hairline depth, one blue. The
Radix foundation means the grays are not improvised: gray-12 ink,
gray-11 muted, gray-4 borders are all exact steps on a published ramp,
which gives the neutral field its even, engineered calm.

**Named influences:**

- **Aeonik** — geometric grotesque display, held at weight 400 across the hero.
- **Suisse Intl** — Swiss neo-grotesque body, the running-text workhorse.
- **Radix Colors** — the full neutral (gray) and accent (blue) ramp under the page.
- **Stripe Press** — paper-white editorial restraint, hairline-only depth.
- **Linear** — dev-tool grotesque discipline, single cool accent, minimal chrome.
- **Anthropic Research** — frontier-lab research register, sparse and type-forward.

## 14. Do's and Don'ts

### Do

- **Do** anchor the canvas at pure white `#ffffff` — no cream, no tint, no gradient.
- **Do** keep ink at `#1c2024` (Radix gray-12) — a cool near-black, not pure black.
- **Do** hold Aeonik display at weight 400 even at the 46px hero. The calm voice depends on it.
- **Do** apply negative tracking on display only (`-0.02em` hero → `-0.004em` h4); body stays neutral.
- **Do** set body in Suisse Intl at 17.5px/400 with a 1.6 line height.
- **Do** treat `#0090ff` blue-9 as an accent — links, focus, highlights — not a hero CTA fill.
- **Do** use blue-11 `#0d74ce` for body-size links so contrast clears AA (4.77).
- **Do** carry the primary action with ink-on-white `#1c2024` since there is no colored hero button.
- **Do** rely on hairline-only depth — 1px `#e8e8ec` (gray-4) borders carry every card.
- **Do** keep corners sharp — 0px on edges, 6px buttons, 8px cards.
- **Do** source neutrals and the accent from the Radix ramp (gray 1–12, blue 1–12).
- **Do** let whitespace dominate — empty space reads as confidence.

### Don't

- **Don't** introduce a second accent color. The single radix blue is the only chroma.
- **Don't** use `#0090ff` blue-9 for body-size text or small links — it only clears 3.26 on white.
- **Don't** add a big colored hero CTA. The audit found none; primary action is ink-on-white.
- **Don't** set display to bold weights (600/700) at headline scale. Aeonik stays at 400.
- **Don't** add drop shadows to cards. Hairlines + white-canvas contrast carry depth.
- **Don't** round corners heavily. This is a sharp system — no pill buttons, no soft SaaS cards.
- **Don't** tint the canvas. White is the brand; cream or gray-washed backgrounds break it.
- **Don't** improvise grays. Use the Radix gray steps so the neutral field stays engineered and even.
- **Don't** add gradients, glow, or dark hero bands. The page is flat white throughout.
- **Don't** use exclamation marks, emoji, or hype verbs in copy. The register is research-sober.
- **Don't** ship a dark mode to match production — the site is light-only.
- **Don't** fill the canvas. Resist the urge to decorate; the sparseness is the design.

## 15. Agent Prompt Guide

### Quick Color Reference

```
Background:    #ffffff
Surface:       #ffffff
Surface Soft:  #fcfcfd
Text:          #1c2024
Body Text:     #2c2d2f
Muted Text:    #60646c
Brand (accent):#0090ff
Brand Strong:  #0d74ce   (use for body-size links — AA)
Brand Hover:   #0586f0
Border:        #e8e8ec
Border Strong: #d9d9e0
Danger:        #c62a44
```

### Example Component Prompts

- **"Create a hero section in the Magic style"** — Pure white `#ffffff` canvas, 46px Aeonik h1 at weight 400 with `-0.016em` tracking, 17.5px Suisse Intl body subhead in `#2c2d2f`, and an ink `#1c2024` text or button action — NO colored hero button. Abundant whitespace, sharp edges, no gradient.

- **"Design a card in the Magic style"** — White `#ffffff` background (shares the canvas), 1px `#e8e8ec` border, 8px radius, 24px padding, no shadow. Heading in Aeonik 20/500, body in Suisse Intl 16/400. Hover: border deepens to `#d9d9e0`.

- **"Build a primary button in the Magic style"** — Ink `#1c2024` background, white text, 6px radius, `10px 18px` padding, 40px height, Suisse Intl 15/500. Hover: `#2c2d2f`. No transform, no shadow.

- **"Style an inline link in the Magic style"** — Text in blue-11 `#0d74ce` (AA on white). Hover: shift to brand blue `#0090ff` and reveal an underline. Never use raw blue-9 for body-size link text.

- **"Make a research / index list in the Magic style"** — Borderless rows separated by 1px `#f0f0f3` dividers, Aeonik title at 20/500, muted `#60646c` metadata in Suisse Intl 14/400. Hover tints the row `#fcfcfd`. No card fills, no shadows.

- **"Render a code / diff block in the Magic style"** — White or `#fcfcfd` ground, 1px `#e8e8ec` border, 8px radius, system mono 13.5/400. Inserted lines tint `#ecfdee`, removed lines `#feeced`. Filename header in mono 12/500/0.02em uppercase.

### Iteration Guide

1. Start with pure white `#ffffff`. Never tint the canvas — the white is the brand.
2. Set type before layout. Aeonik display at weight 400 with negative tracking; Suisse Intl body at 17.5px/400.
3. Keep the accent scarce. `#0090ff` is an accent only — links, focus, highlights. There is no colored hero button.
4. For any body-size link or small blue text, switch to blue-11 `#0d74ce` so contrast clears AA.
5. Carry the primary action with ink-on-white `#1c2024`, not chroma.
6. Sharpen the corners — 0px edges, 6px buttons, 8px cards. No pills, no soft rounding.
7. Use hairline depth — 1px `#e8e8ec` borders, no drop shadows on cards.
8. Add whitespace until it feels almost too empty, then stop. The sparse research register is the goal.

*Theme-toggle audit: score=0, signals=[none] — light-only, confirmed against live probe.*