---
title: "Clerk design system"
variant: extended
source: https://clerk.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/clerk-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Clerk · Design System

> Quiet surfaces, precise developer tooling.

**Theme:** light · **Industry:** devtools · **Source:** https://clerk.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Clerk pairs a bright, spacious product introduction with deep charcoal feature and framework sections. Crisp sans-serif typography, restrained violet-and-cyan accents, and detailed interface mockups keep the page grounded in developer tools.

## North star

Make the product interface the visual proof: keep the canvas quiet, alternate light and charcoal bands, and use accent color sparingly.

## Overview

The page uses a restrained neutral system to let product interfaces carry the visual detail. White leads the opening hero and mockup presentation, while #f7f7f8 distinguishes broad content bands and pale cards. Near-black #131316 creates dramatic feature and framework sections; slightly lighter charcoal cards add depth without introducing a new bright palette. Violet #6248f6 and cyan #3ad4fd appear as a narrow gradient accent rather than broad fills, with violet also marking selected states. GeistNumbers supplies compact, confident headings and readable interface-oriented body text; Söhne Mono is reserved for code-like labels and small captions. The layout alternates between a generous two-column hero, dense visual feature cards, split editorial product sections, and centered framework grids. Interface screenshots, account flows, logos, and small technical illustrations are framed as real product evidence. Fine gray borders, restrained shadows, rounded cards, and ample section breathing room keep the long page polished rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clerk Ink | `#131316` | `--color-clerk-ink` | brand | Primary text, navigation, footer, and the principal dark feature and framework bands. |
| Soft Canvas | `#f7f7f8` | `--color-soft-canvas` | surface | Page canvas and pale section bands, including multi-tenancy and billing areas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Hero canvas, white interface cards, and inset product mockup surfaces. |
| Deep Charcoal | `#212126` | `--color-deep-charcoal` | surface | Inverse card surfaces and dark-section details; also appears in dark gradient treatments. |
| Quiet Slate | `#9394a1` | `--color-quiet-slate` | neutral | Muted supporting copy and subdued labels, especially in dark areas and footer content. |
| Fine Divider | `#f0f0f0` | `--color-fine-divider` | neutral | Hairline borders around controls, cards, and subtle interface boundaries. |
| Muted Ink | `#5e5f6e` | `--color-muted-ink` | neutral | Secondary explanatory text, subdued links, and supporting footer copy. |
| Soft Graphite | `#747686` | `--color-soft-graphite` | neutral | Low-emphasis badge text and small labels in product interface details. |
| Graphite Detail | `#37373c` | `--color-graphite-detail` | neutral | Secondary dark interface details and understated text within product-like components. |
| Button Charcoal | `#2f3037` | `--color-button-charcoal` | semantic | Dark compact badges and product-mockup actions; not the primary page-wide CTA color. |
| Status Green | `#15802a` | `--color-status-green` | semantic | Tiny status badge color; incidental interface feedback, not a defining brand surface. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Occasional text or mockup contrast sampled from embedded interface content. |
| Signal Violet | `#6248f6` | `--color-signal-violet` | accent | Gradient endpoint and small selected-state indicators, including the active hero tab. |
| Electric Cyan | `#3ad4fd` | `--color-electric-cyan` | accent | Gradient endpoint used as a restrained technical highlight rather than a large flat fill. |
| Pale Divider | `#e3e3e7` | `--color-pale-divider` | neutral | Subtle footer and interface boundaries, including low-contrast separators. |
| Lavender Tint | `#e8e4fe` | `--color-lavender-tint` | accent | Soft violet tint within decorative gradient or interface details, not a dominant section color. |

### Semantic aliases

`--color-canvas` → `#f7f7f8` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#131316` (Clerk Ink) · `--color-surface-3` → `#212126` (Deep Charcoal) · `--color-text` → `#131316` (Clerk Ink) · `--color-text-muted` → `#5e5f6e` (Muted Ink) · `--color-text-subtle` → `#9394a1` (Quiet Slate) · `--color-border` → `#f0f0f0` (Fine Divider) · `--color-accent` → `#6248f6` (Signal Violet) · `--color-accent-2` → `#3ad4fd` (Electric Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131316` | `#f7f7f8` | 17.32:1 | AAA |
| `#131316` | `#ffffff` | 18.54:1 | AAA |
| `#131316` | `#212126` | 1.16:1 | fail |
| `#5e5f6e` | `#f7f7f8` | 5.88:1 | AA |
| `#5e5f6e` | `#ffffff` | 6.29:1 | AA |
| `#5e5f6e` | `#131316` | 2.95:1 | fail |
| `#5e5f6e` | `#212126` | 2.55:1 | fail |
| `#9394a1` | `#f7f7f8` | 2.81:1 | fail |
| `#9394a1` | `#ffffff` | 3:1 | AA-large |
| `#9394a1` | `#131316` | 6.17:1 | AA |

