---
name: Elite Stadium
colors:
surface: '#121414'
surface-dim: '#121414'
surface-bright: '#38393a'
surface-container-lowest: '#0c0f0f'
surface-container-low: '#1a1c1c'
surface-container: '#1e2020'
surface-container-high: '#282a2b'
surface-container-highest: '#333535'
on-surface: '#e2e2e2'
on-surface-variant: '#e4bebc'
inverse-surface: '#e2e2e2'
inverse-on-surface: '#2f3131'
outline: '#ab8987'
outline-variant: '#5b403f'
surface-tint: '#ffb3b1'
primary: '#ffb3b1'
on-primary: '#680011'
primary-container: '#ff535b'
on-primary-container: '#5b000e'
inverse-primary: '#bb152c'
secondary: '#c9c6c5'
on-secondary: '#313030'
secondary-container: '#4a4949'
on-secondary-container: '#bab8b7'
tertiary: '#ffb4aa'
on-tertiary: '#690003'
tertiary-container: '#ff5447'
on-tertiary-container: '#5c0002'
error: '#ffb4ab'
on-error: '#690005'
error-container: '#93000a'
on-error-container: '#ffdad6'
primary-fixed: '#ffdad8'
primary-fixed-dim: '#ffb3b1'
on-primary-fixed: '#410007'
on-primary-fixed-variant: '#92001c'
secondary-fixed: '#e5e2e1'
secondary-fixed-dim: '#c9c6c5'
on-secondary-fixed: '#1c1b1b'
on-secondary-fixed-variant: '#474646'
tertiary-fixed: '#ffdad5'
tertiary-fixed-dim: '#ffb4aa'
on-tertiary-fixed: '#410001'
on-tertiary-fixed-variant: '#930007'
background: '#121414'
on-background: '#e2e2e2'
surface-variant: '#333535'
typography:
display-lg:
fontFamily: Anton
fontSize: 72px
fontWeight: '400'
lineHeight: '1.1'
letterSpacing: 0.02em
headline-lg:
fontFamily: Anton
fontSize: 48px
fontWeight: '400'
lineHeight: '1.2'
headline-lg-mobile:
fontFamily: Anton
fontSize: 32px
fontWeight: '400'
lineHeight: '1.2'
headline-md:
fontFamily: Anton
fontSize: 24px
fontWeight: '400'
lineHeight: '1.3'
body-lg:
fontFamily: Be Vietnam Pro
fontSize: 18px
fontWeight: '400'
lineHeight: '1.6'
body-md:
fontFamily: Be Vietnam Pro
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
label-stats:
fontFamily: Space Grotesk
fontSize: 14px
fontWeight: '700'
lineHeight: '1'
letterSpacing: 0.1em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
base: 4px
gutter: 24px
margin-mobile: 16px
margin-desktop: 64px
container-max: 1280px
---
## Brand & Style
The design system is engineered to evoke the high-octane atmosphere of a floodlit football stadium at night. The brand personality is aggressive, premium, and authoritative, targeting passionate football fans who demand real-time data and cinematic content.
The visual style is **High-Contrast / Bold** with an emphasis on "Dark Mode" as the default state. It leverages heavy blacks and vibrant reds to create a sense of urgency and prestige. The aesthetic incorporates subtle neon glows and razor-sharp typography to simulate the look of professional sports broadcasting and high-end automotive telemetry.
## Colors
The palette is anchored by **Deep Black (#0A0A0A)**, providing a high-depth background that allows content to pop. **Vibrant Red (#E63946)** serves as the primary action color, used for critical calls to action and live indicators.
A secondary **Neon Red (#FF0015)** is reserved for interactive states, such as hover glows and active "Live" badges, creating a sense of energy and light emission. Neutrals are kept crisp, using pure white for primary headlines and light grays for metadata to maintain high legibility against the dark canvas.
## Typography
This design system utilizes a tiered typography strategy to balance impact with data density. **Anton** is the display powerhouse; its tall, condensed forms mimic sports headlines and jersey numbering, providing instant brand recognition.
**Be Vietnam Pro** is used for body text and descriptive content. It offers excellent legibility for Arabic and Latin scripts alike, maintaining a modern and friendly yet professional tone. For technical data—such as match scores, league tables, and timing—**Space Grotesk** provides a futuristic, geometric precision that ensures numbers are distinct and legible at small sizes.
## Layout & Spacing
The layout follows a **Fixed Grid** model on desktop to maintain a premium, editorial feel, transitioning to a flexible fluid model on mobile. A 12-column system is used for the dashboard and news feeds, while match cards are designed on a modular sub-grid.
Spacing follows a strict 4px base unit. Wide gutters (24px) are used to prevent the dark UI from feeling cramped. On mobile, margins are tightened to 16px to maximize screen real estate for live scores and video content.
## Elevation & Depth
In this dark-themed design system, depth is communicated through **Tonal Layers** and **Glows** rather than traditional shadows.
1. **Base Layer:** The deepest layer (#0A0A0A) acts as the stadium floor.
2. **Surface Layer:** Cards and containers use a slightly lighter (#1A1A1A) fill to separate from the background.
3. **Accent Elevation:** Interactive elements utilize a **Neon Red Outer Glow**. This "active light" effect (0px blur, 4px spread in primary red at 20% opacity) simulates the high-energy lighting of a sports arena.
4. **Borders:** Subtle, low-contrast borders (1px, 10% white) are used on all cards to define boundaries without adding visual bulk.
## Shapes
The design system employs a **Rounded (2)** shape language, specifically utilizing a 1.5rem (24px) radius for large containers and cards to create a modern, high-end feel. This softness contrasts with the aggressive, sharp typography, creating a balanced and sophisticated visual rhythm.
Smaller elements like buttons and chips follow a standard 0.5rem radius, while "Live" indicators and status tags use fully pill-shaped (rounded-full) geometry to stand out.
## Components
### Match Cards
Match cards must reflect three distinct states:
* **Live:** Features a pulsing red "LIVE" indicator and a Neon Red border glow.
* **Upcoming:** Displays high-contrast kickoff times and a "Remind Me" CTA.
* **Finished:** Uses desaturated typography for scores and a "Watch Highlights" primary CTA.
### Video Player
The video container is a deep black frame with a 2xl corner radius. Controls are minimal and translucent, appearing only on hover. The progress bar uses the primary Vibrant Red.
### League Table Rows
Rows are designed for high data density. They use Space Grotesk for numbers and subtle alternating tonal backgrounds (zebra striping) for readability. The "Team Name" column remains sticky on mobile.
### News Cards
Images use a dark gradient overlay (bottom-to-top) to ensure white headlines remain legible. On hover, the image scales slightly (1.05x) and the Vibrant Red accent line at the bottom expands.
### Bottom Navigation (Mobile)
A fixed-position blur-effect bar (Glassmorphism) with 80% opacity. Active icons are highlighted with a small red dot underneath and a change to the primary red color.
تعليقات
إرسال تعليق