Design Token Generator
Create and export design tokens for your design system. Export to Tailwind config, CSS variables, or JSON for Figma plugins and Style Dictionary.
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
'primary': {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a',
'950': '#172554'
},
'secondary': {
'50': '#f5f3ff',
'100': '#ede9fe',
'200': '#ddd6fe',
'300': '#c4b5fd',
'400': '#a78bfa',
'500': '#8b5cf6',
'600': '#7c3aed',
'700': '#6d28d9',
'800': '#5b21b6',
'900': '#4c1d95',
'950': '#2e1065'
},
'neutral': {
'50': '#fafafa',
'100': '#f4f4f5',
'200': '#e4e4e7',
'300': '#d4d4d8',
'400': '#a1a1aa',
'500': '#71717a',
'600': '#52525b',
'700': '#3f3f46',
'800': '#27272a',
'900': '#18181b',
'950': '#09090b'
}
},
spacing: {
'0': '0px',
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '20px',
'6': '24px',
'8': '32px',
'10': '40px',
'12': '48px',
'16': '64px',
'20': '80px',
'24': '96px'
},
borderRadius: {
'none': '0px',
'sm': '2px',
'md': '6px',
'lg': '8px',
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
'full': '9999px'
},
fontFamily: {
'sans': [
'Inter',
'system-ui',
'sans-serif'
],
'serif': [
'Georgia',
'serif'
],
'mono': [
'JetBrains Mono',
'monospace'
]
},
fontSize: {
'xs': [
'12px',
{
'lineHeight': '16px'
}
],
'sm': [
'14px',
{
'lineHeight': '20px'
}
],
'base': [
'16px',
{
'lineHeight': '24px'
}
],
'lg': [
'18px',
{
'lineHeight': '28px'
}
],
'xl': [
'20px',
{
'lineHeight': '28px'
}
],
'2xl': [
'24px',
{
'lineHeight': '32px'
}
],
'3xl': [
'30px',
{
'lineHeight': '36px'
}
],
'4xl': [
'36px',
{
'lineHeight': '40px'
}
],
'5xl': [
'48px',
{
'lineHeight': '48px'
}
],
'6xl': [
'60px',
{
'lineHeight': '60px'
}
]
},
boxShadow: {
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)'
},
},
},
};Tailwind Config
Paste this into your tailwind.config.js to extend or override the default theme.