### Gradients

- `linear-gradient(to right in oklab, rgb(98, 72, 246) 10%, rgb(58, 212, 253) 100%)`
- `radial-gradient(172px 152px, rgba(33, 33, 38, 0), rgb(33, 33, 38))`
- `linear-gradient(to top in oklab, rgb(247, 247, 248) 25%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top in oklab, rgb(19, 19, 22) 0%, rgba(0, 0, 0, 0) 84%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| geistNumbers | `--font-body` | webfont | 400, 500, 600, 450, 700 | Primary headings, body copy, navigation, buttons, and links | Inter |
| ui-sans-serif | `--font-display` | system | 400, 500, 700, 510 | Secondary headings and some account/product interface cards | Inter |
| soehneMono | `--font-mono` | webfont | 400 | Code samples, small technical captions, and monospace labels | Roboto Mono |
| Inter | `--font-inter` | webfont | 400, 500, 700, 600 | Small product-mockup badges and selected embedded interface labels | Inter |

- **geistNumbers:** Compact modern sans; medium-weight controls and links, semibold headings, restrained negative heading tracking.
- **ui-sans-serif:** Clean system sans with strong bold section labels; keep interface copy crisp and unornamented.
- **soehneMono:** Use sparingly at small sizes with open tracking; preserve a technical, code-adjacent feel.
- **Inter:** Compact, practical interface lettering; use medium weight for brief labels rather than large display text.

### Type scale — Golden Ratio (ratio ≈ 1.569, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1.25 | -0.015em | — | geistNumbers | Large bold hero and primary section headline. |
| h2 | 17px | 700 | 1.41 | 0 | — | ui-sans-serif | Bold feature titles and subsection headings. |
| body | 13px | 400 | 1.54 | 0 | — | geistNumbers | Compact explanatory copy and supporting product descriptions. |
| caption | 10px | 400 | 1.4 | 0.1em | — | soehneMono | Small tracked technical labels and captions. |
| button | 13px | 500 | 1.23 | 0 | — | geistNumbers | Medium-weight action labels in product and navigation controls. |
| link | 13px | 500 | 1.85 | 0 | — | geistNumbers | Compact medium-weight navigation and inline action links. |
| code | 10px | 400 | 1.4 | 0.1em | — | soehneMono | Monospace snippets and developer-oriented command text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 17, 20, 24, 32, 40 px.
- Section rhythm 128px · element gap 8px · card padding — · max content width 1200px.

Use a centered content frame capped at the measured 1200px maximum, with broad side margins and a spacious overall rhythm. The hero aligns its headline and supporting copy left, balancing them with a product prompt and interface showcase. Follow with a dense, multi-column feature mosaic, then alternate pale product sections and full-width charcoal bands. Keep headings and copy aligned to clear content columns; center the framework and integration groupings. The measured section gap is 128px, while small component spacing follows a compact 4px-based scale. The page feels spacious overall but lets interface cards create local density.

## Shape & elevation

- Radius: button `6px` · card `8px` · media `8px` · badge `4px` · nav `12px` · link `12px` · xs `1px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px` · pill `9999px`
- Shadow `lg` (media): `rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 1`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(84.5189 -31.4667 -23.9754 / 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg-2` (card): `rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.05) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.05) 0px 6px 6px -3px, rgba(19, 19, 22, 0.05) 0px 12px 1`
- Shadow `sm-2` (media, card): `rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces stay flat, with fine #f0f0f0 or pale gray boundaries doing the separation. White mockups lift slightly from the canvas using soft, low-opacity shadows, while dark feature cards separate through tonal contrast. Use measured rounded card and media treatments; avoid heavy drop shadows or thick outlines.

## Imagery

Treat product UI as the primary imagery: account creation panels, profile and billing interfaces, organization flows, and framework marks. Use screenshots and interface mockups inside clean cards with delicate borders and soft shadows. Dark feature areas use subdued technical illustrations and diagrams rather than vivid photography. Customer logos and testimonial portraits add limited human evidence; keep them small and contained. Avoid decorative stock photography or cinematic imagery.

## Components

### Announcement strip

A narrow black top band with centered launch news and a compact Learn more link.

### Floating navigation

Centered white rounded navigation container with Clerk mark, product links, and right-aligned sign-in/sign-up actions.

### Hero product tabs

Wide framed showcase with four authentication categories; the selected tab uses a pale fill and violet indicator.

### Authentication mockup

Layered account-creation interface with restrained outlines, white panels, and a subtle shadow.

### Feature mosaic

Multi-column charcoal card grid combining concise feature copy with subdued product illustrations.

### Product feature cards

White or pale cards with rounded corners, fine boundaries, and interface previews for tenancy and billing.

### Testimonial cards

Compact customer quotes with small portraits and muted metadata on a light background.

### Footer link columns

Brand mark followed by compact grouped navigation columns and subdued social links.

### Measured component styles

- **Primary button** (“Skip to main content”): background #42434d · text #ffffff · radius 6px · padding 0px 12px · 500 13px geistNumbers · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Sign in”): transparent background · text #131316 · border 1px solid · radius 6px · padding 0px 10px · 500 13px geistNumbers
- **Link** (“Next.js”): transparent background · text #000000 · border 1px solid #2f3037 · radius 0px · padding 32px 0px · 400 16px geistNumbers
- **Card** (“Account Manage your account info. Profil”): background #f7f7f8 · text #000000 · radius 8px · padding 0px · 400 16px ui-sans-serif · shadow rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(19, 19, 22, 0.05) 0px 1px 1px -0.5p
- **Badge** (“Default”): background #f7f7f8 · text #747686 · radius 4px · padding 0px 5.3px · 500 9px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Products Docs Changelog Company AI Prici”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px geistNumbers

## Do

- Use #ffffff and #f7f7f8 as the dominant light surfaces.
- Alternate pale product bands with broad #131316 sections.
- Keep violet and cyan mostly to gradients and small state indicators.
- Show believable interface mockups as the primary visual evidence.
- Use compact Geist-style typography and reserve monospace for code details.
- Separate cards with hairlines and gentle shadows rather than heavy borders.

## Don't

- Do not make every section dark or brightly colored.
- Do not use the accent gradient as a large page background.
- Do not replace product UI with generic stock photography.
- Do not crowd the hero with excessive copy or decorative elements.
- Do not use heavy shadows, thick outlines, or oversized radii.
- Do not treat incidental green or black mockup pixels as core brand colors.

## Agent prompt

Build a new developer-facing page in Clerk’s visual style. Use a quiet white and #f7f7f8 canvas, with broad #131316 feature bands and tonal #212126 cards for contrast. Set primary headings and body in a compact Geist-like sans, using a close free substitute; reserve a monospace face for code snippets and technical captions. Keep violet #6248f6 and cyan #3ad4fd as small indicators or a narrow gradient accent, never broad decoration. Create a centered, spacious content frame with clear columns, then alternate product showcase, feature cards, and editorial sections. Make realistic UI mockups the main imagery. Use fine #f0f0f0 dividers, modest rounded cards, and soft shadows only where surfaces lift. Keep labels concise and layouts precise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Bright two-column introduction above a wide tabbed authentication interface showcase and customer logo row. | category tabs, account creation preview, customer proof | white canvas, large bold headline, floating navigation, subtle product shadow |
| 2 | feature-grid | Full-width charcoal band with a centered intro and dense multi-column feature-card mosaic. | feature scanning, capability overview | dark tonal cards, muted technical illustrations, compact feature copy |
| 3 | feature-grid | Pale section with left-aligned introduction above a three-column set of organization-management previews. | feature discovery, explore link | pale canvas, white preview cards, rounded interfaces |
| 4 | feature-split | Two-column billing section with explanatory copy on the left and a pricing interface mockup on the right. | feature explanation, plan comparison preview | pale background, interface card, compact checklist |
| 5 | integrations | Dark band split into two centered groups, each followed by a bordered icon grid. | framework browsing, integration discovery | charcoal canvas, outlined icon tiles, centered headings |
| 6 | testimonials | Light customer-proof area with a brief intro and staggered quote cards, followed by grouped footer navigation. | customer testimonials, logo and social proof, footer navigation | pale canvas, quote cards, small portraits, muted footer links |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/clerk-com