Color Palette
Background Colors
Dark Gray 2 (page)
#201D1D · ×177
White (off-white)
#FDFCFC · ×23
White 2 (pure)
#FFFFFF · ×5
Text Colors — Warm Achromatic Grays
Dark Gray 3
#1D1D1F · ×130
Dark Gray (body)
#646262 · ×866
Fill Colors — Achromatic Grays
Mid Gray (fill)
#8E8B8B · ×145
Light Gray 2
#BCBBBB · ×57
Light Gray 3
#DAD9D9 · ×50
The One Color — sole non-achromatic token in the entire system
Dark Green ★
#03B000 · ×1 only
Used exactly once in the interface — the terminal cursor blink. All other 16 tokens are warm achromatic grays. This is the most minimal color vocabulary in the entire 30-system series.
Typography
--font-family-base · Times (serif)
Times
The open source AI coding agent. A classic serif as primary font — the only system in this series using a serif as its base.
Regular · 400
Medium · 500
Bold · 700
--font-family-2 · Berkeley Mono
Berkeley Mono
$ opencode run --model claude-sonnet
> analyzing codebase…
Times: prose & UI
Berkeley Mono: code & data
The open source AI coding agent
Display · --font-size-sm: 38px · Bold · line-height: 57px · Times italic
Build faster with AI
Heading · 24px · Bold · line-height: 32px · Times italic
OpenCode is a terminal-based AI coding agent. Edit files, run commands, and collaborate with AI directly in your codebase.
Body · --font-size-xs: 16px · Regular · line-height: 24px · Times
const agent = await opencode.start({ model: 'claude-sonnet-4-6' })
Code/Data · --font-size-2xs: 14px · Berkeley Mono · line-height: 22.4px
AGENT · TOOLS · SESSIONS · CONFIG
Label/Nav · 12px · Berkeley Mono Medium · line-height: 16px
Letter Spacing — No tokens detected
No letter-spacing tokens were detected in this design system. OpenCode applies no programmatic tracking adjustments — the default browser kerning for Times and Berkeley Mono is used throughout.
Spacing
Spacing Scale
16 steps — 2px → 96px
Borders
Border Radii — Directional tokens (tab-bar aesthetic)
sm (bottom)
0/0/6/6px · ×1
Notably, radius-sm and radius-lg are directional — bottom-only and top-only radii used for terminal tab bars. No pill or full-circle tokens exist in this system.
Border Widths
--border-width-hairline
1px · ×31
--border-width-thin
2px · ×5
Shadows / Elevation
— No shadow tokens detected —
OpenCode uses no box-shadow tokens. Depth is communicated entirely through border opacity gradients and background lightness steps — a flat, terminal-native approach consistent with its CLI heritage.
Z-Index
Single layer at z=10. The simplest z-index vocabulary in the entire series — OpenCode is a single-surface TUI-style interface that doesn't need layered stacking contexts.
| Layer | Value | Usage |
|---|
| --z-1 (Overlay) | 10 | The single overlay layer — tooltips, command palette, menus above the terminal surface |
Breakpoints
— No breakpoint tokens detected —
OpenCode defines no responsive breakpoints. As a terminal-first AI coding agent, the interface targets developers in full-screen terminal environments. Layout is fixed-width or fluid without breakpoint-driven adaptation.
Opacity
Opacity Tokens — 93 Sequential Steps
0.01 → 0.99 in 1% increments (with gaps at 0.07, 0.36, 0.51, 0.54, 0.91, 0.96) — indicates SVG-generated artwork using per-element opacity rather than a curated design token system
Full range: 93 sequential tokens from --opacity-1: 0.01 to --opacity-99: 0.99. This is not a curated design token vocabulary — it's evidence of SVG path opacity values encoded as CSS custom properties, likely from the hero illustration rendered on opencode.ai. Most prominent values: 0.21 (×6), 0.38 (×7), 0.79 (×6), 0.80 (×6).
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #646262 (Dark Gray) | #201D1D (Dark Gray 2) | 2.76:1 | Fail |
| #646262 (Dark Gray) | #FDFCFC (White) | 5.92:1 | AA |
| #646262 (Dark Gray) | #FFFFFF (White 2) | 6.06:1 | AA |
| #646262 (Dark Gray) | #F8F7F7 (White 3) | 5.67:1 | AA |
| #000000 (Black) | #201D1D (Dark Gray 2) | 1.25:1 | Fail |
| #000000 (Black) | #FDFCFC (White) | 20.51:1 | AAA |
| #000000 (Black) | #FFFFFF (White 2) | 21:1 | AAA |
| #000000 (Black) | #F8F7F7 (White 3) | 19.64:1 | AAA |
| #9A9898 (Mid Gray 2) | #201D1D (Dark Gray 2) | 5.83:1 | AA |
| #9A9898 (Mid Gray 2) | #FDFCFC (White) | 2.80:1 | Fail |
| #9A9898 (Mid Gray 2) | #FFFFFF (White 2) | 2.87:1 | Fail |
| #1D1D1F (Dark Gray 3) | #201D1D (Dark Gray 2) | 1.01:1 | Fail |
| #1D1D1F (Dark Gray 3) | #FDFCFC (White) | 16.43:1 | AAA |
| #1D1D1F (Dark Gray 3) | #FFFFFF (White 2) | 16.83:1 | AAA |
| #8D8B8B (Mid Gray 3) | #201D1D (Dark Gray 2) | 4.94:1 | AA |
| #8D8B8B (Mid Gray 3) | #FDFCFC (White) | 3.31:1 | AA Large |
| #8D8B8B (Mid Gray 3) | #FFFFFF (White 2) | 3.39:1 | AA Large |
| #8D8B8B (Mid Gray 3) | #F8F7F7 (White 3) | 3.17:1 | AA Large |
CSS Variables Reference
Dark Gray 2 (page bg)--color-dark-gray-2#201D1D · ×177
Black (text ×447)--color-black#000000
Dark Gray (body ×866)--color-dark-gray#646262
Mid Gray 2 (×140)--color-mid-gray-2#9A9898
Dark Gray 3 (×130)--color-dark-gray-3#1D1D1F
Mid Gray (fill ×145)--color-mid-gray#8E8B8B
Light Gray (fill ×61)--color-light-gray#CFCECD
Light Gray 2 (fill ×57)--color-light-gray-2#BCBBBB
Light Gray 3 (fill ×50)--color-light-gray-3#DAD9D9
White (bg ×23)--color-white#FDFCFC
Dark Green ★ (sole non-gray)--color-dark-green#03B000 · ×1
Times (serif body — unique in series)--font-family-baseTimes
Berkeley Mono (code/UI)--font-family-2Berkeley Mono
Regular / Medium / Boldweights400 / 500 / 700
14px · 16px · 38px (display)sizes3 sizes only
No letter-spacing tokensletter-spacing—
Gutter (dominant ×62)--space-612px
Layout--space-4064px · ×18
Hairline (×31)--border-width-hairline1px
Thin (×5)--border-width-thin2px
Bottom only (tab bottom)--radius-sm0/0/6/6px
Uniform (dominant ×5)--radius-md4px
Top only (tab top)--radius-lg6/6/0/0px
Uniform large (×1)--radius-xl6px
Transition (×1)--duration-instant0.15s
Hover (×1)--duration-fast0.18s
No easing tokens detectedeasing—
No shadow tokens detectedshadow—
No breakpoint tokens detectedbreakpoints—
Single overlay layer--z-110
93 tokens from 0.01–0.99 in ~1% increments. Not a curated design token system — extracted from SVG artwork opacity values encoded as CSS custom properties on the opencode.ai hero section.
Near invisible--opacity-10.01 · ×1
Faint (most used)--opacity-210.21 · ×6
Ghost (most used)--opacity-380.38 · ×7
Dim (most used)--opacity-790.79 · ×6
Strong (most used)--opacity-800.80 · ×6
Near opaque--opacity-990.99 · ×2
OpenCode Design System · Generated 17/04/2026 · 17 color tokens (16 achromatic + 1 green ×1) · 2 font families (Times serif + Berkeley Mono) · 3 font weights · 3 font sizes · 6 line heights · no letter-spacing · 16 spacing steps · 4 radius (2 directional) · 2 border widths · no shadows · 2 durations · no easing · 1 z-index layer (z=10) · no breakpoints · 93 sequential opacity tokens (SVG artwork)