Case study · Living system
Design System
The configurator keeps the 3D stage full-bleed and floats UI as frosted controls. This page documents the tokens, materials, motion, and every interactive surface that sits on top of the car.
Principle
Car first - UI never competes with the model
Surface
Glass pills & panels over a warm neutral stage
Feedback
One spring language for every open / select / price change
01 - Foundations
Color, type, and shape
Forced light theme. Warm off-white stage, near-black ink, and a single radius language from full pills to soft panels.
Color tokens
background
--background
oklch(0.936 0.002 106.5)
Warm off-white stage
foreground
--foreground
oklch(0.185 0 0)
Primary ink
muted-foreground
--muted-foreground
oklch(0.556 0 0)
Secondary labels
primary
--primary
oklch(0.205 0 0)
Active pills / CTAs
destructive
--destructive
oklch(0.577 0.245 27.325)
Form errors
border
--border
oklch(0.922 0 0)
Hairline rules
Brand paint accent
Product color lives in data, not theme tokens. Default Isle of Man Green matches the GLB bake and occasionally tints atmospheric gradients in this system.
Typography - Geist Sans
Loaded via next/font in the root layout. Semibold tracking-tight for identity; tabular-nums for every price.
Display
Model identity (md+)
M3 Competition
Title
Model identity (mobile)
M3 Competition
Price
Animated totals
$81,395
Body
Panel headings, nav pills
Exterior Paint
Caption
Supporting lines
G80 Sedan - Personal Edition
Micro
Swatch labels, disclaimers
Included · +$650
Radius scale
full
Pills, swatches, icon buttons
3xl
Glass panels, option cards
2xl
Wheel cards, add-on tiles
xl
Dealer result rows
base
shadcn Button primitive
02 - Materials
Glass surfaces
Three frosted utilities carry the entire overlay UI. Light panels for chrome, stronger panels for content, dark glass for the dealer CTA.
.glass
bg 58% · blur 24px · sat 1.4
Nav pills, icon buttons, category dock
.glass-strong
bg 78% · blur 32px · sat 1.6
Expanding panels, popovers, breakdown
.glass-dark
bg 88% dark · blur 24px
Contact Dealer primary action
Pointer-events pattern
Overlay wrappers use pointer-events-none so OrbitControls stay live. Interactive children opt back in with pointer-events-auto. The stage remains the primary gesture surface.
03 - Motion
One spring, many gestures
Panels enter with opacity, translate, scale, and a soft blur. Selections use layoutId pills and check badges. Prices lerp on a softer spring.
Shared spring
Panel / badge language
Shared spring
stiffness: 380 · damping: 34 · mass: 0.9
layoutId active pill
Config dock pattern
Hover / tap micro
Swatch feedback
whileHover scale 1.08 · whileTap 0.94
Price spring
stiffness 120 · damping 24
04 - Components
Living component gallery
Real exports from the configurator, not mocks. Interact with each surface - the same code that floats over the 3D stage.
Navigation chrome
TopNav center pill
Models · Experience · Specs · Finance
Price identity
PriceHeader identity block
Animated total + accessories line
M3 Competition
G80 Sedan - Personal Edition
$1,200 accessories
SpecSheet
components/configurator/spec-sheet.tsx
M3 Competition - Performance
Manufacturer specifications, G80 sedan
Engine
S58 3.0L twin-turbo inline-6
Power
523 hp @ 6,250 rpm
Torque
479 lb-ft @ 2,750–5,500 rpm
0–60 mph
3.8 sec
Top speed
155 mph (180 with M Driver’s Package)
Transmission
8-speed M Steptronic automatic
Drivetrain
Rear-wheel drive
Curb weight
3,846 lbs
FinanceEstimator
Tied to live build total
Estimate financing
Based on your current build - $82,595
Estimated monthly payment
$1,468/mo
Estimate only, based on 6.9% APR. Actual rate and terms determined by lender at time of purchase.
DealerLocatorForm
ZIP → nearest dealers
Find a dealer
Selection atoms
Paint swatch
Category icons
shadcn Button
ConfigDock - live
Full component with local state. Changing paint here updates the price demos above via shared config.
ConfigDock
Paint · Wheels · Add-ons
Exterior Paint
Isle of Man Green · Included05 - Product data
Options that feed the UI
lib/configurator-data.ts is the single source of truth. UI and 3D both read from these arrays - change options here only.
Base MSRP · $81,395
Isle of Man Green
metallic
Included
Brooklyn Grey
metallic
+$650
Alpine White
gloss
Included
Black Sapphire Metallic
metallic
+$650
San Marino Blue
metallic
+$650
Toronto Red Metallic
metallic
+$650
Frozen Grey
matte
+$5,450
Wheel styles
Style 825M
5 spokes
Included
M3 Competition
10 spokes
+$1,200
1000M M Performance
7 spokes
+$2,900
Wheel finishes
Brilliant Silver
Included
Graphite
+$300
Gloss Black
+$400
Satin Bronze
+$600
Body add-ons
Aero Spoiler
Fixed rear wing in body color
+$900
Side Skirts
Sport sill extensions
+$700
Carbon Mirrors
Exposed carbon fiber caps
+$550
Sport Exhaust
Twin black tailpipes
+$3,200
06 - Composition
How the overlays stack
One full-viewport stage. Chrome is absolute-positioned; the canvas fills the inset. Nothing is a card on the car - glass is reserved for controls.
TopNavM3 Competition
PriceHeader
$82,595
Animated total
ConfigDock
State model
CarConfig { paintId, wheelStyleId, wheelFinishId, addonIds[] } - props only, no store.
File map
components/configurator/* for overlays · lib/configurator-data.ts for options · globals.css for glass.
3D wiring
Paint mutates shared CarPaint materials. Wheels and add-ons affect price today; model hooks are next.
Responsive
Center nav collapses into MobileMenu below md. PriceHeader slides away while the hamburger panel is open.
See it on the car
The live configurator applies this system over the Draco GLB stage.