website refactor

2026-01-17 02:32:34 +01:00
parent 6a49448e0a
commit 4d5ce9bfd6
43 changed files with 1642 additions and 2022 deletions
--- a/docs/THEME.md
+++ b/docs/THEME.md
@@ -1,141 +1,124 @@
-# GridPilot Theme — “Motorsport Infrastructure, Smoothly Engineered”
+🎨 GridPilot Dev Theme — “Precision Racing Minimal”

-*A precise, professional motorsport interface with premium smoothness — engineered for trust, control, and long-term use.*
+The core idea:
+A UI that feels like a race engineer’s dashboard — not a game launcher, not corporate SaaS.

---
+⸻

-## 1. Design Philosophy
+1. Identity & Mood

-GridPilot should feel like:
- **race control software**, not a game UI
- **infrastructure**, not a startup product
- **engineered**, not styled
- **stable and authoritative**, yet pleasant to use
- **built for years**, not trends
+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)

-The goal is not excitement.
-The goal is **confidence**.
+It appeals equally to:
+	•	Devs (clean, modular, readable components)
+	•	Gamers (immersive, familiar atmosphere)
+	•	Simracers (motorsport seriousness)

-Think:
-**“FIA race control x timing screens x modern tooling — with smooth interaction.”**
+⸻

---
+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:
- dark, neutral background
- minimal gradients (almost invisible)
- restrained highlights only for meaning
- strict hierarchy
- dense, readable layouts
- smooth transitions only where state changes
+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)

-Everything should look:
-**intentional, measured, and calm.**
+Everything should feel instrument-grade, not decorative.

---
+⸻

-### Color Palette (refined)
+3. Component Philosophy

- **Graphite Black:** `#0E0F11`
- **Panel Gray:** `#171A1E`
- **Border Gray:** `#22262A`
- **Primary Accent:** `#198CFF` (used sparingly)
- **Success Green:** `#6FE37A`
- **Warning Amber:** `#FFC556`
- **Critical Red:** `#E35C5C`
+Cards
+	•	Functional over flashy
+	•	Slight bevel or inset shadow (hint of cockpit panels)
+	•	Dense info, clean hierarchy

-No neon.  
-No playful colors.  
-Color = meaning, not decoration.
+Tables
+	•	High-density
+	•	Thin row dividers
+	•	Highlight on hover only
+	•	Telemetry-coded status colors

---
+Buttons
+	•	Flat by default
+	•	Glow + gradient only on hover
+	•	Snappy micro-animation (motorsport feedback)

-## 3. Motion & Interaction
+Modals
+	•	Soft frosted blur
+	•	Fast open/close animation
+	•	Dimmed pit-lane-lighting vibe

-### Animation Philosophy
-Motion exists only to:
- confirm an action
- show hierarchy
- indicate state change
+⸻

-Never to impress.
+4. Motion & Feedback

-### Characteristics:
- short durations (120–200ms)
- low amplitude
- no exaggerated easing
- no elastic bounces
- no decorative movement
+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 like a well-damped suspension — not a show car.**
+Devs should feel the UI is responsive, not playful.

---
+⸻

-## 4. Where Motion Is Allowed
+5. Layout Structure

- button press feedback
- panel open / close
- table row expansion
- state changes (pending → approved → completed)
- subtle loading indicators
+Think “Telemetry Workspace”:
+	•	Sidebar = dashboard rail
+	•	Header = control bar
+	•	Content = track map / data table zone
+	•	Right panel = session or context info

-If motion does not improve clarity → remove it.
+Everything modular, easily replaceable, easy to reason about.

---
+⸻

-## 5. What We Explicitly Avoid
+6. Tone for Dev-Facing Text
+	•	Short
+	•	Neutral
+	•	Calm
+	•	Technical
+	•	Real-world language (not corporate slang)

- hero animations
- animated backgrounds
- glowing UI chrome
- playful hover gimmicks
- “app store” aesthetics
- anything that reduces trust
+Examples:
+	•	“Add race”
+	•	“Review protest”
+	•	“Session updated”
+	•	“Export standings”
+	•	“Sponsor payout queued”

-GridPilot must feel:
-**reliable before it feels beautiful.**
+No hype. No marketing tone inside the app.

---
+⸻

-## 6. Components
+7. Emotional Target

-### Tables
- primary UI element
- dense, readable
- fixed column logic
- no playful effects
+Users should feel:
+	•	In control
+	•	Supported
+	•	Efficient
+	•	Connected to motorsport culture
+	•	Trusting (nothing looks cheap or gimmicky)

-### Cards
- functional grouping
- no visual dominance
- secondary to tables
+It’s basically:

-### Modals
- simple
- fast
- decisive
-
---
-
-## 7. Typography
-
- neutral sans-serif
- excellent numeric readability
- no personality fonts
-
-Primary goal:
-**information clarity, not brand expression.**
-
---
-
-## 8. Design Principle Summary
-
-GridPilot is:
- not gamer UI
- not esports branding
- not corporate SaaS
-
-It is:
-**modern motorsport infrastructure software.**
+“A premium cockpit dashboard… built by people who race and code.”