Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Clerk
Dev ToolsClerk's brand embodies Silicon Valley sophistication through extreme minimalism and Swiss-inspired typography. The nearly monochromatic palette of warm grays creates a sense of premium restraint, while the Suisse typeface signals serious developer tooling with European design sensibilities.
Design Identity
Signature Color
Charcoal Slate
#42434d
Developer-grade professionalism and technical precision
Visual Identity
Vast expanses of near-white space punctuated by razor-thin typography - if you see a page that's 90% empty with surgical text placement, it's unmistakably Clerk
Component Style
Ghost-like elements that barely exist - no borders, no shadows, no visual weight. Components feel like they're floating in digital ether with absolute minimal visual footprint
Spacing Philosophy
Brutally generous whitespace that makes every element feel precious and intentional. Space is the primary design element, with content sparse and strategically placed like gallery art
Design Principles
- Zero visual noise - no shadows, gradients, or decorative elements
- Typography hierarchy jumps dramatically from 13px to 64px with nothing in between
- Monochromatic palette never strays from gray family
- Whitespace ratios heavily favor empty space over content
- Swiss typography principles with mathematical precision
Target Audience
Senior developers and technical decision-makers who appreciate understated European design over flashy Silicon Valley aesthetics
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 24px | |
| h1 | 64px | 700 | 72px | |
| h2 | 13px | 500 | 24px | |
| h3 | 16px | 400 | 24px | |
| p | 18px | 400 | 28px | |
| a | 13px | 500 | 24px | |
| button | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px |
Color Palette
#42434d#eeeef0#131316#ffffff#3b82f6#f7f7f8
