---
version: alpha
name: AuthKit
description: Developer-auth minimalism — near-black canvas, crisp white ink, a single confident indigo accent, Radix-UI-grounded components with soft medium radii and hairline borders. The aesthetic of a polished login box scaled up to a marketing site.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#ffffff"
  ink-secondary: "#a1a1aa"
  ink-muted: "#71717a"

  # Accent — AuthKit indigo/blue
  primary: "#6363f1"
  primary-hover: "#5151e0"
  accent-glow: "#7c7cf5"

  # Interactive
  link: "#a5a5fb"
  focus-ring: "#6363f1"

  # Neutral scale
  gray-800: "#27272a"
  gray-700: "#3f3f46"
  gray-600: "#52525b"
  gray-400: "#a1a1aa"
  gray-200: "#e4e4e7"

  # Borders + lines
  border: "#27272a"
  border-soft: "#1c1c1c"

  # On-color
  on-primary: "#ffffff"
  on-surface: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.gray-700}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 20px
    borderColor: "{colors.border}"
---

# AuthKit Design System

## Overview

AuthKit is WorkOS's drop-in authentication UI, and its marketing site reads exactly like its product: a polished, dark login box scaled up to a full page. The canvas is a near-black `{colors.background}` — not pure black, just dark enough to let a single saturated indigo accent (`{colors.primary}`) feel electric without shouting. White ink (`{colors.ink}`) carries headlines; a cool zinc-gray (`{colors.ink-secondary}`) handles supporting copy. The result is calm, technical, and trustworthy, which is the entire point of an auth product.

The system is built on Radix UI primitives, so its component vocabulary is conservative and accessible by default: medium 8px radii, hairline `{colors.border}` lines instead of heavy fills, and surfaces that step up in lightness (`{colors.surface}` → `{colors.surface-soft}`) rather than relying on shadow. Depth comes from subtle border contrast and a faint indigo glow around interactive focus states, never from drop shadows stacked for drama.

Typography leans on Inter with tight negative tracking at display sizes (-2px on the hero), giving headlines a compressed, engineered feel that pairs naturally with the developer audience. JetBrains Mono appears for code blocks and small technical labels — the universal signal of "this is for builders." The single accent color is the discipline that holds the whole thing together: indigo marks every primary action, link, and focus ring, and nothing else competes with it.

**Key Characteristics:**
- Near-black `{colors.background}` canvas with crisp white `{colors.ink}` headlines
- One confident indigo accent (`{colors.primary}`) for all primary actions, links, focus
- Radix-UI-grounded components — accessible defaults, medium radii, hairline borders
- Surfaces step up in lightness (`{colors.surface}` → `{colors.surface-soft}`) instead of shadow
- Inter with tight negative tracking (-2px) at hero scale
- JetBrains Mono for code and technical labels
- Pill badges with bordered dark fills, never loud color
- Depth from border contrast + faint indigo focus glow, not drop shadows

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): The near-black page background.
- **White Ink** (`{colors.ink}`): Headlines, primary text on dark.
- **AuthKit Indigo** (`{colors.primary}`): Primary CTAs, active states, the brand signal.

### Surfaces
- **Surface** (`{colors.surface}`): Cards, inputs, secondary buttons.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, raised panels, hover states.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, placeholder text.

### Accent & Interactive
- **Primary Hover** (`{colors.primary-hover}`): Darker indigo for button hover.
- **Accent Glow** (`{colors.accent-glow}`): Lighter indigo for glows and highlights.
- **Link** (`{colors.link}`): Inline links — lifted indigo for readability on dark.
- **Focus Ring** (`{colors.focus-ring}`): Indigo focus outline on interactive elements.

### Neutral Scale
- **Gray 800** (`{colors.gray-800}`): Borders, dividers.
- **Gray 700** (`{colors.gray-700}`): Hover borders, subtle separators.
- **Gray 600** (`{colors.gray-600}`): Muted UI lines.
- **Gray 400** (`{colors.gray-400}`): Secondary text alias.
- **Gray 200** (`{colors.gray-200}`): Light-mode text (theme support).

### Borders
- **Border** (`{colors.border}`): Hairline component outlines.
- **Border Soft** (`{colors.border-soft}`): Even softer internal dividers.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — compressed, engineered |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, hero subtitles |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, links |
| `caption` | Badges, metadata |
| `mono-body` | Code blocks |
| `mono-label` | Small technical labels |

### Principles
- **Compression at scale**: Inter at hero size uses -2px tracking — tight and confident, relaxing toward zero at body sizes.
- **Two-family discipline**: Inter for everything human-facing, JetBrains Mono strictly for code and technical labels.
- **Weight restraint**: 400 (body), 500 (UI/medium), 600 (headings). No 700 — the system never shouts.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a generous jump to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for section rhythm.

