/* assets/tokens.css — every colour, size, step and face of the site. "The Annotated Machine": warm paper, one object per plate, labels that point at it. Values carried from docs/super-am-design-system-v1.md §2, §3, §4; the palette was re-cut in warm graphite and burnt apricot — apricot is the Armenian colour, and it is the only place the company's origin speaks in the design. No other file in this concept may contain a literal colour. Every ratio below is the WCAG relative-luminance formula, computed, not estimated. */ :root { /* ---------------------------------------------------------------- §2.1 ground and ink */ --paper: #F7F5F1; /* page ground, warm white */ --surface: #FFFFFF; /* plates, tables, cards — a plate reads on warm paper */ --ink: #1A1714; /* text and display type (16.4:1 paper, 17.9:1 surface) */ --ink-2: #5C5249; /* secondary text, captions, every mono label (7.0:1 / 7.6:1) */ --ink-3: #8A7F74; /* drawn rules and axis ticks only (3.6:1 paper), never running text */ --line: #E4DED5; /* hairlines: plate borders, table rows — separator, not boundary */ --line-2: #CFC6BA; /* hairline that has to survive on paper ground */ --line-control: #877D71; /* boundary of a thing you can operate: input, ghost button, scrollbar thumb. Holds 3:1 on every ground a control can sit on: 4.0:1 --surface, 3.7:1 --paper, 3.3:1 --grid, 3.2:1 --accent-grid, 3.7:1 --accent-wash, 3.5:1 --accent-soft, and 4.0:1 on --machine-panel where the terminal's scrollbar runs. */ --grid: #EDE7DC; /* grid paper, inside figure areas only */ /* the one accent, in four strengths. Each strength has one job and one floor. */ --accent: #C2610A; /* stroke, leader line, rule, frame: 3.9:1 on --paper, 4.2:1 on --surface, 3.4:1 on --grid, 3.3:1 on --accent-grid, 4.4:1 on --machine-bg — carries no text: white on it is 4.2:1 */ --accent-ink: #8F4309; /* the accent as readable text: links, marks (6.5:1 / 7.1:1) */ --accent-fill: #A8500A; /* the accent as a ground under white type (5.5:1) */ --accent-deep: #7A3A07; /* hovered and pressed (7.9:1 paper, 8.6:1 white on it) */ --accent-bright: #F0A02B; /* "assembled": a filled unit, a filled bar, the live marker. Never text and never a bare stroke — 2.2:1 on surface. It appears only as a fill inside an --accent outline. */ --accent-soft: #FAEEDC; /* accent at plate strength, for fills (ink 15.6:1 on it) */ --accent-wash: #FCF4E9; /* the accent band's ground (ink 16.4:1, ink-2 7.0:1) */ --accent-grid: #F2E2CB; /* the accent band's grid paper (--accent 3.3:1 over it) */ --on-accent: #FFFFFF; /* type on an --accent-fill ground (5.5:1) */ --redline: #A32F26; /* annotation strokes: dimensions, "your part", "not included" */ --redline-ink: #8E2A22; /* the same annotation, as legible text (7.7:1 paper, 7.4:1 on soft) */ --redline-soft: #FBEEEB; --signal: #1F7A46; /* operational (4.9:1 paper, 5.3:1 surface) */ --amber: #8A5A10; /* degraded (5.4:1 paper, 5.9:1 surface) */ /* ---------------------------------------------------------------- §2.2 machine surface The one dark band on a page. Graphite, not navy; apricot works on it point by point. */ --machine-bg: #17130F; /* a terminal, a log, a live panel */ --machine-panel: #26201A; /* grouping, not a boundary. The panel is marked by its hairline at 1.6:1 against the band, which is below the 3:1 floor on purpose: that floor is for strokes that carry meaning, and nothing here is read from the frame — the body inside is 13.0:1, and when the panel takes focus the ring marks it at 4.4:1. Delete the frame and the panel still reads. */ --machine-line: #40362D; /* that hairline, and the rules drawn inside the panel */ --machine-ink: #EDE6DC; /* 14.9:1 on the band, 13.0:1 on the panel */ --machine-ink-2: #B7AB9C; /* 8.2:1 / 7.2:1 */ --machine-accent: #F2A950; /* apricot that carries text here: 9.3:1 / 8.1:1 */ --machine-signal: #3DDC84; /* 10.4:1 / 9.0:1 */ /* ---------------------------------------------------------------- §2.3 figure coding Allowed inside figures and legends only. Never in chrome, nav, buttons or grounds. Every coded stroke is also distinguishable by stroke style, and the two solid codes are 1.8:1 apart in greyscale so the drawing survives a black-and-white print. */ /* stroke character, §5.3: solid copper, dashed fibre, dotted out-of-band */ --dash-fibre: 5 4; --dash-feed-b: 9 3; /* the B feed, so A and B differ without colour */ --code-power-a: #A32F26; /* A feed solid (7.0:1 surface, 5.7:1 grid) */ --code-power-b: #0F7A5A; /* B feed solid (5.3:1 / 4.3:1), dashed 9 3 */ --code-copper: #78818C; /* copper / LAN solid (4.0:1 / 3.2:1). The direction asked for ~#4A5568; that value greys to within 1.1:1 of the carmine A feed and the two solid codes became one in print. */ --code-fibre: #6B4FA8; /* fibre / uplink dashed (6.4:1 / 5.2:1) */ /* ---------------------------------------------------------------- §3 typography */ --font-text: 'Onest', 'Noto Sans Armenian', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Noto Sans Armenian', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-hy: 'Noto Sans Armenian', 'Onest', system-ui, sans-serif; --font-label: var(--font-mono); /* labels, and any figure a word may stand in: figure numbers, heads, units, chips, price and quote cells; the reading face under :lang(hy) */ --t-display: clamp(34px, 4.4vw, 56px); --t-h2: clamp(26px, 2.6vw, 34px); --t-h3: 22px; --t-lead: 21px; --t-body: 16px; --t-body-2: 15px; /* table, step and list body */ --t-question: 17px; /* the question in the FAQ list */ --t-stat: clamp(32px, 3.2vw, 44px); --t-am: clamp(56px, 13vw, 192px); /* the two AMs of the home page's first drawing (ADR 0050): the largest type on the site */ --t-am-sm: 72px; --t-am-md: clamp(56px, 8vw, 112px); /* the two AMs on the home page's second band, a size down from the first screen (ADR 0051) */ /* the same two AMs on a phone, where the dimension runs below them */ --t-mono: 13px; --t-micro: 12px; --t-fig: 12px; /* labels inside a drawing */ --t-fig-lg: 14px; --t-fig-sm: 11px; --lh-display: 1.06; --lh-h2: 1.14; --lh-lead: 1.62; --lh-body: 1.6; --lh-hy: 1.76; /* Armenian: +10 % */ --tr-display: -0.02em; --tr-h2: -0.015em; --tr-eyebrow: 0.12em; --tr-label: 0.04em; --tr-chip: 0.06em; --tr-thead: 0.08em; --tr-caption: 0.02em; --tr-fig: 0.03em; /* labels drawn in a figure, and the named cells beside it */ --w-body: 400; --w-mid: 500; --w-bold: 700; /* ---------------------------------------------------------------- §4.1 space scale 8 px base. These eleven steps are the only ones allowed. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10:128px; --s11:160px; /* ---------------------------------------------------------------- §4.2 grid and rhythm */ --page-max: 1280px; --gutter: 24px; --margin: 32px; --margin-sm: 20px; --measure: 68ch; /* two tiers of rhythm and only two: a chapter band, and a secondary band (.band--minor) */ --band-pad: 96px; --band-pad-dense: 64px; /* ---------------------------------------------------------------- surface mechanics */ --radius: 4px; /* the site's only radius: nothing is rounder than a rail */ --hair: 1px; --stroke: 1.5px; --stroke-fine: 0.6px; --icon: 16px; --scrollbar: 12px; --fig-max: 320px; --sheet-h-wide: clamp(200px, 16.5vw, 240px); /* the picture of a wide illustration sheet */ --sheet-h-hero: clamp(200px, 21vw, 300px); /* the picture of a first-screen sheet */ --sheet-fade: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent), linear-gradient(transparent, var(--ink) 8%, var(--ink) 92%, transparent); /* the edge mask every sheet's picture fades by */ --cell-max: 14em; /* the quote's figure column on a phone: a sentence in it wraps here */ --col-label: 120px; --header-h: 56px; /* the sticky bar, one row, at every width */ --logo-h: 22px; /* the mark in the bar and the footer: logo.svg at this height */ --logo-h-sm: 18px; /* the mark on the narrowest phones, where the bar is shared three ways */ --logo-h-lg: 40px; /* the mark standing on the line between the two AMs */ --logo-ratio: 437.86 / 72.94; /* logo.svg's viewBox */ --tap: 44px; --focus: 2px; /* ---------------------------------------------------------------- motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; --dur-draw: 1400ms; /* a drawing's one moment: the cables run in, the dial sweeps */ --dur-pulse: 1600ms; /* one beat of the U24 pulse, played three times */ /* ---------------------------------------------------------------- §2.4 the paper set The same paper values under a second name that never moves. A dark band re-points the semantic tokens below; a light surface standing on that band has to say it is paper again, and these are what it says it with. They are substituted here, on :root, so each one carries the paper value into every context, including a context that has re-pointed the token it was copied from. */ --paper-ground: var(--paper); --paper-surface: var(--surface); --paper-ink: var(--ink); --paper-ink-2: var(--ink-2); --paper-ink-3: var(--ink-3); --paper-line: var(--line); --paper-line-2: var(--line-2); --paper-grid: var(--grid); --paper-accent-ink: var(--accent-ink); --paper-redline: var(--redline); --paper-redline-ink: var(--redline-ink); --paper-redline-soft:var(--redline-soft); --paper-signal: var(--signal); } /* Armenian needs about 10 % more leading (PRODUCT.md, three scripts). `:lang(hy)` in style.css gives it to running text, but `.display`, `.h2` and `.lead` set their own line-height and win the cascade, so the headings and the lead get it here, as the tokens they read. */ :lang(hy) { --lh-display: 1.17; --lh-h2: 1.25; --lh-lead: 1.78; /* and no tracking, and no mono: every label spaces its letters by a --tr-* token and takes its face from --font-label, so both are re-pointed here once. The mono has no Armenian, and its wide spaces pulled Armenian words apart */ --tr-eyebrow: 0; --tr-label: 0; --tr-chip: 0; --tr-thead: 0; --tr-caption: 0; --tr-fig: 0; --font-label: var(--font-hy); } /* ---------------------------------------------------------------- §2.5 context The dark band re-points the tokens instead of repainting class by class. A rule of the form `.band--machine .h2 { color: … }` paints everything inside the band, including the white cards laid on it: --machine-ink on a white callout measured 1.24:1. Re-pointing fixes the cards and, more to the point, fixes the block nobody has written yet — a new block put on this band reads without a new selector. Every pair below is computed, not estimated: --machine-ink is 14.9:1 on --machine-bg and 13.0:1 on --machine-panel; --machine-ink-2 is 8.2:1 / 7.2:1; --machine-accent, the one apricot that carries text, is 9.3:1 / 8.1:1. --accent is left alone: it is a stroke here, 4.4:1 on the band, and the focus ring is drawn with it. */ .band--machine { --paper: var(--machine-bg); --surface: var(--machine-panel); --ink: var(--machine-ink); --ink-2: var(--machine-ink-2); --ink-3: var(--machine-ink-2); /* drawn rules: --ink-3 is a paper grey and dies here */ --line: var(--machine-line); --line-2: var(--machine-line); --grid: var(--machine-line); --accent-ink: var(--machine-accent); --signal: var(--machine-signal); /* the annotation pen: carmine is a paper ink (2.0:1 on graphite), so on this band the open fact is drawn with the apricot that does carry text, on no ground at all */ --redline: var(--machine-accent); --redline-ink: var(--machine-accent); --redline-soft: transparent; } /* …and a light surface laid on that band says so by naming the paper set. The list is an enumeration and CSS gives no way to make it anything else: a selector can match a class, an attribute or a position, never "an element that paints itself light". `background` is not readable from a selector, custom properties cascade by selector only, and :has() looks down the tree, not at computed paint. So the escape hatch is a class: a new light surface either joins this list or carries .on-paper, and .on-paper is the one thing a new block has to know. The dark ground itself needs nothing. .term is the one deliberate exception and it is not in this list: a terminal panel is dark because it is a terminal, not because of the band it stands on, so it keeps painting itself from --machine-* and stays dark on a paper band too. Its print rescue is the generic .term block in @media print, which covers it on either ground. */ .band--machine .plate, .band--machine .callout, .band--machine .tablewrap, .band--machine .on-paper { --paper: var(--paper-ground); --surface: var(--paper-surface); --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --ink-3: var(--paper-ink-3); --line: var(--paper-line); --line-2: var(--paper-line-2); --grid: var(--paper-grid); --accent-ink: var(--paper-accent-ink); --signal: var(--paper-signal); --redline: var(--paper-redline); --redline-ink: var(--paper-redline-ink); --redline-soft: var(--paper-redline-soft); } @media (max-width: 900px) { :root { --band-pad: 56px; --band-pad-dense: 48px; --margin: 20px; --t-lead: 18px; --t-h3: 20px; --t-body: 16px; --fig-max: 260px; } }