> Canonical URL: https://codingcat.dev/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-3-type-scale # Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens | Impeccable: Automated Design Review & Polish for AI UI and Motion | CodingCat.dev Course [🧶 Impeccable: Automated Design Review & Polish for AI UI and Motion](/course/impeccable-automated-design-critique)Section 1.3 · Lesson 3 of 5[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design)[![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video](/topic/video)[![](/logos/tags/web-technologies-symbol-light.svg)![](/logos/tags/web-technologies-symbol-dark.svg)Web Standards](/topic/web-technologies)[← Prev Lesson](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-2-impeccable)[Next Lesson →](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-4-spring-tiers) # Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens ![Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens Architecture Diagram](https://cdn.sanity.io/images/hfh83o0w/production/8959946c17c836c20912d46409b46d3a1c0a507c-1376x768.png?w=1376&q=82&fit=max&auto=format) ## 1. The 15-Second Hook Welcome to Lesson 3 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens and see how it powers our deterministic 3D AJ and code-rendered video pipeline. ## 2. Architecture Mental Model (Visual Diagram) Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, Type Scale and WCAG AAA enforce a deterministic frame contract. ## 3. Show Me the Code (docs/style_guide.md) Copied! 🐾📄 docs/style_guide.mdtypescript ``` ## Impeccable & CodingCat.dev Motion Style Contract - Banned: centered title on generic gradient, everything fading in, glowing neon boxes. - Palette: Obsidian `#0B1326`, Chalk `#FAF9FC`, Royal Purple `#7C3AED`, Electric Lime `#C5E86C`. - Typography: `Nunito` 900 display, `Inter` UI, `JetBrains Mono` code, `Virgil` diagrams. - Pacing: Something new on screen every 2 to 4 seconds; hold headlines long enough to read. ``` In docs/style_guide.md, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized. ## 4. Production Trade-Off Matrix DimensionDeterministic 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionDeterminismPure function of time t via window.seek(t)Non-deterministic timers & Math.random()Any frame renders identically on demand.Visual PolishContact-sheet critique loop + W3C tokensFirst unreviewed render ships as finalEliminates overlapping text and dead beats.3D & Mascot RigUnified 57-path 2D SVG + Three.js 3D GLB AJStatic flat raster imagesInteractive orbital 3D + 120 BPM lip-sync.Production Cost$0 open-source local RTX 5090 pipeline$1,200+ agency fee or per-minute SaaS cliffScales across 95+ lessons with zero marginal cost. When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost. ## 5. Verdict & AJ Pro-Tip > AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your Type Scale setup has zero non-deterministic state leaks. Adopt Type Scale inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue! ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Impeccable: Automated Design Review & Polish for…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Impeccable: Automated Design Review & Polish for AI UI and Motion: Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens: start with Core Architecture & Deterministic Implementation, implement Impeccable: Automated Design Review & Polish for AI UI and Motion, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp) Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](https://cdn.sanity.io/images/hfh83o0w/production/b144a4ce077ac03d081ed66396a7cffebbcdb24f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/chrome-devtools-mcp-visual-agent-loops)November 4, 2026[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs) ### [Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](/course/chrome-devtools-mcp-visual-agent-loops) Give your AI agent eyes inside the browser. Use Chrome DevTools MCP so your agent inspects its own rendered video frames, WebGL canvases, and DOM layouts before exporting. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/impeccable-automated-design-critique) ## Impeccable: Automated Design Review & Polish for AI UI and Motion 3/51 ### Core Architecture & Deterministic Implementation - [1.1Lesson 1: Why Default LLM Prompts Produce Centered Gradient Slop ('Brief Contagion')](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-1-slop-trap) - [1.2Lesson 2: Installing `pbakaus/impeccable` & Wiring Design Gates into `CLAUDE.md`](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-2-impeccable) - [1.3Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens▶](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-3-type-scale) - [1.4Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-4-spring-tiers) - [1.5Lesson 5: Automated Pre-Export Polish Passes on Storyboards & Contact Sheets](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-5-polish-gate) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)