---
name: Windsurf
tagline: 'Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD.'
updated_at: 2026-05-29T21:43:17.702Z
published_at: 2026-05-29T21:43:17.702Z
author: webdesignhot
source_url: https://windsurf.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [light, warm, sans, developer, mint]
preview_swatch: ['#f6eede', '#34e8bb', '#0b100f']
related: [cursor, vercel, linear]
description: 'Windsurf (the AI coding IDE formerly Codeium, now Cognition-owned) runs its marketing site on a warm cream `#f6eede` canvas punctuated by near-black hero bands where the headline flips to white. Display type is Tomato Grotesk held at an unusually light weight 300 — 72px hero headlines that read calm, not loud. The signature is a single high-voltage mint `#34e8bb` "DOWNLOAD" CTA with deep-green `#003326` text and a sharp 0px radius — no rounding, no gradient. Secondary actions are a white 9999px pill and a translucent ghost. The whole register is fast, modern, and developer-direct: warm paper for reading, dark slabs for the product, one electric mint accent that means "install now".'

# 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: ring

themes:
  default: light
  available: [light]
  switch-via: 'no toggle — light-primary marketing with dark hero/product bands baked into the layout, not a theme switch'

colors:
  light:
    bg: '#f6eede'                  # warm cream page canvas (rgb 246,238,222)
    bg-soft: '#fbf7ee'             # lifted cream — alternate band
    surface: '#ffffff'             # pure white card / pill surface
    surface-dark: '#0b100f'        # dark hero/product slab background
    surface-dark-soft: '#141a18'   # secondary dark panel
    text: '#0b100f'                # ink — near-black with faint green undertone (rgb 11,16,15)
    text-on-dark: '#ffffff'        # white headline/body inside dark bands
    text-body: '#3a423f'           # running paragraph text on cream
    text-muted: '#5a615d'          # captions, eyebrows, metadata
    text-faint: '#8a8f8b'          # disabled / low-emphasis hint
    text-on-dark-muted: 'rgba(255, 255, 255, 0.7)'  # secondary text inside dark bands
    brand: '#34e8bb'               # MINT — DOWNLOAD CTA fill (rgb 52,232,187)
    brand-deep: '#0fbf97'          # pressed/darker mint for hover on light
    on-brand: '#003326'            # deep teal-green text ON mint (the only legible pairing)
    link: '#0b100f'                # text links default to ink on cream
    link-hover: '#0fbf97'          # hover shifts toward deep mint
    border: '#c0c1c6'              # neutral hairline divider
    border-soft: '#e3e0d6'         # warm-tinted lighter divider on cream
    border-dark: 'rgba(255, 255, 255, 0.12)'  # hairline inside dark bands
    ring: 'rgba(67, 128, 180, 0.5)'  # focus ring (Tailwind default blue, from --tw-ring-color)
    success: '#0fbf97'             # mint reused as positive — install/ready
    warning: '#c08a2e'             # warm amber for caution
    danger: '#d8413f'              # red for validation errors / destructive
    info: '#4380b4'               # the ring blue, reused for info accents
    shadow-tint: 'rgba(11, 16, 15, 0.10)'  # ink-with-alpha ambient shadow

typography:
  display:
    family: 'tomatoGrotesk, "Tomato Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [300, 400, 500, 600]
    opentype: ['kern', 'liga']
  body:
    # NOTE: production computed `ui-sans-serif` is the FALLBACK — the real
    # body face is a clean neutral grotesk loaded above it. Inter is the
    # closest open-source stand-in for cloned builds.
    family: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
    opentype: ['kern', 'liga']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 72, weight: 300, lineHeight: 1.0,  tracking: '-0.02em',  family: display, opentype: 'kern' }
    display-lg:      { size: 56, weight: 300, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 48, weight: 400, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 40, weight: 400, lineHeight: 1.15, tracking: '-0.012em', family: display }
    h3:              { size: 32, weight: 500, lineHeight: 1.2,  tracking: '-0.008em', family: display }
    h4:              { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h5:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: display }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    button:          { size: 14, weight: 600, lineHeight: 1.0,  tracking: '0.06em',   family: body, transform: 'uppercase' }
    eyebrow:         { size: 12, weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body, transform: 'uppercase' }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    micro:           { size: 11, weight: 500, lineHeight: 1.3,  tracking: '0.04em',   family: body }
    code-body:       { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }
    code-label:      { size: 11, weight: 500, lineHeight: 1.4,  tracking: '0.04em',   family: mono, transform: 'uppercase' }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999
  sharp: 0

spacing:
  base: 4
  xxs: 4
  xs: 8
  sm: 12
  md: 16
  lg: 24
  xl: 32
  xxl: 48
  section: 96
  section-lg: 128
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — entrance fades collapse to instant, looping product reels pause'

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

