design system — instrument

One system.
Every surface.

The twelve-project studio reel register, followed by the tokens, type, motion and components that keep twelve different voices feeling like one studio.

Each swatch reads the live custom property. The text beside it names the documented value and role. Press any row to copy the token.

the project register12

Twelve builds. One living archive.

Apps, games, product systems and studio infrastructure. This register shares its project descriptions with the studio reel. The desktop also includes Bring Up Desk.

010203040506070809101112
recipe
01LIVE

Feelspoon

Smart recipe organizer and guided cooking app. Save from links, photos or scratch; cook mode scales servings and suggests swaps. Live on Google Play and at feelspoon.app. The Recipe Engine behind it is a Supabase-backed pipeline that seeds and serves the catalog.

React NativeTypeScriptSupabaseAndroid · iOS in review
Open project →Get the app ↗
waveform
02PRIVATE BETA

Flow State

Local voice-to-text dictation for Windows, with profiles, custom vocabulary, selected-text commands, history and crash recovery. This site offers private beta access; Linux support remains in development.

PythonMoonshineWhisper fallbackLocal-first
Open project →
storybook
03PRIVATE BUILD

Learning App

ReadingLand, a children's reading app built with Python and Kivy. A development project; no public download is linked here.

PythonKivyEducation
Project page coming soon →
calibration
04IN DEV

Lumen Projection Mapper

Point a projector at anything, drag the corners on your phone, and the image warps to fit. Projection mapping with zero jargon.

JavaScriptWebSocketsProjection
Project page coming soon →
scoreboard
05IN DEV

Voxel Arcade Basketball

HoopClone, a basketball project in Godot with implemented ball flight and score display. Gameplay and presentation remain in development; no public build is linked here.

GodotGDScript3D
Project page coming soon →
corridor
06IN DEV

Midnight Return

A metroidvania platformer in C#. Exploration-first design.

C#Metroidvania
Project page coming soon →
schematic
07R&D

Game Design Forge

A UE5 plugin suite that lets non-programmers assemble games LEGO-style: socket-matched auto-tiling, one-click destruction, and a tutorial overlay that watches what you do. Blueprint complete; build phase next.

Unreal 5C++R&D
Project page coming soon →
swatch
08IN DEV

Titanium Forge Pro

A portable React component workbench with live demos and copyable snippets for teams to bring into their own products. In active development.

ReactTypeScriptComponent LibraryCloudflare
Project page coming soon →
panel
09LIVE

INSTRUMENT

Shift-9's production design system: shared interaction, motion and accessibility rules across live products, with each product free to keep its own voice.

Design SystemsMotionAccessibility
Open project →
terminal
10INTERNAL

Automation Systems

The studio's local control plane for agent routing, decision review, code and visual checks, and shared project memory. Internal studio infrastructure; no public download is offered here.

Node.jsSQLiteAutomationAI Agents
Project page coming soon →
wireframe
11IN DEV

Omni-3D

A game-development toolkit in TypeScript.

TypeScript3DTooling
Project page coming soon →
dialog
12PRIVATE BUILD

WinFix

WHome Diagnostic Tool (WinFix), a Python and Flet utility for Windows diagnostics, repair and upgrade assistance. No public download is linked here.

PythonWindowsUtility
Project page coming soon →
tokens — ground

Ground

The surfaces everything else sits on.

tokens — ink

Ink

Three steps, not two — a display face, running prose and a mono data label are three different jobs. Ratios are measured against the void: 14.48:1, 10.12:1, 6.96:1. The dim value used to be #64748b, which is 3.75:1 — under the 4.5:1 floor, and it was the value carrying the small mono labels, the worst case for it to fail on.

tokens — accent

Accent

The old glowing accents made the site read like a generic dark AI build. They are zero-chroma neutrals now: signal is the marker and the emphasis, brighter than the label it sits on; pulse is the secondary, for work that is unresolved, and it is dimmer than the prose on purpose.

tokens — the invitation

The invitation

The one surface not built on the void. /start is true black with true white and no third colour in the ground at all. The green used to be on the button; it is on the email address now, and the button is pearl grey — so the one chromatic thing on the page is the address you can copy and act on in your own time. Scarcity is still what makes it land. Focus treatments are defined by each surface, including the desktop and Contacts palettes.

tokens — materials

Materials

Titanium gives the studio and Flow State a reflective neutral. Holofoil belongs to Flow State's standalone F, where one warm spectral material can carry the product identity without tinting the full interface.

tokens — type

Type roles

A display face, a reading face and a data face. Each specimen is set in the thing it documents.

tokens — motion

A tempo, not a speed

Duration is chosen by the size of the move: a hover is not an entrance, and an entrance is not a page transition. Every animated component branches on useReducedMotionSafe() and degrades to a complete, readable static state.

the surfaces

Current studio rooms

Same tokens, same motion contract, same components. What changes is what each room is for — and a system is only worth having if it can say where it is allowed to break.

/The entranceA held plate, a ~20 second film, then a skeuomorphic desktop. The one surface that deliberately leaves the system: it is a picture of an operating system, so it carries its own local light and dark palette rather than the void. Immersion at the seam outranks brand consistency there.
/studioThe reelTwelve projects as one continuous scroll-driven take. Absolute black holds the frame, each set-piece is full-bleed and the type sits over it, and every project gets its own card variant so the twelve do not read as one template twelve times.
/flow-stateThe product intakeA focused waitlist page for local Windows dictation. Titanium keeps the interface quiet, the standalone F carries warm holofoil, and one waveform demonstrates the capture state.
/instrumentThe case studyA public explanation of how the system holds across Shift-9 Studio, Flow State, and Feelspoon. The implementation catalog lives one level deeper at /instrument/reference.
/startThe invitationOne ask and one control. A canvas wave field sits behind pearl controls on true black. Verdant marks the email address.
/soonThe gapWhere the projects without their own page land. One bit — black, white, and genuine 8×8 ordered dither as the only mid-tone — plus hazard tape, the one thing on that page allowed to carry colour.
@shift9/ui

Shared components

Importable from any surface. Press a row to copy its import.

@shift9/motion

Hooks

studio-local

Not shared, on purpose

These live in the studio app rather than the package. They are built around this site’s own content — its wallpaper, its roster, its front door — and exporting them would mean pretending they are general when they are not.

EnterTheStudioThe entrance — front door, film, desktop, and the routes out of it.app/_components
StudioDollyThe reel — twelve set-pieces pinned and travelled by scroll.app/_components
AsciiWallpaperThe banner resampled to a live character grid, generated by scripts/build-ascii-art.py.app/_components
FadeToBlackThe desktop fading down on the way to the reel. The reel comes back up out of the same black — two halves of one dissolve, both on --s9-dur-tunnel.app/_components
WaveFieldThe canvas wave field behind /start. One path and one stroke per frame; quality steps down under load.app/_components
Shift9MarkThe mark — the 9 from the org icon, cut down the middle with the right half dropped and carrying opacity.app/_components
RevealScroll-triggered fade and lift wrapper.app/_components
← Instrument case studyStart a project →