---
version: alpha
name: Windsurf
description: Precision AI-editor minimalism — pure white canvas, Inter with aggressive negative tracking, electric blue #317cff accent, IBM Plex Mono code voice, and a tight 2-8px radius system that reads as engineered rather than playful.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"    # was rgba(0,0,0,0.03) over white — Google format requires hex
  surface-dim: "#f0f0f0"
  ink: "#191919"             # near-black, slightly warmer than true black
  ink-secondary: "#6b6b6b"  # mid-gray for secondary text
  ink-muted: "#a5a5a5"      # muted labels, placeholders

  # Brand accent
  primary: "#317cff"         # Windsurf Blue — electric, confident
  on-primary: "#ffffff"
  primary-container: "#e8f0ff" # was rgba(49,124,255,0.1) over white — Google format requires hex
  primary-dark: "#2a69d9"    # hover/pressed state for primary blue

  # Semantic
  success: "#22c55e"         # /* estimated — not directly extracted */
  warning: "#f59e0b"         # /* estimated — not directly extracted */
  error: "#ef4444"           # /* estimated — not directly extracted */

  # Borders (opaque approximations of rgba borders)
  border: "#ebebeb"          # was rgba(0,0,0,0.08) over white — Google format requires hex
  border-medium: "#e0e0e0"   # was rgba(0,0,0,0.10) over white
  border-strong: "#c8c8c8"
  border-blue: "#317cff"     # focus/active outline

  # Shadow tints
  shadow-subtle: "#f5f5f5"   # was rgba(0,0,0,0.05) flattened over white
  shadow-card: "#e8e8e8"     # was rgba(0,0,0,0.08) — card ring shadow

typography:
  display-hero:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -3.2px
  display:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -2.56px
  heading-section:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.72px
  heading-3:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.96px
  title:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.72px
  body-large:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.16px
  body:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.16px
  body-medium:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: -0.16px
  body-small:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.16px
  caption:
    fontFamily: "Inter, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  label-mono:
    fontFamily: "IBM Plex Mono, Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.24px
  code-body:
    fontFamily: "IBM Plex Mono, Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px
  4xl: 32px
  5xl: 40px
  6xl: 48px
  7xl: 72px
  8xl: 80px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 10px
  pill: 9999px

components:
  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px

  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px

  # Primary CTA — solid blue
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

  # Secondary — dark fill
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 14px 16px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-muted}"

  # Ghost — outlined in blue
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 14px 16px
    border: "1px solid {colors.border-blue}"
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"

  # Inline chip / tag
  button-chip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 4px 8px
  button-chip-hover:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.ink}"

  # Card
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: "1px solid {colors.border}"
  card-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"

  # Code editor / terminal block
  code-block:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.code-body}"
    rounded: "{rounded.lg}"
    padding: 16px

  # Form input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    border: "1px solid {colors.border}"
  input-focus:
    border: "1px solid {colors.border-blue}"
    textColor: "{colors.ink}"

  # Badge / tag — pill
  badge-pill:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
    border: "1px solid {colors.border}"
  badge-blue:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 6px 6px

  # Monospace label (e.g., keyboard shortcuts, agent labels)
  mono-label:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.xs}"
    padding: 0px 6px
---

# Windsurf Design System

## Overview

Windsurf's marketing site reads as a precise, confident statement from a company at the intersection of AI and the coding IDE experience. The canvas is pure white (`{colors.background}`) — not warm cream, not dark slate — just clean, surgical white that places no filter between the user and the product. Near-black ink (`{colors.ink}`) at weight 400 to 500 builds hierarchy through size and tracking rather than color variation, a discipline that keeps the palette feeling controlled even as the electric blue accent (`{colors.primary}`) fires with real voltage. The result belongs to the same visual family as Vercel and Linear: confident, tool-native minimalism that says "this is serious software, built for serious users."

