Anti-Design

# Visual style: Anti-Design

An experimental brutalist style that deliberately breaks traditional UI conventions, with ultra-thick borders, high-saturation colors, and irregular typography.

## Philosophy
Anti-Design deliberately breaks every UI convention. Where traditional design seeks harmony, Anti-Design seeks visual conflict.

Core principles:
- Ultra-thick black borders (4-8px) on every element
- Sharp corners only (border-radius: 0) - nothing is ever rounded
- High-saturation primary colors: red, blue, yellow, magenta, cyan, green
- Rotated text and elements at odd angles (-3deg to 5deg)
- Dramatically mixed font sizes within the same section
- Asymmetric, uneven borders (thicker on right/bottom)
- Intentional visual conflict between adjacent elements
- Hard offset shadows only - no soft shadows ever

## Do
- Use ultra-thick black borders (4-8px) on everything
- Use sharp corners only (border-radius: 0)
- Apply high-saturation primary colors (red, blue, yellow, magenta)
- Rotate text and elements at odd angles (-3deg to 5deg)
- Mix font sizes dramatically within the same section
- Use asymmetric, uneven borders (thicker on right/bottom)
- Create intentional visual conflict between adjacent elements
- Use hard offset shadows only (e.g., shadow-[8px_8px_0_#000])
- Use font-black weight and uppercase for emphasis
- Use aggressive hover states with abrupt color flips and border jumps
- Break alignment on interaction using translate/rotate/size shifts
- Prefer transition-none or linear timing for raw feedback

## Don't
- Don't use rounded corners of any kind
- Don't use subtle or muted colors
- Don't use consistent spacing or alignment
- Don't use drop shadows or soft shadows
- Don't use gradients (flat colors only)
- Don't make things pretty or harmonious
- Don't use backdrop-blur or translucency
- Don't use smooth polished easing (ease-in-out, spring, bounce)

## Rules for the AI
You are an Anti-Design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rounded corners of any kind (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full)
- Subtle or muted colors (grays, pastels, earth tones)
- Soft shadows (shadow-sm, shadow-md, shadow-lg, shadow-xl)
- Gradients of any kind (all colors must be flat high-saturation)
- Backdrop blur or translucency effects
- Consistent spacing or alignment that looks "designed"
- Harmonious color combinations

## Must Follow

- Borders: Always 4-8px solid black. Thicker on right and bottom for depth
- Border-radius: ALWAYS 0. Never round anything
- Colors: Only high-saturation primaries - #FF0000, #0000FF, #FFFF00, #FF00FF, #00FF00, #00FFFF
- Backgrounds: Alternate between white, yellow, and other bright colors per section
- Shadows: Hard offset only (e.g., shadow-[8px_8px_0_#000]). No soft shadows
- Text: Mix sizes dramatically. Use font-black weight. Uppercase for emphasis
- Layout: Intentionally break grid alignment. Rotate elements (-3deg to 5deg)
- Fonts: Bold sans-serif. Mix sizes within sections for visual tension
- White space: Can be either very tight or exaggerated - never "just right"

## Animation & Interaction Rules

- Aggressive hover only: abrupt color collisions, border-thickness jumps, and harsh offsets
- Broken layout on interaction is encouraged: alignment can intentionally fail on hover/focus
- Zero polish: use transition-none or linear with near-zero duration; no smooth easing curves
- Focus states should be louder than default states (thicker borders, stronger shadows, rotation/shift)

## Color Palette

Primary:
- Pure Black: #000000 (borders, text, shadows)
- Pure White: #FFFFFF (backgrounds)
- Red: #FF0000 (primary accent, buttons)
- Blue: #0000FF (secondary accent, focus states)
- Yellow: #FFFF00 (section backgrounds, highlights)
- Magenta: #FF00FF (accent)
- Cyan: #00FFFF (accent)
- Green: #00FF00 (accent)

## Special Elements

- Ultra-thick borders on every element
- Hard offset shadows with no blur
- Rotated/tilted elements for visual disruption
- Dramatically mixed font sizes
- Asymmetric border widths
- Alternating high-saturation section backgrounds