### Grid & Container
- Max content width: approximately 1120px
- Hero: centered single column with generous top padding
- Feature sections: 2–3 column card grids
- Code/product imagery framed in bordered surfaces

### Whitespace Philosophy
- **Dark calm**: Large vertical gaps between sections let the indigo accent carry attention.
- **Border-defined structure**: Separation comes from hairline `{colors.border}` lines and surface lightness steps, not from shadow or color blocks.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border | Page background, text blocks |
| Outlined (Level 1) | 1px `{colors.border}` | Cards, inputs, secondary buttons |
| Raised (Level 2) | `{colors.surface-soft}` fill + 1px `{colors.border}` | Feature cards, hover states |
| Focus (Accessibility) | 2px `{colors.focus-ring}` ring + faint indigo glow | Keyboard focus on interactive elements |

**Shadow Philosophy**: AuthKit avoids drop shadows almost entirely. Depth is communicated by stepping surfaces up in lightness and by hairline borders. The only "glow" in the system is the faint indigo halo around focused inputs and buttons — functional, not decorative.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inline code, small chips |
| `sm` | 6px | Compact controls |
| `md` | 8px | Buttons, inputs, default radius |
| `lg` | 12px | Cards, code blocks |
| `xl` | 16px | Feature cards, large panels |
| `pill` | 9999px | Badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Indigo fill, white text, 8px radius. The default CTA.
- **`button-secondary`** — Dark surface with hairline `{colors.border}`, white text.

### Pills & Badges
- **`badge`** — Bordered dark surface, secondary text, full pill. Used for status/labels.

### Cards
- **`card`** — `{colors.surface}` fill, hairline border, 12px radius.
- **`card-feature`** — Lighter `{colors.surface-soft}` fill, 16px radius, larger padding.

### Inputs
- **`input`** — Dark surface, hairline border. Focus swaps the border to indigo `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — Dark sticky header, secondary-gray links, indigo primary CTA right.

### Code
- **`code-block`** — Dark surface, JetBrains Mono, hairline border. The developer voice of the page.

## Do's and Don'ts

### Do
- Keep the canvas near-black `{colors.background}` and ink crisp white
- Reserve indigo `{colors.primary}` for primary actions, links, and focus only
- Use hairline `{colors.border}` lines and surface lightness steps for structure
- Frame product/code imagery in bordered dark surfaces
- Use Inter with tight negative tracking at display sizes
- Keep JetBrains Mono strictly for code and technical labels

### Don't
- Don't introduce a second accent color to compete with indigo
- Don't reach for drop shadows — step surfaces up in lightness instead
- Don't use weight 700 anywhere — 600 is the ceiling
- Don't put indigo on large surfaces; it's an accent, not a fill
- Don't use pill radius on primary buttons — pills are for badges
- Don't let body text carry negative tracking — that's display-only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked, tightened padding |
| Tablet | 640–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full card grids, max width |
| Large | >1280px | Centered, generous margins |

### Touch Targets
- Buttons use 10px vertical padding for comfortable tap targets
- Nav links spaced generously; CTA always indigo
- Badges have 12px horizontal padding

### Collapsing Strategy
- Hero: 56px → scales down, maintains proportional negative tracking
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Code blocks: maintain mono formatting, horizontal scroll if needed
- Section spacing: 96px → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Indigo `{colors.primary}`
- Background: Canvas Black `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: 1px `{colors.border}`
- Link: `{colors.link}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 56px Inter weight 600, line-height 1.05, letter-spacing -2px, color `{colors.ink}`. Subtitle at 18px weight 400, `{colors.ink-secondary}`. Indigo CTA (`{colors.primary}`, 8px radius, 10px 18px padding) plus a bordered secondary button (`{colors.surface}`, 1px `{colors.border}`)."
- "Design a card: `{colors.surface}` background, 1px `{colors.border}`, 12px radius, 24px padding. Title at 22px Inter weight 600, letter-spacing -0.6px, white. Body at 16px weight 400, `{colors.ink-secondary}`."
- "Build a badge: `{colors.surface}` background, 1px `{colors.border}`, `{colors.ink-secondary}` text, 9999px radius, 4px 12px padding, 13px Inter weight 500."
- "Create an input: `{colors.surface}` background, 1px `{colors.border}`, 8px radius. On focus, swap border to `{colors.focus-ring}` with a faint indigo glow."

### Iteration Guide
1. One accent only — indigo marks actions, links, focus; nothing else
2. Structure with hairline borders and surface lightness steps, never shadow
3. Negative tracking is display-only: -2px at 56px, relaxing to 0 at body
4. JetBrains Mono signals "for developers" — code and labels only
5. Weights stop at 600 — the system stays calm and technical

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by AuthKit. Brand names and trademarks belong to their respective owners.