/* ============================================================================ Conxfolio — design tokens (V4, first draft of the shared token layer) ---------------------------------------------------------------------------- THIS FILE IS THE ONLY PLACE IN web/folio-v4 THAT MAY CONTAIN A COLOUR VALUE. Everything else in the tree references these variables. The gate (_qa/folio-v4-gate.mjs, check 1) fails the build if a hex literal or an rgb()/rgba() call appears anywhere else in the css / html / js of this tree. Skin: THE PAPER FLIGHT (brand LOCKED 2026-09-01 — vault Conxto/"Conxfolio Brand — The Paper Flight 2026-09-01.md"; canonical artifact conxto-design-preview/conxfolio-landing-paperflight.html). The Ink & Paper token GRAPH is kept intact — every name, every relationship, every lightness ORDER — and only the values are re-pointed onto the brand palette, so no layout loses the depth reading it was built for. surfaces (papercraft — depth is a real sheet shadow + a paper step) sheet #fffefa real documents, cards, tickets paper #faf8f2 the page ground paper-2 #f3efe4 bands, wells, mini stages step #ece8db the deepest paper step (still paper) ink #191713 the only saturated dark (deep #0d0c09) body #4b463c body copy faint #8d8779 DECORATIVE meta only hairline #ddd6c6 ONE accent #c8380f RED INK: stamps, verbs, trails, underlines, section marks, handwriting. deep #a52d0b. Green exists ONLY as the 5px live dot #43d17c. BANNED blue · gold · purple · tinted-panel systems · dark chrome fields type Instrument Serif 400 roman+italic (display) · Hanken Grotesk 300/400/600/700 (body/UI) · Caveat (handwriting) · ui-monospace for tiny tracked labels only. MATERIALS tape, clips, stickers (2px hard shadow), rubber stamps, tilts (±0.6–1.2°) straightening on hover, real sheet shadows. NOT re-themed, deliberately: the per-résumé-TEMPLATE and per-portfolio-WORLD document renders, and the visitor-chosen --cx-letter-* palette. Those are the artefacts the visitor produces — their own design systems, not our chrome. ========================================================================== */ /* ---------------------------------------------------------------- typefaces The four local faces below are KEPT because the résumé / cover-letter document renders declare them by name and those documents are not re-themed. The Paper Flight chrome faces (Instrument Serif, Hanken Grotesk, Caveat) are loaded from Google Fonts in index.html and fall back to Georgia / system sans / a system script, so the application is fully readable if that request never lands. The local Instrument Serif @font-face below is kept as the offline fallback for exactly the same family name. */ @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-400-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-var.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-var.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } :root { /* ======================================================= GROUND (paper) == The document is the product. Five neutral steps, warm-grey, never blue. */ --cx-paper: #fffefa; /* the SHEET itself — Paper Flight sheet */ --cx-porcelain: #faf8f2; /* page ground behind sheets — brand paper */ --cx-mist: #f3efe4; /* recessed wells, filled bars — paper-2 */ --cx-line: #ddd6c6; /* the hairline. one weight, everywhere. */ --cx-line-strong: #cec5b0; /* hairline under pressure */ --cx-line-abs: #ddd6c6; /* absolute pins — see --cx-ink60-abs */ --cx-line-strong-abs: #cec5b0; /* ---- the Conservatory ladder, named outright ---------------------------- The five surfaces the canon names. The remapped --cx-* tokens above already ARE these values; these aliases exist so a Conservatory surface can ask for the level it wants by the canon's own word rather than by inference. */ --cx-cons-paper: #fffefa; /* the sheet — real documents */ --cx-cons-parchment: #faf8f2; /* the page ground — brand paper */ --cx-cons-bone: #f3efe4; /* paper-2 — bands, wells */ --cx-cons-tan: #ece8db; /* the deepest paper step (still paper) */ --cx-cons-field: #f3efe4; /* paper-2 band — NO tinted panel system */ --cx-cons-field-soft: #ddd6c6; /* strokes / quiet marks on the band */ --cx-cons-hair: #ddd6c6; --cx-cons-char: #4b463c; /* body copy — brand body ink */ /* the canon's small uppercase meta label is #8b8577, which measures 3.58:1 on paper — under the 4.5 bar this product holds for small text. Darkened to #625d51: 6.28:1 on paper, 5.62:1 on parchment, 5.13:1 on bone. Documented deviation from the canon, not an accident. */ --cx-cons-quiet: #635e51; /* secondary copy ON the porcelain field. The field is light now, so this is the ordinary body ink, not a lifted parchment: #4a463d on #e3e0d8 = 7.16:1 */ --cx-cons-field-ink60: #4b463c; /* the ONE accent. vermilion red-ink. */ --cx-cons-vermilion: #c8380f; /* THE RED INK — the only accent */ --cx-cons-vermilion-deep: #a52d0b; /* the brand's faint — DECORATIVE meta only (3.4:1 on paper): rules, dots, tiny tracked labels that repeat a visible word. Never body text. */ --cx-cons-faint: #8d8779; /* the live dot. The ONE green in the system, and only ever a 5px dot. */ --cx-cons-live: #43d17c; /* ============================================================== INK ==== */ --cx-ink: #191713; /* body + display text, primary buttons */ /* Dark bands re-point --cx-ink / --cx-paper for their own subtree (see the dark-band block in styles.css). These two are the SAME values pinned so a rule inside a band can still name true ink and true paper — a button on a dark band needs both, and asking for the re-pointed names gets you one colour twice. Never re-declare these anywhere else. */ --cx-ink-abs: #191713; --cx-paper-abs: #fffefa; --cx-ink60: #4b463c; /* the brand body ink */ --cx-ink30: #b4ad9d; /* DECORATIVE ONLY (rules, dots). never text. */ /* Absolute pins, same values, never re-pointed. A section that USED to be a dark band and is now printed on paper has to put the light-on-dark ramp back to the paper ramp in one place; without these it would have to write the hex again, outside tokens.css, which is exactly what is banned. (V4-c needed this for the poster stat band — see gallery.css §2.) */ --cx-ink60-abs: #4b463c; --cx-ink30-abs: #b4ad9d; /* =================================================== DARK PANEL BANDS == Used only where v3 had a navy band: inverse sections, browser chrome. */ /* NOT the field any more (2026-08-28). The field went porcelain; these legacy dark-band tokens stay dark on purpose, because --cx-panel-a04…a65 below derive their alphas from this value and drive the dialog backdrops and the scrim — repointing it would turn every modal scrim into a light wash. Measured across all 12 surfaces, the only place a --cx-panel band still PAINTS is `.letter-paper.letter-band .letter-paper-head`, which is a cover-letter TEMPLATE's own document design, exempt from re-theming by the rule at the top of this file. */ --cx-panel: #191713; /* legacy dark band / backdrop alpha base */ --cx-pline: #3a352c; --cx-panel-ink: #faf8f2; /* paper on ink — 15.5:1 */ --cx-panel-ink60: #cbc4b2; /* secondary on ink — 9.4:1 */ --cx-panel-well: #33302a; /* placeholder bars inside the field */ --cx-panel-dot: #3a352c; /* the three chrome dots */ /* R2 (§31): the four states, on a dark band. The paper-ramp state inks are dark by construction — --cx-ok-fg #1F5C3D measures 2.33:1 on --cx-panel — so a band that re-points ink must re-point the states too, or its status words go out with it. Same four values the ink theme already proves: ok 10.24:1 · warn 10.62:1 · ask 10.38:1 · stop 8.61:1 on #12141B. */ /* R2 (§35): the secondary step for DISPLAY type on a panel. --cx-panel-ink60 is blue-grey (chroma 24) and V4-c's law is that headings, italic payoff words and plate marks carry no hue at all — gate check 10b enforces a chroma bar of 20 and caught it. This is the same job in the neutral warm ramp: chroma 5, and 7.70:1 on --cx-panel / 8.19:1 on the ink theme's. */ --cx-panel-ink60-neutral: #cbc4b2; /* CONSERVATORY: one accent means the four states cannot be four hues. On the field they are the parchment ramp, and only STOP carries the red ink — a lifted vermilion so it still measures on the dark ground. ok/warn/ask #f4efe3 = 13.48:1 · stop #e08e6e = 6.09:1 on #27241e */ --cx-panel-ok: #faf8f2; --cx-panel-ok-bg: #2b2822; --cx-panel-ok-line: #4b463c; --cx-panel-warn: #e6dfcd; --cx-panel-warn-bg: #2b2822; --cx-panel-warn-line: #4b463c; --cx-panel-ask: #e6dfcd; --cx-panel-ask-bg: #2b2822; --cx-panel-ask-line: #4b463c; --cx-panel-stop: #ec9270; --cx-panel-stop-bg: #32211a; --cx-panel-stop-line: #5c3826; /* ================================================== ACCENT — ONE KNOB == V4-c "GALLERY" retires the coloured accent entirely. The accent IS ink. A gallery does not colour its labels; it hangs the work on a white wall and lets scale, motion and paper carry the energy. Links, the one italic display word per page and the focus rings are all ink — the difference is made by weight, italic and the hairline, never by hue. The knob still exists, so a future brief can reintroduce a hue in ONE line. */ /* CONSERVATORY keeps the accent as INK. In the canon the buttons, the fills and the primary marks are ink; the vermilion is a THREAD, never a fill — it lives on --cx-pre-accent (affordance) and --cx-cons-vermilion. */ --cx-accent: #191713; /* ink. no hue. */ --cx-accent-strong: color-mix(in srgb, var(--cx-accent) 80%, var(--cx-ink)); --cx-accent-soft: color-mix(in srgb, var(--cx-accent) 7%, var(--cx-paper)); --cx-accent-line: color-mix(in srgb, var(--cx-accent) 22%, var(--cx-paper)); --cx-accent-ring: color-mix(in srgb, var(--cx-accent) 38%, transparent); /* ====================================================== SEMANTIC STATES == Four states, each {fg, bg, line}. Every fg measures >= 4.5:1 on its own bg AND on paper / porcelain / mist (gate check 3). ok settled / passing warn drifting / watch ask needs a decision stop blocked / failing */ /* CONSERVATORY — a DELIBERATE, REVERSIBLE ruling, stated plainly. The canon allows exactly one accent and forbids green and gold, so four hues for four states is not available. The states therefore carry their meaning the way the canon carries everything else: in the WORD, the MARK and the TINT LADDER — ok on parchment, warn on bone, ask on tan — with the red ink reserved for STOP, the one state that must interrupt. Measured on each state's own bg and on paper / porcelain / mist: ink #161511 on parchment 15.92 · bone 14.54 · tan 12.17 · paper 17.80 stop #9c2f12 on its wash 6.26 · paper 7.23 Restoring four hues is four lines, here, and nothing else changes. */ --cx-ok-fg: #191713; --cx-ok-bg: #faf8f2; --cx-ok-line: #ddd6c6; --cx-warn-fg: #191713; --cx-warn-bg: #f3efe4; --cx-warn-line: #ddd6c6; --cx-ask-fg: #191713; --cx-ask-bg: #ece8db; --cx-ask-line: #cec5b0; --cx-stop-fg: #a52d0b; --cx-stop-bg: #fbeee9; --cx-stop-line: #eed6cb; /* ============================================ R3 · THE LETTER'S ACCENT == §54 bug 13. WAS: the cover-letter layouts borrowed the SEMANTIC inks for their decoration — Editorial's dateline and kicker were painted in --cx-stop-fg (the "blocked / failing" red), Signature's sign-off and Column's rule in --cx-ask-fg (the "needs a decision" amber). A document's visual voice was therefore hardcoded to two error states, the same on every template, and the visitor could not change or remove it. NOW: one variable, --letter-accent, set per template from the design registry and overridable by the visitor from the palette below. "None" resolves to ink, which is a genuinely monochrome letter — not a lighter hue. Every colour lives here; app.js and r3.css only ever name a token. Each measures on paper (#FFFFFF): ink 18.99 · sea 11.15 · moss 9.83 · clay 8.43 · plum 12.05 — all far above 4.5:1, and gate check 62 measures them rendered rather than trusting this comment. */ --cx-letter-ink: #191713; /* "None" — a monochrome letter */ --cx-letter-sea: #1F3D5C; --cx-letter-moss: #2C4A32; --cx-letter-clay: #7A3B2E; --cx-letter-plum: #4A2C4F; /* the resting value: a letter with no template opinion and no visitor choice is ink. Nothing in the tree may paint a letter from a literal. */ --letter-accent: var(--cx-letter-ink); /* FOUR STOCKS, ONE TONE EACH (2026-08-22, founder: the products section read dull and its motion hung). Each product carries a single hue on its icon tile, kicker, rule and CTA — the same four hues the letter designs already own, so the palette does not grow. Every tone measures >= 7:1 on paper (sea 10.9, moss 9.6, clay 7.3, plum 10.2). */ /* CONSERVATORY: the four products are told apart by the SURFACE they sit on (parchment → bone → tan → field), exactly as the canon's four tool cards do it — never by four hues. All four tones are therefore ink. */ --cx-tone-resume: #191713; --cx-tone-ats: #191713; --cx-tone-letter: #191713; --cx-tone-portfolio: #191713; /* ==================================================== TYPE — three roles */ --cx-font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --cx-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --cx-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* Instrument Serif is a high-contrast display face with a large x-height and one weight (400, roman + italic). Two knobs so the display ramp stays the brand's proportion without every heading rule being rewritten. */ --cx-font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive; --cx-display-weight: 400; --cx-display-track: -.01em; /* one scale — display (serif) */ --cx-t-d1: clamp(44px, 5.2vw, 74px); --cx-t-d2: clamp(36px, 4.2vw, 56px); --cx-t-d3: clamp(28px, 3vw, 40px); --cx-t-d4: 24px; --cx-t-d5: 21px; /* body (ui) */ --cx-t-lead: clamp(16px, 1.3vw, 19px); --cx-t-body: 15px; --cx-t-sm: 13.5px; --cx-t-xs: 12.5px; /* data (mono, always uppercase + tracked) */ --cx-t-label: 11px; --cx-t-micro: 9.5px; --cx-track-label: .18em; --cx-track-micro: .24em; /* ====================================================== SPACE — 4pt grid */ --cx-s1: 4px; --cx-s2: 8px; --cx-s3: 12px; --cx-s4: 16px; --cx-s5: 20px; --cx-s6: 24px; --cx-s8: 32px; --cx-s10: 40px; --cx-s12: 48px; --cx-s16: 64px; --cx-s20: 80px; --cx-s24: 96px; /* ================================================================ RADII */ --cx-r-sm: 10px; /* controls, chips */ --cx-r-md: 14px; /* cards, wells — the canon's one card radius */ --cx-r-lg: 14px; /* full-bleed panels */ --cx-r-pill: 999px; --cx-r-sheet: 4px; /* a real sheet — the brand's one sheet corner */ /* ============================================ SHADOWS — REAL SHEET SHADOWS THE PAPER FLIGHT replaces the Conservatory flat law: paper casts a shadow, and that whisper double-layer is the ONLY shadow the brand allows (plus the sticker's hard 2px offset). conservatory.css still kills every literal shadow inherited from the older skins and puts these back deliberately, so the shadows on screen are the ones the brand put there. */ --cx-shadow-ink-soft: rgba(25, 23, 19, .07); --cx-shadow-ink-deep: rgba(25, 23, 19, .14); --cx-shadow-raise: 0 1px 2px rgba(25, 23, 19, .07), 0 14px 36px rgba(25, 23, 19, .10); --cx-shadow-lift: 0 3px 6px rgba(25, 23, 19, .08), 0 26px 60px rgba(25, 23, 19, .14); --cx-shadow-hard: 2px 2px 0 #191713; --cx-shadow-hard-red: 2px 2px 0 #c8380f; /* ============================================================== MOTION */ --cx-dur-fast: 140ms; /* state flips: hover, press, chip on/off */ --cx-dur-base: 320ms; /* element entrances, card promotion */ --cx-dur-slow: 900ms; /* the performance: typing, gauges, page flips */ --cx-ease: cubic-bezier(.22, 1, .36, 1); /* canon — settles */ --cx-ease-inout: cubic-bezier(.2, .8, .2, 1); /* travel between states */ /* ============================================================= CHROME */ --cx-topbar-h: 68px; --cx-measure: 68ch; } /* Reduced motion is a token-level promise, not a per-component afterthought. */ @media (prefers-reduced-motion: reduce) { :root { --cx-dur-fast: 1ms; --cx-dur-base: 1ms; --cx-dur-slow: 1ms; } } /* ============================================================================ V4-c "GALLERY" — the signature layer. ADDITIVE ONLY. ---------------------------------------------------------------------------- Every token below is namespaced --cx-sig-* (or --cx-tint-*, which is built from them). Delete this block and the V4 base is still a complete, valid skin — that is the point: the signature is a layer, not a fork. The idea: four products, four PAPERS. A gallery does not tint its walls; it changes the stock the work is printed on. Résumé keeps true paper. ATS drops to mist because a parser sees a flatter world. The letter is cream, because letters are written on cream. The portfolio is slate, because it is the one surface meant to be looked at rather than read. Measured, not asserted (gate check 9 re-measures all of these): ink #111110 on cream #F7F3EA = 17.06:1 on slate #E9EAEE = 15.72:1 ink60 #5B5B56 on cream #F7F3EA = 6.17:1 on slate #E9EAEE = 5.68:1 ok #1F5C3D on cream = 7.14:1 on slate = 6.58:1 warn #7E6114 on cream = 5.26:1 on slate = 4.84:1 ask #8A5200 on cream = 5.77:1 on slate = 5.31:1 stop #8B2E2E on cream = 7.50:1 on slate = 6.91:1 The tightest pair in the whole variant is warn-on-slate at 4.84 — still clear of 4.5, and the reason slate is #E9EAEE and not a step darker. ========================================================================== */ :root { /* ------------------------------------------------------- the two papers */ --cx-sig-cream: #faf8f2; /* letter stock — brand paper */ --cx-sig-slate: #f3efe4; /* portfolio stock — paper-2 (never cool) */ /* ------------------------------------- product -> paper. one map, here. */ --cx-tint-resume: var(--cx-paper); --cx-tint-ats: var(--cx-mist); --cx-tint-letter: var(--cx-sig-cream); --cx-tint-portfolio: var(--cx-sig-slate); /* the ground a page falls back to when it is not a product page */ --cx-page-tint: var(--cx-porcelain); /* ---------------------------------------------------------- materiality Grain is 2.5% ink at most — it must read as stock, never as texture. Backdrop art is 6% ink at most — it must read as watermark, never as decoration competing with the words. Both numbers are gate-checked. */ --cx-sig-grain: color-mix(in srgb, var(--cx-ink) 2.5%, transparent); --cx-sig-grain-lift: color-mix(in srgb, var(--cx-ink) 1.5%, transparent); --cx-sig-art-ink: color-mix(in srgb, var(--cx-ink) 6%, transparent); --cx-sig-art-faint: color-mix(in srgb, var(--cx-ink) 4%, transparent); /* ------------------------------------------------------------ the rail A gallery hangs its work from one line at a constant height. */ --cx-sig-rail: var(--cx-line); --cx-sig-rail-strong: var(--cx-line-strong); --cx-sig-plaque-fg: var(--cx-ink60); /* --------------------------------------------------------------- poster The one type-as-art moment per page. 96px is the floor at 1440. */ --cx-sig-poster: clamp(72px, 8.4vw, 132px); --cx-sig-poster-min: 96px; /* --------------------------------------------------------------- motion Four motions with meaning. Each has a duration the gate can hold us to. type the résumé sheet writes itself, row by row ink the rule inks across under the H1 count the gauge counts up to the number it earned print the receipt prints, line by line, in mono */ --cx-sig-dur-type: 1200ms; --cx-sig-dur-ink: 900ms; --cx-sig-dur-count: 900ms; --cx-sig-dur-print: 640ms; --cx-sig-ease-ink: cubic-bezier(.62, .02, .34, 1); /* a drawn stroke */ --cx-sig-ease-print: steps(1, end); /* a struck line */ } @media (prefers-reduced-motion: reduce) { :root { --cx-sig-dur-type: 1ms; --cx-sig-dur-ink: 1ms; --cx-sig-dur-count: 1ms; --cx-sig-dur-print: 1ms; } } /* ---------------------------------------------------------- alpha steps Generated for the surfaces that need a translucent ink/panel/accent: shadows, scrims, hover washes. Derived from the base tokens with color-mix so the ONE accent knob still moves everything. */ :root { --cx-accent-a02: color-mix(in srgb, var(--cx-accent) 2%, transparent); --cx-accent-a04: color-mix(in srgb, var(--cx-accent) 4%, transparent); --cx-accent-a06: color-mix(in srgb, var(--cx-accent) 6%, transparent); --cx-accent-a08: color-mix(in srgb, var(--cx-accent) 8%, transparent); --cx-accent-a10: color-mix(in srgb, var(--cx-accent) 10%, transparent); --cx-accent-a12: color-mix(in srgb, var(--cx-accent) 12%, transparent); --cx-accent-a14: color-mix(in srgb, var(--cx-accent) 14%, transparent); --cx-accent-a16: color-mix(in srgb, var(--cx-accent) 16%, transparent); --cx-accent-a20: color-mix(in srgb, var(--cx-accent) 20%, transparent); --cx-accent-a24: color-mix(in srgb, var(--cx-accent) 24%, transparent); --cx-accent-a30: color-mix(in srgb, var(--cx-accent) 30%, transparent); --cx-accent-a38: color-mix(in srgb, var(--cx-accent) 38%, transparent); --cx-accent-a46: color-mix(in srgb, var(--cx-accent) 46%, transparent); --cx-accent-a55: color-mix(in srgb, var(--cx-accent) 55%, transparent); --cx-accent-a65: color-mix(in srgb, var(--cx-accent) 65%, transparent); --cx-accent-a75: color-mix(in srgb, var(--cx-accent) 75%, transparent); --cx-accent-line-a20: color-mix(in srgb, var(--cx-accent-line) 20%, transparent); --cx-accent-line-a30: color-mix(in srgb, var(--cx-accent-line) 30%, transparent); --cx-accent-soft-a30: color-mix(in srgb, var(--cx-accent-soft) 30%, transparent); --cx-accent-soft-a38: color-mix(in srgb, var(--cx-accent-soft) 38%, transparent); --cx-ink-a06: color-mix(in srgb, var(--cx-ink) 6%, transparent); --cx-ink-a08: color-mix(in srgb, var(--cx-ink) 8%, transparent); --cx-ink-a10: color-mix(in srgb, var(--cx-ink) 10%, transparent); --cx-ink-a12: color-mix(in srgb, var(--cx-ink) 12%, transparent); --cx-ink-a16: color-mix(in srgb, var(--cx-ink) 16%, transparent); --cx-ink-a24: color-mix(in srgb, var(--cx-ink) 24%, transparent); --cx-ink-a30: color-mix(in srgb, var(--cx-ink) 30%, transparent); --cx-line-a75: color-mix(in srgb, var(--cx-line) 75%, transparent); --cx-mist-a75: color-mix(in srgb, var(--cx-mist) 75%, transparent); --cx-ok-fg-a10: color-mix(in srgb, var(--cx-ok-fg) 10%, transparent); --cx-ok-fg-a12: color-mix(in srgb, var(--cx-ok-fg) 12%, transparent); --cx-ok-fg-a14: color-mix(in srgb, var(--cx-ok-fg) 14%, transparent); --cx-ok-fg-a16: color-mix(in srgb, var(--cx-ok-fg) 16%, transparent); --cx-ok-fg-a24: color-mix(in srgb, var(--cx-ok-fg) 24%, transparent); --cx-ok-fg-a30: color-mix(in srgb, var(--cx-ok-fg) 30%, transparent); --cx-ok-fg-a75: color-mix(in srgb, var(--cx-ok-fg) 75%, transparent); --cx-panel-a04: color-mix(in srgb, var(--cx-panel) 4%, transparent); --cx-panel-a06: color-mix(in srgb, var(--cx-panel) 6%, transparent); --cx-panel-a08: color-mix(in srgb, var(--cx-panel) 8%, transparent); --cx-panel-a10: color-mix(in srgb, var(--cx-panel) 10%, transparent); --cx-panel-a12: color-mix(in srgb, var(--cx-panel) 12%, transparent); --cx-panel-a14: color-mix(in srgb, var(--cx-panel) 14%, transparent); --cx-panel-a16: color-mix(in srgb, var(--cx-panel) 16%, transparent); --cx-panel-a20: color-mix(in srgb, var(--cx-panel) 20%, transparent); --cx-panel-a24: color-mix(in srgb, var(--cx-panel) 24%, transparent); --cx-panel-a30: color-mix(in srgb, var(--cx-panel) 30%, transparent); --cx-panel-a46: color-mix(in srgb, var(--cx-panel) 46%, transparent); --cx-panel-a65: color-mix(in srgb, var(--cx-panel) 65%, transparent); --cx-paper-a02: color-mix(in srgb, var(--cx-paper) 2%, transparent); --cx-paper-a04: color-mix(in srgb, var(--cx-paper) 4%, transparent); --cx-paper-a06: color-mix(in srgb, var(--cx-paper) 6%, transparent); --cx-paper-a08: color-mix(in srgb, var(--cx-paper) 8%, transparent); --cx-paper-a10: color-mix(in srgb, var(--cx-paper) 10%, transparent); --cx-paper-a12: color-mix(in srgb, var(--cx-paper) 12%, transparent); --cx-paper-a14: color-mix(in srgb, var(--cx-paper) 14%, transparent); --cx-paper-a16: color-mix(in srgb, var(--cx-paper) 16%, transparent); --cx-paper-a20: color-mix(in srgb, var(--cx-paper) 20%, transparent); --cx-paper-a24: color-mix(in srgb, var(--cx-paper) 24%, transparent); --cx-paper-a30: color-mix(in srgb, var(--cx-paper) 30%, transparent); --cx-paper-a46: color-mix(in srgb, var(--cx-paper) 46%, transparent); --cx-paper-a55: color-mix(in srgb, var(--cx-paper) 55%, transparent); --cx-paper-a65: color-mix(in srgb, var(--cx-paper) 65%, transparent); --cx-paper-a75: color-mix(in srgb, var(--cx-paper) 75%, transparent); --cx-paper-a85: color-mix(in srgb, var(--cx-paper) 85%, transparent); --cx-paper-a92: color-mix(in srgb, var(--cx-paper) 92%, transparent); --cx-porcelain-a46: color-mix(in srgb, var(--cx-porcelain) 46%, transparent); --cx-porcelain-a65: color-mix(in srgb, var(--cx-porcelain) 65%, transparent); --cx-porcelain-a75: color-mix(in srgb, var(--cx-porcelain) 75%, transparent); --cx-porcelain-a85: color-mix(in srgb, var(--cx-porcelain) 85%, transparent); --cx-porcelain-a92: color-mix(in srgb, var(--cx-porcelain) 92%, transparent); --cx-stop-fg-a08: color-mix(in srgb, var(--cx-stop-fg) 8%, transparent); --cx-stop-fg-a10: color-mix(in srgb, var(--cx-stop-fg) 10%, transparent); --cx-stop-fg-a20: color-mix(in srgb, var(--cx-stop-fg) 20%, transparent); } /* ============================================================================ V4-d "PREMIUM" — the premium register. ADDITIVE ONLY. ---------------------------------------------------------------------------- V4-c Gallery is the base and stays intact underneath. Premium is not more decoration; it is more AIR, one INTERACTIVE accent, material DEPTH, chrome FINISH, motion CHOREOGRAPHY and complete STATES. Everything below is namespaced --cx-pre-* so deleting the block leaves Gallery whole. ========================================================================== */ :root { /* ------------------------------------------- 1 · AIR + SCALE (12-col, 8pt) The outer margin is the loudest premium signal there is. At 1440 it measures 100.8px — the brief's floor is 96. At 390 it relaxes to 27. */ --cx-pre-gutter: clamp(20px, 7vw, 128px); --cx-pre-grid: repeat(12, minmax(0, 1fr)); --cx-pre-col-gap: var(--cx-s6); /* the display scale: 80.6px at 1440 (brief 72–88), 40px at 390 */ --cx-pre-d1: clamp(40px, 5.6vw, 88px); --cx-pre-d2: clamp(34px, 4.2vw, 64px); --cx-pre-d3: clamp(26px, 2.8vw, 40px); /* the 8-pt spine — every premium block spaces on these and nothing else */ --cx-pre-rhythm-xs: 16px; --cx-pre-rhythm-sm: 32px; --cx-pre-rhythm-md: 64px; --cx-pre-rhythm-lg: 96px; --cx-pre-rhythm-xl: 128px; /* ---------------------------------- 2 · ONE INTERACTIVE ACCENT — the navy THE PAPER FLIGHT points this knob at the brand RED INK. Affordance AND brand mark: links, focus rings, the selected tab/segment, the active edge, progress hairlines, stamps, section marks and the handwriting. Measured on the brand ladder (see the gate's contrast table): #c8380f on sheet 5.03 · paper 4.93 · paper-2 4.72 · step 4.55 Anything smaller than 18px that has to sit on the deepest step uses the DEEP step instead, which is also the hover step: #a52d0b on sheet 6.68 · paper 6.55 · paper-2 6.27 · step 6.04 */ --cx-pre-accent: #c8380f; --cx-pre-accent-lift: #a52d0b; /* hover/pressed + the on-tint step */ --cx-pre-accent-soft: color-mix(in srgb, var(--cx-pre-accent) 8%, var(--cx-paper)); --cx-pre-accent-line: color-mix(in srgb, var(--cx-pre-accent) 30%, var(--cx-paper)); --cx-pre-ring: var(--cx-pre-accent); --cx-pre-ring-w: 2px; --cx-pre-ring-offset: 2px; /* ------------------------------------------- 3 · DEPTH THAT IS MATERIAL */ --cx-pre-tilt-max: 1deg; /* papercraft: paper tilts a little */ --cx-pre-perspective: 1600px; /* THE FLAT LAW again — premium depth is carried by the tint ladder and by air, never by a shadow. All five resolve to none. */ --cx-pre-shadow-1: 0 1px 2px rgba(25, 23, 19, .07), 0 10px 26px rgba(25, 23, 19, .08); --cx-pre-shadow-2: 0 1px 2px rgba(25, 23, 19, .07), 0 14px 36px rgba(25, 23, 19, .10); --cx-pre-shadow-3: 0 3px 6px rgba(25, 23, 19, .08), 0 26px 60px rgba(25, 23, 19, .14); --cx-pre-inner-hi: none; --cx-pre-inner-hi-light: none; /* ----------------------------------------------- 4 · CHROME + 5 · MOTION */ /* ------------------------------------------------------ backdrop budget The Gallery layer drew the backdrops with a 6%-ALPHA INK and called that "6% ink". Alpha does not work that way: overlapping strokes composite, and the coinwright rose-engine — 24.5% coverage, hundreds of crossings — measured 49.78% effective ink on the rasterised layer. Measured in the gamma-encoded sRGB space the compositing actually happens in, not assumed: planum 13.42 · vector 14.78 · mintmark 10.87 · coinwright 49.78 The fix is to draw the linework at SOLID ink and put ONE opacity on the whole layer, so the budget is a ceiling the compositor enforces instead of a per-stroke hope. Overlap can no longer stack past it. At .05 group opacity the same four measure 5.65% each, every one under the 6% budget and independent of how dense the drawing is. */ --cx-pre-backdrop-ink: .05; --cx-pre-icon-stroke: 1.5; --cx-pre-stagger: 60ms; /* between siblings, max 6 steps */ --cx-pre-dur-cross: 200ms; /* route crossfade */ --cx-pre-dur-settle: 420ms; /* the spring settle after a tilt */ --cx-pre-ease-spring: cubic-bezier(.16, 1.02, .3, 1); --cx-pre-skeleton: color-mix(in srgb, var(--cx-ink) 4%, transparent); --cx-pre-skeleton-lift: color-mix(in srgb, var(--cx-ink) 1.5%, transparent); } @media (prefers-reduced-motion: reduce) { :root { --cx-pre-stagger: 0ms; --cx-pre-dur-cross: 1ms; --cx-pre-dur-settle: 1ms; } } /* ============================================================================ 8 · "COMMAND INK" — the dark preview (?theme=ink on /workspace only) ---------------------------------------------------------------------------- Not a dark mode: one preview of Conxto's future expression, set as data-cx-theme on the ROOT element so the derived color-mix() alpha steps further up this file resolve against the dark ground rather than the light one. Every pair below is measured by the gate on the RENDERED page. ink #EDEEF2 on paper #12141B = 15.87:1 ink60 #9DA3B5 = 7.31:1 ok #7BD3A3 = 10.24:1 warn #E0C271 = 10.62:1 ask #F0B968 = 10.38:1 stop #F19A9A = 8.61:1 link #9EC1F0 = 9.93:1 tightest pair in the theme: ink60 on mist 6.47 ========================================================================== */ :root[data-cx-theme="ink"] { /* CONSERVATORY: the dark preview is THE FIELD — the ink side of the same sheet of paper — not a second, cooler palette. */ --cx-paper: #191713; --cx-porcelain: #0d0c09; --cx-mist: #23211b; --cx-line: #3a352c; --cx-line-strong: #4b463c; --cx-line-abs: #3a352c; --cx-line-strong-abs: #4b463c; --cx-ink: #faf8f2; --cx-ink-abs: #faf8f2; --cx-paper-abs: #191713; --cx-ink60: #cbc4b2; --cx-ink60-abs: #cbc4b2; --cx-ink30: #7d776a; --cx-ink30-abs: #7d776a; --cx-panel: #0d0c09; --cx-pline: #3a352c; --cx-panel-ink: #faf8f2; --cx-panel-ink60: #cbc4b2; --cx-panel-well: #23211b; --cx-panel-dot: #3a352c; --cx-accent: #faf8f2; --cx-ok-fg: #faf8f2; --cx-ok-bg: #23211b; --cx-ok-line: #4b463c; --cx-warn-fg: #e6dfcd; --cx-warn-bg: #23211b; --cx-warn-line: #4b463c; --cx-ask-fg: #e6dfcd; --cx-ask-bg: #23211b; --cx-ask-line: #4b463c; --cx-stop-fg: #ec9270; --cx-stop-bg: #32211a; --cx-stop-line: #5c3826; --cx-sig-cream: #23211b; --cx-sig-slate: #201e18; /* the red ink lifts to stay legible on ink: 6.2:1 */ --cx-pre-accent: #ec9270; --cx-pre-accent-lift: #f2b79c; --cx-tone-resume: #faf8f2; --cx-tone-ats: #faf8f2; --cx-tone-letter: #faf8f2; --cx-tone-portfolio: #faf8f2; --cx-shadow-hard: none; }