← Volver al inicioZimplia Suite · Design System

Muestrario de tokens

La fuente única de verdad visual. Cada color, tamaño y sombra de aquí en adelante nace de @zimplia/tokens.

01 · Paleta

Color Dark Mode premium

Seis colores de marca exactos y sus derivados legibles, todos sobre el lienzo profundo #0B0F19.

Marca y superficies

El lienzo profundo y los acentos neón que definen a Zimplia.

background.base#0B0F19

background.surface#111827

background.elevated#161F32

background.sunken#070A12

accent.primary#29ABE2

accent.glow#00FFFF

accent.secondary1#4BDBD3

accent.secondary2#A7FCFA

Texto

Jerarquía legible sobre fondos oscuros.

content.primary#F5F8FF

content.secondary#A7B4CC

content.tertiary#6B7A96

content.disabled#45516B

Bordes

Separadores sutiles que dan profundidad.

border.subtle#1B2638

border.default#243149

border.strong#324167

border.accentrgba(41, 171, 226, 0.45)

Estados semánticos

Éxito, advertencia, error e info en clave neón.

success#2FE0A8

warning#FFC857

error#FF5D73

info#29ABE2

Overlays y resplandores

Variantes con opacidad para velos y halos.

overlay.scrimrgba(7, 10, 18, 0.66)

overlay.glowrgba(0, 255, 255, 0.16)

overlay.glowStrongrgba(0, 255, 255, 0.32)

overlay.primarySoftrgba(41, 171, 226, 0.14)

02 · Tipografía

Escala modular Inter

Desde el display de impacto hasta la leyenda más fina, con tracking e interlineado calibrados.

display3.5rem

Comercio que enamora

h12.25rem

Comercio que enamora

h21.75rem

Comercio que enamora

h31.375rem

Comercio que enamora

title1.125rem

Comercio que enamora

body-lg1.0625rem

El sistema operativo del comercio físico, digital y sectorial de Colombia.

body1rem

El sistema operativo del comercio físico, digital y sectorial de Colombia.

caption0.8125rem

El sistema operativo del comercio físico, digital y sectorial de Colombia.

03 · Elevación y neón

Sombras suaves y resplandor

Elevaciones profundas para la jerarquía y halos neón para lo interactivo.

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-glow

shadow-glow-lg

shadow-glow-primary

shadow-glow-inset

Texto con resplandor

04 · Forma

Radios de esquina

De los detalles finos al radio amplio de las tarjetas premium.

card

2xl

3xl