// design system · soft variant
The Midnight system,
with clearer breaks.
The same tokens and components as the main style guide — but on a gentler two-tone band rhythm with a bold rule at every section break, so each band is easy to tell apart.
Equal-height card
Group card, height:100% under _equal_row — every card in the row matches the tallest.
Accent card
Same card with an orange top edge for a focal feature.
Clamp titles
Titles use clamp() so they scale with the viewport instead of wrapping to differing line counts.
Most popular
Sample tier
£8.50/mo
14-day money-back
A live-fed pricing card.
- Equal height via pill-reserve
- clamp() price
- renews-at line
- Live from Blesta
“Stark white card — the 30% structuring moment, kept for the soft variant too.”
Style Guide · soft variant
Status badge
Migration flip-card
// CURRENT HOST
Slow. Oversold. Indifferent.
Throttled NVMe, servers crammed with thousands of neighbours, and a support queue that treats you like a ticket number. Locked in and quietly overpaying. Sound familiar?
// MDHOSTING
Free migration. On us.
We move your sites, email and data off your slow host — planned and tested to minimise disruption, at no charge. You just watch it get faster.
Plan my migration →How is this different from the main style guide?
Same components, gentler band contrast (Midnight ↔ a clearly-lighter soft navy) plus a 2px rule and an orange index label at every section break.
Which should we ship?
Whichever reads best to you — this soft variant makes section boundaries more obvious; the original is moodier and more seamless.