Zen Garden

STYLEKIT_STYLE_REFERENCE
style_name: Zen Garden
style_slug: zen-garden
style_source: /styles/zen-garden

# 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 Zen Garden (Karesansui) style.
- Sand-white backgrounds: #f5f3ee, #ede9e1
- Moss-green primary text: #4a5548
- Muted natural accents: moss #8a9a7b, sand #c4bba8, stone #7a7062
- Always use serif fonts with light weight (font-serif font-light)
- Extreme whitespace: py-32, generous gaps between all sections
- Ultra-thin borders: border-[#c4bba8]/30
- Very slow transitions: duration-700 or longer
- No bright colors, no heavy borders, no fast animations
- Think raked sand patterns, carefully placed stones, quiet moss
- Every element should feel like it was placed with meditative intention

Animation & Interaction Rules:
- Meditative Slowness: Interactions must be slow and restrained, using duration-700 to duration-1000 with ease-in-out.
- Zero Displacement: No translate or rotate allowed; avoid any physical displacement animations. Focus should be expressed through show/hide and tonal changes.
- Ephemeral Fades: Use only low-contrast color deepening, opacity emergence, or very faint shadow fade-ins. No bouncing or high-contrast flashing.
- Quiet Focus: Text can default to semi-transparent (e.g., text-[#4a5548]/70), slowly becoming clear on hover/focus, maintaining a meditative rhythm.

---

# Zen Garden Design System

> A digital interpretation of Japanese Karesansui dry landscape gardens, inspired by raked sand patterns, stone arrangements, and moss, pursuing ultimate tranquility and meditative calm. The pairing of sand white and moss green conveys the serene power of nature.

## Design Philosophy

Karesansui (Zen Garden) is the highest expression of Japanese Zen Buddhist garden art.

Core principles:
- Sand as water: patterns raked in white sand symbolize ripples and waves on water -- waterless yet water is seen
- Beauty of stone arrangements: carefully placed stone groups represent mountains and islands, achieving more with less
- Life of moss: moss green is the trace of time's passage, a vitality of stillness in motion
- Realm of meditation: the entire garden is a space for quiet contemplation and introspection
- Borrowed scenery and whitespace: incorporating surrounding nature into the composition, where space itself is expression

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#c4bba8]/30
Radius: rounded-none
```

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

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: (none)
Transition: transition-colors 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-[#f5f3ee]
Background secondary: bg-[#ede9e1]
Background accent: bg-[#8a9a7b]/10, bg-[#c4bba8]/10, bg-[#7a7062]/10
Text primary: text-[#4a5548]
Text secondary: text-[#7a7062]
Text muted: text-[#c4bba8]
Button primary: bg-transparent border-b border-[#4a5548]/25 text-[#4a5548]
Button secondary: bg-transparent border-b border-[#c4bba8] text-[#7a7062]
```

---

## [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-2`
- `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`

### 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 `^border-(?:[2-9]|\[\d+px\])$`
- matches `^bg-(?:red|blue|yellow|pink|orange|purple)-`

### Why they are banned
- `bg-black`: Zen garden uses natural sand/stone tones, not darkness
- `font-bold`: Only light and extralight weights convey meditative calm
- `shadow-lg`: Shadows must be minimal or absent for quiet aesthetic
- `bg-gradient-to-r`: No gradients; use flat, natural tones only
- `animate-bounce`: No energetic animations; only very slow transitions allowed
- `border-2`: Thick borders disrupt the delicate zen garden balance
- `bg-red-500`: Bright colors violate the muted natural palette

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

---

## [REQUIRED]

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

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

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

---

## [COMPARE] Zen Garden 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-colors duration-700 bg-transparent border-b border-[#4a5548]/25 text-[#4a5548]">
  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] Zen Garden page skeletons

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

### Navigation
```html
<nav class="bg-[#f5f3ee] text-[#4a5548] border border-[#c4bba8]/30 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-[#8a9a7b]/10 text-[#4a5548] 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-colors duration-700 bg-transparent border-b border-[#4a5548]/25 text-[#4a5548]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#f5f3ee] text-[#4a5548] 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-[#c4bba8]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

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

### Footer
```html
<footer class="bg-[#ede9e1] text-[#7a7062] 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] Zen Garden 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-colors 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-2`
- [ ] Not using `border-4`

### Style rule check
- [ ] Use sand-white backgrounds bg-[#f5f3ee]
- [ ] Moss green as accent color text-[#8a9a7b]
- [ ] Extreme whitespace with generous vertical spacing py-32
- [ ] Delicate natural borders border-[#c4bba8]/30
- [ ] Serif fonts with light weight font-serif font-light

### Style drift check
- [ ] Does not violate: Do not use bright vivid colors
- [ ] Does not violate: Do not use heavy borders or thick lines
- [ ] Does not violate: Do not use fast animations or bounce effects
- [ ] Does not violate: Do not densely arrange elements -- whitespace is the core

### 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 Zen Garden

## Absolute Bans (Match and Refuse)

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

- use bright vivid colors
- use heavy borders or thick lines
- use fast animations or bounce effects
- densely arrange elements -- whitespace is the core

## 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 bright vivid colors
- [ ] do not use heavy borders or thick lines
- [ ] do not use fast animations or bounce effects
- [ ] do not densely arrange elements -- whitespace is the core