Financial Dashboard

Also called: Finance dashboard, P&L dashboard, CFO console, FP&A 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.

“Ledger navy”Dashboards & DataEra: 2010s → todaySeriousTrustworthyCalm

Open full screen ↗

financial-dashboard / landingEN

financial-dashboard / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg6pxRadius xl8pxDensity×0.9Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

P&L statementcash-flow waterfalltabular numeralsright-aligned figuresnegatives in parenthesesred/green semanticsdouble-rule totalsserious navy sidebarledger ruling

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

Not to be confused with

Data-Dense Dashboard →Data-dense packs many small widgets and sparklines everywhere; the Financial dashboard is built around one statement table and a waterfall, with serif titles and accounting formatting.Executive Dashboard →Executive shows a few huge KPIs with lots of air; Financial shows every line item down to the cent on ruled ledger rows.Enterprise SaaS →Enterprise SaaS is a neutral, colourful product system; Financial is navy-and-paper with colour reserved for gain/loss.

On mobile

Lead with a navy balance card, then statement-style lists with right-aligned mono amounts (green inflow, red outflow in parentheses). Replace the waterfall with a stacked in/out bar; keep the plain bottom tab bar with a navy top indicator.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinIBM Plex Serif · 500/600

The quick brown fox

Heading · ThaiNoto Serif Thai · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinIBM Plex Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 6px · xl 8px · pill 999px`
Border	`1px`
Shadow	`0 2px 8px rgba(14,26,43,0.08)`
Display	`clamp(2.6rem, 5.2vw, 4.25rem)`
Motion	`160ms cubic-bezier(.2,0,0,1)`
Density	`×0.9`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Financial Dashboard (financial-dashboard) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 6px;
  --background: #F3F5F8;
  --foreground: #0E1A2B;
  --card: #FFFFFF;
  --card-foreground: #0E1A2B;
  --popover: #FFFFFF;
  --popover-foreground: #0E1A2B;
  --primary: #12305C;
  --primary-foreground: #FFFFFF;
  --secondary: #B08D3C;
  --secondary-foreground: #0B1F3A;
  --muted: #E9EDF3;
  --muted-foreground: #4F5D70;
  --accent: #E9EDF3;
  --accent-foreground: #0E1A2B;
  --destructive: #C8102E;
  --border: #D3D9E2;
  --input: #D3D9E2;
  --ring: #12305C;
  --chart-1: #12305C;
  --chart-2: #4A78C2;
  --chart-3: #9DB4D9;
  --chart-4: #B08D3C;
  --chart-5: #0B7A4B;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0E1A2B;
  --sidebar-primary: #12305C;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E9EDF3;
  --sidebar-accent-foreground: #0E1A2B;
  --sidebar-border: #D3D9E2;
  --sidebar-ring: #12305C;
}

.dark {
  --background: #0A1424;
  --foreground: #E8EDF5;
  --card: #101D33;
  --card-foreground: #E8EDF5;
  --popover: #101D33;
  --popover-foreground: #E8EDF5;
  --primary: #7FA8F0;
  --primary-foreground: #0A1424;
  --secondary: #D4B062;
  --secondary-foreground: #0A1424;
  --muted: #16263F;
  --muted-foreground: #9AA8BC;
  --accent: #16263F;
  --accent-foreground: #E8EDF5;
  --destructive: #FF6B7A;
  --border: #26395A;
  --input: #26395A;
  --ring: #7FA8F0;
  --chart-1: #7FA8F0;
  --chart-2: #B9CDF0;
  --chart-3: #4C6EA6;
  --chart-4: #D4B062;
  --chart-5: #3CC48F;
  --sidebar: #101D33;
  --sidebar-foreground: #E8EDF5;
  --sidebar-primary: #7FA8F0;
  --sidebar-primary-foreground: #0A1424;
  --sidebar-accent: #16263F;
  --sidebar-accent-foreground: #E8EDF5;
  --sidebar-border: #26395A;
  --sidebar-ring: #7FA8F0;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Financial Dashboard (financial-dashboard) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F3F5F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #E9EDF3;
  --color-text: #0E1A2B;
  --color-text-muted: #4F5D70;
  --color-primary: #12305C;
  --color-on-primary: #FFFFFF;
  --color-secondary: #B08D3C;
  --color-on-secondary: #0B1F3A;
  --color-accent: #2A5DB0;
  --color-border: #D3D9E2;
  --color-success: #0B7A4B;
  --color-warning: #9A5800;
  --color-danger: #C8102E;
  --color-chart-1: #12305C;
  --color-chart-2: #4A78C2;
  --color-chart-3: #9DB4D9;
  --color-chart-4: #B08D3C;
  --color-chart-5: #0B7A4B;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14,26,43,0.06);
  --shadow-md: 0 2px 8px rgba(14,26,43,0.08);
  --shadow-lg: 0 14px 36px rgba(14,26,43,0.14);
  --font-heading: "IBM Plex Serif", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #0A1424;
  --color-surface: #101D33;
  --color-surface-2: #16263F;
  --color-text: #E8EDF5;
  --color-text-muted: #9AA8BC;
  --color-primary: #7FA8F0;
  --color-on-primary: #0A1424;
  --color-secondary: #D4B062;
  --color-on-secondary: #0A1424;
  --color-accent: #7FA8F0;
  --color-border: #26395A;
  --color-success: #3CC48F;
  --color-warning: #E3A33B;
  --color-danger: #FF6B7A;
  --color-chart-1: #7FA8F0;
  --color-chart-2: #B9CDF0;
  --color-chart-3: #4C6EA6;
  --color-chart-4: #D4B062;
  --color-chart-5: #3CC48F;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Financial Dashboard (financial-dashboard). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9608,
            0.9725
          ],
          "hex": "#f3f5f8"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9294,
            0.9529
          ],
          "hex": "#e9edf3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.102,
            0.1686
          ],
          "hex": "#0e1a2b"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.3647,
            0.4392
          ],
          "hex": "#4f5d70"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.1882,
            0.3608
          ],
          "hex": "#12305c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.5529,
            0.2353
          ],
          "hex": "#b08d3c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1216,
            0.2275
          ],
          "hex": "#0b1f3a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.3647,
            0.6902
          ],
          "hex": "#2a5db0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.851,
            0.8863
          ],
          "hex": "#d3d9e2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4784,
            0.2941
          ],
          "hex": "#0b7a4b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3451,
            0
          ],
          "hex": "#9a5800"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.0627,
            0.1804
          ],
          "hex": "#c8102e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.1882,
            0.3608
          ],
          "hex": "#12305c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.4706,
            0.7608
          ],
          "hex": "#4a78c2"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7059,
            0.851
          ],
          "hex": "#9db4d9"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.5529,
            0.2353
          ],
          "hex": "#b08d3c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4784,
            0.2941
          ],
          "hex": "#0b7a4b"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0784,
            0.1412
          ],
          "hex": "#0a1424"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.1137,
            0.2
          ],
          "hex": "#101d33"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.149,
            0.2471
          ],
          "hex": "#16263f"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.9294,
            0.9608
          ],
          "hex": "#e8edf5"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6588,
            0.7373
          ],
          "hex": "#9aa8bc"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6588,
            0.9412
          ],
          "hex": "#7fa8f0"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0784,
            0.1412
          ],
          "hex": "#0a1424"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.6902,
            0.3843
          ],
          "hex": "#d4b062"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0784,
            0.1412
          ],
          "hex": "#0a1424"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6588,
            0.9412
          ],
          "hex": "#7fa8f0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.2235,
            0.3529
          ],
          "hex": "#26395a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7686,
            0.5608
          ],
          "hex": "#3cc48f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.6392,
            0.2314
          ],
          "hex": "#e3a33b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4784
          ],
          "hex": "#ff6b7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6588,
            0.9412
          ],
          "hex": "#7fa8f0"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.8039,
            0.9412
          ],
          "hex": "#b9cdf0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.4314,
            0.651
          ],
          "hex": "#4c6ea6"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.6902,
            0.3843
          ],
          "hex": "#d4b062"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7686,
            0.5608
          ],
          "hex": "#3cc48f"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.102,
              0.1686
            ],
            "hex": "#0e1a2b",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.102,
              0.1686
            ],
            "hex": "#0e1a2b",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.102,
              0.1686
            ],
            "hex": "#0e1a2b",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 36,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Serif",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0,
      0,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.9
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!