Brutalism

Also called: Web Brutalism, Brutalist web design, Raw web

The browser’s defaults on purpose: Times and Arial, blue underlined links, 1px black boxes, grey bevel buttons and zero polish.

“Raw HTML”Bold & ExpressiveEra: 1990s web, revived 2014–nowEdgySeriousBold

Open full screen ↗

brutalism / landingEN

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

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×0.9Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

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

Design keywords

Say these words to ask for this style.

default browser fontsblue underlined linksTimes New Roman body1px black table bordersgrey bevel buttonsvisible grid linesno radius no shadowmonospace metadatadeliberately unrefined

Web brutalism exposes the raw material of the web instead of decorating it. Pages look like unstyled HTML that someone pushed to the extreme: default serif body, huge plain sans headlines, link-blue underlines, visible 1px table borders around every block, grey outset buttons, monospace metadata and a visible column grid. No radius, no shadow, no gradient, no colour system beyond black, white, link blue, visited purple and a warning red. It reads as honest, anti-corporate and fast.

Best for

Artist, architect and studio portfolios
Zines, manifestos and independent publications
Developer tools, docs and link directories
Event and exhibition microsites

Avoid for

Consumer brands that must feel friendly or premium
Checkout and banking flows that need reassurance
Audiences unfamiliar with web culture (it can look broken)

✓ Do

Use #0000EE underlined links and #551A8B for visited/hover
Draw every block with a 1px solid #000 border and 0 radius
Let Times-like serif carry body text at 17–18px
Use monospace for dates, IDs, counts and labels in [brackets]

✕ Don't

No border-radius, drop shadows, gradients or blur
Don’t add a brand colour palette — black, white and link blue only
Don’t centre everything; keep the hard left edge
Don’t animate anything decoratively

Not to be confused with

Neubrutalism →Neubrutalism is colourful and polished with 3px outlines and hard offset shadows; Brutalism uses default fonts, link blue, 1px borders and no shadows at all.Terminal CLI →Terminal CLI is monospace on a dark screen with a prompt and cursor; Brutalism is a white document page with serif body text and blue links.Anti-Polish / Raw Aesthetic →Anti-polish fakes physical paper, tape and marker; Brutalism is purely digital — it looks like unstyled HTML, not a photocopy.

On mobile

Keep the 1px boxes, blue underlined links and serif body; the tab bar becomes a plain bordered row of text labels with the active one underlined. Touch targets stay 44px even though nothing looks like a button.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinArimo · 400/700

The quick brown fox

Heading · ThaiNoto Sans Thai · 400/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinTinos · 400/700

Clear words make shared decisions.

Body · ThaiNoto Serif Thai · 400/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Arimo and Tinos are metric clones of Arial and Times New Roman; Noto Sans Thai and Noto Serif Thai are the plain system-default Thai faces you would see in an unstyled page, sans for headlines and looped serif for body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`1px`
Shadow	`none`
Display	`clamp(3rem, 9vw, 8rem)`
Motion	`0ms linear`
Density	`×0.9`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Brutalism (brutalism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Serif+Thai:wght@400;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #FFFFFF;
  --foreground: #000000;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --primary: #0000EE;
  --primary-foreground: #FFFFFF;
  --secondary: #E9E9ED;
  --secondary-foreground: #000000;
  --muted: #F0F0F0;
  --muted-foreground: #4D4D4D;
  --accent: #F0F0F0;
  --accent-foreground: #000000;
  --destructive: #D10000;
  --border: #000000;
  --input: #000000;
  --ring: #0000EE;
  --chart-1: #0000EE;
  --chart-2: #000000;
  --chart-3: #FF0000;
  --chart-4: #551A8B;
  --chart-5: #8C8C8C;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #000000;
  --sidebar-primary: #0000EE;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F0F0F0;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #000000;
  --sidebar-ring: #0000EE;
}

