High-polish light SaaS: off-white canvas with faint circuit texture, bold black display type, one Clerk-purple #6c47ff CTA, layered multi-shadow controls, and a glassy floating nav.
Browse Clerk in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: clerk.com (live DOM, computed styles), 2026-07-08 (desktop 1512px). Coverage: marketing home + announcement bar + floating nav + hero + logo wall. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Bright, polished, high-craft SaaS marketing — a light off-white canvas printed with a faint circuit-board line pattern, black display type, and one saturated Clerk-purple accent. The signature is the *finish*: buttons and the floating nav card carry layered multi-shadow recipes (a hairline color ring, an inset top-highlight, and a soft ambient drop), plus a subtle vertical sheen gradient, so every control looks slightly physical and pressable. Chrome is otherwise near-monochrome — black text, gray secondary, hairline #d9d9de borders — letting the purple CTA and the glassy floating nav do the branding. Feels: bright, polished, crafted, trustworthy.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #f7f7f8 | Page background (off-white) |
| surface | #ffffff | Cards, buttons, logo-wall cells |
| nav-glass | rgba(248,248,248,.90) | Floating nav card background |
| text-primary | #131316 | Headings, body, button labels |
| text-muted | #5e5f6e | Subheads, secondary copy |
| border-default | #d9d9de | Hairline borders (nav, buttons, cards) |
| sheen | rgba(19,19,22,.03) | Subtle button sheen gradient (bottom half) |
| Token | Hex | Role / usage |
|---|---|---|
| purple-500 | #6c47ff | Primary CTA fill, focus ring, brand accent |
| purple-ring | rgb(108,71,255) | 0.5px hairline ring around the primary button |
Rule: one accent only — #6c47ff, reserved for the primary CTA, links, and focus. Rule: structure is hairline #d9d9de borders; polish comes from layered shadows, not color.
geistNumbers, suisse, "Geist", Inter, -apple-system, sans-serif (Clerk's custom Suisse/Geist-based faces).#131316.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 72 | 700 | -1.6px (-2.5%) |
| Subhead | 18 / 28 | 400 | 0, #5e5f6e |
| Section label (h2) | 13 / 24 | 500 | 0 |
| Body | 16 / 24 | 400 | 0 |
| UI / buttons | 13 | 500 | 0 |
Patterns: one bold display moment (700) with tight negative tracking; everything else is 400–500. Small UI text runs 13px/500. Section eyebrows appear in uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.