/* Chain Drain — design tokens Restyled to the MUT (Master of Urban Technology) Visual Identity Guide, August 2026 — see style-guide.pdf in the repo root. Keep this as the single source of truth for color / type / spacing so the homepage, research pages, company pages and charts all read as one system. The LAYOUT tokens below (grid, margins, gutters, vertical rhythm) are unchanged from the original Figma build — the hover drawers and chart geometry depend on them, so the restyle deliberately touches colour and type only. */ :root { /* ================= COLOR ================================================= MUT ground is white with black type; colour arrives as blurred washes behind the type, never as the type itself. (Guide p.2 "SHAPES + BLURS": "blending crisp edges with a blurred wash".) */ /* Field and raised surfaces are the SAME tint — a hair of lavender off white. Keeping them equal means a drawer, sheet or footer bar never separates by tone; every one of those edges is carried by a 1px rule (--rule) instead, which is the guide's crisp-edge pairing. Two consequences worth knowing: the "erase to paper" hover states on the tick bars and voronoi cells now erase EXACTLY to the field, and anything that relied on white-on-white being invisible still is. */ --color-bg: #F3F0F8; --color-ink: #000000; /* all type, rules, and chart line work */ --color-paper: #F3F0F8; /* raised surfaces: drawers, sheets, the footer bar */ --color-plank: #FFFFFF; /* the ONE surface that separates by tone, not rule: true white strips sitting on the tinted field (the /notes/ sidebar planks) */ /* Secondary type. Never fade text with opacity — de-emphasise with size, weight or this colour. 7.0:1 on white; --ink-faint is 3.5:1, so it is for non-essential chrome only (legend counts, disabled options). */ --ink-quiet: #5A5A5A; --ink-faint: #8A8A8A; /* Hairline rules. MUT pairs soft washes with crisp edges, so surfaces that used to separate by tone now separate by a 1px black line. */ --rule: var(--color-ink); --rule-soft: color-mix(in srgb, var(--color-ink) 18%, transparent); /* The footer bar's fill. Was a distinct grey; now white like the field, with the separation carried by --rule. Kept as a token because the technology x phase page paints its whole field this colour to sit flush with the bar — two consumers, one value. */ --color-footer-grey: var(--color-paper); /* ---- MUT primary base colours (guide p.3 "COLOR") --------------------- */ --mut-maize: #FFCB05; --mut-green: #25EB96; --mut-sky: #42C1FA; --mut-lilac: #D27CFF; --mut-magenta: #FF0093; /* ---- MUT secondary tints --------------------------------------------- The guide specifies these "for backgrounds supporting text set below 14pt", and directs Magenta to swap to Pink in that role. */ --mut-maize-tint: #FFCF03; --mut-green-tint: #91CE9D; --mut-sky-tint: #74CBF2; --mut-lilac-tint: #D0ADD1; --mut-pink: #FFB4B7; /* the small-text-safe stand-in for Magenta */ /* ---- the paper's four scenarios (Chain-Drain §1) ------------------------ Also the four quadrants /research/ explains. One base hue each, and they are SWATCH colours only — a scenario's label is always set in ink, never in its own hue, because all four are far too light for 11px type on white (see "Never put small text in a base hue" in CLAUDE.md). */ --scenario-play: var(--mut-green); --scenario-fast-forward: var(--mut-sky); --scenario-eject: var(--mut-lilac); --scenario-pause: var(--mut-magenta); /* ---- Derived shades — NOT in the guide ------------------------------- A 13-band stacked chart and a 16-cluster graph need more separable steps than ten swatches provide. These are darkened members of the same five hue families, so every mark still reads as MUT; they exist purely to give categorical charts enough contrast. Guide colours above are authoritative; reach for these only when you have run out of them. */ --mut-magenta-deep: #A6005F; --mut-sky-deep: #0E6FA8; --mut-maize-deep: #A67F00; --mut-lilac-deep: #8A3FC0; --mut-green-deep: #129660; --mut-maize-light: #FFE27A; --mut-sky-light: #BEE4FB; /* Sky ramp, deep -> light. Used where one graph has to separate several categories at once (the value-proposition circles) without leaving the single-hue rule. Every step clears 4.5:1 against black, because the in-circle labels are black — do not extend this darker. */ --mut-sky-1: #1B86C4; --mut-sky-2: #2E9FDD; --mut-sky-3: #42C1FA; --mut-sky-4: #5FCBFB; --mut-sky-5: #7CD5FC; --mut-sky-6: #99DFFD; --mut-sky-7: #B6E9FE; /* ---- data marks ------------------------------------------------------- EVERY graph on the site is Sky and a tone of Sky. Spreading the five base hues one-per-graph was tried and pulled the page toward Easter — five pastels competing on one screen reads as decoration, not as data. One hue across the whole site means colour carries meaning INSIDE a graph (primary vs additional, or one category vs the next) and never between them. The other MUT hues stay available for the chrome and the cover. Two-state encoding on the tick bars / voronoi cells / legend: solid = primary, lighter = additional. */ --graph-fill: var(--mut-sky); /* primary (solid) marks */ --graph-fill-2: var(--mut-sky-light); /* secondary (additional) marks */ /* Legacy chart aliases, kept so older rules keep resolving. */ --chart-fill: var(--mut-sky); /* solid tick = primary customer */ --chart-outline: var(--color-ink); /* hollow tick = additional customer */ --chart-related: var(--mut-sky-tint); /* same-company ticks lit on hover */ /* ---- interactive chrome ---------------------------------------------- Segmented controls, filter pills and selects. Green, so the interactive chrome is never mistaken for a data mark — the graphs are Sky and only Sky. Split out from --graph-fill-2 (which they used to borrow) so recolouring the DATA never recolours the UI, and vice versa. The ink on it stays BLACK: black on Green is 13.4:1, white is 1.6:1. */ --ui-accent: var(--mut-green); --ui-accent-ink: var(--color-ink); /* Drawer 2×2 mini-matrix — border, crosshair, and labels. Black line work against the washes, per the guide's crisp-edge/soft-wash pairing. */ --mmx-line: var(--color-ink); /* ================= TYPE ================================================== The guide's three faces are Editorial Old (headlines), Favorit Mono (captions/subtitles) and Helvetica Neue LT Pro (body). All three are commercial, so each maps to the closest widely-available free face: Editorial Old -> Playfair Display (Google) — high-contrast display serif with a calligraphic italic. Bodoni Moda is the alternative if a truer Didone is wanted. Favorit Mono -> JetBrains Mono (Google) — neutral grotesque mono, holds up at caption sizes. Helvetica Neue LT Pro-> Inter (Google) — the standard free neo-grotesque; already loaded site-wide. */ --font-display: "Playfair Display", "Times New Roman", Times, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---- Centroid mark on the aggregate 2x2 ---------------------------------- The weighted centre of the bubbles shown on a chart-label hover. EVERY visual property lives here: js/mini-matrix.js does the arithmetic and sets left/top, nothing else. Change any of these four and every page that draws the widget follows. The symbol is a mask, not an image, so --mmx-centroid-color paints it — swap the SVG below to change the glyph (keep the stroke opaque; the mask reads alpha, so transparent = hidden). Percent-encode <, > and #. */ --mmx-centroid-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4 L16 16 M16 4 L4 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --mmx-centroid-size: 20px; /* Green, not the matrix's own black line work: the centroid is the one mark on the widget that is DERIVED rather than observed — a weighted average of the bubbles, not a company. Green is the only MUT hue the charts don't already spend (data is Sky, chrome is Green), so it separates without inventing a colour. */ --mmx-centroid-color: var(--mut-green); --mmx-centroid-opacity: 0.6; /* ---- type scale (desktop = Figma; clamped for smaller viewports) ---- */ --fs-title: clamp(56px, 8vw, 110px); --fs-body: clamp(22px, 2.6vw, 36px); /* Graph chrome: bar labels + counts, legends, and filter pills all share one small size so the charts read as one system. Set in Favorit Mono's stand-in (JetBrains Mono), which is exactly the guide's caption role. */ --fs-chart-label: 12px; /* Kicker / eyebrow tracking. Uppercase mono, widely letterspaced — the "DESIGN GUIDE + PROJECT DOCUMENTATION" line on every guide page. */ --track-kicker: 0.14em; /* ---- layout grid (Figma: 5 columns, 20px margin, 20px gutter on 1512px) ---- Derived + verified against geometry: body = cols 1-3 (875px), overlay = 1 col (279px). */ --grid-cols: 5; --margin: 20px; /* outer margin, left & right */ --gutter: 20px; /* gutter between columns */ /* one column's width relative to the viewport — for fixed/overlay elements that sit outside the grid container but must align to a column track. */ --col: calc((100vw - (2 * var(--margin)) - (4 * var(--gutter))) / 5); /* ---- vertical spacing (from Figma) ---- */ --edge-top: 56px; /* title top inset */ --gap-title-body: 72px; /* gap between title block and body */ } /* ---- base element defaults ---- Links default to the ink so every plain matches the type instead of the browser's default link blue. Loaded on every page, so this is the single site-wide default; more specific component rules still override. */ a { color: var(--color-ink); } /* ---- shared display / caption treatments ------------------------------- The guide sets section titles in Editorial Old ALL CAPS and captions, subtitles and descriptions in Favorit Mono. These two utility classes carry that so individual page CSS doesn't restate it. */ .mut-kicker, .kicker { font-family: var(--font-mono); font-size: var(--fs-chart-label); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-kicker); }