Color Palette

Core

Surface

Surface alt

Text

Heading

Muted

Border

Brand & accent

Brand

Brand hover

Brand light

Accent

Accent hover

Accent light

Controls

Button bg

Button text

Sec. btn bg

Input bg

Input text

Input border

Neutrals (primitives, global)

100

200

300

400

500

600

700

800

900

Status (global)

Success

Warning

Error

Info

Typography

Font roles

Role	Family	Used for	Preview
`font-heading`	"Space Grotesk"	Display, H1–H3	Heading
`font-subheading`	"Space Grotesk"	H4–H6, section titles	Subheading
`font-body`	Inter	Paragraphs, UI text	Body text
`font-accent`	"Space Grotesk"	Prices, stats, labels	Accent label

Type scale

Display

Heading 1

Heading 2

Heading 3

Heading 4

Body large

Body

UI — buttons, inputs

Caption

Label / eyebrow

Tracking

Tight tracking

Normal tracking

Wider tracking

Widest tracking

Leading

Tight leading pulls lines close together for dense headings.

Normal leading balances density and legibility for UI copy.

Relaxed leading opens lines for long-form reading comfort.

Live specimen — Product page

Premium Wool Coat

Winter Collection 2025

Crafted from 100% merino wool, this timeless coat combines warmth with elegant structure. Designed for the modern wardrobe — effortlessly transitions from morning meetings to evening events.

$189.00

Spacing System

Derived from space_base: 4px. Changing the base rescales the whole scale proportionally.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

Surfaces & Elevation

Border radius

rounded-sm

rounded-md

rounded-lg

rounded-input

rounded-full

Shadow elevation

shadow-sm

shadow-md

shadow-lg

shadow-xl

Layout System

--page-width

90rem

--page-width-wide

110rem

--page-margin

Content

20px each side

--radius-input

4px

Motion & Timing

Duration

Token	Value	Used for
`duration-fast`	150ms	Hover states, tooltips
`duration-base`	200ms	Buttons, inputs, badges
`duration-slow`	300ms	Drawers, modals, panels
`duration-slower`	500ms	Page transitions, reveals

Easing

Token	Curve
`ease-out`	cubic-bezier(0, 0, 0.2, 1)
`ease-in-out`	cubic-bezier(0.4, 0, 0.2, 1)
`ease-spring`	cubic-bezier(0.34, 1.56, 0.64, 1)

Live demo — hover each card

fast · ease-out

base · ease-in-out

slow · ease-out

slower · ease-spring

Buttons

Variants × states (size: md)

Variant	Default	Disabled	Loading
Primary
Secondary
Outline
Ghost

Hover preview (static opacity-90 mirrors the real hover:opacity-90)

Sizes (variant: primary)

Icons (leading / trailing / icon-only)

Form Elements

Email address (default)

Search (focus)

Postal code (error)

Enter a valid postal code

Promo code (disabled)

Size

Preferences

Email marketing SMS notifications

Delivery

Standard — Free Express — $9.99

Product Cards

Product image

Merino Wool Coat

Classic Collection

$189.00

Product image Sale

Linen Blazer

Summer Edit

$95.00

$159.00

Product image Sold out

Cashmere Scarf

Winter Essentials

$89.00

Product image New

Silk Evening Dress

Featured Pick

$299.00

Badges & Labels

Label badges

Sale New Low stock Sold out Featured In stock Out of stock Info

Pill variants

✓ Verified ! Pending ✕ Failed i Note ★ Premium

Variant color chips

Icons

cart

search

account

menu

close

arrow-right

arrow-left

check

minus

plus

trash

heart

share

filter

sort

chevron-down

chevron-right

star

eye

lock

truck

return

gift

info

warning

CSS Token Reference

Per-scheme tokens (from color-schemes.liquid)

CSS

/* Per-scheme, resolved live */
--color-surface:              #ffffff
--color-surface-alt:          #f7f7f7
--color-text:                 #121212
--color-text-heading:         #000000
--color-text-light:           #4b5563
--color-text-inverse:         #ffffff
--color-muted:                #767676
--color-brand:                #121212
--color-accent:               #c0392b
--color-border:               #e5e5e5
--color-shadow:               #000000
--color-button-bg:            #121212
--color-button-text:          #ffffff
--color-secondary-btn-bg:     #ffffff
--color-secondary-btn-text:   #121212
--color-secondary-btn-border: #121212
--color-input-bg:             #ffffff
--color-input-text:           #121212
--color-input-border:         #d1d5db

Global tokens (on :root)

CSS

/* Status — 4 semantic colors */
--color-success:              #16A34A
--color-warning:              #D97706
--color-error:                #DC2626
--color-info:                 #3B82F6

/* Neutrals — 10 primitives, global */
--color-neutral-50:           #F9FAFB
--color-neutral-100:          #F3F4F6
--color-neutral-200:          #E5E7EB
--color-neutral-300:          #D1D5DB
--color-neutral-400:          #9CA3AF
--color-neutral-500:          #6B7280
--color-neutral-600:          #4B5563
--color-neutral-700:          #374151
--color-neutral-800:          #1F2937
--color-neutral-900:          #111827

/* Radii (merchant-configurable) */
--radius-sm:                  6px
--radius-md:                  8px
--radius-lg:                  12px
--radius-input:               4px
--radius-full:                9999px

/* Motion */
--duration-fast:              150ms
--duration-base:              200ms
--duration-slow:              300ms
--duration-slower:            500ms

/* Layout */
--page-width:                 90rem
--page-width-wide:            110rem
--page-margin:                20px

/* Spacing base (all --space-N derived) */
--space-base:                 4px

Blocks

Display

Heading 1 — New arrivals this season

Heading 2 — Explore our collection

Heading 3 — Featured products

Heading 4 — Product details

Body large — Crafted with care and delivered with love.

Body — Every piece tells a story worth discovering.

Caption — Free shipping on orders over $100

Label — New collection