OpenCode Design System

OpenCode's marketing site reads like a manpage. The hero headline at 38px sits in the same Berkeley Mono face as the 14px footer fine print, the bullets are bracketed ASCII markers (`[+]`, `[-]`, `[x]`), and the wordmark in the primary nav is a block-pixel character grid rather than a vector logo. The entire visual moment in the system is a single dark TUI mockup near-black at #201d1d, with a Build command line, a model selector, and tab / ctrl-p keybinding hints. Everything else is flat-on-cream — no shadows, no gradients, no photography, no italic, no sans-serif. The brand identity is one font and one weight away from being a 1990s `whatis` page rendered at modern resolutions.

This page captures the full system as a DESIGN.md file. Inside the spec: 23 color tokens (one cream canvas, one near-black ink, four neutral grays for body / mute / stone / ash, plus the full Apple HIG semantic ramp at #007aff / #ff3b30 / #ff9f0a / #30d158), 8 typography roles all on Berkeley Mono with weights 400 / 500 / 700, an 8-step spacing scale topped by 96px section rhythm, a two-value radius vocabulary at 4px and 0px, and 23 component entries covering buttons, inputs, the install snippet, the hero TUI mockup, and the ASCII-bullet list row. The format is the Google Labs DESIGN.md specification.

Feed the file to Claude Code, Cursor, or GitHub Copilot and the agent will generate React components that match OpenCode's restraint rather than a generic shadcn theme. Reference the tokens directly in Tailwind config or CSS variables — every hex and px value is a quoted entry you can paste. The system is worth studying because almost no marketing site commits to monospace this hard; the typographic discipline of "the marketing page is a man page" is the rarest thing in consumer-facing tooling.