What is the role of the primary color in Clerk’s UI?

The primary color #6c47ff functions as the visual anchor for all interactive affordances. It colors headings, CTA buttons, and highlighted icons, ensuring that users can instantly locate actionable elements. The token appears in the CSS variable list under --color-purple-500 and is referenced by components such as heroHeading, h2, and badge-primary. By limiting the accent to a single hue, the system avoids chromatic overload while still providing a clear signal hierarchy that separates primary actions from secondary text rendered in #000000.

How does the typography system differentiate headings from body text?

Headings employ the Geist‑Numbers family at larger sizes (32 px for display‑xl, 13 px for heading‑lg) with increased weight (600–700) and a negative letter‑spacing of –0.48 px, creating visual prominence. Body text uses the same family at 13 px or 11 px with a regular weight of 400 and normal letter‑spacing, delivering comfortable line heights of 20 px to 24 px. Code snippets switch to the soehneMono mono‑stack at 12 px weight 600, preserving readability for technical content. This tiered approach maintains typographic harmony while clearly signalling hierarchy.

What spacing conventions are applied to form elements?

Form elements adopt a base vertical spacing of 8 px between label and input, with horizontal padding of 8 px on the input container. The spacing token “sm” (12 px) is used for internal padding of buttons, while “md” (16 px) defines the gap between form rows. These values stem from the extracted spacing list where 8 px and 12 px dominate the count, ensuring that the vertical rhythm aligns with the line height of body text (20 px) and that controls feel neither cramped nor excessive.

How are error states visualized in the component library?

Error states leverage the red token #ef4444, which appears in the CSS variable --color-red-500. Components such as alert-error and input-error border use this hue for outlines and background fills, while accompanying text adopts the same color for emphasis. The error color is paired with the neutral hairline #d9d9de for subtle borders, preserving contrast without overwhelming the layout. This consistent use of a single error hue across components creates an instantly recognisable feedback loop for users.

What is the recommended method for integrating the rounded tokens into custom components?

Rounded tokens are exposed as CSS variables –radius-sm (4 px), –radius-md (6 px), –radius-lg (8 px), –radius-xl (12 px), and –radius-full (9999 px). When building a custom component, assign the desired radius via var(--radius‑md) for moderate rounding or var(--radius‑full) for fully circular avatars. In Tailwind, map these variables to borderRadius utilities (e.g., rounded‑md: var(--radius‑md)). This strategy ensures that any new component inherits the same curvature language as the core library, maintaining visual cohesion across the product.

Clerk Design System

Clerk’s design system centers on the brand purple #6c47ff and the Geist‑Numbers typeface, delivering a white canvas, dark ink, and a curated set of UI components for modern web ap…

About Clerk DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source clerk.com

Design & Creative Tools

Clerk’s homepage opens on a pure white canvas (#ffffff) that frames a headline rendered in 64 px Geist‑Numbers with a weight of 700, colored in the brand purple #6c47ff. Below the hero, body copy rests on dark ink #000000, while interactive elements such as primary buttons inherit the same purple accent and a 4 px border rendered in #d9d9de. The layout interleaves neutral surfaces – #e3e3e7 for card backgrounds and #eeeef0 for input fields – establishing a rhythm of contrast and relief that guides the eye without relying on gradients or illustrations.

Inside this DESIGN.md file you will find 23 color tokens grouped into primary, ink, canvas, hairline, muted, surface‑1/2/3, link, error, warning, and several brand‑specific shades; 12 typography tokens covering display, heading, body, caption, code, and button roles; 6 rounded values ranging from 0 px to a full 9999 px radius; a spacing scale from 4 px to 24 px; and a component catalog of 20 primitives that span navigation, forms, cards, alerts, and modals. The token set follows the Google Labs design‑token specification, exposing each value as a CSS custom property ready for consumption by Tailwind, CSS‑in‑JS, or native stylesheet imports.

To use the system, import the generated token file into your project and reference tokens via the {colors.x}, {typography.x}, {rounded.x}, and {spacing.x} placeholders. In Tailwind you can map the custom properties to theme extensions, while in CSS‑in‑JS you can read the variables directly from the :root. This approach guarantees visual consistency across React components and downstream applications, and it demonstrates why Clerk’s visual language merits close study for teams building authentication‑heavy products.

What makes it distinct

Primary accentthe brand purple #6c47ff appears on headings, CTA buttons, and interactive icons, establishing a consistent visual hook across the site.
Ink dominanceblack #000000 powers all body copy and navigation links, delivering maximum contrast against the white canvas.
Hairline definitionthe light gray #d9d9de is used for 1 px borders on tables, inputs, and card outlines, subtly separating content without visual noise.
Surface layeringneutral grays #e3e3e7 and #eeeef0 provide background bands for cards and modal dialogs, creating depth while preserving a flat aesthetic.

Live at clerk.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

clerk.com

Explore Clerk

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Clerk design system FAQ

Common questions about Clerk's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Clerk — official site

Clerk's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.