Design System · v0.1 · Stage 2 review

1 — Color Palette

Brand

Sage
Primary brand #7A9E7E
Sage Dark
Hover / pressed #5C7A60
Sage Mid
Borders / accents #B4CEB6
Sage Light
Backgrounds #EDF4EE
Wood
Warm accent #8B6647
Wood Mid
Hover wood #C4A07A
Wood Light
Wood bg #F2E8D9
Cream
Page bg #F7F3ED

Neutrals

White #FFFFFF
N50 #FAFAF8
N100 #F5F3EF
N200 #EAE7E2
N300 #D6D2CB
N400 #B0AB9F
N500 #8A857A
N600 #655F54
N700 #46423A
N800 #2E2C27
N900 #1A1816

Status

Success #4CAF7C
Warning #E8A838
Error #D95555
Info #4A90D9

2 — Typography

Display font — Outfit (headings)

--text-5xl · 60px · --fw-bold · --tracking-tight · Page hero H1 The calm ritual
--text-4xl · 48px · --fw-bold · --tracking-tight · Section H1 The calm ritual
--text-3xl · 36px · --fw-semibold · --tracking-tight · H2 The calm ritual
--text-2xl · 30px · --fw-semibold · --tracking-tight · H3 The calm ritual
--text-xl · 24px · --fw-semibold · --tracking-normal · H4 / card titles The calm ritual
--text-lg · 20px · --fw-medium · --tracking-normal · H5 / subtitle The calm ritual

Body font — DM Sans

--text-md · 18px · Body large / intros A nicotine-free ritual for calm, focused moments. Refillable flavors — mint, spice & more. Ätherische Aromen für die tägliche Auszeit. Arômes naturels pour votre pause zen.
--text-base · 16px · Default body A nicotine-free ritual for calm, focused moments. Refillable flavors — mint, spice & more. Ätherische Aromen für die tägliche Auszeit. Arômes naturels pour votre pause zen.
--text-sm · 14px · Secondary / captions A nicotine-free ritual for calm, focused moments. Refillable flavors — mint, spice & more. Ätherische Aromen für die tägliche Auszeit. Arômes naturels pour votre pause zen.
--text-xs · 12px · Badges / labels / legal A nicotine-free ritual for calm, focused moments. Refillable flavors — mint, spice & more. Ätherische Aromen für die tägliche Auszeit. Arômes naturels pour votre pause zen.

3 — Spacing Scale

--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
20px
--sp-6
24px
--sp-8
32px
--sp-10
40px
--sp-12
48px
--sp-16
64px
--sp-20
80px
--sp-24
96px

4 — Border Radius

--radius-xs
3px

--radius-sm
6px

--radius-md
10px

--radius-lg
14px

--radius-xl
20px

--radius-2xl
28px

--radius-full
∞

5 — Shadows

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-card

6 — Buttons

Variants

Sizes — Primary

Full-width (mobile "Add to cart" bar)

7 — Badges

New Sale Best seller Engraved Nicotine-free

8 — Product Card

🪵
New
★★★★★ 4.9 (128)

Zenstik Aroma Inhaler

Beech wood · 3 flavors

$29.90

🪵
Best seller
★★★★★ 5.0 (74)

Zenstik Aroma Inhaler

Dark wood · 6 flavors

$39.90 $49.90

🌿
★★★★★ 4.7 (46)

Refill Pack — Mint

6 cartridges · fits all models

$14.90

9 — Form Elements

Input states

Please enter a valid email address

10 — Trust Strip

Secure checkout
Ships in 7–9 business days
Free returns (30 days)
Nicotine-free · Not an e-cigarette
4.9 / 5 — 250+ reviews

11 — Price Display

Large — hero / PDP

$29.90

Free shipping over $50

Medium — card

€27.90

Small — mini-cart

£24.90

With strike-through

$39.90 $49.90