Brand identity

The Lopifi mark, wordmark, color, voice and motion. This is the prose behind /brand and the source for the brand block in DESIGN.md. If the two disagree, this document wins.

Everything here comes from something the system already believes. The brand adds no decoration the product doesn't have.

---

The idea#

Accounting is a few old marks, made exactly: a rule across the top of the page, two columns, the full stop at the end of an entry, a single line over a subtotal and a double line under the total. Four centuries of accountants agreed on these, and nobody has improved them.

The mark is made from four of them and is a π with a full stop: π. The π is the letters in the middle of the name (lo‑π‑fi) and, read as a ledgerFoundationsLedgerA book of accounts, each holding the entries posted to it. The general ledger holds every account; a subledger — AR, AP, fixed assets — holds the detail behind one control account and must agree to it, a head rule over two columns. The stop is the period a bookkeeper writes at the end of an entry, after which nothing changes the figure. The figure is final is the one thing the product promises, and the mark says it in one character.

Part	Reads as	Drawn as
The bar	The head rule, the line the page hangs from	38 × 7, flush top
The left column	Debit. Straight down, ends where it ends	8 × 37
The right column	Credit. Turns at the foot toward the edge of the page and ends flush with the rule	8 × 23, then a quarter circle (inner 6, outer 14)
The stop	Final. The period after the entry	8 × 8, on the baseline

It's deliberately not a ledger icon, a coin, an arrow, a graph or a bracket. It's also not two columns under a lintel, which is a bank. The curve keeps it from being a temple, and the stop keeps it from being a Greek letter. Nobody has to be told what it is. The people who would recognize it will.

Construction#

The mark is drawn on a 64 grid with an 8‑unit stem. The wordmark, set at the same scale in Inter 600, has a stem of 8.1, so the mark and the letters share one stroke.

• Extents: x 8–57, y 10–54. The stop is light, so the box sits half a unit right of center and the weight sits on it. The 4‑unit margin inside a 56 viewBox is the artboard.
• Every edge is on a whole unit. The one curve is a quarter circle, inner radius 6, outer 14, about (46, 40).
• One shared edge. The head rule and the curve's terminal both end at x 46, so the right side of the π is one vertical. The stop stands alone three units past it.
• The rule is 7, the stems 8. A horizontal reads heavier than a vertical of the same measure, so the rule is drawn a unit lighter to look the same. Every typeface makes the same correction in its crossbars.
• The 32 tile is its own cut (app/icon.svg): 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 on a 2× screen.
• The mark is four filled paths, not strokes, so it takes currentColor, scales without a stroke to recompute, and each part can be drawn on its own.

One geometry module, src/brand/mark.ts, feeds the header, the favicon, the PNG icons, the Open Graph card and every downloadable file. No surface redraws it.

Wordmark#

lopifi, lowercase, set in Inter 600, tracking −0.025em, outlined to paths so it's identical in the header, an OG card and a downloaded SVG without depending on a loaded font. Inter is the type contract's only text face; the wordmark isn't a third family. Lowercase because the name is a word you say, not an acronym, and because l‑i‑f‑i gives it four verticals in six letters, the rhythm of a column of figures.

Two details are drawn, not set:

• One square, three times. The two i's are dotless and carry a square tittle the width of the stem, the same square as the mark's stop. The tittles hang from the ascender, so the top of the l, the top of the f and both dots are one ruled line.
• The f is the π turned over. Its hook is the credit column's curve rotated half a turn: the same outer radius, cut square, and it ends flush with the f's crossbar exactly as the mark's curve ends flush with its head rule.

In the lockup the mark is scaled so its height equals the ascender. That makes its stems 8.5 against the letters' 8.1. The extra half unit is deliberate, because a solid mark beside thin type reads lighter than it measures. The gap between them is 18 units, and the mark's stop lands on the baseline as the sentence's full stop. In a lockup the stop takes the wordmark's ink, so the π is the only blue. Alone, the mark is one color.

