Control center
Gestión de opciones en modal para una edición más limpia y enfocada.
- preset
- product ui
- neutrales
- slate
- radius
- 12px
- preview
- light
tailwind · theme · export
// theme forge
Generador de tema para Tailwind
Construye tu paleta brand, mezcla neutrales, ajusta radios y sombras, y exporta snippets listos para pegar.
Preview
workspace
Acme dashboard
Panel principal con tarjetas, tablas y acciones rápidas.
Status: online
Queue: 12 jobs
Errors: 0 critical
Escalas
brand
#0ea5e9
50#f8fafb
100#edf4f8
200#dbedf5
300#bae1f2
400#8cd3f2
500#52c2f5
600#17b2f8
700#0a97d7
800#0f79a8
900#145e80
950#154960
neutral / slate
preset
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617
tailwind.config
export default {
theme: {
extend: {
colors: {
brand: {
50: '#f8fafb',
100: '#edf4f8',
200: '#dbedf5',
300: '#bae1f2',
400: '#8cd3f2',
500: '#52c2f5',
600: '#17b2f8',
700: '#0a97d7',
800: '#0f79a8',
900: '#145e80',
950: '#154960',
},
neutral: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617',
},
},
borderRadius: {
sm: '6px',
md: '10px',
lg: '12px',
xl: '20px',
},
boxShadow: {
soft: '0 10px 28px -14px rgb(15 23 42 / 0.217)',
hard: '0 16px 34px -16px rgb(15 23 42 / 0.306)',
},
},
},
};@theme tokens
@theme {
--color-brand-50: #f8fafb;
--color-brand-100: #edf4f8;
--color-brand-200: #dbedf5;
--color-brand-300: #bae1f2;
--color-brand-400: #8cd3f2;
--color-brand-500: #52c2f5;
--color-brand-600: #17b2f8;
--color-brand-700: #0a97d7;
--color-brand-800: #0f79a8;
--color-brand-900: #145e80;
--color-brand-950: #154960;
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1e293b;
--color-neutral-900: #0f172a;
--color-neutral-950: #020617;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 20px;
--shadow-soft: 0 10px 28px -14px rgb(15 23 42 / 0.217);
--shadow-hard: 0 16px 34px -16px rgb(15 23 42 / 0.306);
}