wip
This commit is contained in:
270
docs/THEME.md
270
docs/THEME.md
@@ -1,229 +1,141 @@
|
||||
# GridPilot Theme — “Smooth Performance Dark”
|
||||
*A modern, ultra-polished, buttery-smooth interface that feels engineered, premium, and joyful — without losing the seriousness of sim racing.*
|
||||
# GridPilot Theme — “Motorsport Infrastructure, Smoothly Engineered”
|
||||
|
||||
*A precise, professional motorsport interface with premium smoothness — engineered for trust, control, and long-term use.*
|
||||
|
||||
---
|
||||
|
||||
# 1. Design Philosophy
|
||||
## 1. Design Philosophy
|
||||
|
||||
GridPilot should feel like:
|
||||
- **a precision instrument**, not a toy
|
||||
- **a premium dashboard**, not a corporate SaaS page
|
||||
- **smooth and responsive**, not flashy
|
||||
- **crafted**, not overdesigned
|
||||
- **racing-inspired**, not gamer-edgy
|
||||
- **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
|
||||
|
||||
It combines:
|
||||
- the readability & seriousness of motorsport tools
|
||||
- with the soft, fluid, polished feel of a high-end app
|
||||
The goal is not excitement.
|
||||
The goal is **confidence**.
|
||||
|
||||
Think:
|
||||
**"iRacing x Apple UI x Motorsport telemetry aesthetics"**.
|
||||
**“FIA race control x timing screens x modern tooling — with smooth interaction.”**
|
||||
|
||||
---
|
||||
|
||||
# 2. Visual Style
|
||||
## 2. Visual Style
|
||||
|
||||
### Core Aesthetic:
|
||||
- dark, matte background
|
||||
- soft gradients (subtle, not neon)
|
||||
- elegant glows only where needed
|
||||
- crisp typography
|
||||
- generous spacing
|
||||
- smooth UI hierarchy transitions
|
||||
- layer depth through blur + shadow stacking (but tasteful)
|
||||
- dark, neutral background
|
||||
- minimal gradients (almost invisible)
|
||||
- restrained highlights only for meaning
|
||||
- strict hierarchy
|
||||
- dense, readable layouts
|
||||
- smooth transitions only where state changes
|
||||
|
||||
### Color Palette:
|
||||
- **Deep Graphite:** `#0E0F11` (main background)
|
||||
- **Iron Gray:** `#181B1F` (cards & panels)
|
||||
- **Charcoal Outline:** `#22262A` (borders)
|
||||
- **Primary Blue:** `#198CFF` (accents, active states)
|
||||
- **Performance Green:** `#6FE37A` (success)
|
||||
- **Warning Amber:** `#FFC556` (markers)
|
||||
- **Subtle Neon Aqua:** `#43C9E6` (interactive glow effects)
|
||||
|
||||
Colors are **precise**, not noisy.
|
||||
Everything should look:
|
||||
**intentional, measured, and calm.**
|
||||
|
||||
---
|
||||
|
||||
# 3. Animation Philosophy — “Buttery Smooth, Never Distracting”
|
||||
### Color Palette (refined)
|
||||
|
||||
Animations in GridPilot should:
|
||||
- feel like a **fast steering rack**: sharp + controlled
|
||||
- feel **premium**, not “flashy”
|
||||
- be **motivated**, not ornamental
|
||||
- communicate **state change** clearly
|
||||
- **Graphite Black:** `#0E0F11`
|
||||
- **Panel Gray:** `#171A1E`
|
||||
- **Border Gray:** `#22262A`
|
||||
- **Primary Accent:** `#198CFF` (used sparingly)
|
||||
- **Success Green:** `#6FE37A`
|
||||
- **Warning Amber:** `#FFC556`
|
||||
- **Critical Red:** `#E35C5C`
|
||||
|
||||
**Animation Style:**
|
||||
- low-spring, high-damping motion
|
||||
- small distances, high velocity
|
||||
- micro-easing, Apple-like rebound
|
||||
- intelligent inertia
|
||||
- zero stutter
|
||||
|
||||
**Target vibe:**
|
||||
> “Everything feels alive and responsive, like the UI wants to race with you.”
|
||||
No neon.
|
||||
No playful colors.
|
||||
Color = meaning, not decoration.
|
||||
|
||||
---
|
||||
|
||||
# 4. Where Animations Should Shine
|
||||
## 3. Motion & Interaction
|
||||
|
||||
### ✔ Hover Interactions
|
||||
Buttons + cards get:
|
||||
- subtle upscale (`1.0 → 1.03`)
|
||||
- color bloom
|
||||
- ambient glow (low opacity, soft spread)
|
||||
### Animation Philosophy
|
||||
Motion exists only to:
|
||||
- confirm an action
|
||||
- show hierarchy
|
||||
- indicate state change
|
||||
|
||||
### ✔ Page Transitions
|
||||
- fade + slide (30–50px)
|
||||
- layered parallax for content panels
|
||||
- 150–250ms total
|
||||
Never to impress.
|
||||
|
||||
Feels warm, inviting, non-static.
|
||||
### Characteristics:
|
||||
- short durations (120–200ms)
|
||||
- low amplitude
|
||||
- no exaggerated easing
|
||||
- no elastic bounces
|
||||
- no decorative movement
|
||||
|
||||
### ✔ Filters & Tabs
|
||||
- sliding underline indicator
|
||||
- smooth kinetic scrolling
|
||||
- minimal ripple or highlight
|
||||
|
||||
### ✔ Dialogs & Panels
|
||||
- spring pop (`scale 0.96 → 1`)
|
||||
- soft drop shadow expansion
|
||||
- background blur fade-in
|
||||
|
||||
### ✔ Table Row Expand / Collapse
|
||||
- height transition: 150ms
|
||||
- opacity fade-in: 120ms
|
||||
- chevron rotation: 180ms
|
||||
|
||||
Feels like unfolding technical data — perfect for racing nerds.
|
||||
|
||||
### ✔ Notifications
|
||||
- slide-in from top right
|
||||
- friction-based deceleration
|
||||
- micro-bounce at rest state
|
||||
**Motion should feel like a well-damped suspension — not a show car.**
|
||||
|
||||
---
|
||||
|
||||
# 5. What NOT to animate
|
||||
## 4. Where Motion Is Allowed
|
||||
|
||||
To avoid becoming “too modern = startup SaaS = untrustworthy”:
|
||||
- button press feedback
|
||||
- panel open / close
|
||||
- table row expansion
|
||||
- state changes (pending → approved → completed)
|
||||
- subtle loading indicators
|
||||
|
||||
**No:**
|
||||
- giant hero animations
|
||||
- unnecessary motion in typography
|
||||
- floating shapes / illustration wobble
|
||||
- confetti / particle effects
|
||||
- autoplay video backgrounds
|
||||
- mobile-app style “over cute” transitions
|
||||
If motion does not improve clarity → remove it.
|
||||
|
||||
---
|
||||
|
||||
## 5. What We Explicitly Avoid
|
||||
|
||||
- hero animations
|
||||
- animated backgrounds
|
||||
- glowing UI chrome
|
||||
- playful hover gimmicks
|
||||
- “app store” aesthetics
|
||||
- anything that reduces trust
|
||||
|
||||
GridPilot must feel:
|
||||
**professional → premium → but still understated.**
|
||||
**reliable before it feels beautiful.**
|
||||
|
||||
---
|
||||
|
||||
# 6. Component Design Rules
|
||||
|
||||
### Cards
|
||||
- slightly rounded (6–8px)
|
||||
- soft shadow (blur 20–28px)
|
||||
- subtle ambient noise texture (optional)
|
||||
- gentle hover glow
|
||||
|
||||
### Buttons
|
||||
- pill shape (but not too round)
|
||||
- glossy gradient *only when hovered*
|
||||
- laser-sharp outline on active state
|
||||
- fast press down animation (`75ms`)
|
||||
## 6. Components
|
||||
|
||||
### Tables
|
||||
- high-density, readable
|
||||
- animated sort indicators
|
||||
- fade-in rows on update
|
||||
- highlight row on hover
|
||||
- primary UI element
|
||||
- dense, readable
|
||||
- fixed column logic
|
||||
- no playful effects
|
||||
|
||||
### Cards
|
||||
- functional grouping
|
||||
- no visual dominance
|
||||
- secondary to tables
|
||||
|
||||
### Modals
|
||||
- glassy blurred background
|
||||
- smooth opening
|
||||
- soft drop-shadow bloom
|
||||
- quick responsive closing
|
||||
- simple
|
||||
- fast
|
||||
- decisive
|
||||
|
||||
---
|
||||
|
||||
# 7. Typography
|
||||
## 7. Typography
|
||||
|
||||
A modern, premium sans-serif:
|
||||
- **Inter**
|
||||
- **Roboto Flex**
|
||||
- or **Plus Jakarta Sans**
|
||||
- neutral sans-serif
|
||||
- excellent numeric readability
|
||||
- no personality fonts
|
||||
|
||||
Font weight:
|
||||
- light + regular for body
|
||||
- semibold for headings
|
||||
- numeric fields medium or monospaced (for racing aesthetics)
|
||||
|
||||
Typography motion:
|
||||
- heading fade-in
|
||||
- numeric counters animate upward subtly (60–120ms)
|
||||
Primary goal:
|
||||
**information clarity, not brand expression.**
|
||||
|
||||
---
|
||||
|
||||
# 8. UX Tone
|
||||
## 8. Design Principle Summary
|
||||
|
||||
GridPilot should **feel**:
|
||||
GridPilot is:
|
||||
- not gamer UI
|
||||
- not esports branding
|
||||
- not corporate SaaS
|
||||
|
||||
- confident
|
||||
- calm
|
||||
- minimal
|
||||
- smart
|
||||
- “built by people who actually race”
|
||||
- respectful of the user’s time
|
||||
- not corporate
|
||||
- not recruiter-slick
|
||||
- not childish gamer UI
|
||||
|
||||
But also:
|
||||
**pleasant, smooth, and delightful to interact with.**
|
||||
|
||||
---
|
||||
|
||||
# 9. Comparative Inspirations
|
||||
|
||||
### From iRacing UI:
|
||||
- dark palette
|
||||
- density
|
||||
- data-first layout
|
||||
- serious tone
|
||||
|
||||
### From VRS:
|
||||
- technical clarity
|
||||
- motorsport professionalism
|
||||
|
||||
### From Apple UI:
|
||||
- smooth transitions
|
||||
- subtle bounce
|
||||
- soft shadows
|
||||
- tasteful blur
|
||||
|
||||
### From SimHub / Racelab:
|
||||
- functional panels
|
||||
- high readability
|
||||
- non-intrusive visuals
|
||||
|
||||
GridPilot combines all these influences without looking like any of them directly.
|
||||
|
||||
---
|
||||
|
||||
# 10. Goal Summary
|
||||
|
||||
**GridPilot = the “luxury cockpit dashboard” of league racing platforms.**
|
||||
|
||||
- dark, technical look
|
||||
- premium smoothness
|
||||
- fast, precise interactions
|
||||
- functional layouts
|
||||
- no corporate noise
|
||||
- no SaaS gimmicks
|
||||
- no over-the-top neon gamer aesthetic
|
||||
|
||||
Just clean, fast, beautiful racing software
|
||||
that feels as nice to use as a fresh lap in a good rhythm.
|
||||
It is:
|
||||
**modern motorsport infrastructure software.**
|
||||
Reference in New Issue
Block a user