---
name: "OpenCode"
description: "A developer-focused, monospace-driven design system characterized by a clean light aesthetic, high-contrast dark interactive elements, sharp rectangular geometry with subtle 4px/6px rounded accents, and terminal-inspired UI components."
version: "1.0"
colors:
  canvas: "#fdfcfc"
  surface-soft: "#f8f7f7"
  surface-muted: "#f5f5f7"
  ink: "#201d1d"
  ink-strong: "#000000"
  body: "#646262"
  body-muted: "#9a9898"
  primary: "#201d1d"
  primary-strong: "#000000"
  on-primary: "#fdfcfc"
  hairline: "rgba(15, 0, 0, 0.12)"
  hairline-soft: "#e5e5ea"
  overlay: "rgba(0, 0, 0, 0.6)"
  success: "#30d158"
  warning: "#ff9f0a"
  destructive: "#ff3b30"
  accent-blue: "#007aff"
  accent-blue-strong: "#0056b3"
  terminal-bg: "#0c0c0e"
  terminal-surface: "#161618"
typography:
  heading-xl:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "38px"
    fontWeight: "700"
    lineHeight: "1.5"
    letterSpacing: "normal"
  heading-lg:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "1.4"
    letterSpacing: "normal"
  heading-md:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "1.5"
    letterSpacing: "normal"
  body:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "normal"
  body-medium:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "1.5"
    letterSpacing: "normal"
  caption:
    fontFamily: "\"Berkeley Mono\", \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.75"
    letterSpacing: "normal"
rounded:
  none: "0px"
  button: "4px"
  input: "6px"
  card: "6px"
  tab-top: "6px 6px 0px 0px"
spacing:
  xs: "4px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "64px"
  section: "96px"
  container: "1078px"
  grid-gap: "40px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "8px 16px 8px 10px"
    fontFamily: "\"Berkeley Mono\", monospace"
    fontSize: "16px"
    fontWeight: "500"
  secondary-button:
    background: "{colors.canvas}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.button}"
    padding: "8px 12px 8px 20px"
    fontFamily: "\"Berkeley Mono\", monospace"
    fontSize: "16px"
    fontWeight: "500"
  input:
    background: "{colors.surface-soft}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.input}"
    padding: "20px"
    fontFamily: "\"Berkeley Mono\", monospace"
    fontSize: "16px"
  tab-list:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.tab-top}"
    padding: "0px 20px"
    gap: "{spacing.grid-gap}"
  tab-item:
    color: "{colors.body-muted}"
    activeColor: "{colors.ink}"
    padding: "16px 0px"
    fontFamily: "\"Berkeley Mono\", monospace"
    fontSize: "16px"
  code-panel:
    background: "{colors.canvas}"
    color: "{colors.body}"
    border: "none"
    padding: "16px"
    fontFamily: "\"Berkeley Mono\", monospace"
  badge:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "2px 8px"
    fontSize: "14px"
    fontWeight: "500"
  top-nav:
    background: "{colors.canvas}"
    height: "80px"
    padding: "24px 80px"
    display: "flex"
    alignItems: "center"
    justifyContent: "space-between"
source: "https://opencode.ai/"
captured: "2026-09-04T18:55:59.775Z"
---

# DESIGN.md: OpenCode

## Source

- URL: https://opencode.ai/
- Captured: 2026-09-04T18:55:59.775Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of OpenCode](./screenshot.png)

## Design Summary

OpenCode's design system uses a technical monospace visual language with high-contrast text layout on off-white surfaces. Interactive command components and tabs mimic developer terminal tooling.

## Visual Language

- Uniform monospaced typography hierarchy across all titles, buttons, inputs, and paragraph copy
- Soft light grey backgrounds (#fdfcfc, #f8f7f7) juxtaposed with crisp charcoal (#201d1d) and pitch black text
- Compact rounded corners (4px for controls, 6px for containers and inputs) for a precise tool-like aesthetic
- Terminal tab interfaces and snippet block patterns integrated directly into content flows

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Centered single-column content container with max-width of 1078px and 80px side margins on desktop
- Sticky top navigation header with balanced brand placement and primary download CTA
- Vertical section pacing with generous vertical padding (64px to 96px) between feature blocks
- Grid and horizontal tab lists for multi-package installation options

## Components

- Primary buttons always utilize solid dark fill (#201d1d) with off-white text and tight 4px border radius
- Form inputs have generous internal padding (20px) with thin light border strokes
- Code panels feature tabbed command options with a copy action button on the far right
- Badges are small rectangular pills with distinct high-contrast fill

## Content Style

- Direct developer-focused messaging with shell command install triggers
- Clear bullet point feature lists marked with star brackets [*]
- Technical metric highlights featuring key figures and star counts

## Agent Build Instructions

- Set font-family globally to 'Berkeley Mono', 'IBM Plex Mono', or system monospace
- Use CSS custom properties for canvas (#fdfcfc), surface (#f8f7f7), and primary ink (#201d1d)
- Implement tabbed terminal controls using flexbox alignment and high-contrast tab states
- Ensure input elements maintain 1px solid border with rgba(15, 0, 0, 0.12) stroke

## Evidence And Confidence

- Observed: Typography stack exclusively uses monospace font families ('Berkeley Mono', 'IBM Plex Mono').
- Observed: Container max-width is 1078px with 80px section padding measured in layout geometry.
- Observed: Dark button components use #201d1d background with #fdfcfc text color and 4px border radius.
- Inferred: Dark mode terminal video area uses dark surface tones (#0c0c0e, #161618) extracted from CSS custom properties.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://opencode.ai/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.