# Clerk — DESIGN.md

Clean authentication and user-management marketing with a light technical canvas, bold black type, violet actions and dark pricing chrome.

Independent reference guide from public Incognito captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **geometric sans / Inter-like**. A family name is not a bundled font licence. Use an available, licensed sans-serif pairing or system fallbacks.

## Marketing — Authentication and user management

### Observed palette
- Light technical canvas: #ffffff
- Primary text: #0b0b0f
- Muted text: #65656d
- Violet accent: #6c47ff
- Dark pricing canvas: #111218
- Card surface: #202127
- Soft border: #e7e7eb

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~52–64px / tight | 700 | tight |
| Section / pricing heading | ~40–52px / tight | 600–700 | tight |
| Body / supporting copy | 16–18px / 1.45 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- Homepage and the approved feature fallback use a bright, highly centred hero with a technical line-grid backdrop, a large authentication-and-user-management claim, supporting copy and a compact build-with-agents prompt.
- Pricing switches to a dark technical canvas and presents Hobby, Pro, Business and Enterprise plan cards with a bright violet free-tier CTA and monthly / annual controls.
- The header keeps product, docs, changelog, company, AI and pricing links visible, with Sign in and Sign up actions on the right.

### Components & behavior
- Primary CTA: filled violet rounded button with a light label.
- Secondary CTA: muted outline or neutral action on dark plan cards.
- Technical backdrop: faint connected lines and nodes behind the hero; keep contrast subtle.
- Pricing cards: bordered dark columns with a monthly / annual switch and plan-specific action labels.

## Scope
This is a marketing-only, logged-out capture (home, pricing and the home showcase reused for the feature slot). No product UI, dashboard, login session, credentials, signup submission or payment was captured. The feature URL intentionally uses https://clerk.com/ because the supplied capture plan had no separate feature URL.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, keep technical background decoration behind content, and stack plan cards on small screens.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Incognito frame with browser chrome, funding announcement strip, Clerk navigation and centred “More than authentication, Complete User Management” hero over a faint technical grid, with supporting copy and a Build with agents prompt. Screenshot: captures/clerk-marketing-home.jpg.
- Pricing: Dark technical page with Clerk navigation, “Plans for every stage” headline, supporting copy and Hobby / Pro / Business / Enterprise cards. Screenshot: captures/clerk-marketing-pricing.jpg.
- Feature / product showcase: Intentionally the supplied home showcase fallback at https://clerk.com/; same centred user-management hero and build prompt, with no product or auth flow. Screenshot: captures/clerk-marketing-feature.jpg.