Brand book
Everything resolves to a rule.
- Mark
- π. Rule, debit, credit, stop
- Grid
- 64 · stem 8
- Colour
- #2060b9
- Faces
- Inter · Geist Mono
01Idea
The mark is a π with a full stop. Read as a ledger: a head rule, two columns, and a figure that is final.
The letters in the middle of the name (lo‑π‑fi) and a page of a ledger share a shape. The stop is the period a bookkeeper writes at the end of an entry: nothing after it changes the figure. Neither reading is the point; both are true, and neither needs explaining to someone using it at 16 pixels.
- Head ruleThe line the page hangs from, drawn first, left to right. It is a unit lighter than the stems so it looks the same weight.38 × 7
- Left columnDebit. Straight down, and it ends where it ends.8 × 37
- Right columnCredit. It turns at the foot, toward the edge of the page, and ends flush with the rule.8 × 23 + r14
- StopThe full stop. The figure is final. The same square as the wordmark’s tittles.8 × 8
It is deliberately not a ledger icon, a coin, an arrow, a bar chart or a bracket. The people who would recognise it, will.
02Construction
One stem, one curve, one shared edge, every edge on a whole unit.
The mark is drawn on a 64 grid with an 8‑unit stem. The wordmark, set at the same scale, has a stem of 8.1: the mark and the letters share one stroke.
The only curve is a quarter circle, inner radius 6 and outer 14. Its terminal ends at x 46, where the head rule ends, so the right edge of the π is one line. The stop stands three units past it, alone, on the baseline. The rule is drawn at 7, a unit under the stem, because a horizontal reads heavier than a vertical of the same measure.
It is four filled paths, not strokes: it takes currentColor, scales without a stroke to recompute, and each part can be drawn on its own. That is how it moves. The 32 tile is its own cut: the rule at 4 so it stays a crisp line, the stop a whole unit clear of the curve so the gap survives a 16px tab.
One module, src/brand/mark.ts, feeds the header, the favicon, the PNG icons, the OG card and every file below. Nothing redraws it.
03Lockup
Lowercase Inter 600, outlined, and one square three times.
Outlined
Set once from Inter 600, tracking −0.025em. Identical in the header, an OG card and a saved SVG, with no font to load.
One square, three times
The mark’s stop and both tittles are the same square, the width of the stem. The tittles hang from the ascender, so the l, the f and both dots top out on one ruled line.
The f is the π turned over
The f’s hook is the credit column’s curve, rotated half a turn: the same radius, cut square, ending flush with its crossbar as the curve ends flush with the rule.
The stop takes the ink
Alone, the mark is one colour. Beside the word, the stop is the sentence’s punctuation and takes the wordmark’s ink. The π is the only blue.
04Space and size
Two stems of air on every side. Nothing under 16 pixels.
Mark: minimum 16px
Lockup: minimum 72px wide
Below 16px, use the tile. It is drawn for 16 and 32, on whole pixels.
05Colour
One blue. It is the product's accent, and it is the whole palette.
- Hex
- #2060b9
- OKLCH
- 0.5 0.155 258
- Token
- --accent
The mark. One per view.
- Hex
- #1b1d21
- OKLCH
- 0.21 0.012 265
- Token
- --text-primary
The wordmark and every word.
- Hex
- #f9fafb
- OKLCH
- 0.985 0.002 265
- Token
- --canvas
The page.
- Hex
- #ffffff
- OKLCH
- 1 0 0
- Token
- --surface
A card on the page.
White on the accent
6.1 : 1
AA for body text, and the inverse lockup.
Accent on the canvas
5.8 : 1
The primary lockup's mark.
Ink on the canvas
16.1 : 1
The wordmark.
No gradients. No glow. No second blue. No purple. The hex is the accent resolved to sRGB, for the places oklch cannot be read: an SVG in Figma, a PDF, a PNG icon. One accent per view applies to the logo: where the page already speaks it, use the mono mark.
06Type
Inter for every word. Geist Mono for every figure.
Inter · 600 · −0.03em
The books are closed.
Display is Inter at display size, not a third family. The italic is the one accent word in a headline, and never more than one.
Geist Mono · tnum · case
| 1,240.56 | · | cash |
| (31,640.56) | · | costs |
| 16,559.44 | · | net |
Every figure, identifier and code sample. Negatives in parentheses, a reserved column so the digits never move.
07Motion
Still by default. Drawn once, in the order it is read.
A header logo is seen dozens of times a session, so it never moves. On a page that is about the brand it plays once: the rule, debit, credit, the letters, the full stop and the Total, in the order a statement is footed.
- Head rule240ms
- Debit column360ms
- Credit column400ms
- Letters ×6640ms
- The stop660ms
- The Total1040ms
Transform, opacity, clip-path
Nothing else, on a surface a few hundred pixels square.
--ease-out, 240–320ms
Entrance only. Never eased the other way, never an inline curve.
40ms stagger, six letters
240ms in all, the cap on any staggered group.
No loop, no bounce
Never near money, never for attention. Reduced motion shows the finished mark.
The one hover is in the header: the credit column and its stop carry a 1.5px step forward, together. A figure being carried, not a logo spinning.
08The Total
A single rule over a double rule: this total is final.
| Revenue | 48,200.00 |
| Expenses | (31,640.56) |
| Net income | 16,559.44 |
The brand has one device and it is not invented. Accountants draw a single line over a subtotal and a double line under a final total, spanning the figure column only. It closes the lockup on documents, and it underlines a number that has been proved.
It is never decorative, never coloured, and never used under a figure that has not been reconciled.
09In use
Drawn for the smallest place it appears, then enlarged.
Lopifi · Books on autopilot
10Misuse
What we do not do to it.
Also: on a busy photograph · the wordmark in another face · the π as a letter in running text · a looping animation · redrawn from memory. Export it from the files below.
11Voice
An accountant who respects your time: specific, calm, exact.
Not this: Supercharge your books with AI-powered magic!
This: 14 transactions categorised. 2 need your call.
Not this: Audit-proof, effortless bookkeeping.
This: A CPA reviews every quarter. Nothing posts without your sign-off.
Not this: Your balance is $0. You’re all set!
This: Cash ($1,240.56) as of Oct 31, bank basis. Unreconciled: 3.
State the figure and its basis. Use the accountant’s noun (accrual, reversal, tie‑out) and define it once, in a link. No exclamation marks, no emoji, nothing a CPA would not sign.
12Files
Export it. Don’t redraw it.
SVGMarkmark.svg
π. on its own. 56 × 56 artboard.
SVGMark, whitemark-white.svg
For the accent or any dark ground.
SVGMark, monomark-mono.svg
One colour (black). Recolour freely.
- SVG
App iconapp-icon.svg
Tile, radius 7/32. White mark on the accent.
SVGMark, animatedmark-animated.svg
The draw-in, once. Head rule, debit, credit, then the stop.
SVGLockuplockup.svg
Mark and wordmark. The primary signature.
SVGLockup, inverselockup-inverse.svg
White. For the accent or any dark ground.
SVGLockup, monolockup-mono.svg
One colour (black). Recolour freely. Print, stamps, emboss.
SVGLockup with the Totallockup-total.svg
Closed with the single-over-double rule. Documents and statements.
SVGLockup, animatedlockup-animated.svg
Plays once, on load. π drawn, letters rise on a 40ms stagger, the stop set last.
Every file is outlined, with no live text and no external references, and drawn from one geometry. The token contract is DESIGN.md; the prose behind this page is Brand identity.