Pointillism

A design system built from individual dots of pure color, where proximity creates luminance and distance reveals form

Inspired by Georges Seurat, Paul Signac & the Neo-Impressionist movement (1886–1910)

00 / Philosophy

Optical Harmony

Pointillism applies color theory with scientific precision. Tiny dots of pure pigment placed side by side allow the viewer's eye to optically blend them into luminous, vibrant hues that premixed paint could never achieve.

"Some say they see poetry in my paintings; I see only science. I apply the laws of the spectrum and the theory of colors." — Georges Seurat
I

Pure Color

Never mix on the palette. Place dots of pure hue side by side and let the eye perform the synthesis. Each UI element uses distinct, unmixed color tokens.

II

Optical Mixing

Adjacent colors interact. Complementary pairs intensify each other; analogous neighbors produce gentle transitions. Spacing and proportion control perceived brightness.

III

Luminance

Light is not added afterward but is inherent in the color placement. The white canvas showing between dots contributes its own radiance to the composition.

IV

Scientific Precision

Every dot is deliberate. Consistent size, even spacing, and methodical application. The system follows Chevreul's law of simultaneous contrast and Rood's color theory.

01 / Palette

Spectral Pigments

Six pure pigments drawn from the Neo-Impressionist palette. Each exists as a base, light variant, translucent wash, and deep accent.

Ultramarine #3b5998
Vermilion #c84b31
Cadmium Yellow #e8b84b
Viridian #4a8c6f
Cobalt Violet #8b5fa0
Cerulean #5ba4c9

Canvas Surfaces

02 / Optical Mixing

Chromatic Synthesis

When dots of two pure colors are placed in close proximity, the eye blends them into a third color richer than any premixed equivalent. This is the core principle of Pointillism.

Optical Green
Ultramarine + Cadmium Yellow
Optical Violet
Vermilion + Ultramarine
Optical Orange
Vermilion + Cadmium Yellow
03 / Typography

Letterforms

Cormorant for display and headings, evoking the refined elegance of the Parisian art world. Spectral for body text, with its sharp serifs providing excellent readability at small sizes.

Display
Cormorant Light / 3rem

A Sunday on La Grande Jatte

Heading 2
Cormorant Regular / 2rem

The Divisionist Technique

Heading 3
Cormorant Medium / 1.5rem

Simultaneous Contrast

Heading 4
Cormorant Medium / 1.2rem

Michel Eugène Chevreul's Color Wheels

Body
Spectral Regular / 1rem

Seurat spent over two years composing his masterpiece, meticulously applying thousands of small dots of pure color. The painting measures approximately 2 by 3 metres and depicts members of different social classes strolling along the banks of the Seine on the island of La Grande Jatte.

Body Italic
Spectral Italic / 1rem

Signac carried the technique forward after Seurat's early death, developing a bolder, more mosaic-like application of color that would influence the Fauves and early abstraction.

Caption
Spectral Light / 0.85rem

Oil on canvas, 1884–1886. Art Institute of Chicago. Exhibited at the eighth and final Impressionist exhibition.

Monospace
JetBrains Mono / 0.9rem

--ultramarine: #3b5998;

04 / Spacing

Measured Intervals

Like the precise spacing of dots on canvas, our spatial system uses a 4px base unit. Each step doubles the density of visual rhythm.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
24px
space-6
32px
space-7
48px
space-8
64px
space-9
96px
05 / Buttons

Interactive Elements

Each button carries a single pure pigment. On hover, a stippled light effect emerges, echoing the dot-by-dot application of paint.

Primary Variants

Secondary & Ghost

Sizes

Disabled State

06 / Forms

Input Controls

Form elements rest on a warm linen surface. Focus states illuminate with an ultramarine glow, like sunlight catching a painted surface.

Selection Controls

07 / Cards

Content Panels

Cards are like individual canvases within the composition. On hover, a subtle stippled border appears, connecting the element to the pointillist tradition.

A Sunday Afternoon

Seurat's masterwork depicts Parisians relaxing by the Seine, composed entirely of small dots of pure color applied with methodical precision over two years.

The Port of Saint-Tropez

Signac evolved the technique with larger, mosaic-like brushstrokes and an even more vibrant palette, capturing Mediterranean light with bold chromatic choices.

Chevreul's Law

The law of simultaneous contrast states that two adjacent colors will appear as dissimilar as possible, both in hue and value. This optical effect is the scientific foundation of Pointillism.

Chromoluminarism

Seurat's preferred term for his technique, emphasizing the luminous quality produced by the optical combination of pure spectral colors.

08 / Data

Tabular Information

Structured data presented with the clarity and precision of Seurat's compositional planning.

Artist Period Key Work Technique
Georges Seurat 1884–1891 A Sunday on La Grande Jatte Pointillism
Paul Signac 1886–1935 The Pine Tree at Saint-Tropez Divisionism
Henri-Edmond Cross 1891–1910 The Evening Air Neo-Impressionism
Camille Pissarro 1886–1890 Apple Picking at Eragny Pointillism (brief)
Théo van Rysselberghe 1889–1910 The Reading Pointillism
09 / Badges

Labels & Tags

Small marks of identity, like individual dots contributing to the whole.

Wash Variants

Ultramarine Vermilion Viridian Cadmium Cobalt Violet Cerulean

Solid

Neo-Impressionism Divisionism Chromoluminarism
10 / Alerts

Notifications

Communicative states expressed through the spectral palette, each carrying the emotional weight of its pigment.

Optical Effect

Stand back from the canvas to allow your eye to blend the individual dots into continuous tones. The optimal viewing distance is approximately three times the canvas width.

Color Harmony Achieved

The complementary pair of ultramarine and cadmium yellow produces a luminous vibration at their boundary, exactly as Chevreul's theory predicts.

Palette Caution

Avoid mixing colors on the palette. Physical mixing produces muddy results. Only optical mixing through juxtaposed dots preserves the luminance of each individual hue.

Technique Error

Irregular dot spacing breaks the optical illusion and creates visual noise. Maintain consistent dot size and spacing across the entire composition for uniform luminance.