# Brand identity > The Lopifi mark, wordmark, colour, voice and motion. If the two disagree, this document wins. Everything on this page is derived from something the system already believes. The brand does not add a decoration the product does not have. Source: https://lopifi.com/docs/brand/01-identity Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com) --- # Brand identity The Lopifi mark, wordmark, colour, voice and motion. This is the prose behind [`/brand`](/brand), and the source for the `brand` block in [`DESIGN.md`](/design.md). If the two disagree, this document wins. Everything on this page is derived from something the system already believes. The brand does not add a decoration the product does not 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 ledger, a head rule over two columns. The stop is the period a bookkeeper writes at the end of an entry: nothing after it 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 is deliberately not a ledger icon, a coin, an arrow, a graph or a bracket. Nor is it two columns under a lintel, which is a bank. The curve is what keeps it from being a temple; the stop is what keeps it from being a Greek letter. Nobody has to be told what it is; the people who would recognise 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 centre 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 ends at x 46 and so does the curve's terminal: the right side of the π is one vertical, and the stop stands three units past it, alone. - **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 this 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 is identical in the header, an OG card and a downloaded SVG with no dependency on a loaded font. Inter is the type contract's only text face; the wordmark is not 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 rather than 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 half‑unit of extra weight 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 colour. ## The Total The brand's one device is the footing: **a single rule over a double rule**, the statement convention that means *this total is final*. It is used to close a lockup, to underline a figure that has been proven, and as the rule between sections of a printed document. It is never decorative, never coloured, never used under a figure that has not 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. ## Colour The mark is the system's single accent, `--accent`, `oklch(0.5 0.155 258)`, written **`#2060b9`** wherever oklch cannot 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 colour, 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 same rules as the product, 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](../foundations/05-typography.md) and [numerics](../foundations/06-numerics.md). ## Voice The voice is an accountant who respects your time: **specific, calm, exact**. It states the figure and the basis. It does not reassure and it does not hype. - Say what happened, to what, as of when. *"14 transactions categorised. 2 need your call."* - Prefer the noun an accountant would use (*accrual*, *reversal*, *tie‑out*) and define it once, in a link, rather than 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 reviews 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 a header mark is seen dozens of times a session. It moves only on surfaces that are *about* the brand, and then 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 is what makes the figure final, so nothing about the mark is 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. The one hover: in the header, the credit column and its stop carry a 1.5px step forward, together. A figure being carried, not a logo spinning. ## Misuse Do not: recolour 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 colour 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.