A living register of every Shift-9 project, 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 grows with the work; every new project joins the same source that drives the studio reel.
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.
Local voice-to-text dictation for Windows. Profiles, custom vocabulary, selected-text commands, history and crash recovery — dictation that stays on your machine.
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.
Shift-9's production design system: shared interaction, motion and accessibility rules across live products, with each product free to keep its own voice.
The infrastructure behind the studio: Relay for cross-machine state handoff, a 400+ skill control plane governing AI-assisted builds, and claude-eyes, a screen-capture toolkit that gives coding agents vision.
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. The green also carries every focus ring, sitewide, because that is the one affordance a neutral could not say loudly enough.
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 and every focus ring.
/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