WatercolorDocsStyles

StyleKit Design System

Watercolor
Style

Organic, imprecise beauty. Digital elements rendered as if painted on wet paper — soft edges, color bleeding, texture over precision.

Organic BeautyColor BleedingPainted TextureSoft EdgesWet PaperTransparent Layers
Organic BeautyColor BleedingPainted TextureSoft EdgesWet PaperTransparent Layers

Palette Moods

Each mood blends accent washes to evoke a different time of day.

Dawn

dawn palette

Muted Blue#4a6fa5
Peach#e8a87c
Teal#85cdca
Mauve#c38d94
Warm Tan#d4a373
Paper White#faf8f5

Components

Every element painted with the same organic hand.

Button variants

Gallery Works

Compositions that live and breathe — each piece a painted moment.

Landscape

Morning Mist

Botanical

Peach Blossom

Abstract

Ocean Depths

Floral

Rose Garden

Landscape

Golden Hour

Seascape

Misty Shore

The Process

Four steps from blank paper to finished composition.

01

Paper First

Begin with warm off-white — #faf8f5. Every element lives on paper, not a screen.

02

Lay the Wash

Drop large blur-3xl blobs of semi-transparent color. Let them bleed into each other.

03

Build Softly

Components sit above the wash. Organic borders, no hard edges anywhere.

04

Serif Voice

Italic serif type anchors the painterly feeling. Never bold-sans headlines.

Typography

Serif italic headings anchor the painterly voice.

DisplaySoft Beauty
Heading 1Painted Light
Heading 2Gentle Wash
Heading 3Organic Flow
Body LargeTexture over precision, always.
BodyDigital elements rendered as if painted on wet paper.
CaptionSoft edges, color bleeding, imprecise beauty.

"Color bleeding is not a flaw —
it is the signature."

Watercolor Style design philosophy

Design Rules

The principles that keep every element feeling painted, not printed.

Do

Use semi-transparent fills

bg-[#4a6fa5]/20 feels painted, not flat.

Do

Embrace organic shapes

Irregular border-radius mimics brushwork.

Do

Layer wash blobs freely

Overlapping blur-3xl divs create painted depth.

Do

Apply paper texture background

Warm off-white #faf8f5 evokes watercolor paper.

Avoid

Avoid sharp, solid fills

Fully opaque blocks kill the painterly mood.

Avoid

Skip rigid uniform corners

rounded-md is too mechanical for this style.

Avoid

No harsh contrast jumps

Abrupt color transitions break the soft aesthetic.

Avoid

No hard drop shadows

Pixel-offset box-shadows read as printed, not wet.

Send a Note

Like a letter sealed with a wax stamp — unhurried, considered.

Watercolor Style

Part of the StyleKit design system

View documentationAll styles

StyleKit · Watercolor Style Showcase