# Clerk — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals (light theme)
| 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) |

### Accent (Clerk purple)
| 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.

## 3. Typography Rules

- Display/UI stack: `geistNumbers, suisse, "Geist", Inter, -apple-system, sans-serif` (Clerk's custom Suisse/Geist-based faces).
- Body: 16px / 24px line-height / 400 / `#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.

## 4. Component Stylings

### Buttons (compact, ~30px)
- **Primary (purple)**: bg `#6c47ff`, text white, radius 6px, h ~30px, 13px/500, padding `0 12px`. Signature layered shadow: `rgb(108,71,255) 0 0 0 .5px, rgba(255,255,255,.07) 0 1px 0 inset, rgba(0,0,0,.2) 0 1px 3px` — a purple hairline ring + inner top-highlight + soft drop.
- **Secondary (white)**: bg `#ffffff` with a subtle sheen `linear-gradient(rgba(19,19,22,0) 45%, rgba(19,19,22,.03) 55%)`, text `#131316`, border 1px `#d9d9de`, radius 6px, soft `oklab(...)` shadow; often carries a trailing dropdown caret.

### Floating nav card
- A rounded card containing the nav: bg `rgba(248,248,248,.90)`, border 1px `#d9d9de`, radius 12px, shadow `rgba(255,255,255,.9) 0 0 0 .5px inset, rgba(19,19,22,.15) 0 …` — inset white hairline + soft ambient drop, giving a glassy floating bar detached from the page top.

### Announcement bar
- Full-width near-black (`#131316`) strip above the nav, centered white text ("Clerk raises $50m Series C · Learn more").

### Cards / logo wall
- White cells divided by hairline `#d9d9de` borders; grayscale customer logos, generous spacing.

### Inputs
- Not fully captured on marketing; expect white fill, `#d9d9de` border, radius 6px, `#6c47ff` focus ring (consistent with the button system).

## 5. Layout Principles

- Max content width ~1180px, centered; hero text centered.
- Announcement bar → floating nav card (inset from edges, ~12px radius) → centered hero (64px black headline + 18px muted subhead + dual CTA) → hairline-divided logo wall.
- Nav card: logo left; center dropdown links (Products/Docs/Changelog/Company/Pricing); right "Sign in" + purple "Start building" pill.
- Spacing: 4px base grid; generous vertical rhythm; CTAs centered with ~12px gap.

## 6. Depth & Elevation

- Radii: buttons/inputs `6px`, nav/cards `12px`.
- Control heights: buttons ~26–30px (compact).
- Elevation: the defining trait — layered multi-shadow recipes combining a hairline color/white ring, an inset top-highlight, and a soft ambient drop (often expressed in `oklab()`), rather than a single flat shadow.

## 7. Motion

- Micro-transitions on hover (color/background/shadow) for buttons and nav; subtle. Modern Next.js marketing stack.
- No heavy scroll-jacking observed; the hero circuit pattern is static. (Exact durations not fully captured.)

## 8. Backgrounds, Effects & WebGL

- **Signature faint circuit-board pattern**: very light gray traces, nodes, and chip glyphs tiled across the hero on the `#f7f7f8` canvas — subtle technical texture, not a bold graphic.
- Button/nav **sheen gradients**: near-invisible vertical `rgba(19,19,22,0)→.03` washes that add a soft pressable finish.
- Glassy floating nav via translucent `rgba(248,248,248,.90)` + inset white hairline.
- No background video, no WebGL — polish comes from shadows and micro-textures.

## 9. Do's and Don'ts

### Do
- Use an off-white `#f7f7f8` canvas with a faint circuit-board line texture in the hero.
- Keep one saturated accent: Clerk purple `#6c47ff` for the primary CTA, links, and focus.
- Give buttons layered shadows: a hairline ring + `rgba(255,255,255,.07) 0 1px 0 inset` top-highlight + soft `0 1px 3px` drop.
- Add a subtle bottom-half sheen gradient (`rgba(19,19,22,.03)`) to white controls.
- Float the nav as a translucent rounded card (radius 12px, `#d9d9de` border, inset white hairline).
- Set the headline in one bold (700) display moment with tight -2.5% tracking; keep everything else 400–500.
- Use hairline `#d9d9de` borders and 6px control radii.

### Don't
- Don't introduce a second accent color; purple `#6c47ff` is the only saturated hue.
- Don't use a single flat drop shadow — the polish is in the layered ring + inset + ambient stack.
- Don't set body/UI in heavy weights; only the display headline is 700.
- Don't attach the nav to the page edges — it floats as an inset glassy card.
- Don't make the circuit pattern loud; it's a faint texture.

## 10. Responsive Behavior

- Modern responsive stack; nav card collapses to a hamburger on mobile, hero type scales down, logo wall wraps.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f7f7f8` · Surface `#ffffff` · Text `#131316` · Muted `#5e5f6e` · Border `#d9d9de` · Accent `#6c47ff`
- Font: Suisse/Geist-style sans · Body: 16/24 · Radius: 6px control / 12px nav-card · Button height: ~30px
- Primary btn shadow: `#6c47ff 0 0 0 .5px, rgba(255,255,255,.07) 0 1px 0 inset, rgba(0,0,0,.2) 0 1px 3px` · Nav glass: `rgba(248,248,248,.90)`

<clerk_design_language>
Use the Clerk design language: a bright, high-polish SaaS marketing look on an off-white #f7f7f8 canvas printed with a faint circuit-board line texture. Text is black #131316 with gray #5e5f6e supporting copy; one bold display headline (weight 700, tight -2.5% tracking, up to 64px) over otherwise 400–500 weights in a Suisse/Geist-style sans. The single accent is Clerk purple #6c47ff, reserved for the primary CTA, links and focus. The signature is finish: controls use layered multi-shadow recipes — a hairline color/white ring, an inset top-highlight rgba(255,255,255,.07) 0 1px 0 inset, and a soft ambient drop 0 1px 3px rgba(0,0,0,.2) — plus a barely-visible bottom-half sheen gradient rgba(19,19,22,.03) on white buttons, so everything looks pressable. The nav floats as a translucent rounded card (bg rgba(248,248,248,.90), 1px #d9d9de border, radius 12px, inset white hairline). Buttons are compact (~30px) at radius 6px; primary is purple with white text, secondary is white with a #d9d9de border and sheen. Structure elsewhere is hairline #d9d9de borders; a near-black announcement strip sits above the nav. Feels: bright, polished, crafted, trustworthy. Avoid: a second accent color, a single flat drop shadow, heavy body weights, edge-anchored navs, or a loud background pattern.
</clerk_design_language>