/* ============================================================================= Pensius — Design Tokens · "Ledger ink on warm paper" · v2 (P1/P2) ----------------------------------------------------------------------------- Implements docs/DESIGN-DIRECTION.md. Single source of truth for the visual system. The token NAMES are stable (app CSS consumes the semantic tokens — --bg, --surface, --accent, --text, …); this file re-points their VALUES onto the sharper direction: near-black pine ink + warm ecru paper, ONE Ledger-Green accent (no blue anywhere), brass for of-record surfaces, oxblood for breaks, and the IBM Plex superfamily (Sans / Serif / Mono) for real type contrast. Do NOT hard-code hexes in components — always go through a semantic token. Contrast pairs verified WCAG 2.1 AA (see DESIGN-DIRECTION §4A table). ============================================================================= */ :root { /* ========================================================================== 1 · PRIMITIVES ========================================================================== */ /* --- Warm paper neutrals (ecru, NOT cold grey) --------------------------- */ --stone-0: #ffffff; /* data / record / table surface */ --stone-25: #faf6ec; /* raised subtle surface, table header fill */ --stone-50: #f1ece1; /* app canvas (warm ecru paper) */ --stone-100: #e9e3d5; /* sunken well, read-only, code */ --stone-150: #e1dacb; /* table body grid rule (decorative) */ --stone-200: #dcd5c6; /* panel hairline border (decorative) */ --stone-300: #897f6b; /* INTERACTIVE input/select border — 3:1 non-text contrast (WCAG 1.4.11) on paper 3.36:1, white 3.95:1, sunken 3.09:1 */ --stone-400: #b7ad97; /* disabled fill / heavy divider */ --stone-500: #7d7460; /* placeholder ink */ /* --- Structural ink: near-black pine (chrome) — FLAT, no gradient -------- */ --ink-900: #101e19; /* sidebar / top bar / darkest chrome */ --ink-800: #172a24; /* raised item on dark, active-nav wash */ --ink-700: #2a3a34; /* hover on dark, dark hairline */ --ink-600: #3d4f49; /* dark-surface secondary */ /* --- Text ramp on paper/white ------------------------------------------- */ --text-900: #1c2521; /* primary text AA 13.3:1 on paper */ --text-700: #47514c; /* headings / strong AA 6.99:1 on paper */ --text-600: #47514c; /* secondary text */ --text-500: #5d655f; /* muted / meta AA 4.5:1 on every surface it lands on: paper 5.10:1, white 6.01:1, sunken well 4.70:1 (WCAG 1.4.3) */ /* --- Ledger Green: THE one interactive + "balanced" accent -------------- */ /* Dark, greener pine — reads as ledger/currency, not SaaS-cyan/navy. */ --ledger-900: #0e3324; --ledger-800: #123d2c; /* pressed / active */ --ledger-700: #164c37; /* hover */ --ledger-600: #1b5e44; /* PRIMARY — link, button fill, series-1, balanced */ --ledger-500: #4fa07e; /* accent on dark chrome (active-nav rule, icons) */ --ledger-300: #7fb3a0; /* chart tint / disabled accent */ --ledger-100: #c2d8cd; /* soft border */ --ledger-050: #e6efe9; /* soft fill (selected row, info chip) */ /* --- Brass: of-record ONLY (non-interactive — never a button/link) ------ */ --brass-700: #856214; /* of-record text/icon on white AA 5.59:1 */ --brass-500: #a9842c; /* seal stroke, certificate rule */ --brass-300: #d8bd7e; /* thin premium hairline */ --brass-050: #f2e9d2; /* sealed-period ribbon fill */ /* --- Status ramps (balanced folds into brand green) --------------------- */ --green-700: #164c37; /* success/balanced text AA 6.5:1 on white */ --green-600: #237a50; /* success tick/icon AA 5.29:1 on white */ --green-100: #c2d8cd; --green-050: #e6efe9; --amber-700: #8a5a00; /* warning/pending text AA 5.93:1 on white */ --amber-500: #b07d10; --amber-100: #ecd9ae; --amber-050: #fbf1dc; /* The highlighter: the value a reader found on a page, marked the way a person marks paper. Used for that and nothing else; it is not a status. */ --mark: #fbe37a; --red-700: #a32330; /* break / error / negative money AA 7.39:1 */ --red-600: #b8323f; --red-100: #eec7cb; --red-050: #fbe9ea; /* --- Data-viz categorical — earthy, NO royal/steel blue ----------------- */ --series-1: #1b5e44; /* pine (primary measure) */ --series-2: #3e4f49; /* ink-slate (filed/expected/awaiting) */ --series-3: #a9842c; /* brass */ --series-4: #9c4a3c; /* clay */ --series-5: #6b4e7a; /* plum */ --series-6: #8a9a86; /* sage */ /* sequential single-measure ramp (light → pine) */ --seq-1: #ddeae3; --seq-2: #b6d2c7; --seq-3: #7fb3a0; --seq-4: #3f8a6c; --seq-5: #1b5e44; --seq-6: #123d2c; /* ========================================================================== 1 · TYPE PRIMITIVES · Inter for the interface, Plex for of-record ========================================================================== The house standard names Inter as the UI typeface. It leads the stack; the self-hosted Plex Sans stays behind it as the fallback, so a tree without the Inter woff2 files renders exactly as before instead of dropping to a system grotesk. Drop the four files named in app/static/fonts/README.md into that folder and the whole interface is Inter on the next start — nothing else has to change. Plex Serif keeps the wordmark and the of-record titles; Plex Mono keeps genuine machine text. */ --font-sans: "Inter", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Figures (MAKEOVER-PLAN B3, owner finding #3: "I do not at all like the lettertype of the numbers"). Every amount used to be set in Plex Mono — the wide, typewriter-ish texture the owner objected to. Money is now set in Plex Sans with tabular lining numerals: columns still align to the digit, but the figures read as part of the page instead of as terminal output. Plex Mono stays for what is genuinely machine text — hashes, tokens, query strings, keyboard hints. */ --font-figure: var(--font-sans); /* Modular scale — ratio 1.20, anchored at 14px ---------------------------- */ --fs-3xs: 0.625rem; /* 10px */ --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base:0.875rem; /* 14px body / UI default */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.375rem; /* 22px */ --fs-2xl: 1.75rem; /* 28px page title, KPI hero */ --fs-3xl: 2.25rem; /* 36px reconciliation hero figure */ --fs-4xl: 3rem; /* 48px */ /* Weights — low band (like the polish benchmarks) ------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* reserve for hero figures / grand totals only */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.5; --lh-dense: 1.4; --tracking-tight: -0.011em; --tracking-normal: 0; --tracking-label: 0.06em; --tracking-caps: 0.08em; --numeric-tabular: "tnum" 1, "lnum" 1; /* ========================================================================== 1 · SPACE — 8pt grid (4px half-step) ========================================================================== */ --space-0: 0; --space-1: 0.125rem; /* 2px */ --space-2: 0.25rem; /* 4px */ --space-3: 0.5rem; /* 8px BASE UNIT */ --space-4: 0.75rem; /* 12px */ --space-5: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-7: 2rem; /* 32px */ --space-8: 2.5rem; /* 40px */ --space-9: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ /* ========================================================================== 1 · RADIUS — 4px on controls, 0 on data panels. Nothing pillowy. ========================================================================== */ --radius-0: 0; --radius-xs: 2px; /* inline code, ticks */ --radius-sm: 3px; /* badges/tags, chips */ --radius-md: 4px; /* buttons, inputs, selects (interactive controls) */ --radius-lg: 0; /* DATA PANELS / cards / table containers — hard edges */ --radius-xl: 6px; /* modals / command palette ONLY */ --radius-pill:999px; /* numeric count indicators ONLY */ /* ========================================================================== 1 · ELEVATION — flat-first. Panels use BORDERS + surface ladder. Shadows are for TRUE overlays only (menus, palette, modals). ========================================================================== */ --elev-0: none; --elev-1: 0 1px 2px rgba(16, 30, 25, 0.06); --elev-2: 0 8px 24px -6px rgba(16, 30, 25, 0.16), 0 2px 6px -2px rgba(16, 30, 25, 0.09); --scrim: rgba(16, 30, 25, 0.55); /* ========================================================================== 1 · Z-INDEX ========================================================================== */ --z-base: 0; --z-sticky: 20; --z-header: 40; --z-dropdown: 60; --z-tooltip: 80; --z-modal: 200; --z-palette: 300; --z-toast: 400; /* ========================================================================== 1 · MOTION ========================================================================== */ --dur-fast: 90ms; --dur-base: 120ms; --dur-slow: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --transition-ui: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); /* ========================================================================== 2 · SEMANTIC ALIASES · reference THESE in components ========================================================================== */ --bg: var(--stone-50); /* warm ecru paper */ --surface: var(--stone-0); --surface-raised:var(--stone-25); --surface-sunken:var(--stone-100); --surface-dark: var(--ink-900); --text: var(--text-900); --text-heading: var(--text-700); --text-secondary:var(--text-600); --text-muted: var(--text-500); --text-on-accent:#ffffff; /* AA 7.69:1 on --accent */ --text-on-dark: #c7d2ce; /* AA 11.1:1 on ink */ --text-on-dark-muted:#8a968f; /* AA 5.60:1 on ink */ --border: var(--stone-200); --border-strong: var(--stone-300); --rule: var(--stone-150); --border-dark: var(--ink-700); --accent: var(--ledger-600); /* Ledger Green — the one interactive hue */ --accent-hover: var(--ledger-700); --accent-active: var(--ledger-800); --accent-soft: var(--ledger-050); --accent-border: var(--ledger-100); --accent-on-dark:var(--ledger-500); --premium: var(--brass-700); /* of-record, non-interactive */ --premium-rule: var(--brass-500); --premium-soft: var(--brass-050); --ok: var(--green-700); --ok-icon: var(--green-600); --ok-soft: var(--green-050); --ok-border: var(--green-100); --warn: var(--amber-700); --warn-soft: var(--amber-050); --warn-border: var(--amber-100); --danger: var(--red-700); --danger-soft: var(--red-050); --danger-border: var(--red-100); --info: var(--ledger-600); /* exported/processed folds into the accent */ --info-soft: var(--ledger-050); --info-border: var(--ledger-100); --neutral: var(--text-600); --neutral-soft: var(--stone-100); --neutral-border: var(--stone-200); --figure-negative: var(--red-700); --figure-positive: var(--text-900); --figure-zero-ok: var(--green-700); --focus-ring: 0 0 0 3px rgba(27, 94, 68, 0.18), 0 0 0 1px var(--ledger-600); --focus-ring-on-dark: 0 0 0 2px #ffffff; /* destructive controls keep the same ring geometry in their own hue, so the keyboard affordance never reads as "safe green" on a Delete */ --focus-ring-danger: 0 0 0 3px rgba(163, 35, 48, 0.18), 0 0 0 1px var(--red-700); /* --- Vertical rhythm (MAKEOVER-PLAN §3.1): three gaps, nothing in between -- Every screen uses exactly these three distances, so a page reads as grouped blocks instead of a field of near-equal spacings. */ --gap-tight: var(--space-3); /* 8px — inside a group: label ↔ field, chips */ --gap: var(--space-5); /* 16px — between groups inside a panel */ --gap-section: var(--space-7); /* 32px — between panels / sections */ --chart-axis: var(--stone-300); --chart-grid: var(--stone-150); --chart-label: var(--text-500); /* ========================================================================== 3 · COMPONENT TOKENS ========================================================================== */ --sidebar-w: 226px; /* the sidebar's one inset: the edge of the bar to the brand mark, the avatar and the box of a menu entry, and again from that box to its icon, the words of a group heading and the end of a count. The product name, the menu labels and the account name then begin on one column (inset + 18px icon + 12px gap) */ --nav-inset: var(--space-4); --content-max: 1600px; --page-pad-x: var(--space-7); --page-pad-y: var(--space-6); --card-bg: var(--surface); --card-border: 1px solid var(--border); --card-radius: var(--radius-lg); --card-pad: var(--space-5); /* One horizontal inset for every card-like block (card, tile, strip, filter card, decision card, banner, toast): the first word of each begins on one edge. A sunken panel inside a card keeps its own hairline, so its padding is a pixel less than a table cell's and its words land on a table's. */ --card-pad-x: var(--space-6); --panel-pad-x: calc(var(--cell-pad-x) - 1px); --card-shadow: var(--elev-0); --btn-height: 32px; --btn-height-sm: 28px; --btn-height-lg: 36px; --btn-radius: var(--radius-md); --btn-pad-x: var(--space-4); --btn-font-size: var(--fs-base); --btn-font-weight: var(--fw-medium); --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-bg-active: var(--accent-active); --btn-primary-fg: var(--text-on-accent); --btn-secondary-bg: var(--surface); --btn-secondary-fg: var(--text-heading); --btn-secondary-border: var(--border-strong); --btn-secondary-border-hover: var(--accent); --btn-danger-fg: var(--danger); --btn-danger-border: var(--red-100); --field-height: 32px; /* ---- ONE control height, shared by buttons and fields ------------------- A field used to take its height from padding plus the font's line box, so the same row could hold a 32px button, a 33px input and a 40px select. These two steps are the whole scale: the standard control, and the dense one used inside a table row. A button and the field beside it read from the same step, which is what makes a row look aligned rather than arranged. */ --control-h: 32px; /* = --btn-height : forms, filter bars, toolbars */ --control-h-sm: 28px; /* = --btn-height-sm : inline editing inside a row */ --control-h-xs: 20px; /* micro toggles (the language switch) */ /* ---- field widths, named by CONTENT ------------------------------------ The standard asks for fields sized to what they hold, not stretched to the column. It does not allow the same content to be a different size on each screen, which is what happened: a ten-character date was 104, 106, 108, 110, 118 and 150px in different places. One name per kind of value, with a dense step where the type is smaller inside a table row. */ /* dd-mm-yyyy plus the calendar mark on the right, which the picker needs room for — the text still has the same ten characters it always had. */ --field-w-date: 142px; /* dd-mm-yyyy */ --field-w-date-sm: 132px; /* the same, in a row's smaller type */ --field-w-date-lg: 174px; /* when the box carries its own label inside */ --field-w-year: 96px; /* yyyy */ --field-w-amount: 110px; /* a right-aligned figure */ --field-w-amount-sm: 72px; /* the narrow figure in the matching column */ --field-w-amount-form: 170px; /* the same figure with a form's breathing room */ --field-w-code: 190px; /* a cheque number, an EIN, a reference */ --field-w-code-sm: 120px; /* the same, in a row's smaller type */ --field-w-year-sel: 124px; /* a year SELECT: room for its own option text */ /* The same idea for the fields that hold words. A reason box alone was 88, 120, 140, 150, 170, 180, 190, 200 and 260px on different screens. */ --field-w-note: 200px; /* a reason, a next step: a few words */ --field-w-note-sm: 140px; /* the same, inside a table row */ --field-w-note-xs: 64px; /* the same, where a row has to give way: the Cases edit row at 1280, whose eleven columns in Dutch ran 37px past the card with 96px here */ --field-w-name: 220px; /* a label, a view's name, an alias */ --field-w-name-lg: 320px; /* a full legal name */ --field-w-search: 260px; /* a search box */ --field-w-url: 320px; /* a web address */ --field-w-file: 288px; /* a file picker: the button and "No file chosen" in Dutch */ --field-w-case: 220px; /* a case picker, at least: its options are long */ --field-w-state: 190px; /* a state picker, at most */ --field-w-fund: 18rem; /* a pension fund's code and name, at most */ --measure: 720px; /* a readable line: a paste box, a narrow table */ /* ---- boxes in a row ------------------------------------------------------ Sibling boxes (the action cards of a case) stand in equal tracks that their container declares. This is the narrowest a track may get before the row holds one box fewer; no box sets a width of its own. */ --box-min: 15rem; /* 240px: a label, a field and its button */ --field-radius: var(--radius-md); --field-pad-x: var(--space-4); --field-bg: var(--surface); --field-border: var(--border-strong); --field-border-hover: var(--stone-400); --field-border-focus: var(--accent); --field-placeholder: var(--stone-500); --field-invalid-border: var(--red-600); /* ---- column widths, named by what the column HOLDS ----------------------- A table's columns were sized by whatever stood in them, so five tables stacked on one page had five sets of edges, and a column moved when its figures changed. A typed column (style.css, "typed columns") takes its width from one of these: the width of its CONTENT, the cell padding is added by the rule. Two tables with the same kinds of column in the same order therefore share every edge. Measured, in a total row (the heaviest figures): "99.999.999,99" is 94.6px and "-9.999.999,99" 91.4px, inside the 96px of a money column; the widest head a count column carries, the Dutch "REALISATIE", is 62.5px inside its 64px. */ --colw-amt: 6rem; /* money: to 99.999.999,99, or -9.999.999,99 */ --colw-num: 4rem; /* a count, a percentage, a number of days */ --colw-date: 5.5rem; /* dd-mm-yyyy */ --colw-key: 3rem; /* a year, a client code, a state code */ --colw-code: 7.5rem; /* a cheque number, a reference */ --colw-tag: 8.5rem; /* a status and its label, a type, a short name */ --colw-label: 9.5rem; /* the row label of a summary table */ --colw-note: 14rem; /* a note: one line, then an ellipsis */ --colw-text: 9rem; /* the least a wrapping text column keeps */ --colw-act: 4rem; /* "Open", one small button */ --colw-chk: 34px; /* the selection tick */ /* The two fixed tracks of a row list (style.css, the permission list of the Users screen). Not column types: a list of lines declares them once and every line stands on them. Measured at the list's 12px: the tick and the cross are 10.6px wide, and the widest row verb, the Dutch "Toekennen", is a small button of 89.4px (63.4px of word in its padding and border). */ --colw-mark: 0.875rem; /* a tick or a cross */ --trust-label-w: 5.5rem; /* the badge track of a Trust row: Live, Planned */ --colw-act-word: 5.75rem; /* the widest row verb as a small button */ /* The Difference of the matching desk is three tracks of its own: the lamp, the figure and the word. The figure's holds a difference to -9.999.999,99 at the desk's 12px (84px: a money column's content in the smaller type), the word's holds "short", "over", "Exact" and the Dutch "te veel" and "tekort" (about 40px), the lamp's is the dot. The desk derives the width of the whole column, and of the decision sum beside it, from these three (style.css, "the tables on the desk"). */ --dv-lamp: 10px; --dv-fig: 5.5rem; --dv-word: 3.5rem; /* ---- the case's two lines at the top (next step, latest comment) ------- The strip's action track is one length per width band, so its two rows end on one edge whatever they hold: room for a comment field and Post. */ --strip-act-lg: 22.5rem; /* above 1280 */ --strip-act-md: 17.5rem; /* to 1280 */ --strip-act-sm: 15rem; /* to 1140 */ --strip-label-sm: 7.5rem; /* the label track to 1140: the Dutch labels */ --row-h-comfortable: 40px; --row-h-default: 34px; --row-h-compact: 30px; --row-h-ledger: 26px; --cell-pad-x: var(--space-4); --cell-pad-y: 4px; /* operational density — data rows land ~26-28px */ --thead-bg: var(--surface-raised); --thead-fg: var(--text-500); --thead-size: var(--fs-3xs); --sticky-top: 0px; /* what stands frozen above a table head on the page: nothing today */ --thead-clear: 2.5rem; /* the room a frozen head takes at the top of a scroller: the tallest head in use (the selection tick of Cases and Cheques) is 38.5px */ --tbl-box-max: 72vh; /* the tallest a table's own scroll box gets */ --row-hover: rgba(27, 94, 68, 0.05); --row-selected: var(--ledger-050); --row-total-rule: 2px solid var(--border-strong); --row-total-bg: var(--stone-25); --zebra: transparent; --nav-fg: var(--text-on-dark); --nav-fg-muted: var(--text-on-dark-muted); --nav-hover-bg: var(--ink-700); --nav-active-bg: var(--ink-800); --nav-active-rule: 3px solid var(--accent-on-dark); --nav-item-radius: var(--radius-md); --nav-icon-size: 20px; --nav-icon-stroke: 1.5; --badge-radius: var(--radius-sm); --badge-pad-x: var(--space-3); --badge-pad-y: 2px; --badge-font-size: var(--fs-2xs); --badge-font-weight: var(--fw-semibold); --modal-radius: var(--radius-xl); --modal-shadow: var(--elev-2); --modal-max-w: 640px; --icon-stroke: 1.5; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; }