Shoujo Manga

STYLEKIT_STYLE_REFERENCE
style_name: Shoujo Manga
style_slug: shoujo-manga
style_source: /styles/shoujo-manga

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

## Absolutely Forbidden

- Dark colors or dark backgrounds (bg-black, bg-gray-900, bg-slate-900)
- Sharp corners (rounded-sm, rounded-none)
- Brutalist style elements (thick borders border-4+, hard offset shadows)
- Monospace fonts (font-mono)
- RGB split shadows or neon glow effects
- CMY color scheme (cyan, magenta, yellow on black)

## Must Follow

- Pink-dominant palette: sakura pink #ffb7c5, pearl white #fff5f7
- Fully rounded elements: rounded-full (buttons), rounded-2xl (cards), rounded-3xl (panels)
- Soft sans-serif fonts: font-sans font-bold for headings, font-sans for body
- Gentle colored shadows: shadow-[0_4px_15px_color/opacity]
- Light backgrounds: bg-[#fff5f7] or bg-white/80
- Border width: border-2 for panels, border for inputs

## Color Palette

Primary:
- Sakura Pink: #ffb7c5 (main accent, buttons, borders)
- Pearl White: #fff5f7 (card backgrounds)
- Lavender Purple: #c4b5fd (secondary accent)
- Gold Sparkle: #fde68a (sparkle effects, decorative)
- Rose: #fecdd3 (tertiary, subtle accents)

## Unique Elements

- Screentone dot pattern: radial-gradient(circle, #ffb7c5 0.6px, transparent 0.6px) with 10px spacing at ~6% opacity
- Flower frame corners: Lucide Flower2 icons positioned at absolute corners of panels
- Ribbon banner titles: clip-path polygon tails with soft pink background for section headers
- Sparkle stars: gold #fde68a dots with glow shadow (shadow-[0_0_8px_#fde68a])
- Lace scallop borders: radial-gradient wave pattern at top/bottom of form cards
- Manga panel grid: asymmetric grid-cols-12 layout with col-span mixing for panel arrangement
- Cherry blossom petals: rotated rounded-[50%_0_50%_50%] divs as floating decorations

## Animation & Interaction Rules
- Dokidoki Bounce: Hover uses soft scale-105 and slow expansion, expressing a heartbeat-like rhythm.
- Soft Focus Glow: Use large-area low-opacity pink shadows, avoiding hard-edge high-contrast glow.
- Screentone Shimmer: Screentone texture increases opacity or shifts slightly on hover, enhancing manga page-turning feel.
- Soft Squish: Active only uses gentle scale-95, no mechanical hard press-down.

---

# Shoujo Manga Design System

> The distinctive romantic aesthetics of shoujo manga, featuring screentone texture backgrounds, flower frame decorations, ribbon banner titles, multi-point sparkle effects, lace borders, and heart elements, presented in a pink-dominant palette for a dreamy, soft visual experience.

## Design Philosophy

Shoujo Manga style originates from the classic visual language of Japanese girls' manga, with romance, dreaminess, and soft beauty at its core.

Core principles:
- Screentone texture: Screentone dot patterns as signature decorative backgrounds for panels and areas
- Flower frame borders: Five-petal flowers as panel corner decorations, creating a picture frame feel
- Ribbon banners: Ribbon banners as chapter titles and dividers
- Multi-point sparkles: 4/6/8-point sparkle stars in gold for a dreamy effect
- Lace borders: Scalloped lace borders as card top/bottom decorations
- Manga panels: Asymmetric manga panel grid simulating manga page layout
- Cherry blossom petals: Cherry blossom petals as scattered decorative elements

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#ffb7c5]/20
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_10px_#ffb7c520]
md: shadow-[0_4px_15px_#ffb7c530]
lg: shadow-[0_4px_20px_#ffb7c540]
hover: hover:shadow-[0_8px_30px_#ffb7c540]
focus: focus:shadow-[0_0_12px_#ffb7c540]
```

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

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

### Type scale
```
Hero: text-5xl md:text-7xl 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-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-5 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-10
```

### Color roles
```
Background primary: bg-[#fff5f7]
Background secondary: bg-white
Background accent: bg-[#ffb7c5], bg-[#c4b5fd], bg-[#fde68a], bg-[#fecdd3]
Text primary: text-[#4a5568]
Text secondary: text-[#ffb7c5]
Text muted: text-[#4a5568]/40
Button primary: bg-[#ffb7c5] text-white shadow-[0_4px_15px_#ffb7c560]
Button secondary: bg-[#c4b5fd] text-white shadow-[0_4px_15px_#c4b5fd60]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-none`
- `rounded-sm`
- `border-4`
- `border-8`
- `font-mono`
- `bg-black`
- `bg-[#0a0a0a]`
- `bg-gray-900`
- `bg-slate-900`
- `shadow-[3px_3px`
- `shadow-[4px_4px`
- `border-l-2 border-[`
- `uppercase tracking-widest`

### Banned patterns
- matches `^rounded-(?:none|sm)$`
- matches `^border-(?:4|8)$`
- matches `^font-mono$`
- matches `^bg-(?:black|gray-900|slate-900|\[#0a0a0a\])$`
- matches `^shadow-\[\d+px_\d+px_0px`
- matches `^text-\[#(?:00ffff|ff00ff)\]$`

### Why they are banned
- `rounded-none`: Shoujo Manga uses soft rounded shapes (rounded-full, rounded-2xl, rounded-3xl)
- `border-4`: Shoujo Manga uses subtle borders (border or border-2), not heavy ones
- `font-mono`: Shoujo Manga uses rounded sans-serif fonts exclusively
- `bg-black`: Shoujo Manga uses light pastel backgrounds only (pearl white, sakura pink)
- `shadow-[3px_3px`: Shoujo Manga uses soft diffused shadows with color tinting, not hard offset ones
- `uppercase tracking-widest`: Used sparingly for ribbon banners only, never for main content

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

---

## [REQUIRED]

### Every button must include
```
rounded-full
font-sans font-medium
shadow-[0_4px_15px_#ffb7c560]
transition-all duration-300 ease-in-out
```

### Every card must include
```
rounded-2xl
bg-[#fff5f7]
border-2 border-[#ffb7c5]/20
shadow-[0_4px_20px_#ffb7c520]
```

### Every input must include
```
rounded-full
border border-[#ffb7c5]/25
bg-[#fff5f7]
font-sans
focus:outline-none
```

---

## [COMPARE] Shoujo Manga 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="rounded-full font-sans font-medium shadow-[0_4px_15px_#ffb7c560] transition-all duration-300 ease-in-out bg-[#ffb7c5] text-white shadow-[0_4px_15px_#ffb7c560]">
 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="rounded-2xl bg-[#fff5f7] border-2 border-[#ffb7c5]/20 shadow-[0_4px_20px_#ffb7c520] p-5 md:p-8">
 <h3 class="font-sans 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="rounded-full border border-[#ffb7c5]/25 bg-[#fff5f7] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Shoujo Manga page skeletons

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

### Navigation
```html
<nav class="bg-[#fff5f7] text-[#4a5568] border-2 border-[#ffb7c5]/20 px-4 md:px-8 lg:px-12">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-sans font-bold text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans leading-relaxed text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ffb7c5] text-[#4a5568] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-sans font-bold text-5xl md:text-7xl lg:text-8xl">
 {HEADLINE}
 </h1>
 <p class="font-sans leading-relaxed text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-full font-sans font-medium shadow-[0_4px_15px_#ffb7c560] transition-all duration-300 ease-in-out bg-[#ffb7c5] text-white shadow-[0_4px_15px_#ffb7c560]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#fff5f7] text-[#4a5568] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-sans font-bold text-2xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="rounded-2xl bg-[#fff5f7] border-2 border-[#ffb7c5]/20 shadow-[0_4px_20px_#ffb7c520] p-5 md:p-8">
 <h3 class="font-sans font-bold text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-sans leading-relaxed text-sm md:text-base text-[#4a5568]/40">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-full border border-[#ffb7c5]/25 bg-[#fff5f7] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

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

---

## [CHECKLIST] Shoujo Manga post-generation self check

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

### Token check
- [ ] Button includes: `rounded-full font-sans font-medium shadow-[0_4px_15px_#ffb7c560] transition-all duration-300 ease-in-out`
- [ ] Card includes: `rounded-2xl bg-[#fff5f7] border-2 border-[#ffb7c5]/20 shadow-[0_4px_20px_#ffb7c520]`
- [ ] Input includes: `rounded-full border border-[#ffb7c5]/25 bg-[#fff5f7] font-sans focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-sm`
- [ ] Not using `border-4`
- [ ] Not using `border-8`
- [ ] Not using `font-mono`
- [ ] Not using `bg-black`
- [ ] Not using `bg-[#0a0a0a]`
- [ ] Not using `bg-gray-900`

### Style rule check
- [ ] Use pink as the dominant color (sakura pink #ffb7c5)
- [ ] Add screentone texture background (radial-gradient for dot patterns)
- [ ] Use flower icon Flower2 as panel corner decorations
- [ ] Use ribbon banners (ribbon banner with clip-path tails) as chapter titles
- [ ] Add multi-point sparkle effects (gold #fde68a dots with glow shadow)

### Style drift check
- [ ] Does not violate: No dark or dark-toned backgrounds
- [ ] Does not violate: No sharp or pointed corners (rounded-none, rounded-sm)
- [ ] Does not violate: No brutalist-style thick borders
- [ ] Does not violate: No monospace fonts font-mono
- [ ] Does not violate: No strong hard shadows or RGB split shadows

### 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 Shoujo Manga

---

## [EXAMPLES] Example prompts

### 1. 

、

```
Use Shoujo Manga style to create a character profile page:
1. Background: soft pink-to-white gradient with screentone dot pattern overlay
2. Hero: manga panel frame with flower (Flower2) icons at corners and screentone bg
3. Section titles: ribbon banners with clip-path pointed tails
4. Cards: manga panel grid with asymmetric layout (grid-cols-12), screentone backgrounds
5. Form: love letter diary with lace scallop border at top and bottom
6. Decorations: scattered cherry blossom petals and gold sparkle star dots throughout
7. Buttons: pill-shaped (rounded-full) with pink glow shadows
```

## Absolute Bans (Match and Refuse)

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

- dark or dark-toned backgrounds
- sharp or pointed corners (rounded-none, rounded-sm)
- brutalist-style thick borders
- monospace fonts font-mono
- strong hard shadows or RGB split shadows
- pure black or dark gray backgrounds
- short, stiff 100ms animations or mechanical press-down feedback
- No high-contrast hard light replacing soft-focus pastel shadows

## 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 dark or dark-toned backgrounds
- [ ] no sharp or pointed corners (rounded-none, rounded-sm)
- [ ] no brutalist-style thick borders
- [ ] no monospace fonts font-mono
- [ ] no strong hard shadows or RGB split shadows