Design system · v1
← swap the accent live; structure stays identical
One foundation for every app.
Shared bones, per-app skin. Refined, structured, accessible — drop these three CSS files into any build and it stops looking chunky.
Foundations
The raw system every component is built from.
Colour — semantic, not random
accent
accent-weak
success
warn
danger
text
text-muted
border
Type scale — body never below 18px
2xl · h1 · 42pxHeadline
xl · h2 · 33pxSection title
lg · h3 · 27pxSubsection
base · body · 20pxBody copy you actually read.
sm · 18pxSecondary / dense text.
xs · meta · 16pxLABELS & CAPTIONS ONLY
Spacing — strict 8px grid
space-2 · 8
space-4 · 16
space-5 · 24
space-6 · 32
space-7 · 48
Elevation — soft layered depth
xs
sm
md
lg
Components
Every one ships with hover, focus, active and disabled states.
Buttons
KPI tiles
Revenue€128.4k▲ 12% vs last month
CPA€42▼ 3% improving
Activations1,204— flat
Active affiliates87migration scope
Badges & alerts
Neutral
Accent
Live
Pending
Blocked
Heads up. Migration go-live dates are still provisional.
Reconciled. Totals match Domo to the cent.
Check needed. Two months flagged provisional.
Blocked. IA portal password rotation pending.
Cards
StandardNew
Soft shadow, hover lift. The default container.
Glass
Translucent depth for overlays and headers.
Accent
For the one thing you want noticed.
Table
| Affiliate | Market | GGR | CPA | Status |
|---|---|---|---|---|
| BetMedia | ES | €48,200 | €39 | Live |
| Yensi01 | FR | €31,540 | €44 | Pending |
| EducaPoker | PT | €0 | — | Dormant |
Form controls
As it appears in the member list.
Must be a number.
Auto-migrate
Tabs, progress, states
Migration progress
34% of 87 affiliates
📭
No data yetPull a report to populate this view.
Loading state
The rules (the "thought process")
Why it looks structured instead of chunky. Follow these and any build inherits the discipline.
✓ Do · whitespace does the workLet space create hierarchy. Generous padding, one idea per card. Air is not wasted space.
✕ Don't · cramWalls of edge-to-edge text and boxes touching boxes. That's the "chunky" feeling.
✓ Do · snap to the 8px gridEvery gap, padding and size from the spacing tokens. Alignment looks intentional.
✕ Don't · eyeball pixels13px here, 7px there. Random spacing is what reads as "no thought process".
✓ Do · one accent, used rarelyAccent marks the single most important action. Everything else is neutral.
✕ Don't · rainbowFive bright colours competing. Colour should mean something.
✓ Do · lead with the answerBiggest element = the number that matters. Detail sits below, smaller.
✕ Don't · flat data dumpEverything the same size = nothing stands out.
✓ Do · 18px+ body, 44px+ targetsReadable for low vision, tappable on a phone. Accessibility is the floor.
✕ Don't · tiny dense type14px grey-on-grey. Fails the eyesight test instantly.
✓ Do · soft, single-layer depthOne consistent shadow language. Subtle lift on hover.
✕ Don't · hard borders + heavy shadowsThick outlines and harsh drop-shadows date a UI immediately.
How to use it
Link three files in the <head>, in order:
<link rel="stylesheet" href="foundation.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="skin-work.css"> <!-- or skin-wedding.css -->Then use the classes. Swap the skin line to re-theme the whole app. New app theme = one new skin-*.css with five accent variables.