# Financial Dashboard > A P&L statement, a cash-flow waterfall and right-aligned tabular figures on serious navy — red and green mean good and bad, nothing else. - Nickname: Ledger navy - Also called: Finance dashboard, P&L dashboard, CFO console, FP&A dashboard - Category: Dashboards & Data - Moods: Serious, Trustworthy, Calm - Industries: Fintech & Banking, Corporate & B2B, SaaS, Real Estate - Style page: https://uilingo.dev/styles/financial-dashboard/ The financial dashboard reads like an annual report that updates itself. A deep navy sidebar frames a pale ledger-ruled canvas; the centrepiece is a real profit-and-loss statement with indented line items, totals on a single rule and net income on a double rule. Every figure is set in tabular monospace, right-aligned, with negatives in parentheses. Colour is semantic only: green for favourable, red for unfavourable, muted gold for a single highlight. Corners are nearly square and shadows almost absent, because the numbers must look audited, not decorated. ## Best for - Finance, FP&A and accounting tools - Banking, treasury and investor portals - SME bookkeeping and invoicing apps - Board and monthly-close reporting ## Avoid for - Consumer lifestyle or social apps - Playful onboarding-heavy products - Marketing analytics where trends matter more than exact figures ## Do - Set every number in tabular figures (font-variant-numeric: tabular-nums) and right-align numeric columns - Use green/red for favourable/unfavourable variance — an expense going up is red - Show totals on a 1px rule and the bottom line on a 3px double rule ## Don't - Don’t use colour for decoration — no gradients, no rainbow charts - Don’t round corners beyond 6px or float cards on heavy shadows - Don’t mix currency formats or drop the sign on deltas ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Financial Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A P&L statement, a cash-flow waterfall and right-aligned tabular figures on serious navy — red and green mean good and bad, nothing else. Design keywords: P&L statement, cash-flow waterfall, tabular numerals, right-aligned figures, negatives in parentheses, red/green semantics, double-rule totals, serious navy sidebar, ledger ruling. ## Visual language An annual report that updates itself. A deep navy sidebar frames a pale grey canvas with faint ledger ruling; white cards have near-square 4–6px corners, 1px grey borders and no floating shadows. The centrepiece is a real profit-and-loss statement: indented line items, totals on a single rule, net income on a double rule. Every figure is tabular monospace and right-aligned, negatives sit in parentheses, and colour is semantic only — green favourable, red unfavourable, one muted gold accent. ## Signature details (must be visible) - Navy #0B1F3A full-height sidebar with white/blue-grey text; active item = rgba(255,255,255,.09) fill plus a 3px gold #B08D3C inset bar on the left - Background #F3F5F8 with ledger ruling: repeating-linear-gradient of a 1px line every 32px at ~5% navy - All numbers in IBM Plex Mono with font-variant-numeric: tabular-nums, right-aligned in tables; negatives shown as (THB 14,988), never −14,988, inside statements - P&L table: uppercase navy group rows (REVENUE, OPERATING EXPENSES), 28px indented line items on dotted separators, totals with a 1px solid top rule, net income on a 3px double bottom rule with a 10% gold tint - Variance colour is good/bad, not up/down: revenue +13.6% is green #0B7A4B, an expense +11.1% is red #C8102E - Cash-flow waterfall: navy total bars (opening, closing), green floating bar for inflows, red floating bars for outflows, dashed connector lines between steps, values above in mono (negatives in parentheses) - KPI cards with a 3px navy top rule (gold for an unfavourable metric), small uppercase tracked label, 1.75rem mono value, 'vs Sep' comparison text - Card titles are 0.78rem uppercase, 0.1em tracked, muted, sitting on a 1px rule; page titles are IBM Plex Serif 600 in navy ## Design tokens — use these exact values Colours (light mode): - background #F3F5F8 - surface #FFFFFF - surface-2 #E9EDF3 - text #0E1A2B - text-muted #4F5D70 - primary #12305C (text on it #FFFFFF) - secondary #B08D3C (text on it #0B1F3A) - accent #2A5DB0 - border #D3D9E2 - success #0B7A4B · warning #9A5800 · danger #C8102E - chart series #12305C, #4A78C2, #9DB4D9, #B08D3C, #0B7A4B Radius: sm 2px, md 4px, lg 6px, xl 8px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(14,26,43,0.06)`, md `0 2px 8px rgba(14,26,43,0.08)`, lg `0 14px 36px rgba(14,26,43,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.9 density Motion: 160ms cubic-bezier(.2,0,0,1) ## Typography (Latin + Thai) - Headings: IBM Plex Serif 500/600 with Thai fallback Noto Serif Thai 500/600 - Body: IBM Plex Sans 400/500/600 with Thai fallback IBM Plex Sans Thai 400/500/600 - Mono: IBM Plex Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Serif+Thai:wght@500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"IBM Plex Serif", "Noto Serif Thai", system-ui, sans-serif`; body `"IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.2vw, 4.25rem), heading weight 600, heading tracking -0.015em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Noto Serif Thai has the same sober, low-contrast book serif as IBM Plex Serif for titles; IBM Plex Sans Thai is the exact Thai companion of Plex Sans for figures and labels. ## Components - Buttons: 40px tall, 4px radius; primary navy #12305C with white text, hover darkens 14% with no lift; secondary white with a navy-tinted 1px border; accent uses gold #B08D3C with navy text - Period switch: segmented control MTD · QTD · YTD in mono caps, selected segment solid navy - Badges: 2px radius, 1px currentColor outline on an 8% tint — Received green, Pending amber, Failed red, Scheduled grey; a solid gold badge for the one highlight - Inputs: 42px, 4px radius, 1px grey border; focus = navy border + 3px steel-blue ring at 22%; labels are small uppercase muted (Thai: normal case, full colour) - Tables: header row with 1px solid text-colour bottom rule, 0.7rem tracked caps; rows 10px padding, faint navy hover tint; amount column mono, + green / − red - Charts: solid navy line for this period, dashed steel-blue for last period, undashed hairline grid, square legend swatches, donut stroke 5 with navy/blue/grey/gold only - Progress (month-end close): 6px square bar, gold fill on grey track - Mobile featured balance card: navy gradient #12305C→#0B1F3A, 3px gold top edge, amount in mono white, gold progress ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: bar style. Sections in order: hero → trust → stats → features → showcase → pricing → faq → cta. Feature section as list. Landing pages stay sober: editorial hero with a large serif navy headline left and a statement-like product mock right, then a trust strip (bank-grade security badges), mono stat figures on top rules, a ruled feature list, pricing with a navy highlighted plan and a navy CTA band with a gold button. The dashboard is a navy sidebar + white topbar (search, currency chip THB, bell, avatar), a title row 'Profit & loss' with an 'as of' eyebrow and MTD/QTD/YTD switch, a 4-up KPI strip, then the P&L statement (8 columns) beside a cash-flow waterfall with due-soon payables (4), then revenue trend + income mix, then a full-width transaction ledger. ## Content Use realistic product copy (fictional brand) suited to: Finance, FP&A and accounting tools. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Set every number in tabular figures (font-variant-numeric: tabular-nums) and right-align numeric columns - Use green/red for favourable/unfavourable variance — an expense going up is red - Show totals on a 1px rule and the bottom line on a 3px double rule ## Don't - Don’t use colour for decoration — no gradients, no rainbow charts - Don’t round corners beyond 6px or float cards on heavy shadows - Don’t mix currency formats or drop the sign on deltas - Decorative colour: gradients on charts, rainbow palettes or brand colours on numbers — colour only encodes favourable/unfavourable - Proportional or left-aligned numbers in tables, or mixing '−THB 540' and '(THB 540)' styles in the same statement - Rounded 12px+ cards, soft floating shadows or glass — it starts to look like a consumer fintech app - Huge hero KPIs with lots of air (that is the Executive dashboard) or dense sparkline grids everywhere (Data-dense dashboard) - Letter-spacing or uppercase on Thai labels; keep Thai at normal tracking with 1.7+ line-height ## Stack notes One self-contained HTML file with a