Design System

Op Art

Optical illusions that vibrate, pulse, and warp. A 1960s movement that turned perception into art.

01

Color Palette

High-contrast combinations create visual tension. Black and white form the foundation, with carefully calibrated complementary pairs for maximum optical vibration.

Black #000000
White #FFFFFF
Red #FF0000
Cyan #00FFFF
Blue #0000FF
Orange #FF6600

Complementary Pairs

When placed adjacent, complementary colors create a vibrating edge effect that appears to shimmer.

Red
Cyan
Blue
Orange
Violet
Lime
02

Typography

Clean geometric sans-serifs that remain legible against intense pattern backgrounds. Typography serves as an anchor of stability amid optical chaos.

Display 96px / 700 / -2%
Aa
Heading 1 48px / 700 / -2%
Optical Illusion
Heading 2 40px / 700 / -1%
Visual Perception
Heading 3 24px / 600 / 0%
Pattern Recognition
Body 16px / 400 / 0%
Op Art exploits the fallibility of human vision, creating images that seem to move, vibrate, or warp before our eyes.
Small 14px / 500 / 0%
Secondary text for captions and supporting information.
Caption 12px / 600 / 10%
Labels and system text
03

Spacing

A rhythmic 8px base unit creates consistent visual intervals. Precise spacing prevents patterns from overwhelming content.

4px
1
8px
2
12px
3
16px
4
24px
5
32px
6
48px
7
64px
8
96px
9
04

Buttons

Interactive elements with subtle optical effects on hover. Movement creates engagement without overwhelming the interface.

Standard Buttons

Optical Effect Buttons

Sizes

05

Form Elements

Clean, high-contrast inputs that maintain legibility. Focus states use offset shadows to create depth without pattern interference.

Checkboxes

Radio Buttons

06

Cards

Content containers with optical pattern headers. Hover states activate subtle animations that bring patterns to life.

Concentric

Radiating circles create a hypnotic tunnel effect that appears to recede into infinity.

Diagonal

Angled parallel lines generate apparent motion and directional energy across the surface.

Waves

Curved repetitions produce an undulating visual rhythm that mimics water or sound waves.

Pattern Library

Core optical patterns used throughout the design system. Hover to activate motion effects.

Concentric
Spiral
Diamonds
Waves
07

Data Table

Structured information with high contrast for maximum legibility. Pattern indicators provide visual categorization.

Artist Pattern Era Status Works
Bridget Riley
1960s-Present Active 2000+
Victor Vasarely
1930s-1997 Historical 1500+
Jesús Rafael Soto
1950s-2005 Historical 800+
Carlos Cruz-Diez
1950s-2019 Historical 1200+
Richard Anuszkiewicz
1960s-2020 Historical 500+
08

Badges

Compact labels with optional pattern backgrounds. Used for status, categories, and visual tagging.

Standard

Default Filled Inverse

Pattern Badges

Striped Concentric Striped Filled

Contextual

1960s Op Art Kinetic Geometric Perceptual
09

Design Principles

The foundational concepts that define Op Art and guide the application of optical effects in design.

Perceptual Tension

Create visual instability through high-contrast juxtapositions. The eye struggles to focus, generating apparent movement and vibration at the edges of forms.

Mathematical Precision

Optical effects require exact calculations. The spacing, angle, and frequency of elements must be precisely calibrated to achieve the desired perceptual phenomenon.

Viewer as Participant

The artwork is incomplete without the viewer. Op Art activates in the act of looking - movement, depth, and color emerge from the interaction between eye and image.

Restraint in Complexity

Use optical effects purposefully. Too much visual stimulation overwhelms rather than engages. Balance pattern intensity with areas of visual rest.

Afterimage Effects

Prolonged viewing of high-contrast patterns produces complementary color afterimages. Design with awareness of how the eye adapts and what residual images remain.

Dynamic Stillness

The most powerful Op Art creates movement from static elements. Without animation or motion, carefully arranged forms appear to undulate, pulse, and breathe.