Design for AI

Classic brutalism: UI design prompt

Palette, type rules and a pasteable prompt for classic brutalism. Also called raw web, brutalist websites, anti-design, default-HTML aesthetic, web 1.0 brutalism. 2014-2018 peak (brutalistwebsites.com era).

Traits

  • looks unstyled on purpose: system fonts, default blue links, visible structure
  • black text on white or a single harsh colour; no shading, no images unless raw
  • tables, lists, underlined links, monospace, default form controls
  • dense, left-aligned, no max-width niceties, sometimes overlapping elements
  • honest about being a document; scrollbars and borders exposed
  • occasionally huge type or a single garish colour as the only decoration
  • no motion, or crude motion (blink, marquee)

Palette

#ffffff page, #000000 text, #0000ee link, #551a8b visited, #ff0000 one screaming accent, #c0c0c0 dividers

Type

Times New Roman / Georgia (serif) or Courier New / Courier Prime (mono) or Arial; sizes near browser defaults (16px body), headings bold at 24-32px; no custom webfonts

Do

  • keep default browser styling for links, buttons and form controls
  • use HTML structure as the design: headings, hr, tables, ordered lists
  • pick one loud colour and use it for one thing only

Don't

  • do not add rounded corners, shadows or gradients
  • do not centre everything and add hero sections; that is a template, not brutalism
  • do not use icon sets; plain text labels or ASCII

Known for it: Craigslist, Hacker News, Berkshire Hathaway, Drudge Report

CSS seed
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #0000ee;
   --alert: #ff0000;
   --radius: 0;
   --border: 1px solid #000;
   --font: 'Times New Roman',serif
}
Prompt

Build the site in classic web brutalism. Page background #ffffff, text #000000, links #0000ee underlined, visited #551a8b. Fonts: Times New Roman for body at 16px and Courier New for code and labels; headings bold, no letter-spacing tricks, sizes 32/24/18px. No border-radius, no box-shadow, no gradients, no webfonts, no icons. Layout is a plain document: h1, paragraphs, hr dividers, ul/ol lists, and a real table for any data. Content sits left-aligned at max-width 720px with 16px padding; nav is a row of underlined text links separated by pipes. Buttons and inputs keep default browser appearance with a 1px solid #000 border. One accent #ff0000 used only for the single most important call to action. No animation at all. Every element should look like it was written in 1996 and never redesigned.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in classic web brutalism. Page background #ffffff, text #000000, links #0000ee underlined, visited #551a8b. Fonts: Times New Roman for body at 16px and Courier New for code and labels; headings bold, no letter-spacing tricks, sizes 32/24/18px. No border-radius, no box-shadow, no gradients, no webfonts, no icons. Layout is a plain document: h1, paragraphs, hr dividers, ul/ol lists, and a real table for any data. Content sits left-aligned at max-width 720px with 16px padding; nav is a row of underlined text links separated by pipes. Buttons and inputs keep default browser appearance with a 1px solid #000 border. One accent #ff0000 used only for the single most important call to action. No animation at all. Every element should look like it was written in 1996 and never redesigned.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#0000ee; --alert:#ff0000; --radius:0; --border:1px solid #000; --font:'Times New Roman',serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.