Design Tokens Only

Core principle: Every visual value in a className must resolve to a project design token defined in app.css. If a token doesn't exist for what you need, add one to the theme — never use a raw value.

This ensures one CSS change updates the entire app.

Colors — Semantic Tokens Only

Never use Tailwind's built-in color palette (red-500, gray-700, blue-100, etc.). Always use the project's semantic color tokens.

Available Color Tokens

Defined in apps/web/src/app.css under @theme inline and :root: