Skip to main content

FinanceOS

data-signature="finance" · recommended density compact

FinanceOS shows money, and money interfaces are judged on precision and trust. It runs compact by default — these users want more on screen — and it is disciplined about color, because in finance color carries meaning.

What it leans on

Character

Precise and quiet. Positive and negative are reserved strictly for gains and losses, never decoration. Density is high but never cramped — the focus ring and hit targets hold.

Watch for

  • Numbers are right-aligned and use tabular figures so columns scan vertically.
  • Mask sensitive values by default and reveal on intent. Treat every figure as something an auditor may review.
  • Don't let red and green do double duty. If they mean up and down, they cannot also mean error and success on the same screen.

Live screens

Real, interactive reference screens built entirely from Prism — tokens, components and the finance signature. Use the controls to re-skin them live.

Personal finance

Personal banking overview — a high-contrast total-balance hero with quick actions, account cards, a spending-by-category breakdown and a recent-transactions table. Built from Prism tokens, cards and badges; data-signature=finance tints the accent.

Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