Colour

• Charcoal is the base: text, wordmark, primary buttons.
• Yellow is an accent – NEVER a load-bearing surface or background colour.
• Backgrounds: off-white (color.background.base).
• Yellow never carries text or an icon on a light background (contrast 1.33:1 against background.base – illegible). Focus rings are charcoal, not yellow.
• The accent yellow is locked physically first. Pick it against a Pantone fan deck and lab dips, then derive the hex – never the other way round. A yellow chosen on screen may turn out impossible to dye, outside CMYK gamut, or without a usable embroidery thread. By then it is already in the site, Shopify, Klaviyo and Figma, and has to be picked again.

Charcoal

• color.charcoal.100 --color-charcoal-100 #d9d7d0
• color.charcoal.300 --color-charcoal-300 #8c8a82
• color.charcoal.500 --color-charcoal-500 #55534d
• color.charcoal.700 --color-charcoal-700 #33322e
• color.charcoal.900 --color-charcoal-900 #1a1a18

Yellow (accent)

• provisional — not yet locked
  color.yellow.200 --color-yellow-200 #faeaa3
• provisional — not yet locked
  color.yellow.400 --color-yellow-400 #f5d547

Semantic tokens

• color.text.base --color-text-base #1a1a18
• color.text.muted --color-text-muted #55534d
• color.text.inverse --color-text-inverse #f6f5f2
• color.background.base --color-background-base #f6f5f2
• color.background.elevated --color-background-elevated #ffffff
• color.background.inverse --color-background-inverse #1a1a18
• provisional — not yet locked
  color.accent.base --color-accent-base #f5d547
• provisional — not yet locked
  color.accent.subtle --color-accent-subtle #faeaa3
• color.border.base --color-border-base #d9d7d0
• color.border.strong --color-border-strong #8c8a82
• color.action.primary --color-action-primary #1a1a18
• color.action.primary-text --color-action-primary-text #f6f5f2