/* ============================================================ Investment 2.0 — Design tokens (single source of truth) ------------------------------------------------------------ RULES (enforced by checks/design-lint.sh and AGENTS.md): - This is the ONLY file allowed to contain raw hex colours and raw px values. - Everything else references var(--token). - Theming: light/dark/auto via CSS light-dark(). is rendered server-side from User.theme_pref (default "auto") — no flash of wrong theme. Requires a 2024+ browser (Chrome 123+, FF 120+, Safari 17.5+): fine for this private portal. ============================================================ */ /* ---- theme switching ------------------------------------- */ :root, html[data-theme="auto"] { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } :root { /* ---- primitive palette (never used directly in pages) --- */ --gray-0: #ffffff; --gray-50: #f6f7f9; --gray-100: #eceef1; --gray-200: #d9dde3; --gray-300: #b9bfc9; --gray-400: #9299a5; --gray-500: #6b6b6b; /* 4.97:1 on gray-50, 5.3:1 on white */ --gray-700: #343434; --gray-850: #262626; --gray-900: #202020; --gray-950: #0a0a0a; --blue-500: #2563eb; --blue-400: #5b8bf5; --green-600:#157f3d; --green-400:#3fb968; --red-600: #d13438; --red-400: #ff7075; --amber-600:#b45309; --amber-400:#f0a848; /* ---- semantic colours (use THESE in components) --------- */ /* ---- Signal v2 palette ----------------------------------- The names are the application's and stay; the values are the design's. design/portal-mockups/signal2/PORT.md records the decision: --color-* is referenced across 2,300 lines of components.css, so renaming it would touch everything for no design gain, while the mockups' values ARE the design. Not an inverted dark theme. Two things change role between them rather than merely value: green is the brand mark in both, but the gain ink darkens on white so it stays legible, and amber does the same. Contrast was checked pair by pair on the light-theme reference sheet. */ /* Graphite is what a selected row is filled with, in both themes. It is darker than the old blue-tinted selection, so the gain ink had to come down with it — see --color-gain. */ --signal-graphite: #2E3137; --signal-graphite-lt: #DFE3E7; --color-bg: light-dark(#F5F6F7, #0A0B0C); --color-surface: light-dark(#FFFFFF, #16181B); --color-surface-subtle:light-dark(#EFF1F3, #1E2126); --color-surface-selected: light-dark(var(--signal-graphite-lt), var(--signal-graphite)); --color-border: light-dark(#E4E7EA, #24272C); --color-border-strong: light-dark(#C8CDD3, #383C43); --color-text: light-dark(#14171A, #F3F5F4); --color-text-secondary:light-dark(#4A5158, #B7BDC2); --color-text-muted: light-dark(#666E76, #82888E); /* The brand green never changes: it is the mark, not a value. --color-gain darkens on white; this does not. */ --brand-green: #34D877; /* The owner dropped blue product-wide and no board carries one: a chosen thing is drawn in the text colour on a raised surface, and the only hue the language spends is on gain, loss and warn — where the hue IS the meaning. This stays a named token rather than being rewritten at twenty call sites, so "the accent" remains one decision in one place. */ --color-accent: var(--color-text); --color-accent-hover: var(--color-text-secondary); --color-accent-contrast: light-dark(#ffffff, #0a0a0a); --color-focus: light-dark(var(--blue-500), var(--blue-400)); /* Gain/loss: finance convention kept, but tuned for contrast in both themes. NEVER the only signal — always pair with an explicit sign (+/−) or arrow. The worst case is not white — it is a selected row, where these three sit on graphite. Measured against --color-surface-selected: light gain 4.81, loss 4.57, warn 5.15; dark gain 6.98, loss 4.70, warn 7.95. All clear 4.5. The light gain is a shade darker than the reference sheet's #0B7A3B, which measured 4.22 there and would have shipped a regression; on white it reads 6.21 rather than 5.44, which is no loss. */ --color-gain: light-dark(#0A7036, var(--brand-green)); --color-loss: light-dark(#C0281F, #FF6B6B); --color-warn: light-dark(#7A5600, #FFC01E); /* A badge on a board is a washed pill, not an outline: the tint carries the state and the border only closes it. Mixed from the semantic colour so a theme change cannot leave the wash behind, and stated once here because a wash written at each call site is how six slightly different greens happen. */ --wash-gain: color-mix(in srgb, var(--color-gain) 12%, transparent); --wash-loss: color-mix(in srgb, var(--color-loss) 12%, transparent); --wash-warn: color-mix(in srgb, var(--color-warn) 12%, transparent); --line-gain: color-mix(in srgb, var(--color-gain) 34%, transparent); --line-loss: color-mix(in srgb, var(--color-loss) 34%, transparent); --line-warn: color-mix(in srgb, var(--color-warn) 34%, transparent); /* AI: the one mark that says a machine had a hand in the sentence. Pink because the other three hues are already spoken for. Green, amber and red mean gain, caution and loss on every page of this product, so a badge drawn in any of them reads as a verdict on the figures rather than a statement about who wrote the words. Pink owns nothing else here, and owning nothing else is the whole qualification: it cannot be misread as a reading of the money, because it has never been one. Measured the way the gain/loss/warn comment above measures, worst case first -- a selected row. Dark ink on graphite 4.56, on the surface 6.22, on the page 6.89; light ink on the light selection 5.13, on the subtle surface 5.85, on white 6.62. All clear 4.5. The artboard quoted 6.4 and 6.1 for the two surface readings; taken against the application's own surfaces they are 6.22 and 6.62, and these are the ones that were taken. */ --color-ai: light-dark(#B01B60, #FF5CA8); --wash-ai: color-mix(in srgb, var(--color-ai) 12%, transparent); --line-ai: color-mix(in srgb, var(--color-ai) 34%, transparent); /* Mark badge: the dot on the Inv.2 mark reports the day. It was a fixed brand badge pinned to --brand-green in both themes, on the grounds that the mark is not a value. Reading the day makes it one, so it takes the same ink as the figure it summarises: the Today tile and the dot can never disagree. That also repairs the light theme. Pinned vivid green measured 1.65:1 on --color-surface-subtle, which is a dot you cannot see; by value it reads 5.48. Against that tile, dark/light: up 8.64/5.48, down 5.82/5.20, flat 4.51/4.57. Flat is deliberately the quietest of the three — no reading is not a reading of zero. */ --brand-dot-up: var(--color-gain); --brand-dot-down: var(--color-loss); --brand-dot-flat: var(--color-text-muted); --color-backdrop: light-dark(rgba(10,10,10,.60), rgba(0,0,0,.75)); /* ---- charts (read by chart-factory.js via getComputedStyle) */ /* The canvas plots its portfolio line in the gain green — `stroke="#34D877"` on body-main — and its grid in the neutrals beside it. It was pointed at the blue accent, which appears nowhere on any artboard. */ /* The line a series takes when its range moved neither up nor down, and the stroke every chart falls back to. It was the gain green, which meant every line and area series in the product was drawn in the colour of a good day whatever its values did (issue 601) -- and the owner's rule is the one figures already follow: negative red, gains green, and flat takes no colour at all. `figure_direction` expresses that as None rather than a third token, so this is the default ink and there is no --color-flat to drift. */ --chart-line: var(--color-text); /* The fill under the line, derived from the line so the two cannot disagree again. It was left on the blue accent when --chart-line was repointed, so the canvas drew a green line over a blue wash. The bottom stop keeps the hue at zero alpha rather than using transparent: a canvas gradient interpolates towards transparent black, which turns the lower half of the fill grey. Measured, both ramps. color-mix cannot express it -- at zero percent it collapses to that same transparent black -- so the bottom uses relative colour syntax. */ --chart-area-top: color-mix(in srgb, var(--chart-line) 20%, transparent); --chart-area-bottom: rgb(from var(--chart-line) r g b / 0); /* The same derivation for a signed range, each pair mixed from its own stroke so a fill can no more disagree with a red line than with the neutral one. Three pairs rather than one because the fill is the mark that made this visible: chart-factory.js already dropped the fill on a rebased axis, its comment saying the fill "would shade a loss the same way it shades a gain" -- which was true, and left the line doing it. */ --chart-area-top-gain: color-mix(in srgb, var(--chart-up) 20%, transparent); --chart-area-bottom-gain: rgb(from var(--chart-up) r g b / 0); --chart-area-top-loss: color-mix(in srgb, var(--chart-down) 20%, transparent); --chart-area-bottom-loss: rgb(from var(--chart-down) r g b / 0); --chart-grid: light-dark(var(--gray-100), var(--gray-850)); --chart-text: var(--color-text-muted); --chart-crosshair: var(--color-text-secondary); --chart-up: var(--color-gain); --chart-down: var(--color-loss); --chart-benchmark: light-dark(var(--gray-500), var(--gray-300)); --chart-key-w: 0.875rem; /* 14 — legend key, as drawn */ --chart-allocation-1: light-dark(#3f6fd8, #6f9df0); --chart-allocation-2: var(--color-gain); --chart-allocation-3: var(--color-warn); --chart-allocation-4: var(--color-loss); --chart-allocation-5: light-dark(#7c3aed, #c084fc); --chart-allocation-6: var(--color-text-secondary); /* The approved holding-tag ramp; gray is always the untagged residual. */ --chart-tag-1: #7fb0ff; --chart-tag-2: #6f9df0; --chart-tag-3: #5580cf; --chart-tag-4: #3d64ad; --chart-tag-5: #565c63; /* Categorical series for stacked income by instrument: fixed order, never cycled; validated for colour-vision separation on both surfaces. A 7th and later instrument fold into "Other". */ --chart-series-1: light-dark(#3f6fd8, #6f9df0); --chart-series-2: light-dark(#eb6834, #d95926); --chart-series-3: light-dark(#1baf7a, #199e70); --chart-series-4: light-dark(#eda100, #c98500); --chart-series-5: light-dark(#e87ba4, #d55181); --chart-series-6: light-dark(#4a3aa7, #9085e9); --chart-series-other: var(--gray-500); /* The eight kinds of idea on the Ideas page. The dark values are the chart series; light darkens amber, green, orange and pink, which fall under 4.5:1 as text on white. Defensive is the one teal, kept off growth's green by hue. Grey is funds, which are not companies. None is gain or loss green or red, so no kind reads as good or bad. */ --idea-quality: var(--chart-series-1); --idea-value: light-dark(#8a5a00, #eda100); --idea-growth: light-dark(#0f7a54, #1baf7a); --idea-income: var(--chart-series-6); --idea-safety: light-dark(#b3461b, #eb6834); --idea-analysts: light-dark(#b02f68, #e87ba4); --idea-defensive: light-dark(#0e6f86, #3fb6d3); --idea-funds: var(--color-text-secondary); /* ---- typography ----------------------------------------- */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace; --font-data: var(--font-ui); /* The artboards' scale, not a modular one. Nine sizes carry all 46 boards and the body is 14, not 16; 20 and 25 are drawn nowhere. The 1.25 steps this started from are why a ported page still reads larger and looser than the board it came from — the panes were rebuilt and the type inside them was not. Anchored in rem, so a reader who enlarges text still gets the whole scale enlarged with them. */ --text-xs: 0.75rem; /* 12 — captions, table meta, a segment */ --text-nav-compact: 0.6875rem; /* 11 — five labelled destinations on narrow phones */ --hint-size: 1.125rem; /* 18 — the mark that carries a definition */ --hint-measure: 22rem; /* the prose behind it, capped to a readable line */ --text-sm: 0.8125rem; /* 13 — secondary UI */ --text-base: 0.875rem; /* 14 — body */ --text-lg: 1rem; /* 16 — a sheet's title */ --text-xl: 1.375rem; /* 22 — page titles */ --text-2xl: 1.953rem; /* 31 — the one big dashboard number*/ /* Three sizes the artboards set off the modular scale, measured at 1440. They are roles, not steps: a table row, a pane's name and the page's name in the title bar. Stated here so a rule never writes the number. */ --text-table: 0.8125rem; /* 13 — a table cell */ --text-pane-title: 0.9375rem; /* 15 — a pane's name */ --text-page-title: 1.375rem; /* 22 — the page's name in the title bar */ --text-micro: 0.6875rem; /* 11 — column headings and chart keys */ --text-count: 0.625rem; /* 10 — a count on its own disc */ --text-figure: 1.6875rem; /* 27 — a summary tile's figure */ --text-figure-lead: 1.953rem; /* 31 — the lead tile's, one step up */ --leading-tight: 1.25; --leading-base: 1.5; /* A summary tile's figure sets its own, tighter than --leading-tight: the boards draw a 31px figure on a 35.65px line. At 1.25 the strip stands 3.4px taller per tile for nothing, which is the difference between a figure sitting in its row and one padding it out. */ --leading-figure: 1.15; /* ---- spacing (4px scale — the ONLY spacing values) ------ */ --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: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* ---- layout --------------------------------------------- */ --content-max: 90rem; /* 1440 — site-wide content */ --content-wide: 120rem; /* 1920 - the framed page, which starts at the rail rather than centring, so its cap is a reading limit and not a column */ --content-narrow: 40rem; /* 640 — forms, auth, settings */ --content-access: 27.5rem; /* 440 — the access card */ --content-dialog: 28rem; --workspace-aside-min: 18rem; --workbench-rail: 16rem; --workbench-master: 20rem; /* The page's two columns, written once. A summary strip standing above a split workbench takes the same tracks, so the seam between its tiles falls exactly where the seam between the panes below it does. Two declarations of the same geometry drift the moment either is tuned. The ratio is the board's, measured off Main.dc.html rather than chosen: `.row-split` and `.kpi-row--aligned` both draw `minmax(0, 1.62fr) minmax(0, 1fr)`. The app drew 2fr, which put the rail 68px narrower than the artboard at 1440 — nothing looked misaligned, because both rows agreed with each other; the page was simply proportioned differently from the board it was drawn from. The rail keeps its floor, which the board has no need of: a static artboard is never 900px wide, and without the minimum the rail collapses rather than wrapping. It does not bind at 1440, so it does not touch the ratio. */ --workbench-split: minmax(0, 1.62fr) minmax(var(--workbench-rail), 1fr); /* A form beside the list that confirms it. The sheet is sized to what it holds -- every control on a form here is short -- so the slack goes to the list, which is the half that can use it. 43rem is --content-narrow plus the pane's own padding. */ --workbench-sheet: minmax(0, 43rem) minmax(0, 1fr); /* Two thirds against one. The split above is 1.62 to 1 and is the proportion the day pane stands on; this is for a pair that wants the rounder division, and exists as one track so the next such pair does not invent a second number a few pixels from it. */ --workbench-thirds: minmax(0, 2fr) minmax(var(--workbench-rail), 1fr); /* The artboards distinguish two: --margin is the page's own edge, paid once on each side against the rail and the viewport; --gutter is the gap between the blocks inside it. Conflating them is what left the frame with 16px of margin where the artboards draw 20. */ --margin: 1.25rem; /* 20 */ --gutter: var(--space-4); /* A summary tile pays more above and below its figure than beside it, which is how the boards draw it: 18 down, 20 across. */ --space-tile-block: 1.125rem; /* 18 */ /* A column heading's air below it, off the 4px scale for the same reason --space-tile-block is: the boards draw 10 (`padding: 0 20px 10px`), and the nearest step is 12. */ --space-column-head: 0.625rem; /* 10 */ /* The primary navigation is a column, not a bar: eight destinations, each an icon over its name. Distinct from --workbench-rail, which is a pane inside a page. Below the phone breakpoint neither applies - the bottom section bar carries navigation there. */ --nav-rail: 5.5rem; /* 88 - the column */ --nav-rail-item: 3.625rem;/* 58 - one destination tap target */ /* ---- operational density -------------------------------- */ --control-height: 2.5rem; /* 40 — .btn and .field__input, as drawn */ /* The frame's bar is one height on every page. Without this it is as tall as whatever control the page happens to put in it: a page carrying the portfolio switcher measured 70.5 and a page carrying only the two icon buttons measured 65, so the bar above the rail stepped up and down as the reader moved between destinations. Every board draws it at 71. */ --titlebar-height: 4.4375rem; /* 71 — the frame's bar, on every page */ /* How far the band opens at the threshold. One number, because the band's height is the progress times this and the states past the threshold are this exactly. */ --pull-open: 58px; --control-height-sm: 2rem; /* 32 — the small button */ --badge-height: 1.5rem; /* 24 — a state pill */ /* A state pill's inline padding, and it is not a control's. The boards draw 10 against a button's 18; at the 12 this took from the spacing scale every badge on the portal stood 4px wider than the pill beside it on the drawing, which is what a pill reads as when its label is short. */ --badge-pad: 0.625rem; /* 10 — a state pill's inline padding */ /* The mark inside the AI pill. Sized to the pill's own micro text rather than to the 17 of `.glyph`, which would stand a head above the label it leads. `proposed-company-note/extra.css` draws it at this size. */ --badge-glyph: 0.75rem; /* 12 — the mark inside a state pill */ --identity-mark: 2.125rem; /* 34 — the tile beside a name */ --segment-height: 1.875rem; /* 30 — one segment inside its track */ --count-disc: 1.125rem; /* 18 — the disc a count sits on */ /* A year on the coverage strip: wide enough for a four-digit year over a four-figure count without either wrapping, and the same width whether the year holds rows or nothing, so the strip reads as a row of equals. */ --coverage-chip: 5.5rem; /* 88 — one year on the coverage strip */ /* The import session's filling rule. A rule that fills, not a control, so it takes the thinnest weight the sheet draws rather than a control height. */ --progress-bar: 0.375rem; /* 6 — the import session's progress */ /* The band scale beside a band's name, on the card that publishes it. The same meter fills its tile in the summary strip, where the tile is the reading; in a row it is one of five positions being compared, so every row draws it at one width and the rows stack into a scale. */ --band-scale: 4.5rem; /* 72 — the published scale beside a name */ --spark-width: 3.5rem; /* 56 — a session's shape beside its figure */ --spark-height: 1.125rem; /* 18 — the same height as a count's disc */ --control-pad: 1.125rem; /* 18 — a button's inline padding */ --control-pad-sm: 0.875rem; /* 14 — small button, segment, input */ --control-select-max: 17rem; /* 272 — a toolbar select stops growing here */ --tab-height: 2.5rem; /* 40 — a tab row on a pane divider */ --touch-target: 2.75rem; --scrollbar-size: 0.375rem; --table-window-height: 34rem; /* The most a filling table may take before it scrolls instead of growing. Relative to the screen rather than fixed, because the thing being avoided is a table taller than the screen it is read on: uncapped, a day of forty-eight movers made the window 2512px and the page 3535px, and nothing scrolled but the document. Chosen by measuring four values at three heights. Below this the common short day loses rows it has today; at 100dvh the table can be a whole screen tall, so the page scrolls and the table scrolls for the same content and the reader picks the wrong one. */ --table-window-cap: 80dvh; --chart-height: 18rem; --chart-height-compact: 12rem; /* The figure on an Insights card: a shape beside its numbers, not a chart to read a value off. */ --chart-height-tile: 4rem; --chart-height-tall: 26rem; --chart-height-activity: 22rem; /* ---- shape & elevation ---------------------------------- */ /* A link's underline sits clear of the descenders rather than through them. The canvas sets 3px; this exists so a rule never writes the number. */ --underline-offset: 0.1875rem; /* 3 */ /* The boards carry one inner radius and it is 12, not 8: a field, a well, a rail destination, a tooltip. Nothing on a board is drawn at 8. */ --radius-sm: 0.75rem; /* 12 — anything inside a pane */ /* A pane and a summary tile. Measured off the boards rather than read off a note: every card on Main, Ledger and Settings is 18, and every card on the phone boards is 14. An earlier note here said the canvas was square; that came from a probe that took the first `.pane, .card, section` match, which on an artboard is a wrapper carrying no radius. The phone steps down with the rest of its scale — see the narrow block below. */ --radius-pane: 1.125rem; /* 18 */ --radius-chart: 0.25rem; /* plotted bars and marks: bridge legs, dividend bars, evidence bar */ --radius-pill: 999px; --border-w: 1px; --underline-w: 0.125rem; /* 2 — the rule under the current tab */ --outline-w: 2px; /* focus rings */ --accent-bar-w: 4px; /* alert left border */ /* ---- motion --------------------------------------------- Three durations and one curve, from the reference sheet. They exist so a component never writes its own timing: a page where every transition is a slightly different length reads as unfinished even when nobody can say why. --ease is the shorthand kept from before, still duration and curve in one. Everything new should take a duration and a curve separately so a rule can change one without the other. Anything that moves needs a prefers-reduced-motion escape. */ --ease: 150ms ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 120ms; /* a control acknowledging a press */ --t-base: 180ms; /* something appearing or changing state */ --t-slow: 320ms; /* something arriving, or a number settling */ } /* The phone steps the frame down and holds the type. The canvas carries two spacing scales, and this sheet had one: --margin and --gutter were declared once and used from 320px to 1920px. Setting the page margin to the artboards' 20 is right at 1440 and wrong on a handheld, where it eats 40px of a 402px screen. The phone boards draw 12 and 10. Only the frame moves. --text-table stays 13 and the quiet line stays 11, because shrinking the type on the smallest screen is the easy win and the wrong one: the figures are the reason the page exists. The corner steps with the frame, 18 to 14, which is what the boards draw. */ @media (max-width: 48rem) { :root { /* 10 and 8, not the boards' 12 and 10. The owner asked for less room around the figures on the panes that carry data (16 September 2026), and the frame is where that room is: two values here are worth more than any rule written per pane. Nothing above 48rem reads them. */ --margin: 0.625rem; /* 10 */ --gutter: 0.5rem; /* 8 */ --radius-pane: 0.875rem; /* 14 */ /* A tile's block padding and a pane head's top padding, both. 18 is the desktop figure and it is the single largest piece of air on a handset, where a pane head and its first row are 40px apart. */ --space-tile-block: 0.75rem; /* 12 */ /* The three sizes the phone boards step down: the title bar's name, a pane's name, and the figure on a tile. Everything else holds, so the handset is the same type at tighter margins rather than a second scale. */ --text-page-title: 1.0625rem; /* 17 */ --text-pane-title: 0.875rem; /* 14 */ --text-figure: 1.5rem; /* 24 */ --text-figure-lead: 1.5rem; /* 24 */ } }