Foundations
Color
Core neutrals plus a teal accent palette. Accents keep the same hex in both themes; dark mode only remaps surfaces.
Core
The dominant text and background colors across the site.
Ink
Primary text, primary buttons, icons
Plum
Body copy, nav links — near-black with a warm purple tint
Paper
Page background
Mist
Section / card background
Accent
Teal family used for promotional sections and callouts.
Teal
Sale tags, highlighted price, key accent
Seafoam
Secondary accent and campaign highlights
Sage
Award badge and soft callout backgrounds
Mint
Promo & campaign section backgrounds
Dark
Extra surface depth for dark mode. In light mode Abyss matches Paper, so chrome can use one class in both themes.
Abyss
Near-black teal chrome — sidebar, nav, drawers. Matches Paper in light mode.
Neutral
Gray 700
Secondary text
Gray 500
Muted / disabled text
Gray 300
Borders, dividers (inferred)
Feedback
Not directly observed as swatches — inferred from Bootstrap-derived CSS custom properties (--success, --danger, --warning) present in the site's stylesheet.
Success
In-stock / confirmation states
Danger
Errors, out-of-stock
Warning
Warnings, low stock
Do's and Don'ts
Reach for a color by its CSS variable or Tailwind class (bg-ink, text-muted-foreground) rather than copying the hex value — that's what lets a future palette change ripple out from one place instead of a find-and-replace.
Do
- ·Use Ink/Plum for primary text and Paper/Mist for backgrounds — that's the dominant pairing across the real site.
- ·Reserve Teal and Sage for the specific things they were sampled for (sale/accent, award badge) rather than general decoration.
- ·Reach for token classes so dark mode can remap surfaces and accents from one place.
Don't
- ·Don't hardcode a hex value in a component — always go through the token.
- ·Don't repurpose Gray 300 as a generic text color; it's calibrated for borders and dividers, not reading contrast.
- ·Don't use success/danger/warning decoratively — they're reserved for genuine state, not color variety.