Theme preview
The shipping design is the light trade-catalogue system. The charcoal one it replaced is kept whole — switch between them below to compare. Every component on this page uses the same tokens the real store uses, so what you see here is what the site does.
To make a choice permanent, change data-theme="light" on the<html> element in src/layouts/BaseLayout.astro, and update themeColor in src/config/site.ts to match the page ground.
Choose a theme
Accent ramp (live)
accent-400
Small accent text, focus ring, button hover
accent-500
Buttons, badges, active states
accent-600
Decorative glows only — too dark for text
on-accent
Text colour for filled accent surfaces
Charcoal ramp
ink-950
Page background
ink-900
Raised sections
ink-850
Hover surface
ink-800
Cards / chips
ink-750
Subtle fills
ink-700
Borders
ink-600
Strong borders
ink-500
Disabled / dividers
Text on the charcoal base
- The quick brown fox jumps over the lazy dogfog-5014.4:1
- The quick brown fox jumps over the lazy dogfog-10013.5:1
- The quick brown fox jumps over the lazy dogfog-20011.3:1
- The quick brown fox jumps over the lazy dogfog-3009.4:1
- The quick brown fox jumps over the lazy dogfog-4007.7:1
- The quick brown fox jumps over the lazy dogfog-5006.1:1
Contrast measured against ink-950. All steps clear the 4.5:1 AA threshold for body text.