/* ============================================================================ Brand tokens. THE single source of truth for colour in every internal app. Load this before any app stylesheet; never redeclare a palette value elsewhere. FOUR CORE COLOURS (huisstijl, per the brand sheet in specs/logo/): wit #FFFFFF the canvas — every screen is white zwart #000000 all text (Pantone Black C) goud #C59F38 the accent — rules, CTA buttons, active state (Pantone 871 C) blauw #77AAC3 the supporting colour — informational accents, links, quiet fills Light grey is not a fifth brand colour; it is the neutral used to lift table rows and panels off the white canvas without adding a colour. CONTRAST IS PART OF THE TOKEN, NOT AN AFTERTHOUGHT. Gold and brand blue are LIGHT: at full strength neither can carry text on white (2.50:1 and 2.52:1 — both fail AA). Each therefore comes in two flavours and they are not interchangeable: *-gold / *-blue for FILLS, RULES and ICONS — never for text on white *-gold-text / *-blue-text darkened so they pass AA as text (5.02:1 / 5.38:1) Measured ratios are in the comment beside each token. Re-check with apps/local/tests/grol_branding/contrast-check.php after changing any value. ============================================================================ */ :root { /* ---- the four core colours ---------------------------------------------------- */ --brand-white: #FFFFFF; --brand-black: #000000; /* on white: 21.00:1 */ --brand-accent: #C59F38; /* Pantone 871 C. Fill/rule only — as text on white: 2.50:1 */ --brand-support: #77AAC3; /* Fill/rule only — as text on white: 2.52:1 */ /* ---- gold, working range ------------------------------------------------------- */ --brand-accent-text: #866C26; /* gold that may be TEXT — 5.02:1 on white, 4.52:1 on gold-soft. The lightest gold that clears AA on BOTH, so it stays as close to the brand gold as legibility allows. Lighten it and the gold badge fails first (contrast-check.php catches it). */ --brand-accent-deep: #A8862C; /* hover/pressed fill, stronger rules — 3.44:1 on white */ --brand-accent-soft: #F8F3E2; /* tinted surface; black text on it — 18.0:1 */ /* ---- blue, working range ------------------------------------------------------- */ --brand-support-text: #3F708B; /* blue that may be TEXT or a link on white — 5.38:1 */ --brand-support-deep: #2E566C; /* hover/pressed — 7.88:1 */ --brand-support-dark: #5C90AA; /* stronger fill/border — 3.49:1, UI only */ --brand-support-soft: #E8F1F6; /* informational surface; black text on it — 18.3:1 */ /* ---- neutrals: the canvas and the greys that lift things off it ----------------- */ --brand-bg: #FFFFFF; /* page background. White. Not off-white. */ --brand-surface: #FFFFFF; /* cards, modals, panels */ --brand-surface-alt: #FAFAFA; /* zebra rows, quiet panels — black text 20.1:1 */ /* EEN BAK DIE WITTE KAARTEN DRAAGT (16-09-2026, gevraagd vanaf het startscherm: *"the background needs to be darker so it shows contrast even on cheap monitors"*). `--brand-surface-alt` is daar te licht voor: #FAFAFA naast #FFFFFF is een verschil van 1,03:1, en dat verdwijnt op een goedkoop TN-paneel volledig — de kaarten zweven dan in het niets. Deze is 1,19:1 tegen wit: nog steeds rustig, maar op elk scherm zichtbaar. NIET gebruiken voor zebrarijen of hover; daar blijft surface-alt, anders wordt een tabel een dambord. Zwarte tekst hierop: 17,0:1. */ --brand-surface-sunken: #EBEDF0; --brand-grey-100: #F4F4F5; /* table headers, filled inputs — black text 19.1:1 */ --brand-grey-200: #E8E8E8; /* dividers, input borders */ --brand-grey-300: #D4D4D4; /* stronger borders, disabled edges */ --brand-ink: #000000; /* primary text — black, per the huisstijl */ --brand-ink-muted: #595959; /* secondary text — 7.00:1, still AA at any size */ --brand-ink-subtle: #6B6B6B; /* captions/meta — 5.33:1; do not go lighter for text */ /* ---- state colours (functional, not brand — used sparingly) --------------------- */ --brand-success: #1E7A45; /* 4.85:1 on white */ --brand-success-soft: #EAF5EE; --brand-warning: #8A5D00; /* 5.63:1 on white — amber fails as text, this does not */ --brand-warning-soft: #FDF3E2; --brand-danger: #B3261E; /* 6.10:1 on white */ --brand-danger-soft: #FCECEA; /* Personal card labels: purple is categorisation, never a workflow status. */ --brand-personal-purple: #7355A5; --brand-personal-purple-soft: #F0EAF8; /* ---- the primary call to action ------------------------------------------------- The blue gradient button from the public site, adopted as the standard CTA across the internal apps. Gold keeps the lines, rules and section marks; blue does the clicking. The light end is DEEPER than the site's. The site runs #77AAC3 -> #3F708B under a white label, and white on #77AAC3 is 2.50:1 — the top half of every one of those buttons is effectively unreadable. #457A98 is the lightest blue a white label survives (4.68:1); the dark end is 7.88:1. Same gesture, same diagonal, legible the whole way across. If the exact site gradient is ever wanted back, the label has to stop being white — black does not save it either (3.90:1 on the dark end). */ --brand-cta-from: #457A98; /* white label: 4.68:1 */ --brand-cta-to: #2E566C; /* white label: 7.88:1 */ --brand-cta-hover-from: #2E566C; /* white label: 7.88:1 */ --brand-cta-hover-to: #24455A; /* white label: 9.87:1 */ --brand-cta-shadow: rgba(46, 86, 108, .35); --brand-on-cta: #FFFFFF; /* ---- ON-colours: what text goes ON a filled surface ------------------------------ The gold CTA carries BLACK, not white: black on gold is 8.39:1, white on gold is 2.50:1. A white label on a gold button is the single easiest way to break this palette, so the answer is a token rather than a judgement call at each call site. */ --brand-on-accent: #000000; /* 8.39:1 */ /* NOTE: this is the text colour on the LIGHT supporting colour (--brand-support, #77AAC3). On the darker --brand-support-deep, black only reaches 2.66:1 — that one needs --brand-on-dark (white, 7.88:1). Exactly that mix-up produced a blue pill with black text. */ --brand-on-support: #000000; /* 8.32:1 on --brand-support */ --brand-on-dark: #FFFFFF; /* ---- lines --------------------------------------------------------------------- Gold is the brand's line colour (brief: "steunkleur voor lijnen"). Structural hairlines that merely separate rows stay neutral — a gold line everywhere reads as decoration and stops signalling anything. */ --brand-rule-accent: var(--brand-accent); --brand-rule: var(--brand-grey-200); /* ---- shape & motion ------------------------------------------------------------- Strak en eenvoudig: small radii, one flat shadow. Nothing pillowy. */ --brand-space-1: 4px; --brand-space-2: 8px; --brand-space-3: 12px; --brand-space-4: 16px; --brand-space-5: 20px; --brand-space-6: 24px; --brand-card-icon: 44px; --brand-card-title: 15px; --brand-control-lg: 49px; --brand-radius: 10px; --brand-radius-sm: 6px; --brand-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --brand-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07); --brand-shadow-lg: 0 2px 6px rgba(0, 0, 0, .05), 0 20px 48px rgba(0, 0, 0, .10); /* ---- type ----------------------------------------------------------------------- Brand sheet: Montserrat for headings, Open Sans for body. Neither is self-hosted yet (see branding/README.md, "Open items") — listed first so they are used where present, with a system stack behind them so nothing shifts if they are absent. Never load them from a CDN; vendor them into branding/fonts/ when the licence files are sorted. */ --brand-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-font-heading: "Montserrat", var(--brand-font); --brand-tracking-kicker: .12em; /* the wide letterspacing of ORTHOPEDISCHE SCHOENTECHNIEK */ --brand-ease-out: cubic-bezier(.22, .61, .36, 1); --brand-ease-spring: cubic-bezier(.34, 1.36, .64, 1); --brand-t-slow: .38s; --brand-t-fast: .16s; --brand-t-base: .24s; }