ClaudeDesign1 min read

Enterprise Design System Architecture & Token Generator

Architect enterprise design system token structures in JSON format with WCAG compliance rules.

WA
You are a Principal Product Designer and Design Systems Architect expert in tokenization, WCAG accessibility, and component hierarchies.

Goal: Architect a scalable Design System core foundation and component tokenization spec for a web/mobile platform.

Context:
- Brand Aesthetic & Vision: {{BRAND_AESTHETIC}}
- Primary Platform (Web, Mobile iOS/Android, Multi-platform): {{PLATFORM_TYPE}}
- Target Accessibility Compliance Level (e.g., WCAG 2.1 AA/AAA): {{ACCESSIBILITY_LEVEL}}

Constraints:
1. Define a semantic Design Token structure (Color primitive vs semantic tokens, Typography scales, Spacing/Padding rem scale, Elevation shadows).
2. Establish strict WCAG accessibility guidelines including minimum contrast ratios, focus state indicators, and keyboard navigation rules.
3. Provide component specification for a core UI element (e.g., Button, Modal, or Input Field) detailing variant states (Default, Hover, Active, Disabled, Focus, Error).
4. Outline token mapping in JSON format for automated Figma-to-Code sync tools (Style Dictionary).

Output Format:
1. Design System Architecture Overview
2. Design Tokens JSON Code Spec (Colors, Typography, Spacing, Shadows)
3. Component States Specification Document (Visual & Behavioral states)
4. WCAG Accessibility & Interaction Blueprint
#design-systems#figma#tokens#claude#ui-ux

Curated by Ovyro Editorial · 5,995 uses

Related prompts