Palette

Cheetah's palette has two halves: a deep, slightly cool slate background system, and two neon brand hues (teal + pink) that punch through it. The deep neutrals carry the content; the neon does the work of signaling — interactivity, status, attention.

All tokens are defined in src/app.css under @theme. Don't hard-code hex codes elsewhere — reference the tokens.

Neutrals — backgrounds and foregrounds

The background is deep slate, not pure black. Pure black on a long-form reading surface is fatiguing; the slightly cool slate (#070912) reads as black at a glance but is easier on the eyes over time. The foreground is a warm cream — #eae6d7 — to balance the cool background and keep the docs feeling editorial rather than clinical.

Cheetah Teal — the neon

The full teal ramp goes from a near-white tint (teal-50) through the brand value (teal-700 = #008f9f) to a deep aquatic (teal-950). The neon lives at teal-400 (#0cffff) and teal-500 (#00e1ea) — these are the values to reach for when you want the synth-wave punch.

Starred values are load-bearing:

• teal-400 #0cffff — interactive elements at rest (links, button text), neon chrome (viewfinder brackets), highlights in the API reference.
• teal-500 #00e1ea — primary brand interactive (buttons, status indicators), HUD label color.
• teal-700 #008f9f — the official "Cheetah brand teal." Use this where you'd put a brand mark.

Cheetah Pink — the alarm

The pink ramp parallels the teal in structure. Brand pink lives at pink-600 (#d72e5d). Use pink sparingly — it's the alarm channel, the status indicator, the alpha banner. If pink and teal are both on a surface, the pink should always feel like the event and the teal should always feel like the system.

• pink-400 #f37992 — readable pink-on-dark text (status pill labels).
• pink-500 #e94a6e — secondary alarms, "STUB" / "ALPHA" badges.
• pink-600 #d72e5d — primary alarm color, the alpha banner background, blockquote left-border.

Usage rules

A short list of rules to keep the palette coherent:

1. Never use pure black #000 for backgrounds. Always use bg-base (#070912) or higher tiers.
2. Never use pure white #fff for body text. Use fg-base (#eae6d7). Reserve #fff (fg-stark) for points of strong emphasis (a bold word inside a paragraph, an active state).
3. Teal is the system, pink is the event. If both appear on the same surface, the pink element should be the one drawing attention to a specific change or state.
4. Saturated neon (teal-400, pink-500) is for moments, not surfaces. Don't paint large areas with these — they're meant to glow against the deep slate.
5. Tokens, not hex. Reference CSS variables (var(--color-teal-400)) or Tailwind utilities (text-[color:var(--color-teal-400)]). Never hardcode hex codes outside src/app.css.
6. Mirror cheetah-ui. When cheetah-ui updates its brand tokens, this site updates too. Don't drift.