# Kinetic Brutalism > Raw brutalist structure that never sits still: huge condensed caps, scrolling ticker bands, acid accents and hard-cut inversions. - Nickname: Brutalism on loop - Also called: Motion Brutalism, Brutalist Motion - Category: Bold & Expressive - Moods: Edgy, Bold, Techy - Industries: Gaming, Media & Entertainment, Creative & Portfolio, Startup & Tech - Style page: https://uilingo.dev/styles/kinetic-brutalism/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Kinetic Brutalism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Raw brutalist structure that never sits still: huge condensed caps, scrolling ticker bands, acid accents and hard-cut inversions. Design keywords: huge condensed caps, scrolling ticker marquee, acid yellow-green accent, hard-cut inversions, thick black rules, square everything, monospace labels, stepped animation. ## Visual language Brutalism in motion: a concrete-grey (#F0F0EB) page ruled by 3px black lines, square boxes with no radius and no shadow, and giant condensed uppercase headlines that fill the width like a fight-night poster. The page is never still — acid yellow-green ticker bands scroll under the nav and across the page, and states change with hard cuts: whole panels invert from concrete to black (or black to acid) instantly instead of fading. Colour is limited to black, concrete, one acid #D9FF00 and one signal orange #FF3B00; labels are set in monospace. ## Signature details (must be visible) - Latin poster headline: Big Shoulders Display 900 at clamp(4.5rem, 13.5vw, 11.5rem), line-height 0.84, uppercase, set in 2–3 lines that span at least 80% of the container - Thai headline: on Thai pages the giant headline is Thai in Kanit 800 at clamp(3.5rem, 8vw, 7rem), line-height 1.3, no uppercase and no tracking, each phrase wrapped in a white-space:nowrap span so it breaks into 2 full-width lines. Do not add an English poster line; the condensed-caps look is carried by the ticker, logo marquee, outlined numerals and stat figures - Scrolling ticker: #D9FF00 band with 3px black borders directly under the nav, uppercase condensed text separated by a star glyph, linear 26s infinite loop - Logo marquee: a black band of giant concrete Big Shoulders caps, names alternating filled and 2px-outlined (transparent fill, concrete stroke), scrolling opposite to the acid ticker at 40s linear. 'Reversed' means both inverted colours and opposite direction - Timing: state changes 0ms (hard cuts, hover inverts instantly); headline clip-path wipe in 4 steps over 480ms (steps(4,end)), once on load; orange cursor blink 1s steps(1) infinite; ticker 26s linear, logo marquee 40s linear; everything static under prefers-reduced-motion - Black zones: nav, dashboard top bar, tab bar, table header and every alternate landing section are #0A0A0A panels. Inside them borders flip to #F0F0EB, cards are #141414 with 3px concrete borders, and hover inverts to an acid #D9FF00 fill with #0A0A0A text - 3px solid black borders on every card, input, chip, list and button; border-radius 0 everywhere including avatars and switches - Orange #FF3B00 is fill-only (cursor block, dispute badge, chart series 2), always with #0A0A0A text on it (about 5.5:1). Never use it as text on concrete (about 3.3:1). Status green #0F7B3A is allowed only as the LIVE badge fill and status dots — the one exception to black / concrete / acid / orange ## Design tokens — use these exact values Colours (light mode): - background #F0F0EB - surface #FFFFFF - surface-2 #DADAD3 - text #0A0A0A - text-muted #45453F - primary #0A0A0A (text on it #D9FF00) - secondary #D9FF00 (text on it #0A0A0A) - accent #FF3B00 - border #0A0A0A - success #0F7B3A · warning #A85B00 · danger #D62F00 - chart series #0A0A0A, #FF3B00, #8A8A80, #A8C700, #3D3DFF Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 3px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.9 density Motion: 0ms steps(1, end) ## Typography (Latin + Thai) - Headings: Big Shoulders Display 700/800/900 with Thai fallback Kanit 600/800 - Body: Archivo 400/500/700 with Thai fallback IBM Plex Sans Thai 400/500/700 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Archivo:wght@400;500;700&family=JetBrains+Mono:wght@500;700&family=Kanit:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;700&display=swap - CSS stacks: heading `"Big Shoulders Display", "Kanit", system-ui, sans-serif`; body `"Archivo", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(4.5rem, 13.5vw, 11.5rem), heading weight 800, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Kanit 800 is the heaviest, tightest loopless Thai, matching the slab-like mass of Big Shoulders; IBM Plex Sans Thai keeps body copy as neutral and grotesque as Archivo. ## Components - Buttons: square, 3px border, condensed uppercase 900 label (Latin); primary = black with acid text, hover cuts to acid with black text; secondary = outline that inverts to black; arrow icons jump 6px on hover - Mono and Thai: JetBrains Mono has no Thai glyphs. Latin nav links, eyebrows, badges, chips, labels, table headers and meta text are JetBrains Mono uppercase; on Thai pages those same elements use IBM Plex Sans Thai at 0.9–0.95rem with no uppercase. Mono stack: 'JetBrains Mono', 'IBM Plex Sans Thai', ui-monospace, monospace. Keep mono for numerals - Eyebrow: a black-on-acid tag prefixed with a play triangle - Cards: white surface, 3px black border, no shadow; hover inverts instantly to black with concrete text (acid in dark mode) - Inputs: 3px black border, monospace value text (IBM Plex Sans Thai for Thai input), focus shows an 8px acid bar along the bottom (inset shadow), no glow - Badges: square, mono uppercase; status uses full fills — green LIVE, acid check-in, orange dispute (black text); neutral is a 2px outline - Nav: black bar, brand in condensed caps beside an acid square logo, mono links, the current link as an acid tag - Ticker band: full-width, overflow hidden, two identical halves translated -50% in a linear loop; static under prefers-reduced-motion - Dashboard (app page): black top bar plus a ticker, square KPI tiles with 3.6rem condensed numbers (first tile filled acid), sparklines stroked #0A0A0A, black table header, rows highlight acid on hover, 4px miter-joined chart lines, chart area a flat 8% black fill or a diagonal hatch — never a gradient - Tab bar (app page): black, labels in mono uppercase (IBM Plex Sans Thai on Thai), active item marked by a 6px acid bar on top ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: poster-sized headline that fills the viewport width, visual below. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → cta. Feature section as list. Landing page: poster hero with an acid eyebrow tag, the wall of condensed caps (or the Thai Kanit headline) with a blinking orange block cursor, lead and two square buttons, then the product shot as one 3px-ruled block of joined cells. For an esports or event site the product shot is a live match board: joined 3px-ruled cells holding a score block, a viewer count, bracket progress and team status badges (LIVE green, check-in acid, dispute orange). Directly under the sticky black nav runs the acid ticker. Sections alternate concrete and full-bleed black; section heads are left-aligned, never centred. Features are numbered full-width rows with huge outlined numerals (01, 02...) that fill acid on hover; stats are giant condensed numbers separated by 3px rules; the logo strip becomes the reversed black marquee; the CTA is a solid acid block with black type. Hero, logo marquee, numbered feature rows, stats, pricing and CTA are landing-only; dashboards use a black top nav with ticker and a dense, square grid. ## Content Use realistic product copy (fictional brand) suited to: Esports, game launches and tournaments. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rounded corners, pills, soft or offset drop shadows (that turns into neubrutalism) - Eased, springy or bouncy motion and fades — every change is a hard cut or a linear loop - Gradients (including faded chart areas), glow, chrome or blur (that is acid graphics / cyberpunk) - Acid #D9FF00 or orange #FF3B00 used as text on light backgrounds — both are fills behind black text only - More colours: no pastels, no blue/purple brand colour, no green sparklines — green only for the LIVE badge and status dots - Animating letters individually as the main content (that is kinetic typography) ## Stack notes One self-contained HTML file with a