moai-domain-brand-design

You extract design tokens by running the workflow with your visual-identity.md file to generate categorized color, typography, spacing, radius, and shadow specifications suitable for web projects. The process applies hero-first chaining to parse brand guidelines and output structured token definitions.

To generate a WCAG 2.1 AA compliant visual design system, the workflow validates extracted color tokens against accessibility standards during component specification. It enforces contrast rules across all generated themes and components to ensure accessible web design.

Yes, you can export design tokens to CSS custom properties and Tailwind CSS. The workflow produces JSON-based token output that maps directly to CSS variables and Tailwind configuration, enabling seamless integration into your web styling workflow.

Yes, the design token workflow supports optional dark mode. It extracts and categorizes base brand tokens from the visual identity file, allowing you to generate parallel dark-mode themes while validating both light and dark variants against accessibility standards.

The best way to translate brand guidelines into scalable UI specs is to categorize extracted tokens into color, typography, spacing, radius, and shadows. This approach follows design-system guidelines to produce reusable, accessible component specifications.

Yes, you need a visual-identity.md file because the workflow performs identity validation against it. This file provides the source brand guidelines required for hero-first token extraction and subsequent accessibility compliance checks.