Design Aesthetic Reference
Geometric patterns creating visual movement and depth through contrast, repetition, and mathematical precision on flat, static surfaces.
Typographic System
Geometric sans-serifs engineered on the same grid as the patterns -- authoritative, precise, and supremely legible amid perceptual turbulence.
Display / Syne 800
Perception Is The Medium
Heading / Space Grotesk 700
Precision Over Expression
Subheading / Space Grotesk 500
Contrast Is Energy
Body / Inter 400
Op Art exploits the mechanics of human perception to produce illusions of movement, vibration, warping, and depth from entirely flat, static surfaces. The movement crystallized in the early 1960s.
Caption / Inter 400
Bridget Riley, Victor Vasarely, Richard Anuszkiewicz -- 1965 MoMA exhibition
Label / Space Grotesk 500
Optical Pattern Field
The geometric sans-serif faces echo Op Art's mathematical precision: clean hard edges, calculated spacing, and exact proportional relationships. Every letterform feels engineered on the same grid as the patterns themselves.
Chromatic System
Rooted in maximum perceptual contrast -- pure black and white foundation with complementary pairs for chromatic vibration effects.
Pure Black
#000000
Pure White
#FFFFFF
Near Black
#1A1A1A
Off White
#F0F0F0
Neutral Gray
#808080
Vibrant Red
#FF0000
Vibrant Green
#00FF00
Pure Blue
#0000FF
Vivid Orange
#FF8C00
Electric Violet
#8B00FF
Bright Yellow
#FFD700
Cyan Teal
#00CED1
Hot Pink
#FF1493
Neon Green
#39FF14
Charcoal
#333333
Components
Clean card components with optical pattern borders and solid interiors -- depth through contrast between patterned frames and content areas.
Repeating radial gradients create the classic tunneling effect -- circles within circles that appear to recede infinitely into depth.
Radial DepthComplementary colors of equal saturation placed in direct adjacency produce the most aggressive retinal stimulation -- boundaries shimmer and pulse.
Color ContrastOverlapping striped layers with slight angular differences produce shimmering secondary patterns perceived by the brain but absent from the actual artwork.
Pattern IllusionCompositions where foreground and background swap depending on the viewer's focal point, creating unstable spatial relationships that keep the eye in constant motion.
Perception SpatialRegular grids with controlled deformations -- bulges, pinches, waves -- that make flat surfaces appear to swell into three-dimensional forms.
3D Effect WarpSpacing, angle, and proportion are calculated rather than intuited. Many Op Art works can be described by formulas -- clean edges with no room for gestural looseness.
Geometry SystemCSS Techniques
Pure CSS optical illusions -- repeating gradients, conic patterns, and mathematical precision recreate the perceptual phenomena of classic Op Art.
Repeating radial gradient creates a tunneling depth illusion with alternating black and white rings.
Two striped layers at a slight angular offset produce a shimmering secondary pattern in pure CSS.
Red-green complementary stripes create boundary shimmer -- the classic Op Art retinal stimulation.
Conic-gradient checkerboard in a circular mask with radial fade creates a spherical bulge illusion.
A slowly rotating conic gradient with narrow stripe angles creates a hypnotic radiating pattern.
Blue-orange complementary diagonal stripes create directional chromatic vibration and kinetic energy.
The paintings are not Op Art. They are my art. The eye is the most important organ a painter has. What concerns me is the nature of my visual experience.Bridget Riley, 1965
The artwork exists in the viewer's nervous system, not just on the surface. Experience the power of perception as medium.