/* ========================================================================== The Evicora visual system. **It supplies treatment for names that already exist.** `rendering/` referenced 126 classes and 21 had a rule; the semantic vocabulary was written into the markup and stopped at the stylesheet. So this styles `action-destructive`, `empty-state`, `organisation-row` and their kin rather than introducing synonyms for them. ## What makes it Evicora A product for weighing evidence and recording decisions. So: **a deep teal-slate that reads as considered rather than corporate**, cool neutrals carrying a trace of the same hue so the greys look chosen, a tight editorial wordmark, numerals that line up in columns, and hairlines instead of shadows — an instrument, not a dashboard. The character comes from the system stack used deliberately, and **not** from a webfont: `document.py` widens the CSP only to what a page demonstrably requires, and a brand face is a want. Widening `font-src` for it would spend the policy on decoration. `U-2` is the constraint everything bends around: **unknowns render neutral and contradiction is the single cautionary state.** One hue carries alarm. The accent is affordance — it says *this can be followed*, never *this is good* — which is why no state class borrows it. ========================================================================== */ :root { /* ---- type ------------------------------------------------------------ **A system stack, and no web font.** `Inter` is not shipped, so naming it would be a lottery on whether a reader's machine happens to have it — and `document.py` widens the CSP only to what a page demonstrably requires. San Francisco, Segoe UI and Roboto cost no download, no privacy dependency and no rendering delay. */ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Codes, timestamps and anything read character by character. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* **Measured against the drawings, not chosen** ([D-1641]). Every size was a notch below what the designs set: a heading at `28px` against `32`, a card's body at `14` against `15`, a region's heading at `18` against `20`. One step up across the scale keeps every relationship it already had — the ladder is the same ladder — and stops the product reading as a denser, quieter version of its own design. */ /* **The scale is roles, and a rule may only name a role** ([D-1644]). It was a ladder of rungs that said nothing about what a thing *is*, so one role took different rungs in different components and nobody could see it without measuring: a card's heading was `20px` in one column and `15px` in another, a standing **sentence** rendered at `20px` — heading size — and a button had four treatments across the planes. The rungs are gone as a vocabulary; what is left is ten roles on eight sizes, and the hierarchy is legible in the size alone rather than propped up by a card, a border or a colour. | role | size · weight | what wears it | |---|---|---| | `--t-arrival` | 40 · 650 | the one editorial line on the arrival canvas | | `--t-page` | 28 · 650 | the `h1`, once per document | | `--t-value` | 20 · 650 | a fact the page is **about**: a plan's name, a count | | `--t-card` | 18 · 600 | a card's heading, a column's own title | | `--t-lede` | 16 · 400 | the page's sentence, under the `h1` | | `--t-body` | 15 · 400 | everything a reader reads | | `--t-control` | 15 · 500 | what is written on a control | | `--t-nav` | 14 · 500 | a destination in a column or a spine | | `--t-label` | 14 · 500 | what names a field or a fact | | `--t-help` | 13 · 400 | what is read after the thing it qualifies | | `--t-eyebrow` | 12 · 600 | a lettered column header, and nothing else | **A value outranks a section and is outranked by the page.** *Professional* is not a second page heading and *The subscription* is not a page title; the middle of the ladder is where that distinction lives, and there was nothing there. */ /* **The product's name, and its own role** ([D-1912]). `D-1908` ruled the wordmark is not content and takes one canonical treatment across the shells; it left it wearing `--t-card`, which is a content rung and the mismatch `D-1644` exists to remove. The drawings set it larger than any heading beside it — a masthead's first job is to say whose product this is — so it gets a rung of its own, still one treatment on all three planes. */ --t-wordmark:1.375rem; /* **Page 1, drawn to the owner's master** (95, `sign-in-fail.png`, measured at its own 768px width): the master sets these at its own sizes, larger than the product's ramp, and pixel-faithful means they are its sizes. */ --t-signin-wordmark:40px; --t-signin-aside:18px; --t-signin-title:44px; --t-signin-lede:24px; --t-signin-label:20px; --t-signin-field:19px; --t-signin-submit:22px; --t-signin-link:18px; --t-signin-alert-title:23px; --t-signin-alert:19px; /* **`1i`, drawn to the owner's master** (96, `try_evicora.png`, measured at its own 1536px width): its own sizes, as page 1's are. */ --t-start-wordmark:42px; --t-start-aside:17px; --t-start-title:64px; --t-start-second:45px; --t-start-lede:24px; --t-start-label:16px; --t-start-audience:22px; --t-start-fact:16px; --t-start-small:17.5px; --t-start-action:22px; --t-start-note-label:15px; --t-start-note-lead:19.5px; --t-start-note:16.5px; --t-start-note-way:15px; --t-start-more:19px; /* **1a's code step and 1o, drawn to the owner's master** (97, measured at its 1416px width): its own sizes, one role each. */ --t-code-wordmark:46px; --t-code-title:53px; --t-code-lede:24px; --t-code-eyebrow:17px; --t-code-turn:50px; --t-code-where:24px; --t-code-digit:34px; --t-code-action:24px; --t-code-note:17px; --t-code-resend:18px; /* Its phone scale (PO, 76b): wordmark 28, h1 30, the note at 14. */ --t-code-wordmark-narrow:28px; --t-code-title-narrow:30px; --t-code-lede-narrow:16px; --t-code-turn-narrow:23px; --t-code-note-narrow:14px; /* **1p, drawn to the owner's master** (98, measured at its 1536px width). */ --t-setup-wordmark:40px; --t-setup-title:41px; --t-setup-lede:21px; --t-setup-label:18px; --t-setup-hint:15.5px; --t-setup-input:17px; --t-setup-check:16px; --t-setup-action:20px; --t-setup-note:16px; --t-setup-step:18px; --t-setup-step-label:17px; /* **1c, drawn to the owner's master** (99, at its 1536px width). */ --t-admission-title:36px; --t-admission-lede:17px; --t-admission-lead:19px; --t-admission-note:16px; /* **B3, drawn to the owner's master** (103, at its 1024px width). */ --h-t-id-title:48px; --h-t-id-lede:18px; --h-t-id-card-title:26px; --h-t-id-sub:17px; --h-t-id-label:16px; --h-t-id-input:18px; --h-t-id-action:20px; --h-t-id-email:26px; --h-t-id-body:17px; --h-t-id-panel-title:18px; --h-t-id-panel:16px; --h-t-id-pill:14px; /* **The operator shell and B0, drawn to the owner's masters** (100, at 1536px). */ --h-t-op-wordmark:30px; --h-t-op-badge:14px; --h-t-op-title:48px; --h-t-op-lede:21px; --h-t-op-card-title:28px; --h-t-op-body:17px; --h-t-op-th:13px; --h-t-op-name:19px; --h-t-op-queue-title:40px; --h-t-op-sub:15px; --h-t-op-desig-card:22px; --h-t-op-desig-body:16px; --h-t-op-desig-small:14px; /* **Avatar initials** — the one named exception to ux/123's scale (§4 (b)): the initials in a person's disc, sized from the disc (≈0.45 of its diameter), aria-hidden, and never used for text. */ --avatar-initials:32px; /* in the 72px disc */ --avatar-initials-small:22px; /* in the 48px disc at a phone */ /* 95's field ground, field edge and hairline are `--raised`, `--rule` and `--sunken`, each within a few steps of the master's: no new colour. */ /* ---- role ------------------------------------------------------------ **What capacity a reader is operating in, reinforced and never stated by colour alone** ([D-1912]). The role's *word* is product vocabulary and comes from `model/roles.yaml`; its *accent* is this layer's and the model holds none. **A ladder of one hue, not five colours.** `U-2` — presentation may reinforce a meaning and never strengthen it — so the lozenge's word is the identification and the tint is a second, quieter channel saying roughly how much authority sits behind it. Four hues would make the colour the claim. **No state hue is spent here.** `--caution` and `--danger` are the only two the product alarms with, and a capacity is not a state: a role tint never reaches attention, refusal, completion or a destructive act. **`color-mix` of tokens this palette already holds**, so the audit that counts hex literals still counts the same eighty. */ --role-ground: var(--selection); --role-ink: var(--accent); /* **The arrival line is a role, not a big `--t-page`** ([D-1913]). The approved drawing opens the pre-authentication canvas with one editorial sentence set well above the page rung; `--t-page` is *the `h1`, once per document* and the sign-in card's own `h1` already wears it, so borrowing it here would put one role at two sizes on one screen — the divergence `D-1644` replaced rungs with roles to stop. Measured off `signon-new.png` at `1440`: `40px`. */ --t-arrival:2.5rem; --t-page:1.75rem; --t-value:1.25rem; --t-card:1.125rem; --t-lede:1rem; --t-body:.9375rem; --t-control:.9375rem; --t-nav:.875rem; --t-label:.875rem; --t-help:.8125rem; --t-eyebrow:.75rem; /* **Hierarchy comes from weight and tone before size.** Four weights, because a fifth is a decision nobody can defend. */ --w-normal:400; --w-medium:540; --w-semi:600; --w-strong:650; /* **Rungs the recruiter drawings use, absorbed into the one ladder** ([D-1846], closing `OQ-022`). The question was *converge, or re-baseline?* and the measurement already answered half of it: snapping the plane onto `540/650` lightened the wordmark visibly and moved page heights, so **the plane is not moved**. The other direction costs nothing — a rung no other plane uses is three characters, and it means the same role is no longer set at two values depending on which stylesheet a rule sits in. */ /* **`--w-heavy` comes back, because the wordmark wears it again** ([D-1912]). It was retired on its own rule — *a rung nothing wears is a word for nothing* — when the wordmark stopped being sized by the plane. The drawings put the product's name at `800` on every shell, so the rung has a wearer and the rule returns it rather than the rule being bent. */ --w-mid:500; --w-bold:700; --w-heavy:800; --lh-tight:1.2; --lh-snug:1.32; --lh-normal:1.55; /* As above: the drawings' rhythm, named here rather than in a second ladder. */ --lh-flat:1; --lh-tighter:1.1; --lh-relaxed:1.4; --lh-card:1.45; --lh-body:1.5; --lh-loose:1.6; /* Negative tracking on display sizes only: it tightens a heading and damages body text. `wide` is for the uppercase eyebrows. */ --track-tight:-.018em; --track-snug:-.011em; --track-wide:.08em; /* Near-identical to the two above and **not** the same value, which is why absorbing them is the answer and rounding them together is not. */ --track-title:-.02em; --track-plane:-.012em; /* ---- space ------------------------------------------------------------ */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; /* ---- geometry --------------------------------------------------------- */ /* **`--wide` and `--shell` are gone** ([D-1637]). They were two more horizontal grids: a collection took one width, a three-track page took another, and the masthead above both took the viewport. One container now, and what differs between surfaces is the grid inside it. **`--measure`, `--narrow` and `--form` are retired too** (ux/84 §2): every width a page's content takes is one of the tokens below. */ --region-mark:56px; /* a region's tile and its gap, so a card has one text edge */ /* **One container, shared by the masthead and the page** ([D-1637]). The product had two horizontal grids: a spine starting at the viewport edge and running its full width, and a composition centred inside it — so *Jobs*, *Settings* and the rest floated above columns they had no relationship with, and on a 1536px screen the useful surface was the middle three-quarters under a bar using all of it. This is the width both of them take, and page archetypes own only the grid **inside** it. */ /* **ux/84 §2's widths, and the only ones a page may cap at.** One standard container for every signed-in page (the header's own box); the Details region and the focused column; running text at 72ch; an inline form's fields at 480px; an uploader's drop zone at 640px. The older per-page widths below retire as each page type moves onto these. */ --container:84rem; /* 1344px: the masthead's contents and the page's, on one grid */ --details:320px; /* an object page's Details region, beside main at >= 1024 */ --focused:640px; /* a focused page's one centred column */ --settings-content:1040px; /* a settings page's content column, beside the panel (ux/86 86-a) */ --prose:72ch; /* running text */ --field:480px; /* an inline form's fields */ /* **`21rem`, because a rail now carries a sentence** ([D-1605] put panels here; `A1-security-new.png` puts an account's security standing in one). At `17rem` the standing wrapped to nine lines against a column of labels-and-values it was never sized for. The note it replaces stands: a rail is still not the place for prose — it is the place for one sentence a reader checks while acting, and that is what this width is for. */ --rail:21rem; --aside:17rem; /* a card's side column of icon lines (ux/87 §2) */ --sections:16.5rem; /* a section's own parts, each on one line — *Delete this organisation* too (ux/86 86-b) */ --setting-label:230px; /* a settings row's name and hint (68 §6) */ --control-h:2.5rem; /* every control is the same height as every other */ /* Column widths for the fixed columns of a collection, so a collection's shape is chosen from a named scale rather than typed. The proportions stay per-collection — what stops being arbitrary is the vocabulary. **The steps are the widths already in use, not a tidier four.** Naming them this way moves nothing, which matters because four of the collections sit on frozen reference surfaces. Reducing the vocabulary on the strength of arithmetic is a layout change and is not made here. **`--col-xs` was one of them until [D-1405]**, and it went for the opposite reason: `B0`'s grid row was its only user, and the Directory archetype draws a `table`. A step that sizes nothing is not a vocabulary, it is a leftover. */ --col-sm:6rem; --col-md:7rem; --col-xl:9rem; --col-2xl:10rem; --col-3xl:11rem; /* **Breakpoints, named once — and read by a person, not by the stylesheet.** A custom property cannot appear in a media query condition, so unlike every other token here these two are not substituted anywhere. They are kept because the alternative is a bare number in a media query with nothing saying what it is. The literals at the two `@media` rules must match them. `--bp-narrow` and `--measure` are both 52rem, and that is the reason rather than a coincidence: the layout collapses at exactly the width where the viewport stops being able to hold the measure reading was tuned to. */ --bp-wide:64rem; --bp-narrow:52rem; /* **The arrival composition's two minimums** (QUESTION 18a): the editorial column holds *Every hiring decision,* on one line at `--t-arrival`, and the card holds its form. Where both and their gutter cannot fit (70rem), the composition stacks. */ --arrival-min:24rem; --card-min:360px; /* **Card rhythm is one gap** (`66 §5`, QUESTION 20a): between cards in the main column and in the rail, on both planes — a step of the scale (59 V-2), not a measured 18. */ --card-gap:var(--s5); /* **The console's text edge inside a card** (`66 §2`, QUESTION 20c): the head card's inline padding — where the page's title starts, and so where every panel's heading, find field and first column start too. No tile precedes the title any more (ux/84 ANSWER 48-f), so the gutter is the padding alone. */ --console-gutter:var(--s5); /* **Softened, not rounded.** 3px reads as a browser default that nobody chose; the step to 8px is the smallest one that reads as a decision on a card, and it is still an instrument rather than a consumer app. `--radius-sm` follows it for the controls that sit inside one. */ --radius:8px; --radius-sm:5px; --hair:1px; /* every rule in the product is this */ --edge:2px; /* an active or emphasised edge */ /* ---- colour ----------------------------------------------------------- Neutrals carry a trace of the accent so the greys read as chosen rather than inherited. */ /* **`--faint` is `#687174`, not `#828d90`** ([D-1644]). It carried `5.0:1` after the change and `3.41:1` before it — **below `AA`'s `4.5:1` for normal text** — and it carries exactly the roles the scale just made smaller: a lettered column header at `12px`, provenance at `13px`, a page's meta line. The hue is unchanged; what changes is that the smallest text in the product is now readable, which is the half of a type scale a size alone cannot deliver. */ --ink:#12181a; --quiet:#556063; --faint:#687174; --rule:#e0e6e6; --rule-strong:#c6d0d0; --page:#fff; --raised:#f6f8f8; --sunken:#eceff0; --on-accent:#fff; /* **96's marks** (`1i`, the owner's master): the three inks its tiles and its people drawing wear beside the accent — decorative, never a state. */ --mark-warm:#f59300; --mark-green:#07a877; --mark-violet:#4a2ff0; /* **97's sky** (1a's code step and 1o): the master's full-bleed ground, as a gradient — its blue top, the warm band behind the card, and the cloud foot. */ --sky-top:#aaccf1; --sky-band:#e6dde4; --sky-foot:#8d9cbb; /* **Affordance, never status** — it says *this can be followed*, and no state class borrows it (`U-2`). **The accent is blue** (owner ruling, [D-1913]). It was `#0f5257`, a teal the product wore on every act, every link and every mark that sits on `--selection`. This is a global token migration and **not** a pre-authentication exception: the single-accent principle is the thing being preserved, so the hue moves everywhere at once or the product has two accents for as long as it takes to finish. The ruling names seven values; they land as five tokens, because *pressed* and *strong accent text* are one value in the ruling and one decision here. */ --accent:#2563eb; --accent-hover:#1d4ed8; --accent-deep:#1e40af; /* **The edge an accent surface draws, which the product had no name for.** A second route is outlined rather than filled, and `--rule-strong` is a neutral hairline — it makes the alternative read as a disabled control rather than as the other door. */ --accent-edge:#bfdbfe; /* The selection highlight, and nothing else. It was `--accent-wash` while a tertiary action tier also used it; that tier reached no page and went in [D-768], leaving one use and a name that described a tinted surface the product does not have. The value is untouched — the name follows the use, not the other way round ([D-769]). */ --selection:#eff6ff; /* The one alarm hue. */ --caution:#8a4b00; --caution-bg:#fdf3e7; --caution-rule:#e5c9a3; /* Destruction is a different *kind* of consequence, not a louder caution. */ --danger:#8f2c2c; --danger-bg:#fcf1f1; --danger-rule:#e0b8b8; /* **The halo is the ruled colour; the hairline is why it can be seen** ([D-1913]). The ruling sets focus to `#93c5fd`, which is a ring drawn *against the control* in the vocabulary it comes from. On this product's white page that pale blue carries about `1.9:1` — below the `3:1` a non-text indicator owes — so the halo is the ruled value and one accent pixel closes it. Nothing about the ring's colour changes; what is added is the edge that makes it a ring rather than a glow. */ --accent-focus:#93c5fd; --focus:0 0 0 2px var(--page), 0 0 0 4px var(--accent-focus), 0 0 0 5px var(--accent); /* ---- motion ----------------------------------------------------------- Short enough to feel like response rather than animation, and disabled entirely where the reader has asked for that. */ --ease:.12s ease; /* ---- the recruiter plane's palette ------------------------------------ **Measured off the drawings, and declared here because this is where values live** ([D-1777]). It was a second block on `body[data-plane="workspace"]`, which reads well — a plane's palette scoped to the plane — and put twenty-one decisions outside the one place `D-765` says to look for them. `_stylesheet_outside_root` strips `:root` and nothing else, so the block and the hundred literals referring to it were, to the rule, a hundred and twenty-one accidents. **They keep their own names rather than redefining the canonical ones.** No value here matches a canonical token, so a redefinition would be a second meaning for a name the rest of the product reads — and the operator plane's precedent is to *choose* different tokens, not to change what a token means underneath rules that cannot see the change. **Declared globally, referenced on one plane.** A token is a name for a decision; where it is spent is the rule's business, and every rule that spends these is scoped to `workspace`. */ --h-page: #f3f7fa; --h-card: #ffffff; --h-line: #e5edf3; --h-line-soft: #eef3f7; --h-ink: #0e1b3d; --h-ink-2: #3f4d64; /* **Quiet text that passes on every ground it sits on** (INSTRUCTION 19e, 59 A-1). It was `#64748b`: 4.41:1 on the page ground and 4.43:1 on the warning tint, under AA's 4.5:1 for body text. This is a step along the same slate that clears 4.5:1 on **every** ground token of this plane — 4.69:1 on the pink fill that is hardest, 5.49:1 on the page, 5.92:1 on the card — so one quiet token still serves them all. `#59677c` was the lightest that passed and sat 8 from `--h-unset-ink`, which is one decision under two names; this is the next step, 13 away. */ --h-muted: #56657c; /* **The recruiter plane's accent moves with the product's** ([D-1913]). The owner's ruling is a *global* token migration preserving the single-accent principle, and this plane kept its own: a teal `#0f5a52` on every head tile and act, beside an `--h-link` blue on every link. Two hues doing affordance on one plane, and neither of them the accent the customer plane now wears — which is the two-accent state the principle exists to refuse. The values are the ruling's, mapped onto the names this plane already had: primary, the pressed-and-strong step, and the soft ground. **`--h-link` is the accent now**, rather than a fourth blue a reader is asked to tell apart from it. */ --h-accent: #2563eb; --h-accent-hi: #1e40af; --h-accent-soft: #eff6ff; /* **The console's header bar** (ux/136, the owner: *Platform Admin needs to stand out in colour scheme*): a deep indigo ground, white type (`--on-accent`), a violet chip and accent. Every pairing clears 4.5:1 on the ground (the contrast pin in test_console_header_136). */ --op-bar: #1e1b4b; --op-bar-muted: rgba(255, 255, 255, 0.78); --op-bar-line: rgba(255, 255, 255, 0.22); --op-chip: #4c1d95; --op-chip-ink: #ddd6fe; --op-accent: #a78bfa; --h-link: var(--h-accent); --h-danger: #c02a37; --h-danger-soft: #fdecee; --h-danger-line: #f6d3d8; --h-warn: #92610f; --h-warn-soft: #fef6e7; --h-warn-line: #f7e3be; /* ---- the plane's surface ramp ----------------------------------------- **A gradation, and every rung of it is a decision the drawings make** ([D-1777]). Collapsing these onto their nearest neighbour is invisible in text and **visible in a fill**: `.requirement-settled` lost a tint of seven units against the white card it sits on, and four and a half million pixels of one page changed. The check's twelve is a threshold for two *names* being one decision; a flat area large enough to read as a surface is not covered by it. So the ramp is named rather than reduced, and its members are exempted from the near-identical rule **as a ramp** — they are stacked surfaces told apart by adjacency and by the border between them, never by contrast with each other. */ --h-fill-02: #e2e8ef; --h-fill-04: #e3f5e9; --h-fill-05: #e7ecf2; --h-fill-06: #e8eef7; --h-fill-07: #edf1f5; --h-fill-08: #eef3f8; --h-fill-10: #f1f4f7; --h-fill-11: #f1f5f9; --h-fill-12: #f4f7fa; --h-fill-15: #f7fafc; --h-fill-16: #f8fafc; --h-fill-17: #f8fbfd; --h-fill-18: #fafcfe; --h-fill-19: #fbdee2; --h-fill-20: #fbfdfe; /* ---- the plane's type roles ------------------------------------------- **A role, not a size** ([D-1644], applied to this plane at [D-1777]). These were seventeen pixel values typed into component rules, which is how *card heading* came to mean one thing in one column and another elsewhere. The names say what a thing **is**; the values are the drawings' own and none has moved. **Seventeen against the canonical ten**, which is the same divergence the weights and the line-heights carry and is recorded once, in `OQ-NNN`. */ /* ux/86 ANSWER 61-a (the owner, 2026-09-27): the whole ladder is measured from the masters' glyphs (cap height ÷ 0.727, Inter) — title 42, region 23, card head 21, lede 18, rows 15, pill and hint 14 — every role in the same order. */ /* **ux/123 §1 — the owner's one semantic scale for every application page** (INSTRUCTION 119, 2026-09-30). A role, sized once; the weights are the rules' (`--h-w-*`). It retires the 42px generic H1, the 29px job H1 and every master pass's surface-specific rung. */ --type-wordmark: 22px; /* the product wordmark in the shell, 700 */ --type-nav: 15px; /* top navigation labels, 600 */ --type-page-title: 32px; /* every page H1, 700 */ --type-section: 23px; /* a card's or region's H2, 700 */ --type-card-title: 16px; /* component and card H3: row titles, tile heads, group heads, 600 */ --type-body: 15px; /* body text, table cells, form values, controls, 400 */ --type-lede: 17px; /* lede and introductory copy under a page title, 400 */ --type-meta: 14px; /* captions, sublines, times, hints, 400 */ --type-meta-strong: 14px; /* the same, emphasised, 500 */ --type-meta-small: 13px; /* the smallest supporting copy and glyphs, 400 */ --type-pill: 13px; /* status pills and chips, 600 */ --type-figure: 30px; /* a tile's figure, 30/700, tile figures only (ANSWER 118-a, ux/123 §1) */ /* 13a, drawn to the owner's master (94), measured at 1536px. */ /* ---- the plane's type rungs ------------------------------------------- **Valued exactly as drawn, and prefixed for the reason the palette is** ([D-1777]). The drawings climb 400/500/600/700/800 and the system's ladder is 400/540/600/650; snapping the plane onto it lightened the wordmark visibly and moved every page's rhythm, so the rungs are named rather than approximated. **`OQ-022` is answered, and the sizes are the part that stays** ([D-1846]). Weight, rhythm and tracking are now aliases into the canonical ladder above — one set of rungs, declared once — which is the property the question was opened about: *the same role set at two values depending on which stylesheet a rule happens to sit in.* **The sizes are adopted as plane-scoped rather than converged**, for the reason the measurement gives and one more. The canonical scale is in `rem` and these are in `px`: folding them together means either mixing units in one ladder or converting these to `rem`, and the second changes what a reader's own font-size setting does to approved pages. That is a product change, not a vocabulary one — the palette's precedent applies, *a plane may legitimately be painted differently* — and it is the axis whose re-baselining the row said needs the owner's eye and a re-shot screenshot under a stated browser version. Nothing here moves a pixel. */ /* **Aliases, not a ladder** ([D-1846]). Every value above is the canonical one, so there is a single set of rungs declared once and the `--h-` names are how the recruiter plane's ~500 rules reach them. Nothing renders differently — the values are identical by construction — and the property `OQ-022` was opened about is gone: a role is no longer set at two values depending on which stylesheet a rule happens to sit in. **The names are kept rather than swept.** Rewriting 500 call sites to prove a point about vocabulary would be a diff nobody can review against screenshots, and the alias says the same thing where a reader of either stylesheet will meet it. */ --h-w-normal: var(--w-normal); --h-w-mid: var(--w-mid); --h-w-semi: var(--w-semi); --h-w-bold: var(--w-bold); --h-lh-flat: var(--lh-flat); --h-lh-tight: var(--lh-tighter); --h-lh-snug: var(--lh-relaxed); --h-lh-card: var(--lh-card); --h-lh-body: var(--lh-body); --h-lh-prose: var(--lh-normal); --h-lh-loose: var(--lh-loose); --h-track-title: var(--track-title); --h-track-snug: var(--track-plane); --h-radius: 14px; --h-radius-sm: 10px; /* ---- the plane's semantic colours ------------------------------------- **One name per decision, and the name is the role** ([D-1777]). These were sixty literals typed into component rules — eleven near-identical near-whites, seven light greys, four blues for four different things — which is the pile `D-765` calls the difference between a system and a set of rules. Values that a reader cannot tell apart (the check's own twelve) were one decision made twice and are one token now; the rest are named for what they do, because a hex in a rule is a decision nobody can find again. Nothing here is a new colour: every value is one the drawings already carry. */ --h-line-strong: #d6e0e9; /* a control's own border — select, cancel, decide */ --h-line-hover: #c3d1de; /* the same border under the pointer, and an empty-state glyph */ --h-line-dashed: #cbd9e6; /* a drop target's edge, which is dashed and therefore lighter */ --h-mark: #8fa6bb; /* a quiet glyph on a pale ground */ --h-mark-step: #5a718c; /* a numbered step's glyph, which carries more weight */ --h-mark-row: #7d8ea2; /* a row's leading glyph */ --h-chip-ink: #4d5f75; /* a neutral lozenge's word */ --h-unset-ink: #5a6b7f; /* the word for a treatment nobody has chosen */ --h-ok: #14663a; /* an open job, a supporting requirement — a settled positive */ --h-ok-2: #1a6b3c; /* the same positive one step lighter, on a lozenge */ --h-ok-soft: #e5f5ea; /* a positive lozenge's ground */ --h-ok-line: #cfe8db; /* a positive panel's edge — co-sign, readiness cleared */ --h-info-ink: #1a4fa0; /* an important requirement's word */ --h-count-ink: #2d4f86; /* a count lozenge's figure */ --h-policy: #5b3ba0; /* must-have — the one hue nothing else in the product uses */ --h-policy-soft: #efe8fb; /* its ground */ --h-critical: #a81f2d; /* a critical requirement's word */ --h-critical-soft: #fce5e8; /* its ground */ --h-danger-ink: #8f2531; /* what a destruction says, and a rejected outcome's note */ --h-danger-edge: #f0c3c9; /* a destructive control's border */ --h-danger-wash: #fbdade; /* a rejected outcome's ground */ --h-warn-wash: #fdf1dc; /* a draft lozenge, and a cautionary one */ --h-warn-note: #f9e9c9; /* an advisory outcome's note ground */ --h-warn-ink: #7d520b; /* its word */ --h-failed-line: #dfe7ee; /* an infrastructure failure's edge — neutral, not alarming */ /* **The quiet ink, by name** (INSTRUCTION 19e). `#55657a` sat 3 from the passing `--h-muted`, which is one decision under two names; the mark now wears that token. */ --h-failed-ink: var(--h-muted); /* **Four tints the drawings keep apart and a colour metric cannot** ([D-1777]). Each is within twelve of a neutral of the same lightness, so the check reads them as one decision; a reader does not, because they are the *hue* of a state — a positive wash is green, an informational one is blue, and a grey one would say neither. Named, valued exactly as drawn, and exempted with this reason rather than collapsed into the neutral beside them. */ --h-ok-wash: #eef8f2; /* a cleared readiness, a countersignature */ /* **13a's areas** (94 §6): one ink and one tint each; blues are the accent's own steps. */ --h-area-jobs: var(--h-accent); --h-area-jobs-soft: var(--h-accent-soft); --h-area-people: var(--accent-hover); --h-area-people-soft: var(--h-accent-soft); --h-area-access: var(--h-accent-hi); --h-area-access-soft: var(--h-accent-soft); --h-area-candidates: #4338ca; --h-area-candidates-soft: #eef0fd; --h-area-plan: #0e6b85; --h-area-plan-soft: #e4f3f7; --h-area-requirements: var(--h-ok); --h-area-requirements-soft: #e9f6ee; --h-area-organisation: #0f6b62; --h-area-organisation-soft: #e3f3f0; --h-area-billing: #9a4a07; --h-area-billing-soft: #fcf0de; --h-area-documents: #6b21a8; --h-area-documents-soft: #f3ebfc; --h-area-questions: #9d174d; --h-area-questions-soft: #fbe9f1; --h-area-system: #475569; --h-area-system-soft: #eef1f5; /* **Role colours** (ux/87 §4): each role's tint and its ink, wherever a role is shown as a tile; the same pairs colour the initials discs (§3). Text on each tint is ≥ 4.5:1. */ --role-admin: #e8f0fe; --role-admin-ink: var(--accent-hover); --role-recruiter: #f1ecfe; --role-recruiter-ink: #6d28d9; --role-hiring-manager: #e6f5ec; --role-hiring-manager-ink: #166534; --role-interviewer: var(--caution-bg); --role-interviewer-ink: #b4400f; --disc-teal: #dcf2f4; --disc-teal-ink: #0f6b63; --disc-rose: var(--danger-bg); --disc-rose-ink: #b0174f; --h-info-wash: #e4edfc; /* an important requirement's lozenge, and a note on an outcome still being read — six apart when drawn, which is one decision made twice */ --h-chip: #e8eef5; /* a monogram, a count — a neutral chip */ /* its mark */ /* ---- depth ------------------------------------------------------------- **Six washes, and not one new colour.** Every stop is either a token this palette already holds or a `color-mix` of two of them, so the audit that counts hex literals still counts the same eighty and `PUX-9`'s *no second accent* is kept by construction rather than by care. **`U-2` is untouched, and that is a property of the list rather than a promise.** A wash is spent on **chrome** — the ground, the masthead, a mark's disc, a card's top edge, the affordance — and on no state class. Nothing meaning *unknown*, *cautionary* or *danger* takes one, so exactly one hue still carries alarm and a gradient never says a thing is good. **The light is above, on all six.** A page lit from one direction is the only convention a reader does not have to be taught, and two directions in one product is the kind of drift a named token exists to stop. `color-mix` rather than a new literal: the sheet already depends on `:has()` (`style_customer`'s shell-less rule), which is the later feature of the two, so this adds no floor it did not already have. */ --grad-ground: linear-gradient(180deg, color-mix(in srgb, var(--page) 72%, var(--raised)) 0%, var(--raised) 48%, color-mix(in srgb, var(--sunken) 76%, var(--raised)) 100%); --grad-masthead: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--page) 86%, var(--raised)) 100%); /* The affordance, and the one wash a reader presses. */ /* The light stop is 94% accent (UXA-02): at 86% it was #4479ee at the top and the label's pixels read 4.47:1 white-on-it; at 94% the top is #326cec, 4.68:1, so every pixel under a label clears 4.5:1 and the wash keeps its three steps. */ --grad-accent: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, var(--page)) 0%, var(--accent) 54%, var(--accent-deep) 100%); /* The wash a control wears **under the pointer**, so it starts one step in. */ --grad-accent-hi: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-deep) 100%); /* A mark's disc — diagonal, because a 3.5rem tile lit from straight above reads as a gradient and lit from the corner reads as a surface. */ --grad-mark: linear-gradient(145deg, color-mix(in srgb, var(--selection) 40%, var(--page)) 0%, var(--selection) 56%, color-mix(in srgb, var(--selection) 78%, var(--accent)) 100%); /* A card's own top, and deliberately almost nothing: the border still draws the edge, exactly as `--radius`'s note says. */ --grad-sheen: linear-gradient(180deg, color-mix(in srgb, var(--page) 90%, var(--selection)) 0%, var(--page) 44%); } /* **The one rung that is redefined rather than overridden** ([D-1913]). A `40px` editorial line is a composition at a desk and four wrapped lines on a phone. The narrow value is set on the token, not by a second `font-size` in a layout rule, because a rule that sizes text by value is what the role vocabulary exists to stop — and it is set here, where every other visual decision is made. `64rem` is `--bp-wide`, which a media condition cannot read; the literal has to match. */ @media (max-width:64rem) { :root { --t-arrival:1.9rem; } } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; font-weight:var(--w-normal); font:var(--t-lede)/var(--lh-normal) var(--font); /* **The ground is not the surface.** `--page` is what a content surface is painted in; the application behind it is one step down, which is what lets a card read as a card without a shadow doing the work. `PUX-9` already did this for the operator plane (`body[data-plane="operator"]`) and the customer plane kept a white-on-white ground, so a section had nothing to sit on. */ color:var(--ink); background:var(--raised); /* **The wash sits on the ground and never on a content surface** — `--page` stays flat, so nothing a reader reads against has a moving value behind it. */ background-image:var(--grad-ground); background-attachment:fixed; text-underline-offset:var(--edge); } ::selection { background:var(--selection); color:var(--accent-deep); } :focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--radius-sm); } .skip-link { position:absolute; left:var(--s2); top:calc(var(--s2) * -8); background:var(--page); color:var(--accent); padding:var(--s2) var(--s3); border:1px solid var(--rule-strong); border-radius:var(--radius); z-index:10; } .skip-link:focus { top:var(--s2); } /* **Words for the accessible name only** (`63 §1.1` · QUESTION 10). A control whose visible text is one word — *Change* — gets the rest of its name from text inside it, so the visible word stays part of the name (WCAG 2.5.3) and a links list reads *Change email address* rather than *Change, Change*. Clipped, not removed: a screen reader still reads it, which is the whole point. */ .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } a { color:var(--accent); } a:hover { color:var(--accent-hover); } /* ---- shell ------------------------------------------------------------- **Two levels, not one strip.** Identity and operator context on the first line; the spine on the second, where each group is a block with its own label above its destinations. The single horizontal line put group headings and destinations in one typographic run and ran out of room on a laptop. */ /* **The chrome is a surface, not the ground.** The masthead and the ground were the same value, so the bar the reader navigates from dissolved into the page behind it. `PUX-9` had already separated them on the operator plane; this is the same separation for the planes that kept a white-on-white pairing. */ /* **The bar takes the page's white and a wash of the ground beneath it** — the edge is still the border's work, and the gradient is what stops a white bar on a white page from needing one to be seen at all. */ .masthead { border-bottom:1px solid var(--rule); background:var(--page); background-image:var(--grad-masthead); } /* -- PUX-9 · the Platform plane, distinguished at plane level ------------------------ **Plane-scoped values for existing tokens, and not one new value.** `PUX-9` forbids a second accent and any change to the semantic palette; the plan's own answer is that the distinction *needs plane-scoped values for existing tokens, not new ones*. So the workspace's raised tone becomes the console's ground and the masthead takes the page's white — **the figure/ground relationship is inverted rather than recoloured.** A workspace is a white page under a tinted bar. The console is a tinted ground with a white bar and a heavier edge under it: the same two colours, saying *this is not your organisation's workspace* without borrowing a hue that means something else. Keyed on `data-plane`, which the shell now **declares** ([D-1392]). The customer plane is still recovered from `:has()` in `style_customer` and stays that way until it moves to its wrapper: an inference that works is not a defect, and replacing it is that plane's stage. */ body[data-plane="operator"] { background:var(--raised); } body[data-plane="operator"] .masthead { background:var(--page); border-bottom:var(--edge) solid var(--rule-strong); } .masthead-identity { display:flex; align-items:baseline; gap:var(--s2); } /* **The product's name, at its own rung** ([D-1912]). `D-1908` gave the wordmark one treatment across the three shells and left it on `--t-card`, so the masthead said *Evicora* at exactly the size of a card's heading. The drawings set it larger than anything beside it and heavier than any heading — which is what a masthead's first element is for — and it stays **one treatment**: this rule is the only one that sizes it, on every plane. */ .wordmark { font-size:var(--t-wordmark); font-weight:var(--w-heavy); letter-spacing:var(--track-tight); color:var(--ink); text-decoration:none; } .wordmark:hover { color:var(--accent-hover); } /* Which plane the reader is on. **Not a release label** — the product's internal scheduling vocabulary is never shown to an operator. */ .shell-badge { font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--track-wide); font-weight:var(--w-semi); color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius); padding:1px var(--s2); background:var(--page); } /* **Identity is safety information, so it is given presence.** *Which account is this* and *acting as what* decide whether the next click is legitimate — most sharply for an operator acting across every tenant, and not only for them — and a name whispered in the corner makes the reader infer what the shell should assert. Renamed from `.operator-context` ([D-1501]'s placement): it stopped being the operator's the moment every authenticated plane drew one. The two line classes keep their names, because what they say is unchanged. */ .account-context { display:flex; align-items:center; gap:var(--s3); font-size:var(--t-help); line-height:var(--lh-snug); border-left:2px solid var(--accent); padding-left:var(--s3); } /* **The disc is one character: the name's first, else the address's** ([D-1607], ux/80 §4c). With a name set it is the name's first grapheme; with none it stays the first character of the address, a landmark rather than a claim — never initials derived from an email. Same drawing as `.monogram` on a roster row and deliberately so — one treatment for *this is who* wherever it appears. */ .account-monogram { flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--selection); color:var(--accent-deep); /* **The size every masthead draws** (INSTRUCTION 41, S124): all three mastheads carry `headers-v2`, whose rule set the letter at body size, so this rung was never the one a reader saw and one role read as two sizes. */ font-weight:var(--w-semi); font-size:var(--t-body); } .whoami { color:var(--ink); font-weight:var(--w-semi); } /* **The second name, under the first** ([D-1881]). On the platform plane the reader has two: `PA-5`'s reference, which is their name in the product and the string a customer quotes back, and the address, which names them to Evicora. Drawn on one line the reference read as a qualifier on the address; a line each says which is which without a word. Quiet, because the address is the supporting one. */ .whoami-second { color:var(--quiet); font-size:var(--t-help); } /* **The capacity a reader is operating in, as a lozenge** ([D-1912]). It was a quiet line of text because one role had one and it sat under an address. Every authenticated reader has one now, and the question it answers — *in what capacity am I operating* — is not decoration: Evicora's available acts and its authority both vary by role, so a reader who cannot see which one they hold cannot tell whether the act in front of them is one they may perform. **The word is the product's and the colour is this layer's.** The title comes from `model/roles.yaml` through a generated module; the accent is a design token and the model holds none. `--role-*` below is that pair kept apart. **It is a capacity, not a state.** `U-2` — nothing here alarms, and the role tints never reach attention, refusal, completion or a destructive act. */ .acting-as { /* **No `align-self`** ([D-1912]). It carried `flex-start`, which is right in the canonical column and wrong on the plane that lays these out in a row: the lozenge sat 9px above the address it qualifies. It takes the container's own alignment now, so it sits on the line it belongs to whichever way the corner is arranged. */ display:inline-flex; align-items:center; padding:1px var(--s3); border-radius:999px; background:var(--role-ground); color:var(--role-ink); font-size:var(--t-help); font-weight:var(--w-semi); font-variant-numeric:tabular-nums; white-space:nowrap; } /* **The ladder** ([D-1912]) — administration at the top, the role that reads and does not decide at the bottom, and the platform capacity outside the tenant altogether in the neutral ink rather than the organisation's accent. */ .acting-as-admin { --role-ground:color-mix(in srgb, var(--accent) 15%, var(--page)); } .acting-as-recruiter { --role-ground:color-mix(in srgb, var(--accent) 10%, var(--page)); } .acting-as-hiring-manager { --role-ground:color-mix(in srgb, var(--accent) 6%, var(--page)); } .acting-as-interviewer { --role-ground:var(--sunken); --role-ink:var(--ink); } .acting-as-platform { --role-ground:color-mix(in srgb, var(--ink) 9%, var(--page)); --role-ink:var(--ink); } /* **The account corner wraps before it paints outside the page**, and it is stated here rather than above because CSS source order decides a tie ([D-1912]). The lozenge and the outlined button each widened this cluster, and on the console — where the address is the longest string in the product and `D-1905` already measured the row past the viewport — that pushed *Sign out* off the right edge at `360px`. A control a reader cannot reach is worse than one that has moved to the next line, and the identity beside it is `style_shell`'s own *safety information, not a courtesy*. So the row is allowed to wrap and the address to break, which is what stops the width being the sum of three things that each refuse to. */ @media (max-width: 30rem) { /* **A cap, because wrapping is not enough on its own** ([D-1912]). A column flex takes the width of its widest child and nothing above was constraining it, so `white-space:normal` had nothing to wrap *against* and the longest capacity — `Platform Administrator` — carried the whole block past the viewport. */ .account-context { flex-wrap:wrap; justify-content:flex-end; row-gap:var(--s2); max-width:100%; } .whoami, .whoami-second { overflow-wrap:anywhere; } .acting-as { white-space:normal; } } /* **The account's own destinations and the act that ends the session.** A row, because there are at most three of them and they are the reader's own — the spine's two-level grouping exists for ten items of unequal weight and would be scaffolding here. **`Sign out` is not drawn as a primary act.** It is `.action`'s quiet relative: the button a person looks for deliberately and never presses by accident, beside links they follow often. Giving it the accent would make leaving the most prominent thing in the chrome. */ .account-context .account-nav ul { display:flex; gap:var(--s3); flex-wrap:wrap; list-style:none; margin:0; padding:0; } /* **Each destination wears its mark** ([D-1912]). `topmenu.png` draws them beside the address at the same level, a shield on `Security` and a bell on `Notices` — the icon vocabulary has no bell and `MEGAPHONE` is its mark for something announced. The mark is what makes an account destination findable at a glance in a bar otherwise made of words; `U-2` — it repeats the label rather than adding a claim to it. */ .account-context .account-nav a { color:var(--quiet); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:var(--s2); } .account-context .account-nav a .icon { width:1rem; height:1rem; flex:0 0 auto; } .account-context .account-nav a:hover { color:var(--ink); } .account-context .account-nav a[aria-current="page"] { color:var(--accent-deep); font-weight:var(--w-semi); } /* **The act is a row in the identity menu** (`63 §6`): the hairline above it separates it, so the form draws no rule of its own — the old left border read as a stray divider. */ .sign-out { margin:0; } /* **Drawn as More's row, and ordinary** (`63 §6`): icon and ink label, not an accent button and not danger — signing out is always available and never the page's business (`U-2`). Still [D-1501]'s POST form; only the `