# Gen Z Chaos / Maximalism > A loud collage of tilted cards, stickers, emoji, scrolling marquees and clashing fonts on graph paper — clutter on purpose. - Nickname: Sticker collage - Also called: Maximalism, Chaotic UI, Gen Z aesthetic, Internet collage - Category: Bold & Expressive - Moods: Playful, Edgy, Bold - Industries: Media & Entertainment, Gaming, Creative & Portfolio, E‑commerce, Startup & Tech - Style page: https://uilingo.dev/styles/gen-z-chaos-maximalism/ Gen Z maximalism treats the page like a phone-screen scrapbook. Cards are tilted a degree or two in different directions and painted acid lime, hot pink, electric blue and lilac; sticker badges and emoji are slapped on corners; marquee tickers scroll across the layout; and a wide display grotesk, an italic serif and a monospace all fight in the same viewport. It feels internet-native, self-aware and high-energy — the opposite of tasteful minimalism, but still built on a grid so it stays usable. ## Best for - Music, streaming and creator-media platforms - Streetwear, merch drops and youth e-commerce - Social and community apps aimed at under-25s - Campaign microsites and launch hype pages ## Avoid for - Banking, insurance, healthcare and government - Enterprise dashboards used for hours a day - Audiences with cognitive or vestibular accessibility needs (motion, clutter) ## Do - Tilt content cards (features, testimonials, pricing, KPI tiles) between -2° and +2° and vary the direction every item; eyebrows and small stickers may go to ±4°, icon marks to ±10°, starbursts and emoji stickers 10–16° - Use at least three typefaces: wide grotesk display, italic serif accents, monospace stickers - Put one marquee band near the top and one before the footer; pause it for prefers-reduced-motion - Keep body text on solid white or a single flat colour so it stays readable ## Don't - Don’t tilt text inputs, tables or long paragraphs - Don’t move anything besides the two marquees and hover/press feedback - Don’t build the palette from muted or pastel colours — acid lime, hot pink and electric blue lead; lilac and peach are only accents - Don’t drop the grid entirely — chaos sits on a structure ## Audit Passed after 5 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 "Gen Z Chaos / Maximalism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A loud collage of tilted cards, stickers, emoji, scrolling marquees and clashing fonts on graph paper — clutter on purpose. Design keywords: tilted cards, sticker badges, scrolling marquee, emoji everywhere, clashing fonts, acid lime and hot pink, graph paper background, collage layout, intentional clutter. ## Visual language A phone-screen scrapbook on blue graph paper: cards are tilted a degree or two in alternating directions and painted acid lime, hot pink, electric blue and lilac, each with a 2px black outline and a hard offset shadow. Sticker badges, starbursts and emoji are slapped onto corners, two tilted marquee tickers scroll across the page, and three typefaces fight on purpose — a wide fat grotesk in caps, an italic system serif for section titles and quotes, and a monospace for labels. It is loud, self-aware and internet-native, but everything still snaps to a grid so it stays usable. ## Signature details (must be visible) - Rotation: tilts are small and fixed per element, alternating direction via nth-child; paragraphs inside a tilted card are fine, free-standing paragraphs, inputs, tables and list rows never tilt. (1) Grids of content cards — features, testimonials, pricing and related stories (plus their sample on the components sheet) — take the white → lime → lilac cycle and tilt nth-child(odd) -1.5°, (even) +1.2°. (2) These single pieces also tilt, each at its own fixed angle: the four hero bento tiles (-1.6° / +1.4° / -0.8° / -2°), the single showcase card (1.2°), the CTA slab (-1°), FAQ rows (±0.6°), odd stats (-2°), the pullquote (-1.2°), the selected radio card (-1°), dashboard KPI tiles (-1.2° / +1° / -0.6° / +1.4°), the sidebar active item (-1°); on mobile the featured card (-1.5°), the stats strip (+1°), the onboarding art (-1.5°) and the floating tab bar (-1°). (3) Small stickers and marks may go further: eyebrow -4°, nav current-link pill -3°, chips -2° / +1.5°, badges ±2°, the profile avatar -6°, card icon discs and the active tab-bar blob -8°, mobile list icons (pink squares) +8°, the blob logo -10°, and starbursts and emoji stickers 10–16°. Everything else stays straight: dashboard chart/table cards, the sign-up form card, the other components-sheet panels (only the small colour swatches tilt there) - Palette: #C8FF2E acid lime, #FF3EA5 hot pink, #3A45FF electric blue, #FF6B1A orange, #0E0E0E ink, white; named extras lilac #C9A8FF (card fill; chart lilac is #A86BFF), peach #FFC08A (warning badge), stone #E5E2DA (neutral badge) and the alert tints #EEFFC2 / #FFE2C7 / #FFD3E8; background #F1EFE9 with a 26px graph grid in rgba(58,69,255,.11) - Fonts: Unbounded 800 uppercase display; Thai headline in Kanit 800 (no caps), optionally with one short Latin kicker (e.g. MAKE NOISE.) in Unbounded uppercase above it so the fat-caps look survives. Serif stack for h2, quotes and the article dek: font-family: Georgia, "Times New Roman", "Kanit", serif; font-style: italic (Kanit must come before the generic serif keyword so Thai falls to Kanit; Georgia is a system font, not loaded from Google Fonts). Thai h2, quotes and the dek use the real Kanit italic 500 (not 800, letter-spacing 0, line-height 1.35); the generic 'do not italicise Thai' rule bans only synthetic obliques, and this style's Thai italic is a real cut. The Google Fonts URL above requests Kanit italic at both loaded weights; only italic 500 is ever used, so you may trim ital 800 from it. Mono stack for labels, badges, chips, eyebrows, footer headings and the marquee: font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace — Space Mono has no Thai glyphs, so Thai mono text renders in Bai Jamjuree at the same size and drops uppercase and tracking - Marquees, max two per page: on the landing a pink strip right under the hero rotated -1.5° and a lime strip right before the black footer rotated +1.5°; other pages get one lime strip under the nav / app bar (-1.5°; only -0.6° under the dashboard top bar). Full-bleed, ink text, 2px black rules top and bottom, words + emoji scrolling at 26s linear, disabled under prefers-reduced-motion. Nothing animates on its own except the marquees; hover/press transitions (wiggle, shadow growing 3→5px, pressed translate 2px) are allowed on buttons, chips and cards - Starburst stickers via clip-path (58px, rotate 14°, pinned 16px above and 12px outside the card's top-right corner) reading 'NEW!' / '★ TOP' or an emoji. Starbursts are the one unoutlined element: no border, no shadow, ink mono text. A starburst never matches its card: it is hot pink on white, lime, lilac and blue cards, and lime only on a pink card. Placements: features card 1 'NEW!' (pink on the white card); features card 5 a PINK starburst with 🔥 (the card itself is lime from the cycle); the blue featured price card '★ TOP' (pink) - Emoji as decoration, always with a hard 0-blur drop-shadow when shadowed: section titles features ⚡, testimonials 💬, pricing 💸, FAQ 🤔 (3.4rem, rotated ±12–14°, filter: drop-shadow(3px 3px 0 #0E0E0E)); the CTA slab 💥 (4rem, top-left) and a lime ✿ outlined 2px ink (bottom-right); hero tile 3 👀 (2.4rem, top-right); hero tile 4 🗞️ (6rem, top-right, drop-shadow(4px 4px 0 #0E0E0E)); and 😍 (2.6rem) on the bottom-right corner of the blue featured card on the mobile home screen - Shadows are always hard offsets down-right with 0 blur. They extend the three shadow tokens (sm 3px 3px 0 pink, md 6px 6px 0 ink, lg 10px 10px 0 blue) with this fixed set, the only off-token offsets allowed: 3px 3px 0 pink (sm: primary button, nav CTA, sidebar active item) and 3px 3px 0 ink (eyebrow, active chip, accent button); 4px 4px 0 ink (FAQ rows, alerts, selected radio card) and the input focus ring 4px 4px 0 lime with a 2px ink outline (error: peach with a red outline); 5px 5px 0 pink (primary button hover, floating tab bar) and 5px 5px 0 ink (profile avatar); 6px 6px 0 ink (md: cards, lists, hero tiles) or 6px 6px 0 pink (lilac nth-child(3n) grid cards, the pullquote, the mobile featured card); 8px 8px 0 blue (card hover) and 8px 8px 0 ink (onboarding art); 10px 10px 0 blue (lg: showcase card and CTA slab) - Mismatched shapes, one value each: pill primary (999px), 4px-radius secondary rotated 1.5°, leaf shape border-radius: 6px 32px 6px 32px for both the lilac leaf cards and the accent button, blob logo mark and profile avatar (border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%) - Stat numbers in lime or pink fill with a black outline: -webkit-text-stroke 4px #0E0E0E plus paint-order: stroke fill (so ~2px shows outside and no stroke spikes appear inside the glyphs). The fill always contrasts with its tile: on the lime hero tile the numeral is pink, on the lilac tile it is lime — never lime-on-lime or pink-on-pink; on the bare graph paper the stats alternate lime / pink. Outlined numerals only at ≥ 2.5rem; anything smaller is solid ink with no stroke ## Design tokens — use these exact values Colours (light mode): - background #F1EFE9 - surface #FFFFFF - surface-2 #E4FF9A - text #0E0E0E - text-muted #45434A - primary #3A45FF (text on it #FFFFFF) - secondary #C8FF2E (text on it #0E0E0E) - accent #FF3EA5 - border #0E0E0E - success #00875A · warning #B55400 · danger #E0183C - chart series #3A45FF, #FF3EA5, #C8FF2E, #FF6B1A, #A86BFF Radius: sm 6px, md 14px, lg 22px, xl 32px, pill 999px Border width: 2px Shadows: sm `3px 3px 0 #FF3EA5`, md `6px 6px 0 #0E0E0E`, lg `10px 10px 0 #3A45FF` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 160ms cubic-bezier(.68,-0.6,.32,1.6) ## Typography (Latin + Thai) - Headings: Unbounded 500/800 with Thai fallback Kanit 500/800 - Body: Space Grotesk 400/500/700 with Thai fallback Bai Jamjuree 400/500/700 - Mono: Space Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=Kanit:ital,wght@0,500;0,800;1,500;1,800&family=Bai+Jamjuree:wght@400;500;700&display=swap - CSS stacks: heading `"Unbounded", "Kanit", system-ui, sans-serif`; body `"Space Grotesk", "Bai Jamjuree", system-ui, sans-serif`; mono `"Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 6vw, 5.2rem), heading weight 800, heading tracking -0.03em (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 has the same fat, wide-shouldered punch as Unbounded, and its true italic 500 carries the Thai serif-accent moments (h2, quotes, dek); Bai Jamjuree’s squarish strokes echo Space Grotesk’s quirky geometry. ## Components - Primary button: #3A45FF pill, white text, 2px black border, --shadow-sm 3px 3px 0 #FF3EA5 (5px on hover); hover wiggles (rotate ±3°) twice; pressed translate 2px. In the nav it switches to a lime pill with ink text and the same pink shadow; inside the pink CTA slab buttons are ink pills with lime text - Secondary button: lime, ink text, 2px black outline, 4px radius, tilted 1.5° at rest, no shadow; hover turns pink - Accent button: hot pink #FF3EA5, ink text, 2px ink border, leaf radius 6px 32px 6px 32px, 3px 3px 0 #0E0E0E shadow, no rest tilt; hover wiggle. Ghost button: no fill, text with a wavy pink underline. Danger: #E0183C, white text, 4px radius - Chips: white mono pills (Thai in Bai Jamjuree), 2px ink border, tilt alternating -2° / +1.5°; active chip hot pink with ink text and 3px 3px 0 #0E0E0E shadow; hover wiggle - Card: 2px black outline, padding 24px. Precedence for a grid of content cards: fill cycles white → lime → lilac #C9A8FF via nth-child(3n+1) / (3n+2) / (3n); radius 4px on white, 22px on lime, leaf 6px 32px 6px 32px on lilac; shadow 6px 6px 0 #0E0E0E except nth-child(3n) which is 6px 6px 0 #FF3EA5; tilt nth-child(odd) -1.5°, nth-child(even) +1.2°; hover shadow becomes 8px 8px 0 #3A45FF. Icon: a solid black circle with a lime glyph, rotated -8°. The featured price card is electric blue #3A45FF with white text whatever its position: 'Most popular' badge black with lime mono text, lime check icons, a pink '★ TOP' starburst, and a full-width lime secondary CTA with ink text (4px radius, 2px ink outline, tilted 1.5°); the other plans use the blue primary pill - Eyebrow: lime mono pill with '✦ ' prefix, black outline, 3px 3px 0 ink shadow, rotate(-4deg) - Inputs stay straight: white, 14px radius, 2px black border; focus adds a lime block shadow outlined in black (4px 4px 0 #C8FF2E, 4px 4px 0 2px #0E0E0E); error state: border #E0183C plus 4px 4px 0 #FFC08A, 4px 4px 0 2px #E0183C, with the error text below in danger red. Form actions: the trust note on its own line, then the secondary and primary buttons side by side on one right-aligned row - Badges: mono, black outline, tilted -2° (warning +2°); fills white default, lime success, peach #FFC08A warning, pink danger, stone #E5E2DA neutral, all with ink text; solid badge black with lime text; never tilted inside tables - Nav ('split'): black bar — blob logo + Unbounded 800 caps brand left, centred Space Mono links at 0.85rem (uppercase only for Latin links; Thai links stay in Bai Jamjuree at 0.95rem, no caps) with the current link as a lime pill rotated -3°, ghost login (white text, no fill, wavy pink underline) + CTA right. The nav CTA is a lime pill (radius 999px), 2px ink border, 3px 3px 0 #FF3EA5 shadow, ink text, no tilt at rest - Dashboard: black sidebar with a lime active item tilted only -1° and kept 12px inside the sidebar edge; KPI tiles in lime / white / lilac / pink each tilted, delta chips as outlined white pills; chart and table cards straight; bars alternate dome and square tops; line chart with a flat rgba(58,69,255,.12) area and a dotted pink second series. Table: Space Mono header with a 2px ink rule, cells 12px 10px, the title column wraps (min 16ch) and the other columns stay on one line so all five columns fit inside the card - Mobile tab bar: floating black pill rotated -1° with a 5px pink offset; the active icon sits on a lime blob. Pullquote: lime block tilted -1.2° with a pink offset shadow, set in italic serif - Art panels (article figure, mobile onboarding): flat acid colour only — a hard-stop conic-gradient(#3A45FF 0 25%, #C9A8FF 0 50%, #FF6B1A 0 75%, #3A45FF 0) with hard-edged lime and pink circles on top and emoji stickers; never a smooth blend; related-story cards reuse the same art without any hue shift - Footer: black #0E0E0E band with the lime marquee (+1.5°) sitting directly on its top edge; left column = pink blob logo + Unbounded 800 caps brand and a tagline in rgba(255,255,255,.78); then 3 link columns with Space Mono uppercase lime headings (Thai: Bai Jamjuree, no caps) and body-font links in rgba(255,255,255,.78); a 1px rgba(255,255,255,.3) rule above the legal line. No tilt, no stickers in the footer ## 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: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: split style. Sections in order: hero → logos → features → showcase → testimonials → stats → pricing → faq → cta. Feature section as grid. Spacing (8px × 0.95 density, rounded to whole values): sections 96px top and bottom on desktop, 64px below 760px; card grids and the hero bento 24px gap; card padding 24px (price cards about 30px, product-mock tiles 18px); hero 48px top padding and 48px from the bento to the pink marquee. Bento hero as a collage on a 4-column grid with a 24px gap and exactly four tiles: tile 1 is the white headline card spanning 2 cols × 2 rows (radius 4px, tilt -1.6°) holding the eyebrow, the optional Latin kicker, the headline, the sub-headline and both CTAs; the headline inside tile 1 is fat uppercase ink with a pink 3px text-shadow at clamp(2.2rem, 4vw, 3.5rem) (Thai clamp(2.2rem, 4.4vw, 3.8rem), max 3 lines) — not the 5.2rem section display size. Tile 2 is a lime stat 1×1 with a pink outlined numeral (tilt +1.4°); tile 3 a lilac leaf-shaped stat 1×1 with a lime outlined numeral and a 👀 sticker (tilt -0.8°); tile 4 a pink 2×1 product visual tilted -2°: the feature icon top-left, a 6rem 🗞️ at the top-right with drop-shadow(4px 4px 0 #0E0E0E), a black mini-player pill '▶ LISTEN NOW · 12 MIN' (lime Space Mono 700, 10px 18px padding, rotated -3°) at mid-left, and the feature title + sub-line at the bottom-left. No other hero tiles. The pink marquee cuts across under the hero and the lime one runs before the black footer. The partner-logo strip sits on the bare graph paper directly below the pink marquee (no background, 24px padding) and alternates three faces — italic Georgia serif, Unbounded 800 caps and Space Mono. Features are a 3-column grid (3 × 2 for six cards) of tilted, recoloured cards in the white → lime → lilac cycle with starburst stickers; showcase sits in a card tilted 1.2° with a 10px blue offset; the later stats section restyles its numbers as free tilted outlined numerals on the graph paper, not a repeat of the hero tiles; pricing follows the card cycle with the blue '★ TOP' featured plan; FAQ rows are white outlined tiles tilted ±0.6° with 👉 / 👇 markers; the CTA is a pink slab tilted -1° with a 10px blue offset and 💥 and ✿ stickers. Dashboards keep the grid, tilt only the KPI tiles and the -1° sidebar active pill, and run a lime marquee under the top bar. ## Content Use realistic product copy (fictional brand) suited to: Music, streaming and creator-media platforms. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Tilt content cards (features, testimonials, pricing, KPI tiles) between -2° and +2° and vary the direction every item; eyebrows and small stickers may go to ±4°, icon marks to ±10°, starbursts and emoji stickers 10–16° - Use at least three typefaces: wide grotesk display, italic serif accents, monospace stickers - Put one marquee band near the top and one before the footer; pause it for prefers-reduced-motion - Keep body text on solid white or a single flat colour so it stays readable ## Don't - Don’t tilt text inputs, tables or long paragraphs - Don’t move anything besides the two marquees and hover/press feedback - Don’t build the palette from muted or pastel colours — acid lime, hot pink and electric blue lead; lilac and peach are only accents - Don’t drop the grid entirely — chaos sits on a structure - Everything straight and aligned with a single font — that reads as Neubrutalism - Pastel candy colours with a neat repeating squiggle pattern — that is Memphis - Dark chrome, liquid metal and psychedelic gradients — that is Acid graphics - Tilting inputs, tables or long paragraphs, which hurts legibility and tapping - More than two marquees per page, anything moving on its own besides the marquees (only hover/press feedback is allowed), or motion without a reduced-motion fallback - Body text placed on top of busy collage areas instead of a flat surface - Smooth multi-stop gradients or soft blurred colour fades (in art panels, chart areas or sticky bars) — they read as Acid graphics or Dopamine design. Hard-stop gradients are fine: the 1px graph-paper lines, the 12px pink / blue / lime progress stripes and the conic art panels ## Stack notes One self-contained HTML file with a