---
version: alpha
name: WorkOS
description: Enterprise auth infrastructure with a designer's sensibility — Untitled Sans at extreme negative tracking, an indigo-violet primary, a teal accent for secondary CTAs, and a whisper-cool off-white canvas that feels like the product itself.

colors:
  # Canvas
  background: "#ffffff"
  surface: "#f9f9fb"           # lightest cool wash, footers and alt bands
  surface-dark: "#14182e"      # dark hero sections, deep navy

  # Ink / text
  ink: "#29363d"               # primary text — cool dark slate, not pure black
  ink-secondary: "#656b8a"     # supporting copy, footer links, captions
  ink-muted: "#8b8d98"         # placeholder, disabled, very muted labels
  on-dark: "#ffffff"           # text on dark surfaces and primary CTA
  on-teal: "#030628"           # text on teal CTA (near-black navy) /* estimated */

  # Brand accent — WorkOS violet/indigo
  primary: "#6363f1"           # nav CTA, primary button, inline links
  primary-container: "#1a1736" # deep violet surface for dark sections
  on-primary: "#ffffff"

  # Secondary accent — teal
  accent-teal: "#23f0c3"       # "Read the docs" CTA and decorative gradients
  accent-teal-glow: "#19cba4"  # teal ring/border on hover /* was rgba(35,240,195,0.7) flattened */

  # Neutral mid tones
  ink-tertiary: "#aeb2cc"      # very muted mid-blue-gray
  ink-light: "#8f96bd"         # light mid-tone for decorative elements

  # Borders
  border: "#e8eaed"            # hairline dividers, ghost button edges
  border-strong: "#d272ff"     # decorative purple glow borders /* accent only */

  # Semantic
  success: "#00ae48"           # success badge color /* estimated from rgba(0,174,72,0.1) */
  info: "#558adb"              # info blue, chart colors

  # Shadow tints (opaque approximations)
  shadow-deep: "#110654"       # was rgba(17,7,100,0.035-0.12) — multi-layer card shadow tint
  shadow-soft: "#000000"       # was rgba(0,0,0,0.04-0.17) — flattened for Google format

  # Hover/focus
  hover-surface: "#eef4fc"     # was hover/focus extracted from site

typography:
  display-hero:
    fontFamily: "Untitled Sans, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -5.6px
  display:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.07
    letterSpacing: -2.6px
  heading-large:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -1.52px
  heading:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -1.4px
  heading-sub:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.19px
  body:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  button-ui:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  label-mono:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 1.2px
  eyebrow:
    fontFamily: "Untitled Sans, Inter, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 50px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    shadow: "rgba(23, 6, 100, 0.035) 0px 24px 22px, rgba(23, 6, 100, 0.055) 0px 8px 8px, rgba(23, 6, 100, 0.12) 0px 1px 1px"
  button-primary-hover:
    backgroundColor: "#7777f5"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-teal:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.on-teal}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    shadow: "rgba(35, 240, 195, 0.7) 0px 0px 14px 0px, rgb(25, 203, 164) 0px 0px 0px 1px inset"
  button-teal-hover:
    backgroundColor: "{colors.accent-teal-glow}"
    textColor: "{colors.on-teal}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.hover-surface}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px
    shadow: "rgba(17, 7, 53, 0.05) 0px 51px 78px, rgba(17, 7, 53, 0.035) 0px 21px 35px, rgba(17, 7, 53, 0.02) 0px 3px 4px"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 2px 8px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 40px
    borderColor: "{colors.border}"

  code-label:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.xs}"
    padding: 2px 6px
---

# WorkOS Design System

## Overview

WorkOS occupies an unusual position in the developer tooling space: it is enterprise infrastructure — SSO, SCIM, audit logs, fine-grained authorization — packaged with a precision that rivals the best consumer product design. The canvas is a cool near-white (`{colors.background}`) with barely-there surface bands (`{colors.surface}`) that keep sections legible without any hard breaks. There is no decorative noise here, no geometric illustration, no hero photography. The signal is architectural.

