Tokens de diseño

Las variables CSS de esta página se leen de admin/src/styles/tokens.css al compilar el portal (scripts/gen-reference.mjs): lo que ves aquí es lo que usa el panel. Este mismo sitio se pinta con ellos.

Se usan siempre como var(--nombre). El modo oscuro redefine las variables bajo @media (prefers-color-scheme: dark) y [data-theme="dark"]; tu código no cambia.

Muestra aplicada

Un panel, texto, insignias, botones y un aviso con los tokens, en claro y oscuro. Es una muestra construida con CSS propio sobre las variables, no los componentes reales (esos están en el catálogo).

Claro

Panel

Texto principal sobre superficie. Texto atenuado para ayudas y metadatos.

NeutroAcentoCorrectoAtenciónErrorInformación

PrimarioSecundarioPeligro

Aviso en línea. El color transmite significado, nunca decoración.

Oscuro

Panel

Texto principal sobre superficie. Texto atenuado para ayudas y metadatos.

NeutroAcentoCorrectoAtenciónErrorInformación

PrimarioSecundarioPeligro

Aviso en línea. El color transmite significado, nunca decoración.

Tokens por grupo

Cada grupo se muestra en tema claro y tema oscuro, con independencia del tema de esta página.

Superficies

Fondos y bordes de la página, las tarjetas y las zonas hundidas.

Claro

--bg#f3f2ee
--surface#ffffff
--surface-alt#f8f7f4
--sunken#eceae4
--border#e2dfd8
--border-strong#cfcbc2

Oscuro

--bg#111114
--surface#1a1a1f
--surface-alt#202026
--sunken#26262d
--border#2e2e36
--border-strong#3d3d46

Texto

Colores de texto. `muted` y `faint` cumplen 4,5:1 (AA) sobre las superficies indicadas.

Claro

--ink#17171b
--ink-soft#3d3d44
--muted#6a6970
--faint#6f6d73
--inverse#ffffff

Oscuro

--ink#f1efea
--ink-soft#d0cec8
--muted#9a98a0
--faint#88868d
--inverse#17171b

Raíl de navegación

El lateral oscuro del panel, igual en claro y oscuro.

Claro

--rail#0b0b0b
--rail-active#2a2a30
--rail-ink#edebe6
--rail-muted#929098
--rail-w248px

Oscuro

--rail#0b0b0d
--rail-active#1f1f24
--rail-ink#edebe6
--rail-muted#929098
--rail-w248px

Marca y estados

Color solo con significado: el acento es la marca; verde, rojo, ámbar y azul indican estado.

Claro

--accent#cfa84a
--accent-soft#f9f5ef
--accent-ink#3d2b1f
--success#128a4a
--success-soft#ddf3e6
--danger#d92d20
--danger-soft#fde4e1
--warning#b54708
--warning-soft#fef0c7
--info#1d5fd1
--info-soft#e1ebfb
--scrimrgba(23, 23, 27, 0.45)
--focus#1d5fd1

Oscuro

--accent#cfa84a
--accent-soft#3a2c05
--accent-ink#f7cf6a
--success#3fb877
--success-soft#11301f
--danger#f2675b
--danger-soft#3a1512
--warning#e8924a
--warning-soft#3a2410
--info#6b9cf0
--info-soft#14233d
--scrimrgba(23, 23, 27, 0.45)
--focus#6b9cf0

Paneles

Degradado y borde de los paneles, calculados sobre `--accent`: cambian con la marca.

Claro

--accent-textcolor-mix(in srgb, var(--accent) 72%, var(--ink))
--panel-bordercolor-mix(in srgb, var(--accent) 26%, var(--border))
--panel-border-strongcolor-mix(in srgb, var(--accent) 55%, var(--border))
--panel-tintcolor-mix(in srgb, var(--accent) 5%, var(--surface))
--panel-headcolor-mix(in srgb, var(--accent) 3%, var(--surface-alt))
--row-hovercolor-mix(in srgb, var(--accent) 7%, transparent)
--row-activecolor-mix(in srgb, var(--accent) 12%, transparent)
--hairlinevar(--border)

Oscuro

