A COMMUNITY DESIGN KIT FOR THE ORIGINAL OP-1

Small screen.
Clear ideas.

Four colours. Clear readouts. One instrument.
A shared starting point for synths, effects and tools that feel at home.

A draft design kit for the original OP-1, made by SquareWave Studio based on community sources and a review of the stock user interface.

Start Building ↗ · Explore The Patterns And Screen Examples ↗

Includes an installable agent skill for Claude Code, Cursor, Pi and OpenCode.

01 / DESIGN LANGUAGE IN PRACTICE320 × 160 LOGICAL UNITS

Membrane drum concept with a large skin, coloured tension and strike features, and readouts clear of the artwork — **Draw The Instrument As A Mechanism.** A skin, striker and damping contact explain the controls. Readouts stay clear of the object. Original code render with the Iosevka placeholder, not a hardware capture.

Original composition study of grouped engine controls — **Study The Composition.** Grouping and hierarchy make related controls understandable. This independent drawing studies DBOX’s organisation.

Transient concept with coloured attack, body and tail regions and values outside the curve — **Make The Diagram The Control Surface.** Let the shape explain the change. Keep values and units in clear space around it.

Patterns, Studies And Original Applications ↗ · Screen Families ↗

The patterns lead; the screens illustrate them. Example renders use original artwork and the bundled Iosevka placeholder. No stock font file is included or served. You can read the guide without loading a font.

02 / TYPE

Type Follows The Task.

Stock-derived browser-row and parameter-value lettering with clock and mixer numerals

Use stock browser rows, parameter readouts and dominant numbers as references. Choose the scale for the task and leave space for the complete lettering.

03 / CONTROL

Colour Has A Job.

01 BLUE02 GREEN03 WHITE04 ORANGE

Keep each control’s label, value and visual cue connected to its encoder. Retain names and positions so colour is never the only clue.

04 / MOTION

Give Motion
A Musical Job.

A reel follows transport. A struck skin settles. Keep what makes an instrument understandable, then use retained blocks and bounded updates to control its cost.

Visibility, caches & smooth edges ↗

See the kit in a real instrument: GIN.

Made For People.
Readable By Agents.

Install The Agent Skill

Give Claude Code, Cursor, Pi or OpenCode the kit’s screen rules, font guidance and original visual examples.

npx skills add squarewave-studio/op1-design-kit

Run this in your project, then select op1-design and your coding agent. The Skills CLI pulls directly from this GitHub repo. A skills.sh listing or account is not required.

Installation And Usage ↗ · Read The Skill

05 / CREDITS