Renewal Mate
Design system
Editorial wallet for licences and plates. Near-black ink, paper type, one steel accent. Tokens live in the theme file; this page is the living spec. Do not invent hex in the interface.
Principles
Documents first
Licences read as dark cards. Plates read as cream stock. Everything else is a quiet panel.
One accent
Steel grey for primary actions and the day count. Status colour only on small pills.
Touch and type
Figtree for UI, Newsreader for titles. Controls are at least 44px. Motion is short and reduced-motion safe.
Colour
Ink
bg
#101114
surface
#191c21
elevated
#22262c
border
#2c3138
Type
fg
#eceae4
muted
#9b978c
faint
#6e6a62
Accent
accent
#b9c5d1
accent-fg
#101114
Status
ok
#8aa990
warn
#c4a574
danger
#c17b74
Documents
licence
#1a2422
licence-mid
#24302c
plate
#f3efe6
plate-fg
#1c1916
chip
#c5ced6
Type
Kicker
Wallet · Next up
Display
On file
Body
Photograph a driver licence or number plate. Reminders fire before it lapses. You choose what leaves the device.
Tabular
81
days left
Surfaces
sm · 8
md · 12
lg · 16
xl · 24
Nested radii step down: a 24px card with 16px padding uses 8px inner controls. Hairline rings via shadow-border, not a second grey.
Motion
- micro80ms
- quick150ms
- fast250ms
- slow400ms
Press scale 0.96. Enter with rise-in (opacity, 10px, light blur). Respect reduced motion — durations collapse to near zero.
Components
Document faces
QLD
Licence card
Photo well, chip, dark ink face
QLD
SAM 12
Rivets, cream stock, wide tracking
Rules
- No purple, gold, or rainbow accents.
- No emoji in chrome. Lucide icons, currentColor.
- No raw hex in components — add a token first.
- Status colour stays on pills, never on full panels.
- Grain and the steel wash are global; do not restack extra glows.