Design System Analysis of OpenCode

A terminal-native marketing system rendered entirely in monospace — every word on the page sits in the same monospaced face. Warm cream canvas (#fdfcfc), nearly-black ink (#201d1d), 4px-radius rectangles for the few interactive elements, and bracketed [+] / [-] / [x] ASCII markers used as bullets. The brand's only visual moment is a single dark hero card mocking up the OpenCode TUI itself.

[01] Color

Color Palette

Warm cream canvas with a near-black ink, a 5-tier neutral gray ladder, and the full Apple HIG semantic ramp — preserved for the in-product TUI but rarely used on the marketing pages.

[+] Brand

Ink (primary)

#201d1d

Headlines, body text, primary CTA fill, nav links

Ink Deep

#0f0000

Pressed-state for primary CTA

Cream (canvas)

#fdfcfc

Page body, card surfaces, on-primary text

[+] Surface

Soft Surface

#f8f7f7

Text-input background, testimonial fill

Surface Card

#f1eeee

Install snippet, disabled button fill

Surface Dark

#201d1d

Hero TUI mockup, dark CTA pill

Surface Dark Elevated

#302c2c

Inset prompt-row inside hero TUI

Hairline

rgba(15,0,0,0.12)

1px section divider — translucent warm tint

Hairline Strong

#646262

Tab strip bottom rule, stronger inline divider

[+] Text

Ink

#201d1d

Headlines, body, primary nav links

Charcoal

#302c2c

Subtly softer body where pure ink is too heavy

Body

#424245

Default paragraph, FAQ answers

Mute

#646262

Tab labels (default), metadata, footer

Stone

#6e6e73

Least-emphasis utility text

Ash

#9a9898

Disabled text, TUI mockup secondary

[+] Semantic (Apple HIG ramp — primarily for in-product TUI)

Accent

#007aff

Apple Blue — TUI command highlight, in-product link

Accent Hover

#0056b3

Pressed informational link

Accent Active

#004085

Deeply-pressed informational

Danger

#ff3b30

Destructive confirmation, error state

Danger Hover

#d70015

Pressed destructive

Danger Active

#a50011

Deeply-pressed destructive

Warning

#ff9f0a

Caution callouts

Warning Hover

#cc7f08

Pressed caution

Warning Active

#995f06

Deeply-pressed caution

Success

#30d158

Positive confirmation, in-TUI success indicator

[02] Typography

Typography Scale

100% Berkeley Mono. No sans-serif, no italic, no display variant — the marketing page is a man page rendered at modern resolutions.

display-xlBerkeley Mono
38px / 700 / lh 1.5
The open source AI coding agent
heading-mdBerkeley Mono
16px / 700 / lh 1.5
What is OpenCode?
body-mdBerkeley Mono
16px / 400 / lh 1.5
Default paragraph copy carries every body section, list-row text, and install-snippet code at 16px regular weight.
body-strongBerkeley Mono
16px / 500 / lh 1.5
Inline emphasis or primary nav link
body-tightBerkeley Mono
16px / 500 / lh 1
Compact label without breathing room
link-mdBerkeley Mono
16px / 400 / lh 1.5
Inline body anchor link
button-mdBerkeley Mono
16px / 500 / lh 2
Download
caption-mdBerkeley Mono
14px / 400 / lh 2
Footer link, badge label, copyright row, chart caption

[03] Components

Button Variants

A near-black filled rectangle, an outlined rectangle, a tab strip, and a disabled state — that is the entire button vocabulary, all at 4px radius.

button-primary

bg ink · text on-primary · rounded 4px · 36px height

button-primary-active

bg ink-deep · text on-primary

button-secondary

bg canvas · text ink · 1px hairline-strong · rounded 4px

button-disabled

bg surface-card · text ash

button-tab + button-tab-active

default: text mute · active: text ink + 2px ink underline

News

badge-news

bg surface-dark · text on-dark · padding 2/8 · rounded 4px

$ curl -fsSL https://opencode.ai/install | bash ⧉

install-snippet

bg surface-card · body-md (mono) · padding 12/16 · rounded 4px

[04] Signature

Hero TUI Mockup

The system's only visual moment — a full-bleed dark surface mocking up the OpenCode terminal interface with an ASCII block-pixel wordmark, an inset prompt row, and keybinding hints.

opencode
│ Build Claude Opus 4.5 OpenCode Zen
tab switch agent ctrl-p commands

[05] Content Rows

List · FAQ · Testimonial Rows

Bracketed ASCII markers carry the bullet vocabulary. List rows announce features, FAQ rows expand/collapse, testimonial rows pair an avatar dot with a quote.

[+] List Rows

[+] LSP enabled Automatically loads the right LSPs for the IDE
[+] Multi-session Start multiple agents in parallel on the same project
[+] Share Links Share a link to any session for others to debug
[+] GitHub Copilot Log in with GitHub to use your Copilot account
[+] Any model 75+ LLM providers through Models.dev, including local models
[+] Any editor Available as a terminal interface, desktop app, and IDE extension

[+] FAQ Rows

+What is OpenCode?
+How do I use OpenCode?
+Do I need extra subscriptions to use OpenCode?
+Can I use my existing subscriptions with OpenCode?
+Can I only use OpenCode in the terminal?
+How much does OpenCode cost?
+What about data and privacy?
+Is OpenCode open source?

[+] Testimonial Rows

Row label role · company
Generic testimonial body rendered in body-md on a soft-surface row at 4px radius.
Row label role · company
Second example row to show the avatar-dot color variation across testimonials.

[06] Stat Block

Chart Tiles

Three thin abstract sparse-line charts inside a stat block, each with a Fig N. caption underneath in caption-md mute.

Fig 1. Generic ascending line

Fig 2. Generic dotted scatter

Fig 3. Generic monthly bars

[07] Forms

Form Elements

Inputs sit on the soft-surface fill by default; on focus the background flips to canvas with an ink-colored border.

surface-soft bg · 1px hairline · rounded 4px · 40px height
canvas bg · 1px ink border · rounded 4px
surface-soft bg · 1px hairline · rounded 4px · min-height 96px
button-primary · always full-width below stacked fields

[08] Layout

Spacing Scale

8px base unit with finer 1/2/4px steps. Section rhythm sits at 96px — the universal vertical gap.

xxs · 1
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 96

[09] Shapes

Border Radius Scale

Two values do all the work: 4px for interactive elements and 0px for everything else. Avatar circles are the only fully-rounded element.

none · 0

Sections, hero TUI, nav, footer

sm · 4

Every interactive element

full · 9999

Avatar circles in testimonials

[10] Depth

Elevation & Depth

No drop shadows. Depth is built from hairline borders and the single dark surface used in the hero TUI mockup.

Level 0 — Flat
no border / no shadow
Level 1 — Hairline
1px solid rgba(15,0,0,0.12)
Level 2 — Hairline Strong
1px solid #646262
Level 3 — Inverted Dark
bg #201d1d · the system's only "elevated" surface

[11] Responsive

Responsive Behavior

5 breakpoint zones with a print-style collapse strategy. Section rhythm shrinks 96px → 64px → 48px on the way down.

NameWidthKey Changes
desktop-large1280px+Default — 960px content column, 5-up footer
desktop1024pxSame layout; nav remains horizontal
tablet850pxFooter 5-up → 2-up; /enterprise two-column form stacks
tablet-narrow768pxPrimary nav becomes hamburger; Download CTA stays
mobile640pxSingle-column; hero 38px → ~28px
375mobile
640mobile
768tablet-narrow
1024desktop
1280desktop-large

Touch Targets

Collapsing Strategy