W3C Design Tokens Community Group

LuisDS

Sistema de diseno completo con tokens semanticos, escalas de color perceptualmente uniformes en OKLCH, accesibilidad WCAG 2.1 integrada y soporte para Liquid Glass.

11
Pasos por ramp
4
Escalas semanticas
11
Estilos tipograficos
31
Pasos de espaciado
Colores

Paleta de color

Escalas de 11 pasos en espacio OKLCH con luminosidad perceptualmente uniforme. El paso 500 es el anchor exacto. Pasa el cursor sobre cada paso para ver su valor.

Brand · Primary — Crimson rose
50#FFF5F8
100#FFE7ED
200#FCC7D5
300#F39EB7
400#DB7194
500✦#870E46
600#952854
700#72133C
800#520629
900#320316
950#1E020C
Brand · Secondary — Teal
50#F3FAFC
100#E1F2F7
200#BADFEB
300#85C6DA
400#4CA6C0
500✦#008AA7
600#00647E
700#004960
800#003344
900#001D29
950#001118
Brand · Accent — Mint
50#F1FCF5
100#DDF6E7
200#AFE7C8
300#6CD3A0
400#00B577
500✦#41F6AB
600#007235
700#005521
800#003C13
900#002309
950#001404
Neutral — Cool gray
50#F8F8F9
100#EDEFF0
200#D4D8DA
300#B5BCBF
400#919A9E
500✦#869095
600#515A5E
700#3A4145
800#272C2F
900#15191B
950#0B0E0F
Colores semanticos
AA on black
Success
#22C55E
AA on black
Warning
#F59E0B
AA on black
Error
#EF4444
AA on black
Info
#3B82F6
Tipografia

Sistema tipografico

Basado en Afacad para body y display, con escala modular ×1.25. El stack monoespaciado usa fuentes del sistema.

Tamanos de fuente
xs10.24px
sm12.8px
md16px
lg20px
xl25px
2xl31.25px
3xl39.06px
4xl48.83px
Pesos & Line heights
regular400
medium500
semibold600
bold700
tight1.25
snug1.375
normal1.5
relaxed1.625
loose2.0
Letter spacing
tighter-0.05em
tight-0.025em
normal0em
wide0.025em
wider0.05em
widest0.1em
Estilos compuestos
Display LG
48.83px · 700 · −0.025em · 1.25
display-lg
Display SM
39.06px · 700 · −0.025em · 1.25
display-sm
Heading XL
31.25px · 700 · −0.025em · 1.375
heading-xl
Heading LG
25px · 600 · 0em · 1.375
heading-lg
Heading MD
20px · 600 · 0em · 1.375
heading-md
Heading SM
16px · 600 · 0em · 1.5
heading-sm
Body LG — El sistema de diseno garantiza coherencia visual en cada capa de la interfaz.
20px · 400 · 0em · 1.625
body-lg
Body MD — Tokens semanticos conectados a primitivos mediante referencias W3C standard.
16px · 400 · 0em · 1.5
body-md
Body SM — Texto de apoyo, anotaciones y metadatos secundarios del sistema.
12.8px · 400 · 0em · 1.5
body-sm
LABEL LG
12.8px · 500 · +0.025em · 1.5
label-lg
LABEL SM
10.24px · 500 · +0.05em · 1.5
label-sm
const token = "{color.brand.primary.500}"; // #870E46
12.8px · 400 · 0em · 1.625
code
Espaciado

Escala de spacing

31 pasos basados en multiplos de 4px. spacing.gap contiene los primitivos; spacing.padding los referencia.

0
0px
px
1px
0.5
2px
1
4px
1.5
6px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
12
48px
14
56px
16
64px
20
80px
24
96px
28
112px
32
128px
36
144px
40
160px
48
192px
64
256px
80
320px
96
384px
Aspect Ratios

Proporciones

6 ratios predefinidos para imagenes, videos y contenedores.

Square
1:1 · 1.0
Landscape
4:3 · 1.3333
Portrait
3:4 · 0.75
Video
16:9 · 1.7778
Golden
φ:1 · 1.618
Wide
21:9 · 2.3333
Elevacion

Sistema de sombras

6 niveles de elevacion desde sutil (xs) hasta modal (2xl). Usa sombras multicapa para mayor realismo.

none
Sin elevacion
xs
Lift sutil · listas
sm
Card · componente
md
Popover · tooltip
lg
Overlay · dropdown
xl
Drawer · sheet
2xl — Modal
Maxima elevacion
0 25px 50px −12px rgba(16,24,40,0.25)
Border

Radio y grosor

8 niveles de border-radius y 4 grosores de borde.

Border radius
none
0px
sm
4px
md
8px
lg
12px
xl
16px
2xl
24px
3xl
32px
full
9999px
Border width
none · 0px
thin · 1px
medium · 2px
thick · 4px
Grid

Sistema de rejilla

Grid responsive de 4 a 12 columnas a traves de 6 breakpoints. Gutters y margenes referenciados desde spacing.

