Skip to content
Hearth

Your cart

Your cart is empty. Let's find something you'll use every day.

Browse the shop
Subtotal$0.00

Shipping and taxes are calculated at checkout.

Checkout

Craft

Style guide

This project follows the Craft standard: theme variables → semantic variables → composite Tokens, all defined on Global Root. Change the seeds (--seed-neutral, --seed-accent) or --theme-* values to re-theme the whole shop without touching a Token. Use this page as the reference when you extend the design.

Color pairings

Background primary / Foreground primary--background-primary--foreground-primary
Background secondary / Foreground secondary--background-secondary--foreground-secondary
Background accent / Foreground on accent--background-accent--foreground-on-accent
Background accent subtle / Foreground primary--background-accent-subtle--foreground-primary
Background inverse / Foreground inverse--background-inverse--foreground-inverse
Background positive subtle / Foreground positive--background-positive-subtle--foreground-positive
Background negative subtle / Foreground negative--background-negative-subtle--foreground-negative
Background warning subtle / Foreground primary--background-warning-subtle--foreground-primary

Typography

Heading XL

Heading L

Heading M

Heading S

Text large — for introductions.

Text — the default body style for paragraphs across the shop.

Text small — captions, hints and footnotes.

Eyebrow

$48.00

Link

Buttons and badges

badgeis-badge-positiveis-badge-negative

Form controls

card

Bordered surface for grouped content.

surface

Tinted surface for summaries and empty states.

Project extensions

Semantic variables added beyond the Craft core list. Each derives from the theme layer.

  • --foreground-mutedPlaceholder glyphs and decorative text. Not for body copy (below 4.5:1).
  • --foreground-accentEyebrows, icons and link hover.
  • --foreground-on-accentText on --background-accent; pair verified at 4.5:1.
  • --background-accent-subtleHero backdrop, selected variant, badges.
  • --background-*-subtleStatus surfaces paired with the matching foreground intent.
  • --border-controlInput and secondary-button borders; 3:1 against the background.
  • --spacing-sectionVertical rhythm between page sections.
  • --radius-control / --radius-surface / --radius-pillCorner radii derived from --theme-radius.
  • --shadow-raisedElevation for the cart drawer.
  • --font-family-body / --font-family-headingType families. Upload Inter and Fraunces as assets, or change --theme-font-*.
  • --width-content / --width-prosePage and reading widths.