A crisp enterprise-auth surface whose whole character is typographic: one family at a single weight 500 with no bold anywhere, driven by the tightest negative tracking in this library — about -7% at the 80px hero and -5% at section and eyebrow sizes — with a purple eyebrow sitting above a slate heading as the repeated section pattern. One brand purple carries the pills, a bright mint is reserved strictly for dark-ground CTAs, and depth comes from four- and five-layer blue-violet shadow stacks with fractional pixel values.
Browse WorkOS in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: workos.com (live DOM, computed styles + published CSS custom properties), 2026-07-19. Coverage: home / enterprise-auth landing. Logged-in dashboard not captured (needs login).
WorkOS is a crisp light developer surface whose whole character sits in the typography: Untitled Sans at a single weight 500, driven to an 80px hero with -5.6px tracking — a 7% negative track, the tightest in this library — so the headline reads as a compressed slab of type. Section headings follow at 52px/-2.6px, and even the 28px eyebrow-style h2 holds -1.4px. Body copy relaxes to 19/30.4 at -0.19px. Colour is minimal and enterprise-calm: a #29363d slate-black ink, a #656b8a blue-gray body, and one brand purple #6363f1 used on both the eyebrow headings and the primary pill. The one surprise is #23f0c3, a bright mint reserved for the secondary CTA on dark sections. Shadows are unusually elaborate — four- and five-layer stacks with fractional pixel values, tinted blue-violet rather than black. Feels: crisp, typographic, enterprise-calm, developer-first.
| Token | Hex | Role / usage |
|---|---|---|
--black / --light-1 | #29363d | Primary ink (slate-black) |
--black-dark | #030628 | Deep navy ground |
--brand-purple | #6363f1 | THE brand accent — eyebrow headings, primary pill |
--brand-3 | #d8d9fa | Pale brand tint |
--dark-accent | #23f0c3 | Mint secondary CTA on dark |
--section-light | #f9f9fb | Light section band |
--cool-gray | #eceff1 | Cool neutral fill |
--border-color | #e8eaed | The standard hairline |
--border-dark | #2b335a | Hairline on dark |
Light theme: --foreground-light-2 / --light-2 #656B8A · --foreground-light-3 / --light-3 #8F96BD
Dark theme: --foreground-dark-2 / --dark-2 #C5CAE8 · --foreground-dark-3 / --dark-3 #878CA6
--um-*) component tokens| Token | Hex |
|---|---|
--um-text-primary | #2b333b |
--um-text-secondary | #60646c |
--um-input-bg | #f9f9fb |
--um-input-border | #dddde3 |
--um-input-border-active | #b9bbc6 |
--um-cta-accent | #d1d1ff |
--um-color-swatch-border | #0000301a |
#ffffff canvas · #eceded neutral fill · rgba(0,0,59,.05) tinted wash · #1a1736 deep violet panel · #0f2151 navy panel · #030527 darkest section · #dedeff brand wash · #26251e warm dark · #04a902 success green · #e55233 warning orange
Rules. One brand purple; the mint #23f0c3 appears only as a secondary CTA on dark grounds. The --um-* set belongs to the embedded user-management widget and is deliberately a *separate*, softer palette (#2b333b ink, #60646c secondary) from the marketing chrome.
"Untitled Sans", "Untitled Fallback" — headings and body alike| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 80/84 | 500 | -5.6px (-7%) |
| Section h3 | 52/55.64 | 500 | -2.6px (-5%) |
| Eyebrow h2 | 28/33.6 | 500 | -1.4px (-5%), #6363f1 |
| Lead body | 19/30.4 | 400 | -0.19px |
| Body | 16/24 | 400 | normal |
| Button label | 14-16 | 400-500 | normal |
Patterns: weight 500 for every heading — there is no bold. Tracking is the whole system: roughly -7% at the hero and -5% at section and eyebrow sizes, easing to -1% at lead body and zero at 16px. The purple eyebrow h2 sitting directly above a 52px slate h3 is the repeated section pattern. Sentence case; no uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.