Design tokens

Generated from tokens/default.json (“Barbershop default”, schema v2). Usage notes are kept in the language of the token file (Spanish).

Color

Token	CSS variable	Light / dark	Usage
bg	--bg	#f4f4f8 / #000000	Fondo de la página. En oscuro es negro puro: en pantallas AMOLED esos píxeles quedan apagados.
surface	--surface	#ffffff / #0e0e10	Tarjetas, barra lateral, campos y filas. En oscuro va apenas encendida sobre el negro.
surface-2	--surface-2	#eeeef1 / #1a1a1d	Fila en hover, chip neutro y relleno de controles dentro de una tarjeta.
sunken	--sunken	#e7e7ed / #232327	Fondo hundido: avatar neutro y zonas de arrastre.
float	--float	#ffffff / #141417	Lo que flota sobre la página: diálogos, hojas, menús y la barra inferior de la app. En oscuro va un paso más clara que surface, porque ahí no hay sombras.
line	--line	#e3e3e6 / #1f1f23	Líneas divisorias, borde de chips sin relleno y de bloques apagados. Decorativa: no delimita controles.
line-strong	--line-strong	#d2d2dc / #303036	Borde de bloques de cita y de botones de muestra. No llega a 3:1: el elemento se distingue por su relleno y su texto.
line-control	--line-control	#85858f / #6e6e7a	Borde de campos de texto, selects y casillas. Da 3.7:1 sobre surface en claro y 3.8:1 en oscuro.
hair	--hair	rgba(0,0,0,.11) / rgba(255,255,255,.10)	Filete de 0.67 px que rodea tarjetas y botones secundarios. Va dentro de shadow-flat y shadow-hero.
track	--track	#dedee2 / #232327	Pista de barras de avance y de nivel de stock.
seg-track	--seg-track	#e7e7ed / #151518	Bandeja del control segmentado.
seg-on	--seg-on	#ffffff / #2b2b30	Opción elegida del control segmentado. Es neutra: el color de marca no se usa para selectores.
ink	--ink	#000000 / #f2f2f5	Texto principal. En oscuro es un blanco roto para que no deslumbre sobre negro.
ink-2	--ink-2	#4b4b57 / #b6b6c1	Texto secundario y etiquetas, sobre cualquier superficie.
ink-3	--ink-3	#6d6d7a / #8c8c98	Metadatos y encabezados de tabla, sobre bg y surface (4.6:1 sobre bg en claro). Sobre surface-2 usa ink-2.
accent	--accent	#faa2a2 / #faa2a2	Relleno de marca: la acción principal y lo elegido (día, hora, turno que sigue). Es un pastel y no sirve como color de texto. Por defecto es Coral.
on-accent	--on-accent	#3f191a / #3f191a	Texto e iconos sobre un relleno accent: el tono profundo del mismo matiz (7.9:1). Igual en claro y en oscuro.
accent-ink	--accent-ink	#a43a41 / #ffb4b3	Texto e iconos en color de marca, foco de teclado y elemento activo de navegación. Da 6.4:1 sobre surface en claro y 11.4:1 en oscuro.
accent-word	--accent-word	#dc5d63 / #faa2a2	La palabra en color de un título grande y el interruptor encendido. Da 3.3:1 sobre bg: solo para texto de 24 px o más.
accent-soft	--accent-soft	#ffebea / #261112	Fondo suave de marca: cita en atención, ítem activo de navegación, aviso informativo.
accent-line	--accent-line	#f6c2c1 / #5b2e2f	Filete de marca: borde de la cita en atención y de la tarjeta que resume lo que se está reservando.
accent-2	--accent-2	#fec79e / #fec79e	Tono vecino, 38° más allá en el círculo de color. Solo para el degradado detrás de la rueda de hora.
pal-durazno-fill	--pal-durazno-fill	#efae75 / #efae75	Paleta Durazno: relleno. Reemplaza a accent con data-accent=“durazno”.
pal-durazno-deep	--pal-durazno-deep	#3b1f02 / #3b1f02	Paleta Durazno: texto sobre el relleno. Reemplaza a on-accent con data-accent=“durazno”.
pal-durazno-ink	--pal-durazno-ink	#905203 / #f6be8e	Paleta Durazno: texto en color. Reemplaza a accent-ink con data-accent=“durazno”.
pal-durazno-word	--pal-durazno-word	#c97405 / #efae75	Paleta Durazno: palabra de título. Reemplaza a accent-word con data-accent=“durazno”.
pal-durazno-soft	--pal-durazno-soft	#ffecde / #241406	Paleta Durazno: fondo suave. Reemplaza a accent-soft con data-accent=“durazno”.
pal-durazno-line	--pal-durazno-line	#eec9a9 / #553515	Paleta Durazno: filete. Reemplaza a accent-line con data-accent=“durazno”.
pal-durazno-2	--pal-durazno-2	#e1d695 / #e1d695	Paleta Durazno: tono vecino. Reemplaza a accent-2 con data-accent=“durazno”.
pal-menta-fill	--pal-menta-fill	#77d3ad / #77d3ad	Paleta Menta: relleno. Reemplaza a accent con data-accent=“menta”.
pal-menta-deep	--pal-menta-deep	#002f1f / #002f1f	Paleta Menta: texto sobre el relleno. Reemplaza a on-accent con data-accent=“menta”.
pal-menta-ink	--pal-menta-ink	#047554 / #91debc	Paleta Menta: texto en color. Reemplaza a accent-ink con data-accent=“menta”.
pal-menta-word	--pal-menta-word	#03a578 / #77d3ad	Paleta Menta: palabra de título. Reemplaza a accent-word con data-accent=“menta”.
pal-menta-soft	--pal-menta-soft	#e0f7eb / #061d14	Paleta Menta: fondo suave. Reemplaza a accent-soft con data-accent=“menta”.
pal-menta-line	--pal-menta-line	#addec7 / #134834	Paleta Menta: filete. Reemplaza a accent-line con data-accent=“menta”.
pal-menta-2	--pal-menta-2	#8ee5ed / #8ee5ed	Paleta Menta: tono vecino. Reemplaza a accent-2 con data-accent=“menta”.
pal-cielo-fill	--pal-cielo-fill	#76c9f8 / #76c9f8	Paleta Cielo: relleno. Reemplaza a accent con data-accent=“cielo”.
pal-cielo-deep	--pal-cielo-deep	#002a3e / #002a3e	Paleta Cielo: texto sobre el relleno. Reemplaza a on-accent con data-accent=“cielo”.
pal-cielo-ink	--pal-cielo-ink	#006c97 / #8fd5fd	Paleta Cielo: texto en color. Reemplaza a accent-ink con data-accent=“cielo”.
pal-cielo-word	--pal-cielo-word	#0097d2 / #76c9f8	Paleta Cielo: palabra de título. Reemplaza a accent-word con data-accent=“cielo”.
pal-cielo-soft	--pal-cielo-soft	#e1f3fe / #061b26	Paleta Cielo: fondo suave. Reemplaza a accent-soft con data-accent=“cielo”.
pal-cielo-line	--pal-cielo-line	#abd8f3 / #12425a	Paleta Cielo: filete. Reemplaza a accent-line con data-accent=“cielo”.
pal-cielo-2	--pal-cielo-2	#c6d2ff / #c6d2ff	Paleta Cielo: tono vecino. Reemplaza a accent-2 con data-accent=“cielo”.
pal-lavanda-fill	--pal-lavanda-fill	#bab3fe / #bab3fe	Paleta Lavanda: relleno. Reemplaza a accent con data-accent=“lavanda”.
pal-lavanda-deep	--pal-lavanda-deep	#252142 / #252142	Paleta Lavanda: texto sobre el relleno. Reemplaza a on-accent con data-accent=“lavanda”.
pal-lavanda-ink	--pal-lavanda-ink	#6152ad / #c7c2ff	Paleta Lavanda: texto en color. Reemplaza a accent-ink con data-accent=“lavanda”.
pal-lavanda-word	--pal-lavanda-word	#8979e6 / #bab3fe	Paleta Lavanda: palabra de título. Reemplaza a accent-word con data-accent=“lavanda”.
pal-lavanda-soft	--pal-lavanda-soft	#efeeff / #171627	Paleta Lavanda: fondo suave. Reemplaza a accent-soft con data-accent=“lavanda”.
pal-lavanda-line	--pal-lavanda-line	#cecbf7 / #3c375d	Paleta Lavanda: filete. Reemplaza a accent-line con data-accent=“lavanda”.
pal-lavanda-2	--pal-lavanda-2	#f2c1f3 / #f2c1f3	Paleta Lavanda: tono vecino. Reemplaza a accent-2 con data-accent=“lavanda”.
pal-orquidea-fill	--pal-orquidea-fill	#eaa3d5 / #eaa3d5	Paleta Orquídea: relleno. Reemplaza a accent con data-accent=“orquidea”.
pal-orquidea-deep	--pal-orquidea-deep	#391a31 / #391a31	Paleta Orquídea: texto sobre el relleno. Reemplaza a on-accent con data-accent=“orquidea”.
pal-orquidea-ink	--pal-orquidea-ink	#933e7f / #f2b4df	Paleta Orquídea: texto en color. Reemplaza a accent-ink con data-accent=“orquidea”.
pal-orquidea-word	--pal-orquidea-word	#c861ad / #eaa3d5	Paleta Orquídea: palabra de título. Reemplaza a accent-word con data-accent=“orquidea”.
pal-orquidea-soft	--pal-orquidea-soft	#fee9f7 / #23121e	Paleta Orquídea: fondo suave. Reemplaza a accent-soft con data-accent=“orquidea”.
pal-orquidea-line	--pal-orquidea-line	#ecc2df / #532f49	Paleta Orquídea: filete. Reemplaza a accent-line con data-accent=“orquidea”.
pal-orquidea-2	--pal-orquidea-2	#fec2c5 / #fec2c5	Paleta Orquídea: tono vecino. Reemplaza a accent-2 con data-accent=“orquidea”.
pal-grafito-fill	--pal-grafito-fill	#26262b / #ececf0	Paleta Grafito: relleno. Reemplaza a accent con data-accent=“grafito”.
pal-grafito-deep	--pal-grafito-deep	#ffffff / #1a1a1e	Paleta Grafito: texto sobre el relleno. Reemplaza a on-accent con data-accent=“grafito”.
pal-grafito-ink	--pal-grafito-ink	#26262b / #ececf0	Paleta Grafito: texto en color. Reemplaza a accent-ink con data-accent=“grafito”.
pal-grafito-word	--pal-grafito-word	#8a8a94 / #a3a3ad	Paleta Grafito: palabra de título. Reemplaza a accent-word con data-accent=“grafito”.
pal-grafito-soft	--pal-grafito-soft	#ececf0 / #1d1d21	Paleta Grafito: fondo suave. Reemplaza a accent-soft con data-accent=“grafito”.
pal-grafito-line	--pal-grafito-line	#c6c6cf / #3a3a42	Paleta Grafito: filete. Reemplaza a accent-line con data-accent=“grafito”.
pal-grafito-2	--pal-grafito-2	#b9b9c6 / #5a5a66	Paleta Grafito: tono vecino. Reemplaza a accent-2 con data-accent=“grafito”.
danger	--danger	#c51f1c / #ff9689	Error, ausencia y stock bajo el mínimo. Como texto, sobre surface y danger-soft. Más saturado que Coral para no confundirse con la marca.
danger-soft	--danger-soft	#ffebe8 / #300f0b	Fondo de la cita con ausencia y del chip de error.
warning	--warning	#865900 / #ebc166	Algo que pide atención hoy: cliente que llegó y espera, stock cerca del mínimo.
warning-soft	--warning-soft	#feefcf / #241900	Fondo de la cita cuyo cliente ya llegó y del chip de aviso.
success	--success	#0b7643 / #80dba2	Terminado y en nivel. Solo comunica estado.
success-soft	--success-soft	#dff8e6 / #062111	Fondo del chip de éxito y del aviso de proceso cerrado.
hatch	--hatch	#e6e6ec / #1b1b1f	Trama diagonal: tiempo que no se puede reservar (fuera de horario, descanso, hora ocupada, reposo de un servicio).
scrim	--scrim	rgba(0,0,0,.2) / rgba(0,0,0,.72)	Velo detrás de diálogos y hojas.
toast-bg	--toast-bg	#000000 / #222226	Fondo del aviso breve. En oscuro es un gris, no blanco: sería lo más brillante de la pantalla.
toast-ink	--toast-ink	#ffffff / #f2f2f5	Texto y botón del aviso breve.
chart-cat-1	--chart-cat-1	#2f7fc1 / #6db8f2	Gráficos: color de la serie 2 (Azul cielo). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-2	--chart-cat-2	#12936f / #5fd0a6	Gráficos: color de la serie 3 (Verde menta). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-3	--chart-cat-3	#c7820f / #f0b85a	Gráficos: color de la serie 4 (Ámbar). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-4	--chart-cat-4	#6d5bd8 / #aea3fb	Gráficos: color de la serie 5 (Lavanda). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-5	--chart-cat-5	#bd4b95 / #ee9bd2	Gráficos: color de la serie 6 (Orquídea). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-6	--chart-cat-6	#5f6b7d / #a5aebb	Gráficos: color de la serie 7 (Pizarra). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-7	--chart-cat-7	#788f22 / #bcd56b	Gráficos: color de la serie 8 (Oliva). La serie 1 siempre usa accent-word; las demás siguen este orden.
chart-cat-reserve	--chart-cat-reserve	#dc5d63 / #f48f93	Color de categoría de reserva: reemplaza al color de categoría que se parece al acento activo (ver chartSwaps).
chart-grid	--chart-grid	rgba(0,0,0,.06) / rgba(255,255,255,.07)	Gráficos: líneas guía del fondo. Más suaves que line para que los datos manden.
chart-crosshair	--chart-crosshair	rgba(0,0,0,.30) / rgba(255,255,255,.34)	Gráficos: línea vertical que sigue al puntero y franja de la categoría en barras.
chart-up	--chart-up	#0f8a55 / #5fd69b	Gráficos: valor que sube (vela alcista, aumento en cascada, línea ascendente). Verde propio, distinto de la serie Verde menta.
chart-down	--chart-down	#d23b35 / #ff8f82	Gráficos: valor que baja (vela bajista, disminución en cascada, línea descendente).
chart-total	--chart-total	#3e4656 / #c3cad6	Gráficos: totales y subtotales de cascada, y valores sin cambio.

