01Identity

Threadline makes system history followable.

The visual center of the brand is a single idea: a line that connects discrete points into an intelligible path. Audit history is exactly that — scattered row changes, actions, and requests that only make sense once something traces the route between them.

The wordmark draws this idea instead of decorating around it. The word threadline is set in Geist; at the adjacent d and l, the two ascenders are cut at a shared line — the fabric — and a single stitch of thread rises out of one stem, arcs over, and dives back into the other. The letterforms are the material; the thread passes through them. One line, two points, a followable path. Nothing else is added: no badge, no container, no abstract symbol.

What it should feel like

Anti-traits

Not flashy. Not cute. Not cyberpunk. Not militarized. Not compliance-bureaucratic. Not generic SaaS. Not fake-futurist.

02Logo system

One drawing, eight cuts.

Every asset is pure vector paths — the letterforms are outlines, not live text, so the mark renders identically on every surface with zero font dependencies. The family below ships in this directory; each file has one job.

Clear space

For the mark and favicon, keep one quarter of the rendered size clear on every side — a 16px favicon context keeps 4px clear.

Minimum sizes

The numbers are derived from the geometry, not taste. The arc stroke renders at 11% of the lockup's height, so it stays solid long after the letterforms give out — wordmark legibility governs the minimums, except for the favicon, which is its own 16px design.

Dark and light

Every light-surface rendition is designed, never recolored from dark: the light primary uses Ink #0F1728 glyphs from the light token lane. The stitch arc keeps Stitch Blue #4781E6 on both surfaces — 5.0:1 against Threadline Black, 3.78:1 on white, above the 3:1 graphics floor.

GitHub renders READMEs in both schemes. Use the <picture> element so each reader gets the asset designed for their theme — copy this into the root README as-is:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="brandbook/logo-primary.svg">
  <img alt="Threadline" src="brandbook/logo-primary-light.svg" width="420">
</picture>

Live demonstration — this panel uses the same mechanism with the files beside this page, and follows your system's color scheme:

The favicon story

The favicon is not the lockup shrunk down — it is its own artifact, drawn at a 16px canvas: one stitch through the fabric line, two strokes total, no container chip. Because favicons cannot inherit a page's text color, the file carries an internal prefers-color-scheme style that flips its ink between Ink and Fog with the browser chrome. Scale it up freely; never design downward from larger art.

03Misuse

What not to do.

These abuses are rendered here so they are unambiguous — and rendered only here. The repository ships no antipattern assets. One correct reference first, then the gallery.

The small-size rules

04Imagery

Lines, not lock icons.

Imagery speaks the language of the mark: lines that connect points into a followable path. Line maps, timelines with depth, contour cross-sections, labeled architecture flows — macro linework in the spirit of stitching and signal traces. The four specimens below are reference drawings; copy them as starting points for real diagrams.

Diagram rules

Banned imagery

The visual clichés of the audit and security category never appear — not in docs, not in slides, not in social art. Rendered small here so they are unambiguous.

The last one matters most: an unlabelled node graph is the failure mode closest to home. The fix is the diagram rules above — put domain nouns on the rails and it becomes a system flow.

05Color

Night infrastructure with luminous signal lines.

Dark neutrals carry the product and high-signal moments; light surfaces carry docs and print-like material. Color is signal, not decoration — and never the only carrier of meaning.

Two blues, two jobs

The stitch arc is Stitch Blue #4781E6 on every surface, dark and light alike. Thread Blue #4F8CFF is the interface accent — links, focus, selection, primary actions — and stays untouched everywhere the product already uses it. The two blues are siblings with separate jobs: one belongs to the mark, one to the UI. Stitch Blue ships as its own token (--tl-color-stitch-blue, aliased as --tl-color-logo-arc) and never substitutes for the interface accent, in either direction.

Rules

06Typography

Geist speaks. Plex Mono measures.

Geist carries prose, headings, and UI. IBM Plex Mono carries everything machine-flavored: code, IDs, table names, diffs, metadata labels. This page names both first in its font stacks and degrades gracefully to system type when they are not installed.

Why the wordmark is paths, not type

The logo's letterforms are Geist 600 converted to outlines. No surface that renders the mark — GitHub, HexDocs, a terminal preview, this page — ever needs the font, requests a file, or substitutes a fallback. The drawing is portable because it carries its own geometry; the cut ascenders and the stitch arc stay exactly where they were drawn, everywhere.

Rules

07Voice & microcopy

A calm senior engineer with strong product taste.

Threadline speaks plainly about what it does. Precise over clever. Plainspoken over buzzwordy. Confident over swaggering. Thoughtful over promotional. Calm over urgent. Technical over salesy.

Writing rules

Microcopy in the product

Errors state what failed, why if known, and the next action — without blame.

08Applications

The system at work.

Reference specimens for the surfaces that matter most. Each ships as a pure-path SVG alongside this page; the renders below use the same geometry.