--- version: alpha name: OpenCode website: "https://opencode.ai" description: | A terminal-native marketing system rendered entirely in Berkeley Mono — every word on the page, from the hero headline down to the footer fine print, is monospaced. The page itself reads like a manpage or a static-site README: warm cream canvas (`#fdfcfc`), nearly-black ink (`#201d1d`), 4px-radius rectangles for the few interactive elements, and bracketed `[+]`/`[-]` ASCII markers used as bullets. The brand's only "visual moment" is a single dark hero card that mocks up the OpenCode TUI itself — black background, monospaced terminal output, ASCII pipe characters, and a wordmark rendered as block-pixel ASCII. Every section sits as a hairline-bordered text block on the cream canvas with no shadows, no gradients, no decorative imagery, and no non-monospaced character anywhere in the system. seo: title: "OpenCode Design System for React — Berkeley Mono, #fdfcfc cream, 23 components" metaDescription: "OpenCode's design system as a DESIGN.md file. Berkeley Mono, #fdfcfc cream canvas, #201d1d ink, 23 components. For React, Next.js, and AI tools." highlights: - "100% Berkeley Mono — every word on the page in one monospaced face, with no sans-serif fallback anywhere in the chrome" - "Single warm cream canvas — #fdfcfc carries every page body, with no gray section bands or surface alternation" - "ASCII bracket markers — [+], [-], [x] glyphs replace every icon and bullet, treating brackets as the only iconography" - "One dark surface used once — #201d1d hero TUI mockup is the entire visual moment, reserved as a narrative device" - "Two-value radius vocabulary — 4px on interactive elements, 0px on every container, with no decorative rounding" tags: - "Developer Tools & IDEs" - "AI & LLM Platforms" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is OpenCode's primary brand color?" answer: "OpenCode treats nearly-black `#201d1d` as its brand color rather than pure black. The same token doubles as `{colors.primary}` and `{colors.ink}` — it fills headlines, body text, primary CTA backgrounds, the dark hero TUI mockup, and the news badge. The canvas is a warm cream `#fdfcfc` rather than pure white, and the two near-monochrome values do nearly all the work; the full Apple HIG semantic ramp (`#007aff`, `#ff3b30`, `#ff9f0a`, `#30d158`) ships but is reserved for the in-product TUI." - id: "typography" title: "What typography does OpenCode use, and what should I use if Berkeley Mono isn't available?" answer: "OpenCode runs Berkeley Mono across every text role at weights 400 / 500 / 700 — display headline at 38px, section labels and body at 16px, captions at 14px. Berkeley Mono is a paid commercial font. The closest open-source substitutes are JetBrains Mono (best stroke contrast match), IBM Plex Mono (the documented secondary fallback in the system's stack), and Geist Mono. Preserve `lineHeight: 1.5` for body and `lineHeight: 2` for buttons when substituting; weight rarely needs adjustment." - id: "dark-mode" title: "Does OpenCode's design system have a dark mode?" answer: "No — the marketing site is light-only on `#fdfcfc` cream. The system uses dark surface `#201d1d` exactly once per landing page as the hero TUI mockup, treated as a narrative device rather than a chrome treatment. The actual in-product `opencode` terminal interface is dark by nature (it runs inside a terminal emulator) but its full keybindings, panels, and status bar are not captured in this spec." - id: "ascii-iconography" title: "Why does the site use ASCII brackets instead of icons?" answer: "ASCII bracket markers `[+]`, `[-]`, `[x]`, `+`, and `−` are the brand's only iconography. They function as bullet glyphs in feature lists, expand/collapse toggles in FAQ rows, and section markers — all rendered as plain text content in Berkeley Mono. The single-font, single-iconography decision is the entire identity; replacing brackets with SVG icons would break the manpage metaphor the system is built on." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React terminal-style site?" answer: "Yes — the file is designed to be fed into Claude Code, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce OpenCode's restraint (monospace everywhere, cream canvas, ASCII brackets, 4px interactive radius, 0px container radius) rather than a generic dev-tools theme. You can also reference tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own React component library." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of things, documented in the Known Gaps section: mobile screenshots aren't captured (the responsive pattern is synthesized from desktop evidence and the breakpoint stack), hover states aren't documented per system policy, the in-product TUI beyond the marketing hero mockup isn't captured, the `/go` page marketing surface for the Go SDK isn't extracted, and form validation states (success / error inline messages) aren't present in the captured surfaces." colors: primary: "#201d1d" on-primary: "#fdfcfc" ink: "#201d1d" ink-deep: "#0f0000" charcoal: "#302c2c" body: "#424245" mute: "#646262" stone: "#6e6e73" ash: "#9a9898" canvas: "#fdfcfc" surface-soft: "#f8f7f7" surface-card: "#f1eeee" surface-dark: "#201d1d" surface-dark-elevated: "#302c2c" hairline: "rgba(15,0,0,0.12)" hairline-strong: "#646262" on-dark: "#fdfcfc" on-dark-mute: "#9a9898" accent: "#007aff" accent-hover: "#0056b3" accent-active: "#004085" warning: "#ff9f0a" warning-hover: "#cc7f08" warning-active: "#995f06" danger: "#ff3b30" danger-hover: "#d70015" danger-active: "#a50011" success: "#30d158" typography: display-xl: fontFamily: Berkeley Mono fontSize: 38px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 heading-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 body-tight: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 1 letterSpacing: 0 link-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 2 letterSpacing: 0 caption-md: fontFamily: Berkeley Mono fontSize: 14px fontWeight: 400 lineHeight: 2 letterSpacing: 0 rounded: none: 0px sm: 4px full: 9999px spacing: xxs: 1px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 96px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 4px 20px height: 36px button-primary-active: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 4px 20px button-tab: backgroundColor: "transparent" textColor: "{colors.mute}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: 8px 16px button-tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" button-disabled: backgroundColor: "{colors.surface-card}" textColor: "{colors.ash}" rounded: "{rounded.sm}" badge-news: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-md}" rounded: "{rounded.sm}" padding: 2px 8px text-input: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" textarea: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px install-snippet: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px hero-tui-mockup: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 64px 32px tui-prompt-row: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px list-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 8px 0px faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 0px testimonial-row: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 16px 20px chart-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" padding: 16px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" padding: 32px 0px link-inline: textColor: "{colors.ink}" typography: "{typography.link-md}" badge-section-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.none}" --- ## Overview OpenCode's marketing site is rendered entirely in Berkeley Mono — every word on the page, from the 38px hero headline down to the 14px footer fine print, sits in the same monospaced face. The visual identity comes from that single typographic decision: the page reads like a manpage or a static-site README, complete with bracketed `[+]` / `[-]` / `[x]` ASCII markers used in place of icons or bullets, and a wordmark rendered as block-pixel ASCII art at the top of the nav. There is no sans-serif anywhere, no display face, no italics, no decorative ornament — the system is one font and one weight away from being a 1990s `whatis` page rendered at modern resolutions. The chrome is austere: warm cream canvas (`{colors.canvas}` — `#fdfcfc` with a faint blush), nearly-black ink (`{colors.ink}` — `#201d1d`), and a 4-tier neutral gray ladder for body, metadata, and disabled text. Cards don't exist as raised surfaces — sections are just hairline-bordered text blocks (`{colors.hairline}` 1px) sitting directly on the canvas with `{spacing.section}` (96px) air between them. The single "visual" moment in the entire system is a full-bleed dark hero card (`{colors.surface-dark}` — true near-black) that mocks up the OpenCode TUI itself: a terminal frame with `tab` / `ctrl-p` keybinding hints, a "Build" command line, and the OpenCode wordmark rendered as a pixel-block ASCII title. The semantic palette is unusual for a brand-marketing site: it ships the full Apple Human Interface Guidelines accent ramp — `{colors.accent}` (Apple Blue `#007aff`), `{colors.danger}` (`#ff3b30`), `{colors.warning}` (`#ff9f0a`), `{colors.success}` (`#30d158`) plus their hover/active deepenings — even though the marketing surfaces themselves only use these colors in the dark hero TUI mockup as syntax-highlight stand-ins. The wider palette belongs to the in-product TUI; the marketing pages mostly stay in monochrome. **Key Characteristics:** - 100% Berkeley Mono typography across every text role — no sans-serif fallback anywhere in the chrome - Warm cream `{colors.canvas}` (`"#fdfcfc"`) as the only body background — no surface alternation across sections - Single dark surface (`{colors.surface-dark}` — `"#201d1d"`) reserved exclusively for the hero TUI mockup - 4px radius (`{rounded.sm}`) on every interactive element; sections themselves are sharp rectangles bordered in 1px hairline - ASCII bracket markers (`[+]`, `[-]`, `[x]`) used as bullet glyphs in feature lists and FAQ rows - Block-pixel ASCII wordmark in the primary nav and inside the hero TUI — the brand identity is its own ASCII art - 96px `{spacing.section}` rhythm between every section, with no decorative dividers; only thin 1px `{colors.hairline}` rules separate content blocks ## Known Gaps - **Mobile screenshots not captured** — responsive behavior synthesizes OpenCode's mobile pattern (hamburger drawer, single-column, footer accordion) from desktop evidence and the breakpoint stack. - **Hover states not documented** by system policy. - **In-product TUI screenshots** beyond the marketing hero mockup are not in the captured set; the actual `opencode` terminal interface (full keybindings, panels, status bar) is not documented here. - **`/go` page** not extracted — the marketing page for the Go SDK likely shares the same chrome but introduces code-sample blocks not documented above. - **Form validation state styling** (success / error inline messages) not present in the captured surfaces.