/* ============================================================================= Live Zero Path v5 — semantic color system (landing.html / app.html) ============================================================================= Packet §11.2 in CSS form. Bind Tailwind / CSS to these token names (not the hex) so one rename updates chips, bars, and icons together. ROLE A is the canvas / type / CTA system. Do not invent routes or KPIs. Locked §10 numbers are unchanged. No rainbow doughnut as a hero chart — colour lives on bars, chips, icons, and dual-series lines. Family: Ledger green / navy / peach / blue wash, plus a small set of comfortable professional hues (teal, terracotta, gold, dusty rose, muted plum). All fills are meant to sit on white or #eff4ff. ============================================================================= */ html.lzp5 { /* -------------------------------------------------------------------------- ROLE A — Ledger core (canvas, type, CTA). Same job as §11.2. | Token | Hex | Use | | ink | #0b1c30 | KPI numbers, primary text | | label | #3a4d63 | Captions, metadata | | canvas | #f5f8ff | App background | | card | #ffffff | Cards, tables, fields | | plot | #eff4ff | Chart well | | grid | #d3e4fe | Chart grid, field border | | header-wash | #e5eeff | Table header | | cta | #000000 | Primary buttons, active nav | -------------------------------------------------------------------------- */ --z-ink: #0b1c30; --z-label: #3a4d63; --z-canvas: #f5f8ff; --z-card: #ffffff; --z-plot: #eff4ff; --z-grid: #d3e4fe; --z-header-wash: #e5eeff; --z-cta: #000000; /* -------------------------------------------------------------------------- ROLE B — Status (progress vocabulary: PLANNING → COMPLETED / FIRE_ACHIEVED) | Token | Hex | Container | Use | | status-on-track | #0f7a45 | #d8f3e3 | ON_TRACK, ACTIVE, ok | | status-progress | #1d4e89 | #dce9ff | IN_PROGRESS, OPEN | | status-risk | #b45309 | #ffdcc3 | AT_RISK, REVIEW, warning | | status-idle | #5b6b7c | #e5eeff | PLANNING, DREAM, BUILDING | | status-critical | #ba1a1a | #ffdad6 | Overdue, error, off-track | Dots: 8px circle, same hex as the token (no container). -------------------------------------------------------------------------- */ --z-status-on-track: #0f7a45; --z-status-on-track-container: #d8f3e3; --z-status-progress: #1d4e89; --z-status-progress-container: #dce9ff; --z-status-risk: #b45309; --z-status-risk-container: #ffdcc3; --z-status-idle: #5b6b7c; --z-status-idle-container: #e5eeff; --z-status-critical: #ba1a1a; --z-status-critical-container: #ffdad6; /* -------------------------------------------------------------------------- ROLE C — Achievement (earned, complete, Freedom Date) | Token | Hex | Container | Use | | achieved | #9a6b12 | #fff3d6 | COMPLETED, FIRE_ACHIEVED, SMART | | tick | #ffb77d | — | You-are-here / Freedom Date mark | Gold is signal only — never the brand, never a doughnut slice. -------------------------------------------------------------------------- */ --z-achieved: #9a6b12; --z-achieved-container: #fff3d6; --z-tick: #ffb77d; /* -------------------------------------------------------------------------- ROLE D — Profit / loss (signed money, unrealized PnL, deltas) | Token | Hex | Container | Use | | profit | #0f7a45 | #d8f3e3 | Δ > 0, unrealized gain | | loss | #ba1a1a | #ffdad6 | Δ < 0, unrealized loss | | flat | #5b6b7c | — | Δ = 0 | Text colour on white; container for chips only. -------------------------------------------------------------------------- */ --z-profit: #0f7a45; --z-profit-container: #d8f3e3; --z-loss: #ba1a1a; --z-loss-container: #ffdad6; --z-flat: #5b6b7c; /* -------------------------------------------------------------------------- ROLE E — Income vs expenses (cash-flow and budget bars) | Token | Hex | Container | Use | | income | #0f7a45 | #d8f3e3 | Inflows, actual income bars | | expense | #c2410c | #ffedd5 | Outflows, actual expense bars | | plan | #1d4e89 | #dce9ff | Plan / budget envelope | Terracotta for spend — distinct from loss red, so a planned grocery line is not styled as an error. -------------------------------------------------------------------------- */ --z-income: #0f7a45; --z-income-container: #d8f3e3; --z-expense: #c2410c; --z-expense-container: #ffedd5; --z-plan: #1d4e89; --z-plan-container: #dce9ff; /* -------------------------------------------------------------------------- ROLE F — Assets, liabilities, sleeves, cover | Token | Hex | Use | | asset | #1d4e89 | Total assets, asset rows | | liability | #9a3412 | Total liabilities | | networth | #0f766e | Net worth, NW timeline | | sleeve-cash | #0e8a6a | Liquid / cash / mutual | | sleeve-pension | #1e3a5f | Retirement / secure | | sleeve-equity | #5b4b8a | Equities (bars only — not a doughnut) | | cover | #2563a8 | Life insurance protection | -------------------------------------------------------------------------- */ --z-asset: #1d4e89; --z-liability: #9a3412; --z-networth: #0f766e; --z-sleeve-cash: #0e8a6a; --z-sleeve-pension: #1e3a5f; --z-sleeve-equity: #5b4b8a; --z-cover: #2563a8; /* -------------------------------------------------------------------------- ROLE G — Categories (six pillars + generic ordinal for other catalogs) | Token | Hex | Use | | pillar-money | #0f7a45 | Money | | pillar-family | #1d4e89 | Family | | pillar-health | #0f766e | Health | | pillar-learning | #5b4b8a | Learning | | pillar-dreams | #c45e00 | Dreams | | pillar-friends | #a64d6a | Friends | | cat-1 … cat-4 | (cycle) | Product line, insured, sector mix | -------------------------------------------------------------------------- */ --z-pillar-money: #0f7a45; --z-pillar-family: #1d4e89; --z-pillar-health: #0f766e; --z-pillar-learning: #5b4b8a; --z-pillar-dreams: #c45e00; --z-pillar-friends: #a64d6a; --z-cat-1: #0f7a45; --z-cat-2: #1d4e89; --z-cat-3: #c45e00; --z-cat-4: #5b4b8a; /* -------------------------------------------------------------------------- ROLE H — Icons (outlined symbol font in app.html). Idle nav only; active nav stays on-primary white on black. | Token | Hex | Nav group | | icon-overview| #1d4e89 | Overview | | icon-life | #c45e00 | Life Architect | | icon-fire | #0f7a45 | FIRE & Legacy | | icon-wealth | #1d4e89 | Family & Wealth | | icon-invest | #5b4b8a | Investments | | icon-search | #1d4e89 | Header search | | icon-alert | #ba1a1a | Unread notification | -------------------------------------------------------------------------- */ --z-icon-overview: #1d4e89; --z-icon-life: #c45e00; --z-icon-fire: #0f7a45; --z-icon-wealth: #1d4e89; --z-icon-invest: #5b4b8a; --z-icon-search: #1d4e89; --z-icon-alert: #ba1a1a; /* -------------------------------------------------------------------------- ROLE I — Chart series (lines / area). Companion to bars; same hex. | Token | Hex | Series | | series-main | #0f766e | Wealth / net worth / accumulation | | series-fill | #5ee0c0 | Area under main (soft teal) | | series-target| #1d4e89 | Dashed target | | series-alt | #c45e00 | Required path / overlay | -------------------------------------------------------------------------- */ --z-series-main: #0f766e; --z-series-fill: #7ee0c4; --z-series-target: #1d4e89; --z-series-alt: #c45e00; }