Paper Craft

STYLEKIT_STYLE_REFERENCE
style_name: Paper Craft
style_slug: paper-craft
style_source: /styles/paper-craft

# 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

STYLE: Paper Craft
TYPE: Handmade paper art interface

MUST USE:
- Warm paper background: bg-[#fdf6ee]
- Paper offset shadows: shadow-[4px_4px_0px_rgba(0,0,0,0.08)]
- Bright craft colors: #e85d75, #5cb8a5, #f5c040, #6b7fb5
- Rounded corners: rounded-xl or rounded-2xl
- Slight rotations: rotate-[1deg] for playful paper feel
- Layered paper effect: multiple stacked divs with rotation
- Dark text on light: text-[#2d2d2d]
- Lift on hover: hover:-translate-y-1

MUST AVOID:
- Dark/black backgrounds
- Neon or glow effects
- Metallic or glass effects
- Sharp precise corners
- Fluorescent colors
- Drop-shadow filters (use box-shadow)
- Gradient glows

COLOR RULES:
- Craft Red: #e85d75 (primary)
- Paper White: #fdf6ee (background)
- Paper Teal: #5cb8a5
- Paper Yellow: #f5c040
- Paper Blue: #6b7fb5
- Text: #2d2d2d

SPECIAL EFFECTS:
- Multi-layer paper stacking with rotation offsets
- Inset shadows for cut-out/embossed feel
- Active press-down: active:translate-y-0.5
- Paper texture overlay for authenticity

## Animation & Interaction Rules

- Layer Separation: Multi-layer paper pieces on hover should fan out slightly in different directions, with increased inter-layer shadow offset.
- Crisp Cutouts: Input focus or active feedback can deepen inset shadows, simulating cardboard cutout depth.
- Stiff Paper Feel: Interactions use duration-200/300 + ease-out, avoiding spring elasticity.
- Offset Lift: When elements shift, shadow offset should increase in sync, maintaining physical consistency of paper lifting off the surface.

---

# Paper Craft Design System

> Paper craft and paper-cut style with layered paper effects, soft shadows suggesting depth, and handmade textured edges. Ideal for children's brands, educational products, and creative studios.

## Design Philosophy

Paper Craft draws design inspiration from paper-cutting art, origami, and handmade collage. Through layered paper effects, soft shadows, and irregular handmade edges, it creates a warm, tactile visual experience.

Core concepts:
- Paper layering: Multiple layers of shadows and subtle offsets create a realistic stacked-paper feel
- Handmade texture: Slightly irregular edges avoid an overly digital precision
- Soft colors: Warm paper-like base colors paired with bright but non-glaring colored paper pieces
- Depth suggestion: Shadow direction and intensity convey front-to-back layer relationships

This style deliberately avoids the cold, hard precision of the digital world, instead embracing the warmth of handmade craftsmanship. Every UI element should look as if it were cut, folded, and glued from colored paper -- buttons are raised paper pieces, cards are stacked paper layers, input fields are cutout grooves in paper.

Suitable for: children's education apps, handmade craft shops, kindergarten websites, creative studio portfolios, and DIY tutorial platforms.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#e0d8cc]
Radius: rounded-xl
```

### Shadow
```
sm: shadow-[2px_2px_0px_rgba(0,0,0,0.06)]
md: shadow-[4px_4px_0px_rgba(0,0,0,0.08)]
lg: shadow-[6px_6px_0px_rgba(0,0,0,0.1)]
hover: hover:shadow-[5px_5px_0px_rgba(0,0,0,0.12)]
focus: focus:shadow-[0_0_0_3px_rgba(232,93,117,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:-translate-y-0.5
Hover opacity: (none)
Transition: transition-all duration-200
Active: active:translate-y-0.5 active:shadow-[1px_1px_0px_rgba(0,0,0,0.06)]
```

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

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

### Spacing
```
Section: py-12 md:py-20
Container: px-4 md:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-[#fdf6ee]
Background secondary: bg-white
Background accent: bg-[#e85d75], bg-[#5cb8a5], bg-[#f5c040], bg-[#6b7fb5]
Text primary: text-[#2d2d2d]
Text secondary: text-[#666666]
Text muted: text-[#b0a898]
Button primary: bg-[#e85d75] text-white
Button secondary: bg-white text-[#2d2d2d] border-2 border-[#2d2d2d]
```

---

## [FORBIDDEN]

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

### Banned classes
- `bg-black`
- `bg-gray-900`
- `bg-gray-950`
- `shadow-[0_0_`
- `text-cyan-`
- `text-fuchsia-`
- `bg-cyan-`
- `bg-fuchsia-`

### Banned patterns
- matches `^bg-(?:black|gray-[89])`
- matches `^shadow-\[0_0_.*rgba`
- matches `^text-(?:cyan|fuchsia)-`
- matches `^bg-(?:cyan|fuchsia)-`

### Why they are banned
- `bg-black`: Paper Craft uses warm light backgrounds, never dark
- `shadow-[0_0_`: Use offset paper shadows (shadow-[4px_4px_...]), not glows
- `text-cyan-`: Use craft colors (#e85d75, #5cb8a5, #f5c040) not neon

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

---

## [REQUIRED]

### Every button must include
```
px-6 py-3
font-bold
rounded-xl
shadow-[3px_3px_0px_rgba(0,0,0,0.1)]
transition-all duration-200
```

### Every card must include
```
bg-white
rounded-2xl
shadow-[4px_4px_0px_rgba(0,0,0,0.08)]
```

### Every input must include
```
bg-white
border-2 border-[#e0d8cc]
rounded-xl
text-[#2d2d2d]
focus:border-[#e85d75]
focus:outline-none
```

---

## [COMPARE] Paper Craft 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="px-6 py-3 font-bold rounded-xl shadow-[3px_3px_0px_rgba(0,0,0,0.1)] transition-all duration-200 bg-[#e85d75] text-white">
  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-white rounded-2xl shadow-[4px_4px_0px_rgba(0,0,0,0.08)] p-6">
  <h3 class="font-bold 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-white border-2 border-[#e0d8cc] rounded-xl text-[#2d2d2d] focus:border-[#e85d75] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Paper Craft page skeletons

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

### Navigation
```html
<nav class="bg-[#fdf6ee] text-[#2d2d2d] border-2 border-[#e0d8cc] px-4 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-bold text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 font-sans text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#e85d75] text-[#2d2d2d] py-12 md:py-20 px-4 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold text-4xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-6 py-3 font-bold rounded-xl shadow-[3px_3px_0px_rgba(0,0,0,0.1)] transition-all duration-200 bg-[#e85d75] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#fdf6ee] text-[#2d2d2d] py-12 md:py-20 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-white rounded-2xl shadow-[4px_4px_0px_rgba(0,0,0,0.08)] p-6">
        <h3 class="font-bold text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#b0a898]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border-2 border-[#e0d8cc] rounded-xl text-[#2d2d2d] focus:border-[#e85d75] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-[#666666] py-12 md:py-20 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-bold text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Paper Craft post-generation self check

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

### Token check
- [ ] Button includes: `px-6 py-3 font-bold rounded-xl shadow-[3px_3px_0px_rgba(0,0,0,0.1)] transition-all duration-200`
- [ ] Card includes: `bg-white rounded-2xl shadow-[4px_4px_0px_rgba(0,0,0,0.08)]`
- [ ] Input includes: `bg-white border-2 border-[#e0d8cc] rounded-xl text-[#2d2d2d] focus:border-[#e85d75] focus:outline-none`

### Forbidden check
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-900`
- [ ] Not using `bg-gray-950`
- [ ] Not using `shadow-[0_0_`
- [ ] Not using `text-cyan-`
- [ ] Not using `text-fuchsia-`
- [ ] Not using `bg-cyan-`
- [ ] Not using `bg-fuchsia-`

### Style rule check
- [ ] Use paper white bg-[#fdf6ee] or soft warm white for backgrounds
- [ ] Cards use paper shadows shadow-[4px_4px_0px_rgba(0,0,0,0.08)] to simulate raised effects
- [ ] Buttons use offset shadows shadow-[3px_3px_0px_rgba(0,0,0,0.1)] to simulate paper piece elevation
- [ ] Use rounded but imperfect corners rounded-xl paired with slight rotation rotate-[1deg]
- [ ] Color blocks use bright craft colors bg-[#e85d75], bg-[#5cb8a5], bg-[#f5c040]

### Style drift check
- [ ] Does not violate: Do not use dark/black backgrounds
- [ ] Does not violate: Do not use glow effects or neon shadows
- [ ] Does not violate: Do not use metallic textures or glassmorphism
- [ ] Does not violate: Do not use overly precise right-angle edges (looks too digital)
- [ ] Does not violate: Do not use high-saturation fluorescent colors

### 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 Paper Craft

## Absolute Bans (Match and Refuse)

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

- use dark/black backgrounds
- use glow effects or neon shadows
- use metallic textures or glassmorphism
- use overly precise right-angle edges (looks too digital)
- use high-saturation fluorescent colors
- use gradient glow effects
- use drop-shadow filters (use box-shadow to simulate paper shadows)
- use spring bounce curves (paper is light but not rubbery)

## 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 dark/black backgrounds
- [ ] do not use glow effects or neon shadows
- [ ] do not use metallic textures or glassmorphism
- [ ] do not use overly precise right-angle edges (looks too digital)
- [ ] do not use high-saturation fluorescent colors