Bootstrap a Design System

You are helping me generate a complete color scheme for my design system — semantic color role tokens, as CSS custom properties ready to ship. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the theme setting (light-only / dark-only / both), any existing color decisions, and the product's density and brand stance. **Step 2 — Read the references:** Read the following from the Sistema knowledge base: - Color architecture synthesis: `/raw/principles/color/architecture` - Token architecture synthesis: `/raw/principles/tokens/architecture` The color architecture synthesis explains the four major architectural models, the non-negotiable floor (contrast requirements, foreground pairings, never-hardcode), and dark mode tonal shift logic. Use it to select the appropriate model for this product and to structure the output. **Step 3 — Clarify scope:** Theme mode: {{color_mode}} - **Light only:** generate `:root { }` with light mode values only - **Dark only:** generate `:root { }` with dark mode values only - **Both:** generate `:root { }` with light mode values, then `[data-theme="dark"] { }` with dark mode values **Step 4 — Generate the color scheme:** My color direction: {{color_direction}} Generate the following semantic roles as CSS custom properties. Use the naming pattern `--color-[role]`: **Required roles:** - `--color-primary` and `--color-on-primary` — primary action and its text - `--color-primary-container` and `--color-on-primary-container` — contained variant and its text - `--color-secondary` and `--color-on-secondary` — secondary action and its text - `--color-secondary-container` and `--color-on-secondary-container` - `--color-surface` — default background - `--color-surface-raised` — elevated surface (cards, sheets) - `--color-surface-overlay` — modal / dialog overlay surface - `--color-on-surface` — primary text on surface - `--color-on-surface-muted` — secondary / muted text on surface - `--color-border` — default border - `--color-border-focus` — focus ring color (must meet 3:1 against surface) - `--color-error` and `--color-on-error` — error states - `--color-success` and `--color-on-success` — success / confirmation states - `--color-warning` and `--color-on-warning` — warning states **For dark mode (if theme is "both"):** Do not invert light mode values. Use tonal shift logic: surface values draw from the dark end of the neutral palette; primary/secondary role colors draw from the lighter portion of each hue (higher lightness) to maintain contrast. Every `on-*` role must meet WCAG 4.5:1 against its paired surface. Flag any role where the contrast should be manually verified. **Step 5 — Update the living brief:** Update the Color entry in Key Decisions and append to the decision log: ``` [2026-05-13] — Color scheme generated — [note architecture model chosen, theme scope] ``` ---