shadows:
  none: 'none — most chrome carries depth via hairline border + cream/dark band contrast'
  ambient: 'rgba(11, 16, 15, 0.06) 0 1px 2px'
  standard: 'rgba(11, 16, 15, 0.10) 0 8px 24px'
  elevated: 'rgba(11, 16, 15, 0.16) 0 16px 40px -8px'

accessibility:
  contrast-text-on-bg: 16.6          # #0b100f on #f6eede — AAA
  contrast-body-on-bg: 8.4           # #3a423f on #f6eede — AAA
  contrast-on-brand-on-brand: 8.9    # #003326 on #34e8bb — AAA (white-on-mint fails at 1.57, never used)
  contrast-white-on-dark: 19.2       # #ffffff on #0b100f dark hero — AAA
  focus-ring: '2px solid rgba(67, 128, 180, 0.5) with 2px offset'
  reduced-motion-honored: true
  keyboard-nav: 'tab order follows visual order; nav + CTAs reachable; skip-link recommended'

components:
  button-download:
    background: '#34e8bb'
    text: '#003326'
    radius: 0
    padding: '14px 22px'
    height: 48
    font: button
    hover: 'background #0fbf97; no transform'
    use: 'the single signature install CTA — DOWNLOAD, sharp 0px mint slab'
  button-secondary:
    background: '#ffffff'
    text: '#0b100f'
    radius: 9999
    padding: '8px 16px'
    height: 36
    font: button
    hover: 'background #f0ede4'
    use: 'pill announcement / "NEW Introducing Windsurf" — soft contrast to the sharp primary'
  button-ghost-on-dark:
    background: 'rgba(255, 255, 255, 0.1)'
    text: '#ffffff'
    radius: 2
    padding: '12px 20px'
    border: '1px solid rgba(255, 255, 255, 0.12)'
    font: button
    hover: 'background rgba(255, 255, 255, 0.18)'
    use: 'tertiary action inside dark hero — Explore Features'
  button-ghost-on-light:
    background: 'transparent'
    text: '#0b100f'
    radius: 0
    padding: '12px 20px'
    border: '1px solid #0b100f'
    font: button
    hover: 'background #0b100f; text #f6eede'
    use: 'outline secondary on cream — inverts to ink fill on hover'
  card:
    background: '#ffffff'
    text: '#0b100f'
    border: '1px solid #c0c1c6'
    radius: 12
    padding: 24
    shadow: 'none — hairline + cream contrast'
    use: 'feature card on cream bands'
  card-dark:
    background: '#141a18'
    text: '#ffffff'
    border: '1px solid rgba(255, 255, 255, 0.12)'
    radius: 12
    padding: 24
    use: 'feature card inside dark product bands'
  input:
    background: '#ffffff'
    text: '#0b100f'
    border: '1px solid #c0c1c6'
    radius: 8
    padding: '10px 14px'
    height: 44
    focus: 'border #34e8bb; ring 0 0 0 2px rgba(52, 232, 187, 0.3)'
    use: 'email / search / form input'
  badge:
    background: '#0b100f'
    text: '#34e8bb'
    radius: 9999
    padding: '4px 10px'
    font: eyebrow
    use: 'NEW / category eyebrow — ink pill, mint label'
  nav-link:
    background: 'transparent'
    text: '#0b100f'
    font: label
    padding: '8px 12px'
    hover: 'text #0fbf97'
    use: 'top-nav menu items (Product / Enterprise / Pricing / Docs)'

dark-mode: baked-bands

lineage:
  summary: |
    Windsurf — the AI coding IDE formerly known as Codeium and now
    owned by Cognition — runs the warmest-meets-sharpest marketing
    surface in the dev-tool space. The canvas is a warm cream
    `#f6eede`, ink is a near-black `#0b100f` with the faintest green
    undertone, and the page alternates that cream paper with
    near-black product slabs where the headline flips to white. The
    display family is Tomato Grotesk, held at an unusually *light*
    weight 300 — a 72px hero that reads calm and editorial rather
    than the bold-700 shout most coding tools default to. The single
    high-voltage move is the mint `#34e8bb` "DOWNLOAD" button: deep
    teal-green `#003326` text (the only legible pairing on mint), a
    sharp 0px radius, no gradient, no rounding — pure install
    voltage. Secondary actions soften it: a white 9999px announcement
    pill and a translucent ghost on dark. Where Cursor is warm and
    literary and Linear is dark and architectural, Windsurf is warm
    paper plus electric mint plus hard right angles — fast, modern,
    and developer-direct. The legacy `--codeium-*` editor variables
    still ship in the CSS but belong to the old in-product chat
    surface, not this marketing identity.
  influences:
    - name: 'Tomato Grotesk (Tomato Font Foundry)'
      role: 'Light-weight grotesque display family — 300-weight 72px heroes give the calm authority'
      url: 'https://tomato.studio'
    - name: 'Codeium (predecessor brand)'
      role: 'The product Windsurf grew out of — legacy --codeium-* editor tokens still ship in the CSS'
      url: 'https://codeium.com'
    - name: 'Cognition'
      role: 'Current owner (also makes Devin) — the AI-agent engineering register shapes the voice'
      url: 'https://cognition.ai'
    - name: 'Tailwind CSS'
      role: 'Utility framework underneath — --tw-ring-color, --tw-shadow-color tokens drive focus/elevation'
      url: 'https://tailwindcss.com'
    - name: 'Cursor'
      role: 'Contemporary it shares the warm-cream-IDE-marketing lane with — both reject SaaS-blue chrome'
      url: 'https://cursor.com'
    - name: 'Swiss / International Typographic Style'
      role: 'Hard 0px right angles, uppercase tracked labels, grid discipline behind the warmth'
      url: 'https://en.wikipedia.org/wiki/International_Typographic_Style'
