Colors

All color tokens are defined in packages/config-tailwind/theme.css as Tailwind v4 @theme variables. They are available as both Tailwind utilities and CSS custom properties.

Brand Palette

Token	CSS Variable	Hex	Tailwind Class
Primary Red	`--color-brand-red`	`#C0392B`	`bg-brand-red` / `text-brand-red`
Dark Background	`--color-brand-dark`	`#0A0A0A`	`bg-brand-dark`
Charcoal Surface	`--color-brand-charcoal`	`#1A1A1A`	`bg-brand-charcoal`
Gray Border	`--color-brand-gray`	`#2D2D2D`	`border-brand-gray`

Semantic Usage

Primary Red — `#C0392B`

The signature red is used for:

Primary CTA buttons (bg-brand-red)
Active link states and hover accents
Section dividers and decorative bracket motifs [ ]
Badge and tag backgrounds

Never use primary red for body copy or large text blocks. It is an accent color, not a base.

Dark Background — `#0A0A0A`

The near-black page background. Applied to:

<html> / <body> background
Full-bleed hero sections
Dark card surfaces when layered on charcoal

Charcoal Surface — `#1A1A1A`

A slightly lighter surface for layering depth:

Navigation bar
Cards and panels
Code block backgrounds
Modal overlays

Gray Border — `#2D2D2D`

The default border and divider color:

<hr> dividers
Card borders
Input field outlines
Table row separators

Extended Palette (Derived)

These are not Tailwind tokens but are used in component-level CSS as needed:

Name	Hex	Usage
Red Dim	`#990000`	Badge backgrounds, hover state on red buttons
Red High	`#FF3333`	Focus ring on dark backgrounds
Muted	`#4A4A4A`	Secondary text, meta labels
Cream	`#E8E0D0`	Rare warm accent on print/PDF exports

Accessibility

All text-on-background combinations used in the UI meet WCAG 2.1 AA contrast requirements:

Foreground	Background	Ratio	Pass
`#F5F5F5`	`#0A0A0A`	18.5:1	AA + AAA
`#F5F5F5`	`#1A1A1A`	15.0:1	AA + AAA
`#CC0000`	`#0A0A0A`	5.2:1	AA
`#FF3333`	`#0A0A0A`	7.4:1	AA + AAA

Token Source

@theme {
  --color-brand-red: #C0392B;
  --color-brand-dark: #0A0A0A;
  --color-brand-charcoal: #1A1A1A;
  --color-brand-gray: #2D2D2D;
}