Vibrant & Block-based
Also called: Color blocking, Block colour UI, Bold blocks
Every section is a full-bleed slab of saturated colour — tomato, mustard, green, pink, cobalt — with big geometric shapes and chunky type.
Design keywords
Say these words to ask for this style.
Vibrant & Block-based layouts stack full-width bands of solid, saturated colour, one per section, so scrolling feels like flipping through poster boards. Inside each band, content sits on rounded white or solid-colour tiles; circles, half-moons and quarter-rounds in a clashing block colour peek out of the corners. There are no outlines and no shadows — contrast between neighbouring colour fields does all the separation. Type is a heavy, slightly quirky grotesque set large and tight.
Best for
- Restaurants, food delivery and FMCG brands
- Campaign and launch landing pages
- Consumer apps with a youthful audience
- Event, festival and ticketing sites
Avoid for
- Dense enterprise tools where colour must encode data
- Luxury and wellness brands that need calm
- Long-form reading pages
✓ Do
- Give each section one solid background from 8 band colours (4 dark + 4 light) and never repeat a hue in neighbouring sections (dark bands: tomato, green, cobalt, ink — cream text; light: mustard, pink, orange, cream — ink text); two dark bands touch only when one is ink
- Pair every block with an ink or cream text colour that passes 4.5:1 (mustard stat numerals ≥ 3rem on green are the one large-text exception)
- Use 1–2 giant solid shapes per band (circle, half-moon, quarter-round or triangle), clipped by the section edge
- Keep tiles rounded at 28px (radius lg) and borderless
✕ Don't
- Don’t put text directly over a giant shape — shapes stay behind tiles or in empty band corners, clipped by the band edge
- Don’t put two adjacent sections in the same colour, or let two non-ink dark bands touch
- Don’t give a small tile a second decorative shape or a third block-colour fill (icon circles, badges and buttons don’t count)
- Don’t shrink headlines or stretch them edge to edge — the hero stays big but capped at 13ch (Thai 16ch)
Not to be confused with
On mobile
Each screen gets one dominant block (tomato header, mustard featured card) and stays cream underneath for legibility. List icons become solid coloured squircles; the floating tab bar is an ink pill with a mustard circle behind the active icon.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.