Visual DNA System Manager
Standardized Design Tokens Engine & Color System
Centralize colors, Satoshi typography scales, spacing tokens, and shadow profiles into machine-readable variables. Export seamlessly to Tailwind CSS v4, CSS variables, or Style Dictionary.
simple explanation
5th grade clarityWhat are Design Tokens? (5th Grade Explanation)
Think of Design Tokens like a Master Recipe Book for your website. Instead of writing color names or font sizes repeatedly on every page, you give each color a special name tag (like --color-primary) and use that name tag everywhere.
1. One Master Color Switch
If you decide to change your brand color from blue to purple, you change it once in your token recipe book and every button on your website updates automatically.
2. Perfect Harmony & Scale
Tokens keep your text sizes, spacing, and box corners consistent so every page looks like it belongs to the exact same family.
3. Speaks AI & Code
Design tokens convert your colors into code variables that AI assistants like Cursor and Claude understand effortlessly.
token sandbox
color & typography tokensInteractive Token Explorer & Format Switcher
Toggle between OKLCH and HEX formats, inspect design token roles, and copy ready-to-use CSS/Tailwind configurations.
Extracted OKLCH Palette Tokens
Main brand interactive element & focused states
Primary dark canvas background surface
Container cards, popovers, and elevated panels
Structural hairline dividers & grid lines
Primary headings & high contrast text (15.2:1 ratio)
Secondary labels, timestamps, and subtitles
@theme inline {
--color-primary: oklch(0.546 0.245 262.9);
--color-background: oklch(0.12 0.005 260);
--color-card: oklch(0.15 0.008 260);
--color-border: oklch(1 0 0 / 14%);
--font-sans: "Satoshi", sans-serif;
--font-mono: "Geist Mono", monospace;
--radius-xl: 0.75rem;
}token hierarchy
system design3-Tier Token Architecture
How enterprise design systems separate primitive values, semantic aliases, and component-specific variables.
Global Primitives
Raw value definitions (e.g. --blue-500: oklch(0.54 0.24 262)). Raw building blocks with zero semantic meaning.
Semantic Aliases
Purpose-driven tokens (e.g. --color-primary: var(--blue-500)). Assigns functional roles like primary, background, or error.
Component Scoped
Element-specific bindings (e.g. --button-bg: var(--color-primary)). Isolates component state changes safely.
faq
design tokens faqDesign Tokens FAQ
Common questions about setting up and maintaining design token systems.
Why does GetDesign.md use OKLCH color space?
OKLCH provides perceptually uniform color adjustments. Unlike RGB or HSL, changing lightness or hue in OKLCH keeps contrast levels predictable across all colors.
How do I pass design tokens to Cursor or Claude Code?
Copy the generated Tailwind CSS v4 code or CSS custom properties into your main styles.css file and reference them in your system prompt (.cursorrules or AGENTS.md).
Build Your Design Token System Today
Centralize your visual variables or explore our atomic component library for pre-styled UI primitives.