---

## 1. Visual Theme & Atmosphere

Windsurf's marketing surface pairs warm reading paper with electric machinery. The canvas is a cream `#f6eede` — a warm subtle off-white, not pure cream and never pure white — and ink is `#0b100f`, a near-black carrying the faintest green undertone rather than neutral charcoal. On that warm ground the page reads calm and editorial. Then the layout drops into near-black product slabs where the very same headline type flips to white, and the warmth gives way to dark, screenshot-forward energy. The whole site swings between these two registers: paper for prose, slab for product.

The display family is Tomato Grotesk, and the single most counter-intuitive choice in the system is its weight. The 72px hero headline runs at **weight 300** — light, not bold. Where the typical AI-coding tool shouts in 700, Windsurf whispers in 300 at hero scale, and the restraint reads as confidence. Tracking is gently negative (`-0.02em` at the top of the scale) so the light strokes still feel tight and engineered rather than airy. Body copy steps to a clean neutral grotesk (the production computed `ui-sans-serif` is only the fallback; the real face is a loaded grotesk for which Inter is the closest open-source stand-in).

The strongest single signature is the **mint "DOWNLOAD" button**. It is `#34e8bb` — a saturated electric mint/teal — with deep teal-green `#003326` text, because white on mint fails contrast badly (1.57:1) and the deep-green pairing is the only legible one (8.9:1, AAA). Its radius is `0px`: a hard rectangular slab, no rounding, no gradient, no shadow. That sharp right angle is the brand's tell. Around it, secondary actions deliberately soften: a white announcement **pill** at 9999px radius ("NEW — Introducing Windsurf"), and a translucent white **ghost** at a barely-there 2px radius inside the dark hero ("Explore Features"). The mix of one razor-sharp primary, one fully-round pill, and one near-sharp ghost is intentional tension, not inconsistency.

Reading the page feels fast and modern — developer-direct, low on adjectives, high on screenshots. The cream keeps it from feeling like yet another dark SaaS site, the mint keeps it from feeling sleepy, and the hard 0px angles keep it from feeling soft. It is the warmth of a print magazine wired to the voltage of a download button.

**Key Characteristics:**
- Warm cream canvas (`#f6eede`) — never pure white; alternates with near-black product slabs.
- Ink is near-black with a faint green undertone (`#0b100f`), not neutral charcoal.
- Tomato Grotesk display held at **weight 300** at 72px hero — calm, not bold.
- Single voltage: electric mint `#34e8bb` DOWNLOAD CTA, sharp `0px` radius.
- Mint never carries white text — deep teal-green `#003326` is the only legible pairing.
- Dark hero bands flip the headline to white (`#ffffff`) on `#0b100f`.
- Three coexisting CTA shapes: sharp mint slab, white pill, translucent ghost.
- No gradients on chrome; depth comes from band contrast + hairline borders.
- Tailwind underneath — `--tw-ring-color` / `--tw-shadow-color` drive focus and elevation.
- Uppercase tracked labels (`0.06em`) on buttons reinforce the engineered Swiss register.

## 2. Color Palette & Roles

### Primary

- **Background** (`#f6eede`) [→ body `rgb(246,238,222)`]: warm cream page canvas. Never pure white.
- **Text** (`#0b100f`) [→ body color `rgb(11,16,15)`]: ink, near-black with faint green undertone. Carries display + body on cream.
- **Brand / CTA** (`#34e8bb`) [→ DOWNLOAD bg `rgb(52,232,187)`]: electric mint — the single high-voltage install action.

### Brand

- **On-Brand Text** (`#003326`) [→ DOWNLOAD color `rgb(0,51,38)`]: deep teal-green. The mandatory text color on mint — the only pairing that clears contrast.
- **Brand Deep** (`#0fbf97`): pressed / hover mint on light surfaces; also doubles as success.

### Accent

- **Dark Slab** (`#0b100f`): near-black product/hero band background — the same value as ink, inverted into a surface.
- **Dark Slab Soft** (`#141a18`): secondary dark panel inside slab regions (cards, code wells).

### Interactive

