Color Guidelines

Color Guidelines

Use tokens from nextgen/tokens/tailwind.css. Prefer semantic utilities in templates; fall back to the raw scales only when a design needs a specific step. Browse swatches on Our Colors.

Semantic text

Use	Utility
Primary copy	text-text-primary (#231F20)
Secondary	text-text-secondary
Muted / helper	text-text-muted
Tertiary / quiet	text-text-tertiary
Brand accent	text-text-accent / text-primary-500
On dark surfaces	text-text-inverse

Surfaces

Use	Utility
Page / default	bg-bg-primary
Soft gray bands	bg-bg-secondary
Warm / cream	bg-bg-tertiary
Subtle	bg-bg-subtle
Row / card hover	hover:bg-bg-hover
Error wash	bg-bg-error

Brand & neutrals

• Primary scale (primary-100 … primary-1000) — brand orange; CTAs and accents usually use primary-500 (#fc3c22).
• Neutral scale — charcoal through light gray; text semantics map into this scale.
• Light gray / warm-white — supporting surfaces (light-gray-*, warm-white).
• State — danger, warning, success (forms, alerts). Prefer these over inventing new reds/greens.
• Alpha — black-alpha-* / white-alpha-* for media overlays (e.g. bg-linear-to-r from-black-alpha-50 to-transparent). Do not invent multi-stop from-black/55 gradients when a token exists.

Rules

1. No raw hex in templates when a semantic or scale token exists.
2. Don’t restate inherited color — if body / a parent already sets text-text-primary, don’t repeat it on every <p>.
3. Contrast — aim for WCAG AA (4.5:1 normal text, 3:1 large text). Dark logos on light surfaces; white logos on dark.
4. Accent sparingly — primary orange is for emphasis and CTAs, not large text blocks.
5. Light product surfaces are the default; inverse text is for intentionally dark bands (footer, full-bleed CTAs), not a system-wide dark theme.

Components

Filled / outline / link CTAs follow the buttons gallery — copy those color treatments rather than inventing new ones.

---

See also: Our Colors · Logo guidelines