Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Shortcut
ProductivityShortcut embodies minimalist confidence with abundant whitespace and premium simplicity. The signature purple (#494bcb) creates a sophisticated tech aesthetic that feels both approachable and authoritative, while the Satoshi typeface adds contemporary warmth to an otherwise pristine, uncluttered canvas.
Design Identity
Signature Color
Shortcut Purple
#494bcb
premium productivity trust - sophisticated enough for enterprise teams yet approachable for everyday workflows
Visual Identity
Extreme whitespace maximalism - vast empty areas punctuated by carefully positioned elements create a sense of premium focus and deliberate restraint
Component Style
Clean geometric forms with subtle rounded corners (likely 6-8px), minimal borders in light grey (#eeeeee), and generous padding. Components float on pure white with gentle shadows rather than heavy outlines - everything feels weightless yet substantial
Spacing Philosophy
Luxury through emptiness - massive 80-120px gaps between sections create breathing room, while consistent 24-32px internal spacing maintains rhythm without feeling cramped
Design Principles
- Typography uses Satoshi exclusively across all elements for cohesive personality
- Primary text is pure black (#000000) with neutral grey (#686878) for secondary content
- Background alternates between pure white (#ffffff) and subtle grey tints (#f6f6fa, #f0f0f7)
- Status colors follow muted palettes - success uses forest green (#114e0b) on sage backgrounds (#cef5ca)
- Font weights stick to 500 for body text and 700 for headings - no light weights
Target Audience
Product managers and engineering leads at growing startups who value clean workflows over feature bloat
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 | 15.2491px | 500 | 22.8737px | |
| h1 | 60.9965px | 700 | 78.0755px | |
| h2 | 45.7474px | 700 | 57.1842px | |
| h3 | 19.0614px | 700 | 24.208px | |
| p | 20.8913px | 500 | 33.4261px | |
| a | 15.2491px | 500 | 22.8737px | |
| nav | 15.2491px | 500 | 22.8737px | |
| footer | 15.2491px | 500 | 22.8737px | |
| main | 15.2491px | 500 | 22.8737px |
Color Palette
#000000#686878#494bcb#ffffff#cef5ca#114e0b#eeeeee#aaaab0#f6f6fa#08093f#2d62ff#dd23bb
