Skip to content
Documentation

Colors

FieldValue
TypeSkill Resource
Source~/.copilot/skills/design/references/colors.md
DescriptionNot specified

Source Content

Colors

Canonical decisions: ADR-001 (design tokens), ADR-006 (color and theming). Full HSL value tables, brand tokens, status tokens, and the 30+ named accent system live in tokens-and-theming.md — this file is the fast rule-of-thumb reference.

The rule

Semantic tokens only — never raw hex or Tailwind palette numbers (e.g. never blue-500). Use text-foreground, bg-card, border-border, text-primary, bg-muted, etc. Opacity modifiers (bg-muted/40, bg-primary/10) are fine — they vary presence, not the token.

{/* WRONG: raw palette number, breaks theming */}
<div className="bg-blue-100 text-gray-700">


{/* RIGHT: semantic tokens, theme-safe */}
<div className="bg-muted text-muted-foreground">

Quick rules

  • text-muted-foreground for icons and supporting text — never raw gray.
  • border-border for all neutral borders — never border-gray-200 or similar.
  • bg-muted/40 (opacity modifier) for quiet backgrounds that need less presence.
  • For dark mode: tokens adapt automatically via [data-theme="night"] — never conditionally swap classes.
  • Never convey status or meaning by color alone — always pair with an icon or text (see foundation-a11y.md).

scripts/lint_tokens.sh flags raw hex codes and raw Tailwind palette classes (bg-blue-500, text-gray-700, etc.) in .tsx/.jsx/.ts/.css files.

Where to look next