/* HARD CHROME — the token set for DMT Recording Studio. Chrome neutrals + one electric Current + Infrared as alarm state. Colour is wired to the phase engine: chrome at CALM, Current through ESCALATION, Infrared seizes FAILURE. Nothing hidden. Ported from DESFASE (mellab/desfase) src/styles/tokens.css. The two repos agree by DOCTRINE, NOT BY DEPENDENCY — a change there does not arrive here. Three things changed on the way in, and all three are load-bearing: 1. Voice blocks rescoped off #artboard onto :root. Copied verbatim they would have matched nothing and every voice but the default would have silently done nothing. 2. The default voice is RELAY, not CIRCUIT. CIRCUIT is the flyer masthead; the studio and the flyer are deliberately separate identities. 3. The type / space / motion scales below are NEW. DESFASE has no rem scale (its type is cqw against fixed artboards), no easing scale at all, and no component doctrine. Those are invented here, derived from the contract rather than from a generic ladder. */ :root { /* --------------------------------------------------------------- PALETTE — chrome, one electric, one alarm --------------------------------------------------------------- */ --void: #05060a; --chrome-1: #f2f4f8; --chrome-2: #aeb6c2; --chrome-3: #5c6470; --chrome-4: #1c1f26; --current: #2ee6ff; --infrared: #ff2a4d; --chrome-grad: linear-gradient(180deg, #f2f4f8 0%, #aeb6c2 38%, #5c6470 52%, #e8ecf2 100%); /* Resting foreground for infrared-field scenes. Infrared is an alarm state, never a resting accent, so those pages swap the foreground to this chrome-white instead of their own accent — it is then the only true white in the composition, the one cool thing in a hot room. */ --chrome-white: #e8f4ff; /* --------------------------------------------------------------- TEXT ROLES — contrast-audited against --void #05060a. These ratios are computed, not vibes, and work/verify-tokens.mjs re-checks them in CI. Respect the role: two of these greys are STRUCTURAL and cannot legally carry body copy. --text-strong #f2f4f8 17.4 : 1 any size --text #aeb6c2 9.8 : 1 any size --text-dim rgba(174,182,194,.62) 4.3 : 1 FAILS AA at body size --rule #5c6470 3.4 : 1 FAILS AA at body size --accent #2ee6ff 13.4 : 1 any size --alarm #ff2a4d 5.5 : 1 any size --text-dim and --rule are for large display type, hairlines, borders and non-text UI. Never set reading copy in them. --------------------------------------------------------------- */ --bg: var(--void); --text-strong: var(--chrome-1); --text: var(--chrome-2); --text-dim: rgba(174, 182, 194, 0.62); --rule: var(--chrome-3); --grid: rgba(92, 100, 112, 0.30); --accent: var(--current); --alarm: var(--infrared); /* --------------------------------------------------------------- GEOMETRY — one angular motif, executed everywhere. A second motif is forbidden: one motif is Deco, twelve is a gamer overlay pack. The flyer also carries a 1.4cqw chamfer for poster panels; container units are meaningless in a fluid page, so the px form is the only one here. --------------------------------------------------------------- */ --chamfer: 14px; --chamfer-s: 8px; --radius: 0; /* permanent. not a default, a contract. */ --hairline: 1px; --node: 5px; /* the square terminal node on a trace rule */ /* --------------------------------------------------------------- TYPE VOICES — curated, never a font menu. Switched via data-type-voice on :root. Default = RELAY (the machine register). --------------------------------------------------------------- */ --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, "IBM Plex Mono", "Share Tech Mono", monospace; --font-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif; /* THE TEXT REGISTER — long-form reading copy ONLY. This is a fifth family and it is NOT a fifth voice. The four voices govern DISPLAY type; the flyer this contract came from has no body copy at all, so nothing in it ever ruled on 17px prose — and prose set in mono is a terminal readout, not something a person reads for two minutes. Amended into dmt-editorial/SKILL.md 2026-08-01 by owner decision. Barred from: headings, labels, metadata, numerals, controls, tabular data. Those stay mono (the machine voice) or RELAY (the display voice). A heading in Archivo is a contract breach of the same class as a fifth display voice. */ --font-text: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 450, not 400: a grotesque at 400 blooms and thins on a near-black ground. Mono metadata keeps --weight-meta. */ --weight-text: 450; --weight-display: 700; --tracking-display: 0.01em; --stretch-display: normal; --display-leading: 1.12; --tracking-label: 0.08em; --tracking-wide: 0.16em; /* Metadata register — wire-service folio: light weight, tracked out. The display/meta contrast is WEIGHT + TRACKING, not bold-vs-bolder. */ --weight-meta: 500; --tracking-meta: 0.12em; /* --------------------------------------------------------------- TYPE SCALE — and the hole in the middle of it. "Minimal typography at maximum scale" means SCALE COLLISION, not a 1.25 ratio ramp. So this scale is two registers with a deliberate gap between them: mono metadata up to 17px, display type from 36px. NOTHING is defined between 17px and 36px, on purpose. If a design wants a 24px heading it is reaching for the missing rung, and the answer is to pick a side, not to add one. The lower rungs are shared by two registers at the same sizes: MACHINE (mono) carries labels, refs and folios; TEXT (Archivo) carries the prose. Reading copy sat in mono until 2026-08-01 — inherited by default rather than chosen, and it made every paragraph read as terminal output. See --font-text above. --------------------------------------------------------------- */ --t-2xs: 0.6875rem; /* 11px — catalogue refs, labels, node captions */ --t-xs: 0.8125rem; /* 13px — nav, captions, table meta */ --t-s: 0.9375rem; /* 15px — secondary copy */ --t-m: 1.0625rem; /* 17px — body copy. the top of the small register */ /* ---- the hole ---- */ --t-d3: clamp(2.25rem, 5vw, 3.5rem); /* 36 - 56px — section heads */ --t-d2: clamp(3.5rem, 9vw, 7rem); /* 56 - 112px — page titles */ --t-d1: clamp(4.5rem, 18vw, 15rem); /* 72 - 240px — the masthead */ --t-numeral: clamp(3rem, 10vw, 9rem); /* 48 - 144px — registration mark */ --leading-display: var(--display-leading); /* 1.55, retuned from the 1.65 that mono needed. Mono's uniform advance makes a paragraph read as a block and wants air to separate the lines; a proportional grotesque already has word-shape to navigate by, and 1.65 under it opens the lines until the paragraph stops cohering. */ --leading-body: 1.55; --leading-tight: 1.15; /* Mono still needs its own air wherever it carries more than a label. */ --leading-mono: 1.65; /* --------------------------------------------------------------- SPACE — 8px baseline, 24px leading (leading = 3x baseline), the Müller-Brockmann rhythm the flyer grid is built on. Every value is a multiple of 8; nothing off-grid gets a token. --------------------------------------------------------------- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; /* one leading unit — the base rhythm */ --s-4: 32px; --s-6: 48px; --s-9: 72px; /* the flyer's narrow margin */ --s-12: 96px; /* the flyer's wide margin */ --s-18: 144px; --s-24: 192px; /* Grid: 12 columns, 24px gutters, margins fluid between the two flyer margin values. The ratios survive; the poster pixel values do not. */ --grid-columns: 12; --grid-gutter: var(--s-3); --grid-margin: clamp(var(--s-3), 6vw, var(--s-12)); /* Max reading width — copy never runs the full twelve. `ch` is the advance of "0" in the ELEMENT'S OWN font, so this token's meaning is face-dependent and had to be re-measured when reading copy left mono. It was re-measured rather than reasoned about, and the reasoning would have been wrong: Archivo's zero happens to sit within a hair of its own average glyph advance, so `Nch` still lands on ~N characters, the same as the monospace it replaced. The number moved for a different reason — 68 was already at the top of the comfortable band and the grotesque holds a longer line less well than mono's rhythm did. Measured by work/measure-copy.mjs: longest line 68 chars, mean 63, target 60-72. Judge that script's output on the LONGEST line, never the mean — a line that broke early did so because the next word did not fit, and that rag belongs to the text, not to the measure. */ --measure: 62ch; /* --------------------------------------------------------------- MOTION — on the 138 BPM beat grid, not a 150/300ms ladder. Inherited from the flyer's transmission-settling score, where the entrance is authored as rhythm rather than as staggered fades: BEAT = 60/138 = 434.8ms, and a "strike" is a cut with just enough ramp not to alias. Everything here is a division of that beat, so the site and the flyers move to the same tempo. --t-bleed is the ONE slow envelope, and it is reserved for a single element per view: if everything strobes, nothing does — it is the contrast that makes the strikes read as cuts. The design-review gate checks that as a MEDIUM; no linter can see it. --------------------------------------------------------------- */ --beat: 435ms; --t-cut: 50ms; /* the STRIKE constant — a cut with one frame of AA */ --t-strike: 109ms; /* 1/4 beat */ --t-half: 217ms; /* 1/2 beat */ --t-bleed: 652ms; /* 1 1/2 beats — one element per view. no more. */ /* Hard cuts only. No ease-in-out: a symmetric curve reads as a UI transition, and this system telegraphs machine state instead. */ --ease-cut: linear; --ease-strike: cubic-bezier(0.16, 0.84, 0.28, 1); /* --------------------------------------------------------------- FOCUS — invented here; DESFASE has no interactive surface to focus. 2px Current, zero offset, zero radius: the accent already carries 13.4:1 on void, and a rounded focus ring would break --radius: 0 at the one moment the user most needs the system to look deliberate. --------------------------------------------------------------- */ --focus-width: 2px; /* Deliberately --current and NOT --accent: --accent is repainted per page by the scene (steel on the VACUUM pages, chrome-white on STORM), and focus is a SYSTEM state, not a page mood. It must look identical everywhere. The contract sanctions the electric on interactive states explicitly. */ --focus-color: var(--current); } /* Reduced motion is always honored. The substrate is MATERIAL, not animation, and must survive this — only durations collapse. */ @media (prefers-reduced-motion: reduce) { :root { --beat: 0ms; --t-cut: 0ms; --t-strike: 0ms; --t-half: 0ms; --t-bleed: 0ms; } } /* ================================================================= THE FOUR CURATED VOICES A voice selector gives moods, not chaos. Every option reinforces the system. There is no free font menu and never Impact — meme/sale-banner condensed faces are the antonym of editorial. This site is RELAY. The other three are defined because /system renders them as a live specimen, and because a page may deliberately borrow one for a single masthead moment. ================================================================= */ /* VOICE 01 · CIRCUIT — condensed masthead slab. Impact, verticality. The DESFASE flyer's default. Using it as this site's voice would collapse two identities the project insists stay separate. */ :root[data-type-voice="CIRCUIT"] { --font-display: "Saira Condensed", "Arial Narrow Bold", "Helvetica Neue Condensed Black", sans-serif; --weight-display: 900; --tracking-display: 0em; --stretch-display: condensed; --display-leading: 1; } /* VOICE 02 · CURRENT — terminal/telemetry display. (Legacy name: DRIFT.) */ :root[data-type-voice="CURRENT"] { --font-display: "JetBrains Mono", "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace; --weight-display: 800; --tracking-display: -0.02em; --stretch-display: normal; /* JetBrains Mono carries tall ascenders and a large em-box; the CIRCUIT-tuned tight leading slices its glyph tops. ~1.3 lifts every display line-height so the caps clear the box. */ --display-leading: 1.3; } /* VOICE 03 · CHROME — geometric-wide Deco display, tracked out, gradient-filled. The Art Deco voice. Reserved here for masthead moments only: it is filled with --chrome-grad via background-clip:text, so it cannot take a text-shadow and must never sit under an opacity fade. */ :root[data-type-voice="CHROME"] { --font-display: "Syncopate", "Arial Black", "Helvetica Neue", sans-serif; --weight-display: 700; --tracking-display: 0.06em; --stretch-display: normal; --display-leading: 1.08; } /* VOICE 04 · RELAY — Chakra Petch, squared industrial/techno grotesk. The machine register: heavier presence than CURRENT's mono, tighter than CHROME's deco. THIS SITE'S VOICE, and the reason it differentiates the studio from the flyer without inventing anything outside the curated set. Metadata stays monospace, so the display/meta contrast still holds. */ :root[data-type-voice="RELAY"] { --font-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif; --weight-display: 700; --tracking-display: 0.01em; --stretch-display: normal; --display-leading: 1.12; }