opencode.ai — Design System

1. Visual Theme & Atmosphere

OpenCode is an AI coding platform with a design system that reads as Apple-meets-terminal. The CSS custom properties reference Apple’s HIG color naming (--color-bg, --color-text, --color-accent: #007aff) while the sole typeface — Berkeley Mono — grounds every element in code culture. Light grey surfaces (#f5f5f7), near-white elevation, and tight neutral text create an interface that is unambiguously developer-facing. Minimal, precise, and confident.

2. Color Palette & Roles

A semantic token system modelled closely on Apple’s design tokens. Dark mode is not present in the extracted data.

3. Typography Rules

• Sole typeface: Berkeley Mono — a premium monospaced font. h1 at 38px/700, body at system default sizes.
• Fallback chain: IBM Plex Mono → ui-monospace → system monospace stack.
• Monospace everywhere signals that the product is code-first. No sans-serif or serif anywhere in the stack.
• Letter-spacing: normal — monospace tracks naturally.
• The single-font decision is confident and unusual; it removes any tension between “marketing” and “product” typography.

4. Component Stylings

• Radius: 4–6px — minimal, square-ish. Cards and inputs feel precise.
• Shadows: None defined — depth via surface colour differential.
• Buttons: Accent-blue fill, 4–6px radius.
• Inputs: Surface-coloured, border-defined.
• Focus states: Likely #007aff ring.

5. Layout Principles

• Single-column hero with Berkeley Mono headline.
• Surface sections (#f5f5f7) divide content without hard borders.
• Token-driven spacing system (Apple-style 4px grid implied).
• Low visual noise — every element earns its place.

6. Depth & Elevation

Three surface levels: white canvas, #f5f5f7 fill, white elevated card. Shadow-free. The 0.12 alpha overlay (rgba(15,0,0,0.12)) used for hover states. Consistent with terminal/IDE aesthetic where chrome stays flat.

7. Do’s and Don’ts

Do:

• Use Berkeley Mono for all text, including headings
• Follow the semantic token names (--color-text, --color-accent) for all colour decisions
• Keep radius tight (4–6px) — no soft corners

Don’t:

• Introduce any sans-serif or serif font
• Deviate from the Apple-style neutral grey scale
• Add decorative shadows or gradients

8. Responsive Behavior

Clean responsive scaling. Berkeley Mono at 38px h1 scales down to ~24px mobile. Surface sections stack vertically. Tight radius holds across all viewports.

9. Agent Prompt Guide

Reproduce opencode.ai style: white canvas, #f5f5f7 surface fills, Berkeley Mono for all text (700 heading, 400 body). Accent #007aff. Radius 4–6px. No shadows. Semantic tokens modelled on Apple HIG. Developer-facing, terminal-adjacent aesthetic.

Generated by Sparkbites — extracted from live CSS analysis