--accent-textvar(--accent)
--panel-bordercolor-mix(in srgb, var(--accent) 34%, var(--border))
--panel-border-strongcolor-mix(in srgb, var(--accent) 55%, var(--border))
--panel-tintcolor-mix(in srgb, var(--accent) 9%, var(--surface-alt))
--panel-headcolor-mix(in srgb, var(--accent) 3%, var(--surface-alt))
--row-hovercolor-mix(in srgb, var(--accent) 7%, transparent)
--row-activecolor-mix(in srgb, var(--accent) 12%, transparent)
--hairlinevar(--border)

Gráficos

Serie principal, referencia y rejilla.

Claro

--chart-1#17171b
--chart-2#cfa84a
--chart-ref#cfcbc2
--chart-grid#eceae4

Oscuro

--chart-1#f1efea
--chart-2#cfa84a
--chart-ref#4a4a53
--chart-grid#26262d

Inicio del panel

Paneles oscuros con títulos dorados de la portada. Solo los usa el módulo insights.

Claro

--home-panel#141316
--home-panel-alt#1c1b1f
--home-panel-border#2a2930
--home-ink#f1efea
--home-muted#a3a1a8
--home-gold#e3bd5c
--home-tile#cfa84a
--home-tile-alt#c49c3f
--home-tile-linergba(23, 23, 27, 0.16)
--home-tile-ink#17171b
--home-tile-muted#45361a
--home-ok#3fb877
--home-warning#e8a24a
--home-down#f2675b
--home-off#57555d
--home-alert#d92d20
--home-series-1#e3bd5c
--home-series-2#f1efea
--home-series-3#8fb7a5
--home-series-4#d08d6a
--home-series-5#8592c4
--home-series-6#f2675b
--home-grid#2a2930

Oscuro

--home-panel#141316
--home-panel-alt#1c1b1f
--home-panel-border#2a2930
--home-ink#f1efea
--home-muted#a3a1a8
--home-gold#e3bd5c
--home-tile#cfa84a
--home-tile-alt#c49c3f
--home-tile-linergba(23, 23, 27, 0.16)
--home-tile-ink#17171b
--home-tile-muted#45361a
--home-ok#3fb877
--home-warning#e8a24a
--home-down#f2675b
--home-off#57555d
--home-alert#d92d20
--home-series-1#e3bd5c
--home-series-2#f1efea
--home-series-3#8fb7a5
--home-series-4#d08d6a
--home-series-5#8592c4
--home-series-6#f2675b
--home-grid#2a2930

Tipografía

Familias y escala de tamaños.

Claro

--font-display"Oswald", "Bebas Neue", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif
--font-hand"Caveat", "Bradley Hand", "Segoe Print", "Noteworthy", "Comic Neue", cursive
--font"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--monoui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace
--fs-xs12px
--fs-sm13px
--fs-md14px
--fs-lg16px
--fs-xl20px
--fs-2xl24px
--fs-3xl30px

Oscuro

--font-display"Oswald", "Bebas Neue", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif
--font-hand"Caveat", "Bradley Hand", "Segoe Print", "Noteworthy", "Comic Neue", cursive
--font"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--monoui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace
--fs-xs12px
--fs-sm13px
--fs-md14px
--fs-lg16px
--fs-xl20px
--fs-2xl24px
--fs-3xl30px

Espaciado

Escala de 4 px.

Claro

--s-14px
--s-28px
--s-312px
--s-416px
--s-520px
--s-624px
--s-832px
--s-1040px

Oscuro

--s-14px
--s-28px
--s-312px
--s-416px
--s-520px
--s-624px
--s-832px
--s-1040px

Radios

Esquinas redondeadas.

Claro

--r-sm6px
--r-md10px
--r-lg14px
--r-pill999px

Oscuro

--r-sm6px
--r-md10px
--r-lg14px
--r-pill999px

Sombras

Elevación de tarjetas y elementos flotantes.

Claro

--shadow-card0 1px 2px rgba(23, 23, 27, 0.05), 0 1px 1px rgba(23, 23, 27, 0.03)
--shadow-pop0 12px 32px rgba(23, 23, 27, 0.16), 0 2px 6px rgba(23, 23, 27, 0.08)

Oscuro

--shadow-card0 1px 2px rgba(0, 0, 0, 0.4)
--shadow-pop0 12px 32px rgba(0, 0, 0, 0.55)

Layout

Medidas fijas del marco del panel.

Claro

--topbar-h56px
--content-max1280px
--control-h36px
--drawer-w560px

Oscuro

