Design System

Midnight Utility
the MileClear design system.

Dark, dense, confident. Built for drivers who want clarity over decoration. Anything that ships on mileclear.com, in the iOS app, or on the App Store traces back to here.

01 / Colour

Canonical palette

Amber is premium. Emerald is live. Red is destructive. Anything outside those three is structural - background, border, or text.

--bg-deep#030712

Primary app background.

--bg-primary#060a16

Slightly elevated page bg.

--bg-secondary#0a1020

Cards at rest on web.

--bg-card-solid#0a1120

Solid mobile cards & form fields.

--amber-300#fcd34d

Highlight text in dense UI.

--amber-400#fbbf24

Web primary accent.

--amber-500#eab308

Hover / pressed state.

--amber-600#ca8a04

Deepest amber - rare.

amber (mobile)#f5a623

Canonical brand amber. Mobile + brand assets.

--emerald-400#34d399

Active shift highlight.

--emerald-500#10b981

Success, positive deltas.

red#ef4444

Destructive, errors, sync failures.

--text-white#f9fafb

Hero type, primary headings.

--text-primary#e2e8f0

Body copy.

--text-secondary#94a3b8

Descriptions, muted labels.

--text-muted#64748b

Metadata, footer links.

--text-faint#475569

Disabled states, placeholders.

02 / Surfaces

Borders and glows

Translucent layers do the work that drop shadows do elsewhere. Backgrounds glow; cards never lift.

--border-subtlergba(255,255,255,0.04)

Barely-there dividers.

--border-defaultrgba(255,255,255,0.07)

Card borders, table rows.

--border-strongrgba(255,255,255,0.12)

Focused / hovered.

--amber-glowrgba(234,179,8,0.10)

Soft amber wash behind hero.

--amber-glow-mdrgba(234,179,8,0.18)

Hero hover, Pro fill.

--amber-glow-strongrgba(234,179,8,0.30)

Premium highlights.

--emerald-glowrgba(16,185,129,0.12)

Active shift cards.

03 / Typography

Sora & Outfit on the web

Sora is geometric and a touch sharp - good for headlines. Outfit is neutral and readable at body sizes. Mobile uses Plus Jakarta Sans because loading two on-device costs too much.

Hero - Sora 700, clamp 2.5/4rem

Track every mile. Keep every penny.

Heading - Sora 700, clamp 2/3rem

A strong technical foundation.

H2 section - Sora 700, clamp 1.5/2rem

How auto detection works

Subtext - Outfit 400, clamp 1/1.125rem

MileClear records your mileage in the background and groups trips into shifts so your HMRC deduction adds up by itself.

Body - Outfit 400, 1rem / 1.65

The £4.99/month Pro plan unlocks PDF and CSV exports for your Self Assessment, plus earnings tracking by platform. Free covers unlimited tracking, classification, and the HMRC calculator.

Label - 0.75rem 700, uppercase, amber
Featured
04 / Spacing

Base unit: 4px

Everything is a multiple. If a value isn't in the scale, it's wrong - reach for the next token, don't invent a new one.

xs · 4
sm · 8
md · 12
lg · 16
xl · 20
xxl · 24
xxxl · 32
05 / Radius

Soft corners, never circular by accident

Use the named tokens. border-radius: 50% is reserved for things that are genuinely circular - everything else is a pill.

sm · 10
md · 14
lg · 22
xl · 32
full · 9999 (pill)
06 / Components

Buttons

One primary per visible viewport. Pair it with a ghost or text link for the secondary action - never two primaries side by side.

Variants

Primary, secondary, ghost, destructive.

Sizes

Small for inline actions, medium for forms, large for hero CTAs.

07 / Components

Badges

Pro is amber-on-deep, status badges follow the semantic colour rules: emerald active, red failed, amber pending.

ProActivePendingFailed
08 / Components

Filter chips

Pill, surface fill at rest, amber fill when active. The colour swap is the only state change - no border tricks.

AllWorkPersonalUnclassified
09 / Components

Inputs

48px minimum touch target. Surface fill, subtle border at rest, amber-glow border when focused. Errors are red borders only - never red fills.

10 / Voice

Direct, plain, UK English

No hype, no exclamation marks, no em dashes. Drivers can smell marketing copy from a mile off - sound like a person.

Do

You've claimed £1,234 this tax year.

Don't

Total deduction accrued in the 2025/26 fiscal year.

Do

Free - forever. No card needed.

Don't

Start your complimentary trial today!

Do

Start shift

Don't

Begin Tracking My Driving Session

Do

Pro (£4.99/mo) unlocks PDF and CSV exports.

Don't

Upgrade to unlock the full power of MileClear.

11 / Reference

Full written spec

The complete rules - including motion, accessibility, the anti-patterns list, and where every token lives - are in DESIGN_SYSTEM.md in the repo. If this page and that doc disagree, the page is a lie - update both.