/* RELEASE STAMP — axions-website 1.3.0 · build 2026-09-05b · built against Axions DS v1.3.0
Carries the 4 Sep home-page approvals, the 13 Jul Obs 01/02 edits and the Obs 03 re-spine. See VERSIONS.md in this package. */
/* ==========================================================================
Axions website — TOKEN LAYER. The single source of truth for this deliverable.
Every token value used by any page of this site is defined here and ONLY here.
site.css and observations.css consume these; neither defines a value of its own.
Each page links this file FIRST, then its page stylesheet:
(home)
(essays, legal)
Linked, not @imported: an @import chain serialises downloads and delays first paint.
Synced to Axions DS v1.3.0 — an offline, point-in-time mirror of tokens/*.css.
Values are inlined deliberately so that `website/` + `assets/` is self-contained and
portable: nothing outside this folder is required to render the site.
TO SYNC: compare against the DS --ds-version and CHANGELOG.md, update the mirror
below, and bump the note above. One file to review, one answer to "which version".
Previously this site had TWO token strategies — site.css mirrored the values in its own
:root while observations.css @imported tokens/*.css (a folder OUTSIDE website/). That
split cost real bugs: the phone gutter differed between the home page and the essays
(20px vs 24px), the version stamps had drifted, and an export missing tokens/ would
render the home page perfectly while all seven document pages lost every colour, size
and font.
========================================================================== */
/* ==========================================================================
1. FONTS — self-hosted, offline-first, no CDN.
VARIABLE fonts: one face per family carries the whole weight axis, so a requested
weight never snaps to a heavier face. Web = variable .woff2; documents use static TTFs.
========================================================================== */
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;}
/* ==========================================================================
2. COLOUR — the palette is CLOSED. Two tiers: primitives, then semantic roles.
If a colour is not here, it does not appear on any surface.
========================================================================== */
:root{
/* Surfaces, dark register */
--surface-0:#0B0E12; /* base — warm, subtly blued near-black */
--surface-1:#13171D; /* raised cards, panels */
--surface-2:#1B212A; /* elevated nested elements */
--logo-lobe-dark:#0A0C0E; /* the quiet lobe of the mark */
/* Surfaces, light register (documents / editorial) */
--paper-0:#F4F1EA; /* warm book paper */
--paper-1:#ECE7DB; /* raised / secondary light surface (card grids on paper) */
--white:#FFFFFF; /* reserved: ONE exhibit/document inset per surface */
/* Ink, on dark */
--ink-0:#ECEEF1; /* body + headlines — 16.6:1 */
--ink-1:#9AA0A8; /* secondary text, captions */
--ink-2:#828893; /* metadata, supporting detail (AA) */
--ink-disabled:#5E646D;
/* Ink, on paper */
--ink-0-light:#1A1916; /* body + headlines — 15.6:1 */
--ink-1-light:#5A544A;
--ink-2-light:#685F52; /* metadata on paper (AA) */
--ink-reading-light:#3A352E; /* softened long-form body on paper, 10.8:1 AAA */
--ink-disabled-light:#8A8276;
/* Accent teal — the one earned colour */
--teal-deep:#0E6E5E;
--teal-muted:#1AA98C;
--teal:#46D6B0;
--teal-emph:#7CEBD0;
--teal-on-light:#0D6F5E; /* teal for text/accents on paper (AA) */
--teal-hover:#57DBB8;
--teal-pressed:#38C29E;
--ink-on-accent:#06231E;
/* Signal magenta — fully reserved. Never decorative, never a chart series. */
--signal:#E0568B;
--signal-spark:#FF4D8F;
/* Functional state (calm, not alarm) */
--state-success:#5FB89A;
--state-caution-soft:#D6A24A; --state-caution-pop:#F2B544;
--state-critical-soft:#E0568B; --state-critical-pop:#FF4D8F;
--state-info:#74A2DE;
--state-success-on-light:#256B51;
--state-caution-on-light:#7C581B;
--state-critical-on-light:#A33263;
--state-info-on-light:#33639A;
--tint-success:rgba(95,184,154,0.14);
--tint-caution:rgba(214,162,74,0.14);
--tint-critical:rgba(224,86,139,0.14);
--tint-info:rgba(116,162,222,0.14);
/* Borders, links, selection, overlay */
--border-subtle:#2A313B;
--border-strong:#666D77;
--border-subtle-light:#DDD6C8;
--border-strong-light:#857C6E;
--link:#46D6B0;
--link-light:#0D6F5E;
--selection:rgba(70,214,176,0.25);
--overlay:rgba(4,6,8,0.65);
--overlay-light:rgba(26,25,22,0.40);
/* Translucent surfaces & washes — alpha expressions of existing primitives, not new hues */
--surface-0-blur:rgba(11,14,18,0.72);
--surface-0-panel:rgba(11,14,18,0.98);
--wash-teal:rgba(70,214,176,0.04);
/* Data viz — dark register, in series order */
--chart-1:#46D6B0; --chart-2:#F2B544; --chart-3:#3D7BF0;
--chart-4:#C24E1F; --chart-5:#9E7BFF; --chart-6:#93A3B5;
/* Data viz — light register. Order differs. */
--chart-1-light:#0E8A6E; --chart-2-light:#B07818; --chart-3-light:#2E63CC;
--chart-4-light:#7B5CE6; --chart-5-light:#C24E1F; --chart-6-light:#5B6B7C;
--chart-neutral-light:#BCAB8E; /* DS v1.3.0: the aggregated "other" slot on paper */
--gridline:rgba(236,238,241,0.08);
--gridline-light:rgba(26,25,22,0.08);
--missing-data:#3A4048;
--missing-data-light:#D8D2C6;
/* Semantic roles — surfaces consume these */
--bg:var(--surface-0);
--surface-raised:var(--surface-1);
--surface-elevated:var(--surface-2);
--text-primary:var(--ink-0);
--text-secondary:var(--ink-1);
--text-meta:var(--ink-2);
--text-disabled:var(--ink-disabled);
--text-accent:var(--teal);
--text-link:var(--link);
--accent:var(--teal);
--accent-ambient:var(--teal-muted);
--accent-emphasis:var(--teal-emph);
--interactive-default:var(--teal);
--interactive-hover:var(--teal-hover);
--interactive-pressed:var(--teal-pressed);
--on-interactive:var(--ink-on-accent);
--border:var(--border-subtle);
--border-functional:var(--border-strong);
--success:var(--state-success);
--caution:var(--state-caution-soft);
--critical:var(--state-critical-soft);
--info:var(--state-info);
}
/* ==========================================================================
3. TYPOGRAPHY — Inter (body) · Bricolage Grotesque (display) · JetBrains Mono.
Modular scale, ratio 1.25, base 16px. Sentence case always.
========================================================================== */
:root{
--ds-version:"1.3.0";
--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-display:"Bricolage Grotesque",-apple-system,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
/* Fixed reference scale (product UI, print, documents) */
--text-display:61px;
--text-h1:39px;
--text-h2:31px;
--text-h3:25px;
--text-lede:20px;
--text-reading:19px;
--text-body:17px;
--text-small:13px;
--text-meta:11px;
/* Line heights, paired to the scale */
--leading-display:1.04;
--leading-h1:1.1;
--leading-h2:1.12;
--leading-h3:1.18;
--leading-lede:1.55;
--leading-reading:1.75;
--leading-body:1.6;
--leading-small:1.45;
--leading-meta:1.4;
/* Tracking */
--tracking-display:-0.02em;
--tracking-body:0;
--tracking-eyebrow:0.13em;
/* ------------------------------------------------------------
FLUID WEB SCALE — the ONLY font sizes allowed in a rule. No literal
px/rem/em font-size anywhere; if a new need arises, add a token here.
READING & HEADINGS
--fs-display hero H1 only
--fs-statement full-bleed rhythm-break statement; essay
below 1200px
--fs-h2 section titles (the anchor heading)
--fs-pull pull-quotes & centred gap-lines
--fs-h3 subheads, editorial lead-in beats
--fs-h4 card & ledger titles, stat-band lead-in
--fs-h5 small component titles
--fs-lede section ledes, standfirsts, method lead
--fs-body 17px default reading text
--fs-body-sm 16px dense secondary text
--fs-label 13px mono eyebrows/labels
--fs-label-sm 11px mono meta
DATA & INTERFACE (numerals, charts, chrome — never reading text)
--fs-figure-xl the single hero data figure per band
--fs-figure inline stat & index numerals
--fs-ui 15px nav links, chrome pills
------------------------------------------------------------ */
--fs-display:clamp(2.5rem,5.4vw,4.4rem);
--fs-statement:clamp(2rem,4.5vw,3.4rem);
--fs-h2:clamp(1.9rem,3.6vw,3rem);
--fs-pull:clamp(1.5rem,2.8vw,1.9rem);
--fs-h3:clamp(1.2rem,1.8vw,1.45rem);
--fs-h4:1.3rem;
--fs-h5:1.05rem;
--fs-lede:clamp(1.15rem,1.5vw,1.3rem);
--fs-body:1.0625rem;
--fs-body-sm:1rem;
--fs-label:0.8125rem;
--fs-label-sm:0.6875rem;
--fs-figure-xl:clamp(3rem,6vw,4.6rem);
--fs-figure:clamp(1.6rem,2.3vw,2.1rem);
--fs-ui:0.9375rem;
}
/* ==========================================================================
4. SPACING, RADII, LAYOUT — 4px base scale. The scale is the law.
========================================================================== */
:root{
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;
--radius-sm:8px;
--radius-md:10px; /* buttons */
--radius-lg:14px;
--radius-card:16px;
--radius-xl:18px;
--radius-sheet:32px; /* large paper panel */
--radius-pill:999px;
--container-max:1200px; /* fixed reference container (essay masthead) */
--gutter:24px;
--section-y:96px;
--section-y-mobile:56px;
--bp-tablet:640px;
--bp-desktop:1024px;
}
/* ==========================================================================
5. EFFECTS — glow, depth, focus, motion.
Three glow tiers: ambient (life) · interaction (response) · shadow (depth).
Glow is never elevation; shadow is never life.
========================================================================== */
:root{
--glow-ambient:0 0 80px -16px rgba(70,214,176,0.30);
--glow-ambient-svg:drop-shadow(0 0 14px rgba(70,214,176,0.32));
--glow-hover:0 0 0 1px rgba(70,214,176,0.5),0 8px 28px -8px rgba(70,214,176,0.65);
--glow-signal:0 0 0 1px rgba(224,86,139,0.5),0 8px 26px -8px rgba(224,86,139,0.6);
--shadow-float:0 16px 48px -16px rgba(0,0,0,0.55); /* floating elements only */
--lift:translateY(-1px);
/* The ONE soft radial-gradient halo behind a single key element per surface.
A gradient FILL, not a box-shadow. Halo is life, not elevation. */
--halo-ambient:radial-gradient(circle,rgba(70,214,176,0.14),rgba(70,214,176,0) 64%);
--halo-ambient-soft:radial-gradient(circle,rgba(70,214,176,0.07),rgba(70,214,176,0) 66%);
--focus-ring:2px solid rgba(70,214,176,0.75);
--focus-ring-offset:3px;
--motion-micro:120ms; --motion-state:200ms; --motion-section:400ms;
--motion-page:600ms; --motion-brand:1000ms; --motion-logo:2000ms;
--ease-default:cubic-bezier(0.4,0,0.2,1);
--ease-considered:cubic-bezier(0.3,0,0.1,1);
/* linear is reserved for traces (an arc drawing at constant speed) */
}
/* ==========================================================================
6. WEBSITE LAYER — values this deliverable adds to, or deliberately overrides
from, the design system. Each one is a candidate to fold back into the DS on
its next bump; nothing here is a one-off literal in a rule.
========================================================================== */
:root{
/* Responsive page container. Distinct from the DS's fixed --container-max, which the
essay masthead still uses. Tiers below. */
--container:1200px;
--margin:32px;
/* Long-form measure. Was a website override at 64ch against the DS's 66ch; DS v1.3.0 adopted
64ch, so this now matches the system rather than departing from it. */
--measure:64ch;
/* Shorthand for the easing this site uses throughout. */
--ease:var(--ease-considered);
/* Folded into the DS at v1.3.0 (was an extension here). The sticky masthead sits over reading
text and 0.72 (--surface-0-blur) let body copy read through the bar. 0.94 keeps a trace of the
blur while the nav labels stay the only legible thing in it. One alpha per register. */
--surface-0-nav:rgba(11,14,18,0.94);
--paper-0-nav:rgba(244,241,234,0.94); /* light register; consumed by observations.css */
/* Folded into the DS at v1.3.0 (was an extension here). One offset for the sticky header,
shared by anchor landings and the widescreen rails, so those values can no longer disagree.
Mirrors the JS (height + 16). */
--header-h:73px;
--header-offset:calc(var(--header-h) + 16px);
/* Context data-band series. Named by meaning because the band is a fixed three-part
figure, not a generic chart. */
--chart-integration:var(--chart-1);
--chart-cells:var(--chart-2);
/* OFF-PALETTE — this tan is not a DS token. Flagged for reconciliation in the next DS
bump (the light-register "other" role is --chart-6-light #5B6B7C, but that fails
contrast against the segment's --ink-on-accent label). Left as-is deliberately:
changing it changes a signed-off design. */
--chart-other:var(--chart-neutral-light);
}
/* DS v1.3.0 sets --margin to 24px and --radius-sheet to 24px below 640px. This site sets its own
phone gutter (24px, the same value, on the 4px scale) at ≤600 and keeps the sheet radius, so both
are neutralised here rather than left to apply in the 601–639px gap. */
@media(max-width:639px){
:root{--margin:32px; --radius-sheet:32px;}
}
@media(max-width:600px){
:root{--margin:24px;}
}
/* Widescreen tiers. The container grows with the canvas, and so do the fixed ends of the
type scale: --fs-display and --fs-h2 capped at a ~1300px viewport, so the headline was the
same size at 1440 and at 2576 while the canvas grew 79%, and --fs-body/-label were fixed
rem, so the display-to-small-text ratio widened from 2.4:1 on a phone to 6.4:1 on a 4K
panel and the small text fell away. The 1400 tier is untouched: that width was art-directed.
The type halves of the 1920 / 2400 tiers are DS v1.3.0 values, mirrored; the --container and
--margin halves stay a decision for this surface. */
@media(min-width:1400px){
:root{--container:1460px; --margin:64px;}
}
@media(min-width:1920px){
:root{
--container:1640px; --margin:104px;
--fs-body:1.125rem; --fs-body-sm:1.0625rem; --fs-ui:1rem;
--fs-label:0.875rem; --fs-label-sm:0.75rem;
--fs-lede:1.4rem; --fs-h4:1.375rem; --fs-h5:1.1rem;
--fs-display:clamp(2.5rem,5.4vw,5.2rem); --fs-h2:clamp(1.9rem,3.6vw,3.4rem);
}
}
@media(min-width:2400px){
:root{
--container:2000px; --margin:128px;
--fs-body:1.1875rem; --fs-body-sm:1.125rem; --fs-ui:1.0625rem;
--fs-label:0.9375rem; --fs-label-sm:0.8125rem;
--fs-lede:1.5rem; --fs-h4:1.45rem; --fs-h5:1.15rem;
--fs-display:clamp(2.5rem,5.4vw,5.8rem); --fs-h2:clamp(1.9rem,3.6vw,3.75rem);
}
}