Anti-Design

STYLEKIT_STYLE_REFERENCE
style_name: Anti-Design
style_slug: anti-design
style_source: /styles/anti-design

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

---

# Anti-Design Design System

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

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

---

## Token Dictionary (exact class mapping)

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

### Shadow
```
sm: shadow-[4px_4px_0_#000]
md: shadow-[8px_8px_0_#000]
lg: shadow-[12px_12px_0_#000]
hover: hover:shadow-[12px_12px_0_#000]
focus: focus:shadow-[4px_4px_0_#0000FF]
```

### Interaction
```
Hover translate: hover:-translate-x-1 hover:-translate-y-1
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-100
Active: active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0_#000]
```

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

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

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

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#FFFF00]
Background accent: bg-[#FF0000], bg-[#0000FF], bg-[#FF00FF], bg-[#00FF00]
Text primary: text-black
Text secondary: text-black/80
Text muted: text-gray-500
Button primary: bg-[#FF0000] text-white
Button secondary: bg-[#FFFF00] 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`

### Banned patterns
- matches `^rounded-(?!none)`
- matches `^shadow-(?!\[|none)`
- matches `^bg-gradient-`
- matches `^backdrop-blur`

### Why they are banned
- `rounded-lg`: Anti-Design uses only sharp edges (rounded-none). Never round anything.
- `shadow-lg`: Anti-Design uses hard offset shadows only (shadow-[Xpx_Xpx_0_#000]).
- `bg-gradient-to-r`: Anti-Design uses flat high-saturation colors, no gradients.
- `backdrop-blur`: Anti-Design rejects translucency. Use flat opaque colors.

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

---

## [REQUIRED]

### Every button must include
```
rounded-none
border-4
border-black
font-black
uppercase
shadow-[4px_4px_0_#000]
transition-all duration-100
```

### Every card must include
```
rounded-none
border-4
border-black
shadow-[8px_8px_0_#000]
bg-white
```

### Every input must include
```
rounded-none
border-4
border-black
font-bold
focus:outline-none
focus:border-[#0000FF]
focus:shadow-[4px_4px_0_#0000FF]
```

---

## [COMPARE] Anti-Design 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-4 border-black font-black uppercase shadow-[4px_4px_0_#000] transition-all duration-100 bg-[#FF0000] text-white">
 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-4 border-black shadow-[8px_8px_0_#000] bg-white p-6">
 <h3 class="font-black uppercase text-xl md:text-2xl">{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-4 border-black font-bold focus:outline-none focus:border-[#0000FF] focus:shadow-[4px_4px_0_#0000FF]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Anti-Design 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-4 border-black px-4 md:px-8 lg:px-12">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-black uppercase text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-bold text-sm text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#FF0000] text-black py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-black uppercase text-5xl md:text-7xl lg:text-9xl">
 {HEADLINE}
 </h1>
 <p class="font-bold text-sm text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none border-4 border-black font-black uppercase shadow-[4px_4px_0_#000] transition-all duration-100 bg-[#FF0000] text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

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

### Form input
```html
<input class="rounded-none border-4 border-black font-bold focus:outline-none focus:border-[#0000FF] focus:shadow-[4px_4px_0_#0000FF]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#FFFF00] text-black/80 py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
 <div>
 <span class="font-black uppercase text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-bold text-sm text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-black uppercase text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-bold text-sm text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Anti-Design 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-4 border-black font-black uppercase shadow-[4px_4px_0_#000] transition-all duration-100`
- [ ] Card includes: `rounded-none border-4 border-black shadow-[8px_8px_0_#000] bg-white`
- [ ] Input includes: `rounded-none border-4 border-black font-bold focus:outline-none focus:border-[#0000FF] focus:shadow-[4px_4px_0_#0000FF]`

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

### Style drift check
- [ ] Does not violate: Don't use rounded corners of any kind
- [ ] Does not violate: Don't use subtle or muted colors
- [ ] Does not violate: Don't use consistent spacing or alignment
- [ ] Does not violate: Don't use drop shadows or soft shadows
- [ ] Does not violate: Don't use gradients (flat colors only)

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

---

## [EXAMPLES] Example prompts

### 1. 

、

```
Use Anti-Design style to create a portfolio page:
1. Yellow hero section with giant rotated black uppercase title
2. White cards with border-4 border-black and hard offset shadows
3. Each card has a different primary color accent strip
4. Mix font sizes dramatically - some text huge, some tiny
5. Rotate some elements slightly for visual chaos
6. No rounded corners anywhere - everything sharp
7. Footer: black background with white text and thick border
```

### 2. 

UI

```
Use Anti-Design style to create a product page:
1. Hero: yellow background, massive tilted product name
2. Feature cards with different accent color tops (red, blue, magenta, green)
3. Rules section on blue #0000FF background with white text
4. Component showcase with buttons, inputs, all thick black borders
5. Color palette section showing flat color blocks
6. No subtle anything - maximum visual impact
```

## 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 subtle or muted colors
- use consistent spacing or alignment
- use drop shadows or soft shadows
- use gradients (flat colors only)
- make things pretty or harmonious
- use backdrop-blur or translucency
- use smooth polished easing (ease-in-out, spring, bounce)

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