Tokens

Already settled

• The colour tokens exist and this site consumes them: base.css (neutrals, semantic, signatures), one CSS file per brand with its ramp and roles in light and dark, all.css with every brand under data-brand, and tokens.json in DTCG format (ADR-0015).
• The typography tokens exist and this site consumes them: type.css with the fonts, the scale, the line heights, the tracking, the measure and the roles (--type-…), and the font and typography groups of tokens.json (ADR-0020, proposed).
• The shape tokens exist and this site is built with them alone: shape.css with spacing, radii, layout, motion, focus and elevation, and the space, radius, layout, motion, focus and elevation groups of tokens.json (ADR-0021, proposed).

Specification

1. The contract is CSS custom properties: a site links /tokens/base.css, /tokens/type.css, /tokens/shape.css and then /tokens/<brand>.css, and styles only with the roles (--color-page, --color-text, --color-accent…; font: var(--type-body)…), never with raw ramp steps or sizes of its own.
2. A component that shows another brand is wrapped in data-brand="<brand>" with all.css: the roles resolve to that brand inside the element.
3. Light and dark: each brand's CSS carries both; every site renders light and dark switches on only on request, with data-theme="dark" on the root element, which the theme toggle sets and the cookie akribis-theme remembers; never from the system setting (ADR-0037, proposed).
4. tokens.json (DTCG) is the same source for tools that do not read CSS.
5. Shape (ADR-0021): a spacing is a multiple of 0.25 rem (4 px), --space-1 to --space-24 (0.25 to 6 rem): 1–2 inside a control and between a label and its value; 3–4 inside a component; 6–8 between components; 12–20 between sections. Nothing in between.
6. Radii: 0 on surfaces, cards, tables and images (tight corners read as precise); 2 px on tags and chips; 4 px on controls; 8 px on dialogs, menus and toasts; pill on status; round on avatars and dots.
7. Frames: container 80 rem, content 64 rem, reading column 46 rem; gutter 1 rem, 2 rem from md; 12 columns with a 1.5 rem gap; breakpoints sm 36, md 48, lg 64, xl 80 rem, always mobile-first (min-width only); interactive targets at least 1.5 rem (24 px), controls 2.75 rem (44 px) tall; a site's primary bar 3.25 rem (52 px).
8. Motion: 120 ms for a change of state (hover, focus), 200 ms to reveal (menus, tooltips, accordions), 320 ms to move (dialogs, panels); easing standard cubic-bezier(0.2, 0, 0, 1) and exit cubic-bezier(0.4, 0, 1, 1). Under prefers-reduced-motion every duration is 0.
9. Focus: a 2 px ring in the accent, 2 px outside the element, on every interactive element; on an accent-filled control the ring is on-accent and sits inside the edge.
10. Elevation: structure is drawn with 1 px hairlines in --color-line and with bands; the one shadow is for overlays (menus, dialogs, toasts) and never for cards; layers raised 1, sticky 10, overlay 100, toast 1000.
11. This site styles with these tokens alone: the build fails on a spacing, radius, shadow, duration or breakpoint of its own.

To re-reason

• Whether a second shadowed elevation is ever needed, or dark-mode shadows beyond a change of opacity.
• Tailwind as an optional layer over the custom properties.

Evidence to audit

• 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

Delivers

• tokens.json
• base.css
• type.css
• shape.css and one CSS file per brand.

Decision

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