Opencode.ai Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

3type steps

2radius steps

1pxspacing base

Opencode.ai, in one page

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

Do's and don'ts

Do

Render every text role in Berkeley Mono. The single-font decision is the entire identity.
Keep {colors.canvas} (#fdfcfc) as the only body background. Don't introduce gray section bands.
Use ASCII bracket markers ([+], [-], [x], +, −) as bullets, toggles, and section glyphs. They are the brand's only iconography.
Anchor the dark {component.hero-tui-mockup} exactly once per landing page as the hero centerpiece. Never use the dark surface for body content.
Reserve {colors.accent} (Apple Blue) and the rest of the semantic ramp for in-TUI states; marketing chrome stays monochrome.
Use {rounded.sm} (4px) on every interactive element and {rounded.none} (0px) on every container.
Stack content sections at {spacing.section} (96px) rhythm with only 1px {colors.hairline} rules between them.

Don't

Don't introduce a sans-serif body font, a display face, or an italic style. Berkeley Mono carries everything.
Don't add drop shadows, gradients, or atmospheric backgrounds. The system is flat-on-cream.
Don't replace the ASCII bracket markers with SVG icons. The brackets are the icons.
Don't use the semantic accent ramp ({colors.accent}, {colors.warning}, {colors.danger}, {colors.success}) on marketing CTAs. They belong to the in-product TUI.
Don't pad cards with 24px+ internal padding. List rows sit at 8px vertical; FAQ rows at 12px.
Don't render the OpenCode wordmark as a vector logo. It is always block-pixel ASCII.
Don't fill the hero TUI mockup with photography or illustration. It is text-only and always shows a faux terminal command line.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Opencode.ai design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #201d1d
- on-primary: #fdfcfc
- ink: #201d1d
- ink-deep: #0f0000
- charcoal: #302c2c
- body: #424245
- mute: #646262
- stone: #6e6e73
- ash: #9a9898
- canvas: #fdfcfc

Type:
- families: Berkeley Mono, JetBrains Mono, IBM Plex Mono, Geist Mono
- scale: 14, 16, 38
- weights: 400, 500, 700

Shape:
- radius: 0, 4

Spacing: 1, 2, 4, 8, 12, 16, 24, 32, 64, 96

Rules:
- Render every text role in Berkeley Mono. The single-font decision is the entire identity.
- Keep `{colors.canvas}` (`#fdfcfc`) as the only body background. Don't introduce gray section bands.
- Use ASCII bracket markers (`[+]`, `[-]`, `[x]`, `+`, `−`) as bullets, toggles, and section glyphs. They are the brand's only iconography.
- Anchor the dark `{component.hero-tui-mockup}` exactly once per landing page as the hero centerpiece. Never use the dark surface for body content.
- Reserve `{colors.accent}` (Apple Blue) and the rest of the semantic ramp for in-TUI states; marketing chrome stays monochrome.
- Use `{rounded.sm}` (4px) on every interactive element and `{rounded.none}` (0px) on every container.

Avoid:
- Don't introduce a sans-serif body font, a display face, or an italic style. Berkeley Mono carries everything.
- Don't add drop shadows, gradients, or atmospheric backgrounds. The system is flat-on-cream.
- Don't replace the ASCII bracket markers with SVG icons. The brackets are the icons.
- Don't use the semantic accent ramp (`{colors.accent}`, `{colors.warning}`, `{colors.danger}`, `{colors.success}`) on marketing CTAs. They belong to the in-produ…
- Don't pad cards with 24px+ internal padding. List rows sit at 8px vertical; FAQ rows at 12px.
- Don't render the OpenCode wordmark as a vector logo. It is always block-pixel ASCII.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: / (home), /zen, /enterprise. The chrome palette is identical across all three.

Brand & Accent

Ink ({colors.primary} / {colors.ink} — #201d1d): the brand's only "color." Headlines, body text, primary CTA fill, nav links, and every solid icon. Treats nearly-black as the brand color rather than pure black to keep type readable on the warm cream canvas.
Ink Deep ({colors.ink-deep} — #0f0000): pressed-state for the primary CTA. Carries a faint red undertone matching the canvas's warm cast.
Cream ({colors.canvas} — #fdfcfc): the brand's signature warm white. Used for every page body, every card surface, the on-primary text color, and the ASCII wordmark fill on dark.

Surface

Canvas Cream ({colors.canvas} — #fdfcfc): every page body, every card.
Soft Surface ({colors.surface-soft} — #f8f7f7): text-input default background, testimonial row fill, alternating row tint.
Surface Card ({colors.surface-card} — #f1eeee): install-snippet pill, disabled button fill, slightly-elevated section row.
Surface Dark ({colors.surface-dark} — #201d1d): the hero TUI mockup background and the dark CTA pill on the home page. Identical to {colors.ink} — the brand uses one near-black for both text and dark surfaces.
Surface Dark Elevated ({colors.surface-dark-elevated} — #302c2c): the prompt-row inside the hero TUI mockup, one notch lighter than the dark surface itself.
Hairline ({colors.hairline} — rgba(15,0,0,0.12)): 1px section divider. The translucent warm tint matches the cream canvas's undertone.
Hairline Strong ({colors.hairline-strong} — #646262): tab strip's bottom rule and stronger inline divider.

Text

Ink ({colors.ink} — #201d1d): headlines, body text, primary nav links, button text on light surfaces.
Charcoal ({colors.charcoal} — #302c2c): subtly softer body where pure ink is too heavy.
Body ({colors.body} — #424245): default paragraph text and FAQ answers.
Mute ({colors.mute} — #646262): tab labels (default state), metadata, footer link text, in-list secondary annotations.
Stone ({colors.stone} — #6e6e73): least-emphasis utility text, breadcrumb separators.
Ash ({colors.ash} — #9a9898): disabled text and secondary annotation in dark TUI mockup, also TUI mockup secondary color.

Semantic

The full Apple Human Interface Guidelines semantic ramp ships with the system. On marketing pages these colors appear primarily inside the hero TUI mockup as syntax-highlight stand-ins; in the in-product TUI they carry their conventional meaning.

Accent ({colors.accent} — #007aff): primary informational signal, in-product link color, TUI command highlight.
Accent Hover ({colors.accent-hover} — #0056b3): pressed informational link.
Accent Active ({colors.accent-active} — #004085): deeply-pressed informational state.
Danger ({colors.danger} — #ff3b30): destructive confirmation, error state.
Danger Hover ({colors.danger-hover} — #d70015): pressed destructive.
Danger Active ({colors.danger-active} — #a50011): deeply-pressed destructive.
Warning ({colors.warning} — #ff9f0a): caution callouts.
Warning Hover ({colors.warning-hover} — #cc7f08): pressed caution.
Warning Active ({colors.warning-active} — #995f06): deeply-pressed caution.
Success ({colors.success} — #30d158): positive confirmation, in-TUI success indicator.

Type scaleRead the full spec

Font Family

Berkeley Mono is the proprietary monospaced face used across every text role in the system. It carries weights 400 (regular), 500 (medium), and 700 (bold) and falls back through a long monospace stack — IBM Plex Mono → ui-monospace → SFMono-Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New.

The single-font decision is the brand. There is no display face, no body sans, no italic alternative, and no fallback to a proportional font anywhere — even the legal copyright row uses Berkeley Mono at 14px. This is the most aggressive typographic restraint of any site in the marketing-tools category: OpenCode's identity is "the marketing page is a man page."

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display-xl}`	38px	700	1.5	Hero headline ("The open source AI coding agent")
`{typography.heading-md}`	16px	700	1.5	Section label ("What is OpenCode?", "FAQ", "Built for privacy first")
`{typography.body-md}`	16px	400	1.5	Body copy, paragraph text, list-row text, install-snippet code
`{typography.body-strong}`	16px	500	1.5	Inline emphasis, primary nav link, tab-label active
`{typography.body-tight}`	16px	500	1	Compact label rendered without breathing room
`{typography.link-md}`	16px	400	1.5	Inline anchor link in body prose
`{typography.button-md}`	16px	500	2	Every button label across the system
`{typography.caption-md}`	14px	400	2	Footer link text, badge label, copyright row, chart caption

Principles

The hierarchy is built almost entirely from size and weight contrast on a single face. The display headline (38px / 700) and the heading-md label (16px / 700) share a weight; the difference is just size. Body and link share size, weight, and line-height — only context distinguishes them. Buttons get a deliberately tall line-height (2.0) so labels feel calmly spaced inside the 4px-radius rectangle.

Note on Font Substitutes

Berkeley Mono is a paid commercial font. Open-source substitutes that approximate its metrics within ~3% at body sizes:

JetBrains Mono — closest match for stroke contrast and x-height; pair at weights 400 / 500 / 700.
IBM Plex Mono — official secondary fallback in the documented font stack; slightly more open counters but matches line-height behavior.
Geist Mono — modern alternative with similar geometric construction.

When substituting, line-height behavior is preserved by keeping lineHeight: 1.5 for body and lineHeight: 2 for buttons — adjusting weight is rarely needed.

Components and layoutRead the full spec

No hover states documented per system policy. Each spec covers Default and Active/Pressed only.

Buttons

button-primary — the universal OpenCode CTA

Background {colors.primary}, text {colors.on-primary}, type {typography.button-md}, padding 4px 20px, height ~36px, rounded {rounded.sm} (4px).
Used for "Download" (top nav), "Get started with Zen", "Send" (enterprise contact form), "Subscribe" (newsletter footer), "Read docs →".
Pressed state lives in button-primary-active — background drops to {colors.ink-deep}.

button-secondary — outlined alternative

Background {colors.canvas}, text {colors.ink}, 1px solid {colors.hairline-strong} border, type {typography.button-md}, padding 4px 20px, rounded {rounded.sm}.
Lower-emphasis CTA — appears beside the primary fill where two actions are paired.

button-tab + button-tab-active — install-tab strip

Default: transparent background, text {colors.mute}, type {typography.button-md}, padding 8px 16px, rounded {rounded.none}.
Active: same surface, text {colors.ink}, with a 2px {colors.ash} bottom underline indicating selection.
Used in the install-method tab strip on the home page (curl / npm / bun / brew / yay).

button-disabled

Background {colors.surface-card}, text {colors.ash}, rounded {rounded.sm}.

Badges & Chips

badge-news — small dark chip in the news/announcement strip

Background {colors.surface-dark}, text {colors.on-dark}, type {typography.caption-md}, padding 2px 8px, rounded {rounded.sm}.
Sits inline with body copy as a "News" / "Beta" / "Live now" tag on the home page above the hero headline.

badge-section-label — bracketed section header

Background transparent, text {colors.ink}, type {typography.heading-md}, rounded {rounded.none}.
Renders as a bare Heading line above a 1px {colors.hairline} rule with no chip background — but the way the text reads ("[+]", "[x]", What is OpenCode?) makes it function as a label component.

Inputs & Forms

text-input + text-input-focused

Default: background {colors.surface-soft}, text {colors.ink}, 1px solid {colors.hairline}, type {typography.body-md}, padding 8px 12px, height ~40px, rounded {rounded.sm}.
Focused: background flips to {colors.canvas}, border becomes 1px solid {colors.ink} (the canvas's flat focus signal — no halo, no glow).
Used for every contact-form field on /enterprise (Full name, Role, Company, Company email, Phone number) and the newsletter email field at the home page footer.

textarea

Background {colors.surface-soft}, text {colors.ink}, 1px solid {colors.hairline}, type {typography.body-md}, padding 12px, rounded {rounded.sm}.
"What problem are you trying to solve?" multi-line textarea on /enterprise.

install-snippet — the home page's signature install code block

Background {colors.surface-card} (#f1eeee), text {colors.ink} rendered in {typography.body-md} (already monospaced — Berkeley Mono), padding 12px 16px, rounded {rounded.sm}.
Contains the literal curl -fsSL https://opencode.ai/install | bash command with a small copy-icon at the right edge. Sits below the install-method tab strip.

Cards & Containers

hero-tui-mockup — the home page's signature TUI preview

Container: full-bleed {colors.surface-dark} (~near-black), padding 64px 32px, rounded {rounded.none}.
Contents (top → bottom): ASCII block-pixel "OPENCODE" wordmark centered in {colors.on-dark}; a {component.tui-prompt-row} showing a "Build" command line with model selector text; an tab switch agent ctrl-p commands keybinding hint row at the bottom in {colors.ash}.

tui-prompt-row — the inset command line inside the TUI mockup

Background {colors.surface-dark-elevated} (#302c2c), text {colors.on-dark} in {typography.body-md}, padding 8px 12px, rounded {rounded.sm}.
Renders an inline command (Build Claude Opus 4.5 OpenCode Zen) with a leading vertical pipe and the model name styled as a bracketed token.

list-row — feature/benefit row with ASCII bracket bullet

Background {colors.canvas}, text {colors.body} in {typography.body-md}, padding 8px 0.
Each row begins with a [+] / [-] / [x] ASCII marker followed by a bold label and a regular description: e.g., [+] LSP enabled Automatically loads the right LSPs for the IDE. The bracket marker is part of the text content, not a separate icon.

faq-row — FAQ entry with bracket toggle

Background {colors.canvas}, text {colors.ink} in {typography.body-md}, padding 12px 0, with a 1px {colors.hairline} bottom rule.
Each row leads with + / − ASCII markers indicating expand/collapse state. Always rendered as plain text rows — no chevron icons, no animated accordion chrome.

testimonial-row — /zen peer-quote row

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
desktop-large	1280px+	Default — 960px content column, 5-up footer link grid
desktop	1024px	Same layout; nav remains horizontal
tablet	850px	Footer collapses to 2-up grid; `/enterprise` two-column form stacks
tablet-narrow	768px	Primary nav becomes hamburger drawer; Download CTA stays visible
mobile	640px	Single-column everything; hero display drops 38px → ~28px; section padding tightens

Touch Targets

All interactive elements meet WCAG AA at the ~36–40px height range. {component.button-primary} sits at ~36px with 20px horizontal padding. {component.text-input} and {component.textarea} sit at ~40px. {component.button-tab} rows in the install-method strip sit at ~32–36px depending on label length but extend to a full 44px tappable cell via inline padding. Footer links use {typography.caption-md} (14px) but receive ~28px line-height (caption-md is 2.0) plus 8px vertical padding for a comfortable ~44px tappable row.

Collapsing Strategy

Primary nav: desktop horizontal cluster → tablet-narrow hamburger drawer at 768px. The dark "Download" CTA stays visible at all widths.
Hero TUI mockup: maintains its full-bleed dark surface at every breakpoint; the ASCII wordmark scales proportionally and the keybinding-hint row may wrap to two lines on narrow screens.
Install snippet + tab strip: desktop fixed-width pill → mobile full-width pill with horizontal scroll on the tab strip if labels overflow.
Footer: 5-up horizontal link grid → 2-up at tablet → 1-up at mobile (each link becomes a full-width row).
/enterprise two-column layout: desktop 50/50 → tablet stacks to single-column with the form below the text block.
Section padding: {spacing.section} (96px) desktop → 64px tablet → 48px mobile.
Hero headline: {typography.display-xl} (38px) at desktop, scaling to ~28px at mobile, line-height holding at 1.5.

Image Behavior

There are no raster images in the system aside from the favicon and OG share image. Every visual element — wordmarks, charts, icons — is rendered as type or inline SVG and scales without aspect-ratio considerations.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-opencode {--page-bg: #fdfcfc;
  --page-bg-gradient: none;
  --text-color: #201d1d;
  --heading-color: #201d1d;
  --link-color: #201d1d;
  --link-hover-color: #050505;
  --border-color: #d5d4d4;
  --card-bg: #fdfcfc;
  --card-shadow: 0 1px 2px rgba(32,29,29,0.06);
  --card-hover-shadow: 0 6px 18px rgba(32,29,29,0.12);
  --header-bg: #201d1d;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #fdfcfc;
  --footer-text-color: #6d6b6b;
  --button-bg: #201d1d;
  --button-text-color: #fdfcfc;
  --button-hover-bg: #050505;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f0efef;
  --button-secondary-text-color: #201d1d;
  --button-secondary-hover-bg: #e2e1e1;
  --button-secondary-border: 1px solid #d5d4d4;
  --prompt-bg: #f2f1f1;
  --prompt-text-color: #201d1d;
  --base-font: var(--font-mono);
  --heading-font: var(--font-mono);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kashiyama 82.3%
audio technica 77.1%
felissimo 77.1%
ships 72.7%
bandainamco 71.6%

Where this came from

Source document: volt/design-md/opencode.ai/DESIGN.md · 31.6 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.