Spacing

Token	CSS variable	Value	Usage
space-2	--space-2	2px	Separación dentro de un control segmentado.
space-4	--space-4	4px	Margen interior de un bloque de cita.
space-6	--space-6	6px	Entre icono y texto en un botón o chip.
space-8	--space-8	8px	Entre botones de una barra de acciones.
space-10	--space-10	10px	Entre icono y texto en la navegación.
space-12	--space-12	12px	Relleno vertical de filas y cabeceras de tarjeta.
space-14	--space-14	14px	Relleno del cuerpo de tarjeta y separación de campos en un formulario.
space-16	--space-16	16px	Relleno horizontal de tarjetas, filas y celdas; separación entre tarjetas.
space-18	--space-18	18px	Separación entre bloques de una vista.
space-28	--space-28	28px	Margen lateral del contenido en escritorio. En móvil baja a space-16.

Radius

Token	CSS variable	Value	Usage
radius-xs	--radius-xs	4px	Rótulo sobre una trama y tecla.
radius-chip	--radius-chip	6px	Chip cuadrado de tipo.
radius-event	--radius-event	10px	Bloque de cita y botón de hora en el panel.
radius-control	--radius-control	12px	Campos de texto, ítems de navegación y días de la semana.
radius-tile	--radius-tile	12px	Marca del negocio y botón de usuario.
radius-banner	--radius-banner	14px	Avisos dentro de la página.
radius-card	--radius-card	16px	Tarjetas, chips altos de la app y bloques de la línea de tiempo.
radius-dialog	--radius-dialog	20px	Diálogos del panel.
radius-sheet	--radius-sheet	36px	Hoja inferior flotante de la app, a 8 px de los bordes.
radius-pill	--radius-pill	999px	Botones, chips, bandejas y avatares.

Shadow

Token	CSS variable	Value	Usage
shadow-flat	--shadow-flat	0 0 0 .67px rgba(0,0,0,.11),0 1px 2px rgba(0,0,0,.04) / 0 0 0 1px rgba(255,255,255,.09)	Tarjetas y botones secundarios: un filete y casi nada de sombra.
shadow-hero	--shadow-hero	0 0 0 .67px rgba(0,0,0,.11),0 4px 18px rgba(0,0,0,.10) / 0 0 0 1px rgba(255,255,255,.10)	La única tarjeta elevada de una vista: el cliente actual, o quien sigue en la cola.
shadow-cta	--shadow-cta	0 8px 36px rgba(0,0,0,.065) / 0 0 0 0 rgba(0,0,0,0)	Botón principal de 54 px en la app. Gris neutra, nunca teñida del color de marca.
shadow-sel	--shadow-sel	0 2px 8px rgba(0,0,0,.10) / 0 0 0 0 rgba(0,0,0,0)	Píldora elegida: día, hora, opción de un control segmentado.
shadow-pop	--shadow-pop	0 0 0 .67px rgba(0,0,0,.11),0 18px 48px -12px rgba(0,0,0,.22) / 0 0 0 1px rgba(255,255,255,.12)	Diálogos, hojas, menús y avisos. En oscuro no hay sombras: sobre negro no se ven, y la profundidad va en filetes.

