/* Breacer — scales * ============================================================================ * assets/design.css fixes the TYPOGRAPHY and the MOTION, and does it well: * 312 of the 312 font sizes across the three screens run through it. * * What was missing were the three scales underneath, and that is measurable * (docs/design-audit.md, part 1): * * 35 different spacing values in the dashboard, of which 40% on a * 4pt grid. Next to 8px stood 7px and 9px; next to 20px stood 22px. * 19 different border-radius values. Next to 8px stood 7px and 9px. * 21 different white transparencies (0.015 through 0.55) for surfaces and * borders -- every surface chose its own opacity. * 12 line heights, not one of them through a token. * * Nobody sees the difference between 0.035 and 0.04. Everybody feels that * nothing in the interface looks like the same material. * * Loaded AFTER design.css and BEFORE the page's own block. */ :root { /* --- Space ---------------------------------------------------------------- * One 4pt grid, seven steps. No in-between values, and that is the whole * rule: adding an eighth step means 35 again within a year. */ --sp-1: 4px; /* icon to text */ --sp-2: 8px; /* inside a component */ --sp-3: 12px; /* between related elements */ --sp-4: 16px; /* component padding, row spacing */ --sp-5: 24px; /* between groups */ --sp-6: 32px; /* section spacing */ --sp-8: 48px; /* page header to content */ /* --- Rounding --------------------------------------------------------- * Three values. The rule: the radius follows the SIZE of the surface, not * the taste of the component. * * --radius-card stood at 28px. That is the radius of an app icon, not of * a list item, and it is the main reason the screen looked playful * instead of precise. */ --r-sm: 8px; /* everything under ~40px tall: badge, input field, small button */ --r-md: 16px; /* card, panel, list block, modal */ --r-full: 999px;/* only what really is a pill: filter chip, status pill */ /* The existing names keep existing as an alias. They appear in hundreds of places and a search-and-replace of them would produce no visible difference. --radius-card pointed to 28px; it now points to --r-md. */ --radius-card: var(--r-md); --radius-pill: var(--r-full); --radius-chip: var(--r-sm); /* --- Surface ------------------------------------------------------------ * Four values instead of 21. Three surfaces and one line. * * The rule for separating things, in order: first space, then a hairline, * only then a surface jump. A border AROUND a surface that already has a * different fill is redundant -- and that is exactly what happened * everywhere (a border at 0.18 around a surface of 0.05). */ --surface-0: #000000; /* page */ --surface-1: rgba(255,255,255,0.04); /* card, row, input field */ --surface-2: rgba(255,255,255,0.08); /* raised: modal, active row */ --hairline: rgba(255,255,255,0.10); /* the ONLY separator line */ /* Aliases for what was already there. --glass-border was 0.18: almost twice as strong as the fill around it, so every surface showed its frame instead of its surface. */ --glass-bg: var(--surface-1); --glass-bg-raised: var(--surface-2); --glass-border: var(--hairline); /* One shadow, only for what floats above the page. */ --shadow-raised: 0 12px 32px rgba(0,0,0,0.5); /* --- Line height ---------------------------------------------------------- * Four values instead of twelve. Nobody sees the difference between 1.4 * and 1.45; everybody feels the difference between twelve values. */ --lh-tight: 1.15; /* large headings, large numbers, brand-name stacks */ --lh-snug: 1.35; /* labels, sub-rows, compact help text */ --lh-base: 1.5; /* running text */ --lh-loose: 1.65; /* long paragraphs (privacy, answer text) */ /* --- Tracking ------------------------------------------------------------- * Inter Tight was removed from --font-display: display and body are now * the same family. What still makes a heading a heading is size, weight * and TRACKING -- and that last one sat at four different values * (-0.01em, -0.015em, -0.02em, and not at all on nineteen display lines). * * Two values, and the rule is the SIZE, not the component: */ --track-lg: -0.02em; /* --fs-xl and up: headings, large numbers */ --track-md: -0.01em; /* --fs-lg and --fs-md: brand name, card title */ /* Below --fs-md NO negative tracking: there it costs legibility and gains nothing. The positive tracking on capital labels (0.04em and up, 30 uses) is a separate scale and was not touched here. */ /* The four values are NOT made up but derived: the fourteen values that were there were each moved to the nearest step, with a maximum shift of 0.10. 1.5 was already the de facto body value with 21 uses, so that was kept instead of overlaying it with 1.45. `line-height:1` stays wherever it is not a text line but a box reset (icon boxes, centered single-line buttons): 7 places. */ /* --- Color and border (phase 2.1, 2 Sep 2026) ----------------------------- * Stood byte-identical in index.css, dash.css and the inline style of * accounts, notifyshare and breacer -- five places, one truth. Now here, * because componenten.css uses them on every page. * * --blauw is the glow and the focus ring; --blauw-knop the button. WHY * that is not #007AFF: white text on #007AFF reaches 4.06:1 and so falls * below WCAG AA (4.5:1 for regular text; a 14px button label counts as * regular text, even bold). #0068E1 reaches 5.11:1. Barely visible to the * naked eye, but not in legibility; the browser test checks it. * * --rand is the OUTLINE of a surface and NOT a separator line, so not * --hairline (0.10): a black field on a black page only exists once you * see its outline, and at 0.10 it disappears. --rand-dikte is the * thickness of EVERY white border, in one place: ten separate values * drift apart within a year. */ --blauw: #007AFF; --blauw-knop: #0068E1; --groen: #00C853; /* status: active, succeeded, live -- never a button */ --rood: #FF3B30; /* error, and irreversible deletion */ --amber: #FF9F0A; /* attention */ --violet: #AF7AFF; /* wealth, capital, snooze */ --tekst: #FFFFFF; --tekst-gedempt: #82828A; /* 5.19:1 on black -- #6C6C70 did not reach AA */ --rand: rgba(255,255,255,0.22); --rand-actief: rgba(255,255,255,0.42); --rand-dikte: 2px; /* Frosted glass: the panels let the aurora show through, faded; the color inside is a consequence of the light beneath it. Menus, dropdowns, the loading pill and the confirmation bell share this recipe literally. */ --glas: rgba(6, 6, 10, 0.58); --glas-waas: blur(22px) saturate(150%); } /* --- One more note about --fs-2xs (11px, lives in design.css) ------------- * It was removed from almost everywhere: 10px is too small for UI text. What * still carries it are microlabels -- badges (PRO, "this device"), small * counters behind a menu row, the labels in the mobile tab bar. On 2 Sep * 2026 moved from 10 to 11px: since the More drawer the tab bar has FIVE * tabs instead of six, and at that point the measurement below no longer * held. * * Six tabs on a 390px screen: * 10px -> together 368px fits * 11px -> together 390px fits exactly, no margin * 11.5px -> together 401px overflows by 11px * Five tabs at 11px: 325px, plenty of room. * * A tab-bar label of 10-11pt under an icon is moreover exactly what iOS * itself does. Whoever changes anything here, measure again at 390px first. */