D2.2 / Approved visual system / September 2026

Paper Relay

Paper surfaces. Ink typography. A deliberate yellow-green accent. The b4.run brand kit brings the approved visual system together with the original D2.2 masters.

Read the full guidelines Concise usage notes Download kit (online) ↗

01 / Logo and space

Keep the mark intact.

The primary wordmark is b4.run; the separately proportioned compact is b4. Pronounce the name “bee-four dot run.” Both use custom vector geometry.

Preserve the Big Dot, raised stem of the 4, open counters, and letter spacing. Use one ink per logo, and keep taglines separate.

Allow one dot diameter of clear space around the visible wordmark: 34 master units, or about 10.4 px at a 160 px export width. The SVG padding is smaller than this margin.

Start at 160 px for the wordmark and 24 px for the compact. Allow roughly one-third of the compact’s visible letter height as clear space; favicons are a constrained exception.

Ink wordmark White wordmark Ink compact White compact

Use ink on paper, white, and Relay fields. Use white on dark fields. Never stretch, outline, redraw, recolor individual letters, or replace the period.

02 / Color roles

Paper leads. Relay emphasizes.

Paper / page#F5F4F0

Ink / text#111111

Relay / accent#B4CE37

Dark / code#17181B

Use Relay tint #E7EDD1 for quiet selection and informational backgrounds. Keep body text neutral; dark ink on Relay has 10.63:1 contrast. Relay on paper has only 1.61:1 and is decorative there.

Normal text needs at least 4.5:1 contrast. Essential boundaries and focus indicators need at least 3:1. Verify real interaction states; palette choices alone do not establish interface accessibility.

03 / Typography and rhythm

One hierarchy across surfaces.

Inter

Bold letters.
Room to breathe.

600–700 for headings; 400–500 for reading and controls. Start body text at 16 px with a 1.7–1.85 line height and a 60–75 character reading measure.

JetBrains Mono

model: "gpt-5-mini"
src/app/support/index.ts

Use for code, commands, paths, and short technical labels. Start code at 13–14 px, and let long lines scroll within their panel.

Font sources and licenses

Spacing: 8 / 16 / 24 / 32 / 48 / 72. Use generous margins, thin rules, and square panels. A separate dot may provide a graphic focal point; keep it clear of text and logo clear space.

04 / Visual reference

The system on one sheet.

Logo geometry, approved colors, clear space, typography, and dot graphics. This is a brand reference with neutral specimens, not proposed homepage messaging.

1200 × 1800. Caption text is outlined for portable rendering; editable text and fonts are retained in the source SVG.

Outlined SVG Editable text source PNG usage sheet Full text guidelines

05 / Actual-size proofs

Check the size you use.

These PNGs use fixed CSS dimensions at 100% browser zoom. A 120 px wordmark or 16 px icon is constrained use; verify legibility on the target display and in its actual surroundings.