/* ══════════════════════════════════════════════════════════════════════════ TELLSTONE BRAND TOKENS ────────────────────────────────────────────────────────────────────────── The palette, and nothing else. Every page on the site loads this file, so changing a colour here changes it everywhere. That is the whole point of the file — do not add rules to it. See DESIGN.md for the rules behind the palette itself. HOW IT IS BUILT Each colour is stored once, as an RGB triplet. The hex-style token is derived from the triplet, so there is still only one place to edit: --ts-glow-rgb: 123, 94, 118; --ts-glow: rgb(var(--ts-glow-rgb)); The triplet exists because roughly 470 places on the site need the colour at partial opacity. Those are written rgba(var(--ts-glow-rgb), 0.12) so the alpha is preserved exactly. Bump the ?v= on every to this file when you change a value, or browsers will keep serving the old palette. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── The palette ──────────────────────────────────────────────────────── */ --ts-slate-rgb: 35, 43, 64; /* Slate — primary dark ground */ --ts-matter-rgb: 69, 47, 70; /* Matter — deep plum */ --ts-glow-rgb: 123, 94, 118; /* Glow — the signature mauve */ --ts-river-rgb: 229, 229, 238; /* River — pale lilac, borders */ --ts-marble-rgb: 243, 245, 247; /* Marble — cool light ground */ --ts-cloud-rgb: 254, 253, 247; /* Cloud — warm paper, page ground */ --ts-dust-rgb: 252, 236, 216; /* Dust — warm sand highlight */ /* ── In the logo files rather than the palette ────────────────────────── */ --ts-gray-rgb: 140, 149, 152; /* the gray logo variant */ --ts-ink-rgb: 40, 44, 51; /* wordmark ink, softer than Slate */ /* ── Supporting values: states the brand pack does not give us ────────── */ --ts-glow-dark-rgb: 99, 75, 96; /* Glow, hovered or pressed */ --ts-glow-soft-rgb: 201, 181, 196; /* Glow on dark grounds */ --ts-glow-tint-rgb: 250, 246, 249; /* Glow at paper strength */ --ts-body-rgb: 74, 69, 80; /* body copy */ /* ── Plum mid-tones ─────────────────────────────────────────────────────── Between Matter and Glow. Not in the brand pack, but they were already in the CSS as gradient stops and as the sidebar ground, so they are named here rather than left loose. Values unchanged. */ --ts-plum-mid-rgb: 96, 69, 90; /* header band beside the sidebar */ --ts-plum-deep-rgb: 90, 66, 85; /* the sidebar / top bar ground */ --ts-plum-slate-rgb: 58, 52, 72; /* mid stop of the tall hero ramp */ --ts-slate-deep-rgb: 27, 33, 51; /* end stop of the tall hero ramp */ /* ── Product UI greys ───────────────────────────────────────────────────── The working greys the app already used in hundreds of places. Named so a palette change reaches them. See DESIGN.md for which is which. */ --ts-muted-rgb: 122, 117, 128; /* secondary text */ --ts-muted-soft-rgb: 154, 148, 159; /* labels and tertiary text */ --ts-muted-dark-rgb: 86, 81, 96; /* strong muted text */ --ts-plum-muted-rgb: 125, 108, 122; /* muted text with a plum cast */ --ts-glow-pale-rgb: 207, 201, 210; /* pale mauve, disabled and borders */ --ts-line-rgb: 234, 231, 235; /* the default hairline border */ --ts-ground-rgb: 250, 250, 251; /* near-white panel ground */ --ts-ink-blue-rgb: 58, 69, 96; /* body copy with a slate cast */ --ts-slate-2-rgb: 44, 51, 71; /* raised slate, layered surfaces */ /* Headings and footer copy on light grounds. Near-black, so text reads as anchored rather than the slightly soft navy that Slate gives at text size. This exists as its own token because --ts-slate does two jobs: about 410 text uses and 186 backgrounds. Darkening Slate itself would take the grounds down with it, which is not wanted. */ --ts-text-strong-rgb: 18, 22, 28; /* #12161C */ /* One step of the score ramp, sitting between River and Glow. The palette has nothing between L75 and L43, so a four-band scale built only from existing tokens bunches at the dark end. Same hue and saturation as Glow, lightness 68, which keeps a Slate label at 5.95 to 1. See DESIGN.md, Scores and states. */ --ts-glow-mid-rgb: 184, 162, 181; /* #B8A2B5 */ /* The one warm state colour, for a row that is asking the user to finish something. Deliberately NOT the risk amber #F59E0B: risk colours mean a team may fail, and setup being incomplete is not that. Same hue as Dust (33deg) so it sits on a Dust ground at 5.58 to 1, which clears AA at pill size. See DESIGN.md, Scores and states. */ --ts-attention-rgb: 126, 86, 37; /* #7E5625 */ /* ── Derived. Do not edit these, edit the triplets above ──────────────── */ --ts-slate: rgb(var(--ts-slate-rgb)); --ts-slate-2: rgb(var(--ts-slate-2-rgb)); --ts-matter: rgb(var(--ts-matter-rgb)); --ts-glow: rgb(var(--ts-glow-rgb)); --ts-glow-dark: rgb(var(--ts-glow-dark-rgb)); --ts-glow-soft: rgb(var(--ts-glow-soft-rgb)); --ts-glow-tint: rgb(var(--ts-glow-tint-rgb)); --ts-river: rgb(var(--ts-river-rgb)); --ts-marble: rgb(var(--ts-marble-rgb)); --ts-cloud: rgb(var(--ts-cloud-rgb)); --ts-dust: rgb(var(--ts-dust-rgb)); --ts-gray: rgb(var(--ts-gray-rgb)); --ts-ink: rgb(var(--ts-ink-rgb)); --ts-body: rgb(var(--ts-body-rgb)); --ts-plum-mid: rgb(var(--ts-plum-mid-rgb)); --ts-plum-deep: rgb(var(--ts-plum-deep-rgb)); --ts-plum-slate: rgb(var(--ts-plum-slate-rgb)); --ts-slate-deep: rgb(var(--ts-slate-deep-rgb)); --ts-muted: rgb(var(--ts-muted-rgb)); --ts-muted-soft: rgb(var(--ts-muted-soft-rgb)); --ts-muted-dark: rgb(var(--ts-muted-dark-rgb)); --ts-plum-muted: rgb(var(--ts-plum-muted-rgb)); --ts-glow-pale: rgb(var(--ts-glow-pale-rgb)); --ts-line: rgb(var(--ts-line-rgb)); --ts-ground: rgb(var(--ts-ground-rgb)); --ts-ink-blue: rgb(var(--ts-ink-blue-rgb)); --ts-text-strong: rgb(var(--ts-text-strong-rgb)); --ts-glow-mid: rgb(var(--ts-glow-mid-rgb)); --ts-attention: rgb(var(--ts-attention-rgb)); }