Dremvale design system · v0.1.0
Style guide
Every colour, type size and component used on the site, drawn with the live stylesheet. Change a token in assets/css/tokens.css and it changes here and everywhere.
Colour
Surfaces
--night--night-2--panel--panel-2--drawerInk
--ink--ink-2--ink-3Accent
--gold--gold-hover--gold-deep--gold-inkStatus
--ok--warn--error--infoType
Headings: Lora. Body and interface: Inter. Both self-hosted, Latin subset only.
--fs-heroLittle worldsh1 · --fs-h1The Coffee Factory
h2 · --fs-h2Four little worlds
h3 · --fs-h3What’s in the box
.lede · 17pxA five-stage coffee works, from roast to sip, that lights up at the counter.
body · 16px593 wooden pieces that click together, no glue and no tools.
.eyebrow · 12pxShop by categoryButtons
One gold button per view: the action we want. Everything else is outline or quiet. Minimum tap size 44px.
Pills, chips and badges
The dashed amber [to confirm] badge marks any price or spec that is not confirmed. It shows on every unconfirmed value until launch.
Forms
Messages
Kit card and spec tiles
Butterfly Piano Music Box
[One line: what it is and what it does once it is built.]
Explore the kit
Accordion
Do I need glue or tools?
How long does it take to build?
Drawer
Used for the cart (from the right) and for filters on a phone (from the bottom).
Icons
24px grid, 1.6 stroke, colour follows text. Call dv_icon( 'name' ).
Payment marks
Spacing and radius
--s-1--s-2--s-3--s-4--s-6--s-8--s-12--s-16--s-18--r-sm--r-md--r-lg--r-xl