COLORS

Color tokens live in app/css/theme.css inside the single @theme block. Swatches read their values from that file. The full ordinal scales are on the tokens page.

Semantic roles

--color-text#e6ffe6Body text on the page and terminal surfaces
--color-text-secondary#a1b3a1Labels, captions and secondary text
--color-green#00ff41Headings, accents and interactive elements

Signal

--color-primary-500#00ff41The signal: headings, accents, large text
--color-primary-subtle#00ff4166Borders and dividers (signal at 40%)
--color-primary-border#00ff4133Decorative divider (signal at 20%, 1.5:1); never a control edge
--color-primary-quiet#00ff411aHover and current background (signal at 10%)

Surfaces and text

--color-secondary-950#000000Page background
--color-secondary-900#050505Shell and terminal backgrounds
--color-tertiary-50#e6ffe6Body text
--color-tertiary-400#8a9d8aExisting muted text; prefer text-secondary

Status

--color-senary-300#ff8a8aAlerts: form errors, shell errors, mixer clip LED
--color-senary-500#ff5f57Window-chrome close dot
--color-quinary-500#febc2eWindow-chrome minimize dot

Rules

  • The green and grey ramps carry the whole interface. Cyan and amber do not exist; red (senary) marks alerts only and amber (quinary-500) the window-chrome dot, nothing else.
  • Reference colors through Tailwind utilities backed by @theme (text-primary-500, border-primary-subtle). Never write raw hex in components.
  • A control edge (input, textarea) uses primary-500: the translucent primary-border and primary-subtle stops measure below the 3:1 non-text minimum (WCAG 1.4.11) on the black surface.
  • Do not use the signal green for paragraph text. Body copy uses text (tertiary-50).
  • Text and surface pairs are checked by the contrast gate in CI.