Best For
watercolor / soft gradients / blurred edges
Watercolor Style
水彩画风
D
47/100Poor
A design style inspired by watercolor painting, featuring soft color gradients, blurred edge effects, paper texture backgrounds, and flowing color diffusion, conveying artistry and poetry.
watercolorsoft gradientsblurred edgeswatercolor backgroundpastel washflowing colorspaper textureartistic UIpoetic designwatercolor website
Primary Move
Use soft gradients bg-gradient-to-* to simulate watercolor permeation
Watch Out
Do NOT use hard borders border-4 border-black
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Watercolor Style
style_slug: watercolor-style
style_source: /styles/watercolor-style
# Hard Prompt
## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.
## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
You are a Watercolor Style design frontend development expert. All generated code must strictly follow these constraints:
## Absolute Prohibitions
- Using hard borders border-4 border-black
- Using hard-edge shadows shadow-[px_px_0_color]
- Using pure black backgrounds bg-black
- Using sharp corners rounded-none
- Using overly saturated colors
- Using bold sans-serif uppercase text
## Must Follow
- Paper-colored background bg-[#faf8f5]
- Soft gradients bg-gradient-to-br using semi-transparent colors
- Large border radii rounded-3xl or rounded-full
- Soft shadows shadow-lg with low-opacity color
- Serif italic fonts font-serif italic
- Semi-transparent color overlay effects
## Color Palette
Primary:
- Blue-gray: #4a6fa5 (text and main elements)
- Paper: #faf8f5 (background)
Watercolor colors (used semi-transparently):
- Peach: #e8a87c
- Teal: #85cdca
- Rose: #c38d94
- Sand: #d4a373
## Special Effects
Watercolor wash: Using multiple radial-gradient overlays
Color diffusion: Using blur-3xl large color blocks
Soft edges: rounded-3xl + low-opacity borders
Paper texture: Warm-toned background + subtle texture
## Self-Check
After generating code, verify:
1. No hard borders or sharp corners
2. Using soft gradients and semi-transparent colors
3. Background is warm paper color
4. Text uses serif italic
5. Overall feel is like a watercolor painting
## Animation & Interaction Rules
- Pigment Bloom: On hover, instead of rigid float (translate-y), let same-hue colored shadow spread outward significantly (e.g., `hover:shadow-[0_10px_40px_rgba(74,111,165,0.35)]`), simulating watercolor pigment blooming on wet paper.
- Damp Paper: On card hover, background slightly brightens or deepens (e.g., from-[#e8a87c]/20 deepens to /30), simulating paper texture change after absorbing water.
- Liquid Slowness: Watercolor flow is slow, mandatory `duration-500` with `ease-in-out`, prohibit `duration-150` or `ease-linear` fast easing.
- Soft Press: On click `active:scale-[0.98]` with deepened inner shadow, simulating gentle press on damp paper surface, avoiding violent spring bounce-back.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- use hard borders border-4 border-black
- use hard-edge shadows shadow-[px_px_0_color]
- use pure black backgrounds
- use sharp corners rounded-none
- use overly saturated or glaring colors
## Self-Check (Verify Before Shipping)
If any item fails, the style has drifted — fix before shipping.
- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do NOT use hard borders border-4 border-black
- [ ] do NOT use hard-edge shadows shadow-[px_px_0_color]
- [ ] do NOT use pure black backgrounds
- [ ] do NOT use sharp corners rounded-none
- [ ] do NOT use overly saturated or glaring colorsComponent Templates
Component Preview
按钮
水彩风格按钮，柔和渐变和模糊边缘
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Watercolor Style — Frequently Asked Questions
- What is the Watercolor Style design style?
- A design style inspired by watercolor painting, featuring soft color gradients, blurred edge effects, paper texture backgrounds, and flowing color diffusion, conveying artistry and poetry. Its core principle: Watercolor Style is a design style simulating watercolor painting effects, injecting artistic atmosphere and poetic feeling into interfaces through soft color gradients, blurred edges, and flowing color diffusion.
- What colors does Watercolor Style use?
- Watercolor Style uses #4a6fa5 as its primary color and #faf8f5 as its secondary color, with accent colors #e8a87c, #85cdca, #c38d94, #d4a373. Every hex value can be copied from the palette on this page.
- How do I apply Watercolor Style correctly?
- Key practices: Use soft gradients bg-gradient-to-* to simulate watercolor permeation. Use semi-transparent colors opacity or rgba to simulate watercolor transparency. Use large border radii rounded-3xl or rounded-full to soften edges.
- What are common mistakes with Watercolor Style?
- Avoid: Do NOT use hard borders border-4 border-black. Do NOT use hard-edge shadows shadow-[px_px_0_color]. Do NOT use pure black backgrounds.
- How do I prompt AI to generate Watercolor Style UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: watercolor, soft gradients, blurred edges, watercolor background.
Global Styles
Global CSS
css
/* Watercolor Style 全局样式 */
:root {
--wc-blue: #4a6fa5;
--wc-paper: #faf8f5;
--wc-peach: #e8a87c;
--wc-teal: #85cdca;
--wc-rose: #c38d94;
--wc-sand: #d4a373;
}
/* 水彩纸张背景 */
.wc-paper {
background-color: var(--wc-paper);
}
/* 水彩晕染效果 */
.wc-wash {
background: radial-gradient(ellipse at 30% 50%, rgba(232, 168, 124, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 70% 30%, rgba(133, 205, 202, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 50% 80%, rgba(195, 141, 148, 0.1) 0%, transparent 60%);
}
/* 水彩边缘模糊 */
.wc-soft-edge {
border-radius: 24px;
box-shadow: 0 8px 30px rgba(74, 111, 165, 0.1);
}
/* 水彩文字 */
.wc-text {
font-family: 'Georgia', 'Playfair Display', serif;
font-style: italic;
color: var(--wc-blue);
}
/* 水彩色块 */
.wc-swatch {
border-radius: 50%;
filter: blur(1px);
opacity: 0.7;
}
/* 水彩卡片 */
.wc-card {
background: linear-gradient(135deg, rgba(232, 168, 124, 0.15), white, rgba(133, 205, 202, 0.15));
border-radius: 24px;
border: 1px solid rgba(74, 111, 165, 0.1);
box-shadow: 0 8px 30px rgba(74, 111, 165, 0.1);
}
/* 水彩分割线 */
.wc-divider {
height: 2px;
background: linear-gradient(to right, transparent, var(--wc-blue), transparent);
opacity: 0.2;
}
@keyframes watercolor-style-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes watercolor-style-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.watercolor-style-card {
position: relative;
overflow: hidden;
}
.watercolor-style-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(74, 111, 165, 0.05), transparent);
pointer-events: none;
}
.watercolor-style-card:hover::before {
opacity: 1;
}
.watercolor-style-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(74, 111, 165, 0.08);
}
.watercolor-style-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.watercolor-style-animate-in {
animation: watercolor-style-fade-in 0.5s ease-out both;
}IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Watercolor Style is a design style simulating watercolor painting effects, injecting artistic atmosphere and poetic feeling into interfaces through soft color gradients, blurred edges, and flowing color diffusion.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
47
Overall Score
Grade: D - Poor
Contrast Ratios
Score: 34/100Average Ratio: 4.18:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#3a3a3a / #faf8f5 | 10.73:1 | ||
| Secondary text on background | /#4a6fa5 / #faf8f5 | 4.82:1 | ||
| Muted text on background | /#8a8a8a / #faf8f5 | 3.26:1 | ||
| Text on secondary background | /#3a3a3a / #f0ebe3 | 9.59:1 | ||
| Secondary text on secondary | /#4a6fa5 / #f0ebe3 | 4.31:1 | ||
| Button primary | /#ffffff / #4a6fa5 | 5.11:1 | ||
| Text on accent 1 | /#3a3a3a / #4a6fa5 | 2.23:1 | ||
| Alt text on accent 1 | /#4a6fa5 / #4a6fa5 | 1:1 | ||
| Text on accent 2 | /#3a3a3a / #b4788c | 3.25:1 | ||
| Alt text on accent 2 | /#4a6fa5 / #b4788c | 1.46:1 | ||
| Text on accent 3 | /#3a3a3a / #78a082 | 3.87:1 | ||
| Alt text on accent 3 | /#4a6fa5 / #78a082 | 1.74:1 | ||
| Text on accent 4 | /#3a3a3a / #c9a84c | 4.98:1 | ||
| Alt text on accent 4 | /#4a6fa5 / #c9a84c | 2.24:1 |
Readability
Score
77/100
Font Size
text-sm md:text-base
Font Weight
font-serif font-light tracking-wide
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.