What problem does it solve? Applying a consistent visual theme across HTML, SVG diagrams, and jsgui3 controls often leads to hardcoded colors, inconsistent palettes, and lost design knowledge between sessions. This Skill standardizes the WLILO (White Leather + Industrial Luxury Obsidian) look through a reusable token schema and a write-back workflow for design learnings. ## Core Features & Use Cases - Token-Based Theming: Defines a minimal CSS variable schema (--wlilo-bg, --wlilo-panel, --wlilo-accent-gold, etc.) applied per surface instead of freestyle hex values. - Multi-Surface Support: Covers HTML/CSS via :root tokens, inline SVG via CSS variables in <defs><style>, build-time SVG variants for <img> embedding, and class-based jsgui3 controls. - Validation & Memory Write-Back: Runs svg-collisions checks on diagrams and appends reusable rules to PATTERNS.md or LESSONS.md so future agents reuse design decisions. - Use Case: When asked to restyle a dashboard or diagram to feel "WLILO", load the style guide, apply the token set to panels and accents, validate SVG output, and record any new reusable rule. ## Quick Start Restyle this HTML dashboard using the WLILO design system with obsidian panels and gold accents.
