Global Components

Typography

Display — The quick brown fox jumps

H1 — The quick brown fox jumps

H2 — The quick brown fox jumps

H3 — The quick brown fox jumps

H4 — The quick brown fox jumps

H5 — The quick brown fox jumps

S1 — The quick brown fox jumps

S2 — The quick brown fox jumps

S3 — The quick brown fox jumps

S4 — The quick brown fox jumps

P1 — The quick brown fox jumps over the lazy dog.

P2 — The quick brown fox jumps over the lazy dog.

P3 — The quick brown fox jumps over the lazy dog.

P4 — The quick brown fox jumps over the lazy dog.

P5 — The quick brown fox jumps over the lazy dog.

Button Regular

Button Small

Button Minor

Nav Link

Colors

Primary

primary/black

primary/white

Secondary

secondary/burgundy

secondary/cream

secondary/gold

Neutral

neutral/50

neutral/100

neutral/200

neutral/300

neutral/400

neutral/500

neutral/600

neutral/700

neutral/800

neutral/900

Utility

utility/success

utility/error

utility/warning

utility/sale

Semantic — text

text/primary — Aa

text/subdued — Aa

text/inverse — Aa

text/secondary — Aa

text/highlight — Aa

text/minor — Aa

text/sale — Aa

Semantic — fill

fill/primary

fill/inverse

fill/secondary

fill/tertiary

fill/subtle

fill/offer

fill/minor

Semantic — icon

icon/primary — ●

icon/inverse — ●

icon/subdued — ●

Semantic — button

button/primary

button/secondary

button/inverse

Buttons

Fill

Burgundy

Default

Hover

Disabled

Black

Default

Hover

Disabled

White

Default

Hover

Disabled

Text

Black

Default

Hover

White

Default

Hover

Minor

Black

Default

Hover

White

Default

Hover

Outline — with icon

Dark

Default

Hover

Light

Default

Hover

Outline — text only

Dark

Default

Hover

Light

Default

Hover

Note: hover columns use a static .is-hover modifier so all states are visible at rest (matching the Figma stacked-state layout). Real :hover and [disabled] are also wired up — try hovering the Default buttons to see the live transition. Full button components with focus / active states and link variants come from the Components prompt working on the Buttons page.

Atomic tokens

Scale

50 / 2px

100 / 4px

200 / 8px

300 / 12px

400 / 16px

500 / 20px

600 / 24px

800 / 32px

1000 / 40px

1200 / 48px

1500 / 80px

Border & opacity

border-width-s + border-radius-round (pill)

opacity-default (overlay)

Shadow

shadow-base — Figma shadows/base

Icons

UI

heart

phone

mail

user

bag

location

search

menu

plus

minus

close

caret

Social

pinterest

instagram

facebook

Pending — manual export needed

Three icons in the Figma Icons page are flattened multi-vector illustrations rather than single-path glyphs, so they can't be inlined via Figma MCP:

  • globe — 32 separate vector fragments (node 39:1715)
  • shopping-bag — 122 fragments (node 39:1843)
  • book — 13 fragments (node 39:1860)

To finish them: in Figma, select each icon → right-click → Copy/Paste as → Copy as SVG (or Export → SVG), then drop the markup into snippets/icon-globe.liquid, snippets/icon-shopping-bag.liquid, snippets/icon-book.liquid following the same shape as the other icon snippets (class icon-sc, fill="currentColor" or stroke variant, aria-hidden="true", no id / width / height on root).