Your app, Enterprise Ready.

Start selling to enterprise customers with just a few lines of code. WorkOS is a set of building blocks for quickly adding enterprise features.

Sign in to Acme

Use your work account to continue.

Continue
Continue with SSO
The all-in-one solution

Enterprise SSO (and a whole lot more)

The purple eyebrow above a 52px slate heading is the repeated section pattern.

Single Sign-On

Support any SAML or OIDC identity provider with one integration.

Directory Sync

SCIM and HRIS integrations that keep users and groups in step.

Audit Logs

Manage users and organizations with a compliant event trail.

Developer-first design

A unified platform with real docs

Mint is the secondary CTA colour — and only on dark grounds.

Frictionless set up

Admin Portal onboards your customers’ IT teams without you.

Predictable pricing

Flat per-connection pricing with no negotiation.

Built to scale

Powering identity for thousands of production applications.

Controls

Everything is a 100px pill

Primary · 43px · 100px radius · 16/500
Outline · 35px · 1px #e8eaed with purple text
Mint — dark grounds only
User-management inputs (--um-* palette) — default, focus and the CTA accent
Continue
Continue with SSO
Status chips
Operational Degraded Beta Neutral

Every control is a 100px pill. The embedded widget keeps a deliberately separate, softer --um-* palette — #f9f9fb input on #dddde3, stepping to #b9bbc6 when active — which must not bleed into marketing chrome. Marketing-surface focus rings and motion timings were not captured.

Typography

One weight, hard negative tracking

Hero h1 · Untitled Sans · 80/84 · 500 · -5.6px (-7%)Enterprise Ready.
Section h3 · Untitled Sans · 52/55.64 · 500 · -2.6px (-5%)Enterprise SSO
Eyebrow h2 · Untitled Sans · 28/33.6 · 500 · -1.4px · #6363f1Developer-first design
Lead body · Untitled Sans · 19/30.4 · 400 · -0.19pxStart selling to enterprise customers.
Body · Untitled Sans · 16/24 · 400 · normalSupport any SAML or OIDC identity provider.
Button label · Untitled Sans · 14-16 · 400-500Get started
Palette

Slate, purple, one mint

Core published tokens
black / light-1#29363d
black-dark#030628
brand-purple#6363f1
brand-3#d8d9fa
dark-accent#23f0c3
section-light#f9f9fb
cool-gray#eceff1
border-color#e8eaed
border-dark#2b335a
Foreground ramps — light and dark themes
light-2#656B8A
light-3#8F96BD
dark-2#C5CAE8
dark-3#878CA6
User-management component tokens (--um-*) — separate and softer
um-text-primary#2b333b
um-text-secondary#60646c
um-input-bg#f9f9fb
um-input-border#dddde3
um-border-active#b9bbc6
um-cta-accent#d1d1ff
um-swatch-border#0000301a
Observed surfaces & semantic
white#ffffff
fill#eceded
washrgba(0,0,59,.05)
panel-violet#1a1736
panel-navy#0f2151
darkest#030527
brand-wash#dedeff
warm-dark#26251e
green#04a902
orange#e55233
Gradients
neutral edge wash 135deg
white glass sheen
violet → sky brand sweep 45deg
Depth

Four- and five-layer shadows

4px
6px input
7px
8px
10px card
16px
100px pill
100%
2px 0 0
ambient — 4 layers, rgba(22,26,41,…), 51px → 0.5px
violet — 5 layers, rgba(23,6,100,…), fractional px
ring — halved offsets closing with 0 0 0 1px

Every shadow is multi-layer and blue-violet tinted — rgba(22,26,41,…), rgba(23,6,100,…), rgba(16,26,113,…) — never neutral black, and the fractional pixel values indicate they are generated from an easing curve rather than hand-authored. No WebGL, canvas or backdrop-filter. Motion timings were not captured.