/* ========================================================================== Soulful Ledger — design tokens ========================================================================== THE SINGLE SOURCE OF TRUTH FOR THIS PRODUCT'S VISUAL IDENTITY. This file exists because the design was approved across two rounds and then lost twice: it never made it into a repository, and when it was needed it could not be found on disk under any name. "Ledger & Light" turns out to be the name of the Google OAuth client, not a design asset, so a search for it returned nothing but two prose mentions in the backend's own docs. So: every colour, font and layout constant lives here, in one file, in this repository. Nothing hardcodes a hex value anywhere else. If a value is not in this file it is not part of the design, and if the design changes it changes here. This is Soulful Ledger's identity and NOT Meraki Command's. They are different products. Do not substitute one for the other. -------------------------------------------------------------------------- THE RULE, established 2026-08-24. Everything below follows from it. COLOUR EXCLUSIVELY SIGNALS SOMETHING TRUE ABOUT THE DATA ON SCREEN. It is never decoration and never branding for its own sake. red refused, blocked, or an error mint recorded, actual, confirmed gold the ONE exception: the primary action, and the current navigation location. Both are functional signals. Everything else — headings, chrome, secondary UI, labels, borders, wordmarks, status that is merely informational — is black, white or grey. Full stop. If you are about to add colour, the question is not "does this look good" but "what does this colour claim about the data". If there is no answer, it is grey. -------------------------------------------------------------------------- */ :root { /* ---- Canvas and structure ------------------------------------------- */ --bg: #F5F4FA; /* page canvas */ --side: #0A0A0A; /* near-black sidebar */ --surface: #FFFFFF; /* cards */ /* ---- Text hierarchy -------------------------------------------------- */ /* True neutrals. These previously carried a purple cast (#1C1425 / #6B6478 / #9992A6) — branding smuggled into the text hierarchy, where by the rule above there is nothing for colour to report. */ --ink: #111111; /* primary text */ --ink-soft: #666666; /* secondary text, labels */ --ink-faint: #999999; /* tertiary, metadata, placeholders */ /* ---- Neutral greys -------------------------------------------------- */ /* Every border, rule and quiet surface in the product. There is no tinted alternative any more — the old --border was a purple hairline on every card, which is the clearest case of colour claiming nothing. */ --line: #E6E6EA; /* default hairline: borders, table rules */ --line-soft: #F5F5F7; /* very quiet fills and dividers */ /* ---- Gold: the ONE exception to "colour reports data" --------------- */ /* Gold is permitted in exactly two places, both of which are functional signals rather than decoration: 1. the primary action on a screen 2. the current navigation location That is the entire list. Not key figures, not headings, not wordmarks, not badges, not borders, not "a small number of highlights" — those were the previous, looser rule and it drifted immediately. */ --gold: #B8860B; --gold-soft: #FBF1DC; /* ---- Mint: recorded, actual, confirmed ------------------------------ */ /* A figure that has actually been recorded rather than projected; a state that has been confirmed rather than merely displayed. The recorded row on a depreciation schedule is the canonical use. NOT for "this thing is switched on" or any other UI readout. */ --mint: #2E8B65; --mint-soft: #E4F3EC; /* ---- Purple: REMOVED 2026-08-24 ------------------------------------- There is no purple in this product. It was carrying "this came from a model", which is real information — but the rule below allows colour only for the three states it names, and provenance is not one of them. The AI panel now says "generated" in words and sits under its own heading, which is where that information belongs. A fourth colour that means "be careful, sort of" is exactly the decorative drift the rule exists to stop. Do not reintroduce --purple. */ /* ---- Red: refused, blocked, or an error ----------------------------- */ /* The deliberate refusals this product is built around: a locked period, an unclassified account that cannot be posted against, a depreciation the system will not compute. The Section 280F card is the canonical use. NOT for attributes that are merely notable, like a non-deductible flag. */ --red: #B23A3A; --red-soft: #F8E7E7; /* ---- Typography ------------------------------------------------------ */ /* REVISED 2026-08-24. Fraunces is removed entirely and there is NO SERIF anywhere in this product. A serif display face reads as boutique or lifestyle; this is a serious financial tool and should look like one. Inter — everything, including the wordmark and headings. IBM Plex Mono — FINANCIAL FIGURES SPECIFICALLY. Dollar amounts, account codes and identifiers read in mono so columns align and a transposed digit is visible. --font-display is kept as a name so call sites do not all have to change, but it resolves to Inter. Do not point it back at a serif. */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* ---- Space. Generous, never dense. ---------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --sidebar-width: 264px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.08); }