Ink Wash

STYLEKIT_STYLE_REFERENCE
style_name: Ink Wash
style_slug: ink-wash
style_source: /styles/ink-wash

# 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 designing in Ink Wash (Chinese ink painting) style.
- Warm xuan-paper backgrounds: #f8f5f0, #f3efe8
- Ink-black text color: #2c2c2c
- Muted natural accents: moss green #6b7b6e, tea brown #a89279, sand #c4b9a8
- Always use serif fonts (font-serif) for calligraphic feel
- Extreme whitespace: py-32, large gaps between sections for "qi" flow
- Ultra-thin ink borders: border-[#2c2c2c]/20
- Slow transitions: duration-700 to mimic ink diffusion
- No bright saturated colors, no heavy shadows, no decorative elements
- Embrace generous emptiness -- whitespace IS the design
- Think "ink on xuan paper" and "mountain mist landscape"

Animation & Interaction Rules:
- Ink Bleed: On hover, use color deepening and faint diffusion shadows to simulate ink bleeding, without obvious displacement.
- Calligraphic Press: Active state prioritizes dark inner shadows, simulating brush pressing on paper, without mechanical scaling.
- Flow of Qi: Interaction rhythm uses duration-700 to 1000 with ease-in-out, maintaining ethereal breathing feel.
- Whispering Text: Text can slowly transition from low contrast to clear ink color, avoiding abrupt intensification.

---

# Ink Wash Design System

> A design style rooted in traditional Chinese ink wash painting, creating ethereal moods through variations in ink density and moisture, with generous whitespace expressing 'vivid spirit resonance'. Ideal for cultural brands, tea ceremony, calligraphy, and Eastern aesthetics projects.

## Design Philosophy

Ink Wash originates from the millennia-old aesthetic system of traditional Chinese painting, interpreting all things through "ink divided into five tones."

Core principles:
- Vivid spirit resonance: the foremost of Xie He's Six Principles, pursuing the vitality and spiritual quality of the composition
- Five tones of ink: scorched, dense, heavy, light, and clear -- expressing rich layers through ink density alone
- Counting white as black: whitespace is not absence, but an extension of mood and space for imagination
- Capturing spirit through form: not seeking likeness of form, but pursuing spiritual essence, transcending appearance to touch the core
- Continuous qi flow: where the brush breaks, the intent continues; form scatters but spirit gathers, the overall qi flows as one

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#2c2c2c]/20
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-sm
lg: shadow-md
hover: hover:shadow-sm
focus: focus:ring-1 focus:ring-[#6b7b6e]/20
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-700
Active: active:opacity-80
```

### Typefaces
```
Heading: font-serif font-light tracking-wide
Body: font-serif font-light
Mono: font-mono font-light
```

### Type scale
```
Hero: text-3xl md:text-5xl lg:text-6xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-24 md:py-32 lg:py-40
Container: px-8 md:px-16 lg:px-24
Card: p-8 md:p-10
Gap sm: gap-6
Gap md: gap-10
Gap lg: gap-16
```

### Color roles
```
Background primary: bg-[#f8f5f0]
Background secondary: bg-[#f3efe8]
Background accent: bg-[#6b7b6e]/10, bg-[#a89279]/10, bg-[#c4b9a8]/10
Text primary: text-[#2c2c2c]
Text secondary: text-[#a89279]
Text muted: text-[#c4b9a8]
Button primary: bg-transparent border-b border-[#2c2c2c]/30 text-[#2c2c2c]
Button secondary: bg-transparent border-b border-[#c4b9a8] text-[#a89279]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-black`
- `bg-gray-900`
- `bg-slate-900`
- `font-black`
- `font-extrabold`
- `font-bold`
- `border-4`
- `border-[3px]`
- `border-[4px]`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `bg-gradient-to-r`
- `bg-gradient-to-b`
- `text-6xl`
- `text-7xl`
- `text-8xl`

### Banned patterns
- matches `^bg-(?:black|gray-9|slate-9)`
- matches `^font-(?:black|extrabold|bold)$`
- matches `^shadow-(?:lg|xl|2xl)$`
- matches `^bg-gradient`
- matches `^animate-(?:bounce|spin|pulse)$`
- matches `^text-(?:[6-9]xl|\dxl)$`
- matches `^bg-(?:red|blue|green|yellow|orange|pink|purple)-[4-9]00$`

### Why they are banned
- `bg-black`: Ink wash uses warm xuan-paper tones, not pure darkness
- `font-bold`: Only light and extralight weights convey ink wash restraint
- `shadow-lg`: Shadows must be minimal or absent to preserve ethereal quality
- `bg-gradient-to-r`: No gradients; use flat ink-gray tones only
- `animate-bounce`: No energetic animations; only slow ink-diffusion fades allowed
- `bg-red-500`: No bright saturated colors; ink wash palette is strictly muted grays and naturals

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
bg-transparent
transition-all
duration-700
```

### Every card must include
```
transition-colors
```

### Every input must include
```
bg-transparent
focus:outline-none
```

---

## [COMPARE] Ink Wash wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="bg-transparent transition-all duration-700 bg-transparent border-b border-[#2c2c2c]/30 text-[#2c2c2c]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="transition-colors p-8 md:p-10">
  <h3 class="font-serif font-light tracking-wide text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-transparent focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Ink Wash page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#f8f5f0] text-[#2c2c2c] border border-[#2c2c2c]/20 px-8 md:px-16 lg:px-24">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-10">
    <a href="/" class="font-serif font-light tracking-wide text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-10 font-serif font-light text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#6b7b6e]/10 text-[#2c2c2c] py-24 md:py-32 lg:py-40 px-8 md:px-16 lg:px-24">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-light tracking-wide text-3xl md:text-5xl lg:text-6xl">
      {HEADLINE}
    </h1>
    <p class="font-serif font-light text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="bg-transparent transition-all duration-700 bg-transparent border-b border-[#2c2c2c]/30 text-[#2c2c2c]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#f8f5f0] text-[#2c2c2c] py-24 md:py-32 lg:py-40 px-8 md:px-16 lg:px-24">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-light tracking-wide text-xl md:text-2xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
      <!-- Card template - repeat for each card -->
      <div class="transition-colors p-8 md:p-10">
        <h3 class="font-serif font-light tracking-wide text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-serif font-light text-sm md:text-base text-[#c4b9a8]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-transparent focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f3efe8] text-[#a89279] py-24 md:py-32 lg:py-40 px-8 md:px-16 lg:px-24">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
      <div>
        <span class="font-serif font-light tracking-wide text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-serif font-light text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-light tracking-wide text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-serif font-light text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Ink Wash post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `bg-transparent transition-all duration-700`
- [ ] Card includes: `transition-colors`
- [ ] Input includes: `bg-transparent focus:outline-none`

### Forbidden check
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-900`
- [ ] Not using `bg-slate-900`
- [ ] Not using `font-black`
- [ ] Not using `font-extrabold`
- [ ] Not using `font-bold`
- [ ] Not using `border-4`
- [ ] Not using `border-[3px]`

### Style rule check
- [ ] Use xuan-paper warm backgrounds bg-[#f8f5f0]
- [ ] Ink color as primary text color text-[#2c2c2c]
- [ ] Generous whitespace to create mood py-32 px-8
- [ ] Use serif fonts for calligraphic texture font-serif
- [ ] Ink-wash thin border dividers border-[#2c2c2c]/20

### Style drift check
- [ ] Does not violate: Do not use vivid saturated colors -- ink wash is primarily gray-toned
- [ ] Does not violate: Do not use heavy shadows -- they break the ethereal mood
- [ ] Does not violate: Do not use thick borders -- ink wash lines should be as delicate as brush strokes
- [ ] Does not violate: Do not use decorative animations or bounce effects -- maintain tranquility
- [ ] Does not violate: Do not use spring or bounce interaction curves -- avoid mechanical elasticity

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Ink Wash

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use vivid saturated colors -- ink wash is primarily gray-toned
- use heavy shadows -- they break the ethereal mood
- use thick borders -- ink wash lines should be as delicate as brush strokes
- use decorative animations or bounce effects -- maintain tranquility
- use spring or bounce interaction curves -- avoid mechanical elasticity

## 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 vivid saturated colors -- ink wash is primarily gray-toned
- [ ] do not use heavy shadows -- they break the ethereal mood
- [ ] do not use thick borders -- ink wash lines should be as delicate as brush strokes
- [ ] do not use decorative animations or bounce effects -- maintain tranquility
- [ ] do not use spring or bounce interaction curves -- avoid mechanical elasticity