Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Craft
ProductivityCraft presents a sophisticated dual-personality brand that marries editorial elegance with productivity pragmatism. The dreamy sky-blue hero backdrop with floating paper-like clouds evokes creative inspiration and limitless possibility, while the structured interface preview grounds users in practical functionality.
Design Identity
Signature Color
Craft Sky Blue
#87CEEB
creative freedom and mental clarity - the color of infinite possibility and organized thinking
Visual Identity
The signature floating paper cutout aesthetic against dreamy sky gradients - documents and UI elements appear to hover weightlessly in a three-dimensional cloud space, creating a unique 'ideas floating in the sky' metaphor.
Component Style
Soft-rounded cards with subtle drop shadows that appear to float above surfaces. Generous 12-16px border radius on all containers, clean 1px borders in muted grays, and layered depth through gentle shadows rather than harsh lines.
Spacing Philosophy
Expansive breathing room in the hero section with clouds of whitespace, then tight organizational density in the productivity interface. The contrast between airy inspiration and focused execution defines the spatial rhythm.
Design Principles
- Typography mixes UntitledSerif for headlines (66px-28px) with UntitledSans for interface (16px)
- All interactive elements use 12-16px border radius for approachable softness
- Color palette balances muted productivity tones with vibrant accent blocks
- Layered paper metaphor - everything appears to float with subtle shadows
- Sky-to-structure hierarchy: expansive creative space flows into organized workspace
Target Audience
Creative professionals and knowledge workers who think in big ideas but need structured execution - designers, writers, strategists who value both inspiration and organization.
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 | 66px | 400 | 66px | |
| h2 | 54px | 400 | 59.4px | |
| h3 | 46px | 400 | 56.12px | |
| h4 | 16px | 500 | 24px | |
| h5 | 28px | 400 | 33.6px | |
| p | 16px | 500 | 22.4px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 22.4px | |
| nav | 16px | 400 | 24px |
Color Palette
#030302#b25620#3f8850#bb433a#427e8a#ffffff#4b68c3#987e1b#fcf9f7#a549ab
