One system for every number a business owner checks.
Brassbook helps small businesses see their cash. This is the system its product is built from. The dashboard below uses nothing but the tokens and components documented on this page, so switch the theme or density and watch all of it follow.
Cash overview
Money in and out, last 8 weeks
Recent transactions
| Description | Account | Status |
|---|
Amounts in US dollars
Principles
Three rules every component on this page follows. When a design decision is unclear, these settle it.
Numbers first
Figures get the largest type, tabular spacing and right alignment, so columns line up and a glance is enough.
Say what changed
A number on its own is noise. Pair it with the period and the change, in words as well as arrows.
Never color alone
Money out is hatched, pending is dashed, and negatives carry a minus sign, so meaning survives any color vision or a grayscale print.
Color
Every color is a semantic token with a light and a dark value. Swatches show the value for the current theme and its contrast against the card surface. Select one to copy its variable. Dividers use --border; anything you can click or type into uses --border-control, which meets the 3:1 contrast rule for controls.
Type
Onest carries the interface. Newsreader is reserved for large figures and headings, where a serif makes numbers feel considered rather than computed.
Spacing and radius
A 4 px base scale. Density changes control heights, row heights and card padding, never the scale itself.
Radius
Buttons
One primary action per view. Labels say what happens: "Move money", not "Submit".
Use the danger style only for actions that can't be undone, and confirm them.
Place two primary buttons side by side. Demote the second to secondary.
Inputs
Labels sit above every field and never disappear. Amount fields format as you leave them.
Try typing a number, then tab away.
Add a reference so the payee can match this payment.
Status badges
Each status has its own icon and border style, so it reads without color.
Data tables
The transactions table in the cash overview is the reference implementation.
Right-align amounts, use tabular figures, and show negatives with a minus sign as well as color.
Make sortable headers real buttons and announce the sort direction.
Truncate amounts or dates. Let descriptions wrap instead.
Leave an empty table blank. Say why it's empty and how to fix it.
Charts
Charts use the data tokens only. Every chart has a keyboard-reachable tooltip and a "View as table" alternative.
Plot money in above the zero line and money out below it, so direction is spatial, not just colored.
Start value axes at zero. Label the period in the chart title.
Add a third data color. If a chart needs more series, it needs to be two charts.
Rely on hover. Anything a tooltip shows must also be reachable by keyboard and in the table view.