prismdinstrument

EXTRACTED · 8 SECTIONS · 15 COLORS · GRADE D

opencode.ai

Accent #5e6ad2 · Berkeley Mono — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

DESIGN.md tokens.json

real render · source of truth

opencode.ai is built on a mid-dark canvas (hsl(0, 20%, 99%)). The system uses rgb(32, 29, 29) as a near-neutral accent (low saturation). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside monospace typography (Berkeley Mono) — developer-first identity. Berkeley Mono is paired with IBM Plex Mono for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is minimal — a few targeted transitions, no decorative animation.

Color — roles, semantics & the full census

15 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 16.83:1

Ink

#1d1d1f

AAA 16.83:1

Accent

#201d1d

AAA 16.73:1

Line

#646262

AA 6.06:1

Semantic states

error#ff3b30success#30d158warning#ff9f0a

3 semantic roles found.

15 colors mined from the live renderexpand

Type — the ladder, in the real face

4 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl38px · 700

display md

display-md16px · 700 · ×2.38

body

body16px · 400 · ×1.00

button

button16px · 500 · ×1.00

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
6px

md
14px

lg
20px

xl
32px

full
9999px

Components — the closed vocabulary

9 component families · 24 variants counted on the live DOM

Component	Variants found
links	×7
buttons	×6
tabs	×4
nav Links	×2
inputs	×1
footer Links	×1
heading H1	×1
heading H3	×1
code Block	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #000000
Padding: 1px 6px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button

Ghost

Background: transparent
Text: #201d1d {colors.primary}
Padding: 16px 0px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button

Secondary

Background: #201d1d {colors.primary}
Text: #fdfcfc {colors.surface-1}
Padding: 4px 20px
Radius: 4px
Font: 16px weight 500
Use: Secondary action

Secondary

Background: #201d1d {colors.primary}
Text: #fdfcfc {colors.surface-1}
Padding: 8px 16px 8px 10px
Radius: 4px
Font: 16px weight 500
Use: Secondary action

Secondary

Background: #201d1d {colors.primary}
Text: #fdfcfc {colors.surface-1}
Padding: 8px 12px 8px 20px
Radius: 4px
Font: 16px weight 500
Use: Secondary action

Light / Invert

Background: #fdfcfc {colors.surface-1}
Text: #201d1d {colors.primary}
Padding: 8px 12px 8px 20px
Radius: 4px
Border: 1px solid rgba(15, 0, 0, 0.12)
Font: 16px weight 500
Use: Bright CTA on dark sections

Inputs & Forms

Text Input

Background: #f8f7f7 {colors.surface-2}
Text: #201d1d {colors.primary}
Padding: 20px
Radius: 6px
Border: 1px solid rgba(15, 0, 0, 0.12)
Font: 16px weight 400

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap64px

container Padding0px 0px 80px

Responsive — real breakpoints

fluid system — no hard stops

No distinct @media breakpoints captured at the desktop/mobile pass — this layout is fluid, adapting by ratio rather than hard stops.

Do's & Don'ts

19 enforceable rules pulled verbatim from the spec

Use Background (`#fdfcfc`) as the page background — it's intentionally not pure white

Use Text (`#1d1d1f`) for text — not pure black, it's warmer and more readable

Use Berkeley Mono as the primary typeface — it defines the brand personality

Use Text Strong (`#201d1d`) as the primary accent — it's the brand's signature interactive color

Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes

Style form inputs with a `1px solid rgba(15, 0, 0, 0.12)` border — use border-based inputs, not floating labels or underline-only

Maintain nav height at 40px — consistent vertical space for the navigation bar

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card uses an icon (not photo) — the visual language is illustrative, not photographic

Use expandable accordion for the FAQ — saves vertical space and lets users self-navigate

Don't

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

Don't remove the input border — the border is the primary affordance indicator for form fields

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the opencode.ai design system. Canvas #ffffff · ink #1d1d1f · accent #201d1d. Type: Berkeley Mono — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add opencode

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press