Size

Token	CSS variable	Value	Usage
side-width	--side-width	244px	Ancho de la barra lateral.
top-height	--top-height	58px	Alto de la barra superior.
control-height	--control-height	36px	Alto de botones del panel.
control-height-sm	--control-height-sm	30px	Alto de botones dentro de filas.
input-height	--input-height	38px	Alto de campos de texto y de botones de hora.
agenda-hour	--agenda-hour	48px	Alto de una hora en la agenda del panel.
agenda-col	--agenda-col	148px	Ancho mínimo de la columna de un profesional.
m-button	--m-button	54px	Alto del botón principal en la app.
m-tray	--m-tray	52px	Alto de una bandeja en la app: control segmentado y muestras de color, con relleno interior de 4 px.
m-chip	--m-chip	60px	Alto de un chip de sugerencia en la app.
m-hour	--m-hour	78px	Alto de una hora en la línea de tiempo de la app.

Typography

Títulos

Style	Size / line height	Weight	Usage
kpi-number	30px / 1.15	800	Cifra de un indicador: citas de hoy, en espera, ítems bajo mínimo.
page-title	26px / 1.18	800	Título de página del panel. Uno por vista; puede llevar una palabra en accent-word.
dialog-title	16px / 1.4	750	Título de diálogo y de panel lateral.
card-title	14px / 1.5	700	Título de tarjeta.

