Best For
油画 / 印象派 / 笔触
Impressionist Oil
Inspired by Impressionist masters like Monet and Renoir, featuring bold brushstroke textures, dappled light effects, pointillist colors, and warm canvas textures for a rich, oil-painting visual experience.
Best For
油画 / 印象派 / 笔触
Primary Move
Use warm canvas color bg-[#f5f0e1] as background
Watch Out
No flat solid color fills (must have texture and gradients)
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#e8a87c
Secondary
#f5f0e1
Accent 1
#c0392b
Accent 2
#2c3e50
AI Implementation
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.
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
How to use
STYLEKIT_STYLE_REFERENCE
style_name: Impressionist Oil
style_slug: impressionist-oil
style_source: /styles/impressionist-oil
# 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 an Impressionist Oil design style frontend development expert. All generated code must strictly follow these constraints:
## Absolutely Forbidden
- Flat solid fills without texture or gradient
- Sharp geometric edges (rounded-none, rounded-sm)
- Pixel-perfect offset shadows (shadow-[Npx_Npx_0px])
- Neon or fluorescent colors
- Monospace fonts (font-mono)
- Uppercase text (uppercase)
- Pure black backgrounds (bg-black)
## Must Follow
- Canvas cream background bg-[#f5f0e1]
- Warm orange #e8a87c as primary, use linear-gradient fills on buttons
- Serif fonts font-serif font-bold for all text
- Rounded corners rounded-lg
- Layered box-shadows: solid color base + blur shadow (e.g. 0 4px 0 #c0392b, 0 6px 16px rgba())
- Brushstroke texture via repeating-linear-gradient at angled degrees
- Dappled light via multiple radial-gradient overlays
## Color Palette
Primary:
- Warm Orange: #e8a87c
- Canvas Cream: #f5f0e1
- Vermillion Red: #c0392b
- Deep Blue: #2c3e50
- Turquoise Green: #1abc9c
- Golden Light: #f5d88a
## Unique Elements (Impressionist-Only)
1. Brushstroke texture: repeating-linear-gradient at 25-40deg angles with 0.02 opacity color stops
2. Dappled light: multiple radial-gradient(circle Npx at X% Y%, rgba(...,0.05-0.08)) scattered across surfaces
3. Impasto shadows: layered box-shadow with solid color base layer + blurred spread layer
## Animation & Interaction Rules
### Dancing Light (Button Hover)
- hover:brightness-110 hover:contrast-125 -- simulates sunlight illuminating pigment
- Combined with hover:-translate-y-0.5 for subtle lift
- NEVER use flat color hover (defeats the impressionist light-play concept)
### Impasto Depression (Active Press)
- active:translate-y-[3px] -- button sinks into the 4px solid vermillion shadow layer
- NEVER use active:scale-* alone (scaling doesn't simulate physical impasto depth)
- The translate must match or nearly match the solid shadow offset (currently 4px)
### Brushstroke Reveal (Card Underline)
- Card heading underline: w-16 h-[3px] bg-[#e8a87c] rounded-full
- On group-hover: group-hover:w-24 -- brushstroke extends like paint spreading
- Transition: duration-500 ease-out (slow, painterly rhythm)
- Always use group class on card container
### Slow Easing Standard
- Minimum duration: 300ms (impressionist rhythm is slow and flowing)
- Button transitions: duration-300 ease-out
- Underline reveals: duration-500 ease-out
- NEVER use duration < 300ms
### Focus Ring
- focus:ring-2 focus:ring-[#e8a87c] focus:ring-offset-2 focus:ring-offset-[#f5f0e1]
- ring-offset-[#f5f0e1] mandatory -- canvas cream background needs matching offsetComponent Templates
油画印象派颜料管按钮:hover:brightness-110 hover:contrast-125 模拟颜料在阳光下闪耀,active:translate-y-[3px] 与 4px 实色阴影配合产生陷入感,focus:ring-offset-[#f5f0e1] 画布色底
Frontend Readiness
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%
FallbackButton
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
/* Impressionist Oil Global Styles */
:root {
--imp-orange: #e8a87c;
--imp-canvas: #f5f0e1;
--imp-vermillion: #c0392b;
--imp-blue: #2c3e50;
--imp-turquoise: #1abc9c;
--imp-gold: #f5d88a;
}
/* Canvas weave texture overlay */
.imp-canvas::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(44,62,80,0.03) 3px, transparent 4px),
repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(44,62,80,0.02) 3px, transparent 4px);
opacity: 0.04;
pointer-events: none;
}
/* Dappled light overlay - scattered radial gradient spots */
.imp-dapple::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle 80px at 20% 15%, rgba(245,216,138,0.08) 0%, transparent 100%),
radial-gradient(circle 100px at 45% 10%, rgba(232,168,124,0.06) 0%, transparent 100%),
radial-gradient(circle 70px at 75% 20%, rgba(245,216,138,0.07) 0%, transparent 100%),
radial-gradient(circle 90px at 90% 60%, rgba(232,168,124,0.05) 0%, transparent 100%);
pointer-events: none;
}
/* Brushstroke texture as repeating-linear-gradient */
.imp-brushstroke {
background-image: repeating-linear-gradient(
25deg,
transparent,
transparent 15px,
rgba(232,168,124,0.02) 15px,
transparent 16px
);
}
/* Brushstroke underline decoration */
.imp-stroke {
position: relative;
display: inline-block;
}
.imp-stroke::after {
content: "";
position: absolute;
bottom: -4px;
left: -5%;
width: 110%;
height: 6px;
background: var(--imp-orange);
opacity: 0.5;
border-radius: 50%;
transform: rotate(-1deg);
}
/* Pointillism dot background */
.imp-dots {
background-image:
radial-gradient(circle, var(--imp-orange) 0.8px, transparent 0.8px),
radial-gradient(circle, var(--imp-vermillion) 0.6px, transparent 0.6px);
background-size: 12px 12px, 8px 8px;
background-position: 0 0, 4px 4px;
opacity: 0.06;
}IDE Integration
Download configuration files for AI coding assistants to generate code in this style.
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
The Impressionist Oil style draws from the essence of 19th-century French Impressionist painting, emphasizing the interplay of light and shadow and the spontaneous expression of color.
WCAG 2.1 compliance analysis based on color contrast and typography readability.
Overall Score
Grade: D - Poor
Contrast Ratios
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#2c3e50 / #f5f0e1 | 9.64:1 | ||
| Secondary text on background | /#e8a87c / #f5f0e1 | 1.79:1 | ||
| Muted text on background | /#2c3e50 / #f5f0e1 | 9.64:1 | ||
| Text on secondary background | /#2c3e50 / #ede5d0 | 8.74:1 | ||
| Secondary text on secondary | /#e8a87c / #ede5d0 | 1.62:1 | ||
| Button primary | /#2c3e50 / #2c3e50 | 1:1 | ||
| Text on accent 1 | /#2c3e50 / #e8a87c | 5.4:1 | ||
| Alt text on accent 1 | /#e8a87c / #e8a87c | 1:1 | ||
| Text on accent 2 | /#2c3e50 / #c0392b | 2.02:1 | ||
| Alt text on accent 2 | /#e8a87c / #c0392b | 2.67:1 | ||
| Text on accent 3 | /#2c3e50 / #1abc9c | 4.56:1 | ||
| Alt text on accent 3 | /#e8a87c / #1abc9c | 1.18:1 | ||
| Text on accent 4 | /#2c3e50 / #f5d88a | 7.88:1 | ||
| Alt text on accent 4 | /#e8a87c / #f5d88a | 1.46:1 |
Readability
Score
87/100
Font Size
text-sm md:text-base
Font Weight
font-serif font-bold 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.