Brutalist Web

STYLEKIT_STYLE_REFERENCE
style_name: Brutalist Web
style_slug: brutalist-web
style_source: /styles/brutalist-web

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Brutalist Web style frontend development expert. All generated code must recreate the raw, unstyled feel of 1990s early internet HTML pages.

## Absolutely Forbidden

- Rounded corners of any kind (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full)
- Box shadows or text shadows of any kind
- Gradients of any kind (backgrounds must be flat white)
- CSS animations, transitions, or transforms -- use transition-none everywhere
- Hover effects beyond underline or color changes
- Custom web fonts or icon fonts (system fonts only)
- Background colors other than white or #dfdfdf (system silver)
- Thick borders (max 2px for bevel effect, else 1px)
- Large padding or spacing that feels "designed"
- Card-style layouts with decorative embellishment
- focus:ring-* (use focus:outline-dotted instead)

## Must Follow

- Backgrounds: Pure white (#ffffff) everywhere, #dfdfdf for system UI elements
- Text: Black (#000000) only, no gray shades
- Links: Blue (#0000ff) underlined, visited links purple (#551a8b), hover red (#ff0000)
- Borders: 1px solid black for content; 2px bevel (border-t-white border-l-white border-r-[#808080] border-b-[#808080]) for buttons
- Border-radius: ALWAYS 0, never round anything
- Headings: Times New Roman or Georgia (font-serif), bold
- Body text: System monospace or sans-serif font stack
- Layout: Linear, document-flow, single-column preferred
- Spacing: Minimal - tight margins, small padding (px-2 py-1, px-4 py-2)
- Hierarchy: Rely on HTML heading levels (h1-h6) not visual tricks
- Interactive elements: Windows 95-style bevel buttons

## Animation & Interaction Rules

- Zero Transition: ALL state changes must be instant. Always add transition-none to every interactive element. Hover, active, focus state switches happen at 0ms -- this IS the brutalist physics.
- Native Button Bevel: Buttons use the Windows 95 raised border illusion: border-2 border-t-white border-l-white border-r-[#808080] border-b-[#808080]. On :active, reverse the bevel: active:border-t-[#808080] active:border-l-[#808080] active:border-r-white active:border-b-white. No shadow, no scale, no translate -- pure border reversal.
- Raw Focus: Never use focus:ring. Use focus:outline-dotted focus:outline-1 focus:outline-black focus:outline-offset-1. For inputs, add focus:bg-[#ffffcc] to simulate the 90s yellow text selection highlight.
- Link Hover: Only color change (blue to red) and existing underline. No other effects.

## Color Palette

- Pure Black: #000000 (all text, borders)
- Pure White: #ffffff (all backgrounds)
- System Silver: #dfdfdf (button backgrounds)
- System Gray: #808080 (border shadow side)
- Link Blue: #0000ff (hyperlinks)
- Visited Purple: #551a8b (visited links)
- Red: #ff0000 (hover state, errors)
- Green: #008000 (success, secondary accent)
- Yellow: #ffffcc (focus highlight)

## Visual References

Think of: early Craigslist, academic personal homepages, W3C specification pages, plain HTML with minimal CSS. The page should look like it was made in Notepad and uploaded via FTP.

---

# Brutalist Web Design System

> A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form.

## Design Philosophy

Brutalist Web embraces the raw aesthetics of the early 1990s internet. Content is king; decoration is irrelevant.

Core principles:
- Content over decoration - every element serves an informational purpose
- System fonts and monospace stacks - no custom web fonts needed
- Unstyled HTML feel - as if CSS barely exists
- Intentional lo-fi appearance - the roughness is the design
- Blue underlined links, purple visited links - classic browser defaults
- Times New Roman or Georgia for headings, system sans-serif or monospace for body
- Pure white backgrounds with black text - maximum readability
- Thin 1px borders only - no thick borders, no decorative frames
- Minimal or zero padding - content touches edges
- No visual hierarchy tricks - the document structure IS the hierarchy

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-black
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: shadow-none
```

### Interaction
```
Hover translate: 
Hover scale: (none)
Hover opacity: (none)
Transition: 

```

### Typefaces
```
Heading: font-serif font-bold
Body: font-mono text-sm
Mono: font-mono
```

### Type scale
```
Hero: text-3xl md:text-5xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-6 md:py-8
Container: px-4
Card: p-4
Gap sm: gap-2
Gap md: gap-3
Gap lg: gap-4
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-white
Background accent: bg-white
Text primary: text-black
Text secondary: text-black
Text muted: text-black
Button primary: bg-white text-black
Button secondary: bg-white text-black
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-sm`
- `rounded`
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-sm`
- `shadow`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `backdrop-blur`
- `backdrop-blur-sm`
- `backdrop-blur-md`
- `backdrop-blur-lg`
- `transition`
- `transition-all`

### Banned patterns
- matches `^rounded-(?!none)`
- matches `^shadow-(?!none)`
- matches `^bg-gradient-`
- matches `^backdrop-blur`
- matches `^animate-`
- matches `^transition-`
- matches `^duration-`

### Why they are banned
- `rounded-lg`: Brutalist Web uses zero border-radius. Everything is sharp and unstyled.
- `shadow-lg`: Brutalist Web uses no shadows at all. Raw HTML has no shadows.
- `bg-gradient-to-r`: Brutalist Web uses flat white backgrounds only. No gradients.
- `backdrop-blur`: Brutalist Web rejects all modern visual effects. Plain and raw.
- `transition-all`: Brutalist Web uses no CSS transitions or animations. Static pages only.
- `animate-pulse`: Brutalist Web forbids all animations. The page is static like 90s HTML.

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-none
border
border-black
font-mono
bg-white
```

### Every card must include
```
rounded-none
border
border-black
bg-white
```

### Every input must include
```
rounded-none
border
border-black
font-mono
bg-white
```

---

## [COMPARE] Brutalist Web wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-none border border-black font-mono bg-white bg-white text-black">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-none border border-black bg-white p-4">
 <h3 class="font-serif font-bold text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-none border border-black font-mono bg-white" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Brutalist Web page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-black border border-black px-4">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-3">
 <a href="/" class="font-serif font-bold text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-3 font-mono text-sm text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-white text-black py-6 md:py-8 px-4">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif font-bold text-3xl md:text-5xl">
 {HEADLINE}
 </h1>
 <p class="font-mono text-sm text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none border border-black font-mono bg-white bg-white text-black">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-white text-black py-6 md:py-8 px-4">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif font-bold text-xl md:text-2xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
 <!-- Card template - repeat for each card -->
 <div class="rounded-none border border-black bg-white p-4">
 <h3 class="font-serif font-bold text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-mono text-sm text-sm md:text-base text-black">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-none border border-black font-mono bg-white" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-black py-6 md:py-8 px-4">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div>
 <span class="font-serif font-bold text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-mono text-sm text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif font-bold text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-mono text-sm text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Brutalist Web post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-none border border-black font-mono bg-white`
- [ ] Card includes: `rounded-none border border-black bg-white`
- [ ] Input includes: `rounded-none border border-black font-mono bg-white`

### Forbidden check
- [ ] Not using `rounded-sm`
- [ ] Not using `rounded`
- [ ] Not using `rounded-md`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`

### Style rule check
- [ ] Use pure white (#ffffff) backgrounds for all sections
- [ ] Use system font stacks: font-mono or system-ui, sans-serif for body text
- [ ] Use Times New Roman or Georgia (font-serif) for headings
- [ ] Use blue (#0000ff) underlined links as the primary interactive element
- [ ] Use thin 1px solid borders for structural separation

### Style drift check
- [ ] Does not violate: Don't use rounded corners of any kind
- [ ] Does not violate: Don't use box shadows or text shadows
- [ ] Does not violate: Don't use gradients or background images
- [ ] Does not violate: Don't use CSS animations or transitions of any kind (transition-none is the rule)
- [ ] Does not violate: Don't use hover effects beyond underline or color changes

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Brutalist Web

---

## [EXAMPLES] Example prompts

### 1. 90

、

```
Use Brutalist Web style to create a personal homepage:
1. White background, no decoration
2. Large serif heading with the person's name
3. Horizontal rule separator
4. Monospace body text with a brief bio
5. Blue underlined links section: "My Projects", "My Blog", "Contact"
6. Simple 1px border table listing recent updates with dates
7. Footer with "Last updated" date and webmaster email link
8. No shadows, no rounded corners, no gradients, no animations
9. Buttons: Windows 95 bevel border style, transition-none
10. Inputs: inset bevel border, focus:bg-[#ffffcc] yellow highlight
```

### 2. 

```
Use Brutalist Web style to create a minimalist blog:
1. Site title in large serif font at the top
2. Navigation as plain blue underlined links below title
3. Blog posts listed with serif titles, monospace dates, plain text excerpts
4. "Read more" as a simple blue underlined link
5. 1px black border separating posts
6. Sidebar (if any) is just a list of links
7. Footer: plain text copyright and a link to RSS feed
8. Maximum readability, zero decoration
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use rounded corners of any kind
- use box shadows or text shadows
- use gradients or background images
- use CSS animations or transitions of any kind (transition-none is the rule)
- use hover effects beyond underline or color changes
- use custom web fonts or icon fonts
- use background colors other than white
- use large padding or excessive whitespace

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] don't use rounded corners of any kind
- [ ] don't use box shadows or text shadows
- [ ] don't use gradients or background images
- [ ] don't use CSS animations or transitions of any kind (transition-none is the rule)
- [ ] don't use hover effects beyond underline or color changes