/* hiq-design / tokens.css: the shared core * * The values every HUBIQ site shares whatever it looks like: space, the type scale, line * heights, motion, and the semantic aliases the kit reads. Since 23 October 2026 no colour * and no type family lives here. Those belong to a theme, themes//theme.css, which * each site imports (KIT.md, section 0). Canonical source: hiq-core-design.md in this * repo. Where the two disagree, the markdown wins and this file is wrong. * * Sites still merge this file into globals.css by hand. Importing it as code, the way the * theme is, is the next step and is not done yet (THEMES-PLAN.md). */ :root { /* ---- the semantic layer. This is the part that matters. ---- * Three levels, and only three. Nothing may reach past this chain to a hex. * A component written against --ac is reusable by all sixteen initiatives. * A component written against #A9F20C is reusable by one. * The palette and --house are the theme's; --ac is core. */ --ac: var(--house); /* per-surface accent, overridden once at a page or card root */ /* ---- the accent wash behind a card ---- * Only the two numbers are tokens, deliberately. Putting the whole gradient in a * custom property here does NOT work: a var(--ac) inside it resolves against the * root accent at this point and inherits down with house green baked in, so every * card loses its own colour. The gradient stays written out in each rule, where * var(--ac) resolves against that card. This was a real bug, twice. */ --wash: 12%; --wash-fade: 68%; /* ---- space. Four-unit base. ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px; --s11: 160px; /* ---- type scale. Seven roles, each with its size, leading and tracking. ---- * Added at 2.0 after atomiq-web showed the old table's problem: h-hero and h-sec * overlapped in size on a wide screen, so every page read as a run of H1s, and body * copy had drifted across seven sizes with no rule. Now: one display size per page, * a section heading clearly a step below it, and body text at one size, in one colour. * * role size leading tracking colour * display clamp(40px, 5.6vw, 76px) 1.04 -.035em paper once per page * h2 clamp(28px, 3.2vw, 42px) 1.12 -.025em paper section heading * h3 clamp(21px, 1.9vw, 26px) 1.22 -.018em paper sub-heading, statement * h4 18px 1.3 -.012em paper card and list titles * lead clamp(18px, 1.5vw, 21px) 1.5 0 paper the sentence under a heading * body 16px 1.6 .006em muted running text * small 14px 1.5 .006em muted captions, cells, notes * meta 11px mono 1.4 .14em muted2 eyebrows, labels, caps * * The colour column is the rule that stops pages going grey: headings and leads are * paper, running text is muted, labels are muted2. Nothing in between. */ --t-display: clamp(40px, 5.6vw, 76px); --lh-display: 1.04; --tr-display: -.035em; --t-h2: clamp(28px, 3.2vw, 42px); --lh-h2: 1.12; --tr-h2: -.025em; --t-h3: clamp(21px, 1.9vw, 26px); --lh-h3: 1.22; --tr-h3: -.018em; --t-h4: 18px; --lh-h4: 1.3; --tr-h4: -.012em; --t-lead: clamp(18px, 1.5vw, 21px); --lh-lead: 1.5; --t-body: 16px; --t-small: 14px; --lh-small: 1.5; --t-meta: 11px; --lh-meta: 1.4; --tr-meta: .14em; /* ---- light-on-dark compensation. Not taste. ---- * Light text on a dark ground blooms: strokes optically thicken, counters fill. * Body gets more leading and positive tracking to hold it open. */ --lh-body: 1.6; --tr-body: .006em; } /* Values only since 3.2.1 (26 October 2026), so any site can import this file as code. The v1 class rules that used to sit here (.card-wash, .lift and a blanket reduced-motion rule) left with it: the v1 sites that use them carry their own copies, and in v2 every kit part honours reduced motion itself. */ /* ---- the two easings. There are only two. ---- */ :root { --ease-state: cubic-bezier(.2,.7,.3,1); /* most state change, 220-300ms */ --ease-panel: cubic-bezier(.16,1,.3,1); /* panels that open */ } /* ====================================================================================== * v2. Added 25 September 2026 on the v2 branch, for hubiq.co.uk v2. Merged to main at * cutover, when the v1-only tokens above that nothing uses any more are retired. * The v2 grounds, the text on them and the hairlines moved to the theme on 23 October 2026. * ==================================================================================== */ :root { /* ---- type roles, v2. Hierarchy from scale, colour, family and placement; weight * does the least of it. Prefixed --type- so they cannot collide with the v1 --t- * scale while both are in use. ---- */ --type-word: clamp(88px, 14vw, 232px); /* display words: decoration, not headings */ --type-h1: clamp(40px, 4.2vw, 62px); --type-h2: clamp(28px, 2.6vw, 38px); --type-lead: clamp(24px, 2.2vw, 32px); /* the lead statement, the one that fills */ --type-h3: clamp(20px, 1.6vw, 24px); --type-body: 17px; --type-small: 14.5px; --type-label: 13px; /* mono, sentence case, with confidence */ --type-stat: clamp(56px, 6.4vw, 104px); /* mono numerals */ --lh-word: .86; --lh-h1: 1.06; --lh-h2: 1.12; --lh-lead: 1.18; --lh-h3: 1.2; --lh-body2: 1.72; --lh-label: 1.45; /* ---- motion, v2. Four curves, one per job ---- */ --ease-reveal: cubic-bezier(.165,.84,.44,1); /* content arriving, 1 to 1.2s */ --ease-ui: cubic-bezier(.77,0,.175,1); /* state that moves a surface, .25 to .4s */ --ease-pop: cubic-bezier(.34,1.56,.64,1); /* small pops with a little overshoot, .5s */ --ease-hover: cubic-bezier(.25,.46,.45,.94); /* hover micro-states, .2 to .25s */ }