AWE Design System

A living styleguide rendered from the theme's real design tokens. Edit snippets/awe-design-system.liquid to update everything below.

Source of truth: snippets/awe-design-system.liquid

Colours

Base palette

colors-100 #ffffff
colors-200 #f7f7f7
colors-300 #dddddd
colors-400 #323232
colors-500 #000000

Brand & material

awe-gold #baa58d
14k-yellow-gold-vermeil #d3bc8d
925-sterling-silver #d9d9d6

Semantic

error #b43420
success #1a762f
inactive #8f8f8f

Applied roles

text-primary
text-secondary
text-invert
surface-primary
surface-secondary
surface-invert
surface-brand
border-primary
border-invert

Typography

Font family: Figtree. Sizes are responsive (mobile → tablet → desktop). Values below are pulled from snippets/awe-design-system.liquid.

Awe-inspired by nature

.Headline XL 32px → 42px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Awe-inspired by nature

.Headline Large 20px → 24px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Awe-inspired by nature

.Headline Medium 18px → 20px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Awe-inspired by nature

.Headline Small 14px → 16px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Awe-inspired by nature

.Headline XS 12px → 14px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Awe-inspired by nature

.Headline XXS 11px → 12px (tablet/desktop) · 110% line-height · 0% tracking · 500 weight

Every piece tells a story. Regular body copy used across product descriptions and editorial content.

.Paragraph Regular 14px · 160% line-height · 0% tracking · 400 weight

Small body copy for captions, fine print and secondary details.

.Paragraph Small 12px · 160% line-height · 0% tracking · 400 weight

Shop the collection

.Link Large 14px · 110% line-height · 6% tracking · 500 weight · uppercase

View details

.Link Small 12px · 110% line-height · 6% tracking · 500 weight · uppercase

Font Weights

Aa Regular · 400
Aa Medium · 500
Aa Semibold · 600
Aa Bold · 700

Buttons

Rendered via {% render 'awe-button' %}. Minimum 48×48px touch target (WCAG 2.5.8).

Default

Outline

Secondary

Small size

With icons

Shop Now

Full width

Spacing

Base scale in 4px steps, plus named aliases (xxs → 2xl).

spacing-4 · 4px
spacing-8 · xs · 8px
spacing-16 · sm · 16px
spacing-24 · md · 24px
spacing-32 · 32px
spacing-48 · lg · 48px
spacing-64 · xl · 64px
spacing-96 · 2xl · 96px

Border Radius

none · 0px
xs · 2px
sm · 4px
md · 8px
lg · 16px
xl · 32px

Icons

Rendered via {% render 'awe-icons', icon: 'arrow-right' %}.

arrow-left
arrow-right
arrow-up
arrow-down