| name | moai-domain-brand-design |
| description | Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.
|
| license | Apache-2.0 |
| compatibility | Designed for Claude Code |
| allowed-tools | Read, Write, Edit, Grep, Glob |
| user-invocable | false |
| metadata | {"version":"1.0.0","category":"domain","status":"active","updated":"2026-04-20","tags":"design, brand, visual-identity, design-tokens, wcag, typography, color-palette, hero-section","related-skills":"moai-domain-copywriting, moai-workflow-gan-loop, moai-domain-uiux"} |
| progressive_disclosure | {"enabled":true,"level1_tokens":100,"level2_tokens":5000} |
| triggers | {"keywords":["design-tokens","color-palette","typography","hero-section","wcag","visual-identity","design system","brand design","spacing system","component spec"],"agents":["expert-frontend"],"phases":["run"]} |
moai-domain-brand-design
Visual design system skill for brand-aligned web projects. Absorbed from agency-design-system (v1.0.0). Enforces hero-first chaining, WCAG 2.1 AA contrast, and structured design token output for downstream implementation.
Quick Reference
Entry Conditions
Before generating design output, verify:
.moai/project/brand/visual-identity.md exists and contains no _TBD_ markers.- Copy scope is defined (from
moai-domain-copywriting JSON output or inline brief).
- Target framework is confirmed (from
.moai/config/sections/design.yaml default_framework).
If visual-identity.md has unresolved _TBD_ markers, stop and request brand interview completion.
If the defined color palette conflicts with generated design tokens, execution halts and a conflict report is returned (see Error Handling below).
Figma Integration
Figma integration is disabled by default. Check .moai/config/sections/design.yaml:
figma:
enabled: false
If figma.enabled: true and a public Figma file URL is provided, extract design tokens from the Figma file. Otherwise use visual-identity.md as the sole source of truth.
Implementation Guide
Hero-First Chaining
The hero section establishes the visual tone for the entire site. All subsequent sections chain from it:
- Extract hero background color, typography, and spacing from
visual-identity.md.
- Derive complementary section colors using the established contrast ratio rules.
- Apply consistent spacing scale across all sections (do not reset per section).
- Navigation and footer inherit hero's typographic scale.
Hero section requirements:
- CTA button is visible above the fold on mobile (375px viewport, 667px height).
- Headline contrast ratio against background: minimum 4.5:1 (WCAG AA).
- Hero image or background: never pure white (#FFFFFF) unless brand explicitly specifies.
Design Token Extraction
Extract and output the following token categories from visual-identity.md:
Color tokens:
color.primary: Brand primary color (hex or OKLCH)- : Text on primary background (must pass 4.5:1 contrast)
