Clerk uses a split-personality canvas: the marketing shell is near-white (#f7f7f8) with barely-there borders and generous whitespace, while product demo surfaces drop into near-black (#212126) dark cards that showcase UI components in context. The single brand color — a mid-range violet (#6c47ff) — appears with surgical restraint: only on primary CTAs and the occasional heading accent, making every appearance feel deliberate. Typography defaults to Geist, a custom numeric-optimized face at tight negative tracking (-0.035em), giving headlines a technical density that signals developer-first thinking without heavy weight. The gradient system layers violet with stray yellow (#fff963) and cyan (#5de3ff) halos at low opacity, creating an atmospheric shimmer behind hero content rather than decorative noise.
#6c47ffPrimary CTA button fill, active heading accents — the single chromatic action color; its mid-spectrum violet reads developer-brand without borrowing blue from infrastructure tools; Atmospheric hero background gradient blending violet and yellow; Brand gradient for decorative text highlights and horizontal accent rules
#615cf6Decorative list and tag backgrounds, subtle brand surface tints
#5de3ffHeading accent text inside dark sections, code string highlights, decorative icon glow
#131316Primary text, headings, and high-contrast body copy across light surfaces
#f7f7f8Page canvas and light section backgrounds
#ffffffCard surfaces, modal backgrounds, form inputs on light sections
#5e5f6eSecondary body text, muted labels, icon fills on light surfaces
#747686Tertiary text, nav punctuation, disabled state text
#d9d9deBorders, dividers, input outlines, table rules
#eeeef0Subtle section dividers, link icon backgrounds, hover wash backgrounds
#9394a1Placeholder text, code comments, muted helper copy
#212126Dark product demo card backgrounds in mixed-mode sections
#2f3037Elevated dark panel backgrounds, code block surfaces
#696a78Mid-tone icon fills and body copy inside dark card contexts
64px · 700 · 1 · -2.24px trackingThe quick brown fox jumps
32px · 600 · 1.13 · -1.12px trackingThe quick brown fox jumps
22px · 600 · 1.27The quick brown fox jumps
20px · 450 · 1.25 · -0.3px trackingThe quick brown fox jumps
18px · 700 · 1.4 · -0.27px trackingThe quick brown fox jumps
17px · 700 · 1.41The quick brown fox jumps
16px · 400 · 1.5The quick brown fox jumps
15px · 400 · 1.6The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
soehneMono — detected in extracted data but not described by AI
Primary typeface for all marketing copy, UI labels, headings, and CTAs. The custom numeric tables (geistNumbers variant) keep digit spacing consistent inside product demos. Negative tracking at -0.035em at large sizes and -0.015em at mid sizes compresses display headlines into a dense technical block — a deliberate contrast to softer marketing type.
System fallback font used in browser-rendered components, OS UI widgets, and the Clerk-embedded auth modal. Its presence signals authentic native-UI feel in interactive demos.
UI micro-labels, product card annotations, and icon captions within embedded component previews.
Code snippets, JSX component labels (<SignUp />, <UserButton />), and terminal output. The +0.10em positive tracking at mono sizes makes angle-bracket syntax air out instead of colliding — a purposeful readability choice at 10-12px.
9999px16px9999px6px16px6px8px12px1px2px3px4px6px7px8px10px12px14px15px16px17px20px24px28px30px32px40px46px48px50px56px64px68px72px73px76px80px89px94px99px110px128px151px158px160px172px272px302px320pxBackground #6c47ff, white text (#ffffff), 6px border-radius, 0px vertical padding with 12px horizontal padding. Box-shadow uses violet glow. Geist font weight 500, 15-16px size. Transitions background-color and box-shadow at 0.15s ease.
Background #ffffff, text #131316, 1px solid #d9d9de border, 6px radius, 0px vertical / 10px horizontal padding. Subtle shadow: rgb(217,217,222) 0px 0px 0px 0.5px. Geist weight 500.
Background transparent, text #131316, no border, 0px radius. Right padding 8px. On hover, border-color transitions to #d9d9de. Used for Products, Docs, Changelog, Company nav items.
9999px border-radius, background transparent or #eeeef0, text #6c47ff at 11-12px Geist weight 500. 4px vertical / 10px horizontal padding. The violet text on near-white background signals section taxonomy without using a filled badge.
Background #ffffff, 16px radius, shadow stack: rgba(0,0,0,0.05) 0px 1px 1px, rgba(34,42,53,0.04) 0px 4px 6px, rgba(47,48,55,0.05) 0px 24px 68px. Padding 16px 20px. 1px hairline border at #d9d9de at 0.5px weight.
Background #212126, 16px radius, inset white shimmer: rgba(255,255,255,0.024) 0px 1px 0px inset + rgba(255,255,255,0.024) 0px 0px 0px 1px inset. No explicit padding (content-driven). Text #ffffff and #9394a1 for body. Creates glass-like border without actual border.
Background #ffffff, 8px radius (inner form elements), outer wrapper uses 16px radius. Deep shadow: rgba(47,48,55,0.2) 0px 15px 35px -5px. Inner inputs: #f7f7f8 background, 6px radius, 1px #d9d9de border. Primary action inside uses Electric Violet (#6c47ff) full-width button.
Söhne Mono weight 500, 10-12px, +0.10em letter-spacing, text #131316 or #6c47ff, background transparent. Formatted as '<ComponentName />' with angle brackets in violet accent color.
Background #f7f7f8, 6px radius, 1px solid #d9d9de border, padding 8px 12px. Placeholder text #9394a1 (Stone). Focus ring uses violet: rgba(108,71,255,0.2) box-shadow ring. Label text #131316 Geist weight 500 12px.
Background #ffffff, 1px solid #d9d9de, 6px radius, full-width, 10px 12px padding, text #131316 Geist weight 500 14px, leading OAuth provider icon left-aligned. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px.
Background transparent, text #747686 when collapsed, #131316 when expanded, 9999px radius on expand indicator dot. Dashed 1px #eeeef0 separator. Expanded state shows sub-item code labels indented 16px.
Full-width, background #131316, text #ffffff Geist weight 500 13px, centered. Inline 'Learn more →' link in #d9d9de. 8px 0px vertical padding.
#f7f7f8Base page background for light marketing sections
#ffffffDefault card and form surface on light backgrounds
#f7f7f8Input backgrounds, table row fills, and secondary card insets
#212126Product demo sections and dark-mode showcase panels
#2f3037Elevated panels and code blocks within dark sections
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
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(47, 48, 55, 0.2) 0px 15px 35px -5px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px
rgba(0, 0, 0, 0.05) 0px 1px 1px 0px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px, rgba(47, 48, 55, 0.05) 0px 24px 68px 0px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px
rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.024) 0px 0px 0px 1px inset
rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px
Max-width 1200px centered container, full-bleed colored bands at the section level. Hero is full-viewport-height centered stack: announcement strip at top → sticky nav → display headline with gradient background halo → two inline CTAs → logo strip. Below the hero, sections alternate between full-width light (#f7f7f8) and full-width dark (#1a1a1f) bands with consistent 80px top/bottom vertical padding. Feature sections use a 2-column text-left / interactive-demo-right layout. The component explorer section uses a 2-column layout: accordion list on the left, live auth modal preview on the right. Dark authentication feature grid uses a 3-column card grid at desktop with bento-style spanning cards (one wide center, two flanking). Navigation is a fixed top bar with logo left, text nav center, sign-in + CTA right. No sidebar navigation at the marketing level.
The site relies almost entirely on live UI product screenshots and recreated Clerk component demos rather than photography or illustration. Auth modals (sign-in card, account chooser) are shown as floating white cards with deep shadows, photographed at slight perspective or presented flat. Dark feature sections use stylized product mockups of phones, browser windows, and session management tables rendered at pixel-density on #212126 surfaces. Icons are monochromatic outlined glyphs at ~16-20px with 1.5px apparent stroke weight, shifting between #131316 on light and #9394a1 on dark surfaces. There is no lifestyle photography and no abstract illustration — the visual evidence IS the product. Image density is medium: each feature section uses one contained product mockup surrounded by text, never full-bleed. Mockup edges are sharp with soft drop shadows, not rounded or masked.
**Quick Color Reference** - text (primary): #131316 - text (secondary): #5e5f6e - background (light): #f7f7f8 - background (dark section): #212126 - border / hairline: #d9d9de - brand accent / primary action: #6c47ff (filled action) **Example Component Prompts** 1. **Hero section (light):** Full-width section with radial gradient halo (violet→yellow→cyan, max opacity 0.24) over #f7f7f8 canvas. Center-aligned headline at 64px Geist weight 700 #131316 letter-spacing -2.24px, two-line. Subheading at 18px weight 400 #5e5f6e. Two inline buttons: filled violet (#6c47ff, white text, 6px radius, 0px/12px padding) + ghost white (#ffffff border #d9d9de, text #131316, same radius). Vertical gap between headline and buttons: 32px. 2. **Dark obsidian feature card:** Background #212126, 16px radius, inset shadow rgba(255,255,255,0.024) 0px 1px 0px inset + rgba(255,255,255,0.024) 0px 0px 0px 1px inset. Heading 16px Geist weight 600 #ffffff. Body 14px weight 400 #9394a1. No explicit border-color — the inset shimmer IS the border. 24px internal padding. 3. Create a Primary Action Button: #6c47ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. **Code component label (sidebar):** Söhne Mono 11px weight 500 +0.10em tracking. Format: `<ComponentName />` with `<`, `/>` in #6c47ff, `ComponentName` in #131316. Transparent background. 4px 8px padding. Used in accordion list items. 5. **Feature section (text + demo, 2-col):** Max-width 1200px container. Left column: section eyebrow label (pill badge, #6c47ff text, #eeeef0 bg, 9999px radius, 11px Geist weight 500); heading 32px weight 700 #131316 letter-spacing -1.12px; body 15px weight 400 #5e5f6e line-height 1.56; 8px gap between elements. Right column: white or dark product demo card with 16px radius and appropriate shadow tier. Section top/bottom padding 80px.
Three gradient tiers serve distinct purposes: 1. **Hero Halo (atmospheric):** `radial-gradient(189.26% 126.1% at 49.27% 0%, rgba(108,71,255,0) 10%, rgba(255,249,99,0.15) 34%, rgba(98,72,246,0.24) 67.53%, rgba(98,72,246,0) 95.38%)` — applied behind hero headlines only, at full section width. The yellow stop (#fff963 at 15% opacity) creates a warm center bloom that prevents the violet halo from reading as plain purple. 2. **Brand Sweep (decorative text/lines):** `linear-gradient(to right, #6c47ff 25%, #5de3ff 75%)` — used for gradient text highlights and horizontal decorative rule accents. Violet-to-cyan mimics a dev-tool terminal palette. 3. **Dark Card Radial (depth):** `radial-gradient(79.87% 92.91% at 81.25% 12.5%, #ffffff 0%, #19191b 100%)` — used inside individual dark cards to add depth without explicit lighting. The white hot-spot is offset top-right, implying a single ambient light source.
When building sections on #212126 or darker surfaces: - Card borders: use ONLY inset box-shadow (rgba(255,255,255,0.024)) — no CSS border property - Text hierarchy: #ffffff for headings, #9394a1 (Stone) for body, #696a78 (Slate Mid) for captions - Accent color (#6c47ff) remains the same in both light and dark contexts — it has sufficient contrast against both - Cyan (#5de3ff) is exclusively a dark-section accent — never use it on light backgrounds - Code blocks inside dark sections use #2f3037 background with the same inset shimmer pattern - Apply backdrop-filter blur(4-8px) on floating cards within dark sections for glass depth
Same developer-identity category with violet/purple brand accent on light documentation shell
Identical dual-surface strategy: white marketing sections with embedded dark product preview cards showing live UI
Same approach of using live-component screenshots as hero visuals with deep layered drop shadows on floating white cards
Dark product showcase sections with inset-shimmer glass-border cards and tight negative-tracked Geist-style display headlines
Monochrome palette punctuated by a single vivid accent color, Söhne Mono code labels, and mixed light/dark section banding
Use the design exports or connect Musterlab to your AI.
