The Studio identity
Brand.
Everything that makes thestudio.io look like thestudio.io. The logo, the colors, the type, the components, and the rules. When in doubt, come back here.
00
The brand in the wild.
What the identity looks like out in the world: print, merch, screens, and vinyl.
01
The logo.
Two marks, used together or apart. The wordmark does the talking, the music note does the waving.
The Studio.
Wordmark
Always title case, never all caps. The period is always gold (#b58520).
The note
The 🎵 music note. Favicon, app icon, social avatar. SVG first, PNG and ICO as fallbacks.
The Studio.
Wordmark, reversed
For dark backgrounds. The period stays gold.
The note, on dark
The note works on any background, no box needed.
02
Color.
Warm neutrals, one confident gold. Gold is the only accent that shouts, everything else whispers.
Gold
#b58520
The brand accent. Links, eyebrows, the wordmark period, primary buttons.
Gold Soft
#faf6ec
Tinted backgrounds, highlight bands, gentle gold moments.
Yellow
#f2ce57
Dashboard energy. Scoreboards, stats, moments that celebrate.
Ink
#1d1d1f
Headlines, body text, dark sections. Never pure black.
Gray
#6e6e73
Secondary text, ledes, captions. The quiet voice.
Light Gray
#f5f5f7
Section backgrounds, code blocks, calm separation.
Line
#e8e8ed
Borders, dividers, card edges. Barely there.
White
#ffffff
The canvas. Most pages start here.
Live Green
#34c759
One job: the pulsing live dot. Never used as a general accent.
03
Typography.
The system font stack, set with confidence. Big headlines, tight tracking, generous line height on body.
The stack
No web fonts, no loading, no flash. It looks native everywhere because it is native everywhere.
Headline
We build in the open.
Weight 800, letter-spacing -0.03em, line-height 1.05. Fluid size with clamp().
Eyebrow + lede
Fresh off the press
The quiet line under the loud headline. 20px, gray, sets up the section.
Eyebrow: 13px, weight 700, letter-spacing 0.14em, uppercase, gold.
Body
Body copy runs at 17px with a 1.5 line height, in Ink. It stays comfortable across long reads like the manifesto, the build log, and the Short Bus story pages.
04
Components.
The small pieces that repeat everywhere. Learn them once, reuse them always.
The live dot
Something is happening now.
10px circle, Live Green, 1.6s pulse. Marks anything real-time: the dashboard, the shipping feed.
Buttons
Pill shape, 700 weight. Gold for the one primary action, ink for secondary, ghost for quiet.
Eyebrow, headline, lede
Section label
The big idea.
The supporting line, in gray.
Every section opens with this trio, in this order. It is the rhythm of the whole site.
Cards
1px Line border, 20px radius, generous padding. Cards hold one idea each: a book, a song, a team member, a stat.
05
House rules.
The non-negotiables. These keep the brand honest.
-
1
It is "The Studio", never "THE STUDIO".
Title case, always. The all-caps version does not exist.
-
2
The artist is Dlaney. D-L-A-N-E-Y.
Pronounced "Delaney", spelled without the E. Never "Delaney" in writing.
-
3
No em-dashes, anywhere.
Commas, colons, periods, parentheses. The dash with spaces around it is banned from brand copy.
-
4
Never mention Suno in public.
It is the sketchpad, not the story. Public copy talks about the music, never the tool.
-
5
Gold is earned, not sprayed.
One gold accent per view is plenty. If everything is gold, nothing is.
-
6
Real over polished.
Honest empty states, real numbers, shipped beats perfect. The brand is a builder, not a billboard.
06
The tokens.
Copy-paste ready. Drop this :root block into any new page and it will look like us.
/* The Studio brand tokens */ :root { --gold: #b58520; /* primary accent */ --gold-soft: #faf6ec; /* gold tint */ --yellow: #f2ce57; /* dashboard energy */ --ink: #1d1d1f; /* headlines, body */ --gray: #6e6e73; /* secondary text */ --line: #e8e8ed; /* borders */ --light-gray: #f5f5f7; /* section bg */ --white: #ffffff; --live: #34c759; /* live dot only */ }