Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Astro
Dev ToolsAstro creates a cosmic developer experience through a deep space aesthetic that balances technical precision with ethereal beauty. The brand uses a rich purple-to-navy gradient backdrop that evokes the mystery of deep space, while crisp white typography and clean geometric elements suggest the precision required for modern web development.
Design Identity
Signature Color
Cosmic Purple
#8B5CF6
Developer-focused innovation with a touch of magic - bridging technical capability with creative possibility
Visual Identity
The distinctive deep space gradient background combined with floating geometric elements and stark white typography creates an unmistakable cosmic-tech aesthetic that no other framework uses.
Component Style
Soft-rounded components with subtle transparency effects and gentle gradients. Buttons have approximately 8px border radius with clean fills, no heavy shadows - everything feels weightless and modern like floating UI elements in space.
Spacing Philosophy
Generous vertical rhythm with large 80-120px section gaps that create a sense of vastness, while maintaining intimate 16-24px spacing within component groups to keep related elements connected.
Design Principles
- Typography uses exactly 3 font families: Obviously for headlines, Inter for body text, system fonts for UI
- Background gradients always flow from deep blue to purple, never flat colors
- White text maintains stark contrast against dark backgrounds for maximum readability
- Border radius never exceeds 12px to maintain modern but not overly playful aesthetic
- Company logos are displayed in monochrome to maintain visual hierarchy
Target Audience
Senior frontend developers and technical decision-makers who appreciate both performance and aesthetic craft in their development tools
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 | 48px | 700 | 52.8px | |
| h2 | 36px | 300 | 40px | |
| h3 | 16px | 600 | 24px | |
| p | 18px | 200 | 27px | |
| a | 16px | 600 | 24px | |
| button | 16px | 300 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#264a89#17191e#23262d#81322b#094771#eef0f9#168659#3d4dff#26561c#ffffff
