Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Raycast
ProductivityRaycast embodies a dark, technical sophistication with an almost obsidian-deep background that creates dramatic contrast with vibrant red-to-cyan gradient accents. The typography feels developer-focused yet approachable, with generous whitespace that lets the dynamic gradient geometries breathe and command attention.
Design Identity
Signature Color
Raycast Crimson
#ff4757
urgent productivity energy that cuts through the darkness - commanding attention while maintaining technical credibility
Visual Identity
The distinctive diagonal gradient tubes in red-to-cyan that create a 3D ribbon effect against the deep black background - these organic, flowing forms contrast sharply with typical geometric tech designs.
Component Style
Subtle rounded corners at 6px with medium font weights, buttons feel substantial but not heavy. Components have gentle curves rather than sharp edges, creating approachability within the technical darkness. No harsh shadows, relying on subtle borders and background variations.
Spacing Philosophy
Generous macro spacing with 32px grid gaps creates breathing room around hero content, while conservative micro spacing keeps UI elements cohesive. The layout feels expansive yet controlled, with plenty of negative space amplifying the gradient focal point.
Design Principles
- Border radius stays at 6px for consistent gentle curves
- Background layers use incremental darkness: #07080a, #101111, #18191a
- Typography relies on Inter at 16px body, 64px headlines with 600 weight
- Grid spacing maintains 32px gaps for visual rhythm
- Gradients always flow diagonally to create dynamic energy
Target Audience
Power users and developers who want sophisticated productivity tools - people who appreciate dark interfaces and value both performance and visual craft in their daily workflows.
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 | 18.4px | |
| h1 | 64px | 600 | 70.4px | |
| h2 | 20px | 500 | normal | |
| h3 | 24px | 500 | normal | |
| h4 | 24px | 500 | 38.4px | |
| h5 | 18px | 400 | normal | |
| p | 18px | 400 | normal | |
| a | 16px | 400 | 18.4px | |
| button | 12px | 400 | 13.8px | |
| input | 14px | 500 | 16.1px |
Color Palette
#07080a#101111#18191a#313133#494b4d#c2c7ca#78787c#5e6366#0d0d0d#121212
