Macaje Design System

Style Guide

Every token, type row, component state and spacing block the theme reads from — one page for visual QA. Not linked in navigation.

01

Brand palette

Navy#293353
Dark Navy#1F2740
Gold#C9A46A
Dark Gold#B8935A
Ivory#F8F6F2
Beige#EFEAE3
Taupe#6E6A65
White#FFFFFF
Navy Border#44507A
Light scheme (default)

Navy text, taupe subtext, navy button, gold sale price.

Dark scheme

White text, beige subtext, gold button, navy label.

02

Typography

Display / Hero — Days One

Everyday Luxury

Section heading (h2) — Days One

Shop by Collection

Product title — Mulish 600

Petite Pavé Huggie Hoops

Body — Mulish 400

Ethically sourced, hand-finished pieces designed to be worn every day — not saved for someday.

Caption — Mulish 400, taupe

Free shipping on orders over $75

Label / eyebrow — Mulish 600 uppercase

New Arrivals

Button — Mulish 600 uppercase
Nav — Mulish 500

Rings  Necklaces  Earrings

03

Buttons

Default / hover / focus live
Outline
Link
Disabled
04

Badges

-20% New Hot Sold Out
05

Inputs

06

Shadows

sm
md
lg
07

Spacing scale (8px base)

space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-5 · 24px
space-6 · 32px
space-7 · 48px
space-8 · 64px
space-9 · 96px
space-10 · 128px
08

Motion

Hover the box — luxury reveal easing, 300ms. Respects prefers-reduced-motion.