/* Presto "Cortex" color system — extracted from Cortex_-_Color_System.pdf Source of truth: /Cortex_-_Color_System.pdf (project files) Do not hand-edit hex values here without updating that source doc first. */ :root { /* PRIMARY — brand color, used consistently across interactive elements * * DEVIATES FROM THE PDF. The source document gives #FF3000. This is * #FF6A22, sampled from the brand mark itself by * tools/sample-logo-color.py: the modal colour among the 17,713 pixels of * assets/logo/p4-icon-color-256.png with HSV saturation > 0.5 (377 * occurrences). * * The mark is a GRADIENT, not a flat colour — hue runs 0°–22.5° with the * mass between 5° and 20°, which matches the "hue 4-20°" the rail note in * DESIGN.md recorded when the raster was first vendored. No single value * can equal it, so the modal pixel is the closest thing to "the mark's * colour" that is actually IN the mark. * * RECONCILE THIS WITH WHOEVER OWNS THE CORTEX FILE. Either the PDF value * is right and the logo should be re-exported to match it, or the logo is * right and the PDF needs updating. They are 8° apart and both cannot be * the brand colour. Until that is settled this file is no longer a 1:1 * transcription, and this comment is the only thing recording that. */ --primary: #FF6A22; /* PDF says #FF3000 — see above */ --on-primary: #FFFFFF; --primary-container: color-mix(in srgb, var(--primary) 12%, white); /* PDF: #FFE6D3 */ --on-primary-container: var(--primary); --inverse-primary: var(--primary); /* SECONDARY — accent, supports brand identity in labels/highlights */ --secondary: #2343EA; --on-secondary: #FFFFFF; --secondary-container: #EAF5FF; --on-secondary-container: #2343EA; /* PROMO */ --promo: #8006C2; --on-promo-container: #F9EFFF; /* INFO */ --info: #0078A4; --info-container: #E7F9FF; /* source PDF mislabels this swatch "onPurpleContainer" — verify with design before treating the name as final, hex is correct per section placement */ /* SURFACE — neutral grays for text, fields, backgrounds, dividers */ --surface: #FFFFFF; --on-surface: #23272E; --on-surface-variant: #68798F; --surface-container: #F3F6FB; --surface-container-low: #FEFEFE; --surface-container-lowest: #F8FBFF; --surface-container-high: #F3F6FB; /* identical to --surface-container in source doc — confirm before relying on this for elevation contrast */ --surface-container-highest: #E7ECF4; --inverse-surface: #23272E; --inverse-on-surface: #FFFFFF; /* OUTLINE */ --outline: #D4D9E4; --outline-variant: #DCE1EA; /* ERROR — feedback: failure / destructive states */ --error: #D70000; --on-error: #FFFFFF; --error-container: #FFF0F0; --on-error-container: #D70000; /* SUCCESS — feedback: positive states */ --success: #009544; --on-success: #FFFFFF; --success-container: #E7F7E8; --on-success-container: #009544; /* CAUTION — feedback: warning states */ --caution: #F0A400; --on-caution: #FFFFFF; --caution-container: #FFFAE4; --on-caution-container: #8C6D1F; /* RATE — used for star ratings */ --rate: #F0A400; /* identical to --caution in source doc — confirm whether intentional or a documentation copy-paste */ --on-rate: #FFFFFF; /* =================================================================== EXTENSION — NOT PART OF THE OFFICIAL CORTEX COLOR SYSTEM. Everything above this line is transcribed 1:1 from Cortex_-_Color_System.pdf. Everything below is P4's own, and is here only because the app needs a tint ramp that Cortex does not define: Cortex ships one brand colour plus one container tint, and P4 leans on ~68 sites spread across a light wash, a mid tint source and a dark text ink. These three are DERIVED ALGORITHMICALLY from --primary via color-mix(), not hand-picked, so they move with the brand colour and cannot drift from it. That also means they are placeholders: if whoever owns the brand file ever specs a real ramp, replace these wholesale rather than reconciling them. Do not add a fourth step here. If one is needed, that is a signal the ramp belongs in the source document. =================================================================== */ /* Light wash — cards, chip tracks, meter channels, podium ground. Aliases the official container tint; adds no new value. */ --primary-100: var(--primary-container); /* Mid tint source. Rendered directly almost nowhere: ~95% of its uses are color-mix() at 2–60% for borders, washes and hovers. It is lighter than --primary on purpose — at 34% the raw brand red lands within ~1.17:1 of the same mix of --error, which would make ordinary chrome read as an alert. */ --primary-400: color-mix(in srgb, var(--primary) 70%, white); /* ≈ #FF9764 */ /* Brand-tinted text ink on light grounds — table headers, micro labels, chip text, links. Darker than --primary because it has to be: --primary is 2.86:1 on white and every one of these sites is text below 18px, which needs 4.5:1. This measures 4.80:1 — it clears, but only just, and on --primary-100 rather than white it measures 4.22:1 and does NOT. See DATA-66. */ --primary-ink: color-mix(in srgb, var(--primary) 75%, black); /* ≈ #BF501A */ /* Data-viz heat ramp — the choropleth's two ends, and the sign-in illustration's. Also an EXTENSION, and disposable on exactly the same terms as the three above: derived from --primary, not specced, replace wholesale if a real data palette is ever defined. DATA-64 parked data-viz colour as its own question on the grounds that a brand palette assigns colour to ROLES while a data palette assigns it to QUANTITIES. That is still true, and this does not answer it — it just stops the charts being copper on a red-orange page while the question is open. A real answer needs ordered-ramp perception and colour-blind safety, neither of which a two-stop mix of the brand colour can claim. */ --heat-stop-light: color-mix(in srgb, var(--primary) 25%, white); /* ≈ #FFDAC8 */ --heat-stop-dark: color-mix(in srgb, var(--primary) 85%, black); /* ≈ #D95A1D */ }