Brutalist Web

# Visual style: Brutalist Web

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.

## 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

## Do
- 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
- Use no border-radius anywhere (border-radius: 0 or rounded-none)
- Keep layout linear and document-like - single column preferred
- Use minimal spacing - tight margins and padding
- Let HTML structure define visual hierarchy (h1 > h2 > h3 > p)
- Use plain black (#000000) text on white background
- Buttons use transition-none for zero-delay state switching
- Input focus uses focus:bg-[#ffffcc] yellow highlight, simulating 90s browser selection feel

## Don't
- 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
- Don't use custom web fonts or icon fonts
- Don't use background colors other than white
- Don't use large padding or excessive whitespace
- Don't use card-based layouts with visual embellishment
- Don't use focus:ring -- use focus:outline-dotted instead

## Rules for the AI
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.