Brand · logo options

Seven marks. Bare, one weight.

No tiles this time. Every mark is one stroke weight, round joins, 45° turns, dots sized off the stroke, drawn on the same 64px grid with the same margins. Shown in the lockup on light and dark, then bare at 56 / 32 / 24 / 16px, then on tiles only as an app-icon option. Currently live: receipt-solid.

— ascender · x-height · baseline▭ mark ink box▮ gap = ½ letter height

How the lockup is aligned

The lockup is a single piece of geometry: the wordmark is converted to vector paths from the font file, and each mark declares its real drawn bounds. What gets aligned is ink against letters, never box against box.

  1. Mark ink height ≈ letter height (the “M”). Portrait marks get up to 4% more so they don't read small; the lowercase m sits at x-height.
  2. Vertical position: marks with a flat base sit on the baseline; symmetrical marks are centred between baseline and cap height. Never centred on the text box.
  3. Gap = half the letter height. Solid marks need more air than a line would.
  4. Clear space = one letter height on all four sides.
  5. Minimum: 16px mark alone, 20px wordmark height in the lockup.

Ratios: letter 0.71em · x-height 0.536em · gap 0.355em (Geist 700, read from the font file). Sources: Akrivi lockup grid, GOV.UK and Android brand rules, LogoDesign.net optical alignment.

  1. 01

    M, full stop

    m-period

    An M whose last leg is a period. The wordmark's own idea, as a mark.

    svg
  2. 02

    M rising

    m-rise

    An M drawn as a line: down, up, then up further. Ends on a dot.

    svg
  3. 03

    M.

    m-mono

    A complete M, narrow, with the period beside it. Reads as ‘M.’ at every size.

    svg
  4. 04

    lowercase m

    m-lower

    The m from molit, drawn in one weight. Friendly, no chart metaphor.

    svg
  5. 05

    Receipt, outline

    receipt-line

    A receipt drawn with one line. Two entries inside. No tile needed.

    svg
  6. 06

    Receipt, solid

    receipt-solid

    A receipt filled in, two entries cut out, a bold total. Reads at 16px, works as an app icon.

    svg
  7. 07

    Bubble, full stop

    bubble-period

    A message with nothing in it but a period. Said. Done.

    svg

To switch, change BRAND_MARK_ID in src/components/logo.tsx. Everything (nav, dashboard, favicon component, share image) follows. Back to the brand page.