'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Fundamentos
Colores
Ocho escalas hechas con el motor OKLCH del Palette Generator (el mismo del plugin de Figma), y tokens semánticos que cambian entre oscuro y claro. Los componentes solo usan los semánticos.
Tokens semánticos
Estos cambian con el tema. Cambia el tema en el encabezado para ver los valores claros.
bg
--alea-bg#272625--alea-bg-deep#1f1e1dsurface
--alea-surface#1d1c1b--alea-surface-deep#121212--alea-surface-raised#262829--alea-surface-hover#242322--alea-surface-overlay#000000b8border
--alea-border#ffffff14--alea-border-strong#ffffff2e--alea-border-control#ffffff5ctext
--alea-text#f7f7f7--alea-text-soft#f9f8f5--alea-text-muted#dbdbdbd1--alea-text-faint#dbdbdb99accent
--alea-accent#cd57ff--alea-accent-strong#e1a4ff--alea-accent-second#ffce1f--alea-accent-third#8b6cf0--alea-accent-subtle#cd57ff24--alea-accent-on#111011--alea-accent-solid#cd57fffocus
--alea-focus#cd57ff--alea-focus-halo#cd57ff33chip
--alea-chip-bg#ffffff--alea-chip-text#111011field
--alea-field-bg#121212status
--alea-status-success#3ddc84--alea-status-success-bg#3ddc841f--alea-status-danger#ff8a8a--alea-status-danger-bg#ff7a7a1f--alea-status-warning#f5a524--alea-status-warning-bg#f5a5241f--alea-status-info#9cc2ff--alea-status-info-bg#3b82f61f--alea-status-on#111011--alea-status-success-solid#3ddc84--alea-status-success-on-solid#111011--alea-status-warning-solid#f5a524--alea-status-warning-on-solid#111011--alea-status-danger-solid#d4363f--alea-status-danger-solid-hover#b6212e--alea-status-danger-on-solid#ffffff--alea-status-info-solid#1b5ec8--alea-status-info-on-solid#ffffffEscalas
El paso 400 del morado es el morado de marca #CD57FF; el 200 del amarillo es #FFCE1F. Usa las escalas para ilustraciones y gráficos, y los tokens semánticos para la interfaz.
purple
50#faf2ff100#f5e2ff200#edcaff300#e1a4ff400#cd57ff500#c144f4600#ae2ae0700#940dc2800#7d01a5900#6a068b950#2f183byellow
50#fff5d9100#ffe8a9200#ffce1f300#e9ba00400#c29b00500#a98700600#947600700#7b6100800#675100900#574400950#2d2200violet
50#f5f4ff100#e9e7ff200#d8d3ff300#c0b5ff400#a189ff500#8b6cf0600#7d5cdf700#6848c2800#573ba4900#49328b950#241f3aneutral
50#f6f5f4100#ebe9e7200#dbd9d5300#c3c0ba400#a49f98500#8c8780600#7e7972700#68645e800#57534d900#494641950#242322green
50#e5fcec100#c7f8d5200#9af0b6300#3ddc84400#00be6a500#00a65c600#00914f700#007941800#006535900#00552c950#022c15red
50#fff2f1100#ffe2e0200#ffcac7300#ffa49f400#fc6968500#e5484d600#d4363f700#b6212e800#9a1624900#83151e950#391817amber
50#fff4e6100#ffe5c6200#ffd095300#f5a524400#d88e00500#bd7b00600#a56b00700#8a5900800#734900900#623e00950#331f01blue
50#f0f6ff100#deebff200#c4dbff300#9cc2ff400#639eff500#3b82f6600#2c73e6700#1b5ec8800#124daa900#104290950#14233cDegradados
--alea-gradient-accentradial-gradient(100% 100% at 25% 100%, #cd57ff 0%, #ffce1f 100%)--alea-gradient-accent-linearlinear-gradient(120deg, #cd57ff 0%, #ffce1f 100%)--alea-gradient-buttonlinear-gradient(180deg, #33363f 0%, #020202 100%)Qué token para qué
| Token | Úsala para | Muestra |
|---|---|---|
--alea-text | Texto de cuerpo, títulos, valores | Aa Muestra |
--alea-text-muted | Descripciones, ayudas, etiquetas secundarias | Aa Muestra |
--alea-text-faint | Placeholders y pistas que no hacen falta para entender la página | Aa Muestra |
--alea-accent-strong | Enlaces y texto de acento | Aa Muestra |
--alea-bg | La página | |
--alea-surface | Tarjetas, paneles, diálogos | |
--alea-surface-raised | Popovers, menús, filas en hover, chips neutros | |
--alea-surface-deep | Campos, pozos, código | |
--alea-border | Divisores y contornos discretos | |
--alea-border-strong | Contornos que deben verse: campos, tarjetas enfocables | |
--alea-accent-solid | Controles rellenos que llevan texto: casillas marcadas, el toggle principal | |
--alea-status-danger | Errores y acciones destructivas, siempre con palabras | Aa Muestra |
Contraste, medido
Cada token de texto sobre cada superficie, medido con los colores que renderiza esta página. Cambia el tema para comparar.
| Texto sobre superficie | bg | surface | surface-raised | surface-deep |
|---|---|---|---|---|
text | - | - | - | - |
text-muted | - | - | - | - |
text-faint | - | - | - | - |
accent-strong | - | - | - | - |
status-success | - | - | - | - |
status-warning | - | - | - | - |
status-danger | - | - | - | - |
status-info | - | - | - | - |
Cada par pasa AA (4.5:1) en ambos temas, y text y text-muted pasan AAA (7:1). text-faint sigue siendo para placeholders y pistas, no para nada que la gente necesite leer.
Alto contraste
Cuando el sistema pide más contraste (o se pone data-contrast="more"), los tokens semánticos se vuelven más fuertes: texto atenuado, bordes, estados y rellenos de acento. Los componentes no cambian; cambian los tokens.
Factura pagada
PagadaEnviada a ana@example.com el 18 de octubre.
Factura pagada
PagadaEnviada a ana@example.com el 18 de octubre.
Colores de gráficos
Las series los toman en orden. Se distinguen por algo más que el tono: los gráficos también usan etiquetas, una leyenda y una tabla de datos.
1accent2chart-23chart-34chart-45chart-56chart-67chart-78chart-8