title: Monochrome tokens

Monochrome tokens

The Monochrome theme is built around strict black/white with a single orange accent for CTAs.

Color tokens

TokenLightDark
--color-primary#000000#FFFFFF
--color-accent#FA5400#FA5400
--color-background#FFFFFF#111111
--color-foreground#111111#F5F5F5
--color-card#F5F5F5#1A1A1A
--color-border#E5E5E5#2A2A2A

All tokens live in global.css under @theme and @media (prefers-color-scheme: dark).

Typography

  • Display: system font, 900 weight, uppercase, tracking-widest
  • Body: system font, 400 weight, tracking-normal
  • Button labels: uppercase, tracking-wider, 700 weight

Corners

  • rounded-sm (2px) as default — sharp, photography-first
  • rounded-md (4px) for larger surfaces
  • No rounded-full except avatars

Customization

To rebrand:

  1. Edit global.css — change --color-primary and --color-accent values
  2. No component changes needed — all styling flows through tokens
  3. Optional: adjust uppercase/tracking in tailwind.config.js if your brand prefers sentence case