A complete dual-mode color theme for the OpenCode CLI — designed in Figma, shipped as production JSON. Not a screenshot, a replay: queries type themselves, the agent thinks, markdown and syntax-highlighted code stream in. Scroll inside it like the real app.
The defs block holds 44 named colors. Dark mode sits on a cool graphite ramp with purple as primary; light mode shifts the same roles onto deeper, print-safe values — teal takes over so contrast holds on white. Click any row to copy its hex.
Every change was logged in the Figma file as a design change log — token, before, after, and the reason. The theme that shipped is the sum of these decisions.
Neutral blacks were replaced with the platform graphite ramp.
The primary returned to brand purple; pink was iterated into turquoise and renamed.
Code colors were dialed back so syntax reads calmly against the purple and turquoise primaries.
No color in this theme is arbitrary. In Figma, every token is a variable aliased into the DataRobot design system library — the CLI inherits the platform's graphite, purple and supportive ramps, so it looks native next to the product. Two modes are driven by the same variable collection.
| theme token | library variable | value |
|---|---|---|
| darkBg | midnight-gray-70 | #22272B |
| darkPanel | surface/page-background-90 | #181D21 |
| darkFg | midnight-gray-10 | #E8EBED |
| darkAccent / darkPurple | purple-50 | #909BF5 |
| darkTurquoise | data viz / turquoise-40 | #61BFC5 |
| darkGreen | supportive / green-50 | #2BC46F |
| darkRed | supportive / red-50 | #ED7171 |
| darkSyntaxOrange | data viz / orange-40 | #EDA769 |
| darkSyntaxBlue | data viz / azure-40 | #42C0FC |
| lightBg → lightMuted | alpine-light ramp (100 → 30) | #FFFFFF … #6B7380 |
One collection, two modes. Each of the 24 numbered color variables resolves through a library alias per mode, so switching the mode in Figma restyles the entire prototype.
The theme block assigns the 44 defs to 52 semantic roles OpenCode understands — core UI, markdown rendering, syntax highlighting and diffs. The dots are live: they read the CSS custom properties of the current mode.
The final deliverable is not a mockup — it is a working theme.json following the official OpenCode schema, contributed via pull request to datarobot-oss/datarobot-agent-skills, living alongside the marketing-branded theme.
theme.json.opencode-plugin/themes registered in index.ts