Looseleaf

Brand

The Looseleaf mark

A single leaf, drawn as one continuous contour with the midrib cut out of the same path — one sheet, one line, nothing added. It is the whole identity: there is no secondary mark, no icon family, no illustration set.

Everything on this page is generated from the same path data and the same palette tokens the product ships. Download what you need; the rules underneath each section are the whole brand.

Download everything (.zip)

208 × 223 · one path · evenodd

Construction

Clear space

Keep clear on all four sides a margin of half the mark’s height. Nothing crosses it — not type, not rules, not another logo.

Minimum size

16 px Looseleaf 96 px wide

The mark holds down to 16 px tall; below that the midrib closes up. The lockup needs 96 px of width. Under either floor, use the favicon tile instead.

The lockup

Looseleaf
Mark height
1em
Gap
0.32em
Baseline offset
-0.155em
Wordmark
Grotesk 800 / −0.025em

Colourways

Six, and no others. Agent and human are reserved: the duotone is the product’s attribution language, so the mark only wears them where it is standing in for an author.

Mark PNGs are square, transparent, and sized by the number in the filename. Lockup PNGs are cropped to the ink and sized by the wordmark’s type size. For vector lockups, set the wordmark yourself in Schibsted Grotesk ExtraBold at the ratios above — the mark SVG is the only outlined asset, so it stays editable wherever the font is installed.

Application

Browser icon

Looseleaf browser icon on a light field
Looseleaf browser icon on a dark field

No tile. The field is transparent so the tab strip shows through, and the SVG carries its own prefers-color-scheme rule — ink on light chrome, paper on dark. Inset 3%.

SVG Light  16 32 48 96 Dark  16 32 48 96

Home screen

Looseleaf home screen icon, 180 pixels

The one place the mark sits inside a shape, and only because iOS composites a transparent icon onto black. An ink leaf inset 19% into an opaque paper square. Never invent other containers.

180 PNG

Never

  • Recolour it outside the six colourways, or fill it with a gradient.
  • Rotate, mirror, skew, or stretch it — the leaf leans one way.
  • Outline it, or add a shadow, glow, bevel, or blur. Nothing fuzzy.
  • Reset the wordmark in another face, weight, or letterspacing.
  • Stack the mark above the wordmark, or separate them with a rule.
  • Use agent blue or human rust decoratively, where nothing is being attributed.

Colour

Colour is information, not decoration. A near-monochrome paper base carries everything; the two provenance colours attribute authorship; the diff pair reports what changed. If a colour is not doing one of those jobs, it does not belong on the screen.

Values are authored in oklch and that is what ships; the hex column is the sRGB conversion for tools that cannot read it. Contrast is measured live against the field each colour is actually set on — surfaces and rules carry no ratio, because text is never set in them.

Surface

Surface colour tokens
Token oklch Hex
paper oklch(98.7% 0.004 252) #f9fbfd
sheet oklch(99.4% 0.002 252) #fcfdfe

Ink

Ink colour tokens
Token oklch Hex
ink oklch(23% 0.015 252) #181d24
ink-soft oklch(44% 0.022 252) #4a545f
ink-faint oklch(53.5% 0.02 252) #656e79

Rules

Rules colour tokens
Token oklch Hex
line oklch(89.5% 0.009 252) #d8dde2
line-soft oklch(94% 0.005 252) #e9ebee
line-strong oklch(63% 0.018 252) #828a94

Provenance

Provenance colour tokens
Token oklch Hex
agent oklch(46% 0.14 252) #0058a3
agent-wash oklch(95.5% 0.017 252) #e8f1fc
human oklch(49% 0.11 45) #924925
human-wash oklch(96% 0.015 60) #faf0e8

Diff

Diff colour tokens
Token oklch Hex
diff-add oklch(48% 0.13 150) #067132
diff-add-wash oklch(98.2% 0.018 150) #f1fdf3
diff-del oklch(40% 0.16 25) #8a0314
diff-del-wash oklch(90% 0.038 25) #f7d5d1

Never let hue carry the meaning

Red and green collapse to the same olive under deuteranopia, and the blue-versus-warm axis that does survive is already spent on agent and human. So the diff washes carry a deliberate lightness split — 98.2% against 90% — and that brightness gap, not the hue, is what makes a removed row scannable. The + and gutter marks and the strikethrough are load-bearing for the same reason. Attribution always carries a label as well as a colour.

Type

Two faces, one job each. The sans speaks for the interface; the mono speaks for the engine. Anything Looseleaf stores or computes — content, diffs, ULIDs, revisions, byte counts — is set in the mono, so machine output is never mistaken for editorial voice.

Schibsted Grotesk

Sans — the interface voice

Headings, body copy, buttons, the wordmark (ExtraBold, tracking −0.025em).

SIL Open Font License 1.1 · Get the family

Agents forget. Pages don’t.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@#$%… ()[]{}<> +−×÷=

  • Exact, calm, trustworthy 400 Regular
  • Exact, calm, trustworthy 500 Medium
  • Exact, calm, trustworthy 700 Bold
  • Exact, calm, trustworthy 800 ExtraBold

Fragment Mono

Mono — the machine voice

Everything the engine produces: page content, diffs, ULIDs, revisions, tokens, timestamps.

SIL Open Font License 1.1 · Get the family

Agents forget. Pages don’t.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@#$%… ()[]{}<> +−×÷=

  • Exact, calm, trustworthy 400 Regular

Voice

Literate and matter-of-fact — the tone of a well-written man page or a Swiss timetable. State what the system does and what it guarantees. Confidence comes from rigour made visible: real revision numbers, real diffs, real bytes. Never from adjectives.

Say
“Every mutation is revision-guarded and idempotent; history is linear and append-only.”
Not
“Supercharge your workflow with AI-powered memory.”

Looseleaf is one word, capital L, never “LooseLeaf” or “Loose Leaf”. It is a product, not a platform or a solution.