Tokens

Ya decidido

• Los tokens de color existen y este sitio los consume: base.css (neutros, semánticos, firmas), un CSS por marca con su escala y sus funciones en claro y oscuro, all.css con todas las marcas bajo data-brand, y tokens.json en formato DTCG (ADR-0015).
• Los tokens de tipografía existen y este sitio los consume: type.css con las fuentes, la escala, los interlineados, el tracking, la medida y las funciones (--type-…), y los grupos font y typography de tokens.json (ADR-0020, propuesta).
• Los tokens de forma existen y este sitio se construye solo con ellos: shape.css con espaciado, radios, marcos, movimiento, foco y elevación, y los grupos space, radius, layout, motion, focus y elevation de tokens.json (ADR-0021, propuesta).

Especificación

1. El contrato son propiedades CSS personalizadas: un sitio enlaza /tokens/base.css, /tokens/type.css, /tokens/shape.css y después /tokens/<marca>.css, y estiliza solo con las funciones (--color-page, --color-text, --color-accent…; font: var(--type-body)…), nunca con pasos crudos de la escala ni con tamaños propios.
2. Un componente que muestra otra marca se envuelve en data-brand="<marca>" con all.css: las funciones se resuelven a esa marca dentro del elemento.
3. Claro y oscuro: el CSS de cada marca trae ambos; todo sitio se muestra claro y el oscuro se activa solo a pedido, con data-theme="dark" en el elemento raíz, que pone el selector de tema y recuerda la cookie akribis-theme; nunca por la preferencia del sistema (ADR-0037, propuesta).
4. tokens.json (DTCG) es la misma fuente para herramientas que no leen CSS.
5. Forma (ADR-0021): el espaciado es un múltiplo de 0,25 rem (4 px), --space-1 a --space-24 (0,25 a 6 rem): 1–2 dentro de un control y entre una etiqueta y su valor; 3–4 dentro de un componente; 6–8 entre componentes; 12–20 entre secciones. Nada entre medio.
6. Radios: 0 en superficies, tarjetas, tablas e imágenes (las esquinas ajustadas se leen precisas); 2 px en etiquetas y chips; 4 px en controles; 8 px en diálogos, menús y avisos; píldora en estados; redondo en avatares y puntos.
7. Marcos: contenedor 80 rem, contenido 64 rem, columna de lectura 46 rem; margen lateral 1 rem, 2 rem desde md; 12 columnas con 1,5 rem de separación; puntos de quiebre sm 36, md 48, lg 64, xl 80 rem, siempre de móvil hacia arriba (solo min-width); objetivos interactivos de al menos 1,5 rem (24 px), controles de 2,75 rem (44 px) de alto; la barra primaria de un sitio, 3,25 rem (52 px).
8. Movimiento: 120 ms para un cambio de estado (hover, foco), 200 ms para revelar (menús, tooltips, acordeones), 320 ms para mover (diálogos, paneles); curvas estándar cubic-bezier(0.2, 0, 0, 1) y salida cubic-bezier(0.4, 0, 1, 1). Con prefers-reduced-motion toda duración es 0.
9. Foco: un anillo de 2 px en el acento, 2 px por fuera del elemento, en todo elemento interactivo; sobre un control relleno de acento, el anillo es on-accent y va por dentro del borde.
10. Elevación: la estructura se dibuja con filetes de 1 px en --color-line y con bandas; la única sombra es para superposiciones (menús, diálogos, avisos) y nunca para tarjetas; capas raised 1, sticky 10, overlay 100, toast 1000.
11. Este sitio se estiliza solo con estos tokens: el build falla ante un espaciado, radio, sombra, duración o punto de quiebre propio.

Para volver a razonar

• Si alguna vez hace falta una segunda elevación con sombra, o sombras distintas en modo oscuro más allá de la opacidad.
• Tailwind como capa opcional sobre las propiedades CSS.

Evidencia para auditar

• brand/shape.yaml · brand/src/shape.ts · brand/test/shape.test.ts (the ladder, the files and the lint of this site's own CSS)
• Draft 0.2 brandbook artifact (2 Oct 2026), section 08 Shape & motion: 4 px base, radii 2/4/6/8, hairlines and bands, one shadow for overlays, 2 px focus, 120/200/320 ms
• This site's CSS before the tokens: 19 distinct gaps and paddings, four breakpoints (36, 40, 48, 56 rem), max-width queries
• WCAG 2.2: 1.4.11 non-text contrast, 2.4.13 focus appearance, 2.5.8 target size, 2.3.3 animation from interactions
• AKRIBIS-Group/design@main · brand/tokens/, packages/theme/
• Token files of akribis_info, akribis_one, akiot_es, akleia_info, solfarma_com

Entrega

• tokens.json
• base.css
• type.css
• shape.css y un archivo CSS por marca.

Decisión

• ADR-0015 Build the ramps, neutrals, semantic colours and roles on one lightness grid Aceptada
• ADR-0020 Set IBM Plex Sans and Plex Mono for every brand, self-hosted and subset by rule, on a documented scale Propuesta
• ADR-0021 Build the shape tokens on one 4 px base: spacing, radii, layout, motion, focus and elevation Propuesta
• ADR-0037 Render every site light by default and dark only on request Propuesta