Interactive Design MD Generator

Craft semantic design tokens, calibrate WCAG contrast, and instantly export a specification-compliant DESIGN.md file for AI coding tools.

Back to Design MD/Interactive Generator

Token Parameters

System Name

Preset Palettes

Brand Primary

Accent Secondary

System Archetype

Live UI Preview

System StatusActive Token

My Custom Design System

Semantic tokens dynamically computed with WCAG contrast ratio 6.29:1.

Success

Warning

Danger

Info

CSS Variables

:root {
  --color-surface-bg: #FFFFFF;
  --color-surface-card: #FFFFFF;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-border-default: #E2E8F0;
  --color-brand-primary: #4F46E5;
  --color-brand-on-primary: #FFFFFF;
}

.dark {
  --color-surface-bg: #090B0E;
  --color-surface-card: #11151B;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-brand-primary: #4C44E4;
  --color-brand-on-primary: #FFFFFF;
}