Internal · The Passbook design system v1
How Keel is made.
This is the living reference for the retro print-ledger system — cream paper, typewriter data, letterpress shadows. Everything Keel shows on screen is built from the pieces on this page. If a screen and this page disagree, this page wins.
The mark · Ledger-keel device
§ 1 of 996px
44 · masthead
24
16
favicon
two-tone
A hull rides three ruled ledger lines, its keel — the V of the hull itself — dipping through a break in the top rule. The rules read twice: they are the waterline and they are ledger paper. The two unbroken rules beneath the keel are the even keel made literal, and the accountant’s double rule under a closed total.
- One color
- Ships as ink on paper (currentColor). On dark surfaces: cream on ink, as in the favicon tile.
- Two-tone
- Teal rules permitted on special surfaces only; the hull stays ink.
- Clearspace
- One rule-height (3 units of the 48 grid) on all sides, minimum.
- Never
- No recoloring beyond ink / teal / cream, no rotation, no strokes, no soft corners, no drop shadows.
Color tokens
§ 2 of 9Specimens above, measurements below — the hex is printed under every chip, so the swatch is never the only way to read a color.
| Token | Hex | Role | Contrast on paper |
|---|---|---|---|
| --paper | #F6EFE0 | App background — warm aged cream. | Surface — carries ink text |
| --card | #FDF9EE | Cards and table surfaces — a lighter sheet laid on the paper. | Surface — carries ink text |
| --ink | #2B2416 | Primary text, borders, and rules — warm near-black ink. | 13.42:1 |
| --ink-soft | #6C6047 | Secondary text and captions. | 5.39:1 |
| --teal | #3E6E70 | Primary actions, links, and filled meter ticks. | 5.00:1 — the same reading for cream text on a teal fill, since contrast is symmetric |
| --teal-deep | #2E5456 | Teal hover state; teal used as text on paper. | 7.28:1 |
| --green | #3D6B47 | Credits, AUTO stamps, and success states. | 5.41:1 |
| --red | #9E3B2F | Debits, NEEDS APPROVAL, and the forecast floor line. | 5.88:1 |
| --amber-text | #7A5410 | Flag and warning text. | 5.91:1 |
| --amber-wash | #F3E3BC | Flag wash and highlight, always behind amber text. | Wash — never a text color |
| --rule-dark | #B8A87F | Table rules and stronger dividers. | Decorative only — never text |
Debits are red and credits are green, but color is never the only signal — every amount carries its sign, and every state carries a stamped word.
Typography
§ 3 of 9Keel pays the bills it recognizes and files what it is sure of. Anything uncertain waits in the queue for your judgment.
Scale and rules
The type scale runs 12 / 14 / 16 / 18 / 21 / 28 / 36 / 52 pixels. Body text sits at a line-height of 1.65. Capital letters appear only ever in Courier — Merriweather is never letter-spaced, never set in caps — and every number, date, and amount is set in Courier as well.
Stamps
§ 4 of 9A decorative corner stamp may tilt two degrees with .stamp-tilt; inline stamps always sit level. A stamp is a word, never just a color.
Buttons
§ 5 of 9Buttons lift on hover and press on click, like type striking paper. Every target is at least 44px tall, and adjacent decision buttons keep at least 8px between them.
Confidence meter
§ 6 of 9The tick meter never appears without its numeric label — filled boxes alone are not a reading.
Traces & banners
§ 7 of 9Forms
§ 8 of 9Labels sit above the field in Courier caps — a placeholder is never the only label.
Enter a number, like 1200.00 — letters can't be filed.
Set to 90% — Keel files anything at or above this on its own.
Voice
§ 9 of 9- Plain language
- No accounting jargon — an owner who is not an accountant must understand every sentence.
- Reasons attached
- Every autonomous action states its why — the reasoning is stored and shown, never implied.
- Signs and words
- Debits read −$312.40 in red; credits read +$2,850.00 in green — the sign carries the meaning, never color alone.
- Calm
- No exclamation marks and no urgency theater — even an urgent item is stated plainly.