Design system

System

Every token, primitive and market component that composes Stradale, on one page, so the system stays honest. Brand assets live in the brand kit; mark exploration in the brand studio.

Foundations

Color tokens, radii and elevation.

canvas
--color-canvas
surface
--color-surface
surface-2
--color-surface-2
line
--color-line
line-strong
--color-line-strong
faint
--color-faint
muted
--color-muted
ink-soft
--color-ink-soft
ink
--color-ink
accent
--color-accent
accent-soft
--color-accent-soft
positive
--color-positive
warning
--color-warning
danger
--color-danger
crypto
--color-crypto
radius-xl · card
radius-2xl
shadow-lift

Typography

Geist for UI, Fustat for the Stradale wordmark, Instrument Serif for display, Geist Pixel Square for uppercase labels.

display-hero · Instrument Serif
The most wanted cars.
h1 · 36/semibold
Portfolio, not classifieds.
h2 · 24/semibold
Every VIN, fully traced.
body · 16 muted

Ownership history, service records and the odometer trail, rolled into one provenance score.

eyebrow · Geist Pixel Square · all-caps · tracking 0.04em
Price discovery
label · same pixel treatment for form fields
Access code
tabular numerals
$1,284,500 · 4.5% · 96/100

Buttons

One radius, four tones, three sizes.

Keyboard-first: K opens search ·Esc dismisses

Chips & badges

Status, filters and market states.

DefaultSoftAccentReserve metReserve not metEnding Crypto OKSold Live

Forms

Field labels use Geist Pixel Square (all-caps, slim tracking). Inputs share one focus ring; selects are custom.

Format · custom select with icons
Country · type-to-filter when long

Data display

Sparkline, meters, avatars, countdowns, skeletons.

Price history · 24 mo
$289,000 ▲ 12.4%
Adjustable meter72/100
AOKWAAvatar · monogram fallback
4h 23m 0sCountdown
Skeleton shimmer

Market primitives

The differentiators (depth, liquidity, spread) as first-class components.

Market depth

Spread 10.0%
Bidsinterest
$272K18
$262K14
$253K11
$243K7
$234K4
interestAsks
18$301K
14$312K
11$322K
7$333K
4$343K
Mid$287K

Modeled from standing offers, watchlist intent and comparable sales. Indicative only.

Liquidity gauge
911 GT3 · trades weeklyDeep · sells in days
F355 GTS · trades monthlyActive · sells in weeks
One-off coachbuild · trades rarelyThin · sells in months

Motion

Two easings, four entrances. Calm by default, spring when it earns it.

fade-up

Section entrances, cards on load.

scale-in

Modals, palettes, popovers.

fade-in

Images, overlays, feeds.

card-hover + link-slide
Hover me: lift + shadow.