OP ART
OPTICAL ILLUSION DESIGN SYSTEM — 1960s
StyleKit →All Styles

Bridget Riley · Victor Vasarely · 1960s

OP

ART

Precise geometry on 2D surfaces creates illusions of motion, vibration, and depth. Perception becomes the medium.

Components

ELEMENTS

Hover to flip black/white — transition-none (instant hard cut)

gap-0 joined group — border-l-0 for seamless fusion — Color Block Invasion on hover

Palette

COLOR SYSTEM

Color
Pure Black#000000
Color
Pure White#FFFFFF
Color
Vibrant Red#FF3300
Color
Electric Blue#0066FF
Color
Bright Yellow#FFCC00
Scale

TYPE SCALE

clamp(80px,12vw,160px)
OP ART
DISPLAY / HERO
clamp(48px,7vw,96px)
ILLUSION
SECTION HEAD
clamp(28px,4vw,48px)
GEOMETRIC
SUBHEADING
20px
Perception is the medium.
BODY LARGE
13px
BRIDGET RILEY — VICTOR VASARELY — 1965
CAPTION / LABEL
font-black — geometric mass

BOLD

font-thin — vanishing line

THIN

font-mono — machine precision

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG — 1234567890

Optical Patterns

ILLUSIONS

repeating-linear-gradient(45deg, #000 10px, #fff 20px)

Gallery

WORKS

Radial Burst

RADIATION PATTERN

Concentric

INFINITE DEPTH

Grid

CHECKERBOARD

Vibrating Color Pairs — Adjacent complements oscillate on the retina

Red + Blue

Yellow + Blue

Red + Yellow

Rules

MANIFESTO

DO

  • 01Pure black-white high contrast as the foundational palette
  • 02Geometric pattern elements as structural decorations — concentric circles, stripes, checkerboards
  • 03Vibrating color pairs as accents: red/blue/yellow on black-white fields
  • 04Inline SVG optical illusion patterns embedded directly in components
  • 05Sharp rounded-none for all containers — no soft edges
  • 06font-mono or font-black for stark geometric feel throughout
  • 07High-contrast hover: background flips black to white, white to black
  • 08repeating-linear-gradient CSS pattern backgrounds for texture

DON'T

  • 01No gradients except as part of deliberate optical illusion effects
  • 02No soft colors, pastels, or muted tones of any kind
  • 03No organic or curved shapes — only strict geometry
  • 04No decorative, display, or script fonts — geometry only
  • 05No drop shadows or box shadows with offset
  • 06No rounded corners — rounded-none everywhere, no exceptions

“The painting is complete when it has ideas and emotions that the viewer can appreciate.”

— Bridget Riley, 1965
Interaction

HOVER MATRIX

PERCEPTION
Hover
VIBRATION
Hover
ILLUSION
Hover
MOTION
Hover
GEOMETRY
Hover
OP ART

OPTICAL ART — BRIDGET RILEY — VICTOR VASARELY — 1960s

© 2026 STYLEKIT — GEOMETRIC PRECISION, PERCEPTUAL ILLUSION

StyleKit Home→All Styles→Op Art Docs→