Sprite Studio Design System
A code-truthful spec for a pro AI sprite-sheet pipeline. The art direction is "Deep Space Pro" — confident, dark, and technically precise. Every token maps to a real value in Styles.html; when code and this doc disagree, code wins.
The canvas is the product.
A pipeline used by technical artists in a professional environment. Three principles hold the whole thing together.
Electric on near-black.
No pure black or white. Background stops at near-black #09090e; text at near-white #f8fafc. All saturation lives in the two accent axes: violet (primary) and cyan (secondary).
Backgrounds — deep space
Text — near-white scale
Brand accents
Gradients
Angular precision, maximum legibility.
Space Grotesk handles display moments — its slightly angular terminals signal precision. Inter handles everything else at weight 400–600; JetBrains Mono appears only on technical labels and spec readouts.
A base-4 scale.
Eight steps, from a 4px hairline to 64px page rhythm. The studio sidebar uses sp-4 (16px) as the internal padding unit for control groups.
Crisp but not sharp.
Slightly tighter radii than consumer apps — the tool lives next to professional editors and should look like it belongs there.
Deep shadows, violet glows.
On a dark background, shadows need to be much deeper than on light. Violet-tinted glows signal interactivity and AI state.
Controls that float over the canvas.
Every panel is a glass card: semi-transparent dark fill, a 1px white-10% hairline, 16px radius, and a deep shadow. Two strengths — the hovering sidebar controls, and the stronger modal overlay.
Sidebar control packs. Canvas is visible through every panel.
Modal overlays and export dialogs where legibility wins.
All cut from the same dark glass + violet-shadow recipe.
Key components rendered on the studio stage:
Buttons
Control packs (sidebar)
Icon mark + glyphs
Feedback, not decoration.
Short and purposeful. AI-in-progress states use a violet glow pulse. Panel transitions use scale + fade. With prefers-reduced-motion on, all animations collapse to opacity fades.
Direct, technical, never condescending.
The copy talks to a technical artist, not a beginner. It assumes competence, is terse where possible, and honest about what the AI is actually doing.
"AI grid detected. Nudge to align."
"Stride 1 = every frame."
"Export ready — PNG, 4096×2048."
"Amazing! Your sprite sheet is ready!"
"Our powerful AI will help you!"
"Oops! Something went wrong 😅"
Five ways to break the feel.
If a new screen does any of these, it isn't Sprite Studio anymore.
- Don't introduce a light mode. The studio is permanently dark. A light variant breaks the "you're working in a real tool" environment that the whole UX is built on.
- Don't use grey shadows. All shadows are black-alpha. Grey shadows read as washed-out on a dark background.
- Don't make AI calls blocking. Every AI step must be skippable. An artist who knows their grid dimensions shouldn't wait for inference to proceed.
- Don't add a solid panel over the canvas. Controls float as glass. A solid panel between the artist and the canvas breaks the single-surface studio principle.
- Don't add account or cloud features. Client-side privacy is a hard constraint. Any feature that requires an upload loop or login wall violates the design contract.
Where every token actually lives.
This page documents the system; the code defines it. When they disagree, the code wins.