CURATED · OPEN · FREE

WorkOS

WorkOS empowers developers to ship enterprise features like SSO and directory sync in minutes instead of months.

01

Identity DNA

The invisible scaffolding that turns a startup into an enterprise-ready platform

02

Color

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

03

Typography

geometric-sans · humanist-sans · monospace

• display72px · 500
• h240px · 500
• body20px · 400
• small16px · 400
• caption14px · 400
• overline12px · 500

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

04

Spacing

Vertical spacing follows a strict 4px grid, with section padding consistently at 64px to create a rhythmic, breathing layout.

05

Surfaces

Subtle 1px borders using rgba(41, 56, 78, 0.08) or solid white for inset effects.

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

06

Layout

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

07

Motion & Interaction

Hover states trigger background color changes · Transformations (0.4s) on interactive elements · Subtle fade-ins on scroll

Background color shift for buttons, subtle color transition for text links. · Immediate visual feedback, often a slight transform scale or shadow change.

08

Components

• button Pill-shaped (border-radius: 100px) primary buttons with solid accent color and white text, secondary buttons are transparent with dark text.
• card Softly rounded cards (border-radius: 12px) with subtle inset shadows and light borders, used for feature lists and integration tiles.
• chip Small pill badges (border-radius: 4px) for status indicators like 'Enabled' or 'Ready'.
• input Standard form fields with subtle inset shadows and 1px borders.
• hero Large, bold headline with gradient text effect ('Enterprise Ready') paired with a stylized UI mockup on the right.

09

Voice & Don'ts

• Tone Professional, direct, and developer-focused.
• Headlines Bold, concise, and benefit-oriented (e.g., 'Your app, Enterprise Ready').
• CTAs Action-oriented and clear ('Get started', 'Talk to an expert').

• 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.
• Avoid: Avoid overly casual or slang-heavy language
• Avoid: Avoid complex jargon that isn't industry standard
• Avoid: Avoid long, dense paragraphs in the hero sections

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko