Sale −17%Bestseller
Only 3 left
Design system · v1.0 · "Warm Artisan"
The Hearthwood look, on purpose.
Tokens, type and components behind every screen — warm, editorial, trustworthy. Toggle light/dark and device modes to see the system respond.
Colour tokens/colour.css — admin theme overrides --color-secondary
Primary leads (header, footer, hero, headings), Secondary acts (CTAs, links, sale highlights, active states), Accent warms (section tints, cards). Hover/pressed shades, lines and status colours are derived. All text pairs meet WCAG AA.
#2c2416
#8b6f47
#f9f6f0
derived
derived
#3f6b4f
#a94438
#8a611f
#161210
Typography Google Fonts · scale in px, fluid via device modes
Playfair Display carries headings and hero statements; Lato carries buttons, labels, prices and nav. Body copy is warm and plain-spoken — no lorem, ever.
H1 · 52px / 1.1 · Playfair 500Make room for warmth
H2 · 36px / 1.15 · Playfair 500Furnish it room by room
H3 · 24px / 1.25 · Playfair 500The Autumn Edit
Body · 16px / 1.6 · Lato 400
Solid wood, natural fibres and honest craft — furniture made for slow mornings, long dinners and every quiet moment in between.
Small · 12px / 1.4 · Lato 700 capsEyebrow / label — Free white-glove delivery
Price · Lato 900$1,899 $2,299
Spacing, shape & motion 8px grid · soft 8–12px corners · slow elegant fades
Space 8→968 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96
Radiussm 8 · md 12 · lg 16 · pill 999
Arch motif230px top corners for hero & imagery
Easecubic-bezier(.22,.61,.36,1)
Durationsfast .16s · med .24s · slow .42s
Shadowscard · hover · md · lg (warm umber tint)
Buttons Lato 700 · 48px min height · all states
Primary (default / hover / pressed)
Secondary (dark)
Ghost
On dark / loading / disabled
Sizes & icons
Inputs labels 12px caps · 48px fields · focus ring bronze
Default
Focus
Error + message
Enter a 5-digit ZIP
Disabled / select
Checkbox / radioWhite-Glove delivery
Stepper · swatches · slider
2
Badges, chips & toasts sale = bronze · new = espresso
Sale · −40%NewBestsellerOnly 3 leftOut of stock Free shipping
Oak Under $999
Avalon Sofa added to your cart
Code WELCOME10 applied — 10% off
That ZIP doesn't look right
The product card
One card, five moods
4:5 imagery, hover image swap, quick-add + quick-view, wishlist heart, sale & stock states. Skeleton shows on every data load.
Sale −23%Bestseller
Out of stock
Signature interaction tokens hotspot · AR placeholder (needs backend) · material swap
View in your space — an AR placeholder CTA ships on every PDP (data-needs-backend="ar-viewer"). Hotspot dots pulse at 2.4s on rgba(249,246,240,.28) rings; popover cards reuse product-card tokens. Material swatches swap gallery images with a 300ms crossfade.