OpenCode / Design system

The open source coding agent.

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…

Download spec Tokens JSON Variables CSS Tailwind theme
18 colors8 type styles8 spacing steps3 radii
OPENCODE / TTY-01
>_

01 / Foundation

Color tokens.

Real values from the packaged OpenCode design reference. Semantic names remain searchable in CSS and JSON exports.

Primary#201d1d--color-primary
On Primary#fdfcfc--color-on-primary
Ink#201d1d--color-ink
Ink Deep#0f0000--color-ink-deep
Charcoal#302c2c--color-charcoal
Body#424245--color-body
Mute#646262--color-mute
Stone#6e6e73--color-stone
Ash#9a9898--color-ash
Canvas#fdfcfc--color-canvas
Surface Soft#f8f7f7--color-surface-soft
Surface Card#f1eeee--color-surface-card
Surface Dark#201d1d--color-surface-dark
Surface Dark Elevated#302c2c--color-surface-dark-elevated
Hairlinergba(15,0,0,0.12)--color-hairline
Hairline Strong#646262--color-hairline-strong
On Dark#fdfcfc--color-on-dark
On Dark Mute#9a9898--color-on-dark-mute

02 / Typography

Voice at every scale.

Documented sizes, weights, line heights and tracking. Proprietary families fall back to an open-source preview substitute.

display-xl38px · 700 · 1.5 · 0
The open source coding agent.
heading-md16px · 700 · 1.5 · 0
The open source coding agent.
body-md16px · 400 · 1.5 · 0
The open source coding agent.
body-strong16px · 500 · 1.5 · 0
OpenCode builds a recognizable visual language.
body-tight16px · 500 · 1 · 0
OpenCode builds a recognizable visual language.
link-md16px · 400 · 1.5 · 0
OpenCode builds a recognizable visual language.
button-md16px · 500 · 2 · 0
OpenCode builds a recognizable visual language.
caption-md14px · 400 · 2 · 0
OpenCode builds a recognizable visual language.

Font families

PrimaryBerkeley MonoPreviewed with IBM Plex Mono, monospace

03 / Geometry

Rhythm and shape.

Spacing and corner geometry are presented directly from the package rather than normalized into a generic scale.

Spacing scale

xxs1px
xs4px
sm8px
md12px
lg16px
xl24px
xxl32px
section96px

Border radius

none0px
sm4px
full9999px

Shadows

00
Flat by design

No shadow tokens are documented for OpenCode. Surface contrast, borders and composition create hierarchy instead.

04 / Depth

Surface hierarchy.

Three working levels show how the brand creates hierarchy using contrast, borders and restrained elevation.

Canvas#fdfcfc
Surface#f8f7f7
Emphasis#201d1d

05 / Components

Brand behavior.

Live controls combine the documented palette, typography, geometry and interaction hierarchy.

01

Solid terminal command

.button-primary
02

Bracketed text action

.button-secondary
03

TUI output panel

.brand-card
FeaturedTUI output panel

Brand surface, type and border treatments working as one component.

04

Command input

input:focus

06 / Guidelines

Keep it recognizable.

Concrete implementation guardrails for preserving the visual character of OpenCode.

Do / Embrace

  • Use monospaced type for every visible word.
  • Keep the warm cream canvas and near-black ink.
  • Use [ + ] and [ − ] markers as structural punctuation.
  • Separate sections with single hairline rules.

Don't / Avoid

  • Do not introduce non-monospace display fonts.
  • Do not add gradients, glows or soft shadows.
  • Do not round rectangles beyond 4px.
  • Do not replace terminal density with oversized marketing cards.