# WorkOS · Design system migration spec

> Source: https://workos.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of modern, enterprise-focused SaaS design that balances developer utility with high-end professional aesthetics.

## 1. Identity DNA

WorkOS functions as the invisible scaffolding that transforms a startup into an enterprise-ready platform. Its design system embodies this role: a clean, professional framework built not for decoration, but for reliable, scalable infrastructure. The visual language is direct and confident, mirroring the developer-focused utility it provides.

**One-liner:** WorkOS empowers developers to ship enterprise features like SSO and directory sync in minutes instead of months.
**Keywords:** Enterprise · Developer · API · Integration · Infrastructure
**Analogy:** The invisible scaffolding that turns a startup into an enterprise-ready platform

## 2. Color

The color system is intentionally restrained, built on high-contrast text against clean white and soft gray surfaces. A single, distinctive blue-purple accent reserves its use for primary actions, creating a clear hierarchy of interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F9FB` | card background |
| `--bg-quiet` | `#F2F2F8` | quiet area |
| `--ink` | `#29363D` | body text |
| `--ink-soft` | `#65678A` | secondary text |
| `--muted` | `#AEB2CC` | placeholder |
| `--muted-soft` | `#8F96BD` | weak hint |
| `--accent` | `#6363F1` | single accent |
| `--line` | `rgba(41, 56, 78, 0.08)` | divider |

**Color principle:** High-contrast text on clean white/light-gray surfaces with a single distinctive blue-purple accent for primary actions.

This disciplined approach ensures the interface remains a neutral, trustworthy foundation, with the accent color serving as a precise signal for the next step.

## 3. Typography

The typographic voice is split between a geometric sans-serif for authoritative headlines and a humanist sans-serif for legible body text. Weights are restricted to 400 and 500, establishing a clean hierarchy through scale and spacing rather than weight variation.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -1.28px | Hero headlines |
| h2 | 40px | 1.2 | 500 | -0.5px | Section titles |
| body | 20px | 1.6 | 400 | 0 | Lead paragraphs |
| small | 16px | 1.5 | 400 | 0 | Body text and UI labels |
| caption | 14px | 1.4 | 400 | -0.12px | Metadata and helper text |
| overline | 12px | 1.6 | 500 | 0.05em | Section labels |

**Type rules:**
- Headlines use tight negative letter-spacing (-1px to -2px)
- Body text uses standard letter-spacing (0) for readability
- Mono font used strictly for code snippets and technical values
- Font weights are restricted to 400 and 500 for a clean hierarchy
- Uppercase transform used exclusively for overlines

## 4. Spacing

Spacing follows a strict 4px grid, creating a consistent rhythm that gives the layout its breathable, structured feel.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing follows a strict 4px grid, with section padding consistently at 64px to create a rhythmic, breathing layout.

## 5. Surfaces

Depth is communicated through a system of subtle shadows and borders, not heavy decoration. Inset shadows and 1px lines using rgba(41, 56, 78, 0.08) create soft, layered surfaces for cards and inputs.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px inset for subtle inset borders
  - 0px 2px 5px 0px rgba(0, 0, 0, 0.17) for elevated cards
  - 0px 5px 10px -4px rgba(0, 0, 0, 0.17) for modals/popovers
- **Borders:** Subtle 1px borders using rgba(41, 56, 78, 0.08) or solid white for inset effects.

## 6. Layout

The skeleton is a standard 12-column grid with centered content containers. Generous white space between sections establishes a clear, high-density structure for presenting complex integration information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard 12-column grid with centered content containers, generous white space between sections.

## 7. Motion & Interaction

Motion is minimal and purposeful, used to confirm interaction rather than entertain. Smooth 0.4-second transformations and subtle color shifts on hover provide immediate feedback with a polished feel.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Hover states trigger background color changes
  - Transformations (0.4s) on interactive elements
  - Subtle fade-ins on scroll

- **Hover:** Background color shift for buttons, subtle color transition for text links.
- **Click:** Immediate visual feedback, often a slight transform scale or shadow change.
- **Transition:** All properties transition smoothly (0.15s - 0.4s) for a polished feel.
- **Keyboard:** Focus outlines are likely present but invisible in the screenshot.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and benefit-oriented, speaking in the concise, action-focused language developers expect. It avoids casual slang and complex jargon, sticking to clear statements of value.

- **Tone:** Professional, direct, and developer-focused.
- **Headline style:** Bold, concise, and benefit-oriented (e.g., 'Your app, Enterprise Ready').
- **CTA style:** Action-oriented and clear ('Get started', 'Talk to an expert').
- **Avoid:** Avoid overly casual or slang-heavy language / Avoid complex jargon that isn't industry standard / Avoid long, dense paragraphs in the hero sections

### Don'ts
- ❌ Don't use a dark mode or dark backgrounds — screenshot shows a light-dominant theme with white and soft gray surfaces.
- ❌ Don't use a wide variety of bright, competing colors — screenshot shows a restrained palette of white, gray, and one dominant blue-purple accent.
- ❌ Don't use decorative or handwritten fonts — screenshot shows a clean, geometric sans-serif for headlines and a humanist sans-serif for body.
- ❌ Don't use harsh, sharp corners on primary buttons — screenshot shows pill-shaped buttons with full 100px border-radius.
- ❌ Don't use heavy, solid borders for layout dividers — screenshot shows subtle inset shadows and very light 1px borders.
- ❌ Don't use center-aligned body text — screenshot shows left-aligned text for better readability in long copy.

The system deliberately rejects dark mode, competing accent colors, and decorative fonts in favor of a light-dominant, functional clarity.

## System Prompt (paste into AI tool)

```
This is a SaaS and Developer Tools website for WorkOS. The design is clean, professional, and highly structured, focusing on clarity and enterprise-readiness. Key colors are white (#FFFFFF) and soft gray (#F9F9FB) backgrounds, dark ink text (#29363D), and a single dominant blue-purple accent (#6363F1). The typography features a geometric sans-serif for bold display headlines with tight negative letter-spacing, and a humanist sans-serif for legible body text. Critical donts: avoid dark mode, avoid multiple competing accent colors, and avoid using decorative fonts. The layout uses a 12-column grid with generous white space and subtle inset shadows on cards to create depth without heaviness.
```
