# OpenCode — Design System
> An open-source AI coding agent for terminal, IDE, and desktop environments.
- **Canonical:** https://uiuxskills.com/library/opencode
- **Source:** https://opencode.ai
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:20.620Z

---

---
version: alpha
name: OpenCode
description: An open-source AI coding agent for terminal, IDE, and desktop environments.
tone: Modern, technical, and direct.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#201D1D"
  surface: "#FDFCFC"
  surface-container: "#F8F7F7"
  on-surface: "#656363"
  outline: "#E0DEDE"
  error: "#211E1E"
  on-primary: "#FFFFFF"
  focus-ring: "#000000"
  success: "#4B4646"
typography:
  display-lg:
    fontFamily: Berkeley Mono
    fontSize: 38px
    fontWeight: 400
  headline-md:
    fontFamily: Berkeley Mono
    fontSize: 24px
    fontWeight: 400
  body-md:
    fontFamily: Berkeley Mono
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Berkeley Mono
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Berkeley Mono
    fontSize: 14px
    fontWeight: 700
  label-sm:
    fontFamily: Berkeley Mono
    fontSize: 12px
    fontWeight: 400
  display-md:
    fontFamily: Berkeley Mono
    fontSize: 32px
    fontWeight: 400
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
    width: auto
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
  input-field:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.on-surface}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.surface}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.1)
  md: 0 2px 5px rgba(0, 0, 0, 0.15)
  lg: 0 4px 10px rgba(0, 0, 0, 0.2)
---

## Overview

OpenCode is a developer-focused tool that provides a terminal-first AI coding experience. Its visual identity is strictly utilitarian, leveraging a monochromatic palette and monospace typography to mirror the environment of its target audience: software engineers.

## Colors

The color strategy is strictly monochromatic, prioritizing high contrast and a technical, "terminal-like" aesthetic.

*   Primary (#000000): Used for primary UI elements and text to maintain high contrast.
*   Secondary (#201D1D): Used for secondary buttons and dark-mode UI components.
*   Surface (#FDFCFC): The primary background color for the application interface.
*   Surface-container (#F8F7F7): Used for input fields and subtle container backgrounds.
*   On-surface (#656363): Used for secondary text and muted UI elements.
*   Outline (#E0DEDE): Border color for input fields and UI separators.
*   Error (#211E1E): Used for high-emphasis elements or dark-mode accents.
*   On-primary (inferred) (#FFFFFF): Text color for elements on dark backgrounds.
*   Focus-ring (inferred) (#000000): Standard focus state for interactive elements.
*   Success (inferred) (#4B4646): Muted accent color for status indicators.

## Typography

The brand exclusively uses the Berkeley Mono typeface to reinforce a consistent, code-centric visual language.

*   Display-lg: Used for primary hero headlines.
*   Headline-md (inferred): Used for section headers.
*   Body-md: Standard body text for readability.
*   Body-sm (inferred): Used for secondary descriptions and metadata.
*   Label-md: Used for button labels and navigation items.
*   Label-sm (inferred): Used for small UI labels and status text.
*   Display-md (inferred): Secondary headline size.

## Layout

The layout follows a clean, centered column structure with generous whitespace, utilizing a 4px base unit for all spacing to ensure a consistent vertical rhythm. The page pattern follows a logical flow: nav, hero, features, faq, and footer. The hero section is composed of a centered headline and subhead, anchored by a terminal-style installation command block. The design is mobile-first, with all elements stacking vertically on smaller viewports.

## Elevation & Depth

Elevation is used sparingly, primarily to distinguish interactive elements from the background using subtle, single-layer shadows. The values are observed as follows: `elevation.sm` for card lift; `elevation.md` for dropdowns or popovers; and `elevation.lg` for modal or drawer overlays.

## Shapes

The design language favors sharp, rectangular corners to maintain a technical, no-nonsense aesthetic. Border radii are kept minimal, ranging from 4px to 8px for standard components, with `rounded.full` reserved only for specific circular UI elements.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {typography.label-md} and are available in primary and secondary variants. Use the primary variant for main actions, which transitions from {colors.secondary} to {colors.primary} on hover.

### Input Field
Input fields feature a {colors.surface-container} background and {rounded.md} corners. The border defaults to {colors.outline} and shifts to {colors.primary} when the element is focused.

### Card
Cards are defined by a {colors.surface} background and {colors.outline} borders. Use `card-elevated` when additional depth is required to separate content from the main background.

### Badge
Badges are used for status indicators or metadata. Use `badge-success` for positive states, which applies {rounded.sm} and specific padding for a compact, technical look.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never apply {colors.error} to primary buttons. |
| Apply {typography.body-md} for all body text. | Do not use {typography.display-lg} for body text. |
| Use {spacing.md} as the default gutter between sections. | Avoid excessive use of shadows; keep to {elevation.sm} or {elevation.md}. |
| Apply {rounded.md} to all input fields. | Never use rounded corners larger than {rounded.lg} on cards. |
| Use {colors.outline} for all structural dividers. | Avoid using bright, non-monochromatic colors. |
| Maintain the monospace font stack for all UI text. | Do not mix sans-serif fonts with the monospace stack. |
| Use {colors.secondary} for default button backgrounds. | Do not use {colors.surface} for button backgrounds. |
| Use {rounded.sm} for {badge-success} components. | Do not use {rounded.full} on standard content cards. |

## Content Style

CTA labels are imperative, technical, and direct, such as "Download now" or "Read docs." They should be kept short to maintain the minimalist interface.

Headings are declarative and benefit-focused, designed to communicate the value of the agent immediately to the developer.

Copy density is low, favoring short, scannable paragraphs. Use bulleted lists frequently to break up technical specifications and feature sets.

## Imagery & Icons

Iconography is sparse and functional, focusing on terminal-style glyphs and simple SVG representations. Imagery should remain minimal, avoiding decorative photography in favor of direct, utility-driven visuals that mirror the terminal environment.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for OpenCode, a minimal, developer-focused AI coding agent. Match its utilitarian, terminal-centric tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, font sizes, or pixel lengths.
2. Use only the component variants listed under `components:`. Do not invent new button styles, badge variants, or card treatments the spec does not define.
3. Apply the shape and elevation rules literally: standard components use `{rounded.sm}`–`{rounded.lg}`; `{rounded.full}` is reserved for circular elements only; shadows stay at `{elevation.sm}` or `{elevation.md}` except for modals, which use `{elevation.lg}`.
4. Consult the Do's and Don'ts table before every component decision. If a user request conflicts with a rule in that table, surface the conflict explicitly before proceeding.
5. Follow the mobile-first layout narrative: stack vertically by default, one breakpoint at 768px, 4px base spacing unit via the `{spacing.*}` scale.

## Output contract

**Must:**
- Use token names for all colors, type styles, spacing, radii, and elevation.
- Render hover, focus, and disabled states for every interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `swatch-focus-ring`).
- Apply `{typography.label-md}` to all button labels and navigation items.
- Use `{colors.outline}` for structural dividers and borders; `{colors.focus-ring}` for all focus rings.
- Keep CTA copy imperative and short, matching the Content Style section.

**Must NOT:**
- Invent colors, radii, typefaces, or font weights not present in the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a named token exists.
- Introduce decorative imagery, non-monospace fonts, or bright non-monochromatic colors.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or restructure existing page copy, headings, button labels, navigation items, or page sections.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary text, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (component metadata, theme file) is available, that takes precedence.
- If torn between two radius or shadow options, choose the smaller, more restrained value — the brand reads sharp and minimal.