The Total#

The brand's one device is the footing: a single rule over a double rule, the statement convention for this total is final. It closes a lockup, underlines a figure that has been proven, and separates sections of a printed document. It's never decorative, never colored, and never used under a figure that hasn't been proved.

Clear space and minimum size#

• Clear space: two stems (16 units on the 64 grid, a quarter of the artboard) on every side of the mark or lockup. Nothing enters it: no text, no edge, no other logo.
• Minimum size: the mark alone 16 px tall; the lockup 72 px wide. Below 16 px use the tile (icon.svg), which is drawn for it.
• Tile corner radius: 7/32 of the side. A full‑bleed square for platforms that apply their own mask.

Color#

The mark is the system's single accent, --accent, oklch(0.5 0.155 258), written #2060b9 wherever oklch can't be read (SVG downloads, OG cards, the PNG icons). The wordmark is --text-primary. That is the whole palette.

Use	Mark	Wordmark	Ground
Primary	--accent	--text-primary	--canvas / --surface
Mono (one color, for print, stamps, embossing)	currentColor	currentColor	any
Inverse	#fff	#fff	--accent
Dark mode	--accent (its dark value, oklch(0.65 0.15 258))	--text-primary	--surface

One accent per view applies to the logo: a page that already has its accent in play uses the mono mark.

No gradients, no glow, no second blue, no purple. These are the product's rules, not a separate brand layer.

Type#

Two families, and no third. Inter for every word. Geist Mono for every figure, identifier and code sample. Display is Inter at display sizes, set at 600 with tracking −0.03em; the italic is the one accent word in a headline. See typography and numerics.

Voice#

The voice is an accountant who respects your time: specific, calm, exact. It states the figure and the basis. It doesn't reassure and it doesn't hype.

• Say what happened, to what, as of when. "14 transactions categorized. 2 need your call."
• Prefer the noun an accountant would use (accrualCloseAccrualAn expense incurred, or revenue earned, before it is invoiced — recorded at period end so it lands in the right period, reversal, tie‑out) and define it once, in a link, instead of avoiding it.
• Never "supercharge", "unlock", "effortless", "AI‑powered magic". Never an exclamation mark. Never an emoji.
• Never promise what a CPA must sign. "A CPA checks it every quarter" is a fact; "audit‑proof" is a claim.
• Negative numbers are in parentheses, in prose as in tables. Money is never abbreviated where it can be read exactly.

Motion#

The logo is still by default, because people see a header mark dozens of times a session. It moves only on surfaces that are about the brand, and only once:

1. The head rule is drawn left to right (240 ms).
2. The debit column is drawn top to bottom, then the credit column, 40 ms apart (320 ms each).
3. The six letters rise 4 units into place on the same 40 ms stagger, 240 ms in all.
4. The full stop is set last: faded in and set down 3 units onto the baseline (180 ms). It makes the figure final, so the mark isn't finished until it lands.
5. In the Total lockup, the single rule and then the double rule close the line, as they do on a statement.

Only clip-path, opacity and transform; --ease-out; nothing loops, nothing bounces, nothing is scaled from zero. Reduced motion shows the finished mark. A downloadable animated SVG follows the same sequence.

There's one hover: in the header, the credit column and its stop step forward 1.5px together, like a figure being carried.

Misuse#

Don't: recolor the mark off‑palette · place it on a busy photograph · stretch, skew or rotate it · outline it · add a shadow, glow or gradient · set the wordmark in another face · put the mark inside a circle · use the π as a literal letter in running text · drop the stop, or color it apart from both the π and the word · animate it in a loop · redraw it from memory. Export it.

Files#

Served at /brand/assets/{name}.svg: mark, mark-white, mark-mono, lockup, lockup-mono, lockup-inverse, lockup-total, app-icon, mark-animated, lockup-animated. All are outlined, with no live text and no external references.