- **Link** (`#0b100f`): text links default to ink on cream — no chromatic blue.
- **Link Hover** (`#0fbf97`): hover shifts toward deep mint; underline appears on hover.
- **Focus Ring** (`rgba(67,128,180,0.5)`) [→ `--tw-ring-color`]: Tailwind-default semi-transparent blue ring, 2px with 2px offset.

### Neutral Scale

- **Text Body** (`#3a423f`): default running paragraph text on cream.
- **Text Muted** (`#5a615d`): captions, eyebrows, metadata.
- **Text Faint** (`#8a8f8b`): disabled / low-emphasis hints.
- **Text on Dark** (`#ffffff`): white headline + body inside dark bands.
- **Text on Dark Muted** (`rgba(255,255,255,0.7)`): secondary copy inside dark bands.

### Surface & Borders

- **Surface** (`#ffffff`): pure white card and announcement-pill surface — lifts off the cream canvas.
- **Background Soft** (`#fbf7ee`): lifted cream for alternate full-width bands without leaving the warm palette.
- **Surface Dark Soft** (`#141a18`): card surface inside dark slabs.
- **Border** (`#c0c1c6`) [→ seed token]: neutral 1px hairline divider — the primary depth tool on cards.
- **Border Soft** (`#e3e0d6`): warm-tinted lighter divider for nested rows on cream.
- **Border on Dark** (`rgba(255,255,255,0.12)`): hairline inside dark bands.

### Shadow Colors

- **Shadow Tint** (`rgba(11,16,15,0.10)`): ink-with-alpha ambient — every shadow uses ink-with-alpha rather than pure black, holding the warm character. The Tailwind `--tw-shadow-color` default (`rgb(251 191 36/0.5)`, amber) is utility residue and is not used on chrome.

### Semantic

- **Success** (`#0fbf97`): deep mint — install-ready / confirmation. Shares hue with the brand.
- **Warning** (`#c08a2e`): warm amber — caution context.
- **Danger** (`#d8413f`): red — validation errors, destructive confirms.
- **Info** (`#4380b4`): the ring blue, reused for informational accents (rare).

## 3. Typography Rules

### Font Family

- **Display:** `tomatoGrotesk, "Tomato Grotesk", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif`. Tomato Grotesk is the licensed display family — held remarkably light (weight 300) at hero scale, stepping to 400–600 as headings shrink.
- **Body:** `Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`. The production computed value `ui-sans-serif` is only the *fallback* — the real body face is a clean neutral grotesk loaded above it. Inter at 400 is the closest open-source stand-in for cloned builds.
- **Mono companion:** `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. Used for code surfaces, kbd, and uppercase code labels.
- **OpenType features:** `kern`, `liga` enabled site-wide on display + body.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Tomato Grotesk | 72 | 300 | 1.0 | -0.02em | — | Homepage h1 — calm light 300 at hero size; white on dark hero |
| display-lg | Tomato Grotesk | 56 | 300 | 1.05 | -0.02em | — | Section-opening display |
| h1 | Tomato Grotesk | 48 | 400 | 1.1 | -0.018em | — | Page h1 |
| h2 | Tomato Grotesk | 40 | 400 | 1.15 | -0.012em | — | Section heads |
| h3 | Tomato Grotesk | 32 | 500 | 1.2 | -0.008em | — | Sub-section heads |
| h4 | Tomato Grotesk | 24 | 500 | 1.25 | -0.005em | — | Card group titles |
| h5 | Tomato Grotesk | 20 | 600 | 1.3 | 0 | — | Smallest heading |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Hero subhead, lead paragraph |
| body | Inter | 16 | 400 | 1.55 | 0 | — | Default paragraph copy |
| body-sm | Inter | 14 | 400 | 1.5 | 0 | — | Footer body, dense rows |
| label | Inter | 13 | 500 | 1.4 | 0 | — | Nav links, form labels |
| button | Inter | 14 | 600 | 1.0 | 0.06em | uppercase | CTA labels (DOWNLOAD, EXPLORE) |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.08em | uppercase | Section eyebrows, badge text |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | — | Photo / figure captions |
| micro | Inter | 11 | 500 | 1.3 | 0.04em | — | Smallest UI hint |
| code-body | Mono | 13 | 400 | 1.5 | 0 | — | Default code block |
| code-label | Mono | 11 | 500 | 1.4 | 0.04em | uppercase | Code-block filename header |

### Principles

- **Display weight stays light.** The hero runs at weight 300 at 72px — the system's defining typographic choice. Authority comes from restraint, not boldness.
- **Negative tracking on display only.** Range `-0.02em` at hero down to `0` by h5; the light strokes need the tightening to stay engineered. Body holds neutral.
- **Headings climb in weight as they shrink.** 300 → 400 → 500 → 600 from hero to h5, so small headings keep presence without growing.
- **Uppercase + tracking flags interactivity.** Buttons and eyebrows are uppercase with `0.06–0.08em` tracking — a Swiss/engineered signal that reads "control, not prose".
- **Display vs body is a hard split.** Tomato Grotesk owns every heading; the body grotesk (Inter stand-in) owns running copy. Never mix.
- **No bold body copy.** Emphasis comes from weight 500 or the mono family, never weight 700 in paragraphs.
- **Headline color is context-driven.** Ink `#0b100f` on cream bands; white `#ffffff` on dark slabs — same type, inverted by band.