.dark {
  --background: #000000;
  --foreground: #FFFFFF;
  --card: #000000;
  --card-foreground: #FFFFFF;
  --popover: #000000;
  --popover-foreground: #FFFFFF;
  --primary: #7A9BFF;
  --primary-foreground: #000000;
  --secondary: #3A3A3A;
  --secondary-foreground: #FFFFFF;
  --muted: #1A1A1A;
  --muted-foreground: #B3B3B3;
  --accent: #1A1A1A;
  --accent-foreground: #FFFFFF;
  --destructive: #FF5A5A;
  --border: #FFFFFF;
  --input: #FFFFFF;
  --ring: #7A9BFF;
  --chart-1: #7A9BFF;
  --chart-2: #FFFFFF;
  --chart-3: #FF4D4D;
  --chart-4: #C08CFF;
  --chart-5: #8C8C8C;
  --sidebar: #000000;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #7A9BFF;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #1A1A1A;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #FFFFFF;
  --sidebar-ring: #7A9BFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Brutalism (brutalism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Serif+Thai:wght@400;700&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F0F0F0;
  --color-text: #000000;
  --color-text-muted: #4D4D4D;
  --color-primary: #0000EE;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E9E9ED;
  --color-on-secondary: #000000;
  --color-accent: #FF0000;
  --color-border: #000000;
  --color-success: #007A00;
  --color-warning: #A65F00;
  --color-danger: #D10000;
  --color-chart-1: #0000EE;
  --color-chart-2: #000000;
  --color-chart-3: #FF0000;
  --color-chart-4: #551A8B;
  --color-chart-5: #8C8C8C;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Arimo", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Tinos", "Noto Serif Thai", system-ui, sans-serif;
  --font-mono: "Cousine", ui-monospace, "SFMono-Regular", Menlo, "Noto Serif Thai", monospace;
}

.dark {
  --color-bg: #000000;
  --color-surface: #000000;
  --color-surface-2: #1A1A1A;
  --color-text: #FFFFFF;
  --color-text-muted: #B3B3B3;
  --color-primary: #7A9BFF;
  --color-on-primary: #000000;
  --color-secondary: #3A3A3A;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FF4D4D;
  --color-border: #FFFFFF;
  --color-success: #4CD964;
  --color-warning: #FFB020;
  --color-danger: #FF5A5A;
  --color-chart-1: #7A9BFF;
  --color-chart-2: #FFFFFF;
  --color-chart-3: #FF4D4D;
  --color-chart-4: #C08CFF;
  --color-chart-5: #8C8C8C;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Brutalism (brutalism). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Serif+Thai:wght@400;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.9412,
            0.9412
          ],
          "hex": "#f0f0f0"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.302,
            0.302
          ],
          "hex": "#4d4d4d"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0.9333
          ],
          "hex": "#0000ee"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9137,
            0.9294
          ],
          "hex": "#e9e9ed"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0,
            0
          ],
          "hex": "#ff0000"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4784,
            0
          ],
          "hex": "#007a00"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.3725,
            0
          ],
          "hex": "#a65f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8196,
            0,
            0
          ],
          "hex": "#d10000"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0.9333
          ],
          "hex": "#0000ee"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0,
            0
          ],
          "hex": "#ff0000"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.102,
            0.5451
          ],
          "hex": "#551a8b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.549,
            0.549
          ],
          "hex": "#8c8c8c"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.102,
            0.102
          ],
          "hex": "#1a1a1a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.702,
            0.702
          ],
          "hex": "#b3b3b3"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.6078,
            1
          ],
          "hex": "#7a9bff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "hex": "#000000"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.2275,
            0.2275
          ],
          "hex": "#3a3a3a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.302
          ],
          "hex": "#ff4d4d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.851,
            0.3922
          ],
          "hex": "#4cd964"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0.1255
          ],
          "hex": "#ffb020"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3529
          ],
          "hex": "#ff5a5a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.6078,
            1
          ],
          "hex": "#7a9bff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.302
          ],
          "hex": "#ff4d4d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.549,
            1
          ],
          "hex": "#c08cff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.549,
            0.549
          ],
          "hex": "#8c8c8c"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Arimo",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Tinos",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Cousine",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Serif Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 0,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      1,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.9
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!