Design

Colors and fonts come from src/brand-visual.ts in the repository and are rendered here and in the console from the same file. Colors are defined as hex values. Logo files are in src/brand-assets/source/.

Mark

Ticket silhouette: navy tile, side notches, teal eyes, white perforation and barcode, one teal bar. Used in the site header, the console rail, and social cards. Do not use this full silhouette at 16 px.

Favicon

Simplified eyes, perforation, and barcode on a navy tile. The ticket silhouette muddies at favicon size. Home-screen PNGs are resized from the official 512 raster.

Social and icons

Generated from the same tokens and mark. Rebuild withnode site/scripts/og.mjs andnode site/scripts/write-icons.mjs, then commit the PNGs.

Tokens

Brand navy is #14213D. Brand teal is #00C2A8. Dark surfaces sit on navy; the action accent is teal. Light theme uses a darker teal so text on white stays AA. Docs code fences use these same tokens through --astro-code-*; they do not ship a separate highlighter palette.

Type

Display Inter. Body Inter. Mono IBM Plex Mono. StackInter, Helvetica, Arial, sans-serif. The wordmark is live type, lowercase botpasses, no.com. Self-hosted OFL files, no font service at runtime. Headings use the display face at 700; body text is 16 px with a 1.55 line height and a 68-character measure.

Shape

Cards use a 10 px radius, a 1 px --line border, and the elevated background. Buttons use an 8 px radius and a 44 px minimum target. The primary button is the accent on the page background; other buttons are outlined. Links are underlined, not colour-only.