/* ═══ tokens ═══════════════════════════════════════════════════════════════ Every colour, size, weight, radius, shadow, easing and duration in the product. Nothing below this file invents a value. The reason this is one file rather than a section at the top of a stylesheet: the moment two files each define their own "slightly darker grey", the product has two greys and neither is wrong enough to fix. A token file is only useful if it is the ONLY source, so a hex code, an rgb(), a blurred shadow or an off-scale radius anywhere else in web/ is a bug — and api/tests/test_design_tokens.py fails on one. ── WHERE THESE VALUES COME FROM ────────────────────────────────────────── Until docs/61 every value here was a framework default: Tailwind's indigo-600 on Tailwind's slate, its emerald, red and amber at 600, one 16px radius on everything, and a font stack that named Inter and never loaded it. The file was well organised and nobody had chosen anything in it. The FAMILY is kept — the mark is indigo, the sign-in panel is built on it, and a firm that has used this product for a year should still recognise it. The values are chosen: an indigo a little deeper and a little less saturated than the default, and neutrals that lean the same way (hue 232°) so a grey beside the accent reads as part of one palette rather than as the absence of one. No ink is pure black and no ground is pure white; paper is, because a printed page is. ── BRAND IS NOT STATUS ── the rule that matters most in a payroll product ── `--accent` and its family (`--accent-ink`, `--accent-wash`, `--brand-*`, the bar) are BRAND. They belong on navigation, primary actions, focus, and small emphasis. They never say whether something went well. `--good`, `--warn`, `--critical` and `--info` are STATUS. They belong on chips, the rail of a row, inline validation and the two solid controls that end something — and nowhere else. They are never decoration, never a heading colour, never the colour of an ordinary figure: a deduction is not a failure, and it is not drawn in red. The two families never share a value, and the test asserts it. A "disbursal failed" chip and a primary button must not look alike at a glance, because the cost of misreading a payroll status is real money. Before docs/61 they differed by luck; now they differ by a rule somebody would have to break on purpose. `--violet` and `--viz-*` are a third thing: CATEGORY. One salary component against another, one deduction against another in a chart. A category says "a different kind", never "better" or "worse". ── A CHART IS NEVER THE ACCENT AND NEVER A STATUS ── docs/68, docs/71 ──── The rule above, extended. `--viz-1` … `--viz-6` (one kind against another), `--seq-1` … `--seq-5` (less to more of ONE thing — a heatmap's cell) and `--div-1` … `--div-5` (below and above a middle — a variance) are the only colours a chart draws in: a red bar reads as an error and an accent bar reads as something to press, and a chart is neither. docs/68 held that rule by VALUE, and a value one digit away is the same colour: --viz-1 was 4.2 (OKLab ×100) from the accent, --viz-4 4.1 from the dark theme's warning, --seq-5 2.9 from the dark accent ink. docs/71 holds it by how far apart colours LOOK — design_tokens.py measures in OKLab, and as protanopia and deuteranopia see (Machado 2009): · a series stays 15 from the accent and from every status, and 15 from its neighbour; 8 from its neighbour to a red–green colour-blind reader; · no ramp step comes nearer than 10 to the accent or a status — nearer than that is one colour at a glance; · the sequential ramp is one indigo, each step at least 0.06 of lightness past the last, its far end 3:1 on a card; · the diverging ramp is two hues at least 90° apart about a grey, its two sides apart to a colour-blind reader at every step. Red, amber and green are not in the six at all — those hues answer "did it go well", and a chart never does. `python api/tools/design_tokens.py --chart` prints every measurement. ── CONTRAST ────────────────────────────────────────────────────────────── Every text pair the product draws is WCAG 2.2 AA in both themes — 4.5:1 for text, 3:1 for the edge of a control — and the ratios are computed from this file by `python api/tools/design_tokens.py`, not asserted from memory. The defaults this file replaced failed five of them: amber on its wash was 3.07, green on its wash 3.58, and the dark theme's danger button 2.77. */ :root{ /* ── surfaces, back to front ────────────────────────────────────────────── The plane is tinted and the surface is nearly white, so a card lifts off the page without needing a shadow to say so. GRADED, docs/71. docs/61 chose each of these on its own; looked at as one picture, a near-black navy bar sat on a pale lavender page and the two read as two products stacked. The ground is a shade cooler now — the lavender cast (the crown was hue 280°, violet of the accent's own 277°) is gone to a cool grey that lets the indigo mean something — and the bar a shade lighter and warmer (below), so a screenshot is one surface with a dark band on it. */ --plane:#eef1f5; /* the page behind everything */ --surface:#fcfdfe; /* cards, panels */ --raised:#fefeff; /* menus, dialogs, inputs — one step nearer */ --sunk:#e3e6ed; /* table heads, and anything that is chrome not content */ /* ink, in three weights and one more. Three is enough: primary, secondary, and the one for text that must be present but must not be read first. --ink-3 is still real text and still passes AA on every surface above; --ink-4 does not, on purpose. */ --ink:#171a2f; --ink-2:#3b4060; --ink-3:#5a6083; --ink-4:#868cab; /* placeholders, disabled, drawn marks — never words to be read */ --line:#dbe0e8; --line-2:#e8ebf1; /* The edge of something a person types into or ticks. A hairline is enough to separate two rows; it is not enough to say "this is a field", and WCAG asks 3:1 of a control's boundary for exactly that reason. */ --line-ctl:#868cab; /* ── brand ──────────────────────────────────────────────────────────── */ --accent:#4340b5; /* fills and edges: the primary button, a current tab's rule */ --accent-ink:#3a37a0; /* the accent as TEXT — links, a current item's label */ --accent-wash:#ebebfa; /* Text and controls that sit ON the accent. Stays light in dark mode too — indigo is a mid tone in both, so this is not a theme-flipping colour and treating it as one produces dark text on a dark button. */ --on-accent:#ffffff; --knob:#ffffff; /* Keyboard focus. The accent in the light theme; in the dark one the accent is too near the ground to be found, so focus wears the accent's ink. */ --focus:#4340b5; /* The page's crown: a soft light behind the header that fades into the plane. Depth without a border. Cool, like the ground (docs/71) — it was the lavender half of the seam under the bar. */ --plane-glow:#e7ebf2; /* ── the bar ────────────────────────────────────────────────────────────── One constant, confident band of brand across the top. It does not flip with the theme, for the same reason the sign-in panel does not: chrome that changes colour with the weather is chrome nobody recognises. Everything inside the bar wears bar ink, never page ink. An indigo slate, not a near-black navy (docs/71): #151830 was lightness 0.22 at hue 276°, cold beside everything else on the page; this is 0.30 at 284°, toward the accent the page's buttons are drawn in, so the band and the page are one palette. Still dark enough that every word on it clears AA at the liquid's brightest — the two quieter inks rose a step with it. */ --bar-bg:#2a294b; --bar-ink:#eceefa; --bar-ink-2:#bcc2e2; /* Lighter than docs/61 chose (#8f98c2) twice over: once for the liquid under the bar (docs/70), once for the lighter bar (docs/71). Every ink on the bar is measured at the liquid's brightest. It is still quiet: 1.24:1 from the resting items' ink, which is the whole of what "quiet" means. */ --bar-ink-3:#a6aed5; --bar-line:#3c3b61; --bar-wash:rgba(138,136,230,.18); /* a chip, a reached-for control, and the current page's pill */ --bar-wash-2:rgba(138,136,230,.09); /* the pill a hover previews: the same, at half (docs/70) */ --bar-active-ink:#cdd0fb; /* the current item's text */ /* The line along the foot of the current page's pill. Lighter than the glow it used to share a value with (--brand-light): an edge that says "you are here" is 3:1 against the brightest the liquid under it gets. */ --bar-underline:#9e9eec; /* The brand surface — the panel beside the sign-in form and the greeting band, and nothing else. Deep indigo through to the accent, with two lights over the top. It does NOT flip in dark mode: a brand panel that changes colour with the system theme is a brand that does not have a colour. */ --brand-1:#262466; /* the deep corner */ --brand-2:#3a37a0; /* the middle */ --brand-3:#4340b5; /* meeting the accent */ --brand-light:#8a88e6; /* the top-left glow */ --brand-cool:#5fb6dc; /* one cool note bottom-right */ --on-brand:#ffffff; /* ── status ─────────────────────────────────────────────────────────────── See BRAND IS NOT STATUS above. Each is text on its own wash at 4.5:1 or better, and text on a card likewise. */ --good:#0e6e4c; --good-wash:#e6f4ee; --warn:#8a5300; --warn-wash:#fbf1de; --critical:#b3261e; --critical-wash:#fbecea; --info:#0a5f8a; --info-wash:#e3f1f8; /* A status as a SOLID with words on it: the button that ends something, the count on the bell. Its own token because in the dark theme the text colours above are light — right for words on a dark wash, and unreadable under white words. */ --critical-solid:#b3261e; --on-solid:#ffffff; /* ── category ───────────────────────────────────────────────────────────── A different kind, never a better or a worse one. */ --violet:#6a3fc0; --violet-wash:#f0ebfa; /* Chart series, in THIS order — the order is part of the palette: every pair of neighbours was chosen to read apart to everybody and to a red–green colour-blind reader, so a chart assigns them in sequence and never skips or cycles (a seventh kind folds into "Other"). Teal leads: a chart with one series draws in it. Each is 3:1 on a card. (docs/71 §7) */ --viz-1:#19a1a0; /* teal */ --viz-2:#ad8c3c; /* ochre */ --viz-3:#a479de; /* lavender */ --viz-4:#669014; /* moss */ --viz-5:#af5b95; /* orchid */ --viz-6:#2692e1; /* azure */ /* Less to more of one thing: a heatmap's cell. One indigo, five steps, each further from the card than the last — and the far end STOPS short of the accent (15.7 from it), so the most a heatmap can say is never drawn in the colour of the thing to press. The pale end may recede into the card; it means "hardly any". */ --seq-1:#ebedfe; --seq-2:#cdd1f5; --seq-3:#adb2ea; --seq-4:#8e94dd; --seq-5:#7275cc; /* Below and above a middle: a variance. Lavender for less, ochre for more, a grey for no change — two hues a red–green colour-blind reader sees as blue and yellow, and neither of them a status: a fall is not a failure. */ --div-1:#9369c0; --div-2:#c2acde; --div-3:#e5e6e9; --div-4:#dac68f; --div-5:#af8d32; /* Paper — for print previews and the documents themselves. A printed page is white in every theme, so these NEVER flip in dark mode; the ink chosen for paper (the company's own accent) was chosen against white. The payslip designer, the payslip, the letter and the settlement all draw from these, so the picture of a page and the page are one palette — and since docs/71 the salary certificate too, which the server renders: it reads this block (api/vetan/filings/paper.py) instead of its own twenty-five hex codes. */ --paper:#ffffff; --paper-ink:#14161f; --paper-ink-2:#454a5c; --paper-ink-3:#656a7e; --paper-line:#dfe1e8; /* A ruled edge on paper — a box around a party, the rule under a group. Firmer than a hairline, and 3:1 on the page like any edge. */ --paper-rule:#8a8fa0; --paper-sunk:#f3f4f8; --paper-good:#0e6e4c; --paper-warn:#8a5300; /* The certificate's banner — "Part A comes from TRACES" — and its warnings. */ --paper-warn-wash:#fdf6e3; /* Something a statutory document needs and does not have: PAN NOT AVAILABLE. */ --paper-bad:#b3261e; /* ── type ───────────────────────────────────────────────────────────────── IBM Plex, served from /fonts (styles/fonts.css, build/fonts.py). Every figure in it is one width, so a column of money aligns even in the cell somebody forgot to mark — `tabular-nums` stays on every figure all the same, for the machine where the face did not load and Segoe UI is drawing the numbers. The fallbacks are real: Segoe UI is what every Windows machine has, and Nirmala UI is what Windows draws Devanagari with. */ --sans:"Vetan Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto, "Noto Sans","Helvetica Neue",Arial,"Nirmala UI","Noto Sans Devanagari",sans-serif; --mono:"Vetan Mono","Cascadia Mono",Consolas,ui-monospace,"SF Mono",Menlo,monospace; --deva:"Vetan Mark","Nirmala UI","Noto Sans Devanagari","Kohinoor Devanagari",sans-serif; /* Ten sizes, and one for display. There were twenty-one, from 9.5px to 30px in half-pixel steps, which is what a scale looks like when nobody has written one down. Nothing the product prints is smaller than 11px. */ --fs-2xs:11px; /* capitals: table heads, the label over a figure */ --fs-xs:12px; /* help, meta, a citation */ --fs-sm:13px; /* a dense table's cells, a small control */ --fs-md:14px; /* controls, a comfortable table's cells */ --fs-base:15px; /* body */ --fs-lg:17px; /* a card's or a dialog's title */ --fs-xl:21px; /* a figure that matters */ --fs-2xl:24px; /* a dense page's heading */ --fs-3xl:28px; /* a comfortable page's heading */ --fs-4xl:32px; /* the one number a tile exists for */ --fs-display:48px; /* the door's greeting, and nothing a page reads (docs/69) */ /* Three weights, because three faces are served. There were thirteen, written for a variable system font; with `font-synthesis-weight:none` below, 560 and 590 and 650 were each silently drawn as whichever real face was nearest. */ --w-regular:400; --w-medium:500; --w-strong:600; --lh-tight:1.2; --lh-snug:1.4; --lh-body:1.55; /* ── radius, as a scale ─────────────────────────────────────────────────── Tight on anything dense, medium on a card, and the large one kept for the sign-in frame. One 16px radius on a card, a button and a table cell alike is most of what made the product read as a template. `--r` and `--r-sm` keep their names — they are in two hundred places — and take the card's and the control's value. */ --r-xs:4px; /* chips, tags, marks, a cell in the day book */ --r-sm:6px; /* controls: inputs, buttons, a row that lights up */ --r:10px; /* cards, panels, dialogs, menus */ --r-lg:16px; /* the sign-in frame's cards, and nothing in the product proper */ --r-full:999px; /* pills, avatars, switches */ /* ── space ──────────────────────────────────────────────────────────────── A 4px grid with two half steps. Margins, paddings and gaps come from this list; the test reads them and a ledger holds what is still off it. 0 2 4 6 8 12 16 20 24 32 40 48 64 */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; /* The one step below the grid: a hairline's own width. Figures on the ground are divided by their own left and top edges, each pulled back by exactly this, so the band's edge clips the first rule of every row (docs/71). */ --hairline:1px; /* ── elevation, by role ─────────────────────────────────────────────────── Three, and which one a thing wears is decided by what it IS: resting a card on the page — its hairline and NOTHING else. The card is lighter than the ground, and that is the lift (docs/71). Every card casting --shadow-sm was every card raised a little, which on a page of six is none of them raised. raised --shadow: the card on the page that needs somebody (.card.lead, or a card whose heading carries a warning — components.css), something the page scrolls under, a card being reached for overlay --shadow-lg: a dialog, a menu, the palette, a toast A row of tiles is not cards at all: figures on the ground, divided by hairlines. --shadow-sm is left to the one CONTROL that lifts — the primary button — and to a chip being dragged. A border says "there is an edge here"; a shadow says "this is nearer than the page". */ --shadow-sm:0 1px 1px rgba(23,26,47,.04), 0 1px 3px rgba(23,26,47,.06); --shadow:0 2px 4px rgba(23,26,47,.05), 0 6px 16px rgba(23,26,47,.08); --shadow-lg:0 8px 16px rgba(23,26,47,.08), 0 24px 56px rgba(23,26,47,.18); /* Not elevation — edges that happen to be drawn with box-shadow. */ --ring:0 0 0 3px rgba(67,64,181,.24); --shadow-knob:0 1px 3px rgba(23,26,47,.26); --shadow-stuck:-12px 0 12px -12px rgba(23,26,47,.26); /* a column held at the right */ --shadow-brand:0 26px 50px -20px rgba(18,17,58,.72), 0 8px 18px -8px rgba(18,17,58,.5); /* ── density ────────────────────────────────────────────────────────────── Two audiences, not one compromise (docs/58 §3.4). The people who run payroll read tables all day and want a spreadsheet's rows; somebody looking at their own payslip once a month wants air. The router sets `data-density` on from the area — dense for Payroll, People, Attendance, Leave, Compliance, Reports and the other working areas; comfortable for Me, Home, setup and the sign-in frame — and the Compact switch in the account menu moves a person one step tighter than wherever they are. These are the comfortable values; the other two follow. */ --d-font:var(--fs-md); /* a table cell, a row of a list */ --d-cell-y:10px; /* a table cell, top and bottom */ --d-cell-x:12px; --d-head-y:8px; /* a table head */ --d-ctl-y:8px; /* an input, a button */ --d-ctl-x:12px; --d-card:20px; /* a card's padding */ --d-gap:16px; /* between cards, between tiles */ --d-body:var(--fs-base); --d-h1:var(--fs-3xl); --nav-h:56px; /* How far the bar's liquid reaches into an open panel (docs/70). No further than the panel's own top padding, so no word in the panel ever sits in it — api/tools/design_tokens.py holds the two together. */ --bar-spill:32px; /* ── motion ─────────────────────────────────────────────────────────────── Every duration in the product is here, and the token test reads the stylesheets for one written anywhere else (docs/70 closed the sweep docs/61 left open). Three for things that happen to a control, a panel and a page — docs/47 §5.2 — and nothing that answers a person takes longer than the slowest. The loops and the door's timeline are below them. One easing curve for the whole product. Motion that uses three curves reads as three different applications. */ --ease:cubic-bezier(.32,.72,0,1); /* And the second one docs/47 §5.2 allowed, for ONE thing: the current page's pill on the bar, which moves like a drop — its leading edge runs a little past where it is going and settles back (docs/70). Nothing else wears it. */ --ease-drop:cubic-bezier(.34,1.22,.64,1); --fast:.18s; /* a control: a hover, a colour, a switch, a small menu */ --mid:.26s; /* a panel's contents, a dialog, a page arriving, the pill */ --slow:.38s; /* a panel's height, the scrim behind it */ /* The pill's trailing edge sets off this long after its leading one, so the whole move is --mid: the leading edge 200 ms, the trailing 200 ms, 60 apart. */ --flow-lag:60ms; /* Reduced motion (base.css): an animation that ends at once and still says it ended, for any code waiting on animationend. */ --instant:.01ms; /* Loops — things that go on while something else happens. */ --spin:.7s; /* a busy button's spinner, one turn */ --shimmer:1.4s; /* a skeleton row's sheen, one pass */ /* The liquid's three clocks, the door's and the bar's (docs/69, docs/70): one picture again only every 3 h 55 min 36 s, their LCM. */ --liquid-a:24s; --liquid-b:31s; --liquid-c:38s; /* The door's timeline — docs/48 §C.2 as numbers, in the order it plays. The first six start times (mark, heading, email, password, remember row, button) are authshell.js's STARTS; auth.css reads the rest from here. */ --door-mesh:500ms; /* 0 ms the liquid fades in over the ground */ --door-rise:380ms; /* 80 ms+ each marked element rises 8 px */ --door-cards-at:380ms; /* 380 ms the product cards, back to front, */ --door-card-gap:120ms; /* 120 ms apart, */ --door-card:520ms; /* 520 ms each */ --door-greet-at:700ms; /* 700 ms the greeting writes itself, */ --door-greet:420ms; /* left to right, over 420 ms; */ --door-place-at:820ms; /* 820 ms whose door, under it, */ --door-place:300ms; /* over 300 ms — both done by 1,120 */ --door-settled:1200ms; /* the ambient loops begin once all that is done */ --door-float:12s; /* each card, ±4 px */ --door-float-gap:1.2s; /* … a neighbour 1.2 s behind */ --door-focus:160ms; --door-reveal:120ms; --door-submit:200ms; --door-shake:320ms; --door-leave:380ms; font-synthesis-weight:none; } :root[data-density="dense"]{ --d-font:var(--fs-sm); --d-cell-y:6px; --d-cell-x:12px; --d-head-y:6px; --d-ctl-y:6px; --d-ctl-x:12px; --d-card:16px; --d-gap:12px; --d-body:var(--fs-md); --d-h1:var(--fs-2xl); } :root[data-density="compact"]{ --d-font:var(--fs-xs); --d-cell-y:4px; --d-cell-x:8px; --d-head-y:4px; --d-ctl-y:4px; --d-ctl-x:8px; --d-card:12px; --d-gap:8px; --d-body:var(--fs-sm); --d-h1:var(--fs-xl); } @media (prefers-color-scheme: dark){ :root{ /* A night palette, chosen (docs/71). docs/61 built this from the light one's family — the same hue, darker — and it read as the light theme inverted: every surface a saturated navy (chroma 0.032–0.044 at hue 272°), hairlines that glowed blue, white ink that glared. Graded on its own terms: · the grounds are a graphite slate, chroma about 0.026 — enough hue to belong to the indigo, not so much that a page of cards is blue; · nearer is LIGHTER, in even steps (plane 0.195 · sunk 0.212 · surface 0.238 · raised 0.28), because a shadow on a dark page shows nothing and lightness is the only elevation there is; · hairlines are a step of the same slate, not a brighter blue; · ink is a soft white, 0.935, and every quieter ink keeps AA on every surface and wash — design_tokens.py measures all of them. */ --plane:#111421; --surface:#1a1e2d; --raised:#232838; --sunk:#141825; --ink:#e7e9f0; --ink-2:#c2c7d5; --ink-3:#98a0b3; --ink-4:#71788c; --line:#32374a; --line-2:#262b3a; --line-ctl:#71788c; /* A step lighter than the light theme's: the deeper one disappears into a dark plane. Still dark enough for white words on the primary button. */ --accent:#5d5ad8; --accent-ink:#b0b3fa; --accent-wash:#292b55; /* less saturated than #24245a: a selected tab, not a glow */ --focus:#b0b3fa; --plane-glow:#15182a; /* The bar in dark mode is one shade DEEPER than the night plane, in the bar's own warmer hue — the same dark band, the same palette (docs/71). */ --bar-bg:#0a0b19; --bar-line:#1d1e33; --good:#5ecfa0; --good-wash:#0f2e25; --warn:#e9b353; --warn-wash:#35280d; --critical:#f28b82; --critical-wash:#3a1716; --info:#7cc4ec; --info-wash:#0e3148; --critical-solid:#c0392f; --violet:#c2b0f5; --violet-wash:#2c1f57; /* The same six hues, stepped for the night card — and held below the dark statuses' lightness (0.75–0.80), which is where they would meet. */ --viz-1:#0a938e; --viz-2:#a5852b; --viz-3:#ac76d8; --viz-4:#577821; --viz-5:#9c4b92; --viz-6:#1a95d8; /* More is LIGHTER on a dark card, and stops short of the accent's ink. */ --seq-1:#2b2d49; --seq-2:#40426f; --seq-3:#565995; --seq-4:#7478b6; --seq-5:#8e93cc; --div-1:#9f76cb; --div-2:#685282; --div-3:#343539; --div-4:#736131; --div-5:#ae8e38; --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow:0 2px 4px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 8px 16px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.62); --ring:0 0 0 3px rgba(176,179,250,.3); --shadow-knob:0 1px 3px rgba(0,0,0,.5); --shadow-stuck:-12px 0 12px -12px rgba(0,0,0,.6); } }