Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Linear
ProductivityLinear embodies a midnight-hued, precision-engineered aesthetic that feels like a high-end developer tool built for nocturnal productivity. The dark palette creates an immersive, distraction-free environment while the signature violet accent adds just enough energy to feel alive without being overwhelming.
Design Identity
Signature Color
Linear Violet
#7170ff
sophisticated developer precision with a touch of creative energy
Visual Identity
The ultra-dark background (#010102) combined with razor-thin borders and violet accents creates an unmistakable 'night mode premium' aesthetic that feels like a professional IDE.
Component Style
Clean rectangular components with subtle 6-8px border radius, gossamer-thin borders (#23252a), and zero shadows - everything feels flat yet sophisticated with precise alignment and minimal visual noise.
Spacing Philosophy
Generous whitespace with 64px page padding creates breathing room, while components maintain tight internal spacing - the layout feels expansive yet focused, like a well-organized workspace.
Design Principles
- Border radius never exceeds 12px for subtle softness
- Typography uses precise weights: 400, 510, 590 for nuanced hierarchy
- Ultra-dark backgrounds (#010102) with high contrast white text (#f7f8f8)
- Violet accent (#7170ff) used sparingly for key interactions
- Sub-pixel borders (#23252a) create separation without visual weight
Target Audience
Senior product managers and engineering leads who value craft, precision, and sophisticated tooling over flashy marketing
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 | 510 | 64px | |
| h2 | 48px | 510 | 48px | |
| h3 | 20px | 590 | 26.6px | |
| h4 | 16px | 590 | 24px | |
| p | 15px | 400 | 24px | |
| a | 14px | 510 | 21px | |
| button | 13px | 400 | 19.5px | |
| input | 16px | 400 | normal | |
| nav | 16px | 400 | 24px |
Color Palette
#8a8f98#ffffff#191a1b#34343a#828fff#3e3e44#62666d#000000#23252a#141516#27a644#f7f8f8
