Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
On Running
FashionOn Running's aesthetic balances athletic performance with Swiss precision through a stark monochromatic palette punctuated by electric blue accents. The typography mixing their custom 'On' font with monospace creates a technical, engineering-focused voice that speaks to serious athletes who value data-driven performance.
Design Identity
Signature Color
On Electric Blue
#007aff
High-performance energy and technical precision - the spark of athletic breakthrough
Visual Identity
The dramatic contrast between ultra-clean white typography overlaid on gritty, real-world athletic photography creates an unmistakable tension between laboratory precision and street performance.
Component Style
Buttons use monospace typography with medium weight for technical precision, clean backgrounds with subtle rounded corners. Everything feels engineered rather than designed - functional over decorative with crisp edges and no unnecessary shadows.
Spacing Philosophy
Generous whitespace around hero typography creates breathing room for the eye, while the layout maintains Swiss-inspired precision with structured alignment. The negative space feels intentional and performance-oriented.
Design Principles
- Typography never exceeds 3 font families: On, On Mono, and system fallbacks
- Monospace fonts reserved for interactive elements and technical information
- Photography always shows real athletic movement, never staged poses
- White text on photography for maximum contrast and legibility
- Electric blue used sparingly as the only bright accent color
Target Audience
Serious recreational runners and performance athletes who treat running as both sport and science, valuing technical innovation over fashion trends
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 | 49.6408px | 700 | 54.6049px | |
| h2 | 49.6408px | 700 | 54.6049px | |
| h3 | 20px | 400 | 20px | |
| p | 30.836px | 400 | 40.0868px | |
| a | 16px | 400 | 16px | |
| button | 14px | 500 | 14px | |
| input | 16px | 400 | 16px | |
| nav | 16px | 400 | 16px | |
| header | 16px | 400 | 16px |
Color Palette
#007aff
