# Neubrutalism > Thick black outlines, hard offset shadows and loud flat colours — brutalism made friendly. - Nickname: Sticker-bold - Also called: Neo-brutalism, Neo Brutalism - Category: Bold & Expressive - Moods: Playful, Bold, Edgy, Friendly - Industries: Startup & Tech, Creative & Portfolio, SaaS, Education, Media & Entertainment - Style page: https://uilingo.dev/styles/neubrutalism/ Neubrutalism keeps brutalism’s honesty — visible structure, no gradients, no blur — but adds saturated pastel-to-primary colour, chunky type and playful sticker-like components. Every surface has a 2–4px black border and a solid shadow offset down-right with zero blur, so buttons look like physical tiles you can press. ## Best for - Startup and indie product launches - Creator tools and portfolios - Developer blogs and newsletters - Gen‑Z facing apps ## Avoid for - Luxury or premium brands - Banking and healthcare that need calm trust - Dense enterprise data tools ## Do - Use 3px for containers and 2px for small inline items, with one down-right shadow direction - Pair black with 3–4 flat brights - Animate the shadow, not the colour, on press ## Don't - No gradients, blur or soft drop shadows - Cards 14px; never beyond 18px (the xl token) except pills and avatars - Don’t use thin hairline borders ## Audit Passed after 3 rounds · builder claude-haiku-5-5 · auditor claude-opus-5-5 ## 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 "Neubrutalism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Thick black outlines, hard offset shadows and loud flat colours — brutalism made friendly. Design keywords: thick black borders, hard offset shadow, zero blur, flat saturated colour, sticker UI, press-down buttons, chunky type, playful rebellion. ## Visual language A warm cream page (#FFF8E7) dotted like graph paper, covered in chunky sticker-like tiles: every card, button, input and badge has a thick 3px black outline and a solid black shadow offset down-right with zero blur, so components look like physical blocks you can press. Colour is flat and loud — butter yellow #FFD23F, bubblegum pink #FF6B9D, cornflower blue #4D7CFE and pastel tints of each — with heavy, squat headlines. It is playful and confident but still tidy and polished, never messy. ## Signature details (must be visible) - Two stroke weights only: 3px solid #0A0A0A for containers (cards, buttons, inputs, lists, checkboxes, switches, nav rule, section bands) and 2px for small inline items (badges, chips, avatars, chart bars, progress outline, active tab tile). Radius rule: sm 6px badges/inputs, md 10px buttons, lg 14px cards; xl 18px only for the hero chart panel and CTA block; nothing larger except avatars and pill chips - Hard offset shadows with no blur, always down-right: 3px on buttons and inputs (5px on hover), 5px on cards (8px on hover), 8px static on the CTA block — all solid #0A0A0A - Press physics, unified: buttons and inputs hover translate(-2px,-2px) with the shadow growing 3→5px; cards hover translate(-3px,-3px) with the shadow growing 5→8px; every press is translate(3px,3px) with the shadow collapsing to 0, 120ms. Focus may tint an input's fill #FFFBEA; the 'animate the shadow, not the colour' rule applies to motion only - Highlighter headline, defined on the line box: an inline span with `background: linear-gradient(transparent 62%, #FFD23F 62% 92%, transparent 92%); display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.15` (Latin) / line-height 1.3 with a 60%→90% band (Thai). Never wrap phrases in inline-block, so every line gets its own band. Thai headlines arrive split into phrase spans: make those spans display: inline but never white-space: nowrap (a phrase longer than the column must still wrap), and the headline must never run out of its column or under the hero visual - Eyebrow is a pink #FF6B9D sticker sized to its text (width: fit-content, never full-width): 3px border, 3px hard shadow, rotated -2deg. Uppercase and 0.06em tracking apply to Latin only; Thai eyebrows use letter-spacing 0 - Feature cards cycle named pastel tokens: pastel-yellow #FFE8A3 (= surface-2), pastel-pink #FFD6E5, pastel-blue #D6E2FF, pastel-mint #CFF5EF, then white. Other named extras: focus-tint #FFFBEA, badge-success #C9F2D8, badge-danger #FFC9CB - Background texture: the Dot grid effect below — 1.2px dots in the text colour at 20% strength (opacity 0.2) on a 22px grid, even across the whole page (no fade), on the one fixed background layer only, never inside cards - All headings Archivo 800 at -0.02em (Latin only); Kanit 800 headings at letter-spacing 0 (900 unused). Stat, KPI and price values are Archivo 800 with tabular-nums; Space Mono only for code snippets and small meta text (IDs, timestamps). The baht sign (U+0E3F), %, M and + stay in the same font as the number ## Design tokens — use these exact values Colours (light mode): - background #FFF8E7 - surface #FFFFFF - surface-2 #FFE8A3 - text #0A0A0A - text-muted #3B3B3B - primary #FFD23F (text on it #0A0A0A) - secondary #FF6B9D (text on it #0A0A0A) - accent #4D7CFE - border #0A0A0A - success #1F9D55 · warning #E8A100 · danger #E5383B - chart series #4D7CFE, #FF6B9D, #FFD23F, #2EC4B6, #0A0A0A Radius: sm 6px, md 10px, lg 14px, xl 18px, pill 999px Border width: 3px Shadows: sm `3px 3px 0 var(--c-border)`, md `5px 5px 0 var(--c-border)`, lg `8px 8px 0 var(--c-border)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 120ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Archivo 800 with Thai fallback Kanit 600/800 - Body: Public Sans 400/500/700 with Thai fallback IBM Plex Sans Thai 400/500/700 - Mono: Space Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Archivo:wght@800&family=Public+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Kanit:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;700&display=swap - CSS stacks: heading `"Archivo", "Kanit", system-ui, sans-serif`; body `"Public Sans", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"Space 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(2.75rem, 6.5vw, 5.25rem), heading weight 800, heading tracking -0.02em (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 matches Archivo’s heavy, squat headlines; IBM Plex Sans Thai mirrors Public Sans’ neutral grotesque body. ## Components - Primary button: yellow #FFD23F fill, black 700 text, 3px black border, 10px radius, 3px hard shadow; lifts on hover, slams flat on press - Secondary button: white fill with the same border and shadow. Ghost button (used only for the nav 'log in' link): no border until hover, when the border, 3px shadow and white fill appear - Card: white or pastel fill, 3px black border, 14px radius, 5px 5px 0 black shadow; hover lifts (-3px,-3px) onto an 8px shadow, press translate(3px,3px) with shadow 0 - Pricing: regular plans are white sticker cards with a yellow primary button; the highlighted plan is solid pink #FF6B9D with black text and a white secondary button inside - Stats: each of the four stat blocks is itself a white sticker card — never bare numbers on the band — (3px border, 14px radius, 5px shadow, 20px 24px padding) on cream, value Archivo 800 2.5rem with the label in muted body text below - Inputs: 3px black border, 6px radius and 3px hard shadow; hover lifts (-2px,-2px) onto a 5px shadow; focus grows the shadow to 5px and tints the field focus-tint #FFFBEA — no glow ring or colour change on the border - Badges: 2px black border, 6px radius on pastel fills (badge-success #C9F2D8, warning = pastel-yellow #FFE8A3, badge-danger #FFC9CB) with black text; solid badge is yellow - Checkboxes and switches: 3px black border (a container stroke, not 2.5px); checked state fills yellow with a black tick or black knob - Progress bar: 14px tall, 2px black outline, white track, square blue #4D7CFE fill - Sidebar: 3px black right edge; active item is a yellow tile with a 2px border and 3px hard shadow - Charts: 3.5px-thick lines with a flat 22% accent area fill (never a gradient), bars outlined in 2px black with square tops, donut strokes 7px; table headers sit on a 3px black rule. Charts stay inside their cards: bar columns may shrink (min-width 0) and long labels truncate with an ellipsis, so outlines never push a chart past its card edge - Chat bubbles: incoming = white sticker (3px black border, 14px radius with the tail corner — bottom-left — at 4px, 3px hard shadow); outgoing = yellow #FFD23F with black text, same border and shadow, tail corner bottom-right at 4px. The meta line (time, read ticks) is Space Mono 0.7rem at 75% text colour. An attachment card inside a bubble is a white tile with a 2px border and no shadow. Quick replies are white 2px-bordered pill chips; the composer is the 3px sticker input beside a 44px yellow icon-button sticker - Sign-in: one centred white sticker card (3px border, 14px radius, 8px hard shadow) on the dotted cream page, logo and an Archivo 800 title above the fields, a full-width yellow primary button, white secondary "continue with" buttons with the same 3px border and shadow, and the "or" divider as a 3px black rule with its label on a cream patch in the middle - Settings: the outlined dashboard sidebar; each settings group is a white sticker card whose head sits on a 3px black rule; rows are separated by 2px black dividers; switches are 3px-bordered with a yellow checked track. The danger button is danger #E5383B with #0A0A0A text, 3px border and 3px hard shadow (white text on that red fails AA) - States (empty, error, 404) and alerts: each state is a white sticker card with a 56px pastel icon tile (2px border, 10px radius, 3px hard shadow) holding a black icon, an Archivo 800 title, muted copy and a yellow primary action. Alerts are full-width pastel stickers (success #C9F2D8, warning #FFE8A3, danger #FFC9CB) with a 3px border, 3px hard shadow and a black icon — never a soft tinted box with a thin border - Article: the pull-quote is a yellow sticker (3px border, 14px radius, 5px hard shadow, 24px padding, no left rule); figure and alternating art are solid blue #4D7CFE panels like the onboarding art; related-article art keeps the demo's hue rotation — never set `filter: none`. ## 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: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → stats → testimonials → pricing → faq → cta. Feature section as grid. Split hero: left side has the tilted pink eyebrow sticker, a three-line 800-weight headline with yellow highlighter bands on every line, a lead and yellow + white sticker buttons; right side stacks an outlined chart card (18px radius) over two outlined stat cards, all with hard shadows. The nav is a cream bar closed by a 3px black rule with a yellow sticker CTA. A logo strip on cream uses full-strength black wordmarks. After the hero, alternate cream / #FFE8A3 bands starting with features as a band (features, testimonials, faq are #FFE8A3 bands framed by 3px black rules top and bottom; the logo strip stays cream); features are 6 feature cards in a 3-column grid (yellow, pink, blue / mint, white, white), 1 column below 768px. The CTA is a blue #4D7CFE block (18px radius) with #0A0A0A text (≈5.6:1 — white on this blue is only 3.7:1 and fails AA), 3px border, 8px static hard shadow and a yellow button. Dashboards use an outlined sidebar, sticker KPI cards and thick-lined charts with flat fills. Footer: cream, closed off by a 3px black top rule, with 4 link columns. Sign-in, settings and states pages keep the same dotted cream ground and cream nav bar, with every card, input and alert a sticker. ## Icons - Library: Phosphor (MIT, https://phosphoricons.com), variant "Bold". Every icon comes from this library in this variant: do not mix libraries, draw icons or use emoji. - Package: the SVG files of @phosphor-icons/core inlined. SVG path in @phosphor-icons/core: `assets/bold/{name}-bold.svg`. - Paint: filled icons — fill="currentColor", so they take the text colour. - Usage: Bold weight only: 20px in buttons, list rows and icon tiles, 22px in the tab bar. Icons are black #0A0A0A on yellow, pink, blue and pastel fills (never tinted), white on black only in dark mode. ## Background effect: the "Dot grid" effect (`dot-grid`) Family: Pattern · pure CSS. A precise grid of small dots that fades out toward the edges. ### Look A precise grid of small dots covers the background and fades out toward the edges, like engineering paper seen through a soft spotlight centred a little above the middle. Quiet and technical: it reads as texture, not decoration, and never competes with text. ### Parameters (current values) - Spacing `--fx-gap`: 22 (range 12–48) — grid spacing in px - Dot radius `--fx-dot`: 1.2 (range 0.5–3) — in px - Strength `--fx-opacity`: 0.2 (range 0.1–1) - Edge fade `--fx-fade`: 0 (range 0–1) — 0 = even everywhere - Dots `--fx-color-dot`: the `text` colour token, `var(--c-text)` - Background `--fx-color-bg`: the `bg` colour token, `var(--c-bg)` ### Recipe - The element: `background-color: var(--fx-color-bg)`. - Its `::before` (`content: ''; position: absolute; inset: 0`) draws the dots: `background-image: radial-gradient(circle, color-mix(in srgb, var(--fx-color-dot) calc(var(--fx-opacity) * 100%), transparent) calc(var(--fx-dot) * 1px), transparent calc(var(--fx-dot) * 1px + 0.75px))`, `background-size: calc(var(--fx-gap) * 1px) calc(var(--fx-gap) * 1px)`, `background-position: center`. - Fade the dots, not the background: on `::before`, `mask-image` (and `-webkit-mask-image`) `radial-gradient(ellipse 75% 70% at 50% 40%, #000 calc((1 - var(--fx-fade)) * 100%), transparent 100%)`. ### CSS fallback It is pure CSS: the result above is the whole effect. ### Runtime rules - Mount it in one element that fills a fixed, `pointer-events: none`, `aria-hidden` layer behind the page content; every parameter above is a CSS custom property on that element. - Colours come only from the colour-token variables above (mix them with `color-mix()` or alpha), never hard-coded hex, so the effect follows any palette and light or dark mode. - CSS only: gradients, `mask`, pseudo-elements and inline `data:image/svg+xml` (no `