5.2 KiB
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.