website poc
This commit is contained in:
229
docs/THEME.md
Normal file
229
docs/THEME.md
Normal file
@@ -0,0 +1,229 @@
|
||||
# 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.*
|
||||
|
||||
---
|
||||
|
||||
# 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
|
||||
|
||||
It combines:
|
||||
- the readability & seriousness of motorsport tools
|
||||
- with the soft, fluid, polished feel of a high-end app
|
||||
|
||||
Think:
|
||||
**"iRacing x Apple UI x Motorsport telemetry aesthetics"**.
|
||||
|
||||
---
|
||||
|
||||
# 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)
|
||||
|
||||
### 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.
|
||||
|
||||
---
|
||||
|
||||
# 3. Animation Philosophy — “Buttery Smooth, Never Distracting”
|
||||
|
||||
Animations in GridPilot should:
|
||||
- feel like a **fast steering rack**: sharp + controlled
|
||||
- feel **premium**, not “flashy”
|
||||
- be **motivated**, not ornamental
|
||||
- communicate **state change** clearly
|
||||
|
||||
**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.”
|
||||
|
||||
---
|
||||
|
||||
# 4. Where Animations Should Shine
|
||||
|
||||
### ✔ Hover Interactions
|
||||
Buttons + cards get:
|
||||
- subtle upscale (`1.0 → 1.03`)
|
||||
- color bloom
|
||||
- ambient glow (low opacity, soft spread)
|
||||
|
||||
### ✔ Page Transitions
|
||||
- fade + slide (30–50px)
|
||||
- layered parallax for content panels
|
||||
- 150–250ms total
|
||||
|
||||
Feels warm, inviting, non-static.
|
||||
|
||||
### ✔ 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
|
||||
|
||||
---
|
||||
|
||||
# 5. What NOT to animate
|
||||
|
||||
To avoid becoming “too modern = startup SaaS = untrustworthy”:
|
||||
|
||||
**No:**
|
||||
- giant hero animations
|
||||
- unnecessary motion in typography
|
||||
- floating shapes / illustration wobble
|
||||
- confetti / particle effects
|
||||
- autoplay video backgrounds
|
||||
- mobile-app style “over cute” transitions
|
||||
|
||||
GridPilot must feel:
|
||||
**professional → premium → but still understated.**
|
||||
|
||||
---
|
||||
|
||||
# 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`)
|
||||
|
||||
### Tables
|
||||
- high-density, readable
|
||||
- animated sort indicators
|
||||
- fade-in rows on update
|
||||
- highlight row on hover
|
||||
|
||||
### Modals
|
||||
- glassy blurred background
|
||||
- smooth opening
|
||||
- soft drop-shadow bloom
|
||||
- quick responsive closing
|
||||
|
||||
---
|
||||
|
||||
# 7. Typography
|
||||
|
||||
A modern, premium sans-serif:
|
||||
- **Inter**
|
||||
- **Roboto Flex**
|
||||
- or **Plus Jakarta Sans**
|
||||
|
||||
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)
|
||||
|
||||
---
|
||||
|
||||
# 8. UX Tone
|
||||
|
||||
GridPilot should **feel**:
|
||||
|
||||
- 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.
|
||||
Reference in New Issue
Block a user