In Japanese Minimal
hero.minimal-whitespace-cta · hero
Open alone, full size (desktop, tablet, phone; layout tree included)
Brand & product studio
We make complicated companies simple to choose
Start a projectBrand & product studio
Hero library · minimal
Whitespace with a single action
hero.minimal-whitespace-cta: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- Columns 1–7 are left empty on purpose; a small block in 8–11 sits on the bottom edge: eyebrow, a short h1 at step 3 and one large primary button. Column 12 stays empty.
- Slots
eyebrow,headline,cta- Grid
- empty
1-7· block8-11 - Notes
- At least 60% of the hero is empty page colour. The button is the most saturated thing on the screen.
Do
- Leave columns 1–7 and 12 completely empty.
- Bottom-align a narrow block in 8–11: eyebrow, a short h1 at step 3, one large primary button.
- Make the button the only saturated element on screen.
Don't
- Don't fill the empty columns with an image, pattern or shape.
- Don't add a subhead paragraph or second button.
- Don't centre the block.
Phone width
- Keep a tall empty top area (about 40svh), then the block at full width, left-aligned.
Live, in 3 styles it suits
In Scandinavian Soft
hero.minimal-whitespace-cta · hero
Open alone, full size (desktop, tablet, phone; layout tree included)
Brand & product studio
We make complicated companies simple to choose
Start a projectBrand & product studio
We make complicated companies simple to choose
Start a projectIn Luxury Fashion
hero.minimal-whitespace-cta · hero
Open alone, full size (desktop, tablet, phone; layout tree included)
Brand & product studio
We make complicated companies simple to choose
Start a projectBrand & product studio