brand-and-accent

Summary

The app paints with two blues, indigo and blue, and the design set names them brand and accent.

Why it matters

The app has no theme file. Every component names a Tailwind hue directly. The design set names colours by role, so it had to decide which hue plays which part.

Implications

• brand is indigo: primary buttons, the active nav item, tabs, focus rings, the spinner.
• accent is blue: text links, progress bars, the active lesson, the hero gradient.
• The two are mixed without a rule in the app. A primary button is indigo; the progress bar beside it is blue.
• Greys are mixed the same way: gray-* in apps/website, neutral-* in packages/ui. The set uses gray for text and neutral for borders.
• Green, red, blue and amber carry meaning on a question and a course. See question-types and sync-status.

Related

• question-types — what green, red and blue mean on an answer
• sync-status — what amber means on a course
• 2026-10-04-adopt-context-standard

Sources

• .context/designs/web/shared.css
• .context/designs/web/tailwind.config.js