--topbar-h56px
--content-max1280px
--control-h36px
--drawer-w560px

Cómo se aplican

css

.mi-panel {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--panel-tint) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: var(--fs-md);
}
.mi-panel__meta { color: var(--muted); font-size: var(--fs-xs); }

Estados: fondo --success-soft con texto --success; ídem para --warning, --danger y --info. El acento (--accent) es la marca: botón primario y títulos de panel (--accent-text).

Clases de base

admin/src/styles/base.css ofrece las clases que usan los componentes y que puedes usar en tus páginas cuando pintas tu propia lista:

Clase	Efecto
`.ui-panel`	Panel con degradado suave y borde teñido con el acento
`.ui-panel-title`	Título de panel: tipografía de pantalla, mayúsculas, color de acento
`.ui-big`	Cifra grande, números tabulares
`.ui-label`	Etiqueta pequeña en mayúsculas
`.ui-rows`, `.ui-row`	Filas separadas por líneas finas, con tinte del acento al pasar por encima
`.num`	`font-variant-numeric: tabular-nums`
`.mono`	Tipografía de código
`.muted`	Color `--muted`
`.sr-only`	Solo para lectores de pantalla

Tabla completa de tokens

Superficies

Variable	Claro	Oscuro
`--bg`	`#f3f2ee`	`#111114`
`--surface`	`#ffffff`	`#1a1a1f`
`--surface-alt`	`#f8f7f4`	`#202026`
`--sunken`	`#eceae4`	`#26262d`
`--border`	`#e2dfd8`	`#2e2e36`
`--border-strong`	`#cfcbc2`	`#3d3d46`

Texto

Variable	Claro	Oscuro	Nota
`--ink`	`#17171b`	`#f1efea`
`--ink-soft`	`#3d3d44`	`#d0cec8`
`--muted`	`#6a6970`	`#9a98a0`	≥ 4,5:1 sobre bg, surface, surface-alt y sunken (AA)
`--faint`	`#6f6d73`	`#88868d`	≥ 4,5:1 sobre bg, surface y surface-alt (AA)
`--inverse`	`#ffffff`	`#17171b`

Raíl de navegación

Variable	Claro	Oscuro
`--rail`	`#0b0b0b`	`#0b0b0d`
`--rail-active`	`#2a2a30`	`#1f1f24`
`--rail-ink`	`#edebe6`	igual
`--rail-muted`	`#929098`	igual
`--rail-w`	`248px`	igual

Marca y estados

Variable	Claro	Oscuro
`--accent`	`#cfa84a`	igual
`--accent-soft`	`#f9f5ef`	`#3a2c05`
`--accent-ink`	`#3d2b1f`	`#f7cf6a`
`--success`	`#128a4a`	`#3fb877`
`--success-soft`	`#ddf3e6`	`#11301f`
`--danger`	`#d92d20`	`#f2675b`
`--danger-soft`	`#fde4e1`	`#3a1512`
`--warning`	`#b54708`	`#e8924a`
`--warning-soft`	`#fef0c7`	`#3a2410`
`--info`	`#1d5fd1`	`#6b9cf0`
`--info-soft`	`#e1ebfb`	`#14233d`
`--scrim`	`rgba(23, 23, 27, 0.45)`	igual
`--focus`	`#1d5fd1`	`#6b9cf0`

Paneles

Variable	Claro	Oscuro	Nota
`--accent-text`	`color-mix(in srgb, var(--accent) 72%, var(--ink))`	`var(--accent)`	títulos en acento legibles sobre fondo claro
`--panel-border`	`color-mix(in srgb, var(--accent) 26%, var(--border))`	`color-mix(in srgb, var(--accent) 34%, var(--border))`
`--panel-border-strong`	`color-mix(in srgb, var(--accent) 55%, var(--border))`	igual
`--panel-tint`	`color-mix(in srgb, var(--accent) 5%, var(--surface))`	`color-mix(in srgb, var(--accent) 9%, var(--surface-alt))`
`--panel-head`	`color-mix(in srgb, var(--accent) 3%, var(--surface-alt))`	igual
`--row-hover`	`color-mix(in srgb, var(--accent) 7%, transparent)`	igual
`--row-active`	`color-mix(in srgb, var(--accent) 12%, transparent)`	igual
`--hairline`	`var(--border)`	igual

Gráficos

