Implement app syle guide from the following specifications
AS MONACO BASKET - Design Style Guide
Color Palette
Primary Colors
| Color Name |
Hex Code |
Visual |
Usage |
| Primary Red |
#DA2F16 |
|
Main brand color, app bars, buttons |
| Secondary Red |
#A62818 |
|
Darker shade for gradients, headers |
| Tertiary Gold |
#D4AB37 |
|
Accent color, time pills, highlights |
Neutral Colors
| Color Name |
Hex Code |
Visual |
Usage |
| Black |
#000000 |
|
Text, icons |
| White |
#FFFFFF |
|
Backgrounds, text on dark surfaces |
| Light Gray |
#E0E0E0 |
|
Dividers, subtle backgrounds |
| Medium Gray |
#9E9E9E |
|
Unselected navigation items, secondary text |
Typography
The app uses the Montserrat font family.
Text Styles
| Style Name |
Font Size |
Weight |
Color |
Usage |
| Title Large |
24px |
Bold (700) |
Black |
Main headlines, app bar titles |
| Title Medium |
18px |
SemiBold (600) |
Black |
Section headers, important text |
| Title Small |
16px |
Bold (700) |
Black |
Card titles, emphasized text |
| Body Large |
16px |
Bold (700) |
Black |
Primary content text |
| Body Medium |
14px |
Regular (400) |
Black |
Standard body text |
| Body Small |
12px |
Regular (400) |
Black |
Secondary information, captions |
| Headline Large |
24-32px |
Bold (700) |
Varies |
Day numbers in game cards |
| Headline Medium |
20-24px |
Bold/Regular |
Varies |
Scores in game cards |
Special Text Styles
| Style |
Description |
| App Bar Title |
24px, Bold, White |
| Emphasis Text |
Body styles with FontWeight 600 (SemiBold) |
| Header Text |
Small caps for section headers (e.g., "LATEST RESULTS") |
| Winner Text |
Bold weight for winning team names and scores |
Spacing System
Standard Spacing Values
| Name |
Size |
Usage |
| XS |
4px |
Minimal spacing between tight elements |
| Small |
8px |
Standard spacing between related elements |
| Medium |
16px |
Spacing between distinct elements |
| Large |
24px |
Section padding, major element separation |
| XL |
32px |
Screen margins, major section breaks |
Common Spacing Patterns
| Component |
Spacing Pattern |
| Card Internal Padding |
16px to 24px |
| Screen Padding |
Horizontal 16px to 24px |
| Section Padding |
8px to 16px between sections |
| Icon + Text |
4px to 8px between icons and text |
| List Item Vertical |
16px top and bottom |
| Content Stacking |
8px to 16px between stacked elements |
Border Radius
| Component |
Radius |
| Standard Corners |
8px |
| Game Cards |
12px |
| Time/Date Pills |
12px |
| Buttons |
8px |
