AI Studio Design System
A code-truthful spec for a modular GenAI production platform. The art direction is confident and technical — dark surfaces that stay out of the way so the generated content is always the thing you see. Every token here maps to a real value in css/main.css; when code and this doc disagree, code wins.
One platform, every capability.
A production platform for AI-powered creative work. Three principles hold the system together — break any one and it stops feeling like AI Studio.
Deep navy, indigo action, violet depth.
The palette derives from the AI Studio source: hsl(222 47% 11%) for the base, blue-500 for primary actions, and violet-600 as the modular accent. No warm tones — everything is cool, precise, and optimised for long sessions on dark backgrounds.
Backgrounds — deep navy
Text — cool white scale
Brand accents
Gradients
Inter — precise, modern, built for screens.
One family: Inter. Technical without being cold, readable at every weight on dark surfaces. 400 for body, 600 for labels and UI, 700 for headings. JetBrains Mono appears only on system-flavoured labels — API names, version tags, debug output.
A base-4 scale, used consistently.
Eight steps from a 4px hairline to 64px big-screen rhythm. Panel padding is always sp-6 (32px); component gaps are sp-5 (24px) or sp-4 (16px).
Rounded enough to feel modern, not playful.
Four radii. Pill for action elements; 18px for panel cards; 12–14px for buttons; 8px for chips and tags. Consistent rounding signals coherence across all panels.
Every shadow is deep navy — never grey.
Grey shadows on dark backgrounds create muddy mid-tones. Deep navy alpha keeps the elevation system consistent with the surface family. Glows use brand blue or violet alpha.
Four panels, one consistent layout.
Every tool in the platform renders inside the same panel structure: Tools, Editor, Settings, and Data. Panels are draggable, resizable, and persist their layout per-tool. The consistency is the interface — you learn the grammar once.
Tool categories
All cut from the same dark surface + blue-glow recipe.
Key interactive components, rendered on the platform's dark stage:
Buttons
Feedback, not decoration.
Short, purposeful, informative. Every animation communicates a state transition. With prefers-reduced-motion on, all animations collapse to opacity fades.
Direct, functional, never over-excited.
The platform talks to the team like a professional tool, not a consumer app. Clear, brief, specific — tell people what's happening and what to do next.
"Processing — this takes 10–30 seconds."
"Done. Click to download your result."
"API error. Check your key in Settings."
"Hang tight! Magic is happening ✨"
"Woohoo! Your image is ready!"
"Uh oh! Something went wrong :("
Five ways to break the feel.
If a new screen does any of these, it isn't AI Studio anymore.
- Don't use warm colours. The entire palette is cool — navy, blue, violet, grey. A warm orange or cream immediately reads as "wrong app."
- Don't use grey shadows. All shadows use deep navy alpha; grey creates muddy mid-tones that flatten the dark-surface depth.
- Don't let chrome compete with content. Panel chrome should recede; the generated image or output is always the visual hero of the screen.
- Don't create a new tool outside the registry. All tools must register through
toolRegistry.js— direct routing bypasses the modularity contract. - Don't use raw hex in components. Use the
--brand-*tokens from:root, so a future retheme stays consistent.
Where every token actually lives.
This page documents the system; the code defines it. When they disagree, the code wins.