diff --git a/apps/website/templates/layout/GlobalFooterTemplate.tsx b/apps/website/templates/layout/GlobalFooterTemplate.tsx
index cfdd14b19..6b990091a 100644
--- a/apps/website/templates/layout/GlobalFooterTemplate.tsx
+++ b/apps/website/templates/layout/GlobalFooterTemplate.tsx
@@ -1,77 +1,45 @@
-import { AppFooter } from '@/components/app/AppFooter';
-import { Grid } from '@/ui/Grid';
+import { Surface } from '@/ui/Surface';
+import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
-import { BrandMark } from '@/ui/BrandMark';
import { Box } from '@/ui/Box';
+import { BrandMark } from '@/ui/BrandMark';
export interface GlobalFooterViewData {}
export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
return (
-
-
-
-
+
+
+
+
+ {/* Left: Identity */}
+
-
-
-
- INFRASTRUCTURE
-
-
-
-
-
- The professional infrastructure for serious sim racing.
- Precision telemetry, automated results, and elite league management.
+
+ // Infrastructure
-
-
-
- PLATFORM
-
-
-
- Leagues
-
-
-
-
- Teams
-
-
-
-
- Leaderboards
-
-
+
+ {/* Center: Technical Links */}
+
+ LEAGUES
+ TEAMS
+ DOCUMENTATION
-
-
-
- SUPPORT
-
-
-
- Documentation
-
-
-
-
- System Status
-
-
-
-
- Contact
-
-
+
+ {/* Right: System Status */}
+
+
+
+ SYSTEM NOMINAL
+
+ v1.0.0
-
-
-
+
+
+
+
);
}
diff --git a/apps/website/templates/layout/RootAppShellTemplate.tsx b/apps/website/templates/layout/RootAppShellTemplate.tsx
index 6eb17b22b..20b8f18f2 100644
--- a/apps/website/templates/layout/RootAppShellTemplate.tsx
+++ b/apps/website/templates/layout/RootAppShellTemplate.tsx
@@ -41,16 +41,17 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
-
+
{showSidebar && }
-
+
{children}
-
+
+
);
}
diff --git a/apps/website/ui/ContentViewport.tsx b/apps/website/ui/ContentViewport.tsx
index fc79472ca..273088274 100644
--- a/apps/website/ui/ContentViewport.tsx
+++ b/apps/website/ui/ContentViewport.tsx
@@ -21,11 +21,9 @@ export const ContentViewport = ({
};
return (
-
-
-
- {children}
-
+
+
+ {children}
);
diff --git a/docs/THEME.md b/docs/THEME.md
index 3f712c85e..cad4698e7 100644
--- a/docs/THEME.md
+++ b/docs/THEME.md
@@ -1,140 +1,134 @@
-🎨 GridPilot Dev Theme — “Precision Racing Minimal”
+🎨 GridPilot Theme — “Precision Racing Minimal”
-The core idea:
-A UI that feels like a race engineer’s dashboard — not a game launcher, not corporate SaaS.
+A clean, modern racing interface that feels like a cockpit dashboard — calm, sharp, and serious.
⸻
1. Identity & Mood
-The theme should communicate:
- • Precision (like telemetry screens)
- • Calm intensity (the feeling before a qualifying lap)
- • Authority without ego (used by serious racers)
- • Modern minimalism (dev-friendly, clean structure)
- • Soft gaming hints (subtle neon touches, not RGB vomit)
+GridPilot should feel like:
+ • a real motorsport instrument, not a game launcher
+ • calm and focused, like the moment before a qualifying lap
+ • precise, like a telemetry screen
+ • modern and minimal, without visual noise
+ • slightly futuristic, but never “RGB gamer chaos”
-It appeals equally to:
- • Devs (clean, modular, readable components)
- • Gamers (immersive, familiar atmosphere)
- • Simracers (motorsport seriousness)
+It should appeal equally to sim racers, gamers, and casual fans.
⸻
-2. Visual Language
+2. Visual Style
-Primary Look
- • Dark, matte surfaces
- • Thin, crisp separators
- • Soft glow accents in blue / cyan / purple
- • Avoid aggressive neon or gamer-overload
- • Subtle gradient tints (barely visible)
+Core Aesthetic
+ • matte dark surfaces
+ • thin, crisp separators
+ • soft blue/cyan glows on interaction
+ • no aggressive neon
+ • subtle gradients for depth
+ • everything feels instrument-grade, not decorative
Color System
- • Base: Near-black graphite (#0C0D0F)
- • Surface: Deep charcoal (#141619)
- • Outline: Soft steel grey (#23272B)
- • Primary Accent: Electric blue (#198CFF)
- • Telemetry Accent: Aqua (#4ED4E0)
- • Warning: Motorsport amber (#FFBE4D)
+ • Graphite Black — base background
+ • Charcoal — panel surfaces
+ • Steel Grey — separators & outlines
+ • Electric Blue — primary actions
+ • Telemetry Aqua — interactive highlights
+ • Motorsport Amber — warnings & signals
-Everything should feel instrument-grade, not decorative.
+Colors should feel like motorsport, not corporate SaaS.
⸻
-3. Component Philosophy
+3. Components & Interaction
-Cards
- • Functional over flashy
- • Slight bevel or inset shadow (hint of cockpit panels)
- • Dense info, clean hierarchy
+Panels & Cards
+ • slightly inset or raised
+ • reminiscent of cockpit modules
+ • structured and clean
Tables
- • High-density
- • Thin row dividers
- • Highlight on hover only
- • Telemetry-coded status colors
+ • information-dense
+ • instantly scannable
+ • light hover highlights
+ • telemetry-style status colors
Buttons
- • Flat by default
- • Glow + gradient only on hover
- • Snappy micro-animation (motorsport feedback)
+ • flat by default
+ • glow only on hover
+ • snappy, “race-engineer” response speed
Modals
- • Soft frosted blur
- • Fast open/close animation
- • Dimmed pit-lane-lighting vibe
+ • soft frosted blur
+ • fast open/close
+ • subtle pit-lane lighting vibes
⸻
4. Motion & Feedback
-Racing-inspired, but minimal:
- • Short accelerations (fast ease-out)
- • No bounces — this isn’t a game store
- • Hover = slight lift + color pulse
- • Loading = progress line (like pit limiter light)
- • Switching tabs = sliding underline (chicane motion)
+Motion should feel racing-inspired:
+ • short, crisp animations
+ • no bounce or playful movement
+ • hover = slight lift + color pulse
+ • loading = a thin progress line (pit limiter style)
+ • tab switching = sliding underline (chicane motion)
-Devs should feel the UI is responsive, not playful.
+Responsive, not playful.
⸻
5. Layout Structure
-Think “Telemetry Workspace”:
- • Sidebar = dashboard rail
- • Header = control bar
- • Content = track map / data table zone
- • Right panel = session or context info
+Think Telemetry Workspace:
+ • Sidebar → control rail
+ • Header → context + session controls
+ • Main Area → race tables, session details, track maps
+ • Right Panel → contextual info, drivers, actions
-Everything modular, easily replaceable, easy to reason about.
+Everything modular, readable, and effortless to navigate.
⸻
-6. Tone for Dev-Facing Text
- • Short
- • Neutral
- • Calm
- • Technical
- • Real-world language (not corporate slang)
+6. Tone & Copywriting
+
+The product tone is:
+ • calm
+ • concise
+ • direct
+ • technical but human
+ • zero hype
Examples:
- • “Add race”
- • “Review protest”
- • “Session updated”
- • “Export standings”
- • “Sponsor payout queued”
+ • “Race added.”
+ • “Standings updated.”
+ • “Session ready.”
+ • “Review protest.”
+ • “Sponsor payout queued.”
-No hype. No marketing tone inside the app.
+Never corporate. Never salesy. Never loud.
⸻
-7. Emotional Target
+7. Emotional Experience
Users should feel:
- • In control
- • Supported
- • Efficient
- • Connected to motorsport culture
- • Trusting (nothing looks cheap or gimmicky)
+ • in control
+ • supported
+ • efficient
+ • connected to motorsport culture
+ • confident in the system
-It’s basically:
+A disciplined, trustworthy tool — not a flashy app.
-“A premium cockpit dashboard… built by people who race and code.”
⸻
-8. UI Layering & Primitives
+8. Overall Vibe
-To maintain architectural integrity and prevent "div wrapper" abuse, we enforce a strict layering boundary:
+“A premium cockpit dashboard — for people who actually race.”
+ • minimal
+ • precise
+ • clean
+ • serious
+ • attractive without noise
-### Semantic UI (`apps/website/ui/`)
-- **Building blocks for components**: `Card`, `Panel`, `Button`, `Table`, `Stack`, `Grid`.
-- **Restricted flexibility**: Semantic layout components (like `Stack`, `Grid`) are restricted to layout-only props. They do NOT allow styling props (bg, border, etc.).
-- **Public API**: These are the only UI elements that should be imported by `components/` or `pages/`.
-
-### Components (`apps/website/components/`)
-- **Domain-specific**: `RecentRacesPanel`, `DriverCard`, `LeagueHeader`.
-- **No raw HTML**: Components must use semantic UI elements. Direct use of raw HTML tags is forbidden.
-
-**Rule of thumb**: If you need a styled container in a component, use `Panel` or `Card`. If you need a new type of styled container, create it in `ui/` using primitives.
+A tool you’re happy to use, because it respects your time and your craft.
\ No newline at end of file