Establish Visual Language

You are establishing the visual language for this design system — translating the positioning brief into specific visual directions before any token values are generated. The output is `style-preview.html`: a self-contained static HTML file that demonstrates color, typography, shape, and surface treatment in a reviewable form. Human review and approval of this artifact is required before token generation begins. **Step 1 — Read the living brief and references:** Read `LIVING_BRIEF.md` from the project root. Confirm: product identity, density, theme scope, brand stance, and any existing color or visual decisions. Fetch and read the following from the Sistema knowledge base: - Visual language translation framework: `{{sistema_url}}/raw/principles/visual-language/overview` - Visual quality signals: `{{sistema_url}}/raw/principles/quality/visual-quality-signals` - Style tile format specification: `{{sistema_url}}/raw/principles/visual-language/style-tile-format` The visual language framework provides aesthetic reference vocabulary and structured translation from positioning to visual direction. The quality signals document defines the AI slop test, absolute bans, and OKLCH commitment levels. The style tile format specifies exactly what `style-preview.html` must contain. **Step 2 — Produce the visual direction brief:** Before generating any HTML, produce a short visual direction brief (3–5 sentences). This brief is the contract between the positioning brief and the style tile. It must answer: 1. Which 2–3 aesthetic frameworks does this product draw from? (Reference the visual language translation framework.) 2. What is the OKLCH color commitment level and why? (Reference the quality signals document.) 3. What is the typographic character: weight range, size range, whether mixed typefaces are in use? 4. Where on the sharp ↔ rounded spectrum does this product sit, and what is the preliminary radius estimate? 5. What does this system explicitly NOT look like? (Name 2–3 specific exclusions.) Run the AI slop first-order reflex check on the proposed visual direction: are any of the preliminary choices category-obvious defaults? If so, justify them explicitly or adjust. **Step 3 — Generate style-preview.html:** Generate a `style-preview.html` file containing all seven required sections from the style tile format specification: 1. Visual direction statement — the brief from Step 2, rendered in the file 2. Color palette — all proposed colors as swatches, labeled with hex, OKLCH values, and contrast ratios 3. Typography specimens — each type role rendered with sample text, labeled with role, size, weight, line height, tracking 4. Shape and radius specimens — each radius token and shadow level rendered 5. Surface treatment — default, raised, and overlay surfaces; composite card specimen 6. Color in context — primary in interactive elements, semantic colors in state examples 7. Reviewer notes — explicit checklist of decisions requiring human judgment Requirements per the format specification: - Self-contained HTML — no external dependencies - All color values shown as both hex and OKLCH - Every visual decision annotated with role name and value - Reviewer notes section must list each decision that requires human confirmation Quality constraints from the quality signals document: - Verify the color commitment level is consistent across all surface and neutral tokens - Check all proposed values against the absolute bans list - Run the first-order reflex test on the primary color - Flag any on-* pairing where contrast should be manually verified Write the file to `style-preview.html` at the project root. **Step 4 — Request review:** Pause and present the visual direction brief (from Step 2) as a summary. Then say: *"style-preview.html is ready for review. Open it in a browser and evaluate the seven sections against the reviewer checklist in Section 7 of the file. Specific decisions to focus on: [list 3–4 key choices that required judgment]. When you are satisfied, tell me to proceed — or tell me what to change."* Do not proceed to token generation until the user approves the style tile. **Step 5 — Update the living brief:** After approval, update the Key Decisions section of `LIVING_BRIEF.md` with the visual direction decisions. Include the following specific values so they are available for downstream plays: - OKLCH commitment level - Primary seed hex (the exact hex value to feed into the palette tool) - Neutral seed hex (warm or cool tinted gray seed) - Any secondary or feedback hue seeds if established Append to the Decision Log: ``` [date] — Visual language established — [commitment level, primary seed hex, typographic character, radius personality] ``` ---