229 lines
5.2 KiB
Markdown
229 lines
5.2 KiB
Markdown
# 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. |