Design System
01
A palette inspired by watercolor pigments - soft, muted, and naturally harmonious.
Diluted pigments for backgrounds and subtle effects
02
Cormorant Garamond for elegant display, Lora for comfortable reading - a harmonious serif pairing.
"Watercolor is like life - the splashes and mistakes become the most beautiful parts."- Anonymous Artist
03
Generous whitespace allows the design to breathe, like water spreading across paper.
04
Organic shapes with soft gradients create buttons that feel hand-crafted and inviting.
Hover over buttons to see the subtle lift and glow effect that mimics wet paint catching light.
05
Input fields with organic borders and soft shadows invite users to interact naturally.
06
Content containers with subtle watercolor washes that shift on hover, creating depth and interest.
Organic border radii create shapes that feel hand-drawn rather than machine-made.
Multiple gradient layers simulate the depth achieved through layering watercolor paint.
Asymmetric designs embrace the unpredictable, organic nature of watercolor techniques.
Every element embraces imperfection, celebrating the beauty found in natural variations and soft transitions.
Soft shadows and blurred edges create a dreamy quality that invites contemplation and calm interaction.
07
Tables maintain readability while incorporating soft styling that fits the painterly aesthetic.
| Pigment | Origin | Transparency | Lightfastness |
|---|---|---|---|
| Indigo | Plant-based | Semi-transparent | Excellent |
| Yellow Ochre | Earth mineral | Opaque | Excellent |
| Terre Verte | Earth mineral | Transparent | Excellent |
| Coral | Synthetic | Semi-opaque | Good |
| Lavender | Synthetic | Transparent | Moderate |
08
Small paint-blob shapes that communicate status with artistic flair.
Badges feature a subtle blur effect that gives them a painted, non-digital quality.
09
The philosophy behind the watercolor aesthetic - embracing imperfection and organic beauty.
Watercolor celebrates happy accidents. Design elements should feel organic and handmade, avoiding rigid perfection in favor of natural variation.
Like building up washes of paint, layer visual elements thoughtfully. Each layer adds depth without overwhelming the composition.
Avoid harsh edges. Let colors and shapes bleed into one another, creating gentle transitions that soothe the eye.
Colors should feel like they were mixed on a palette together. Avoid jarring contrasts; instead, create harmonious relationships between hues.
Let the background show through. White space is not empty - it is the paper that holds the paint, giving the design room to breathe.
Create a sense of lightness and air. Heavy elements should be balanced with delicate details and plenty of negative space.
"In watercolor, water is not just a medium - it is a collaborator, guiding the pigment in unexpected and beautiful ways."- Traditional Wisdom
10
Finishing touches that add artistic charm and visual interest.
Horizontal dividers that simulate brush strokes across the page.
Small circular accents that can mark list items or add visual rhythm.
Gradient backgrounds that simulate watercolor washes behind content.