Texto

Style	Size / line height	Weight	Usage
lede	14.5px / 1.5	400	Frase bajo el título de página, en ink-2. Máximo 68 caracteres por línea.
body	14px / 1.5	400	Texto base del panel.
row-title	13.5px / 1.5	650	Nombre del cliente, del servicio o del ítem en filas y tablas.
control	13px / 1.5	650	Etiqueta de botones.
meta	12.5px / 1.5	400	Metadatos bajo un título de fila, en ink-3.
chip-text	12px / 1	650	Texto de chips de estado.
overline	11px / 1.5	700	Encabezado de tabla y rótulo de grupo en el panel. En mayúsculas y en ink-3. No se usa en la app móvil.

Datos

Style	Size / line height	Weight	Usage
clock	17px / 1	700	Número del día en la tira de la semana. Cifras tabulares.
data	12.5px / 1.6	600	Horas, duraciones, cantidades, precios y códigos. Misma familia, con cifras tabulares (clase mono).
count	11px / 1	700	Contador en navegación y pestañas.

App móvil

Style	Size / line height	Weight	Usage
m-title	34px / 41px	800	Título de pantalla en la app, con una palabra en accent-word.
m-card-title	26px / 1.1	800	Nombre del cliente en la tarjeta principal.
m-row-title	15.5px / 1.3	700	Nombre en un bloque de la línea de tiempo y en filas.
m-body	15px / 1.45	400	Texto bajo el título de pantalla.
m-button	15.5px / 1	700	Etiqueta del botón principal de 54 px.
m-meta	13px / 1.4	400	Segunda línea de un bloque o fila.

Style presets

Selected with data-style on any element. Each preset remaps the style tokens below.

Preset	Attribute	Description
Suave	data-style="soft"	El estilo por defecto: filetes finos en vez de bordes, sombras mínimas, botones píldora.
Con bordes	data-style="bordered"	Bordes nítidos de 1 px y ninguna sombra. Radios más cerrados.
Elevado	data-style="elevated"	Sombras en capas y ningún borde. En oscuro las superficies se aclaran por nivel.
Plano	data-style="flat"	Sin bordes ni sombras: las tarjetas se separan por un relleno teñido. Los overlays conservan un filete para despegarse de la página.
Vidrio	data-style="glass"	Superficies translúcidas con desenfoque y filetes claros, sobre un fondo de página degradado.
Brutal	data-style="brutal"	Bordes gruesos de tinta, sombras duras desplazadas y esquinas rectas.

Style tokens

