Design Tokens
Translate colours, type, spacing, radius and shadows into named values developers and designers can share. This page gives you the structure for planning design tokens with practical guidance, browser-based generation and copyable snippets ahead of deeper ElementYard integration.
Token generator
Define reusable implementation tokens.
Configure colours, typography, spacing, radius, shadows and breakpoints, then copy the same decisions as CSS variables, JSON design tokens or Tailwind config. These tokens can guide component styling now and deeper ElementYard workflows later.
Interactive generator
Design Tokens Generator
Define reusable colour, type, spacing, radius, shadow and breakpoint decisions, then copy the same system as CSS variables, JSON tokens or a Tailwind config snippet.
Colours
Typography
Spacing
Border radius
Shadows
Breakpoints
Live preview
Reusable system card
The same tokens control colour, type, spacing, radius and elevation across every preview element.
:root {
--color-primary: #2563eb;
--color-accent: #14b8a6;
--color-success: #16a34a;
--color-warning: #f59e0b;
--color-error: #dc2626;
--font-family-base: Inter, system-ui, sans-serif;
--font-size-xs: 11.11px;
--font-size-sm: 13.33px;
--font-size-base: 16px;
--font-size-lg: 19.2px;
--font-size-xl: 23.04px;
--font-size-2xl: 27.65px;
--font-size-3xl: 33.18px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-md: 0 12px 28px rgba(15, 23, 42, 0.12);
--shadow-lg: 0 22px 54px rgba(15, 23, 42, 0.16);
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}{
"color": {
"primary": {
"value": "#2563eb",
"type": "color"
},
"accent": {
"value": "#14b8a6",
"type": "color"
},
"success": {
"value": "#16a34a",
"type": "color"
},
"warning": {
"value": "#f59e0b",
"type": "color"
},
"error": {
"value": "#dc2626",
"type": "color"
}
},
"typography": {
"fontFamily": {
"value": "Inter, system-ui, sans-serif",
"type": "fontFamily"
},
"fontSize": {
"xs": {
"value": "11.11px",
"type": "dimension"
},
"sm": {
"value": "13.33px",
"type": "dimension"
},
"base": {
"value": "16px",
"type": "dimension"
},
"lg": {
"value": "19.2px",
"type": "dimension"
},
"xl": {
"value": "23.04px",
"type": "dimension"
},
"2xl": {
"value": "27.65px",
"type": "dimension"
},
"3xl": {
"value": "33.18px",
"type": "dimension"
}
}
},
"spacing": {
"1": {
"value": "4px",
"type": "dimension"
},
"2": {
"value": "8px",
"type": "dimension"
},
"3": {
"value": "12px",
"type": "dimension"
},
"4": {
"value": "16px",
"type": "dimension"
},
"6": {
"value": "24px",
"type": "dimension"
},
"8": {
"value": "32px",
"type": "dimension"
},
"10": {
"value": "40px",
"type": "dimension"
},
"12": {
"value": "48px",
"type": "dimension"
}
},
"radius": {
"sm": {
"value": "6px",
"type": "dimension"
},
"md": {
"value": "10px",
"type": "dimension"
},
"lg": {
"value": "16px",
"type": "dimension"
},
"xl": {
"value": "24px",
"type": "dimension"
}
},
"shadow": {
"sm": {
"value": "0 4px 12px rgba(15, 23, 42, 0.08)",
"type": "shadow"
},
"md": {
"value": "0 12px 28px rgba(15, 23, 42, 0.12)",
"type": "shadow"
},
"lg": {
"value": "0 22px 54px rgba(15, 23, 42, 0.16)",
"type": "shadow"
}
},
"breakpoint": {
"sm": {
"value": "640px",
"type": "dimension"
},
"md": {
"value": "768px",
"type": "dimension"
},
"lg": {
"value": "1024px",
"type": "dimension"
},
"xl": {
"value": "1280px",
"type": "dimension"
}
}
}export default {
theme: {
extend: {
colors: {
primary: "#2563eb",
accent: "#14b8a6",
success: "#16a34a",
warning: "#f59e0b",
error: "#dc2626",
},
fontFamily: {
sans: ["Inter, system-ui, sans-serif"],
},
fontSize: {
xs: "11.11px",
sm: "13.33px",
base: "16px",
lg: "19.2px",
xl: "23.04px",
2xl: "27.65px",
3xl: "33.18px",
},
spacing: {
1: "4px",
2: "8px",
3: "12px",
4: "16px",
6: "24px",
8: "32px",
10: "40px",
12: "48px",
},
borderRadius: {
sm: "6px",
md: "10px",
lg: "16px",
xl: "24px",
},
boxShadow: {
sm: "0 4px 12px rgba(15, 23, 42, 0.08)",
md: "0 12px 28px rgba(15, 23, 42, 0.12)",
lg: "0 22px 54px rgba(15, 23, 42, 0.16)",
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
},
},
},
};Why it matters
Design Tokens shape every component.
Design tokens connect design decisions to implementation so components do not drift across tools and codebases.
Best practices
Use these rules before turning design tokens into tokens or implementation details.
Workflow
Keep this practical and repeatable before adding automation.
Related resources
Use tools, components, cheatsheets and guides to turn this foundation into real web work.
ElementYard CTA
Bring design tokens into visual components.
Use ElementYard when you want to explore how system decisions should feel inside real component layouts and page sections.
Design Tokens FAQ
Design Tokens help teams document practical design decisions for translate colours, type, spacing, radius and shadows into named values developers and designers can share.
Yes. This page includes a browser-based generator for practical starter values and copyable implementation snippets. It is still not pretending to replace a full design-system review.
The system defines the decisions, while ElementYard can eventually apply those decisions to visual component and page-section workflows.