Breakpoint Min-width Columnas Gutter Margen Container max
xs 375px416px16px—
sm 640px416px24px640px
md 768px824px32px768px
lg 1024px1232px64px1024px
xl 1280px1232px80px1280px
2xl 1536px1232px96px1536px
375 640 768 1024 1280 1536px
Accesibilidad

Focus ring

Anillo de foco conforme a WCAG 2.2 §2.4.11. 2px de grosor, 2px de offset, color brand primary.

default
ring-color: #870E46
ring-color-invert: #FFFFFF
ring-width2px
ring-offset2px
ring-color{color.brand.primary.500}
ring-color-invert#FFFFFF
ring-opacity1
ring-stylesolid
Motion

Animacion y timing

6 duraciones, 6 curvas de easing y 4 transiciones compuestas listas para usar.

Duraciones
instant
0ms
fast
120ms
normal
250ms
slow
350ms
deliberate
600ms
lazy
900ms
Transiciones compuestas
fade opacity 250ms ease-in-out
slide transform 250ms cubic-bezier(0,0,.2,1)
expand all 350ms spring (.175,.885,.32,1.275)
instant all 0ms linear
Curvas de easing — pasa el cursor para animar
linear
cubic-bezier(0,0,1,1)
ease-in
cubic-bezier(.4,0,1,1)
ease-out
cubic-bezier(0,0,.2,1)
ease-in-out
cubic-bezier(.4,0,.2,1)
spring
cubic-bezier(.175,.885,.32,1.275)
decelerate
cubic-bezier(0,0,0,1)
Shader

Opacity, blur & Liquid Glass

Escala de opacidad de 15 pasos, 6 niveles de blur y el sistema Liquid Glass en 3 variantes.

Escala de opacidad
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
Escala de blur
none
0px
sm
4px
md
8px
lg
16px
xl
24px
2xl
40px
Liquid Glass
Default
blur: 20px
saturate: 1.8x
brightness: 1.1x
tint: rgba(255,255,255,0.55)
specular: rgba(255,255,255,0.6)
Thick
blur: 32px
saturate: 2.0x
brightness: 1.12x
tint: rgba(255,255,255,0.72)
specular: rgba(255,255,255,0.75)
Ultra-thin
blur: 12px
saturate: 1.4x
brightness: 1.08x
tint: rgba(255,255,255,0.30)
specular: rgba(255,255,255,0.35)
Overlays
overlay.light
rgba(255,255,255,0.8)
overlay.dark
rgba(0,0,0,0.5)
overlay.dark-subtle
rgba(0,0,0,0.2)
Componentes

Componentes basicos

Elementos de UI construidos aplicando los tokens del sistema: border-radius, elevation, focus ring, color semantico y tipografia.

Buttons
Variantes
background: color.brand.primary.500 border-radius: border.radius.md font-weight: typography.font-weight.medium
Tamanos
sm: font-size.sm · padding gap.1 gap.2.5 md: font-size.sm · padding gap.2 gap.4 lg: font-size.md · padding gap.3 gap.6
Estados
focus: focus.ring-width · focus.ring-offset · focus.ring-color disabled: shader.opacity.40
Text fields
Default
Tu nombre tal como aparece en el DNI.
border: border.width.thin · neutral.200 border-radius: border.radius.md
Con icono
icon-color: neutral.500 padding-left: spacing.gap.8
Focus
Usaremos este email para contactarte.
border: color.brand.primary.500 ring: focus.ring-width · focus.ring-offset
Error
Minimo 8 caracteres con una mayuscula.
border: color.semantic.error.500 helper: color.semantic.error.600
Disabled
Este campo no es editable.
opacity: shader.opacity.50 background: neutral.100
Textarea
Maximo 500 caracteres.
min-height: spacing.gap.22 border-radius: border.radius.md
Select
border-radius: border.radius.md chevron: neutral.500
Checkbox, radio & switch
Checkbox
checked: color.brand.primary.500
Radio
selected: color.brand.primary.500
Switch
active: color.brand.primary.500 easing: motion.easing.spring
Badges
Variantes semanticas
Primary Success Warning Error Info Neutral
Activo Pendiente Error Inactivo
border-radius: border.radius.full font: typography.composite.label-sm bg: semantic.{state}.100
Alertas
Cambios guardados
Tu configuracion se ha guardado correctamente.
Accion requerida
Tu suscripcion expira en 3 dias. Renuevala para no perder acceso.
Ha ocurrido un error
No se pudo conectar con el servidor. Intentalo de nuevo en unos segundos.
Nueva version disponible
La version 2.0 del sistema de diseno incluye 40 nuevos tokens semanticos.
background: color.semantic.{state}.100 border: color.semantic.{state}.500 color: color.semantic.{state}.700 border-radius: border.radius.lg
LuisDS Design Tokens
W3C Design Tokens Community Group — 2026-03-06
luis-ds.tokens.json