Kinetic Brutalism
Also called: Motion Brutalism, Brutalist Motion
Raw brutalist structure that never sits still: huge condensed caps, scrolling ticker bands, acid accents and hard-cut inversions.
Design keywords
Say these words to ask for this style.
Kinetic Brutalism takes brutalism’s thick black rules, square boxes and anti-decoration stance and puts it in motion. Headlines are giant condensed uppercase that fills the width, ticker marquees scroll under the nav and through the page, and states change with hard cuts — whole panels invert black ↔ concrete instead of fading. One acid yellow-green and one signal orange are the only colours. Motion is linear and stepped, never eased or bouncy, and switches off for reduced motion.
Best for
- Esports, game launches and tournaments
- Music, streetwear and drop-culture sites
- Event and festival promos
- Agency and creative-dev portfolios
Avoid for
- Healthcare, finance or anything needing calm trust
- Long-form reading
- Users sensitive to motion (keep a static fallback)
✓ Do
- Set the Latin poster headline in a condensed grotesque at clamp(4.5rem, 13.5vw, 11.5rem), uppercase, line-height 0.84
- Use linear or steps() timing; marquees at a constant 20–40s loop
- Invert whole panels (black ↔ #F0F0EB) on hover and between sections
- Keep acid #D9FF00 for fills behind black text only
- Thai headlines in Kanit 800, no uppercase, line-height ≥ 1.3; Thai labels in IBM Plex Sans Thai (mono has no Thai)
✕ Don't
- No rounded corners, soft shadows or gradients
- No eased, springy or bouncy motion
- Don’t put acid text on light backgrounds
- Don’t animate without a prefers-reduced-motion fallback
- Don’t use orange #FF3B00 as text on concrete — fill only, with black text
Not to be confused with
On mobile
Keep one ticker band under the app bar and a black tab bar with an acid active block. Invert list rows on press instead of animating them; stop the marquee entirely when reduced motion is on, and don’t run more than one loop per screen on low-end phones.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.