The font is Untitled Sans, a commercial grotesque with the proportions of a Swiss workhorse but the refinement of something purpose-built for screens. At the hero scale (`{typography.display-hero}`: 80px, weight 500, letter-spacing -5.6px), the tracking is severe — a statement about compressed, essential communication that matches exactly how enterprise APIs are named. The compression relaxes deliberately as the scale descends: -2.6px at 52px, -1.52px at 38px, nearly zero at 19px. IBM Plex Mono (`{typography.label-mono}`) appears at the micro scale for technical labels and API tokens, tracked outward with +1.2px as a counterpoint — a visual syntax where code gets space and headings get compressed.

The color story is restrained but layered. WorkOS violet (`{colors.primary}`, #6363f1) carries the primary CTA and interactive links — a cool indigo that reads as trusted and precise without leaning corporate blue. The secondary CTA color is teal (`{colors.accent-teal}`), reserved for "docs" and developer-action buttons, rendered with a luminous glow shadow that makes it feel live. This two-accent palette separates conversion paths (buy/sign up = violet) from exploration paths (docs/learn = teal), encoding product hierarchy into color without a single word.

**Key Characteristics:**
- Untitled Sans at extreme negative letter-spacing on display type (`{typography.display-hero}` at -5.6px) — tracking as a precision signal
- IBM Plex Mono (`{typography.label-mono}`) for technical labels, tracked positively at +1.2px — coding voice in the marketing layer
- Violet primary (`{colors.primary}`) for CTAs and interactive elements; teal secondary (`{colors.accent-teal}`) for developer/docs paths
- Cool near-white canvas (`{colors.background}`) with a subtle violet-wash tint in surface bands (`{colors.surface}`)
- Pill-only button radius (`{rounded.pill}` at 100px) — no intermediate radius on interactive controls
- Multi-layer depth shadows on elevated cards, derived from a cool violet shadow tint (`{colors.shadow-deep}`)
- Teal CTA renders with a glow shadow ring (`{colors.accent-teal-glow}`), making it feel lit from within
- Dark navy sections (`{colors.surface-dark}`) for contrast moments — product screenshots and deep features
- Hairline borders (`{colors.border}`) as the primary structural tool; elevation reserved for premium content modules
- 8px spacing grid with generous section rhythm (`{spacing.3xl}`–`{spacing.4xl}` between major blocks)

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Pure and clean throughout.
- **Cool Whisper** (`{colors.surface}`): Footer, alt-section bands, and code chip fills. A barely-perceptible violet-tinged off-white.
- **Deep Navy** (`{colors.surface-dark}`): Hero sub-sections and product showcase modules. A near-black with violet undertone.

### Ink / Text
- **Dark Slate** (`{colors.ink}`): Primary text, headings — a cool dark color, not pure black, with a coastal slate character.
- **Slate Blue** (`{colors.ink-secondary}`): Supporting copy, footer navigation, secondary labels.
- **Muted Slate** (`{colors.ink-muted}`): Placeholder text, disabled states, metadata.
- **Mid Blue-Gray** (`{colors.ink-tertiary}`): Decorative and minimal-emphasis text.

### Brand Accent
- **WorkOS Violet** (`{colors.primary}`): The primary brand color. Nav CTA, primary buttons, inline links and highlights. Used with restraint — one hot color per screen.
- **Teal** (`{colors.accent-teal}`): Developer-action CTA (docs, API reference). Glows. Encodes a separate journey from conversion CTAs.
- **Teal Ring** (`{colors.accent-teal-glow}`): The inset ring on teal buttons, derived from a darker teal.

### Borders & Structure
- **Hairline** (`{colors.border}`): Card edges, ghost-button outlines, section dividers.
- **Hover Surface** (`{colors.hover-surface}`): Ghost-button hover fill, the faintest blue tint.

### Semantic
- **Success** (`{colors.success}`): Status badge green.
- **Info** (`{colors.info}`): Informational blue — chart and data-viz accents.

### Shadow Tints
- **Shadow Deep** (`{colors.shadow-deep}`): The violet-tinted shadow used in multi-layer card elevation. Opaque approximation; original was `rgba(17,7,100,...)`— Google format requires hex.
- **Shadow Soft** (`{colors.shadow-soft}`): Ambient base for card lifts.

## Typography

### Font Family
- **Primary**: `Untitled Sans` (commercial grotesque), with fallbacks `Inter, -apple-system, BlinkMacSystemFont, sans-serif`. Geometric, refined, screens-first.
- **Monospace**: `IBM Plex Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. Used for technical labels, API tokens, and code chips.
- **Tracking**: Aggressive negative tracking at display scale; positive +1.2px on mono labels for contrast. Letter-spacing normalizes to 0 below 20px.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 80px / 500 / -5.6px — page-defining hero headline |
| `display` | 52px / 500 / -2.6px — section marquee titles |
| `heading-large` | 38px / 500 / -1.52px — feature section headings |
| `heading` | 28px / 500 / -1.4px — subsection and card headings |
| `heading-sub` | 20px / 500 / -0.2px — compact block titles |
| `body-large` | 19px / 400 / -0.19px — lead paragraphs, hero subheads |
| `body` | 16px / 400 — standard reading text |
| `body-medium` | 16px / 500 — UI links, nav text |
| `button-ui` | 16px / 500 — button labels |
| `caption` | 14px / 400 — ghost-button labels, metadata |
| `label-mono` | IBM Plex Mono 12px / 400 / +1.2px — technical labels, code indicators |
| `eyebrow` | 12px / 500 / +1.2px — category marks, section eyebrows |

### Principles
- **Compression at scale**: The -5.6px tracking on 80px is the most extreme in the dev-tools space. It reads as precision, not style — matching how an API contract is written.
- **Two-voice system**: Untitled Sans (human) and IBM Plex Mono (machine) — the same pairing that appears in the actual product UI.
- **Weight restraint**: Weight 500 for headings and UI, 400 for reading text. No bold (700) anywhere — authority comes from size and tracking, not weight.
- **Tracking inverts with scale**: Display type compresses; mono labels open. These two directions reinforce each other when they co-appear.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block above. Base unit: 8px. The scale jumps from `{spacing.xl}` (20px) to `{spacing.2xl}` (40px), skipping the 24px/32px mid-range — a visual decision that keeps component internals compact and inter-section gaps generous.

### Grid & Container
- Max content width: approximately 1140px (breakpoint evidence)
- Standard layout: centered single column for hero; 2–3 column feature grids for product sections
- Full-bleed dark sections (`{colors.surface-dark}`) for product screenshots and feature spotlights
- Customer logo grid: uniform grayscale with consistent gap rhythm

### Whitespace Philosophy
- **Precision over decoration**: White space signals engineering discipline, not aesthetic choice.
- **Section jumps are deliberate**: `{spacing.3xl}`–`{spacing.4xl}` between major blocks creates breathing room that matches the confidence of the typography.
- **Component internals stay tight**: `{spacing.md}`–`{spacing.lg}` inside cards, 12px between label and value.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.border}` hairline | Most page content and cards |
| Subtle (Level 1) | `0 0 0 1px {colors.border}` ring | Ghost button containment |
| Card (Level 2) | Hairline + `0 5px 10px -4px rgba(0,0,0,0.17)` | Resting product cards |
| Elevated (Level 3) | 6-layer violet-tinted stack via `{colors.shadow-deep}` | Hero feature modules, pricing cards |
| CTA Glow | `rgba(35,240,195,0.7) 0px 0px 14px` + inset ring | Teal CTA button glow effect |
| Focus Ring | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: WorkOS's shadows are technically impressive — a 6-layer Fibonacci-paced stack where each layer adds orbital distance, creating a physically plausible depth. The shadow tint is a cool violet-navy (`{colors.shadow-deep}`) derived from the brand palette rather than neutral black. Most of the page stays flat; elevation is spent on modules that need to feel like products, not just content blocks.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is intentionally non-graduated on interactive elements:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved (not observed on marketing) |
| `xs` | 4px | Badges, code chips, small status indicators |
| `sm` | 8px | Inputs, select controls, inline containers |
| `md` | 16px | Content cards, feature modules |
| `lg` | 50px | Larger card sections (image tops) |
| `pill` | 100px | All buttons — primary, teal, ghost |

The button system is binary: everything interactive is full pill. Cards use 8–16px. The jump between these two registers is deliberate — no intermediate rounding for buttons, ever.

## Components

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

### Buttons

- **`button-primary`** — WorkOS violet (`{colors.primary}`) fill, white text, full pill, 12px 24px padding. Multi-layer violet shadow stack. The conversion CTA.
- **`button-teal`** — Teal (`{colors.accent-teal}`) fill, near-black text (`{colors.on-teal}`), full pill. Renders with a glow shadow ring. Developer/docs path.
- **`button-ghost`** — Transparent fill, violet text, `{colors.border}` hairline outline, full pill. Tertiary actions — "Read more", "Learn more".

### Cards

- **`card`** — White surface, `{colors.border}` hairline, 16px radius. The default content container.
- **`card-elevated`** — Same surface, 6-layer violet shadow stack. Used for featured product modules and pricing sections.

### Inputs

- **`input`** — White fill, `{colors.border}` outline, 8px radius. **`input-focus`** shifts border to `{colors.primary}` — a violet ring that matches the brand exactly.

### Navigation

- **`nav-bar`** — White, hairline bottom border, 16px 40px padding. Body-medium weight links. Violet pill CTA right-aligned.

### Micro Components

- **`badge`** — Whisper surface fill, slate text, 4px radius, 1.2px tracked eyebrow type. Status and category chips throughout.
- **`code-label`** — Surface fill, IBM Plex Mono text, 4px radius. For API names and technical references in marketing copy.

## Do's and Don'ts

### Do
- Apply extreme negative tracking at hero scale (`{typography.display-hero}` at -5.6px) — this is the brand's typographic signature, not a decoration
- Use full pill radius (`{rounded.pill}`) on every button without exception
- Reserve teal (`{colors.accent-teal}`) for developer-action paths (docs, APIs, explore) — not for primary conversion CTAs
- Use the 6-layer violet shadow stack (`{colors.shadow-deep}`) only on modules that need to read as featured or product-tier
- Keep the canvas white (`{colors.background}`) and use dark navy (`{colors.surface-dark}`) sparingly for contrast moments
- Pair Untitled Sans (compressed, human) with IBM Plex Mono (expanded, machine) to maintain the two-voice system
- Use `{colors.ink}` (dark slate) rather than pure black for body text — the slight cool warmth is intentional
- Apply `{colors.border}` hairlines as the primary structural device before reaching for elevation

### Don't
- Don't use mid-range radius (8–50px) on buttons — the system is binary: `{rounded.xs}` for chips, `{rounded.pill}` for buttons
- Don't make teal the primary action color — violet owns conversion; teal owns exploration
- Don't loosen display letter-spacing toward zero — the compression is the message
- Don't add warm colors (oranges, yellows, warm reds) to UI chrome — the palette is cool throughout
- Don't scatter the multi-layer shadow outside featured modules — flatness plus hairlines is the default state
- Don't weight text at 700 or above — 500 is the maximum weight in the system
- Don't use the glow shadow on non-teal elements — it belongs to the teal CTA's visual identity
- Don't introduce pill radius on cards — cards use `{rounded.md}` (16px) maximum

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, reduced hero size, minimal padding |
| Mobile | 480–767px | Standard mobile, stacked layout, nav collapses |
| Tablet | 768–991px | Two-column grids begin, side-by-side feature rows |
| Desktop Small | 992–1090px | Full layout, product screenshot cards |
| Desktop | 1091–1140px | Max content width, generous section rhythm |
| Large Desktop | >1140px | Centered, outer margins grow |

### Touch Targets
- Buttons: 44px+ tall via `12px 24px` padding at 16px font — comfortable for all thumb sizes
- Nav links: 16px body-medium weight with adequate tap spacing
- Badge chips: small but decorative — not primary interactive targets

### Collapsing Strategy
- **Navigation**: full horizontal nav + violet CTA → hamburger menu on mobile
- **Hero**: 80px display → scales proportionally; negative tracking preserved at all sizes
- **Feature grids**: 3-column → 2-column → single column; card elevation persists at each size
- **Dark sections**: remain full-bleed at all widths; internal text stacks vertically
- **Logo grid**: horizontal multi-row grid → 2-column → horizontal scroll on small mobile
- **Section spacing**: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Image Behavior
- Product screenshots and UI preview images maintain their border-radius treatment across breakpoints
- Hero illustration/diagram elements simplify or stack on mobile
- Full-bleed dark section backgrounds maintain edge-to-edge treatment

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White `{colors.background}`
- Primary text: Cool Slate `{colors.ink}`
- Brand accent (conversion): WorkOS Violet `{colors.primary}`
- Brand accent (developer): Teal `{colors.accent-teal}`
- Secondary text: Slate Blue `{colors.ink-secondary}`
- Border: Hairline `{colors.border}`
- On violet CTA: `{colors.on-primary}`
- On teal CTA: `{colors.on-teal}`

### Example Component Prompts

- "Build a WorkOS hero section: white canvas, 80px Untitled Sans weight 500 headline at `{colors.ink}`, letter-spacing -5.6px, line-height 1.05. Subhead at 19px / 400 / `{colors.ink-secondary}`. Two CTAs side by side: primary at `{colors.primary}` fill, white text, 100px radius, 12px 24px padding, violet multi-layer shadow; secondary teal (`{colors.accent-teal}`) fill, `{colors.on-teal}` text, same radius with 14px 0px 14px glow shadow."
- "Design an elevated product card: white fill, `{rounded.md}` radius, 32px padding. Shadow stack: `rgba(17,7,53,0.05) 0px 51px 78px, rgba(17,7,53,0.035) 0px 21px 35px, rgba(17,7,53,0.02) 0px 3px 4px`. Heading at `{typography.heading}` (`{colors.ink}`), body at `{typography.body}` (`{colors.ink-secondary}`)."
- "Create a ghost button: transparent background, `{colors.primary}` text, `{typography.caption}`, `{rounded.pill}` radius, 12px 22px padding, `{colors.border}` 1px outline. Hover fills `{colors.hover-surface}`."
- "Render a navigation bar: white background, `{colors.border}` bottom hairline, 16px 40px padding. Logo left. Links at `{typography.body-medium}` / `{colors.ink}`. Violet pill CTA (`{colors.primary}` fill, white text, `{rounded.pill}`, 12px 24px) right-aligned."
- "Build an API feature row: eyebrow in IBM Plex Mono (`{typography.label-mono}`) at `{colors.ink-secondary}`, uppercase, letter-spacing 1.2px. Below it, feature title at `{typography.heading}`, `{colors.ink}`, -1.4px tracking. Body at `{typography.body-large}`, `{colors.ink-secondary}`. Code chip: `{colors.surface}` fill, mono text `{colors.ink-secondary}`, `{rounded.xs}`, 2px 6px padding."
- "Design a customer logo grid: `{colors.surface}` band, grayscale logos in a 4-column grid, each logo `{colors.ink-muted}` opacity tinted, separated by `{spacing.xl}` gaps. Title above at `{typography.heading-sub}`, center-aligned, `{colors.ink}`."

### Iteration Guide

1. Start with the canvas: white (`{colors.background}`) everywhere, `{colors.surface}` only for footer and alternate bands
2. Typography tracking is non-negotiable — verify -5.6px at hero, scale it proportionally as size drops
3. Violet (`{colors.primary}`) for the primary CTA only; teal (`{colors.accent-teal}`) for the developer-action button — never swap these
4. Every button is `{rounded.pill}` (100px); every card is `{rounded.md}` (16px) or smaller; nothing in between
5. Elevation is reserved: multi-layer shadow only on featured modules; everything else uses `{colors.border}` hairlines
6. When writing labels or API references, switch to IBM Plex Mono (`{typography.label-mono}`) — it signals technical precision
7. Two-color palette discipline: the whole system is built on violet and teal; resist adding a third accent

---

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