Design guidelines
How Ledgerline looks, reads and moves. One file kept next to the code, so every invoice, table and total we ship comes from the same decisions.
Foundations
What Ledgerline is, how it should feel, and the three rules we use when two good ideas pull apart.
The product
Ledgerline is bookkeeping for small shops. It puts a week of invoices, payments and money still owed on one dense, warm screen an owner can read at the counter after closing.
The feel
- Warm
- Dense
- Confident
Warm, because a shop is a place someone built by hand, not a bank. Dense, because an owner reads a week of money in a minute. Confident, because a figure on an invoice has to look final, and when the three pull apart, confident wins.
Principles that decide ties
-
The figure leads
Every screen opens on the number that matters: what came in, what is still out. Menus and labels stay small beside it.
-
Rows over summaries
A list is a table with every amount in view. We never hide a figure behind a click to make a screen look calmer.
-
Exact or not at all
An amount is shown to the cent. We never round, estimate or soften a figure without saying so on the same line.
Mark
A placeholder rounded square, set beside the name until the shop's own mark arrives. It signs Ledgerline and never decorates a screen.
This mark is a placeholder. Replace it with your own and keep the sizes and clear space.
The lockup
The mark sits left of the wordmark, centered on its height, a third of its width away. The wordmark is set in the display face at its bold weight, never stretched or spaced out.
Sizes
Under 32 px the mark stands alone, in the browser tab and the corner of a printed invoice. The full lockup starts at 32 px, in the app bar.
Backgrounds
On amber the mark and the wordmark take the primary text color. Never set the mark on a photo, a scanned receipt or a pattern.
Clear space
Keep a quarter of the mark's width clear on every side. On an invoice that space is never shared with the shop's address or the invoice number.
Color
Cream paper and brown ink, one amber for action and a plum that marks what changed. Every color is a token with its own dark value.
Roles
Primary
Amber is for the one action that moves money, New invoice, Send invoice, Record payment, and for where you are in the app. Never a total, never a heading.
Accent
Plum marks what changed since you last looked: a payment that landed overnight, a figure that moved. Never a button, never a status.
Neutrals
Cream and warm browns carry the page, so the amounts read before the chrome around them.
Tokens
Each chip shows the light value on the left and the dark value on the right, read from the tokens in this file.
Contrast, measured
Measured from the tokens when this page loads, with the WCAG 2 formula. Text needs 4.5:1; large text, icons and focus rings need 3:1.
| Pair | Needs | Light | Dark |
|---|
Typography
A bold geometric sans for totals and titles, a compact sans with tabular figures for every row, and a mono kept for invoice numbers.
Faces
Display. Screen titles, the week's total and empty states. Never below 18 px.
Body. Tables, forms, labels and every amount, set in tabular figures so columns line up.
Mono. Invoice numbers and reference codes only. Amounts stay in the body face.
Scale
$4,812.50 in this week
Invoices due this week
Quayside Bakery owes $386.00
Invoice 0142 is 6 days overdue. Send a reminder, or record a payment if it came in as cash.
Reminders go out at 09:00 on the day after the due date.
Synced with the bank at 07:42
Reading
Most of what Ledgerline says is a figure and a name: $386.00, Quayside Bakery, due Friday. When it says more, it says it in short sentences an owner can read at the counter with a customer waiting. Lines stay under seventy characters, every amount carries two decimals in tabular figures, and the currency sign sits right against the number.
Spacing
Space steps in fours and stays tight: 8 to 12 px inside a group, 24 px between groups, so a week of rows fits on one screen.
Scale
space-1space-2space-3space-4space-6space-8space-12space-16
Inside a control, steps 1 to 3. Between rows and fields, 2 to 4. Between groups on a screen, 6 and 8. Nothing off the scale, and nothing above 12 inside the app.
Radii
radius-sm radius-md radius-lg radius-fullCorners are tight, like a printed form. Small for checkboxes, medium for buttons, fields and table frames, large for cards and dialogs. Full only for switches, avatars and badges.
Elevation
shadow-smSwitch thumbs, the sticky table headshadow-mdMenus, toasts, a hovered invoice cardshadow-lgThe void dialog, nothing elseA shadow means something floats over the ledger. Tables, cards and the invoice sheet sit flat on a hairline.
Borders
border-width on color-border: dividers, cards, tablesborder-width-strong: focus rings, the selected tab, the current row, the invoice totalA hairline separates rows. The thicker line means focus, selection or the total at the foot of an invoice, and nothing else.
Iconography
Line icons on a 24 px grid with round ends, sized to the text beside them and colored like it.
The set
- Due date
- Invoice
- Customer
- Find invoice
- Payment reminder
- Mark paid
- New invoice
- Send
Stroke 1.75 at 24 px, round caps and joins, small rounded corners, no fills. Icons take the color of the text beside them and always come with a word; in a table toolbar the word is the accessible label.
Components
Every control is built from the tokens above, at the density of a ledger. Each one shows its states at rest, in light and in dark, so no state is drawn in a hurry later.
Primary button
The one action that moves money forward: New invoice, Send invoice, Record payment. One per screen, a verb and its object.
Secondary button
Every other action that deserves a box: download the PDF, duplicate, send a reminder. It sits beside the primary or alone.
Ghost button
The quiet way out: not now, back, close. It sits beside a primary or a secondary, never alone.
Text field
A visible label above, never a placeholder alone. The error says what to fix, in words, beside an icon.
Select
For a choice among five to fifteen known options: payment terms, tax rate, currency. Fewer than five become tabs.
Checkbox and switch
A checkbox is saved with the invoice. A switch acts at once, so it never sits inside the invoice form.
Card
One invoice, one card, in the dashboard's due list. The number leads, the customer follows, the amount and status close. A card lifts only when it opens.
Table
For invoices and payments. Numbers in mono, amounts right-aligned in tabular figures, status as a dot and a word, the current row marked by a bar.
| Invoice | Customer | Amount | Status |
|---|---|---|---|
| 0139 | Copper Kettle Café | $248.40 | Paid |
| 0145 | Fern & Stem Florist | $1,120.00 | Due Friday |
| 0141 | Bramble Books | $512.75 | Paid |
| 0142 | Quayside Bakery | $386.00 | Overdue |
| Invoice | Customer | Amount | Status |
|---|---|---|---|
| 0139 | Copper Kettle Café | $248.40 | Paid |
| 0145 | Fern & Stem Florist | $1,120.00 | Due Friday |
| 0141 | Bramble Books | $512.75 | Paid |
| 0142 | Quayside Bakery | $386.00 | Overdue |
Tabs
To switch views of the same list: all, due, overdue, paid. The selected tab carries an amber bar, never only a color.
Selected, hover, focus, default and disabled, left to right.
Selected, hover, focus, default and disabled, left to right.
Dialog
Only for what cannot be undone: voiding an invoice, removing a customer. The title asks the question, the buttons answer it in words.
Void invoice 0142?
The $386.00 from Quayside Bakery comes off what you are owed. The invoice stays in the record, marked void.
Void invoice 0142?
The $386.00 from Quayside Bakery comes off what you are owed. The invoice stays in the record, marked void.
Toast
Says what just happened in one line and leaves after five seconds. An error stays until it is dismissed.
Empty state
Says why the space is empty and offers the one next step. No illustration, no cheer.
Nothing overdue
Every invoice sent this month is paid or not yet due.
Nothing overdue
Every invoice sent this month is paid or not yet due.
Navigation
Four places at most, named with nouns: Dashboard, Invoices, Customers, Reports. The current place is filled, and the mark always leads home.
Motion
Motion is quick and plain: it shows where a row or a toast came from, then stops. It is off when the system asks for less.
Timing
motion-fastmotion-basemotion-sloweaseIn use
Fade and rise
A toast or a payment that just landed arrives from just below, in the slow step.
Expand
An invoice row opens in place to show its lines, in the base step.
Spinner
Only inside the button that started the wait, Sending or Syncing, and only after half a second.
With reduced motion set in the system, every animation on this page stops and every transition is instant.
Voice
Ledgerline speaks like a good bookkeeper: plain, sure and brief.
Tone
- We lead with the figure and the name: $386.00, Quayside Bakery.
- We say what is owed and what to do next, without blame.
- We use shop words, owed and paid, not accounts receivable.
Do and don't
Invoice 0142 sent to Quayside Bakery.
Success. Your invoice has been processed.
$860.00 is still out, across 4 invoices.
You may have some outstanding receivables.
Invoice not sent. Add an email address for Quayside Bakery.
Oops, we could not send that one.
Record payment
Process transaction
Responsive
Ledgerline runs on the laptop in the back office and on the owner's phone at the counter. The layout changes at three widths; the rules below never do.
Breakpoints
- 640 px
Below 640 the invoices table becomes a list, number and amount on top, and the menu folds into a bar of four places.
- 900 px
From 900 the side menu stays open and the dashboard shows the week's four figures in one row.
- 1200 px
From 1200 the invoices table shows every column, due date and terms included.
Rules that never change
- Every target is at least 24 by 24 px, and 44 on touch screens.
- Focus is always visible on every control: a ring in the focus color, set off from the edge.
- Text meets 4.5:1 and icons, large text and focus rings meet 3:1, in light and in dark, as measured in chapter 03.