Skip to content
Browse
Library

OpenCode. Man page on bond paper.

  • Developer tools
  • Light theme
  • 9 colors
  • 1 typeface

OpenCode is a light, all-monospace developer page that reads like a well-kept README. A near-white #fdfcfc canvas holds a single 1080px column framed by 1px hairline rules on both sides and between every section, and a full-bleed terminal video is the only dark mass on the page. IBM Plex Mono (named Berkeley Mono in the stack) does every job: a 38px/700 headline, then section headings set at body size in 16px/700 with 2.0 line-height paragraphs in #646262 graphite. Colour is withheld entirely; carbon #201d1d buttons with 4px corners, [*] bracket markers, underlined install tabs and grey line-art charts carry the identity.

Visit opencode.ai
Screenshot of OpenCode
Captured from opencode.ai on October 23, 2026

OpenCode design system

OpenCode

Brand1

  • Headlines, nav links, the code half of the wordmark and every filled button — a warm near-black that stands in for a brand hue

Accent2

  • Hatched strokes of the GitHub-stars line chart and the darker cells of the contributor dot matrix

  • Faint squares in the contributor dot grid — the palest tone, so the figures read as pencil sketches

Neutrals6

  • The page canvas, header, section fields and button labels on Carbon Ink — a barely warm off-white

  • Recessed fill of the waitlist email field and the install-command panel body

  • Column frame, section dividers, panel and outline-button borders, measured as rgba(15, 0, 0, 0.12) over Paper

  • Inactive install tabs, FAQ plus glyphs, input placeholder, star counts and the legal footer line

  • The [*] list markers, Fig. captions and the grey open half of the pixel wordmark

  • Paragraphs, feature descriptions and command text — softer than Ink so bold labels stand out in the same face

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Carbon Ink

16.34 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.