# WorkOS — Marketing site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core (published)

| 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 |

### Foreground ramps

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`

### User-management (`--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` |

### Observed surfaces & accents

`#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.

## 3. Typography Rules

- One family: `"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.

## 4. Component Stylings

**Nav** — light, over the white canvas.

**Buttons** — all **100px pills**:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary | `#6363f1` | `#ffffff` | none | 100px | 43px | 12px 24px | 16/500 |
| Mint (on dark) | `#23f0c3` | `#030628` | none | 100px | 43px | 12px 24px | 16/500 |
| Outline | transparent | `#6363f1` | 1px `#e8eaed` | 100px | 35px | 9.5px 20px | 14/400 |

**Shadows** — the most elaborate set in the library, all multi-layer with fractional values and blue-violet tints:

- `rgba(22,26,41,0.016) 0 51px 80px, rgba(22,26,41,0.027) 0 15.375px 24.1177px, rgba(22,26,41,0.04) 0 6.38599px 10.0172px, rgba(22,26,41,0.07) 0 0.5px 3.62304px` — the four-layer ambient card
- `rgba(23,6,100,0.035) 0 24px 22px, rgba(23,6,100,0.055) 0 8.5846px 8.03036px, rgba(23,6,100,0.067) 0 4.77692px 3.89859px, rgba(23,6,100,0.082) 0 2.63479px 1.91116px, rgba(23,6,100,0.12) 0 1.15891px 0.755676px` — a five-layer violet-tinted stack
- `rgba(16,26,113,0.04) 0 32px 32px -16px, rgba(16,26,113,0.06) 0 16px 16px -8px, rgba(16,26,113,0.04) 0 6px 6px -3px, rgba(16,26,113,0.08) 0 0 0 1px` — the halved-offset stack, closing with a 1px ring

The fractional pixel values indicate these are generated from an easing curve rather than hand-authored.

**User-management widget** — the embedded auth component uses its own `--um-*` palette: `#f9f9fb` input ground, `#dddde3` border stepping to `#b9bbc6` when active, `#d1d1ff` CTA accent.

**Inputs** — from the `--um-*` set above; marketing-surface fields were not separately captured.

## 5. Layout Principles

White canvas with `#f9f9fb` light bands and deep `#030527` / `#0f2151` / `#1a1736` dark sections. Each content block repeats: purple 28px eyebrow, 52px slate heading, 19px body. Radius census: `2px 0 0`, `4 / 6 / 7 / 8 / 10 / 16 / 100px`, `100%`.

## 6. Depth & Elevation

Radius scale: `4 / 6 / 7 / 8 / 10 / 16px`, `100px` (all buttons), `100%`, plus an asymmetric `2px 0 0`.

Shadow recipes as in §4 — four- and five-layer stacks tinted `rgba(22,26,41,…)`, `rgba(23,6,100,…)` and `rgba(16,26,113,…)`. Never neutral black.

## 7. Motion

Transition census resolved only generic values; specific durations and easings are **not captured**.

## 8. Backgrounds, Effects & WebGL

Gradients observed:

- `linear-gradient(135deg, rgb(232,234,237), rgba(232,234,237,0) 40%)` — a soft neutral edge wash
- `linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0))` — a glass sheen on dark
- `linear-gradient(45deg, rgb(166,131,255), rgb(119,114,229) 28%, rgb(104,124,254) 32%, rgb(91,177,226) 44%, rgb(103,123,255) 65%, rgba(103,123,255,0))` — a violet-to-sky brand sweep

No WebGL, canvas, backdrop-filter or grain resolved.

## 9. Do's and Don'ts

### Do
- Set every heading in Untitled Sans at weight 500 — there is no bold.
- Track headings hard: about **-7% at 80px** and **-5% at 52px and 28px**.
- Use the purple 28px eyebrow directly above the 52px slate heading as the section pattern.
- Make every button a 100px pill; primary purple, secondary mint on dark grounds.
- Tint shadows blue-violet (`rgba(23,6,100,…)`, `rgba(16,26,113,…)`) and build them in four or five layers.
- Keep the `--um-*` widget palette separate and softer than the marketing chrome.

### Don't
- Don't use bold weights; 500 is the ceiling.
- Don't set headings at normal tracking — the negative track is the brand.
- Don't use mint `#23f0c3` on light grounds; it is a dark-section CTA.
- Don't use neutral black shadows.
- Don't give buttons a small radius — they are 100px pills.
- Don't mix the `--um-*` component tokens into marketing chrome.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Band `#f9f9fb` · Dark `#030527` / `#030628` · Ink `#29363d` · Body `#656b8a` · Muted `#8f96bd` · Border `#e8eaed` · Accent `#6363f1` · Dark CTA `#23f0c3`
- Font: Untitled Sans, weight 500 headings / 400 body · Body: 19/30.4 lead at -0.19px, 16/24 · Radius: 100px pill / 4-16px surfaces · Control height: 43px primary, 35px outline
- Focus: not captured · Input: `#f9f9fb` on `#dddde3`, active `#b9bbc6` · Motion: not captured

<workos_design_language>
A crisp light enterprise-auth surface whose entire character is typographic: ONE family, Untitled Sans, at a single WEIGHT 500 for every heading with no bold anywhere, driven by unusually hard negative tracking — roughly -7% at the 80/84 hero (-5.6px) and -5% at the 52/55.64 section heading (-2.6px) and the 28/33.6 eyebrow (-1.4px), easing to -0.19px at 19/30.4 lead body and zero at 16/24. The repeated section pattern is a purple #6363f1 eyebrow sitting directly above a slate-black #29363d heading. Colour is enterprise-calm: white canvas with #f9f9fb bands and deep #030527, #0f2151 and #1a1736 dark sections, ink #29363d, body #656b8a, muted #8f96bd, hairline #e8eaed, with published light (#656B8A, #8F96BD) and dark (#C5CAE8, #878CA6) foreground ramps. One brand purple carries the eyebrows and the primary pill; a bright mint #23f0c3 is reserved strictly for the secondary CTA on dark grounds. Every button is a 100px pill — 43px purple or mint primary, 35px outline with a 1px #e8eaed border in purple text. The embedded user-management widget keeps a deliberately SEPARATE and softer --um-* palette (#2b333b ink, #60646c secondary, #f9f9fb input on #dddde3 stepping to #b9bbc6 when active, #d1d1ff CTA accent) that must not bleed into marketing chrome. Depth is the most elaborate in this library: four- and five-layer shadow stacks with fractional pixel values, clearly generated from an easing curve, and tinted blue-violet — rgba(22,26,41,...), rgba(23,6,100,...), rgba(16,26,113,...) — never neutral black, one of them closing with a 0 0 0 1px ring. Gradients are limited to a neutral edge wash, a white glass sheen on dark, and a violet-to-sky brand sweep; no WebGL, canvas or backdrop-filter. Feels: crisp, typographic, enterprise-calm, developer-first. Avoid: bold weights, normal tracking on headings, mint on light grounds, neutral black shadows, small control radii, and mixing the --um-* component tokens into chrome.
</workos_design_language>