CURATED · OPEN · FREE

Clerk

Complete user management platform for developers to build secure, scalable applications

devtoolsauth

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://clerk.com

📦 Browse pack contents →

Identity DNA

AuthenticationUser ManagementDeveloper ExperienceScalable

The robust foundation of a secure building

Color

#6248F6Accent

#131316Ink

#5E5F6EInk soft

#FFFFFFBG

#F7F7F8BG soft

#747686Muted

rgba(217, 217, 222, 1)Line

Clean white space with sharp black text and a single vibrant purple accent

Typography

grotesque-sans · humanist-sans · monospace

display56px · 700
body16px · 400

Headlines use tight tracking and heavy weights for impact · Body text maintains comfortable reading rhythm with generous line height · Monospace elements used sparingly for technical emphasis

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base with generous whitespace in hero sections

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(217, 217, 222, 1)

rgba(0, 0, 0, 0.08) 0px 5px 15px 0px · rgba(25, 28, 33, 0.2) 0px 15px 35px -5px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero with generous whitespace, followed by multi-column feature grid

Motion & Interaction

150msmicro

300mssmall

450msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on hover · Subtle opacity changes for interactive states · Gradual transform animations for expansion effects

Subtle color darkening and background changes · Immediate visual feedback with no delay

Components

button Rounded pill buttons with clear hierarchy (primary filled, secondary outlined)
card Light gray cards with subtle borders and generous padding
chip Small rounded labels for categories and roles
input Clean input fields with subtle borders and rounded corners
hero Full-width centered layout with large typography and subtle background patterns

Voice & Don'ts

Tone Professional, confident, and developer-focused
Headlines Direct and benefit-driven with strong verbs
CTAs Action-oriented with clear value proposition

Don't use decorative fonts — screenshot shows clean, functional grotesque-sans typography
Don't add unnecessary shadows — screenshot shows minimal, purposeful elevation only on key elements
Don't use multiple accent colors — screenshot shows single purple accent (#6248F6) throughout
Don't create cramped layouts — screenshot shows generous whitespace and breathing room
Don't use complex gradients — screenshot shows subtle linear gradients and radial backgrounds
Don't add unnecessary borders — screenshot shows borders only where functional separation is needed
Avoid: Overly casual language
Avoid: Excessive exclamation marks
Avoid: Marketing jargon without substance
Avoid: Vague promises without technical specifics

Inside the pack — real screenshots

Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Clerk is a premium developer tool platform focused on authentication and user management. The design uses a clean, professional aesthetic with white backgrounds (#FFFFFF) and light gray surfaces (#F7F7F8). Typography employs grotesque-sans for display and humanist-sans for body text, with tight tracking on headlines. A single vibrant purple accent (#6248F6) creates clear call-to-action hierarchy. The layout centers content with generous whitespace and uses subtle shadows for depth. Critical don'ts: avoid decorative fonts, excessive shadows, multiple accent colors, cramped layouts, complex gradients, and unnecessary borders. The system prioritizes developer experience with clear information hierarchy and purposeful visual elements that communicate reliability and technical sophistication.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko