F1 Game Setup

Overview

F1 Game Setup is a precision-engineered platform for Formula 1 esports competitors and sim racing enthusiasts. It serves the high-performance gaming community by aggregating circuit-specific car setups, tuning guides, and performance baselines across all F1 2025 tracks. The aesthetic is **Motorsport Brutalism**—a fusion of raw technical data presentation with high-contrast, high-energy visual language. The UI evokes the intensity of a pit garage: dark, focused, with strategic pops of racing red (#ef1729) and accent yellows that command immediate attention. The emotional response is one of competence and urgency: users feel they're accessing insider knowledge, not browsing a casual gaming site.

The brand voice is direct, technical, and energetic—never flowery or apologetic. Vocabulary leans into racing terminology ("setup," "baseline," "circuit," "session") and esports precision ("compare," "optimize," "tune"). Tone is confident and peer-to-peer: the site speaks to users as fellow competitors, not novices. Example sentence in brand voice: "Jump into track-specific car setups and compare race and time trial baselines faster."

Colors

The color system is built around **high-contrast racing energy**. Primary (#ef1729, a vivid Ferrari red) is the signature accent—used exclusively on CTAs ("Accept all," "Register"), active navigation underlines, and focus states. This red appears with a 22% glow shadow (0 0 20px rgba(239, 23, 41, 0.22)) to create depth on the dark canvas. Secondary (#ff7a18, a warm orange-gold) supports data highlights and secondary actions, while tertiary (#2bc4ff, a bright cyan) provides technical accent for tertiary UI elements and data visualization. The surface stack is a deep, near-black progression: surface (#0a0e13) forms the base, surface-container (#171c22) lifts cards and panels, and surface-container-highest (#292c34) creates the topmost interactive layer. On-surface text is always #f8fafc (nea

Typography

The type system pairs **Formula1** (a geometric, ultra-bold sans-serif) for headlines, navigation, and labels with **Titillium Web** (a clean, modern humanist sans) for body copy and UI text. Formula1 at 900 weight and 66px size (display level) creates commanding hero statements with -0.04em letter-spacing to tighten the aggressive geometry. Body text uses Titillium Web at 16px / 400 weight / 24px line-height for readability over the dark background; this 1.5 line-height ratio prevents visual crowding. Labels use Formula1 at 14px / 900 weight with 0.05em tracking to create uppercase, punchy micro-copy (e.g., "F1 2025," "TRACKS LIST"). On small labels over busy backgrounds or dark surfaces, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. Headline-md (28px / 700 weight)

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px (container-max), centered with mx-auto. The hero section spans full-width with a 40px (lg spacing) vertical rhythm: 40px above the breadcrumb, 40px between the headline and body copy, 40px below the CTA group. Card grids use 24px (md spacing) gutters between items, collapsing to 12px (sm spacing) on mobile. White-space is aggressive and intentional—never cramped. Section separators use 64px (xl spacing) vertical margins to create breathing room between major content blocks. The container max-width of 1280px ensures that on ultra-wide displays, content doesn't stretch beyond comfortable reading width; on mobile, padding of 24px (gutter) on left/right maintains margin. Breadcrumb navigation uses 12px gaps between items, wi

Elevation & Depth

Depth is achieved through a **layered shadow and border system** rather than flat design. Level 1 (Base): the surface background (#0a0e13) with no shadow. Level 2 (Standard Card): surface-container (#171c22) with a 1px border at rgba(255, 255, 255, 0.08) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): surface-container-highest (#292c34) with a 1px border at rgba(255, 255, 255, 0.12) and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). Primary CTAs add an additional glow: box-shadow: 0 0 20px rgba(239, 23, 41, 0.22), creating a halo effect that draws the eye. On hover, the g

Shapes

The shape philosophy is **Technical Precision with Soft Edges**—a balance between the sharp geometry of racing and the approachability of modern UI. Buttons use 6px border-radius (rounded.md), a subtle curve that feels engineered rather than organic. Cards and input fields use 8px (rounded.lg) for slightly more breathing room. Navigation elements and badges use 12px (rounded.xl) to create a softer, more inviting feel. The full radius (9999px) is reserved for pill-shaped badges and toggle switches. The rationale: 6px is the minimum radius needed to avoid looking harsh on a dark background, whil

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background: {colors.primary} (#ef1729), text-color: white, padding: 8px 20px, height: 40px, border-radius: 6px, and font: Formula1 900 14px uppercase. On hover, transition the background to {colors.primary-container} (#d81223) over 200ms ease-in-out, and intensify the glow shadow from 0 0 20px to 0 0 28px rgba(216, 18, 35, 0.32). Active state darkens to #c40a1a. Secondary buttons use a transparent background with a 1px border at rgba(255, 255, 255, 0.2) and text-color: on-surface. On hover, the background becomes rgba(255, 255, 255, 0.08) and the border strengthens to rgba(255, 255, 255, 0.3). All button transitions use cubic-bezier(0.4, 0, 0.2, 1) for a snappy, technical feel.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use Formula1 font exclusively for headlines, labels, and CTAs—it's the brand signature and creates instant recognition.
• Do maintain the 1px border + shadow layer stack on all cards and elevated surfaces; this creates the technical depth that defines the aesthetic.
• Do apply the primary red (#ef1729) only to CTAs, active states, and focus indicators—overuse dilutes its impact.
• Do use 24px (md spacing) as the default gutter between cards and sections; this rhythm is the backbone of the layout.
• Do ensure all text on dark backgrounds meets WCAG AA contrast (16:1 for body text, 7:1 for large text); use #f8fafc for on-surface text.
• Do transition all interactive elements over 150–300ms with cubic-bezier(0.4, 0, 0.2, 1) for a snappy, technical feel.

**Don't**

• Don't use rounded corners above 12px except for full-radius badges; the brand loses precision and feels too soft.
• Don't apply shadows without a supporting border; the combination is what creates the layered depth—either both or neither.
• Don't use the secondary orange (#ff7a18) or tertiary cyan (#2bc4ff) as primary CTAs; they're supporting accents only.
• Don't mix Formula1 and Titillium Web at the same size/weight for the same element; use Formula1 for emphasis, Titillium for body.
• Don't exceed 1280px container width; the brand loses its focused, technical feel when content spreads too wide.
• Don't use pure black (#000) or pure white (#fff) for text; use #0a0e13 for backgrounds and #f8fafc for text to reduce eye strain on dark mode.