Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Doist
ProductivityDoist embraces a humanistic, illustration-forward aesthetic that transforms productivity from sterile efficiency into joyful living. The warm, coral-red signature color paired with whimsical, diverse character illustrations creates an approachable antidote to typical tech coldness, while generous whitespace and flowing compositions suggest breathing room in busy lives.
Design Identity
Signature Color
Doist Coral
#e44232
warm productivity energy that makes task management feel human and approachable rather than corporate
Visual Identity
Large-scale, diverse character illustrations with flowing, organic compositions set against expansive white backgrounds - instantly recognizable by the human-centered storytelling through visuals rather than geometric abstractions
Component Style
Softly rounded corners (8px standard) with no harsh shadows, relying on subtle elevation and warm color fills rather than stark borders - everything feels approachable and touchable like friendly consumer products
Spacing Philosophy
Generous breathing room with massive vertical gaps between sections, allowing the illustration-heavy content to float in space while maintaining intimate component spacing that encourages interaction
Design Principles
- Border radius stays gentle at 8px maximum for approachability
- Typography mixes Graphik Web for headlines with Inter for UI precision
- Illustrations always feature diverse, real-world scenarios rather than abstract concepts
- Color temperature stays warm with coral primaries and peach/cream secondaries
- Animation durations favor slower, more thoughtful transitions (.35s-.6s)
Target Audience
Productivity-conscious professionals and creatives who value work-life balance over hustle culture and prefer tools that feel human rather than robotic
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 | 16px | |
| h1 | 67px | 600 | 77.05px | |
| h2 | 38px | 600 | 48.64px | |
| h3 | 31px | 600 | 39.68px | |
| p | 15.5px | 500 | 20.925px | |
| a | 16px | 400 | 16px | |
| button | 15.5px | 475 | 20.925px | |
| nav | 16px | 400 | 16px | |
| footer | 16px | 400 | 16px |
Color Palette
#000000#0077b5#1877f2#1da1f2#ff0000#e145a5#e44232#fae8d6#fff5eb#fff9f3#d1453b#ee5244
