Studio Black
Black page, white capitals the height of the screen, and nothing else.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A creative agency's showreel set in type alone. Condensed white capitals fill the viewport edge to edge, a single acid-lime dot marks the cursor, and everything inverts on hover. No photographs, no decoration — just scale, rhythm and nerve.
Studio Black is a type-only dark system for people who want to look fearless. It borrows from Swiss and Dutch poster design of the 1960s, the kinetic title sequences of the 1990s and the stripped-back portfolio sites of independent studios: pure black, pure white, and condensed capitals set so large they become architecture. There is no photography and no ornament beyond index numbers; scale, cropping and timing do all the work. A single acid-lime accent behaves like a cursor. It should feel confident, loud and unsentimental.
Principles
- Type is the image — set headlines at 160px or more and let them crop.
- Stay pure black and white; lime is a pointer, not a palette.
- Number everything: 01, 02, 03 in mono.
- Invert on hover instead of adding effects.
- Cut copy to the bone — short sentences, no adjectives that do no work.
Motion
Each line of the giant headline is wiped up from behind a mask with a hard expo ease; any card or link inverts instantly to white-on-black-reversed on hover, and a client marquee runs at 80px tall between sections.
Do & don't
Do
- ✓ Let the headline crop off the right edge on purpose.
- ✓ Use mono index numbers on every section.
- ✓ Invert entire cards on hover.
Don't
- ✕ Don't add photography to the hero.
- ✕ Don't use gradients, shadows or glass.
- ✕ Don't use lime for text blocks.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 360 lines of DESIGN.md in total.
More like this
All Dark & Cinematic →
Noir Cinema
No. 028Letterboxed, grainy and lit from one side, like a 1947 crime picture.
Ember Forge
No. 045Coal black, molten orange and condensed capitals hammered out of the fire.
Midnight Velvet
No. 046Indigo velvet, a lush italic serif and the glow of a stage at 11pm.
Moody Forest
No. 047Pine-dark greens, a sturdy old serif and mist hanging between the trunks.
Obsidian Champagne
No. 048Polished black stone, champagne gold hairlines and a whisper-thin roman.
Velvet Noir
No. 009A fashion monthly after midnight: lacquer black, oxblood ink, flash-lit photography.