The shared design system
Style guide
Real components, local fonts and shared tokens. Examples are labelled and disabled; navigation links open their real destinations.
Colors
- Accent red
--red: #d81416 - Graphite / ink
--graphite / --ink: #111214 - True white
--paper: #ffffff - Muted text
--muted: #565b61 - Decorative separator
--line: #d9dde1 - Control boundary
--control-border: #858a90
Red text belongs on white, not graphite. Light separators are decorative; inputs use the darker control boundary.
Typography
Barlow Condensed · 700 · Find what fits.
Barlow Condensed · 600 · Illustrative listed price
Manrope · 400 · Explore the cars. Understand the differences. Find what fits you.
Manrope · 500 · View details
Manrope · 600 · Explore cars
Manrope · 700 · $22,500
Body and controls start at 16px. Page headings use 72px / 48px; section headings use 48px / 36px across desktop / mobile.
Spacing
20px mobile gutters grow to 64px; content is capped at 1312px. Components share a 6px radius and at least 44px control targets.
- Small separation
- 8px
- Control gap
- 16px
- Row padding
- 24px
- Section space
- 48px
Buttons and focus
Disabled visual examples. Tab to the real catalogue link to inspect the shared visible focus outline.
Form states
Static field examples — no information can be entered or submitted here.
Enter a valid email address.
Vehicle row
Static example with disabled selection buttons and working vehicle links.
Empty and status
Notice example: Demo preview only — nothing was sent.
Comparison
Static comparison example. Selection controls are disabled; scroll the real semantic table to inspect all columns.
- City sedan
- Sport sedan
- Family SUV
Scroll horizontally to see all 3 cars.
| Attribute | City sedan$22,500 View details |  Sport sedan$28,900 View details |  Family SUV$42,800 View details |
|---|---|---|---|
| Availability | Used | Used | New |
| Body style | Sedan | Sedan | Suv |
| Price | $22,500 | $28,900 | $42,800 |
| Powertrain | Petrol | Petrol | Hybrid |
| Transmission | Automatic | Automatic | Automatic |
| Power | 110 kW | 145 kW | 160 kW |
| Seats | 5 | 5 | 5 |
| Mileage | 42,000 km | 28,000 km | Not provided |
| Condition | Illustrative condition — inspection not verified | Illustrative condition — inspection not verified | Not provided |
| Previous owners | 1 | 1 | Not provided |