Token	CSS variable	Default (soft)	Usage
radius-button	--radius-button	999px	Botones. Píldora en el estilo suave.
radius-input	--radius-input	12px	Campos de texto, selects y casillas de hora.
radius-badge	--radius-badge	999px	Chips y pastillas de estado.
radius-avatar	--radius-avatar	999px	Avatares. data-radius no lo cambia: un avatar sigue siendo redondo salvo que el estilo diga otra cosa.
radius-popover	--radius-popover	14px	Menús, popovers y tooltips.
border-width-card	--border-width-card	0px	Grosor del borde de tarjetas. En suave es 0: el filete va en shadow-card.
border-color-card	--border-color-card	var(--hair)	Color del borde de tarjetas.
border-width-control	--border-width-control	1px	Grosor del borde de campos y controles.
border-color-control	--border-color-control	var(--line-control)	Color del borde de campos y controles.
border-width-divider	--border-width-divider	1px	Grosor de las líneas divisorias.
border-color-divider	--border-color-divider	var(--line)	Color de las líneas divisorias.
shadow-card	--shadow-card	var(--shadow-flat)	Sombra de tarjeta. Va junto a border-card: en suave es el filete de shadow-flat.
shadow-raised	--shadow-raised	var(--shadow-hero)	Tarjeta elevada. Incluye su propio filete.
shadow-overlay	--shadow-overlay	var(--shadow-pop)	Diálogos, hojas, menús y popovers. Incluye su propio filete.
shadow-control	--shadow-control	var(--shadow-flat)	Botón secundario y controles sin borde.
shadow-selected	--shadow-selected	var(--shadow-sel)	Opción elegida de un control segmentado, día u hora.
shadow-inset	--shadow-inset	inset 0 1px 2px rgba(0,0,0,.06) / inset 0 0 0 1px rgba(255,255,255,.05)	Zona hundida: pista, bandeja.
shadow-inset-accent	--shadow-inset-accent	inset 0 0 0 1px var(--accent-line)	Filete interior de marca: chip o día destacado.
shadow-pinned-start	--shadow-pinned-start	6px 0 8px -6px rgba(0,0,0,.28) / 1px 0 0 rgba(255,255,255,.10),6px 0 10px -6px rgba(0,0,0,.9)	Borde de una columna fijada al inicio de una tabla cuando hay desplazamiento.
shadow-pinned-end	--shadow-pinned-end	-6px 0 8px -6px rgba(0,0,0,.28) / -1px 0 0 rgba(255,255,255,.10),-6px 0 10px -6px rgba(0,0,0,.9)	Borde de una columna fijada al final de una tabla cuando hay desplazamiento.
surface-alpha	--surface-alpha	1	Opacidad de las superficies (0 a 1). Solo baja en el estilo vidrio.
surface-blur	--surface-blur	0px	Desenfoque detrás de superficies translúcidas.
surface-filter	--surface-filter	none	backdrop-filter de tarjetas y overlays. none salvo en vidrio: un filtro activo crea un bloque contenedor.
surface-card	--surface-card	var(--surface)	Fondo de tarjetas.
surface-control	--surface-control	var(--surface)	Fondo de campos y botones secundarios.
surface-overlay	--surface-overlay	var(--float)	Fondo de diálogos, hojas, menús y popovers.
surface-sunken	--surface-sunken	var(--sunken)	Fondo hundido: pistas, zonas de arrastre.
surface-backdrop	--surface-backdrop	var(--scrim)	Velo detrás de diálogos y hojas.
page-backdrop	--page-backdrop	none	Imagen de fondo de la página. Solo el estilo vidrio la usa, para que la translucidez se note.
focus-ring-width	--focus-ring-width	2px	Grosor del anillo de foco.
focus-ring-offset	--focus-ring-offset	2px	Separación del anillo de foco.
focus-ring-color	--focus-ring-color	var(--accent-ink)	Color del anillo de foco.
motion-duration	--motion-duration	180ms	Duración de transiciones de estado.
motion-ease	--motion-ease	cubic-bezier(.2,.8,.2,1)	Curva de las transiciones.
press-scale	--press-scale	.97	Escala de un control al presionarlo.
font-scale	--font-scale	1	Factor opcional para escalar texto. Ningún token de texto lo usa todavía.

Density tokens

Token	CSS variable	Default	Usage
density	--density	1	Factor de densidad sin unidad. Lo fija data-density; los altos y rellenos de abajo se multiplican por él.
pad-control-x	--pad-control-x	16px	Relleno horizontal de botones y campos.
pad-card	--pad-card	16px	Relleno de tarjetas.
gap-density-sm	--gap-density-sm	8px	Separación corta entre elementos de un grupo.
gap-density	--gap-density	12px	Separación entre elementos de una lista o formulario.
gap-density-lg	--gap-density-lg	18px	Separación entre bloques de una vista.

Density levels (data-density):

• data-density="compact": Compacta
• data-density="normal": Normal
• data-density="comfortable": Cómoda

Radius levels (data-radius):

• data-radius="none": Sin radio
• data-radius="sm": Pequeño
• data-radius="md": Medio
• data-radius="lg": Grande
• data-radius="full": Completo