WorkOS Careers

# Design brief: the WorkOS Careers design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/12074640/workos-com-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12074640/workos-com-careers-featured.webp
- On DesignMunk: https://designmunk.com/workos-careers-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# WorkOS Careers: Tabbed Roles and Soft-Purple Pill CTA

## Overview

Developer-first and enterprise-minded. The tone is confident, minimal, and precise rather than emotive. Spacing is generous and copy is succinct, producing a spacious, low-distraction reading experience. Use a quiet neutral surface with purposeful purple accents to signal interactivity and primary actions.

## Colors

- Primary (#29363d): Deep ink for headlines and core text.
- Secondary (#6464f4): Accent purple for links, active states, and primary CTAs.
- Tertiary (#23f0c3): Limited highlight for success or supportive UI states.
- Neutral (#ffffff): Base canvas for pages and cards.
- Border (#e5e7eb): Subtle dividers, card outlines, and tab underlines.
- Brand-shy-moment (#acacf5): Soft tint for gentle emphasis or icon fills.
- Surface ({colors.neutral}): Default surfaces; pair with border for separation.
- On-surface ({colors.primary}): Text and icon color on light backgrounds.

## Typography

All typographic roles use Untitled Sans: a neutral, modern grotesk with tight letter-spacing at display sizes and relaxed line height for body copy. It is provided as a custom, self-hosted font and is not guaranteed available to agents.
- Substitutes to use when Untitled Sans cannot be loaded: Inter (Google), IBM Plex Sans (Google), Source Sans 3 (Google). Choose Inter first for x-height and spacing similarity.
- Headline-lg 52px/1.07, weight 500, letter-spacing -0.05em: hero and key section titles.
- Headline-md 40px/1.2, weight 500, -0.032em: secondary section titles.
- Headline-sm 31px/1.19, weight 500, -0.006em: tertiary headings and card titles.
- Headline-xs 24px/1.21, weight 400: small section headers and list headings.
- Body-md 19px/1.6, weight 400, -0.01em: long-form copy and job details.

## Layout

Spacing is 8-based with deliberate jumps for rhythm: xs 8, sm 16, md 24 handle component padding and gaps; lg 56 and xl 80 create generous section spacing. Center-aligned hero content with narrow measure improves scannability. Use sm or md gaps within cards and grids; reserve lg/xl for section breaks and above-the-fold breathing room.

## Elevation & Depth

Depth is subtle. Small and medium multi-layer shadows are available for lifted elements (menus, hoverable buttons, or modals). Large and extra-large shadows are intentionally none, keeping the page flat. Where shadows are avoided, rely on Border (#e5e7eb) and tonal contrast (Neutral vs On-surface) to create separation.

## Shapes

Two radii define the shape language: sm 8px for structural elements like cards and inputs, and full 9999px for highly interactive pills (buttons, badges). Use full radius to signal primary actions; keep containers at 8px to maintain a crisp, businesslike tone.

## Components

Buttons
- Primary and Secondary: textColor #6363f1, pill shape (rounded.full), 50px height, padding 9.5px 20px. Use secondary for emphasis and hover states; pair with sm or md shadow when a lifted feel is needed.
- Link button: textColor uses Primary (#29363d), no radius, for inline calls to action.
- Card: white background on Neutral, text in Primary, 8px radius, 16px padding; add Border (#e5e7eb) when grouping content.

### Careers Hero
Centered stack using headline-lg for "Careers at WorkOS," body-md for supporting copy, and a single pill CTA. Section spacing uses xl around the hero to keep the entry uncluttered.

### Benefits Grid
A grid of benefit cards using the Card component. Headings set in headline-xs, descriptions in body-md. Use Border (#e5e7eb) and sm spacing internally; accent icons can use Secondary (#6464f4) or Brand-shy-moment (#acacf5).

### Department Tabs
Horizontal tab list for categories (All, Design, Engineering, etc.). Use Body-md for labels, underline or bottom border in Border (#e5e7eb), and highlight the active tab with Secondary (#6464f4).

### Job Listing Row
Each role appears as a compact card: title in headline-sm, meta (location/time zone) in body-md, and an Apply action using the link button. Use md vertical padding and Border for separation.

### Site Header Navigation
A minimal top bar on Neutral with links in On-surface. Primary link hovers use Secondary. Keep internal paddings at sm or md.

### Footer Link Matrix
Multi-column list with small headings (headline-xs) and body links (body-md). Maintain generous top spacing (lg) from the preceding section and use Border to delineate the footer from content.

### Cookie Consent Banner
Neutral surface with Border, body-md text, and two actions (Accept/Reject) using pill buttons. Keep internal padding at md and space buttons with sm.

## Do's and Don'ts

Do
- Use Secondary (#6464f4) for primary interactive states and the most important CTA.
- Keep hero and section headings at their specified sizes (52/40/31/24px) with the provided letter-spacing.
- Apply rounded.full for action pills and rounded.sm for containers to preserve visual hierarchy.
- Use lg/xl spacing between sections; keep internal card padding to 16px (spacing.sm).

Don't
- Introduce heavy drop shadows beyond the provided sm/md levels.
- Overuse Tertiary (#23f0c3); reserve it for success or supportive highlights.
- Mix multiple button shapes; avoid square corners on actions.
- Tighten body copy below 19px or reduce line height—legibility is part of the brand tone.

## Agent Prompt Guide

Quick color reference — Text: #29363d, Background: #ffffff, Border: #e5e7eb, Accent: #6464f4.

1) Build a centered careers hero
- Container: background #ffffff; vertical padding 80px.
- H1: font-family 'Untitled Sans', Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; size 52px; weight 500; line-height 1.07; letter-spacing -0.05em; color #29363d.
- Supporting copy: size 19px; weight 400; line-height 1.6; letter-spacing -0.01em; color #29363d; max-width comfortable for reading.
- Primary CTA: 50px height; padding 9.5px 20px; border-radius 9999px; text color #6363f1; background #ffffff; border 1px solid #e5e7eb.

2) Benefits grid using cards
- Grid: gap 24px horizontally and vertically; outer section gap 56px from neighbors.
- Card: background #ffffff; text #29363d; padding 16px; border-radius 8px; border 1px solid #e5e7eb; optional shadow sm.
- Card heading: 24px/1.21 weight 400; body: 19px/1.6.
- Accent icons: color #6464f4 or #acacf5.

3) Department tabs with active accent
- Tabs container: bottom border 1px solid #e5e7eb; padding-bottom 16px; gap 16px.
- Tab label: font 19px/1.6; color #29363d; hover color #6464f4.
- Active tab: text color #6464f4; add 1px bottom border in #6464f4.
- Content area spacing: top margin 24px.

4) Job listing rows
- Each row is a card: background #ffffff; text #29363d; padding 16px; border-radius 8px; border 1px solid #e5e7eb.
- Title: 31px/1.19 weight 500; meta: 19px/1.6.
- Apply action: style as button-link; text color #29363d; no radius; underline on hover.

## Similar Brands

Stripe — similarly spare with generous spacing and a purple/indigo accent; Stripe leans more into gradient tints and richer illustration.
Linear — monochrome UI with precise type and pill actions; Linear is denser and more product-UI forward.
Vercel — minimal, developer-first with restrained color; Vercel uses darker themes and more dramatic contrast.
Auth0 — identity/security focus with structured docs and careers; Auth0 employs brighter gradients and more marketing illustration than WorkOS.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #29363d;
  --color-secondary: #6464f4;
  --color-tertiary: #23f0c3;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-shy-moment: #acacf5;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.07;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.032em;
  --text-headline-sm-size: 31px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.006em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 19px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.6;
  --text-body-md-tracking: -0.01em;
  --font-untitled-sans: "Untitled Sans";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-text-color: #6363f1;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9.5px 20px;
  --button-primary-height: 50px;
  --button-secondary-text-color: #6363f1;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9.5px 20px;
  --button-secondary-height: 50px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #29363d;
  --color-secondary: #6464f4;
  --color-tertiary: #23f0c3;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-shy-moment: #acacf5;
  --color-surface: #ffffff;
  --color-on-surface: #29363d;
  --font-headline-lg: "Untitled Sans";
  --font-headline-md: "Untitled Sans";
  --font-headline-sm: "Untitled Sans";
  --font-headline-xs: "Untitled Sans";
  --font-body-md: "Untitled Sans";
  --text-headline-lg: 52px;
  --text-headline-md: 40px;
  --text-headline-sm: 31px;
  --text-headline-xs: 24px;
  --text-body-md: 19px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.032em;
  --tracking-headline-sm: -0.006em;
  --tracking-body-md: -0.01em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.161,
                    0.212,
                    0.239
                ],
                "hex": "#29363d"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.392,
                    0.392,
                    0.957
                ],
                "hex": "#6464f4"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.137,
                    0.941,
                    0.765
                ],
                "hex": "#23f0c3"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-shy-moment": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.675,
                    0.675,
                    0.961
                ],
                "hex": "#acacf5"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.161,
                    0.212,
                    0.239
                ],
                "hex": "#29363d"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Untitled Sans",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.05,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Untitled Sans",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.032,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Untitled Sans",
                "fontSize": {
                    "value": 31,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.006,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Untitled Sans",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Untitled Sans",
                "fontSize": {
                    "value": 19,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as WorkOS Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: WorkOS
description: Your app, Enterprise Ready — ship SSO in minutes, not months
colors:
  primary: "#29363d"
  secondary: "#6464f4"
  tertiary: "#23f0c3"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-shy-moment: "#acacf5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Untitled Sans
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.07
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Untitled Sans
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.032em
  headline-sm:
    fontFamily: Untitled Sans
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.006em
  headline-xs:
    fontFamily: Untitled Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: Untitled Sans
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.01em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 56px
  xl: 80px
components:
  button-primary:
    textColor: "#6363f1"
    rounded: "{rounded.full}"
    padding: 9.5px 20px
    height: 50px
  button-secondary:
    textColor: "#6363f1"
    rounded: "{rounded.full}"
    padding: 9.5px 20px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# WorkOS Careers: Tabbed Roles and Soft-Purple Pill CTA

## Overview

Developer-first and enterprise-minded. The tone is confident, minimal, and precise rather than emotive. Spacing is generous and copy is succinct, producing a spacious, low-distraction reading experience. Use a quiet neutral surface with purposeful purple accents to signal interactivity and primary actions.

## Colors

- Primary (#29363d): Deep ink for headlines and core text.
- Secondary (#6464f4): Accent purple for links, active states, and primary CTAs.
- Tertiary (#23f0c3): Limited highlight for success or supportive UI states.
- Neutral (#ffffff): Base canvas for pages and cards.
- Border (#e5e7eb): Subtle dividers, card outlines, and tab underlines.
- Brand-shy-moment (#acacf5): Soft tint for gentle emphasis or icon fills.
- Surface ({colors.neutral}): Default surfaces; pair with border for separation.
- On-surface ({colors.primary}): Text and icon color on light backgrounds.

## Typography

All typographic roles use Untitled Sans: a neutral, modern grotesk with tight letter-spacing at display sizes and relaxed line height for body copy. It is provided as a custom, self-hosted font and is not guaranteed available to agents.
- Substitutes to use when Untitled Sans cannot be loaded: Inter (Google), IBM Plex Sans (Google), Source Sans 3 (Google). Choose Inter first for x-height and spacing similarity.
- Headline-lg 52px/1.07, weight 500, letter-spacing -0.05em: hero and key section titles.
- Headline-md 40px/1.2, weight 500, -0.032em: secondary section titles.
- Headline-sm 31px/1.19, weight 500, -0.006em: tertiary headings and card titles.
- Headline-xs 24px/1.21, weight 400: small section headers and list headings.
- Body-md 19px/1.6, weight 400, -0.01em: long-form copy and job details.

## Layout

Spacing is 8-based with deliberate jumps for rhythm: xs 8, sm 16, md 24 handle component padding and gaps; lg 56 and xl 80 create generous section spacing. Center-aligned hero content with narrow measure improves scannability. Use sm or md gaps within cards and grids; reserve lg/xl for section breaks and above-the-fold breathing room.

## Elevation & Depth

Depth is subtle. Small and medium multi-layer shadows are available for lifted elements (menus, hoverable buttons, or modals). Large and extra-large shadows are intentionally none, keeping the page flat. Where shadows are avoided, rely on Border (#e5e7eb) and tonal contrast (Neutral vs On-surface) to create separation.

## Shapes

Two radii define the shape language: sm 8px for structural elements like cards and inputs, and full 9999px for highly interactive pills (buttons, badges). Use full radius to signal primary actions; keep containers at 8px to maintain a crisp, businesslike tone.

## Components

Buttons
- Primary and Secondary: textColor #6363f1, pill shape (rounded.full), 50px height, padding 9.5px 20px. Use secondary for emphasis and hover states; pair with sm or md shadow when a lifted feel is needed.
- Link button: textColor uses Primary (#29363d), no radius, for inline calls to action.
- Card: white background on Neutral, text in Primary, 8px radius, 16px padding; add Border (#e5e7eb) when grouping content.

### Careers Hero
Centered stack using headline-lg for "Careers at WorkOS," body-md for supporting copy, and a single pill CTA. Section spacing uses xl around the hero to keep the entry uncluttered.

### Benefits Grid
A grid of benefit cards using the Card component. Headings set in headline-xs, descriptions in body-md. Use Border (#e5e7eb) and sm spacing internally; accent icons can use Secondary (#6464f4) or Brand-shy-moment (#acacf5).

### Department Tabs
Horizontal tab list for categories (All, Design, Engineering, etc.). Use Body-md for labels, underline or bottom border in Border (#e5e7eb), and highlight the active tab with Secondary (#6464f4).

### Job Listing Row
Each role appears as a compact card: title in headline-sm, meta (location/time zone) in body-md, and an Apply action using the link button. Use md vertical padding and Border for separation.

### Site Header Navigation
A minimal top bar on Neutral with links in On-surface. Primary link hovers use Secondary. Keep internal paddings at sm or md.

### Footer Link Matrix
Multi-column list with small headings (headline-xs) and body links (body-md). Maintain generous top spacing (lg) from the preceding section and use Border to delineate the footer from content.

### Cookie Consent Banner
Neutral surface with Border, body-md text, and two actions (Accept/Reject) using pill buttons. Keep internal padding at md and space buttons with sm.

## Do's and Don'ts

Do
- Use Secondary (#6464f4) for primary interactive states and the most important CTA.
- Keep hero and section headings at their specified sizes (52/40/31/24px) with the provided letter-spacing.
- Apply rounded.full for action pills and rounded.sm for containers to preserve visual hierarchy.
- Use lg/xl spacing between sections; keep internal card padding to 16px (spacing.sm).

Don't
- Introduce heavy drop shadows beyond the provided sm/md levels.
- Overuse Tertiary (#23f0c3); reserve it for success or supportive highlights.
- Mix multiple button shapes; avoid square corners on actions.
- Tighten body copy below 19px or reduce line height—legibility is part of the brand tone.

## Agent Prompt Guide

Quick color reference — Text: #29363d, Background: #ffffff, Border: #e5e7eb, Accent: #6464f4.

1) Build a centered careers hero
- Container: background #ffffff; vertical padding 80px.
- H1: font-family 'Untitled Sans', Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; size 52px; weight 500; line-height 1.07; letter-spacing -0.05em; color #29363d.
- Supporting copy: size 19px; weight 400; line-height 1.6; letter-spacing -0.01em; color #29363d; max-width comfortable for reading.
- Primary CTA: 50px height; padding 9.5px 20px; border-radius 9999px; text color #6363f1; background #ffffff; border 1px solid #e5e7eb.

2) Benefits grid using cards
- Grid: gap 24px horizontally and vertically; outer section gap 56px from neighbors.
- Card: background #ffffff; text #29363d; padding 16px; border-radius 8px; border 1px solid #e5e7eb; optional shadow sm.
- Card heading: 24px/1.21 weight 400; body: 19px/1.6.
- Accent icons: color #6464f4 or #acacf5.

3) Department tabs with active accent
- Tabs container: bottom border 1px solid #e5e7eb; padding-bottom 16px; gap 16px.
- Tab label: font 19px/1.6; color #29363d; hover color #6464f4.
- Active tab: text color #6464f4; add 1px bottom border in #6464f4.
- Content area spacing: top margin 24px.

4) Job listing rows
- Each row is a card: background #ffffff; text #29363d; padding 16px; border-radius 8px; border 1px solid #e5e7eb.
- Title: 31px/1.19 weight 500; meta: 19px/1.6.
- Apply action: style as button-link; text color #29363d; no radius; underline on hover.

## Similar Brands

Stripe — similarly spare with generous spacing and a purple/indigo accent; Stripe leans more into gradient tints and richer illustration.
Linear — monochrome UI with precise type and pill actions; Linear is denser and more product-UI forward.
Vercel — minimal, developer-first with restrained color; Vercel uses darker themes and more dramatic contrast.
Auth0 — identity/security focus with structured docs and careers; Auth0 employs brighter gradients and more marketing illustration than WorkOS.

:root {
  /* Colors */
  --color-primary: #29363d;
  --color-secondary: #6464f4;
  --color-tertiary: #23f0c3;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-shy-moment: #acacf5;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.07;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.032em;
  --text-headline-sm-size: 31px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.006em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 19px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.6;
  --text-body-md-tracking: -0.01em;
  --font-untitled-sans: "Untitled Sans";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-text-color: #6363f1;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9.5px 20px;
  --button-primary-height: 50px;
  --button-secondary-text-color: #6363f1;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9.5px 20px;
  --button-secondary-height: 50px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Your app, Enterprise Ready — ship SSO in minutes, not months",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.161,
          0.212,
          0.239
        ],
        "hex": "#29363d"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.392,
          0.392,
          0.957
        ],
        "hex": "#6464f4"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.137,
          0.941,
          0.765
        ],
        "hex": "#23f0c3"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "brand-shy-moment": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.675,
          0.675,
          0.961
        ],
        "hex": "#acacf5"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.161,
          0.212,
          0.239
        ],
        "hex": "#29363d"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 56,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Untitled Sans",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.05,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Untitled Sans",
        "fontSize": {
          "value": 40,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.032,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Untitled Sans",
        "fontSize": {
          "value": 31,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.006,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Untitled Sans",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Untitled Sans",
        "fontSize": {
          "value": 19,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.01,
          "unit": "em"
        }
      }
    }
  }
}

@theme {
  --color-primary: #29363d;
  --color-secondary: #6464f4;
  --color-tertiary: #23f0c3;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-shy-moment: #acacf5;
  --color-surface: #ffffff;
  --color-on-surface: #29363d;
  --font-headline-lg: "Untitled Sans";
  --font-headline-md: "Untitled Sans";
  --font-headline-sm: "Untitled Sans";
  --font-headline-xs: "Untitled Sans";
  --font-body-md: "Untitled Sans";
  --text-headline-lg: 52px;
  --text-headline-md: 40px;
  --text-headline-sm: 31px;
  --text-headline-xs: 24px;
  --text-body-md: 19px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.032em;
  --tracking-headline-sm: -0.006em;
  --tracking-body-md: -0.01em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;
}