Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Noon
E-commerceNoon creates an energetic, Middle Eastern e-commerce experience with vibrant yellow as the dominant backdrop, paired with playful product carousels and bold call-to-action buttons. The design feels bustling and opportunity-rich, like a digital souk where deals are abundant and shopping is celebratory.
Design Identity
Signature Color
Noon Sunshine Yellow
#FEEF00
optimistic commerce energy and Middle Eastern marketplace vibrancy
Visual Identity
The unmistakable bright yellow header combined with dense product carousels and percentage-off badges creates a festival-like shopping atmosphere that screams 'deals and excitement'
Component Style
Rounded corners at 8px with soft shadows, pill-shaped buttons with bold colors, and card-based product displays that feel approachable and finger-friendly for mobile commerce
Spacing Philosophy
Compact vertical spacing maximizes product visibility while generous horizontal padding in the yellow header creates breathing room around navigation elements
Design Principles
- Border radius consistently 8px for large components
- Typography uses Figtree with weights 400, 600, and 700 only
- Yellow header remains fixed with high contrast navigation
- Product cards use subtle shadows (1px 2px 12px 2px #00000012)
- Category icons are large and immediately recognizable
Target Audience
Middle Eastern families and young professionals seeking deals on everything from electronics to fashion with mobile-first shopping habits
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 | 14px | 400 | 19.6px | |
| h1 | 16px | 700 | 22.4px | |
| h2 | 24px | 700 | 33.6px | |
| h3 | 16px | 700 | 22.4px | |
| h4 | 14px | 600 | 19.6px | |
| p | 13.0004px | 700 | 18.2006px | |
| a | 14px | 600 | 21px | |
| button | 12px | 700 | 16.8px | |
| input | 16px | 400 | 22.4px | |
| header | 14px | 400 | 19.6px |
Color Palette
#eaf0e6#dadce3#008200#eff7ff#ca8b58#241afc#3e72f7#fff8ec#ebebeb#eceef4#e8edfb#9ba0b1