Inter is the sole display and body typeface, wielded with engineering-grade precision. At hero scale (80px, weight 400), letter-spacing drops to -3.2px — nearly 4% compression — creating a density that feels architectural rather than decorative. Tracking eases proportionally as sizes shrink, and IBM Plex Mono steps in for code labels, keyboard shortcuts, and terminal-style UI elements, adding a distinct technical voice without adding typographic complexity. Two fonts, two registers: display/UI and code. No serifs, no italics-as-personality, no decorative flourish. The typography does its job and gets out of the way.

The product UI screenshots are the visual heart of the page — dark-surface code editors, agent selection dropdowns, and live diff views all treated like first-class design elements rather than afterthoughts. The blue `{colors.primary}` activates only in high-value moments: primary CTAs, active agent names, link text, and focus states. Everywhere else, the system runs cool. Shadow depth is restrained — single-layer box-shadows at 1-2px displacement, border-rings rather than dramatic elevation — and border-radius clusters in the 4-8px range, sharp enough to feel like an IDE but never harsh.

**Key Characteristics:**
- Pure white `{colors.background}` canvas with no warm tints — clean, clinical, product-first
- Inter at display scale uses -3.2px letter-spacing at 80px, scaling proportionally to zero by 16px
- Two-font system: Inter for all display/UI, IBM Plex Mono and Geist Mono for code
- Electric blue `{colors.primary}` is the single accent color — CTAs, links, focus states, active agents
- Near-black `{colors.ink}` (#191919) as primary text — slightly warmer than pure black
- Border system uses opaque-hex approximations of rgba(0,0,0,0.08/0.10) over white
- Radius clusters at `{rounded.sm}` (4px) and `{rounded.lg}` (8px) for a crisp, tool-native feel
- `{typography.label-mono}` (IBM Plex Mono, tracked wide at 0.24px) for code labels and shortcuts
- Product UI screenshots are featured as primary hero content, not decorative context
- 8px base spacing grid with fine 4-6px increments for density within UI components

## Colors

### Primary Canvas
- **White** (`{colors.background}`): Page canvas and primary surface — pure, unmodified white.
- **Surface Soft** (`{colors.surface-soft}`): Near-white for subtle card and hover backgrounds.
- **Surface Dim** (`{colors.surface-dim}`): Slightly deeper off-white for active/pressed states.

### Ink
- **Near-Black** (`{colors.ink}`): Primary text at weight 400-500. Not true black — a fraction warmer.
- **Secondary** (`{colors.ink-secondary}`): Secondary labels, descriptions.
- **Muted** (`{colors.ink-muted}`): Placeholders, helper text, disabled states.

### Brand Accent
- **Windsurf Blue** (`{colors.primary}`): The system's single brand accent — electric blue for all primary CTAs, active agent labels, link text, and focus states. Restrained to these high-value moments.
- **Blue Container** (`{colors.primary-container}`): Tinted blue background for badge highlighting and hover states on blue-bordered elements.
- **Blue Pressed** (`{colors.primary-dark}`): Darker blue for hover/active on primary buttons.

### Semantic
- **Success** (`{colors.success}`): Green for confirmations. /* estimated */
- **Warning** (`{colors.warning}`): Amber for caution states. /* estimated */
- **Error** (`{colors.error}`): Red for destructive actions and error feedback. /* estimated */

### Borders & Shadows
- **Border** (`{colors.border}`): Standard 1px border — opaque equivalent of rgba(0,0,0,0.08) over white.
- **Border Medium** (`{colors.border-medium}`): Slightly more present — rgba(0,0,0,0.10) equivalent.
- **Border Blue** (`{colors.border-blue}`): Blue focus/active outline, matches primary accent.
- **Shadow Subtle** (`{colors.shadow-subtle}`): Lightest shadow tint for hover lift.
- **Shadow Card** (`{colors.shadow-card}`): Card shadow ring, very close to white.

## Typography

### Font Families
- **Display/UI**: `Inter`, fallbacks: `system-ui, -apple-system, Helvetica Neue, Arial, sans-serif`
- **Code/Technical**: `IBM Plex Mono`, `Geist Mono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo`
- Inter is the only display typeface — no serif secondary voice, no custom typefaces.

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 80px, w400, -3.2px — top-level hero statements |
| `display` | 64px, w500, -2.56px — major section heroes |
| `heading-section` | 48px, w500, -1.44px — section-level headings |
| `heading-sub` | 36px, w500, -0.72px — sub-section headings |
| `heading-3` | 32px, w500, -0.96px — card and panel headings |
| `title` | 24px, w400, -0.72px — smaller titled blocks |
| `body-large` | 20px, w400, -0.16px — lead paragraphs |
| `body` | 16px, w400, -0.16px — standard prose |
| `body-medium` | 16px, w500, -0.16px — emphasized UI labels |
| `body-small` | 15px, w400 — compact secondary text |
| `nav-link` | 16px, w400 — navigation links |
| `button-ui` | 20px, w500, -0.16px — CTA button text |
| `caption` | 12px, w400 — metadata and footnotes |
| `label-mono` | IBM Plex Mono, 12px, w500, +0.24px — code labels, shortcuts |
| `code-body` | IBM Plex Mono, 14px, w400 — code blocks, terminal |

### Principles
- **Tracking as hierarchy**: letter-spacing compresses aggressively from -3.2px at 80px to near-zero at 16px — size and tracking together create the hierarchy, weight alone does not.
- **Single sans voice**: Inter handles everything from 80px hero to 12px caption. No secondary display face, no serif editorial register.
- **Monospace as technical identity**: IBM Plex Mono and Geist Mono signal code-first product DNA — used in labels, agent names, and terminal-style UI, not for purely decorative contrast.
- **Weight restraint at display**: w400 at 80px, w500 from 36px down. Rarely heavier. Control, not emphasis.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Fine-grained sub-8px increments (4px, 6px) allow IDE-level component density.

Content width is generous — full-viewport hero sections, constrained text columns (~760px), and wide product UI showcase areas that let screenshots breathe at full fidelity.

### Grid & Container
- Max content width: ~1280px
- Hero: two-column (copy + product screenshot) at desktop, stacked mobile
- Feature sections: 1-2 column grids with consistent 80px section padding
- Product showcase: full-bleed or near-full-bleed dark-surface editor screenshots

### Whitespace Philosophy
- **Functional density**: tight internal component spacing (6-12px) contrasts with generous section margins (72-80px).
- **Screenshot-first**: layout is engineered to give product UI screenshots maximum real estate — text steps back, image leads.
- **Breathing room at the top**: hero sections have large padding above the fold, creating a premium first impression.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Text sections, page background |
| Border Ring (Level 1) | 1px solid `{colors.border}` | Card and container outlines |
| Subtle Lift (Level 2) | `rgba(0,0,0,0.05) 0px 1px 2px` | Hover cards, small dropdowns |
| Card (Level 3) | `rgba(0,0,0,0.06) 0px 0px 3px + 0.5px ring` | Featured cards, panels |
| Popover (Level 4) | `rgba(0,0,0,0.18) 0px 6px 16px -4px, rgba(0,0,0,0.10) 0px 2px 6px -2px` | Dropdowns, agent selectors |
| Focus Ring | 1px solid `{colors.border-blue}` on inputs | Keyboard and active input feedback |

**Shadow Philosophy**: Windsurf's depth system is almost entirely border-based at resting state — 1px solid lines define containers rather than shadows. Elevation enters only for interactive overlays (dropdowns, popovers) and hover transitions. Shadows use small blur radii (1-16px) with very low opacity, producing crisp, functional lift rather than atmospheric glow. Nothing floats dramatically; everything sits precisely in its layer.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rare — dividers, rule elements |
| `xs` | 2px | Micro elements, inline code ticks |
| `sm` | 4px | Buttons, input fields, small badges |
| `md` | 6px | Chips, tags, compact cards |
| `lg` | 8px | Cards, panels, modals, editor frames |
| `xl` | 10px | Larger cards and feature containers |
| `pill` | 9999px | Pill badges, announcement banners |

The system reads as crisp and tool-native — sharp enough to signal precision software, but with enough radius to avoid feeling harsh. The dominant radius for interactive elements is `{rounded.sm}` and `{rounded.lg}`, creating a consistent visual rhythm with minimal variation.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Electric blue `{colors.primary}` fill, white text, 4px radius, 14px vertical padding. The single highest-priority CTA on any page.
- **`button-secondary`** — Near-black `{colors.ink}` fill, white text. Same geometry as primary, equal visual weight through darkness rather than color.
- **`button-ghost`** — White background with blue `{colors.border-blue}` 1px border. Used for secondary actions alongside a primary CTA. Hover fills with light blue tint.
- **`button-chip`** — Small, surface-tinted chips for tags, filters, and inline selectors.

### Cards
- **`card`** — White background, 1px `{colors.border}` border, 8px radius. Standard content container throughout the site.
- **`card-hover`** — Same geometry, surface-soft background on hover. Shadow or border intensification as secondary feedback.

### Code & Terminal Blocks
- **`code-block`** — Near-black background, white text, IBM Plex Mono. The visual inversion that represents the product's core: an IDE-in-a-browser.
- These blocks are treated as primary visual assets — not utility UI, but hero product content.

### Badges & Labels
- **`badge-pill`** — Pill-shaped bordered badge. Used for feature labels, agent names, release tags.
- **`badge-blue`** — Blue-tinted square-ish badge for active selections, category labels.
- **`mono-label`** — IBM Plex Mono label for keyboard shortcuts, agent names in code contexts.

### Navigation
- Sticky top nav, white background, `{colors.border}` bottom separator.
- Logo + primary links (w400, 16px) + Download CTA button (right-aligned, primary blue).
- Dropdown menus at medium shadow elevation, 8px radius panel, 1px bordered.

### Inputs
- White background, 1px `{colors.border}` border at rest.
- Blue `{colors.border-blue}` focus outline — the same blue as the primary accent, creating coherence.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the highest-priority CTAs, active states, and key links — preserve its electric stamp quality.
- Apply proportional negative letter-spacing: -3.2px at 80px scales down to -0.16px by 16-20px, zero below.
- Treat product screenshots and editor UI as primary design elements — give them maximum canvas width and real border-radius frames.
- Use IBM Plex Mono (`{typography.label-mono}`) for all keyboard shortcuts, agent names, and technical micro-labels.
- Apply `{rounded.sm}` (4px) on buttons and inputs, `{rounded.lg}` (8px) on cards and panels — maintain the two-tier radius rhythm.
- Use border-ring depth (1px `{colors.border}`) at rest; reserve shadow elevation for interactive overlays.
- Build secondary text hierarchy through `{colors.ink-secondary}` and `{colors.ink-muted}` — never introduce new colors for text variation.
- Use `{colors.primary-container}` for tinted blue hover backgrounds and badge fills — keeps blue family coherent.

### Don't
- Don't use warm backgrounds — `{colors.background}` is pure white only, not cream or warm-tinted neutral.
- Don't introduce radius values outside the declared scale — mid-range variants (3px, 5px, 7px) undermine the crisp system.
- Don't use display weight (700+) on Inter at any display size — the system runs weight-restrained at 400-500.
- Don't add serif or decorative fonts — the two-font system (Inter + Mono) is intentional and complete.
- Don't scatter `{colors.primary}` blue across decorative elements — it only fires at high-value interaction moments.
- Don't use dramatic multi-layer drop shadows for cards — border-rings are the primary container signal.
- Don't truncate the Inter letter-spacing effect by resetting to `letter-spacing: 0` at display sizes.
- Don't override the code block inversion — dark background on code UI is the product identity, not a stylistic option.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, full-width hero, stacked product screenshots |
| Tablet | 640-1024px | Two-column begins, navigation may collapse |
| Desktop | 1024-1280px | Full two-column hero, product screenshots at full resolution |
| Large Desktop | >1280px | Max-width container, increased section padding |

### Touch Targets
- Buttons use 14px vertical padding (28px+ touch height) — above 44px tap target with text height included.
- Nav links at 16px with adequate horizontal padding for thumb-friendly spacing.
- Pill badges and chips use adequate padding for touch contexts.

### Collapsing Strategy
- Hero: two-column (copy + screenshot) collapses to single column with screenshot below the fold.
- Navigation: horizontal links collapse to hamburger on mobile — Download CTA remains visible.
- Product screenshots: constrained width at mobile, may show partial crop or scrollable overflow.
- Feature sections: side-by-side panels stack vertically, spacing reduces from 80px to 32-48px.
- Inter tracking maintained at all breakpoints — don't strip letter-spacing on mobile.

### Image Behavior
- Product screenshots treated as content images with responsive width, maintaining aspect ratio.
- Dark editor UI blocks scale with `max-width: 100%` — border-radius preserved at all sizes.
- Logo and icon marks use SVG — crisp at any density.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (pure white)
- Primary text: `{colors.ink}` (near-black #191919)
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}` (electric blue)
- Border: `{colors.border}` (soft gray)
- Focus: `{colors.border-blue}` (blue border ring)
- Code background: `{colors.ink}` (inverted for editor blocks)

### Example Component Prompts

- "Create a hero section on `{colors.background}` white. Headline: 80px Inter weight 400, line-height 1.0, letter-spacing -3.2px, color `{colors.ink}`. Sub-headline: 64px Inter weight 500, -2.56px tracking. Body lead: 20px Inter weight 400, -0.16px tracking, color `{colors.ink-secondary}`. Primary CTA: `{colors.primary}` background, `{colors.on-primary}` text, 20px Inter weight 500, 4px radius, 14px 16px padding. Secondary CTA: same geometry but `{colors.ink}` background."

- "Build a feature card: `{colors.background}` background, 1px solid `{colors.border}` border, 8px radius, 24px padding. Heading: 20px Inter weight 500, letter-spacing -0.16px, `{colors.ink}`. Body: 16px Inter weight 400, `{colors.ink-secondary}`, line-height 1.5. Hover: transition to `{colors.surface-soft}` background with subtle shadow lift."

- "Design a code/terminal block: `{colors.ink}` background, `{colors.background}` text, 14px IBM Plex Mono weight 400, line-height 1.5, 8px radius, 16px padding. Frame it with a 1px `{colors.border}` border to lift it off the page background."

- "Create navigation: white background, 1px `{colors.border}` bottom border. Logo left, links centered (16px Inter weight 400, `{colors.ink}`, 8px horizontal padding). Right: 'Sign in' text link + 'Download' primary button (`{colors.primary}` bg, white text, 4px radius, 12px 20px padding)."

- "Build a pill badge: `{colors.background}` background, `{colors.ink}` text, 14px Inter weight 400, 9999px radius, 1px solid `{colors.border}` border, 4px 12px padding. Variant: `{colors.primary-container}` background with `{colors.primary}` text for active/highlighted state."

### Iteration Guide

1. Start from pure white `{colors.background}` — no warm tint, no off-white. Any surface variation should use `{colors.surface-soft}` or `{colors.surface-dim}`.
2. Apply `{colors.primary}` blue only at the highest-value interactive moment on the screen — one primary CTA per view. Secondary actions use dark `{colors.ink}` or ghost variants.
3. Scale Inter letter-spacing with font size: -3.2px at 80px → -2.56px at 64px → -1.44px at 48px → -0.72px at 36px → -0.16px at 16-20px → 0px below 15px.
4. Use border-rings (1px `{colors.border}`) as the primary container signal. Add shadow only for interactive overlays (dropdowns, popovers) at 6-16px blur.
5. Radius lives in two places: `{rounded.sm}` (4px) for interactive controls; `{rounded.lg}` (8px) for containers and panels.
6. Code UI elements always invert: `{colors.ink}` background, white text, IBM Plex Mono — the product identity lives here.
7. Typography weight stays 400-500. Use size, tracking, and color (`{colors.ink}` vs `{colors.ink-secondary}`) to build hierarchy before reaching for bold.

---

## 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 Windsurf. Brand names and trademarks belong to their respective owners.