UI Lingo
Shortlist 0

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.

“Brutalism on loop”Bold & ExpressiveEra: 2020sEdgyBoldTechy
Open full screen ↗
kinetic-brutalism / landingEN
kinetic-brutalism / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    This recipe redefines bg, surface, surface-2, text, text-muted, primary, on-primary, border, chart-1 in its own rules, so edits to those colours may show only in part.

    Design keywords

    Say these words to ask for this style.

    huge condensed capsscrolling ticker marqueeacid yellow-green accenthard-cut inversionsthick black rulessquare everythingmonospace labelsstepped animation

    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

    Brutalism →Brutalism is static raw HTML with system fonts and default links; Kinetic Brutalism adds giant condensed caps, ticker marquees, acid accents and stepped motion.Kinetic Typography →Kinetic Typography animates the letters themselves as the content; Kinetic Brutalism keeps type mostly still and moves bands, panels and inversions inside a hard black-rule grid.Neubrutalism →Neubrutalism is friendly — rounded tiles, offset shadows, many pastels; Kinetic Brutalism is square, shadowless, black + concrete with one acid accent.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close