Tokens del CSS compilado.
Referencia generada para 10.0.0-candidate.46. Los valores base preceden a los overrides de marca, tema y modo; los tamaños en rem respetan la preferencia de fuente.
Procedencia
Los valores se generan de la base común de consumer-v10.css. El snapshot identifica ambas hojas compiladas del candidato mediante su SHA, sin copiar valores de otro release.
Snapshot de tokens y SHA de origen.
| Hoja | SHA-256 |
|---|---|
| consumer-v10.css | 07892c78b8976a185011357e07b128fc54417f20daecff159b789482fd6371bb |
| style-v10.css | 6c3e2ffe142bcca15549dc87c2b0de297ddd9f89fae023431afa46a99899ca2c |
Espaciado
La escala cerrada usa ocho pasos. Sus valores CSS se leen del release; no dependen de una tabla anterior en píxeles.
| Token | Valor CSS |
|---|---|
--space-1 | .25rem |
--space-2 | .5rem |
--space-3 | .75rem |
--space-4 | 1rem |
--space-5 | 1.5rem |
--space-6 | 2rem |
--space-7 | 3rem |
--space-8 | 4rem |
Familias
| Token | Valor CSS |
|---|---|
--font-sans | "IBM Plex Sans", sans-serif |
--font-mono | "JetBrains Mono", monospace |
Tamaños de texto
| Token | Valor CSS |
|---|---|
--fs-body | .9375rem |
--fs-prose | 1rem |
--fs-small | .84375rem |
--fs-micro | var(--fs-12) |
--fs-fluid-28-3_4-44 | clamp(1.75rem, 3.4vw, 2.75rem) |
--fs-fluid-22-2_4-30 | clamp(1.375rem, 2.4vw, 1.875rem) |
--fs-19 | 1.1875rem |
--fs-12 | .75rem |
--fs-12-5 | .78125rem |
--fs-13 | .8125rem |
--fs-13-5 | .84375rem |
--fs-14 | .875rem |
--fs-15 | .9375rem |
--fs-16 | 1rem |
--fs-17 | 1.0625rem |
--fs-18 | 1.125rem |
--fs-20 | 1.25rem |
--fs-21 | 1.3125rem |
--fs-22 | 1.375rem |
--fs-23 | 1.4375rem |
--fs-24 | 1.5rem |
--fs-26 | 1.625rem |
--fs-27 | 1.6875rem |
--fs-28 | 1.75rem |
--fs-30 | 1.875rem |
--fs-32 | 2rem |
--fs-34 | 2.125rem |
--fs-38 | 2.375rem |
--fs-56 | 3.5rem |
--fs-fluid-18-2-24 | clamp(1.125rem, 2vw, 1.5rem) |
--fs-fluid-19-2-29 | clamp(1.1875rem, 2vw, 1.8125rem) |
--fs-fluid-19-2_2-27 | clamp(1.1875rem, 2.2vw, 1.6875rem) |
--fs-fluid-23-2_2-34 | clamp(1.4375rem, 2.2vw, 2.125rem) |
--fs-fluid-23-3-36 | clamp(1.4375rem, 3vw, 2.25rem) |
--fs-fluid-24-3-38 | clamp(1.5rem,3vw,2.375rem) |
--fs-fluid-24-4-42 | clamp(1.5rem, 4vw, 2.625rem) |
--fs-fluid-25-3-36 | clamp(1.5625rem, 3vw, 2.25rem) |
--fs-fluid-25-3-38 | clamp(1.5625rem, 3vw, 2.375rem) |
--fs-fluid-25-3-42 | clamp(1.5625rem, 3vw, 2.625rem) |
--fs-fluid-25-4-48 | clamp(1.5625rem, 4vw, 3rem) |
--fs-fluid-27-3-36 | clamp(1.6875rem,3vw,2.25rem) |
--fs-fluid-27-4-48 | clamp(1.6875rem, 4vw, 3rem) |
--fs-fluid-28-3-42 | clamp(1.75rem, 3vw, 2.625rem) |
--fs-fluid-30-4-54 | clamp(1.875rem, 4vw, 3.375rem) |
--fs-fluid-32-4-52 | clamp(2rem, 4vw, 3.25rem) |
--fs-fluid-32-5-58 | clamp(2rem, 5vw, 3.625rem) |
--fs-fluid-40-5-64 | clamp(2.5rem,5vw,4rem) |
--fs-fluid-42-5-72 | clamp(2.625rem, 5vw, 4.5rem) |
--fs-fluid-42-6-72 | clamp(2.625rem, 6vw, 4.5rem) |
--fs-hero | clamp(2.375rem, 5.4vw, 4.25rem) |
--fs-mono-label | var(--fs-12) |
--fs-relative-88 | max(.75rem, .88em) |
--fs-relative-90 | max(.75rem, .9em) |
--fs-relative-92 | max(.75rem, .92em) |
Roles de texto
| Rol | Tamaño CSS | Peso | Interlineado |
|---|---|---|---|
| Cuerpo de interfaz | var(--fs-body) | 400 | 1.58 |
| Título principal | var(--fs-fluid-28-3_4-44) | 700 | 1.2 |
| Título de sección | var(--fs-fluid-22-2_4-30) | 600 | 1.1 |
| Subtítulo | var(--fs-19) | 600 | 1.15 |
| Prosa ArticleBody | --fs-prose | 400 | 1.58 |
Geometría
Superficies y controles rectos. --radius-pill se reserva a la píldora de Ingresar autorizada por H28; no define radios de cards o campos. Mark circular, avatar, radio e indicador circular conservan su función.
| Token | Valor CSS |
|---|---|
--radius | 0 |
--radius-ctl | 0 |
Layout y lectura
.l-measure es una primitiva opt-in para lectura. La longitud de línea se comprueba en el contenido real: hasta 80 caracteres, además del tope en rem.
| Token | Valor CSS |
|---|---|
--layout-reading | 36rem |
--layout-content | 80rem |
--layout-gutter | clamp(1.25rem, 3vw, 3rem) |
--layout-region | clamp(3.5rem, 7vw, 6.5rem) |
--layout-space-1 | var(--space-2) |
--layout-space-2 | var(--space-3) |
--layout-space-3 | var(--space-4) |
--layout-space-4 | var(--space-6) |
--layout-space-5 | var(--space-7) |
Papel, tinta y límites de control
Valores base antes de data-brand y data-theme. Un borde de control usa line-control; line separa contenido. La tabla de contraste por marca y tema verifica sus usos, no sólo el valor nominal de un token.
| Token | Valor CSS |
|---|---|
--paper | #fff |
--paper-raised | var(--n-superficie-1) |
--paper-sunken | #f3f4f5 |
--ink | var(--n-texto) |
--ink-muted | var(--n-texto-2) |
--ink-soft | var(--n-texto-3) |
--line | var(--n-borde) |
--line-control | var(--n-borde-control) |
--control-height | 2.625rem |
--nav-target | max(2.75rem, 44px) |
Rótulos y mayúsculas
- Caja natural en títulos, navegación, controles, badges y metadatos.
- Mayúsculas sólo en logo, siglas y el literal Región Metropolitana.
- El contexto se expresa en el título o en el cuerpo; no mediante una ceja decorativa.
- El build rechaza referencias a tokens ausentes de las hojas compiladas.