Midu Studio Website
Dark, atmospheric, and confident. Deep black surfaces and massive glowing crimson letterforms contrast with crisp Swiss typography and a single light neutral feature section.
Visit site ↗Colour
Background#050505
Text#ffffff
Surface#151515
Typefaces
- Display
- Switzer Medium
- Body
- Switzer Regular
- Mono
- —
- Source
- Scale
- 12 · 14 · 16 · 18 · 20 · 24
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 12px · 24px
Capture
- Category
- studio
- Sections
- 11
- Captured
- 2026-08-27
- Rhythm
- dark x6 → light → dark x4
Type rules
- display type set in sentence case with tight -0.04em tracking
- body measures capped at roughly 53 characters per line
Colour rules
- deep black background dominates with a single high-contrast light section for services
- crimson lighting restricted to atmospheric typography backdrops
Voice rules
- lead with concise declarative claims
- bold crucial outcome phrases within body copy
Holds it together
- use oversized cropped brand lettering with red atmospheric glows to bookend the page
- invert the background to soft light grey for the tooling and service grid
- pair sentence-case display headers with rounded card containers
Contrast
text on background20.4:1 AAA
text on surface18.3:1 AAA
Type, measured
- Body
- 16px / 1.3
- Measure
- 53 characters
- Display
- 84px / 1
- Tracking
- -0.04em display
- Scale ratio
- 1.51
Voice
- Tone
- confident, declarative
- Sentences
- short
- Person
- first
- Vocabulary
- plain
- Calls to action
- explore, get, view, see
Built with
- Builder
- framer
- Framework
- —
- Motion
- lenis
- WebGL
- —
- Nav
- —
- Length
- 12.6 screens
Colour, by area
#050505 0%#e6e6e6 0%#ffffff 0%#151515 0%#000000 0%#1c1c1c 0%
Sections in page order
11- 00
hero
Dark, moody studio hero anchored by an enormous glowing red typographic backdrop and restrained editorial typography.
- Mood
- bold + dreamy
- Layout
- 15 col · asymmetric · airy
- 01
hero
A restrained, high-contrast dark studio hero relying purely on stark typography and disciplined whitespace to project quiet authority.
- Mood
- bold + quiet
- Layout
- 16 col · stacked · airy
- 02
showcase
A cinematic dark studio showcase pairing a moody 3D hardware mockup with bold, high-contrast agency typography.
- Mood
- quiet + bold
- Layout
- 9 col · stacked · airy
- 03
showcase
Sleek split-column portfolio cards juxtaposing dark and light project mockups with delicate category tags.
- Mood
- quiet + editorial
- Layout
- 2 col · split · balanced
- 04
showcase
Clean dark portfolio showcase pairing large rounded project cards with floating mobile app UI mockups.
- Mood
- quiet + editorial
- Layout
- 2 col · grid · balanced
- 05
testimonial
Minimalist dark-mode testimonial section pairing authoritative statement typography with rounded client quote and metric cards.
- Mood
- quiet + bold
- Layout
- 2 col · split · airy
- 06
feature grid
Clean, structured studio services section with a playful inline tool icon bar interrupting the oversized headline above staggered soft-shadowed cards.
- Mood
- quiet + clinical
- Layout
- 12 col · asymmetric · airy
- 07
statement
A brooding, atmospheric statement section with crisp typography emerging from a dark, red-tinged ambient glow.
- Mood
- bold + dreamy
- Layout
- 15 col · asymmetric · airy
- 08
pricing
A sleek dark-mode pricing and FAQ section structured with refined card containers and detailed 3D mechanical switch icons.
- Mood
- clinical + bold
- Layout
- 2 col · stacked · balanced
- 09
footer
A minimalist dark footer anchored by a quiet agency manifesto and disciplined multi-column navigation links.
- Mood
- quiet + clinical
- Layout
- 15 col · grid · airy
- 10
statement
A colossal brand wordmark emerges from deep darkness in a glowing red gradient, cropped aggressively across the frame.
- Mood
- bold + dreamy
- Layout
- 1 col · full bleed · dense
