Design System Semantic Token Architecture & Component Matrix
Architect scalable design tokens (color, spacing, typography) and component variant matrices.
Compatibility & Specs
Compatible AI Models
ClaudeChatGPTGemini
Last UpdatedOct 3, 2026
Customizable Variables4 parameters
Main Prompt Template
175 words • 1371 characters
You are a Principal Design Systems Architect bridging UI design (Figma) and modern frontend code (CSS Variables, Tailwind CSS, Radix UI). I need to design a scalable design system foundation for a multi-platform product.
Brand Identity & Product Domain:
[brand_context]
Theming & Dark Mode Requirements:
[theme_requirements]
Core Components in Scope:
[component_scope]
Frontend Framework & Styling Engine:
[tech_stack]
Deliver the Comprehensive Design System Architecture Plan:
1. 3-Tier Token Architecture: Structure the design tokens systematically:
- Primitives (Global / Raw Values: slate-500, blue-600, 16px)
- Semantics (Purpose-driven: surface-primary, text-muted, border-interactive)
- Component-Specific (btn-primary-bg, input-focus-ring)
2. Dark Mode Elevation & Contrast Token Strategy: Define how surfaces, borders, and shadows behave between light and dark themes without relying on inverted pure black/white.
3. Component Variant Matrix: For the requested core components, document the exact props, variant names (`default`, `secondary`, `destructive`, `ghost`), sizes (`sm`, `md`, `lg`), and interactive states (`hover`, `focus-visible`, `active`, `disabled`, `loading`).
4. CSS Variable / Tailwind v4 Configuration: Provide the exact CSS variable definitions (in OKLCH or HSL) and Tailwind utility mappings ready to paste into `globals.css`.
Tip:Variables marked in purple brackets can be tailored below.
Customize Prompt
Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.
Parameters (4)* Indicates required field
[brand_context]
Visual personality and aesthetic target
[theme_requirements]
Light, dark, high-contrast, or multi-tenant custom branding
[component_scope]
The primary components to specify in this iteration
[tech_stack]
Tailwind CSS, CSS Modules, or Styled Components
4 parameters active
Live Customized OutputLive Preview
231 wordsYou are a Principal Design Systems Architect bridging UI design (Figma) and modern frontend code (CSS Variables, Tailwind CSS, Radix UI). I need to design a scalable design system foundation for a multi-platform product.
Brand Identity & Product Domain:
Enterprise AI workflow platform with an ultra-clean, technical, high-precision aesthetic inspired by Linear and Vercel.
Theming & Dark Mode Requirements:
Flawless light and dark mode switching with system preference detection; must maintain strict 4.5:1 text contrast across all surfaces.
Core Components in Scope:
Button, Text Input with Prefix/Suffix, Card Container, and Modal Dialog.
Frontend Framework & Styling Engine:
Next.js 15, Tailwind CSS v4, CSS Variables in OKLCH color space, and Radix UI / shadcn.
Deliver the Comprehensive Design System Architecture Plan:
1. 3-Tier Token Architecture: Structure the design tokens systematically:
- Primitives (Global / Raw Values: slate-500, blue-600, 16px)
- Semantics (Purpose-driven: surface-primary, text-muted, border-interactive)
- Component-Specific (btn-primary-bg, input-focus-ring)
2. Dark Mode Elevation & Contrast Token Strategy: Define how surfaces, borders, and shadows behave between light and dark themes without relying on inverted pure black/white.
3. Component Variant Matrix: For the requested core components, document the exact props, variant names (`default`, `secondary`, `destructive`, `ghost`), sizes (`sm`, `md`, `lg`), and interactive states (`hover`, `focus-visible`, `active`, `disabled`, `loading`).
4. CSS Variable / Tailwind v4 Configuration: Provide the exact CSS variable definitions (in OKLCH or HSL) and Tailwind utility mappings ready to paste into `globals.css`.
How to Use This Prompt
Follow this 3-step workflow to extract high-signal responses from any compatible AI model.
01
1. Tailor the Parameters
Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.
02
2. Send to AI Model
Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.
03
3. Review and Iterate
Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.
Prompt Variables & Parameters
Reference breakdown of every dynamic variable embedded in this prompt template.
| Placeholder | Parameter Name | Type | Status | Description & Guidance |
|---|---|---|---|---|
| [brand_context] | Brand Identity & Product Domain | text | Required | Visual personality and aesthetic targetDefault: Enterprise AI workflow platform with an ultra-clean, technical, high-precision aesthetic inspired by Linear and Vercel. |
| [theme_requirements] | Theming & Dark Mode | text | Required | Light, dark, high-contrast, or multi-tenant custom brandingDefault: Flawless light and dark mode switching with system preference detection; must maintain strict 4.5:1 text contrast across all surfaces. |
| [component_scope] | Core Components in Scope | text | Required | The primary components to specify in this iterationDefault: Button, Text Input with Prefix/Suffix, Card Container, and Modal Dialog. |
| [tech_stack] | Frontend & Styling Engine | text | Required | Tailwind CSS, CSS Modules, or Styled ComponentsDefault: Next.js 15, Tailwind CSS v4, CSS Variables in OKLCH color space, and Radix UI / shadcn. |
Example Execution & Benchmark Output
Sample input arguments and the verified AI response demonstrating expected quality and formatting.
Sample VariablesInputs
[brand_context]
Enterprise AI workflow platform with an ultra-clean, technical, high-precision aesthetic inspired by Linear and Vercel.
[theme_requirements]
Flawless light and dark mode switching with system preference detection; must maintain strict 4.5:1 text contrast across all surfaces.
[component_scope]
Button, Text Input with Prefix/Suffix, Card Container, and Modal Dialog.
[tech_stack]
Next.js 15, Tailwind CSS v4, CSS Variables in OKLCH color space, and Radix UI / shadcn.
Expected AI ResponseVerified Result
### Enterprise Design System Token Architecture
#### 1. 3-Tier Token Strategy
```
Tier 1: Global Primitives (colors/raw-palette)
↓
Tier 2: Semantic Design Tokens (e.g., --bg-surface, --text-secondary)
↓
Tier 3: Component Token Enclosures (e.g., --button-primary-hover)
```
#### 2. CSS Variables in OKLCH (`globals.css`)
```css
:root {
--background: oklch(0.99 0.002 240);
--surface: oklch(0.97 0.005 240);
--surface-raised: oklch(1 0 0);
--border-subtle: oklch(0.92 0.005 240);
--border-interactive: oklch(0.85 0.01 240);
--text-primary: oklch(0.18 0.02 240);
--text-muted: oklch(0.52 0.02 240);
--primary: oklch(0.58 0.22 260);
--primary-foreground: oklch(0.99 0 0);
}
.dark {
--background: oklch(0.13 0.015 260);
--surface: oklch(0.16 0.018 260);
--surface-raised: oklch(0.20 0.02 260);
--border-subtle: oklch(0.24 0.02 260);
--border-interactive: oklch(0.32 0.025 260);
--text-primary: oklch(0.96 0.005 240);
--text-muted: oklch(0.68 0.015 240);
--primary: oklch(0.65 0.22 260);
--primary-foreground: oklch(0.99 0 0);
}
```
#### 3. Button Component Matrix
* **Variants:** `primary` (solid brand), `secondary` (surface-raised with subtle border), `outline` (transparent with border-interactive), `ghost` (transparent hover), `destructive` (error red).
* **Sizes:** `sm` (h-8 px-3 text-xs), `md` (h-9 px-4 text-sm), `lg` (h-11 px-6 text-base).
* **States:** Focus rings must use `ring-2 ring-primary ring-offset-2 ring-offset-background` to guarantee accessibility across both themes.
Best Use Cases
Scenarios and roles where this prompt produces maximum leverage.
Design systems leads setting up scalable token naming conventions in Figma and code
Frontend engineers refactoring inconsistent CSS classes into cohesive design tokens
Teams transitioning applications to dark mode with predictable contrast ratios
Tips for Best Results
Techniques to elevate response fidelity
- •Provide rich background context rather than one-sentence inputs to receive deep, non-generic responses.
- •Engage in multi-turn conversation: use the initial output as a baseline, then ask the AI to sharpen specific sections.
- •Prompt the model to highlight any hidden assumptions or missing trade-offs in its recommendations.
Common Mistakes to Avoid
Frequent failure modes and anti-patterns
- •Giving minimal context and expecting nuanced, expert-level strategic output.
- •Not validating factual references, citations, or statistical claims with verified primary sources.
- •Skipping the customization step and pasting raw bracketed template variables into the AI chat.
Part of Curated Collections
This prompt is sequenced as part of these goal-oriented workflows
Related AI Prompts
Complementary workflows in Design & UI/UX
Design & UI/UXintermediate
UI Design Visual Hierarchy, Contrast & Spatial Rhythm Critique
Conduct an objective, rigorous visual critique of a digital interface layout, typography, and density.
claudechatgptgemini
#design#ui-critique#visual-hierarchy
Design & UI/UXadvanced
WCAG 2.2 AA Accessibility & Inclusive Design Compliance Audit
Audit digital interfaces for WCAG 2.2 AA compliance, color contrast, keyboard focus, and screen reader UX.
claudechatgptgemini
#design#accessibility#wcag
Reactadvanced
React Component Composition & Compound Component Architecture Review
Refactor bloated prop-drilling components into clean, composable compound components with flexible layouts.
claudechatgptgemini
#react#compound-components#component-architecture