UI Kit

Tokens de diseño del sistema Deiman: colores semánticos del tema tweakcn, tipografía y espaciado. Todos definidos como variables CSS en src/styles.css y mapeados a clases utilitarias de Tailwind.

Ver tema en tweakcn →

Paleta de colores

Base

Background

--background: hsl(48 33% 97%)bg-background

Foreground

--foreground: hsl(48 20% 20%)text-foreground

Card

--card: hsl(0 0% 100%)bg-card

Popover

--popover: hsl(0 0% 100%)bg-popover

Brand

Primary

--primary: hsl(5.3 64.7% 52.1%)bg-primary

Primary FG

--primary-foreground: hsl(0 0% 100%)text-primary-foreground

Ring

--ring: hsl(5.2 62.7% 56.8%)ring-ring

Superficies

Secondary

--secondary: hsl(42 50% 96%)bg-secondary

Muted

--muted: hsl(44 29% 90%)bg-muted

Accent

--accent: hsl(46.2 22.8% 88.8%)bg-accent

Border

--border: hsl(50 7.5% 84.3%)border-border

Estado

Destructive

--destructive: hsl(0 70% 50%)bg-destructive

Muted FG

--muted-foreground: hsl(50 2.8% 41.9%)text-muted-foreground

Tipografía

Display · Poppins

Color y sabor en cada postre.

font-display

Body · Myriad Pro

Texto base usado en párrafos, descripciones y meta información a lo largo de toda la plataforma Deiman.

font-sans

Radius

rounded-sm

rounded-md

rounded-lg

rounded-xl

Espaciado

p-2

8px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

Sombras y elevación

shadow-sm

Base de cards en reposo.

shadow-md

Botones primarios al hover.

shadow-lg

Hero CTAs y overlays cálidos.

shadow-xl

Cards al hacer hover (-translate-y-1).

Sombra dramática del mega-menú

shadow-[0_24px_48px_-12px_rgba(20,20,15,0.18)]

Texturas y superficies

Glass

bg-white/15 backdrop-blur-md border-white/30

Flechas de carrusel hero.

Gradient primary

from-primary via-primary to-primary/80

CTAs gradient card y banners.

Banner Distribuidores

#fef3e7

Cálido neutro, contraste con primary.

Banner Blog

#fbe6e2

Rosado para diferenciar contenido editorial.

Wireframe placeholder

.wire-placeholder

Cross diagonal para imagen ausente (modo wire).

Mask fade marquee

linear-gradient mask sides

Bordes del Cert Marquee.

Curvas de animación (easing)

Premium UI

cubic-bezier(0.22, 1, 0.36, 1)

Header, logo, search overlay (500ms).

Scroll suave

cubic-bezier(0.16, 1, 0.3, 1)

Border-radius del hero (1100ms).

GSAP power2.out

power2.out

Entradas de slide y tipografía hero.

GSAP power1.out

power1.out

Parallax/zoom de imagen con scrub.

Iconografía

Set único lucide-react con stroke 1.75–2, tamaño 14–24px. Color heredado del contenedor (currentColor) para soportar hover sobre primary y muted.