/* ========================================================================== PRGRS Group — brand tokens v2.0 Single source of truth for the website build. v2.0 changes the rule that shapes everything else: NAVY AND GREEN ARE LOGO COLOURS ONLY. They appear inside the logo lockup and nowhere else — not as text, fills, rules, buttons, icons or charts. Everything outside the mark is carried by a cool-neutral monochrome system, which is what makes the logo the single chromatic moment on any page. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. LOGO COLOURS — restricted Permitted only within the logo lockup. Using either of these anywhere else is the one hard error in this system. ------------------------------------------------------------------------ */ --prgrs-logo-navy: #030C34; /* the lockup plate */ --prgrs-logo-green-hi: #AAE74A; /* wordmark gradient, stop 0% */ --prgrs-logo-green-lo: #63AF2C; /* wordmark gradient, stop 100% */ --prgrs-logo-gradient: linear-gradient(180deg, #AAE74A 0%, #63AF2C 100%); /* ------------------------------------------------------------------------ 2. NEUTRALS — everything else A single cool ramp. Blue bias of +6 to +13 (B minus R) keeps these reading as deliberate cool greys rather than defaulted neutrals, without ever becoming blue. ------------------------------------------------------------------------ */ --prgrs-ink: #14161A; /* primary dark ground; text on light */ --prgrs-ink-raised: #1C1F24; /* raised surface on dark */ --prgrs-slate: #4A4F56; /* strong secondary text on light */ --prgrs-steel: #6B7076; /* secondary text on light; control border */ --prgrs-graphite: #A7ACB4; /* secondary text on dark */ --prgrs-cloud: #F4F5F6; /* alternate light ground */ --prgrs-paper: #FAFAF9; /* primary light ground; text on dark */ --prgrs-white: #FFFFFF; /* raised surface on light */ /* Rules. Hairlines are decorative and deliberately faint; control borders carry meaning (an input's edge) and are held at 3:1 against every ground they can appear on, per WCAG 1.4.11. Do not use one for the other. */ --prgrs-hairline-light: #E4E5E7; --prgrs-hairline-dark: #2E323A; --prgrs-control-light: #6B7076; --prgrs-control-dark: #6E747D; /* ------------------------------------------------------------------------ 3. SYSTEM FEEDBACK — functional only Never decorative, never marketing, never a brand accent. Each is paired with an icon and a text label so state never depends on colour alone. ------------------------------------------------------------------------ */ --prgrs-warning: #8A5A00; /* on light grounds */ --prgrs-warning-dark: #F0B357; /* on dark grounds */ --prgrs-error: #B3261E; /* on light grounds */ --prgrs-error-dark: #F2837B; /* on dark grounds */ --prgrs-success: #1F6B3B; /* on light grounds */ --prgrs-success-dark: #6FCF97; /* on dark grounds */ /* ------------------------------------------------------------------------ 4. TYPE ------------------------------------------------------------------------ */ --prgrs-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --prgrs-serif: "Newsreader", Georgia, "Times New Roman", serif; --prgrs-tracking-display: -0.03em; --prgrs-tracking-heading: -0.015em; --prgrs-tracking-body: 0; --prgrs-tracking-micro: 0.16em; /* ------------------------------------------------------------------------ 5. SPACE — 8px base ------------------------------------------------------------------------ */ --prgrs-space-1: 8px; --prgrs-space-2: 16px; --prgrs-space-3: 24px; --prgrs-space-4: 32px; --prgrs-space-6: 48px; /* grid module */ --prgrs-space-12: 96px; /* section band */ --prgrs-space-20: 160px; /* hero */ /* ------------------------------------------------------------------------ 6. LAYOUT ------------------------------------------------------------------------ */ --prgrs-radius: 0; /* square corners throughout */ --prgrs-measure: 66ch; --prgrs-maxw: 1180px; --prgrs-gutter: 24px; --prgrs-columns: 12; --prgrs-tap: 44px; /* minimum touch target, every interactive el */ } /* -------------------------------------------------------------------------- 7. Semantic layer Components read only these. A section changes ground by reassigning them, which is why no component ever needs to know a palette value. -------------------------------------------------------------------------- */ :root, [data-ground="paper"] { --surface: var(--prgrs-paper); --surface-raised: var(--prgrs-white); --text: var(--prgrs-ink); --text-muted: var(--prgrs-steel); --text-strong: var(--prgrs-slate); --hairline: var(--prgrs-hairline-light); --control-border: var(--prgrs-control-light); --focus-ring: var(--prgrs-ink); --btn-fill: var(--prgrs-ink); --btn-text: var(--prgrs-paper); } [data-ground="cloud"] { --surface: var(--prgrs-cloud); --surface-raised: var(--prgrs-white); --text: var(--prgrs-ink); --text-muted: var(--prgrs-steel); --text-strong: var(--prgrs-slate); --hairline: var(--prgrs-hairline-light); --control-border: var(--prgrs-control-light); --focus-ring: var(--prgrs-ink); --btn-fill: var(--prgrs-ink); --btn-text: var(--prgrs-paper); } [data-ground="ink"] { --surface: var(--prgrs-ink); --surface-raised: var(--prgrs-ink-raised); --text: var(--prgrs-paper); --text-muted: var(--prgrs-graphite); --text-strong: var(--prgrs-paper); --hairline: var(--prgrs-hairline-dark); --control-border: var(--prgrs-control-dark); --focus-ring: var(--prgrs-paper); --btn-fill: var(--prgrs-paper); --btn-text: var(--prgrs-ink); } /* -------------------------------------------------------------------------- 8. Verified contrast — measured, not estimated. Do not "improve" these by substituting a lighter grey. TEXT (needs 4.5:1) Ink on Paper .................. 17.34:1 AAA Ink on White .................. 18.11:1 AAA Ink on Cloud .................. 16.59:1 AAA Paper on Ink .................. 17.34:1 AAA Paper on Ink-raised ........... 15.82:1 AAA Slate on Paper .................. 7.90:1 AAA Graphite on Ink ................. 7.94:1 AAA Graphite on Ink-raised .......... 7.24:1 AAA Steel on White .................. 4.99:1 AA Steel on Paper .................. 4.78:1 AA Steel on Cloud .................. 4.58:1 AA <- the tightest pair CONTROLS & FOCUS (needs 3:1, WCAG 1.4.11) Steel border on white ........... 4.99:1 PASS Steel border on cloud ........... 4.58:1 PASS Control-dark on ink ............. 3.84:1 PASS Control-dark on ink-raised ...... 3.51:1 PASS Ink focus ring on paper ........ 17.34:1 PASS Paper focus ring on ink ........ 17.34:1 PASS LOGO (inside the lockup only) Green-hi on logo navy .......... 12.87:1 AAA Green-lo on logo navy ........... 6.96:1 AA Steel must not be used on white-on-white stacks or below 16px where the 4.58:1 floor leaves no headroom. Use Slate instead. -------------------------------------------------------------------------- */