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.**
|
||||
220
docs/VOICE.md
220
docs/VOICE.md
@@ -1,197 +1,123 @@
|
||||
# GridPilot — Voice & Tone Guide
|
||||
*A calm, clear, confident voice built for sim racers.*
|
||||
# GridPilot — Voice & Tone Guide
|
||||
|
||||
*A calm, neutral, authoritative voice for motorsport infrastructure.*
|
||||
|
||||
---
|
||||
|
||||
## 1. Core Personality
|
||||
|
||||
GridPilot’s voice is:
|
||||
GridPilot is:
|
||||
- calm
|
||||
- neutral
|
||||
- precise
|
||||
- experienced
|
||||
- understated
|
||||
|
||||
### **Calm**
|
||||
Never loud, never chaotic, never dramatic.
|
||||
|
||||
### **Clear**
|
||||
Short sentences. Direct meaning. Zero fluff.
|
||||
|
||||
### **Competent**
|
||||
We sound like people who know racing and know what matters.
|
||||
|
||||
### **Friendly, not goofy**
|
||||
Approachable and human — without memes, slang, or cringe.
|
||||
|
||||
### **Non-corporate**
|
||||
We avoid startup jargon and “enterprise” tone completely.
|
||||
We do not excite.
|
||||
We inform.
|
||||
|
||||
---
|
||||
|
||||
## 2. How GridPilot Sounds
|
||||
|
||||
### **Direct**
|
||||
We make the point quickly. No fillers.
|
||||
### Clear
|
||||
Short sentences.
|
||||
No ambiguity.
|
||||
|
||||
**Example:**
|
||||
“Standings updated.”
|
||||
### Neutral
|
||||
No opinion.
|
||||
No hype.
|
||||
No exaggeration.
|
||||
|
||||
### **Minimal**
|
||||
We remove unnecessary words.
|
||||
Writing should feel clean — like the UI.
|
||||
### Competent
|
||||
We assume the user understands racing.
|
||||
|
||||
### **Honest**
|
||||
We never overpromise or exaggerate.
|
||||
GridPilot says what it does, nothing more.
|
||||
|
||||
### **Human**
|
||||
Natural phrasing, like talking to another racer.
|
||||
### Professional
|
||||
We sound like race officials, not marketers.
|
||||
|
||||
---
|
||||
|
||||
## 3. What We Avoid
|
||||
|
||||
### ❌ Corporate language
|
||||
“scalable solution,” “empower,” “revolutionize,” “synergy”
|
||||
- marketing language
|
||||
- motivational phrasing
|
||||
- emotional exaggeration
|
||||
- jokes
|
||||
- slang
|
||||
- buzzwords
|
||||
- storytelling tone
|
||||
|
||||
### ❌ Startup hype
|
||||
“game-changing,” “disruptive,” “next-gen”
|
||||
|
||||
### ❌ Gamer slang
|
||||
“let’s gooo,” “pog,” “EZ clap,” emojis everywhere
|
||||
|
||||
### ❌ Sales pressure
|
||||
“Sign up now!!! Limited time only!!!”
|
||||
|
||||
### ❌ Over-explaining
|
||||
No long paragraphs to say something simple.
|
||||
GridPilot is not here to entertain.
|
||||
It is here to **operate**.
|
||||
|
||||
---
|
||||
|
||||
## 4. Tone by Context
|
||||
|
||||
### **Landing Page**
|
||||
- calm
|
||||
- confident
|
||||
- benefit-focused
|
||||
- no hype
|
||||
- welcoming
|
||||
### UI
|
||||
- direct
|
||||
- factual
|
||||
- tool-like
|
||||
|
||||
Example:
|
||||
“League racing should feel organized. GridPilot brings everything into one place.”
|
||||
Examples:
|
||||
- “Season created.”
|
||||
- “Driver approved.”
|
||||
- “Penalty applied.”
|
||||
|
||||
---
|
||||
|
||||
### **In-App UI**
|
||||
- crisp
|
||||
- tool-like
|
||||
- neutral
|
||||
- small sentences
|
||||
### Errors
|
||||
- neutral
|
||||
- calm
|
||||
- no blame
|
||||
|
||||
Examples:
|
||||
“Race added.”
|
||||
“Results imported.”
|
||||
“Penalty applied.”
|
||||
Examples:
|
||||
- “Action failed.”
|
||||
- “Invalid input.”
|
||||
- “Try again.”
|
||||
|
||||
---
|
||||
|
||||
### **Notifications**
|
||||
- non-intrusive
|
||||
- soft
|
||||
- clear
|
||||
### Notifications
|
||||
- short
|
||||
- non-intrusive
|
||||
|
||||
Examples:
|
||||
“Your next race is tomorrow.”
|
||||
“Standings updated.”
|
||||
Examples:
|
||||
- “Race starts in 30 minutes.”
|
||||
- “Results updated.”
|
||||
|
||||
---
|
||||
|
||||
### **Errors**
|
||||
- helpful
|
||||
- steady
|
||||
- no blame
|
||||
### Emails
|
||||
- factual
|
||||
- brief
|
||||
- no sales language
|
||||
|
||||
Examples:
|
||||
“Something went wrong. Try again.”
|
||||
“Connection lost. Reconnecting…”
|
||||
Example:
|
||||
“Your season schedule has been updated.”
|
||||
|
||||
---
|
||||
|
||||
### **Emails**
|
||||
- friendly
|
||||
- simple
|
||||
- short
|
||||
## 5. Writing Rules
|
||||
|
||||
Example:
|
||||
“Your season starts next week. Here’s the schedule.”
|
||||
- remove unnecessary adjectives
|
||||
- use active voice
|
||||
- one idea per sentence
|
||||
- no filler
|
||||
- no persuasion
|
||||
|
||||
---
|
||||
|
||||
## 5. Writing Style Rules
|
||||
## 6. Phrases We Prefer
|
||||
|
||||
### **Short sentences**
|
||||
Easy to read. Easy to scan.
|
||||
|
||||
### **Simple verbs**
|
||||
Join, manage, view, race, update.
|
||||
|
||||
### **Active voice**
|
||||
“GridPilot updates your standings.”
|
||||
Not:
|
||||
“Your standings are being updated…”
|
||||
|
||||
### **No marketing padding**
|
||||
We never pretend to be bigger than we are.
|
||||
|
||||
### **Every sentence should have purpose**
|
||||
No filler words. No decorative language.
|
||||
- “All data in one place.”
|
||||
- “Clear standings.”
|
||||
- “Structured seasons.”
|
||||
- “Consistent rules.”
|
||||
- “No spreadsheets.”
|
||||
|
||||
---
|
||||
|
||||
## 6. Phrases We Like
|
||||
## 7. One-line Voice Summary
|
||||
|
||||
- “Everything in one place.”
|
||||
- “Your racing identity.”
|
||||
- “Clean standings.”
|
||||
- “No spreadsheets.”
|
||||
- “Race. We handle the rest.”
|
||||
- “Built for league racing.”
|
||||
- “Clear. Simple. Consistent.”
|
||||
|
||||
These reinforce clarity and confidence.
|
||||
|
||||
---
|
||||
|
||||
## 7. Phrases We Never Use
|
||||
|
||||
- “premium experience”
|
||||
- “unlock your potential”
|
||||
- “cutting-edge AI”
|
||||
- “transform the sim racing landscape”
|
||||
- “we’re disrupting the industry”
|
||||
- “epic,” “insane,” “crazy good,” etc.
|
||||
|
||||
Anything salesy, dramatic, childish, or corporate is banned.
|
||||
|
||||
---
|
||||
|
||||
## 8. Emotional Goals
|
||||
|
||||
GridPilot should make people feel:
|
||||
|
||||
### **In control**
|
||||
Information is clear and predictable.
|
||||
|
||||
### **Supported**
|
||||
Admin work is easier. Driver info is organized.
|
||||
|
||||
### **Respected**
|
||||
We never talk down to users.
|
||||
|
||||
### **Focused**
|
||||
The tone keeps attention on racing, not us.
|
||||
|
||||
### **Confident**
|
||||
The platform feels stable and trustworthy.
|
||||
|
||||
---
|
||||
|
||||
## 9. One-line Voice Summary
|
||||
|
||||
**GridPilot speaks like a calm, competent racer who explains things clearly — never loud, never corporate, never cringe.**
|
||||
**GridPilot speaks like race control: calm, precise, and trustworthy.**
|
||||
Reference in New Issue
Block a user