Clerk
A developer authentication platform with a clean, professional dual-mode canvas — light white (#FFFFFF) with cool gray surfaces for the dashboard, dark (#0A0A0A) for the marketing site's impactful moments — anchored by Clerk's violet-purple primary (#6C47FF). The UserButton, SignIn, and UserProfile components are Clerk's most visible design artifacts: polished white modals with thoughtful micro-interactions that developers embed directly. Typography uses Inter for both product and marketing with a clean hierarchy. The system communicates: auth is infrastructure, but it should be beautiful infrastructure.
Color Tokens
1. Visual Theme & Atmosphere
Clerk bets that developers will choose auth infrastructure that looks good because it reflects on their product. The SignIn component is Clerk's flagship: a white card with the developer's brand logo at top, clean form fields, and a social auth button stack that adapts to configured providers. The dashboard is minimal and clean — an admin surface for managing users, sessions, and JWT configuration without unnecessary complexity. Purple is the thread connecting brand to product to component.
2. Color System
- Purple primary: #6C47FF — the Clerk color; CTAs, active states, focus rings in components
- Canvas: Pure white for dashboard and embedded components
- Cool surfaces: #F7F7F8 / #EFEFF1 — neutral gray with slight cool tint for panels
- Ink: #131316 — very dark, near-black with slight cool undertone
- Muted: #747686 — subdued text for labels, helper text in form fields
- Success green: #1DB97B — verified badges, successful connection states
3. Typography
Inter at every level. The embedded components (SignIn, UserProfile) use Inter to match the broader developer ecosystem — it's the default "professional web app" typeface. Display sizes use 700 weight with tight tracking. The components themselves use slightly smaller base sizes (14px) for compact embedding.
4. Components & Patterns
- SignIn card: White modal, logo slot at top, email/password fields, social OAuth buttons, footer with "Secured by Clerk"
- UserButton: Small avatar button that opens a mini-profile popover — the signature Clerk UX
- UserProfile: Full settings page (name, email, password, connected accounts, sessions list)
- Dashboard user table: Columns for user, email, created, last signed in, status badge
- JWT inspector: Developer tool for viewing token claims in dashboard
- Organization switcher: Dropdown for multi-org apps, organization avatar + name
5. Spacing & Layout
Components: 24px internal padding, 480px default width for auth modals. Dashboard: 240px sidebar, content max 1100px. Generous row height in user tables (48px) for comfortable scanning.
6. Motion & Interaction
SignIn component: form fields focus with purple ring. Social buttons have hover lift (subtle translateY). Error states shake horizontally. UserButton popover opens with fade+scale. Session revoke triggers a soft disappear animation.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for