Design Operating System

Nuestro Design System

Los fundamentos visuales que dan coherencia a todos nuestros proyectos. Tokens, paletas, tipografía, espaciados: abiertos y documentados.

Paleta de colores

Primary — Terracota

--primary: 16 71% 42%

EL color de acción: CTA, enlaces. 5,3:1 sobre blanco

Accent — Azul marino

--accent: 214 52% 25%

Títulos, estructura. 11,3:1 sobre blanco

Azul marino profundo

--navy-deep: 213 56% 17%

Fondos de franjas y pie de página

Oro vivo

--gold-bright: 41 88% 62%

Cifras solo sobre fondos azul marino

Texto

--foreground: 215 28% 17%

Cuerpo de texto. 14,7:1 sobre blanco

Texto secundario

--muted-foreground: 215 14% 40%

Notas, pies de foto. 6,0:1 sobre blanco

Rosa

--rose: 14 62% 40%

Paleta ampliada, ajustada a la gama

Violeta

--violet: 214 52% 32%

Paleta ampliada, ajustada a la gama

Cian

--cyan: 205 48% 33%

Paleta ampliada, ajustada a la gama

Oro

--gold: 40 90% 30%

Reseñas, distinciones. ≥ 4,5:1 sobre blanco

Índigo

--indigo: 213 56% 25%

Paleta ampliada, ajustada a la gama

Destructive

--destructive: 0 72% 42%

Errores, eliminación

Tipografía

Display — Outfit Variable

Elegancia tipográfica lionesa

Títulos, CTA, acentos. 100–900.

Body — Plus Jakarta Sans Variable

Legibilidad óptima para párrafos largos, con un ritmo editorial cuidado.

Cuerpo de texto, navegación, etiquetas. 200–800.

Elemento	Tamaño (fluido)	Interlineado	Uso
`h1`	clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)	1.06	Título de página, primera pantalla
`h2`	clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)	1.14	Título de sección
`h3`	clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)	1.25	Subtítulo, tarjeta
`h4`	1.125rem	1.35	Ladillo
`h5, h6`	1rem	1.4	Títulos menores
`body`	1rem	1.65	Cuerpo de texto (Plus Jakarta Sans)
`text-sm`	0.875rem	1.25rem	Texto secundario, notas
`text-xs`	0.75rem	1rem	Metadatos, badges, pies de foto

Espaciado (escala de Tailwind)

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Sombras

shadow-e1

Filete apenas perceptible — campos, chips

shadow-e2

Tarjetas en reposo

shadow-e3

Tarjetas al pasar el cursor, botones flotantes

shadow-e4

Diálogos, paneles

Utilidades CSS propias

.glass

Tarjeta blanca, filete fino, sombra suave — tarjetas, campos

.glass-strong

Misma superficie, sombra más marcada — diálogos, cabeceras

.glass-premium

Superficie destacada — primera pantalla, portfolio

.surface-sunken

Sección alterna gris frío, bordes difuminados en 40 px

.section-y

Ritmo vertical de sección (--section-y)

.measure

Longitud de línea limitada a 68 caracteres

.text-gradient-warm

Fondo terracota sobre una palabra del título

.text-gradient-cool

Fondo azul marino sobre una palabra del título

.cta-gradient

Fondo terracota + texto --primary-foreground

.section-divider

Filete de 1 px, difuminado en ambos extremos

.card-img-frame

Marco de imagen 16/10, CLS cero, zoom al pasar el cursor

.spot-card

Brillo y borde que siguen al cursor

.btn-glow-fill

Botón relleno: reflejo + halo terracota al pasar el cursor

.btn-glow-ring

Botón de contorno: borde luminoso al pasar el cursor

.link-grow

Subrayado que se extiende desde la izquierda

.skip-link

Enlace de salto, visible al recibir el foco

Vista previa de componentes

Botones

Badges

PrimarySuccessWarningError

Degradados

KAYZEN Premium

Ingeniería moderna

Glass Strong

Ejemplo de tarjeta que utiliza la clase .glass-strong.

Un design system reutilizable

Sus proyectos se benefician de este design system probado. La coherencia visual, la accesibilidad y el rendimiento están garantizados desde la base.

Ver el stack técnico Registro de cambios Iniciar un proyecto