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: #FBFAFAbg-background

Foreground

--foreground: #14100Ctext-foreground

Card

--card: #FBFAFAbg-card

Popover

--popover: #FBFAFAbg-popover

Brand

Primary (ex-red)

--primary: #E63329bg-primary

Primary FG

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

Accent (ex-gold)

--accent: #8E6A30bg-accent

Ring (focus)

--ring: #D6584Cring-ring

Superficies

Secondary (cream deep)

--secondary: #FBFAFAbg-secondary

Muted

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

Border (ex-line)

--border: rgba(20,16,12,0.16)border-border

Estado

Destructive (ex-red-deep)

--destructive: #7A2317bg-destructive

Muted FG (ex-ink-soft)

--muted-foreground: #2A221Ctext-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-[#E63329] to-[#7A2317]

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.