Design System

Impressionism

Light, color, and the fleeting beauty of the moment

Dappled light.
Soft atmosphere.
Luminous color.

01

Color Palette

Colors drawn from Monet's gardens, Renoir's skin tones, and Degas' stage lights -- luminous, atmospheric, and suffused with natural light.

Primary Palette

Lavender #9B8EC4
Soft Blue #7BA7C9
Rose #D4899A
Golden #D4B060

Atmospheric Tones

Sage #8AAB7E
Canvas #FAF7F2
Parchment #E8E0D4
Cool Air #F0F3F7

Luminous Washes

Diluted pigments that capture the quality of light filtering through atmosphere

02

Typography

Cormorant Garamond for luminous display text, Lora for warm and readable body -- elegant serifs that echo the grace of the Impressionist era.

Display / H1

clamp(3rem, 8vw, 4.5rem) / Light Italic

Jardin de Giverny

Heading 2

2.4rem / Medium

Morning Light

Heading 3

1.5rem / SemiBold

Water Lilies at Dusk

Heading 4

1.25rem / SemiBold

Reflected Clouds

Heading 5

1.1rem / Medium Italic

Shimmering Surface

Heading 6

0.95rem / SemiBold Uppercase

Plein Air Studies

Body

1rem / Regular / Lora

The Impressionists painted outdoors, capturing the transient effects of sunlight on water, foliage, and sky. Their broken brushwork and luminous colors forever changed how we see the world around us.

Body Italic

1rem / Italic / Lora

Captions and emphasis use italics to add a personal, atmospheric touch -- like handwritten notes in a painter's journal.

Small

0.875rem / Regular

Secondary information and metadata appear in a lighter, smaller treatment that recedes gently.
"Color is my day-long obsession, joy, and torment."
-- Claude Monet

03

Spacing System

Generous breathing room creates an open, airy composition -- like the expansive skies in an Impressionist landscape.

--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
--space-10
128px

04

Buttons

Softly luminous buttons with gentle gradients and light-catching hover effects, like pigment mixed on a palette.

Primary

Secondary

Ghost

Accent

Color Variants

Hover over buttons to see the gentle lift and shimmer -- like light shifting across a painted surface.

05

Forms

Input fields with soft borders and atmospheric focus states that invite gentle interaction.

Checkboxes & Radios

06

Cards

Content containers with luminous atmospheric washes that shift on hover, evoking the changing quality of light throughout the day.

Standard Cards

I

Plein Air

Painting outdoors to capture the authentic quality of natural light and fleeting atmospheric conditions.

II

Broken Color

Placing distinct strokes of unmixed color side by side, allowing the eye to blend them optically at a distance.

III

Fleeting Moments

Capturing transient effects of light and movement rather than permanent, static compositions.

Themed Variants

~

Garden Scene

Inspired by Monet's Giverny -- verdant greens filtered through golden sunlight.

*

Sunset Glow

Warm roses and golds reminiscent of Renoir's luminous portraits and sun-drenched scenes.

o

Water Lilies

Cool blues and lavenders reflecting the tranquil surfaces of Monet's famous pond.

Feature Cards

+

Capturing Light

The Impressionist obsession with light drives every design decision -- from color temperature to shadow softness. Each element should feel touched by natural illumination.

&

Atmospheric Depth

Layered washes and soft gradients create a sense of depth and atmosphere, as though the interface exists within a luminous, three-dimensional space.

07

Data Table

Tables maintain clarity while breathing with the soft, atmospheric quality of the Impressionist palette.

Artist Known For Period Style Notable Works
Claude Monet Water Lilies, Haystacks 1860-1926 Landscape 250+
Pierre-Auguste Renoir Portraits, Figures 1862-1919 Figurative 6000+
Edgar Degas Dancers, Movement 1860-1917 Realist-Imp. 1500+
Camille Pissarro Rural Scenes 1855-1903 Landscape 1500+
Berthe Morisot Domestic Scenes 1864-1895 Intimate 400+

08

Badges & Tags

Small luminous markers that communicate status with the gentle quality of light on a painted surface.

Wash Badges

Lavender Rose Soft Blue Golden Sage

Solid Badges

Active Featured Complete New

Badges use the palette's wash variants to create a soft, non-intrusive visual language.

09

Alerts

Notification panels with atmospheric color washes and soft borders, delivering information without disrupting the composition's harmony.

Morning Light

The exhibition opens at dawn to capture the ideal viewing conditions. Natural light from the north-facing windows provides the most faithful color rendering.

Plein Air Complete

Your outdoor painting session has been recorded. The changing light conditions from 2pm to 4pm produced the most luminous results.

Shifting Light

Atmospheric conditions are changing rapidly. Consider completing your current color study before the cloud cover alters the shadow temperatures.

Palette Exhausted

The cadmium yellow and rose madder pigments require replenishment. Without these warm tones, the luminous quality of your composition may be compromised.

10

Design Principles

The philosophy of Impressionism applied to interface design -- capturing the essence of light, atmosphere, and fleeting beauty.

Light Above All

Every design decision serves the quality of light. Colors should feel illuminated from within, shadows should carry color, and surfaces should glow with diffused radiance.

Atmosphere Over Detail

Favor soft focus and atmospheric depth over crisp precision. Let edges breathe and blend, creating a sense of space between elements rather than rigid boundaries.

Broken Color

Use adjacent colors and layered washes rather than flat fills. Multiple subtle hues placed together create more visual richness than any single solid color.

The Fleeting Moment

Design for movement and change. Hover states, transitions, and subtle animations should feel like light shifting across a surface -- natural and ephemeral.

Generous Space

White space is not emptiness but luminous air. Let compositions breathe with the openness of an outdoor scene, giving each element room to be perceived fully.

Harmonic Palette

Colors should feel as though they were mixed from the same set of pigments, creating natural harmony. Even contrasts should feel gentle -- warm against cool, not harsh against soft.

"No one is an artist unless he carries his picture in his head before painting it, and is sure of his method and composition."
-- Claude Monet

11

Decorative Elements

Finishing details that evoke brushstrokes, dappled light, and the luminous atmosphere of an Impressionist painting.

Paint Strokes

Horizontal dividers that simulate brushstrokes of broken color across the canvas.

Light Dots

Small luminous points that evoke dappled sunlight filtering through leaves.

Atmospheric Washes

Gradient backgrounds that simulate the soft atmospheric haze of a plein air scene.