Variable	Claro	Oscuro
`--chart-1`	`#17171b`	`#f1efea`
`--chart-2`	`#cfa84a`	igual
`--chart-ref`	`#cfcbc2`	`#4a4a53`
`--chart-grid`	`#eceae4`	`#26262d`

Inicio del panel

Variable	Claro	Oscuro
`--home-panel`	`#141316`	igual
`--home-panel-alt`	`#1c1b1f`	igual
`--home-panel-border`	`#2a2930`	igual
`--home-ink`	`#f1efea`	igual
`--home-muted`	`#a3a1a8`	igual
`--home-gold`	`#e3bd5c`	igual
`--home-tile`	`#cfa84a`	igual
`--home-tile-alt`	`#c49c3f`	igual
`--home-tile-line`	`rgba(23, 23, 27, 0.16)`	igual
`--home-tile-ink`	`#17171b`	igual
`--home-tile-muted`	`#45361a`	igual
`--home-ok`	`#3fb877`	igual
`--home-warning`	`#e8a24a`	igual
`--home-down`	`#f2675b`	igual
`--home-off`	`#57555d`	igual
`--home-alert`	`#d92d20`	igual
`--home-series-1`	`#e3bd5c`	igual
`--home-series-2`	`#f1efea`	igual
`--home-series-3`	`#8fb7a5`	igual
`--home-series-4`	`#d08d6a`	igual
`--home-series-5`	`#8592c4`	igual
`--home-series-6`	`#f2675b`	igual
`--home-grid`	`#2a2930`	igual

Tipografía

Variable	Claro	Oscuro
`--font-display`	`"Oswald", "Bebas Neue", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif`	igual
`--font-hand`	`"Caveat", "Bradley Hand", "Segoe Print", "Noteworthy", "Comic Neue", cursive`	igual
`--font`	`"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`	igual
`--mono`	`ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace`	igual
`--fs-xs`	`12px`	igual
`--fs-sm`	`13px`	igual
`--fs-md`	`14px`	igual
`--fs-lg`	`16px`	igual
`--fs-xl`	`20px`	igual
`--fs-2xl`	`24px`	igual
`--fs-3xl`	`30px`	igual

Espaciado

Variable	Claro	Oscuro
`--s-1`	`4px`	igual
`--s-2`	`8px`	igual
`--s-3`	`12px`	igual
`--s-4`	`16px`	igual
`--s-5`	`20px`	igual
`--s-6`	`24px`	igual
`--s-8`	`32px`	igual
`--s-10`	`40px`	igual

Radios

Variable	Claro	Oscuro
`--r-sm`	`6px`	igual
`--r-md`	`10px`	igual
`--r-lg`	`14px`	igual
`--r-pill`	`999px`	igual

Sombras

Variable	Claro	Oscuro	Nota
`--shadow-card`	`0 1px 2px rgba(23, 23, 27, 0.05), 0 1px 1px rgba(23, 23, 27, 0.03)`	`0 1px 2px rgba(0, 0, 0, 0.4)`
`--shadow-pop`	`0 12px 32px rgba(23, 23, 27, 0.16), 0 2px 6px rgba(23, 23, 27, 0.08)`	`0 12px 32px rgba(0, 0, 0, 0.55)`

Layout

Variable	Claro	Oscuro
`--topbar-h`	`56px`	igual
`--content-max`	`1280px`	igual
`--control-h`	`36px`	igual
`--drawer-w`	`560px`	igual

Tokens de diseño ​

Muestra aplicada ​

Panel

Panel

Tokens por grupo ​

Superficies

Texto

Raíl de navegación

Marca y estados

Paneles

Gráficos

Inicio del panel

Tipografía

Espaciado

Radios

Sombras

Layout

Cómo se aplican ​

Clases de base ​

Tabla completa de tokens ​

Superficies ​

Texto ​

Raíl de navegación ​

Marca y estados ​

Paneles ​

Gráficos ​

Inicio del panel ​

Tipografía ​

Espaciado ​

Radios ​

Sombras ​

Layout ​

Tokens de diseño

Muestra aplicada

Tokens por grupo

Cómo se aplican

Clases de base

Tabla completa de tokens

Superficies

Texto

Raíl de navegación

Marca y estados

Paneles

Gráficos

Inicio del panel

Tipografía

Espaciado

Radios

Sombras

Layout