Styleguide
Every shared primitive in every state. Check this page at 375px and 1440px before shipping a visual change.
Colour
Greyscale carries the interface; green marks the primary action and the key figure only.
--bg-base
#0A0D0C
--bg-surface
#121614
--bg-surface-2
#1A201D
--bg-inset
#070908
--border-subtle
#232B27
--border-strong
#35403A
--text-primary
#F2F5F3
--text-secondary
#A8B3AD
--text-muted
#6E7B74
--accent
#78BE20
--accent-hover
#8AD42B
--accent-press
#67A31B
--info
#4EA8DE
--success
#4ADE80
--warning
#FBBF24
--danger
#F87171
Typography
12 / 14 / 16 / 18 / 24 / 32 / 48. Numerals are tabular everywhere.
48 Display
32 Heading
24 Heading
18 Subheading
16 Body — the buyer is nervous about used EV batteries and about car dealers. Every line should reduce one of those two anxieties.
14 Body small
12 Meta and timestamps
£12,995 · £8,450 · 28,450 miles · 96%
Buttons
Every variant, size and the disabled state. Tab through to check focus rings.
PriceTag
Reduced, monthly-from, plus VAT and pence-exact states.
SpecPill
StatusBadge
One tone map across storefront, portal and CRM so a status never changes colour.
VehicleCard
Available, reserved, reduced price and loading. 16:9 thumbnails are locked to prevent layout shift.
Kia e-Niro 64kWh 4+
64kWh 4+ Auto
DataTable
Sortable headers, column visibility, pagination, loading and empty states.
4 rows
| Status | ||||
|---|---|---|---|---|
| EVC-0101 | Tesla Model 3 Long Range | 34,120 miles | £22,495 | Available |
| EVC-0102 | Kia e-Niro 64kWh 4+ | 28,450 miles | £17,995 | Reserved |
| EVC-0103 | Hyundai Ioniq 5 73kWh | 19,870 miles | £25,995 | In Prep |
Page 1 of 2
Loading…
| Status | ||||
|---|---|---|---|---|
0 rows
| Status |
|---|
No vehicles match those filters
Widen the price range or clear a filter to see more cars.
Empty and error states
Every list view gets all three: skeleton, empty with a next action, error with retry.
No enquiries yet
When a customer submits an enquiry it lands here with a response timer.
We couldn't load this
The connection dropped or the request timed out. Try again — nothing has been lost.
Form fields
Submit empty to see zod errors tied to their inputs. Marketing consent is separate and unticked.