/* ============================================================================= WHERE IT GOES — Design tokens A private household spending diagnostic. Fiduciary register: calm, adult, honest. Bar: Stripe / Linear / Ramp / Mercury — a designed product, not a dashboard of gauges. PRIVACY LAW: no CDN, no network font fetch. System stack only. Nothing here causes a request to leave the machine. Author: Elena Sørensen. Adopt these variables in the live app; the component layer (components.css) is built on top of them. ============================================================================= */ :root { /* --------------------------------------------------------------------------- TYPE — system stack, self-contained. Display/UI: the platform's grotesque (SF Pro / Segoe / Roboto). It reads as a product, not a document. Numerics: a monospaced stack so figures align in columns and scan like a ledger — this is the load-bearing choice for a financial tool. Every dollar amount, %, and delta uses --font-mono with tabular figures. --------------------------------------------------------------------------- */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace; /* Fluid type scale — restrained, editorial. Ratio ~1.2, calm not loud. */ --text-2xs: 0.6875rem; /* 11px — micro labels, unit tags */ --text-xs: 0.75rem; /* 12px — captions, secondary meta */ --text-sm: 0.8125rem; /* 13px — dense table body, input labels */ --text-base:0.9375rem; /* 15px — body, standard read */ --text-md: 1.0625rem; /* 17px — panel intro, emphasized body */ --text-lg: 1.375rem; /* 22px — panel titles */ --text-xl: 1.875rem; /* 30px — section headline */ --text-2xl: 2.5rem; /* 40px — the one big number (surplus/deficit) */ --text-3xl: 3.25rem; /* 52px — hero figure, sparingly */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-tight: -0.02em; /* large numerics + headlines */ --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* small-caps labels, kickers */ /* --------------------------------------------------------------------------- COLOR — restrained, warm-neutral paper. NOT a cold blue SaaS shell and NOT a red-everywhere warning panel. The default state of the tool is calm. Ink on paper, one trustworthy accent, and a small semantic set used SPARINGLY — color is earned, never decorative. --------------------------------------------------------------------------- */ /* Surfaces — warm off-white, layered like paper stacked on a desk. */ --paper: #FBFAF7; /* app background — warm, not clinical white */ --surface: #FFFFFF; /* panels, cards */ --surface-sunk: #F4F2EC; /* input wells, table zebra, inset areas */ --surface-rail: #F7F5F0; /* the input rail / sidebar */ /* Ink — near-black, warm. Full hierarchy in one hue for calm. */ --ink: #1C1A17; /* primary text, big numbers */ --ink-strong: #0F0E0C; /* the single most important figure */ --ink-muted: #5B564E; /* secondary text, meta */ --ink-faint: #8C867B; /* captions, units, disabled */ --ink-ghost: #B5AFA4; /* placeholder, hairline labels */ /* Lines — hairlines that structure without shouting. */ --line: #E7E3D9; /* standard hairline */ --line-strong: #D6D1C4; /* emphasized divider, table head rule */ --line-faint: #F0EDE5; /* zebra edge, inner rules */ /* Accent — a single quiet ink-blue. Trust, not excitement. Used for the active input, primary action, links, focus ring. One accent, held. */ --accent: #2C5578; --accent-hover: #234862; --accent-soft: #E8EEF3; /* accent-tinted fill (selected row, active tab) */ --accent-ink: #FFFFFF; /* text on accent */ /* ----------------------------------------------------------------------------- SEMANTIC STATE — the honest signals. Muted, adult, never alarmist. These do the load-bearing work of "big vs leak" and are used with restraint. WITHIN RANGE — neutral/sage. "This is fine." The default for most rows. WATCH — amber. "A little over — worth a look." Not a crisis. LEAK — clay/terracotta, NOT fire-engine red. "This is oversized; here's real money." Warm and serious, not punishing. RECOVERED — the same sage as within-range, used positively for money you get back. Green is reserved for RECOVERED money only, never for "good behavior" scoring. ----------------------------------------------------------------------------- */ /* Within range — quiet, almost invisible. Being fine should not draw the eye. */ --ok-ink: #4A6B57; --ok-fill: #EEF3EE; --ok-line: #CFDDD1; /* Watch — amber, muted (mustard, not neon). */ --watch-ink: #8A6A22; --watch-fill: #F7F0DD; --watch-line: #E5D6AF; /* Leak — clay/terracotta. Serious, warm, NOT scolding red. */ --leak-ink: #A24A38; --leak-fill: #F6E7E2; --leak-line: #E3C4BA; /* Recovered / positive money — sage green, reserved for money you get back. */ --gain-ink: #3F6B4E; --gain-fill: #E9F1EA; --gain-line: #C4DAC9; /* Deficit / true negative surplus — clay ink for the one headline number only. Never sprinkled across the page. */ --deficit-ink: #A24A38; /* --------------------------------------------------------------------------- THE TWO BAR TREATMENTS — "actually big vs feels big" reads through TWO distinct visual languages so the reader never confuses them (see the note block at the bottom of this file). These are the fills the bars use. --------------------------------------------------------------------------- */ /* SIZE bar — how big in absolute dollars. Neutral ink-grey. Length = dollars. A big neutral bar means "this is genuinely large," regardless of judgment. */ --bar-size: #C9C3B6; --bar-size-lead: #A8A192; /* the largest one or two, slightly darker */ /* BENCHMARK RANGE — the sane band is a RANGE (low + high), per engine §5. Rendered as a faint sane-zone band on the track (low edge → high edge), so the reader sees the whole acceptable window, not just a single ceiling. The HIGH edge is the ceiling: recoverable trims TO the high edge, never to zero. */ --bar-range: rgba(74, 107, 87, 0.14); /* sane-zone band fill (sage, faint) */ --bar-range-lo: #B3AE9F; /* the LOW edge tick (start of sane range) */ --bar-benchmark: #6E7A5F; /* the HIGH edge tick — the ceiling of "fine" */ /* OVERSHOOT marker — how far past the HIGH edge. This is the JUDGMENT layer, rendered as a distinct clay segment ON the size bar past the high tick, never as its own competing bar. Clay = over the sane ceiling. */ --bar-overshoot: #C2705C; /* --------------------------------------------------------------------------- SPACING — 4px base, calm rhythm. Density comes from consistent small steps, not from cramming. --------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3.5rem; /* 56 */ --space-9: 5rem; /* 80 */ /* --------------------------------------------------------------------------- RADIUS — soft but not toy-like. Products, not bubbles. --------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 7px; --radius-lg: 11px; --radius-xl: 16px; /* --------------------------------------------------------------------------- ELEVATION — barely-there. Paper on a desk, not floating glass. One shadow for panels, one for the sticky headline, and a focus ring. --------------------------------------------------------------------------- */ --shadow-panel: 0 1px 2px rgba(28, 26, 23, 0.04), 0 1px 1px rgba(28, 26, 23, 0.03); --shadow-lift: 0 4px 16px rgba(28, 26, 23, 0.08), 0 1px 3px rgba(28, 26, 23, 0.05); --ring: 0 0 0 3px rgba(44, 85, 120, 0.18); /* --------------------------------------------------------------------------- LAYOUT — the desktop is a true two-column product: an input RAIL and a diagnostic CANVAS of panels. Not a stacked form. --------------------------------------------------------------------------- */ --rail-width: 384px; /* input column on desktop */ --canvas-max: 1120px; /* diagnostic panel column max */ --shell-max: 1560px; /* full app max width */ --panel-gap: var(--space-5); --page-pad: var(--space-7); /* Motion — quiet. Numbers should update calmly, never bounce or celebrate. */ --ease: cubic-bezier(0.2, 0, 0.13, 1); --dur-fast: 120ms; --dur: 200ms; } /* ----------------------------------------------------------------------------- TREATMENT PRINCIPLES — how the two load-bearing moments read. (Documented in-file so Marcus builds them the same way I designed them.) ┌─────────────────────────────────────────────────────────────────────────┐ │ "ACTUALLY BIG vs FEELS BIG" — two layers, never two competing bars. │ │ │ │ Each category row shows ONE horizontal SIZE bar (--bar-size), whose │ │ LENGTH is the dollar amount as a share of the largest outflow. Big bar │ │ = actually big. This answers "where does the money actually go." │ │ │ │ Overlaid on that same track: the sane RANGE band (--bar-range) from the │ │ band LOW edge (--bar-range-lo tick) to the band HIGH edge │ │ (--bar-benchmark tick). The band is a RANGE, not a single number │ │ (engine §5) — the reader sees the whole acceptable window. Then, only │ │ when the size bar runs PAST the high tick, a clay OVERSHOOT segment │ │ (--bar-overshoot) fills tick→bar-end. Clay past the HIGH edge = the │ │ oversized part (the leak, and exactly the recoverable dollars — trim to │ │ the high edge, never to zero). This answers "what feels big is not the │ │ same as what IS big." │ │ │ │ So a long grey bar ending inside the sane band (rent) = actually large │ │ but in range, NOT a problem. A short bar whose tip pokes past the high │ │ tick with a clay tail (a $90 subscription creep) = small in dollars but │ │ over its range, flagged anyway. Size and judgment read as separate facts │ │ on one line. THAT distinction is the whole tool. │ └─────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────┐ │ LEAK FLAG at a glance — a leak is legible without reading a number. │ │ │ │ The engine emits EXACTLY THREE leak KINDS (§3.3). The tag copy + color │ │ map 1:1 to them: │ │ • "over-benchmark" → tag "OVER RANGE" (clay --leak) headline │ │ • "subscription-creep" → tag "RECURRING" (clay --leak) headline │ │ • "essential-note" → tag "WORTH A GLANCE" (amber --watch) QUIET — │ │ groceries/utilities, NEVER a headline leak (§3.3.1). │ │ Plus a non-kind badge: isLargeAndOver → "LARGE + OVER" (the sticky ones). │ │ │ │ A flagged row carries: (1) a left-edge marker (3px, --leak-ink for the │ │ two headline kinds, --watch-ink for essential-note), (2) the category │ │ label in --ink (never dimmed — you must read it), (3) the KIND tag, │ │ (4) the recoverable dollar figure in --gain-ink on the right (money │ │ back). The row is NOT flooded red; only the edge + tag carry color. │ │ Being fine draws no ink; a leak draws exactly enough. │ └─────────────────────────────────────────────────────────────────────────┘ ----------------------------------------------------------------------------- */