141 lines
2.6 KiB
Markdown
141 lines
2.6 KiB
Markdown
# 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
|
||
|
||
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 goal is not excitement.
|
||
The goal is **confidence**.
|
||
|
||
Think:
|
||
**“FIA race control x timing screens x modern tooling — with smooth interaction.”**
|
||
|
||
---
|
||
|
||
## 2. Visual Style
|
||
|
||
### 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
|
||
|
||
Everything should look:
|
||
**intentional, measured, and calm.**
|
||
|
||
---
|
||
|
||
### Color Palette (refined)
|
||
|
||
- **Graphite Black:** `#0E0F11`
|
||
- **Panel Gray:** `#171A1E`
|
||
- **Border Gray:** `#22262A`
|
||
- **Primary Accent:** `#198CFF` (used sparingly)
|
||
- **Success Green:** `#6FE37A`
|
||
- **Warning Amber:** `#FFC556`
|
||
- **Critical Red:** `#E35C5C`
|
||
|
||
No neon.
|
||
No playful colors.
|
||
Color = meaning, not decoration.
|
||
|
||
---
|
||
|
||
## 3. Motion & Interaction
|
||
|
||
### Animation Philosophy
|
||
Motion exists only to:
|
||
- confirm an action
|
||
- show hierarchy
|
||
- indicate state change
|
||
|
||
Never to impress.
|
||
|
||
### Characteristics:
|
||
- short durations (120–200ms)
|
||
- low amplitude
|
||
- no exaggerated easing
|
||
- no elastic bounces
|
||
- no decorative movement
|
||
|
||
**Motion should feel like a well-damped suspension — not a show car.**
|
||
|
||
---
|
||
|
||
## 4. Where Motion Is Allowed
|
||
|
||
- button press feedback
|
||
- panel open / close
|
||
- table row expansion
|
||
- state changes (pending → approved → completed)
|
||
- subtle loading indicators
|
||
|
||
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:
|
||
**reliable before it feels beautiful.**
|
||
|
||
---
|
||
|
||
## 6. Components
|
||
|
||
### Tables
|
||
- primary UI element
|
||
- dense, readable
|
||
- fixed column logic
|
||
- no playful effects
|
||
|
||
### Cards
|
||
- functional grouping
|
||
- no visual dominance
|
||
- secondary to tables
|
||
|
||
### 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.** |