StyleKitWatercolor Art
DocsStyles

Pigments bloom freely on warm paper

Watercolor

Art

Organic bleeding edges, pigment pooling, and the warmth of handmade paper — a visual language as natural as breathing.

Palette

Colors of water and light

Each hue drawn from the watercolorist's essential palette — transparent, luminous, alive with light.

Rose Wash#d4a0a0
Cerulean#7bb8d4
Sage Green#8cc5a8
Lavender#c3a0d4
Ochre Gold#e8c87a
Techniques

Painting Methods

Three fundamental approaches, each producing a distinct visual character rooted in the physics of water and pigment.

Technique

Wet-on-Wet

Fresh pigment bleeds freely into a pre-dampened surface. Colors merge at their own will, producing soft, unpredictable transitions that no brush can fully control.

The defining technique of dreamlike backgrounds and misty atmospheres. Water becomes the artist's co-creator.

Components

Elements

Every component carries the softness of paper and the warmth of hand-mixed pigment.

Pigment Bloom: shadow expands outward on hover, simulating pigment bleeding on damp paper. Soft Press: inset shadow on active. No scale transforms.

Botanical Language

Organic Decorations

Leaf and petal shapes built from pure CSS border-radius. Placed asymmetrically with gentle blur and transparent pigment colors.

Sage Leaves

Opposite border-radius corners create the organic leaf silhouette. Two rules applied diagonally produce the lance shape.

border-radius: 0 100% 0 100%

Cerulean Petals

Mirrored corner rules produce a petal that looks as if pressed in a botanical field journal, slightly imperfect by design.

border-radius: 100% 0 100% 0

Rose Blobs

Radial gradient blobs simulate the loose pooling of rose wash. No two placements feel identical — they breathe.

radial-gradient + blur
Guidelines

Design philosophy

Notes from the studio journal — principles distilled from years of painting with water and light.

Embrace

  • Ultra-soft shadows with rgba opacity 0.08–0.18
  • Organic corners: rounded-2xl for buttons, rounded-3xl for cards
  • Radial gradients to simulate watercolor wash and pooling
  • Warm paper background #faf6f0 as the base layer
  • Delicate borders at 15–25% opacity only
  • Serif fonts with generous tracking for an artisan feel

Avoid

  • Never use sharp edges (rounded-none or rounded-sm)
  • Never use hard offset drop shadows
  • Never use border-2 or thicker borders
  • Never use neon or highly saturated colors
  • Never use monospace fonts (font-mono)
  • Never use uppercase text transforms

“Watercolor rewards the artist who learns to trust the water. Control what you must; surrender the rest to the paper.”

— Studio principle
Watercolor Art

Part of StyleKit — a living collection of design systems

DocsAll StylesHome