Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Subway
FoodSubway's brand exudes appetite-driven warmth through its vibrant forest green and sunshine yellow palette, creating an approachable yet energetic fast-casual dining atmosphere. The custom 'Subway Sans' typography feels deliberately chunky and substantial, mirroring the hearty, satisfying nature of their submarine sandwiches.
Design Identity
Signature Color
Subway Forest Green
#008938
Fresh ingredients and healthy fast-casual positioning with approachable reliability
Visual Identity
The distinctive combination of forest green with golden yellow accents, paired with food-forward photography that showcases sandwich layers and fresh ingredients in high contrast lighting.
Component Style
Buttons are bold and chunky with moderate rounding (approximately 8px radius), featuring solid fills in signature green with strong contrast. Components feel substantial and finger-friendly, designed for quick mobile ordering with clear visual hierarchy.
Spacing Philosophy
Generous vertical spacing between major sections creates breathing room for food photography to dominate, while compact horizontal spacing keeps the interface efficient for mobile-first ordering workflows.
Design Principles
- Typography uses custom 'Subway Sans' exclusively across all weights and condensed variants
- Green buttons (#008938) are reserved for primary actions, yellow (#f2b700) for accents only
- Food photography always takes center stage with high contrast and appetizing close-ups
- Button text uses 18px SubwaySansCondMedium for maximum legibility
- Animation duration set to 1.5s for smooth but purposeful transitions
Target Audience
Busy professionals and families seeking convenient, customizable meal solutions who value perceived freshness over gourmet presentation
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 | 36px | 700 | 43.2px | |
| h2 | 36px | 400 | 47.16px | |
| h3 | 44px | 400 | 66px | |
| h4 | 18px | 500 | 24px | |
| p | 16px | 400 | 24px | |
| a | 16px | 400 | 24px | |
| button | 18px | 400 | 24.3px | |
| input | 26px | 400 | 39px | |
| nav | 16px | 400 | 24px |
Color Palette
#aaaaaa#00491e#008938#f2b700#000000#ffffff#007aff#ebebeb#f5f5f5
