# Design Reference - Clerk
> Developer's Prism. A system that refracts a single beam of brand identity into two distinct light and dark spectrums for different audiences.

## Source
- Original site: https://clerk.com
- Captured: 2026-04-11T17:38:21.939Z

## Tags
- dual-theme
- developer-focused
- violet-accent
- technical
- geometric-sans
- gradient-aurora
- dark-mode-ui
- inset-shadow

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Clerk Violet | `#6c47ff` | brand | Primary CTAs, active states, key highlights — a single sharp point of interaction against neutral backgrounds. |
| Hero Aurora | `#6248f6` | brand | Abstract background gradient for the hero section, creating a soft, ethereal atmosphere. |
| Neon Cyan | `#5de3ff` | accent | Accent color for code syntax highlighting and occasional illustrative details. |
| Lemon Glow | `#fff963` | accent | Accent color used within gradients and for code syntax highlighting. |
| Error Red | `#ef4444` | semantic | Error messages and destructive action indicators. |
| White | `#ffffff` | neutral | Light theme backgrounds, text on dark backgrounds and buttons. |
| Paper | `#f7f7f8` | neutral | Off-white background for subtle section differentiation on the light theme. |
| Ash | `#eeeef0` | neutral | Light borders and subtle UI rule lines. |
| Slate | `#d9d9de` | neutral | Default border color for inputs and UI dividers in the light theme. |
| Graphite | `#9394a1` | neutral | Secondary text, placeholders, and icon fills on light backgrounds. |
| Tungsten | `#747686` | neutral | Tertiary text and subtle metadata. |
| Iron | `#5e5f6` | neutral | Text color on dark cards, designed for a lower-contrast, glowing feel. |
| Charcoal | `#42434d` | neutral | Secondary dark button backgrounds. |
| Onyx | `#212126` | neutral | Card and component surfaces in the dark theme. |
| Deep Space | `#131316` | neutral | Primary text on light backgrounds, and the base background color for the dark theme. |
| Black | `#000000` | neutral | Display headlines and high-contrast primary text. |

## Typography
- role: The primary font for all headings and prominent UI text. Its geometric structure provides a technical, precise feel. The negative letter-spacing at display sizes is a signature choice, making headlines feel dense and authoritative.; sizes: 10px, 11px, 12px, 13px, 15px, 16px, 18px, 20px, 32px, 64px; family: geistNumbers; weight: 400, 450, 500, 600, 700; lineHeight: 1.00, 1.12, 1.13, 1.23, 1.25, 1.33, 1.40, 1.45, 1.50, 1.53, 1.54, 1.56, 1.60, 1.64, 1.80, 1.82, 1.85; substitute: Geist (Vercel); letterSpacing: -2.24px at 64px, -0.48px at 32px, normal at smaller sizes
- role: Used for body copy and less prominent interface text where readability is prioritized over strong typographic character.; sizes: 10px, 11px, 12px, 13px, 16px, 17px; family: ui-sans-serif; weight: 400, 500, 700; lineHeight: 1.27, 1.30, 1.33, 1.38, 1.40, 1.41, 1.45, 1.50, 1.82; substitute: system-ui; letterSpacing: -0.0100em, 0.0100em
- role: A secondary sans-serif for UI components, likely within embedded widgets or third-party integrations.; sizes: 10px, 11px, 12px, 16px, 18px, 22px; family: Inter; weight: 400, 500, 600, 700; lineHeight: 1.22, 1.27, 1.33, 1.40, 1.45, 1.50, 1.60, 1.64, 1.67, 1.82; substitute: Inter (Google Fonts)
- role: Monospace font for code snippets. The generous letter-spacing (0.1em) makes it feel open and clear.; sizes: 10px, 11px, 12px; family: soehneMono; weight: 400, 500, 600; lineHeight: 1.33, 1.40, 1.45, 1.64, 1.82, 2.00; substitute: Source Code Pro; letterSpacing: +0.1em at all sizes

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "12px",
      "pills": "9999px",
      "inputs": "6px",
      "buttons": "6px"
    },
    "elementGap": "",
    "sectionGap": "96-128px",
    "cardPadding": "24px",
    "pageMaxWidth": "1280px"
  },
  "radius": {
    "cards": "12px",
    "pills": "9999px",
    "inputs": "6px",
    "buttons": "6px"
  }
}
```

## Component Patterns
- name: Primary CTA Button Group
- name: Create Account Auth Card
- name: Dark Feature Cards Grid — Authentication
- name: Primary CTA Button; role: The main call to action.
- name: Dark Secondary Button; role: Secondary action in dark contexts.
- name: Light Ghost Button; role: Tertiary action or nav link.
- name: Pill Tag; role: A tag or small status indicator.
- name: Login Modal Card; role: Container for authentication forms.
- name: Light Input Field; role: Standard text input for forms.
- name: Logo Cloud Item; role: Displays a partner or customer logo.

## Do
- Use the dual theme structure: light for top-level marketing, dark for in-depth feature sections.
- Apply negative letter-spacing to all `geistNumbers` headlines larger than 24px.
- Reserve `Clerk Violet (#6c47ff)` exclusively for primary CTAs and interactive focus states.
- On dark surfaces, use inset `box-shadow` with a subtle white color to create the signature 'pressed-in' highlight.
- Use a `6px` radius for interactive elements like buttons and inputs, and a larger `12px` for container cards.
- Maintain generous `96-128px` vertical spacing between page sections.
- For dark theme cards, use `Onyx (#212126)` for the background and `Iron (#5e5f6e)` for text to achieve a lower-contrast, glowing effect.

## Don't
- Don't use drop shadows in the dark theme; use inset highlights instead.
- Don't apply `Clerk Violet` to large fields of color or body text.
- Don't mix radii; stick to the `6px/12px/9999px` system.
- Don't build pages using only one theme; the light/dark transition is a core part of the identity.
- Don't use pure black (#000000) for dark theme backgrounds; use `Deep Space (#131316)` for the page background and `Onyx (#212126)` for cards.
- Don't use photography; rely on UI mockups and abstract gradients.
- Don't round the corners of top-level navigation, header, or footer containers.