Cyber Wafuu

STYLEKIT_STYLE_REFERENCE
style_name: Cyber Wafuu
style_slug: cyber-wafuu
style_source: /styles/cyber-wafuu

# 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 Cyber Wafuu design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft pastel colors
- Organic irregular shapes
- Western serif fonts
- rounded-full borders
- Light backgrounds (bg-white, bg-gray-50, etc.)
- Standard drop shadows (use glow effects only)

## Must Follow

- Dark indigo backgrounds: bg-[#080814] or bg-[#1e3a5f]
- Seigaiha wave pattern as background texture (repeating-radial-gradient)
- Shoji screen grid frame structure for cards
- Kintsugi gold crack lines as border accents
- Torii gate shapes for navigation frames
- Circuit trace line connections between elements
- Electric blue accent: #38bdf8 with glow effects
- Vermillion #c41e3a and gold #c9a227 for traditional accents

## Animation & Interaction Rules

- Motion should feel ceremonial and precise, not playful: keep transitions in the 200-320ms range with ease-out
- Hover should use subtle lift (1-2px), circuit-glow expansion, and shoji line brightening
- Active states should compress gently (press-down 1px or scale 0.98-0.99) while tightening glow
- Prefer directional sweeps (circuit trace / wave shimmer) triggered by hover or focus, then stop
- Avoid infinite decorative loops on core controls, bounce springs, or oversized transforms that break the calm discipline

## Color Palette

Primary:
- Indigo: #1e3a5f
- Dark Background: #080814
- Vermillion: #c41e3a
- Gold Foil: #c9a227
- Electric Blue: #38bdf8

## Unique Elements

- Seigaiha wave pattern (CSS repeating-radial-gradient)
- Kintsugi gold crack line accents (gradient border decorations)
- Shoji screen grid card frames (CSS grid overlays)
- Torii gate navigation frames
- Asanoha hemp leaf pattern background

---

# Cyber Wafuu Design System

> A Japanese cyber aesthetic where seigaiha wave patterns merge with circuit traces, torii gate navigation frames, asanoha hemp leaf grids, kintsugi gold repair lines, and shoji screen grid panels -- traditional patterns 'hacked' by technology.

## Design Philosophy

Cyber Wafuu reimagines traditional Japanese visual culture through digital disruption, creating a sophisticated fusion where heritage patterns are "hacked" by technology.

Core principles:
- Seigaiha digital waves: The classic wave pattern overlaid with circuit board traces
- Torii gate navigation: Sacred gate structure reborn as navigation frames
- Asanoha grid: Hemp leaf geometric grid as layout scaffolding
- Kintsugi gold repair: Golden crack lines as decorative borders and accents
- Shoji screen panels: Traditional sliding door grids as card frame systems
- Cherry blossom + neon: Organic sakura forms outlined in electric light
- Pattern collision: Traditional repeating patterns visibly intersecting with digital traces

---

## Token Dictionary (exact class mapping)

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

### Shadow
```
sm: shadow-[0_0_8px_rgba(56,189,248,0.2)]
md: shadow-[0_0_15px_rgba(56,189,248,0.3)]
lg: shadow-[0_0_20px_rgba(56,189,248,0.4)]
hover: hover:shadow-[0_0_20px_rgba(56,189,248,0.4)]
focus: focus:shadow-[0_0_12px_rgba(56,189,248,0.3)]
```

### Interaction
```
Hover translate: hover:-translate-y-1
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-300 ease-in-out
Active: active:scale-95
```

### Typefaces
```
Heading: font-sans font-bold tracking-wider
Body: font-sans
Mono: font-mono
```

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

### Spacing
```
Section: py-14 md:py-24 lg:py-32
Container: px-6 md:px-10 lg:px-16
Card: p-5 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-5 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-[#080814]
Background secondary: bg-[#1e3a5f]
Background accent: bg-[#c41e3a], bg-[#c9a227], bg-[#38bdf8]
Text primary: text-[#e2e8f0]
Text secondary: text-[#38bdf8]
Text muted: text-[#e2e8f0]/35
Button primary: bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]
Button secondary: bg-[#080814] text-[#38bdf8] border-[#38bdf8]/40 shadow-[0_0_10px_rgba(56,189,248,0.2)]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-full`
- `rounded-2xl`
- `rounded-xl`
- `rounded-lg`
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `font-serif`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `bg-pink-100`
- `bg-pink-50`
- `bg-rose-50`

### Banned patterns
- matches `^rounded-(?:full|2xl|xl|lg)$`
- matches `^bg-(?:white|gray-(?:50|100))$`
- matches `^bg-(?:pink|rose)-(?:50|100|200)$`
- matches `^font-serif$`
- matches `^shadow-(?:md|lg|xl)$`

### Why they are banned
- `rounded-full`: Cyber Wafuu uses sharp shoji-grid geometry, no rounded shapes
- `bg-white`: Cyber Wafuu requires dark indigo backgrounds
- `font-serif`: Cyber Wafuu uses clean geometric sans-serif fonts
- `shadow-md`: Use seigaiha-pattern glow shadows instead of soft shadows

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

---

## [REQUIRED]

### Every button must include
```
font-sans font-semibold tracking-wider
border border-[#1e3a5f]/60
transition-all duration-300 ease-in-out
```

### Every card must include
```
bg-[#080814]
border border-[#1e3a5f]/30
transition-all duration-300 ease-in-out
```

### Every input must include
```
bg-[#080814]
border border-[#1e3a5f]/30
text-[#e2e8f0]
font-sans
focus:outline-none
```

---

## [COMPARE] Cyber Wafuu 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="font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]">
  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="bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out p-5 md:p-8">
  <h3 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{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-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Cyber Wafuu page skeletons

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

### Navigation
```html
<nav class="bg-[#080814] text-[#e2e8f0] border border-[#1e3a5f]/30 px-6 md:px-10 lg:px-16">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-5 md:gap-8">
    <a href="/" class="font-sans font-bold tracking-wider text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-5 md:gap-8 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#c41e3a] text-[#e2e8f0] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-bold tracking-wider text-4xl md:text-6xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#080814] text-[#e2e8f0] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-sans font-bold tracking-wider text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out p-5 md:p-8">
        <h3 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#e2e8f0]/35">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#1e3a5f] text-[#38bdf8] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <div>
        <span class="font-sans font-bold tracking-wider text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Cyber Wafuu post-generation self check

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

### Token check
- [ ] Button includes: `font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out`
- [ ] Card includes: `bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out`
- [ ] Input includes: `bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-full`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-lg`
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-100`
- [ ] Not using `font-serif`

### Style rule check
- [ ] Use dark indigo backgrounds (bg-[#080814])
- [ ] Add seigaiha wave pattern backgrounds with CSS repeating-radial-gradient
- [ ] Use shoji screen grid as card frame structure
- [ ] Apply kintsugi gold crack line borders and accents
- [ ] Use torii gate shape for navigation framing

### Style drift check
- [ ] Does not violate: No soft pastel colors
- [ ] Does not violate: No organic irregular rounded shapes
- [ ] Does not violate: No Western serif fonts
- [ ] Does not violate: No rounded-full borders
- [ ] Does not violate: No light backgrounds (bg-white, bg-gray-50)

### 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 Cyber Wafuu

## Absolute Bans (Match and Refuse)

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

- soft pastel colors
- organic irregular rounded shapes
- Western serif fonts
- rounded-full borders
- light backgrounds (bg-white, bg-gray-50)
- bouncy spring motion or large scale transforms
- slow dreamy transitions beyond 320ms on interactive controls

## 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
- [ ] no soft pastel colors
- [ ] no organic irregular rounded shapes
- [ ] no Western serif fonts
- [ ] no rounded-full borders
- [ ] no light backgrounds (bg-white, bg-gray-50)