## 4. Component Stylings

### Buttons

**DOWNLOAD (Primary / Mint)** — Background `#34e8bb`, text `#003326` deep teal-green, **0px radius** (sharp slab), padding `14px 22px`, height 48px, button font (14/600 uppercase, `0.06em`). Hover deepens to `#0fbf97` with no transform. No shadow, no gradient. **Use:** the single signature install CTA per page. Never put white text on it.

**Announcement Pill (Secondary)** — Background `#ffffff`, text `#0b100f`, **9999px radius** (fully round), padding `8px 16px`, height 36px. Often paired with a small mint or ink eyebrow ("NEW"). Hover background `#f0ede4`. **Use:** "Introducing Windsurf" announcement bar / soft secondary navigation pill.

**Ghost on Dark (Tertiary)** — Background `rgba(255,255,255,0.1)`, text `#ffffff`, 1px `rgba(255,255,255,0.12)` border, **2px radius** (near-sharp), padding `12px 20px`. Hover background lifts to `rgba(255,255,255,0.18)`. **Use:** tertiary action inside the dark hero — "Explore Features".

**Ghost on Light (Outline)** — Background transparent, text `#0b100f`, 1px `#0b100f` border, 0px radius. Hover inverts: background `#0b100f`, text `#f6eede`. **Use:** outline secondary on cream bands.

### Cards

**Feature Card (Light)** — Background `#ffffff`, 1px `#c0c1c6` border, 12px radius, 24px padding. **No shadow** — depth comes from the hairline plus contrast against cream. Heading in Tomato Grotesk 24/500, body in 16/400.

**Feature Card (Dark)** — Inside dark slabs: background `#141a18`, 1px `rgba(255,255,255,0.12)` border, 12px radius, 24px padding, white text. Same shape, inverted substrate.

**Product Slab** — Full-width near-black band (`#0b100f`) hosting product screenshots or live IDE reels, white headline above, edge-to-edge media. The recurring structural element that breaks the cream flow.

### Badges & Tags

**Badge** — Background `#0b100f` (ink), text `#34e8bb` (mint), 9999px radius, padding `4px 10px`, eyebrow font (12/600/0.08em uppercase). The ink-pill-with-mint-label is the recognizable status chip. **Use:** NEW / category tags.

### Inputs & Forms

**Text Input** — Background `#ffffff`, 1px `#c0c1c6` border, 8px radius, padding `10px 14px`, height 44px, body 16/400. Focus: border `#34e8bb`, ring `0 0 0 2px rgba(52,232,187,0.3)`. Placeholder in `#8a8f8b`.

### Navigation

**Top Nav** — Background `#f6eede` (matches cream canvas) or transparent over a dark hero, 64px height. Layout: Windsurf wordmark left, horizontal menu (Product / Enterprise / Pricing / Docs / Blog), with the mint DOWNLOAD slab pinned right. Mobile: right-aligned hamburger.

**Nav Link** — Transparent background, ink text on cream (white on dark), label font (13/500), `8px 12px` padding. Hover shifts text toward `#0fbf97`.

## 5. Layout Principles

### Spacing System

- **Base unit:** 4px.
- **Scale:** 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- **Section padding:** 96px standard, 128px between major regions.
- **Density:** generous editorial pacing on cream bands; tighter, screenshot-forward density inside dark slabs.

### Grid & Container

- **Max content width:** 1280px.
- **Prose width:** 720px for running copy.
- **Feature grids:** 2-up for splits, 3-up for benefit rows.
- **Header height:** 64px.

### Whitespace Philosophy

Cream bands breathe wide (96–128px vertical) so prose reads like a magazine; dark product slabs run edge-to-edge with media tight to their frame. The rhythm of the page is the alternation — wide warm reading section, then a dense dark product slab, then warm again. That band cadence *is* the layout.

### Section Cadence

- Dark hero (white headline + mint DOWNLOAD) → cream feature band → dark product slab → cream pricing → cream CTA / footer.
- The page opens dark (hero) and resolves to cream — the inverse of a typical light-site that opens bright. The dark hero front-loads the product; the cream carries the argument.

## 6. Shapes & Radius Scale

| Token | Value | Tier | Use |
|---|---|---|---|
| sharp | 0px | Sharp | **DOWNLOAD slab**, outline buttons — the brand's defining hard right angle |
| micro | 2px | Micro | Ghost-on-dark button, near-sharp accents |
| sm | 4px | Standard | Small inline chips |
| md | 8px | Comfortable | Form inputs |
| lg | 12px | Relaxed | Cards, dark panels |
| xl | 16px | Large | Larger media frames (rare) |
| pill | 9999px | Pill | Announcement pill, badges, avatars |

