Elofoot

Overview

Elofoot is an AI-powered football prediction platform that transforms complex match data into coherent, actionable insights. The design system embodies 'High-Contrast Data Minimalism'—a philosophy that prioritizes clarity and precision through a pure black canvas (rgb(0, 0, 0)) with a vibrant emerald-green accent (rgb(0, 231, 146)) that signals interactivity and confidence. The brand serves serious tipsters, data analysts, and casual fans who demand accuracy without distraction. The visual language is austere yet energetic: every pixel serves the data, every interaction confirms the AI's decisiveness.

The tone is direct, confident, and data-literate. Elofoot speaks in probabilities and patterns, never hype. Example: 'Three World Cup ties, already cracked.' The vocabulary avoids marketing fluff—instead of 'powerful insights,' the copy says 'coherent 1X2 probabilities' and 'xG, form, line-ups.' The brand personality is that of a trusted analyst: precise, calm, and unafraid to show its work.

Colors

The color system is built on a stark contrast model: pure black (rgb(0, 0, 0)) as the dominant surface, with white (rgb(255, 255, 255)) for primary text. The primary accent is an electric emerald green (#00e792 / rgb(0, 231, 146)), used exclusively for call-to-action buttons, interactive states, and key data highlights. This green is the only warm, saturated color on the page—it commands attention and signals 'click here' or 'this is live data.' Secondary accents include a deep purple (#854dff) for secondary interactions and a gold (#ffd700) for tertiary highlights. The surface stack uses near-black grays (surface-container: #1a1a1a, surface-container-high: #2a2a2a) to create subtle depth without breaking the dark aesthetic. Status colors follow semantic conventions: success uses hsl(143,

Typography

The type system is built on Inter, a geometric sans-serif that conveys precision and modernity. Display (72px, 600 weight, -0.02em tracking) anchors hero sections with maximum impact; headline-lg (40px, 600 weight) breaks up content sections; body-md (16px, 400 weight, 24px line-height) ensures readability on dark backgrounds. The hierarchy is strict: no more than three type sizes per page section. All labels use 600 weight (label-md: 14px, label-sm: 12px) to ensure buttons and badges read as interactive. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (label-sm) when layered over busy hero imagery to maintain legibility. Letter-spacing is tightened on display sizes (-0.02em) to convey confidence and density; body text uses 0em spacing for neutral reada

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on desktop. The page uses a fluid, full-width hero section (100vw) with a dark background image overlay, then transitions to a contained content area with 24px gutters on desktop and 12px on mobile. Spacing is semantic: lg (40px) separates major sections (hero to features, features to testimonials); md (24px) separates cards within a section; sm (12px) separates list items or inline elements. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is generous but purposeful—the dark background means negative space reads as 'breathing room' rather than emptiness. The grid is invisible but strict: all cards, buttons, and text blocks align to 8px increments (the u

Elevation & Depth

Depth is conveyed through subtle shadows and surface-container layering rather than dramatic drop shadows. Level 1 (Base): pure black background (rgb(0, 0, 0)) with no shadow. Level 2 (Standard Card): surface-container (#1a1a1a) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) and a 1px border at rgba(255, 255, 255, 0.05). Level 3 (Elevated/Modal): surface-container-high (#2a2a2a) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) and a 1px border at rgba(255, 255, 255, 0.1). Hover states lift cards by increasing the shadow to 0 8px 24px rgba(0, 0, 0, 0.45) and shifting the background to surface-co

Shapes

The shape philosophy is 'Precision with Softness'—sharp enough to feel technical, rounded enough to feel approachable. Buttons use full rounded (border-radius: 9999px) to signal 'click me' with maximum affordance; cards use lg (12px) for a balanced, modern look; inputs use DEFAULT (6px) for subtle definition; chips use full (9999px) to match buttons. The rationale: full-rounded buttons and chips are the most clickable shapes in modern UI, signaling interactivity at a glance. Cards at 12px feel contemporary without being trendy. Inputs at 6px are just rounded enough to soften the hard edges of

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary uses the full primary green (#00e792) background with dark text (rgb(0, 26, 16)), 12px vertical padding, 28px horizontal padding, and full border-radius (9999px). On hover, the background shifts to primary-fixed-dim (#00b366) with a 200ms ease transition. The button-secondary is transparent with a 1px border in primary green and green text; on hover, it gains a 10% opacity green background (rgba(0, 231, 146, 0.1)). Both buttons use label-md typography (14px, 600 weight) for maximum legibility. Button-ghost is used for tertiary actions (e.g., 'Skip to content'); it has transparent background, on-surface text, and a subtle hover state (rgba(255, 255, 255, 0.08) background). All buttons have a minimum height

Do's and Don'ts

**Do**

• Do use the primary green (#00e792) exclusively for CTAs, focus states, and live data indicators—it's the only warm accent and must remain distinctive.
• Do maintain the pure black background (rgb(0, 0, 0)) as the canvas; use surface-container grays only for cards and elevated surfaces.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels over hero imagery to ensure readability.
• Do use full border-radius (9999px) for all buttons and chips to maximize affordance and signal interactivity.
• Do transition all interactive states (hover, focus, active) over 200ms with ease timing to create a responsive, polished feel.
• Do use the semantic spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) consistently—never invent intermediate values.

**Don't**

• Don't use the primary green for backgrounds or large surface areas—reserve it for interactive elements only.
• Don't add drop shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.5))—the dark background makes large shadows feel heavy.
• Don't mix rounded values; stick to the defined scale (sm: 4px, DEFAULT: 6px, md: 8px, lg: 12px, xl: 16px, full: 9999px).
• Don't use system fonts; always specify Inter from Google Fonts or @font-face to maintain brand consistency.
• Don't apply transitions longer than 300ms on interactive elements—the brand feels fast and decisive.
• Don't use opacity-based text on dark backgrounds below 80% opacity; it becomes hard to read. Use the on-surface or on-surface-variant colors instead.