Op Art

STYLEKIT_STYLE_REFERENCE
style_name: Op Art
style_slug: op-art
style_source: /styles/op-art

# 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 Op Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rounded corners rounded-lg rounded-xl rounded-full
- Soft shadows shadow-sm shadow-md shadow-lg
- Gradients bg-gradient-to-*
- Serif fonts font-serif
- Semi-transparency and blur effects opacity-50 backdrop-blur
- Dense optical patterns over large areas (causes visual fatigue)

## Must Follow

- Pure black bg-black text-black border-black
- Pure white bg-white text-white
- Sharp geometry rounded-none
- Sans-serif fonts font-sans font-medium
- Wide letter spacing tracking-wider tracking-[0.3em]
- Uppercase typography uppercase
- Large areas of whitespace to balance visual intensity
- Optical patterns as localized decoration, not full coverage

## Color Palette

Black and white dominant (90% area):
- Pure black: #000000
- Pure white: #ffffff

Vibrating color pairs (10% accents):
- Red: #ff3300
- Blue: #0066ff
- Yellow: #ffcc00

## Decorative Elements

- Concentric circle patterns
- Checkerboards
- Stripe patterns
- Moire fringes
- Geometric lines

## Animation & Interaction Rules

- Illusion Generation: Cards use group class; inner concentric circle decorations group-hover:animate-[spin_4s_linear_infinite], static geometry becomes dynamic illusion. Do not rotate in non-hover state (avoid visual pollution).
- Harsh Strobe: On hover, invert black-and-white hover:bg-black hover:text-white transition-colors duration-150. Must be a hard cut, no smooth gradients.
- Warp & Distort: Headings on group-hover apply skew distortion group-hover:-skew-x-12 transition-transform duration-150, creating spatial illusion.
- Brutal Action: Active state instantly switches to warning red active:bg-[#ff3300] active:border-[#ff3300], no transition, simulating a blinding flash.

---

# Op Art Design System

> Op Art movement style that uses geometric patterns to create optical illusions and a sense of motion. Black-and-white contrast at its core, supplemented by vibrating color pairs.

## Design Philosophy

Op Art (Optical Art) emerged in the 1960s, championed by Bridget Riley and Victor Vasarely. It uses precisely calculated geometric patterns to create visual illusions of movement, vibration, and depth on a two-dimensional surface, challenging the viewer's perceptual system.

The core of Op Art lies in "visual tension": when black and white alternate at specific frequencies and angles, the human eye perceives the illusion of motion. Concentric circles, checkerboards, moire fringes, and gradient lines -- these seemingly simple elements, after meticulous calculation, can make a static image come alive.

In terms of color, Op Art is grounded in the extreme contrast of pure black and pure white. When color is needed, "vibrating color pairs" are chosen -- red and blue, yellow and purple -- complementary colors that, when juxtaposed, produce an oscillating effect on the retina, giving the viewer a sense of restless energy.

In interface design, Op Art must be used with restraint. Large areas of optical patterns can easily cause visual fatigue, so they typically appear as localized decorations or background textures, paired with generous whitespace and clear information hierarchy.

Typography pursues minimalism and geometric precision: sans-serif fonts, uniform weight, and strict grid alignment. Text should not compete with optical patterns for attention but instead serve as a "safe island" in a sea of patterns -- clear, stable, and readable.

---

## Token Dictionary (exact class mapping)

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

### Shadow
```
sm: shadow-none
md: shadow-[4px_4px_0_#000000]
lg: shadow-[6px_6px_0_#000000]
hover: hover:shadow-[4px_4px_0_#000000]
focus: focus:shadow-[4px_4px_0_#000000]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-100
Transition: transition-colors duration-200
Active: active:translate-x-[2px] active:translate-y-[2px]
```

### Typefaces
```
Heading: font-sans font-bold uppercase tracking-[0.3em]
Body: font-sans font-medium
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-white
Background secondary: bg-black
Background accent: bg-[#ff3300], bg-[#0066ff], bg-[#ffcc00]
Text primary: text-black
Text secondary: text-white
Text muted: text-black/50
Button primary: bg-black text-white
Button secondary: bg-white text-black border-2 border-black
```

---

## [FORBIDDEN]

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

### Banned classes
- `font-serif`
- `rounded-sm`
- `rounded`
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `shadow-sm`
- `shadow`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `bg-gradient-to-r`
- `bg-gradient-to-l`
- `bg-gradient-to-b`
- `bg-gradient-to-t`
- `backdrop-blur`
- `backdrop-blur-sm`
- `backdrop-blur-md`
- `backdrop-blur-lg`

### Banned patterns
- matches `^font-serif$`
- matches `^rounded-(?!none)`
- matches `^shadow-(?:sm|md|lg|xl|2xl)$`
- matches `^bg-gradient-`
- matches `^backdrop-blur`
- matches `^opacity-(?:[1-4]\d|50)$`

### Why they are banned
- `font-serif`: Op Art uses clean geometric sans-serif typography (font-sans)
- `rounded-lg`: Op Art demands sharp geometric edges for optical precision (rounded-none)
- `shadow-md`: Op Art is flat and graphic; soft shadows break the 2D illusion
- `bg-gradient-to-r`: Op Art uses hard-edge flat colors for maximum contrast
- `backdrop-blur`: Op Art avoids blur effects that soften the precise geometric patterns

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

---

## [REQUIRED]

### Every button must include
```
rounded-none
border-2 border-black
font-sans font-medium uppercase tracking-[0.3em]
transition-colors duration-200
```

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

### Every input must include
```
rounded-none
border-2 border-black
bg-white
text-black
font-sans font-medium uppercase tracking-wider
focus:border-[#ff3300]
focus:outline-none
```

---

## [COMPARE] Op Art 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-2 border-black font-sans font-medium uppercase tracking-[0.3em] transition-colors duration-200 bg-black 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-2 border-black bg-white p-8">
  <h3 class="font-sans font-bold uppercase tracking-[0.3em] 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-2 border-black bg-white text-black font-sans font-medium uppercase tracking-wider focus:border-[#ff3300] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

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

### Hero section
```html
<section class="bg-[#ff3300] text-black py-16 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-bold uppercase tracking-[0.3em] text-6xl md:text-8xl lg:text-9xl">
      {HEADLINE}
    </h1>
    <p class="font-sans font-medium text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-none border-2 border-black font-sans font-medium uppercase tracking-[0.3em] transition-colors duration-200 bg-black text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

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

### Form input
```html
<input class="rounded-none border-2 border-black bg-white text-black font-sans font-medium uppercase tracking-wider focus:border-[#ff3300] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

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

---

## [CHECKLIST] Op Art 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-2 border-black font-sans font-medium uppercase tracking-[0.3em] transition-colors duration-200`
- [ ] Card includes: `rounded-none border-2 border-black bg-white`
- [ ] Input includes: `rounded-none border-2 border-black bg-white text-black font-sans font-medium uppercase tracking-wider focus:border-[#ff3300] focus:outline-none`

### Forbidden check
- [ ] Not using `font-serif`
- [ ] 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 `shadow-sm`

### Style rule check
- [ ] Use pure black-and-white high contrast bg-black text-white bg-white text-black
- [ ] Use geometric pattern elements -- concentric circles, stripes, checkerboards as decoration
- [ ] Use vibrating color pairs as accents text-[#ff3300] bg-[#0066ff] text-[#ffcc00]
- [ ] Use minimal sans-serif fonts font-sans font-medium
- [ ] Use strict grid alignment grid grid-cols-* items-center justify-center

### Style drift check
- [ ] Does not violate: Do not use dense optical patterns over large areas causing visual fatigue
- [ ] Does not violate: Do not use soft gradients bg-gradient-to-r that weaken contrast
- [ ] Does not violate: Do not use soft shadows shadow-sm shadow-md that break the flat feel
- [ ] Does not violate: Do not use rounded corners rounded-lg rounded-xl rounded-full
- [ ] Does not violate: Do not use serif fonts font-serif

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

## Absolute Bans (Match and Refuse)

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

- use dense optical patterns over large areas causing visual fatigue
- use soft gradients bg-gradient-to-r that weaken contrast
- use soft shadows shadow-sm shadow-md that break the flat feel
- use rounded corners rounded-lg rounded-xl rounded-full
- use serif fonts font-serif
- use more than two accent colors; keep black-and-white as the dominant palette
- use semi-transparency or blur effects opacity-50 backdrop-blur
- use smooth gradient transitions on hover (must be hard black-white cuts, duration-100 or duration-150)

## 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
- [ ] do not use dense optical patterns over large areas causing visual fatigue
- [ ] do not use soft gradients bg-gradient-to-r that weaken contrast
- [ ] do not use soft shadows shadow-sm shadow-md that break the flat feel
- [ ] do not use rounded corners rounded-lg rounded-xl rounded-full
- [ ] do not use serif fonts font-serif