/* AutoFill Portal — THE PALETTE. §692 U1. * ============================================================================= * THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR COLOUR, for the public site AND * for the extension. The site READS it (base_site.html links it ahead of * site.css, so every page's own CSS lands on these tokens). The extension * MIRRORS it, in `extension/afp-constants.js` as `AFP_TOKENS`, because a content * script cannot fetch a Flask static file at render time. The mirror is not a * promise: `tests/test_palette_tokens_692.py` parses BOTH and reds if one token * name or one hex differs, in either direction. Same arrangement §631 uses for * extension/fill_core.js <-> static/fill_core.js: a copy with an authority and a * gate, never two opinions. * * ----------------------------------------------------------------------------- * THE RULE. IT IS THE POINT OF THIS FILE AND IT OUTRANKS ANY LAYOUT PREFERENCE. * ----------------------------------------------------------------------------- * In any surface where FILL STATES are rendered, green / amber / grey-blue may * ONLY indicate a field's answer state: * * GREEN the product filled it and is confident (Filled) * AMBER the product filled it and was not sure (Double-check) * GREY-BLUE the product would not guess; it is yours (Left blank) * RED an error. Nothing else. Never a fill state. * * So: NO green buttons. No green gradients. No green links. No green decoration. * Primary actions are NAVY, or white-on-navy. The same goes for amber: a primary * button painted amber spends the Double-check signal exactly as a green one * spends Filled. * * WHY, in one sentence, because a future window will be tempted: if a control is * green, a user learns that green means "clickable", and the three-state model * stops communicating. Rule 0 point 1 -- never a silently wrong answer -- is * carried on a page by these three colours and nothing else. Spending them on * chrome is not a style choice; it is disarming the safety signal. * * WHICH SURFACES THIS BINDS: the marketing site, the §583 on-page panel * (afp-palette.js), the floating alternatives menu (afp-altpanel.js), the PDF * viewer (viewer.html / viewer.js) and the hosted filler (/pdf-fill). The * signed-in app surfaces (/account, /onboarding, /welcome) are deliberately NOT * in scope -- base_site.html's split, pinned by tests/test_site_shell_scope_689.py, * is what keeps them out. * * ----------------------------------------------------------------------------- * DARK CHROME, LIGHT CONTENT. §692 U5. * ----------------------------------------------------------------------------- * The site is dark by DEFAULT -- navy is the page, not an alternate scheme. But * anything that DEPICTS A DOCUMENT stays light, and that is deliberate rather * than an inconsistency: a permit form is white paper. The three-state mock and * the demo frame keep their white card, their light field boxes and the * ON-LIGHT semantic variants. The document is the subject; the site is the frame * around it. A darkened mock would be a picture of a form that does not exist. * * ----------------------------------------------------------------------------- * A TOKEN IS A ROLE, NOT A HEX -- WHICH IS WHY FOUR OF THESE HAVE COMPANIONS. * ----------------------------------------------------------------------------- * One colour cannot serve both "a boundary or a fill at 3:1" and "text at 4.5:1" * on the same background. Where the brand value cannot carry the text role, the * companion is named `-text`, its measured ratio is written beside it, and the * brand value keeps the boundary/fill role it does clear. Measured with the WCAG * 2.1 relative-luminance formula by `tests/test_palette_tokens_692.py`, which * re-derives every number below rather than trusting this comment. * ===========================================================================*/ :root { /* -- Surface / structure ------------------------------------------------- No semantics. Use these for everything that is not an answer state. */ --navy: #111C2E; /* primary brand surface; the page */ --navy-2: #18253C; /* elevated surface; the alternating section */ --ink: #1C222C; /* body text on light (15.55:1 on --paper) */ --paper: #FBFCFD; /* light surface */ --line: #E2E7EE; /* borders on light. DECORATIVE SEPARATORS ONLY -- 1.24:1 on white, so it must never be the only thing marking a control's edge (WCAG 1.4.11 exempts a purely decorative rule; it does not exempt an input's resting border). */ --dim: #6C7786; /* secondary text on light (4.54:1 on #FFF) */ --dim-dark: #D6DDE5; /* secondary text on navy (12.47:1 on --navy, 11.20:1 on --navy-2). NOT --dim: that is a light-scheme token and reads 3.76:1 on navy. */ /* -- Dark chrome (U5) ---------------------------------------------------- */ --rule-dark: rgba(255, 255, 255, .10); /* rules and section edges on navy. Composites to #293343 = 1.34:1, which is a SEPARATOR, never a control boundary. */ --field-bg: #0D1727; /* form input fill on navy (17.96:1 for white) */ --field-border: #516891; /* an input's RESTING edge. The brief specified #33425C; measured, that is 1.77:1 against --field-bg against a 3:1 bar -- the same defect §670 found on the panel's inputs (1.48:1) and §673 repaired. Lifted along the same hue to the nearest value that clears it: 3.20:1 on --field-bg, 3.04:1 on --navy. The deviation is named here rather than made silently. */ --field-placeholder: #7C8B9F; /* 5.18:1 on --field-bg */ /* -- Semantic - RESERVED. Never decorative. See THE RULE above. ---------- */ /* FILLED / confident. */ --filled: #2E8F56; /* on light: a boundary or a fill (4.05:1 on #FFF, clears the 3:1 component bar, NOT the 4.5 text bar -- use --filled-text for words). */ --filled-dark: #48BB79; /* on navy: text or boundary (7.04:1 on --navy) */ --filled-text: #2A844F; /* FILLED as TEXT on light (4.65:1 on #FFF, 4.53:1 on --paper). Companion, see above. */ /* DOUBLE-CHECK. */ --check: #C88C1E; /* on light: a boundary, a dot or a fill. 2.91:1 on #FFF -- NOT a text colour. */ --check-dark: #E4AA3E; /* on navy: text or boundary (8.23:1 on --navy) */ --check-bg: #FFF7E4; /* the tint behind a double-check field, on light */ --check-text: #946816; /* DOUBLE-CHECK as TEXT on light (4.63:1 on --check-bg, 4.94:1 on #FFF). Companion: the brand amber is 2.72:1 on its own background. */ /* LEFT BLANK - the field the product would not guess. */ --needs-you: #CFD6DF; /* on navy: 11.66:1, fine as a pip or an edge */ --needs-you-line: #8D9298; /* the same state on LIGHT (3.14:1 on #FFF). --needs-you itself is 1.46:1 there, so a blank field's edge inside the white mock would be invisible. */ /* ERROR. AN ERROR, AND NOTHING ELSE. Never a fill state, never a warning about the form, never "this needs attention" -- that is --check. */ --error: #C9564F; /* on light: a boundary or a fill (4.26:1 on #FFF) */ --error-dark: #E06460; /* on navy: text (5.01:1 on --navy) */ --error-text: #B54D47; /* ERROR as TEXT on light. It is DARKER than the first draft (#C1534C) and the reason is worth keeping: that value was measured against #FFF only, and the PDF viewer paints its status text on a #F5F5F5 body, where it read 4.18:1 -- swapping it in would have been a REGRESSION on the surface it was being adopted for. Measured now against every light surface this palette actually paints on: 4.91 on #FFF, 4.78 on --paper, 4.50 on #F5F5F5, 4.60 on --check-bg, 4.49 on the #FEF2F2 error tint. */ }