The radius system is deliberately bimodal: a **0px sharp** primary and a **9999px pill** secondary sit at opposite extremes, with cards holding the calm middle at 12px. The tension between the razor-sharp mint slab and the fully-round white pill is the signature shape contrast — never round the DOWNLOAD button, never sharpen the announcement pill.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat cream | `#f6eede` canvas | Body bands, footer |
| 0 — Flat dark | `#0b100f` slab | Hero, product bands |
| 1 — Card | `#ffffff` (or `#141a18` on dark) + 1px hairline | Feature cards |
| 2 — Lifted | card + ambient shadow `rgba(11,16,15,0.06) 0 1px 2px` | Subtle lift on hover |
| 3 — Floating | card + standard shadow `rgba(11,16,15,0.10) 0 8px 24px` | Pricing highlight, media frame |
| 4 — Modal | `#ffffff` + elevated shadow `rgba(11,16,15,0.16) 0 16px 40px -8px` | Modals (rare on marketing) |

### Shadow Philosophy

Depth on Windsurf is carried first by **band contrast** — a white card on cream, a `#141a18` card on `#0b100f` — then by 1px hairline borders, and only then by shadow. Shadows, when present, are ink-with-alpha (`rgba(11,16,15,...)`) rather than neutral black, holding the warm green-tinted character. The mint DOWNLOAD slab deliberately carries *no* shadow — its voltage is the color and the hard edge, not lift. (The Tailwind `--tw-shadow-color` amber default is utility residue and never appears on chrome.)

## 8. Interaction & Motion

### Easing & Duration

- **ease-standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — most UI transitions.
- **ease-emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — entrance on product reels.
- **ease-entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fading in from below.
- **duration-fast:** 150ms — color transitions on hover.
- **duration-standard:** 240ms — opacity / transform on cards and bands.
- **duration-slow:** 320ms — product-reel and section reveals.

### Per-Component Micro-States

- **DOWNLOAD hover:** background mint → deep mint `#0fbf97`, no transform. The shape holds still. 150ms.
- **Pill hover:** background `#ffffff` → `#f0ede4`. 150ms.
- **Ghost-on-dark hover:** overlay `rgba(255,255,255,0.1)` → `0.18`. 150ms.
- **Outline-on-light hover:** inverts to ink fill, text to cream. 150ms.
- **Card hover:** border deepens / faint ambient shadow fades in. 240ms.
- **Link hover:** ink → deep mint `#0fbf97`; underline appears. 150ms.
- **Input focus:** border → mint `#34e8bb`, ring fades in. 150ms.

### Page Transitions

The dark hero typically hosts an autoplaying product reel (IDE / agent in action). Sections fade in from below on scroll using `ease-entrance` over 320ms. No full-page load transition — content is flat from first paint, animation is per-section.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. When set:
- Entrance fades collapse to instant; no upward slide.
- Looping product reels pause and show a static frame.
- Hover transforms disabled; color shifts retained.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | WCAG |
|---|---|---|
| `#0b100f` ink on `#f6eede` cream | 16.6 | AAA |
| `#3a423f` body on `#f6eede` cream | 8.4 | AAA |
| `#ffffff` white on `#0b100f` dark hero | 19.2 | AAA |
| `#003326` deep-green on `#34e8bb` mint (DOWNLOAD) | 8.9 | AAA |
| `#34e8bb` mint on `#0b100f` dark (badge label) | 12.2 | AAA |
| `#0b100f` ink on `#ffffff` white pill | 19.2 | AAA |
| `#5a615d` muted on `#f6eede` cream | 5.6 | AA |
| `#ffffff` white on `#34e8bb` mint | 1.6 | **FAIL — never use** |

### Focus Indicators

2px solid `rgba(67,128,180,0.5)` ring (Tailwind `--tw-ring-color` default) with 2px offset, applied to every interactive element. Never `outline: none` without replacement. On mint surfaces, prefer a deep-green ring for visibility.

### ARIA Patterns

- **Disclosure:** `aria-expanded` on the mobile hamburger and nav dropdowns.
- **Dialog:** `role="dialog"` + `aria-modal="true"` + focus trap on any pricing/contact modal.
- **Live region:** product-reel captions in `aria-live="polite"` if they narrate steps.

### Keyboard Nav

- Tab order follows visual order; wordmark → nav → DOWNLOAD → hero CTAs.
- Skip-link recommended in the header (visible on focus).
- Escape closes mobile nav and modals.

### Screen Reader

- Decorative product reels marked `aria-hidden="true"`; provide a text summary nearby.
- The mint DOWNLOAD button uses a clear accessible label ("Download Windsurf").
- Badge mint-on-ink labels are real text, not images.

### Reduced Motion

Honored — see §8.

## 10. Responsive Behavior

