/* DIRECTION F — KORDIN NEO, warm neutrals and a substrate red Built from a five-colour brand palette. Those five are the only values here that were GIVEN; every other token below is derived, and the derivation is argued rather than eyeballed. (The palette page's underlying text layer also carries a sixth entry, "Substrate Mesh" #FF073B, stacked in the exact same text position as Pulse. It was an earlier iteration of swatch 03, replaced in the artwork by Pulse, and is not visible or shipped anywhere in the deck. It is not treated as given below — see the note on --s8-color-danger.) NULL #000000 pure black Substrate #131212 near-black, softer hue 0 sat 3% light 7% Plane #D5D3D2 neutral light gray hue 20 sat 3% light 83% Shell #EDE9E8 very soft gray hue 12 sat 12% light 92% Pulse #F25136 vibrant orange-red hue 9 sat 88% light 58% THE NEUTRALS ARE WARM AND THAT IS THE SIGNATURE. Every given grey has R > G >= B — #131212 is 19,18,18 and #D5D3D2 is 213,211,210. So every grey derived below keeps that bias. A cool grey ramp under a warm red is the single easiest way to lose this brand, and it is invisible in a swatch sheet: it only shows once six greys sit next to each other on a dense screen. THE LABEL ON THE PRIMARY BUTTON IS WHITE, AND THE FIRST CUT OF THIS FILE GOT THAT WRONG. Measured on Pulse, by the two models that disagree about it: WCAG 2 APCA Lc #000000 on Pulse 6.01 42.7 #FFFFFF on Pulse 3.50 66.8 WCAG 2 is a plain luminance ratio, and on this colour it is wrong in a known way: it over-rewards dark text on a saturated, mid-lightness ground, where perceived contrast is far lower than the arithmetic claims. APCA models polarity and chroma, and it says the opposite — white at Lc 66.8 against black at 42.7, where 60 is the floor for body text. Rendered at 3x and looked at, white is plainly the crisper of the two; the black label reads as a hole punched in the button rather than as type. The earlier version of this file argued black at length, called it "the most consequential derived value" here, and made a virtue of it going the opposite way to the other five directions. That was not a finding. It was one number from the wrong model. ONE RESIDUAL, NAMED. The label is 13px at weight 500, and small text wants Lc 75 rather than 60. White on Pulse is 66.8, short of it. Deepening the fill to #D93A20 — hue 8 against Pulse's 9, the same red nine points darker — takes white to Lc 75.9 and to WCAG 4.59, clearing AA as well. That is one line and it is deliberately NOT taken here: Pulse is a GIVEN brand value, and darkening it is a brand decision rather than a CSS one. WAYFINDING IS A LIGHTER PULSE, because Pulse itself is not quite a text colour: #F25136 as text on #131212 5.35:1 #FF6F57 as text on #131212 6.82:1 Links, focus rings and thin markers are set in #FF6F57. The fill stays #F25136, so the two never collide — one is only ever a background, the other only ever a stroke or a glyph. HOVER GOES LIGHTER ON DARK AND DARKER ON LIGHT. On a near-black field a darker hover vanishes; on a near-white one a lighter hover vanishes. `kordin-v2`'s header argues the first half of this and then keeps one value for both themes; this file does what that argument implies. ── DANGER IS INVENTED, NOT GIVEN ──────────────────────────────────────────────────────────── The brand has exactly one red — Pulse, hue 9. There is no second, alarm-coloured red in the five given values, so danger below is invented the same way success and warning are, and is pushed to a full-saturation crimson at hue 347 specifically so it reads as a different colour from the orange-red accent rather than a variant of it. The two stay distinguishable in use for the same reason they would even if danger were on-brand: danger is only ever a border, a badge or a line of text, never a fill; the accent is only ever a fill, never a border. ───────────────────────────────────────────────────────────────────────────────────────────── SUCCESS AND WARNING ARE NOT IN THE BRAND EITHER. There is no green and no amber in the five, so both are invented, and they are pushed as far from the accent as the semantics allow: success at hue 151 and warning at hue 42 against the accent's hue 9. Warning is deliberately YELLOW rather than amber — an amber warning beside an orange-red accent is two versions of one colour. TYPE IS THE HOUSE FACE, unchanged from `kordin` and `kordin-v2`. A direction is a palette and a set of geometry knobs; inventing a second typeface for one would need a second webfont, and this set self-hosts exactly one. What this direction does change is geometry: EVERY corner is square, including the chip, the badge and the avatar, which no other direction does. Against warm greys and a neon red that reads as instrument panel rather than as product marketing. */ :root { /* 12 D4 — elevation on dark is a rim: nothing is darker than black, so a drop shadow draws nothing on the canvas. Light keeps the drop shadow, below. */ --s8-shadow-overlay: inset 0 1px 0 rgb(237 233 232 / 8%); /* Three faces, three jobs. BDO Grotesk makes the brand statements, Host Grotesk carries everything you read, and Delight is an accent for large numerals and nothing else. Roboto Condensed sits behind both as the fallback rather than being dropped: none of the three carries the sidebar's geometric glyphs or the arrows, so those fall through per glyph, and what they fall through to should be the set's own face rather than whatever the machine happens to have. The mono stack is untouched — this set puts urls, commit hashes and log lines in mono, where a proportional face costs the column alignment they are read by. */ --s8-font-display: 'BDO Grotesk', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; --s8-font-body: 'Host Grotesk', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; --s8-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; /* Delight, for large section numbers and never for words. `.cvtile__n` is the only component in the set at 34px carrying a numeral, which makes it the one true match for the role the brand gives this face. Every other direction resolves the fallback and renders as it did before. */ --dir-font-numeral: 'Delight', 'BDO Grotesk', 'Roboto Condensed', system-ui, sans-serif; --s8-radius-sm: 0; --s8-radius-md: 0; --s8-radius-lg: 0; /* Given: Substrate is the page, NULL is what sits under it. Raised, overlay and the three borders are derived up and down that axis, each keeping R > G >= B. */ --s8-color-surface: #131212; /* Substrate */ --s8-color-surface-sunken: #000000; /* NULL */ --s8-color-surface-raised: #1d1b1b; --s8-color-overlay: #090808; --s8-color-border: #2b2827; --s8-color-border-strong: #474342; --s8-color-control-border: #1c1a1a; --s8-color-text: #ede9e8; /* Shell — 15.51:1 on the page, 14.22:1 on a card */ --s8-color-text-muted: #938d8c; /* 5.73:1 — a column header is not a value */ --s8-color-text-inverted: #000000; /* NULL, for text on a light fill */ --s8-color-accent: #f25136; /* Pulse, fill only */ --s8-color-accent-hover: #ff6f57; /* lighter, not darker — see the header */ --s8-color-accent-contrast: #ffffff; /* APCA Lc 66.8, against black's 42.7 — see the header */ --s8-color-wayfind: #ff6f57; /* 6.82:1 as text, against Pulse's own 5.35 */ --s8-color-focus-ring: #ff6f57; --s8-color-danger: #ff073b; /* invented, not a brand colour — 4.76:1 as text, and never a fill */ --s8-color-success: #3dd68c; /* derived, hue 151 — 9.97:1 */ --s8-color-warning: #f0b429; /* derived, hue 42 — yellow, not amber. 10.03:1 */ --dir-border-w: 1px; /* The rail is NULL against a Substrate page. The brand ships two blacks; using both is what makes the shell read as two planes rather than as one flat field with a line on it. */ --dir-sidebar-bg: #000000; /* The top bar rides the same plane as the rail and the logo cell beside it, so the chrome is ONE surface and the content is what lifts off it. Written as a reference rather than a repeated value: the light block overrides `--dir-sidebar-bg` and the top bar follows it without a second declaration that could drift. */ --dir-topnav-bg: var(--dir-sidebar-bg); --dir-nav-active-bg: #1d1b1b; --dir-nav-bar-w: 2px; --dir-nav-radius: 0; --dir-label-tracking: 0.18em; /* A sparkline is the only place a chart colour appears, and Pulse at the 0.1 default reads as brown on this ground rather than as the accent. */ --dir-spark-fill: 0.18; /* Square everything. The other five directions leave the chip and the avatar rounded; this one does not, and that — with the warm greys — is what you see before you read a word. */ --dir-mark-radius: 0; --dir-badge-radius: 0; --dir-chip-radius: 0; --dir-avatar-radius: 0; --dir-corner-opacity: 0.35; /* Medium. The brand sets every large statement in BDO Grotesk Medium, and 500 is a DRAWN instance of its weight axis rather than something synthesised — which is the whole reason the display face is the one with a range. */ --dir-display-weight: var(--s8-weight-medium); --dir-display-transform: uppercase; --dir-display-tracking: -0.005em; } :root[data-theme='light'] { --s8-shadow-overlay: 0 10px 30px rgb(0 0 0 / 45%); /* 12 D4 */ /* THE PANE IS WHITE. Every other direction in this set puts `surface` at #ffffff with a barely tinted ground behind it, and the first cut of this file did the opposite — a #d5d3d2 ground at 83% lightness under a #ede9e8 pane, which is nine points darker than anything else here and reads as a dimmed screen rather than as a light theme. The greys were right; their ROLES were wrong. So the two given light greys do the jobs they are shaped for. Shell is the ground the shell sits on — warm, soft, and the thing that keeps this from being another white dashboard. Plane is the strong divider, which is what a 83%-lightness grey is good at and what it was never going to be good at as a background. The card is a warm tint between the ground and the pane, so elevation reads without a shadow. The warmth is the whole signature and it survives: every value below keeps R > G >= B. */ --s8-color-surface: #ffffff; --s8-color-surface-sunken: #ede9e8; /* Shell */ --s8-color-surface-raised: #f7f5f4; --s8-color-overlay: #ffffff; --s8-color-border: #e2dedd; --s8-color-border-strong: #d5d3d2; /* Plane */ --s8-color-control-border: #e2dedd; --s8-color-text: #131212; /* Substrate — 17.21:1 on a card, 18.7:1 on the pane */ --s8-color-text-muted: #5f5958; /* 6.32:1 on a card */ --s8-color-text-inverted: #ede9e8; /* The fill and its label do NOT change with the theme. A primary action that is a different colour in light and dark is two buttons, and the 6.01:1 that justifies the black label is a fact about Pulse rather than about the page behind it. */ --s8-color-accent: #f25136; --s8-color-accent-hover: #d93a20; /* darker here, because lighter vanishes on white */ --s8-color-accent-contrast: #ffffff; --s8-color-wayfind: #b82e15; /* 5.06:1 on the page. Pulse itself is 2.90 and unusable as text */ --s8-color-focus-ring: #b82e15; --s8-color-danger: #c70027; /* invented, not a brand colour — a crimson far enough from Pulse's hue not to read as the same red; 5.04:1 on this page */ --s8-color-success: #0a7a3f; /* 4.50:1 */ --s8-color-warning: #8a5e00; /* 4.73:1 */ --dir-sidebar-bg: #ede9e8; --dir-nav-active-bg: #ffffff; } /* ── THE DRAWN BRAND ────────────────────────────────────────────────────────────────────────── This is the only direction here that carries RULES and not only tokens, and that is worth justifying rather than leaving as an inconsistency. The other five draw their brand out of tokens the shared layer already reads: an accent square and a name set in the display face. This one has artwork, and artwork is not a token — the mark is a raster file carrying its own colour, and the lockup is a shape that has to be masked rather than filled. Four knobs in base.css that exactly one direction would ever set is the worse trade. THE WORDS STAY IN THE MARKUP. `verify.mjs` reads `class="lone__name">…<` out of the SOURCE and requires it to say the product's full name; a screen reader needs the same string. So the lockup is painted OVER text that is still there, never in place of it. */ :root .brandbar__mark, :root .lone__mark { /* The file is an opaque rounded square in the brand's own orange — #ff5539, which is a shade brighter than Pulse's #f25136. That difference is in the asset, not in this file, and painting the accent behind it would show as a rim where the corners round off. */ background-color: transparent; background-image: url('logo/kordin_icon_resolved_color.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* A PLATE, ON DARK ONLY, because the asset is built for a light ground. Sampled from the file: 60% of its interior is PARTIAL alpha rather than white — the glyph's counters are cut through to whatever sits behind, which is how a "resolved colour" mark is normally drawn. On the light theme that resolves to the page and the mark is crisp; on the near-black shell it resolves to the shell and the glyph goes muddy grey, which reads as a low-quality asset rather than as a deliberate knock-out. `border-radius: 11%` is measured off the file: its first opaque row starts 65px into a 594px side, which is the corner arc. Without it the plate would square off the corners the artwork rounds. `:not([data-theme='light'])` rather than `[data-theme='dark']`, because no attribute at all means dark in this set and a bare `dark` selector would miss the default. */ :root:not([data-theme='light']) .brandbar__mark, :root:not([data-theme='light']) .lone__mark { background-color: var(--s8-color-text); border-radius: 11%; } /* The sign-in family is the one place in the set with room for the full lockup. The mark beside it is hidden, because the lockup already contains the glyph and drawing both draws it twice. `font-size: 0` collapses the words rather than tinting them away, so nothing escapes the box the artwork is measured into: 2566x597 is 4.298:1, hence 125x29. PLACED, NOT MASKED, AND THAT IS FORCED. A mask would be the better technique — it would take `--s8-color-text` and be right in both themes without a second rule, and `base.css` already masks the canvas source glyphs that way. It cannot be used here: `mask-image` is fetched under CORS rules, `file://` is an opaque origin, and this set opens from disk with no server by design. Chrome answers the request with `net::ERR_FAILED` and renders the element as nothing at all — no console error, no failed gate, just a blank space where the brand should be. Found by looking at the screen. `background-image` is not fetched under those rules and loads fine, which is why the mark above uses it too. So the file's own white is correct on the dark ground, and light gets `brightness(0)` — which maps every channel to zero regardless of hue and lands the artwork on NULL, the brand's own black, rather than on the cyan-tinted near-black a plain `invert(1)` would produce. */ :root .lone__brand .lone__mark { display: none; } :root .lone__name { display: block; width: 125px; height: 29px; font-size: 0; background-image: url('logo/kordin_wordmark_lockup_white.png'); background-size: contain; background-repeat: no-repeat; background-position: left center; } :root[data-theme='light'] .lone__name { filter: brightness(0); }