---
name: WorkOS
description: "This site is an excellent example of modern, enterprise-focused SaaS design that balances developer utility with high-end professional aesthetics."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#29363D"
  secondary: "#65678A"
  tertiary: "#6363F1"
  neutral: "#AEB2CC"
  bg-soft: "#F9F9FB"
  bg-quiet: "#F2F2F8"
  muted-soft: "#8F96BD"
  line: "rgba(41, 56, 78, 0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.28px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.12px"
  overline:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "0.05em"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#29363D`)** — uses `ink` token
- **Secondary text (`#65678A`)** — uses `ink-soft` token
- **Accent (`#6363F1`)** — uses `accent` token
- **Muted (`#AEB2CC`)** — uses `muted` token
- **Borders (`rgba(41, 56, 78, 0.08)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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