| Breakpoint | Range | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero 72→36px; nav → right-aligned hamburger; feature grid 1-up; DOWNLOAD full-width slab |
| Tablet | 640–1024px | Hero ~56px; feature grid 2-up; product reel compresses |
| Desktop | 1024–1280px | Full 72px hero; 3-up feature grid; full-width product slabs |
| Wide | > 1280px | Content caps at 1280px; bands stay full-bleed |

### Touch Targets

- DOWNLOAD CTA: 48px height — comfortably AAA; full-width on mobile.
- Announcement pill: 36px — padded for touch.
- Nav links: 32px tap target, padded internally.

### Collapsing Strategy

- Top nav → right-aligned hamburger below 768px.
- Product slabs keep their dark substrate; media stacks vertically.
- Feature grid: 3-up → 2-up → 1-up.
- Code blocks: horizontal scroll preserved (no wrap).

### Image Behavior

Product screenshots use `srcset` 1x/2x. Hero reels are video/animated and pause under reduced motion. Dark slabs let screenshots bleed to the band edge.

### Container Queries

Used inside product-slab cards to reflow pane layouts when the card reflows under ~800px, independent of viewport.

## 11. Content & Voice

### Tone

Fast, modern, developer-direct. Windsurf's voice sounds like an engineer describing a tool to a peer — terse, capability-forward, no hype filler. The product name and "AI for coding" do the work; sentences stay short and concrete.

### Microcopy Patterns

- **Button verbs:** "DOWNLOAD" (uppercase, primary), "Explore Features", "Get Started", "Talk to Sales".
- **Announcement:** "NEW — Introducing Windsurf" sets the pill pattern — short, present-tense, product-named.
- **Error recipe:** `[What failed] — [Why] — [Action]`. Example: "Download didn't start. Your browser blocked it. Click to retry."
- **Success confirmations:** terse — "Installed", "Connected", "Indexed". No exclamation.
- **Empty states:** describe the mechanism — "No workspace open. Open a folder to begin." — never decorative sadness.

### CTA Verb Conventions

- Primary: "DOWNLOAD" (homepage hero, uppercase mint slab).
- Secondary: "Explore Features", "Read the Docs", "View Pricing".
- Avoid: "Sign up free!", "Start your journey", "Join the revolution".

### Empty States

Inside any embedded editor preview, the empty state is instructional ("Ask Windsurf to edit this file…") — no illustration, the cursor does the inviting.

## 12. Dark Mode & Theming

Windsurf is **light-primary** — the cream canvas is the brand — but it is not light-only. The layout bakes near-black product slabs (`#0b100f`) directly into the page flow, including a dark hero, so the experience reads as a single design that alternates band substrates rather than a toggle between two themes. There is no user-facing dark/light switch on marketing.

When content sits on a dark band:
- `bg` → `#0b100f` (near-black hero/product slab)
- card surface → `#141a18`
- `text` → `#ffffff`, secondary `rgba(255,255,255,0.7)`
- `border` → `rgba(255,255,255,0.12)`
- Brand mint `#34e8bb` retained — its contrast on dark is 12.2:1 (AAA), and the badge label leans on this.

Keep the green-tinted near-black; never collapse the dark slabs to neutral `#000000` or pure gray.

## 13. Lineage & Influences

Windsurf sits at the crossing of three traditions: the **warm-cream IDE-marketing lane** it shares with Cursor (both reject the SaaS-blue dark-chrome default for warm paper), the **Swiss / International Typographic** discipline visible in its hard 0px right angles and uppercase tracked labels, and the **AI-agent engineering register** it inherited from its lineage — Codeium before the rename, and Cognition (maker of Devin) as current owner. The mint `#34e8bb` is its own departure: not a SaaS chroma, not a product-blue, but an electric install-voltage color reserved almost entirely for the DOWNLOAD slab.

Typographically the brand's deepest move is holding Tomato Grotesk at weight 300 at hero scale — the calm-light authority is impossible to fake with a system bold. Underneath, the site is built on Tailwind (the `--tw-ring-color`, `--tw-shadow-color` tokens are visible in the computed CSS), and the legacy `--codeium-*` editor variables still ship — but those belong to the old in-product chat surface and have nothing to do with this marketing identity.

**Named influences:**

- **Tomato Grotesk** (Tomato Font Foundry) — the light-300 display voice that defines the headlines.
- **Codeium** (predecessor brand) — what Windsurf grew out of; legacy editor tokens persist in the CSS.
- **Cognition** (current owner, also makes Devin) — the agent-engineering register behind the voice.
- **Tailwind CSS** — utility framework driving focus rings and shadow tokens.
- **Cursor** — contemporary in the warm-cream-IDE-marketing lane; shared rejection of SaaS-blue.
- **Swiss / International Typographic Style** — hard 0px angles, tracked uppercase labels, grid discipline.

## 14. Do's and Don'ts

### Do

- **Do** anchor the canvas at cream `#f6eede` — never pure white.
- **Do** keep ink at `#0b100f` near-black with its faint green undertone, not neutral charcoal.
- **Do** hold Tomato Grotesk at weight 300 at hero size — the calm-light headline is the brand.
- **Do** make the DOWNLOAD button mint `#34e8bb` with `#003326` deep-green text and a sharp `0px` radius.
- **Do** alternate warm cream reading bands with near-black `#0b100f` product slabs.
- **Do** flip headline type to white inside dark slabs — same face, inverted color.
- **Do** keep the announcement pill fully round (9999px) as deliberate contrast to the sharp primary.
- **Do** use uppercase tracked labels (`0.06–0.08em`) on buttons and eyebrows.
- **Do** carry card depth with 1px hairline + band contrast, not heavy shadow.
- **Do** reserve mint as success/install voltage — keep it scarce.

### Don't

- **Don't** put white text on the mint button — it fails contrast (1.6:1). Use deep-green `#003326`.
- **Don't** round the DOWNLOAD slab — the 0px hard edge is the brand's tell.
- **Don't** bold the hero headline to 700 — weight 300 carries the authority.
- **Don't** use pure white surfaces as the page canvas — cream is the ground.
- **Don't** collapse the dark slabs to neutral `#000000`; keep the green-tinted `#0b100f`.
- **Don't** treat the `--codeium-*` variables as brand tokens — they are legacy editor chrome.
- **Don't** add gradients or shadows to the mint CTA — color + edge are the voltage.
- **Don't** introduce a second chromatic CTA color; mint is the only one.
- **Don't** use blue text links — default to ink, hover to deep mint `#0fbf97`.
- **Don't** mix Tomato Grotesk into body copy — it owns headings; the body grotesk owns prose.

## 15. Agent Prompt Guide

### Quick Color Reference

```
Background (cream):  #f6eede
Dark Slab:           #0b100f
Surface (white):     #ffffff
Surface (dark card): #141a18
Text (ink):          #0b100f
Text on dark:        #ffffff
Body Text:           #3a423f
Brand (mint):        #34e8bb
On-Brand (text):     #003326
Brand Deep (hover):  #0fbf97
Border:              #c0c1c6
Danger:              #d8413f
```

### Example Component Prompts

- **"Create a hero section in the Windsurf style"** — Near-black `#0b100f` dark slab, 72px Tomato Grotesk headline at **weight 300** in white with `-0.02em` tracking, 18px white-70% subhead, a sharp `0px` mint `#34e8bb` DOWNLOAD button (deep-green `#003326` uppercase text) beside a translucent white ghost button (`rgba(255,255,255,0.1)`, 2px radius). Autoplaying product reel below.

- **"Design a card in the Windsurf style"** — White `#ffffff` background, 1px `#c0c1c6` border, 12px radius, 24px padding, no shadow. Heading in Tomato Grotesk 24/500 ink, body in Inter 16/400 `#3a423f`. On dark bands: `#141a18` surface, `rgba(255,255,255,0.12)` border, white text.

- **"Build the DOWNLOAD CTA in the Windsurf style"** — Mint `#34e8bb` background, deep-green `#003326` text, **0px radius (sharp slab)**, `14px 22px` padding, 48px height, uppercase 14/600 with `0.06em` tracking. Hover background `#0fbf97`. No transform, no gradient, no shadow. Never white text.

- **"Make an announcement pill in the Windsurf style"** — White `#ffffff` background, ink `#0b100f` text, **9999px radius**, `8px 16px` padding, 36px height, with a small mint or ink uppercase eyebrow ("NEW"). Hover `#f0ede4`.

- **"Render a badge in the Windsurf style"** — Ink `#0b100f` pill (9999px), mint `#34e8bb` label text, eyebrow font 12/600/0.08em uppercase, `4px 10px` padding.

- **"Design a section band in the Windsurf style"** — Alternate a cream `#f6eede` reading band (96px vertical padding, ink prose, 1280px max width) with a full-bleed near-black `#0b100f` product slab (white headline, edge-to-edge screenshot).

### Iteration Guide

1. Start with the band rhythm — cream `#f6eede` reading sections alternating with near-black `#0b100f` product slabs. The alternation is the layout.
2. Set type before layout. Tomato Grotesk at weight 300 with negative tracking on the hero; never bold it.
3. Build the DOWNLOAD button exactly: mint fill, deep-green text, 0px sharp. This single element carries the brand.
4. Keep mint scarce — one DOWNLOAD per page. Everything else is ink, white, or translucent.
5. Pair the sharp primary with a fully-round white pill — the shape contrast is intentional.
6. Flip headline color by band: ink on cream, white on dark. Same face, inverted.
7. Carry card depth with 1px `#c0c1c6` hairlines and band contrast — not shadow. The mint CTA gets no shadow at all.
8. Use uppercase tracked labels on buttons and eyebrows to keep the engineered Swiss register under the warmth.

---

*Theme-toggle audit: score=0, signals=[none] — light-primary with baked-in dark product bands*