Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Bear
ProductivityBear embodies warm minimalism through its custom BearSans typography and signature red accent that feels approachable yet refined. The brand balances professional note-taking capabilities with a friendly, human touch - avoiding the cold sterility of typical productivity apps.
Design Identity
Signature Color
Bear Red
#dd4c4f
warmth and creative energy - distinguishing it from sterile blue productivity tools
Visual Identity
The distinctive three-panel layout with dark sidebar navigation and the warm red accent threading through the interface creates an instantly recognizable workspace aesthetic.
Component Style
Subtle rounded corners with clean borders, minimal shadows, and generous padding. The dark sidebar contrasts beautifully with bright content areas, while the red accent appears sparingly but memorably on key interactive elements.
Spacing Philosophy
Generous breathing room between major sections creates focus, while tight internal component spacing maintains information density. The sidebar uses compact 8-12px spacing while the main content area breathes with 24-32px gaps.
Design Principles
- Typography uses custom BearSans exclusively across all weights
- Red accent (#dd4c4f) appears only on primary actions and key highlights
- Three-column layout maintains consistent proportions across all screens
- Dark sidebar (#2c2c2c) always contrasts against light content areas
- Border radius stays minimal at 4-6px maximum
Target Audience
Creative professionals and writers who value craft and aesthetic experience over enterprise 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 | 16px | 400 | 27.2px | |
| h1 | 51.2px | 400 | 56.32px | |
| h2 | 41.6px | 400 | 45.76px | |
| p | 22.4px | 400 | 31.36px | |
| a | 19.2px | 400 | 27.2px | |
| input | 17.6px | 400 | normal | |
| nav | 16px | 400 | 27.2px | |
| footer | 16px | 400 | 27.2px | |
| main | 16px | 400 | 27.2px |
Color Palette
#ffffff#f3f5f7#e4e5e6#444444#888888#d9d9d9#dd4c4f
