OpenCode

Overview

OpenCode is an open-source AI coding agent that empowers developers with intelligent code generation and autonomous task execution. The design system embodies a "Technical Minimalism" aesthetic—rooted in command-line interfaces, monospace typography, and high-contrast grayscale palettes—that communicates precision, accessibility, and developer-first thinking. The UI evokes a sense of clarity and control: every element serves a functional purpose, visual noise is eliminated, and interactions feel direct and immediate. The brand personality is pragmatic, transparent, and unadorned. Voice: direct, instructional, never marketing-speak. Example: "Connect any model. Run any task. Full transparency, zero lock-in."

Colors

The color system prioritizes legibility and functional hierarchy over decorative appeal. Primary (#202020) is the dominant dark neutral used for text, buttons, and interactive elements—it commands attention without aggression. On-surface (#1d1d1f) provides the main body text color with 16:1 contrast against white surfaces. Secondary (#6e6e73) is reserved for supporting text, labels, and muted UI elements. Tertiary (#ff9f0a) is the sole warm accent, used sparingly for warnings, badges, and status indicators to break the monochrome palette and signal importance. Error (#ff3b30) is reserved for destructive actions and error states. The surface stack (surface #ffffff, surface-dim #f5f5f7, surface-container #efefef) creates subtle depth without relying on shadows; each layer is exactly 2–4% dar

Typography

The type system is exclusively IBM Plex Mono—a technical, open-source monospace font that reinforces the developer-centric brand identity. Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines and major announcements; headline-lg (38px, 700 weight) anchors page sections; body-md (16px, 400 weight) is the workhorse for body copy and UI labels. All type is left-aligned and uses tight leading (1.25–1.5x) to maintain a compact, efficient visual rhythm. Apply letter-spacing: -0.01em to headline-lg and display to tighten the monospace letterforms and enhance visual impact. For small labels over busy backgrounds (e.g., badges, tags), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. Avoid font weights below 400; Plex Mono's lighter weights (200, 300) read

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid responsive behavior on smaller viewports. Horizontal gutter is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. Vertical rhythm is governed by the spacing scale: section separations use lg (40px), component padding uses md (24px), and internal element spacing uses sm (12px). The hero section occupies full viewport height with centered content; installation tabs and code blocks sit in a contained card with 20px internal padding and a 1px outline-variant border. White-space is generous—avoid cramping elements together. The command-line code block (curl, npm, bun, brew, paru tabs) uses a dark background (#1d1d1f) with monospace body-md text in light gray (#e8e

Elevation & Depth

Depth is achieved through subtle layering and borders rather than aggressive shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid outline-variant (#e5e5ea) border + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for gentle separation. Level 3 (Modals & Overlays): same border + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for pronounced depth. Hover states elevate cards to Level 3 by increasing shadow and shifting background to surface-container-low (#f5f5f7). Focus states on interactive elements use a 2px solid outline in primary (#202020) with

Shapes

The shape philosophy is "Architectural Precision"—sharp, minimal corner radii that echo the geometric clarity of command-line interfaces and technical documentation. Buttons and inputs use rounded.sm (4px / 0.25rem) for a crisp, utilitarian appearance. Cards and larger containers use rounded.md (6px / 0.375rem) for slightly softer edges that remain professional. Modals and elevated surfaces use rounded.lg (16px / 1rem) to signal elevation and importance. The 4px radius is the default for most interactive elements because it balances approachability with technical precision—not so sharp as to f

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#202020), textColor: {colors.on-primary} (#ffffff), padding: 8px 16px, height: 40px, and rounded.sm (4px). On hover, shift to button-primary-hover with backgroundColor: {colors.primary-container} (#3a3a3c) and maintain the same text color. On active/pressed, use button-primary-active with backgroundColor: {colors.primary-fixed-dim} (#2a2a2c). All button transitions should use transition: background-color 150ms ease-out. button-secondary uses a transparent background with a 1px solid outline-variant border; on hover, shift to surface-container-high (#e8e8e8) background while maintaining the border.

Inputs & Forms input-field uses backgroundColor: {colors.surface-dim}

Do's and Don'ts

**Do**

• Do use IBM Plex Mono exclusively for all typography—it reinforces the technical, open-source identity and ensures consistency across all platforms.
• Do maintain high contrast ratios (minimum 7:1 for body text, 4.5:1 for UI labels) to ensure accessibility for all users, especially in code-heavy interfaces.
• Do apply 4px border-radius to buttons and inputs, 6px to cards, and 16px to modals—this hierarchy signals interaction priority and visual weight.
• Do use the primary color (#202020) sparingly on interactive elements (buttons, links, focus states) to create clear affordances without overwhelming the interface.
• Do leverage the surface stack (surface, surface-dim, surface-container, surface-container-high) to create subtle depth and visual separation without relying on heavy shadows.
• Do apply transition: background-color 150ms ease-out and transition: border-color 150ms ease-out to all interactive elements for smooth, predictable state changes.

**Don't**

• Don't use colors outside the defined palette—resist the temptation to add brand colors or gradients that would dilute the minimalist aesthetic.
• Don't apply rounded corners larger than 16px except for full-radius badges; sharp corners reinforce the technical precision of the brand.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive shadows create visual clutter and undermine the clean, functional design.
• Don't mix font families; IBM Plex Mono is the only typeface. Avoid system fonts, serif fonts, or decorative typefaces that would break the monospace consistency.
• Don't use the tertiary color (#ff9f0a) for primary CTAs or branding—reserve it exclusively for warnings, alerts, and status indicators to maintain its semantic meaning.
• Don't apply text-shadow or text-stroke effects except on small labels over busy backgrounds; these effects reduce legibility and feel dated.