/* ══════════════════════════════════════════════════════════════════════════
Zar — news brief dashboard. Design tokens.
Direction, per design.md § "Visual standard for the dashboard", revised
15 Sept: a bright, confident product surface — reference points are
Stripe's dashboard and Linear, not a Bloomberg terminal. The original
Swiss/Brutalist pass (rules-only, zero radius, zero shadow, zero accent)
is superseded; this file is the new one, held throughout.
Structure now comes from soft elevation, not hairlines alone: cards
with a radius and a quiet shadow group related content, one accent
colour carries UI emphasis (never a data value — up/down/flag stay
reserved for prices and system state), and the page has room to
breathe. Density is still the goal for the row list itself — this is
a trading screen, not a marketing page — but density and warmth are
not opposites, and the old file traded away the second for the first
more than it needed to.
Two voices, held apart throughout (unchanged — this split was never
the problem):
MACHINE — IBM Plex Mono, uppercase, letterspaced. Labels, tickers,
figures, timestamps, controls.
NEWS — Archivo. Headlines and prose, and only those.
Still absent: Inter, Space Grotesk, emoji as markers, centred text.
Those were never what made the old version read as a terminal — the
zero-radius/zero-shadow/zero-accent rule was — so they stay banned.
── Fonts ────────────────────────────────────────────────────────────────
No @import here: an @import inside a linked stylesheet serialises a
second round trip. Put these two lines in the server-rendered .
── Breakpoints ──────────────────────────────────────────────────────────
Custom properties do not work in media queries, so these are constants,
documented not declared.
max-width: 1100px — side panel goes full-bleed over the list
max-width: 760px — drop the source and kind columns into the
headline's second line
max-width: 480px — single column, figures stay right-aligned
══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── SURFACE & INK ──────────────────────────────────────────────────────
Bright canvas, white cards. --ground is the page behind everything;
--surface is what content sits on. Four ink levels is still the whole
range — that discipline was never the problem either. */
--ground: #F5F7FA; /* the page canvas */
--ground-sunk: #EAEEF3; /* wells, resting hover */
--surface: #FFFFFF; /* cards: sections, panel, chips */
--ink: #0B1324; /* headlines, tickers, figures */
--ink-dim: #4B5768; /* source names, reason lines, read rows */
--ink-faint: #677286; /* timestamps, counts, resting controls —
darkened 15 Sept: the original #8D97A8
measured 2.9:1 on white, below WCAG AA's
4.5:1 for real text (timestamps are read
content, not decoration). This clears
4.5:1 against both --surface and --ground. */
--ink-inverse: #FFFFFF; /* ink on an --ink or --accent fill */
--rule: #E3E8EF; /* quiet 1px card/row border */
--rule-heavy: #D3DAE4; /* still soft — no full-ink structural rule
anywhere in the new system */
/* ── ACCENT ─────────────────────────────────────────────────────────────
One confident colour, new to this pass. It carries UI emphasis only —
active filters, links, primary actions, the brand mark — and never
touches a data value. --up/--down/--flag stay the only colours a
number or a system-state is allowed, so the rule "colour on data
always means the same thing" survives the redesign intact. */
/* Cobalt blue (17 Sept) — was #4A5BD6, an indigo that read as the same
blue-purple Stripe/Linear themselves use. Hanzala's call: keep the
bright/confident direction those two reference, drop the shade they're
actually coded by. Contrast re-verified against every surface below,
not just carried over from the old values. */
--accent: #2952CC;
--accent-hover: #223F9E;
--accent-soft: #E8EEFB; /* tint background for badges/chips */
--accent-ink: #FFFFFF; /* ink on an --accent fill */
/* ── SEMANTIC COLOUR ────────────────────────────────────────────────────
Unchanged in meaning from the first pass — only the exact hues moved,
to sit correctly on a white/near-white surface instead of paper.
--up / --down direction of a number. Only ever a number.
--flag the system talking about itself — a source unreachable,
data stale. Never a property of the market. */
--up: #0E8159; /* darkened from #0F8A5F — 4.4:1 on white failed AA */
--down: #D23C3C;
--flag: #9D6509; /* darkened from #B4740A — 3.9:1 on white failed AA */
/* ── TYPEFACES ─────────────────────────────────────────────────────────
Archivo stays — no complaint about the headline voice. The mono voice
changed 15 Sept: IBM Plex Mono's very rectangular, high-contrast
letterforms read as "boxy" once the rest of the page went soft and
bright, and Hanzala asked for "something familiar" over the old pick's
narrow legibility optimisation. Roboto Mono is that — it's the mono
face most people have already seen somewhere (Android, Google's own
products, most fintech dashboards) and its terminals are rounder.
Trade-off, flagged rather than silently dropped: Plex's zero was
slashed specifically so 0/O and 1/l/I never get misread on a screen
of tickers and prices; Roboto Mono's isn't. tabular-nums still holds
the column alignment regardless — that contract doesn't depend on
which mono face is loaded. */
--sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* ── TYPE SCALE ─────────────────────────────────────────────────────────
Body size raised one notch 15 Sept — 14 → 15px — per Hanzala's own
flag: a 60-year-old reading this at desk distance for long stretches
deserves a floor above the density-first 14px the first pass picked.
11 / 15 / 17 / 19 then 23 / 31 / 45 — step-1 through step-5 nudged up
with it so the ramp's proportions (and the gap to step-0) don't
collapse; --step--1 stays at 11px on purpose, unchanged — it's short
mono caps labels only, never prose, and tokens.md already reasoned
through why that's legible at 11px for him specifically. */
--step--1: 0.6875rem; /* 11px — mono caps labels only. Never prose */
--step-0: 0.9375rem; /* 15px — row body. The size he actually reads */
--step-1: 1.0625rem; /* 17px — expanded row, panel prose */
--step-2: 1.1875rem; /* 19px — figures */
--step-3: 1.4375rem; /* 23px — panel heading */
--step-4: 1.9375rem; /* 31px — the verdict line */
--step-5: 2.8125rem; /* 45px — the one big number */
/* ── WEIGHT, LEADING, TRACKING ──────────────────────────────────────────
Tracking on section labels eased off — 0.14em read as a bulletin
board; 0.07em still reads as a deliberate eyebrow label without
shouting. Everything else unchanged. */
--wt-normal: 400;
--wt-medium: 500; /* mono labels and figures */
--wt-semi: 600; /* headlines, tickers, filings */
--wt-bold: 700; /* the verdict line */
--lh-row: 1.3; /* item rows — eased from 1.25 for the softer feel */
--lh-body: 1.5;
--lh-head: 1.12;
--lh-note: 1.6;
--lh-flush: 1;
--track-section: 0.07em; /* SECTION HEADERS — eyebrow, not bulletin */
--track-label: 0.08em; /* kind labels, buttons, table heads */
--track-ticker: 0.04em; /* NVDA at small size */
--track-head: -0.02em; /* display sans tightens as it grows */
--track-fig: -0.012em; /* mono figures, optical only */
--tnum: tabular-nums;
/* ── SPACE ──────────────────────────────────────────────────────────────
Same 4px base. The ceiling is raised — a card needs padding a
hairline-only system never did — and one step added for page-level
air. Row density itself barely moves; the breathing room goes into
card padding and gaps between cards, not into the rows he scans. */
--space-0: 0;
--space-1: 0.125rem; /* 2px */
--space-2: 0.25rem; /* 4px */
--space-3: 0.375rem; /* 6px */
--space-4: 0.5rem; /* 8px */
--space-4-5: 0.625rem; /* 10px — row padding, the one new half-step */
--space-5: 0.75rem; /* 12px */
--space-6: 1rem; /* 16px */
--space-7: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-9: 3rem; /* 48px */
--space-10: 4rem; /* 64px — page-level air only */
/* ── RULES ──────────────────────────────────────────────────────────────
Still the finest-grained separator, used inside a card between rows.
No longer the *only* structural element — cards do the grouping a
heavy rule used to. */
--rule-w-hair: 1px;
--rule-w-heavy: 1px; /* section rules are no longer 2px full-ink */
--rule-w-marker: 3px;
--rule-row: var(--rule-w-hair) solid var(--rule);
--rule-section: var(--rule-w-heavy) solid var(--rule-heavy);
--rule-marker: var(--rule-w-marker) solid var(--accent);
/* ── GEOMETRY ───────────────────────────────────────────────────────────
The core reversal: radius exists now, and is used. */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--page-max: 88rem; /* was 116rem — a centred, bounded canvas is
part of "product", not "terminal" */
--read-max: 46rem;
--headline-max: 92ch;
--head-h: 3.5rem; /* taller masthead, more like a product nav */
/* ── SHADOW ─────────────────────────────────────────────────────────────
New. Quiet, layered, neutral-tinted — never the accent colour, so it
reads as elevation rather than a glow. Three steps: a card at rest,
a card on hover, the panel when it's a floating surface. */
--shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
--shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
--shadow-panel: 0 16px 40px rgba(16, 24, 40, 0.16), 0 4px 10px rgba(16, 24, 40, 0.06);
/* ── MOTION ─────────────────────────────────────────────────────────────
A hover/press now has something to ease — background, shadow and
translateY all move together on cards, so the linear-only rule from
the flat version is dropped in favour of a short standard ease. */
--dur-instant: 80ms;
--dur-panel: 180ms;
--ease: cubic-bezier(0.2, 0, 0, 1);
--ease-panel: cubic-bezier(0.2, 0, 0, 1);
/* ── FOCUS ──────────────────────────────────────────────────────────────
Accent, not ink — a focus ring is UI chrome, exactly the category the
accent colour exists for. */
--focus-ring: 2px solid var(--accent);
--focus-offset: 2px;
/* ════════════════════════════════════════════════════════════════════════
COMPONENT TOKENS
════════════════════════════════════════════════════════════════════════ */
/* ── 1. ITEM ROW ────────────────────────────────────────────────────────
Columns unchanged — alignment down the page is still non-negotiable,
and that was never the "vibecoded" complaint. The row itself now
lives inside a card (see .view in the component CSS) rather than
directly on the page canvas, and a hovered row gets a soft fill with
rounded corners instead of a flat highlight to the container edge. */
--col-source: 9rem;
--col-kind: 4.75rem;
--col-ticker: 4rem;
--col-move: 5.5rem;
--col-time: 4.25rem;
--col-feedback: 3.5rem;
--row-cols: var(--col-source) var(--col-kind) minmax(0, 1fr)
var(--col-ticker) var(--col-move) var(--col-time)
var(--col-feedback);
--row-pad-y: var(--space-4-5); /* 10px, up from 6px */
--row-pad-x: var(--space-5);
--row-gap-x: var(--space-5);
--row-min-h: 2.125rem; /* 34px */
--row-lh: var(--lh-row);
--row-size: var(--step-0);
--row-rule: var(--rule-row);
--row-bg: transparent;
--row-bg-hover: var(--ground-sunk);
--row-bg-alt: transparent;
--row-radius: var(--radius-sm); /* new — hover fill is rounded */
--row-ink: var(--ink);
--row-meta-ink: var(--ink-dim);
--row-time-ink: var(--ink-faint);
--row-read-ink: var(--ink-dim);
--row-marker: var(--rule-marker);
--row-marker-pad: var(--space-5);
--row-headline-weight: var(--wt-semi);
--row-headline-lines: 1;
/* ── 2. SEPARATORS ────────────────────────────────────────────────────── */
--sep-row: var(--rule-row);
--sep-section: var(--rule-row); /* sections separate by card now, not
a heavy rule */
--sep-mast: var(--rule-row);
/* ── 3. SOURCE-TYPE LABELS ────────────────────────────────────────────────
Was bracketed mono caps with no box. Now a small pill — background
tint plus ink, radius-pill — because a pill reads as "product UI"
immediately in a way bracket-text never will, and it costs nothing
the rest of the system doesn't already pay for elsewhere. */
--kind-font: var(--mono);
--kind-size: var(--step--1);
--kind-track: var(--track-label);
--kind-case: uppercase;
--kind-radius: var(--radius-pill);
--kind-pad: 0.0625rem 0.5rem;
--kind-filing: var(--ink);
--kind-filing-bg: var(--ground-sunk);
--kind-filing-weight: var(--wt-semi);
--kind-news: var(--ink-dim);
--kind-news-bg: transparent;
--kind-news-weight: var(--wt-medium);
--kind-data: var(--ink-dim);
--kind-data-bg: var(--ground-sunk);
--kind-data-weight: var(--wt-medium);
--kind-macro: var(--accent);
--kind-macro-bg: var(--accent-soft);
--kind-macro-weight: var(--wt-medium);
--kind-comment: var(--ink-faint);
--kind-comment-bg: transparent;
--kind-comment-weight: var(--wt-normal);
--kind-promo: var(--flag);
--kind-promo-bg: #FBF0DC;
--kind-promo-weight: var(--wt-bold);
/* ── 4. FIGURES ─────────────────────────────────────────────────────────
Unchanged in mechanism — monospace, tabular, right-aligned, fixed dp
server-side. That contract is why prices line up; nothing about a
brighter surface changes it. */
--fig-font: var(--mono);
--fig-nums: var(--tnum);
--fig-size: var(--step-2);
--fig-size-inline: var(--step-0);
--fig-size-hero: var(--step-5);
--fig-weight: var(--wt-medium);
--fig-track: var(--track-fig);
--fig-lh: var(--lh-flush);
--fig-align: right;
--fig-up: var(--up);
--fig-down: var(--down);
--fig-flat: var(--ink-dim);
--fig-vol: var(--ink);
--fig-vol-hot: var(--accent);
--fig-vol-hot-weight: var(--wt-semi);
--fig-base-ink: var(--ink-faint);
/* ── 5. SECTION HEADERS ─────────────────────────────────────────────────
Eyebrow label over the card, not a bulletin-board rule. Colour moved
from full ink to ink-dim — it no longer needs to be the loudest thing
on the page, the card boundary now does structural work too. */
--sec-font: var(--mono);
--sec-size: var(--step--1);
--sec-weight: var(--wt-semi);
--sec-track: var(--track-section);
--sec-case: uppercase;
--sec-ink: var(--ink-dim);
--sec-count-ink: var(--ink-faint);
--sec-rule: var(--rule-row);
--sec-pad-t: var(--space-8);
--sec-pad-b: var(--space-4);
/* ── 6. TICKER SIDE PANEL ───────────────────────────────────────────────
Was a flat aside with a heavy border. Now a floating card: inset
margin, radius on the left corners, --shadow-panel instead of a
border doing the "different object" work. */
--panel-w: 26rem;
--panel-w-wide: 30rem;
--panel-bg: var(--surface);
--panel-edge: var(--rule-w-hair) solid var(--rule);
--panel-radius: var(--radius-lg);
--panel-shadow: var(--shadow-panel);
--panel-inset: var(--space-4);
--panel-pad-x: var(--space-7);
--panel-pad-y: var(--space-7);
--panel-top: calc(var(--head-h) + var(--panel-inset));
--panel-z: 50;
--panel-dur: var(--dur-panel);
--panel-ease: var(--ease-panel);
--panel-ticker-size: var(--step-3);
--panel-ticker-weight: var(--wt-semi);
--panel-ticker-track: var(--track-ticker);
--panel-label-ink: var(--ink-faint);
--panel-row-rule: var(--rule-row);
--panel-row-pad-y: var(--space-4);
--panel-link-ink: var(--accent);
/* ── 7. FEEDBACK CONTROL ────────────────────────────────────────────────
Same no-hue rule as before — a thumbs-down is still not --down.
Buttons now round to --radius-sm so they read as controls, not just
glyphs sitting on the page. */
--fb-hit: 2rem;
--fb-icon: 0.875rem;
--fb-stroke: 1.5px;
--fb-gap: var(--space-2);
--fb-radius: var(--radius-sm);
--fb-ink: var(--ink-faint);
--fb-ink-hover: var(--ink);
--fb-bg-hover: var(--ground-sunk);
--fb-ink-on: var(--ink-inverse);
--fb-bg-on: var(--ink);
--fb-dur: var(--dur-instant);
/* ── 8. VIEW STATES ─────────────────────────────────────────────────────
Each section is now a card (--view-*-rule separates ROWS inside the
card, not the sections from each other — the card boundary plus
--space between cards does that job now). Same three tiers, same
"nothing is ever filtered away" rule underneath. */
--view-watchlist-rule: var(--rule-row);
--view-watchlist-pad-y: var(--space-4-5);
--view-watchlist-ink: var(--ink);
--view-watchlist-meta-ink: var(--ink-dim);
--view-watchlist-score: table-cell;
--view-watchlist-reason: block;
--view-macro-rule: var(--rule-row);
--view-macro-pad-y: var(--space-4-5);
--view-macro-ink: var(--ink);
--view-macro-meta-ink: var(--ink-dim);
--view-macro-score: none;
--view-macro-reason: none;
--view-general-rule: var(--rule-row);
--view-general-pad-y: var(--space-3);
--view-general-ink: var(--ink);
--view-general-meta-ink: var(--ink-faint);
--view-general-score: none;
--view-general-reason: none;
/* ── SEVERITY ───────────────────────────────────────────────────────────
The left marker rule now carries the accent colour instead of full
ink, so a pushed row reads as "flagged by the product", consistent
with everything else the accent touches. Still weight-led, not a
wash of colour across the row. */
--sev-push: var(--accent);
--sev-brief: var(--ink-dim);
--sev-none: var(--ink-faint);
/* ── TRUST FOOTER ───────────────────────────────────────────────────────
Unchanged in spirit — quiet, never hidden. */
--footer-font: var(--mono);
--footer-size: var(--step--1);
--footer-track: var(--track-label);
--footer-ink: var(--ink-faint);
--footer-ok: var(--ink-faint);
--footer-stale: var(--flag);
--footer-rule: var(--rule-row);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK
Only primitives flip. Every component token above is an alias, so the
whole system follows from these lines. Dark mode gets its own card
surface, one step off the ground colour, so cards still read as
elevated rather than the whole page going flat.
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ground: #0B0E14;
--ground-sunk: #151923;
--surface: #12151D;
--ink: #EDEFF4;
--ink-dim: #ACB3C2; /* 17 Sept: lightened from #9BA3B4, "everything is a bit feint" */
--ink-faint: #858DA0; /* 17 Sept: lightened from #767F92 (itself lightened from #666E80 for AA) */
--ink-inverse: #0B0E14;
--rule: #232833;
--rule-heavy: #2B303C;
--accent: #6C93F5;
--accent-hover: #8CACF8;
--accent-soft: #17233F;
--accent-ink: #0B0E14;
--up: #3FC088;
--down: #F0776F;
--flag: #E0A83E;
}
}
:root[data-theme="dark"] {
--ground: #0B0E14;
--ground-sunk: #151923;
--surface: #12151D;
--ink: #EDEFF4;
--ink-dim: #ACB3C2; /* 17 Sept: lightened from #9BA3B4, "everything is a bit feint" */
--ink-faint: #858DA0; /* 17 Sept: lightened from #767F92 (itself lightened from #666E80 for AA) */
--ink-inverse: #0B0E14;
--rule: #232833;
--rule-heavy: #2B303C;
--accent: #6C93F5;
--accent-hover: #8CACF8;
--accent-soft: #17233F;
--accent-ink: #0B0E14;
--up: #3FC088;
--down: #F0776F;
--flag: #E0A83E;
}
/* ══════════════════════════════════════════════════════════════════════════
REDUCED MOTION
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 0ms;
--dur-panel: 0ms;
}
}