website refactor
This commit is contained in:
250
docs/THEME.md
250
docs/THEME.md
@@ -1,134 +1,172 @@
|
||||
🎨 GridPilot Theme — “Precision Racing Minimal”
|
||||
GridPilot Theme — “Modern Precision with Obsessive Detail”
|
||||
|
||||
A clean, modern racing interface that feels like a cockpit dashboard — calm, sharp, and serious.
|
||||
A meticulously crafted sim-racing interface built with absolute love to detail.
|
||||
|
||||
⸻
|
||||
|
||||
1. Identity & Mood
|
||||
Core Essence
|
||||
|
||||
GridPilot should feel like:
|
||||
• a real motorsport instrument, not a game launcher
|
||||
• calm and focused, like the moment before a qualifying lap
|
||||
• precise, like a telemetry screen
|
||||
• modern and minimal, without visual noise
|
||||
• slightly futuristic, but never “RGB gamer chaos”
|
||||
GridPilot should feel like a product where every pixel was placed on purpose.
|
||||
A UI that radiates care, intention, and craft — the way a beautifully machined steering wheel or pedal set feels when you touch it.
|
||||
|
||||
It should appeal equally to sim racers, gamers, and casual fans.
|
||||
Not loud.
|
||||
Not flashy.
|
||||
Not corporate.
|
||||
But modern, obsessive, refined.
|
||||
|
||||
The user should think:
|
||||
|
||||
“Someone really cared when they designed this.”
|
||||
|
||||
⸻
|
||||
|
||||
2. Visual Style
|
||||
1. The Kind of Modern We Want
|
||||
|
||||
Core Aesthetic
|
||||
• matte dark surfaces
|
||||
• thin, crisp separators
|
||||
• soft blue/cyan glows on interaction
|
||||
• no aggressive neon
|
||||
• subtle gradients for depth
|
||||
• everything feels instrument-grade, not decorative
|
||||
Modern ≠ trendy
|
||||
GridPilot is modern in the way high-end hardware is modern:
|
||||
• clean materials
|
||||
• subtle gradients
|
||||
• precision shadows
|
||||
• invisible order
|
||||
• absolute visual consistency
|
||||
|
||||
Color System
|
||||
• Graphite Black — base background
|
||||
• Charcoal — panel surfaces
|
||||
• Steel Grey — separators & outlines
|
||||
• Electric Blue — primary actions
|
||||
• Telemetry Aqua — interactive highlights
|
||||
• Motorsport Amber — warnings & signals
|
||||
It feels engineered, not styled.
|
||||
|
||||
Colors should feel like motorsport, not corporate SaaS.
|
||||
Everything is smooth, but never busy.
|
||||
Everything is polished, but never glossy.
|
||||
Everything is minimal, but never empty.
|
||||
|
||||
It has the vibe of:
|
||||
• Apple’s focus
|
||||
• Porsche’s restraint
|
||||
• Moza/Fanatec’s precision hardware aesthetics
|
||||
• Telemetry dashboards
|
||||
• Calm esports production graphics
|
||||
|
||||
A blend of racing seriousness and premium digital craft.
|
||||
|
||||
⸻
|
||||
|
||||
3. Components & Interaction
|
||||
2. Love to Detail (the signature of GridPilot)
|
||||
|
||||
Panels & Cards
|
||||
• slightly inset or raised
|
||||
• reminiscent of cockpit modules
|
||||
• structured and clean
|
||||
This is where GridPilot stands out.
|
||||
|
||||
Tables
|
||||
• information-dense
|
||||
• instantly scannable
|
||||
• light hover highlights
|
||||
• telemetry-style status colors
|
||||
Microspacing
|
||||
|
||||
Buttons
|
||||
• flat by default
|
||||
• glow only on hover
|
||||
• snappy, “race-engineer” response speed
|
||||
Spacing is not “good enough” — it’s perfectly balanced.
|
||||
Margins breathe.
|
||||
Rows align with intent.
|
||||
Nothing floats randomly.
|
||||
|
||||
Modals
|
||||
• soft frosted blur
|
||||
• fast open/close
|
||||
• subtle pit-lane lighting vibes
|
||||
Typography finesse
|
||||
|
||||
⸻
|
||||
Numbers align sharply for standings.
|
||||
Headings sit exactly on their baseline rhythm.
|
||||
Secondary metadata uses softer brightness and tighter spacing.
|
||||
|
||||
4. Motion & Feedback
|
||||
Shadow discipline
|
||||
|
||||
Motion should feel racing-inspired:
|
||||
• short, crisp animations
|
||||
• no bounce or playful movement
|
||||
• hover = slight lift + color pulse
|
||||
• loading = a thin progress line (pit limiter style)
|
||||
• tab switching = sliding underline (chicane motion)
|
||||
No random shadows — only a small, soft, controlled spread.
|
||||
Layer depth is subtle but unmistakably refined.
|
||||
|
||||
Responsive, not playful.
|
||||
Color temperature
|
||||
|
||||
⸻
|
||||
Dark modes often feel muddy or flat.
|
||||
GridPilot should feel crisp, layered, and tuned —
|
||||
as if the entire palette has been color-graded like broadcast graphics.
|
||||
|
||||
5. Layout Structure
|
||||
Interactive texture
|
||||
|
||||
Think Telemetry Workspace:
|
||||
• Sidebar → control rail
|
||||
• Header → context + session controls
|
||||
• Main Area → race tables, session details, track maps
|
||||
• Right Panel → contextual info, drivers, actions
|
||||
|
||||
Everything modular, readable, and effortless to navigate.
|
||||
|
||||
⸻
|
||||
|
||||
6. Tone & Copywriting
|
||||
|
||||
The product tone is:
|
||||
• calm
|
||||
• concise
|
||||
• direct
|
||||
• technical but human
|
||||
• zero hype
|
||||
|
||||
Examples:
|
||||
• “Race added.”
|
||||
• “Standings updated.”
|
||||
• “Session ready.”
|
||||
• “Review protest.”
|
||||
• “Sponsor payout queued.”
|
||||
|
||||
Never corporate. Never salesy. Never loud.
|
||||
|
||||
⸻
|
||||
|
||||
7. Emotional Experience
|
||||
|
||||
Users should feel:
|
||||
• in control
|
||||
• supported
|
||||
• efficient
|
||||
• connected to motorsport culture
|
||||
• confident in the system
|
||||
|
||||
A disciplined, trustworthy tool — not a flashy app.
|
||||
|
||||
⸻
|
||||
|
||||
8. Overall Vibe
|
||||
|
||||
“A premium cockpit dashboard — for people who actually race.”
|
||||
• minimal
|
||||
Every hover, highlight, or focus state is:
|
||||
• soft
|
||||
• smooth
|
||||
• fast
|
||||
• precise
|
||||
• clean
|
||||
• serious
|
||||
• attractive without noise
|
||||
|
||||
A tool you’re happy to use, because it respects your time and your craft.
|
||||
Nothing is bouncy, glowy, or game-y.
|
||||
But everything feels alive when touched.
|
||||
|
||||
Love to detail = you don’t notice it, but you feel it.
|
||||
|
||||
⸻
|
||||
|
||||
3. Emotional Atmosphere
|
||||
|
||||
The moment the UI loads, the user should feel:
|
||||
• This is premium.
|
||||
• This was crafted, not slapped together.
|
||||
• This tool respects my time.
|
||||
• This belongs to sim racing, not generic SaaS.
|
||||
• This is serious but not sterile.
|
||||
|
||||
It’s that mixture of calm confidence and quiet intensity that sim racers crave before entering a session.
|
||||
|
||||
⸻
|
||||
|
||||
4. Visual Style Summary (crisp and modern)
|
||||
|
||||
Surfaces
|
||||
• matte
|
||||
• low contrast
|
||||
• ultra-clean edges
|
||||
• subtle gradients only on interaction
|
||||
|
||||
Accents
|
||||
• electric blue or aqua, used sparingly
|
||||
• amber for warnings (motorsport heritage)
|
||||
• desaturated greys for hierarchy
|
||||
|
||||
Lighting
|
||||
• no neon
|
||||
• no RGB vibes
|
||||
• subtle glow only on very important interactive elements
|
||||
|
||||
Depth
|
||||
• controlled layering
|
||||
• meaningful shadows
|
||||
• frosted blur for modals (garage glass vibe)
|
||||
|
||||
⸻
|
||||
|
||||
5. Motion
|
||||
|
||||
Animations reflect precision:
|
||||
• fast acceleration
|
||||
• quick settle
|
||||
• no jitter
|
||||
• no wasted frames
|
||||
|
||||
Transitions should feel like:
|
||||
• opening a garage screen
|
||||
• switching telemetry pages
|
||||
• selecting a gear cleanly
|
||||
|
||||
A sense of mechanical smoothness.
|
||||
|
||||
⸻
|
||||
|
||||
6. Why This Theme Works for Our Audience
|
||||
|
||||
For gamers:
|
||||
• visually immersive
|
||||
• polished like a AAA menu
|
||||
• subtle effects that feel “alive”
|
||||
|
||||
For sim racers:
|
||||
• data clarity
|
||||
• racing-inspired accents
|
||||
• tool-like seriousness
|
||||
|
||||
For devs:
|
||||
• clean structure
|
||||
• intentional simplicity
|
||||
• maintainable aesthetic rules
|
||||
|
||||
This theme hits the sweet spot:
|
||||
professional, modern, crafted, premium.
|
||||
|
||||
⸻
|
||||
|
||||
One-Line Summary
|
||||
|
||||
GridPilot should feel like a high-end sim racing cockpit UI — obsessively detailed, modern, calm, and deeply cared for, where every interaction feels engineered with precision.
|
||||
Reference in New Issue
Block a user