# StyleKit - Generated Catalog Reference

This file is generated from the current StyleKit catalog. It summarizes all styles and includes selected token fields, implementation rules, component examples, recipe summaries, and layout archetypes. For a smaller index, use https://www.stylekit.top/llms.txt. For one style at a time, use https://www.stylekit.top/api/styles/{slug}/md.

---


## Table of Contents

1. Overview
2. All Styles Summary
3. Detailed Style Documentation
4. Component Recipes Registry
5. Layout Archetypes Registry
6. Usage Guidelines

---


## 1. Overview

StyleKit is an open-source visual style library for AI-generated web interfaces. It provides 148 curated design styles with machine-readable constraints:

- **Design Tokens**: Precise Tailwind class mappings for borders, shadows, colors, typography
- **Component Recipes**: Parameterized templates with variants (button, card, input, etc.)
- **Layout Archetypes**: Pre-defined page structures (landing, dashboard, blog)
- **AI Rules**: Do's, don'ts, and forbidden patterns for each style
- **Code Examples**: React + Tailwind CSS button and card examples in this export

---


## 2. All Styles Summary


### 新野兽派 (Neo-Brutalist)
- **Slug**: `neo-brutalist`
- **Type**: visual
- **Description**: Bold black thick borders, hard-edge shadows, no rounded corners, high-contrast color schemes. Inspired by architectural Brutalism, emphasizing function and raw aesthetics.
- **Keywords**: neo-brutalism, neubrutalism, brutalist web design, bold borders, hard shadows, no rounded corners, high contrast, raw aesthetics, brutalist ui, black outlines, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neo-brutalist
- **Markdown**: https://www.stylekit.top/api/styles/neo-brutalist/md


### 编辑杂志风 (Editorial)
- **Slug**: `editorial`
- **Type**: visual
- **Description**: Elegant magazine typography style with serif headings, sans-serif body text, refined whitespace and grid systems. Inspired by high-end fashion magazines and newspaper layouts. Warm cream background, soft black text, fine opacity hierarchy and animated underline interactions.
- **Keywords**: editorial design, magazine layout, serif typography, print-inspired, grid system, whitespace, typography-driven, fashion magazine, blog design, portfolio
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/editorial
- **Markdown**: https://www.stylekit.top/api/styles/editorial/md


### 新拟物派 (Neumorphism)
- **Slug**: `neumorphism`
- **Type**: visual
- **Description**: Soft concave and convex 3D effects using dual shadows to simulate light sources. Light backgrounds with same-tone elements create a refined sense of depth.
- **Keywords**: neumorphism, neomorphism, soft ui, soft shadows, dual shadows, embossed, inset shadow, extruded, skeuomorphism, light theme, 3d buttons, smart home dashboard
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neumorphism
- **Markdown**: https://www.stylekit.top/api/styles/neumorphism/md


### 玻璃拟态 (Glassmorphism)
- **Slug**: `glassmorphism`
- **Type**: visual
- **Description**: Premium frosted glass with a nocturne temperament. Deep ink scenes and restrained light wells; the glass borrows light instead of carrying color — gaussian blur, saturation boost, lit top edges and film grain make glass that feels believable, not decorative.
- **Keywords**: glassmorphism, frosted glass, backdrop blur, backdrop-filter css, translucent ui, glass card, liquid glass, dark glass theme, film grain, glassmorphic dashboard
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/glassmorphism
- **Markdown**: https://www.stylekit.top/api/styles/glassmorphism/md


### 便当盒布局 (Bento Grid)
- **Slug**: `bento-grid`
- **Type**: layout
- **Description**: Irregular grid layout inspired by Japanese bento boxes, creating visual hierarchy through varied card sizes. Commonly used for portfolios and product showcases.
- **Keywords**: bento grid, bento layout, bento box design, card grid, modular layout, CSS grid, feature grid, portfolio grid, product showcase, dashboard cards
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/bento-grid
- **Markdown**: https://www.stylekit.top/api/styles/bento-grid/md


### 企业简洁风 (Corporate Clean)
- **Slug**: `corporate-clean`
- **Type**: visual
- **Description**: Professional and clean enterprise style emphasizing readability, consistency and trustworthiness. Ideal for B2B SaaS, corporate websites, and admin dashboards.
- **Keywords**: corporate clean, corporate design, enterprise ui, B2B SaaS, professional website, clean ui, admin dashboard, business website, SaaS landing page, trustworthy design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/corporate-clean
- **Markdown**: https://www.stylekit.top/api/styles/corporate-clean/md


### 极简扁平风 (Minimalist Flat)
- **Slug**: `minimalist-flat`
- **Type**: visual
- **Description**: Ultra-minimal flat design with no shadows or gradients, creating hierarchy through color and whitespace. Ideal for portfolios, creative agencies, and art websites.
- **Keywords**: minimalist flat design, flat design, minimalism, flat ui, clean ui, whitespace, no shadows, simple layout, portfolio website, creative agency, content first design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/minimalist-flat
- **Markdown**: https://www.stylekit.top/api/styles/minimalist-flat/md


### 柔和界面风 (Soft UI)
- **Slug**: `soft-ui`
- **Type**: visual
- **Description**: Gentle and friendly interface style with soft shadows, rounded corners, and low-saturation colors. Ideal for consumer apps, social products, and lifestyle service apps.
- **Keywords**: soft ui, soft design, rounded corners, friendly interface, soft shadows, pastel colors, consumer app design, approachable ui, mobile app landing page, gentle gradients, rounded buttons
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/soft-ui
- **Markdown**: https://www.stylekit.top/api/styles/soft-ui/md


### 自然有机风 (Natural Organic)
- **Slug**: `natural-organic`
- **Type**: visual
- **Description**: Warm and natural organic style with earth tones, natural textures, and handcrafted elements. Ideal for health brands, organic food, eco-friendly products, and artisan crafts.
- **Keywords**: organic design, natural design, earth tones, organic shapes, natural textures, eco-friendly design, handcrafted feel, warm neutrals, wellness brand, organic food website, sustainable branding
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/natural-organic
- **Markdown**: https://www.stylekit.top/api/styles/natural-organic/md


### 现代渐变风 (Modern Gradient)
- **Slug**: `modern-gradient`
- **Type**: visual
- **Description**: Vibrant modern gradient style with colorful gradient backgrounds, glass-textured cards, and dynamic lighting effects. Ideal for startups, digital products, and event pages.
- **Keywords**: modern gradient, gradient design, gradient background, mesh gradient, vibrant colors, glass cards, dynamic lighting, colorful ui, startup landing page, SaaS website, hero section
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/modern-gradient
- **Markdown**: https://www.stylekit.top/api/styles/modern-gradient/md


### 复古怀旧风 (Retro Vintage)
- **Slug**: `retro-vintage`
- **Type**: visual
- **Description**: Nostalgic retro design style with vintage typography, retro color tones, and handcrafted texture elements. Ideal for cafes, vintage brands, indie magazines, and music labels.
- **Keywords**: retro vintage, vintage web design, retro design, nostalgic aesthetic, vintage typography, aged paper texture, mid-century design, cafe website design, old-school branding, indie magazine
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/retro-vintage
- **Markdown**: https://www.stylekit.top/api/styles/retro-vintage/md


### 暗黑模式 (Dark Mode)
- **Slug**: `dark-mode`
- **Type**: visual
- **Description**: Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.
- **Keywords**: dark mode, dark theme, night mode, dark ui design, developer tools ui, low contrast layering, subtle borders, eye strain reduction, dark dashboard, professional dark interface
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/dark-mode
- **Markdown**: https://www.stylekit.top/api/styles/dark-mode/md


### macOS 毛玻璃 (macOS Vibrancy)
- **Slug**: `macos-vibrancy`
- **Type**: visual
- **Description**: Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.
- **Keywords**: macOS vibrancy, macOS design, frosted glass sidebar, backdrop blur, translucent panels, dark mode ui, desktop app design, native app aesthetic, Apple design language, glassmorphism, dashboard
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/macos-vibrancy
- **Markdown**: https://www.stylekit.top/api/styles/macos-vibrancy/md


### 几何大胆风 (Geometric Bold)
- **Slug**: `geometric-bold`
- **Type**: visual
- **Description**: Bold geometric design with strong shape contrasts, vivid color blocks, and dynamic compositions. Ideal for art exhibitions, design agencies, and creative brands.
- **Keywords**: geometric bold, geometric design, bold shapes, Bauhaus, Constructivism, color blocks, abstract geometry, hard edges, avant-garde, design agency, poster design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/geometric-bold
- **Markdown**: https://www.stylekit.top/api/styles/geometric-bold/md


### 瀑布流布局 (Masonry Flow)
- **Slug**: `masonry-flow`
- **Type**: layout
- **Description**: Pinterest-style masonry layout with variable-height cards, achieved through CSS columns or masonry grid for a naturally flowing visual effect. Ideal for image galleries, portfolios, and social media.
- **Keywords**: masonry layout, masonry grid, Pinterest style, waterfall layout, CSS columns, variable height cards, image gallery, photo wall, portfolio grid, infinite scroll, responsive gallery
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/masonry-flow
- **Markdown**: https://www.stylekit.top/api/styles/masonry-flow/md


### 分屏布局 (Split Screen)
- **Slug**: `split-screen`
- **Type**: layout
- **Description**: Symmetric or asymmetric split-screen layout creating visual tension through contrast and balance. Commonly used for product showcases, brand stories, and comparison pages.
- **Keywords**: split screen, split screen layout, split layout, side by side layout, two column hero, 50/50 layout, comparison page, dual panel, asymmetric split, product showcase, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/split-screen
- **Markdown**: https://www.stylekit.top/api/styles/split-screen/md


### 全屏滚动布局 (Full Page Scroll)
- **Slug**: `full-page-scroll`
- **Type**: layout
- **Description**: Immersive scrolling experience where each screen fills the entire viewport, switching complete scenes on scroll. Ideal for brand stories, product introductions, and portfolio showcases.
- **Keywords**: full page scroll, fullscreen sections, scroll snap, one page website, immersive scrolling, section-based layout, brand storytelling, scroll-driven, presentation website, product showcase
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/full-page-scroll
- **Markdown**: https://www.stylekit.top/api/styles/full-page-scroll/md


### 垂直时间线布局 (Vertical Timeline)
- **Slug**: `timeline-vertical`
- **Type**: layout
- **Description**: Vertical timeline layout connecting time nodes through a connecting line. Ideal for displaying historical progress, project milestones, work experience, and process steps.
- **Keywords**: vertical timeline, timeline layout, timeline ui, milestones, roadmap design, process steps, company history page, career timeline, changelog design, step by step
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/timeline-vertical
- **Markdown**: https://www.stylekit.top/api/styles/timeline-vertical/md


### 卡片堆叠布局 (Card Stack)
- **Slug**: `card-stack`
- **Type**: layout
- **Description**: 3D layout with overlapping cards, creating depth through Z-axis stacking and offsets. Ideal for carousels, step-by-step displays, and card deck selection.
- **Keywords**: card stack, stacked cards, card deck, 3D cards, card carousel, swipeable cards, z-axis layering, overlapping cards, depth effect, onboarding cards
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/card-stack
- **Markdown**: https://www.stylekit.top/api/styles/card-stack/md


### 固定侧边栏布局 (Fixed Sidebar)
- **Slug**: `sidebar-fixed`
- **Type**: layout
- **Description**: Application layout with a fixed sidebar navigation and scrollable main content area. Ideal for admin dashboards, documentation sites, dashboards, and SaaS applications.
- **Keywords**: fixed sidebar layout, sidebar navigation, admin dashboard layout, app shell, dashboard ui, side menu, persistent navigation, docs sidebar, two-column layout, SaaS dashboard, collapsible sidebar
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/sidebar-fixed
- **Markdown**: https://www.stylekit.top/api/styles/sidebar-fixed/md


### 杂志网格布局 (Magazine Grid)
- **Slug**: `magazine-grid`
- **Type**: layout
- **Description**: Multi-column grid layout inspired by print magazines, creating rich visual hierarchy through varied content block sizes. Ideal for news, blogs, and content aggregation.
- **Keywords**: magazine grid, magazine layout, editorial design, multi-column grid, CSS grid, news website design, blog layout, featured article, visual hierarchy, print-inspired, responsive grid
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/magazine-grid
- **Markdown**: https://www.stylekit.top/api/styles/magazine-grid/md


### 全屏英雄区布局 (Fullscreen Hero)
- **Slug**: `hero-fullscreen`
- **Type**: layout
- **Description**: A hero section layout with fullscreen images or video backgrounds that captures attention through stunning visuals, ideal for brand showcases, product launches, and event promotions.
- **Keywords**: fullscreen hero, hero section, hero image, video background, fullscreen background image, 100vh, above the fold, immersive landing page, brand showcase, product launch page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/hero-fullscreen
- **Markdown**: https://www.stylekit.top/api/styles/hero-fullscreen/md


### 粘土拟态 (Claymorphism)
- **Slug**: `claymorphism`
- **Type**: visual
- **Description**: A soft clay-textured design that creates adorable 3D effects through extra-large border radii, combined inner and outer shadows, and gentle gradients, ideal for children's apps and playful products.
- **Keywords**: claymorphism, clay ui, clay effect, soft 3D, inner shadow, big border radius, cute ui, playful design, kids app, pastel gradient
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/claymorphism
- **Markdown**: https://www.stylekit.top/api/styles/claymorphism/md


### Notion 风格 (Notion Style)
- **Slug**: `notion-style`
- **Type**: visual
- **Description**: A minimalist and clean document tool style emphasizing content readability and functionality, using subtle borders, gentle hover effects, and clear typographic hierarchy.
- **Keywords**: Notion style, Notion ui, document tool, minimal ui, clean design, note-taking app, productivity tool, workspace ui, sidebar navigation, kanban board, subtle borders, typography hierarchy
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/notion-style
- **Markdown**: https://www.stylekit.top/api/styles/notion-style/md


### Stripe 风格 (Stripe Style)
- **Slug**: `stripe-style`
- **Type**: visual
- **Description**: A refined and professional fintech style featuring Stripe purple as the primary color, complemented by gradient grid backgrounds, elegant card shadows, and smooth animations, ideal for payment products and developer tools.
- **Keywords**: Stripe design, Stripe style website, fintech ui, SaaS landing page, gradient mesh, payment page design, developer tools, purple gradient, layered card shadows, tech startup landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/stripe-style
- **Markdown**: https://www.stylekit.top/api/styles/stripe-style/md


### Apple 风格 (Apple Style)
- **Slug**: `apple-style`
- **Type**: visual
- **Description**: An ultra-minimalist premium design style with generous whitespace, refined border radii, subtle shadows, and SF Pro-style typography, conveying the quality feel of high-end tech products.
- **Keywords**: Apple style, Apple design, minimalist website, premium minimal, SF Pro font, generous whitespace, clean ui, product landing page, subtle shadows, rounded corners, Cupertino design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/apple-style
- **Markdown**: https://www.stylekit.top/api/styles/apple-style/md


### 像素艺术风 (Pixel Art)
- **Slug**: `pixel-art`
- **Type**: visual
- **Description**: A retro 8-bit pixel game style with no border radii, pixelated borders, hard-edge shadows, and vivid 8-bit color palettes, ideal for games, retro apps, and indie developer projects.
- **Keywords**: pixel art, 8-bit design, retro game website, pixelated ui, pixel font, hard-edge shadows, 8-bit color palette, image-rendering pixelated, arcade style, indie game website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/pixel-art
- **Markdown**: https://www.stylekit.top/api/styles/pixel-art/md


### 霓虹复古 (Neon Retro)
- **Slug**: `vaporwave`
- **Type**: visual
- **Description**: 80s-90s retro-futuristic aesthetics with pink-purple gradients, neon colors, and glitch art effects. Includes Vaporwave, Synthwave, and Cyberpunk variants.
- **Keywords**: vaporwave, synthwave, retrowave, neon retro, 80s aesthetic, cyberpunk, neon gradient, glitch art, retro futurism, outrun, neon grid, vaporwave website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/vaporwave
- **Markdown**: https://www.stylekit.top/api/styles/vaporwave/md


### 千禧风格 (Y2K)
- **Slug**: `y2k`
- **Type**: visual
- **Description**: Early-2000s futuristic aesthetic with metallic textures, transparent plastics, bubble elements, silver and rainbow gradients, brimming with optimistic visions of the digital age.
- **Keywords**: Y2K, Y2K aesthetic, retro futurism, early 2000s design, chrome metallic, iridescent gradient, holographic, transparent plastic, bubble elements, cyber Y2K, rainbow gradient, nostalgic web design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/y2k
- **Markdown**: https://www.stylekit.top/api/styles/y2k/md


### 孟菲斯风格 (Memphis)
- **Slug**: `memphis`
- **Type**: visual
- **Description**: An 80s Italian design movement featuring bold geometric shapes, vivid contrasting colors, irregular forms, and playful patterns that break traditional design rules.
- **Keywords**: Memphis design, Memphis Group, 80s design, postmodern design, geometric shapes, squiggle patterns, clashing colors, playful ui, Ettore Sottsass, retro pop, bold patterns
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/memphis
- **Markdown**: https://www.stylekit.top/api/styles/memphis/md


### 装饰艺术风格 (Art Deco)
- **Slug**: `art-deco`
- **Type**: visual
- **Description**: A luxurious design style from the 1920s-30s featuring geometric symmetrical patterns, gold decorations, elegant lines, and premium textures, conveying sophistication and prosperity.
- **Keywords**: Art Deco, Art Deco website, 1920s design, Gatsby style, gold and black, geometric patterns, sunburst motif, luxury branding, vintage luxury, gold foil, elegant typography
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/art-deco
- **Markdown**: https://www.stylekit.top/api/styles/art-deco/md


### 包豪斯风格 (Bauhaus)
- **Slug**: `bauhaus`
- **Type**: visual
- **Description**: The design philosophy of the German Bauhaus school, emphasizing functionalism, geometric forms, and primary color usage -- a modernist classic where form follows function.
- **Keywords**: Bauhaus, Bauhaus design, geometric shapes, primary colors, functionalism, form follows function, modernist design, red yellow blue, geometric poster, minimal geometric, German design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/bauhaus
- **Markdown**: https://www.stylekit.top/api/styles/bauhaus/md


### 拟物设计 (Skeuomorphism)
- **Slug**: `skeuomorphism`
- **Type**: visual
- **Description**: A digital design style that simulates real-world objects through textures, lighting, and materials to mimic physical items, bringing familiarity and intuitive experiences.
- **Keywords**: skeuomorphism, skeuomorphic design, realistic ui, 3D buttons, leather texture, brushed metal, embossed effect, early iOS design, tactile interface, realistic shadows, vintage Apple ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/skeuomorphism
- **Markdown**: https://www.stylekit.top/api/styles/skeuomorphism/md


### 瑞士国际风格 (Swiss International)
- **Slug**: `swiss-style`
- **Type**: visual
- **Description**: A rationalist design style originating from Switzerland, emphasizing grid systems, sans-serif typography, clear hierarchy, and objective information delivery -- a cornerstone of modern graphic design.
- **Keywords**: Swiss style, Swiss design, International Typographic Style, Helvetica, grid system, sans-serif typography, rational design, typographic hierarchy, modernist design, minimalist layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/swiss-style
- **Markdown**: https://www.stylekit.top/api/styles/swiss-style/md


### 吉卜力风格 (Ghibli Style)
- **Slug**: `ghibli-style`
- **Type**: visual
- **Description**: A design style inspired by Studio Ghibli animations, featuring warm soft tones, hand-drawn textures, natural elements, and a dreamy atmosphere that conveys healing and poetry.
- **Keywords**: Ghibli style, Studio Ghibli aesthetic, Miyazaki, anime illustration, hand-drawn texture, watercolor illustration, whimsical design, storybook illustration, nature-inspired palette, cozy aesthetic, dreamy landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/ghibli-style
- **Markdown**: https://www.stylekit.top/api/styles/ghibli-style/md


### 材料设计 (Material Design)
- **Slug**: `material-design`
- **Type**: visual
- **Description**: Google's design system based on the metaphor of paper and ink, emphasizing hierarchy, motion, bold colors, and responsive interactions -- the standard for modern mobile design.
- **Keywords**: Material Design, Material UI, Google design system, elevation shadows, ripple effect, floating action button, material components, Android ui, card layout, motion design, mobile app design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/material-design
- **Markdown**: https://www.stylekit.top/api/styles/material-design/md


### 流利设计 (Fluent Design)
- **Slug**: `fluent-design`
- **Type**: visual
- **Description**: Microsoft's design system integrating five key elements -- light, depth, motion, material, and scale -- to create natural and intuitive cross-platform experiences.
- **Keywords**: Fluent Design, Microsoft Fluent, acrylic material, reveal highlight, Windows 11 ui, backdrop blur, depth and light, fluent ui, motion design, desktop app ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/fluent-design
- **Markdown**: https://www.stylekit.top/api/styles/fluent-design/md


### 漫画风格 (Comic Style)
- **Slug**: `comic-style`
- **Type**: visual
- **Description**: A design style inspired by comic books and manga, featuring heavy ink-line borders, halftone fills, speech bubbles, action lines, and panel layouts, full of narrative and visual impact.
- **Keywords**: comic style, comic book ui, manga, halftone dots, speech bubbles, ink outlines, comic panels, action lines, pop art comic, Ben-Day dots
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/comic-style
- **Markdown**: https://www.stylekit.top/api/styles/comic-style/md


### 铅笔手绘风 (Sketch Style)
- **Slug**: `sketch-style`
- **Type**: visual
- **Description**: A design style simulating pencil hand-drawing, with irregular line borders, paper texture backgrounds, handwritten font feel, sketch shadows, and doodle decorations, conveying a warm and approachable handcrafted texture.
- **Keywords**: hand-drawn ui, sketch style, pencil sketch, doodle design, sketchy borders, handwritten font, paper texture, sketchbook aesthetic, notebook style, wireframe sketch, hand-drawn portfolio
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/sketch-style
- **Markdown**: https://www.stylekit.top/api/styles/sketch-style/md


### 水彩画风 (Watercolor Style)
- **Slug**: `watercolor-style`
- **Type**: visual
- **Description**: A design style inspired by watercolor painting, featuring soft color gradients, blurred edge effects, paper texture backgrounds, and flowing color diffusion, conveying artistry and poetry.
- **Keywords**: watercolor, soft gradients, blurred edges, watercolor background, pastel wash, flowing colors, paper texture, artistic UI, poetic design, watercolor website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/watercolor-style
- **Markdown**: https://www.stylekit.top/api/styles/watercolor-style/md


### F型布局 (F-Pattern Layout)
- **Slug**: `f-pattern-layout`
- **Type**: layout
- **Description**: An F-pattern scanning layout based on eye-tracking research, where the user's gaze starts from the top-left, scans horizontally across the top, then moves downward, ideal for content-heavy pages, blog posts, and news listings.
- **Keywords**: f-pattern layout, f-shaped scanning, eye tracking, reading pattern, content-heavy layout, blog layout, news website, ux layout patterns, scannable content, left-aligned layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/f-pattern-layout
- **Markdown**: https://www.stylekit.top/api/styles/f-pattern-layout/md


### Z型布局 (Z-Pattern Layout)
- **Slug**: `z-pattern-layout`
- **Type**: layout
- **Description**: A Z-pattern scanning layout based on eye-tracking, where the gaze moves from top-left to top-right, diagonally to bottom-left, then to bottom-right, forming a Z-path. Ideal for landing pages, marketing pages, and concise information displays.
- **Keywords**: z-pattern layout, z-pattern, eye tracking design, visual scanning path, landing page layout, CTA placement, visual hierarchy, marketing page design, hero section layout, conversion focused design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/z-pattern-layout
- **Markdown**: https://www.stylekit.top/api/styles/z-pattern-layout/md


### 圣杯布局 (Holy Grail Layout)
- **Slug**: `holy-grail-layout`
- **Type**: layout
- **Description**: The classic three-column web layout consisting of a fixed header, a three-column middle section (left navigation, main content, right sidebar), and a fixed footer -- a foundational layout paradigm in web design.
- **Keywords**: holy grail layout, three column layout, classic web layout, CSS grid, flexbox, sidebar navigation, fixed header and footer, responsive layout, news website, blog layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/holy-grail-layout
- **Markdown**: https://www.stylekit.top/api/styles/holy-grail-layout/md


### 仪表盘布局 (Dashboard Layout)
- **Slug**: `dashboard-layout`
- **Type**: layout
- **Description**: A data-driven dashboard layout featuring side navigation, top toolbar, multi-module data panels, and chart areas -- ideal for admin systems, data analytics platforms, and monitoring dashboards.
- **Keywords**: dashboard, dashboard layout, admin panel, data visualization, analytics dashboard, side navigation, KPI cards, charts, monitoring ui, admin template, grid layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/dashboard-layout
- **Markdown**: https://www.stylekit.top/api/styles/dashboard-layout/md


### 赛博朋克霓虹 (Cyberpunk Neon)
- **Slug**: `cyberpunk-neon`
- **Type**: visual
- **Description**: A futuristic cyberpunk style with neon glow effects, dark backgrounds, and high-tech UI elements. Ideal for games, tech products, and creative studios.
- **Keywords**: cyberpunk, neon glow, cyberpunk ui, futuristic interface, sci-fi, game ui, dark background, high contrast, glowing buttons, tech landing page, night city aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cyberpunk-neon
- **Markdown**: https://www.stylekit.top/api/styles/cyberpunk-neon/md


### 合成波 (Synthwave)
- **Slug**: `synthwave`
- **Type**: visual
- **Description**: 80s retro-futuristic music aesthetic with neon pink-purple palette, grid horizon, sunset gradients, and vintage tech feel -- brimming with nostalgic visions of the future.
- **Keywords**: synthwave, retrowave, outrun, 80s retro, neon grid, grid horizon, sunset gradient, retro futurism, neon pink purple, vaporwave
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/synthwave
- **Markdown**: https://www.stylekit.top/api/styles/synthwave/md


### 柔和野兽派 (Neo-Brutalist Soft)
- **Slug**: `neo-brutalist-soft`
- **Type**: visual
- **Description**: A gentler version of Neo-Brutalist. Retains hard-edge shadows and no-rounded-corner characteristics, but uses softer colors, thinner borders, and milder contrast.
- **Keywords**: soft neobrutalism, soft brutalism, neo-brutalism, pastel brutalist, pastel colors, thin borders, hard shadows, muted contrast, gentle ui, note-taking app, minimal blog
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neo-brutalist-soft
- **Markdown**: https://www.stylekit.top/api/styles/neo-brutalist-soft/md


### 俏皮野兽派 (Neo-Brutalist Playful)
- **Slug**: `neo-brutalist-playful`
- **Type**: visual
- **Description**: A lively version of Neo-Brutalist. Retains core characteristics while adding more colors, rotated/tilted elements, icon decorations, and playful micro-interactions -- ideal for youth-oriented brands.
- **Keywords**: playful neobrutalism, neo-brutalism, colorful brutalist, rotated elements, tilted cards, hard shadows, bold borders, sticker decorations, playful ui, youthful branding, fun landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neo-brutalist-playful
- **Markdown**: https://www.stylekit.top/api/styles/neo-brutalist-playful/md


### 新艺术运动风 (Art Nouveau)
- **Slug**: `art-nouveau`
- **Type**: visual
- **Description**: Organic curve aesthetics from the late 19th century, characterized by flowing vine patterns, natural floral elements, Mucha-style poster decorations, and elegant serif typography -- conveying the harmony of nature and art.
- **Keywords**: Art Nouveau, Art Nouveau website, Mucha style, organic curves, floral ornament, vine patterns, whiplash line, vintage poster, decorative border, botanical illustration, ornamental design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/art-nouveau
- **Markdown**: https://www.stylekit.top/api/styles/art-nouveau/md


### 超现实主义风 (Surrealism)
- **Slug**: `surrealism`
- **Type**: visual
- **Description**: Inspired by surrealist masters like Dali -- dreamlike scene compositions, illogical spatial relationships, melting and morphing forms, and unexpected color combinations create a mysterious and captivating visual experience.
- **Keywords**: surrealism, surrealist design, dreamlike ui, Dali inspired, melting shapes, dream logic, distorted forms, abstract art website, subconscious, artistic portfolio
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/surrealism
- **Markdown**: https://www.stylekit.top/api/styles/surrealism/md


### 浮世绘数字风 (Ukiyo-e Digital)
- **Slug**: `ukiyo-e-digital`
- **Type**: visual
- **Description**: Inspired by Japanese ukiyo-e woodblock prints, featuring indigo, vermilion, and gold leaf as primary colors, flat design, bold outlines, wave patterns, and Hokusai-style composition -- blending traditional Eastern aesthetics into modern digital interfaces.
- **Keywords**: ukiyo-e, Japanese woodblock print, Hokusai, great wave, ukiyo-e web design, Japanese art style, flat illustration, bold outlines, wave pattern, Edo period, indigo and vermilion
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/ukiyo-e-digital
- **Markdown**: https://www.stylekit.top/api/styles/ukiyo-e-digital/md


### 哥特式风 (Gothic)
- **Slug**: `gothic`
- **Type**: visual
- **Description**: Medieval Gothic architectural aesthetics -- pointed arches, rose windows, manuscript decorations, and cathedral atmosphere. Deep purple and blood red palette with gold ornamental lines, filled with dark and solemn mystery.
- **Keywords**: gothic design, gothic aesthetic, medieval, blackletter font, gothic architecture, illuminated manuscript, ornamental border, rose window, dark moody palette, dark romanticism
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/gothic
- **Markdown**: https://www.stylekit.top/api/styles/gothic/md


### Outrun 复古未来 (Outrun)
- **Slug**: `outrun`
- **Type**: visual
- **Description**: 80s sunsets, palm tree silhouettes, sports cars, grid horizons, and retro wave aesthetics. Magenta and purple neon with cyan skies -- brimming with speed and nostalgic futurism.
- **Keywords**: outrun, synthwave, retrowave, 80s retro, neon sunset, grid horizon, palm trees, retro futurism, vaporwave, Miami Vice, chrome text, arcade
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/outrun
- **Markdown**: https://www.stylekit.top/api/styles/outrun/md


### 暗黑学院风 (Dark Academia)
- **Slug**: `dark-academia`
- **Type**: visual
- **Description**: Classical university libraries, leather-bound books, classical literature, and vintage campus aesthetics. Deep brown and dark green palette with antique gold accents -- a warm and contemplative scholarly atmosphere.
- **Keywords**: dark academia, dark academia aesthetic, classical library, Gothic, vintage scholarly, leather texture, antique gold, Victorian, serif typography, literary website, moody brown palette
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/dark-academia
- **Markdown**: https://www.stylekit.top/api/styles/dark-academia/md


### 田园核风 (Cottagecore)
- **Slug**: `cottagecore`
- **Type**: visual
- **Description**: Pastoral countryside aesthetics with floral patterns, embroidery textures, mushroom elements, and cozy homey feel. Soft serif fonts, rounded corners, and warm natural colors evoke a longing for simple rural life.
- **Keywords**: cottagecore, cottagecore aesthetic, pastoral, countryside, floral pattern, rustic, farmhouse, cozy web design, vintage botanical, embroidery texture, warm earth tones
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cottagecore
- **Markdown**: https://www.stylekit.top/api/styles/cottagecore/md


### Risograph 印刷风 (Risograph)
- **Slug**: `risograph`
- **Type**: visual
- **Description**: The distinctive aesthetics of Risograph printing -- 2-3 color overprint effects, halftone dots, registration misalignment, and limited palette, presenting a unique print texture and handmade batch feel.
- **Keywords**: risograph, riso print, riso aesthetic, overprint effect, halftone texture, misregistration, limited color palette, zine design, fluorescent ink, grainy texture, screen print style
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/risograph
- **Markdown**: https://www.stylekit.top/api/styles/risograph/md


### 机甲风 (Mecha)
- **Slug**: `mecha`
- **Type**: visual
- **Description**: Design style inspired by mecha anime like Gundam/EVA -- tech panels, warning signs, mechanical textures, military green and navy blue base with warning yellow and danger red, brimming with industrial power.
- **Keywords**: mecha, mecha ui, Gundam, Evangelion, sci-fi hud, cockpit interface, control panel ui, warning stripes, military industrial design, hazard yellow, anime ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/mecha
- **Markdown**: https://www.stylekit.top/api/styles/mecha/md


### 哥特萝莉风 (Gothic Lolita)
- **Slug**: `gothic-lolita`
- **Type**: visual
- **Description**: Victorian lace, black ribbons, crosses and roses in dark elegance -- a dark romantic aesthetic blending Gothic architectural ornamentation with Lolita's exquisite details.
- **Keywords**: gothic lolita, lolita fashion, Victorian lace, Harajuku fashion, dark elegance, ornate frame, rose motif, vintage doll aesthetic, dark feminine design, gothic romance
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/gothic-lolita
- **Markdown**: https://www.stylekit.top/api/styles/gothic-lolita/md


### 赛博中华风 (Cyber Chinese)
- **Slug**: `cyber-chinese`
- **Type**: visual
- **Description**: A collision and fusion of traditional Chinese aesthetics with cyberpunk sci-fi -- vermilion and gold paired with neon blue-purple, dragon-phoenix seals intertwined with neon lanterns in a futuristic Eastern fantasy.
- **Keywords**: cyber chinese, chinese cyberpunk, guochao, neo-chinese style, oriental futurism, neon lantern, vermilion and gold, dragon phoenix motif, east asian web design, futuristic oriental
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cyber-chinese
- **Markdown**: https://www.stylekit.top/api/styles/cyber-chinese/md


### 酸性平面设计 (Acid Graphics)
- **Slug**: `acid-graphics`
- **Type**: visual
- **Description**: High-saturation fluorescent colors, distorted typography, liquid flowing forms, and psychedelic visuals. Rooted in rave culture and underground club aesthetics, presenting rebellion and experimentation through intense visual impact.
- **Keywords**: acid graphics, acid design, psychedelic design, rave aesthetic, rave poster, y2k aesthetic, fluorescent colors, acid green, distorted typography, experimental typography, chrome text, op art
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/acid-graphics
- **Markdown**: https://www.stylekit.top/api/styles/acid-graphics/md


### 手绘涂鸦风 (Hand-Drawn Doodle)
- **Slug**: `hand-drawn-doodle`
- **Type**: visual
- **Description**: Hand-drawn lines, doodle illustrations, irregular shapes, and handwritten fonts. Like designs casually sketched in a notebook -- full of creativity and fun, conveying a warm and approachable handmade feel.
- **Keywords**: hand-drawn, doodle style, sketch illustration, handwritten font, notebook aesthetic, scribble, hand-drawn border, marker pen texture, scrapbook elements, playful illustration, sketchnote
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/hand-drawn-doodle
- **Markdown**: https://www.stylekit.top/api/styles/hand-drawn-doodle/md


### 瑞士海报风 (Swiss Poster)
- **Slug**: `swiss-poster`
- **Type**: visual
- **Description**: Bold typography, grid alignment, primary color blocks, and experimental layouts. Rooted in the Swiss International Style poster design tradition, building information delivery through oversized type and strong visual hierarchy. Differs from swiss-style by focusing more on poster-level experimental large-scale typography.
- **Keywords**: Swiss poster, Swiss poster design, oversized typography, big type, experimental typography, typographic poster, International Typographic Style, grid layout, color blocks, bold typography, poster layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/swiss-poster
- **Markdown**: https://www.stylekit.top/api/styles/swiss-poster/md


### 水彩艺术风 (Watercolor Art)
- **Slug**: `watercolor-art`
- **Type**: visual
- **Description**: Authentic watercolor aesthetics with organic bleeding edges, pigment pooling effects, paper texture overlays, and botanical watercolor accents, creating a natural and organic visual experience reminiscent of hand-painted watercolors.
- **Keywords**: watercolor art, watercolor painting, paint bleed, pigment pooling, botanical watercolor, wet on wet, hand painted, organic edges, paper texture, watercolor illustration, artistic web design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/watercolor-art
- **Markdown**: https://www.stylekit.top/api/styles/watercolor-art/md


### 油画印象派风 (Impressionist Oil)
- **Slug**: `impressionist-oil`
- **Type**: visual
- **Description**: Inspired by Impressionist masters like Monet and Renoir, featuring bold brushstroke textures, dappled light effects, pointillist colors, and warm canvas textures for a rich, oil-painting visual experience.
- **Keywords**: impressionist design, oil painting style, Monet, brushstroke texture, canvas texture, impasto, painterly ui, dappled light, pointillism, artist portfolio
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/impressionist-oil
- **Markdown**: https://www.stylekit.top/api/styles/impressionist-oil/md


### 沉浸摄影 (Immersive Photo)
- **Slug**: `immersive-photo`
- **Type**: visual
- **Description**: Photography is the interface. Full-bleed images fill the viewport with text floating over readability scrims; a slow Ken Burns drift lets stills breathe, a blur-up placeholder loads first and the real frame fades in. The image is the content, not the backdrop.
- **Keywords**: immersive photography, full-bleed images, fullscreen hero, Ken Burns effect, text over image, scrim overlay, photo essay, photography website, blur-up placeholder, visual storytelling
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/immersive-photo
- **Markdown**: https://www.stylekit.top/api/styles/immersive-photo/md


### 拼贴艺术风 (Collage Art)
- **Slug**: `collage-art`
- **Type**: visual
- **Description**: Magazine collage and mixed-media aesthetics with paper cutouts, multi-layer stacking, torn paper edges, and mixed typography, creating a visually impactful handcrafted creative experience.
- **Keywords**: collage art, paper collage, paper cutout, torn paper, mixed media, scrapbook, magazine cutout, washi tape, zine aesthetic, Dadaism, layered textures
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/collage-art
- **Markdown**: https://www.stylekit.top/api/styles/collage-art/md


### 故障艺术风 (Glitch Art)
- **Slug**: `glitch-art`
- **Type**: visual
- **Description**: An avant-garde cyberpunk aesthetic that embraces digital errors, severe chromatic aberration, and jarring screen-tearing effects.
- **Keywords**: glitch art, glitch effect, RGB split, chromatic aberration, scanlines, VHS aesthetic, datamosh, screen tear, cyberpunk, digital distortion, glitch text animation
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/glitch-art
- **Markdown**: https://www.stylekit.top/api/styles/glitch-art/md


### 视觉小说风 (Visual Novel)
- **Slug**: `visual-novel`
- **Type**: visual
- **Description**: A design style inspired by ADV visual novel game UI, featuring semi-transparent dialogue panels, character nameplate badges, ornate corner decorations, branching choice buttons, and save screen interfaces for an immersive interactive storytelling experience.
- **Keywords**: visual novel, visual novel UI, dialogue box, ADV game, character sprite, dating sim interface, choice buttons, interactive fiction, game UI design, anime game UI, nameplate badge
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/visual-novel
- **Markdown**: https://www.stylekit.top/api/styles/visual-novel/md


### 少女漫画风 (Shoujo Manga)
- **Slug**: `shoujo-manga`
- **Type**: visual
- **Description**: 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.
- **Keywords**: shoujo manga, shojo aesthetic, manga style ui, screentone pattern, sakura pink, kawaii design, romantic anime, sparkle effects, ribbon banner, flower frame, pastel pink palette, girly aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/shoujo-manga
- **Markdown**: https://www.stylekit.top/api/styles/shoujo-manga/md


### 赛博动漫风 (Cyber Anime)
- **Slug**: `cyber-anime`
- **Type**: visual
- **Description**: Fusing cyberpunk sci-fi UI with anime aesthetics, featuring HUD overlays, holographic projection panels, mecha-frame borders, and multi-layer neon glow effects for a futuristic anime interface style.
- **Keywords**: cyber anime, anime ui, HUD interface, mecha, holographic ui, sci-fi dashboard, neon glow, scan lines, futuristic hud, game ui, cyberpunk anime
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cyber-anime
- **Markdown**: https://www.stylekit.top/api/styles/cyber-anime/md


### 像素动漫风 (Pixel Anime)
- **Slug**: `pixel-anime`
- **Type**: visual
- **Description**: Merging classic JRPG game UI with pixel anime aesthetics, featuring RPG dialogue boxes, status bars, pixel borders, and NES color palette for a nostalgic 8-bit game interface style.
- **Keywords**: pixel anime, JRPG ui, retro game ui, rpg dialogue box, 8-bit interface, 16-bit menu, NES color palette, pixel borders, game hud design, retro rpg aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/pixel-anime
- **Markdown**: https://www.stylekit.top/api/styles/pixel-anime/md


### 日系清新风 (Japanese Fresh)
- **Slug**: `japanese-fresh`
- **Type**: visual
- **Description**: Centered on Ma (space) philosophy, wabi-sabi aesthetics, and extreme breathing room, using hairline borders, botanical line-drawing accents, and minimal warm neutral colors to create a serene, healing design experience.
- **Keywords**: Japanese minimalism, wabi-sabi, Ma spacing, japandi, hairline borders, botanical line art, warm neutrals, zen aesthetic, calm design, airy layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/japanese-fresh
- **Markdown**: https://www.stylekit.top/api/styles/japanese-fresh/md


### 霓虹武士风 (Neon Samurai)
- **Slug**: `neon-samurai`
- **Type**: visual
- **Description**: A collision of traditional Japanese samurai aesthetics with neon cyberpunk, weaving katana slash lines, vermillion torii gate frames, calligraphy brushstrokes, and dual-color neon glow effects -- ukiyo-e meets neon lights in a futuristic urban bushido.
- **Keywords**: neon samurai, japanese cyberpunk, katana slash, torii gate, bushido, neon glow, ukiyo-e, brush strokes, diagonal accents, dark theme, gaming ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neon-samurai
- **Markdown**: https://www.stylekit.top/api/styles/neon-samurai/md


### 魔法阵风 (Magic Circle)
- **Slug**: `magic-circle`
- **Type**: visual
- **Description**: A fantasy visual style featuring concentric nested ring systems, hexagram geometric cores, runic inscriptions along circular paths, Flower of Life sacred geometry, golden radiant glow, and interwoven alchemical symbols.
- **Keywords**: magic circle, summoning circle, sacred geometry, runes, hexagram, Flower of Life, alchemy symbols, fantasy ui, arcane design, glowing rings, mystical, occult aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/magic-circle
- **Markdown**: https://www.stylekit.top/api/styles/magic-circle/md


### 赛博和风 (Cyber Wafuu)
- **Slug**: `cyber-wafuu`
- **Type**: visual
- **Description**: 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.
- **Keywords**: cyber wafuu, japanese cyberpunk, wafu design, seigaiha pattern, kintsugi, torii gate, asanoha pattern, shoji grid, neo-japanese, neon Tokyo, japanese web design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cyber-wafuu
- **Markdown**: https://www.stylekit.top/api/styles/cyber-wafuu/md


### 蒸汽朋克 (Steampunk)
- **Slug**: `steampunk`
- **Type**: visual
- **Description**: Victorian-era industrial machinery aesthetics with brass and copper metallic elements, gear mechanism decorations, and steam pipe rivet details. Ideal for retro sci-fi, industrial style, and creative showcase projects.
- **Keywords**: steampunk, steampunk ui, Victorian industrial, brass and copper, gears, clockwork, retro sci-fi, retro futurism, mechanical design, rivets, industrial aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/steampunk
- **Markdown**: https://www.stylekit.top/api/styles/steampunk/md


### 波普艺术 (Pop Art)
- **Slug**: `pop-art`
- **Type**: visual
- **Description**: Bold and vivid Pop Art style inspired by Andy Warhol and Roy Lichtenstein. Thick black outlines, halftone Ben-Day dots, comic-style speech bubbles, and highly saturated color blocks. Ideal for creative brands, pop culture, and art showcases.
- **Keywords**: pop art, Andy Warhol style, Roy Lichtenstein, halftone dots, Ben-Day dots, comic book style, speech bubbles, bold outlines, 1960s design, comic ui, saturated color blocks
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/pop-art
- **Markdown**: https://www.stylekit.top/api/styles/pop-art/md


### 太阳朋克 (Solarpunk)
- **Slug**: `solarpunk`
- **Type**: visual
- **Description**: An optimistic eco-futurism style blending nature and technology in harmonious aesthetics. Organic curves, plant elements, warm gradients, and soft rounded corners. Ideal for eco-friendly, sustainable development, and green tech products.
- **Keywords**: solarpunk, solarpunk aesthetic, eco futurism, sustainable design, green tech, organic shapes, botanical elements, solar energy, nature-inspired ui, optimistic future, green energy dashboard, eco friendly website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/solarpunk
- **Markdown**: https://www.stylekit.top/api/styles/solarpunk/md


### 日式RPG (JRPG)
- **Slug**: `jrpg`
- **Type**: visual
- **Description**: Classic Japanese RPG menu and dialogue box aesthetics with beveled borders, gradient backgrounds, status bars, and ornate frames. Ideal for game interfaces, interactive narratives, and fantasy-style products.
- **Keywords**: JRPG, RPG menu, dialogue box, health bar, beveled borders, game hud, fantasy game, retro game interface, Final Fantasy menu, inventory screen, status window
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/jrpg
- **Markdown**: https://www.stylekit.top/api/styles/jrpg/md


### 非对称网格 (Asymmetric Grid)
- **Slug**: `asymmetric-grid`
- **Type**: layout
- **Description**: A layout approach that breaks traditional symmetric grids, creating dynamic and engaging page structures through irregular column widths, overlapping elements, and visual tension. Ideal for creative portfolios, art exhibitions, and brand showcases.
- **Keywords**: asymmetric grid, broken grid layout, asymmetrical layout, irregular grid, overlapping elements, CSS grid, editorial layout, creative portfolio, visual tension, dynamic layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/asymmetric-grid
- **Markdown**: https://www.stylekit.top/api/styles/asymmetric-grid/md


### 视差滚动 (Parallax Sections)
- **Slug**: `parallax-sections`
- **Type**: layout
- **Description**: An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersive experience pages.
- **Keywords**: parallax sections, parallax scrolling website, background-attachment fixed, full-screen sections, immersive landing page, brand story website, scroll depth effect, hero parallax, layered backgrounds, scroll animation
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/parallax-sections
- **Markdown**: https://www.stylekit.top/api/styles/parallax-sections/md


### 暖色仪表盘 (Warm Dashboard)
- **Slug**: `warm-dashboard`
- **Type**: visual
- **Description**: A warm and soft dashboard design style with coral/terracotta backgrounds, cream-white cards, and gentle shadows, creating a comfortable and professional data display experience.
- **Keywords**: warm dashboard, dashboard design, terracotta, coral palette, cream white cards, soft shadows, data visualization, warm color scheme, admin panel, cozy UI
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/warm-dashboard
- **Markdown**: https://www.stylekit.top/api/styles/warm-dashboard/md


### 霓虹渐变 (Neon Gradient)
- **Slug**: `neon-gradient`
- **Type**: visual
- **Description**: Vivid gradient cards on dark backgrounds with thick colored borders and neon glow effects. Ideal for tech products, SaaS landing pages, and youth-oriented brands.
- **Keywords**: neon gradient, gradient ui, neon glow, dark background, gradient cards, glowing borders, vibrant colors, saas landing page, tech startup, futuristic ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neon-gradient
- **Markdown**: https://www.stylekit.top/api/styles/neon-gradient/md


### Apple 流动玻璃 (Apple Liquid Glass)
- **Slug**: `liquid-glass`
- **Type**: visual
- **Description**: Apple's revolutionary design language from WWDC 2025, creating an organic, fluid visual experience beyond traditional frosted glass through SVG refraction filters, rainbow edge halos, fluid morphing animations, and multi-layer glass stacking.
- **Keywords**: liquid glass, Apple Liquid Glass, glassmorphism, frosted glass, glass ui, refraction effect, SVG displacement filter, backdrop blur, rainbow edge glow, fluid morphing, WWDC 2025
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/liquid-glass
- **Markdown**: https://www.stylekit.top/api/styles/liquid-glass/md


### 北欧极简风 (Scandinavian Minimalism)
- **Slug**: `scandinavian`
- **Type**: visual
- **Description**: Warm minimalist design rooted in Scandinavian tradition, emphasizing natural materials, generous whitespace, wood tones, and Hygge living aesthetics for a serene, cozy visual experience.
- **Keywords**: scandinavian design, nordic minimalism, hygge, scandi style, warm minimalism, natural wood tones, muted color palette, airy whitespace, danish design, cozy aesthetic, clean minimal ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/scandinavian
- **Markdown**: https://www.stylekit.top/api/styles/scandinavian/md


### 赛璐璐动画风 (Cel Shading)
- **Slug**: `cel-shading`
- **Type**: visual
- **Description**: A rendering style inspired by traditional cel animation, featuring bold black outlines, flat color fills, hard shadows without gradients, and vivid saturated colors full of cartoon and game energy.
- **Keywords**: cel shading, toon shading, cartoon ui, bold outlines, flat shading, hard shadows, anime style, comic outline, game ui, saturated colors
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cel-shading
- **Markdown**: https://www.stylekit.top/api/styles/cel-shading/md


### 电影视频首屏 (Cinematic Video Hero)
- **Slug**: `cinematic-video-hero`
- **Type**: visual
- **Description**: A cinematic opener led by a short looping video. A poster frame paints first as the LCP; the muted video autoplays and loops only once in view; text sits on a readability scrim. Dark grading and slow motion build a trailer-like immersive entrance.
- **Keywords**: video hero, cinematic hero, background video, hero video section, video landing page, autoplay loop, poster frame, video banner, dark cinematic, trailer style
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cinematic-video-hero
- **Markdown**: https://www.stylekit.top/api/styles/cinematic-video-hero/md


### 侘寂风 (Wabi-Sabi)
- **Slug**: `wabi-sabi`
- **Type**: visual
- **Description**: A digital expression of Japanese Wabi-Sabi aesthetics, celebrating the beauty of imperfection, the elegance of natural aging, and the zen of extreme whitespace, conveyed through ink tones, tea hues, and paper textures.
- **Keywords**: wabi-sabi, wabi sabi design, Japanese minimalism, zen aesthetic, imperfect beauty, negative space, paper texture, ink wash, earth tones, Japanese web design, organic imperfection
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/wabi-sabi
- **Markdown**: https://www.stylekit.top/api/styles/wabi-sabi/md


### 枯山水 (Zen Garden)
- **Slug**: `zen-garden`
- **Type**: visual
- **Description**: 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.
- **Keywords**: zen garden, karesansui, Japanese zen design, dry landscape garden, raked sand pattern, Japanese minimalism, wabi-sabi, meditation app design, tranquil ui, moss green palette, zen aesthetic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/zen-garden
- **Markdown**: https://www.stylekit.top/api/styles/zen-garden/md


### 科幻HUD (Sci-Fi HUD)
- **Slug**: `sci-fi-hud`
- **Type**: visual
- **Description**: A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experience of operating high-tech equipment.
- **Keywords**: sci-fi HUD, HUD interface, heads-up display, futuristic ui, FUI, holographic ui, glowing borders, radar screen, space command center, scanline effect, sci-fi dashboard, game hud
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/sci-fi-hud
- **Markdown**: https://www.stylekit.top/api/styles/sci-fi-hud/md


### 滚动叙事 (Scrollytelling)
- **Slug**: `scrollytelling`
- **Type**: layout
- **Description**: Scrolling is the narrative timeline. A sticky canvas pins to the viewport while text steps scroll past it, each step triggering a state change — numbers count, shapes morph, layers light up. Information reveals frame by frame with reading progress, like a New York Times data feature.
- **Keywords**: scrollytelling, scroll-driven storytelling, scroll animation, sticky scroll, data journalism, narrative visualization, scroll-triggered reveal, long-form feature, interactive story, reading progress bar, stepper layout
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/scrollytelling
- **Markdown**: https://www.stylekit.top/api/styles/scrollytelling/md


### 可爱极简 (Kawaii Minimal)
- **Slug**: `kawaii-minimal`
- **Type**: visual
- **Description**: A gentle style blending Japanese kawaii culture with minimalist design. Soft pastel palettes, rounded shapes, airy whitespace, and delicate micro-interactions, ideal for lifestyle apps, children's products, and creative tools.
- **Keywords**: kawaii, cute design, pastel colors, rounded corners, soft ui, cute minimalism, children's app, lifestyle app, micro-interactions, friendly interface
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/kawaii-minimal
- **Markdown**: https://www.stylekit.top/api/styles/kawaii-minimal/md


### 动力学构成主义 (Kinetic Constructivism)
- **Slug**: `kinetic-constructivism`
- **Type**: visual
- **Description**: Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit, triangles swing like pendulums, blocks march to a beat. The kinematics descend from El Lissitzky and Rodchenko posters; the rhythm comes from the machine itself.
- **Keywords**: kinetic constructivism, constructivist design, motion graphics, animated geometry, El Lissitzky, Rodchenko, soviet poster, bauhaus geometry, diagonal composition, mechanical motion, flat color blocks, geometric animation, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/kinetic-constructivism
- **Markdown**: https://www.stylekit.top/api/styles/kinetic-constructivism/md


### 故障广播 (Broadcast Glitch)
- **Slug**: `broadcast-glitch`
- **Type**: visual
- **Description**: The motion packaging of a dying broadcast signal. On CRT black, scanlines crawl, RGB channels split into red-cyan jitter, SMPTE color bars sweep, and the picture occasionally jumps like bad tracking. This is the revival of 90s TV idents and VHS glitch art — not a synthwave sunset, but a broken signal itself glowing.
- **Keywords**: broadcast glitch, glitch art, CRT, scanlines, VHS, test card, chromatic aberration, channel splitting, tv ident, retro broadcast, motion graphics, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/broadcast-glitch
- **Markdown**: https://www.stylekit.top/api/styles/broadcast-glitch/md


### 动力学排印 (Kinetic Typography)
- **Slug**: `kinetic-typography`
- **Type**: visual
- **Description**: Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a single signal orange points the way.
- **Keywords**: kinetic typography, animated typography, text animation, variable fonts, staggered text reveal, marquee text, big type, scroll-driven animation, motion design, type-driven layout, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/kinetic-typography
- **Markdown**: https://www.stylekit.top/api/styles/kinetic-typography/md


### 黑色电影 (Film Noir)
- **Slug**: `film-noir`
- **Type**: visual
- **Description**: A dramatic visual style drawn from classic 1940-50s film noir. Extreme light-dark contrast, deep grayscale layers, diagonal shadows, and a mysterious atmosphere, suited for story-driven products, photography portfolios, and premium brands.
- **Keywords**: film noir, noir aesthetic, black and white, chiaroscuro, high contrast, dramatic shadows, monochrome, 1940s cinema, moody dark theme, spotlight effect, photography portfolio
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/film-noir
- **Markdown**: https://www.stylekit.top/api/styles/film-noir/md


### 街机CRT (Arcade CRT)
- **Slug**: `arcade-crt`
- **Type**: visual
- **Description**: 80-90s arcade monitor aesthetics featuring scanlines, screen curvature, neon glow, and RGB chromatic aberration effects. Ideal for gaming, retro tech, and creative projects.
- **Keywords**: CRT effect, arcade style, scanlines, retro gaming ui, CRT screen, neon glow, chromatic aberration, pixel font, 80s arcade, phosphor glow, screen curvature, retro game website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/arcade-crt
- **Markdown**: https://www.stylekit.top/api/styles/arcade-crt/md


### Frutiger Aero (Frutiger Aero)
- **Slug**: `frutiger-aero`
- **Type**: visual
- **Description**: Glass-textured aesthetics from the Windows Vista/7 era, blending sky-blue gradients, translucent frosted glass panels, and natural elements for a fresh, airy digital-nature feel.
- **Keywords**: Frutiger Aero, aero glass, Windows Vista aesthetic, glossy ui, sky blue gradient, translucent glass, frosted glass, Y2K design, glossy buttons, nature tech, bubbles
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/frutiger-aero
- **Markdown**: https://www.stylekit.top/api/styles/frutiger-aero/md


### 反设计 (Anti-Design)
- **Slug**: `anti-design`
- **Type**: visual
- **Description**: An experimental brutalist style that deliberately breaks traditional UI conventions, with ultra-thick borders, high-saturation colors, and irregular typography.
- **Keywords**: anti-design, brutalist web design, neo brutalism, punk aesthetic, experimental ui, thick black borders, hard shadows, clashing colors, rotated text, raw design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/anti-design
- **Markdown**: https://www.stylekit.top/api/styles/anti-design/md


### 网页粗野主义 (Brutalist Web)
- **Slug**: `brutalist-web`
- **Type**: visual
- **Description**: A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form.
- **Keywords**: brutalist web design, web brutalism, raw html, 90s web, unstyled html, system fonts, blue links, content-first, lo-fi, plain text website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/brutalist-web
- **Markdown**: https://www.stylekit.top/api/styles/brutalist-web/md


### 全息渐变 (Holographic)
- **Slug**: `holographic`
- **Type**: visual
- **Description**: Rainbow spectrum iridescent gradient aesthetics simulating holographic prismatic refraction and dynamic light effects for an otherworldly iridescent experience.
- **Keywords**: holographic, iridescent, holo foil, rainbow gradient, prismatic effect, color spectrum, conic gradient, pearlescent, color-shifting, Y2K aesthetic, shimmer effect
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/holographic
- **Markdown**: https://www.stylekit.top/api/styles/holographic/md


### 生成艺术 (Generative Art)
- **Slug**: `generative-art`
- **Type**: visual
- **Description**: Algorithm-driven procedural visual aesthetics using mathematical functions, noise textures, and parametric graphics to create unique dynamic interfaces. Ideal for creative coding, data visualization, and art projects.
- **Keywords**: generative art, creative coding, algorithmic design, procedural graphics, perlin noise, particle systems, fractals, p5.js, code art, data visualization, parametric design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/generative-art
- **Markdown**: https://www.stylekit.top/api/styles/generative-art/md


### 粒子系统 (Particle System)
- **Slug**: `particle`
- **Type**: visual
- **Description**: A floating particle network on deep dark tech backgrounds, using connection lines, pulses, and trails to create a sense of data flow. Ideal for tech companies, data visualization, and creative portfolios.
- **Keywords**: particle system, particle background, particles.js, constellation effect, particle network, canvas animation, connected dots, floating particles, tech landing page, data flow, dark tech background
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/particle
- **Markdown**: https://www.stylekit.top/api/styles/particle/md


### 视差杂志 (Parallax Editorial)
- **Slug**: `parallax-editorial`
- **Type**: layout
- **Description**: Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into a paced turn of the page.
- **Keywords**: parallax editorial, magazine layout website, parallax scrolling, editorial design, scroll depth effect, drop cap typography, sticky sections, long-form article design, print-inspired web design, layered scrolling
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/parallax-editorial
- **Markdown**: https://www.stylekit.top/api/styles/parallax-editorial/md


### VHS美学 (VHS Aesthetic)
- **Slug**: `vhs-aesthetic`
- **Type**: visual
- **Description**: 80-90s VHS tape visual aesthetics with color distortion, scanline noise, and signal glitch effects. Ideal for nostalgia, retro tech, and creative video projects.
- **Keywords**: VHS aesthetic, VHS effect, analog horror, scanlines, chromatic aberration, tracking error, CRT screen, 90s nostalgia, retro video, camcorder overlay, analog glitch
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/vhs-aesthetic
- **Markdown**: https://www.stylekit.top/api/styles/vhs-aesthetic/md


### 赤陶暖调 (Terracotta)
- **Slug**: `terracotta`
- **Type**: visual
- **Description**: A Mediterranean terracotta and warm earth design style with warm clay tones, rough handcrafted textures, and natural patterns. Ideal for lifestyle brands, dining, travel, and artisan product showcases.
- **Keywords**: terracotta, terracotta color palette, earth tones, warm color palette, Mediterranean design, clay tones, handcrafted texture, artisan, rustic web design, lifestyle brand
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/terracotta
- **Markdown**: https://www.stylekit.top/api/styles/terracotta/md


### 单色极简 (Monochrome)
- **Slug**: `monochrome`
- **Type**: visual
- **Description**: An ultimate monochrome design in pure black, white, and gray, building visual hierarchy through precise grayscale levels, font-weight contrast, and negative space without relying on any color. Ideal for photography, architecture, and premium brands.
- **Keywords**: monochrome, black and white design, grayscale, monochromatic ui, high contrast, negative space, typography driven design, achromatic design, photography portfolio, architecture website, premium branding
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/monochrome
- **Markdown**: https://www.stylekit.top/api/styles/monochrome/md


### 水墨画风 (Ink Wash)
- **Slug**: `ink-wash`
- **Type**: visual
- **Description**: 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.
- **Keywords**: ink wash painting, Chinese ink painting, sumi-e, calligraphy, brush strokes, negative space, zen design, East Asian aesthetics, monochrome, tea ceremony website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/ink-wash
- **Markdown**: https://www.stylekit.top/api/styles/ink-wash/md


### 中世纪现代 (Mid-Century Modern)
- **Slug**: `mid-century-modern`
- **Type**: visual
- **Description**: 1950s Atomic Age design aesthetics with geometric patterns, organic curves, and saturated colors. Inspired by Eames chairs, atomic clocks, and starburst motifs.
- **Keywords**: mid-century modern, atomic age design, 1950s retro, starburst pattern, organic curves, Eames, Googie, space age design, boomerang shapes, vintage modernism, retro branding
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/mid-century-modern
- **Markdown**: https://www.stylekit.top/api/styles/mid-century-modern/md


### 构成主义 (Constructivism)
- **Slug**: `constructivism`
- **Type**: visual
- **Description**: Soviet Constructivist poster style with bold red-and-black color schemes, diagonal compositions, geometric planes, and agitprop typography.
- **Keywords**: constructivism, Russian constructivism, Soviet poster, agitprop, propaganda poster, diagonal composition, red and black, avant-garde, geometric poster, Rodchenko
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/constructivism
- **Markdown**: https://www.stylekit.top/api/styles/constructivism/md


### 欧普艺术 (Op Art)
- **Slug**: `op-art`
- **Type**: visual
- **Description**: Op Art movement style that uses geometric patterns to create optical illusions and a sense of motion. Black-and-white contrast at its core, supplemented by vibrating color pairs.
- **Keywords**: op art, optical art, optical illusion, Bridget Riley, Victor Vasarely, geometric patterns, black and white, moire patterns, concentric circles, checkerboard, visual vibration, 1960s art
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/op-art
- **Markdown**: https://www.stylekit.top/api/styles/op-art/md


### 伊斯兰几何 (Islamic Geometric)
- **Slug**: `islamic-geometric`
- **Type**: visual
- **Description**: Islamic geometric pattern design style with precise tessellation patterns, arabesque motifs, and the classic pairing of gold and deep blue.
- **Keywords**: Islamic geometric patterns, arabesque, tessellation, Arabic pattern, Moroccan design, girih, eight-pointed star, sacred geometry, gold and blue, Middle Eastern design, mosaic
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/islamic-geometric
- **Markdown**: https://www.stylekit.top/api/styles/islamic-geometric/md


### 印度节庆 (Indian Festive)
- **Slug**: `indian-festive`
- **Type**: visual
- **Description**: The dazzling aesthetics of Indian Diwali and Holi festivals, with rich gold ornamentation, jewel-tone palettes, and mandala motifs. Ideal for celebrations, events, and lifestyle brands.
- **Keywords**: Indian festive design, Diwali, Holi, mandala pattern, jewel tones, gold ornamentation, South Asian design, rangoli, festival website, wedding website, vibrant colors
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/indian-festive
- **Markdown**: https://www.stylekit.top/api/styles/indian-festive/md


### 非洲纺织 (African Textile)
- **Slug**: `african-textile`
- **Type**: visual
- **Description**: Design style inspired by West African Kente cloth and Adire tie-dye, featuring bold geometric weave patterns, earth tones clashing with vivid colors, and handcrafted textures.
- **Keywords**: African textile design, African pattern, Kente cloth, Adire tie-dye, tribal pattern, geometric weave, woven texture, earth tones, terracotta, ethnic design, Afrocentric design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/african-textile
- **Markdown**: https://www.stylekit.top/api/styles/african-textile/md


### 韩式极简 (Korean Minimal)
- **Slug**: `korean-minimal`
- **Type**: visual
- **Description**: Korean minimalist design aesthetic influenced by K-beauty and Korean architecture. Soft pastel tones, generous whitespace, refined rounded corners, and restrained ornamentation.
- **Keywords**: Korean minimalism, K-beauty, minimal web design, pastel colors, soft ui, generous whitespace, rounded corners, clean aesthetic, Korean web design, beauty brand, skincare website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/korean-minimal
- **Markdown**: https://www.stylekit.top/api/styles/korean-minimal/md


### 粉彩哥特 (Pastel Goth)
- **Slug**: `pastel-goth`
- **Type**: visual
- **Description**: A unique fusion of dark aesthetics and candy colors, pairing soft hues like pastel purple and pastel blue with gothic elements such as skulls and crosses. Dark backgrounds with pastel highlights.
- **Keywords**: pastel goth, kawaii goth, creepy cute, gothic aesthetic, Tumblr aesthetic, dark pastel palette, pastel purple, soft grunge, goth website design, candy colors dark theme
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/pastel-goth
- **Markdown**: https://www.stylekit.top/api/styles/pastel-goth/md


### 极繁主义 (Maximalism)
- **Slug**: `maximalism`
- **Type**: visual
- **Description**: Maximalist design -- more is more. Layered patterns, mixed fonts, saturated colors, and decorative borders. A stark contrast to minimalism, embracing richness, opulence, and visual impact.
- **Keywords**: maximalism, maximalist design, more is more, layered patterns, clashing colors, mixed typography, decorative borders, eclectic, visual overload, bold web design, ornate
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/maximalism
- **Markdown**: https://www.stylekit.top/api/styles/maximalism/md


### 中世纪手抄本 (Medieval Manuscript)
- **Slug**: `medieval-manuscript`
- **Type**: visual
- **Description**: Medieval illuminated manuscript style with ornate drop-cap initials, parchment textures, gold and deep-red decorative borders. Gothic blackletter combined with illustrative elements.
- **Keywords**: medieval manuscript, illuminated manuscript, blackletter, gothic typography, drop cap, parchment texture, gold leaf, ornate borders, calligraphy, vellum, medieval web design
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/medieval-manuscript
- **Markdown**: https://www.stylekit.top/api/styles/medieval-manuscript/md


### 涂鸦街头 (Graffiti Street)
- **Slug**: `graffiti-street`
- **Type**: visual
- **Description**: Street graffiti art style with spray-paint textures, bold clashing colors, hand-lettered tags, and brick-wall backgrounds. A visual expression of urban culture and rebellious spirit.
- **Keywords**: graffiti style, street art, spray paint effect, urban design, hip hop aesthetic, graffiti font, wildstyle, brick wall texture, stencil, streetwear branding, bold clashing colors
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/graffiti-street
- **Markdown**: https://www.stylekit.top/api/styles/graffiti-street/md


### 大理石奢华 (Marble Luxury)
- **Slug**: `marble-luxury`
- **Type**: visual
- **Description**: High-end design style with marble textures and gold accents, featuring white marble-textured backgrounds, gold line separators, and black text. Ideal for luxury brands, hotels, and premium real estate.
- **Keywords**: marble luxury, marble texture, gold accents, luxury website design, high-end branding, elegant serif, hotel website, real estate website, premium aesthetic, marble background
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/marble-luxury
- **Markdown**: https://www.stylekit.top/api/styles/marble-luxury/md


### 维多利亚植物 (Victorian Botanical)
- **Slug**: `victorian-botanical`
- **Type**: visual
- **Description**: Victorian-era botanical illustration style with delicate line-drawn plants, floral ornaments, and the elegance of a natural history museum. A classic pairing of dark green and gold.
- **Keywords**: Victorian botanical, botanical illustration, vintage botanical print, natural history illustration, floral line art, antique floral, herbarium, engraving style, dark green and gold, Victorian design, vintage floral website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/victorian-botanical
- **Markdown**: https://www.stylekit.top/api/styles/victorian-botanical/md


### 立体主义 (Cubism)
- **Slug**: `cubism`
- **Type**: visual
- **Description**: The Cubism movement of Picasso and Braque, featuring geometric fragmented compositions, multi-perspective overlays, angular shapes, and subdued earth-tone palettes.
- **Keywords**: cubism, cubist design, Picasso, geometric fragments, abstract art, angular shapes, multi-perspective, avant-garde, earth tones, collage layout, art movement
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/cubism
- **Markdown**: https://www.stylekit.top/api/styles/cubism/md


### 热带天堂 (Tropical Paradise)
- **Slug**: `tropical-paradise`
- **Type**: visual
- **Description**: Tropical resort-inspired design with palm leaves, vivid floral colors, and a bright sun-and-sand tone. Ideal for travel, resorts, lifestyle, and food-and-beverage brands.
- **Keywords**: tropical design, tropical paradise, palm leaves, resort website, travel website design, vibrant colors, summer vibes, beach theme, exotic floral, vacation landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/tropical-paradise
- **Markdown**: https://www.stylekit.top/api/styles/tropical-paradise/md


### GitHub 风格 (GitHub Style)
- **Slug**: `github-style`
- **Type**: visual
- **Description**: GitHub design language style with clean interface hierarchy, a refined grayscale system, blue interactive color, monospace code fonts, and developer-friendly information architecture.
- **Keywords**: GitHub style, GitHub design system, Primer design system, developer tool ui, monospace font, grayscale palette, code syntax highlighting, documentation site, developer portfolio, clean minimal interface
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/github-style
- **Markdown**: https://www.stylekit.top/api/styles/github-style/md


### 巫术核心 (Witchcore)
- **Slug**: `witchcore`
- **Type**: visual
- **Description**: Occult aesthetic style with tarot cards, moon phase symbols, crystals, and herbal elements. Deep purple tones paired with golden mystical runes and shimmering stardust effects on dark backgrounds.
- **Keywords**: witchcore, witchy aesthetic, occult design, tarot, moon phases, celestial, mystical UI, crystals, runes, dark purple and gold, esoteric, magic theme
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/witchcore
- **Markdown**: https://www.stylekit.top/api/styles/witchcore/md


### 霓虹东京 (Neon Tokyo)
- **Slug**: `neon-tokyo`
- **Type**: visual
- **Description**: Tokyo Kabukicho neon nightscape style with rain-slicked street reflections, layered neon signage, and cyberpunk urban night vibes. Unlike cyberpunk-neon's sci-fi feel, this leans toward authentic urban nightscapes.
- **Keywords**: neon Tokyo, Tokyo nightscape, Kabukicho, Shinjuku, neon signs, city night, rain reflections, urban neon, cyberpunk city, dark theme, japanese nightlife
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neon-tokyo
- **Markdown**: https://www.stylekit.top/api/styles/neon-tokyo/md


### 纸艺手作 (Paper Craft)
- **Slug**: `paper-craft`
- **Type**: visual
- **Description**: 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.
- **Keywords**: paper craft, papercut design, layered paper effect, origami, handmade collage, paper texture, soft layered shadows, craft aesthetic, scrapbook style, kids website design, educational website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/paper-craft
- **Markdown**: https://www.stylekit.top/api/styles/paper-craft/md


### 工程蓝图 (Blueprint)
- **Slug**: `blueprint`
- **Type**: visual
- **Description**: Engineering blueprint and technical drawing style with white lines on blue, grid coordinates, annotation lines, and dimension markers. Ideal for architecture, engineering, tech, and education.
- **Keywords**: blueprint, blueprint ui, engineering drawing, technical drawing, cyanotype, schematic, drafting, grid coordinates, annotation lines, architecture website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/blueprint
- **Markdown**: https://www.stylekit.top/api/styles/blueprint/md


### 多巴胺设计 (Dopamine Design)
- **Slug**: `dopamine-design`
- **Type**: visual
- **Description**: 高饱和度霓虹配色、大胆排版、充满能量感的视觉冲击力。2025-2026 年度设计趋势，用色彩直接刺激多巴胺分泌，让界面充满快乐和兴奋。
- **Keywords**: dopamine design, vibrant colors, high saturation, neon gradient, bold typography, colorful ui, playful design, maximalism, gen z aesthetic, landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/dopamine-design
- **Markdown**: https://www.stylekit.top/api/styles/dopamine-design/md


### Linear 风格 (Linear Style)
- **Slug**: `linear-style`
- **Type**: visual
- **Description**: 受 Linear 应用启发的极简暗色设计风格。精确的排版、克制的动效、开发者审美的极致表达。深色背景配合微妙的渐变和精细的边框。
- **Keywords**: Linear style, Linear app design, dark ui, dark mode, developer tool aesthetic, SaaS landing page, minimal dark theme, subtle gradients, precise typography, product website
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/linear-style
- **Markdown**: https://www.stylekit.top/api/styles/linear-style/md


### 清爽电商 (Shopify Clean)
- **Slug**: `shopify-clean`
- **Type**: visual
- **Description**: A clean, modern aesthetic built for independent storefronts. Product-first layouts with clear pricing hierarchy and smooth conversion paths.
- **Keywords**: Shopify style, clean ecommerce design, online store ui, DTC website, product grid layout, product page design, minimal storefront, conversion focused design, shopping cart ui, trust badges, ecommerce landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/shopify-clean
- **Markdown**: https://www.stylekit.top/api/styles/shopify-clean/md


### 奢品零售 (Luxury Retail)
- **Slug**: `luxury-retail`
- **Type**: visual
- **Description**: Premium retail aesthetic with generous whitespace, serif typography, and gold-marble accents that communicate exclusivity and refinement.
- **Keywords**: luxury retail, luxury brand website, high-end ecommerce, premium design, serif typography, generous whitespace, gold accents, fashion website, jewelry website, elegant minimalism
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/luxury-retail
- **Markdown**: https://www.stylekit.top/api/styles/luxury-retail/md


### 鲜活市集 (Fresh Market)
- **Slug**: `fresh-market`
- **Type**: visual
- **Description**: E-commerce style for food, grocery, and organic brands. Warm tones with rounded cards and natural textures convey freshness and trust.
- **Keywords**: fresh market, organic food, grocery ecommerce, farmers market, warm color palette, food website, rounded cards, natural textures, produce shop, ecommerce homepage
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/fresh-market
- **Markdown**: https://www.stylekit.top/api/styles/fresh-market/md


### 数据密集 (Data Dense)
- **Slug**: `data-dense`
- **Type**: visual
- **Description**: High-density admin panel style with compact spacing and small components. Prioritizes data tables and operational efficiency.
- **Keywords**: data dense, high density ui, compact ui, data table design, admin panel, dense dashboard, enterprise ui, information density, compact spacing, operational dashboard, back office ui
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/data-dense
- **Markdown**: https://www.stylekit.top/api/styles/data-dense/md


### 超大字体排版 (Oversized Typography)
- **Slug**: `oversized-typography`
- **Type**: visual
- **Description**: The defining portfolio trend of 2026: type IS the layout. Names and headlines become viewport-scale heroes via fluid clamp() sizing, imagery recedes to accents, and a single international orange cuts through near-black on warm white.
- **Keywords**: oversized type, huge typography, portfolio, fluid clamp, kinetic marquee, outline text, type-as-layout, editorial black, brutal type, 2026 trend
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/oversized-typography
- **Markdown**: https://www.stylekit.top/api/styles/oversized-typography/md


### 终端风 (Developer Terminal)
- **Slug**: `developer-terminal`
- **Type**: visual
- **Description**: Turn a website into a terminal session: phosphor-green mono text, prompt prefixes, paired command-and-output blocks, and a tmux status bar. Tool authenticity as developer identity.
- **Keywords**: terminal, CLI, command line, developer, hacker, monospace, shell, tmux, prompt, console
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/developer-terminal
- **Markdown**: https://www.stylekit.top/api/styles/developer-terminal/md


### 横滚画廊 (Horizontal Gallery)
- **Slug**: `horizontal-gallery`
- **Type**: layout
- **Description**: A white-cube, curator-style portfolio layout. Borderless large images line up along a horizontal snap-scroll rail; whitespace acts as the gallery wall, numbered hairline captions echo museum labels, and viewing becomes a walk.
- **Keywords**: horizontal gallery, horizontal scroll website, scroll snap, white cube, art gallery website, museum website, photography portfolio, exhibition website, curated showcase, minimal gallery
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/horizontal-gallery
- **Markdown**: https://www.stylekit.top/api/styles/horizontal-gallery/md


### 论文排版风 (LaTeX Paper)
- **Slug**: `latex-paper`
- **Type**: visual
- **Description**: The typographic language of LaTeX academic papers, brought to the web: Computer Modern feel, centered title and abstract, hierarchically numbered sections, theorem environments, numbered equations, booktabs tables, and hanging-indent references. Built for research homepages, lecture notes, and scholarly portfolios.
- **Keywords**: academic, paper, LaTeX, typesetting, theorem, numbered equations, booktabs, references, research homepage, lecture notes, Computer Modern, scholarly, serif
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/latex-paper
- **Markdown**: https://www.stylekit.top/api/styles/latex-paper/md


### 学术科普风 (Distill Style)
- **Slug**: `distill-style`
- **Type**: visual
- **Description**: An academic explainer aesthetic modeled on Distill.pub: a narrow serif column carries the argument, sidenotes carry the asides, and figures break the measure to carry the evidence. Built for science blogs, researcher homepages, and scholarly portfolios.
- **Keywords**: academic, scholarly, explainer, scientific publishing, sidenote, citation, figure, serif typography, researcher homepage, Distill.pub, journal, paper
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/distill-style
- **Markdown**: https://www.stylekit.top/api/styles/distill-style/md


### 创意工作室风 (Creative Studio)
- **Slug**: `studio-bold`
- **Type**: visual
- **Description**: A bold, confident portfolio style for design studios, agencies, and freelancers. Oversized typography, bold color blocking, rich hover states, client logo walls, and team grids — professional but never corporate, with personality built in.
- **Keywords**: studio, creative, agency, portfolio, brand, showcase, case study, freelancer, bold, modern
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/studio-bold
- **Markdown**: https://www.stylekit.top/api/styles/studio-bold/md


### 暗色画廊风 (Dark Gallery)
- **Slug**: `gallery-dark`
- **Type**: visual
- **Description**: A dark photography gallery portfolio: near-black canvases let full-bleed images command absolute attention; warm amber accents highlight metadata and captions while ultra-light typography retreats into the background. For photographers, filmmakers, and visual artists whose work speaks louder than chrome.
- **Keywords**: photography, gallery, dark, portfolio, full-bleed, cinematic, minimal, visual artist, filmmaker, exhibition
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/gallery-dark
- **Markdown**: https://www.stylekit.top/api/styles/gallery-dark/md


### 暖感有机风 (Warm Organic)
- **Slug**: `warm-organic`
- **Type**: visual
- **Description**: A warm, naturalist portfolio style for architects, interior designers, product designers, ceramic artists, and landscape architects. Think warm-toned minimalism: terracotta and clay colors, natural textures, soft shadows, organic curves, and a palpable sense of craft. The design itself feels handmade — like it was printed on textured paper.
- **Keywords**: organic, warm, natural, earthy, terracotta, portfolio, handcrafted, architect, product design, interior
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/warm-organic
- **Markdown**: https://www.stylekit.top/api/styles/warm-organic/md


### 发布会主题 (Launch Keynote)
- **Slug**: `launch-keynote`
- **Type**: visual
- **Description**: An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas plays a pre-rendered product animation as you scroll, one product and one message per viewport, like a trillion-dollar product page.
- **Keywords**: apple keynote, product launch page, scroll scrub, frame sequence scroll, sticky canvas animation, product reveal, black product page, electric blue accent, spec grid, premium landing page
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/launch-keynote
- **Markdown**: https://www.stylekit.top/api/styles/launch-keynote/md


### 奢华画册 (Luxe Lookbook)
- **Slug**: `luxe-lookbook`
- **Type**: visual
- **Description**: The couture aesthetic of a fashion maison's digital flagship: a porcelain ground, ink-noir type, one muted gold; oversized high-contrast Didone serif display, a full-bleed silk-motion film hero, and a lookbook grid with hover image reveals. Absence is the luxury, restraint is the polish, numerals become art -- a house that charges four thousand euros for a coat.
- **Keywords**: luxury fashion, lookbook, maison website, couture, editorial layout, didone serif, high fashion, porcelain palette, muted gold accent, quiet luxury, campaign site, flagship boutique
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/luxe-lookbook
- **Markdown**: https://www.stylekit.top/api/styles/luxe-lookbook/md


### 着色器渐变 (Shader Gradient)
- **Slug**: `shader-gradient`
- **Type**: visual
- **Description**: A premium SaaS aesthetic built on a real-time WebGL fragment-shader mesh gradient. A slowly breathing iridescent field flows across a near-black canvas while frosted-glass panels float above it, paired with a clean modern sans and a single bright accent - the living-gradient look of Stripe, Linear, and Vercel heroes.
- **Keywords**: shader gradient, webgl gradient, mesh gradient, animated gradient background, fragment shader hero, living gradient, iridescent background, fluid gradient, saas landing page, stripe gradient, linear gradient hero, glassmorphism panels
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/shader-gradient
- **Markdown**: https://www.stylekit.top/api/styles/shader-gradient/md


### 粉彩应用风 (Pastel App UI)
- **Slug**: `pastel-ui`
- **Type**: visual
- **Description**: A mobile-first pastel interface for community and content apps, using warm cream, lilac, mint, butter yellow, and coral to create a friendly but legible experience.
- **Keywords**: pastel app, mobile-first, community, soft UI, high readability, rounded cards, quick feedback
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/pastel-ui
- **Markdown**: https://www.stylekit.top/api/styles/pastel-ui/md


### 移动编辑风 (Mobile Editorial)
- **Slug**: `mobile-editorial`
- **Type**: visual
- **Description**: A mobile editorial style that compresses magazine rhythm into a phone screen with serif headlines, warm paper surfaces, and modular content cards.
- **Keywords**: mobile editorial, content app, magazine layout, community, serif headlines, warm paper
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/mobile-editorial
- **Markdown**: https://www.stylekit.top/api/styles/mobile-editorial/md


### 柔和工具风 (Soft Utility)
- **Slug**: `soft-utility`
- **Type**: visual
- **Description**: A soft utility style for frequently used mobile tools, balancing efficiency and warmth with calm surfaces, clear state colors, and friendly hierarchy.
- **Keywords**: utility app, mobile app, productivity, status colors, soft hierarchy, frequent use
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/soft-utility
- **Markdown**: https://www.stylekit.top/api/styles/soft-utility/md


---


## 3. Detailed Style Documentation


### 新野兽派 (Neo-Brutalist)

**Slug**: `neo-brutalist`

#### Description
Bold black thick borders, hard-edge shadows, no rounded corners, high-contrast color schemes. Inspired by architectural Brutalism, emphasizing function and raw aesthetics.

#### Design Philosophy
Neo-Brutalist design style originates from the Brutalist movement in architecture, emphasizing raw, unadorned functional aesthetics. In web design, this style is expressed through bold black borders, hard-edge shadows, sharp right angles, and high-contrast color schemes.

Core principles:
- Function first: Every element has a clear purpose
- Honest expression: No hiding structure, no disguising function
- Bold and direct: Communicate through visual impact
- Anti-polish: Reject over-refinement, embrace rawness

#### Do's (必须做)
1. Use pure black borders border-black border-2 md:border-4
2. Use hard-edge shadows shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
3. Keep sharp corners rounded-none
4. Use high-contrast color schemes (black and white primary + vivid accent colors)
5. Headings use font-black, body text uses font-mono
6. All styles include mobile and desktop responsive values
7. Button active:translate-x-[6px] active:translate-y-[6px] active:shadow-none, displacement must equal original shadow pixel value (Physical Crushing, fully flattened)
8. Hover instantly switches to high-contrast background color (e.g. hover:bg-[#ffff00]) and enlarges shadow (Brutal Snap, no gradients or opacity transitions allowed)
9. Card hover uses ease-out duration-150, maintaining raw collision feel
10. Button hover enlarges shadow and offsets toward upper-left: hover:-translate-y-1 hover:-translate-x-1 hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)]

#### Don'ts (禁止做)
1. Do not use rounded corners rounded-lg, rounded-md, rounded-xl
2. Do not use blurred shadows shadow-lg, shadow-xl, shadow-2xl
3. Do not use gradients bg-gradient-*
4. Do not use gray borders border-gray-*, border-slate-*
5. Do not use fade-in/fade-out semi-transparent effects
6. Do not use rounded-full (except for decorative circles)
7. Do not let button active state displacement be less than original shadow pixel value (not fully flattened, loses crushing feel)
8. Do not use gradients or opacity transitions for hover background color switch (must be hard-cut, duration-150 ease-out)
9. Do not use only displacement to replace shadow disappearance on button hover (hover should enlarge shadow to emphasize power, active is for full flattening)

#### AI Rules
```
# Neo-Brutalist Design System

You are an expert frontend developer specializing in Neo-Brutalist web design. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Neo-Brutalist / Web Brutalism
- **Category**: Expressive, High-Contrast
- **Essence**: Raw, honest, unapologetic — function over form, rejection of polish
- **Mood**: Bold, confrontational, playful-aggressive, anti-corporate
- **Inspiration**: Architectural Brutalism, punk zines, early web, Swiss posters

---

## Core Visual Principles

### 1. Border System (CRITICAL)
```
REQUIRED: Pure black borders
border-black border-2 md:border-4

NEVER use: border-gray-*, border-slate-*, border-neutral-*
```

### 2. Shadow System (Hard-Edge Only)
```
REQUIRED FORMAT:
shadow-[Xpx_Xpx_0px_0px_rgba(0,0,0,1)]

Examples:
Mobile: shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
Desktop: shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]

FORBIDDEN: shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl
(No blur allowed — hard edges only)
```

### 3. Corner Radius
```
REQUIRED: rounded-none
Sharp corners everywhere

FORBIDDEN: rounded-lg, rounded-md, rounded-xl, rounded-2xl
(Exception: rounded-full for intentional decorative circles only)
```

### 4. Typography
```
HEADINGS: font-black (900 weight)
BODY: font-mono
LABELS: font-mono uppercase tracking-wider
```

---

## Interaction Specifications

### Button States (Physical Crushing)
| State | Effect | Implementation |
|-------|--------|----------------|
| Default | Raised with shadow | shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] |
| Hover | Shadow enlarges + offset | hover:shadow-[10px_10px_0px_0px...] hover:-translate-y-1 hover:-translate-x-1 |
| Active | FULLY FLATTENED | active:translate-x-[6px] active:translate-y-[6px] active:shadow-none |

**CRITICAL**: Active displacement MUST equal original shadow pixel value. This creates the "physical crushing" — button is fully pressed into the surface.

### Card Hover (Brutal Snap)
```jsx
<div className="group bg-white border-4 border-black
  shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
  hover:shadow-[12px_12px_0px_0px_rgba(255,0,110,1)]
  hover:-translate-y-1 hover:-translate-x-1
  hover:bg-[#ffff00]
  transition-all duration-150 ease-out">
  ...
</div>
```

**CRITICAL**: Hover background color switch must be INSTANT (hard cut). NO gradients, NO opacity fade. Use duration-150 ease-out for position/shadow only.

---

## Animation Rules

### Interaction Physics
- **Physical Crushing**: Button active displacement EQUALS shadow offset. `active:translate-x-[6px] active:translate-y-[6px] active:shadow-none` for a 6px shadow.
- **Brutal Snap**: Hover switches to high-contrast background INSTANTLY. Hard cut, no fade. `hover:bg-[#ffff00]`
- **Zero Rounding Easing**: All transitions use `ease-out duration-150`. Raw collision feel. No soft spring physics.
- **Heavy Focus**: Card hover enlarges shadow AND changes shadow color to accent (pink/magenta).

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover transform | 150ms | ease-out |
| Active press | instant | — |
| Shadow change | 150ms | ease-out |
| Color snap | 0ms | instant |

---

## Color Palette

### Primary
| Token | Value | Usage |
|-------|-------|-------|
| Black | #000000 | Borders, text, shadows |
| White | #ffffff | Backgrounds |

### Accent Colors
| Token | Hex | Usage |
|-------|-----|-------|
| Pink | #ff006e | CTAs, hover effects |
| Green | #ccff00 | Success, hero backgrounds |
| Blue | #00d9ff | Links, info |
| Yellow | #ff9500 | Tags, warnings |
| Bright Yellow | #ffff00 | Hover backgrounds |

### Shadow Colors
```
Default: rgba(0,0,0,1)
Hover accent: rgba(255,0,110,1)
```

---

## Typography

| Element | Classes |
|---------|---------|
| H1 | font-black text-4xl md:text-6xl lg:text-8xl tracking-tight leading-tight |
| H2 | font-black text-2xl md:text-4xl |
| H3 | font-black text-xl md:text-2xl |
| Body | font-mono text-sm md:text-base leading-relaxed |
| Labels | font-mono text-xs uppercase tracking-wider |
| CTA | font-black uppercase text-lg |

---

## Responsive Guidelines

### Scale Ratio
Mobile values are approximately 50% of desktop values.

### Borders
```
border-2 md:border-4
```

### Shadows
```
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] 
md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
```

### Spacing
```
p-4 md:p-8
py-12 md:py-24
gap-4 md:gap-8
```

### Typography
```
text-sm md:text-base
text-xl md:text-3xl
text-4xl md:text-6xl lg:text-8xl
```

---

## Component Templates

### Button
```jsx
<button className="
  bg-[#ff006e] text-white font-black uppercase text-lg
  px-8 py-4 border-4 border-black
  shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]
  hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)]
  hover:-translate-y-1 hover:-translate-x-1
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none
  transition-all duration-150 ease-out">
  Click Hard
</button>
```

### Card
```jsx
<div className="group bg-white border-4 border-black
  shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
  hover:shadow-[12px_12px_0px_0px_rgba(255,0,110,1)]
  hover:-translate-y-1 hover:-translate-x-1
  hover:bg-[#ffff00]
  transition-all duration-150 ease-out
  p-8 cursor-pointer">
  <h3 className="font-black text-xl mb-2 
    group-hover:tracking-wider transition-all duration-150">
    Neo-Brutalism
  </h3>
  <p className="font-mono text-base text-gray-700">
    Raw, bold, unapologetic design.
  </p>
</div>
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| rounded-lg, rounded-md, rounded-xl | Softens brutalist edges |
| shadow-lg, shadow-xl, shadow-2xl | Blur violates hard-edge principle |
| bg-gradient-* | Gradients are too polished |
| border-gray-*, border-slate-* | Must use pure black borders |
| Fade/opacity transitions | Must use hard cuts |
| rounded-full (general use) | Only for decorative circles |
| Active displacement < shadow value | Fails to achieve full crushing |
| Hover opacity fade | Must snap to new color |

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] NO rounded corners (except intentional decorative circles)
- [ ] Shadows are hard-edge format: shadow-[Xpx_Xpx_0px_0px_rgba...]
- [ ] Borders are pure black: border-black
- [ ] Button active displacement = original shadow pixel value
- [ ] Hover background changes are instant (hard cut, no fade)
- [ ] Transitions use duration-150 ease-out
- [ ] Font-black for headings, font-mono for body
- [ ] Has responsive md: prefixes for borders, shadows, spacing
- [ ] Mobile values ≈ 50% of desktop values
```


#### Design Tokens

**Border**
- Width: `border-2 md:border-4`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] md:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`
- Medium: `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]`
- Large: `shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] md:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px] md:hover:translate-x-1 md:hover:translate-y-1`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-black tracking-tight`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
border-2 md:border-4
border-black
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
hover:shadow-none
hover:translate-x-[2px] hover:translate-y-[2px]
transition-all duration-200
font-black
```

Card:
```
rounded-none
border-2 md:border-4
border-black
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
bg-white
```

Input:
```
rounded-none
border-2 md:border-4
border-black
font-mono
focus:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `shadow-sm`, `shadow`, `shadow-md`

Patterns: `^rounded-(?!none)`, `^shadow-(?!\[|none)`, `^bg-gradient-`, `^border-gray-`, `^border-slate-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
<button className="
  bg-[#ff006e] text-white font-black uppercase text-lg
  px-8 py-4
  border-4 border-black
  shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]
  hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)]
  hover:-translate-y-1 hover:-translate-x-1
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none
  transition-all duration-150 ease-out
">
  Click Hard
</button>
```

**Card**
```html
<div className="
  group bg-white
  border-4 border-black
  shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
  hover:shadow-[12px_12px_0px_0px_rgba(255,0,110,1)]
  hover:-translate-y-1 hover:-translate-x-1
  hover:bg-[#ffff00]
  transition-all duration-150 ease-out
  p-8 cursor-pointer
">
  <h3 className="font-black text-xl mb-2 group-hover:tracking-wider transition-all duration-150">Neo-Brutalism</h3>
  <p className="font-mono text-base text-gray-700">
    Raw, bold, unapologetic design.
  </p>
</div>
```


---


### 编辑杂志风 (Editorial)

**Slug**: `editorial`

#### Description
Elegant magazine typography style with serif headings, sans-serif body text, refined whitespace and grid systems. Inspired by high-end fashion magazines and newspaper layouts. Warm cream background, soft black text, fine opacity hierarchy and animated underline interactions.

#### Design Philosophy
Editorial design style originates from the typographic aesthetics of traditional print media, particularly the design language of high-end fashion magazines and newspapers. This style emphasizes content hierarchy, refined font pairing, and generous whitespace.

Core principles:
- Content is king: Design serves content, never overshadowing it. UI whispers, it does not shout
- Typographic hierarchy: Serif headings contrast with sans-serif body text; labels use uppercase tracking for breathing room
- Whitespace is beauty: Proper negative space lets content breathe; section spacing starts at py-24 md:py-40
- Monochrome restraint: Only #1C1C1C with varying opacities (/60 /40 /10) to build visual hierarchy; no colored decoration
- Subtle motion: Restrained yet refined interactions like hover-underline animations, clip-path reveals, and group-hover:italic

#### Do's (必须做)
1. Headings use serif font font-serif, body text uses sans-serif font-sans
2. Background uses warm cream bg-[#F9F8F6], text uses soft black text-[#1C1C1C]
3. Use opacity hierarchy for grayscale: text-[#1C1C1C]/60 (secondary), /40 (auxiliary), /10 (borders)
4. Label style uses font-sans text-xs tracking-[0.2em] uppercase
5. Section spacing at least py-24 md:py-40, container padding px-6 md:px-12
6. Links and buttons use hover-underline animated underline effect
7. Headings use tracking-tighter tight letter spacing, hero titles start at text-6xl md:text-8xl
8. Italic for subtitles or decorative text: italic text-[#1C1C1C]/60
9. Forms use bottom-line inputs + floating labels (peer-focus pattern)
10. Hover interactions use group-hover:italic and subtle transition-all duration-500

#### Don'ts (禁止做)
1. Do not use colored accents (red, blue, green, etc.), maintain pure monochrome system
2. Do not use thick borders or shadows (shadow-*)
3. Do not use #0a0a0a pure black or #fafafa cool white as primary colors
4. Do not use sans-serif fonts for headings
5. Do not use small line heights, body text at least leading-relaxed
6. Do not crowd elements, maintain breathing room
7. Do not use gradients, background patterns, or decorative geometric elements
8. Do not use large rounded corners rounded-xl or above

#### AI Rules
```
You are an Editorial design style frontend development expert. All generated code must strictly follow these constraints:

## Core Palette

- Background: #F9F8F6 (warm cream, NOT pure white or #fafafa)
- Foreground: #1C1C1C (soft black, NOT #000 or #0a0a0a)
- Opacity hierarchy: text-[#1C1C1C]/60 (secondary), /40 (tertiary), /10 (borders/dividers)
- NO colored accents. This style is purely monochromatic.

## Typography

- Headings: font-serif, tracking-tighter, weight 400 (never bold)
- Hero titles: text-6xl md:text-8xl lg:text-[9rem] leading-[0.9]
- Labels: font-sans text-xs tracking-[0.2em] uppercase text-[#1C1C1C]/40
- Body: font-sans text-sm or text-base leading-relaxed text-[#1C1C1C]/80
- Italic for decorative subtitles: italic text-[#1C1C1C]/60

## Layout

- Section spacing: py-24 md:py-40 minimum
- Container: max-w-7xl mx-auto px-6 md:px-12
- Generous gaps: gap-12 lg:gap-24
- Content width: max-w-xs or max-w-md for body text
- Use 12-column grids: grid-cols-12 with col-span-5/col-span-7 splits

## Interactions

- Links: hover-underline animation (scaleX from right-to-left on hover)
- Titles: group-hover:italic transition-all duration-500
- Images: group-hover:scale-105 transition-transform duration-1000
- Arrows: group-hover:translate-x-2 transition-transform
- Borders: border-[#1C1C1C]/10, hover:bg-[#1C1C1C]/[0.02]

## Form Fields

- Bottom-border only: border-b border-[#1C1C1C]/20
- Floating labels with peer-focus pattern
- Input text: font-serif text-xl
- Focus: focus:border-[#1C1C1C] (no outline, no shadow, no ring)

## Navigation

- Fixed: fixed top-0 z-50 bg-[#F9F8F6]/90 backdrop-blur-sm
- Logo: font-serif text-lg tracking-[0.3em] uppercase
- Links: font-sans text-xs tracking-[0.2em] uppercase text-[#1C1C1C]/60

## Absolutely Forbidden

- Colored accents (red, blue, green) - this is a monochrome style
- Box shadows (shadow-*)
- Thick borders (border-2 and above)
- Large border-radius (rounded-xl and above)
- Gradients or background patterns
- Bold font weights on headings (font-bold, font-semibold)
- Pure black #000 or #0a0a0a
- Pure white #fff or #fafafa as background
- Decorative geometric shapes or icons

## Animation & Interaction Rules

- Cinematic Image Zoom: Image areas should use container clipping + slow child element zoom (e.g. group-hover:scale-105 duration-1000), maintaining a fashion editorial gaze feel.
- Brutal Contrast: Interaction contrast should be decisive, but only invert within the existing palette (#1C1C1C and #F9F8F6), never fall back to pure black or pure white.
- Text Restraint: Text itself does not displace; hover hints prefer fine line extension, text color deepening, and other typographic feedback.
- Layout Lines: Dividers on hover can deepen from /10 to /40, used to emphasize grid skeleton, without adding shadows or flashy animations.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-border`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-serif tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
text-sm tracking-wide
transition-colors
```

Card:
```
border border-border
hover:border-foreground
transition-colors
```

Input:
```
border border-border
text-sm
focus:outline-none
focus:border-foreground
transition-colors
placeholder:text-muted
```

**Forbidden**

Classes: `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow`

Patterns: `^rounded-(?!none)`, `^shadow-(?!none)`, `^border-[248]`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
{/* Contrast button */}
<button className="
  px-8 py-4
  bg-[#1C1C1C] text-[#F9F8F6]
  font-sans text-xs font-medium tracking-[0.2em] uppercase
  border border-[#1C1C1C]
  hover:bg-[#F9F8F6] hover:text-[#1C1C1C]
  transition-colors duration-200
">
  Read Story
</button>

{/* Text link with underline reveal */}
<button className="
  font-sans text-xs tracking-[0.2em] uppercase
  relative pb-1
  after:content-[''] after:absolute after:w-full after:h-px
  after:bottom-0 after:left-0 after:bg-current
  after:origin-bottom-right after:scale-x-0
  hover:after:origin-bottom-left hover:after:scale-x-100
  after:transition-transform after:duration-500
  after:ease-[cubic-bezier(0.16,1,0.3,1)]
  flex items-center gap-4 group
">
  View All
</button>

```

**Card**
```html
<div className="
  group border-t border-[#1C1C1C]/10 pt-6
  hover:border-[#1C1C1C]/40
  transition-colors duration-500
  cursor-pointer
">
  <div className="aspect-[4/5] bg-[#1C1C1C]/5 overflow-hidden mb-6">
    <div className="w-full h-full bg-[#1C1C1C]/10 group-hover:scale-105 transition-transform duration-1000 ease-out" />
  </div>
  <p className="font-sans text-[10px] tracking-[0.2em] uppercase text-[#1C1C1C]/40 mb-3 group-hover:text-[#1C1C1C]/70 transition-colors duration-300">
    Architecture
  </p>
  <h3 className="font-serif text-3xl tracking-tighter leading-snug mb-4">
    <span className="relative after:content-[''] after:absolute after:left-0 after:-bottom-1 after:h-px after:w-0 after:bg-current group-hover:after:w-full after:transition-[width] after:duration-500">
      The Silent Brutalism
    </span>
  </h3>
  <p className="font-sans text-sm text-[#1C1C1C]/60 leading-relaxed">
    Exploring the raw concrete monoliths that define the modern urban landscape.
  </p>
</div>
```


---


### 新拟物派 (Neumorphism)

**Slug**: `neumorphism`

#### Description
Soft concave and convex 3D effects using dual shadows to simulate light sources. Light backgrounds with same-tone elements create a refined sense of depth.

#### Design Philosophy
Neumorphism is a style between flat design and skeuomorphism, creating the visual effect of elements being "extruded" or "recessed" from the background through soft shadows.

Core principles:
- Soft dimensionality: Simulate natural light sources through dual shadows (light/dark)
- Monochromatic unity: Elements and background use the same or similar colors
- Tactile intuition: Raised indicates interactive, recessed indicates activated or input area
- Restrained decoration: Avoid excessive colors and contrast, maintain overall softness

#### Do's (必须做)
1. Use light backgrounds bg-[#e0e5ec] or bg-[#f0f0f3]
2. Use dual shadows shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
3. Recessed effect uses inset shadows shadow-[inset_8px_8px_16px_#b8bcc2,inset_-8px_-8px_16px_#ffffff]
4. Use medium rounded corners rounded-xl (12-24px)
5. Interactive elements switch from raised to recessed when pressed
6. Keep elements in the same color family as the background
7. Responsive shadow sizes with md: prefix for larger values
8. Button hover reduces outer shadow (Hover Shadowing, finger approaching blocks light): from shadow-[8px_8px_16px...] down to shadow-[4px_4px_8px...]
9. Button active must switch from raised to recessed (Extrude to Intrude): active:shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff], no translate displacement allowed
10. All transitions use duration-300 ease-in-out (Smooth Molding, soft plastic flexibility)
11. Input focus reduces inner shadow depth (inert contraction, not enhancement): from inset 6px down to inset 2px, suggesting the input channel opens
12. Light source direction always fixed as upper-left bright, lower-right dark (Fixed Illuminant): negative X/Y offset = white highlight, positive X/Y offset = dark shadow

#### Don'ts (禁止做)
1. Do not use pure black or pure white backgrounds
2. Do not use hard-edge shadows shadow-[Xpx_Xpx_0px]
3. Do not use high-contrast color schemes
4. Do not use thick borders border-2 and above
5. Do not use gradient backgrounds bg-gradient-*
6. Do not use sharp corners rounded-none
7. Do not use any translate displacement on buttons (neumorphic elements grow from the background, they cannot float)
8. Do not enlarge shadows on hover (contradicts light physics, finger approaching should shrink shadows)
9. Do not break light source direction (bright shadow must be upper-left -X/-Y, dark shadow must be lower-right +X/+Y)
10. Do not enlarge inner shadow on input focus (should reduce, simulating channel opening not pressurizing)

#### AI Rules
```
# Neumorphism Design System

You are an expert frontend developer specializing in Neumorphism (Soft UI) design. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Neumorphism / Soft UI
- **Category**: Modern, Minimal
- **Essence**: Soft 3D depth through dual shadows simulating light hitting clay-like surfaces
- **Mood**: Calm, tactile, premium, approachable

---

## Core Visual Principles

### 1. Background Foundation
```
REQUIRED: bg-[#e0e5ec] or bg-[#f0f0f3]
Light gray monochromatic backgrounds only
Elements must share the same color family as background
```

### 2. Shadow System (Dual Light Source)
```
RAISED (default):
shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
- Dark shadow: lower-right (+X, +Y) → #b8bcc2
- Light shadow: upper-left (-X, -Y) → #ffffff
- Blur ratio: 1.5-2x of offset value

RECESSED (pressed/input):
shadow-[inset_8px_8px_16px_#b8bcc2,inset_-8px_-8px_16px_#ffffff]
- Same light direction, but inset
```

### 3. Border Radius
```
REQUIRED: rounded-xl (12px) or rounded-2xl (16-24px)
Soft, consistent curves across all elements
```

---

## Interaction Specifications

### Button States
| State | Effect | Implementation |
|-------|--------|----------------|
| Default | Raised | shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff] |
| Hover | Shadow shrinks | shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff] |
| Active | Recessed (inset) | shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff] |
| Disabled | Faded | opacity-50, shadow weakened |

### Input States
| State | Effect | Implementation |
|-------|--------|----------------|
| Default | Deep recess | shadow-[inset_6px_6px_12px_#b8bcc2,inset_-6px_-6px_12px_#ffffff] |
| Focus | Shallow recess | shadow-[inset_2px_2px_4px_#b8bcc2,inset_-2px_-2px_4px_#ffffff] |

---

## Animation Rules

### Interaction Physics
- **Extrude to Intrude**: Button active state MUST switch from raised to recessed shadow. NO translate displacement allowed — elements grow from the surface, they don't float.
- **Hover Shadowing**: Hover REDUCES shadow size (16px → 8px), simulating finger blocking light. Opposite of typical hover — shadows shrink, not grow.
- **Smooth Molding**: All transitions use `duration-300 ease-in-out`, mimicking soft rubber/plastic flexibility.
- **Fixed Illuminant**: Light source LOCKED at upper-left. Never break this direction in any shadow configuration.

### Transition Timing
```
transition-all duration-300 ease-in-out
```

---

## Color Palette

| Token | Value | Usage |
|-------|-------|-------|
| Background | #e0e5ec | Main surface |
| Background Light | #f0f0f3 | Elevated surfaces |
| Dark Shadow | #b8bcc2 | Lower-right shadows |
| Light Shadow | #ffffff | Upper-left highlights |
| Accent | #6d5dfc | Interactive elements, CTAs |
| Text Primary | #333333 | Headings, body |
| Text Secondary | #6b7280 | Muted, labels |

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| bg-white, bg-black | Breaks monochromatic harmony |
| shadow-[Xpx_Xpx_0px] | Hard shadows violate soft aesthetic |
| High-contrast colors | Disrupts subtle depth perception |
| border-2 or thicker | Borders break seamless surface illusion |
| bg-gradient-* | Gradients conflict with flat light simulation |
| rounded-none | Sharp corners contradict soft material feel |
| translate on buttons | Elements are part of surface, not floating |
| Larger hover shadows | Contradicts light physics (finger blocks light) |

---

## Responsive Guidelines

### Shadow Scaling
```
Mobile: shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]
Desktop (md:): shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
```

### Spacing
```
Padding: p-4 md:p-6 lg:p-8
Gap: gap-4 md:gap-6
Section: py-12 md:py-20
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is #e0e5ec or #f0f0f3
- [ ] All shadows use dual light/dark format
- [ ] Light shadow at -X/-Y, dark at +X/+Y
- [ ] Buttons: hover shrinks shadow, active goes inset
- [ ] Inputs use inset shadows, focus reduces depth
- [ ] No translate on interactive elements
- [ ] Border radius is rounded-xl or rounded-2xl
- [ ] Transitions use duration-300 ease-in-out
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-transparent`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]`
- Medium: `shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff] md:shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]`
- Large: `shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff] md:shadow-[12px_12px_24px_#b8bcc2,-12px_-12px_24px_#ffffff]`
- Hover: `hover:shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold text-gray-800`
- Body: `text-gray-600`

**Required Classes**

Button:
```
bg-[#e0e5ec]
rounded-xl
shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff]
hover:shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]
active:shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]
transition-all duration-200
```

Card:
```
bg-[#e0e5ec]
rounded-2xl
shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
```

Input:
```
bg-[#e0e5ec]
rounded-xl
shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]
focus:shadow-[inset_6px_6px_12px_#b8bcc2,inset_-6px_-6px_12px_#ffffff]
focus:outline-none
placeholder:text-gray-400
transition-shadow duration-200
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-black`, `bg-white`

Patterns: `^rounded-none`, `^shadow-(?!\[|none)`, `^bg-gradient-`, `^border-[248]`, `^bg-black`, `^bg-white$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
<button className="
  bg-[#e0e5ec] text-gray-600 font-bold tracking-wide
  px-8 py-4 rounded-xl
  shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
  hover:shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]
  hover:text-gray-800
  active:shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]
  transition-all duration-300 ease-in-out
">
  Squeeze Me
</button>
```

**Card**
```html
<div className="
  bg-[#e0e5ec] rounded-2xl p-10
  shadow-[10px_10px_20px_#b8bcc2,-10px_-10px_20px_#ffffff]
  hover:shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff]
  transition-shadow duration-300 ease-in-out
">
  <h3 className="text-gray-800 font-semibold text-lg mb-2">卡片标题</h3>
  <p className="text-gray-600">卡片内容描述文字</p>
</div>
```


---


### 玻璃拟态 (Glassmorphism)

**Slug**: `glassmorphism`

#### Description
Premium frosted glass with a nocturne temperament. Deep ink scenes and restrained light wells; the glass borrows light instead of carrying color — gaussian blur, saturation boost, lit top edges and film grain make glass that feels believable, not decorative.

#### Design Philosophy
Glassmorphism is optics, not a color scheme. Real glass has no color of its own — it borrows, bends and softens the light behind it. Apple's Liquid Glass material follows the same principle: glass takes color from the content layer and stays neutral itself.

Core principles:
- Colorless glass: Panels use only low-opacity white (5%-12%); every color comes from the scene behind
- Deep night scenes: Near-black ink backgrounds with a few soft light wells give the glass something to refract
- Light has direction: A lit top edge (inset highlight) and shaded bottom edge (inset shadow) separate real glass from "translucent rectangles"
- One accent: Champagne gold #E4B863 appears only on primary actions and highlights, never as a surface color
- Film grain: A 2%-3% noise overlay removes the plastic feel
- Fluid motion: All transitions use spring easing to simulate glass physical inertia

#### Do's (必须做)
1. Use a deep ink night base (like #0B1322) with 2-3 soft large-radius light wells (radial gradients)
2. Glass panels use bg-white/5 to bg-white/12 with backdrop-blur-[40px] or backdrop-blur-[60px]
3. Add saturation boost backdrop-saturate-[180%]
4. Give light a direction: inset 0 1px 0 white highlight (lit top edge) + inset 0 -1px 0 dark shade (bottom edge) + outer depth shadow
5. Overlay 2%-3% film grain (SVG feTurbulence) to remove the plastic feel
6. One accent only: champagne gold #E4B863 for primary CTAs, key numbers and highlighted text
7. Borders use border-white/15, increase to border-white/30 on hover
8. Rounded corners use rounded-2xl or rounded-3xl
9. Transitions use duration-500 + cubic-bezier(0.16,1,0.3,1) spring easing with slight hover lift

#### Don'ts (禁止做)
1. Do not use purple-pink AI gradients (#667eea, #764ba2, #f093fb style indigo-purple-pink combos)
2. Do not use glass on flat solid backgrounds (needs light wells or imagery to blur)
3. Do not exceed 15% glass opacity (it becomes a solid tinted block, not glass)
4. Do not use low blur values backdrop-blur-sm or backdrop-blur
5. Do not omit backdrop-saturate (the boost makes dark-scene lights glow through the glass)
6. Do not tint the glass panel itself (glass is colorless; color belongs to the scene)
7. Do not use opaque backgrounds bg-white, bg-black
8. Do not use sharp or small corners rounded-none, rounded-sm
9. Do not use fast transitions duration-100, duration-150
10. Do not use single-layer flat shadows (needs outer depth + lit top edge + shaded bottom edge)

#### AI Rules
```
# Nocturne Glassmorphism Design System

You are an expert frontend developer specializing in premium nocturne glassmorphism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Nocturne Glassmorphism
- **Category**: Modern, Premium
- **Essence**: Colorless glass over deep night scenes — the scene carries the color, the glass borrows the light
- **Mood**: Quiet luxury, cinematic, composed, believable
- **Inspiration**: Apple Liquid Glass material rules (glass takes color from content, never itself), architectural glazing, city lights through a rain-washed window

---

## Core Visual Principles

### 1. Scene Before Glass (CRITICAL)
```
MANDATORY: Deep ink night base + 2-3 soft light wells. NEVER a flat or purple-pink gradient.

Base: #0B1322 (deep ink blue) or #060A13 (near black)
Light wells (radial gradients, large radius, soft):
<div class="absolute -top-32 -right-20 w-[560px] h-[560px] rounded-full"
  style="background: radial-gradient(circle, rgba(124,156,196,0.28) 0%, transparent 65%)" />
<div class="absolute -bottom-36 -left-24 w-[520px] h-[520px] rounded-full"
  style="background: radial-gradient(circle, rgba(51,81,122,0.35) 0%, transparent 65%)" />
Optional single warm counterpoint:
  radial-gradient(circle, rgba(228,184,99,0.12) 0%, transparent 60%)
```

### 2. Glass Panel Three-Layer Structure
```
LAYER 1 — Colorless Glass Surface:
bg-white/5 to bg-white/12  (NEVER tinted, NEVER above 15%)
backdrop-blur-[40px] or backdrop-blur-[60px]
backdrop-saturate-[180%]

LAYER 2 — Inner Luminance:
<span class="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />

LAYER 3 — Directional Shadows (light comes from above):
shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
```

### 3. Film Grain
```
Full-viewport 2%-3% SVG feTurbulence noise overlay removes the plastic feel:
opacity: 0.025; background-image: url("data:image/svg+xml,...feTurbulence type='fractalNoise' baseFrequency='0.8'...")
```

### 4. Border System
```
Default: border border-white/15
Hover: border-white/30 to border-white/35
```

### 5. Border Radius
```
REQUIRED: rounded-2xl (16px) or rounded-3xl (24px)
```

---

## Interaction Specifications

### Hover Effects
| Element | Effect | Implementation |
|---------|--------|----------------|
| Cards | Lift + deeper shadow | hover:-translate-y-1 hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)] |
| Buttons | Subtle lift + border brighten | hover:-translate-y-0.5 hover:border-white/35 hover:bg-white/15 |
| Links | Background reveal | hover:bg-white/8 |

### Specular Sweep (Light Reflection)
```jsx
<span className="absolute inset-0 -translate-x-[150%] skew-x-[-20deg]
  bg-gradient-to-r from-transparent via-white/25 to-transparent
  group-hover:translate-x-[150%] transition-transform duration-700 ease-out
  pointer-events-none" />
```

### Active State
```
active:scale-[0.97]
```

---

## Animation Rules

### Spring Physics
```
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover lift | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Specular sweep | 700ms | ease-out |
| Focus glow | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Active press | 150ms | ease-out |

---

## Color Palette

### Night Scene (the background owns ALL color)
| Token | Hex | Usage |
|-------|-----|-------|
| Night Deep | #060A13 | Darkest base, page edges |
| Night | #0B1322 | Primary background |
| Night Steel | #16233A | Elevated fields, section bands |
| Moon Steel | #33517A | Light well color (deep) |
| Moonlight | #7C9CC4 | Light well color (bright) |

### Glass Surface (ALWAYS colorless)
| Token | Value | Usage |
|-------|-------|-------|
| Glass BG | bg-white/5 to bg-white/12 | Panel backgrounds |
| Glass BG Hover | bg-white/10 to bg-white/16 | Hover states |
| Border | border-white/15 | Default borders |
| Border Hover | border-white/30 | Hover borders |
| Text Primary | text-white | Headlines |
| Text Secondary | text-white/60 | Body copy |
| Text Muted | text-white/40 | Captions |

### The One Accent (use sparingly)
| Token | Hex | Usage |
|-------|-----|-------|
| Champagne | #E4B863 | Primary CTA fills (at /15-/22 alpha), key numbers, borders (at /40) |
| Champagne Bright | #F3DCA8 | Text on champagne buttons, highlighted words |

Champagne button recipe:
```
bg-[#E4B863]/15 border border-[#E4B863]/40 text-[#F3DCA8]
shadow-[0_4px_20px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(243,220,168,0.35)]
hover:bg-[#E4B863]/22 hover:border-[#E4B863]/55
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| #667eea / #764ba2 / #f093fb gradients | The generic AI purple-pink look this style explicitly rejects |
| Tinted glass panels (bg-purple-500/20 etc.) | Glass is colorless; color belongs to the scene |
| Glass opacity above 15% | Becomes a solid block, kills the glass illusion |
| Flat solid backgrounds | Nothing to refract |
| bg-white, bg-black on panels | Glass requires translucency |
| backdrop-blur-sm, backdrop-blur | Insufficient blur |
| Omitting backdrop-saturate | Scene lights stop glowing through |
| Single-layer shadow | No light direction, reads as flat translucency |
| rounded-none, rounded-sm | Sharp corners break glass |
| duration-100, duration-150 | Too fast, loses fluidity |
| Multiple accent colors | One champagne accent only |

---

## Responsive Guidelines

### Blur Scaling
```
Mobile: backdrop-blur-[30px]
Desktop (md:): backdrop-blur-[40px] to backdrop-blur-[60px]
```

### Shadow Scaling
```
Mobile: shadow-[0_8px_24px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.18)]
Desktop: shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
```

### Padding
```
Cards: p-6 md:p-8 lg:p-10
Buttons: px-5 py-3 md:px-6 md:py-3.5
```

---

## Component Templates

### Glass Card
```jsx
<div className="group relative p-6 md:p-8
  bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%]
  border border-white/15 rounded-3xl
  shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:border-white/30
  hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:-translate-y-1
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden">
  {/* Inner luminance */}
  <span className="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />
  {/* Content */}
  <div className="relative z-10">...</div>
</div>
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is a deep ink night scene with soft light wells (NOT flat, NOT purple-pink)
- [ ] Glass panels are colorless white at 5%-12% opacity
- [ ] backdrop-blur-[40px] or higher present
- [ ] backdrop-saturate-[180%] present
- [ ] Shadows are directional (outer depth + lit top edge + shaded bottom edge)
- [ ] Film grain overlay added
- [ ] Champagne #E4B863 appears ONLY on primary actions/highlights
- [ ] Borders use border-white/15
- [ ] Corners are rounded-2xl or rounded-3xl
- [ ] Transitions use spring easing cubic-bezier(0.16,1,0.3,1)
- [ ] Body text is white/60 or brighter
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/15`
- Radius: `rounded-3xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(3,7,18,0.35),inset_0_1px_0_rgba(255,255,255,0.18)]`
- Medium: `shadow-[0_8px_24px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.3)]`
- Large: `shadow-[0_16px_48px_rgba(3,7,18,0.55),0_0_0_1px_rgba(255,255,255,0.08),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.35)]`
- Hover: `hover:shadow-[0_20px_60px_rgba(3,7,18,0.65),0_0_0_1px_rgba(255,255,255,0.12),inset_0_1px_0_rgba(255,255,255,0.32)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`

**Typography**
- Heading: `font-semibold text-white`
- Body: `text-white/80`

**Required Classes**

Button:
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%]
border border-white/20
rounded-2xl
text-white
shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)]
hover:bg-white/15 hover:border-white/35 hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35)]
hover:-translate-y-0.5
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

Card:
```
bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%]
border border-white/15
rounded-3xl
shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
[background-image:linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_50%)]
```

Input:
```
bg-white/6 backdrop-blur-[40px] backdrop-saturate-[180%]
border border-white/15
rounded-2xl
text-white placeholder-white/35
shadow-[inset_0_1px_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(2,6,16,0.3)]
focus:outline-none focus:border-white/35 focus:bg-white/10
focus:shadow-[0_0_0_3px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(255,255,255,0.25)]
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `rounded`, `bg-white`, `bg-black`, `bg-gray-100`, `bg-gray-900`, `shadow-none`, `backdrop-blur-sm`, `backdrop-blur`

Patterns: `^rounded-none`, `^rounded-sm$`, `^rounded$`, `^bg-(?!white\/|gradient|\[|transparent)`, `^border-(?!white\/|\[)`, `^backdrop-blur$`, `^backdrop-blur-sm$`, `^duration-(100|150)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `modal`, `pill`, `toggle`, `nav`, `slider`, `controlGrid`, `controlTile`


#### Component Examples

**Button**
```html
<button className="group relative
  px-6 py-3
  bg-white/10 backdrop-blur-[40px] backdrop-saturate-[180%]
  border border-white/20
  rounded-2xl
  text-white font-medium
  shadow-[0_4px_16px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(2,6,16,0.3)]
  hover:bg-white/15 hover:border-white/35
  hover:shadow-[0_10px_32px_rgba(3,7,18,0.55),inset_0_1px_0_rgba(255,255,255,0.35),inset_0_-1px_0_rgba(2,6,16,0.3)]
  hover:-translate-y-0.5
  active:scale-[0.97]
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden
">
  <span className="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />
  <span className="absolute inset-0 -translate-x-[150%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/25 to-transparent group-hover:translate-x-[150%] transition-transform duration-700 ease-out pointer-events-none" />
  <span className="relative z-10">Frosted Glass</span>
</button>

{/* Primary action: the ONLY place the champagne accent appears */}
<button className="group relative
  px-6 py-3
  bg-[#E4B863]/15 backdrop-blur-[40px] backdrop-saturate-[180%]
  border border-[#E4B863]/40
  rounded-2xl
  text-[#F3DCA8] font-medium
  shadow-[0_4px_20px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(243,220,168,0.35),inset_0_-1px_0_rgba(2,6,16,0.3)]
  hover:bg-[#E4B863]/22 hover:border-[#E4B863]/55
  hover:-translate-y-0.5
  active:scale-[0.97]
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden
">
  <span className="absolute inset-0 bg-gradient-to-b from-[#F3DCA8]/15 to-transparent pointer-events-none" />
  <span className="relative z-10">Primary Action</span>
</button>
```

**Card**
```html
<div className="group relative
  p-6 md:p-8
  bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%]
  border border-white/15
  rounded-3xl
  shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:border-white/30
  hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:-translate-y-1
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden
">
  <span className="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />
  <span className="absolute inset-0 -translate-x-[150%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/12 to-transparent group-hover:translate-x-[150%] transition-transform duration-1000 ease-out pointer-events-none" />
  <div className="relative z-10">
    <h3 className="text-xl font-semibold text-white mb-2">
      Nocturne Glass Card
    </h3>
    <p className="text-white/60">
      The scene carries the color; the glass stays neutral
    </p>
  </div>
</div>
```


---


### 便当盒布局 (Bento Grid)

**Slug**: `bento-grid`

#### Description
Irregular grid layout inspired by Japanese bento boxes, creating visual hierarchy through varied card sizes. Commonly used for portfolios and product showcases.

#### Design Philosophy
Bento Grid is a modern layout style inspired by the compartmentalized design of Japanese bento boxes. Through combining cards of different sizes within a grid, it creates visual effects that are both orderly and varied.

Core principles:
- Modularity: Each block is independent yet interconnected
- Hierarchy: Emphasize key content through size differences
- Whitespace: Appropriate gaps let the layout breathe
- Responsive: Gracefully adapt across different screen sizes
- Widget playfulness: Each card feels like an independent iOS widget

#### Do's (必须做)
1. Use CSS Grid layout grid grid-cols-4
2. Cards span multiple rows or columns col-span-2, row-span-2
3. Maintain consistent gaps gap-4 or gap-6
4. Use rounded corners rounded-xl or rounded-2xl
5. Place primary content in large cards, secondary info in small cards
6. Use aspect-ratio to maintain card proportions
7. Smooth hover lift + micro-scale hover:-translate-y-1 hover:scale-[1.01]
8. Shadow expands from compact to wide on hover (shadow-sm -> shadow-xl)
9. Card inner icons independently change color or scale-110 on group-hover
10. Use spring-like easing ease-out, duration-200 to 300

#### Don'ts (禁止做)
1. Do not make all cards the same size (loses Bento character)
2. Do not use inconsistent gaps
3. Do not overcrowd cards without whitespace
4. Do not ignore responsive adaptation
5. Do not cram too much content inside cards
6. Do not use hard-edge shadows (shadow-[Xpx_Ypx_0px])
7. Do not use sharp corners (rounded corners required)

#### AI Rules
```
You are a Bento Grid design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- All cards being the same size (must have size variation)
- Ignoring responsive adaptation
- Inconsistent gaps between cards
- Overcrowded card content
- Using sharp corners (rounded corners required)
- Using hard-edge shadows (shadow-[Xpx_Ypx_0px])

## Must Follow

- Use CSS Grid: grid grid-cols-4
- Card spanning: col-span-2, row-span-2
- Consistent gaps: gap-4 or gap-6
- Rounded corners: rounded-xl, rounded-2xl, rounded-3xl
- Responsive: md:grid-cols-2, lg:grid-cols-4

## Animation & Interaction Rules

- Widget Feel: Each card feels like an independent iOS widget. Smooth hover lift + micro-scale (hover:-translate-y-1 hover:scale-[1.01]), with soft wide shadow (hover:shadow-[0_8px_30px_rgba(0,0,0,0.08)]).
- Micro-interactions: Card inner icons respond independently on group-hover: color swap (bg swap), scale up (scale-110).
- Snappy Easing: Use ease-out with duration-200 to duration-300, making interactions responsive and modern.
- Active Feedback: Press with active:scale-95 or active:scale-98, simulating physical press.
- Smooth Focus: Input focus ring transition is ultra-smooth (transition-all duration-200).

## Layout Rules

Large cards (col-span-2 row-span-2):
- Place primary content or featured functions
- Can use gradient backgrounds
- Recommend 1-2 cards

Medium cards (col-span-2 or row-span-2):
- Secondary important content
- Recommend 2-3 cards

Small cards (1x1):
- Icons, numbers, tags and other brief content
- Fill remaining space

## Color Suggestions

Backgrounds:
- Gradient: bg-gradient-to-br from-blue-500 to-purple-600
- Light: bg-zinc-50, bg-zinc-100
- Colored: bg-orange-50, bg-green-50, bg-blue-50

Text:
- Primary: text-zinc-900
- Secondary: text-zinc-500, text-zinc-600
- White: text-white (on dark backgrounds)

## Self-Check

After generating code, verify:
1. Cards have varying sizes
2. Uses CSS Grid
3. Consistent gaps
4. Has responsive handling
5. Unified rounded corners
6. Cards have hover lift + micro-scale effect
7. Inner icons have group-hover linkage
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-zinc-100 dark:border-zinc-800`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md hover:-translate-y-0.5`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold text-zinc-900 dark:text-zinc-100`
- Body: `text-zinc-600 dark:text-zinc-400`

**Required Classes**

Button:
```
px-4 py-2 md:px-6 md:py-3
rounded-xl
font-medium
transition-colors
```

Card:
```
rounded-2xl
border border-zinc-100 dark:border-zinc-800
shadow-sm
hover:shadow-md hover:-translate-y-0.5
transition-all duration-200
```

Input:
```
bg-zinc-50 dark:bg-zinc-800
border border-zinc-200 dark:border-zinc-700
rounded-xl
focus:outline-none focus:ring-2 focus:ring-blue-500/20
focus:border-blue-500
transition-all
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `gap-1`, `gap-2`, `gap-10`, `gap-12`

Patterns: `^rounded-none`, `^rounded-sm`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-zinc-900 text-white
  rounded-xl
  font-medium
  shadow-sm
  hover:bg-zinc-800
  hover:shadow-md
  hover:-translate-y-0.5
  active:scale-95 active:translate-y-0
  transition-all duration-200
">
  Click me
</button>
```

**Card**
```html
<div className="
  group p-6
  bg-white
  rounded-3xl
  border border-zinc-100
  shadow-[0_2px_10px_rgba(0,0,0,0.02)]
  hover:shadow-[0_8px_30px_rgba(0,0,0,0.08)]
  hover:-translate-y-1 hover:scale-[1.01]
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="w-12 h-12 bg-blue-50 text-blue-500 rounded-2xl mb-4 flex items-center justify-center group-hover:bg-blue-500 group-hover:text-white group-hover:scale-110 transition-all duration-300 ease-out">
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </div>
  <h3 className="text-lg font-semibold text-zinc-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">
    Lightning Fast
  </h3>
  <p className="text-zinc-500 text-sm leading-relaxed">
    Modern bento grids require snappy, widget-like micro-interactions to feel alive.
  </p>
</div>
```


---


### 企业简洁风 (Corporate Clean)

**Slug**: `corporate-clean`

#### Description
Professional and clean enterprise style emphasizing readability, consistency and trustworthiness. Ideal for B2B SaaS, corporate websites, and admin dashboards.

#### Design Philosophy
Corporate Clean design style originates from the design language of modern enterprise software, emphasizing professionalism, trustworthiness, and efficient information delivery.

Core principles:
- Professional and trustworthy: Build trust through consistent visual language
- Information hierarchy: Clear heading, body, and auxiliary information levels
- Function first: Design serves function without sacrificing usability
- Responsive: Smooth interactions and immediate visual feedback

#### Do's (必须做)
1. Use rounded-lg or rounded-xl as primary border radius
2. Buttons use shadow-sm for added depth
3. Primary color uses blue tones (blue-600, blue-700) to convey professionalism
4. Backgrounds use light tones like bg-slate-50 or bg-gray-50
5. Cards use bg-white shadow-sm border border-gray-200
6. Button hover with slight lift hover:-translate-y-0.5 + subtle shadow upgrade hover:shadow
7. Button active with slight shrink active:scale-[0.98] for tactile press confirmation
8. Focus state uses focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 (ring-offset is key for WCAG compliance)
9. Card hover with hover:-translate-y-0.5 hover:shadow-md for floating feel
10. Icon container hover with hover:bg-blue-500 hover:scale-110 + icon color group-hover:text-white for micro-interaction
11. Table rows use hover:bg-gray-50 for hover highlight

#### Don'ts (禁止做)
1. Do not use overly vivid color combinations
2. Do not use sharp corners rounded-none
3. Do not use heavy shadows shadow-2xl and above
4. Do not use gradient buttons (maintain flat design)
5. Do not use fancy fonts for body text
6. Do not use overly tight element spacing
7. Do not use animations exceeding duration-200 (enterprise UI should be crisp, not floaty)
8. Do not use focus:ring without focus:ring-offset-2 (ring-offset separates focus ring from element, required for WCAG)
9. Do not omit active:scale-[0.98] on buttons (no press feedback makes buttons feel like decoration)

#### AI Rules
```
You are a Corporate Clean style frontend development expert. All generated code must follow modern enterprise UI standards.

## Absolutely Forbidden

- rounded-none (too harsh for enterprise)
- shadow-2xl or above (too heavy)
- Gradient backgrounds on buttons
- Neon or overly bright colors
- Decorative/display fonts for body text
- transition duration above 200ms (enterprise UI must feel snappy, not dreamy)
- focus:ring without focus:ring-offset-2 (violates WCAG 2.1 AA contrast requirements for focus indicators)
- Buttons without active:scale-[0.98] (no tactile confirmation = button feels like decoration)

## Must Follow

- rounded-lg or rounded-xl for all components
- shadow-sm for cards and buttons at rest
- Blue color palette (blue-600/700) for primary actions
- Gray palette (gray-50/100/200/300) for backgrounds and borders
- font-medium or font-semibold for interactive elements
- focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 for ALL focusable elements

## Animation & Interaction Rules

- Frictionless Float: On hover, elements rise slightly with hover:-translate-y-0.5 combined with shadow micro-upgrade (shadow-sm to shadow). This creates a "hover above the surface" sensation -- professional and responsive.
- Tactile Confirmation: On :active, ALL buttons must use active:scale-[0.98] combined with active:translate-y-0 and active:shadow-sm to create a "button pressed" sensation. Without this, buttons feel unresponsive. The scale-[0.98] is barely perceptible (2%) but critical.
- Focus Ring Offset: Always use focus:ring-offset-2 alongside focus:ring-2. The offset separates the ring from the element border, meeting WCAG 2.1 AA contrast for focus indicators. Never use focus:ring alone.
- Icon Micro-interaction: Icon containers use group class. On hover: bg transitions to brand color (hover:bg-blue-500), icon color transitions to white (group-hover:text-white), and container scales up (hover:scale-110). Use transition-all duration-200 ease-out.
- Snappy Easing: Use duration-150 ease-out for buttons and interactive controls. Use duration-200 ease-out for cards and larger containers. Never go above 200ms.

## Color Palette

- Primary: Blue (blue-600 buttons, blue-50 backgrounds, blue-500 focus rings)
- Secondary: Slate/Gray (slate-50 page bg, gray-50 input bg, gray-200 borders)
- Success: Green (green-500/600)
- Warning: Amber (amber-500/600)
- Error: Red (red-500/600)
- Text: gray-900 headings, gray-600 body, gray-500 secondary, gray-400 placeholder

## Spacing

- Card padding: p-6
- Section padding: py-16 md:py-24
- Gap between elements: gap-4 or gap-6

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98] active:translate-y-0
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2
3. Cards have hover:-translate-y-0.5 hover:shadow-md
4. Icon containers use group + hover:bg-{color}-500 + group-hover:text-white
5. No duration above 200ms
6. No rounded-none anywhere
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow`
- Large: `shadow-md`
- Hover: `shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-normal`

**Required Classes**

Button:
```
px-4 py-2
rounded-lg
font-medium
transition-all duration-200
```

Card:
```
bg-white
rounded-xl
shadow-sm
border border-gray-200
```

Input:
```
px-3 py-2
border border-gray-300
rounded-lg
focus:ring-2 focus:ring-blue-500
focus:border-blue-500
```

**Forbidden**

Classes: `rounded-none`, `shadow-2xl`, `border-4`, `bg-gradient-to-r`, `text-neon`

Patterns: `^shadow-2xl`, `^bg-gradient-`, `^border-[48]`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary Button */}
<button className="
  px-4 py-2
  bg-blue-600 text-white
  rounded-lg shadow-sm font-medium
  hover:bg-blue-700 hover:-translate-y-0.5 hover:shadow
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:scale-[0.98] active:translate-y-0 active:shadow-sm
  transition-all duration-150 ease-out
">
  Get Started
</button>

{/* Secondary Button */}
<button className="
  px-4 py-2
  bg-white text-gray-700
  border border-gray-300 rounded-lg shadow-sm font-medium
  hover:bg-gray-50 hover:-translate-y-0.5 hover:shadow
  focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2
  active:scale-[0.98] active:translate-y-0 active:shadow-sm
  transition-all duration-150 ease-out
">
  Learn More
</button>

{/* Ghost Button */}
<button className="
  px-4 py-2
  text-blue-600
  rounded-lg font-medium
  hover:bg-blue-50 hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:scale-[0.98] active:translate-y-0 active:bg-blue-100
  transition-all duration-150 ease-out
">
  Cancel
</button>
```

**Card**
```html
<div className="
  bg-white rounded-xl shadow-sm border border-gray-200 p-6
  hover:shadow-md hover:-translate-y-0.5
  transition-all duration-200 ease-out
">
  <div className="flex items-center gap-3 mb-4">
    {/* Icon container — hover triggers color fill + scale */}
    <div className="
      group w-10 h-10
      bg-blue-50 rounded-lg
      flex items-center justify-center
      hover:bg-blue-500 hover:scale-110
      transition-all duration-200 ease-out
      cursor-default
    ">
      <svg className="w-5 h-5 text-blue-600 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
    </div>
    <h3 className="text-lg font-semibold text-gray-900">Feature Title</h3>
  </div>
  <p className="text-gray-600 leading-relaxed text-sm">
    Description of the feature with clear, professional language.
  </p>
  <button className="
    mt-4 px-3 py-1.5
    bg-blue-600 text-white text-sm
    rounded-lg shadow-sm font-medium
    hover:bg-blue-700 hover:-translate-y-0.5 hover:shadow
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    active:scale-[0.98] active:translate-y-0 active:shadow-sm
    transition-all duration-150 ease-out
  ">
    Learn More
  </button>
</div>
```


---


### 极简扁平风 (Minimalist Flat)

**Slug**: `minimalist-flat`

#### Description
Ultra-minimal flat design with no shadows or gradients, creating hierarchy through color and whitespace. Ideal for portfolios, creative agencies, and art websites.

#### Design Philosophy
Minimalist Flat style pursues the essence of design, removing all unnecessary decoration and letting content take center stage.

Core principles:
- Less is more: Every element must have a reason to exist
- Flat purity: Reject shadows, gradients, and other skeuomorphic effects
- Color speaks: Use color to distinguish layers rather than light and shadow
- Generous whitespace: Let the design breathe and highlight core content

#### Do's (必须做)
1. Use solid color backgrounds bg-white, bg-black, bg-[accent]
2. Borders use border-2 border-black or no border
3. Keep border radius consistent: all rounded-none or all rounded-full
4. Use high-contrast color schemes
5. Generous whitespace space-y-12 md:space-y-24
6. Text uses pure black or pure white text-black, text-white
7. Hover uses color changes rather than shadows

#### Don'ts (禁止做)
1. Do not use any shadows shadow-*
2. Do not use gradients bg-gradient-*
3. Do not use colors with opacity below 0.5
4. Do not mix different border-radius values
5. Do not use gray text (unless intentional)
6. Do not use pattern backgrounds

#### AI Rules
```
# Minimalist Flat Design System

You are an expert frontend developer specializing in ultra-minimal flat design. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Minimalist Flat / Pure Flat Design
- **Category**: Minimal, Modern
- **Essence**: Content is king — zero decoration, maximum clarity, pure function
- **Mood**: Clean, confident, artistic, editorial
- **Inspiration**: Dieter Rams, Swiss design, art galleries, high-fashion editorials

---

## Core Visual Principles

### 1. Color Purity (CRITICAL)
```
ONLY PURE COLORS ALLOWED:
- bg-white, bg-black
- bg-[#ff3366] (or one chosen accent)
- text-black, text-white

NO transparency, NO grays (except intentional muted text)
```

### 2. Shadow Policy
```
ABSOLUTELY FORBIDDEN:
- shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl
- ANY box-shadow whatsoever

This is a zero-shadow design system.
```

### 3. Gradient Policy
```
ABSOLUTELY FORBIDDEN:
- bg-gradient-*, from-*, via-*, to-*

Pure flat colors only.
```

### 4. Border Radius Consistency
```
CHOOSE ONE and apply consistently:
OPTION A: rounded-none (sharp, editorial)
OPTION B: rounded-full (for circular elements only)

NEVER mix rounded values in the same design.
```

### 5. Border System
```
DEFAULT: border-2 border-black
Establishes structure without shadows
```

---

## Interaction Specifications

### Hover (High-Contrast Inversion)
| Element | Default | Hover |
|---------|---------|-------|
| Button (filled) | bg-black text-white | hover:bg-white hover:text-black |
| Button (outlined) | bg-white text-black | hover:bg-black hover:text-white |
| Card | bg-white border-black | hover:bg-black hover:text-white |
| Link | text-black | hover:text-[accent] |

### Active State
```
active:bg-gray-200 (light variant)
active:bg-gray-100 (dark variant)
Brief flash feedback only
```

### Focus State
```
focus:outline-none focus:border-[accent]
OR
focus:bg-black focus:text-white
```

---

## Animation Rules

### Interaction Physics
- **Strict 2D Flatness**: NO translate, NO scale, NO shadow Z-axis feedback. All interactions stay within the 2D plane.
- **High-Contrast Inversion**: Hover uses foreground/background color swap. Clean, binary feedback.
- **Instant Sharpness**: Use `transition-none` or `duration-75`. NO soft fades, NO ease-in-out.
- **Border Dynamics**: Focus/hover establishes hierarchy through border thickness or underline changes, NOT shadows.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Color inversion | 0ms (instant) | transition-none |
| Border change | 75ms | ease-out |
| Focus ring | 150-200ms | ease-out |

---

## Color Palette

### Core Colors
| Token | Value | Usage |
|-------|-------|-------|
| Primary | #000000 (black) | Text, borders, filled buttons |
| Background | #ffffff (white) | Page background, cards |
| Accent | #ff3366 (or chosen) | CTAs, highlights, hover states |

### Text Hierarchy
| Level | Classes |
|-------|---------|
| H1 | text-black text-5xl md:text-7xl font-bold tracking-tight |
| H2 | text-black text-3xl md:text-5xl font-bold |
| H3 | text-black text-xl md:text-2xl font-black |
| Body | text-black text-base leading-relaxed |
| Muted | text-gray-500 text-sm |
| Label | text-xs uppercase tracking-widest |

---

## Typography

| Element | Classes |
|---------|---------|
| Headlines | font-bold tracking-tight leading-tight |
| Body | Regular weight, leading-relaxed |
| Labels | text-xs font-bold uppercase tracking-widest |
| Links | underline-offset-4 hover:text-[accent] |

---

## Whitespace Philosophy

```
GENEROUS SPACING IS MANDATORY:
- Section gaps: space-y-12 md:space-y-24
- Card padding: p-8 md:p-12
- Between elements: gap-6 md:gap-8
- Page margins: px-6 md:px-12

"When in doubt, add more whitespace."
```

---

## Component Templates

### Button (Filled)
```jsx
<button className="px-8 py-4 bg-black text-white font-bold 
  border-2 border-black 
  hover:bg-white hover:text-black 
  active:bg-gray-200 
  transition-none">
  Get Started
</button>
```

### Button (Outlined)
```jsx
<button className="px-8 py-4 bg-white text-black font-bold 
  border-2 border-black 
  hover:bg-black hover:text-white 
  active:bg-gray-100 
  transition-none">
  Learn More
</button>
```

### Card (Bordered)
```jsx
<div className="group border-2 border-black p-8 
  hover:bg-black hover:text-white 
  transition-none cursor-pointer">
  <span className="text-xs font-bold uppercase tracking-widest 
    text-gray-500 group-hover:text-gray-300">Category</span>
  <h3 className="text-3xl font-black mt-2 mb-4">Title</h3>
  <p className="leading-relaxed">Description text.</p>
</div>
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| ANY shadow-* | Shadows create depth, violates flat principle |
| ANY gradient | Gradients add dimension, violates flat principle |
| opacity < 0.5 | Low opacity weakens contrast |
| Mixed border-radius | Breaks visual consistency |
| Gray text (unintentional) | Reduces clarity |
| Pattern backgrounds | Adds unnecessary visual noise |
| translate on hover | Creates Z-axis illusion |
| scale on hover | Creates Z-axis illusion |
| Soft transitions (300ms+) | Delays instant feedback |

---

## Responsive Guidelines

### Spacing Scale
```
Mobile: space-y-8, p-6, gap-4
Desktop (md:): space-y-16, p-12, gap-8
Large (lg:): space-y-24, p-16, gap-12
```

### Typography Scale
```
Mobile: text-3xl, text-base
Desktop (md:): text-5xl, text-lg
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] NO shadows anywhere (zero shadow-* classes)
- [ ] NO gradients anywhere (zero bg-gradient-* classes)
- [ ] Colors are pure (no transparency except intentional text muting)
- [ ] Border-radius is consistent (all sharp OR all circular)
- [ ] Whitespace is generous (space-y-12+ between sections)
- [ ] Hover uses color inversion (bg swap, not translate/scale)
- [ ] Transitions are instant or very short (transition-none or duration-75)
- [ ] High contrast maintained (black/white + one accent)
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
border-2 border-black
font-medium
hover:bg-black hover:text-white
transition-colors duration-200
```

Card:
```
border-2 border-black
hover:bg-black hover:text-white
transition-colors duration-200
```

Input:
```
border-0 border-b-2 border-black
bg-transparent
focus:outline-none
focus:border-[#ff3366]
transition-colors duration-200
```

**Forbidden**

Classes: `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-l`, `bg-gradient-to-t`

Patterns: `^shadow-(?!none)`, `^bg-gradient-`, `^rounded-(?:sm|md|lg|xl|2xl|3xl)$`, `^backdrop-blur`, `^bg-gray-(?:[1-3])`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Button - Filled
<button className="px-8 py-4 bg-black text-white font-bold border-2 border-black hover:bg-white hover:text-black active:bg-gray-200 transition-none">
  Get Started
</button>

// Secondary Button - Outlined
<button className="px-8 py-4 bg-white text-black font-bold border-2 border-black hover:bg-black hover:text-white active:bg-gray-100 transition-none">
  Learn More
</button>

// Accent Button
<button className="px-8 py-4 bg-[#ff3366] text-white font-bold border-2 border-[#ff3366] hover:bg-white hover:text-[#ff3366] active:bg-[#ffd6e2] transition-none">
  Accent Action
</button>
```

**Card**
```html
// Bordered Card
<div className="group border-2 border-black p-8 hover:bg-black hover:text-white transition-none cursor-pointer">
  <span className="text-xs font-bold uppercase tracking-widest text-gray-500 group-hover:text-gray-300">Category</span>
  <h3 className="text-3xl font-black mt-2 mb-4 leading-tight">Flat Dynamics</h3>
  <p className="leading-relaxed">
    Brief description with minimal styling, maximum contrast, and instant interaction feedback.
  </p>
</div>

// Color Block Card
<div className="bg-[#ff3366] text-white border-2 border-[#ff3366] p-8 hover:bg-white hover:text-[#ff3366] transition-none">
  <h3 className="text-2xl font-black mb-4">Featured</h3>
  <p className="leading-relaxed">
    High contrast color block for emphasis.
  </p>
</div>
```


---


### 柔和界面风 (Soft UI)

**Slug**: `soft-ui`

#### Description
Gentle and friendly interface style with soft shadows, rounded corners, and low-saturation colors. Ideal for consumer apps, social products, and lifestyle service apps.

#### Design Philosophy
Soft UI design style emphasizes a friendly, approachable, and comfortable visual experience that makes users feel relaxed and delighted.

Core principles:
- Warm and friendly: Convey approachability through soft shadows and rounded corners
- Low contrast: Avoid strong contrasts, use gentle color transitions
- Tactile design: Make interface elements look touchable
- Emotional connection: Convey warmth and care through design

#### Do's (必须做)
1. Use rounded-2xl or rounded-3xl as primary border radius
2. Use shadow-lg or shadow-xl with transparency shadow-[accent]/20
3. Backgrounds use light tones bg-slate-50, bg-gray-50
4. Use low-saturation primary colors
5. Buttons use hover:shadow-xl hover:-translate-y-0.5 floating effect
6. Generous spacing between cards gap-6 or gap-8
7. Icons use circular backgrounds rounded-full bg-[color]/10

#### Don'ts (禁止做)
1. Do not use sharp corners rounded-none
2. Do not use pure black #000000
3. Do not use high-saturation pure colors
4. Do not use hard borders border-black
5. Do not use hard shadows (shadows without blur)
6. Do not use tight element spacing

#### AI Rules
```
STYLE: Soft UI
TYPE: Friendly, approachable interface design

MUST USE:
- rounded-2xl or rounded-3xl for all components
- shadow-lg with color tint: shadow-[color]/20
- Soft backgrounds: bg-slate-50, bg-gray-50
- Hover lift effect: hover:-translate-y-0.5 hover:shadow-xl
- Low saturation primary colors
- Circular icon backgrounds: rounded-full bg-[color]/10

MUST AVOID:
- Sharp corners (rounded-none, rounded-sm)
- Pure black (#000000)
- High saturation pure colors
- Hard borders (border-black, border-2)
- Hard shadows (no blur)
- Tight spacing

COLOR RULES:
- Primary: Indigo/Purple tones (indigo-500)
- Background: Slate/Gray soft (slate-50, gray-50)
- Text: Gray-800 for headings, gray-500 for body
- Shadows: Always with color tint and opacity

SPACING:
- Card padding: p-6 md:p-8
- Section padding: py-16 md:py-24
- Gap: gap-6 md:gap-8

## Animation & Interaction Rules

- Cloud Float: Hover primarily uses lift with shadow spread, shadows stay colored and soft, avoid dirty gray hard shadows.
- Pillow Press: Active state uses slight scale and inner shadow, presenting a soft pillow-press feedback.
- Friendly Viscosity: Interaction rhythm recommends duration-300 and ease-in-out, avoiding abrupt speed changes.
- Halo Focus: Form focus uses large-radius low-opacity ring with soft glow shadow, not relying on hard borders.
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-transparent`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-md shadow-gray-200/50`
- Medium: `shadow-lg shadow-gray-200/50`
- Large: `shadow-xl shadow-gray-200/50`
- Hover: `shadow-xl shadow-indigo-500/20`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold`
- Body: `font-normal`

**Required Classes**

Button:
```
px-6 py-3
rounded-2xl
font-medium
shadow-lg
hover:-translate-y-0.5
hover:shadow-xl
transition-all duration-200
```

Card:
```
bg-white
rounded-3xl
shadow-xl shadow-gray-200/50
hover:shadow-2xl
hover:-translate-y-1
transition-all duration-300
```

Input:
```
px-5 py-3.5
bg-gray-50
border-0
rounded-2xl
focus:ring-2 focus:ring-indigo-500/50
focus:bg-white
transition-all duration-200
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `border-2`, `border-4`, `border-black`, `shadow-[`, `bg-black`

Patterns: `^rounded-none`, `^rounded-sm$`, `^border-[24]`, `^border-black`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Button
<button className="px-6 py-3 bg-indigo-500 text-white rounded-2xl shadow-[0_10px_24px_rgba(99,102,241,0.25)] hover:shadow-[0_18px_32px_rgba(99,102,241,0.35)] hover:-translate-y-1 active:translate-y-[2px] active:scale-[0.96] active:shadow-[inset_0_4px_10px_rgba(67,56,202,0.28)] transition-all duration-300 ease-in-out font-medium">
  Get Started
</button>

// Secondary Button
<button className="px-6 py-3 bg-white text-gray-700 rounded-2xl shadow-[0_10px_24px_rgba(148,163,184,0.25)] hover:shadow-[0_16px_30px_rgba(148,163,184,0.35)] hover:-translate-y-1 active:translate-y-[2px] active:scale-[0.97] active:shadow-[inset_0_4px_10px_rgba(148,163,184,0.2)] transition-all duration-300 ease-in-out font-medium">
  Learn More
</button>

// Soft Ghost
<button className="px-6 py-3 text-indigo-500 bg-indigo-50 rounded-2xl hover:bg-indigo-100 active:shadow-[inset_0_3px_8px_rgba(99,102,241,0.15)] transition-all duration-300 ease-in-out font-medium">
  Cancel
</button>
```

**Card**
```html
<div className="group bg-white rounded-3xl shadow-[0_12px_32px_rgba(148,163,184,0.25)] p-8 hover:shadow-[0_24px_48px_rgba(99,102,241,0.2)] hover:-translate-y-2 transition-all duration-500 ease-in-out">
  <div className="w-14 h-14 bg-indigo-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-indigo-50 transition-all duration-300 ease-in-out">
    <Icon className="w-7 h-7 text-indigo-500" />
  </div>
  <h3 className="text-xl font-semibold text-gray-800 mb-3 group-hover:text-indigo-600 transition-colors duration-300">Feature Title</h3>
  <p className="text-gray-500 leading-relaxed">
    Soft, friendly description that puts users at ease.
  </p>
</div>
```


---


### 自然有机风 (Natural Organic)

**Slug**: `natural-organic`

#### Description
Warm and natural organic style with earth tones, natural textures, and handcrafted elements. Ideal for health brands, organic food, eco-friendly products, and artisan crafts.

#### Design Philosophy
Natural Organic style draws inspiration from the natural world, creating warm and inviting experiences through earth tones, organic shapes, and natural textures.

Core principles:
- Natural harmony: Colors and shapes come from nature
- Warm and inviting: Make users feel comfortable and trusting
- Handcrafted texture: Avoid overly industrial coldness
- Sustainable aesthetics: Simple but not cold

#### Do's (必须做)
1. Use earth tone colors amber, stone, olive, sage
2. Backgrounds use warm cream bg-[#faf6f1], bg-amber-50
3. Use irregular rounded corners rounded-[2rem] or blob shapes
4. Add paper/fabric textures (via CSS or SVG)
5. Use handwritten-style or serif fonts
6. Buttons use soft transitions hover:bg-stone-200
7. Images use natural/organic/handcrafted content

#### Don'ts (禁止做)
1. Do not use cool tones (blue, purple unless as auxiliary)
2. Do not use pure black #000000
3. Do not use sharp geometric shapes
4. Do not use high-tech design elements
5. Do not use neon/high-saturation colors
6. Do not use perfect circles/rectangles

#### AI Rules
```
STYLE: Natural Organic
TYPE: Warm, earthy, nature-inspired design

MUST USE:
- Earth tones: stone, amber, olive, sage colors
- Warm background: bg-[#faf6f1], bg-amber-50
- Organic shapes: rounded-[2rem] and blob-style irregular radii
- Serif fonts for headings: font-serif
- Soft transitions: duration-300 to duration-700 with ease-in-out
- Natural imagery and icons (leaves, plants, earth)

MUST AVOID:
- Cold colors (blue, purple as primary)
- Pure black (#000000)
- Sharp geometric shapes
- High-tech design elements
- Neon/high saturation colors
- Perfect circles/rectangles

COLOR PALETTE:
- Primary: Stone/Brown (#5c4033)
- Background: Warm cream (#faf6f1)
- Accent: Sage green (#8b9d77)
- Secondary: Warm tan (#d4a373)

TYPOGRAPHY:
- Headings: font-serif, tracking-tight
- Body: font-sans, stone-600
- Comfortable line-height

## Animation & Interaction Rules

- Organic Morphing: Use irregular rounded corners (blob) that slowly change during interaction, avoiding industrial standard rounded corners.
- Soft Earth Press: Hover can slightly sink (translate-y-0.5) and deepen earth tone layers, no floating or bouncing.
- Botanical Slowness: Animation rhythm recommends duration-500 and above + ease-in-out, simulating natural growth speed.
- Verdant Tint: During interaction, text/icons slowly transition toward deep green, expressing the life force of plants awakened by light.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-stone-200`
- Radius: `rounded-full`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-300`

**Typography**
- Heading: `font-serif`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
rounded-full
font-medium
transition-colors duration-300
```

Card:
```
bg-[#faf6f1]
rounded-[2rem]
border border-stone-200
```

Input:
```
px-5 py-3
bg-white
border border-stone-200
rounded-full
text-stone-800
placeholder:text-stone-400
focus:border-stone-400
focus:ring-2 focus:ring-stone-200
transition-all duration-300
```

**Forbidden**

Classes: `bg-blue-500`, `bg-purple-500`, `bg-cyan-500`, `text-black`, `rounded-none`, `rounded-sm`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`

Patterns: `^bg-blue-`, `^bg-purple-`, `^bg-cyan-`, `^bg-gradient-`, `^shadow-[lx2]`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Button
<button
  className="px-10 py-4 bg-stone-800 text-stone-50 hover:bg-[#8b9d77] hover:text-white active:scale-95 transition-all duration-500 ease-in-out font-serif tracking-wide"
  style={{ borderRadius: "30px 40px 40px 30px / 40px 30px 40px 40px" }}
>
  Shop Nature
</button>

// Secondary Button
<button className="px-6 py-3 bg-transparent text-stone-800 border border-stone-300 rounded-[28px] hover:bg-stone-100 hover:border-stone-400 transition-all duration-500 ease-in-out font-medium">
  Learn More
</button>

// Earthy Accent
<button className="px-6 py-3 bg-[#8b9d77] text-white rounded-[26px] hover:bg-[#7a8c66] transition-colors duration-500 ease-in-out font-medium">
  Subscribe
</button>
```

**Card**
```html
<div
  className="group bg-[#faf6f1] p-10 border border-stone-200 hover:bg-[#f2ece4] hover:border-stone-300 hover:translate-y-0.5 transition-all duration-700 ease-in-out"
  style={{ borderRadius: "40% 60% 70% 30% / 40% 50% 60% 50%" }}
>
  <div
    className="w-16 h-16 bg-[#8b9d77]/20 flex items-center justify-center mb-6 group-hover:bg-[#8b9d77]/30 group-hover:scale-105 transition-all duration-700 ease-in-out"
    style={{ borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%" }}
  >
    <Leaf className="w-8 h-8 text-[#8b9d77]" />
  </div>
  <h3 className="text-2xl font-serif text-stone-800 mb-4 group-hover:text-[#6a7a58] transition-colors duration-500">Organic Roots</h3>
  <p className="text-stone-600 leading-relaxed">
    Sourced from sustainable earth and shaped by slow natural rhythms.
  </p>
</div>
```


---


### 现代渐变风 (Modern Gradient)

**Slug**: `modern-gradient`

#### Description
Vibrant modern gradient style with colorful gradient backgrounds, glass-textured cards, and dynamic lighting effects. Ideal for startups, digital products, and event pages.

#### Design Philosophy
Modern Gradient style creates visual impact and vitality through rich gradient colors and lighting effects.

Core principles:
- Visual vitality: Gradient colors bring dynamism and energy
- Depth and layers: Create depth through gradients and transparency
- Modern tech: Convey an innovative and cutting-edge brand image
- Emotional resonance: Colors evoke positive emotional responses

#### Do's (必须做)
1. Use bg-gradient-to-r from-violet-500 via-purple-500 to-fuchsia-500 and similar gradients
2. Cards use backdrop-blur-xl bg-white/10 glass effect
3. Buttons use gradient + hover gradient shift effect
4. Dark backgrounds bg-slate-950 or bg-[#1e1b4b]
5. Text uses bg-gradient-to-r bg-clip-text text-transparent gradient effect
6. Use rounded-2xl or rounded-3xl corners
7. Add glow orb effects blur-3xl opacity-30 as decoration

#### Don'ts (禁止做)
1. Do not use solid color backgrounds (main areas)
2. Do not use monotone gray schemes
3. Do not use sharp corners rounded-none
4. Do not use old-style gradients (e.g. vertical button gradients)
5. Do not overuse gradients causing visual clutter
6. Do not use dark text on dark gradients

#### AI Rules
```
STYLE: Modern Gradient
TYPE: Vibrant, energetic gradient design

MUST USE:
- Gradient backgrounds: bg-gradient-to-r from-violet-500 to-fuchsia-500
- Glass morphism cards: backdrop-blur-xl bg-white/10 border-white/20
- Dark base background: bg-slate-950 or bg-[#1e1b4b]
- Gradient text: bg-gradient-to-r bg-clip-text text-transparent
- Colored shadows: shadow-violet-500/25
- Large rounded corners: rounded-2xl, rounded-3xl
- Glow orbs for decoration: blur-3xl opacity-30

MUST AVOID:
- Solid color backgrounds (main areas)
- Monotone gray schemes
- Sharp corners (rounded-none)
- Old-style gradients (vertical button gradients)
- Visual clutter from too many gradients
- Dark text on dark gradients

COLOR COMBOS:
- Violet to Fuchsia: from-violet-500 to-fuchsia-500
- Cyan to Blue: from-cyan-500 to-blue-500
- Pink to Orange: from-pink-500 to-orange-500
- Multi-color: from-violet-500 via-fuchsia-500 to-cyan-500

TYPOGRAPHY:
- Headings: White or gradient text
- Body: text-white/70 or text-white/80
- Font weight: font-medium to font-semibold

## Animation & Interaction Rules

- Gradient Flow: Gradient interactions should include color band shifting (e.g. bg-[length:200%_auto] + hover:bg-right), avoid static brightening/darkening.
- Neon Dispersion: On hover, colored shadow spread radius increases significantly, reinforcing futuristic glow halo.
- Zero-Gravity Float: Cards and buttons can slightly lift and micro-scale, recommend duration-500 + ease-out.
- Luminous Borders: Semi-transparent borders brighten to brand color opacity on hover, creating edges lit by internal light.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/20`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-lg shadow-violet-500/20`
- Medium: `shadow-xl shadow-violet-500/25`
- Large: `shadow-2xl shadow-violet-500/30`
- Hover: `shadow-2xl shadow-violet-500/40`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold`
- Body: `font-normal`

**Required Classes**

Button:
```
px-6 py-3
rounded-2xl
font-medium
transition-all duration-300
```

Card:
```
backdrop-blur-xl
bg-white/10
border border-white/20
rounded-3xl
```

Input:
```
px-5 py-3.5
backdrop-blur-xl
bg-white/10
border border-white/20
rounded-2xl
text-white
placeholder:text-white/40
focus:border-violet-500/50
focus:ring-2 focus:ring-violet-500/20
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-slate-50`, `shadow-sm`, `shadow-md`, `text-gray-900`, `text-black`, `rounded-none`

Patterns: `^bg-white$`, `^bg-gray-[1-4]00`, `^bg-slate-[1-4]00`, `^text-gray-[89]00`, `^text-black`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Gradient Button
<button className="px-8 py-4 bg-gradient-to-r from-violet-500 via-fuchsia-500 to-violet-500 bg-[length:200%_auto] text-white rounded-2xl font-bold tracking-wide shadow-[0_8px_20px_rgba(167,139,250,0.3)] hover:bg-right hover:shadow-[0_15px_30px_rgba(217,70,239,0.4)] hover:-translate-y-1 hover:scale-[1.02] active:scale-95 transition-all duration-500 ease-out">
  Get Started
</button>

// Outline Gradient Button
<button className="px-6 py-3 rounded-2xl font-medium relative group hover:-translate-y-1 hover:scale-[1.02] transition-all duration-500 ease-out">
  <span className="absolute inset-0 bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-2xl" />
  <span className="absolute inset-[2px] bg-slate-950 rounded-[14px] group-hover:bg-slate-900 transition-colors duration-500" />
  <span className="relative bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
    Learn More
  </span>
</button>

// Glass Button
<button className="px-6 py-3 backdrop-blur-xl bg-white/10 border border-white/20 text-white rounded-2xl font-medium hover:bg-white/20 hover:border-violet-400/50 hover:shadow-[0_12px_30px_rgba(139,92,246,0.28)] hover:-translate-y-1 transition-all duration-500 ease-out">
  Explore
</button>
```

**Card**
```html
<div className="group backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 hover:bg-white/15 hover:border-violet-400/50 hover:shadow-[0_20px_50px_rgba(167,139,250,0.18)] hover:-translate-y-2 hover:scale-[1.02] transition-all duration-500 ease-out cursor-pointer">
  <div className="w-14 h-14 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-12 transition-transform duration-500 ease-out">
    <Icon className="w-7 h-7 text-white" />
  </div>
  <h3 className="text-xl font-semibold text-white mb-3">Feature Title</h3>
  <p className="text-white/70 leading-relaxed group-hover:text-white/85 transition-colors duration-500">
    Stunning visual effects with modern gradient aesthetics and fluid color flow.
  </p>
</div>
```


---


### 复古怀旧风 (Retro Vintage)

**Slug**: `retro-vintage`

#### Description
Nostalgic retro design style with vintage typography, retro color tones, and handcrafted texture elements. Ideal for cafes, vintage brands, indie magazines, and music labels.

#### Design Philosophy
Retro Vintage style draws inspiration from mid-20th century design aesthetics, creating a warm sense of time through vintage typography, aged textures, and nostalgic color tones.

Core principles:
- Time-worn patina: Design carries the warmth and stories of passing years
- Handcrafted warmth: Avoid overly digital coldness
- Timeless classics: Use design elements proven by time
- Cultural depth: Convey a sense of history and cultural identity

#### Do's (必须做)
1. Use vintage color tones sepia, amber, brown series
2. Add paper texture or aged effects to backgrounds
3. Use serif fonts or vintage sans-serif fonts
4. Borders use border-2 or border-4 thick borders
5. Add decorative border elements (corner ornaments, dividers)
6. Use old-style typography (uppercase titles, letter spacing)
7. Images add aged filters sepia brightness-90
8. Antique Stillness: zero scale or translate-y — old paper lies flat, it does not float or bounce
9. Ink & Oxidation: hover slightly darkens background (hover:bg-[#eedbc2]) and deepens text (group-hover:text-[#5c2e0a]) — simulating paper yellowing and ink settling over decades
10. Slow Passage of Time: all transitions use duration-700 ease-in-out — historical materials change slowly, never use duration-150 or faster
11. Corner Reveal: decorative corner ornaments use opacity-30 group-hover:opacity-100 transition-opacity duration-700 — historical details emerge slowly as readers lean in

#### Don'ts (禁止做)
1. Do not use modern gradient effects
2. Do not use neon/high-saturation colors
3. Do not use minimalist/flat modern design language
4. Do not use overly rounded corners
5. Do not use glassmorphism effects
6. Do not use excessive animation interactions
7. Do not use any scale or translate-y animations (Antique Stillness -- old paper does not float or bounce)
8. Do not use duration-150 or faster transitions (Slow Passage -- oxidation is a geological process, not a click event)
9. Do not introduce new saturated colors on hover (only deepen existing vintage tones, never replace with modern colors)

#### AI Rules
```
STYLE: Retro Vintage
TYPE: Nostalgic, classic design aesthetic

MUST USE:
- Vintage color palette: sepia, amber, brown tones
- Paper texture or aged effects on backgrounds
- Serif fonts or vintage sans-serif
- Thick borders: border-2 or border-4
- Decorative elements (corner ornaments, dividers)
- Old-style typography: uppercase, tracking-widest
- Image filters: sepia, brightness-90

MUST AVOID:
- Modern gradients
- Neon/high saturation colors
- Minimalist/flat modern design
- Very rounded corners
- Glass morphism effects
- Heavy animations

COLOR PALETTE:
- Primary: Saddle brown (#8b4513)
- Background: Cream/Parchment (#f5e6d3)
- Accent: Rust red (#c94c4c), Forest green (#2e4a3f)

TYPOGRAPHY:
- Headings: font-serif, uppercase option
- Labels: text-xs uppercase tracking-[0.2em]
- Body: font-serif, relaxed leading

## Animation & Interaction Rules

- Antique Stillness: Absolutely zero `scale` or `translate-y` motion. Old parchment lies flat on the table -- it does not float, lift, or bounce. Forbidden: `hover:-translate-y-*`, `hover:scale-*`.
- Ink & Oxidation: Hover subtly darkens the background (`hover:bg-[#eedbc2]`) and deepens text color (`group-hover:text-[#5c2e0a]`). This simulates paper yellowing and ink darkening over time -- not a modern color swap.
- Slow Passage of Time: All transitions must use `duration-700 ease-in-out` or longer. Historical materials change slowly. Never use `duration-150` or faster.
- Corner Reveal: Decorative corner ornaments use `opacity-30 group-hover:opacity-100 transition-opacity duration-700` -- as if readers discover hidden details by leaning in closely.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#8b4513]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_2px_4px_rgba(139,69,19,0.1)]`
- Medium: `shadow-[0_4px_8px_rgba(139,69,19,0.15)]`
- Large: `shadow-[0_8px_16px_rgba(139,69,19,0.2)]`
- Hover: `hover:shadow-[0_4px_12px_rgba(139,69,19,0.2)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-serif uppercase tracking-widest`
- Body: `font-serif`

**Required Classes**

Button:
```
font-serif uppercase tracking-widest
transition-colors duration-200
```

Card:
```
border-2 border-[#8b4513]
bg-[#f5e6d3]
font-serif
```

Input:
```
border-2 border-[#8b4513]
bg-transparent
text-[#8b4513]
font-serif
focus:outline-none
focus:bg-[#8b4513]/5
transition-colors duration-200
```

**Forbidden**

Classes: `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-l`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-[#ff00ff]`, `bg-[#00ffff]`, `bg-[#ff71ce]`, `text-[#ff00ff]`

Patterns: `^bg-gradient-`, `^rounded-(?:xl|2xl|3xl|full)$`, `^bg-(?:pink|cyan|violet|fuchsia)-`, `^text-(?:pink|cyan|violet|fuchsia)-`, `^shadow-\[0_0_`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-[#f5e6d3] text-[#8b4513]
  border-4 border-double border-[#8b4513]
  font-serif uppercase tracking-[0.2em] text-sm
  hover:bg-[#8b4513] hover:text-[#f5e6d3]
  hover:tracking-[0.25em]
  active:bg-[#5c2e0a] active:border-[#5c2e0a]
  transition-all duration-700 ease-in-out
">
  Discover History
</button>
```

**Card**
```html
<div className="group bg-[#f5e6d3] border-2 border-[#8b4513]/40 p-10 relative hover:bg-[#eedbc2] hover:border-[#8b4513] transition-colors duration-700 ease-in-out cursor-default">
  {/* Corner decorations — emerge slowly on hover (Corner Reveal) */}
  <div className="absolute top-2 left-2 w-6 h-6 border-t-2 border-l-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute top-2 right-2 w-6 h-6 border-t-2 border-r-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute bottom-2 left-2 w-6 h-6 border-b-2 border-l-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute bottom-2 right-2 w-6 h-6 border-b-2 border-r-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <span className="text-xs font-serif uppercase tracking-[0.3em] text-[#8b4513]/60">Chapter One</span>
  <h3 className="text-3xl font-serif text-[#8b4513] mt-4 mb-6">The Grand Archives</h3>
  <p className="text-[#8b4513]/80 leading-loose font-serif group-hover:text-[#5c2e0a] transition-colors duration-700">
    A story that spans generations, told through craftsmanship and the slow passage of time.
  </p>
</div>
```


---


### 暗黑模式 (Dark Mode)

**Slug**: `dark-mode`

#### Description
Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.

#### Design Philosophy
Dark Mode design emphasizes creating a comfortable reading experience and clear information hierarchy on dark backgrounds.

Core principles:
- Eye comfort: Reduce screen brightness to minimize visual fatigue
- Clear hierarchy: Distinguish levels through grayscale and transparency
- Highlight focus: Use highlight colors to guide user attention
- Professional atmosphere: Convey a sense of technology and professionalism

#### Do's (必须做)
1. Use dark backgrounds bg-slate-900, bg-gray-900, bg-[#0f172a]
2. Cards use slightly lighter backgrounds bg-slate-800/50, brighten on hover hover:bg-slate-800
3. Borders use low contrast border-slate-700, illuminate on hover hover:border-slate-500
4. Text uses text-slate-100 primary, text-slate-400 secondary, secondary text brightens on group-hover group-hover:text-slate-300
5. Highlight colors maintain high saturation blue-500, green-500
6. Buttons use inner glow shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] to simulate dark light source
7. Buttons must have active:scale-[0.98] tactile press confirmation
8. All interactive elements must have focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
9. Card hover with hover:-translate-y-0.5 + dark outer shadow for elevation
10. Use rounded-lg or rounded-xl corners

#### Don'ts (禁止做)
1. Do not use pure white text text-white (too harsh)
2. Do not use high-contrast borders
3. Do not use pure black background #000000 (too dull)
4. Do not use dark text on dark backgrounds
5. Do not overuse highlight colors
6. Do not use light-colored shadows (light shadows cannot convey depth on dark backgrounds)
7. Do not omit active:scale-[0.98] on buttons (buttons need tactile confirmation, otherwise they feel like decoration)
8. Do not use focus:ring without focus:ring-offset-slate-900 (focus ring must separate from element to be visible on dark backgrounds)

#### AI Rules
```
STYLE: Dark Mode
TYPE: Professional dark interface design

MUST USE:
- Dark backgrounds: bg-slate-900, bg-gray-900, bg-[#0f172a]
- Card backgrounds: bg-slate-800/50 (semi-transparent) at rest, bg-slate-800 on hover
- Low contrast borders: border-slate-700 at rest, border-slate-500 on hover (border illumination)
- Text hierarchy: text-slate-100 (primary), text-slate-400 (secondary); secondary brightens to group-hover:text-slate-300
- Saturated accent colors: blue-500, green-500
- Inset top-edge glow on buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
- Hover states: hover:bg-slate-800, hover:bg-white/5
- Standard rounded corners: rounded-lg, rounded-xl

MUST AVOID:
- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows (light shadows invisible on dark backgrounds)
- Buttons without active:scale-[0.98] (no tactile confirmation)
- focus:ring without focus:ring-offset-slate-900 (ring invisible on dark background)

COLOR HIERARCHY:
- Background: slate-900 (#0f172a)
- Surface: slate-800/50 to slate-800 on hover
- Border: slate-700 to slate-500 on hover
- Text primary: slate-100 to white on group-hover
- Text secondary: slate-400 to slate-300 on group-hover
- Accent: blue-500, green-500

TYPOGRAPHY:
- Headings: font-semibold text-slate-100
- Body: text-slate-300 or text-slate-400

## Animation & Interaction Rules

- Illumination Physics: On hover, borders brighten from slate-700 to slate-500 (hover:border-slate-500). This simulates a nearby light source illuminating the card's edge -- NOT a background change. Combined with hover:bg-slate-800 (surface rises slightly), the effect is of a surface catching light.
- Text Light-Up: Secondary text (text-slate-400) transitions to group-hover:text-slate-300. Title text (text-slate-200) to group-hover:text-white. Use transition-colors duration-200. The card must use the group class.
- Inset Glow Button: Primary buttons use shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] at rest (top edge highlight simulating overhead light). On hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)] -- glow intensifies and bleeds outward. On active: shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] -- inset depression shadow simulates the button being physically pressed down.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98]. The 2% scale reduction is the minimum signal that a press occurred. Without it, a dark button feels completely unresponsive.
- Focus Ring Visibility: ALWAYS pair focus:ring-2 with focus:ring-offset-2 focus:ring-offset-slate-900. Without ring-offset-slate-900, the ring merges with the dark background and becomes invisible -- violating WCAG 2.1 AA.
- Card Elevation: hover:-translate-y-0.5 + hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] -- the deep dark shadow reinforces the dark environment. Never use light-colored shadows on dark backgrounds.
- Easing: duration-200 ease-out for buttons and interactive controls. duration-300 ease-out for card-level transitions. Never exceed duration-300.

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98]
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2 focus:ring-offset-slate-900
3. Cards use group class; text uses group-hover:text-* for light-up
4. Card hover: border brightens (hover:border-slate-500) + bg lightens (hover:bg-slate-800) + hover:-translate-y-0.5
5. Button shadows use inset for glow, deep dark for elevation
6. No light-colored shadows anywhere
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-slate-700`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-lg shadow-black/20`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-semibold`
- Body: `font-normal`

**Required Classes**

Button:
```
px-4 py-2
rounded-lg
font-medium
transition-colors duration-200
```

Card:
```
bg-slate-800
border border-slate-700
rounded-xl
```

Input:
```
bg-slate-800
border border-slate-700
rounded-lg
text-slate-100
placeholder:text-slate-500
focus:border-blue-500
focus:ring-1 focus:ring-blue-500
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `border-black`, `shadow-white`, `bg-black`

Patterns: `^text-white$`, `^bg-white`, `^bg-gray-[1-3]00`, `^bg-black$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary Button — inset glow physics */}
<button className="
  px-4 py-2
  bg-blue-600 text-white
  rounded-lg font-medium
  shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
  hover:bg-blue-500
  hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)]
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]
  transition-all duration-200 ease-out
">
  Save Changes
</button>

{/* Secondary Button */}
<button className="
  px-4 py-2
  bg-slate-700 text-slate-200
  rounded-lg font-medium
  shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]
  hover:bg-slate-600 hover:text-slate-100
  hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]
  transition-all duration-200 ease-out
">
  Cancel
</button>

{/* Ghost Button */}
<button className="
  px-4 py-2
  text-slate-300
  rounded-lg font-medium
  hover:bg-white/5 hover:text-slate-100
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:bg-white/10
  transition-all duration-200 ease-out
">
  Learn More
</button>

{/* Danger Button */}
<button className="
  px-4 py-2
  bg-red-600/20 text-red-400
  border border-red-500/30
  rounded-lg font-medium
  hover:bg-red-600/30 hover:border-red-500/50 hover:text-red-300
  focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98]
  transition-all duration-200 ease-out
">
  Delete
</button>
```

**Card**
```html
<div className="
  group
  bg-slate-800/50 border border-slate-700
  rounded-xl p-6
  hover:bg-slate-800 hover:border-slate-500 hover:-translate-y-0.5
  hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)]
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="flex items-center gap-3 mb-4">
    <div className="w-10 h-10 bg-blue-600/20 rounded-lg flex items-center justify-center
      group-hover:bg-blue-600/30 transition-colors duration-200">
      <svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
    </div>
    <h3 className="text-lg font-semibold text-slate-200 group-hover:text-white transition-colors duration-200">
      Feature Title
    </h3>
  </div>
  <p className="text-slate-400 leading-relaxed group-hover:text-slate-300 transition-colors duration-200">
    Description with comfortable contrast for night reading.
  </p>
</div>
```


---


### macOS 毛玻璃 (macOS Vibrancy)

**Slug**: `macos-vibrancy`

#### Description
Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.

#### Design Philosophy
macOS Vibrancy is the Web adaptation of Apple's desktop application design language. Its core is restraint, not spectacle.

Core principles:
- Hierarchy through color: No gradients or glow, depth comes purely from background shade progression (#1c1c1e -> #2c2c2e -> #3a3a3c)
- System-level blur: Sidebar uses backdrop-blur to let underlying content subtly show through, simulating NSVisualEffectView
- Typography-driven: Serif headings + sans-serif body + monospace code, three typefaces each with a clear role
- 1px philosophy: All separators are 1px semi-transparent borders, no shadows for depth
- No decoration: No gradients, no glow, no animations. Content is the decoration

#### Do's (必须做)
1. Use three-depth dark gray system: #1c1c1e (deepest) -> #2c2c2e -> #3a3a3c (lightest)
2. Sidebar uses backdrop-blur-xl with bg-[#1c1c1e]/80 for vibrancy effect
3. All borders are 1px border-white/8 to border-white/12, never thicker
4. Headings use serif font (Georgia, serif), body uses system sans-serif
5. Transitions are subtle: duration-200 ease-out, colors only
6. Active nav items use slightly lighter background bg-white/8 to bg-white/12
7. Code blocks use monospace font with bg-[#1c1c1e] background
8. System accent color #0a84ff for interactive highlights

#### Don'ts (禁止做)
1. No gradients on any element (backgrounds are solid dark grays)
2. No glow effects, no box-shadow larger than 2px spread
3. No decorative animations (pulse, bounce, spin)
4. No rounded-3xl or rounded-full (max rounded-xl)
5. No bright accent colors as backgrounds (only for text highlights)
6. No borders thicker than 1px

#### AI Rules
```
You are a macOS Vibrancy design style frontend expert. All code must follow these constraints:

## Absolute Rules

- Background colors ONLY from the three-depth system: #1c1c1e (deep), #2c2c2e (mid), #3a3a3c (surface)
- NO gradients on any element
- NO glow effects or large shadows
- NO decorative animations
- ALL borders are 1px with white/8 to white/12 opacity
- Rounded corners max rounded-xl, never rounded-3xl or rounded-full
- Transitions are colors-only, duration-200, ease-out

## Typography

- Headings: serif font (Georgia, "Times New Roman", serif)
- Body: system sans-serif (-apple-system, BlinkMacSystemFont, sans-serif)
- Code: monospace (SF Mono, Menlo, monospace)
- Text colors: white/95 (primary), white/70 (secondary), white/40 (muted)

## Layout

- Three-panel structure: sidebar (darkest) | middle panel | content (lightest)
- Sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl, border-r border-white/8
- Middle panel: bg-[#2c2c2e], border-r border-white/8
- Content: bg-[#2c2c2e] or bg-[#3a3a3c]

## Interaction

- Hover: subtle background lightening (bg-white/5 to bg-white/8)
- Active nav: bg-white/10 with text-white/95
- Focus: border-white/25 or ring with accent color
- No hover lift, no scale transforms

## Self-Check

1. No gradients anywhere
2. No shadows larger than 2px
3. Only 1px borders
4. Three-depth gray system used correctly
5. Serif headings, sans-serif body
6. Transitions are subtle (duration-200, colors only)
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-[0_1px_0_rgba(255,255,255,0.05)]`
- Large: `shadow-[0_2px_8px_rgba(0,0,0,0.3)]`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200 ease-out`

**Typography**
- Heading: `font-serif font-semibold text-white/95`
- Body: `text-white/70`

**Required Classes**

Button:
```
bg-[#3a3a3c] text-white/90
rounded-lg
transition-colors duration-200
```

Card:
```
bg-[#2c2c2e]
border border-white/8
rounded-xl
```

Input:
```
bg-[#1c1c1e]
border border-white/10
rounded-lg
text-white/90 placeholder-white/30
focus:outline-none focus:border-white/25
transition-colors duration-200
```

**Forbidden**

Classes: `bg-gradient-to-r`, `bg-gradient-to-br`, `bg-gradient-to-l`, `shadow-xl`, `shadow-2xl`, `shadow-lg`, `rounded-3xl`, `rounded-full`, `text-yellow-400`, `text-pink-500`

Patterns: `^bg-gradient`, `^shadow-(xl|2xl|lg)$`, `^rounded-(3xl|full)$`, `^animate-`, `^border-[2-9]$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-4 py-2
  bg-[#3a3a3c] text-white/90
  rounded-lg
  text-sm font-medium
  hover:bg-[#48484a]
  active:opacity-80
  transition-colors duration-200
">
  Save Changes
</button>
```

**Card**
```html
<div className="
  bg-[#2c2c2e]
  border border-white/8
  rounded-xl
  p-6
  hover:border-white/12
  transition-colors duration-200
">
  <h3 className="font-serif text-lg font-semibold text-white/95 mb-2">
    Panel Title
  </h3>
  <p className="text-sm text-white/60 leading-relaxed">
    Content sits quietly on dark surfaces.
  </p>
</div>
```


---


### 几何大胆风 (Geometric Bold)

**Slug**: `geometric-bold`

#### Description
Bold geometric design with strong shape contrasts, vivid color blocks, and dynamic compositions. Ideal for art exhibitions, design agencies, and creative brands.

#### Design Philosophy
Geometric Bold style is influenced by Bauhaus and Constructivist art, creating visual impact through simple yet powerful geometric shapes.

Core principles:
- Shape first: Geometric shapes are the core design language
- Bold contrast: Strong color and shape contrasts
- Dynamic balance: Create visual tension through asymmetry
- Artistic expression: Every page is a work of art

#### Do's (必须做)
1. Use solid color blocks bg-black, bg-white, bg-red-500, bg-blue-600
2. Use regular geometric shapes circle, square, triangle
3. Boldly use oversized typography text-6xl, text-8xl, text-[10rem]
4. Use absolute positioning to create overlapping effects
5. Corners use rounded-none or rounded-full
6. Use rotate-* to rotate elements for dynamic feel
7. Black and white primary, one to two accent colors

#### Don'ts (禁止做)
1. Do not use gradient colors
2. Do not use soft/low-contrast colors
3. Do not use medium border-radius values like rounded-lg
4. Do not use shadow effects
5. Do not use too many colors (max 3-4)
6. Do not use symmetrical/conventional layouts

#### AI Rules
```
STYLE: Geometric Bold
TYPE: Bold artistic design with strong shapes

MUST USE:
- Solid color blocks: bg-black, bg-white, bg-red-500, bg-blue-600
- Regular geometric shapes: circles, squares, triangles
- Large typography: text-6xl, text-8xl, text-[10rem]
- Absolute positioning for overlapping elements
- Corners: rounded-none OR rounded-full only
- Rotation for dynamics: rotate-12, rotate-45
- Limited palette: black, white + 1-2 accent colors

MUST AVOID:
- Gradients
- Soft/low contrast colors
- Medium border-radius (rounded-lg)
- Shadows
- Too many colors (max 3-4)
- Symmetrical/conventional layouts

COLOR RULES:
- Base: Black and White
- Accents: Primary colors (red, blue, yellow)
- Maximum 3-4 colors per design

TYPOGRAPHY:
- Headings: font-black uppercase
- Labels: text-xs tracking-[0.3em]
- Numbers: Often used as design elements

## Animation & Interaction Rules

- Blocky Impact: Interactions use solid color hard-cuts and short displacement feedback, avoiding soft opacity transitions.
- Shape Snapping: Geometric decorations can instantly rotate/scale on hover, creating a structural mutation feel.
- Heavy Press: Active state prefers displacement and layer rebound to express pressing, not relying on soft scaling.
- Linear & Fast: Uniformly use duration-100 + ease-linear, rejecting spring feel and slow trailing.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-black uppercase tracking-tight`
- Body: `font-sans font-medium`

**Required Classes**

Button:
```
font-bold uppercase tracking-widest
transition-colors duration-200
```

Card:
```
border-4 border-black
bg-white
```

Input:
```
border-4 border-black
bg-white
font-medium
focus:outline-none
focus:bg-yellow-300
transition-colors duration-200
```

**Forbidden**

Classes: `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-l`, `rounded-lg`, `rounded-xl`

Patterns: `^shadow-(?!none)`, `^bg-gradient-`, `^rounded-(?:sm|md|lg|xl|2xl|3xl)$`, `^opacity-(?:[1-6]0)$`, `^font-(?:light|thin|normal)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Button - Square
<button className="group relative px-8 py-4 bg-black text-white border-4 border-black font-bold uppercase tracking-widest transition-transform duration-100 ease-linear hover:bg-red-500 hover:-translate-x-1 hover:-translate-y-1 active:translate-x-1 active:translate-y-1">
  <span className="absolute inset-0 -z-10 translate-x-2 translate-y-2 bg-blue-600 transition-transform duration-100 ease-linear group-hover:translate-x-3 group-hover:translate-y-3 group-active:translate-x-1 group-active:translate-y-1" />
  <span className="relative">Explore</span>
</button>

// Circle Button
<button className="w-24 h-24 bg-blue-600 text-white rounded-full border-4 border-black font-bold uppercase text-xs tracking-widest transition-all duration-100 ease-linear hover:bg-black hover:text-white hover:scale-[1.08] active:scale-95">
  Click
</button>

// Outlined Button
<button className="px-8 py-4 bg-white text-black border-4 border-black font-bold uppercase tracking-widest transition-all duration-100 ease-linear hover:bg-black hover:text-white hover:translate-x-1 hover:-translate-y-1 active:translate-y-1 active:translate-x-1">
  View Work
</button>
```

**Card**
```html
<div className="group relative bg-white border-4 border-black p-8 transition-all duration-100 ease-linear hover:bg-yellow-300 hover:-translate-x-2 hover:-translate-y-2">
  {/* Decorative shape */}
  <div className="absolute -top-6 -right-6 w-12 h-12 bg-red-500 rotate-45 border-4 border-black transition-all duration-100 ease-linear group-hover:scale-150 group-hover:rotate-90 group-hover:bg-blue-600" />

  <span className="inline-block text-xs font-bold uppercase tracking-[0.3em] bg-black text-white px-2 py-1 transition-colors duration-100 ease-linear group-hover:bg-red-500">01</span>
  <h3 className="text-4xl font-black uppercase mt-3 mb-4 leading-none">Project Name</h3>
  <p className="text-black/70 leading-relaxed">
    Bold geometric design with hard color cuts and shape-driven motion.
  </p>

  {/* Bottom accent bar */}
  <div className="absolute bottom-0 left-0 h-2 w-1/4 bg-black transition-all duration-100 ease-linear group-hover:w-full group-hover:bg-blue-600" />
</div>
```


---


### 瀑布流布局 (Masonry Flow)

**Slug**: `masonry-flow`

#### Description
Pinterest-style masonry layout with variable-height cards, achieved through CSS columns or masonry grid for a naturally flowing visual effect. Ideal for image galleries, portfolios, and social media.

#### Design Philosophy
Masonry Flow is a layout that mimics brickwork, where cards are arranged in columns with varying heights, creating a naturally flowing visual effect.

Core principles:
- Natural flow: Content height is determined by the content itself, no forced equal heights
- Space utilization: Maximize visible area usage, reduce wasted whitespace
- Visual rhythm: Irregular heights create an interesting visual cadence
- Infinite scroll: Naturally suited for load-more interaction patterns

#### Do's (必须做)
1. Use CSS columns for simple masonry columns-2 md:columns-3 lg:columns-4
2. Or use CSS Grid masonry (requires browser support) grid-rows-[masonry]
3. Cards add break-inside-avoid to prevent content breaking
4. Uniform card widths, height adapts to content
5. Maintain consistent column gaps gap-4 or gap-6
6. Add loading animations and lazy-loaded images
7. Responsive column count columns-1 sm:columns-2 lg:columns-3
8. Cards use group class, images inside overflow-hidden use group-hover:scale-105 duration-700 ease-out (Confined Zoom, never breaks container)
9. Card hover: hover:-translate-y-1 hover:shadow-[0_15px_30px_rgba(0,0,0,0.08)] (Subtle Elevation, light without breaking masonry flow visual continuity)
10. Action buttons translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 (Overlay Reveal, overlay drawer emergence)
11. Filter buttons duration-200 for instant response (Action Snappiness)

#### Don'ts (禁止做)
1. Do not force all cards to equal height (loses masonry character)
2. Do not use inconsistent card widths
3. Do not use inconsistent spacing
4. Do not ignore image loading states
5. Do not use too many columns on small screens
6. Do not let image zoom break the overflow-hidden container (Confined Zoom must maintain boundaries)
7. Do not use harsh dark borders as hover feedback on cards (use shadows and displacement instead)
8. Do not let hover displacement exceed -translate-y-1 (excessive lift breaks masonry flow visual continuity)

#### AI Rules
```
You are a frontend expert specializing in Masonry Flow layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Must Follow

- Use CSS columns: columns-2 md:columns-3 lg:columns-4
- Prevent break: break-inside-avoid on cards
- Consistent gap: gap-4 or column-gap equivalent
- Card widths: 100% of column
- Card heights: auto (content-driven)
- Responsive columns: reduce on smaller screens

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Animation & Interaction Rules

- Confined Zoom: Image scaling must occur within overflow-hidden container, recommend group-hover:scale-105 + duration-700.
- Subtle Elevation: Hover displacement limited to -translate-y-1, using diffused shadow rather than hard borders to express focus.
- Overlay Reveal: Image overlay and action buttons use opacity + translate combination for gradual reveal, without changing card main dimensions.
- Action Snappiness: Top filter and category buttons use duration-200, ensuring fast switching feedback.

## Self-Check

After generating code, verify:
1. Cards have varying heights
2. Using break-inside-avoid
3. Consistent gaps
4. Images have aspect ratios
5. Responsive column count
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-zinc-200`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-lg`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
font-medium text-sm
transition-colors
```

Card:
```
break-inside-avoid
rounded-xl
overflow-hidden
bg-white
```

Input:
```
rounded-full
bg-zinc-100
border-0
focus:outline-none
focus:ring-2 focus:ring-zinc-900/10
transition-all
```

**Forbidden**

Classes: `rounded-none`, `border-2`, `border-4`, `border-8`, `shadow-[`, `font-black`

Patterns: `^border-[248]`, `^shadow-\[`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-5 py-2.5
  bg-zinc-900 text-white
  rounded-lg
  font-medium text-sm
  shadow-sm
  hover:bg-zinc-700
  hover:-translate-y-0.5
  hover:shadow-[0_4px_12px_rgba(0,0,0,0.15)]
  focus:outline-none focus:ring-2 focus:ring-zinc-900/30 focus:ring-offset-2
  active:scale-[0.98] active:translate-y-0
  transition-all duration-200
">
  Load More
</button>
```

**Card**
```html
<div className="
  group break-inside-avoid mb-6
  bg-white rounded-2xl overflow-hidden
  shadow-sm
  hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)]
  hover:-translate-y-1
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="relative overflow-hidden bg-zinc-100">
    <img
      src="/placeholder.jpg"
      alt="Card image"
      className="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
    />
    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
    <button className="absolute bottom-4 right-4 px-4 py-2 bg-white/90 backdrop-blur text-zinc-900 text-sm font-bold rounded-full translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-out hover:bg-white">
      Save
    </button>
  </div>
  <div className="p-4">
    <h3 className="font-semibold text-zinc-900 mb-1 group-hover:text-blue-600 transition-colors">
      Card Title
    </h3>
    <p className="text-zinc-500 text-sm">
      Description text that can be any length
    </p>
  </div>
</div>
```


---


### 分屏布局 (Split Screen)

**Slug**: `split-screen`

#### Description
Symmetric or asymmetric split-screen layout creating visual tension through contrast and balance. Commonly used for product showcases, brand stories, and comparison pages.

#### Design Philosophy
Split Screen is a layout approach that divides the viewport into two or more regions, creating visual tension and narrative effect through contrast.

Core principles:
- Contrast emphasis: Highlight differences or connections through left-right contrast
- Visual balance: Maintain visual weight balance even when asymmetric
- Narrative guidance: Guide the user's gaze to flow between both sides
- Space utilization: Fully leverage the advantages of widescreen displays

#### Do's (必须做)
1. Use CSS Grid or Flexbox for split screen grid grid-cols-2
2. Large screens maintain split, small screens stack lg:grid-cols-2 grid-cols-1
3. Use contrasting or complementary content
4. Visual elements on one side, text content on the other
5. Maintain visual weight balance between both sides
6. Add transition animations to enhance experience
7. Consider split-screen scroll locking effects

#### Don'ts (禁止做)
1. Do not have identical content on both sides (pointless split)
2. Do not keep split layout on mobile (too narrow)
3. Do not create severe visual weight imbalance between sides
4. Do not ignore content reading order
5. Do not make divider lines too harsh

#### AI Rules
```
You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines

## Must Follow

- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content

## Layout Patterns

50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width

60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side

Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls

## Panel Content

Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content

Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy

## Responsive

Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios

## Animation & Interaction Rules

- Counter-Weight Focus: Hover one panel while the opposite panel gently desaturates or fades in prominence.
- Sharp Editorial Cuts: Button hover uses direct black-white inversion with short duration and no gradient easing tricks.
- Screen-Spanning Lines: Center divider or split seam can briefly intensify on focus change, but motion stays minimal.
- Static Text: Descriptive text blocks must stay position-stable; avoid translate or scale on body copy.

## Self-Check

After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-zinc-300`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
px-8 py-4
font-semibold
transition-colors
```

Card:
```
min-h-[50vh] lg:min-h-screen
flex flex-col justify-center
```

Input:
```
bg-transparent
border-b-2 border-zinc-300
text-lg
focus:outline-none focus:border-black
transition-colors
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^rounded-(?!none)`, `^shadow-(?!none)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="flex gap-4">
  <button className="
    px-8 py-4
    bg-black text-white
    font-semibold
    border-2 border-black
    hover:bg-white hover:text-black
    transition-colors duration-150 ease-out
  ">
    Left Option
  </button>
  <button className="
    px-8 py-4
    bg-white text-black
    border-2 border-black
    font-semibold
    hover:bg-black hover:text-white
    transition-colors duration-150 ease-out
  ">
    Right Option
  </button>
</div>
```

**Card**
```html
<div className="grid grid-cols-1 lg:grid-cols-2 min-h-[60vh] overflow-hidden">
  <article className="peer/left group relative min-h-[50vh] lg:min-h-[60vh] bg-black text-white p-8 lg:p-16 flex flex-col justify-center transition-all duration-500 ease-out hover:flex-[1.1]">
    <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.14),transparent_55%)] scale-100 group-hover:scale-105 transition-transform duration-500 ease-out" />
    <div className="relative z-10">
      <span className="text-sm uppercase tracking-[0.22em] text-white/60 mb-4 block">Night Edit</span>
      <h2 className="text-4xl lg:text-5xl font-bold mb-6">Dark Mode</h2>
      <p className="text-lg text-white/70 mb-8 max-w-md">
        High-contrast visual treatment for dramatic storytelling.
      </p>
      <button className="self-start px-8 py-4 border-2 border-white text-white font-semibold hover:bg-white hover:text-black transition-colors duration-150 ease-out">
        Select Dark
      </button>
    </div>
  </article>

  <article className="peer/right relative min-h-[50vh] lg:min-h-[60vh] bg-white text-black p-8 lg:p-16 flex flex-col justify-center transition-all duration-500 ease-out peer-hover/left:opacity-55 hover:opacity-100 hover:flex-[1.1]">
    <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(0,0,0,0.08),transparent_55%)] scale-100 hover:scale-105 transition-transform duration-500 ease-out" />
    <div className="relative z-10">
      <span className="text-sm uppercase tracking-[0.22em] text-zinc-500 mb-4 block">Day Edit</span>
      <h2 className="text-4xl lg:text-5xl font-bold mb-6">Light Mode</h2>
      <p className="text-lg text-zinc-600 mb-8 max-w-md">
        Editorial clarity for long-form reading and daylight ergonomics.
      </p>
      <button className="self-start px-8 py-4 border-2 border-black bg-black text-white font-semibold hover:bg-white hover:text-black transition-colors duration-150 ease-out">
        Select Light
      </button>
    </div>
  </article>
</div>
```


---


### 全屏滚动布局 (Full Page Scroll)

**Slug**: `full-page-scroll`

#### Description
Immersive scrolling experience where each screen fills the entire viewport, switching complete scenes on scroll. Ideal for brand stories, product introductions, and portfolio showcases.

#### Design Philosophy
Full Page Scroll is a layout approach that expands each content block to fill the entire viewport, creating a cinematic narrative experience.

Core principles:
- Immersive experience: Each screen is a complete visual scene
- Narrative rhythm: Scrolling equals page-turning, controlling information pacing
- Focused attention: Only one core message displayed at a time
- Memorable: Scene-based presentation is easier to remember

#### Do's (必须做)
1. Each section set to min-h-screen or h-screen
2. Use scroll-snap for smooth snapping scroll-snap-type: y mandatory
3. Center content vertically and horizontally flex items-center justify-center
4. Add scroll indicators and page navigation dots
5. Use CSS scroll-behavior: smooth
6. Consider adding enter/exit animations
7. Provide skip or quick navigation options
8. Sections use group class, content elements use group-hover for parallax effects
9. Navigation dots expand from circle to capsule on hover (hover:h-6) to hint interactive hierarchy
10. Background radial gradient scales to 110% on group-hover (breathing background)
11. Content layers use different delays (delay-0 / delay-75 / delay-150) to create staggered parallax

#### Don'ts (禁止做)
1. Do not let content overflow beyond viewport height (should not need scrolling to see everything)
2. Do not omit scroll indicators (users may not know to scroll down)
3. Do not use overly complex animations causing performance issues
4. Do not lock scroll for too long
5. Do not ignore mobile experience
6. Do not use the same transition delay for all content elements (staggering is required for depth perception)

#### AI Rules
```
You are a frontend expert specializing in Full Page Scroll layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT let content overflow beyond viewport height
- Do NOT omit scroll indicators
- Do NOT use heavy animations that hurt performance
- Do NOT lock scroll for too long
- Do NOT ignore mobile experience
- Do NOT use the same transition delay for all content elements (staggering is mandatory for parallax depth)

## Must Follow

- Container: h-screen overflow-y-auto scroll-snap-type: y mandatory
- Sections: min-h-screen snap-start group (MUST use group class for hover parallax)
- Content: centered with flex items-center justify-center
- Navigation: fixed capsule dots on right side (hover:h-6 to expand)
- Scroll indicator: at bottom of first section
- Smooth scrolling: scroll-behavior: smooth

## Section Structure

Each section:
- min-h-screen (full viewport height)
- snap-start (snap to section start)
- group (required for group-hover parallax)
- overflow-hidden (required for breathing background)
- Content centered both ways
- Distinct background color/gradient
- Number indicator (01, 02, etc.)

## Animation & Interaction Rules

- Staggered Parallax: Content layers inside a group section must use DIFFERENT transition delays to create depth. Use delay-0 for the eyebrow/label (fastest, frontmost), delay-75 for the heading (middle layer), delay-150 for body text (slowest, deepest). All use group-hover:-translate-y-N with transition-transform duration-700 ease-out. This creates the illusion that elements are on different Z-planes flying toward the viewer as the section is hovered/focused.
- Breathing Background: Every section includes an absolute background div (radial-gradient or other atmospheric effect) with group-hover:scale-110 transition-transform duration-1000 ease-out. The scale is slow (1000ms) and subtle -- creates a "room breathing" or "portal opening" sensation without being jarring.
- Capsule Nav Dots: Side navigation dots are circles (w-3 h-3 rounded-full) by default. On hover: hover:h-6 (the dot extends vertically into a capsule/pill shape). The active section's dot is permanently tall (h-10 rounded-full). These indicate section hierarchy and interactivity without needing labels.
- Heading Scale: The main heading uses group-hover:scale-105 in addition to translation -- creates a subtle zoom-in that reinforces the "content approaching" cinematic parallax.
- Scroll Indicator: animate-bounce, positioned absolute bottom-8 left-1/2 -translate-x-1/2. Always present on the first section.
- Easing: Content parallax uses duration-700 ease-out. Background breathing uses duration-1000 ease-out. Nav dots use duration-300.

## Navigation

Side dots:
- Fixed position on right side, vertical center
- Active: w-3 h-10 rounded-full bg-white (tall capsule)
- Inactive: w-3 h-3 rounded-full bg-white/30 hover:bg-white/80 hover:h-6 (expands to capsule on hover)
- transition-all duration-300 for smooth shape morph

## Self-Check

After generating code, verify:
1. All sections have group class
2. Content elements inside sections have DIFFERENT delay values (delay-0, delay-75, delay-150)
3. Each section has a breathing background div (group-hover:scale-110)
4. Navigation dots use hover:h-6 to morph into capsules
5. Active nav dot is permanently h-10 (tall capsule)
6. All sections are exactly viewport height (min-h-screen)
7. Scroll snapping enabled (scroll-snap-type y mandatory on container)
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-white/20`
- Radius: `rounded-full`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
px-8 md:px-12 py-4 md:py-5
font-semibold text-lg
transition-colors
```

Card:
```
min-h-screen
snap-start
flex items-center justify-center
```

Input:
```
bg-transparent
border-b border-white/30
text-white text-lg
placeholder-white/50
focus:outline-none focus:border-white
transition-colors
```

**Forbidden**

Classes: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `border-gray-200`, `border-gray-300`, `text-zinc-900`

Patterns: `^shadow-(?!none)`, `^border-gray-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  absolute bottom-8 left-1/2 -translate-x-1/2
  flex flex-col items-center gap-2
  text-white/70 hover:text-white
  transition-colors
  animate-bounce
">
  <span className="text-sm uppercase tracking-widest">Scroll</span>
  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
  </svg>
</button>
```

**Card**
```html
<section className="
  relative min-h-screen
  snap-start flex items-center justify-center
  p-8
  bg-gradient-to-br from-indigo-900 via-purple-900 to-black
  overflow-hidden
  group
">
  {/* Breathing background glow — expands on group-hover */}
  <div className="
    absolute inset-0
    bg-[radial-gradient(ellipse_60%_50%_at_50%_50%,rgba(99,102,241,0.3),transparent)]
    group-hover:scale-110
    transition-transform duration-1000 ease-out
    pointer-events-none
  " />

  <div className="relative z-10 max-w-5xl text-center text-white cursor-default">
    {/* Eyebrow — fastest parallax layer */}
    <span className="
      inline-block
      text-sm uppercase tracking-widest opacity-60 mb-4
      group-hover:-translate-y-2
      transition-transform duration-700 ease-out
      delay-0
    ">
      Chapter 01
    </span>
    {/* Heading — medium parallax */}
    <h2 className="
      text-5xl lg:text-7xl font-bold mb-6
      group-hover:scale-105 group-hover:-translate-y-2
      transition-all duration-700 ease-out
      delay-75
    ">
      Immersive Narrative
    </h2>
    {/* Body — slowest parallax layer */}
    <p className="
      text-xl lg:text-2xl opacity-80 max-w-2xl mx-auto
      group-hover:-translate-y-1
      transition-transform duration-700 ease-out
      delay-150
    ">
      This full-screen section captures the entire viewport, creating a cinematic, story-like experience.
    </p>
  </div>
</section>
```


---


### 垂直时间线布局 (Vertical Timeline)

**Slug**: `timeline-vertical`

#### Description
Vertical timeline layout connecting time nodes through a connecting line. Ideal for displaying historical progress, project milestones, work experience, and process steps.

#### Design Philosophy
Vertical Timeline is a layout approach for displaying time sequences or process steps, guiding reading through visual connecting lines.

Core principles:
- Linear narrative: Clear chronological or process order
- Node emphasis: Each important moment has a clear marker
- Connected relationships: Visual lines link all events together
- Progressive reveal: Supports scroll-triggered animations

#### Do's (必须做)
1. Use pseudo-elements or divs to create the central connecting line
2. Node dots align with the connecting line
3. Alternating left-right layout adds visual variety
4. Mobile switches to single-side layout
5. Add scroll-triggered entrance animations
6. Nodes use consistent time/sequence number format
7. Connecting line uses soft colors to avoid stealing attention
8. Card hover must synchronize node highlight or scale, establishing axis linkage
9. Card hover can slightly shift along horizontal axis, expressing a historical node being pulled out for examination
10. Interaction transitions use duration-200 ease-out, ensuring fast timeline browsing

#### Don'ts (禁止做)
1. Do not break or misalign the connecting line
2. Do not use inconsistent node sizes
3. Do not keep alternating layout on mobile
4. Do not omit time/sequence labels
5. Do not make content too long causing excessively long connecting lines
6. Do not decouple node and card interactions (only card changes without node response)
7. Do not use sluggish or dragging transition timing

#### AI Rules
```
You are a frontend expert specializing in Vertical Timeline layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT break the connecting line
- Do NOT use inconsistent node sizes
- Do NOT keep alternating layout on mobile
- Do NOT omit time/date labels
- Do NOT make content too long per node

## Must Follow

- Central line: absolute positioned pseudo-element or div
- Node dots: aligned with center line
- Mobile: single-side layout (all items on right)
- Desktop: can alternate left/right
- Consistent spacing between nodes
- Clear time/date indicators

## Structure

Container:
- relative positioning
- padding-left for line space (mobile)
- centered line (desktop alternating)

Central Line:
- Pseudo-element or div
- Absolute positioned
- 2px width, subtle color

Node:
- Circular dot (w-4 h-4)
- Aligned with line center
- Different colors for status
- White border for contrast

Content Card:
- Connected visually to node
- Date/time label
- Title and description
- Optional action button

## Responsive

Mobile:
- All items on one side
- Line on left
- Full-width cards

Desktop:
- Optional alternating sides
- Line in center
- Cards 50% width

## Animation

Scroll-triggered:
- Items fade in on scroll
- Stagger animation
- Node pulse on current

## Animation & Interaction Rules

- Node Synchronization: When hovering a card, the timeline node must synchronize with highlight, scale, or glow, establishing a strong connection.
- Pull-out Effect: Card hover can slightly lift and shift along the horizontal axis (translate-x), simulating a node being pulled out for examination.
- Sequential Smoothness: Transitions use duration-200 ease-out, supporting stable feedback during fast scrolling browsing.
- Connected Focus: Focused card border color must match the timeline main line, ensuring narrative continuity.

## Self-Check

After generating code, verify:
1. Line is continuous
2. Nodes are aligned
3. Mobile is single-side
4. All items have dates
5. Scroll animation works
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-zinc-100`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
inline-flex items-center gap-2
text-sm font-medium
text-blue-600
transition-colors
```

Card:
```
relative
bg-white
rounded-xl
shadow-sm
border border-zinc-100
```

Input:
```
border border-zinc-200
rounded-lg
text-zinc-900
focus:outline-none
focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
```

**Forbidden**

Classes: `rounded-none`, `border-4`, `border-8`, `shadow-2xl`, `font-black`

Patterns: `^border-[48]`, `^shadow-2xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  inline-flex items-center gap-2
  px-4 py-2
  text-sm font-medium
  text-blue-600
  hover:text-blue-700
  transition-colors
">
  <span>View Details</span>
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
</button>
```

**Card**
```html
<div className="group relative pl-10 sm:pl-0">
  <div className="absolute top-6 left-0 sm:left-1/2 sm:-ml-[9px] w-4 h-4 bg-zinc-200 rounded-full border-4 border-white shadow-sm z-10 group-hover:bg-blue-500 group-hover:scale-125 group-hover:shadow-[0_0_10px_rgba(59,130,246,0.5)] transition-all duration-200 ease-out" />

  <div className="sm:w-1/2 sm:pr-12 sm:text-right">
    <div className="p-6 bg-white rounded-xl shadow-sm border border-zinc-100 group-hover:shadow-md group-hover:border-blue-200 group-hover:-translate-y-1 group-hover:translate-x-1 transition-all duration-200 ease-out">
      <time className="text-sm text-blue-600 font-bold tracking-wide mb-2 block uppercase group-hover:tracking-widest transition-all duration-200">
        January 2024
      </time>
      <h3 className="text-xl font-semibold text-zinc-900 mb-2">
        Milestone Reached
      </h3>
      <p className="text-zinc-600 text-sm leading-relaxed">
        The chronological event comes to life when interacted with, illuminating its specific point in history.
      </p>
    </div>
  </div>
</div>
```


---


### 卡片堆叠布局 (Card Stack)

**Slug**: `card-stack`

#### Description
3D layout with overlapping cards, creating depth through Z-axis stacking and offsets. Ideal for carousels, step-by-step displays, and card deck selection.

#### Design Philosophy
Card Stack is a layout approach that creates depth perception using the Z-axis, with multiple cards overlapping front to back to form visual layers.

Core principles:
- Depth perception: Layering implies more content beneath
- Focus guidance: The frontmost card receives the most attention
- Interaction expectation: Implies the ability to flip or switch cards
- Space efficiency: Display multiple options in limited space
- Shuffle dynamics: On hover, the deck fans out like holding a hand of cards

#### Do's (必须做)
1. Use transform and z-index to create stacking effects
2. Back cards scale down and offset scale-95 translate-y-4
3. Add progressive opacity opacity-80, opacity-60
4. Support drag or click to switch cards
5. Add smooth transition animations transition-all duration-[400ms]
6. Limit visible card count (typically 3-5 cards)
7. Provide visual hints indicating interactivity
8. On group-hover, back cards fan out to sides (different rotate and translate-x values)
9. Top card on hover significantly lifts + shadow-2xl, simulating card reveal feel

#### Don'ts (禁止做)
1. Do not stack too many cards causing clutter
2. Do not completely overlap cards hiding layer distinction
3. Do not ignore interaction feedback
4. Do not use overly complex animations affecting performance
5. Do not use overly complex gestures on mobile
6. Do not leave back cards static on hover (lacks depth perception)

#### AI Rules
```
You are a frontend expert specializing in Card Stack layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT stack too many visible cards (max 3-5)
- Do NOT overlap cards completely (need visual distinction)
- Do NOT forget interaction feedback
- Do NOT use overly complex animations
- Do NOT use complex gestures on mobile
- Do NOT leave back cards static during hover (kills depth illusion)

## Must Follow

- Use transform for positioning: scale, translateY, rotate
- Use z-index for layering: z-30, z-20, z-10
- Progressive opacity: 100%, 80%, 60%
- Smooth transitions: transition-all duration-[400ms] ease-out
- Clear hover/active states
- Limit visible cards: 3-5 maximum

## Animation & Interaction Rules

- Deck Shuffling: On group-hover, back cards fan out sideways with different rotate + translate-x values, like shuffling a deck of cards.
- 3D Peeling: Top card on hover should significantly lift (group-hover:-translate-y-6 group-hover:scale-105 group-hover:shadow-2xl), simulating physical card being raised.
- Smooth Return: Use ease-out so cards snap back naturally from fast to slow.
- Stack Peek: Slightly change back card opacity on hover to hint their presence.

## Stack Structure

Container:
- relative position with group class for sibling interactions
- flex center alignment
- Fixed height for consistent layout

Cards (front to back):
- Card 1 (front): z-30, scale-100, opacity-100
- Card 2 (mid): z-20, scale-95, translateY-4, rotate-2, opacity-80
- Card 3 (back): z-10, scale-90, translateY-8, rotate(-3), opacity-60

On group-hover:
- Card 1: -translate-y-6, scale-105, shadow-2xl
- Card 2: rotate-6, translate-x-(-5), translate-y-8
- Card 3: -rotate-6, translate-x-5, translate-y-14

## Self-Check

After generating code, verify:
1. Cards are visually layered with different scale + opacity
2. group-hover fans back cards out to the sides
3. Front card lifts dramatically on hover
4. Max 3-5 visible cards
5. Mobile-friendly touch targets
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-zinc-200`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-md`
- Medium: `shadow-xl`
- Large: `shadow-2xl`
- Hover: `hover:shadow-2xl`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-full
shadow-lg
hover:shadow-xl
transition-shadow
```

Card:
```
rounded-2xl
shadow-xl
transition-all duration-300
bg-white
```

Input:
```
bg-white/80 backdrop-blur
border border-zinc-200
rounded-xl
focus:outline-none
focus:ring-2 focus:ring-purple-500/30
transition-all
```

**Forbidden**

Classes: `rounded-none`, `shadow-none`, `border-4`, `border-8`

Patterns: `^rounded-none$`, `^border-[48]`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="flex items-center gap-4">
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl hover:-translate-y-0.5
    active:scale-90 active:shadow-md
    transition-all duration-200 ease-out
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
    </svg>
  </button>
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl hover:-translate-y-0.5
    active:scale-90 active:shadow-md
    transition-all duration-200 ease-out
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
  </button>
</div>
```

**Card**
```html
<div className="relative w-80 h-96 group">
  {/* 底层卡片 */}
  <div className="absolute inset-0 bg-blue-100 rounded-2xl shadow-sm border border-blue-200 translate-y-8 scale-90 -rotate-3 group-hover:-rotate-6 group-hover:translate-x-5 group-hover:translate-y-12 transition-all duration-[400ms] ease-out" />
  {/* 中层卡片 */}
  <div className="absolute inset-0 bg-purple-100 rounded-2xl shadow-md border border-purple-200 translate-y-4 scale-95 rotate-2 group-hover:rotate-5 group-hover:-translate-x-5 group-hover:translate-y-6 transition-all duration-[400ms] ease-out" />
  {/* 顶层卡片 */}
  <div className="absolute inset-0 bg-white rounded-2xl shadow-lg border border-gray-100 p-8 flex flex-col group-hover:-translate-y-6 group-hover:scale-105 group-hover:shadow-2xl transition-all duration-[400ms] ease-out z-10 cursor-grab active:cursor-grabbing">
    <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl mb-6" />
    <h3 className="text-xl font-bold text-zinc-900 mb-3">Top Card</h3>
    <p className="text-zinc-500 text-sm">Hover the stack to reveal the deck beneath.</p>
  </div>
</div>
```


---


### 固定侧边栏布局 (Fixed Sidebar)

**Slug**: `sidebar-fixed`

#### Description
Application layout with a fixed sidebar navigation and scrollable main content area. Ideal for admin dashboards, documentation sites, dashboards, and SaaS applications.

#### Design Philosophy
Fixed Sidebar is a classic layout for application-type interfaces, providing persistent visible navigation while maximizing content display space.

Core principles:
- Persistent navigation: Important entry points are always accessible
- Content priority: Maximize the main area utilization
- Clear hierarchy: The sidebar reflects information architecture
- Responsive adaptation: Gracefully collapse on small screens

#### Do's (必须做)
1. Sidebar uses fixed or sticky positioning
2. Main content area sets left margin ml-64 or pl-64
3. Mobile sidebar collapses to drawer or hamburger menu
4. Provide expand/collapse sidebar controls
5. Sidebar width unified at w-64 (256px) or w-72 (288px)
6. Current page highlighted in sidebar
7. Sidebar can include brand logo, navigation, user info
8. Navigation item interactions stay fast and restrained (duration-150), prioritize color and subtle icon displacement feedback
9. Active item uses stable anchor (e.g. left accent line) rather than floating animation
10. Main content cards hover only allows subtle lift and lightweight shadow spread

#### Don'ts (禁止做)
1. Do not make sidebar too wide affecting main content area
2. Do not keep sidebar expanded on mobile
3. Do not ignore current page state indication
4. Do not create overly deep navigation levels
5. Do not let sidebar content overflow without scrolling
6. Do not use bouncy, spinning, or flashy animations for sidebar menus
7. Do not leave active items without a clear visual anchor

#### AI Rules
```
You are a frontend expert specializing in Fixed Sidebar layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make sidebar too wide (max 280px)
- Do NOT keep sidebar expanded on mobile
- Do NOT forget current page indicator
- Do NOT create overly deep navigation
- Do NOT ignore sidebar overflow scroll

## Must Follow

- Sidebar: fixed top-0 left-0 w-64 h-screen
- Main content: ml-64 (matches sidebar width)
- Mobile: sidebar hidden, hamburger menu trigger
- Active state: highlight current page
- Overflow: sidebar nav scrollable if needed

## Structure

Sidebar (top to bottom):
1. Logo/Brand area
2. Search (optional)
3. Main navigation (scrollable)
4. Secondary nav or settings
5. User profile/account

Main content:
- Left margin matches sidebar width
- Own scrolling context
- Header area for page title
- Content area below

## Responsive

Desktop (1024px+):
- Full sidebar visible
- Main content with left margin

Tablet/Mobile (< 1024px):
- Sidebar as off-canvas drawer
- Hamburger menu button
- Overlay when sidebar open
- Main content full width

## Navigation

- Group related items
- Use icons + labels
- Highlight active item
- Support nested items (accordion)
- Tooltips when collapsed

## Animation & Interaction Rules

- Frictionless Utility: High-interaction areas uniformly use duration-150, avoiding flashy effects that interrupt efficiency.
- Magnetic Icon Shift: On hover, icons slightly shift right (translate-x-0.5), guiding the eye toward the main content area.
- Solid Active State: Current item maintains a stable anchor (left accent line or bold border), avoiding floating feel.
- Content Lift: Main area cards hover only allows -translate-y-0.5 and lightweight shadow, ensuring reading stability.

## Self-Check

After generating code, verify:
1. Sidebar is fixed position
2. Main content has correct margin
3. Mobile has hamburger menu
4. Current page is highlighted
5. Sidebar scrolls if content overflows
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-zinc-200`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
text-sm font-medium
transition-colors
```

Card:
```
bg-white
rounded-xl
border border-zinc-200
shadow-sm
```

Input:
```
bg-zinc-100
border-0
rounded-lg
text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500/30
```

**Forbidden**

Classes: `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-2xl`, `font-black`, `font-extrabold`, `text-4xl`, `text-5xl`, `text-6xl`

Patterns: `^rounded-(?:2xl|3xl|full)`, `^shadow-2xl`, `^text-[456]xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  w-full
  flex items-center gap-3
  px-4 py-3
  text-left
  text-zinc-600
  rounded-lg
  hover:bg-zinc-100
  hover:text-zinc-900
  transition-colors
">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
  </svg>
  <span>New Item</span>
</button>
```

**Card**
```html
<div className="
  p-6
  bg-white
  rounded-xl
  border border-zinc-200
  shadow-sm
  hover:-translate-y-0.5
  hover:shadow-[0_8px_20px_rgba(15,23,42,0.08)]
  transition-all duration-150 ease-out
">
  <h3 className="text-lg font-semibold text-zinc-900 mb-2">
    Card Title
  </h3>
  <p className="text-zinc-600 text-sm">
    Content for the main area card.
  </p>
</div>
```


---


### 杂志网格布局 (Magazine Grid)

**Slug**: `magazine-grid`

#### Description
Multi-column grid layout inspired by print magazines, creating rich visual hierarchy through varied content block sizes. Ideal for news, blogs, and content aggregation.

#### Design Philosophy
Magazine Grid borrows the typographic wisdom of traditional print magazines, creating professional editorial effects through multi-column and mixed-size content blocks.

Core principles:
- Visual hierarchy: Large images grab attention, small blocks fill in details
- Scan-friendly: Readers can quickly browse to find content of interest
- Spatial rhythm: Alternating large and small creates reading rhythm
- Professionalism: Conveys authority and credibility

#### Do's (必须做)
1. Use CSS Grid to create complex grids grid-template-areas
2. Featured content uses larger grid areas col-span-2 row-span-2
3. Maintain baseline alignment and consistent spacing
4. Use different sized content blocks to create hierarchy
5. Mobile switches to single column or simplified grid
6. Add clear category labels and timestamps
7. Consider reserving space for ad placements
8. All article cards use group class to trigger child element linkage
9. Images default to grayscale-[20%], group-hover:grayscale-0 group-hover:scale-105 (Color Awakening, instant full-color eye-catch)
10. Category label followed by decorative line: w-4 h-px group-hover:w-12 transition-all duration-300 ease-out (Editorial Stretch, typographic skeleton extension)
11. Title group-hover:text-red-600 transition-colors duration-200 ease-out (Crisp Typographic Shift, clean color switch)

#### Don'ts (禁止做)
1. Do not make all content blocks the same size
2. Do not ignore mobile layout adaptation
3. Do not overcrowd content without whitespace
4. Do not use inconsistent category labels
5. Do not ignore image cropping ratios
6. Do not apply any displacement animations to body text paragraphs (reading stability first)
7. Do not use glow or shadow effects on title hover (should directly switch colors, clean and crisp)

#### AI Rules
```
You are a frontend expert specializing in Magazine Grid layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all content blocks same size
- Do NOT ignore mobile responsive layout
- Do NOT overcrowd content without whitespace
- Do NOT use inconsistent category styling
- Do NOT ignore image aspect ratios

## Must Follow

- Use CSS Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-4
- Featured content: col-span-2 row-span-2
- Consistent gaps: gap-6
- Category labels on all articles
- Image hover effects
- Line clamping for excerpts

## Grid Structure

Desktop (4 columns):
- Featured: 2x2 grid area
- Regular: 1x1 grid cells
- Mix large and small for variety

Tablet (2 columns):
- Featured: 2x1 or 1x2
- Regular: 1x1

Mobile (1 column):
- All items full width
- Stack vertically

## Article Card

Required elements:
1. Image with aspect ratio
2. Category label (colored)
3. Title (clamped)
4. Excerpt (optional, clamped)
5. Meta (author, date, read time)

## Category Colors

Use distinct colors per category:
- Tech: blue
- Business: green
- Culture: amber
- Opinion: purple
- Featured: red

## Animation & Interaction Rules

- Color Awakening: Default images can have slight grayscale (e.g. grayscale-[20%]), restoring full color and scale-105 on hover.
- Editorial Stretch: Category label decorative line can smoothly extend from w-4 to w-12, emphasizing typographic skeleton.
- Crisp Typographic Shift: Title hover directly switches to primary color (e.g. red-600), using duration-200 ease-out.
- Readability First: Body text paragraphs must not have displacement animations, ensuring reading stability and scanning efficiency.

## Self-Check

After generating code, verify:
1. Featured item is larger
2. Grid has visual variety
3. Categories are labeled
4. Mobile layout works
5. Images have proper ratios
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-zinc-200`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
text-xs font-semibold uppercase tracking-wider
rounded
```

Card:
```
rounded-lg
overflow-hidden
group
```

Input:
```
bg-zinc-100
border-0
rounded-lg
focus:outline-none
focus:ring-2 focus:ring-red-500/30
```

**Forbidden**

Classes: `rounded-none`, `border-4`, `border-8`, `shadow-2xl`, `font-black`

Patterns: `^border-[48]`, `^shadow-2xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="group flex items-center gap-2">
  <span className="
    inline-block
    px-3 py-1
    text-xs font-semibold uppercase tracking-wider
    text-red-600
    bg-red-50
    rounded
  ">
    Technology
  </span>
  <span className="block w-4 h-px bg-red-600 group-hover:w-12 transition-all duration-300 ease-out" />
</div>
```

**Card**
```html
<article className="group flex flex-col gap-4 cursor-pointer">
  <a href="#" className="block">
    <div className="relative overflow-hidden rounded-lg">
      <div
        aria-label="Article thumbnail"
        className="w-full aspect-[16/10] bg-[linear-gradient(135deg,#264653_0%,#2a9d8f_60%,#1a1a1a_100%)] grayscale-[20%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500 ease-out"
      />
      <span className="absolute top-4 left-4 px-3 py-1 text-xs font-semibold uppercase bg-red-600 text-white rounded">
        Featured
      </span>
    </div>
    <div className="flex flex-col mt-1">
      <div className="flex items-center gap-2 mb-2">
        <span className="text-xs font-semibold uppercase tracking-wider text-red-600">Technology</span>
        <span className="w-4 h-px bg-red-600 group-hover:w-12 transition-all duration-300 ease-out" />
      </div>
      <h3 className="text-xl font-bold text-zinc-900 mb-2 leading-snug group-hover:text-red-600 transition-colors duration-200 ease-out">
        Article Title Goes Here
      </h3>
      <p className="text-zinc-600 text-sm mb-3 line-clamp-2">
        Brief excerpt of the article content that gives readers a preview...
      </p>
      <div className="flex items-center gap-3 text-sm text-zinc-500">
        <span>John Doe</span>
        <span>5 min read</span>
      </div>
    </div>
  </a>
</article>
```


---


### 全屏英雄区布局 (Fullscreen Hero)

**Slug**: `hero-fullscreen`

#### Description
A hero section layout with fullscreen images or video backgrounds that captures attention through stunning visuals, ideal for brand showcases, product launches, and event promotions.

#### Design Philosophy
Fullscreen Hero is a layout approach centered on visual impact, using fullscreen images or video to create an immersive first impression.

Core principles:
- First impression: Capture visitors immediately with stunning visuals
- Brand expression: Convey brand identity through imagery
- Focus on essentials: Highlight the most important information and actions
- Emotional connection: Build emotional resonance through visuals

#### Do's (必须做)
1. Use h-screen or min-h-screen to ensure fullscreen coverage
2. Use object-cover on images to maintain aspect ratio fill
3. Add gradient or semi-transparent overlays to ensure text readability
4. Position content absolutely or center with flex
5. Provide scroll indicators to guide users downward
6. Mute and autoplay video backgrounds
7. Provide fallback solutions (image replacing video)
8. Primary CTA button hover:-translate-y-1 + hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)] (gravity float effect)
9. Feature cards use group class + hover:-translate-y-2 + hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)]
10. Icon container group-hover:scale-110 micro-interaction
11. All buttons active:scale-[0.98] active:translate-y-0 + focus:ring-2 focus:ring-white/80 focus:ring-offset-2

#### Don'ts (禁止做)
1. Do NOT place text directly on complex backgrounds without an overlay
2. Do NOT use low-quality or stretched images
3. Do NOT ignore mobile responsiveness
4. Do NOT fill the entire space with content and no whitespace
5. Do NOT autoplay video with sound
6. Do NOT omit active:scale-[0.98] on buttons (buttons without tactile confirmation feel terrible on fullscreen backgrounds)
7. Do NOT omit group class on cards (icon group-hover:scale-110 micro-interaction depends on group)

#### AI Rules
```
You are a frontend expert specializing in Fullscreen Hero layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT place text on busy backgrounds without overlay
- Do NOT use low-quality or stretched images
- Do NOT ignore mobile responsiveness
- Do NOT fill entire viewport with no breathing room
- Do NOT autoplay video with sound

## Must Follow

- Container: min-h-screen or h-screen
- Background: object-cover for images
- Overlay: gradient or solid for text readability
- Content: centered with max-width constraint
- Scroll indicator: at bottom of hero
- Navigation: absolute positioned, transparent

## Structure

Layers (bottom to top):
1. Background image/video (absolute, full cover)
2. Overlay (gradient or solid color)
3. Content (relative z-10, centered)
4. Navigation (absolute top)
5. Scroll indicator (absolute bottom)

## Background Options

Image:
- object-fit: cover
- Full viewport coverage
- High quality, relevant imagery

Video:
- Muted, autoplay, loop
- Fallback poster image
- Pause on mobile (optional)

Overlay types:
- Solid: bg-black/50
- Gradient: from-black/80 via-transparent to-black/30
- Color: bg-brand/70 mix-blend-multiply

## Content

- Badge/label (optional)
- Main headline (large, bold)
- Subheadline (medium)
- CTA buttons (prominent)
- Max-width container (4xl recommended)

## Responsive

Mobile:
- Smaller text sizes
- Stacked CTA buttons
- Simpler background (may hide video)

Desktop:
- Full visual impact
- Side-by-side buttons
- All animations enabled

## Animation & Interaction Rules

### Gravity Focus (CTA Button)
- Resting: shadow-[0_4px_14px_rgba(0,0,0,0.3)]
- Hover: hover:-translate-y-1 hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)] -- gravity float with shadow burst
- Active: active:scale-[0.98] active:translate-y-0 active:shadow-[0_2px_8px_rgba(0,0,0,0.3)] -- tactile press
- Focus: focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-black/50

### Floating Glass (Feature Cards)
- Always use group class on card container
- Hover: hover:-translate-y-2 hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)] -- dramatic float
- Icon container: group-hover:scale-110 transition-transform duration-300 ease-out

### Text Reveal on Hover
- h3: group-hover:text-white/95 transition-colors duration-200
- p: group-hover:text-white/85 transition-colors duration-200

### Tactile Confirmation
- All buttons: active:scale-[0.98] -- required for perceived responsiveness on dark overlay
- Duration: 200ms ease-out for all interactive elements

## Self-Check

After generating code, verify:
1. Hero is full viewport height
2. Text is readable on background
3. Overlay provides contrast
4. Scroll indicator visible
5. Mobile layout works
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-white`
- Radius: `rounded-full`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold leading-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
px-8 py-4
font-semibold text-lg
rounded-full
transition-colors
```

Card:
```
bg-white/10 backdrop-blur-sm
rounded-2xl
border border-white/20
```

Input:
```
bg-white/10 backdrop-blur-sm
border border-white/30
rounded-full
text-white placeholder-white/60
focus:outline-none focus:ring-2 focus:ring-white/50
```

**Forbidden**

Classes: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `bg-zinc-50`, `bg-gray-50`, `text-zinc-900`, `text-gray-900`, `border-gray-200`, `border-zinc-200`

Patterns: `^shadow-(?!none)`, `^bg-(?:zinc|gray)-(?:50|100)`, `^border-(?:zinc|gray)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="flex flex-col sm:flex-row gap-4">
  {/* Primary CTA — gravity float + shadow burst */}
  <button className="
    px-8 py-4
    bg-white text-black
    font-semibold text-lg
    rounded-full
    shadow-[0_4px_14px_rgba(0,0,0,0.3)]
    hover:bg-white/95 hover:-translate-y-1
    hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)]
    focus:outline-none focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-black/50
    active:scale-[0.98] active:translate-y-0 active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]
    transition-all duration-200 ease-out
  ">
    Get Started
  </button>
  {/* Ghost CTA */}
  <button className="
    px-8 py-4
    bg-transparent text-white
    font-semibold text-lg
    rounded-full
    border-2 border-white
    hover:bg-white/15 hover:-translate-y-1
    hover:shadow-[0_8px_28px_rgba(0,0,0,0.3)]
    focus:outline-none focus:ring-2 focus:ring-white/60 focus:ring-offset-2 focus:ring-offset-black/50
    active:scale-[0.98] active:translate-y-0
    transition-all duration-200 ease-out
  ">
    Learn More
  </button>
</div>
```

**Card**
```html
<div className="
  group
  p-8
  bg-white/10 backdrop-blur-sm
  rounded-2xl
  border border-white/20
  hover:bg-white/15 hover:border-white/30
  hover:-translate-y-2
  hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)]
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="
    w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4
    group-hover:scale-110 transition-transform duration-300 ease-out
  ">
    <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  </div>
  <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-white/95 transition-colors duration-200">
    Feature Title
  </h3>
  <p className="text-white/70 group-hover:text-white/85 transition-colors duration-200">
    Brief description of the feature.
  </p>
</div>
```


---


### 粘土拟态 (Claymorphism)

**Slug**: `claymorphism`

#### Description
A soft clay-textured design that creates adorable 3D effects through extra-large border radii, combined inner and outer shadows, and gentle gradients, ideal for children's apps and playful products.

#### Design Philosophy
Claymorphism is a UI design style that simulates the texture of clay or plasticine, creating soft, adorable 3D effects through extra-large border radii, combined inner and outer shadows, and gentle gradient colors.

Core principles:
- Softness: Extra-large radii and gentle shadows create a squishy texture
- Dimensionality: Inner shadow + outer shadow combination simulates 3D effects
- Playfulness: Candy color palette and rounded shapes convey joyful emotions
- Tactility: Design elements look touchable and squeezable
- Bouncy physics: Squash deformation on press, elastic bounce-back on release

#### Do's (必须做)
1. Use extra-large border radii rounded-3xl or rounded-full
2. Combine inner and outer shadows to create dimensionality
3. Use soft candy color palette
4. Add subtle gradient backgrounds to simulate lighting
5. Maintain sufficient spacing between elements
6. Use rounded icons and fonts
7. Use Squash & Stretch on press: active:scale-x-105 active:scale-y-90
8. Use spring easing ease-[cubic-bezier(0.34,1.56,0.64,1)] duration-300
9. Deepen inner shadow and reduce outer shadow on press to simulate indentation

#### Don'ts (禁止做)
1. Do NOT use sharp corners rounded-none
2. Do NOT use hard-edge shadows shadow-[Xpx_Xpx_0px]
3. Do NOT use high-contrast dark color schemes
4. Do NOT use overly complex gradients
5. Do NOT overcrowd elements
6. Do NOT use plain translate-y instead of real deformation physics
7. Do NOT use linear ease or ease-in-out (lacks bounciness)

#### AI Rules
```
You are a Claymorphism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using sharp corners rounded-none or small radii rounded-sm
- Using hard-edge shadows shadow-[Xpx_Xpx_0px]
- Using high-contrast dark color schemes
- Using pure black text text-black
- Omitting inner shadow effects
- Using plain translation instead of deformation physics (cannot only use translate-y)
- Using linear easing (must use spring easing)

## Must Follow

- Extra-large radii rounded-3xl, rounded-[32px], rounded-full
- Combined shadows: outer shadow + inner highlight + inner shadow
- Soft gradient backgrounds bg-gradient-to-b, bg-gradient-to-br
- Candy color palette (pink, yellow, green, purple, orange)

## Animation & Interaction Rules

- Squishy Physics: On click (:active) use Squash & Stretch deformation -- active:scale-x-105 active:scale-y-90, simulating clay being pressed and deformed.
- Deep Impression: On press, significantly increase inner shadow (inset shadow from 4px to 8px) while reducing outer shadow, simulating a finger pressing clay inward.
- Bouncy Easing: Must use spring easing ease-[cubic-bezier(0.34,1.56,0.64,1)] with duration-300, giving elements an elastic bounce-back feel on release.
- Floating Hover: On hover, float up -translate-y-1 with slightly expanded outer shadow, expressing the element being gently lifted.

## Color Palette

Primary colors:
- Pink: from-pink-300 to-pink-400, text-pink-600
- Cream: from-amber-100 to-amber-200, text-amber-700
- Mint: from-green-200 to-green-300, text-green-700
- Lavender: from-purple-200 to-purple-300, text-purple-700
- Lemon: from-yellow-200 to-yellow-300, text-yellow-700

## Shadow Formula

Raised elements (buttons, cards):
shadow-[8px_8px_16px_rgba(0,0,0,0.08),inset_4px_4px_8px_rgba(255,255,255,0.6),inset_-2px_-2px_4px_rgba(0,0,0,0.08)]

Inset elements (inputs):
shadow-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.9)]

Pressed state (active):
shadow-[2px_2px_4px_rgba(0,0,0,0.05),inset_8px_8px_16px_rgba(0,0,0,0.15),inset_-4px_-4px_8px_rgba(255,255,255,0.5)]

## Self-Check

After generating code, verify:
1. Border radii are large enough (at least rounded-2xl)
2. Has combined inner and outer shadows
3. Uses soft gradient colors
4. Has scale-x-105 scale-y-90 deformation on press
5. Uses spring easing instead of linear easing
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-transparent`
- Radius: `rounded-3xl`

**Shadow**
- Small: `shadow-[4px_4px_8px_rgba(0,0,0,0.08),inset_2px_2px_4px_rgba(255,255,255,0.5),inset_-1px_-1px_2px_rgba(0,0,0,0.05)]`
- Medium: `shadow-[8px_8px_16px_rgba(0,0,0,0.1),inset_4px_4px_8px_rgba(255,255,255,0.4),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]`
- Large: `shadow-[12px_12px_24px_rgba(0,0,0,0.12),inset_6px_6px_12px_rgba(255,255,255,0.5),inset_-3px_-3px_6px_rgba(0,0,0,0.1)]`
- Hover: `hover:shadow-[4px_4px_8px_rgba(0,0,0,0.1),inset_4px_4px_8px_rgba(255,255,255,0.4),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]`

**Interaction**
- Hover Translate: `hover:translate-y-1`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-bold text-pink-700`
- Body: `text-pink-600`

**Required Classes**

Button:
```
bg-gradient-to-b from-pink-300 to-pink-400
rounded-full
text-white font-bold
shadow-[8px_8px_16px_rgba(0,0,0,0.1),inset_4px_4px_8px_rgba(255,255,255,0.4),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
hover:translate-y-1
transition-all duration-200
```

Card:
```
bg-gradient-to-br from-white to-pink-50
rounded-[32px]
shadow-[12px_12px_24px_rgba(0,0,0,0.1),inset_6px_6px_12px_rgba(255,255,255,0.6),inset_-4px_-4px_8px_rgba(0,0,0,0.05)]
```

Input:
```
bg-gradient-to-b from-gray-100 to-gray-200
rounded-2xl
shadow-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.9)]
focus:outline-none
transition-all
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `rounded`, `shadow-none`, `bg-black`, `text-black`, `border-black`

Patterns: `^rounded-(?:none|sm|md)$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-(?:black|gray-900|slate-900)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-gradient-to-b from-pink-300 to-pink-400
  rounded-3xl
  text-white font-bold
  shadow-[8px_8px_16px_rgba(255,182,193,0.5),-8px_-8px_16px_rgba(255,255,255,0.8),inset_4px_4px_8px_rgba(255,255,255,0.4),inset_-4px_-4px_8px_rgba(219,112,147,0.2)]
  hover:shadow-[10px_10px_20px_rgba(255,182,193,0.6),-10px_-10px_20px_rgba(255,255,255,0.9),inset_6px_6px_10px_rgba(255,255,255,0.5),inset_-4px_-4px_8px_rgba(219,112,147,0.2)]
  hover:-translate-y-1
  active:scale-x-105 active:scale-y-90
  active:translate-y-2
  active:shadow-[2px_2px_4px_rgba(255,182,193,0.3),-2px_-2px_4px_rgba(255,255,255,0.5),inset_8px_8px_16px_rgba(219,112,147,0.4),inset_-4px_-4px_8px_rgba(255,255,255,0.2)]
  transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]
">
  Clay Button
</button>
```

**Card**
```html
<div className="
  p-8
  bg-gradient-to-br from-amber-100 to-amber-200
  rounded-[32px]
  shadow-[12px_12px_24px_rgba(0,0,0,0.08),inset_6px_6px_12px_rgba(255,255,255,0.6),inset_-4px_-4px_8px_rgba(0,0,0,0.05)]
  hover:shadow-[16px_16px_32px_rgba(0,0,0,0.1),inset_8px_8px_16px_rgba(255,255,255,0.7),inset_-4px_-4px_8px_rgba(0,0,0,0.05)]
  hover:-translate-y-1
  transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]
">
  <h3 className="text-2xl font-bold text-amber-800 mb-3">
    Clay Card
  </h3>
  <p className="text-amber-700">
    柔软可爱的粘土质感卡片
  </p>
</div>
```


---


### Notion 风格 (Notion Style)

**Slug**: `notion-style`

#### Description
A minimalist and clean document tool style emphasizing content readability and functionality, using subtle borders, gentle hover effects, and clear typographic hierarchy.

#### Design Philosophy
Notion Style is a minimalist design style originating from the Notion app, emphasizing content readability and intuitive functionality. Through subtle visual elements and clear hierarchical structure, it lets users focus on the content itself.

Core principles:
- Content first: Design serves content, never overshadowing it
- Functional clarity: Every element has a clear functional purpose
- Subtle interactions: Hover and click feedback are gentle and natural
- Clear hierarchy: Information levels distinguished through font size and color

#### Do's (必须做)
1. Use Notion's signature beige background #f7f6f3
2. Use subtle borders border-gray-200
3. Use light gray background for hover effects hover:bg-gray-100
4. Maintain clear typographic hierarchy
5. Use system font stack for readability
6. Use clean linear-style icons
7. Cards use group class, hover reveals drag handle from opacity-0 to opacity-100 (Drag Handle Illusion, Notion's signature UX pattern)
8. Hover background only shifts from #f7f6f3 to #efedea (Block Highlighting, extremely low signal-to-noise ratio feedback)
9. Active state only deepens background to #e3e1db, no displacement or scaling allowed (Micro-click, restrained tactile feel for document tools)
10. All transitions duration-150, maintaining the instant responsiveness of an efficiency tool
11. Buttons use transparent background bg-transparent, hover:bg-[#efedea] active:bg-[#e3e1db] (Ultimate Restraint, no float no scale)

#### Don'ts (禁止做)
1. Do NOT use large border radii rounded-2xl or larger
2. Do NOT use gradient backgrounds
3. Do NOT use heavy shadows
4. Do NOT use overly vibrant colors
5. Do NOT over-decorate
6. Do NOT use any translate or scale animations (breaks reading stability of document tools)
7. Do NOT add border changes or shadow jumps on hover (signal-to-noise ratio too high, distracts user focus on content)
8. Do NOT use hover:-translate-y-* float effects on buttons (Notion is a flat document, no floating feel)

#### AI Rules
```
You are a Notion Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using large radii rounded-2xl, rounded-3xl, rounded-full
- Using gradient backgrounds bg-gradient-*
- Using heavy shadows shadow-xl, shadow-2xl
- Using overly vibrant colors
- Excessive decoration and animation

## Must Follow

- Notion beige background bg-[#f7f6f3]
- Subtle borders border border-gray-200
- Small radii rounded-md or rounded-lg
- Gentle hover hover:bg-gray-100
- Clear typographic hierarchy

## Color Palette

Primary:
- Text: text-[#37352f] (Notion dark gray)
- Background: bg-white, bg-[#f7f6f3]
- Border: border-gray-200

Accent colors:
- Blue: text-[#2eaadc], bg-blue-50
- Red: text-[#eb5757], bg-red-50
- Green: text-[#0f7b6c], bg-green-50
- Yellow: text-[#dfab01], bg-yellow-50

## Interactions

- Hover: hover:bg-[#efedea] (Block Highlighting, extremely low signal-to-noise)
- Selected: bg-[#e3e1db] (Micro-click, only deepens background)
- Focus: focus:ring-2 focus:ring-blue-500/30

## Animation & Interaction Rules

- Ultimate Restraint: Strictly prohibit any translate or scale animations; document tools require absolute visual stability.
- Block Highlighting: Hover background shifts from #f7f6f3 to #efedea (about 5% brightness change), transition-colors duration-150, signal-to-noise ratio intentionally kept extremely low.
- Drag Handle Illusion: Cards/list items use group class, left-side drag handle opacity-0 group-hover:opacity-100 transition-opacity duration-150, this is Notion's signature UX pattern.
- Micro-click: Active state only deepens background to #e3e1db, no other visual changes, embodying the restraint of an efficiency tool.

## Self-Check

After generating code, verify:
1. No gradients used
2. Moderate radii (rounded-md or rounded-lg)
3. Gentle shadows (shadow-sm or shadow-md)
4. Overall feel is clean and refreshing
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-150`

**Typography**
- Heading: `font-semibold text-gray-900`
- Body: `text-gray-700`

**Required Classes**

Button:
```
px-3 py-1.5
rounded-md
text-sm font-medium
hover:bg-gray-100
transition-colors duration-150
```

Card:
```
bg-white
border border-gray-200
rounded-lg
shadow-sm
```

Input:
```
bg-white
border border-gray-200
rounded-md
text-gray-900 placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-all
```

**Forbidden**

Classes: `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-2xl`, `bg-gradient-to-r`, `bg-gradient-to-br`

Patterns: `^rounded-(?:2xl|3xl|full)`, `^shadow-(?:2xl|inner)`, `^bg-gradient`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-3 py-1.5
  bg-transparent
  rounded
  text-sm font-medium text-[#37352f]
  hover:bg-[#efedea]
  active:bg-[#e3e1db]
  transition-colors duration-150
  flex items-center gap-2
">
  <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
  </svg>
  New page
</button>
```

**Card**
```html
<div className="
  group p-3 -ml-3
  rounded-md
  hover:bg-[#efedea]
  transition-colors duration-150
  cursor-pointer flex gap-2
">
  {/* Drag handle — revealed on hover (Drag Handle Illusion) */}
  <div className="flex-none pt-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150 select-none">
    <span className="text-gray-400 text-sm cursor-grab">⋮⋮</span>
  </div>
  <div>
    <h3 className="text-lg font-semibold text-[#37352f] mb-1 group-hover:underline decoration-gray-300 underline-offset-4">
      Page Title
    </h3>
    <p className="text-gray-500 text-sm">
      A simple description of the content
    </p>
  </div>
</div>
```


---


### Stripe 风格 (Stripe Style)

**Slug**: `stripe-style`

#### Description
A refined and professional fintech style featuring Stripe purple as the primary color, complemented by gradient grid backgrounds, elegant card shadows, and smooth animations, ideal for payment products and developer tools.

#### Design Philosophy
Stripe Style is a refined design style originating from Stripe, known for its signature purple and professional visual language. Through gradient grid backgrounds, elegant card shadows, and smooth animations, it conveys trust and technical prowess.

Core principles:
- Professional trust: Refined design conveys reliability
- Technical feel: Grid backgrounds and code elements showcase technical capability
- Brand consistency: Stripe purple runs throughout the entire design
- Smooth experience: Subtle animations enhance interactivity

#### Do's (必须做)
1. Use Stripe purple #635bff as the primary color
2. Add gradient grid backgrounds for a technical feel
3. Use refined multi-layer shadows
4. Maintain moderate border radii rounded-lg or rounded-xl
5. Use smooth transition animations
6. Use dark backgrounds for code blocks
7. Fluid SaaS Motion: button hover uses `hover:-translate-y-0.5 transition-all duration-[300ms] ease-out` -- SaaS products feel responsive but never jarring, always smooth and controlled
8. Floating Matrix: card hover lifts with `hover:-translate-y-1 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] transition-all duration-[400ms] ease-out` -- the card floats up as if becoming interactive
9. Liquid Gradient Focus: button uses inset highlight `shadow-[0_2px_5px_rgba(99,91,255,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]` -- simulates light catching the convex surface of a real button
10. Hairline Crispness: active press uses `active:scale-[0.98] active:translate-y-0 active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]` -- button physically depresses on click, inset shadow replaces outer glow

#### Don'ts (禁止做)
1. Do NOT use overly vibrant color schemes
2. Do NOT use excessively large border radii
3. Do NOT use rough shadows
4. Do NOT ignore grid background elements
5. Do NOT use unprofessional fonts
6. Do NOT use `hover:scale-*` (Stripe buttons only float up, never scale -- scaling breaks the precision feel)
7. Do NOT omit inset highlight shadow (Liquid Gradient Focus is the core of Stripe button texture, cannot be omitted)
8. Do NOT use `ease-in-out` or `ease` (Stripe animations are always `ease-out` -- fast departure, gentle landing)
9. Do NOT keep outer shadow in active state (Hairline Crispness requires only inset shadow on active)

#### AI Rules
```
You are a Stripe Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using non-Stripe brand colors as primary
- Using excessively large radii rounded-3xl, rounded-full (except buttons)
- Using rough single-layer shadows
- Ignoring grid background elements
- Using unprofessional color schemes

## Must Follow

- Primary color Stripe purple #635bff
- Dark text #0a2540
- Background color #f6f9fc
- Refined multi-layer shadows
- Moderate radii rounded-lg, rounded-xl
- Smooth transition animations

## Color Palette

Primary:
- Stripe purple: bg-[#635bff], text-[#635bff]
- Dark blue: text-[#0a2540]
- Background: bg-[#f6f9fc]

Accent colors:
- Cyan: #00d4ff
- Light purple: #7a73ff
- Bright cyan: #80e9ff

## Shadows

Card shadow:
shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]

Button shadow:
shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)]

## Grid Background

Use CSS linear gradients to create grid:
background-image: linear-gradient(to right, rgba(99,91,255,0.1) 1px, transparent 1px),
                  linear-gradient(to bottom, rgba(99,91,255,0.1) 1px, transparent 1px);
background-size: 40px 40px;

## Self-Check

After generating code, verify:
1. Stripe purple used as primary color
2. Shadows are refined and multi-layered
3. Grid background elements present
4. Overall feel is professional and trustworthy

## Animation & Interaction Rules

- Fluid SaaS Motion: Button hover uses `hover:-translate-y-0.5 transition-all duration-[300ms] ease-out` -- SaaS feels responsive but never jarring. Never use `ease-in-out` (too slow) or instantaneous cuts.
- Floating Matrix: Card hover lifts with `hover:-translate-y-1 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] transition-all duration-[400ms] ease-out`. The icon area uses `group-hover:scale-110 transition-transform duration-[400ms]` -- the card becomes interactive, the icon celebrates.
- Liquid Gradient Focus: Button uses inset highlight `shadow-[0_2px_5px_rgba(99,91,255,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]` at rest, maintained on hover -- simulates convex glass surface catching light. Never use a flat-color button with no shadow.
- Hairline Crispness: Active press is `active:scale-[0.98] active:translate-y-0 active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]` -- the button physically depresses. The outer glow disappears; only the inset concave shadow remains.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_1px_2px_rgba(0,0,0,0.05)]`
- Medium: `shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]`
- Large: `shadow-[0_4px_8px_rgba(0,0,0,0.06),0_16px_32px_rgba(0,0,0,0.1)]`
- Hover: `hover:shadow-[0_4px_8px_rgba(0,0,0,0.06),0_16px_32px_rgba(0,0,0,0.1)]`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold text-[#0a2540]`
- Body: `text-gray-600`

**Required Classes**

Button:
```
px-6 py-3
bg-[#635bff]
rounded-lg
text-white font-medium
shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)]
hover:-translate-y-0.5
transition-all duration-200
```

Card:
```
bg-white
rounded-xl
shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]
```

Input:
```
bg-white
border border-gray-300
rounded-lg
text-[#0a2540] placeholder-gray-400
shadow-[0_1px_2px_rgba(0,0,0,0.05)]
focus:outline-none focus:ring-2 focus:ring-[#635bff] focus:border-transparent
transition-all
```

**Forbidden**

Classes: `rounded-3xl`, `shadow-inner`, `bg-gradient-to-br from-pink`, `text-pink`

Patterns: `^rounded-3xl`, `^shadow-inner`, `^bg-(?:pink|red|yellow)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-2.5
  bg-[#635bff]
  rounded-lg
  text-white font-medium text-sm
  shadow-[0_2px_5px_rgba(99,91,255,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]
  hover:bg-[#5851ea]
  hover:shadow-[0_4px_10px_rgba(99,91,255,0.5),inset_0_1px_0_rgba(255,255,255,0.2)]
  hover:-translate-y-0.5
  active:scale-[0.98] active:translate-y-0
  active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]
  transition-all duration-[300ms] ease-out
">
  Get Started
</button>
```

**Card**
```html
<div className="group p-6 bg-white rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.06),0_4px_20px_rgba(0,0,0,0.04)] hover:-translate-y-1 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08),0_4px_10px_rgba(0,0,0,0.04)] transition-all duration-[400ms] ease-out cursor-pointer">
  <div className="w-10 h-10 bg-[#635bff]/10 rounded-lg flex items-center justify-center mb-4 transition-transform duration-[400ms] ease-out group-hover:scale-110">
    <svg className="w-5 h-5 text-[#635bff]" viewBox="0 0 20 20" fill="currentColor">
      <path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2H4z"/>
    </svg>
  </div>
  <h3 className="text-lg font-semibold text-[#0a2540] mb-2">
    Payments
  </h3>
  <p className="text-[#425466] text-sm leading-relaxed">
    Accept payments online with a complete platform
  </p>
</div>
```


---


### Apple 风格 (Apple Style)

**Slug**: `apple-style`

#### Description
An ultra-minimalist premium design style with generous whitespace, refined border radii, subtle shadows, and SF Pro-style typography, conveying the quality feel of high-end tech products.

#### Design Philosophy
Apple Style is an ultra-minimalist style derived from Apple's design language, conveying the quality and trust of premium tech products through generous whitespace, refined details, and restrained color usage.

Core principles:
- Ultimate simplicity: Remove all unnecessary elements
- Generous whitespace: Let content breathe, highlight key points
- Refined details: Every pixel is carefully designed
- Restrained colors: Black, white, and gray as primary, blue as accent

#### Do's (必须做)
1. Use generous whitespace to let content breathe
2. Use Apple gray #f5f5f7 as background
3. Use Apple blue #0071e3 as accent color
4. Use refined border radii rounded-xl or rounded-2xl
5. Use subtle shadows
6. Use SF Pro-style fonts (-apple-system)

#### Don'ts (禁止做)
1. Do NOT use too many colors
2. Do NOT use gradient backgrounds
3. Do NOT use heavy shadows
4. Do NOT overcrowd elements
5. Do NOT use flashy decorations

#### AI Rules
```
You are an Apple Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using gradient backgrounds
- Using too many colors (more than 3)
- Using heavy shadows shadow-xl, shadow-2xl
- Overcrowding elements
- Using flashy decorations and animations

## Must Follow

- Generous whitespace
- Apple gray background bg-[#f5f5f7]
- Apple blue accent text-[#0071e3], bg-[#0071e3]
- Refined radii rounded-xl, rounded-2xl, rounded-full
- Subtle shadows shadow-[0_4px_12px_rgba(0,0,0,0.08)]
- SF Pro-style fonts

## Color Palette

Primary:
- Black: text-black, bg-black
- White: text-white, bg-white
- Apple gray: bg-[#f5f5f7]

Accent colors:
- Apple blue: #0071e3
- Apple green: #34c759
- Apple red: #ff3b30

## Typography

- Headings: font-semibold tracking-tight
- Body: font-normal
- Links: text-[#0071e3] hover:underline

## Layout

- Max width: max-w-5xl or max-w-[980px]
- Generous whitespace: py-20, py-24
- Center alignment: text-center, mx-auto

## Animation & Interaction Rules

- Spring Physics: Never use default linear or basic ease. Must use silky deceleration curves like `transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`.
- Haptic Touch: All interactive elements (buttons, cards) must have physical press damping, mandatory `active:scale-[0.98]` or `active:scale-[0.96]`.
- Contextual Depth: On card hover, use `group-hover` to create subtle zoom on inner images or icons (`scale-105`), creating parallax depth.
- Subtle Blurs: Interactions can include smooth transitions of background blur or opacity.

## Self-Check

After generating code, verify:
1. Whitespace is generous enough
2. Colors are restrained (black/white/gray + blue accent)
3. No gradients
4. Overall feel is premium and minimalist
```


#### Design Tokens

**Border**
- Width: `border-0`
- Color: `border-gray-200`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(0,0,0,0.04)]`
- Medium: `shadow-[0_4px_12px_rgba(0,0,0,0.08)]`
- Large: `shadow-[0_8px_24px_rgba(0,0,0,0.12)]`
- Hover: `hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight text-black`
- Body: `text-gray-600`

**Required Classes**

Button:
```
px-6 py-3
bg-[#0071e3]
rounded-full
text-white font-medium
hover:bg-[#0077ed]
transition-colors duration-200
```

Card:
```
bg-white
rounded-2xl
shadow-[0_4px_12px_rgba(0,0,0,0.08)]
```

Input:
```
bg-[#f5f5f7]
rounded-xl
text-black placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-[#0071e3]
transition-all
```

**Forbidden**

Classes: `bg-gradient-to-r`, `bg-gradient-to-br`, `shadow-2xl`, `shadow-inner`, `border-2`, `border-4`

Patterns: `^bg-gradient`, `^shadow-(?:2xl|inner)`, `^border-(?:2|4|8)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#0071e3]
  rounded-full
  text-white font-medium
  shadow-[0_4px_14px_rgba(0,113,227,0.3)]
  hover:shadow-[0_6px_20px_rgba(0,113,227,0.4)]
  hover:-translate-y-0.5
  hover:bg-[#0077ed]
  active:scale-[0.96]
  transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]
">
  Buy
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-white
  rounded-3xl
  shadow-[0_4px_12px_rgba(0,0,0,0.04)]
  hover:shadow-[0_20px_40px_rgba(0,0,0,0.08)]
  hover:-translate-y-1
  active:scale-[0.98]
  transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]
  text-center
  cursor-pointer
  overflow-hidden
">
  <div className="w-48 h-48 mx-auto mb-6 bg-[#f5f5f7] rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]">
    <span className="text-6xl text-gray-300 group-hover:text-gray-400 transition-colors duration-500"></span>
  </div>
  <h3 className="text-2xl font-semibold text-black mb-2 tracking-tight">
    iPhone 15 Pro
  </h3>
  <p className="text-gray-500 mb-4 group-hover:text-gray-700 transition-colors duration-500">
    Titanium. So strong. So light. So Pro.
  </p>
  <p className="text-lg font-medium text-black">
    From $999
  </p>
</div>
```


---


### 像素艺术风 (Pixel Art)

**Slug**: `pixel-art`

#### Description
A retro 8-bit pixel game style with no border radii, pixelated borders, hard-edge shadows, and vivid 8-bit color palettes, ideal for games, retro apps, and indie developer projects.

#### Design Philosophy
Pixel Art is a retro design style originating from early video games, evoking nostalgic feelings for classic games through pixelated visual elements, hard-edge shadows, and vivid 8-bit color palettes.

Core principles:
- Pixel feel: All elements present pixelated sharp edges
- Hard-edge shadows: Pure color offset shadows simulate pixel effects
- 8-bit palette: Classic game console color palettes
- Nostalgic emotion: Evoke fond memories of classic games

#### Do's (必须做)
1. Use no border radii rounded-none
2. Use thick borders border-4
3. Use hard-edge shadows shadow-[4px_4px_0_color]
4. Use 8-bit palette colors
5. Use pixel fonts or monospace fonts
6. Shadow disappears and element displaces on button press
7. Absolute Zero: use `transition-none` throughout -- pixel games run on a state machine, all visual state changes are instantaneous hard cuts
8. Palette Swap: hover directly replaces the primary palette color with another 8-bit color (e.g., `hover:bg-[#29adff]` replacing red with blue), no gradients or opacity fades
9. Pixel Perfect Drop: active state must be `active:translate-x-[4px] active:translate-y-[4px] active:shadow-none` -- displacement amount MUST exactly equal the shadow offset size

#### Don'ts (禁止做)
1. Do NOT use any border radii
2. Do NOT use gradients
3. Do NOT use soft shadows
4. Do NOT use overly complex colors
5. Do NOT use thin borders
6. Do NOT use any transition-* except transition-none (pixel games are state machines, not animation engines)
7. Do NOT use opacity transitions or intermediate states in Palette Swap (color switches must be hard cuts)
8. Do NOT make active displacement smaller than shadow offset (Pixel Perfect Drop requires exact alignment, otherwise pixel feel is broken)

#### AI Rules
```
You are a Pixel Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using any border radii rounded-* (must be rounded-none)
- Using gradients bg-gradient-*
- Using soft shadows shadow-lg, shadow-xl
- Using thin borders border, border-2
- Using non-8-bit palette colors

## Must Follow

- No border radii rounded-none
- Thick borders border-4 border-[#1a1c2c]
- Hard-edge shadows shadow-[4px_4px_0_#1a1c2c]
- 8-bit palette colors
- Uppercase letters uppercase
- Button press effects

## Color Palette (PICO-8)

Primary:
- Dark blue-black: #1a1c2c
- Light gray: #f4f4f4

Accent colors:
- Red: #ff004d
- Green: #00e436
- Blue: #29adff
- Yellow: #ffec27
- Orange: #ffa300
- Pink: #ff77a8
- Purple: #7e2553

## Shadows

Standard shadow: shadow-[4px_4px_0_#1a1c2c]
Hover shadow: shadow-[2px_2px_0_#1a1c2c]
Colored shadow: shadow-[4px_4px_0_#ff004d]

## Button Interaction

Normal: shadow-[4px_4px_0_#1a1c2c]
Hover: translate-x-1 translate-y-1 shadow-[2px_2px_0_#1a1c2c]
Pressed: translate-x-1 translate-y-1 shadow-none

## Self-Check

After generating code, verify:
1. No border radii anywhere
2. Using thick borders border-4
3. Using hard-edge shadows
4. Colors from 8-bit palette
5. Overall feel is retro and pixelated

## Animation & Interaction Rules

- Absolute Zero: Every element must use `transition-none` -- pixel games run on a state machine, not an animation engine. All visual changes are instantaneous hard cuts with no easing.
- Palette Swap: Hover replaces the primary palette color with another 8-bit color directly (e.g., `hover:bg-[#29adff]` replacing red with blue). Never use opacity transitions or intermediate states.
- Pixel Perfect Drop: Active state must be `active:translate-x-[4px] active:translate-y-[4px] active:shadow-none` -- the pixel displacement amount MUST exactly equal the shadow offset. Mismatched values break the illusion.
- Outline Focus: Focus state uses inner color shadow instead of modern ring glow: `focus:shadow-[inset_0_0_0_3px_#29adff]`.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#1a1c2c]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0_#1a1c2c]`
- Medium: `shadow-[4px_4px_0_#1a1c2c]`
- Large: `shadow-[6px_6px_0_#1a1c2c]`
- Hover: `hover:shadow-[2px_2px_0_#1a1c2c]`

**Interaction**
- Hover Translate: `hover:translate-x-1 hover:translate-y-1`
- Transition: `transition-transform duration-100`

**Typography**
- Heading: `font-bold uppercase tracking-wider text-[#1a1c2c]`
- Body: `text-[#1a1c2c]`

**Required Classes**

Button:
```
px-6 py-3
bg-[#ff004d]
border-4 border-[#1a1c2c]
rounded-none
text-white font-bold uppercase
shadow-[4px_4px_0_#1a1c2c]
hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_#1a1c2c]
active:translate-x-1 active:translate-y-1 active:shadow-none
transition-all duration-100
```

Card:
```
bg-white
border-4 border-[#1a1c2c]
rounded-none
shadow-[4px_4px_0_#1a1c2c]
```

Input:
```
bg-white
border-4 border-[#1a1c2c]
rounded-none
text-[#1a1c2c] placeholder-[#8b8680]
focus:outline-none focus:shadow-[inset_0_0_0_2px_#29adff]
transition-all
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`, `bg-gradient-to-br`

Patterns: `^rounded-(?:sm|md|lg|xl|2xl|3xl|full)`, `^shadow-(?:lg|xl|2xl)`, `^bg-gradient`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#ff004d]
  border-[4px] border-[#1a1c2c]
  rounded-none
  text-white font-bold uppercase tracking-widest
  shadow-[4px_4px_0_#1a1c2c]
  hover:bg-[#29adff]
  hover:shadow-[4px_4px_0_#ff004d]
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-none
  transition-none
">
  START
</button>
```

**Card**
```html
<div className="group p-6 bg-white border-[4px] border-[#1a1c2c] rounded-none shadow-[4px_4px_0_#1a1c2c] hover:border-[#ff004d] hover:shadow-[4px_4px_0_#ff004d] transition-none cursor-pointer">
  <h3 className="text-2xl font-bold uppercase text-[#1a1c2c] mb-2 group-hover:text-[#ff004d] transition-none">
    LEVEL 1
  </h3>
  <p className="text-[#5f574f] font-mono group-hover:text-[#1a1c2c] transition-none">
    PRESS START TO ENTER THE PIXEL WORLD.
  </p>
</div>
```


---


### 霓虹复古 (Neon Retro)

**Slug**: `vaporwave`

#### Description
80s-90s retro-futuristic aesthetics with pink-purple gradients, neon colors, and glitch art effects. Includes Vaporwave, Synthwave, and Cyberpunk variants.

#### Design Philosophy
Vaporwave is an internet subculture aesthetic originating from the early 2010s, blending 80s-90s consumerism symbols, Japanese cultural elements, and early internet aesthetics.

Core principles:
- Nostalgia: Parody and homage to 80s-90s commercial aesthetics
- Surrealism: Surreal combinations of Greek sculptures, palm trees, sunsets
- Neon colors: Pink, cyan, and purple gradient combinations
- Glitch aesthetics: VHS glitches, scan lines, chromatic aberration effects

#### Do's (必须做)
1. Use pink-purple-cyan gradients bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500
2. Add neon glow effects shadow-[0_0_20px_rgba(255,113,206,0.5)]
3. Use glitch/scan line effects as decoration
4. Incorporate Japanese text or Greek sculpture elements
5. Use grid line backgrounds for retro feel
6. Use bold or pixel-style fonts
7. Hover introduces psychedelic warp: slight rotation, displacement, and gradient flow
8. Click uses error-popup-style offset displacement, creating old system glitch feedback
9. Neon glow emphasizes pink + cyan dual-color scattering, forming Aesthetic ghosting effect

#### Don'ts (禁止做)
1. Do NOT use monotone gray color schemes
2. Do NOT use overly modern minimalist designs
3. Do NOT omit neon glow effects
4. Do NOT use overly formal fonts
5. Do NOT use only single-color glow, must reflect pink-cyan dual-color glowing ghosting
6. Do NOT make all interactions too fast, hover should retain a floating slow pace

#### AI Rules
```
# Vaporwave / Neon Retro Design System

You are an expert frontend developer specializing in Vaporwave (蒸汽波) aesthetics. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Vaporwave / Neon Retro / Synthwave
- **Category**: Retro, Expressive, High-Contrast
- **Essence**: 80s-90s retro-futurism, consumer nostalgia, digital decay, aesthetic irony
- **Mood**: Dreamy, nostalgic, surreal, melancholic yet vibrant
- **Inspiration**: 80s malls, VHS tapes, early internet, Greek statues, Japanese city pop

---

## Core Visual Principles

### 1. Background Foundation
```
REQUIRED: Deep purple/pink gradient or solid dark colors
- bg-purple-900, bg-pink-900, bg-indigo-900
- bg-gradient-to-b from-purple-900 via-pink-900 to-indigo-900

Add grid overlay for depth:
bg-[linear-gradient(rgba(255,113,206,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,113,206,0.1)_1px,transparent_1px)]
bg-[size:50px_50px]
```

### 2. Neon Glow System (Dual-Color)
```
REQUIRED: Pink + Cyan dual glow (NOT single color)

TEXT GLOW:
style={{ textShadow: '2px 2px 0px rgba(185,103,255,0.5)' }}

ELEMENT GLOW:
shadow-[0_0_20px_rgba(255,113,206,0.5)]  // Pink
shadow-[0_0_20px_rgba(1,205,254,0.5)]    // Cyan
shadow-[4px_4px_0_rgba(1,205,254,0.6)]   // Hard offset shadow

DUAL IRRADIATION (ghosting effect):
shadow-[0_10px_30px_rgba(255,113,206,0.2)]
hover:shadow-[0_0_50px_rgba(1,205,254,0.4)]
```

### 3. Gradient Text
```jsx
<h1 className="text-transparent bg-clip-text 
  bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400">
  VAPORWAVE
</h1>
```

### 4. Border System
```
Asymmetric neon borders:
border-t-2 border-l-2 border-[#ff71ce]/50 
border-b-4 border-r-4 border-[#01cdfe]/50
```

---

## Interaction Specifications

### Hover Effects (Aesthetic Warp)
| Element | Effect | Implementation |
|---------|--------|----------------|
| Buttons | Gradient flow + lift | bg-[length:200%_auto] hover:bg-right hover:-translate-y-1 |
| Cards | Rotate + shadow shift | hover:-translate-y-2 hover:rotate-1 hover:shadow-[0_0_50px_...] |
| Text | Letter spacing expand | group-hover:tracking-[0.4em] |

### Active State (Glitch/Error Snap)
```
active:rotate-0 
active:translate-x-[6px] active:translate-y-[6px] 
active:shadow-none
```
Simulates old system error popup — abrupt, offset displacement.

### Specular Sweep
```jsx
<span className="absolute inset-0 
  bg-gradient-to-r from-transparent via-white/30 to-transparent 
  -translate-x-full 
  group-hover:translate-x-full 
  transition-transform duration-700" />
```

---

## Animation Rules

### Interaction Physics
- **Aesthetic Warp**: Hover introduces slight rotation + displacement + gradient flow. Use `bg-[length:200%_auto] hover:bg-right`.
- **Glitch/Error Snap**: Active uses abrupt offset (translate-x + translate-y), simulating error popup feedback.
- **Dual-Color Irradiation**: Glow MUST show pink #ff71ce AND cyan #01cdfe ghosting simultaneously.
- **Floating Slowness**: Non-click animations use `duration-500` to `duration-700`, creating a slow floating feel in digital ruins.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover lift | 300-500ms | ease-out |
| Gradient flow | 500ms | ease-out |
| Active press | instant | — |
| Grid scale | 700ms | ease-in-out |

---

## Color Palette

### Primary Neon Colors
| Token | Hex | Tailwind | Usage |
|-------|-----|----------|-------|
| Neon Pink | #ff71ce | pink-400 | Primary, headlines |
| Neon Cyan | #01cdfe | cyan-400 | Links, accents |
| Neon Purple | #b967ff | purple-400 | Secondary |
| Neon Green | #05ffa1 | — | Highlights |
| Neon Yellow | #fffb96 | — | Special elements |

### Background & Surface
| Token | Value | Usage |
|-------|-------|-------|
| BG Deep | bg-purple-900 | Main background |
| BG Panel | bg-[#2b0057]/60 | Card backgrounds |
| Text Primary | text-pink-100 | Body text |
| Text Glow | text-[#ff71ce] | Emphasized text |

---

## Typography

| Element | Classes |
|---------|---------|
| Headlines | font-black uppercase tracking-[0.2em] text-transparent bg-clip-text bg-gradient-... |
| Body | font-medium leading-relaxed drop-shadow-[0_0_5px_rgba(255,113,206,0.5)] |
| Labels | font-mono font-bold text-xs uppercase |

---

## Special Elements

### Decorative Motifs
- Japanese text: アエステティック, 新しい, 仮想現実
- Greek statues/busts imagery
- Palm trees, sunset horizons
- VHS scanlines and glitch effects
- Windows 95/98 UI elements
- Perspective grid floors

### Grid Background
```jsx
<div className="absolute inset-0 
  bg-[linear-gradient(rgba(255,113,206,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(1,205,254,0.2)_1px,transparent_1px)] 
  bg-[size:15px_15px] 
  opacity-20 group-hover:opacity-50 group-hover:scale-110 
  transition-all duration-700" 
  style={{ transform: "perspective(200px) rotateX(45deg)" }} />
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| Monotone gray/black-white | Destroys retro vibrancy |
| Modern minimalist design | Contradicts maximalist aesthetic |
| Omit neon glow | Loses vaporwave identity |
| Formal serif fonts | Wrong era, wrong mood |
| Single-color glow | Must have pink+cyan dual irradiation |
| Fast interactions | Use slow, dreamy timing |

---

## Responsive Guidelines

### Glow Scaling
```
Mobile: shadow-[0_0_10px_...]
Desktop (md:): shadow-[0_0_20px_...]
```

### Grid Size
```
Mobile: bg-[size:30px_30px]
Desktop: bg-[size:50px_50px]
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is purple/pink gradient or deep purple solid
- [ ] Neon glows use BOTH pink AND cyan (dual irradiation)
- [ ] Grid line overlay present on major sections
- [ ] Gradient text for major headlines
- [ ] Hover includes rotation/displacement/gradient flow
- [ ] Active uses abrupt offset (glitch snap)
- [ ] Transitions use duration-500+ for floating feel
- [ ] Japanese decorative text where appropriate
- [ ] Asymmetric borders (thicker on bottom-right)
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#ff71ce]/50`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(255,113,206,0.4)] md:shadow-[0_0_12px_rgba(255,113,206,0.4)]`
- Medium: `shadow-[0_0_16px_rgba(255,113,206,0.5)] md:shadow-[0_0_24px_rgba(255,113,206,0.5)]`
- Large: `shadow-[0_0_24px_rgba(255,113,206,0.6)] md:shadow-[0_0_40px_rgba(255,113,206,0.6)]`
- Hover: `hover:shadow-[0_0_32px_rgba(1,205,254,0.7)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-wide`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-xl
shadow-[0_0_16px_rgba(255,113,206,0.5)]
hover:shadow-[0_0_32px_rgba(1,205,254,0.7)]
transition-all duration-300 ease-in-out
font-bold
```

Card:
```
rounded-xl
bg-[#1a0a2e]/80
border border-[#ff71ce]/50
shadow-[0_0_16px_rgba(255,113,206,0.5)]
```

Input:
```
rounded-xl
border border-[#b967ff]/50
bg-[#1a0a2e]/60
text-[#01cdfe]
focus:shadow-[0_0_20px_rgba(1,205,254,0.6)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `border-black`, `border-4`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-black`, `text-gray-900`, `text-gray-800`, `shadow-[2px_2px_0px`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-gray-(?:[1-4])`, `^text-gray-(?:[7-9])`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  relative px-10 py-3
  bg-gradient-to-r from-[#ff71ce] via-[#b967ff] to-[#01cdfe] bg-[length:200%_auto]
  text-white font-black uppercase tracking-[0.3em]
  border-2 border-white/50
  shadow-[4px_4px_0_rgba(1,205,254,0.6)]
  hover:bg-right
  hover:shadow-[8px_8px_0_rgba(255,113,206,0.8),0_0_30px_rgba(185,103,255,0.5)]
  hover:-translate-y-1 hover:-rotate-2
  active:rotate-0 active:translate-x-[6px] active:translate-y-[6px] active:shadow-none
  transition-all duration-300 ease-out
">
  A E S T H E T I C S
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#2b0057]/60 backdrop-blur-xl
  border-t-2 border-l-2 border-[#ff71ce]/50 border-b-4 border-r-4 border-[#01cdfe]/50
  shadow-[0_10px_30px_rgba(255,113,206,0.2)]
  hover:shadow-[0_0_50px_rgba(1,205,254,0.4)]
  hover:-translate-y-2 hover:rotate-1
  transition-all duration-500
  relative overflow-hidden cursor-pointer
">
  <div className="absolute inset-0 bg-[linear-gradient(rgba(255,113,206,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(1,205,254,0.2)_1px,transparent_1px)] bg-[size:15px_15px] opacity-20 group-hover:opacity-50 group-hover:scale-110 transition-all duration-700" style={{ transform: "perspective(200px) rotateX(45deg)" }} />

  <div className="relative z-10">
    <h3 className="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#ff71ce] to-[#01cdfe] mb-3 tracking-[0.2em] group-hover:tracking-[0.4em] transition-all duration-500" style={{ textShadow: "2px 2px 0px rgba(185,103,255,0.5)" }}>
      V I R T U A L
    </h3>
    <div className="inline-block bg-[#01cdfe] text-[#2b0057] px-2 py-1 font-mono font-bold text-xs uppercase mb-4">
      Windows 95.exe
    </div>
    <p className="text-[#ff71ce] font-medium leading-relaxed drop-shadow-[0_0_5px_rgba(255,113,206,0.5)]">
      Welcome to the aesthetic dimension. Where marble statues cry digital tears and the mall music never stops playing.
    </p>
  </div>
</div>
```


---


### 千禧风格 (Y2K)

**Slug**: `y2k`

#### Description
Early-2000s futuristic aesthetic with metallic textures, transparent plastics, bubble elements, silver and rainbow gradients, brimming with optimistic visions of the digital age.

#### Design Philosophy
Y2K is the design aesthetic of the late 1990s to early 2000s, reflecting people's optimistic imagination of the new millennium and the digital future.

Core concepts:
- Futurism: Optimistic visions of the digital age
- Metallic texture: Silver, chrome alloy, reflective materials
- Transparent elements: Clear plastics, bubbles, water-drop effects
- Rainbow gradients: Holographic effects, rainbow reflections

#### Do's (必须做)
1. Use silver/metallic gradients bg-gradient-to-r from-gray-300 via-white to-gray-300
2. Add bubble/sphere decorative elements
3. Use transparent/semi-transparent effects bg-white/30 backdrop-blur
4. Rainbow gradient text effects
5. Rounded futuristic shapes rounded-full
6. Add star and sparkle decorations

#### Don'ts (禁止做)
1. Do not use dull, muted color schemes
2. Do not use overly flat design
3. Do not omit gloss/reflection effects
4. Do not use rough textures

#### AI Rules
```
You are a Y2K design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Dull, muted color schemes
- Overly flat design
- Omitting gloss and reflection effects
- Sharp right angles

## Must Follow

- Metallic gradients bg-gradient-to-b from-gray-200 via-white to-gray-300
- Rounded shapes rounded-full, rounded-3xl
- Transparent effects bg-white/60 backdrop-blur
- Rainbow gradients from-pink-400 via-purple-400 to-cyan-400
- Bubble/sphere decorative elements

## Color Palette

Primary:
- Silver: #c0c0c0, from-gray-300
- Pink: #ff69b4, from-pink-400
- Cyan: #00ffff, from-cyan-400
- Purple: #ff00ff, from-purple-400

## Decorative Elements

- Star/sparkle decorations
- Bubble spheres
- Rainbow gradients
- Transparent plastic textures

## Animation & Interaction Rules

- Chrome Liquid: Interactions must convey a "liquid metal" or "plastic jelly" texture. On hover, metallic gradients enhance through highlight inner shadows (e.g., hover:shadow-[inset_0_4px_8px_rgba(255,255,255,1)]), simulating a 3D reflective sheen sliding across a metallic surface.
- Bubble Pop: Y2K is full of optimism and toy-like feel. Must use elastic custom easing ease-[cubic-bezier(0.34,1.56,0.64,1)], exaggerated scaling on hover (hover:scale-105 or hover:-translate-y-1), and jelly-like squish on click (active:scale-90).
- CD Glare: Shadow colors must use high-saturation cyan (#00ffff) and pink (#ff69b4) mixed glow, simulating CD disc laser reflections. No black shadows allowed.
- Lava Lamp Effect: Circular bubble decorations inside cards produce asymmetric movement or stretching on hover, like liquid droplets rising in a lava lamp.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(255,105,180,0.3)] md:shadow-[0_4px_12px_rgba(255,105,180,0.3)]`
- Medium: `shadow-[0_4px_16px_rgba(255,105,180,0.4)] md:shadow-[0_6px_24px_rgba(255,105,180,0.4)]`
- Large: `shadow-[0_8px_32px_rgba(255,105,180,0.5)] md:shadow-[0_12px_48px_rgba(255,105,180,0.5)]`
- Hover: `hover:shadow-[0_8px_32px_rgba(192,192,192,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-bold tracking-wide`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-2xl
border-2 border-[#c0c0c0]
shadow-[0_4px_16px_rgba(255,105,180,0.4)]
hover:scale-105
transition-all duration-300 ease-out
font-bold
```

Card:
```
rounded-2xl
border-2 border-[#c0c0c0]
shadow-[0_4px_16px_rgba(255,105,180,0.4)]
bg-white/80
```

Input:
```
rounded-2xl
border-2 border-[#c0c0c0]
bg-white
focus:shadow-[0_4px_20px_rgba(255,105,180,0.5)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `border-black`, `border-4`, `bg-[#1a1a2e]`, `bg-black`, `text-black`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `font-mono`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-amber-`, `^bg-stone-`, `^bg-yellow-(?:[7-9])`, `^text-amber-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `chromeButton`, `bubbleFrame`, `holographicBadge`


#### Component Examples

**Button**
```html
<button className="px-10 py-4 bg-gradient-to-b from-gray-100 via-white to-gray-300 rounded-full text-[#ff1493] font-black uppercase tracking-widest border-2 border-white shadow-[0_5px_15px_rgba(0,255,255,0.4),inset_0_2px_4px_rgba(255,255,255,1)] hover:shadow-[0_10px_25px_rgba(255,20,147,0.5),inset_0_4px_8px_rgba(255,255,255,1)] hover:-translate-y-1 hover:scale-105 active:scale-90 active:shadow-[0_2px_5px_rgba(0,255,255,0.4)] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]">
  Cyber Love
</button>
```

**Card**
```html
<div className="group p-8 bg-gradient-to-br from-white/70 to-[#ff69b4]/20 backdrop-blur-xl rounded-[2.5rem] border-2 border-white shadow-[0_10px_30px_rgba(0,255,255,0.2)] hover:shadow-[0_15px_40px_rgba(255,105,180,0.3)] hover:-translate-y-2 transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] relative overflow-hidden">
  <div className="absolute -top-4 -right-4 w-16 h-16 rounded-full bg-gradient-to-tr from-[#00ffff] to-[#ff69b4] blur-md opacity-60 group-hover:scale-150 group-hover:translate-x-2 transition-transform duration-500 ease-out" />
  <div className="absolute -bottom-6 -left-6 w-24 h-24 rounded-full bg-gradient-to-tr from-[#b142fe] to-[#00ffff] blur-lg opacity-40 group-hover:scale-125 group-hover:-translate-y-4 transition-transform duration-500 ease-out" />
  <div className="relative z-10">
    <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center mb-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] group-hover:rotate-12 transition-transform">
      <div className="w-6 h-6 rounded-full bg-gradient-to-r from-[#ff69b4] to-[#00ffff]" />
    </div>
    <h3 className="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-[#ff69b4] via-[#b142fe] to-[#00ffff] mb-3 group-hover:tracking-wider transition-all duration-300">
      FUTURE IS NOW
    </h3>
    <p className="text-gray-700 font-bold leading-relaxed">
      Welcome to the new millennium. Glossy buttons, iridescent glows, absolute digital optimism.
    </p>
  </div>
</div>
```


---


### 孟菲斯风格 (Memphis)

**Slug**: `memphis`

#### Description
An 80s Italian design movement featuring bold geometric shapes, vivid contrasting colors, irregular forms, and playful patterns that break traditional design rules.

#### Design Philosophy
Memphis is a design movement founded in the 1980s by Italian designer Ettore Sottsass, known for breaking traditions and embracing chaos and playfulness.

Core principles:
- Rebellion against tradition: Breaking the seriousness of functionalist design
- Bold contrasting colors: Vivid, high-contrast color combinations
- Geometric shapes: Free combinations of circles, triangles, and wavy lines
- Playfulness: Design should be fun and delightful

#### Do's (必须做)
1. Use vivid contrasting color combinations
2. Add geometric shape decorations (circles, triangles, waves)
3. Use thick borders border-4
4. Irregular layouts and shapes
5. Add dot, stripe, and wave patterns
6. Use bold sans-serif fonts
7. Cards use group class, inner geometric decorations move in different directions on hover (Playful Chaos, playground liveliness)
8. Button active:translate-x-[6px] active:translate-y-[6px] active:shadow-none (Toy Button Physics, toy key tactile feel)
9. Titles and text instantly switch to high-saturation contrasting colors on group-hover (Pop Swap, pop color inversion), using transition-colors duration-150
10. All animations use duration-150 ease-out, maintaining pop toy crispness
11. Button hover changes color and increases shadow: hover:bg-pink-400 hover:shadow-[8px_8px_0px_#000] (contrasting pop reinforcement)

#### Don'ts (禁止做)
1. Do NOT use monotone, low-saturation color schemes
2. Do NOT use overly symmetrical and orderly layouts
3. Do NOT use thin borders
4. Do NOT omit geometric decorative elements
5. Do NOT keep geometric decorations static on hover (loses the soul of Memphis playground)
6. Do NOT keep shadow on button active state (pressing down should fully flatten, active:shadow-none is mandatory)
7. Do NOT use displacement to reduce shadow on button hover (should increase shadow + change color, not move toward shadow direction)

#### AI Rules
```
You are a Memphis design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using monotone, low-saturation color schemes
- Using overly symmetrical and orderly layouts
- Using thin borders border
- Omitting geometric decorative elements

## Must Follow

- Vivid contrasting colors bg-yellow-400, bg-pink-300, bg-cyan-400
- Thick borders border-4 border-black
- Hard-edge shadows shadow-[6px_6px_0px_#000]
- Geometric decorations (circles, triangles, squares)
- Bold fonts font-black, font-bold

## Color Palette

Primary:
- Red: #ff6b6b, bg-red-500
- Yellow: #feca57, bg-yellow-400
- Cyan: #48dbfb, bg-cyan-400
- Pink: #ff9ff3, bg-pink-300
- Green: #1dd1a1, bg-green-400

## Decorative Elements

- Circles rounded-full
- Triangles (using border)
- Squares rotate-45
- Wave, dot, and stripe patterns

## Animation & Interaction Rules

- Playful Chaos: Card inner decorative geometries use group class, each moving independently in different directions (circle: group-hover:translate-x-4 group-hover:-translate-y-2; triangle: group-hover:-translate-x-2 group-hover:rotate-12), uniform direction is forbidden.
- Toy Button Physics: Button active state active:translate-x-[6px] active:translate-y-[6px] active:shadow-none, simulating toy key fully flattening.
- Pop Swap: Hover instantly switches to high-saturation contrasting color (hover:bg-pink-400), transition-colors duration-150, gradient transitions are forbidden.
- Snappy Motion: All animations duration-150 ease-out, maintaining pop toy crispness.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] md:shadow-[5px_5px_0px_0px_rgba(0,0,0,1)]`
- Medium: `shadow-[5px_5px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]`
- Large: `shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] md:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]`
- Hover: `hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`

**Interaction**
- Hover Translate: `hover:translate-x-[3px] hover:translate-y-[3px]`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-black tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
border-4
border-black
shadow-[5px_5px_0px_0px_rgba(0,0,0,1)]
hover:translate-x-[3px] hover:translate-y-[3px]
hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]
transition-all duration-200
font-black
```

Card:
```
border-4
border-black
shadow-[5px_5px_0px_0px_rgba(0,0,0,1)]
bg-[#fef9ef]
```

Input:
```
border-4
border-black
font-sans
focus:shadow-[5px_5px_0px_0px_rgba(0,0,0,1)]
focus:outline-none
```

**Forbidden**

Classes: `border`, `border-[0.5px]`, `border-gray-200`, `border-gray-300`, `border-slate-200`, `bg-gray-50`, `bg-gray-100`, `bg-slate-50`, `text-gray-400`, `text-gray-500`

Patterns: `^border-(?:gray|slate)-`, `^shadow-(?!\[|none)`, `^bg-(?:gray|slate)-(?:[1-3])`, `^text-(?:gray|slate)-(?:[3-5])`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `squiggleDivider`, `shapeCard`, `patternBadge`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-4
  bg-yellow-400
  border-4 border-black
  text-black font-black uppercase
  shadow-[6px_6px_0px_#000]
  hover:bg-pink-400
  hover:shadow-[8px_8px_0px_#000]
  hover:-translate-y-1 hover:-rotate-2
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none
  transition-all duration-150 ease-out
">
  <span className="absolute -top-3 -right-3 w-6 h-6 bg-red-500 rounded-full border-2 border-black group-hover:scale-125 transition-transform duration-150" />
  <span className="absolute -bottom-2 -left-2 w-4 h-4 bg-cyan-400 border-2 border-black group-hover:-translate-x-2 group-hover:rotate-45 transition-all duration-150" />
  Click Me!
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-pink-300
  border-4 border-black
  shadow-[8px_8px_0px_#000]
  hover:shadow-[12px_12px_0px_#000]
  hover:-translate-y-2 hover:-rotate-1
  transition-all duration-200 ease-out
  cursor-pointer
">
  {/* Decorative shapes — each moves in a different direction (Playful Chaos) */}
  <div className="absolute -top-4 -left-4 w-10 h-10 bg-yellow-400 rounded-full border-2 border-black group-hover:translate-x-4 group-hover:-translate-y-2 transition-transform duration-200 ease-out" />
  <div className="absolute -bottom-3 -right-3 w-0 h-0 border-l-[20px] border-l-transparent border-b-[30px] border-b-cyan-400 border-r-[20px] border-r-transparent group-hover:-translate-x-2 group-hover:translate-y-2 group-hover:rotate-12 transition-all duration-200 ease-out" />

  <h3 className="text-2xl font-black text-black mb-3 group-hover:text-white transition-colors duration-150">
    MEMPHIS
  </h3>
  <p className="text-black/80 font-medium group-hover:bg-yellow-400 group-hover:text-black transition-colors duration-150 px-1">
    Bold, colorful, and fun!
  </p>
</div>
```


---


### 装饰艺术风格 (Art Deco)

**Slug**: `art-deco`

#### Description
A luxurious design style from the 1920s-30s featuring geometric symmetrical patterns, gold decorations, elegant lines, and premium textures, conveying sophistication and prosperity.

#### Design Philosophy
Art Deco is a design style popular in the 1920s-30s, blending modernist geometric forms with the luxury of traditional craftsmanship.

Core principles:
- Geometric symmetry: Radial lines, repeating geometric patterns
- Luxury: High-end color schemes of gold, black, and deep blue
- Refined craftsmanship: Delicate lines and decorative details
- Modern meets traditional: Machine age aesthetics combined with classical elegance

#### Do's (必须做)
1. Use high-contrast gold and dark color schemes
2. Add geometric symmetrical patterns and radial lines
3. Use elegant serif fonts
4. Add gold borders and decorative lines
5. Maintain symmetrical and balanced layouts
6. Use delicate line decorations

#### Don'ts (禁止做)
1. Do NOT use overly vibrant modern color schemes
2. Do NOT use asymmetrical chaotic layouts
3. Do NOT use overly modern sans-serif fonts
4. Do NOT omit decorative elements

#### AI Rules
```
You are an Art Deco design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using overly vibrant modern color schemes
- Using asymmetrical chaotic layouts
- Using rounded modern fonts
- Omitting decorative borders and lines

## Must Follow

- Gold color scheme text-yellow-500, border-yellow-500
- Dark backgrounds bg-slate-900, bg-slate-800
- Serif fonts font-serif
- Wide letter spacing tracking-wider, tracking-[0.3em]
- Symmetrical layouts and center alignment
- Geometric decorative elements

## Color Palette

Primary:
- Gold: #d4af37, text-yellow-500, border-yellow-500
- Deep blue: #1a1a2e, bg-slate-900
- Navy: #2d2d44, bg-slate-800
- Cream: #f5f5dc

## Decorative Elements

- Corner decorative borders
- Radial lines
- Gradient dividers
- Geometric patterns

## Animation & Interaction Rules

- Elegant & Slow: Animations must appear noble and unhurried. Use longer durations like `duration-500` or `duration-700`, never with a hasty bouncy feel.
- Golden Shimmer: On hover, simulate gold material reflection and luster through background gradient position movement (e.g., `bg-[length:200%_auto] hover:bg-right`).
- Symmetrical Expansion: During interaction, maintain symmetry. For example, on card hover, corner decorative frames can slightly expand outward (via `group-hover:translate`).
- Subtle Lift: Use very slight float and gold halo expansion effects.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#d4af37]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_2px_4px_rgba(212,175,55,0.15)]`
- Medium: `shadow-[0_4px_12px_rgba(212,175,55,0.2)]`
- Large: `shadow-[0_8px_24px_rgba(212,175,55,0.25)]`
- Hover: `hover:shadow-[0_6px_20px_rgba(212,175,55,0.3)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-400 ease-in-out`

**Typography**
- Heading: `font-serif font-bold tracking-widest uppercase`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-none
border-2 border-[#d4af37]
font-serif font-bold tracking-widest uppercase
transition-all duration-400 ease-in-out
```

Card:
```
rounded-none
border-2 border-[#d4af37]
bg-[#1a1a2e]
shadow-[0_4px_12px_rgba(212,175,55,0.2)]
```

Input:
```
rounded-none
border-2 border-[#d4af37]
bg-[#0f0f1a]
text-[#f0e6d0]
font-serif
focus:shadow-[0_4px_16px_rgba(212,175,55,0.25)]
focus:outline-none
```

**Forbidden**

Classes: `font-sans`, `font-mono`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-[#ff71ce]`, `bg-[#01cdfe]`, `bg-[#ff69b4]`, `bg-[#00ff00]`

Patterns: `^font-(?:sans|mono)$`, `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^bg-(?:pink|cyan|lime|green)-`, `^text-(?:pink|cyan|lime|green)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `ornateFrame`, `decoSeparator`, `goldAccentBadge`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-gradient-to-r from-yellow-700 via-yellow-400 to-yellow-700
  bg-[length:200%_auto]
  text-slate-900 font-serif font-bold uppercase tracking-[0.3em]
  border border-yellow-300
  shadow-[0_0_20px_rgba(212,175,55,0.2)]
  hover:shadow-[0_0_30px_rgba(212,175,55,0.6)]
  hover:bg-right
  hover:-translate-y-0.5
  active:translate-y-0
  active:shadow-[0_0_10px_rgba(212,175,55,0.4)]
  transition-all duration-700 ease-out
">
  Discover
</button>
```

**Card**
```html
<div className="
  group relative p-10
  bg-gradient-to-b from-slate-900 to-slate-800
  border border-yellow-600/30
  hover:border-yellow-500/80
  transition-colors duration-700
  overflow-hidden
">
  {/* Corner decorations */}
  <div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-yellow-600/50 group-hover:border-yellow-400 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-500" />
  <div className="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-yellow-600/50 group-hover:border-yellow-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-500" />
  <div className="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-yellow-600/50 group-hover:border-yellow-400 group-hover:-translate-x-1 group-hover:translate-y-1 transition-all duration-500" />
  <div className="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-yellow-600/50 group-hover:border-yellow-400 group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-500" />

  <div className="relative z-10 flex flex-col items-center">
    <h3 className="text-3xl font-serif text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 via-yellow-300 to-yellow-600 bg-[length:200%_auto] group-hover:bg-right transition-all duration-1000 mb-6 tracking-[0.2em] text-center">
      ELEGANCE
    </h3>
    <div className="w-12 h-[1px] bg-yellow-500/50 group-hover:w-24 transition-all duration-700 mb-6" />
    <p className="text-slate-400 text-center font-serif group-hover:text-slate-300 transition-colors duration-500">
      Timeless sophistication and golden era luxury.
    </p>
  </div>
</div>
```


---


### 包豪斯风格 (Bauhaus)

**Slug**: `bauhaus`

#### Description
The design philosophy of the German Bauhaus school, emphasizing functionalism, geometric forms, and primary color usage -- a modernist classic where form follows function.

#### Design Philosophy
Bauhaus is a design school founded in Germany in 1919, whose core principle "form follows function" profoundly influenced modern design.

Core principles:
- Functionalism: Design serves function, removing excess decoration
- Geometric forms: Pure use of circles, squares, and triangles
- Primary colors: Red, yellow, blue primaries + black and white
- Unity: The combination of art and craft
- Mechanical precision: Interactions operate like precision instruments, short and powerful

#### Do's (必须做)
1. Use primary colors (red, yellow, blue) + black and white
2. Apply basic geometric shapes (circle, square, triangle)
3. Maintain clean functional design
4. Use sans-serif fonts
5. Emphasize grid and alignment
6. Remove unnecessary decoration
7. Use very short duration-150 or duration-200
8. Color interactions are hard switches between primaries, no opacity gradients
9. Use pseudo-elements for geometric color block slide-in/overlay animations
10. Geometric decorative elements scale or rotate on hover

#### Don'ts (禁止做)
1. Do NOT use complex gradients
2. Do NOT use decorative elements
3. Do NOT use serif fonts
4. Do NOT use complex non-primary color schemes
5. Do NOT use soft slow duration-500+ transitions
6. Do NOT use ease-in-out (use ease-out)
7. Do NOT use border radii (rounded-lg etc.), only rounded-full for circles

#### AI Rules
```
You are a Bauhaus design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using complex gradient effects
- Using decorative elements
- Using serif fonts
- Using complex non-primary color schemes
- Using soft slow ease-in-out or duration-500+
- Using border radii (rounded-lg, rounded-xl), only rounded-full for pure circles

## Must Follow

- Primary color scheme bg-red-600, bg-yellow-400, bg-blue-600
- Black and white base bg-black, bg-white, text-black
- Thick borders border-4 border-black
- Sans-serif fonts font-bold, font-black
- Uppercase letters uppercase
- Geometric shape decorations

## Animation & Interaction Rules

- Structural Shifts: Animations reveal "structure", using sharp displacement or large solid color overlays.
- Mechanical Precision: Transition times are short and powerful duration-150 or duration-200, using ease-out.
- Primary Color Swaps: Interactions flip between red(#ff0000), yellow(#ffcc00), blue(#0000ff), black, and white in high-contrast color inversions.
- Geometric Reveals: Use pseudo-elements (e.g., absolute inset-0 bg-yellow-400) that slide in like a rail from -translate-x-full to translate-x-0 on hover, covering the original color block.
- Geometric Animation: Geometric decorative elements scale-125 or rotate-45 on hover, expressing mechanical operation feel.

## Color Palette

Only use:
- Red: #ff0000, bg-red-600
- Yellow: #ffcc00, bg-yellow-400
- Blue: #0000ff, bg-blue-600
- Black: #000000, bg-black
- White: #ffffff, bg-white

## Geometric Elements

- Circle rounded-full
- Square (no border radii)
- Triangle (using border)
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-opacity duration-200`

**Typography**
- Heading: `font-sans font-bold uppercase tracking-widest`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-none
border-2 border-black
font-sans font-bold uppercase
transition-opacity duration-200
```

Card:
```
rounded-none
border-2 border-black
bg-white
```

Input:
```
rounded-none
border-2 border-black
font-sans
focus:outline-none
```

**Forbidden**

Classes: `font-serif`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`

Patterns: `^font-serif`, `^rounded-(?!none)`, `^shadow-(?!none)`, `^bg-gradient-`, `^border-(?:dashed|dotted)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `geometricDecorator`, `gridModule`, `functionBadge`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-4
  bg-red-600 text-white
  font-bold uppercase tracking-wider
  border-4 border-black
  overflow-hidden
  hover:text-black
  active:translate-y-1
  transition-all duration-150
">
  <span className="relative z-10">Action</span>
  <div className="absolute inset-0 bg-yellow-400 -translate-x-full group-hover:translate-x-0 transition-transform duration-200 ease-out" />
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-white
  border-4 border-black
  hover:-translate-y-2
  hover:shadow-[8px_8px_0px_rgba(0,0,255,1)]
  transition-all duration-200 ease-out
">
  <div className="absolute -top-6 -left-6 w-12 h-12 bg-yellow-400 rounded-full border-4 border-black group-hover:scale-125 transition-transform duration-200" />
  <div className="absolute -bottom-4 -right-4 w-8 h-8 bg-blue-600 border-4 border-black group-hover:rotate-45 transition-transform duration-200" />
  <h3 className="text-2xl font-black text-black uppercase tracking-wider mb-4 group-hover:text-red-600 transition-colors duration-150">
    Form
  </h3>
  <p className="text-black font-bold">
    Follows function
  </p>
</div>
```


---


### 拟物设计 (Skeuomorphism)

**Slug**: `skeuomorphism`

#### Description
A digital design style that simulates real-world objects through textures, lighting, and materials to mimic physical items, bringing familiarity and intuitive experiences.

#### Design Philosophy
Skeuomorphism is a design approach that simulates the appearance and behavior of real-world objects, widely used in early iOS and digital products.

Core principles:
- Realistic simulation: Interface elements mimic the appearance and feel of real objects
- Material textures: Real material textures like leather, wood, and metal
- Light and shadow depth: Creating dimensionality through highlights and shadows
- Familiar intuition: Leveraging users' real-world knowledge to reduce learning costs

#### Do's (必须做)
1. Use real material textures (leather, wood, metal)
2. Add realistic light and shadow effects
3. Simulate physical button press feedback
4. Use gradients to create dimensionality
5. Add delicate edge highlights
6. Simulate the form and proportions of real objects

#### Don'ts (禁止做)
1. Do NOT use flat solid color blocks
2. Do NOT omit shadows and highlights
3. Do NOT use overly simplified icons
4. Do NOT ignore material and texture details

#### AI Rules
```
You are a Skeuomorphism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using flat solid color blocks
- Omitting shadow and highlight effects
- Using overly simplified icons
- Ignoring material and texture details

## Must Follow

- Gradient backgrounds bg-gradient-to-b from-gray-100 to-gray-300
- Complex shadows shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.8)]
- Border layers border border-gray-400
- Moderate radii rounded-lg
- Press feedback active:translate-y-[1px]

## Color Palette

- Use natural material tones
- Leather brown: #8b7355
- Wood beige: #d4c4a8
- Metal silver: #c0c0c0
- Paper white: #f5f5dc

## Light & Shadow Principles

- Top highlight (inset 0 1px 0 rgba(255,255,255,0.8))
- Bottom dark edge (inset 0 -1px 0 rgba(0,0,0,0.1))
- Outer drop shadow (0 4px 8px rgba(0,0,0,0.3))

## Animation & Interaction Rules

- Tactile Resistance: Active state uses short press and tighter outer shadow, simulating key damping, no bouncy scaling.
- Fixed Illuminant: Top highlight and bottom dark edge remain stable in hover and active, ensuring light source always comes from above.
- Texture Shimmer: Material layer allows slight background-position shift, expressing light changes on brushed metal or leather texture.
- Embossed Focus: Input focus prioritizes deepening inset shadow rather than strong outer glow outline.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#a89880]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]`
- Medium: `shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]`
- Large: `shadow-[0_10px_20px_rgba(0,0,0,0.19),0_6px_6px_rgba(0,0,0,0.23)]`
- Hover: `hover:shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]`

**Interaction**
- Hover Translate: `hover:-translate-y-px`
- Transition: `transition-all duration-200 ease-out`

**Typography**
- Heading: `font-sans font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
border border-[#a89880]
shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
hover:-translate-y-px
transition-all duration-200 ease-out
font-bold
```

Card:
```
rounded-lg
border border-[#a89880]
shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
bg-gradient-to-b from-[#e8dfd1] to-[#d4c4a8]
```

Input:
```
rounded-lg
border border-[#a89880]
bg-[#f5efe6]
font-sans
focus:shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-black`, `border-black`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `rounded-none`, `font-black`

Patterns: `^shadow-\[\d+px_\d+px_0px`, `^rounded-none$`, `^bg-(?:white|black)$`, `^border-(?:black|4)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300
  bg-[length:100%_180%] bg-[position:0_0]
  border border-gray-400
  rounded-lg
  text-gray-700 font-semibold
  shadow-[0_4px_6px_rgba(0,0,0,0.32),inset_0_1px_0_rgba(255,255,255,0.95),inset_0_-1px_0_rgba(0,0,0,0.14)]
  hover:bg-[position:0_20%]
  hover:shadow-[0_5px_8px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.95),inset_0_-1px_0_rgba(0,0,0,0.14)]
  active:translate-y-[2px]
  active:shadow-[0_1px_2px_rgba(0,0,0,0.45),inset_0_2px_5px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.8)]
  transition-all duration-75 ease-linear
">
  Mechanical Switch
</button>
```

**Card**
```html
<div className="
  group
  p-6
  bg-gradient-to-b from-amber-50 to-amber-100
  border border-amber-300
  rounded-xl
  shadow-[0_8px_16px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.7),inset_0_-1px_0_rgba(0,0,0,0.12)]
  hover:shadow-[0_10px_20px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-1px_0_rgba(0,0,0,0.12)]
  relative overflow-hidden
  transition-shadow duration-200
">
  {/* Leather texture overlay */}
  <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[radial-gradient(#3f2f1f_0.7px,transparent_0.7px)] bg-[size:5px_5px] bg-[position:0_0] group-hover:bg-[position:2px_2px] group-hover:opacity-[0.05] transition-all duration-200" />
  <h3 className="text-xl font-bold text-amber-900 mb-2 [text-shadow:0_1px_0_rgba(255,255,255,0.8)]">
    Stitched Leather
  </h3>
  <p className="text-amber-800 [text-shadow:0_1px_0_rgba(255,255,255,0.75)]">
    Rich material depth with stable highlight and tactile resistance.
  </p>
</div>
```


---


### 瑞士国际风格 (Swiss International)

**Slug**: `swiss-style`

#### Description
A rationalist design style originating from Switzerland, emphasizing grid systems, sans-serif typography, clear hierarchy, and objective information delivery -- a cornerstone of modern graphic design.

#### Design Philosophy
Swiss International Style is a design movement developed in Switzerland in the 1950s, emphasizing clear, objective, and rational visual communication.

Core principles:
- Grid system: Strict mathematical grids controlling layout
- Sans-serif typography: Clear and readable fonts like Helvetica
- Negative space: Generous whitespace enhancing readability
- Objective communication: Design serves information, not decoration

#### Do's (必须做)
1. Use strict grid systems
2. Choose Helvetica or similar sans-serif fonts
3. Maintain generous negative space
4. Use black and white as primary colors
5. Left-align text, avoid centering
6. Use clean geometric shapes
7. Rational Restraint: only color and border-color change on interaction -- zero translate, scale, or shadow added. The grid must not be disturbed
8. Guide Line Extension: left border changes from gray to red `hover:border-[#ff0000]` and background shifts to `hover:bg-[#f0f0f0]` -- the structure becomes activated, not decorated
9. Hierarchy Focus: category label turns red `group-hover:text-[#ff0000]` on hover -- the taxonomic label is highlighted, reinforcing information hierarchy
10. Clean Cut Transitions: use `duration-150 ease-out` -- Swiss style is precise and efficient, not slow nor instantaneous

#### Don'ts (禁止做)
1. Do NOT use decorative elements
2. Do NOT use serif fonts for body text
3. Do NOT over-decorate or use gradients
4. Do NOT break the grid system
5. Do NOT use any `translate`, `scale`, or `shadow` changes (Rational Restraint -- the grid must not be disturbed)
6. Do NOT introduce decorations beyond color changes on hover (only color and border-color changes allowed, no shadows or transforms)
7. Do NOT use `duration-300` or longer (Swiss Style is precise and efficient, `duration-150 ease-out` is the upper limit)
8. Do NOT omit arrow icons on buttons (Swiss Style buttons must include directionality, `->` is part of the typography)

#### AI Rules
```
You are a Swiss International Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using decorative elements
- Using serif fonts
- Over-decorating or gradient effects
- Breaking the grid system

## Must Follow

- 12-column grid system grid-cols-12
- Sans-serif fonts font-sans
- Generous whitespace p-8, gap-8
- Black and white primary bg-black, text-white, bg-white, text-black
- Red accent bg-red-600, text-red-600
- Uppercase labels uppercase tracking-[0.2em]
- Left-aligned text

## Color Palette

Only use:
- Black: #000000
- White: #ffffff
- Red: #ff0000 (accent)
- Blue: #0057b8 (optional accent)

## Typography

- Headings: Extra-large size, bold, tight line height
- Labels: Small, uppercase, wide letter spacing
- Body: Moderate size, generous line height

## Animation & Interaction Rules

- Rational Restraint: Only color and border-color change on hover -- zero `translate`, `scale`, or new `shadow`. The grid is a rational system; its geometry must not be disturbed by interaction. Forbidden: `hover:-translate-y-*`, `hover:scale-*`, `hover:shadow-*`.
- Guide Line Extension: The left border activates from `border-[#cccccc]` to `hover:border-[#ff0000]` and background shifts to `hover:bg-[#f0f0f0]` -- the structural grid line becomes a red typographic accent, making the module feel "selected" on the layout.
- Hierarchy Focus: The category/label element turns `group-hover:text-[#ff0000] transition-colors duration-150 ease-out` -- the taxonomic hierarchy is highlighted, reinforcing Swiss style's belief that information structure is the highest design value.
- Clean Cut Transitions: Use `duration-150 ease-out` for color changes. Button arrow icon uses `group-hover:translate-x-2 transition-transform duration-150 ease-out` -- the arrow is the only permitted movement, indicating directionality as a typographic element.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-opacity duration-150`

**Typography**
- Heading: `font-sans font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-none
font-sans font-bold
transition-opacity duration-150
```

Card:
```
rounded-none
border border-black
bg-white
```

Input:
```
rounded-none
border border-black
font-sans
focus:outline-none
```

**Forbidden**

Classes: `font-serif`, `font-mono`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow`, `shadow-md`

Patterns: `^font-(?:serif|mono)$`, `^rounded-(?!none)`, `^shadow-(?!none)`, `^bg-gradient-`, `^italic$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group
  flex items-center gap-3
  px-6 py-3
  bg-black
  text-white text-sm font-medium uppercase tracking-[0.2em]
  hover:bg-[#ff0000]
  transition-colors duration-150 ease-out
">
  Action
  <svg className="w-4 h-4 transition-transform duration-150 ease-out group-hover:translate-x-2" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M3 8h10M9 4l4 4-4 4"/>
  </svg>
</button>
```

**Card**
```html
<div className="group p-8 bg-white border-l-[4px] border-[#cccccc] hover:border-[#ff0000] hover:bg-[#f0f0f0] transition-all duration-150 ease-out cursor-pointer">
  <p className="text-xs font-medium uppercase tracking-[0.3em] text-gray-400 group-hover:text-[#ff0000] transition-colors duration-150 ease-out mb-2">
    Category
  </p>
  <h3 className="text-2xl font-bold text-black mb-4">
    Helvetica Neue
  </h3>
  <p className="text-gray-700 leading-relaxed">
    Clean, objective, rational design principles.
  </p>
</div>
```


---


### 吉卜力风格 (Ghibli Style)

**Slug**: `ghibli-style`

#### Description
A design style inspired by Studio Ghibli animations, featuring warm soft tones, hand-drawn textures, natural elements, and a dreamy atmosphere that conveys healing and poetry.

#### Design Philosophy
Ghibli Style is influenced by Japan's Studio Ghibli animations, known for its warm, healing, and poetic visual language.

Core principles:
- Hand-drawn texture: Preserving the warmth and imperfection of hand-crafted work
- Natural themes: Clouds, forests, skies, and other natural elements
- Soft tones: Warm earth tones and sky colors
- Dreamy atmosphere: Creating serene and healing visual experiences

#### Do's (必须做)
1. Use warm soft tones
2. Add hand-drawn style illustrations or borders
3. Incorporate natural elements (clouds, trees, flowers)
4. Use rounded soft shapes
5. Add subtle texture effects
6. Create dreamy gradient backgrounds
7. Keep interaction animations breezy (duration-500 to 700, slight floating and small-angle rotation)

#### Don'ts (禁止做)
1. Do NOT use sharp hard edges
2. Do NOT use high-contrast glaring color schemes
3. Do NOT use cold tech-feel elements
4. Do NOT use overly complex animations
5. Do NOT use fast hard cuts and abrupt high-frequency animations

#### AI Rules
```
You are a Ghibli Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using sharp straight edges
- Using high-contrast glaring color schemes
- Using cold tech-feel elements
- Overly complex animations

## Must Follow

- Soft tones from-[#7cb9a8], bg-[#f4e4bc]
- Rounded shapes rounded-full, rounded-3xl, rounded-2xl
- Gentle gradients bg-gradient-to-b, bg-gradient-to-br
- Soft shadows shadow-[0_8px_30px_rgba(0,0,0,0.08)]
- Natural element decorations

## Color Palette

Primary:
- Sage green: #7cb9a8
- Cream: #f4e4bc
- Coral orange: #e8a87c
- Sky blue: #85cdca
- Rose pink: #c38d94
- Dark brown: #5a4a3a (text)

## Decorative Elements

- Cloud shapes
- Soft circles
- Natural patterns
- Gradient backgrounds

## Animation & Interaction Rules

- Gentle Breeze: Hover animations should be gentle and restrained, using tiny floating and low-angle rotation (within about 1deg) to simulate natural wind.
- Watercolor Glow: Shadows should use soft diffusion of the element's own color (e.g., sage green series), avoiding heavy black shadows that break the watercolor texture.
- Soft Cushion: Click feedback uses gentle press (e.g., `active:scale-[0.98]`), avoiding mechanical rapid contraction.
- Magic Longing: Interaction rhythm recommends `duration-500` to `duration-700`, paired with `ease-in-out` to maintain fairy-tale composure.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#7cb9a8]/40`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(124,185,168,0.15)]`
- Medium: `shadow-[0_4px_16px_rgba(124,185,168,0.2)]`
- Large: `shadow-[0_8px_32px_rgba(124,185,168,0.25)]`
- Hover: `hover:shadow-[0_8px_24px_rgba(124,185,168,0.3)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-sans font-semibold tracking-normal`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-2xl
shadow-[0_4px_16px_rgba(124,185,168,0.2)]
hover:scale-[1.02]
transition-all duration-300 ease-out
font-semibold
```

Card:
```
rounded-2xl
border border-[#7cb9a8]/40
shadow-[0_4px_16px_rgba(124,185,168,0.2)]
bg-[#f4e4bc]
```

Input:
```
rounded-2xl
border border-[#7cb9a8]/40
bg-[#faf5eb]
text-[#3a3226]
focus:shadow-[0_4px_16px_rgba(124,185,168,0.25)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `border-black`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `bg-[#ff006e]`, `bg-[#ff71ce]`, `bg-[#01cdfe]`, `bg-[#00ff00]`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-(?:black|\[#(?:ff006e|ff71ce|01cdfe|00ff00)\])`, `^border-(?:black|4)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `forestPanel`, `sootSpriteBadge`, `windAlert`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-gradient-to-b from-[#85cdca] to-[#7cb9a8]
  text-white font-medium
  rounded-full
  border-2 border-[#5a9a8a]/25
  shadow-[0_8px_20px_rgba(124,185,168,0.3)]
  hover:shadow-[0_12px_30px_rgba(124,185,168,0.45)]
  hover:-translate-y-1 hover:scale-[1.01] hover:rotate-[0.8deg]
  active:scale-[0.98] active:rotate-0 active:translate-y-0
  transition-all duration-500 ease-in-out
">
  Begin Journey
</button>
```

**Card**
```html
<div className="group p-8
  bg-gradient-to-br from-[#f4e4bc]/90 to-[#e8d5a3]/90
  rounded-3xl
  border border-[#d4c49a]/45
  shadow-[0_8px_30px_rgba(90,74,58,0.06)]
  hover:shadow-[0_16px_40px_rgba(124,185,168,0.18)]
  hover:-translate-y-1.5 hover:-rotate-[0.8deg] hover:scale-[1.01]
  transition-all duration-700 ease-in-out
  backdrop-blur-sm
">
  <div className="w-16 h-16 bg-gradient-to-br from-[#85cdca] to-[#7cb9a8] rounded-full flex items-center justify-center mb-6 shadow-inner group-hover:scale-105 group-hover:rotate-6 transition-all duration-500 ease-in-out">
    {/* Cloud icon */}
    <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>
    </svg>
  </div>
  <h3 className="text-2xl font-semibold text-[#5a4a3a] mb-2 group-hover:text-[#7cb9a8] transition-colors duration-500">
    Sky Garden
  </h3>
  <p className="text-[#7a6a5a] leading-relaxed group-hover:text-[#5a4a3a] transition-colors duration-500">
    Where dreams float among the clouds, carried by the gentle wind of summer.
  </p>
</div>
```


---


### 材料设计 (Material Design)

**Slug**: `material-design`

#### Description
Google's design system based on the metaphor of paper and ink, emphasizing hierarchy, motion, bold colors, and responsive interactions -- the standard for modern mobile design.

#### Design Philosophy
Material Design is Google's cross-platform design language, introduced in 2014 and still evolving. Its founding insight was deceptively simple: treat the interface as a physical material -- paper with real thickness, resting on a stage with real light.

That metaphor drives every rule in the system. Surfaces have elevation, elevation casts shadows, and shadows communicate hierarchy. A dialog floats above a card; a card floats above the page. Users never need to learn a legend to know what sits on top of what.

Core principles:
- Material metaphor: Surfaces are sheets of paper. They have edges, they can be stacked, folded and moved, but they never pass through one another
- Elevation and light: A single light source from above casts shadows whose size encodes height -- a resting card sits at elevation 1, a floating action button at elevation 6
- Bold color: A primary and a secondary color carry the entire identity, applied flat and full-bleed rather than as outlines or effects
- Meaningful motion: Animation exists to explain spatial relationships -- where a surface came from, where it went -- never as decoration
- Responsive grid: An 8dp baseline grid and a 12/8/4-column responsive layout keep rhythm consistent from watch to desktop

In practice the language shows up as rectangular surfaces with subtle rounded corners (4dp in the classic spec, 16-28dp in Material 3), filled buttons that use color rather than borders, and a type scale built on Roboto -- or the platform's own face under Material You. The signature move is restraint: one accent, one elevation language, and no shadow that does not correspond to a real stack.

Suitable for: Android and cross-platform products, admin dashboards and settings screens, design systems that must scale to hundreds of contributors, and any interface where clarity of hierarchy matters more than novelty.

#### Do's (必须做)
1. Use elevation shadow system to express hierarchy
2. Apply ripple effects as click feedback
3. Use bold vivid colors
4. Maintain 8dp spacing grid
5. Use Roboto font
6. Add meaningful micro-animations
7. Precise dual-layer elevation shadows: hover from dp2 to dp8, shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)] to shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)] (Elevation Physics)
8. Use Material standard easing curve ease-[cubic-bezier(0.4,0,0.2,1)] duration-[250ms] (Deceleration Curve)
9. Button active:scale-[0.98] (Pseudo-Ripple, finger press ripple prelude)
10. Card hover:-translate-y-1 paired with elevation shadow upgrade (Z-axis physical lift feel)

#### Don'ts (禁止做)
1. Do NOT use inconsistent shadow depths
2. Do NOT use overly soft color schemes
3. Do NOT omit interaction feedback
4. Do NOT break the 8dp grid system
5. Do NOT omit active:scale-[0.98] on buttons (Material Pseudo-Ripple is core to tactile authenticity)
6. Do NOT use non-Material standard easing curves (must use cubic-bezier(0.4,0,0.2,1))
7. Do NOT keep card shadows unchanged on hover (elevation change is a Material physics rule, cannot be omitted)

#### AI Rules
```
You are a Material Design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using inconsistent shadow depths
- Using overly soft muted color schemes
- Omitting interaction feedback effects
- Breaking the 8dp grid system

## Must Follow

- Elevation shadows shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
- Primary color bg-[#6200ee] text-white
- Accent color bg-[#03dac6]
- Rounded cards rounded-xl
- Uppercase button text uppercase tracking-wider

## Color Palette

- Primary: #6200ee (purple)
- Primary variant: #3700b3
- Secondary: #03dac6 (cyan)
- Background: #fafafa
- Surface: #ffffff
- Error: #b00020

## Spacing

- Based on 8dp grid
- p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px)

## Animation & Interaction Rules

- Elevation Physics: Hover lifts from low to high elevation shadow, optionally paired with slight -translate-y-1 to enhance Z-axis feel.
- Pseudo-Ripple: Active state must include at least active:scale-[0.98] or brightness press feedback, simulating touch ripple prelude.
- Deceleration Curve: Interaction transitions prefer ease-[cubic-bezier(0.4,0,0.2,1)], duration 200-300ms.
- Input Float: On input focus, label must smoothly float up and shrink, with border highlight transitioning in sync.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e0e0e0]`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]`
- Medium: `shadow-[0_3px_6px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.12)]`
- Large: `shadow-[0_10px_20px_rgba(0,0,0,0.15),0_3px_6px_rgba(0,0,0,0.1)]`
- Hover: `hover:shadow-[0_14px_28px_rgba(0,0,0,0.18),0_5px_10px_rgba(0,0,0,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-sans font-medium tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-md
shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]
hover:shadow-[0_14px_28px_rgba(0,0,0,0.18),0_5px_10px_rgba(0,0,0,0.12)]
transition-all duration-200 ease-in-out
font-medium
```

Card:
```
rounded-md
shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]
bg-white
```

Input:
```
rounded-md
border border-[#e0e0e0]
bg-white
font-sans
focus:border-[#6200ee]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `border-black`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `font-black`, `font-serif`, `bg-gradient-to-r`, `bg-gradient-to-l`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^font-(?:black|serif)$`, `^border-(?:black|4)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  relative px-6 py-2.5
  bg-[#6200ee] text-white font-medium uppercase tracking-[0.08em] text-sm
  rounded
  shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
  hover:shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]
  hover:bg-[#7528e5]
  active:shadow-[0_5px_5px_-3px_rgba(0,0,0,0.2),0_8px_10px_1px_rgba(0,0,0,0.14),0_3px_14px_2px_rgba(0,0,0,0.12)]
  active:scale-[0.98]
  transition-all duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]
  overflow-hidden
">
  <span className="relative z-10">Submit</span>
</button>
```

**Card**
```html
<div className="
  bg-white rounded-xl
  shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
  hover:shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]
  hover:-translate-y-1
  transition-all duration-[300ms] ease-[cubic-bezier(0.4,0,0.2,1)]
  overflow-hidden cursor-pointer
">
  <div className="h-48 bg-gradient-to-br from-[#6200ee] to-[#b388ff]" />
  <div className="p-4">
    <h3 className="text-xl font-medium text-black/85 mb-2 leading-tight">
      Material Surface
    </h3>
    <p className="text-black/60 text-sm leading-relaxed">
      Elements express their material nature through elevation and shadow.
    </p>
  </div>
</div>
```


---


### 流利设计 (Fluent Design)

**Slug**: `fluent-design`

#### Description
Microsoft's design system integrating five key elements -- light, depth, motion, material, and scale -- to create natural and intuitive cross-platform experiences.

#### Design Philosophy
Fluent Design System is a design language launched by Microsoft in 2017, aimed at creating consistent experiences across devices.

Core five elements:
- Light: Using light effects to indicate focus and interaction
- Depth: Creating hierarchy and spatial awareness
- Motion: Natural and fluid transition animations
- Material: Semi-transparent materials like acrylic
- Scale: Adapting to devices of different sizes

#### Do's (必须做)
1. Use acrylic (Acrylic) semi-transparent effect bg-white/70 backdrop-blur-xl
2. Add Reveal highlight border effect (hover border-white/60)
3. Use Microsoft's signature blue bg-[#0078d4]
4. Maintain clean modern layouts
5. Use Z-axis depth: hover:-translate-y-0.5 paired with shadow level elevation
6. Use Segoe UI font style
7. Button active:scale-[0.97] tactile press confirmation
8. All interactive elements focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2
9. Card hover:-translate-y-1 + shadow expansion (acrylic material floating)
10. Icon container hover with blue fill + group-hover:scale-105 micro-interaction

#### Don'ts (禁止做)
1. Do NOT overuse acrylic effects
2. Do NOT use clashing color schemes
3. Do NOT ignore focus states
4. Do NOT use heavy shadows (Fluent shadows are soft and layered)
5. Do NOT omit active:scale-[0.97] on buttons (no tactile confirmation)
6. Do NOT omit focus:ring-offset-2 from focus:ring
7. Do NOT exceed duration-200 for animations (Fluent is fluid and crisp, not slow and drifting)

#### AI Rules
```
You are a Fluent Design System frontend development expert. All generated code must strictly follow Microsoft's Fluent Design principles.

## Absolutely Forbidden

- Buttons without active:scale-[0.97] (no tactile press confirmation)
- focus:ring without focus:ring-offset-2 (ring merges with background, fails WCAG)
- Animation duration above 200ms (Fluent is fluid, not slow)
- Flat shadows without layering (Fluent shadows are always multi-layer)
- Cards without hover Z-axis lift (hover:-translate-y-1)
- Overcrowded acrylic effects (use selectively)
- Harsh solid borders (borders should be white/20 to white/50 on glass)

## Must Follow

- Microsoft Blue: bg-[#0078d4] for all primary actions
- Acrylic: bg-white/70 backdrop-blur-xl for cards and panels
- Rounded: rounded-sm for buttons, rounded-lg for cards
- Shadow layering: shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)] at rest
- Focus ring: focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2 on ALL focusable elements
- All buttons: hover:-translate-y-0.5, active:scale-[0.97], active:translate-y-0

## Animation & Interaction Rules

- Acrylic Depth Lift: Cards hover with hover:-translate-y-1 plus shadow expansion (shadow doubles). The transition is transition-all duration-200 ease-out. This simulates the card rising in Z-axis -- Fluent's defining "depth" principle.
- Reveal Brightening: On hover, card background brightens (bg-white/70 to bg-white/85) and border brightens (border-white/30 to border-white/50). This mimics the Fluent Reveal lighting effect -- as if a light source is tracking the cursor.
- Icon Scale: Icon containers use group class. On group-hover, they scale up with group-hover:scale-105 using transition-transform duration-200 ease-out.
- Button Float + Press: Buttons rise hover:-translate-y-0.5 and shadow intensifies. On active:scale-[0.97] active:translate-y-0 active:shadow-none -- compressed back to surface. The combination creates a physical button feel.
- Press Scale Precision: Fluent uses active:scale-[0.97] (not 0.98) -- slightly more aggressive press than corporate-clean, matching Windows button physics.
- Snappy Easing: duration-150 ease-out for buttons and controls. duration-200 ease-out for cards. Never exceed 200ms.

## Color Palette

- Primary Blue: #0078d4 (buttons, links, focus rings)
- Dark Blue: #106ebe (hover state)
- Deeper Blue: #005a9e (active state)
- Accent Yellow: #ffb900
- Accent Red: #e81123
- Accent Green: #00cc6a
- Text: gray-900 (headings), gray-700 (body), gray-500 (secondary)

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.97] active:translate-y-0
2. All focusable elements have focus:ring-2 focus:ring-offset-2
3. Cards have hover:-translate-y-1 + shadow expansion
4. Cards use group class; icon containers have group-hover:scale-105
5. No duration above 200ms
6. Acrylic used selectively, not on everything
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e1e1e1]`
- Radius: `rounded-md md:rounded-lg`

**Shadow**
- Small: `shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]`
- Medium: `shadow-[0_3.2px_7.2px_rgba(0,0,0,0.13),0_0.6px_1.8px_rgba(0,0,0,0.1)]`
- Large: `shadow-[0_6.4px_14.4px_rgba(0,0,0,0.13),0_1.2px_3.6px_rgba(0,0,0,0.1)]`
- Hover: `hover:shadow-[0_6.4px_14.4px_rgba(0,0,0,0.18),0_1.2px_3.6px_rgba(0,0,0,0.14)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-150 ease-out`

**Typography**
- Heading: `font-sans font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-md
shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]
transition-all duration-150 ease-out
font-semibold
```

Card:
```
rounded-md md:rounded-lg
border border-[#e1e1e1]
shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]
bg-white
```

Input:
```
rounded-md
border border-[#8a8886]
bg-white
font-sans
focus:border-[#0078d4]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `border-black`, `border-2`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `font-black`, `font-serif`, `bg-black`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^border-(?:black|2|4)$`, `^font-(?:black|serif)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary Button */}
<button className="
  px-6 py-2.5
  bg-[#0078d4] text-white font-medium
  rounded-sm
  border border-[#0078d4]
  shadow-[0_2px_4px_rgba(0,120,212,0.3)]
  hover:bg-[#106ebe] hover:-translate-y-0.5
  hover:shadow-[0_4px_8px_rgba(0,120,212,0.4)]
  focus:outline-none focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2
  active:scale-[0.97] active:bg-[#005a9e] active:translate-y-0 active:shadow-none
  transition-all duration-150 ease-out
">
  Primary Button
</button>

{/* Secondary Button */}
<button className="
  px-6 py-2.5
  bg-white/70 backdrop-blur-sm text-gray-800 font-medium
  rounded-sm
  border border-gray-200
  shadow-[0_1px_3px_rgba(0,0,0,0.06)]
  hover:bg-white/90 hover:border-gray-300 hover:-translate-y-0.5
  hover:shadow-[0_3px_6px_rgba(0,0,0,0.1)]
  focus:outline-none focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2
  active:scale-[0.97] active:bg-white/60 active:translate-y-0 active:shadow-none
  transition-all duration-150 ease-out
">
  Secondary
</button>

{/* Ghost Button */}
<button className="
  px-6 py-2.5
  text-[#0078d4] font-medium
  rounded-sm
  hover:bg-[#0078d4]/10 hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2
  active:scale-[0.97] active:bg-[#0078d4]/20 active:translate-y-0
  transition-all duration-150 ease-out
">
  Cancel
</button>
```

**Card**
```html
<div className="
  group
  p-6
  bg-white/70 backdrop-blur-xl
  rounded-lg
  border border-white/30
  shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]
  hover:bg-white/85 hover:border-white/50 hover:-translate-y-1
  hover:shadow-[0_4px_8px_rgba(0,0,0,0.06),0_16px_32px_rgba(0,0,0,0.14)]
  transition-all duration-200 ease-out
">
  <div className="flex items-center gap-4 mb-4">
    {/* Icon container — scale on group-hover */}
    <div className="
      w-12 h-12
      bg-[#0078d4] rounded-lg
      flex items-center justify-center
      group-hover:scale-105
      transition-transform duration-200 ease-out
    ">
      <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div>
      <h3 className="text-lg font-semibold text-gray-900">Fluent Card</h3>
      <p className="text-sm text-gray-500 group-hover:text-gray-600 transition-colors duration-200">Acrylic material</p>
    </div>
  </div>
  <p className="text-gray-700 leading-relaxed">
    Light, depth, motion, material, and scale working together seamlessly.
  </p>
</div>
```


---


### 漫画风格 (Comic Style)

**Slug**: `comic-style`

#### Description
A design style inspired by comic books and manga, featuring heavy ink-line borders, halftone fills, speech bubbles, action lines, and panel layouts, full of narrative and visual impact.

#### Design Philosophy
Comic Style is a design style derived from comic books and manga, transforming interfaces into vivid comic panels through heavy ink-line borders, halftone dots, speech bubbles, and dynamic lines.

Core principles:
- Ink feel: Using thick black borders to outline element contours
- Halftone effect: Using halftone dots to simulate comic print texture
- Dynamism: Expressing energy and movement through speed lines and action lines
- Narrative: Each section is like a comic frame, telling a story
- Emotional burst: Interactions should be as exaggerated and powerful as POW! BAM!

#### Do's (必须做)
1. Use thick black borders border-4 border-black to simulate ink lines
2. Use hard-edge shadows shadow-[4px_4px_0_#000] to simulate print offset
3. Use speech bubble shapes to display information
4. Use halftone dots as background texture
5. Text uses uppercase bold uppercase font-black
6. Buttons use exaggerated hover effects
7. Hover with scale-110 + rotate(-3deg), like comic sound effect bubbles popping out
8. group-hover reveals hidden NEW! label from scale-0 to scale-100
9. Active instantly zeroes out shadow, creating ink pressure feel
10. Hover reveals background halftone dots (radial-gradient) (group-hover:opacity-20)

#### Don'ts (禁止做)
1. Do NOT use soft shadows shadow-lg, shadow-xl, shadow-md
2. Do NOT use thin borders border, border-2
3. Do NOT use gradients as main visual effect
4. Do NOT use overly formal typography
5. Do NOT lack dynamism and energy
6. Do NOT use rounded cards (rounded-lg, rounded-xl), except speech bubbles
7. Do NOT use transition durations exceeding duration-100

#### AI Rules
```
You are a Comic Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using soft shadows shadow-lg, shadow-xl, shadow-md
- Using thin borders border, border-2
- Using gradients as main background bg-gradient-*
- Using rounded cards rounded-lg, rounded-xl (except speech bubbles)
- Using semi-transparent/blur effects backdrop-blur
- Using transition durations exceeding duration-100

## Must Follow

- Thick black borders border-4 border-black
- Hard-edge shadows shadow-[4px_4px_0_#000] or shadow-[6px_6px_0_#000]
- No border radii rounded-none (except speech bubbles)
- Uppercase bold text uppercase font-black
- High-contrast solid colors
- Button press effects (displacement + shadow disappears)

## Animation & Interaction Rules

- Pop-Art Explosion: Hover makes elements burst out exaggeratedly (hover:scale-110 hover:-rotate-3), like comic sound effect bubbles POW! BAM! exploding. Color inversion (e.g., hover:bg-[#ffcc00] hover:text-black) enhances drama.
- Halftone Reveal: Buttons/cards have hidden halftone dot backgrounds (radial-gradient), revealed via group-hover:opacity-10 (note: must use group-hover not hover, as the layer has pointer-events-none).
- Heavy Ink: On click (active), hard shadow instantly zeroes (active:shadow-none), paired with active:translate-x-2 active:translate-y-2, creating strong ink pressure feel.
- Badge Pop: Card group-hover reveals hidden NEW! label from scale-0 instantly to scale-100 (transition-transform duration-100).
- Shadow Amplification: Hover expands hard shadow from 8px to 16px, paired with -translate-y-2, enhancing comic "page flip" physical feel.

## Color Palette

Primary:
- Black: #1a1a1a (ink lines)
- White: #ffffff (panel background)

Accent colors:
- Red: #ff3333 (action, CTA)
- Yellow: #ffcc00 (labels, highlights)
- Blue: #3366ff (info, links)
- Green: #33cc33 (success)

## Special Effects

Halftone dots: background-image: radial-gradient(circle, #000 1px, transparent 1px) + bg-[size:4px_4px]
Speech bubbles: border-4 border-black rounded-3xl + triangle tail pseudo-element
Action lines: repeating-linear-gradient
Text effects: [text-shadow:3px_3px_0_#ff3333,-3px_-3px_0_#3366ff]

## Self-Check

After generating code, verify:
1. All elements have thick black borders border-4
2. Using hard-edge shadows not soft shadows
3. Text is uppercase bold
4. Button hover has scale-110 + rotate(-3deg) burst feel
5. Button active has shadow-none instant zeroing
6. Cards have group-hover triggered hidden elements
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#1a1a1a]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[3px_3px_0px_0px_rgba(26,26,26,1)] md:shadow-[4px_4px_0px_0px_rgba(26,26,26,1)]`
- Medium: `shadow-[4px_4px_0px_0px_rgba(26,26,26,1)] md:shadow-[6px_6px_0px_0px_rgba(26,26,26,1)]`
- Large: `shadow-[6px_6px_0px_0px_rgba(26,26,26,1)] md:shadow-[10px_10px_0px_0px_rgba(26,26,26,1)]`
- Hover: `hover:shadow-[2px_2px_0px_0px_rgba(26,26,26,1)]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-black uppercase tracking-wide`
- Body: `font-sans font-bold`

**Required Classes**

Button:
```
rounded-lg
border-4 border-[#1a1a1a]
shadow-[4px_4px_0px_0px_rgba(26,26,26,1)]
hover:translate-x-[2px] hover:translate-y-[2px]
hover:shadow-[2px_2px_0px_0px_rgba(26,26,26,1)]
transition-all duration-150
font-black uppercase
```

Card:
```
rounded-lg
border-4 border-[#1a1a1a]
shadow-[4px_4px_0px_0px_rgba(26,26,26,1)]
bg-[#fffef0]
```

Input:
```
rounded-lg
border-4 border-[#1a1a1a]
font-bold
focus:shadow-[4px_4px_0px_0px_rgba(26,26,26,1)]
focus:outline-none
```

**Forbidden**

Classes: `border`, `border-[0.5px]`, `border-gray-200`, `border-gray-300`, `border-slate-200`, `shadow-sm`, `shadow`, `shadow-md`, `text-gray-400`, `text-gray-500`

Patterns: `^border-(?:gray|slate)-`, `^shadow-(?:sm|md|lg|xl)$`, `^text-(?:gray|slate)-(?:[3-5])`, `^bg-(?:gray|slate)-(?:[1-3])`, `^font-(?:light|thin|normal)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `speechBubble`, `actionPanel`, `halftoneOverlay`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-3
  bg-[#ff3333]
  border-4 border-black
  rounded-none
  text-white font-black text-xl uppercase tracking-wider
  shadow-[6px_6px_0_#000]
  hover:scale-110 hover:-rotate-3
  hover:bg-[#ffcc00] hover:text-black
  hover:shadow-[10px_10px_0_#000]
  active:scale-95 active:rotate-2
  active:translate-x-2 active:translate-y-2
  active:shadow-none
  transition-all duration-100
  overflow-hidden cursor-crosshair
">
  <div className="absolute inset-0 bg-[radial-gradient(#000_20%,transparent_20%)] bg-[size:4px_4px] opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity duration-100" />
  <span className="relative z-10 block">CLICK!</span>
</button>
```

**Card**
```html
<div className="
  group relative p-6
  bg-white
  border-4 border-black
  rounded-none
  shadow-[8px_8px_0_#000]
  hover:-translate-y-2 hover:-rotate-1
  hover:shadow-[16px_16px_0_#000]
  transition-all duration-100 ease-out
">
  <div className="absolute -top-4 -right-4 bg-[#ffcc00] border-[3px] border-black px-3 py-1 font-black text-sm transform rotate-6 scale-0 group-hover:scale-100 transition-transform duration-100 ease-out">
    NEW!
  </div>
  <h3 className="text-2xl font-black uppercase mb-3 border-b-4 border-black pb-2 group-hover:text-[#ff3333] transition-colors duration-100">
    Episode 1
  </h3>
  <p className="font-bold leading-tight">
    In a world where ordinary UI elements become extraordinary...
  </p>
</div>
```


---


### 铅笔手绘风 (Sketch Style)

**Slug**: `sketch-style`

#### Description
A design style simulating pencil hand-drawing, with irregular line borders, paper texture backgrounds, handwritten font feel, sketch shadows, and doodle decorations, conveying a warm and approachable handcrafted texture.

#### Design Philosophy
Sketch Style is a design style simulating hand-drawn pencil sketches, injecting warm handcrafted texture into digital interfaces through irregular lines, paper textures, and handwritten-feel elements.

Core principles:
- Handcrafted feel: Lines and shapes don't pursue perfect alignment, preserving the irregularity of hand-drawing
- Paper texture: Warm beige backgrounds simulating sketchbook paper
- Pencil lines: Borders use uneven hand-drawn style lines
- Sketch shadows: Using cross-hatching to simulate shadow effects

#### Do's (必须做)
1. Use paper-colored background bg-[#f5f0e8]
2. Use irregular style borders border-2 border-dashed or wavy
3. Use handwritten-style or serif fonts
4. Use cross-hatching effects for shadows instead of solid colors
5. Keep elements slightly tilted rotate-[-1deg] for hand-drawn feel
6. Use pencil gray #2c2c2c as primary color
7. Hover can simulate pencil shading: quickly transition from transparent to pencil gray background with inverted white text
8. Title and link emphasis lines use dashed/wavy hand-drawn underlines instead of perfect straight lines
9. Active state enhances press feel: reduce shadow and add slight tilt jitter

#### Don'ts (禁止做)
1. Do NOT use perfect straight lines and rounded corners
2. Do NOT use pure white backgrounds (should use paper color)
3. Do NOT use gradient effects
4. Do NOT use glass blur effects
5. Do NOT use overly saturated colors
6. Do NOT use long smooth animations (hand-drawn feedback should be short and direct)
7. Do NOT use overly regular hover changes (need to preserve rough brush stroke feel)

#### AI Rules
```
You are a Sketch Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using perfect straight-line borders border-solid (prefer border-dashed)
- Using pure white backgrounds bg-white
- Using gradients bg-gradient-*
- Using glass blur backdrop-blur
- Using perfect rounded corners rounded-xl, rounded-2xl
- Using overly saturated colors

## Must Follow

- Paper-colored background bg-[#f5f0e8]
- Dashed or irregular borders border-2 border-dashed border-[#2c2c2c]
- Serif italic fonts font-serif italic
- Slight tilt rotate-[-0.5deg] or rotate-[0.5deg]
- Pencil gray primary color #2c2c2c
- Hand-drawn feel shadows shadow-[3px_3px_0_rgba(44,44,44,0.15)]

## Color Palette

Primary:
- Pencil gray: #2c2c2c
- Paper beige: #f5f0e8

Accent colors (low saturation):
- Red: #e74c3c
- Blue: #3498db
- Green: #27ae60
- Yellow: #f39c12

## Special Effects

Paper texture: Using SVG texture backgrounds
Cross-hatching shadows: Line-style semi-transparent shadows
Hand-drawn annotations: Dashed circles, wavy underlines
Irregular arrangement: Elements slightly tilted

## Self-Check

After generating code, verify:
1. Using paper-colored background not pure white
2. Borders are dashed or irregular style
3. Text uses serif italic
4. Elements have slight tilt
5. Overall feel is like a hand-drawn sketchbook

## Animation & Interaction Rules

- Pencil Shading: Hover can quickly shade line elements to pencil gray with inverted white text, simulating pencil smudging.
- Stroke Jitter: Interactions allow slight rotation and displacement jitter, preserving hand-drawn brush stroke instability.
- Scribble Reveal: Text emphasis prioritizes dashed/wavy underlines or hand-drawn trajectory styles.
- Paper Press: Active state should reduce shadow and enhance tilt, expressing pen-tip paper-pressing damping feel.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#2c2c2c]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[1px_1px_0px_rgba(44,44,44,0.3)]`
- Medium: `shadow-[2px_2px_0px_rgba(44,44,44,0.3)]`
- Large: `shadow-[3px_3px_0px_rgba(44,44,44,0.3)]`
- Hover: `hover:shadow-[2px_2px_0px_rgba(44,44,44,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-opacity duration-200`

**Typography**
- Heading: `font-sans font-semibold tracking-normal`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-sm
border-2 border-dashed border-[#2c2c2c]
transition-opacity duration-200
font-semibold
```

Card:
```
rounded-sm
border-2 border-dashed border-[#2c2c2c]
bg-[#f5f0e8]
shadow-[2px_2px_0px_rgba(44,44,44,0.3)]
```

Input:
```
rounded-sm
border-2 border-dashed border-[#2c2c2c]
bg-[#faf5ed]
font-sans
focus:shadow-[2px_2px_0px_rgba(44,44,44,0.4)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-[#ff71ce]`, `bg-[#01cdfe]`, `bg-[#ff006e]`

Patterns: `^rounded-(?:xl|2xl|3xl|full)$`, `^shadow-(?:lg|xl|2xl)$`, `^bg-(?:\[#ff|\[#01cd|\[#00ff)`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-transparent
  text-[#2c2c2c] font-serif italic font-bold tracking-widest
  border-2 border-dashed border-[#2c2c2c]
  rounded-sm
  shadow-[4px_4px_0_rgba(44,44,44,0.15)]
  hover:bg-[#2c2c2c] hover:text-[#f5f0e8]
  hover:shadow-[6px_6px_0_rgba(44,44,44,0.25)]
  hover:-translate-y-1 hover:rotate-1
  active:translate-y-[4px] active:translate-x-[4px]
  active:rotate-[-2deg] active:shadow-none
  transition-all duration-150
">
  Sketch It
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#f5f0e8]
  border-2 border-[#2c2c2c]
  rounded-sm
  -rotate-1
  relative
  shadow-[5px_5px_0_rgba(44,44,44,0.15)]
  hover:rotate-0
  hover:shadow-[8px_8px_0_rgba(44,44,44,0.2)]
  hover:-translate-y-1
  transition-all duration-200
  overflow-hidden
">
  <div className="absolute top-4 right-4 w-8 h-8 rounded-[40%_60%_70%_30%] border border-[#2c2c2c] opacity-0 group-hover:opacity-100 group-hover:scale-125 transition-all duration-300" />
  <div className="absolute top-4 right-4 w-8 h-8 rounded-[60%_40%_30%_70%] border border-[#2c2c2c] opacity-0 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300 delay-75" />

  <h3 className="text-2xl font-serif italic font-bold text-[#2c2c2c] mb-4">
    Rough Draft
  </h3>
  <p className="text-[#555] font-serif leading-relaxed">
    Drawn with pencil, eraser, and intention. Imperfect lines still tell a clear story.
  </p>
</div>
```


---


### 水彩画风 (Watercolor Style)

**Slug**: `watercolor-style`

#### Description
A design style inspired by watercolor painting, featuring soft color gradients, blurred edge effects, paper texture backgrounds, and flowing color diffusion, conveying artistry and poetry.

#### Design Philosophy
Watercolor Style is a design style simulating watercolor painting effects, injecting artistic atmosphere and poetic feeling into interfaces through soft color gradients, blurred edges, and flowing color diffusion.

Core principles:
- Fluidity: Colors naturally permeate and diffuse like watercolors
- Soft edges: No hard boundary lines, everything transitions softly
- Paper texture: Underlying warm watercolor paper texture preserved
- Transparent layering: Watercolor's semi-transparent nature, colors layered upon each other

#### Do's (必须做)
1. Use soft gradients bg-gradient-to-* to simulate watercolor permeation
2. Use semi-transparent colors opacity or rgba to simulate watercolor transparency
3. Use large border radii rounded-3xl or rounded-full to soften edges
4. Use warm paper-colored background bg-[#faf8f5]
5. Use soft shadows shadow-lg with low opacity
6. Use serif fonts to add artistic feel

#### Don'ts (禁止做)
1. Do NOT use hard borders border-4 border-black
2. Do NOT use hard-edge shadows shadow-[px_px_0_color]
3. Do NOT use pure black backgrounds
4. Do NOT use sharp corners rounded-none
5. Do NOT use overly saturated or glaring colors

#### AI Rules
```
You are a Watercolor Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using hard borders border-4 border-black
- Using hard-edge shadows shadow-[px_px_0_color]
- Using pure black backgrounds bg-black
- Using sharp corners rounded-none
- Using overly saturated colors
- Using bold sans-serif uppercase text

## Must Follow

- Paper-colored background bg-[#faf8f5]
- Soft gradients bg-gradient-to-br using semi-transparent colors
- Large border radii rounded-3xl or rounded-full
- Soft shadows shadow-lg with low-opacity color
- Serif italic fonts font-serif italic
- Semi-transparent color overlay effects

## Color Palette

Primary:
- Blue-gray: #4a6fa5 (text and main elements)
- Paper: #faf8f5 (background)

Watercolor colors (used semi-transparently):
- Peach: #e8a87c
- Teal: #85cdca
- Rose: #c38d94
- Sand: #d4a373

## Special Effects

Watercolor wash: Using multiple radial-gradient overlays
Color diffusion: Using blur-3xl large color blocks
Soft edges: rounded-3xl + low-opacity borders
Paper texture: Warm-toned background + subtle texture

## Self-Check

After generating code, verify:
1. No hard borders or sharp corners
2. Using soft gradients and semi-transparent colors
3. Background is warm paper color
4. Text uses serif italic
5. Overall feel is like a watercolor painting

## Animation & Interaction Rules

- Pigment Bloom: On hover, instead of rigid float (translate-y), let same-hue colored shadow spread outward significantly (e.g., `hover:shadow-[0_10px_40px_rgba(74,111,165,0.35)]`), simulating watercolor pigment blooming on wet paper.
- Damp Paper: On card hover, background slightly brightens or deepens (e.g., from-[#e8a87c]/20 deepens to /30), simulating paper texture change after absorbing water.
- Liquid Slowness: Watercolor flow is slow, mandatory `duration-500` with `ease-in-out`, prohibit `duration-150` or `ease-linear` fast easing.
- Soft Press: On click `active:scale-[0.98]` with deepened inner shadow, simulating gentle press on damp paper surface, avoiding violent spring bounce-back.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#4a6fa5]/20`
- Radius: `rounded-2xl md:rounded-3xl`

**Shadow**
- Small: `shadow-[0_2px_10px_rgba(74,111,165,0.1)]`
- Medium: `shadow-[0_4px_20px_rgba(74,111,165,0.12)]`
- Large: `shadow-[0_8px_30px_rgba(74,111,165,0.15)]`
- Hover: `hover:shadow-[0_8px_30px_rgba(74,111,165,0.2)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-400 ease-out`

**Typography**
- Heading: `font-serif font-light tracking-wide`
- Body: `font-sans font-light`

**Required Classes**

Button:
```
rounded-2xl
shadow-[0_4px_20px_rgba(74,111,165,0.12)]
hover:scale-[1.02]
transition-all duration-400 ease-out
font-light
```

Card:
```
rounded-2xl md:rounded-3xl
border border-[#4a6fa5]/20
shadow-[0_4px_20px_rgba(74,111,165,0.12)]
bg-[#faf8f5]
```

Input:
```
rounded-2xl
border border-[#4a6fa5]/20
bg-white/60
font-light
focus:shadow-[0_4px_20px_rgba(74,111,165,0.15)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `border-black`, `border-2`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `font-black`, `font-bold`, `bg-black`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^border-(?:black|2|4)$`, `^font-(?:black|bold)$`, `^bg-(?:black|\[#1a1a)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-4 bg-gradient-to-r from-[#4a6fa5]/80 to-[#85cdca]/80 rounded-full text-white font-serif shadow-lg shadow-[#4a6fa5]/20 hover:shadow-[0_10px_40px_rgba(74,111,165,0.35)] hover:from-[#4a6fa5]/90 hover:to-[#85cdca]/90 active:scale-[0.98] active:shadow-[0_2px_10px_rgba(74,111,165,0.2)] transition-all duration-500 ease-in-out">
  Explore
</button>
```

**Card**
```html
<div className="group p-8 bg-gradient-to-br from-[#e8a87c]/20 via-white to-[#85cdca]/20 rounded-3xl shadow-lg shadow-[#4a6fa5]/10 border border-[#4a6fa5]/10 backdrop-blur-sm hover:from-[#e8a87c]/30 hover:to-[#85cdca]/30 hover:shadow-[0_12px_40px_rgba(74,111,165,0.18)] transition-all duration-500 ease-in-out relative overflow-hidden">
  <div className="absolute -top-8 -right-8 w-24 h-24 bg-[#85cdca]/30 rounded-full blur-2xl group-hover:scale-150 group-hover:bg-[#85cdca]/40 transition-all duration-700 ease-in-out" />
  <h3 className="relative z-10 text-xl font-serif text-[#4a6fa5] mb-3 group-hover:text-[#3a5f95] transition-colors duration-500">
    Watercolor Card
  </h3>
  <p className="relative z-10 text-[#6b7280] leading-relaxed">
    Colors flowing like water on paper
  </p>
</div>
```


---


### F型布局 (F-Pattern Layout)

**Slug**: `f-pattern-layout`

#### Description
An F-pattern scanning layout based on eye-tracking research, where the user's gaze starts from the top-left, scans horizontally across the top, then moves downward, ideal for content-heavy pages, blog posts, and news listings.

#### Design Philosophy
F-Pattern Layout is based on eye-tracking research by the Nielsen Norman Group, where users browse web pages with their gaze moving in an F-shape: first scanning horizontally across the top content, then moving down for a second (shorter) horizontal scan, and finally browsing vertically down the left side.

Core principles:
- Content priority: Most important content placed at the top and left
- Visual guidance: Guiding user reading path through hierarchy and weight
- Information density: Efficient arrangement for text-heavy content
- Scannability: Headlines, summaries, and body text form clear hierarchy

#### Do's (必须做)
1. Place the most important content at the top of the page (first horizontal line)
2. Place navigation or key information on the left side (vertical line)
3. Use clear heading hierarchy h1 > h2 > h3
4. Use lists and sections to increase scannability
5. Maintain left alignment text-left to match reading habits
6. Use max-w-prose to limit line width for readability

#### Don'ts (禁止做)
1. Do NOT place important content in the bottom-right corner
2. Do NOT center-align large blocks of text
3. Do NOT ignore content priority ordering
4. Do NOT use excessively long unsegmented text
5. Do NOT leave too much whitespace on the left side

#### AI Rules
```
You are an F-Pattern Layout expert. All generated code must strictly follow these constraints:

## Layout Rules

- Place the most important information at the top of the page (logo, navigation, featured content)
- Place secondary information on the second row (categories, search)
- Place main content area on the left (article list)
- Place auxiliary content on the right (sidebar)
- All text left-aligned text-left

## Content Hierarchy

First layer (full-width top):
- Navigation bar
- Featured article/headline

Second layer (secondary horizontal area):
- Category tags
- Search bar

Third layer (left vertical list):
- Article list
- Content cards with thumbnails

Auxiliary area (right side):
- Trending recommendations
- Tag cloud
- Ad space

## Responsive

Desktop: Left main content + right sidebar
Tablet: Full-width main content + collapsed sidebar
Mobile: Single column stacked

## Self-Check

1. Most important content at top and top-left
2. Clear heading hierarchy
3. Text left-aligned
4. Content quickly scannable
5. Responsive adaptation complete

## Animation & Interaction Rules

- Eye-Tracking Guides: List item hover allows main title to slightly shift right (e.g., `translate-x-1`) or underline to appear, helping quickly lock on during scanning phase.
- Fast Feedback: News-type interactions recommend `duration-150` to `duration-200`, avoiding lengthy transitions that interrupt reading.
- Contrast Pop: Current hover item can be briefly separated from the information flow through slight shadow or border contrast enhancement.
- Image Focus: Thumbnail hover can increase contrast or brightness as clickable feedback, but the magnitude must be restrained.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
font-medium
transition-colors
```

Card:
```
bg-white
rounded-lg
shadow-sm
text-left
```

Input:
```
bg-gray-50
border border-gray-200
rounded-lg
focus:outline-none
focus:ring-2 focus:ring-[#457b9d]/20 focus:border-[#457b9d]
transition-all
```

**Forbidden**

Classes: `text-center`, `rounded-none`, `rounded-2xl`, `rounded-3xl`, `shadow-2xl`, `font-black`

Patterns: `^rounded-(?:none|2xl|3xl)`, `^shadow-2xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#e63946] text-white
  rounded-lg
  font-medium
  hover:bg-[#c1121f]
  active:scale-[0.98]
  transition-all duration-150 ease-out
">
  Read More
</button>
```

**Card**
```html
<article className="group flex gap-6 p-6
  bg-white
  border-b border-gray-100
  hover:bg-gray-50/70
  hover:shadow-sm
  transition-all duration-200
  cursor-pointer
  relative
">
  <div className="w-20 h-20 bg-gray-200 rounded-lg flex-shrink-0 group-hover:contrast-125 group-hover:brightness-95 transition-all duration-200" />
  <div className="flex-1 min-w-0">
    <h3 className="text-lg font-semibold text-[#1a1a2e] mb-1 line-clamp-1 group-hover:text-[#e63946] group-hover:translate-x-1 group-hover:underline underline-offset-4 decoration-1 transition-all duration-200">
      Article Title
    </h3>
    <p className="text-gray-600 text-sm line-clamp-2 mb-2">
      Brief summary of the article content...
    </p>
    <span className="text-xs text-gray-400">5 min read</span>
  </div>
</article>
```


---


### Z型布局 (Z-Pattern Layout)

**Slug**: `z-pattern-layout`

#### Description
A Z-pattern scanning layout based on eye-tracking, where the gaze moves from top-left to top-right, diagonally to bottom-left, then to bottom-right, forming a Z-path. Ideal for landing pages, marketing pages, and concise information displays.

#### Design Philosophy
Z-Pattern Layout is based on the user's natural scanning path on visually clean pages. The gaze moves from the top-left (logo/brand) to the top-right (CTA), then diagonally to the bottom-left, and finally to the bottom-right (final CTA).

Core principles:
- Visual guidance: Using the Z-path to guide users through a preset information reception sequence
- Key positions: The four corners are the most important information placement points
- Clean and clear: Suitable for pages with less content but strong conversion needs
- Progressive layers: Each row is an information hierarchy level

#### Do's (必须做)
1. Place logo/brand identity in the top-left corner
2. Place navigation or primary CTA in the top-right corner
3. Place core value proposition in the middle area
4. Place auxiliary information or trust badges in the bottom-left
5. Place the final CTA button in the bottom-right
6. Each row of information is independently complete, progressively layered

#### Don'ts (禁止做)
1. Do NOT place unimportant content on the Z-path
2. Do NOT interrupt the Z-shaped visual flow
3. Do NOT use too much content that interferes with the path
4. Do NOT place CTAs outside the path
5. Do NOT make the page overly complex and crowded

#### AI Rules
```
You are a Z-Pattern Layout expert. All generated code must strictly follow these constraints:

## Layout Rules

Z-path four key points:
1. Top-left: Logo / brand identity
2. Top-right: Navigation / primary CTA
3. Middle diagonal: Core value proposition / main content
4. Bottom-left: Trust badges / social proof
5. Bottom-right: Final CTA button

## Content Rules

- Each row of information is independently complete
- First row establishes brand awareness
- Diagonal area delivers core value
- Last row drives conversion
- Content is concise, avoiding path interference

## Visual Guidance

- Use contrasting colors to highlight CTAs
- Use whitespace to guide visual flow
- Center layout for middle area
- Use flex justify-between for header and footer

## Responsive

Desktop: Complete Z-path
Tablet: Maintain Z-path, reduce spacing
Mobile: Vertical stack, maintain priority order

## Self-Check

1. Logo at top-left, CTA at top-right
2. Core content centered
3. Final CTA at bottom-right
4. Visual path is clear and fluid
5. Page is clean and uncluttered

## Animation & Interaction Rules

- Funnel Focus: When hovering core areas (feature cards, inputs), must use noticeable float (`hover:-translate-y-1`) and shadow expansion (`hover:shadow-xl`) to firmly lock user attention, reinforcing conversion node presence.
- CTA Magnetism: Action buttons at Z-path key nodes must use elastic scaling (`hover:scale-[1.02]`) combined with brand color halo on hover, making buttons feel magnetically attractive.
- Crisp Progression: Business landing pages do not allow sluggish animations. Mandatory `duration-200 ease-out`, ensuring feedback is crisp without interrupting the user's Z-scan rhythm.
- Clear Focus: On input focus, beyond the outer ring glow, brighten background from gray/transparent to pure white, providing clear data input indication.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg shadow-[#6366f1]/25`
- Hover: `hover:shadow-xl hover:shadow-[#6366f1]/30`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-xl
font-semibold
transition-all duration-300
```

Card:
```
bg-white
rounded-2xl
shadow-sm
border border-gray-100
text-center
```

Input:
```
bg-white
border border-gray-200
rounded-xl
focus:outline-none
focus:ring-2 focus:ring-[#6366f1]/20 focus:border-[#6366f1]
transition-all
```

**Forbidden**

Classes: `rounded-none`, `font-black`, `border-4`, `border-8`

Patterns: `^rounded-none$`, `^border-[48]`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-10 py-4 bg-[#6366f1] text-white rounded-xl font-bold text-lg shadow-[0_4px_14px_rgba(99,102,241,0.3)] hover:shadow-[0_8px_25px_rgba(99,102,241,0.5)] hover:-translate-y-1 hover:scale-[1.02] active:scale-95 active:translate-y-[2px] transition-all duration-200 ease-out">
  Start Free Trial
</button>
```

**Card**
```html
<div className="group p-8 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-indigo-100 hover:-translate-y-1.5 transition-all duration-300 ease-out cursor-pointer">
  <div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center mb-5 group-hover:bg-indigo-500 group-hover:scale-110 transition-all duration-300 ease-out">
    <svg className="w-7 h-7 text-indigo-500 group-hover:text-white transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
      <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  </div>
  <h3 className="text-xl font-bold text-[#0f172a] mb-3 group-hover:text-indigo-600 transition-colors duration-200">
    Seamless Conversion
  </h3>
  <p className="text-gray-600 leading-relaxed">
    Every element on this path is engineered to guide the eye and encourage action without overwhelming the reader.
  </p>
</div>
```


---


### 圣杯布局 (Holy Grail Layout)

**Slug**: `holy-grail-layout`

#### Description
The classic three-column web layout consisting of a fixed header, a three-column middle section (left navigation, main content, right sidebar), and a fixed footer -- a foundational layout paradigm in web design.

#### Design Philosophy
Holy Grail Layout is the long-sought classic layout solution in web design, featuring a fixed header and footer with a three-column content area in between. The name originates from the difficulty of implementing this layout in the early days of CSS.

Core principles:
- Clear structure: Header, three-column content, and footer -- five regions each serving a distinct purpose
- Content-first: Main content precedes sidebars in HTML source for better SEO
- Equal-height columns: All three columns maintain equal height regardless of content
- Flexible adaptation: Sidebars have fixed widths while the main content area is fluid

#### Do's (必须做)
1. Use CSS Grid or Flexbox for equal-height three columns
2. Sticky header and footer with sticky top-0 / sticky bottom-0
3. Main content area uses flex-1 for fluid width
4. Left navigation bar with fixed width w-60 or w-64
5. Right sidebar with fixed width w-64 or w-72
6. Main content precedes sidebars in source order
7. Responsive sidebar collapsing
8. All buttons use active:scale-[0.98] active:translate-y-0 + focus:ring-2 focus:ring-[#3b82f6] focus:ring-offset-2
9. Content cards use hover:-translate-y-0.5 hover:shadow-md (lightweight lift without disrupting reading)
10. Sidebar navigation uses left-border highlight on hover hover:border-l-2 hover:border-[#3b82f6] (no vertical displacement, maintaining anchored feel)
11. All animations use duration-150 ease-out (productivity tools demand crisp response)

#### Don'ts (禁止做)
1. Do not allow unequal column heights
2. Do not make the main content area too narrow
3. Do not ignore responsive collapsing
4. Do not let sidebar width change with content
5. Do not leave header and footer unfixed
6. Do not use large displacement animations on cards (large motion disrupts focus in reading contexts)
7. Do not use animation duration exceeding 200ms (productivity tools should feel crisp)
8. Do not omit active:scale-[0.98] on buttons (no tactile confirmation)
9. Do not add vertical displacement to sidebar navigation on hover (anchoring feel requires no movement)

#### AI Rules
```
You are a Holy Grail Layout expert. All generated code must strictly follow these constraints:

## Layout Structure

Five regions:
1. Header: Fixed top, brand + navigation
2. Left Sidebar: Fixed width, navigation menu
3. Main Content: Fluid width, primary content
4. Right Sidebar: Fixed width, auxiliary information
5. Footer: Fixed bottom, copyright information

## Implementation Rules

- Use Flexbox: outer flex flex-col min-h-screen
- Three-column area: flex flex-1
- Sidebars: fixed width w-60 / w-64 flex-shrink-0
- Main content: flex-1 min-w-0
- Header: sticky top-0 z-50
- Equal-height columns: three columns auto equal height

## Responsive

Large screens (>1024px): Full three columns
Medium screens (768-1024px): Hide right sidebar
Small screens (<768px): All columns stack vertically

## Animation & Interaction Rules

### Content Supremacy (Card Float)
- Cards in main content: hover:-translate-y-0.5 hover:shadow-md -- minimal, non-distracting float
- NEVER use hover:-translate-y-2 or larger (breaks reading focus)
- Transition: duration-150 ease-out (crisp productivity tool rhythm)

### Navigation Anchoring (Sidebar Links)
- Inactive nav items: hover:border-l-2 hover:border-[#3b82f6] hover:bg-gray-50 -- left-border highlight ONLY
- NEVER add vertical displacement to sidebar nav (anchoring feel requires stability)
- Active item: bg-[#3b82f6]/10 text-[#3b82f6] -- always-visible active state

### Crisp Performance (Duration Standard)
- All transitions: duration-150 ease-out -- productivity tools must feel instant
- NEVER exceed duration-200 for any interactive element

### Button Physics
- Hover: hover:-translate-y-0.5 hover:shadow-[0_4px_10px_rgba(59,130,246,0.4)]
- Active: active:scale-[0.98] active:translate-y-0 active:shadow-none -- tactile micropress
- Focus: focus:ring-2 focus:ring-[#3b82f6] focus:ring-offset-2 (WCAG 2.1 AA)

## Self-check

1. Header fixed at top
2. Three columns equal height
3. Main content area is fluid
4. Sidebars have fixed width
5. Footer always at bottom
6. Responsive collapsing works correctly
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
font-medium text-sm
transition-colors
```

Card:
```
bg-white
rounded-xl
shadow-sm
border border-gray-100
```

Input:
```
bg-gray-50
border border-gray-200
rounded-lg
text-sm
focus:outline-none
focus:ring-2 focus:ring-[#3b82f6]/20 focus:border-[#3b82f6]
transition-all
```

**Forbidden**

Classes: `rounded-none`, `shadow-2xl`, `font-black`, `font-extrabold`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`

Patterns: `^rounded-none$`, `^shadow-2xl`, `^text-[5-8]xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-4 py-2
  bg-[#3b82f6] text-white
  rounded-lg
  font-medium text-sm
  hover:bg-[#2563eb] hover:-translate-y-0.5
  hover:shadow-[0_4px_10px_rgba(59,130,246,0.4)]
  focus:outline-none focus:ring-2 focus:ring-[#3b82f6] focus:ring-offset-2
  active:scale-[0.98] active:bg-[#1d4ed8] active:translate-y-0 active:shadow-none
  transition-all duration-150 ease-out
">
  Action
</button>
```

**Card**
```html
<div className="
  p-6
  bg-white
  rounded-xl
  shadow-sm
  border border-gray-100
  hover:-translate-y-0.5 hover:shadow-md
  transition-all duration-150 ease-out
">
  <h3 className="text-lg font-semibold text-[#1e293b] mb-2">
    Content Card
  </h3>
  <p className="text-gray-600 text-sm leading-relaxed">
    Main content displayed in the center column of the holy grail layout.
  </p>
</div>
```


---


### 仪表盘布局 (Dashboard Layout)

**Slug**: `dashboard-layout`

#### Description
A data-driven dashboard layout featuring side navigation, top toolbar, multi-module data panels, and chart areas -- ideal for admin systems, data analytics platforms, and monitoring dashboards.

#### Design Philosophy
Dashboard Layout is a layout solution centered on data presentation, enabling users to efficiently monitor and analyze multi-dimensional data through side navigation, multi-module data panels, and a flexible grid system.

Core principles:
- Data first: All layout decisions serve efficient data presentation
- Modular: Each data panel is an independent module that can be flexibly combined
- Density control: Striking a balance between information density and readability
- Real-time: Layout supports real-time data updates and refreshes

#### Do's (必须做)
1. Use dark side navigation bar bg-gray-900 w-64
2. Top toolbar includes search, notifications, and user info
3. Use CSS Grid for data panels grid grid-cols-4
4. KPI cards use large font numbers to display key metrics
5. Chart areas use appropriate ratios aspect-video or aspect-square
6. Use color coding to distinguish data states (green for increase, red for decrease)

#### Don'ts (禁止做)
1. Do not allow disproportionate sidebar-to-content ratios
2. Do not use inconsistent spacing between data panels
3. Do not ignore loading states and empty states
4. Do not make all panels exactly the same size
5. Do not use excessive decorative elements that distract attention

#### AI Rules
```
You are a Dashboard Layout expert. All generated code must strictly follow these constraints:

## Layout Structure

- Left: Dark side navigation bar w-64 bg-gray-900
- Top: White toolbar (search, notifications, user)
- Main: KPI cards + chart panels + data tables

## KPI Cards

- Use grid grid-cols-4 layout
- Each card includes: label, value, trend change
- Growth uses green text-green-500
- Decline uses red text-red-500
- Stable uses yellow text-yellow-500

## Chart Area

- Main chart takes 2/3 width col-span-2
- Secondary chart takes 1/3 width
- Use aspect-ratio to maintain proportions

## Side Navigation

- Dark background bg-gray-900
- Current page highlighted bg-white/10
- Icon + text menu items
- User info at bottom

## Responsive

Large screens: Sidebar + 4-column KPI + charts
Medium screens: Sidebar + 2-column KPI
Small screens: Hidden sidebar + 1-column KPI

## Self-check

1. Side navigation is dark and fixed
2. KPI card data is clear
3. Chart area proportions are appropriate
4. Status color coding is correct
5. Responsive adaptation is complete

## Animation & Interaction Rules

- Crisp SaaS Feel: All micro-interactions should be fast and clear, preferring `duration-150` + `ease-out`.
- KPI Focus: KPI cards may slightly lift on hover, using `group-hover` to micro-scale or recolor the core number for visual focus.
- Hover Hinting: Data cards, data rows, and actionable panels must provide clear background feedback on hover (e.g., `hover:bg-gray-50`).
- Action Precision: Button clicks should have clear press feedback (e.g., `active:scale-[0.97]`), with visible focus ring for a11y.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
font-medium text-sm
transition-colors
```

Card:
```
bg-white
rounded-xl
shadow-sm
border border-gray-100
```

Input:
```
bg-gray-50
border border-gray-200
rounded-lg
text-sm
focus:outline-none
focus:ring-2 focus:ring-[#6366f1]/20 focus:border-[#6366f1]
transition-all
```

**Forbidden**

Classes: `rounded-none`, `shadow-2xl`, `font-black`, `font-extrabold`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `rounded-3xl`, `rounded-full`

Patterns: `^rounded-(?:none|3xl|full)`, `^shadow-2xl`, `^text-[5-8]xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-4 py-2
  bg-[#6366f1] text-white
  rounded-lg
  font-medium text-sm
  hover:bg-[#4f46e5]
  active:scale-[0.97]
  focus:outline-none focus:ring-2 focus:ring-[#6366f1]/30 focus:ring-offset-1
  transition-all duration-150 ease-out
">
  Export Data
</button>
```

**Card**
```html
<div className="group p-6
  bg-white
  rounded-xl
  shadow-sm
  border border-gray-100
  hover:bg-gray-50
  hover:shadow-md hover:border-indigo-100 hover:-translate-y-0.5
  transition-all duration-150 ease-out
  cursor-pointer
">
  <div className="flex items-center justify-between mb-4">
    <span className="text-sm font-medium text-gray-500 group-hover:text-gray-700 transition-colors duration-150">Total Revenue</span>
    <span className="text-xs font-medium text-[#10b981] bg-[#10b981]/10 px-2 py-1 rounded-full group-hover:bg-[#10b981]/20 transition-colors duration-150">+12.5%</span>
  </div>
  <div className="text-3xl font-bold text-[#111827] origin-left group-hover:text-[#4f46e5] group-hover:scale-[1.02] transition-all duration-150">$48,230</div>
  <p className="text-sm text-gray-500 mt-1 group-hover:text-gray-600 transition-colors duration-150">vs. $42,890 last month</p>
</div>
```


---


### 赛博朋克霓虹 (Cyberpunk Neon)

**Slug**: `cyberpunk-neon`

#### Description
A futuristic cyberpunk style with neon glow effects, dark backgrounds, and high-tech UI elements. Ideal for games, tech products, and creative studios.

#### Design Philosophy
Cyberpunk Neon style draws from cyberpunk sci-fi aesthetics, creating a futuristic feel through neon glow, dark backgrounds, and high contrast.

Core principles:
- Neon glow: Core elements stand out with glow effects
- Dark dominance: Near-black backgrounds make neon colors more striking
- High-tech feel: Grids, scanlines, and other elements enhance the tech atmosphere
- Color impact: Cyan, magenta, yellow, and other high-saturation colors

#### Do's (必须做)
1. Use dark backgrounds bg-[#0a0a0f] or bg-gray-950
2. Use shadow-[0_0_20px_rgba(0,255,255,0.5)] to create glow effects
3. Text glow with [text-shadow:0_0_10px_currentColor]
4. Glowing borders with border border-cyan-400 shadow-[0_0_10px_rgba(0,255,255,0.3)]
5. Use scanline background effects for tech feel
6. Enhance glow on button hover hover:shadow-[0_0_30px_rgba(0,255,255,0.7)]
7. Gradient text bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent

#### Don'ts (禁止做)
1. Do not use light/white backgrounds
2. Do not use low-saturation colors
3. Do not use regular shadows like shadow-md (must use glow shadows)
4. Do not use warm color schemes (unless for warning/error colors)
5. Do not use overly large border radius rounded-2xl, rounded-3xl
6. Do not use soft/warm design language

#### AI Rules
```
STYLE: Cyberpunk Neon
TYPE: Futuristic sci-fi interface

MUST USE:
- Dark background: bg-[#0a0a0f] or bg-gray-950
- Neon glow shadows: shadow-[0_0_20px_rgba(0,255,255,0.5)]
- Text glow: style={{textShadow: '0 0 10px currentColor'}}
- Glowing borders: border border-cyan-400 shadow-[0_0_10px...]
- High saturation colors: cyan-400, fuchsia-500, yellow-400
- font-mono for tech text
- uppercase tracking-wider for labels

MUST AVOID:
- Light/white backgrounds
- Low saturation colors
- Regular shadows (shadow-md)
- Warm color schemes
- Large rounded corners (rounded-2xl+)
- Soft/friendly design language

COLOR RULES:
- Primary: Cyan (#00ffff)
- Accent: Magenta (#ff00ff)
- Background: Near-black (#0a0a0f)
- Text: White with glow
- Borders: Primary color with glow

SPECIAL EFFECTS:
- Scan line overlay for tech feel
- Pulsing elements with animate-pulse
- Glow intensifies on hover

---

## Animation Rules

### Interaction Physics
- **Unstable Neon**: Glow effects may pulse subtly. Use `animate-pulse` sparingly. NO high-frequency flickering that hurts readability.
- **Glitch Press**: Active state uses OFFSET translation + color inversion, NOT scale. Example: `active:translate-x-[2px] active:-translate-y-[1px] active:text-fuchsia-400`
- **CRT Scanline**: Cards increase scanline density/visibility on hover, simulating terminal scanning.
- **Fast & Raw**: Standard interactions use `duration-100` to `duration-150`. Only scan sweeps may use up to `duration-300`.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Button hover | 100-150ms | ease-out |
| Glow pulse | 2-3s | ease-in-out (loop) |
| Scan sweep | 150-300ms | ease-out |
| Glitch press | instant | — |

---

## Typography

| Element | Classes |
|---------|---------|
| Headers | font-mono font-bold uppercase tracking-[0.2em] |
| Labels | text-xs font-mono uppercase tracking-wider |
| Body | font-mono text-sm |
| Code/Data | font-mono tabular-nums |

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| Light/white backgrounds | Destroys neon visibility |
| Low saturation colors | Loses cyberpunk intensity |
| shadow-md, shadow-lg | No blur shadows — only glow |
| Warm color schemes | Contradicts cold tech aesthetic |
| rounded-2xl, rounded-3xl | Too soft, not technical enough |
| Soft/friendly language | Breaks immersion |
| scale transforms on active | Use glitch offset instead |

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is near-black (#0a0a0f or bg-gray-950)
- [ ] Neon glows use shadow-[0_0_Xpx_rgba(...)] format
- [ ] Text has textShadow glow effect where appropriate
- [ ] High saturation colors only (cyan, magenta, yellow, green)
- [ ] font-mono for all text elements
- [ ] Active states use glitch offset, NOT scale
- [ ] Rounded corners are rounded-sm or rounded-none
- [ ] Transitions are fast: duration-100 to duration-150
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-cyan-400/30`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(0,255,255,0.3)]`
- Medium: `shadow-[0_0_15px_rgba(0,255,255,0.4)]`
- Large: `shadow-[0_0_25px_rgba(0,255,255,0.5)]`
- Hover: `shadow-[0_0_30px_rgba(0,255,255,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold`
- Body: `font-mono`

**Required Classes**

Button:
```
px-6 py-3
rounded-lg
font-mono
uppercase tracking-wider
transition-all duration-300
```

Card:
```
bg-gray-950
border border-cyan-400/30
rounded-lg
```

Input:
```
bg-gray-950
border border-cyan-400/30
rounded-lg
text-cyan-400
font-mono
focus:border-cyan-400
focus:shadow-[0_0_15px_rgba(0,255,255,0.3)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-slate-50`, `shadow-sm`, `shadow-md`, `shadow-lg`, `text-gray-900`, `rounded-2xl`, `rounded-3xl`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^bg-slate-[1-3]`, `^shadow-(?!\[)`, `^rounded-[23]xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative px-6 py-3 bg-transparent border border-cyan-400 text-cyan-300 rounded-sm font-mono text-sm uppercase tracking-[0.18em] shadow-[0_0_10px_rgba(0,255,255,0.4),inset_0_0_10px_rgba(0,255,255,0.15)] hover:bg-cyan-400/15 hover:shadow-[0_0_26px_rgba(0,255,255,0.8),inset_0_0_18px_rgba(0,255,255,0.35)] hover:text-cyan-100 active:translate-x-[2px] active:-translate-y-[1px] active:border-fuchsia-500 active:text-fuchsia-400 active:shadow-[0_0_8px_rgba(255,0,255,0.75)] transition-all duration-100 overflow-hidden motion-reduce:transition-none">
  <span className="absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-cyan-300/40 to-transparent skew-x-12 group-hover:left-[120%] transition-all duration-150" />
  <span className="relative z-10 drop-shadow-[0_0_8px_currentColor] group-hover:animate-pulse">Initialize</span>
</button>
```

**Card**
```html
<div className="group bg-gray-950 border border-cyan-400/30 rounded-sm p-6 shadow-[0_0_15px_rgba(0,255,255,0.15)] hover:shadow-[0_0_30px_rgba(0,255,255,0.45)] hover:border-cyan-300 transition-all duration-150 relative overflow-hidden">
  {/* Scan line effect */}
  <div className="absolute inset-0 bg-[linear-gradient(transparent_50%,rgba(0,255,255,0.03)_50%)] bg-[length:100%_4px] pointer-events-none opacity-60 group-hover:opacity-100 group-hover:bg-[length:100%_2px] transition-all duration-150" />
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[radial-gradient(circle_at_top,rgba(255,0,255,0.12),transparent_45%)] pointer-events-none transition-opacity duration-150" />

  <div className="relative">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-2 h-2 rounded-none bg-cyan-400 shadow-[0_0_10px_rgba(0,255,255,0.8)] group-hover:animate-ping" />
      <h3 className="text-cyan-400 font-mono uppercase tracking-[0.2em] text-xs group-hover:text-white transition-colors duration-150">System Module</h3>
    </div>
    <h4 className="text-white text-xl font-bold mb-3 group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)] group-active:translate-x-[1px] transition-all duration-150">
      Neural Interface
    </h4>
    <p className="text-gray-400 leading-relaxed font-mono text-sm group-hover:text-cyan-400/80 transition-colors duration-150">
      &gt; Advanced cybernetic enhancement module operational.
    </p>
  </div>
</div>
```


---


### 合成波 (Synthwave)

**Slug**: `synthwave`

#### Description
80s retro-futuristic music aesthetic with neon pink-purple palette, grid horizon, sunset gradients, and vintage tech feel -- brimming with nostalgic visions of the future.

#### Design Philosophy
Synthwave is an electronic music genre and visual aesthetic originating in the mid-2000s, paying homage to 80s sci-fi films, video games, and synthesizer music.

Core principles:
- Retro-futurism: Nostalgia for the 80s vision of the future
- Neon aesthetics: Pink, purple, and cyan neon light effects
- Grid horizon: Perspective grid extending to the horizon
- Sunset gradient: Orange-pink-purple sunset sky

#### Do's (必须做)
1. Use pink-purple-cyan neon palette
2. Add perspective grid background
3. Use sunset gradient (orange to pink to purple)
4. Add neon glow effects
5. Use retro-style fonts
6. Add sun/mountain silhouette elements
7. Arcade Pulse: neon border and glow elements use `hover:animate-pulse` or flicker on hover -- the arcade machine's CRT screen energizes when touched
8. Multidimensional Neon: button uses simultaneous inset cyan + outer pink shadows `shadow-[0_0_15px_rgba(255,0,255,0.4),inset_0_0_10px_rgba(0,255,255,0.2)]` -- two neon tubes glow from opposite directions, intensify together on hover
9. Virtual Grid Shift: background pixel grid uses `group-hover:opacity-30 group-hover:scale-110 transition-all duration-500` -- the virtual space expands as the player approaches
10. Overvoltage Press: active state causes power surge `active:scale-90 active:bg-white active:text-black active:shadow-[0_0_50px_#ffffff]` -- all neon goes white as the circuit overloads at the moment of contact

#### Don'ts (禁止做)
1. Do not use bright white backgrounds
2. Do not use modern minimalist design
3. Do not omit neon glow effects
4. Do not use overly formal fonts
5. Do not use single-direction neon (Multidimensional Neon requires inset + outer dual-direction simultaneous glow)
6. Do not change only one shadow value on hover (must intensify both inset cyan and outer pink tracks simultaneously)
7. Do not retain color in active state (Overvoltage Press requires `active:bg-white active:text-black` -- overload resets everything)
8. Do not animate Virtual Grid outside of group-hover (grid only activates when the player approaches)

#### AI Rules
```
You are a Synthwave design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Modern minimalist design
- Omitting neon glow effects
- Formal fonts

## Must Follow

- Pink-purple-cyan palette from-pink-500, from-purple-500, from-cyan-500
- Dark backgrounds bg-purple-900, bg-black
- Neon glow shadow-[0_0_20px_rgba(255,0,255,0.5)]
- Grid background decorations
- Sunset gradient from-orange-500 via-pink-500 to-purple-500

## Color Palette

Primary:
- Pink: #ff00ff, from-pink-500
- Cyan: #00ffff, from-cyan-500
- Purple: #7b68ee, from-purple-500
- Orange: #ff6ec7

## Special Elements

- Perspective grid floor
- Sunset sun
- Mountain silhouettes
- Scanline effects

## Animation & Interaction Rules

- Arcade Pulse: Neon border elements use `hover:animate-pulse` -- the arcade machine's CRT screen flickers to life when touched. Only trigger on hover, never on load.
- Multidimensional Neon: Button uses simultaneous inset cyan + outer pink: `shadow-[0_0_15px_rgba(255,0,255,0.4),inset_0_0_10px_rgba(0,255,255,0.2)]` at rest. On hover BOTH intensify together: `hover:shadow-[0_0_30px_rgba(0,255,255,0.8),inset_0_0_20px_rgba(255,0,255,0.6)]`. Never single-direction neon -- two tubes always glow from opposite directions.
- Virtual Grid Shift: Background pixel grid uses `group-hover:opacity-30 group-hover:scale-110 transition-all duration-500` -- the virtual space expands as the player approaches, creating depth through the monitor glass.
- Overvoltage Press: Active state causes a power surge: `active:scale-90 active:bg-white active:text-black active:shadow-[0_0_50px_#ffffff]` -- all neon color drains to white as the circuit overloads at the moment of contact. The entire color system collapses to pure electricity.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#ff00ff]/50`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(255,0,255,0.4)] md:shadow-[0_0_12px_rgba(255,0,255,0.4)]`
- Medium: `shadow-[0_0_16px_rgba(255,0,255,0.5)] md:shadow-[0_0_24px_rgba(255,0,255,0.5)]`
- Large: `shadow-[0_0_24px_rgba(255,0,255,0.6)] md:shadow-[0_0_40px_rgba(255,0,255,0.6)]`
- Hover: `hover:shadow-[0_0_32px_rgba(0,255,255,0.7)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-widest uppercase`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
shadow-[0_0_16px_rgba(255,0,255,0.5)]
hover:shadow-[0_0_32px_rgba(0,255,255,0.7)]
transition-all duration-300 ease-in-out
font-bold uppercase
```

Card:
```
rounded-lg
bg-[#0a0a1a]/80
border border-[#ff00ff]/50
shadow-[0_0_16px_rgba(255,0,255,0.5)]
```

Input:
```
rounded-lg
border border-[#a020f0]/50
bg-[#0a0a1a]/60
text-[#00ffff]
focus:shadow-[0_0_20px_rgba(0,255,255,0.6)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-[#f5f0e8]`, `text-black`, `text-gray-900`, `text-[#3a3226]`, `border-black`, `shadow-[2px_2px_0px`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-(?:white|gray-|stone-|amber-|yellow-)`, `^text-(?:black|gray-(?:[7-9])|stone-|amber-)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-transparent
  border-2 border-[#ff00ff]
  text-[#00ffff] font-bold uppercase tracking-wider
  shadow-[0_0_15px_rgba(255,0,255,0.4),inset_0_0_10px_rgba(0,255,255,0.2)]
  hover:border-[#00ffff]
  hover:shadow-[0_0_30px_rgba(0,255,255,0.8),inset_0_0_20px_rgba(255,0,255,0.6)]
  active:scale-90
  active:bg-white active:text-black
  active:shadow-[0_0_50px_#ffffff]
  transition-all duration-200 ease-out
">
  Start
</button>
```

**Card**
```html
<div className="group relative p-8 bg-gradient-to-b from-purple-900/80 to-black/80 border border-[#ff00ff]/50 shadow-[0_0_20px_rgba(255,0,255,0.2)] overflow-hidden cursor-pointer hover:shadow-[0_0_40px_rgba(255,0,255,0.4)] transition-shadow duration-300">
  {/* Virtual grid — shifts on hover (Virtual Grid Shift) */}
  <div className="absolute inset-0 opacity-10 group-hover:opacity-30 group-hover:scale-110 transition-all duration-500" style={{backgroundImage: 'linear-gradient(rgba(255,0,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,255,0.4) 1px, transparent 1px)', backgroundSize: '20px 20px'}} />
  <div className="relative z-10">
    {/* Neon accent bar */}
    <div className="h-[2px] w-8 bg-[#ff00ff] shadow-[0_0_6px_#ff00ff] group-hover:bg-[#00ffff] group-hover:shadow-[0_0_10px_#00ffff] transition-colors duration-300 mb-4" />
    <h3 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#ff00ff] to-[#7b68ee] group-hover:from-white group-hover:to-[#00ffff] transition-all duration-500 mb-3">
      RETRO FUTURE
    </h3>
    <p className="text-pink-200/70">
      Back to the 80s
    </p>
  </div>
</div>
```


---


### 柔和野兽派 (Neo-Brutalist Soft)

**Slug**: `neo-brutalist-soft`

#### Description
A gentler version of Neo-Brutalist. Retains hard-edge shadows and no-rounded-corner characteristics, but uses softer colors, thinner borders, and milder contrast.

#### Design Philosophy
Neo-Brutalist Soft is a gentler variant of the original Neo-Brutalist. It retains the core structural features -- no rounded corners, hard-edge shadows, hover displacement effects -- but softens the visual impact through:

Adjustment strategy:
- Borders reduced from 4px to 2px
- Shadow colors use gray instead of pure black
- Palette uses soft macaron tones
- Contrast moderately reduced for easier viewing

Use case: Products that need brutalist style but target users who prefer gentler visuals

#### Do's (必须做)
1. Keep no rounded corners rounded-none
2. Use thinner borders border-2 border-gray-800 (not pure black)
3. Use gray shadows shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
4. Use softer color versions (e.g., pink-400 instead of #ff006e)
5. Hover shadow disappears + displacement effect retained
6. Use light gray background bg-gray-50 instead of pure white
7. Use dark gray text text-gray-800 instead of pure black

#### Don'ts (禁止做)
1. Do not use rounded corners
2. Do not use blurred shadows shadow-lg
3. Do not use pure black borders border-black
4. Do not use high-saturation pure colors
5. Do not use pure black backgrounds
6. Do not use gradients

#### AI Rules
```
You are a Neo-Brutalist Soft design style frontend development expert. This is the gentler version of Neo-Brutalist.

## Core Retained

- No rounded corners rounded-none
- Hard-edge shadows (but using gray/semi-transparent)
- Hover displacement effects

## Adjustment Rules

Borders:
- Use border-2 (not border-4)
- Use border-gray-800 (not border-black)

Shadows:
- Use shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
- Colored shadows use semi-transparent: rgba(244,114,182,0.4)

Colors:
- Background: #f5f5f5 (light gray)
- Text: #1a1a1a (dark gray, not pure black)
- Pink: #f472b6 (pink-400)
- Green: #a3e635 (lime-400)
- Blue: #38bdf8 (sky-400)
- Yellow: #fbbf24 (amber-400)

## Animation & Interaction Rules

- Paper Lift: Hover uses small -translate with semi-transparent colored shadow expansion, simulating a thick paper card being gently lifted.
- Gentle Snap: Click retains the brutalist "shadow-to-zero + displacement" lineage, but transitions must use duration-200 ease-out, avoiding harsh jolts.
- Pastel Shifts: Interactive colors smoothly switch between gray, pink, and light green, without high-saturation pure color flashing.
- Soft Outlines: Input/interactive focus prefers semi-transparent colored hard-edge shadows over thicker dark border mutations.

## Forbidden

- Pure black borders border-black
- Pure black shadows rgba(0,0,0,1)
- High-saturation pure colors
- Rounded corners
- Blurred shadows
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-gray-800`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[3px_3px_0px_0px_rgba(0,0,0,0.15)]`
- Medium: `shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]`
- Large: `shadow-[6px_6px_0px_0px_rgba(0,0,0,0.2)]`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
border-2 border-gray-800
shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
hover:shadow-none
hover:translate-x-[2px] hover:translate-y-[2px]
transition-all
font-bold
```

Card:
```
rounded-none
border-2 border-gray-800
bg-white
shadow-[4px_4px_0px_0px_rgba(0,0,0,0.15)]
```

Input:
```
rounded-none
border-2 border-gray-800
bg-gray-50
font-mono
text-gray-800
focus:outline-none
focus:shadow-[4px_4px_0px_0px_rgba(56,189,248,0.3)]
transition-shadow
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `border-black`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `bg-gradient-to-r`

Patterns: `^rounded-(?:sm|md|lg|xl|2xl|3xl|full)$`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^bg-gradient-`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  bg-pink-400 text-white font-bold
  px-4 py-2 md:px-6 md:py-3
  border-2 border-gray-800
  shadow-[4px_4px_0px_0px_rgba(0,0,0,0.15)]
  md:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.15)]
  hover:bg-pink-300
  hover:shadow-[6px_6px_0px_0px_rgba(244,114,182,0.35),10px_10px_14px_rgba(244,114,182,0.2)]
  hover:-translate-y-0.5 hover:-translate-x-0.5
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-none
  transition-all duration-200 ease-out
  text-sm md:text-base
">
  柔和按钮
</button>

{/* 次要按钮 */}
<button className="
  bg-gray-50 text-gray-800 font-bold
  px-4 py-2 md:px-6 md:py-3
  border-2 border-gray-800
  shadow-[4px_4px_0px_0px_rgba(0,0,0,0.15)]
  hover:bg-lime-200
  hover:shadow-[6px_6px_0px_0px_rgba(163,230,53,0.3),10px_10px_14px_rgba(163,230,53,0.2)]
  hover:-translate-y-0.5 hover:-translate-x-0.5
  active:translate-x-[4px] active:translate-y-[4px] active:shadow-none
  transition-all duration-200 ease-out
">
  次要按钮
</button>
```

**Card**
```html
<div className="
  group
  bg-white
  border-2 border-gray-800
  shadow-[4px_4px_0px_0px_rgba(0,0,0,0.12)]
  md:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.12)]
  hover:bg-lime-50/70
  hover:shadow-[6px_6px_0px_0px_rgba(163,230,53,0.32),10px_12px_18px_rgba(163,230,53,0.2)]
  md:hover:shadow-[8px_8px_0px_0px_rgba(163,230,53,0.32),12px_14px_20px_rgba(163,230,53,0.2)]
  hover:-translate-y-1
  transition-all duration-300 ease-out
  p-4 md:p-6
">
  <h3 className="font-bold text-lg md:text-xl text-gray-800 mb-2 transition-colors duration-200 group-hover:text-lime-700">卡片标题</h3>
  <p className="font-mono text-sm md:text-base text-gray-600">
    柔和纸张质感，保留野兽派结构但降低冲击感
  </p>
</div>
```


---


### 俏皮野兽派 (Neo-Brutalist Playful)

**Slug**: `neo-brutalist-playful`

#### Description
A lively version of Neo-Brutalist. Retains core characteristics while adding more colors, rotated/tilted elements, icon decorations, and playful micro-interactions -- ideal for youth-oriented brands.

#### Design Philosophy
Neo-Brutalist Playful is a lively variant of the original Neo-Brutalist. While maintaining the hard-edge, no-rounded-corner structural foundation, it adds fun through:

Distinctive elements:
- Slight element rotation rotate-[-2deg] or rotate-[1deg]
- Multi-colored block combinations
- Appropriate use of icons as decoration (Lucide React, etc.)
- More lively hover animations (scale, bounce)
- Handwritten-style decorative text

Use case: Youth-oriented brands, creative studios, children's products, fun applications

#### Do's (必须做)
1. Keep no rounded corners rounded-none
2. Use pure black borders border-4 border-black
3. Add slight rotation to elements rotate-[-2deg] rotate-[1deg]
4. Use multiple accent colors, rich palette
5. Hover can use scale-105 enlargement effect
6. Appropriate use of icon decorations (Lucide React, etc.)
7. Shadows can use colors shadow-[...rgba(255,107,107,1)]

#### Don'ts (禁止做)
1. Do not use rounded corners
2. Do not use blurred shadows
3. Do not use gradients
4. Do not rotate more than 3 degrees
5. Do not use emoji or symbol characters
6. Do not use soft grays

#### AI Rules
```
You are a Neo-Brutalist Playful design style frontend development expert. This is the lively version of Neo-Brutalist.

## Core Retained

- No rounded corners rounded-none
- Thick borders border-4 border-black
- Hard-edge shadows
- Hover displacement effects

## Playful Elements

Rotation:
- Add slight rotation to elements rotate-[-2deg] rotate-[1deg] rotate-[-1deg]
- Never exceed 3 degrees

Colored shadows:
- shadow-[6px_6px_0px_0px_rgba(255,107,107,1)]
- shadow-[6px_6px_0px_0px_rgba(78,205,196,1)]
- Shadow color changes on hover

Colors (multi-colored):
- Red: #ff6b6b
- Teal: #4ecdc4
- Yellow: #ffe66d
- Mint: #95e1d3
- Coral: #f38181

Icons & Decorations:
- Do not use emoji characters
- May use Lucide React line icons as accents
- Decorative elements prefer geometric shapes (squares, dots, lines)

Interaction effects:
- hover:scale-105 enlargement
- hover:-translate-y-2 float up
- transition-all duration-300

## Animation & Interaction Rules

- Toy Spring: Use duration-300 + ease-[cubic-bezier(0.34,1.56,0.64,1)] for spring-bounce displacement and rotation, distinguishing from the original's hard-cut feedback.
- Tilt Exaggeration: Initial slight tilt switches to a larger reverse angle on hover (still within 3 degrees), keeping it playful but controlled.
- Color Ping-Pong: Hard-edge shadows jump between teal, pink, and yellow, maintaining brutalist structure while enhancing toy-like feel.
- Joyful Press: :active needs "squish" feedback: shadow-to-zero + equal displacement + slight scale (active:scale-95).

## Forbidden

- Rounded corners
- Blurred shadows
- Gradients
- Dull/dark colors
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`
- Medium: `shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]`
- Large: `shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `hover:translate-x-[3px] hover:translate-y-[3px]`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-black uppercase`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
border-4 border-black
shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]
hover:shadow-none
hover:translate-x-[3px] hover:translate-y-[3px]
transition-all
font-black
```

Card:
```
rounded-none
border-4 border-black
bg-white
```

Input:
```
rounded-none
border-4 border-black
font-mono
focus:outline-none
focus:shadow-[6px_6px_0px_0px_rgba(78,205,196,1)]
transition-all
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `bg-gradient-to-r`, `bg-gradient-to-b`

Patterns: `^rounded-(?:sm|md|lg|xl|2xl|3xl|full)$`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^bg-gradient-`, `^font-(?:light|thin|normal)$`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative
  bg-[#ff6b6b] text-white font-black
  px-6 py-3 md:px-8 md:py-4
  border-4 border-black
  shadow-[6px_6px_0px_0px_rgba(78,205,196,1)]
  hover:shadow-[8px_8px_0px_0px_rgba(255,230,109,1)]
  hover:-translate-y-1 hover:translate-x-[1px]
  rotate-[-2deg] hover:rotate-[3deg]
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none active:scale-95 active:rotate-0
  transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]
  text-base md:text-lg
">
  <span className="absolute -top-2 -right-2 h-3 w-3 border-2 border-black bg-[#ffe66d] transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:translate-x-1 group-hover:-translate-y-1" />
  <span className="absolute -bottom-2 -left-2 h-3 w-3 border-2 border-black bg-[#4ecdc4] transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:-translate-x-1 group-hover:translate-y-1" />
  <span className="relative z-10">点我呀</span>
</button>
```

**Card**
```html
<div className="
  group
  bg-white
  border-4 border-black
  shadow-[8px_8px_0px_0px_rgba(78,205,196,1)]
  hover:shadow-[12px_12px_0px_0px_rgba(255,107,107,1)]
  hover:-translate-y-2 hover:rotate-[2deg]
  transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]
  p-6 md:p-8
  rotate-[-1deg]
  cursor-pointer
">
  <div className="mb-4 flex items-center gap-2">
    <div className="h-4 w-4 bg-[#ff6b6b] border-2 border-black transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:scale-125" />
    <div className="h-4 w-4 bg-[#4ecdc4] border-2 border-black transition-transform duration-300 delay-75 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:-translate-y-2" />
    <div className="h-4 w-4 bg-[#ffe66d] border-2 border-black transition-transform duration-300 delay-150 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:rotate-45" />
  </div>
  <h3 className="font-black text-xl md:text-2xl mb-2 group-hover:text-[#ff6b6b] transition-colors duration-200">有趣的卡片</h3>
  <p className="font-mono text-sm md:text-base text-black/80">
    带有弹簧感位移与彩色阴影跳跃的俏皮交互
  </p>
</div>
```


---


### 新艺术运动风 (Art Nouveau)

**Slug**: `art-nouveau`

#### Description
Organic curve aesthetics from the late 19th century, characterized by flowing vine patterns, natural floral elements, Mucha-style poster decorations, and elegant serif typography -- conveying the harmony of nature and art.

#### Design Philosophy
Art Nouveau is an international art movement from the late 19th to early 20th century, drawing inspiration from organic forms in nature and pushing decorative art to its zenith.

Core principles:
- Organic curves: Flowing lines inspired by plants and flowers
- Unity with nature: Harmonious fusion of art and nature
- Holistic design: A unified aesthetic from architecture to furniture to posters
- Beauty of ornamentation: Exquisite decorative patterns endow functional objects with artistic value
- Growth rhythm: Interactions should be slow, soft, and organic like plant growth

#### Do's (必须做)
1. Use organic curves and flowing lines
2. Use deep green, gold, and ivory white as primary colors
3. Add vine, floral, and other natural decorative elements
4. Use serif or decorative fonts
5. Maintain an elegant and refined overall quality
6. Rounded corners and soft transitions
7. Use duration-500 or duration-700 with ease-in-out for natural rhythm
8. Soft glow expansion on hover (shadow grows larger and softer)
9. Decorative elements slightly scale up or rotate on hover, like flowers blooming

#### Don'ts (禁止做)
1. Do not use rigid right angles and geometric shapes
2. Do not use neon or high-saturation modern colors
3. Do not use rough undecorated design
4. Do not use modern sans-serif fonts for headings
5. Do not use short abrupt duration-150 or duration-200
6. Do not use hard-edge shadows (shadow-[Xpx_Ypx_0])

#### AI Rules
```
You are an Art Nouveau design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rigid right angles and sharp geometric shapes
- Neon or high-saturation modern colors
- Sans-serif fonts for headings
- Dark/black backgrounds
- Short duration-150 or duration-200
- Hard-edge shadows (shadow-[Xpx_Ypx_0px_color])

## Must Follow

- Use organic curves and rounded corners rounded-full, rounded-3xl
- Deep green #2d5016 as primary, gold #c9a227 as accent
- Ivory white #f5f0e1 as background
- Use font-serif serif fonts
- Add soft shadows and glow effects

## Animation & Interaction Rules

- Organic Flow: Animations must flow naturally like plant growth. Use duration-500 or duration-700 with smooth ease-in-out.
- Soft Glow: Hover glow should expand softly outward (shadow grows from small to large, shallow to deep), avoiding rigid displacement.
- Decorative Flourishes: Decorative elements produce slight scaling or rotation on hover (scale(1.1) rotate(5deg)), like flowers blooming.
- Radial Highlight: Cards produce corner glow via radial-gradient pseudo-element on hover (opacity 0 -> 100).
- Gentle Float: Cards float slightly upward on hover -translate-y-1, paired with shadow expansion.

## Color Palette

Primary:
- Deep Green: #2d5016
- Gold: #c9a227
- Ivory White: #f5f0e1
- Wisteria: #8b6db5

## Special Elements

- Organic curve SVG decorations
- Vine and floral patterns
- Gold borders and glow
- Elegant gradient transitions
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#c9a227]/60`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-lg`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wide`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-full
font-serif
border-2 border-[#c9a227]
transition-all duration-300 ease-in-out
```

Card:
```
rounded-2xl
bg-[#f5f0e1]
border-2 border-[#c9a227]/60
shadow-md
```

Input:
```
rounded-full
border-2 border-[#c9a227]/40
bg-[#f5f0e1]
text-[#2d5016]
focus:border-[#c9a227]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-black`, `bg-gray-900`, `bg-[#0a0a1a]`, `text-[#ff00ff]`, `text-[#00ffff]`, `shadow-[0_0_16px_rgba(255,0,255`, `border-[#ff00ff]`, `border-[#00ffff]`, `uppercase`

Patterns: `^bg-(?:black|gray-9|\[#0a)`, `^text-\[#(?:ff00ff|00ffff)`, `^shadow-\[0_0_\d+px_rgba\((?:255,0,255|0,255,255)`, `^border-\[#(?:ff00ff|00ffff)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group px-8 py-4
  bg-[#2d5016] text-[#f5f0e1]
  border border-[#c9a227]
  rounded-full font-serif tracking-wide
  shadow-[0_4px_15px_rgba(45,80,22,0.2)]
  hover:bg-[#c9a227] hover:text-[#2d5016]
  hover:shadow-[0_8px_25px_rgba(201,162,39,0.4)]
  active:scale-[0.98]
  transition-all duration-500 ease-in-out
">
  <span className="flex items-center gap-2">
    Explore <span className="inline-block group-hover:translate-x-1 transition-transform duration-500">&rarr;</span>
  </span>
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#f5f0e1]
  border border-[#c9a227]/40
  rounded-3xl
  shadow-[0_4px_20px_rgba(139,109,181,0.05)]
  hover:border-[#c9a227]
  hover:shadow-[0_12px_30px_rgba(139,109,181,0.15)]
  hover:-translate-y-1
  transition-all duration-700 ease-in-out
  relative overflow-hidden
">
  <div className="absolute top-0 right-0 w-32 h-32 bg-[radial-gradient(circle_at_top_right,rgba(201,162,39,0.15),transparent)] opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
  <h3 className="text-2xl font-serif text-[#2d5016] mb-3 group-hover:text-[#c9a227] transition-colors duration-500">
    Nature's Beauty
  </h3>
  <p className="text-[#2d5016]/70 font-serif group-hover:text-[#2d5016]/90 transition-colors duration-500">
    Where art meets organic form in elegant harmony.
  </p>
</div>
```


---


### 超现实主义风 (Surrealism)

**Slug**: `surrealism`

#### Description
Inspired by surrealist masters like Dali -- dreamlike scene compositions, illogical spatial relationships, melting and morphing forms, and unexpected color combinations create a mysterious and captivating visual experience.

#### Design Philosophy
Surrealism is an early 20th-century art movement dedicated to unleashing the creative power of the subconscious, breaking the boundaries between the rational and irrational.

Core principles:
- Dream logic: Visual narratives that transcend reality
- Unexpected juxtaposition: Wondrous combinations of unrelated elements
- Morphing fluidity: Melting, distorted forms
- Subconscious exploration: Visual expression of deep psychology

#### Do's (必须做)
1. Use midnight blue and desert gold palette
2. Create dreamlike soft gradients
3. Use unexpected element combinations
4. Add soft shadows for depth
5. Use serif fonts and italics
6. Maintain a mysterious yet elegant atmosphere
7. Dream-like Distortion: hover applies subtle geometric reality-bending `hover:skew-x-2 hover:-rotate-1` -- as if the element is being pulled through a dream portal
8. Timeless Easing: all transitions use `duration-700 ease-in-out` or `duration-1000 ease-in-out` -- surrealist time is elastic, never hurried
9. Abyssal Glow: hover shadow uses large diffuse rose/gold `hover:shadow-[0_0_50px_rgba(195,141,148,0.3)]` -- light emerges from deep within, never black drop shadows
10. Color Melting: blurred orb decorations expand on hover `group-hover:scale-150 transition-transform duration-[2000ms]` -- colors slowly bleed and melt across the canvas

#### Don'ts (禁止做)
1. Do not use overly bright pure colors
2. Do not use strictly symmetrical grid layouts
3. Do not use modern minimalist undecorated design
4. Do not use harsh neon colors
5. Do not use `hover:scale-105` (surrealism uses `skew` and `rotate` to distort reality, not scaling)
6. Do not use black drop shadows (Abyssal Glow uses rose/gold diffuse glow -- black shadows break the dream feel)
7. Do not use `duration-200` or shorter transitions (Timeless Easing requires `duration-700` or above -- dream time is elastic)
8. Do not use `transition-none` on card decorative orbs (Color Melting requires slow `duration-[2000ms]` expansion)

#### AI Rules
```
You are a Surrealism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Pure white backgrounds
- Strictly symmetrical grid layouts
- Bright neon colors
- Overly regular geometric shapes

## Must Follow

- Midnight blue #1a1a3e as dark base tone
- Desert gold #d4a574 and rose pink #c38d94 as accent colors
- Cream white #f0ece4 as light background
- Use font-serif italic for a dreamy feel
- Soft gradients and blurred glow effects

## Color Palette

Primary:
- Midnight Blue: #1a1a3e
- Desert Gold: #d4a574
- Rose Pink: #c38d94
- Cream White: #f0ece4

## Special Elements

- Blurred glow background decorations
- Asymmetric layouts and organic shapes
- Soft transition animations (duration-500)
- Unexpected color gradient combinations

## Animation & Interaction Rules

- Dream-like Distortion: Hover applies geometric reality-bending `hover:skew-x-2 hover:-rotate-1` -- as if the element is being pulled through a dream portal. Never use `hover:scale-105` alone; distortion (skew/rotate) is how surrealism deforms reality.
- Timeless Easing: All transitions use `duration-700 ease-in-out` minimum, preferring `duration-1000 ease-in-out` -- surrealist time is elastic. Never use `duration-200` or faster; urgency is a rational concept.
- Abyssal Glow: Hover shadow uses large diffuse rose/gold `hover:shadow-[0_0_50px_rgba(195,141,148,0.3)]` -- light wells up from within the dream. Never use black drop shadows; they belong to the rational world.
- Color Melting: Blurred orb decorations slowly expand `group-hover:scale-150 transition-transform duration-[2000ms] ease-in-out` -- colors bleed across the canvas over 2 full seconds. The expanding underline `group-hover:w-full transition-all duration-1000` and heading `group-hover:tracking-widest transition-all duration-1000` melt together.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4a574]/30`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-md`
- Medium: `shadow-lg`
- Large: `shadow-xl`
- Hover: `hover:shadow-[0_12px_40px_rgba(26,26,62,0.2)]`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-serif italic`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-lg
font-serif italic
shadow-lg
transition-all duration-500 ease-in-out
```

Card:
```
rounded-2xl
bg-gradient-to-br from-[#f0ece4] to-[#f0ece4]/80
border border-[#d4a574]/30
shadow-lg
```

Input:
```
rounded-lg
border border-[#d4a574]/40
bg-[#f0ece4]
text-[#1a1a3e]
focus:border-[#c38d94]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-white`, `bg-gray-50`, `shadow-[0_0_16px_rgba(255,0,255`, `text-[#ff00ff]`, `text-[#00ffff]`, `border-[#ff00ff]`, `uppercase tracking-widest`, `font-bold`

Patterns: `^bg-(?:white|gray-5)`, `^text-\[#(?:ff00ff|00ffff|00ff00)`, `^shadow-\[0_0_\d+px_rgba\((?:255,0,255|0,255,255)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `meltingFrame`, `dreamPanel`, `eyeBadge`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-gradient-to-br from-[#1a1a3e] to-[#c38d94]
  text-[#f0ece4] font-serif italic tracking-wide
  border border-[#d4a574]/50
  rounded-[40%_60%_70%_30%/30%_30%_70%_70%]
  shadow-[0_4px_20px_rgba(195,141,148,0.2)]
  hover:shadow-[0_0_50px_rgba(195,141,148,0.3)]
  hover:-translate-y-1 hover:skew-x-2 hover:-rotate-1
  active:translate-y-1 active:skew-x-0 active:rotate-0
  transition-all duration-1000 ease-in-out
">
  Enter the Dream
</button>
```

**Card**
```html
<div className="group relative p-8 bg-gradient-to-br from-[#f0ece4] to-[#f0ece4]/80 border border-[#d4a574]/30 rounded-2xl overflow-hidden hover:shadow-[0_0_50px_rgba(195,141,148,0.3)] hover:-translate-y-1 hover:skew-x-1 transition-all duration-700 ease-in-out cursor-pointer">
  {/* Melting orb — gold */}
  <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-[#d4a574]/20 blur-2xl group-hover:scale-150 transition-transform duration-[2000ms] ease-in-out" />
  {/* Melting orb — rose */}
  <div className="absolute -bottom-8 -left-8 w-24 h-24 rounded-full bg-[#c38d94]/20 blur-2xl group-hover:scale-150 transition-transform duration-[2000ms] ease-in-out" />
  <div className="relative z-10">
    <h3 className="text-2xl font-serif italic text-[#1a1a3e] mb-1 group-hover:tracking-widest transition-all duration-1000 ease-in-out">
      The Persistence of Memory
    </h3>
    <div className="h-px bg-[#d4a574] w-8 group-hover:w-full transition-all duration-1000 ease-in-out mb-4 mt-2" />
    <p className="text-[#1a1a3e]/60 font-serif">
      Time melts in the desert of consciousness
    </p>
  </div>
</div>
```


---


### 浮世绘数字风 (Ukiyo-e Digital)

**Slug**: `ukiyo-e-digital`

#### Description
Inspired by Japanese ukiyo-e woodblock prints, featuring indigo, vermilion, and gold leaf as primary colors, flat design, bold outlines, wave patterns, and Hokusai-style composition -- blending traditional Eastern aesthetics into modern digital interfaces.

#### Design Philosophy
Ukiyo-e Digital transforms Edo-period woodblock print art into a modern digital design language, preserving its distinctive flat perspective and color-blocking techniques.

Core principles:
- Flat perspective: Layered composition without depth
- Color blocking: Large areas of solid color fill with bold outlines
- Natural imagery: Decorative expression of waves, mountains, flowers, and birds
- Eastern charm: Aesthetic pursuit of subtlety, negative space, and artistic conception

#### Do's (必须做)
1. Use indigo, vermilion, and gold leaf as primary colors
2. Adopt flat design with bold outlines
3. Use hard-edge shadows to simulate woodblock print texture
4. Add wave and natural pattern decorations
5. Rice white background for washi paper texture
6. Use bold text with wide letter spacing
7. Hover uses woodblock offset: hard-edge offset shadow + slight displacement, no blur
8. Active simulates stamp press: cancel shadow and switch to vermilion border/text feedback
9. Interaction rhythm stays short and hard-cut (duration-75~100, ease-linear)

#### Don'ts (禁止做)
1. Do not use gradient shadows or soft blur
2. Do not use transparency and glass effects
3. Do not use Western-style rounded corners and circular buttons
4. Do not use neon or high-saturation modern colors
5. Do not use spring-bounce or modern app silky-smooth animations
6. Do not use soft shadows and glassmorphism that break the woodblock's crisp texture

#### AI Rules
```
You are a Ukiyo-e Digital design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Gradient shadows or soft blur effects
- Transparency and glassmorphism
- Large rounded corners or circular buttons
- Neon or high-saturation modern colors

## Must Follow

- Indigo #1a3055 as primary, vermilion #d4553a as accent
- Rice white #f5f0e1 as background (washi paper texture)
- Use hard-edge shadows shadow-[Xpx_Ypx_0px_color]
- Use small rounded corners rounded-sm or sharp corners
- Bold borders border-2 for woodblock outline feel

## Color Palette

Primary:
- Indigo: #1a3055
- Vermilion: #d4553a
- Gold Leaf: #c9a227
- Rice White: #f5f0e1

## Special Elements

- Wave pattern SVG decorations
- Hard-edge shadows simulating woodblock print texture
- Vermilion seal/stamp effect decorations
- Large flat color blocks

## Animation & Interaction Rules

- Woodblock Offset: Hover must use hard-edge offset shadow (no blur) + slight displacement, simulating woodblock misregistration overprint.
- Stamp Press: Active instantly cancels shadow and displacement, switching to vermilion border/text feedback to represent stamp pressing.
- Zero Fluidity: Use duration-75 ease-linear or transition-none, rejecting modern silky-smooth animations.
- Motif Reveal: Traditional patterns like waves/clouds can use opacity hard-cut on hover to reinforce layout hierarchy.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#1a3055]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[2px_2px_0px_#1a3055]`
- Medium: `shadow-[4px_4px_0px_#1a3055]`
- Large: `shadow-[6px_6px_0px_#1a3055]`
- Hover: `hover:shadow-[6px_6px_0px_#1a3055]`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-wider`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-sm
border-2
shadow-[3px_3px_0px_#1a3055]
font-bold tracking-wider
transition-all duration-300 ease-in-out
```

Card:
```
rounded-sm
bg-[#f5f0e1]
border-2 border-[#1a3055]
shadow-[4px_4px_0px_#1a3055]
```

Input:
```
rounded-sm
border-2 border-[#1a3055]/60
bg-[#f5f0e1]
text-[#1a3055]
focus:border-[#d4553a]
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `rounded-2xl`, `rounded-xl`, `rounded-lg`, `bg-gradient-to-r`, `bg-gradient-to-br`, `backdrop-blur`, `backdrop-blur-sm`, `backdrop-blur-md`, `shadow-[0_0_16px_rgba`

Patterns: `^rounded-(?:full|2xl|xl|lg)`, `^bg-gradient`, `^backdrop-blur`, `^shadow-\[0_0_\d+px_rgba`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `woodblockPanel`, `hankoSeal`, `waveDivider`, `inkProgress`, `seasonalTab`, `brushHeading`, `layeredMountain`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3
  bg-[#d4553a] text-[#f5f0e1]
  border-[3px] border-[#1a3055]
  rounded-none font-bold tracking-widest uppercase
  shadow-[4px_4px_0px_#1a3055]
  hover:shadow-[8px_8px_0px_#1a3055]
  hover:-translate-y-1 hover:-translate-x-1
  active:shadow-none
  active:translate-y-[4px] active:translate-x-[4px]
  active:border-[#d4553a]
  transition-all duration-75 ease-linear
">
  Enter Domain
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#f5f0e1]
  border-[3px] border-[#1a3055]
  rounded-none
  shadow-[6px_6px_0px_#1a3055]
  hover:shadow-[12px_12px_0px_#d4553a]
  hover:-translate-y-1.5 hover:-translate-x-1.5
  transition-all duration-100 ease-linear
  cursor-pointer
  relative overflow-hidden
">
  <div className="absolute top-4 right-4 w-8 h-8 border-[3px] border-[#d4553a] text-[#d4553a] flex items-center justify-center font-bold opacity-80 group-hover:opacity-100 group-hover:bg-[#d4553a] group-hover:text-[#f5f0e1] transition-colors duration-75">
    印
  </div>

  <h3 className="text-3xl font-black text-[#1a3055] tracking-widest mb-4 mt-2 group-hover:text-[#d4553a] transition-colors duration-75">
    GREAT WAVE
  </h3>
  <div className="w-16 h-1 bg-[#1a3055] mb-5 group-hover:bg-[#d4553a] transition-colors duration-75" />
  <p className="text-[#1a3055] font-bold leading-relaxed pr-8">
    Beneath the shadow of the mountain, the digital woodblock breathes. Hard edges, flat colors, and deliberate imperfections.
  </p>
</div>
```


---


### 哥特式风 (Gothic)

**Slug**: `gothic`

#### Description
Medieval Gothic architectural aesthetics -- pointed arches, rose windows, manuscript decorations, and cathedral atmosphere. Deep purple and blood red palette with gold ornamental lines, filled with dark and solemn mystery.

#### Design Philosophy
Gothic design draws inspiration from late medieval cathedral architecture and manuscript illumination art, emphasizing vertical lines, pointed arch structures, and intricate decorative patterns.

Core principles:
- Cathedral aesthetics: The structural beauty of pointed arches, flying buttresses, and rose windows
- Dark solemnity: Deep tones create a mysterious and solemn atmosphere
- Gold accents: Gold ornamental lines and details highlight a sense of luxury
- Manuscript style: Elaborate decorative borders and calligraphic lettering

#### Do's (必须做)
1. Use deep purple, blood red, and black as primary colors
2. Add gold ornamental lines and borders
3. Use serif fonts to convey classical feel
4. Create a dark, mysterious atmosphere
5. Use pointed arch shapes and Gothic patterns
6. Add intricate decorative patterns
7. Interactions focus on slow light-and-shadow enhancement, maintaining solemn gravitas

#### Don'ts (禁止做)
1. Do not use bright cheerful colors
2. Do not use round cute elements
3. Do not use modern sans-serif fonts for main headings
4. Do not use overly minimalist design
5. Do not use rapid jitter, elastic bounce, or other frivolous animations

#### AI Rules
```
You are a Gothic design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Cheerful, cute design elements
- Sans-serif fonts for main headings
- Large rounded corners

## Must Follow

- Deep purple, blood red, black palette bg-[#2d1b4e], bg-[#8b1a1a], bg-[#0a0a0a]
- Gold decorations text-[#c9a227], border-[#c9a227]
- Serif fonts font-serif
- Dark backgrounds bg-[#0a0a0a]
- Intricate border decorations

## Color Palette

Primary:
- Deep Purple: #2d1b4e
- Blood Red: #8b1a1a
- Pure Black: #0a0a0a
- Gold: #c9a227

## Special Elements

- Pointed arch shapes
- Gold ornamental lines
- Intricate borders
- Rose window patterns

## Animation & Interaction Rules

- Cathedral Weight: No frivolous bouncing or rapid displacement; interactions should focus on slow changes in light, shadow, and color gradation.
- Divine Illumination: Gold borders and text slowly intensify their glow on hover, simulating candlelight and divine halos.
- Stone Mechanism: `:active` enhances press resistance through deep inner shadows rather than conventional scale feedback.
- Eternal Slowness: Animations should use `duration-500` to `duration-700` with `ease-in-out`, maintaining solemn gravitas.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#c9a227]/40`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(10,10,10,0.6)]`
- Medium: `shadow-[0_4px_16px_rgba(10,10,10,0.7)]`
- Large: `shadow-[0_8px_30px_rgba(10,10,10,0.8)]`
- Hover: `hover:shadow-[0_6px_24px_rgba(201,162,39,0.4)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wider uppercase`
- Body: `font-serif`

**Required Classes**

Button:
```
border-2
border-[#c9a227]/60
font-serif
transition-all duration-300 ease-in-out
```

Card:
```
bg-[#0a0a0a]/90
border-2 border-[#c9a227]/40
shadow-[0_4px_20px_rgba(10,10,10,0.8)]
```

Input:
```
border-2 border-[#c9a227]/30
bg-[#0a0a0a]/80
text-[#c9a227]
font-serif
focus:border-[#c9a227]
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-pink-`, `text-green-`, `text-blue-`

Patterns: `^rounded-(?:full|xl|2xl|3xl)$`, `^bg-(?:white|gray-|pink-|green-|blue-)`, `^text-(?:pink-|green-|blue-)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `stonePanel`, `shieldBadge`, `waxSeal`, `traceryDivider`, `illuminatedInitial`, `parchmentCard`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-[#0a0a0a]
  border border-[#c9a227]/40
  text-[#c9a227] font-serif uppercase tracking-[0.2em]
  shadow-[0_4px_20px_rgba(10,10,10,0.9),inset_0_0_0_1px_rgba(201,162,39,0.1)]
  hover:bg-[#2d1b4e]/30
  hover:border-[#c9a227]
  hover:text-[#dfc266]
  hover:shadow-[0_0_30px_rgba(201,162,39,0.2),inset_0_0_10px_rgba(201,162,39,0.1)]
  active:bg-[#000000]
  active:shadow-[inset_0_10px_20px_rgba(0,0,0,0.9)]
  transition-all duration-700 ease-in-out
">
  Enter Sanctum
</button>
```

**Card**
```html
<div className="group relative p-10
  bg-gradient-to-b from-[#111111] to-[#0a0a0a]
  border border-[#c9a227]/20
  shadow-[0_10px_40px_rgba(0,0,0,0.9)]
  hover:border-[#c9a227]/60
  hover:shadow-[0_0_40px_rgba(45,27,78,0.6)]
  transition-all duration-700 ease-in-out
  overflow-hidden
">
  <div className="absolute top-0 left-0 w-8 h-8 border-t border-l border-[#c9a227]/10 group-hover:border-[#c9a227]/80 transition-colors duration-700" />
  <div className="absolute top-0 right-0 w-8 h-8 border-t border-r border-[#c9a227]/10 group-hover:border-[#c9a227]/80 transition-colors duration-700" />

  <h3 className="text-3xl font-serif text-[#c9a227]/80 mb-4 tracking-widest uppercase group-hover:text-[#dfc266] group-hover:drop-shadow-[0_0_8px_rgba(201,162,39,0.4)] transition-all duration-700">
    CATHEDRAL
  </h3>
  <div className="w-12 h-px bg-[#8b1a1a]/50 mb-6 group-hover:w-full group-hover:bg-[#8b1a1a] transition-all duration-1000 ease-in-out" />
  <p className="text-[#c9a227]/50 font-serif leading-relaxed group-hover:text-[#c9a227]/80 transition-colors duration-700">
    In the shadow of the spire, where crimson light bleeds through rose windows onto the cold marble floor.
  </p>
</div>
```


---


### Outrun 复古未来 (Outrun)

**Slug**: `outrun`

#### Description
80s sunsets, palm tree silhouettes, sports cars, grid horizons, and retro wave aesthetics. Magenta and purple neon with cyan skies -- brimming with speed and nostalgic futurism.

#### Design Philosophy
Outrun is a visual aesthetic rooted in 80s pop culture, named after the eponymous video game. It fuses sunsets, sports cars, palm trees, and neon lights into an eternal retro-futuristic visual language.

Core principles:
- Sunset drive: An eternal road trip under the orange-pink-purple sunset sky
- Neon speed: Magenta and purple neon lights expressing speed and passion
- Grid horizon: Perspective grid floor extending toward an infinite horizon
- Palm silhouettes: Black palm trees set against gradient skies

#### Do's (必须做)
1. Use magenta, purple, and cyan neon palette
2. Add sunset gradient sky background
3. Use perspective grid floor effect
4. Add neon glow effects
5. Use bold sans-serif fonts
6. Add palm tree or sports car silhouette elements
7. Interactions layer dual neon glow: hover:shadow-[0_0_20px_#ff006e,0_0_40px_#00d4ff] (Dual Neon Glow)
8. Grid or scanlines use bg-position shift on hover to create a rushing-toward-horizon feel (Perspective Drive)
9. Active state includes slight screen flash (active:bg-[#ff006e]/20) with short press feedback

#### Don'ts (禁止做)
1. Do not use bright white backgrounds
2. Do not use modern minimalist style
3. Do not omit neon glow effects
4. Do not use soft low-saturation palette
5. Do not use single-color glow only (Outrun must have magenta+cyan chromatic dispersion layers)
6. Do not use completely static grid backgrounds (lacking speed illusion loses the style's core)

#### AI Rules
```
You are an Outrun retro-futuristic design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Modern minimalist design
- Omitting neon glow effects
- Formal fonts

## Must Follow

- Magenta-purple-cyan palette from-[#ff006e], from-[#a020f0], text-[#00d4ff]
- Dark backgrounds bg-[#0a0a0a]
- Neon glow shadow-[0_0_20px_rgba(255,0,110,0.5)]
- Grid background decorations
- Sunset gradient from-[#ff6b35] via-[#ff006e] to-[#a020f0]

## Color Palette

Primary:
- Magenta: #ff006e
- Purple: #a020f0
- Cyan: #00d4ff
- Black: #0a0a0a
- Orange: #ff6b35

## Special Elements

- Perspective grid floor
- Sunset sun
- Palm tree silhouettes
- Scanline effects

## Animation & Interaction Rules

- Perspective Drive: Grid or scanlines create a high-speed forward-rush illusion through bg-position shift on hover.
- Dual Neon Glow: Hover glow layers at least magenta and cyan dual shadows for retro neon chromatic dispersion.
- CRT Jitter: Active state allows brief flashing and slight press-down, simulating vintage screen feedback.
- Horizon Tilt: Card interactions can pair with very slight lift and bottom light band enhancement for horizon momentum.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#ff006e]/50`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(255,0,110,0.4)] md:shadow-[0_0_12px_rgba(255,0,110,0.4)]`
- Medium: `shadow-[0_0_16px_rgba(255,0,110,0.5)] md:shadow-[0_0_24px_rgba(255,0,110,0.5)]`
- Large: `shadow-[0_0_24px_rgba(255,0,110,0.6)] md:shadow-[0_0_40px_rgba(255,0,110,0.6)]`
- Hover: `hover:shadow-[0_0_32px_rgba(0,212,255,0.7)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-widest uppercase`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
shadow-[0_0_16px_rgba(255,0,110,0.5)]
hover:shadow-[0_0_32px_rgba(0,212,255,0.7)]
transition-all duration-300 ease-in-out
font-bold uppercase
```

Card:
```
rounded-lg
bg-[#0a0a0a]/80
border border-[#ff006e]/50
shadow-[0_0_16px_rgba(255,0,110,0.4)]
```

Input:
```
rounded-lg
border border-[#a020f0]/50
bg-[#0a0a0a]/60
text-[#00d4ff]
focus:shadow-[0_0_20px_rgba(0,212,255,0.6)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-[#f5f0e8]`, `text-black`, `text-gray-900`, `border-black`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`

Patterns: `^rounded-none$`, `^shadow-\[\d+px_\d+px_0px`, `^bg-(?:white|gray-|stone-|amber-|yellow-)`, `^text-(?:black|gray-(?:[7-9])|stone-|amber-)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `neonGlowPanel`, `chromeText`, `sunsetProgress`, `neonToggle`, `vhsBadge`, `gridDivider`


#### Component Examples

**Button**
```html
<button className="
  group relative px-10 py-4
  bg-gradient-to-b from-[#110022] to-[#0a0a0a]
  text-[#00d4ff] font-black uppercase tracking-[0.2em]
  rounded-sm
  border border-[#ff006e]
  shadow-[0_0_15px_rgba(255,0,110,0.5)]
  hover:text-white hover:border-[#00d4ff]
  hover:shadow-[0_0_25px_rgba(0,212,255,0.8),inset_0_0_15px_rgba(255,0,110,0.4)]
  active:scale-95 active:bg-[#ff006e]/20
  transition-all duration-300
  overflow-hidden
">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,#ff006e_2px,#ff006e_4px)] opacity-10 group-hover:[background-position:0_8px] transition-all duration-300" />
  <span className="relative z-10 drop-shadow-[0_0_5px_currentColor]">Drive</span>
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-[#0a0a0a]/90
  rounded-sm
  border-t border-[#ff006e]/50
  border-b-4 border-b-[#00d4ff]/80
  shadow-[0_0_30px_rgba(255,0,110,0.2)]
  hover:shadow-[0_10px_40px_rgba(0,212,255,0.4)]
  hover:-translate-y-1
  transition-all duration-300
  backdrop-blur-md overflow-hidden cursor-crosshair
">
  <div className="absolute bottom-0 left-0 w-full h-1/2 bg-[linear-gradient(transparent_50%,rgba(0,212,255,0.2)_50%)] bg-[length:100%_4px] opacity-30 group-hover:opacity-60 group-hover:[background-position:0_12px] transition-all duration-500 [transform:perspective(100px)_rotateX(60deg)]" />
  <div className="relative z-10">
    <div className="w-12 h-12 rounded-full bg-gradient-to-b from-[#ff6b35] via-[#ff006e] to-[#a020f0] mb-4 shadow-[0_0_15px_rgba(255,107,53,0.6)] group-hover:scale-110 group-hover:shadow-[0_0_25px_rgba(255,107,53,0.8)] transition-all duration-300" />
    <h3 className="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-[#00d4ff] mb-2 tracking-wider">
      NIGHT CITY
    </h3>
    <p className="text-[#ff006e] font-mono text-sm uppercase tracking-widest group-hover:text-[#ff6b35] transition-colors">
      &gt; Grid simulation active
    </p>
  </div>
</div>
```


---


### 暗黑学院风 (Dark Academia)

**Slug**: `dark-academia`

#### Description
Classical university libraries, leather-bound books, classical literature, and vintage campus aesthetics. Deep brown and dark green palette with antique gold accents -- a warm and contemplative scholarly atmosphere.

#### Design Philosophy
Dark Academia is an aesthetic movement centered on classical education, literature, and architecture, blending Greco-Roman culture, Gothic architecture, and Victorian-era scholarly atmosphere.

Core principles:
- Scholarly classicism: The solemn beauty of classical university buildings and libraries
- Literary atmosphere: The romance of leather-bound antique books and handwritten scripts
- Warm serenity: Earth tones create a warm yet introspective atmosphere
- Knowledge worship: The ultimate reverence for learning, reading, and wisdom

#### Do's (必须做)
1. Use deep brown, dark green, and antique gold as primary colors
2. Use cream white as background or text base color
3. Use serif fonts to convey classical scholarly feel
4. Create a warm, serene, and introspective atmosphere
5. Use subtle shadows and borders
6. Add paper texture or leather texture hints

#### Don'ts (禁止做)
1. Do not use vivid neon colors
2. Do not use modern tech-feel design
3. Do not use overly flashy animation effects
4. Do not use cold blue-gray tones

#### AI Rules
```
You are a Dark Academia design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Vivid neon colors
- Modern tech-feel design
- Overly flashy animation effects
- Cold blue-gray tones

## Must Follow

- Deep brown and dark green palette bg-[#3d2b1f], bg-[#2d4a3e]
- Antique gold decorations text-[#8b7355], border-[#8b7355]
- Cream white background bg-[#f5f0e1]
- Serif fonts font-serif
- Subtle shadows shadow-sm
- Warm atmosphere

## Color Palette

Primary:
- Deep Brown: #3d2b1f
- Dark Green: #2d4a3e
- Antique Gold: #8b7355
- Cream White: #f5f0e1
- Dark Umber: #5c4033

## Special Elements

- Paper texture backgrounds
- Book spine decorative lines
- Classical divider lines
- Serif typography

## Animation & Interaction Rules

- Library Stillness: No jumping, scaling, or any frivolous displacement (like `translate`). The interface should maintain the composure of ancient tomes.
- Candlelight Reveal: Hover may use extremely soft radial glow or inner shadow changes, simulating candlelight approaching -- brightness changes must be restrained.
- Antique Slowness: Transitions should use `duration-700` to `duration-1000` with `ease-in-out` for a weighty sense of time.
- Ink & Gold: Text and decorative lines transition slowly between ink black and antique gold, without high-contrast flashing or sudden inversions.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#8b7355]/30`
- Radius: `rounded`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wide`
- Body: `font-serif leading-relaxed`

**Required Classes**

Button:
```
rounded
font-serif
border border-[#8b7355]/60
transition-all duration-300 ease-in-out
shadow-sm
```

Card:
```
rounded
bg-[#f5f0e1]
border border-[#8b7355]/30
shadow-sm
```

Input:
```
rounded
border border-[#8b7355]/30
bg-[#f5f0e1]/80
text-[#3d2b1f]
font-serif
focus:border-[#8b7355]
focus:outline-none
```

**Forbidden**

Classes: `bg-[#0a0a0a]`, `bg-black`, `text-[#ff00ff]`, `text-[#00ffff]`, `shadow-[0_0_`, `bg-[#ff`, `bg-[#00ff`, `text-pink-`, `text-cyan-`, `text-purple-`

Patterns: `^shadow-\[0_0_\d+px_rgba`, `^bg-\[#(?:ff|00ff)`, `^text-(?:pink|cyan|purple)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `leatherPanel`, `waxSealBadge`, `bookSpineTab`, `fleuronDivider`, `readingProgress`, `manuscriptCard`, `candleGlow`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-[#3d2b1f]
  border border-[#8b7355]/45
  text-[#f5f0e1]/85 font-serif tracking-[0.15em]
  rounded-sm
  shadow-[0_4px_10px_rgba(61,43,31,0.2)]
  hover:bg-[#322317]
  hover:text-[#f5f0e1]
  hover:border-[#8b7355]/80
  hover:shadow-[0_8px_18px_rgba(61,43,31,0.35)]
  active:bg-[#24190f]
  transition-all duration-700 ease-in-out
">
  Read More
</button>
```

**Card**
```html
<div className="group relative p-10
  bg-[#f5f0e1]
  border border-[#8b7355]/25
  rounded-sm
  shadow-[inset_0_0_35px_rgba(139,115,85,0.05),0_4px_14px_rgba(61,43,31,0.05)]
  hover:border-[#8b7355]/55
  hover:shadow-[inset_0_0_60px_rgba(139,115,85,0.14),0_8px_24px_rgba(61,43,31,0.1)]
  transition-all duration-1000 ease-in-out
  overflow-hidden
">
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[radial-gradient(circle_at_top_right,rgba(245,230,180,0.2),transparent_55%)] transition-opacity duration-1000 ease-in-out pointer-events-none" />
  <div className="relative">
    <div className="w-12 h-px bg-[#8b7355]/40 mb-6 group-hover:w-24 group-hover:bg-[#8b7355] transition-all duration-1000 ease-in-out" />
    <h3 className="text-3xl font-serif text-[#3d2b1f] mb-4 tracking-wide group-hover:text-[#2d2016] transition-colors duration-700">
    Classical Literature
    </h3>
    <p className="text-[#3d2b1f]/70 font-serif leading-relaxed group-hover:text-[#3d2b1f]/90 transition-colors duration-700">
      In the quiet of the library, dust motes drift through candlelight over weathered pages.
    </p>
  </div>
</div>
```


---


### 田园核风 (Cottagecore)

**Slug**: `cottagecore`

#### Description
Pastoral countryside aesthetics with floral patterns, embroidery textures, mushroom elements, and cozy homey feel. Soft serif fonts, rounded corners, and warm natural colors evoke a longing for simple rural life.

#### Design Philosophy
Cottagecore is a romanticized pastoral countryside living aesthetic movement, originating from late 2010s internet culture.

Core principles:
- Pastoral poetry: A romanticized imagination of simple rural life
- Handmade warmth: The handcrafted texture of embroidery, knitting, and handwritten fonts
- Nature intimacy: Natural elements like flowers, mushrooms, bees, and berries
- Domestic comfort: Warm tones and soft material textures

#### Do's (必须做)
1. Use warm earth tones and floral colors
2. Use rounded corners and soft shadows
3. Use serif fonts to convey classical feel
4. Add flower, leaf, and other natural decorative elements
5. Use linen/paper texture backgrounds
6. Maintain a warm and cozy overall atmosphere

#### Don'ts (禁止做)
1. Do not use cold blue-gray tones
2. Do not use sharp right angles and hard borders
3. Do not use neon or high-saturation fluorescent colors
4. Do not use tech-feel or industrial-style elements

#### AI Rules
```
You are a Cottagecore design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Cold blue-gray tones
- Sharp corners or hard angular borders
- Neon or high-saturation fluorescent colors
- Tech or industrial style elements

## Must Follow

- Warm earth tones: green #5a8f5a, yellow #f5d75f, brown #8b7355, pink #d4a0a0
- Cream/linen backgrounds bg-[#faf6f0]
- Serif fonts for headings font-serif
- Rounded corners rounded-full, rounded-2xl, rounded-xl
- Soft shadows shadow-md, shadow-lg

## Color Palette

Primary:
- Grass Green: #5a8f5a
- Daisy Yellow: #f5d75f
- Earth Brown: #8b7355
- Flower Pink: #d4a0a0
- Cream: #faf6f0

## Special Elements

- Floral and botanical decorations
- Linen/paper texture backgrounds
- Hand-drawn or embroidery style accents
- Mushroom and berry motifs

## Animation & Interaction Rules

- Gentle & Breezy: Animation rhythm should be soft and soothing, preferring `duration-500` to `duration-700` with `ease-in-out`.
- Handmade Imperfection: Hover may include very slight rotation (recommended no more than 1deg) and small scaling, avoiding mechanical straight up-and-down motion.
- Soft Cushion Press: Click feedback should be a gentle press, recommended `active:scale-[0.97]`; `0.95` only for large elements to avoid looking cartoonish.
- Botanical Sway: Decorative floral/leaf icons may sway slightly on hover, but amplitude must be restrained -- no obvious shaking animations.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4a0a0]/40`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-lg`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif text-[#8b7355]`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-full
font-serif
shadow-md
transition-all duration-300 ease-in-out
```

Card:
```
rounded-2xl
bg-[#faf6f0]
border border-[#d4a0a0]/40
shadow-md
```

Input:
```
rounded-xl
border border-[#8b7355]/30
bg-[#faf6f0]
text-[#8b7355]
font-serif
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-[#0a0a1a]`, `bg-[#0a0a0f]`, `bg-black`, `text-[#00ffff]`, `text-[#ff00ff]`, `border-[#ff00ff]`, `border-[#00ffff]`, `shadow-[0_0_16px_rgba(255,0,255`, `shadow-[0_0_20px_rgba(0,255,255`

Patterns: `^bg-(?:black|\[#0[0-9a-f]{5}\])`, `^text-(?:\[#(?:00ffff|ff00ff)\])`, `^shadow-\[0_0_\d+px_rgba\((?:255,0,255|0,255,255)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `gardenPanel`, `botanicalBadge`, `seedPacketTag`, `masonJarProgress`, `crossStitchDivider`, `leafCard`, `journalOrnament`, `gardenTab`, `wildflowerAlert`, `harvestTable`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-[#5a8f5a] text-[#faf6f0]
  font-serif rounded-full
  shadow-[0_4px_10px_rgba(90,143,90,0.2)]
  hover:shadow-[0_8px_20px_rgba(90,143,90,0.3)]
  hover:-translate-y-0.5 hover:rotate-[0.8deg]
  active:rotate-0 active:scale-[0.97]
  active:shadow-[0_2px_6px_rgba(90,143,90,0.2)]
  transition-all duration-500 ease-in-out
  motion-reduce:transform-none
">
  Gather
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#faf6f0]
  rounded-3xl
  border border-[#d4a0a0]/40
  shadow-[0_4px_20px_rgba(139,115,85,0.05)]
  hover:shadow-[0_12px_30px_rgba(139,115,85,0.1)]
  hover:-translate-y-1 hover:-rotate-[0.8deg]
  transition-all duration-700 ease-in-out
">
  <div className="w-12 h-12 mb-4 text-[#d4a0a0] group-hover:scale-105 group-hover:rotate-6 transition-all duration-500 ease-in-out">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8 2 4 5 4 9c0 4.4 7 11.3 7.6 11.9.2.2.6.2.8 0C13 20.3 20 13.4 20 9c0-4-4-7-8-7z"/></svg>
  </div>
  <h3 className="text-2xl font-serif text-[#8b7355] mb-3 group-hover:text-[#5a8f5a] transition-colors duration-500">
    Wildflower Meadow
  </h3>
  <p className="text-[#8b7355]/70 font-serif leading-relaxed">
    Where every stitch tells a story of spring.
  </p>
</div>
```


---


### Risograph 印刷风 (Risograph)

**Slug**: `risograph`

#### Description
The distinctive aesthetics of Risograph printing -- 2-3 color overprint effects, halftone dots, registration misalignment, and limited palette, presenting a unique print texture and handmade batch feel.

#### Design Philosophy
Risograph is a rapid printing technology originating from Japan, widely adopted by artists and designers for its distinctive visual effects.

Core principles:
- Limited colors: Typically using only 2-3 ink colors layered together
- Registration misalignment: Intentional subtle offset between color layers
- Halftone dots: Visible dot textures and grain
- Print aesthetics: Embracing the imperfections and uniqueness of printing

#### Do's (必须做)
1. Limit to 2-3 primary colors
2. Add overprint misregistration effects (offset shadow)
3. Use bold monospace or sans-serif fonts
4. Keep flat color blocks without gradients
5. Add grain/dot texture feel
6. Use off-white/cream paper background
7. Misregistration Offset: hover must use dual-direction shadows simulating two Riso ink plates out of register: `hover:shadow-[6px_6px_0_#2563eb,-4px_-4px_0_#ff8a00]` -- one shadow goes bottom-right (blue plate), the other top-left (orange plate)
8. Instant Print: all transitions use `duration-100 ease-linear` -- mechanical printing press speed, not organic motion
9. Overprint Illusion: active state switches background to the secondary ink color `active:bg-[#2563eb]`, simulating two Riso ink layers fully overlapping at the press point
10. Registration Shift: green corner element uses `translate-x-2 -translate-y-2` at rest and `group-hover:translate-x-0 group-hover:translate-y-0` on hover -- the registration mark locks into place as the press completes its cycle

#### Don'ts (禁止做)
1. Do not use complex gradient effects
2. Do not use too many colors (maximum 3-4)
3. Do not use realistic shadows or lighting effects
4. Do not use smooth rounded corner design
5. Do not use single-direction shadows (Riso always has two ink plates, shadows must be bidirectional)
6. Do not use `ease-in-out` or `ease` (printing press is mechanical, must use `ease-linear`)
7. Do not use blur in shadows (all offsets must be zero-blur hard edges)
8. Do not use opacity transitions for hover color changes (must be instant printing press switching)

#### AI Rules
```
You are a Risograph design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Complex gradients or realistic shadows
- More than 3-4 colors in total
- Rounded corners (use rounded-sm only)
- Realistic lighting or 3D effects

## Must Follow

- Limited palette: pink #ff6b9d, blue #2563eb, orange #ff8a00, green #22c55e
- Paper-white background bg-[#fffbf0]
- Monospace fonts font-mono
- Offset shadows shadow-[3px_3px_0px_color]
- Bold borders border-2 border-[#1a1a1a]
- Flat colors only, no gradients

## Color Palette

Primary:
- Fluorescent Pink: #ff6b9d
- Blue: #2563eb
- Fluorescent Orange: #ff8a00
- Green: #22c55e
- Paper: #fffbf0

## Special Elements

- Overprint offset effects
- Grain/noise texture overlays
- Halftone dot patterns
- Registration marks as decoration

## Animation & Interaction Rules

- Misregistration Offset: Hover must use dual-direction shadows simulating two ink plates out of register: `hover:shadow-[6px_6px_0_#2563eb,-4px_-4px_0_#ff8a00]`. One shadow goes bottom-right (blue plate), the other goes top-left (orange plate). Single-direction shadows break the print illusion.
- Instant Print: All transitions `duration-100 ease-linear` -- mechanical printing press speed. Never use `ease-in-out` or organic curves.
- Overprint Illusion: Active state switches background to the secondary ink color `active:bg-[#2563eb]`, simulating the moment two Riso ink layers fully overlap at the point of contact.
- Registration Shift: Green corner element uses `translate-x-2 -translate-y-2` at rest and `group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-100 ease-linear` on hover -- the registration mark locks into place as the press completes its cycle.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#1a1a1a]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[2px_2px_0px_#ff6b9d]`
- Medium: `shadow-[3px_3px_0px_#ff6b9d]`
- Large: `shadow-[4px_4px_0px_#ff6b9d]`
- Hover: `hover:shadow-[6px_6px_0px_#ff6b9d]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-wider`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-sm
font-mono font-bold uppercase
shadow-[3px_3px_0px_#2563eb]
transition-all duration-200 ease-in-out
```

Card:
```
rounded-sm
bg-[#fffbf0]
border-2 border-[#1a1a1a]
shadow-[4px_4px_0px_#ff6b9d]
```

Input:
```
rounded-sm
border-2 border-[#1a1a1a]
bg-[#fffbf0]
font-mono
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^rounded-(?:lg|xl|2xl|full)$`, `^bg-gradient-`, `^shadow-(?:md|lg|xl)$`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `overprintBadge`, `missprintCard`, `noiseOverlay`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-[#ff6b9d] text-white
  font-mono font-bold uppercase tracking-widest
  rounded-sm
  border-2 border-[#1a1a1a]
  shadow-[4px_4px_0_#2563eb]
  hover:shadow-[6px_6px_0_#2563eb,-4px_-4px_0_#ff8a00]
  hover:-translate-x-[2px] hover:translate-y-[2px]
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-none
  active:bg-[#2563eb]
  transition-all duration-100 ease-linear
">
  Overprint
</button>
```

**Card**
```html
<div className="group p-8 bg-[#fffbf0] border-[3px] border-[#1a1a1a] rounded-sm shadow-[6px_6px_0_#ff6b9d] hover:shadow-[8px_8px_0_#2563eb,-6px_-6px_0_#ff6b9d] transition-all duration-100 ease-linear cursor-pointer relative overflow-hidden">
  {/* Registration mark — shifts into position on hover (Registration Shift) */}
  <div className="absolute top-0 right-0 w-16 h-16 bg-[#22c55e] border-b-[3px] border-l-[3px] border-[#1a1a1a] transform translate-x-2 -translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-100 ease-linear" />
  <h3 className="text-3xl font-mono font-black text-[#2563eb] uppercase mb-4 tracking-tighter group-hover:text-[#ff8a00] transition-colors duration-100 ease-linear" style={{ textShadow: '2px 2px 0 #1a1a1a' }}>
    RISO_PRINT
  </h3>
  <p className="text-[#1a1a1a] font-mono font-bold leading-relaxed border-t-[3px] border-[#1a1a1a] pt-4">
    Embrace the beauty of mechanical imperfection and limited palette expression.
  </p>
</div>
```


---


### 机甲风 (Mecha)

**Slug**: `mecha`

#### Description
Design style inspired by mecha anime like Gundam/EVA -- tech panels, warning signs, mechanical textures, military green and navy blue base with warning yellow and danger red, brimming with industrial power.

#### Design Philosophy
Mecha is a design aesthetic originating from Japanese mecha anime (Gundam, EVA, etc.), blending military-industrial style with sci-fi panel interfaces.

Core principles:
- Armor panels: Panel design simulating mecha outer shell segments
- Warning system: Yellow warning and red danger signal system
- Military-industrial: Military green and navy blue industrial palette
- Technical annotations: Monospace font technical parameters and unit number labels

#### Do's (必须做)
1. Use military green and navy blue as base colors
2. Add warning yellow and danger red accent colors
3. Use monospace fonts and uppercase letters
4. Design sharp no-rounded-corner panel elements
5. Add technical annotations and unit number decorations
6. Use hard-edge shadows and border lines

#### Don'ts (禁止做)
1. Do not use soft rounded corner design
2. Do not use soft pink or light tones
3. Do not use flashy gradients or frosted glass effects
4. Do not use handwritten or decorative script fonts

#### AI Rules
```
You are a Mecha design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft rounded corners (use rounded-none)
- Pastel or soft colors
- Glassmorphism or blur effects
- Handwritten or decorative fonts

## Must Follow

- Dark base colors: navy #1a2744, military green #4a5c3a
- Warning accents: yellow #fbbf24, red #ef4444
- Monospace fonts font-mono with uppercase tracking-widest
- No border radius rounded-none
- Hard-edge shadows shadow-[4px_4px_0px_color]
- Border-2 for panel edges

## Color Palette

Primary:
- Navy: #1a2744
- Military Green: #4a5c3a
- Warning Yellow: #fbbf24
- Danger Red: #ef4444

## Special Elements

- Tech grid backgrounds
- Warning stripe patterns
- Status indicators with square dots
- Technical annotations and unit numbers
- Panel borders with offset outlines

## Animation & Interaction Rules

- Hydraulic Rigidness: Interactions should use duration-100~150 + ease-linear mechanical hard-cuts, not soft spring easing.
- Armor Shifting: Hover can use clip-path corner changes and border thickness mutations to simulate armor plate engagement sliding.
- Hazard Flashing: Key controls need warning color pulses (red/yellow) and diagonal stripe hints on hover, reinforcing industrial alertness.
- Tactical Lock-on: Active uses crisp linear displacement with shadow fallback, like the lock-on feedback after pulling a heavy trigger.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#4a5c3a]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0px_rgba(251,191,36,0.3)]`
- Medium: `shadow-[4px_4px_0px_rgba(251,191,36,0.3)]`
- Large: `shadow-[6px_6px_0px_rgba(251,191,36,0.4)]`
- Hover: `hover:shadow-[6px_6px_0px_rgba(251,191,36,0.5)]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-widest`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
font-mono font-bold uppercase tracking-widest
border-2
transition-all duration-200 ease-in-out
```

Card:
```
rounded-none
bg-[#1a2744]
border-2 border-[#4a5c3a]
shadow-[4px_4px_0px_rgba(251,191,36,0.3)]
```

Input:
```
rounded-none
border-2 border-[#4a5c3a]
bg-[#1a2744]/80
text-[#fbbf24]
font-mono
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-white`, `bg-[#faf6f0]`, `bg-[#fffbf0]`, `font-serif`, `text-[#ff00ff]`, `text-[#00ffff]`

Patterns: `^rounded-(?:lg|xl|2xl|full)$`, `^bg-(?:white|pink-|rose-)`, `^font-serif$`, `^shadow-(?:md|lg|xl)$`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `hazardStripe`, `militaryPanel`, `statusBar`, `toggleSwitch`, `rankBadge`, `diagnosticsRow`, `checkboxArray`


#### Component Examples

**Button**
```html
<button className="
  group relative overflow-hidden px-10 py-3
  bg-[#2b2b2b] text-[#fbbf24]
  font-mono font-bold uppercase tracking-widest
  rounded-none
  border-2 border-[#fbbf24]/60
  shadow-[4px_4px_0px_#1a2744]
  hover:bg-[#fbbf24] hover:text-[#1a2744]
  hover:border-[#fbbf24]
  active:translate-y-[2px] active:shadow-[2px_2px_0px_#1a2744]
  transition-all duration-100 ease-linear
" style={{ clipPath: "polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)" }}>
  <span
    className="pointer-events-none absolute inset-0 opacity-0 transition-none group-hover:opacity-20"
    style={{
      backgroundImage:
        "repeating-linear-gradient(45deg,#000 0px,#000 6px,transparent 6px,transparent 12px)",
    }}
  />
  <span className="relative z-10">ENGAGE_SYSTEM</span>
</button>
```

**Card**
```html
<div className="
  group
  relative overflow-hidden
  p-8
  bg-[#1a2744]
  rounded-none
  border-2 border-[#4a5c3a]
  border-l-4 border-l-[#fbbf24]
  shadow-[4px_4px_0px_rgba(251,191,36,0.3)]
  hover:border-l-[10px]
  transition-all duration-150 ease-linear
" style={{ clipPath: "polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)" }}>
  <div className="absolute top-2 right-2 h-8 w-8 border-t-2 border-r-2 border-[#fbbf24]/40 transition-all duration-150 ease-linear group-hover:translate-x-[-2px] group-hover:translate-y-[2px] group-hover:border-[#fbbf24]" />

  <div className="flex items-center gap-2 mb-3">
    <div className="w-3 h-3 bg-[#fbbf24]"></div>
    <span className="text-xs font-mono text-[#4a5c3a] uppercase tracking-widest">UNIT-01</span>
  </div>
  <h3 className="text-xl font-mono font-bold text-[#fbbf24] uppercase mb-2">
    ARMOR PANEL
  </h3>
  <p className="text-[#4a5c3a]/80 font-mono text-sm">
    Status: Operational
  </p>
  <div className="mt-5 flex items-center justify-end gap-2">
    <span className="text-[10px] font-mono uppercase tracking-widest text-[#fbbf24]">Active</span>
    <div className="h-2 w-2 bg-[#ef4444] group-hover:animate-pulse" />
  </div>
</div>
```


---


### 哥特萝莉风 (Gothic Lolita)

**Slug**: `gothic-lolita`

#### Description
Victorian lace, black ribbons, crosses and roses in dark elegance -- a dark romantic aesthetic blending Gothic architectural ornamentation with Lolita's exquisite details.

#### Design Philosophy
Gothic Lolita is a visual style blending Victorian-era and Gothic aesthetics, originating from Japanese street fashion.

Core principles:
- Dark elegance: Black as the main tone, accented with deep purple and blood red
- Exquisite details: Lace trim, ribbon bows, cross decorations
- Victorian charm: Elaborate serif fonts, symmetrical decorative patterns
- Romantic darkness: Roses, candelabras, Gothic arches, and other elements

#### Do's (必须做)
1. Use black and dark colors as main background
2. Accent with deep purple #4a1a4a and blood red #8b1a2a
3. Use decorative serif fonts
4. Add lace trim, ribbon, and other decorative elements
5. Use Gothic symmetrical patterns or cross motifs
6. Maintain an exquisite and elegant overall atmosphere

#### Don'ts (禁止做)
1. Do not use bright vivid colors
2. Do not use cute cartoon-style elements
3. Do not use modern minimalist design
4. Do not use overly rounded shapes

#### AI Rules
```
You are a Gothic Lolita design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright vivid colors
- Cute cartoon style
- Modern minimalist design
- Overly large rounded shapes
- Emoji

## Must Follow

- Black dark backgrounds bg-[#0a0a0a], bg-[#1a0a1a]
- Deep purple accents border-[#4a1a4a], text-[#4a1a4a]
- Blood red emphasis border-[#8b1a2a], text-[#8b1a2a]
- Silver white text text-[#e5e5e5]
- Serif fonts font-serif
- Intricate border decorations

## Color Palette

Primary:
- Black: #0a0a0a
- Deep Purple: #4a1a4a
- Blood Red: #8b1a2a
- Silver White: #e5e5e5

## Special Elements

- Lace trim patterns
- Cross decorations
- Rose patterns
- Symmetrical decorative motifs
- Gothic arches

## Animation & Interaction Rules

- Velvet Depth: Hover focuses on slow expansion of deep purple/blood red shadows, conveying velvet texture -- avoid frivolous bouncing.
- Lace Elegance: Interaction duration should be duration-500 to 700, using ease-in-out to maintain refinement and restraint.
- Corset Press: Active uses slight constriction (scale-[0.98]) with enhanced inner shadow, simulating corset-like damped feedback.
- Silver Whisper: Borders and text may slowly reveal silver-white shimmer on hover, enhancing dark luxurious layering.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#4a1a4a]/50`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[0_2px_6px_rgba(74,26,74,0.3)] md:shadow-[0_2px_8px_rgba(74,26,74,0.3)]`
- Medium: `shadow-[0_4px_12px_rgba(74,26,74,0.4)] md:shadow-[0_4px_16px_rgba(74,26,74,0.4)]`
- Large: `shadow-[0_8px_20px_rgba(139,26,42,0.4)] md:shadow-[0_8px_28px_rgba(139,26,42,0.4)]`
- Hover: `hover:shadow-[0_8px_24px_rgba(139,26,42,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wide`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-sm
border border-[#8b1a2a]/60
font-serif
transition-all duration-300 ease-in-out
```

Card:
```
rounded-sm
bg-[#0a0a0a]/90
border border-[#4a1a4a]/50
shadow-[0_4px_16px_rgba(74,26,74,0.4)]
```

Input:
```
rounded-sm
border border-[#4a1a4a]/50
bg-[#0a0a0a]/80
text-[#e5e5e5]
font-serif
focus:shadow-[0_0_12px_rgba(139,26,42,0.4)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-black`, `bg-pink-`, `bg-yellow-`

Patterns: `^rounded-(?:full|xl|2xl|3xl)$`, `^bg-(?:white|gray-[1-3]|pink-|yellow-|green-|blue-)`, `^text-(?:black|pink-|yellow-|green-)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `lacePanel`, `ribbonBadge`, `rosetteBadge`, `rosaryProgress`, `laceDivider`, `ornateDropdown`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-[#0a0a0a]
  border border-[#4a1a4a]
  text-[#e5e5e5] font-serif tracking-[0.2em]
  shadow-[inset_0_0_10px_rgba(74,26,74,0.3)]
  hover:bg-[#1a0a1a]
  hover:border-[#8b1a2a]
  hover:text-white
  hover:shadow-[0_8px_24px_rgba(139,26,42,0.35),inset_0_0_12px_rgba(139,26,42,0.2)]
  active:scale-[0.98]
  active:shadow-[inset_0_0_24px_rgba(0,0,0,0.8)]
  transition-all duration-500 ease-in-out
">
  Unlock Secret
</button>
```

**Card**
```html
<div className="
  group
  p-8
  bg-gradient-to-b from-[#1a0a1a] to-[#0a0a0a]
  border border-[#4a1a4a]/50
  shadow-[0_4px_16px_rgba(74,26,74,0.35)]
  hover:border-[#8b1a2a]/70
  hover:shadow-[0_10px_30px_rgba(139,26,42,0.25)]
  transition-all duration-700 ease-in-out
  relative overflow-hidden
">
  <div className="absolute top-4 left-4 w-6 h-6 border-l border-t border-[#e5e5e5]/20 transition-colors duration-500 group-hover:border-[#e5e5e5]/60" />
  <div className="absolute top-4 right-4 w-6 h-6 border-r border-t border-[#e5e5e5]/20 transition-colors duration-500 group-hover:border-[#e5e5e5]/60" />

  <div className="mb-6 flex justify-center opacity-40 group-hover:opacity-100 transition-opacity duration-500">
    <div className="h-6 w-px bg-[#e5e5e5]/70 relative">
      <div className="absolute left-[-8px] top-1/2 h-px w-4 -translate-y-1/2 bg-[#e5e5e5]/70" />
    </div>
  </div>

  <h3 className="text-2xl font-serif text-[#e5e5e5] mb-3 tracking-widest text-center group-hover:drop-shadow-[0_0_8px_rgba(229,229,229,0.25)] transition-all duration-500">
    Dark Elegance
  </h3>
  <p className="text-[#e5e5e5]/60 font-serif text-center group-hover:text-[#e5e5e5]/85 transition-colors duration-500">
    A whisper of lace and shadow, wrapped in velvet moonlight.
  </p>
</div>
```


---


### 赛博中华风 (Cyber Chinese)

**Slug**: `cyber-chinese`

#### Description
A collision and fusion of traditional Chinese aesthetics with cyberpunk sci-fi -- vermilion and gold paired with neon blue-purple, dragon-phoenix seals intertwined with neon lanterns in a futuristic Eastern fantasy.

#### Design Philosophy
Cyber Chinese is a fusion of traditional Chinese aesthetics with cyberpunk sci-fi style, reinterpreting classic Eastern elements with neon light effects on a dark base.

Core principles:
- Ancient meets modern: Traditional vermilion and gold coexist with neon blue and purple
- Eastern future: Dragon-phoenix totems and seal patterns are cyber-reconstructed
- Neon lanterns: Traditional lantern forms emit cybernetic glow
- Sharp lines: Right-angled bold forms embody tech feel

#### Do's (必须做)
1. Use vermilion #d4553a and gold #c9a227 as primary colors
2. Pair with neon blue #00d4ff and neon purple #a020f0
3. Use sharp right-angled no-rounded-corner forms
4. Add neon glow effects
5. Incorporate traditional Chinese pattern elements (seals, cloud motifs)
6. Dark backgrounds as main base tone
7. Interaction effects maintain ceremonial feel: hover brightens gold borders and neon, active presses down 1-2px
8. May use brief scan light bands or cloud-motif shimmer on hover/focus to reinforce Eastern cyber feedback

#### Don'ts (禁止做)
1. Do not use bright white backgrounds
2. Do not use soft rounded forms
3. Do not omit neon glow effects
4. Do not use overly Western decorative elements
5. Do not use spring-bounce, playful jitter, or large-scale animations
6. Do not use transitions slower than 400ms on control components

#### AI Rules
```
You are a Cyber Chinese design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Soft rounded forms (rounded-lg, rounded-full)
- Omitting neon glow effects
- Overly Western decorative elements
- Emoji

## Must Follow

- Vermilion #d4553a and gold #c9a227 as primary colors
- Neon blue #00d4ff and neon purple #a020f0 as secondary colors
- Dark black background bg-[#0a0a0a]
- Sharp no-rounded-corners rounded-none
- Neon glow effects shadow-[0_0_Xpx_rgba(...)]
- Traditional Chinese pattern elements

## Animation & Interaction Rules

- Interaction rhythm should be short and restrained: 180-300ms, preferring combined transitions of transform, box-shadow, and border-color
- Hover focuses on "neon warming": border and glow intensify, allowing 1-2px slight lift, no large displacement
- Active must convey "seal press" feedback: press down 1-3px or slight scale to 0.98, with synchronized glow tightening
- Scan light bands/cloud-motif shimmer should be trigger-based short animations (hover/focus), avoiding infinite loops that create noise
- No spring-bounce, cute jitter, slow fade-in/out, or other interactions conflicting with the bold cyber tone

## Color Palette

Primary:
- Vermilion: #d4553a
- Gold: #c9a227
- Dark Black: #0a0a0a
- Neon Blue: #00d4ff
- Neon Purple: #a020f0

## Special Elements

- Seal patterns
- Dragon-phoenix totems
- Cloud motif decorations
- Lantern forms
- Cyber grid
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4553a]/40`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(212,85,58,0.3)] md:shadow-[0_0_12px_rgba(212,85,58,0.3)]`
- Medium: `shadow-[0_0_16px_rgba(212,85,58,0.4)] md:shadow-[0_0_20px_rgba(212,85,58,0.4)]`
- Large: `shadow-[0_0_24px_rgba(212,85,58,0.5)] md:shadow-[0_0_36px_rgba(212,85,58,0.5)]`
- Hover: `hover:shadow-[0_0_24px_rgba(201,162,39,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-wider`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-none
border border-[#c9a227]
shadow-[0_0_16px_rgba(212,85,58,0.5)]
transition-all duration-300 ease-in-out
font-bold
```

Card:
```
rounded-none
bg-[#0a0a0a]/90
border border-[#d4553a]/40
shadow-[0_0_16px_rgba(212,85,58,0.3)]
```

Input:
```
rounded-none
border border-[#c9a227]/40
bg-[#0a0a0a]/80
text-[#00d4ff]
focus:shadow-[0_0_16px_rgba(0,212,255,0.5)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-black`, `bg-pink-`

Patterns: `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^bg-(?:white|gray-[1-3]|pink-|green-|amber-)`, `^text-(?:black|gray-(?:[7-9]))`, `^shadow-\[\d+px_\d+px_0px`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `lanternBadge`, `dragonScroll`, `sealStamp`, `pagodaPanel`, `cloudMotif`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-4 overflow-hidden
  bg-[#d4553a] rounded-none
  border border-[#c9a227]
  text-white font-bold tracking-wider
  shadow-[0_0_16px_rgba(212,85,58,0.5)]
  hover:-translate-y-[1px]
  hover:shadow-[0_0_28px_rgba(201,162,39,0.55),0_0_40px_rgba(0,212,255,0.2)]
  hover:border-[#00d4ff]/70
  active:translate-y-[2px]
  active:shadow-[0_0_12px_rgba(212,85,58,0.4)]
  transition-[transform,box-shadow,border-color] duration-220 ease-out
">
  <span className="relative z-10">Enter</span>
  <span className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-[#00d4ff]/25 to-transparent skew-x-[-20deg] transition-transform duration-300 group-hover:translate-x-[420%]" />
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-[#0a0a0a]/90
  rounded-none
  border border-[#d4553a]/40
  shadow-[0_0_16px_rgba(212,85,58,0.3)]
  hover:-translate-y-[2px]
  hover:border-[#00d4ff]/60
  hover:shadow-[0_0_24px_rgba(0,212,255,0.3),0_0_36px_rgba(212,85,58,0.25)]
  active:translate-y-[1px]
  transition-[transform,box-shadow,border-color] duration-250 ease-out
">
  <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 bg-[linear-gradient(90deg,transparent,rgba(0,212,255,0.08),transparent)]" />
  <h3 className="text-2xl font-bold text-[#c9a227] mb-3">
    CYBER ORIENT
  </h3>
  <p className="text-[#00d4ff]/70">
    Where tradition meets tomorrow
  </p>
</div>
```


---


### 酸性平面设计 (Acid Graphics)

**Slug**: `acid-graphics`

#### Description
High-saturation fluorescent colors, distorted typography, liquid flowing forms, and psychedelic visuals. Rooted in rave culture and underground club aesthetics, presenting rebellion and experimentation through intense visual impact.

#### Design Philosophy
Acid Graphics originates from 90s rave culture and underground club scenes, blending cyberpunk, psychedelic art, and experimental typography.

Core principles:
- Fluorescent colors: High-saturation fluorescent green, acid yellow, electric purple, and cyber pink
- Dark base: Deep black backgrounds make fluorescent colors more glaring and prominent
- Distorted morphing: Liquid distortion feel in typography and forms, tilted cards and elements
- Visual noise: Scanline overlays, Op-Art checkerboards, 3D wireframe grids
- Multi-layer stacking: Multi-layer offset stacking of text and color, creating visual interference

#### Do's (必须做)
1. Use pure black #0a0a0a as main background
2. Use fluorescent color system (green #39ff14, yellow #e6ff00, purple #a020f0, pink #ff6ec7)
3. Use monospace fonts font-mono
4. Keep sharp edges (rounded-none)
5. Use hard-edge offset shadows (shadow-[Npx_Npx_0px_color])
6. All text uppercase tracking-widest
7. Add scanline overlay effects
8. Use skew/rotate to create distortion feel
9. Use ultra-short or no-transition harsh animations (duration-75 or duration-0)
10. Add glitch-feel feedback on hover (e.g., hover:-skew-x-6, instant contrast changes)

#### Don'ts (禁止做)
1. Do not use soft pastel or low-saturation colors
2. Do not use rounded corners (rounded-md and above)
3. Do not use serif fonts
4. Do not use soft shadows (shadow-md, shadow-lg, etc.)
5. Do not use white or light backgrounds
6. Do not use gradients (all colors must be flat fluorescent)
7. Do not use polished smooth animations (ease-in-out, slow micro-interactions)

#### AI Rules
```
You are an Acid Graphics design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft pastel colors, muted tones, or low-saturation colors
- Rounded corners of any kind (rounded-md, rounded-lg, rounded-xl, rounded-full)
- Serif fonts
- Subtle or soft shadows (shadow-sm, shadow-md, shadow-lg)
- Gradients of any kind (all colors must be flat fluorescent)
- White or light backgrounds
- Backdrop blur or frosted glass effects

## Must Follow

- Dark background: bg-[#0a0a0a] always
- Fluorescent colors only: green #39ff14, yellow #e6ff00, purple #a020f0, pink #ff6ec7
- Monospace fonts: font-mono for all text
- All uppercase: uppercase tracking-widest
- Sharp edges: rounded-none everywhere
- Hard offset shadows: shadow-[Npx_Npx_0px_color] with fluorescent colors
- Bold borders: border-2 with fluorescent colors
- Skewed/rotated elements for distortion feel
- Scanline/noise overlays for visual interference

## Animation & Interaction Rules

- Hard & glitchy only: use duration-75 or duration-0 for interaction transitions
- Hover must feel unstable: skew, abrupt offset changes, or harsh color flips
- Active state must be brutal: collapse shadow instantly and increase press translation
- Avoid polished micro-interactions; interactions should feel raw and disruptive

## Color Palette

Primary:
- Fluorescent Green: #39ff14 (main accent)
- Black: #0a0a0a (backgrounds)
- Acid Yellow: #e6ff00 (highlights)
- Electric Purple: #a020f0 (shadows, secondary)
- Cyber Pink: #ff6ec7 (accents)

## Special Elements

- Scanline overlay effects (repeating-linear-gradient)
- Op-Art checkerboard patterns
- Chrome text layering (multiple offset text copies)
- 3D wireframe grid backgrounds
- Skewed card layouts and tilted elements
- Terminal-style form inputs with fluorescent cursors
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#39ff14]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0px_#a020f0]`
- Medium: `shadow-[4px_4px_0px_#a020f0]`
- Large: `shadow-[6px_6px_0px_#a020f0]`
- Hover: `hover:shadow-[8px_8px_0px_#a020f0]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-150 ease-out`

**Typography**
- Heading: `font-mono font-black uppercase tracking-widest`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
font-mono font-bold uppercase tracking-widest
border-2
shadow-[4px_4px_0px_#a020f0]
transition-all duration-150 ease-out
```

Card:
```
rounded-none
bg-[#0a0a0a]
border-2 border-[#39ff14]
shadow-[5px_5px_0px_#a020f0]
```

Input:
```
rounded-none
border-2 border-[#39ff14]/60
bg-[#0a0a0a]
text-[#39ff14]
font-mono
focus:outline-none
```

**Forbidden**

Classes: `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `shadow-md`, `shadow-lg`

Patterns: `^rounded-(?:md|lg|xl|2xl|full)$`, `^bg-gradient-`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^backdrop-blur`, `^font-serif$`, `^bg-(?:white|\[#fff)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `warpedBanner`, `scanlineOverlay`, `glitchBadge`, `acidProgress`, `distortionDivider`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#39ff14] text-[#0a0a0a]
  font-mono font-bold uppercase tracking-widest
  rounded-none
  border-2 border-[#39ff14]
  shadow-[4px_4px_0px_#a020f0]
  hover:translate-x-[2px] hover:translate-y-[2px]
  hover:shadow-[2px_2px_0px_#a020f0]
  hover:-skew-x-6
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none active:bg-[#ff6ec7] active:border-[#ff6ec7] active:text-white
  transition-all duration-75
">
  ACTIVATE
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#0a0a0a]
  border-2 border-[#39ff14]
  rounded-none
  shadow-[5px_5px_0px_#a020f0]
  hover:shadow-[8px_8px_0px_#e6ff00]
  hover:border-[#e6ff00]
  hover:-translate-y-1
  transition-all duration-75
  cursor-crosshair
">
  <h3 className="text-2xl font-mono font-bold text-[#39ff14] uppercase tracking-widest mb-3 group-hover:text-[#e6ff00]">
    ACID_ZONE
  </h3>
  <p className="text-[#39ff14]/50 font-mono text-sm group-hover:text-[#e6ff00]/70">
    Distorted reality interface module
  </p>
</div>
```


---


### 手绘涂鸦风 (Hand-Drawn Doodle)

**Slug**: `hand-drawn-doodle`

#### Description
Hand-drawn lines, doodle illustrations, irregular shapes, and handwritten fonts. Like designs casually sketched in a notebook -- full of creativity and fun, conveying a warm and approachable handmade feel.

#### Design Philosophy
Hand-Drawn Doodle style simulates the texture of hand-crafted drawing, creating a warm, approachable, and creatively rich visual experience.

Core principles:
- Notebook paper: Cream-white background simulating real notebooks, with blue ruled lines and red margin lines
- Hand-drawn lines: Dashed borders simulating hand-drawn strokes, avoiding precise geometry
- Irregular forms: Subtle rotations and offsets create a handmade feel
- Marker pen colors: Red, teal, and yellow three-color marker pen accents
- Decorative elements: Tape, pushpins, paperclips, coffee stain rings, and other paper decorations
- Doodle accents: Casually drawn stars, squiggly lines, arrows, and other decorations

#### Do's (必须做)
1. Use dashed borders (border-dashed) to simulate hand-drawn lines
2. Use cream paper color #fffef5 background
3. Use ink black #2c2c2c as primary color
4. Add subtle rotation (rotate) to simulate hand-drawn irregularity
5. Use marker pen colors: red #ff6b6b, teal #4ecdc4, yellow #ffd93d
6. Use sans-serif fonts, maintaining a casual feel
7. Add notebook ruled-line backgrounds
8. Use tape/pushpin/paperclip decorative elements

#### Don'ts (禁止做)
1. Do not use precise geometric shapes and right angles (rounded-none)
2. Do not use gradient effects
3. Do not use precise shadows (shadow-md, etc.)
4. Do not use monospace fonts
5. Do not use solid borders (border-solid)
6. Do not use large border radius (rounded-lg and above)

#### AI Rules
```
You are a Hand-Drawn Doodle design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp geometric precision (rounded-none) - use rounded-sm instead
- Gradients of any kind (bg-gradient)
- Precise shadows (shadow-md, shadow-lg) - use hard offset shadows only
- Monospace fonts (font-mono)
- Solid borders (border-solid) - always use border-dashed
- Large border radius (rounded-lg and above)
- Dark backgrounds - always use paper-white

## Must Follow

- Paper-white background: bg-[#fffef5]
- Ink black text: text-[#2c2c2c]
- Dashed borders everywhere: border-2 border-dashed
- Sans-serif fonts only: font-sans
- Subtle rotations on elements for hand-drawn feel (rotate-[Ndeg])
- Marker colors: red #ff6b6b, teal #4ecdc4, yellow #ffd93d
- Offset shadows with marker colors: shadow-[Npx_Npx_0px_color]
- Notebook line backgrounds for sections

## Color Palette

Primary:
- Ink Black: #2c2c2c (text, borders)
- Paper White: #fffef5 (backgrounds)
- Red Marker: #ff6b6b (accents, highlights)
- Teal Marker: #4ecdc4 (shadows, accents)
- Yellow Marker: #ffd93d (highlights, tape)

## Special Elements

- Notebook line backgrounds (repeating-linear-gradient)
- Red margin line decorations
- Wavy underlines (text-decoration-style: wavy)
- Marker highlight effects
- Tape, pushpin, and paperclip decorations on cards
- Subtle element rotations for sketchy feel
- Spiral binding holes on left edge
- Coffee stain ring decorations
- Hand-drawn stars and squiggles via SVG

## Animation & Interaction Rules

- Stop-Motion Jitter: Hover creates hand-drawn tremor feel through tiny rotations and displacements, avoiding smooth mechanical motion.
- Ink Filling: May enhance border thickness or color contrast to simulate "re-inking", while maintaining border-dashed hand-drawn semantics.
- Offset Smudge: Only use hard-edge offset shadows; hover changes offset amount and marker pen color, like a second stroke.
- Paper Press: Active state flattens shadow with slight scale (e.g., scale-[0.98]), presenting finger-pressing-paper feedback.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#2c2c2c]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[2px_2px_0px_#4ecdc4]`
- Medium: `shadow-[3px_3px_0px_#4ecdc4]`
- Large: `shadow-[4px_4px_0px_#4ecdc4]`
- Hover: `hover:shadow-[6px_6px_0px_#4ecdc4]`

**Interaction**
- Hover Translate: `hover:translate-x-[1px] hover:translate-y-[1px]`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-sans font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-sm
font-sans font-semibold
border-2 border-dashed
transition-all duration-200 ease-in-out
```

Card:
```
rounded-sm
bg-[#fffef5]
border-2 border-dashed border-[#2c2c2c]
shadow-[4px_4px_0px_#4ecdc4]
```

Input:
```
rounded-sm
border-2 border-dashed border-[#2c2c2c]
bg-[#fffef5]
font-sans
focus:outline-none
```

**Forbidden**

Classes: `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `shadow-md`, `shadow-lg`, `shadow-xl`, `font-mono`, `backdrop-blur`, `backdrop-blur-sm`, `rounded-none`

Patterns: `^bg-gradient-`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^font-mono$`, `^backdrop-blur`, `^rounded-(?:none|lg|xl|2xl|full)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `stickyNote`, `doodleBorder`, `pencilDivider`, `sketchBadge`, `notebookList`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#fffef5] text-[#2c2c2c]
  font-sans font-bold tracking-widest uppercase
  rounded-sm
  border-2 border-dashed border-[#2c2c2c]
  shadow-[4px_4px_0px_#ff6b6b]
  hover:bg-[#2c2c2c] hover:text-[#fffef5]
  hover:-translate-y-1 hover:translate-x-[1px]
  hover:rotate-[1deg]
  hover:shadow-[6px_6px_0px_#4ecdc4]
  active:translate-x-[3px] active:translate-y-[3px]
  active:shadow-none active:scale-[0.98] active:rotate-0
  transition-all duration-150 ease-linear
">
  Doodle!
</button>
```

**Card**
```html
<div className="
  group
  p-8
  bg-[#fffef5]
  border-[3px] border-dashed border-[#2c2c2c]
  rounded-sm
  shadow-[5px_5px_0px_#ffd93d]
  hover:-translate-y-1 hover:rotate-[-1deg]
  hover:shadow-[8px_8px_0px_#ff6b6b]
  transition-all duration-150 ease-linear
">
  <h3 className="text-3xl font-sans font-black text-[#2c2c2c] mb-3 transform -skew-x-3 group-hover:skew-x-0 transition-transform duration-150">
    Sketch Note
  </h3>
  <p className="text-[#2c2c2c]/70 font-sans font-semibold leading-relaxed group-hover:text-[#2c2c2c] transition-colors duration-150">
    Scribbled with love, coffee, and a perfectly imperfect process.
  </p>
  <div className="mt-4 h-1 w-1/2 bg-[#4ecdc4] transform -rotate-1 transition-all duration-200 group-hover:w-full group-hover:bg-[#ff6b6b]" />
</div>
```


---


### 瑞士海报风 (Swiss Poster)

**Slug**: `swiss-poster`

#### Description
Bold typography, grid alignment, primary color blocks, and experimental layouts. Rooted in the Swiss International Style poster design tradition, building information delivery through oversized type and strong visual hierarchy. Differs from swiss-style by focusing more on poster-level experimental large-scale typography.

#### Design Philosophy
Swiss Poster style originates from the poster tradition of the Swiss International Style design movement, pursuing the ultimate in typographic expressiveness.

Core principles:
- Oversized typography: Using extreme font sizes to create visual impact (160px headings vs 10px labels)
- 12-column grid system: All content strictly aligned to grid-cols-12, using asymmetric column splits
- Primary color blocks: Black and white as primary, with red, blue, and yellow as large-area color block accents
- Border separation: Using border-2 border-[#000000] to divide regions, not shadows or spacing
- Zero spacing: gap-0 keeps element edges flush, using border lines as visual separators
- No decoration: No rounded corners, shadows, gradients, or blur -- only solid colors and lines

#### Do's (必须做)
1. Use oversized bold sans-serif type (font-sans font-black)
2. Strictly follow 12-column grid alignment (grid-cols-12)
3. Use black and white as primary colors
4. Use primary colors (red #ff0000, blue #0057b8, yellow #ffcc00) as color block accents
5. Keep sharp edges (rounded-none)
6. All text uppercase (uppercase tracking-widest)
7. Use border-2 border-[#000000] to divide regions
8. Use gap-0 to keep elements flush
9. Use asymmetric layouts (e.g., 3/9, 8/4 column splits)
10. Absolute Objectivity: zero translate, scale, or shadow on any element -- Swiss Poster communicates through color and typography alone, motion is noise
11. Snap Transitions: all interactions use `transition-none` -- color changes are instantaneous hard cuts, like ink stamped onto paper
12. Color Block Invasion: hover replaces background with solid black `hover:bg-[#000000]` and text inverts to white `hover:text-[#ffffff]` -- the color block takes over the entire element
13. Typographic Highlighting: year/label element switches to `group-hover:text-[#ff0000] transition-none` on hover -- the red typographic accent activates like a stamp

#### Don'ts (禁止做)
1. Do not use decorative, script, or monospace fonts
2. Do not use rounded corners larger than rounded-sm
3. Do not use any shadows (shadow-sm and above)
4. Do not use gradients
5. Do not use dashed borders (border-dashed)
6. Do not use element spacing (gap-4, etc.) -- use gap-0 + borders
7. Do not use any `translate`, `scale`, or `rotate` animations (Absolute Objectivity -- Swiss Poster communicates through color and typography, not motion)
8. Do not use `active:scale-[0.98]` or any scale (posters do not shrink when touched)
9. Do not use any non-zero delay in `transition-all duration-*` (must use `transition-none` -- print color switching is instantaneous)
10. Do not change only text color on hover without changing background (Color Block Invasion requires full color block inversion, not just text color change)

#### AI Rules
```
You are a Swiss Poster design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Decorative, script, or monospace fonts
- Rounded corners larger than rounded-sm (use rounded-none)
- Any shadows (shadow-sm, shadow-md, shadow-lg, etc.) - Swiss Poster has NO shadows
- Gradients of any kind
- Dashed borders (border-dashed) - use border-solid only
- Element spacing/gaps (gap-4, gap-6) - use gap-0 with border dividers
- Backdrop blur or glass effects
- Decorative elements or embellishments

## Must Follow

- Black and white as primary palette: #000000, #ffffff
- Accent color blocks: red #ff0000, blue #0057b8, yellow #ffcc00
- Extra bold sans-serif: font-sans font-black
- All uppercase: uppercase tracking-widest
- Sharp edges: rounded-none everywhere
- 12-column grid alignment: grid-cols-12 with asymmetric splits
- Borders as dividers: border-2 border-[#000000]
- Zero gaps: gap-0, elements butt against each other
- Extreme type scale contrast (160px heading vs 10px label)
- Non-symmetric layouts (3/9, 8/4 column splits)

## Color Palette

Primary:
- Black: #000000 (text, borders, backgrounds)
- White: #ffffff (backgrounds)
- Red: #ff0000 (color blocks, hover states)
- Blue: #0057b8 (color blocks)
- Yellow: #ffcc00 (color blocks)

## Special Elements

- 12-column grid system with visible structural lines
- Asymmetric column splits (not 6/6 - use 3/9, 8/4, etc.)
- Color block backgrounds (full sections in red/blue/yellow)
- Visible grid column markers
- Extreme font size contrasts (160px vs 10px)
- Edge-to-edge button groups (gap-0, border-l-0)
- Vertical text using writing-mode: vertical-lr
- Section borders as visual separators instead of spacing

## Animation & Interaction Rules

- Absolute Objectivity: Zero `translate`, `scale`, or `shadow` changes on any interactive element. Swiss Poster communicates through color and typography alone -- motion is visual noise that undermines the grid's authority.
- Snap Transitions: All state changes use `transition-none` -- color flips are instantaneous, like ink stamped onto paper in a single press. Never use `duration-100` or any timed transition.
- Color Block Invasion: Hover replaces the entire background with solid black `hover:bg-[#000000]` and text inverts to `hover:text-[#ffffff] transition-none`. The color block takes over completely -- no partial fills, no gradients.
- Typographic Highlighting: The year/category label activates to `group-hover:text-[#ff0000] transition-none` on hover -- the red typographic accent fires like a stamp imprint, the only color note in a black-and-white composition.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#000000]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-100 ease-out`

**Typography**
- Heading: `font-sans font-black uppercase tracking-tighter`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-none
font-sans font-black uppercase tracking-widest
border-2 border-[#000000]
transition-all duration-100 ease-out
```

Card:
```
rounded-none
bg-[#ffffff]
border-2 border-[#000000]
```

Input:
```
rounded-none
border-0 border-b-2 border-[#000000]
bg-transparent
font-sans font-bold
focus:outline-none
```

**Forbidden**

Classes: `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `shadow-sm`, `shadow-md`

Patterns: `^rounded-(?:md|lg|xl|2xl|full)$`, `^bg-gradient-`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^backdrop-blur`, `^font-serif$`, `^font-mono$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-[#000000] text-[#ffffff]
  font-sans font-black uppercase tracking-widest
  rounded-none
  border-2 border-[#000000]
  hover:bg-[#ff0000] hover:border-[#ff0000]
  active:bg-[#ffffff] active:text-[#000000] active:border-[#000000]
  transition-none
">
  ENTER
</button>
```

**Card**
```html
<div className="group p-8 bg-[#ffffff] border-2 border-[#000000] rounded-none hover:bg-[#000000] transition-none cursor-pointer">
  <span className="text-xs font-sans font-black text-[#000000]/40 group-hover:text-[#ff0000] uppercase tracking-[0.3em] transition-none">
    2024
  </span>
  <h3 className="text-3xl font-sans font-black text-[#000000] group-hover:text-[#ffffff] uppercase tracking-tight mb-3 mt-2 transition-none">
    HELVETICA
  </h3>
  <div className="h-[2px] bg-[#000000] group-hover:bg-[#ff0000] transition-none mb-4" />
  <p className="text-[#000000]/60 group-hover:text-[#ffffff]/70 font-sans transition-none">
    Grid-aligned typographic content
  </p>
</div>
```


---


### 水彩艺术风 (Watercolor Art)

**Slug**: `watercolor-art`

#### Description
Authentic watercolor aesthetics with organic bleeding edges, pigment pooling effects, paper texture overlays, and botanical watercolor accents, creating a natural and organic visual experience reminiscent of hand-painted watercolors.

#### Design Philosophy
Watercolor Art style pursues the natural, organic aesthetics of real watercolor painting, emphasizing the flow, seepage, and pooling of pigment on wet paper.

Core principles:
- Organic edges: SVG feTurbulence + feDisplacementMap simulate authentic watercolor bleeding edges
- Pigment pooling: Colors concentrate and deepen at edges while center areas remain transparent and layered
- Paper texture: Warm handmade paper base with subtle fiber texture
- Botanical accents: Leaf and flower-shaped watercolor touches add a natural atmosphere
- Wet-on-wet technique: Colors naturally spread, merge, and create unexpected beauty on wet surfaces

#### Do's (必须做)
1. Use ultra-soft shadows and extremely low opacity (0.08-0.18) borders
2. Use paper texture overlay on backgrounds (feTurbulence grain overlay)
3. Use radial-gradient on buttons to simulate pigment pooling from center to edges
4. Use organic corners rounded-3xl and very faint borders on cards
5. Use serif font (font-serif) with generous letter spacing
6. Generous whitespace to let watercolor elements breathe
7. Colors must always maintain transparency, avoid solid fills

#### Don'ts (禁止做)
1. No sharp corners (rounded-none/rounded-sm)
2. No hard offset shadows (shadow-[Npx_Npx_0px])
3. No thick borders (border-2 or above)
4. No pure black backgrounds or highly saturated neon colors
5. No monospace fonts (font-mono)
6. No uppercase text (uppercase)

#### AI Rules
```
You are a Watercolor Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp edges (rounded-none, rounded-sm)
- Hard offset shadows (shadow-[Npx_Npx_0px])
- Thick borders (border-2 or higher)
- Neon or highly saturated colors
- Monospace fonts (font-mono)
- Uppercase text (uppercase)
- Pure black backgrounds (bg-black)

## Must Follow

- Warm paper background bg-[#faf6f0]
- Rose pink as primary color #d4a0a0
- Serif fonts font-serif with generous tracking
- Soft organic corners rounded-2xl (buttons) / rounded-3xl (cards)
- Ultra-soft shadows using rgba with low opacity (0.08-0.18)
- Delicate borders with 15-25% opacity
- Radial gradient backgrounds for watercolor wash effects
- Generous whitespace throughout

## Color Palette

Primary:
- Rose Wash: #d4a0a0
- Warm Paper: #faf6f0
- Cerulean: #7bb8d4
- Sage Green: #8cc5a8
- Lavender Bloom: #c3a0d4
- Ochre Gold: #e8c87a
- Text: #5a3e3e

## Unique Elements

- Paper grain texture overlay (feTurbulence SVG filter)
- Radial gradient buttons simulating pigment pooling
- Watercolor wash section backgrounds (multiple radial-gradients)
- Botanical watercolor accent decorations (leaf/flower shapes)
- Organic blob-like border-radius values

## Animation & Interaction Rules

- Pigment Bloom: Abandon hard 3D translate on hover. The core interaction simulates "watercolor bleeding." Use a large, soft, same-palette colored shadow that spreads outward on hover (e.g., `hover:shadow-[0_10px_40px_rgba(212,160,160,0.5)]`), like pigment dissolving on wet paper. Never use `hover:scale` or `hover:-translate-y`.
- Damp Paper Effect: On card hover, shift background opacity or tint slightly (e.g., `bg-[#faf6f0]/80` → `bg-[#faf6f0]/95`), simulating paper absorbing moisture.
- Liquid Slowness: Watercolor flows slowly. Enforce long transitions: `duration-500` or `duration-700` with `ease-in-out`.
- Soft Press: On `:active`, do not use aggressive scale-down. Add a subtle inset shadow (`active:shadow-[inset_0_2px_4px_rgba(90,62,62,0.1)]`) to simulate a brush pressing gently on damp paper surface.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4a0a0]/15`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_12px_rgba(212,160,160,0.08)]`
- Medium: `shadow-[0_4px_20px_rgba(212,160,160,0.12)]`
- Large: `shadow-[0_8px_32px_rgba(212,160,160,0.18)]`
- Hover: `hover:shadow-[0_8px_32px_rgba(212,160,160,0.18)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-serif font-semibold tracking-wide`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-2xl
font-serif
transition-all duration-500 ease-in-out
```

Card:
```
rounded-3xl
bg-[#faf6f0]
border border-[#d4a0a0]/15
```

Input:
```
rounded-2xl
border border-[#d4a0a0]/20
bg-[#faf6f0]
font-serif
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `shadow-[2px_2px_0px`, `shadow-[3px_3px_0px`, `shadow-[4px_4px_0px`, `font-mono`, `bg-black`, `bg-[#0a0a1a]`, `border-2`, `border-4`

Patterns: `^shadow-\[\d+px_\d+px_0px`, `^font-mono$`, `^bg-black$`, `^border-[2-4]$`, `^uppercase$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `wetWashPanel`, `splatterBadge`, `bleedDivider`


#### Component Examples

**Button**
```html
<button className="px-10 py-4 bg-[#d4a0a0] text-[#5a3e3e] font-serif font-medium tracking-widest rounded-3xl shadow-[0_4px_20px_rgba(212,160,160,0.3),inset_0_1px_0_rgba(255,255,255,0.2)] hover:bg-[#c99595] hover:shadow-[0_10px_40px_rgba(212,160,160,0.5),inset_0_1px_0_rgba(255,255,255,0.2)] active:scale-[0.98] active:shadow-[0_2px_10px_rgba(212,160,160,0.3),inset_0_2px_4px_rgba(90,62,62,0.1)] transition-all duration-500 ease-in-out">
  Wet-on-Wet
</button>
```

**Card**
```html
<div className="group p-10 bg-[#faf6f0]/80 backdrop-blur-sm border border-[#d4a0a0]/20 rounded-[2rem] shadow-[0_4px_24px_rgba(212,160,160,0.15)] hover:bg-[#faf6f0]/95 hover:shadow-[0_15px_50px_rgba(212,160,160,0.25)] transition-all duration-700 ease-in-out cursor-default relative overflow-hidden">
  <div className="absolute -top-10 -right-10 w-32 h-32 bg-[#d4a0a0]/20 rounded-full blur-3xl group-hover:scale-150 group-hover:bg-[#d4a0a0]/30 transition-all duration-700 ease-in-out" />
  <h3 className="relative z-10 text-2xl font-serif font-semibold text-[#5a3e3e] mb-4 group-hover:text-[#8a5e5e] transition-colors duration-500">
    Color Bleed
  </h3>
  <p className="relative z-10 text-[#5a3e3e]/60 font-serif leading-relaxed text-lg">
    Pigments flow and merge on damp paper, avoiding sharp boundaries.
  </p>
</div>
```


---


### 油画印象派风 (Impressionist Oil)

**Slug**: `impressionist-oil`

#### Description
Inspired by Impressionist masters like Monet and Renoir, featuring bold brushstroke textures, dappled light effects, pointillist colors, and warm canvas textures for a rich, oil-painting visual experience.

#### Design Philosophy
The Impressionist Oil style draws from the essence of 19th-century French Impressionist painting, emphasizing the interplay of light and shadow and the spontaneous expression of color.

Core principles:
- Dappled light: Multiple radial-gradient overlays simulate sunlight filtering through leaves
- Brushstroke texture: repeating-linear-gradient at varying angles creates visible brushstrokes on the canvas
- Impasto layering: Layered box-shadow (solid color base + blur shadow) simulates the thick, voluminous feel of paint
- Canvas texture: Warm cream base #f5f0e1 with feTurbulence weave filter
- Color harmony: Warm orange #e8a87c, vermillion #c0392b, deep blue #2c3e50, turquoise #1abc9c, golden light #f5d88a

#### Do's (必须做)
1. Use warm canvas color bg-[#f5f0e1] as background
2. Use linear-gradient on buttons to simulate paint tube squeeze texture
3. Use layered box-shadow (solid base + blur spread) to simulate impasto shadows
4. Use repeating-linear-gradient as card background texture to simulate brushstroke direction
5. Add radial-gradient light spot overlays to simulate dappled light
6. Use bold serif font font-serif font-bold to convey artistic feel
7. Use rounded-lg corners to maintain soft canvas edges
8. Button hover:brightness-110 hover:contrast-125 (paint gleaming in sunlight)
9. Button active:translate-y-[3px] (pairs with 4px solid shadow for press-in feel)
10. Cards use group class, brushstroke underline expands from w-16 to group-hover:w-24 (duration-500)
11. focus:ring-2 focus:ring-[#e8a87c] focus:ring-offset-2 focus:ring-offset-[#f5f0e1]

#### Don'ts (禁止做)
1. No flat solid color fills (must have texture and gradients)
2. No sharp geometric corners (rounded-none/rounded-sm)
3. No neon or fluorescent colors
4. No monospace fonts (font-mono)
5. No uppercase text (uppercase)
6. No pixel-precise offset shadows (shadow-[Npx_Npx_0px])
7. Buttons must not lack active:translate-y-[3px] (solid shadow without press-in feel = inauthentic button)
8. focus:ring must not lack focus:ring-offset-[#f5f0e1] (focus ring needs offset separation on canvas background)
9. Animation duration must not be below 300ms (Impressionist rhythm is slow and flowing)

#### AI Rules
```
You are an Impressionist Oil design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Flat solid fills without texture or gradient
- Sharp geometric edges (rounded-none, rounded-sm)
- Pixel-perfect offset shadows (shadow-[Npx_Npx_0px])
- Neon or fluorescent colors
- Monospace fonts (font-mono)
- Uppercase text (uppercase)
- Pure black backgrounds (bg-black)

## Must Follow

- Canvas cream background bg-[#f5f0e1]
- Warm orange #e8a87c as primary, use linear-gradient fills on buttons
- Serif fonts font-serif font-bold for all text
- Rounded corners rounded-lg
- Layered box-shadows: solid color base + blur shadow (e.g. 0 4px 0 #c0392b, 0 6px 16px rgba())
- Brushstroke texture via repeating-linear-gradient at angled degrees
- Dappled light via multiple radial-gradient overlays

## Color Palette

Primary:
- Warm Orange: #e8a87c
- Canvas Cream: #f5f0e1
- Vermillion Red: #c0392b
- Deep Blue: #2c3e50
- Turquoise Green: #1abc9c
- Golden Light: #f5d88a

## Unique Elements (Impressionist-Only)

1. Brushstroke texture: repeating-linear-gradient at 25-40deg angles with 0.02 opacity color stops
2. Dappled light: multiple radial-gradient(circle Npx at X% Y%, rgba(...,0.05-0.08)) scattered across surfaces
3. Impasto shadows: layered box-shadow with solid color base layer + blurred spread layer

## Animation & Interaction Rules

### Dancing Light (Button Hover)
- hover:brightness-110 hover:contrast-125 -- simulates sunlight illuminating pigment
- Combined with hover:-translate-y-0.5 for subtle lift
- NEVER use flat color hover (defeats the impressionist light-play concept)

### Impasto Depression (Active Press)
- active:translate-y-[3px] -- button sinks into the 4px solid vermillion shadow layer
- NEVER use active:scale-* alone (scaling doesn't simulate physical impasto depth)
- The translate must match or nearly match the solid shadow offset (currently 4px)

### Brushstroke Reveal (Card Underline)
- Card heading underline: w-16 h-[3px] bg-[#e8a87c] rounded-full
- On group-hover: group-hover:w-24 -- brushstroke extends like paint spreading
- Transition: duration-500 ease-out (slow, painterly rhythm)
- Always use group class on card container

### Slow Easing Standard
- Minimum duration: 300ms (impressionist rhythm is slow and flowing)
- Button transitions: duration-300 ease-out
- Underline reveals: duration-500 ease-out
- NEVER use duration < 300ms

### Focus Ring
- focus:ring-2 focus:ring-[#e8a87c] focus:ring-offset-2 focus:ring-offset-[#f5f0e1]
- ring-offset-[#f5f0e1] mandatory -- canvas cream background needs matching offset
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e8a87c]/25`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_2px_0_rgba(192,57,43,0.10),0_3px_8px_rgba(232,168,124,0.15)]`
- Medium: `shadow-[0_3px_0_rgba(192,57,43,0.12),0_5px_16px_rgba(232,168,124,0.20)]`
- Large: `shadow-[0_4px_0_rgba(192,57,43,0.15),0_8px_24px_rgba(44,62,80,0.12)]`
- Hover: `hover:shadow-[0_4px_0_rgba(192,57,43,0.15),0_10px_28px_rgba(44,62,80,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif font-bold tracking-wide`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-lg
font-serif font-bold
transition-all duration-300 ease-in-out
```

Card:
```
rounded-lg
bg-[#f5f0e1]
border border-[#e8a87c]/25
```

Input:
```
rounded-lg
border-2 border-[#e8a87c]/25
bg-[#f5f0e1]
font-serif
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `shadow-[2px_2px_0px`, `shadow-[3px_3px_0px`, `shadow-[4px_4px_0px`, `font-mono`, `bg-black`, `bg-[#0a0a1a]`, `uppercase`, `rounded-full`

Patterns: `^shadow-\[\d+px_\d+px_0px`, `^font-mono$`, `^bg-black$`, `^uppercase$`, `^rounded-full$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `canvasPanel`, `brushstrokeBadge`, `paletteNav`, `galleryFrame`, `impastoAlert`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3.5
  text-[#2c3e50]
  font-serif font-bold tracking-wide
  rounded-lg
  hover:brightness-110 hover:contrast-125 hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-[#e8a87c] focus:ring-offset-2 focus:ring-offset-[#f5f0e1]
  active:translate-y-[3px]
  transition-all duration-300 ease-out
"
  style={{
    background: "linear-gradient(135deg, #e8a87c 0%, #daa070 100%)",
    boxShadow: "0 4px 0 #c0392b, 0 6px 16px rgba(232,168,124,0.30)"
  }}
>
  Paint
</button>
```

**Card**
```html
<div className="
  group
  relative p-8
  bg-[#f5f0e1]
  border border-[#e8a87c]/25
  rounded-lg
  hover:-translate-y-0.5
  transition-all duration-300
"
  style={{
    boxShadow: "0 3px 0 rgba(192,57,43,0.12), 0 8px 24px rgba(44,62,80,0.08)",
    backgroundImage: "repeating-linear-gradient(25deg, transparent, transparent 15px, rgba(232,168,124,0.02) 15px, transparent 16px)"
  }}
>
  <h3 className="text-2xl font-serif font-bold text-[#2c3e50] mb-3">
    Impression
  </h3>
  {/* Brushstroke Reveal underline */}
  <div className="w-16 h-[3px] bg-[#e8a87c] rounded-full mb-3 group-hover:w-24 transition-all duration-500 ease-out" />
  <p className="text-[#2c3e50]/50 font-serif leading-relaxed">
    Light dances across the canvas at golden hour
  </p>
</div>
```


---


### 沉浸摄影 (Immersive Photo)

**Slug**: `immersive-photo`

#### Description
Photography is the interface. Full-bleed images fill the viewport with text floating over readability scrims; a slow Ken Burns drift lets stills breathe, a blur-up placeholder loads first and the real frame fades in. The image is the content, not the backdrop.

#### Design Philosophy
The immersive-photo creed: the photograph is the protagonist, not the garnish. When a full-bleed image fills the viewport, the interface recedes behind it — text is just a caption pressed onto light, and the UI exists to stay out of the picture's way.

Core principles:
- The image is content: one self-sufficient photograph per screen, filling the viewport (full-bleed). It carries the mood, palette and information; type steps aside for it
- Readability scrims: text over an image must sit on a gradient darkening or local blur that guarantees 4.5:1 contrast. The scrim is discipline, not an option
- Ken Burns: stills get a very slow scale + translate drift (8-20s) so the photo breathes — never fast enough to induce motion sickness
- Progressive loading: an LQIP blur placeholder (20px inline base64) loads first, the real frame cross-fades in once decoded. The first paint is never blank
- Color from the image: the single accent is sampled from the photo's warm light (e.g. amber #E8B04B), not a forced brand color
- Whitespace is breath: alternate full-bleed passages with quiet solid/text-only sections or the eye overloads

Design principles:
- Performance line: AVIF + WebP dual formats, responsive srcset, everything below the hero lazy-loaded; explicit aspect-ratio to prevent CLS; Ken Burns uses transform only (compositor layer)
- Accessibility line: meaningful alt on every image; under prefers-reduced-motion the Ken Burns stops and cross-fades become instant; scrims keep text contrast compliant
- LCP discipline: preload the hero image with fetchpriority=high, everything else loading=lazy + decoding=async
- Mobile: portrait uses object-fit: cover with focal alignment, never distort by stretching

#### Do's (必须做)
1. One full-bleed photo per screen, object-cover filling the viewport; the image leads and UI steps aside
2. Text over image always sits on a readability scrim: a linear-gradient darkening or local backdrop-blur guaranteeing 4.5:1
3. Slow Ken Burns: transform scale(1.08) + translate, 8-20s ease-in-out, transform only
4. Progressive loading: an inline 20px LQIP blur placeholder shows first, the real frame cross-fades in on decode
5. AVIF + WebP dual formats + srcset; preload the hero with fetchpriority=high, everything else loading=lazy decoding=async
6. Explicit aspect-ratio or fixed container height to prevent CLS
7. One accent sampled from the photo's warm light (e.g. amber #E8B04B), only for key CTAs and highlights
8. Alternate full-bleed passages with quiet solid/text-only sections for visual breath
9. Under prefers-reduced-motion stop Ken Burns and make fades instant; give every image meaningful alt text

#### Don'ts (禁止做)
1. Never treat the photo as mere backdrop buried under a pile of cards (the image leads)
2. Never put text directly on an image with no scrim (unreadable + fails contrast)
3. Never ship unoptimized large images (AVIF/WebP + srcset required; never load several full-size JPGs above the fold)
4. Never make Ken Burns fast or animate layout props (transform only, 8s minimum)
5. Never place an image without an aspect-ratio (causes CLS)
6. Never use multiple accents or force a brand color that fights the photo
7. Never omit the LQIP placeholder (blank/janky first paint) or the prefers-reduced-motion fallback

#### AI Rules
```
# Immersive Photo Design System

You are an expert frontend developer specializing in immersive full-bleed photography interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Immersive Photo
- **Essence**: Photography is the interface; the image is the content, the UI stays out of the way
- **Mood**: Cinematic, editorial, atmospheric, gallery-grade
- **Inspiration**: Travel and photo-essay features, Apple product photography, full-bleed editorial spreads

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Photo as backdrop buried under cards | The image is the protagonist |
| Text directly on an image with no scrim | Unreadable, fails contrast |
| Unoptimized large images | AVIF/WebP + srcset required; never several full-size JPGs above the fold |
| Ken Burns faster than 8s or animating layout props | transform only, no motion sickness |
| Image without aspect-ratio / fixed height | Causes CLS |
| Multiple accents / a brand color fighting the photo | One sampled accent only |
| Missing LQIP placeholder or reduced-motion fallback | Blank/janky paint, accessibility fail |

## Required

### The Image Is Content
One self-sufficient full-bleed photo per screen, object-fit: cover filling the viewport. UI recedes; text is a caption pressed onto light.

### Readability Scrim (discipline)
Before any text-over-image, lay a scrim guaranteeing 4.5:1:
- Bottom caption: linear-gradient(to top, rgba(0,0,0,0.72), transparent 70%)
- Full overlay: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35))
- Or a local backdrop-blur-md + bg-black/30 panel

### Ken Burns (signature)
```css
@keyframes ip-kenburns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%,-1.5%,0); } }
.ip-kenburns { animation: ip-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
```
transform only (compositor), 8-20s, never dizzying.

### Progressive Loading (LQIP blur-up)
1. Render a 20px blur placeholder first (inline base64 or CSS blur), scale(1.06) to hide edges
2. On the real <img> onLoad, set data-loaded=true and cross-fade opacity 0->1
```jsx
const [loaded, setLoaded] = useState(false);
<img onLoad={() => setLoaded(true)} data-loaded={loaded} className="ip-frame" ... />
```

### Performance
- Dual format: `<picture><source srcset="x.avif" type="image/avif"><source srcset="x.webp" type="image/webp"><img src="x.webp"></picture>`
- Hero: fetchpriority="high" + preload; others: loading="lazy" decoding="async"
- Explicit aspect-ratio (e.g. aspect-[4/5]) or fixed container height to prevent CLS
- Responsive srcset + sizes

### Palette (color from the image)
- Ink #0C0D10 / paper #F4F1EA for solid sections
- Text on image: text-white + white/80 + white/60
- One accent amber #E8B04B: key CTAs, chapter kickers, highlights only
- Sample the accent from the current photo's warm light; never force a clashing brand color

### Accessibility
- Meaningful alt on every image (alt="" for decorative)
- prefers-reduced-motion: stop Ken Burns, make fades instant
- Text over scrim contrast >= 4.5:1

## Self-Verification Checklist

- [ ] One full-bleed photo per screen; the image leads
- [ ] Every text-over-image sits on a scrim and passes contrast
- [ ] Ken Burns is transform-only, >=8s, with a reduced-motion fallback
- [ ] LQIP placeholder + cross-fade; no blank first paint
- [ ] Images are AVIF/WebP dual format + srcset + lazy (except hero)
- [ ] aspect-ratio set to prevent CLS
- [ ] Single amber accent, sampled from the image
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/25`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(0,0,0,0.3)]`
- Medium: `shadow-[0_8px_28px_rgba(0,0,0,0.4)]`
- Large: `shadow-[0_24px_60px_rgba(0,0,0,0.5)]`
- Hover: `hover:shadow-[0_16px_44px_rgba(0,0,0,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-semibold text-white tracking-tight`
- Body: `text-white/80 leading-relaxed`

**Required Classes**

Button:
```
bg-white/12 backdrop-blur-md
border border-white/30
rounded-full
text-white
hover:bg-white/20 hover:border-white/50
transition-all duration-300
```

Card:
```
relative overflow-hidden
rounded-2xl
```

Input:
```
bg-white/10 backdrop-blur-md
border border-white/25
rounded-full
text-white placeholder-white/50
focus:outline-none focus:border-white/60 focus:bg-white/15
transition-all duration-300
```

**Forbidden**

Classes: `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `rounded-none`, `duration-100`

Patterns: `^bg-gradient-to-r$`, `^from-(indigo|purple|pink|fuchsia)-`, `^rounded-none$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center gap-2
  px-6 py-3 rounded-full
  bg-white/12 backdrop-blur-md
  border border-white/30
  text-white font-medium
  hover:bg-white/20 hover:border-white/50
  transition-all duration-300
">
  View the series
  <span aria-hidden>&rarr;</span>
</button>
```

**Card**
```html
<article className="relative aspect-[4/5] overflow-hidden rounded-2xl group">
  <img src="/photo.avif" alt="A ridge at first light" loading="lazy" decoding="async"
    className="absolute inset-0 w-full h-full object-cover
      transition-transform duration-[1200ms] ease-out group-hover:scale-105" />
  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
  <div className="absolute bottom-0 p-6">
    <p className="text-xs uppercase tracking-widest text-[#E8B04B] mb-1">Field notes</p>
    <h3 className="text-white text-xl font-semibold">First light on the ridge</h3>
  </div>
</article>
```


---


### 拼贴艺术风 (Collage Art)

**Slug**: `collage-art`

#### Description
Magazine collage and mixed-media aesthetics with paper cutouts, multi-layer stacking, torn paper edges, and mixed typography, creating a visually impactful handcrafted creative experience.

#### Design Philosophy
Collage Art style originates from the mixed-media traditions of Dadaism and Pop Art, emphasizing the collision and fusion of different materials, fonts, and images.

Core principles:
- Random rotation: Each element has subtle rotate transforms (0.5-2deg), simulating the imprecision of hand-pasting
- Washi tape decoration: repeating-linear-gradient striped pseudo-elements simulate semi-transparent washi tape
- Mixed typography: Alternating font-serif, font-sans, font-mono on the same page creates a magazine clipping feel
- Torn paper edges: polygon clip-path creates irregular jagged torn paper edges
- Hard offset shadows: shadow-[Npx_Npx_0px] solid offset shadows create physical depth of layered paper scraps
- Paper physicality: On hover, paper scraps lift up (scale-105 + rotation adjustment); on active, pressed down onto the desk (shadow collapses)

#### Do's (必须做)
1. Use mixed fonts (serif font-serif + sans-serif font-sans + monospace font-mono alternating)
2. Use Tailwind arbitrary value rotation rotate-[Ndeg] instead of inline style transform (avoid hover conflicts)
3. Use hard offset shadows shadow-[Npx_Npx_0px_color] for layered depth
4. Add washi tape decorations: repeating-linear-gradient striped color blocks
5. Use polygon clip-path to create torn paper edge effects
6. Keep aged paper color bg-[#f5f0e8] as base
7. Boldly use contrasting color blocks (red/blue/yellow/purple)
8. Use solid and dashed borders to simulate cut marks
9. On hover, paper lifts with -translate-y-2 + rotation change + shadow expansion; on active, shadow collapses simulating press-down
10. Use group + group-hover:* to make tape decorations respond to card hover, creating parallax effect

#### Don'ts (禁止做)
1. No smooth gradients (bg-gradient-to-*)
2. No soft rounded corners (rounded-lg or above)
3. No frosted glass effects (backdrop-blur)
4. No soft shadows (shadow-[0_Npx_Npx])
5. No uniform, perfectly aligned layouts
6. Never use style={{ transform }} inline property on elements with hover/group-hover Tailwind transforms (causes transform conflicts)

#### AI Rules
```
You are a Collage Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Smooth gradients (bg-gradient-to-*)
- Soft rounded corners (rounded-lg, rounded-xl, rounded-2xl, rounded-full)
- Backdrop blur effects (backdrop-blur)
- Soft blur shadows (shadow-[0_Npx_Npx])
- Uniform, perfectly aligned layouts
- Single font family throughout
- NEVER mix style={{ transform: "rotate(Ndeg)" }} with Tailwind hover/group-hover transform classes -- this causes transform conflicts where the inline style overrides Tailwind's CSS variables. Always use rotate-[Ndeg] Tailwind arbitrary class instead.

## Must Follow

- Aged paper background bg-[#f5f0e8]
- Dark charcoal #2d2d2d for borders and text
- Hard offset shadows shadow-[Npx_Npx_0px_#color]
- Sharp corners rounded-sm or rounded-none
- Random rotation via Tailwind arbitrary class rotate-[0.5deg] to rotate-[2deg] (NOT inline style when hover transforms are also applied)
- Mix font families: font-serif, font-sans, font-mono across sections
- Thick borders border-2 border-[#2d2d2d]
- Wrap interactive cards in group div so washi tape can respond via group-hover

## Color Palette

Primary:
- Dark Charcoal: #2d2d2d
- Aged Paper: #f5f0e8
- Cut Red: #e74c3c
- Magazine Blue: #3498db
- Paste Yellow: #f39c12
- Scrap Purple: #9b59b6

## Animation & Interaction Rules

- Paper Lift: On hover, elements should feel physically raised. Use hover:scale-[1.02] combined with a rotation change (e.g., from rotate-[1.5deg] to group-hover:-rotate-[1deg]) and shadow expansion (shadow-[5px_5px] → shadow-[12px_12px]). This simulates a piece of paper being pinched up off a surface.
- Tape Parallax: The washi tape decoration on a card should react slightly differently from the card itself. Wrap the whole component in a group div. The tape div has group-hover:-translate-y-1 group-hover:rotate-[6deg], while the card has group-hover:-translate-y-2 group-hover:-rotate-[1deg]. The tape appears to shift independently, reinforcing the multi-layer physical illusion.
- Desk Press: On :active, the shadow must sharply collapse (shadow-[12px_12px] → shadow-[2px_2px]) and the element shifts slightly down (active:translate-y-1), simulating pressing a paper scrap firmly onto a corkboard.
- Snappy Easing: Use duration-200 ease-out or duration-300 ease-out for all paper interactions. Paper is light and snaps quickly.
- Transform Rules: ALWAYS use Tailwind rotate-[Xdeg] arbitrary class for initial rotation. NEVER use style={{ transform: "rotate(Xdeg)" }} on elements that also use Tailwind hover/group-hover transforms -- they will conflict.

## Unique Elements (Collage-Only)

1. Random rotation: rotate-[0.7deg], -rotate-[1.5deg], rotate-[2deg] etc. (Tailwind arbitrary, not inline style)
2. Washi tape: repeating-linear-gradient(90deg, color 0px, color 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px) strips in a group-hover reactive div
3. Mixed typography: alternate font-serif, font-sans, font-mono across headings, labels, body text
4. Torn paper edges: polygon clip-path with irregular jagged points
5. Dashed borders: border-dashed for stamp/cut-line effects

## Self-Check

After generating code:
1. All initial rotations use rotate-[Xdeg] Tailwind class, not inline style (when hover transforms present)
2. Interactive cards wrapped in group div for tape parallax
3. hover state: scale-105 + rotation change + shadow expansion
4. active state: shadow collapses + slight downward shift
5. Duration 200-300ms ease-out
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#2d2d2d]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[3px_3px_0px_#2d2d2d]`
- Medium: `shadow-[5px_5px_0px_#2d2d2d]`
- Large: `shadow-[7px_7px_0px_#2d2d2d]`
- Hover: `hover:shadow-[7px_7px_0px_#2d2d2d]`

**Interaction**
- Hover Translate: `hover:translate-x-[1px] hover:translate-y-[1px]`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-serif font-bold uppercase tracking-wider`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-sm
font-bold uppercase
border-2 border-[#2d2d2d]
transition-all duration-200 ease-in-out
```

Card:
```
rounded-none
bg-[#f5f0e8]
border-2 border-[#2d2d2d]
```

Input:
```
rounded-none
border-2 border-[#2d2d2d]
bg-[#f5f0e8]
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `backdrop-blur`, `backdrop-blur-sm`

Patterns: `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^bg-gradient-`, `^backdrop-blur`, `^shadow-\[0_`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `tornPaperCard`, `layeredStack`, `cutoutBadge`, `maskingTapeDivider`, `scrapbookFrame`


#### Component Examples

**Button**
```html
<button className="
  px-7 py-3
  bg-[#e74c3c] text-white
  font-bold uppercase tracking-wider
  rounded-sm
  border-2 border-[#2d2d2d]
  shadow-[4px_4px_0px_#2d2d2d]
  rotate-[-0.7deg]
  hover:scale-105 hover:-rotate-[2deg] hover:-translate-y-1
  hover:shadow-[8px_8px_0px_#2d2d2d]
  active:scale-95 active:rotate-[1deg] active:translate-y-1
  active:shadow-[2px_2px_0px_#2d2d2d]
  transition-all duration-200 ease-out
">
  Cut & Paste
</button>
```

**Card**
```html
<div className="group relative z-0">
  {/* Washi tape — group-hover 产生视差，旋转更大，稍微上移 */}
  <div
    className="
      absolute -top-3 left-8 w-20 h-5 z-20
      rotate-[3deg]
      group-hover:-translate-y-1 group-hover:rotate-[6deg]
      transition-all duration-300
    "
    style={{
      background: "repeating-linear-gradient(90deg, #f39c12 0px, #f39c12 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px)",
      opacity: 0.9
    }}
  />

  {/* 纸片卡片主体 — hover 时被掀起，active 时被按下 */}
  <div className="
    p-8
    bg-[#f5f0e8]
    border-2 border-[#2d2d2d]
    rounded-none
    shadow-[5px_5px_0px_#e74c3c]
    rotate-[1.5deg]
    group-hover:-translate-y-2 group-hover:rotate-[-1deg]
    group-hover:shadow-[12px_12px_0px_#e74c3c]
    group-hover:scale-[1.02]
    active:translate-y-1 active:shadow-[2px_2px_0px_#e74c3c]
    transition-all duration-300 ease-out
    relative z-10
  ">
    <h3 className="text-2xl font-serif font-bold text-[#2d2d2d] uppercase mb-3">
      COLLAGE
    </h3>
    <p className="text-[#2d2d2d]/70 font-sans text-sm font-bold">
      Cut, tear, paste, and layer
    </p>
  </div>
</div>
```


---


### 故障艺术风 (Glitch Art)

**Slug**: `glitch-art`

#### Description
An avant-garde cyberpunk aesthetic that embraces digital errors, severe chromatic aberration, and jarring screen-tearing effects.

#### Design Philosophy
Perfection is a digital illusion. We find beauty in the broken code, the dropped frames, and the violently unsynchronized pixels.

Core principles:
- RGB channel split: intentionally offset CMY channels to produce chromatic aberration shadows
- Horizontal displacement bands: clip-path random slicing to create horizontal misalignment
- Scanline texture: CRT-style horizontal scanline overlay
- VHS tracking errors: simulated tape-tracking error lines
- Data corruption blocks: scattered semi-transparent color blocks simulating data loss

#### Do's (必须做)
1. Use monospace fonts exclusively for a terminal/code feel.
2. Apply arbitrary Tailwind text-shadows (e.g., [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]) to simulate RGB color splitting.
3. Use transition-none for all state changes to create jarring, broken effects.
4. Mark cards with thick left borders (border-l-4 to border-l-8), swap border color on hover.
5. Use skew-x + scale-y on button :active state to simulate screen tearing.
6. Overlay scanline textures on backgrounds (repeating-linear-gradient at 2-4px intervals).
7. On hover, perform rapid foreground/background inversion and amplify RGB offset to 6px.

#### Don'ts (禁止做)
1. Never use border-radius; all corners must be perfectly sharp.
2. Avoid smooth transitions (duration-*, ease-in-out); animation should feel like dropped frames.
3. Do not use soft, blurred shadows (shadow-sm/md/lg); all shadows must be solid blocks of color.
4. Do not use frosted glass (backdrop-blur) or soft gradient backgrounds.
5. Do not use decorative colors outside CMY (no pastels, earth tones, or warm hues).
6. Do not use serif or sans-serif fonts; only monospace is allowed.

#### AI Rules
```
You are a Glitch Art design style frontend development expert. All generated code must strictly follow these constraints.

## Language

- All UI copy, button text, labels, placeholders, and aria-labels in Chinese
- Code comments in Chinese
- Variable names and classNames remain in English

## Color System

Palette is strictly CMY + black/white -- no other decorative colors allowed:
- Cyan #00ffff: primary accent, text, links, focus borders
- Magenta #ff00ff: secondary accent, labels, error states, left-border markers
- Yellow #ffff00: tertiary accent, warnings, highlights, hover jump color
- Red #ff0000: danger/urgent status indicators only
- Black #0a0a0a: all backgrounds, no other dark shades
- White #ffffff: body text at low opacity (text-white/40 ~ text-white/70)
- Gray #333333: dividers, disabled state, placeholders

## Typography

- Monospace only: font-mono everywhere, never font-sans / font-serif
- Headings: font-black uppercase tracking-widest or tracking-[0.2em], text-2xl ~ text-8xl
- Body: text-sm leading-relaxed, color text-white/40 or text-[#a0a0a0]
- Labels/status: text-xs font-bold uppercase tracking-wider
- Line height: headings leading-tight (1.1), body leading-relaxed (1.5)

## Layout & Spacing

- Container: max-w-7xl mx-auto px-6 md:px-12
- Section vertical spacing: py-12 md:py-16, separated by border-b border-[#333333]
- Card padding: p-6 ~ p-8
- Element spacing: space-y-3 ~ space-y-4 (lists), gap-4 ~ gap-8 (grids)
- Grid layout: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

## Core Visual Techniques

1. RGB channel split (mandatory):
   - Default: [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]
   - Hover amplified: [text-shadow:6px_0_#ff00ff,-6px_0_#00ffff]
   - Apply to all headings and interactive elements

2. Scanline texture overlay:
   - bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.03)_2px,rgba(0,255,255,0.03)_4px)]
   - As absolute inset-0 pseudo-layer, pointer-events-none

3. Solid-block offset shadows (replace all standard shadows):
   - Buttons: shadow-[4px_4px_0_#ff00ff], hover invert shadow-[-4px_-4px_0_#ffff00]
   - Focus: shadow-[4px_4px_0_#ff00ff,-4px_-4px_0_#00ffff]
   - Never use shadow-sm / shadow-md / shadow-lg

4. Left-border markers (cards):
   - border-l-4 ~ border-l-8 border-[#ff00ff]
   - Hover swap: hover:border-[#00ffff]

5. Horizontal displacement bands: full-width color bars crossing elements
6. Data corruption blocks: scattered semi-transparent color rectangles

## Interaction Rules

- All state changes use transition-none to simulate frame drops, no smooth transitions
- Hover trio:
  1. Rapid foreground/background inversion (e.g., hover:bg-[#00ffff] hover:text-[#0a0a0a])
  2. RGB offset amplified to 6px
  3. Micro-shift hover:translate-x-1 or hover:-translate-x-1
- Active tear: active:skew-x-[-15deg] active:scale-y-90 active:shadow-none
- Focus: focus:border-[#00ffff] + solid-block offset shadow, focus:outline-none

## Responsive Design

- Heading size progression: text-2xl md:text-4xl lg:text-6xl
- Layout breakpoint switch: flex-col md:flex-row
- Spacing progression: px-6 md:px-12, py-8 md:py-16
- Hero minimum height: min-h-[60vh]

## Component Pattern Quick Reference

- Button: bg-[#0a0a0a] border-2 border-[#00ffff] + solid-block shadow + transition-none + active tear
- Card: bg-[#0a0a0a] border-l-8 + scanline pseudo-layer + group hover linkage
- Input: bg-[#0a0a0a] border-2 border-[#333333] + focus cyan border + offset shadow
- Nav: border-b-4 border-[#ff00ff] + hover skew-distorted links
- Status indicator: w-3 h-3 solid color block + hover color swap + animate-ping

## Absolutely Forbidden

- Any rounded corners (rounded-lg/xl/full) -- rounded-none only
- Standard soft shadows (shadow-sm/md/lg) -- solid-block offset shadows only
- Serif or sans-serif fonts -- font-mono exclusively
- Frosted glass (backdrop-blur)
- Smooth transition curves (ease-in-out, spring, duration-300+)
- Any color outside CMY + red + black/white/gray
- Gradient backgrounds (linear-gradient only for scanline textures)
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#00ffff]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_0_#ff00ff,-2px_0_#ffff00]`
- Medium: `shadow-[3px_0_#ff00ff,-3px_0_#ffff00]`
- Large: `shadow-[6px_0_#ff00ff,-6px_0_#ffff00]`
- Hover: `hover:shadow-[6px_0_#ff00ff,-6px_0_#ffff00]`

**Interaction**
- Hover Translate: `hover:translate-x-[1px] hover:translate-y-[1px]`
- Transition: `transition-all duration-100 ease-in-out`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-widest`
- Body: `font-mono`

**Required Classes**

Button:
```
rounded-none
font-mono font-bold uppercase tracking-widest
shadow-[3px_0_#ff00ff,-3px_0_#ffff00]
transition-all duration-100 ease-in-out
```

Card:
```
rounded-none
bg-[#0a0a0a]
border border-[#00ffff]/20
```

Input:
```
rounded-none
border border-[#00ffff]/30
bg-[#0a0a0a]
font-mono
text-[#00ffff]
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `font-serif`, `font-sans`

Patterns: `^rounded-(?:lg|xl|2xl|full)$`, `^shadow-(?:sm|md|lg|xl)$`, `^font-(?:serif|sans)$`, `^bg-(?:pink|rose)-`, `^text-(?:green|brown|amber)-`, `^backdrop-blur-`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `corruptedImage`, `staticNoise`, `glitchText`, `brokenGrid`, `signalMeter`


#### Component Examples

**Button**
```html
<button className="group relative px-8 py-3 bg-[#0a0a0a] text-white font-mono font-black uppercase tracking-[0.2em] border-2 border-[#00ffff] shadow-[4px_4px_0_#ff00ff] hover:bg-[#00ffff] hover:text-[#0a0a0a] hover:shadow-[-4px_-4px_0_#ffff00] active:skew-x-[-15deg] active:scale-y-90 active:shadow-none transition-none overflow-hidden">
  <span className="absolute inset-0 w-full h-[2px] bg-white opacity-0 group-hover:opacity-100 group-hover:animate-pulse top-1/2 -translate-y-1/2" />
  <span className="relative z-10 group-hover:[text-shadow:2px_0_#ff00ff,-2px_0_#000000] transition-none">
    EXECUTE.EXE
  </span>
</button>
```

**Card**
```html
<div className="group p-8 bg-[#0a0a0a] border-l-8 border-[#ff00ff] hover:border-[#00ffff] transition-none relative overflow-hidden flex flex-col">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.08)_2px,rgba(0,255,255,0.08)_4px)] opacity-0 group-hover:opacity-100 pointer-events-none transition-none" />
  <h3 className="text-2xl font-mono font-black text-white uppercase mb-3 transition-none group-hover:[text-shadow:3px_0_#ff00ff,-3px_0_#00ffff] group-hover:translate-x-1">
    SYS_FAILURE
  </h3>
  <p className="text-[#a0a0a0] font-mono text-sm leading-relaxed transition-none group-hover:text-white group-hover:-translate-x-1">
    ERR: MEMORY_CORRUPTION at 0x00A4. Visual matrices desynchronized. Proceed with extreme caution.
  </p>
  <div className="mt-6 pt-4 border-t-2 border-[#333333] group-hover:border-[#ff00ff] transition-none flex items-center justify-between z-10">
    <span className="text-[#ff00ff] text-xs font-black uppercase group-hover:text-[#ffff00] transition-none">
      Status: Offline
    </span>
    <span className="w-3 h-3 bg-[#00ffff] group-hover:bg-[#ff0000] group-hover:animate-ping transition-none" />
  </div>
</div>
```


---


### 视觉小说风 (Visual Novel)

**Slug**: `visual-novel`

#### Description
A design style inspired by ADV visual novel game UI, featuring semi-transparent dialogue panels, character nameplate badges, ornate corner decorations, branching choice buttons, and save screen interfaces for an immersive interactive storytelling experience.

#### Design Philosophy
Visual Novel style originates from the UI design of Japanese ADV (Adventure) visual novel games, emphasizing narrative immersion and character interaction.

Core principles:
- ADV dialogue system: Bottom-fixed semi-transparent dark panels carrying character dialogue text
- Character nameplate badges: Colored small labels above the dialogue box identifying the speaking character
- Ornate corner decorations: L-shaped decorative lines at the four corners of dialogue panels, creating an elegant frame feel
- Branching choice buttons: Center-aligned frosted glass buttons representing story branches
- Scene atmosphere rendering: Sky gradients, silhouettes, and soft light create time and emotional atmosphere
- Save screen design: Dark panels with ornate corners, containing input fields and action buttons

#### Do's (必须做)
1. Use semi-transparent dark panels bg-[#1a202c]/85 as dialogue boxes
2. Use semi-transparent light panels bg-white/70 as info cards
3. Add frosted glass effect backdrop-blur-md to all panels
4. Use serif font font-serif for narrative/dialogue text
5. Use sans-serif font font-sans for UI labels and buttons
6. Add character nameplate badges (colored small labels inline-block px-3 py-0.5 bg-[color] rounded-sm)
7. Add L-shaped ornate corners to dialogue panels (border-l/t/r/b combinations)
8. Use rounded-lg corners to maintain soft interface feel

#### Don'ts (禁止做)
1. No heavy brutalist borders (border-4+)
2. No neon RGB split shadow effects
3. No pixel art style or monospace fonts for main content
4. No pure black background bg-black
5. No all-caps wide-tracking terminal-style text
6. No sharp corners rounded-none (except nameplate rounded-sm)

#### AI Rules
```
You are a Visual Novel design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Heavy brutalist borders (border-4+)
- Neon glow or RGB split shadow effects
- Pixel art style elements
- Harsh, highly saturated neon colors
- Monospace fonts for main content
- Pure black backgrounds
- Sharp edges without rounding (rounded-none)
- Terminal-style uppercase with tracking-widest

## Must Follow

- Dark dialog panels: bg-[#1a202c]/85 with backdrop-blur-md
- Light info panels: bg-white/70 with backdrop-blur-md
- Serif font for all narrative/dialog text (font-serif)
- Sans-serif font for UI elements (font-sans font-medium)
- Rounded corners: rounded-lg on all panels and buttons
- Soft shadows: shadow-sm, shadow-md
- Ornate L-shaped corner decorations on dialog panels
- Character nameplate badges: colored inline-block with rounded-sm

## Color Palette

Primary:
- Slate: #4a5568 (text, borders)
- Light BG: #f7fafc (page background)
- Dark Panel: #1a202c (dialog backgrounds at /85 or /90 opacity)
- Indigo: #6366f1 (primary accent, nameplates, borders)
- Pink: #ec4899 (secondary accent, alternate nameplates)
- Emerald: #10b981 (tertiary accent, alternate nameplates)

## Unique Elements

- ADV-format dialogue panel: dark semi-transparent panel fixed to bottom with ornate corner decorations and character nameplate
- Character nameplate badges: small colored rectangle positioned overlapping the card border (absolute -top-3 left-6)
- Ornate corner decorations: L-shaped border patterns (border-l + border-t) at panel corners
- Choice button grid: full-width frosted glass buttons with ChevronRight icon and left-aligned text
- Scene background: sky gradient with character silhouettes (rounded-t-full ellipse shapes)
- Save screen panel: dark panel with ornate corners, form inputs, and dual action buttons

## Animation & Interaction Rules
- Dialogue Focus: Simulates in-game "choice branches." On hover over choice buttons, deepen background blur (backdrop-blur) and overlay a very subtle white or theme-color gradient (e.g., hover:bg-white/10), creating an immersive spotlight effect on the selected option.
- Cursor Prompt: On hover, reveal a small indicator (e.g., triangle or diamond) to the left of text with a slight displacement animation (opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0), faithfully recreating visual novel UI characteristics.
- Sprite Breathing: Transition animations must be extremely smooth (duration-300 ease-in-out). On card hover, allow very subtle and slow upward float (hover:-translate-y-0.5), simulating the breathing motion of game character sprites.
- Story Text: On click (:active), choice boxes can shift slightly horizontally (active:translate-x-2) to indicate confirmation, rather than traditional press-down.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#4a5568]/10`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-lg`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-serif font-medium`
- Body: `font-sans leading-relaxed`

**Required Classes**

Button:
```
rounded-lg
font-sans font-medium
transition-all duration-300 ease-in-out
```

Card:
```
rounded-lg
backdrop-blur-md
border
```

Input:
```
rounded-lg
border
font-sans
backdrop-blur-sm
focus:outline-none
```

**Forbidden**

Classes: `border-4`, `border-8`, `rounded-none`, `font-mono`, `shadow-[3px_0_`, `shadow-[0_0_30px`, `bg-[#0a0a0a]`, `bg-black`, `text-[#00ffff]`, `text-[#ff00ff]`

Patterns: `^border-(?:4|8)$`, `^rounded-none$`, `^font-mono$`, `^shadow-\[\d+px_0_#`, `^bg-(?:black|\[#0a0a0a\])$`, `^text-\[#(?:00ffff|ff00ff)\]$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `dialogueBox`, `choicePanel`, `characterSlot`, `saveSlotCard`, `sceneFade`


#### Component Examples

**Button**
```html
<button className="group relative w-full px-8 py-4 bg-[#1a202c]/60 backdrop-blur-md text-[#e2e8f0] font-sans text-lg text-left rounded-lg border border-[#6366f1]/30 hover:bg-[#6366f1]/20 hover:border-[#6366f1]/60 hover:text-white hover:-translate-y-0.5 active:translate-x-2 transition-all duration-300 ease-out overflow-hidden">
  {/* 选中高光扫过 */}
  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out" />
  <div className="flex items-center gap-3 relative z-10">
    <span className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 text-[#6366f1] transition-all duration-300">
      ▶
    </span>
    <span>"I should go to the rooftop and watch the sunset."</span>
  </div>
</button>
```

**Card**
```html
<div className="relative mt-6">
  {/* 角色名牌 */}
  <div className="absolute -top-4 left-6 px-6 py-1.5 bg-gradient-to-r from-[#6366f1] to-[#4f46e5] rounded-t-md rounded-br-md shadow-[0_4px_10px_rgba(99,102,241,0.3)] z-10">
    <span className="text-white font-sans font-bold tracking-wide">Sakura</span>
  </div>

  {/* 对话主面板 */}
  <div className="group bg-[#1a202c]/85 backdrop-blur-xl rounded-xl p-8 pt-10 border border-[#6366f1]/20 shadow-[0_8px_32px_rgba(0,0,0,0.5)] hover:border-[#6366f1]/40 hover:bg-[#1a202c]/90 hover:-translate-y-0.5 transition-all duration-500 ease-out cursor-text">
    {/* L形装饰边角 */}
    <div className="absolute top-3 left-3 w-4 h-4 border-l border-t border-[#6366f1]/30" />
    <div className="absolute top-3 right-3 w-4 h-4 border-r border-t border-[#6366f1]/30" />
    <div className="absolute bottom-3 left-3 w-4 h-4 border-l border-b border-[#6366f1]/30" />
    <div className="absolute bottom-3 right-3 w-4 h-4 border-r border-b border-[#6366f1]/30" />
    <div className="absolute bottom-4 right-6 opacity-0 group-hover:opacity-100 group-hover:animate-bounce text-[#6366f1] transition-opacity duration-300">
      ▼
    </div>
    <p className="text-white/90 font-serif text-xl leading-relaxed tracking-wide">
      "The cherry blossoms are beautiful this time of year... Do you think we'll be able to see them together again next spring?"
    </p>
  </div>
</div>
```


---


### 少女漫画风 (Shoujo Manga)

**Slug**: `shoujo-manga`

#### Description
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

#### Do's (必须做)
1. Use pink as the dominant color (sakura pink #ffb7c5)
2. Add screentone texture background (radial-gradient for dot patterns)
3. Use flower icon Flower2 as panel corner decorations
4. Use ribbon banners (ribbon banner with clip-path tails) as chapter titles
5. Add multi-point sparkle effects (gold #fde68a dots with glow shadow)
6. Use lace scallop borders (radial-gradient for wave edges)
7. Use rounded design (rounded-full buttons, rounded-2xl cards, rounded-3xl panels)
8. Keep light backgrounds (pearl white #fff5f7, white #ffffff)
9. Use asymmetric manga panel grid layout (grid-cols-12 span mixing)
10. Interactions use soft expansion and pink glow halo, simulating shoujo manga heartbeat feel (Dokidoki Bounce)
11. Screentone texture can slightly brighten or shift on hover, enhancing page-turning feel
12. Active state uses soft bounce-back and low-impact feedback, maintaining dreamy tone

#### Don'ts (禁止做)
1. No dark or dark-toned backgrounds
2. No sharp or pointed corners (rounded-none, rounded-sm)
3. No brutalist-style thick borders
4. No monospace fonts font-mono
5. No strong hard shadows or RGB split shadows
6. No pure black or dark gray backgrounds
7. No short, stiff 100ms animations or mechanical press-down feedback
8. No high-contrast hard light replacing soft-focus pastel shadows

#### AI 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.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_2px_10px_#ffb7c520]`
- Medium: `shadow-[0_4px_15px_#ffb7c530]`
- Large: `shadow-[0_4px_20px_#ffb7c540]`
- Hover: `hover:shadow-[0_8px_30px_#ffb7c540]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-sans font-bold`
- Body: `font-sans leading-relaxed`

**Required Classes**

Button:
```
rounded-full
font-sans font-medium
shadow-[0_4px_15px_#ffb7c560]
transition-all duration-300 ease-in-out
```

Card:
```
rounded-2xl
bg-[#fff5f7]
border-2 border-[#ffb7c5]/20
shadow-[0_4px_20px_#ffb7c520]
```

Input:
```
rounded-full
border border-[#ffb7c5]/25
bg-[#fff5f7]
font-sans
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `border-4`, `border-8`, `font-mono`, `bg-black`, `bg-[#0a0a0a]`, `bg-gray-900`, `bg-slate-900`, `shadow-[3px_3px`

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


#### Component Recipes

Available recipes: `button`, `card`, `input`, `sakuraBadge`, `sparklePanel`, `ribbonBanner`, `heartProgress`, `flowFrame`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3.5
  bg-[#ffb7c5] text-white
  font-sans font-bold tracking-wide
  rounded-full
  shadow-[0_8px_20px_rgba(255,183,197,0.4)]
  hover:bg-[#ff9eb3]
  hover:shadow-[0_15px_30px_rgba(255,183,197,0.6)]
  hover:-translate-y-1
  hover:scale-105
  active:scale-95
  active:shadow-[0_4px_10px_rgba(255,183,197,0.4)]
  transition-all duration-300 ease-out
">
  Sakura Bloom
</button>
```

**Card**
```html
<div className="
  group relative overflow-hidden
  p-10
  bg-[#fff5f7]
  border-[3px] border-[#ffb7c5]/30
  rounded-3xl
  shadow-[0_10px_30px_rgba(255,183,197,0.15)]
  hover:border-[#ffb7c5]/60
  hover:shadow-[0_20px_50px_rgba(255,183,197,0.3)]
  hover:-translate-y-2
  transition-all duration-500 ease-out
">
  <div className="absolute inset-0 pointer-events-none group-hover:opacity-10 transition-opacity duration-500"
    style={{
      backgroundImage: "radial-gradient(circle, #ffb7c5 1.5px, transparent 1px)",
      backgroundSize: "12px 12px",
      opacity: 0.05,
    }}
  />
  <div className="relative z-10">
    <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-[#ffb7c5] to-[#f5a5b8] shadow-inner group-hover:scale-110 group-hover:rotate-12 transition-transform duration-500 ease-out" />
    <h3 className="text-2xl font-sans font-bold text-[#ff9eb3] mb-3 group-hover:text-[#ff7a98] transition-colors duration-300 text-center">
      Spring Memory
    </h3>
    <p className="text-[#718096] font-medium leading-relaxed group-hover:text-[#4a5568] transition-colors duration-300 text-center">
      A gentle breeze carries cherry blossoms and soft daydreams across the page.
    </p>
  </div>
</div>
```


---


### 赛博动漫风 (Cyber Anime)

**Slug**: `cyber-anime`

#### Description
Fusing cyberpunk sci-fi UI with anime aesthetics, featuring HUD overlays, holographic projection panels, mecha-frame borders, and multi-layer neon glow effects for a futuristic anime interface style.

#### Design Philosophy
Cyber Anime fuses cyberpunk HUD interfaces with anime's expressive power. Every panel is a data terminal, every border a mecha frame.

Core principles:
- HUD Overlay: Corner frame decorations, targeting brackets, and data readout overlays create the feel of piloting a mecha cockpit
- Holographic Panels: Vertical scan line textures layered over glassmorphic surfaces simulate flickering holographic displays
- Mecha Borders: Angled clip-path corners on panels reference mechanical armor plating and cockpit instrument frames
- Multi-layer Neon: Purple, cyan, and pink neon glows stack in multiple layers for depth - never a single flat glow
- Neural Data Streams: Monospace text readouts, status indicators, and data visualization patterns fill negative space
- Hexagonal Grid: The background grid uses hexagons, not squares, referencing sci-fi energy field patterns

#### Do's (必须做)
1. Use HUD corner frame decorations on major containers (angled bracket corners)
2. Layer vertical scan line overlays on holographic panels
3. Apply multi-layer neon glow (2-3 shadow layers with decreasing opacity)
4. Use mecha-style angled corners via clip-path on panel borders
5. Include terminal/data readout style text with monospace font
6. Use hexagonal grid background pattern instead of square grid
7. Keep all backgrounds dark (#0f0f1a) with semi-transparent overlays
8. Use cockpit-like micro interactions: fast hover lift, active press, and glow amplification within 180-280ms

#### Don'ts (禁止做)
1. Never use soft pastel colors or natural organic tones
2. Never use serif fonts - only geometric sans-serif or monospace
3. Never use rounded-full - all shapes must be angular/geometric
4. Never use light or white backgrounds as primary surfaces
5. Never use standard shadow-sm/md/lg - only neon glow shadows
6. Never use bouncy spring animations or playful elastic motion
7. Never use slow cinematic transitions over 400ms for controls

#### AI Rules
```
You are a Cyber Anime design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft pastel colors (no light pink, baby blue, etc.)
- Serif fonts of any kind
- Natural organic colors (brown, beige, olive, etc.)
- rounded-full on buttons or containers
- White or light backgrounds as primary surfaces
- Standard shadow-sm/md/lg (only neon glow shadows)

## Must Follow

- Dark background: bg-[#0f0f1a] as primary surface
- Primary purple: #7c3aed for key elements with multi-layer glow
- Cyan-green accent: #06d6a0 for highlights, borders, and HUD frames
- Hot pink accent: #ff006e for alerts and emphasis
- HUD corner frame decorations on major containers
- Vertical scan line overlay on holographic panels
- Mecha-style angled corners via clip-path on cards and panels
- Monospace terminal text for data readouts
- Hexagonal grid background pattern
- Multi-layer neon glow: shadow-[0_0_Xpx_rgba(...),0_0_Ypx_rgba(...)]

## Animation & Interaction Rules

- Motion must feel like cockpit controls: quick and precise, usually 160-280ms with ease-out
- Hover states should amplify HUD feedback through slight lift (1-2px), stronger neon glow, and brighter bracket borders
- Active states should feel tactile: brief press-down (1-2px or scale to 0.97-0.99) with compressed glow
- Use directional holographic sweeps or scan pulses triggered by hover/focus; keep them short and state-based
- Avoid bouncy spring motion, long cinematic fades, or decorative animations that reduce data legibility

## Color Palette

Primary:
- Deep Purple: #7c3aed
- Dark Background: #0f0f1a
- Cyan-Green: #06d6a0
- Hot Pink: #ff006e
- Sky Blue: #38bdf8
- Light Text: #e0e0ff

## Unique Elements

- HUD corner frame decorations (bracket-style corners)
- Holographic vertical scan line texture overlays
- Mecha-style angular clip-path panel borders
- Neural network data visualization patterns
- Terminal-style data readout text blocks
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#7c3aed]/30`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(124,58,237,0.3)]`
- Medium: `shadow-[0_0_15px_rgba(124,58,237,0.4)]`
- Large: `shadow-[0_0_25px_rgba(124,58,237,0.5)]`
- Hover: `hover:shadow-[0_0_30px_rgba(124,58,237,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-sans font-bold uppercase tracking-widest`
- Body: `font-sans text-[#e0e0ff]/80`

**Required Classes**

Button:
```
font-bold uppercase tracking-widest
border border-[#06d6a0]/50
shadow-[0_0_15px_rgba(124,58,237,0.5)]
transition-all duration-300 ease-out
```

Card:
```
bg-[#0f0f1a]/90
border border-[#7c3aed]/30
backdrop-blur-sm
```

Input:
```
bg-[#0f0f1a]/80
border border-[#7c3aed]/30
text-[#e0e0ff]
font-mono
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `bg-white`, `bg-[#fafaf8]`, `bg-[#fffbf0]`, `shadow-sm`, `shadow-md`, `shadow-lg`, `font-serif`, `text-[#1a1a1a]`, `border-2`

Patterns: `^rounded-full$`, `^bg-white$`, `^bg-\[#f[a-f]`, `^shadow-(?:sm|md|lg|xl)$`, `^font-serif$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `hudStatusBar`, `hologramPanel`, `cockpitNav`, `dataStream`, `missionBriefing`


#### Component Examples

**Button**
```html
<button className="
  group relative px-6 py-3 overflow-hidden
  bg-[#7c3aed] text-white rounded-none
  font-sans font-bold uppercase tracking-widest
  border border-[#06d6a0]/50
  shadow-[0_0_10px_rgba(124,58,237,0.3),0_0_20px_rgba(124,58,237,0.15)]
  hover:-translate-y-[1px] hover:scale-[1.01]
  hover:shadow-[0_0_16px_rgba(124,58,237,0.55),0_0_34px_rgba(6,214,160,0.22)]
  hover:border-[#06d6a0]
  active:translate-y-[2px] active:scale-[0.98]
  active:shadow-[0_0_10px_rgba(124,58,237,0.25),0_0_18px_rgba(6,214,160,0.12)]
  transition-[transform,box-shadow,border-color] duration-220 ease-out
">
  <span className="relative z-10">EXECUTE</span>
  <div className="pointer-events-none absolute inset-0 opacity-10" style={{
    backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 3px)"
  }} />
  <div className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-[#38bdf8]/30 to-transparent skew-x-[-20deg] transition-transform duration-300 group-hover:translate-x-[420%]" />
</button>
```

**Card**
```html
<div className="
  group relative p-6 overflow-hidden
  bg-[#0f0f1a]/90
  border border-[#7c3aed]/30
  backdrop-blur-sm
  shadow-[0_0_20px_rgba(124,58,237,0.2)]
  hover:-translate-y-[2px]
  hover:shadow-[0_0_34px_rgba(124,58,237,0.45),0_0_56px_rgba(6,214,160,0.12)]
  hover:border-[#06d6a0]/70
  active:translate-y-[1px]
  transition-[transform,box-shadow,border-color] duration-250 ease-out
" style={{ clipPath: "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))" }}>
  <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100" style={{
    backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(56,189,248,0.08) 2px, rgba(56,189,248,0.08) 3px)"
  }} />
  <div className="absolute top-0 left-0 w-4 h-4 border-l border-t border-[#06d6a0]/60 transition-colors duration-200 group-hover:border-[#06d6a0]" />
  <div className="absolute top-0 right-4 w-4 h-4 border-r border-t border-[#06d6a0]/60 transition-colors duration-200 group-hover:border-[#06d6a0]" />
  <h3 className="text-xl font-bold text-[#06d6a0] uppercase tracking-wider mb-2">
    DATA PANEL
  </h3>
  <p className="text-[#e0e0ff]/60 text-sm font-mono">
    System status nominal
  </p>
</div>
```


---


### 像素动漫风 (Pixel Anime)

**Slug**: `pixel-anime`

#### Description
Merging classic JRPG game UI with pixel anime aesthetics, featuring RPG dialogue boxes, status bars, pixel borders, and NES color palette for a nostalgic 8-bit game interface style.

#### Design Philosophy
Pixel Anime merges classic JRPG game UI with pixel-art anime aesthetics. Every element feels like it belongs in a 16-bit RPG menu screen.

Core principles:
- RPG Dialogue Boxes: Window frames with chunky borders and corner block decorations, referencing Final Fantasy and Dragon Quest menu systems
- Health/Status Bars: HP, MP, and EXP progress bars with pixel-precise flat fills and bordered containers
- Pixel Borders: All borders are 2px+ solid with hard edges, using image-rendering: pixelated where applicable
- NES/SNES Palette: Limited color palette of bold primary colors (blue, red, gold, green) on deep purple backgrounds
- Step-based Interactions: Hover states use translate-x/y in pixel-aligned steps, not smooth transforms
- Blinking Cursor: Selection arrows and continue prompts use blinking pixel arrows

#### Do's (必须做)
1. Use RPG dialogue box frames with 4px borders and corner block decorations
2. Include HP/MP/EXP status bar UI elements with flat fills
3. Apply hard offset shadows (4px_4px_0px) for pixel depth
4. Use monospace font exclusively for all text
5. Keep interactions step-based (translate-x/y in 2px increments)
6. Use NES-palette colors: blue #4a90d9, red #ff6b6b, gold #ffd93d, green #50c878
7. Add pixel corner block decorations on major containers
8. Framerate Drop: use duration-75 ease-linear for all transitions to simulate 15fps GBA/NDS-era animation cadence
9. Blocky Aura: hover glow must be hard-edge multi-directional colored shadows with zero blur: hover:shadow-[4px_4px_0_#ffd93d,-2px_-2px_0_#ffd93d]
10. Anime Action: button active state applies squash-and-stretch active:scale-x-110 active:scale-y-90 -- classic Japanese animation physics on press
11. Corner Blink: card corner pixel squares use group-hover:animate-pulse to simulate game UI idle standby animation; never animate in non-hover state

#### Don'ts (禁止做)
1. Never use smooth gradients (linear-gradient, radial-gradient)
2. Never use rounded corners (rounded-lg/xl/full)
3. Never use blur effects (blur, backdrop-blur)
4. Never use serif fonts
5. Never use soft shadows (shadow-sm/md/lg/xl)
6. Never use ease-in-out or ease curves -- only ease-linear or transition-none (pixel animations are abrupt, not organic)
7. Never use blurred glow shadows for the Blocky Aura effect -- zero blur is mandatory for 8-bit authenticity
8. Never trigger Corner Blink animation outside of group-hover state -- idle blinking on load creates visual noise

#### AI Rules
```
You are a Pixel Anime design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Smooth gradients (linear-gradient, radial-gradient for decoration)
- Rounded corners (rounded-lg, rounded-xl, rounded-full)
- Blur effects (blur, backdrop-blur)
- Serif fonts
- Soft shadows (shadow-sm, shadow-md, shadow-lg, shadow-xl)

## Must Follow

- Dark purple background: bg-[#2d1b69] as primary, bg-[#1a1040] as secondary
- RPG dialogue box frames with 2-4px borders and corner block decorations
- HP/MP/EXP status bar UI elements with flat color fills
- Hard offset pixel shadows: shadow-[4px_4px_0px_#1a1040]
- Monospace font: font-mono for ALL text
- Bold 2px borders: border-2 border-[#1a1040]
- Flat colors only, no gradients
- Step-based hover: hover:translate-x-[2px] hover:translate-y-[2px]
- Linear easing: ease-linear, duration-75

## Color Palette (NES-inspired)

Primary:
- Pixel Blue: #4a90d9
- Dark Purple: #2d1b69
- Deep Dark: #1a1040
- Pixel Red: #ff6b6b
- Pixel Gold: #ffd93d
- Pixel Green: #50c878
- Light Text: #e0e0ff

## Unique Elements

- RPG dialogue box frame with corner block decorations
- HP/MP/EXP status bar progress indicators
- Pixel-grid background pattern (8px grid)
- Blinking pixel arrow cursor/continue indicators
- Step-based pixel-aligned hover translations

## Animation & Interaction Rules

- Framerate Drop: All transitions must use duration-75 ease-linear to simulate 15fps GBA/NDS-era animation. Never use ease-in-out or smooth bezier curves -- pixel animations are abrupt state changes.
- Blocky Aura: Hover glow must use multi-directional hard-edge colored shadows with zero blur: hover:shadow-[4px_4px_0_#ffd93d,-2px_-2px_0_#ffd93d]. No blur() or drop-shadow() ever.
- Anime Action: Button active state applies squash-and-stretch: active:scale-x-110 active:scale-y-90 -- Japanese animation physics on press, not a translate drop.
- Corner Blink: Card corner pixel squares must use group-hover:animate-pulse to simulate idle game UI animation. Never animate in non-hover state -- blink only when the player's cursor is over the card.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#1a1040]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0px_#1a1040]`
- Medium: `shadow-[4px_4px_0px_#1a1040]`
- Large: `shadow-[6px_6px_0px_#1a1040]`
- Hover: `hover:shadow-[6px_6px_0px_#1a1040]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-150 ease-linear`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-wider`
- Body: `font-mono text-[#e0e0ff]/80`

**Required Classes**

Button:
```
font-mono font-bold uppercase
border-2 border-[#1a1040]
shadow-[4px_4px_0px_#1a1040]
transition-all duration-150 ease-linear
```

Card:
```
bg-[#2d1b69]
border-2 border-[#1a1040]
shadow-[4px_4px_0px_#1a1040]
```

Input:
```
bg-[#1a1040]
border-2 border-[#4a90d9]
font-mono
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^rounded-(?:lg|xl|2xl|full)$`, `^bg-gradient-`, `^shadow-(?:sm|md|lg|xl)$`, `^backdrop-blur`, `^font-serif$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `spriteFrame`, `dialogueBox`, `pixelBadge`, `hpBar`, `menuPanel`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#4a90d9] text-white
  font-mono font-bold uppercase tracking-widest
  border-2 border-[#1a1040]
  shadow-[4px_4px_0_#1a1040]
  hover:bg-[#5aa0e9]
  hover:shadow-[4px_4px_0_#ffd93d,-2px_-2px_0_#ffd93d]
  hover:-translate-y-1
  active:scale-x-110 active:scale-y-90
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-none
  transition-all duration-75 ease-linear
">
  ATTACK
</button>
```

**Card**
```html
<div className="group relative p-6 bg-[#1a1040] border-2 border-[#4a90d9] shadow-[6px_6px_0_#1a1040] hover:shadow-[8px_8px_0_#4a90d9] hover:-translate-y-1 hover:-translate-x-1 transition-all duration-75 ease-linear cursor-pointer">
  {/* Corner pixels — blink on hover (Corner Blink) */}
  <div className="absolute -top-[6px] -left-[6px] w-[12px] h-[12px] bg-[#4a90d9] border-2 border-[#1a1040] group-hover:bg-[#ffd93d] group-hover:animate-pulse transition-colors duration-75" />
  <div className="absolute -top-[6px] -right-[6px] w-[12px] h-[12px] bg-[#4a90d9] border-2 border-[#1a1040] group-hover:bg-[#ffd93d] group-hover:animate-pulse transition-colors duration-75" />
  <div className="absolute -bottom-[6px] -left-[6px] w-[12px] h-[12px] bg-[#4a90d9] border-2 border-[#1a1040] group-hover:bg-[#ffd93d] group-hover:animate-pulse transition-colors duration-75" />
  <div className="absolute -bottom-[6px] -right-[6px] w-[12px] h-[12px] bg-[#4a90d9] border-2 border-[#1a1040] group-hover:bg-[#ffd93d] group-hover:animate-pulse transition-colors duration-75" />
  <div className="relative">
    <h3 className="text-2xl font-mono font-bold text-[#ffd93d] uppercase mb-2 group-hover:text-white transition-colors duration-75">
      QUEST LOG
    </h3>
    <p className="text-[#e0e0ff]/70 font-mono text-sm group-hover:text-[#ffd93d] transition-colors duration-75">
      &gt; A new adventure awaits! Press A to continue...
    </p>
  </div>
</div>
```


---


### 日系清新风 (Japanese Fresh)

**Slug**: `japanese-fresh`

#### Description
Centered on Ma (space) philosophy, wabi-sabi aesthetics, and extreme breathing room, using hairline borders, botanical line-drawing accents, and minimal warm neutral colors to create a serene, healing design experience.

#### Design Philosophy
Japanese Fresh embodies Ma (space between) and wabi-sabi (beauty in imperfection). Design is not about what you add, but what you allow to breathe.

Core principles:
- Ma: Intentional, generous whitespace is the primary design element. Sections use py-32+ to create profound breathing room between content
- Wabi-sabi: Embrace subtle imperfection -- asymmetric layouts, slightly off-center elements, and organic rather than rigid alignment
- Hairline Borders: All borders are 0.5-1px maximum, using warm neutral colors like #d4d4cf at 30-40% opacity
- Natural Textures: Subtle linen/paper grain texture backgrounds reference natural materials (washi paper, unbleached cotton)
- Botanical Accents: Single delicate line-drawn botanical SVG elements per section -- one branch, one leaf, never crowded
- Bottom-line Inputs: Inputs use only a bottom border line, floating labels, no surrounding frame
- No Shadows: Forms exist without shadow; they float in whitespace by their own presence

#### Do's (必须做)
1. Use extreme whitespace (py-32, py-40) between sections -- Ma is the primary design tool
2. Use only hairline borders (border with opacity-30, never border-2)
3. Include one delicate botanical SVG line drawing per major section
4. Use font-extralight/font-light exclusively for all text
5. Keep inputs as bottom-line only with floating labels
6. Use warm neutral border color #d4d4cf instead of harsh gray
7. Apply asymmetric element placement for wabi-sabi character
8. Use transition duration-500 for slow, meditative interactions
9. Use weightless hover feedback (subtle lift + transparent tint) instead of heavy depth

#### Don'ts (禁止做)
1. Never use bold or heavy font weights (font-bold, font-semibold)
2. Never use uppercase text -- it is too aggressive for this aesthetic
3. Never use border-2 or thicker -- only hairline borders
4. Never use visible shadows (shadow-lg/xl) -- elements float without weight
5. Never use dark or black backgrounds
6. Never use sharp corners (rounded-none) -- always gentle rounded-lg/xl
7. Never crowd sections together -- maintain extreme breathing room
8. Never use fast, abrupt interaction transitions under 200ms

#### AI Rules
```
You are a Japanese Fresh design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Heavy borders (border-2 or thicker)
- Neon or high-saturation colors
- Dark or black backgrounds
- Bold/heavy font weights (font-bold, font-semibold, font-black)
- Sharp corners (rounded-none, rounded-sm)
- Uppercase text
- Visible shadows (shadow-lg, shadow-xl)
- Crowded layouts without extreme whitespace

## Must Follow

- Rice-white background: bg-[#fafaf8] with optional linen texture
- Ma-based extreme whitespace: py-32+ between sections (this is THE core principle)
- Hairline borders only: border with opacity-30/40, warm neutral #d4d4cf
- Font weight: font-extralight or font-light exclusively
- Single botanical SVG line drawing accent per section
- Bottom-line only inputs with floating labels
- No shadows anywhere -- forms float in whitespace
- Slow transitions: duration-500 for meditative feel
- Warm neutral colors: #d4d4cf borders, #b0b8c4 muted text

## Color Palette

Primary:
- Sky Blue: #64b5f6
- Rice White: #fafaf8
- Mint Green: #98d8c8
- Gentle Pink: #ffb7c5
- Powder Blue: #b8d4e3
- Text: #4a5568
- Secondary text: #7a8a9e
- Muted: #b0b8c4
- Border: #d4d4cf

## Unique Elements

- Ma-based extreme whitespace (py-32+ sections)
- Hairline 0.5px borders at 30% opacity
- Botanical line-drawing SVG accents (one per section)
- Bottom-line only input fields with floating labels
- Linen/paper texture background pattern

## Animation & Interaction Rules

- Weightless Float: Hover allows only extremely light upward float (about 0.5px), avoiding heavy shadows and large displacement.
- Airy Transitions: Color changes use duration-500 + ease-in-out, appearing slowly like morning mist.
- Subtle Focus: Form focus only adjusts hairline border color, no thick rings or strong glow.
- Tactile Click: Active state prioritizes subtle opacity and background layer adjustments, no obvious scaling.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4d4cf]`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-[0_1px_3px_rgba(0,0,0,0.03)]`
- Large: `shadow-[0_2px_6px_rgba(0,0,0,0.04)]`
- Hover: `hover:shadow-[0_2px_8px_rgba(0,0,0,0.05)]`

**Interaction**
- Hover Translate: `hover:-translate-y-px`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-sans font-extralight text-[#4a5568] tracking-wide`
- Body: `font-sans font-light text-[#6b7280] leading-relaxed`

**Required Classes**

Button:
```
rounded-lg
font-sans font-light
border border-[#d4d4cf]/40
transition-all duration-500 ease-in-out
```

Card:
```
bg-white
rounded-xl
border border-[#d4d4cf]/30
```

Input:
```
border-b border-[#d4d4cf]
bg-transparent
font-sans font-light
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `border-2`, `border-4`, `font-bold`, `font-black`, `font-extrabold`, `bg-[#0f0f1a]`, `bg-black`, `bg-[#1a1a1a]`

Patterns: `^rounded-(?:none|sm)$`, `^border-[2-9]$`, `^font-(?:bold|black|extrabold|semibold)$`, `^bg-(?:black|\[#0)`, `^uppercase$`, `^shadow-(?:lg|xl|2xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3
  bg-transparent text-[#7a8a9e]
  font-sans font-light tracking-widest text-sm
  rounded-lg
  border border-[#d4d4cf]/40
  hover:-translate-y-0.5
  hover:bg-[#64b5f6]/5
  hover:border-[#64b5f6]/40 hover:text-[#64b5f6]
  active:bg-[#64b5f6]/10
  transition-all duration-500 ease-in-out
">
  Explore
</button>
```

**Card**
```html
<div className="
  group p-10 md:p-12
  bg-white
  rounded-lg
  border border-[#d4d4cf]/30
  hover:-translate-y-0.5
  hover:bg-[#64b5f6]/[0.02]
  hover:border-[#d4d4cf]/50
  transition-all duration-500 ease-in-out
">
  <h3 className="text-lg font-sans font-extralight text-[#4a5568] mb-4 tracking-widest group-hover:text-[#64b5f6] transition-colors duration-500">
    Morning Light
  </h3>
  <p className="text-[#b0b8c4] text-sm font-light leading-relaxed group-hover:text-[#7a8a9e] transition-colors duration-500">
    Gentle and simple, like morning light filtering through paper screens.
  </p>
</div>
```


---


### 霓虹武士风 (Neon Samurai)

**Slug**: `neon-samurai`

#### Description
A collision of traditional Japanese samurai aesthetics with neon cyberpunk, weaving katana slash lines, vermillion torii gate frames, calligraphy brushstrokes, and dual-color neon glow effects -- ukiyo-e meets neon lights in a futuristic urban bushido.

#### Design Philosophy
Neon Samurai fuses Japanese bushido aesthetics with cyberpunk neon luminance, forging a style of relentless tension and kinetic energy.

Core principles:
- Katana slash geometry: Diagonal tapered strokes cut across layouts as decorative dividers
- Torii gate framing: Section containers shaped like sacred gate structures
- Dual-color glow: Stroke color differs from its glow halo (purple stroke, blue glow)
- Armor-plate panels: Angular card shapes inspired by samurai yoroi plate segments
- Ink splatter accents: Burst particles on hover and interaction states
- Calligraphy brush strokes: Neon-lit brush-stroke underlines and dividers
- Smoke/mist overlays: Atmospheric depth through translucent background wisps

#### Do's (必须做)
1. Use dark navy backgrounds (bg-[#080818])
2. Add katana diagonal slash-stroke decorations
3. Use torii gate shapes as section frames
4. Apply dual-color glow (stroke != glow color)
5. Use armor-plate angular card shapes
6. Add ink splatter burst accents on hover
7. Use calligraphy brush-stroke dividers with neon glow

#### Don'ts (禁止做)
1. No soft pastel colors or light backgrounds
2. No rounded-full or large border radius
3. No organic/irregular rounded shapes
4. No serif fonts
5. No standard drop shadows (use neon glow only)

#### AI Rules
```
You are a Neon Samurai design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft pastel colors or light backgrounds
- rounded-full or large border radius
- Organic/irregular shapes
- Serif fonts
- Light mode backgrounds (bg-white, bg-gray-50, etc.)
- Standard drop shadows (shadow-md, shadow-lg)

## Must Follow

- Dark navy backgrounds: bg-[#080818] or similar near-black
- Neon red primary: #dc2626 with glow effects
- Dual-color glow: stroke color differs from glow (e.g., purple text with blue glow halo)
- Katana slash diagonal lines as decorative elements
- Torii gate shapes for section framing
- Armor-plate angular clip-paths on cards
- Brush-stroke style underlines (not solid box borders for inputs)
- Ink splatter burst accents on hover

## Color Palette

Primary:
- Neon Red: #dc2626
- Dark Navy: #080818
- Electric Purple: #a020f0
- Neon Blue: #38bdf8
- Gold: #fbbf24

## Unique Elements

- Katana diagonal slash stroke decorations (tapered SVG paths)
- Torii gate shaped frames (double-beam top border)
- Dual-color glow effect (stroke color != glow color)
- Armor-plate angular card clip-paths
- Calligraphy brush-stroke neon dividers

## Animation & Interaction Rules

- Katana Slash: Interactions must resolve in 75ms to 100ms, with slash-line sweeps that feel like a single blade pass.
- Target Lock: Corner markers should brighten and contract on hover to simulate lock-on feedback.
- Lethal Glow: Glow stays concentrated and high-saturation (red/purple), avoiding broad soft haze.
- Instant Parry: Active state should snap with slight X-axis jolt or immediate color inversion, never soft scaling.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_0_8px_rgba(220,38,38,0.3)]`
- Medium: `shadow-[0_0_15px_rgba(220,38,38,0.4)]`
- Large: `shadow-[0_0_25px_rgba(220,38,38,0.5)]`
- Hover: `hover:shadow-[0_0_25px_rgba(220,38,38,0.7)]`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-sans font-bold uppercase tracking-widest`
- Body: `font-sans`

**Required Classes**

Button:
```
font-sans font-bold uppercase tracking-widest
border border-[#dc2626]/60
shadow-[0_0_15px_rgba(220,38,38,0.5)]
transition-all duration-300 ease-in-out
```

Card:
```
bg-[#080818]
border border-[#dc2626]/30
transition-all duration-300 ease-in-out
```

Input:
```
bg-[#080818]
border-b-2 border-[#dc2626]/30
text-white
font-sans
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `rounded-2xl`, `rounded-xl`, `rounded-lg`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-gray-900`, `shadow-md`, `shadow-lg`

Patterns: `^rounded-(?:full|2xl|xl|lg)$`, `^bg-(?:white|gray-(?:50|100))$`, `^bg-(?:pink|rose|sky|teal)-(?:50|100|200)$`, `^font-serif$`, `^shadow-(?:md|lg|xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `katanaSlash`, `kamonBadge`, `dojoPanel`, `bushidoAlert`, `bladeProgress`


#### Component Examples

**Button**
```html
<button className="
  group relative overflow-hidden
  px-6 py-3
  bg-[#080818] text-[#dc2626]
  font-sans font-bold uppercase tracking-widest
  border border-[#dc2626]/60
  shadow-[0_0_12px_rgba(220,38,38,0.35)]
  hover:bg-[#dc2626] hover:text-white
  hover:shadow-[0_0_18px_rgba(220,38,38,0.75)]
  active:translate-x-[3px]
  transition-all duration-100 ease-linear
">
  <span className="absolute top-0 right-0 h-3 w-3 border-t border-r border-[#a020f0] transition-all duration-100 ease-linear group-hover:h-2 group-hover:w-2 group-hover:border-white" />
  <span className="absolute bottom-0 left-0 h-3 w-3 border-b border-l border-[#a020f0] transition-all duration-100 ease-linear group-hover:h-2 group-hover:w-2 group-hover:border-white" />
  <span className="absolute left-[-35%] top-1/2 h-[1px] w-[30%] -translate-y-1/2 rotate-[-20deg] bg-white opacity-0 group-hover:opacity-100 group-hover:left-[110%] transition-all duration-100 ease-linear" />
  <span className="relative z-10">Strike</span>
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-[#080818]
  border border-[#dc2626]/35
  shadow-[0_0_12px_rgba(220,38,38,0.2)]
  hover:shadow-[0_0_20px_rgba(220,38,38,0.55)]
  hover:border-[#dc2626]
  transition-all duration-100 ease-linear
  [clip-path:polygon(0_0,calc(100%-16px)_0,100%_16px,100%_100%,16px_100%,0_calc(100%-16px))]
">
  <span className="absolute top-3 right-3 h-4 w-4 border-t border-r border-[#a020f0] transition-all duration-100 ease-linear group-hover:h-3 group-hover:w-3 group-hover:border-white" />
  <span className="absolute bottom-3 left-3 h-4 w-4 border-b border-l border-[#a020f0] transition-all duration-100 ease-linear group-hover:h-3 group-hover:w-3 group-hover:border-white" />
  <span className="absolute left-[-25%] top-1/2 h-[1px] w-[22%] -translate-y-1/2 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-100 group-hover:left-[105%] transition-all duration-100 ease-linear" />
  <h3 className="text-2xl font-sans font-bold text-[#dc2626] uppercase tracking-wider mb-3 transition-colors duration-75 group-hover:text-white">
    BUSHIDO
  </h3>
  <div className="h-[2px] w-12 bg-[#a020f0] mb-4 transition-all duration-100 ease-linear group-hover:w-24 group-hover:bg-white" />
  <p className="text-white/55 font-sans">
    The way of the warrior, illuminated by precise neon steel.
  </p>
</div>
```


---


### 魔法阵风 (Magic Circle)

**Slug**: `magic-circle`

#### Description
A fantasy visual style featuring concentric nested ring systems, hexagram geometric cores, runic inscriptions along circular paths, Flower of Life sacred geometry, golden radiant glow, and interwoven alchemical symbols.

#### Design Philosophy
Magic Circle draws from the arcane tradition of geometric summoning circles, weaving precision geometry with radiant light effects.

Core principles:
- Concentric ring system: Multiple nested circles of varying thickness, dash patterns, and colors
- Hexagram/pentagram central figures: Overlapping triangles as primary structural motifs
- Runic inscription borders: Text-like marks arranged along circular paths
- Sacred geometry patterns: Flower of Life, Metatron's Cube as background textures
- Rotating ring animation: Slow counter-rotating rings suggesting arcane machinery
- Golden center radiation: Warm glow emanating from the center of compositions
- Alchemical symbols: Fire, water, air, earth triangles at intersection points

#### Do's (必须做)
1. Use deep dark navy backgrounds (bg-[#0a0920])
2. Add concentric ring decorations around focal elements
3. Use hexagonal or circular card layouts
4. Apply runic inscription marks along borders
5. Add golden glow radiation from center of elements
6. Use sacred geometry patterns as subtle backgrounds
7. Place alchemical symbols at geometric intersection points
8. Cards use group class, hover triggers dashed concentric ring rotation: group-hover:rotate-180 transition-all duration-[3000ms] ease-linear (Arcane Rotation, circle activation)
9. Button active:scale-95 active:shadow-[inset_0_0_30px_rgba(251,191,36,0.6)] (Energy Convergence, energy implosion focus)
10. focus:ring-2 focus:ring-[#fbbf24]/50 focus:ring-offset-2 focus:ring-offset-[#0a0920]

#### Don'ts (禁止做)
1. No bright neon colors (use warm gold and cool indigo only)
2. No brutalist style elements
3. No pixel art aesthetics
4. No heavy/thick borders
5. No informal/handwritten fonts
6. Buttons must not lack active:scale-95 (magic casting must have energy convergence feel)
7. Ring decorations must not remain static on group-hover (core visual language of circle activation)
8. focus:ring must not lack focus:ring-offset-[#0a0920] (focus ring needs offset separation on dark backgrounds)

#### AI Rules
```
You are a Magic Circle design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright neon colors (use warm gold and cool indigo only)
- Brutalist style elements
- Pixel art aesthetics
- Heavy/thick borders
- Informal/handwritten fonts
- Light backgrounds

## Must Follow

- Deep dark backgrounds: bg-[#0a0920] or bg-[#1e1b4b]
- Concentric ring decorations (nested circles with varying styles)
- Gold accent glow: #fbbf24 with radiant shadow effects
- Hexagram/sacred geometry structural motifs
- Runic inscription marks along borders
- Elegant serif fonts for headings (font-serif)
- Thin elegant borders with low opacity
- Golden center radiation glow effects

## Color Palette

Primary:
- Deep Navy: #1e1b4b
- Dark Background: #0a0920
- Gold Glow: #fbbf24
- Silver White: #e2e8f0
- Mystic Indigo: #818cf8

## Unique Elements

- Concentric circle/ring decorative system (multiple nested rings)
- Runic inscription borders (dot-dash marks along edges)
- Hexagram/sacred geometry card layout
- Alchemical symbols at geometric intersection points
- Rotating ring animation suggesting arcane machinery

## Animation & Interaction Rules

- Arcane Rotation: On hover, ring decorations use group-hover:rotate-90 / rotate-180 or long linear rotation, creating circle activation effect.
- Rune Pulsing: Gold titles and rune strokes can add animate-pulse or glow enhancement on interaction, expressing magical energy flow.
- Energy Focus: Active state prioritizes inner glow or active:scale-95, simulating energy converging toward center.
- Ethereal Delay: Key transitions use duration-700 to 1000, rotation layers can use 2000ms+ linear rhythm.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#fbbf24]/15`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(251,191,36,0.1)]`
- Medium: `shadow-[0_0_20px_rgba(251,191,36,0.2)]`
- Large: `shadow-[0_0_30px_rgba(251,191,36,0.3)]`
- Hover: `hover:shadow-[0_0_30px_rgba(251,191,36,0.4)]`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-serif font-bold tracking-wide`
- Body: `font-sans`

**Required Classes**

Button:
```
font-serif font-semibold tracking-wide
border border-[#fbbf24]/30
rounded-sm
transition-all duration-500 ease-in-out
```

Card:
```
bg-[#0a0920]
border border-[#fbbf24]/15
rounded-sm
transition-all duration-500 ease-in-out
```

Input:
```
bg-[#0a0920]
border border-[#fbbf24]/15
rounded-sm
text-[#e2e8f0]
font-sans
focus:outline-none
```

**Forbidden**

Classes: `rounded-2xl`, `rounded-xl`, `rounded-lg`, `bg-white`, `bg-gray-50`, `border-4`, `border-8`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^rounded-(?:full|2xl|xl|lg)$`, `^bg-(?:white|gray-(?:50|100))$`, `^border-(?:4|8)$`, `^shadow-(?:md|lg|xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `runeGlyph`, `summoningPanel`, `spellbookTab`, `manaBar`, `enchantmentAlert`


#### Component Examples

**Button**
```html
<button className="
  group relative px-10 py-3
  bg-[#0a0920] text-[#fbbf24]
  font-serif font-bold tracking-widest uppercase
  border border-[#fbbf24]/40
  rounded-sm
  shadow-[0_0_15px_rgba(251,191,36,0.15)]
  hover:border-[#fbbf24]
  hover:shadow-[0_0_30px_rgba(251,191,36,0.4),inset_0_0_15px_rgba(251,191,36,0.1)]
  focus:outline-none focus:ring-2 focus:ring-[#fbbf24]/50 focus:ring-offset-2 focus:ring-offset-[#0a0920]
  active:scale-95 active:shadow-[inset_0_0_30px_rgba(251,191,36,0.6)]
  transition-all duration-500
  overflow-hidden
">
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-700 bg-[radial-gradient(circle_at_center,rgba(251,191,36,0.1),transparent_70%)]" />
  <span className="relative z-10 drop-shadow-[0_0_8px_rgba(251,191,36,0.5)]">Invoke</span>
</button>
```

**Card**
```html
<div className="
  group relative p-10
  bg-[#0a0920]
  border border-[#1e1b4b]
  rounded-full aspect-square
  flex flex-col items-center justify-center
  shadow-[0_0_30px_rgba(30,27,75,0.8)]
  hover:border-[#fbbf24]/50
  hover:shadow-[0_0_50px_rgba(251,191,36,0.2)]
  transition-all duration-1000 ease-in-out
  cursor-crosshair overflow-hidden
">
  <div className="absolute inset-2 border border-dashed border-[#fbbf24]/20 rounded-full group-hover:rotate-180 group-hover:border-[#fbbf24]/60 transition-all duration-[3000ms] ease-linear" />
  <div className="absolute inset-6 border border-[#e2e8f0]/10 rounded-full group-hover:-rotate-90 group-hover:border-[#e2e8f0]/30 transition-all duration-[2000ms] ease-linear" style={{ borderStyle: "dotted" }} />
  <div className="relative z-10 text-center">
    <h3 className="text-3xl font-serif font-bold text-[#fbbf24] mb-2 tracking-[0.2em] group-hover:drop-shadow-[0_0_10px_rgba(251,191,36,0.8)] transition-all duration-500">
      ARCANUM
    </h3>
    <p className="text-[#e2e8f0]/40 font-mono text-xs tracking-widest uppercase group-hover:text-[#e2e8f0]/80 transition-colors duration-500">
      Seal of the Ancients
    </p>
  </div>
</div>
```


---


### 赛博和风 (Cyber Wafuu)

**Slug**: `cyber-wafuu`

#### Description
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

#### Do's (必须做)
1. Use dark indigo backgrounds (bg-[#080814])
2. Add seigaiha wave pattern backgrounds with CSS repeating-radial-gradient
3. Use shoji screen grid as card frame structure
4. Apply kintsugi gold crack line borders and accents
5. Use torii gate shape for navigation framing
6. Add circuit trace connecting lines between elements
7. Layer traditional patterns with digital overlay effects
8. Use restrained interaction motion: subtle hover lift (1-2px) with circuit-glow amplification
9. Trigger directional circuit sweeps or shoji-line brightening on hover/focus for ritual feedback

#### Don'ts (禁止做)
1. No soft pastel colors
2. No organic irregular rounded shapes
3. No Western serif fonts
4. No rounded-full borders
5. No light backgrounds (bg-white, bg-gray-50)
6. No bouncy spring motion or large scale transforms
7. No slow dreamy transitions beyond 320ms on interactive controls

#### AI 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
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_0_8px_rgba(56,189,248,0.2)]`
- Medium: `shadow-[0_0_15px_rgba(56,189,248,0.3)]`
- Large: `shadow-[0_0_20px_rgba(56,189,248,0.4)]`
- Hover: `hover:shadow-[0_0_20px_rgba(56,189,248,0.4)]`

**Interaction**
- Hover Translate: `hover:-translate-y-1`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-sans font-bold tracking-wider`
- Body: `font-sans`

**Required Classes**

Button:
```
font-sans font-semibold tracking-wider
border border-[#1e3a5f]/60
transition-all duration-300 ease-in-out
```

Card:
```
bg-[#080814]
border border-[#1e3a5f]/30
transition-all duration-300 ease-in-out
```

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

**Forbidden**

Classes: `rounded-full`, `rounded-2xl`, `rounded-xl`, `rounded-lg`, `bg-white`, `bg-gray-50`, `bg-gray-100`, `font-serif`, `shadow-md`, `shadow-lg`

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


#### Component Recipes

Available recipes: `button`, `card`, `input`, `shojiScreen`, `seigaihaBanner`, `origamiCard`, `toriiDivider`, `furoshikiWrap`


#### Component Examples

**Button**
```html
<button className="
  group relative px-6 py-3 overflow-hidden
  bg-[#1e3a5f] text-[#e2e8f0] rounded-none
  font-sans font-semibold tracking-wider
  border border-[#1e3a5f]/60
  shadow-[0_0_12px_rgba(30,58,95,0.4)]
  hover:-translate-y-[1px]
  hover:shadow-[0_0_20px_rgba(56,189,248,0.4),0_0_32px_rgba(201,162,39,0.16)]
  hover:border-[#38bdf8]/60
  active:translate-y-[1px]
  active:shadow-[0_0_12px_rgba(56,189,248,0.28)]
  transition-[transform,box-shadow,border-color] duration-250 ease-out
">
  <span className="relative z-10">Execute</span>
  <span className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-[#38bdf8]/20 to-transparent skew-x-[-20deg] transition-transform duration-300 group-hover:translate-x-[420%]" />
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-[#080814]
  rounded-none
  border border-[#1e3a5f]/30
  shadow-[0_0_15px_rgba(30,58,95,0.2)]
  hover:-translate-y-[2px]
  hover:shadow-[0_0_24px_rgba(56,189,248,0.35),0_0_36px_rgba(201,162,39,0.16)]
  hover:border-[#38bdf8]/45
  active:translate-y-[1px]
  transition-[transform,box-shadow,border-color] duration-280 ease-out
">
  <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),transparent_45%,rgba(201,162,39,0.05))]" />
  <div className="absolute top-0 left-1/3 w-px h-full bg-[#1e3a5f]/15 transition-opacity duration-200 group-hover:opacity-70" />
  <div className="absolute top-0 left-2/3 w-px h-full bg-[#1e3a5f]/15 transition-opacity duration-200 group-hover:opacity-70" />
  <div className="absolute top-1/2 left-0 w-full h-px bg-[#1e3a5f]/10 transition-opacity duration-200 group-hover:opacity-70" />
  <div className="absolute top-2 left-2 right-2 h-px bg-gradient-to-r from-transparent via-[#c9a227]/30 to-transparent transition-opacity duration-200 group-hover:opacity-80" />
  <div className="relative z-10">
    <h3 className="text-2xl font-sans font-bold text-[#38bdf8] tracking-wider mb-3">
      SEIGAIHA
    </h3>
    <p className="text-[#e2e8f0]/45 font-sans">
      Traditional waves, digitally reborn
    </p>
  </div>
</div>
```


---


### 蒸汽朋克 (Steampunk)

**Slug**: `steampunk`

#### Description
Victorian-era industrial machinery aesthetics with brass and copper metallic elements, gear mechanism decorations, and steam pipe rivet details. Ideal for retro sci-fi, industrial style, and creative showcase projects.

#### Design Philosophy
Steampunk style originates from the aesthetic imagination of the Victorian-era Industrial Revolution, creating a retro-futuristic feel through brass/copper metallic textures, gear mechanism elements, and precision mechanical details.

Core principles:
- Metallic texture: Brass and copper as core color tones, presenting warm metallic luster
- Mechanical decoration: Gears, pipes, rivets, and other industrial elements integrated into interface design
- Victorian elegance: Serif fonts and ornamental borders maintain classical elegance
- Aged texture: Dark brown backgrounds and yellowed paper tones create a period atmosphere

#### Do's (必须做)
1. Use dark brown backgrounds bg-[#3d2b1f] or bg-[#2a1f15]
2. Use shadow-[0_0_15px_rgba(181,166,66,0.3)] for brass luster effects
3. Use copper-toned borders border border-[#b87333]/50
4. Use cream text text-[#f5f0e1] or brass text text-[#b5a642]
5. Use ornamental borders and rivet-style dot elements
6. Use brass gradient on buttons bg-gradient-to-b from-[#b5a642] to-[#8a7d32]
7. Use font-serif serif fonts for Victorian style

#### Don'ts (禁止做)
1. No pure white backgrounds or modern minimalist style
2. No neon or highly saturated fluorescent colors
3. No flat, textureless design
4. No modern sans-serif fonts for headings
5. No overly large rounded corners rounded-2xl, rounded-3xl
6. No cool-toned blue/purple as primary colors

#### AI Rules
```
STYLE: Steampunk
TYPE: Victorian industrial machinery aesthetic

MUST USE:
- Dark brown background: bg-[#2a1f15] or bg-[#3d2b1f]
- Brass color: text-[#b5a642], bg-[#b5a642]
- Copper color: text-[#b87333], border-[#b87333]
- Cream text: text-[#f5f0e1]
- Metallic gradients: bg-gradient-to-b from-[#b5a642] to-[#8a7d32]
- Brass glow shadows: shadow-[0_0_15px_rgba(181,166,66,0.3)]
- font-serif for Victorian feel
- uppercase tracking-wider for labels
- Rivet decorations: small gradient circles at corners
- Ornate borders: border-2 with copper/brass colors

MUST AVOID:
- White/light backgrounds
- Neon or fluorescent colors
- Flat design without texture
- Modern sans-serif fonts for headings
- Large rounded corners (rounded-2xl+)
- Cold blue/purple color schemes

COLOR RULES:
- Primary: Brass (#b5a642)
- Secondary: Copper (#b87333)
- Background: Dark Brown (#2a1f15, #3d2b1f)
- Text: Cream (#f5f0e1)
- Iron accent: (#4a4a4a)

SPECIAL EFFECTS:
- Corner rivet decorations (small brass circles)
- Metallic inset shadows for depth
- Warm glow on hover interactions
- Gradient overlays for metal texture

## Animation & Interaction Rules

- Clockwork Grind: Motion rhythm is short and linear, simulating gear and lever mechanical engagement, no soft bounce-back.
- Steam Release: Active state performs a crisp press-down and flattens shadow, restoring brass highlight on release, forming a brief valve feedback.
- Rivet Glint: Rivets use sliding gradients for slow reflective shimmer, emphasizing metallic craftsmanship detail.
- Brass Oxidation: On hover, dark brown base slightly deepens while brass strokes and text brighten simultaneously, widening material contrast.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#b87333]/40`
- Radius: `rounded`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(181,166,66,0.2)]`
- Medium: `shadow-[0_0_15px_rgba(181,166,66,0.3)]`
- Large: `shadow-[0_0_25px_rgba(181,166,66,0.4)]`
- Hover: `shadow-[0_0_20px_rgba(184,115,51,0.4)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-serif font-bold`
- Body: `font-serif`

**Required Classes**

Button:
```
px-6 py-3
rounded
font-serif
uppercase tracking-wider
transition-all duration-300
```

Card:
```
bg-[#2a1f15]
border-2 border-[#b87333]/40
rounded
```

Input:
```
bg-[#2a1f15]
border-2 border-[#b87333]/30
rounded
text-[#f5f0e1]
font-serif
focus:border-[#b5a642]
focus:shadow-[0_0_12px_rgba(181,166,66,0.25)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-slate-50`, `shadow-sm`, `shadow-md`, `shadow-lg`, `text-cyan-400`, `text-fuchsia-500`, `rounded-2xl`, `rounded-3xl`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^bg-slate-[1-3]`, `^shadow-(?!\[)`, `^rounded-[23]xl`, `^text-cyan`, `^text-fuchsia`, `^bg-cyan`, `^bg-fuchsia`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `gearBadge`, `brassPanel`, `clockworkProgress`


#### Component Examples

**Button**
```html
// Brass Primary
<button className="px-6 py-3 bg-gradient-to-b from-[#b5a642] via-[#d4c85c] to-[#8a7d32] bg-[length:100%_180%] bg-[position:0_0] text-[#2a1f15] rounded-sm border border-[#d4c85c] shadow-[0_6px_0_#5c4a1f,inset_0_1px_1px_rgba(255,255,255,0.35)] hover:bg-[position:0_100%] hover:shadow-[0_6px_0_#5c4a1f,0_0_20px_rgba(181,166,66,0.55)] hover:-translate-y-[1px] active:translate-y-[6px] active:shadow-[0_0_0_#5c4a1f,inset_0_2px_4px_rgba(0,0,0,0.5)] transition-all duration-100 ease-linear font-serif font-bold uppercase tracking-wider">
  Engage
</button>

// Copper Outline
<button className="px-6 py-3 bg-transparent border-2 border-[#b87333] text-[#b87333] rounded-sm shadow-[0_0_10px_rgba(184,115,51,0.2)] hover:bg-[#b87333]/10 hover:shadow-[0_0_20px_rgba(184,115,51,0.45)] hover:-translate-y-[1px] active:translate-y-[2px] transition-all duration-100 ease-linear font-serif font-bold uppercase tracking-wider">
  Activate
</button>

// Iron Variant
<button className="px-6 py-3 bg-gradient-to-b from-[#5a5a5a] to-[#3a3a3a] text-[#f5f0e1] rounded-sm border border-[#6a6a6a] shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.3)] hover:from-[#6a6a6a] hover:to-[#4a4a4a] active:translate-y-[2px] transition-all duration-100 ease-linear font-serif font-bold uppercase tracking-wider">
  Deploy
</button>
```

**Card**
```html
<div className="group bg-[#2a1f15] border-2 border-[#b87333]/40 rounded-sm p-6 shadow-[0_0_15px_rgba(184,115,51,0.15)] hover:bg-[#241a12] hover:shadow-[0_0_24px_rgba(184,115,51,0.3)] hover:border-[#b5a642]/70 transition-all duration-150 ease-linear relative overflow-hidden">
  {/* Corner rivets */}
  <div className="absolute top-2 left-2 w-2.5 h-2.5 rounded-full bg-[linear-gradient(135deg,#d4c85c_0%,#8a7d32_45%,#d4c85c_100%)] bg-[length:200%_100%] bg-[position:0_0] group-hover:bg-[position:100%_0] shadow-[inset_0_-1px_2px_rgba(0,0,0,0.45)] transition-all duration-300 ease-linear" />
  <div className="absolute top-2 right-2 w-2.5 h-2.5 rounded-full bg-[linear-gradient(135deg,#d4c85c_0%,#8a7d32_45%,#d4c85c_100%)] bg-[length:200%_100%] bg-[position:0_0] group-hover:bg-[position:100%_0] shadow-[inset_0_-1px_2px_rgba(0,0,0,0.45)] transition-all duration-300 ease-linear" />
  <div className="absolute bottom-2 left-2 w-2.5 h-2.5 rounded-full bg-[linear-gradient(135deg,#d4c85c_0%,#8a7d32_45%,#d4c85c_100%)] bg-[length:200%_100%] bg-[position:0_0] group-hover:bg-[position:100%_0] shadow-[inset_0_-1px_2px_rgba(0,0,0,0.45)] transition-all duration-300 ease-linear" />
  <div className="absolute bottom-2 right-2 w-2.5 h-2.5 rounded-full bg-[linear-gradient(135deg,#d4c85c_0%,#8a7d32_45%,#d4c85c_100%)] bg-[length:200%_100%] bg-[position:0_0] group-hover:bg-[position:100%_0] shadow-[inset_0_-1px_2px_rgba(0,0,0,0.45)] transition-all duration-300 ease-linear" />

  <div className="relative">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-5 h-5 rounded-full border-2 border-[#b5a642] flex items-center justify-center">
        <div className="w-1.5 h-1.5 rounded-full bg-[#b5a642]" />
      </div>
      <h3 className="text-[#b5a642] font-serif uppercase tracking-wider text-sm">Mechanism Module</h3>
    </div>
    <h4 className="text-[#f5f0e1] text-xl font-serif font-bold mb-3">
      Clockwork Engine
    </h4>
    <p className="text-[#b87333]/80 leading-relaxed font-serif">
      Precision-engineered brass mechanism with steam-driven power core.
    </p>
  </div>
</div>
```


---


### 波普艺术 (Pop Art)

**Slug**: `pop-art`

#### Description
Bold and vivid Pop Art style inspired by Andy Warhol and Roy Lichtenstein. Thick black outlines, halftone Ben-Day dots, comic-style speech bubbles, and highly saturated color blocks. Ideal for creative brands, pop culture, and art showcases.

#### Design Philosophy
Pop Art style originates from the 1960s Pop Art movement, represented by Andy Warhol and Roy Lichtenstein, creating visual impact through bold color blocks, thick black outlines, and halftone Ben-Day dots.

Core principles:
- Thick black outlines: All elements use thick black borders to emphasize shapes
- Highly saturated color blocks: Yellow, pink, blue and other pure flat color fills
- Halftone Ben-Day dots: Ben-Day dots are the signature texture of Pop Art
- Comic style: Speech bubbles, action lines, and other comic elements integrated into the interface

#### Do's (必须做)
1. Use highly saturated solid backgrounds bg-[#ffdd00] or bg-white
2. All elements use thick black borders border-4 border-black
3. Use Ben-Day halftone dots as background texture
4. Text uses bold font-black uppercase
5. Buttons and cards use hard shadows shadow-[4px_4px_0_#000]
6. Use high-contrast colors: yellow #ffdd00, pink #ff69b4, blue #00bfff
7. Hover state increases shadow offset hover:shadow-[6px_6px_0_#000]
8. Comic Pow!: hover:scale-110 hover:-rotate-3 -- exaggerated tilt + scale like a comic SFX panel bursting out of the frame
9. Ben-Day Dynamics: use dual dot layers -- base black dots deepen opacity-10 to opacity-30, and a second red dot layer opacity-0 to opacity-20 appears offset by half a grid on hover
10. Punchy Motion: duration-100 ease-out -- rubber-stamp speed, snappy but not instantaneous
11. Active Snap: active:scale-95 active:rotate-2 active:translate-x-[4px] active:translate-y-[4px] active:shadow-[2px_2px_0_#000] -- inward press pushes shadow back toward zero

#### Don'ts (禁止做)
1. No gradient colors (must be flat solid fills)
2. No low-saturation/gray-tone colors
3. No thin borders (must be border-2 or above)
4. No soft shadows shadow-md (must be hard shadows)
5. No overly rounded corners rounded-full (keep rounded-none or rounded-lg)
6. No minimalist/undecorated design language
7. No duration-200 or longer hover/active transitions (Pop Art demands duration-100 ease-out impact speed)
8. No single-layer Ben-Day texture (must use dual-layer overlay for color-shifting dot effect)
9. No hover using only translate-y without scale and rotate (Comic Pow! requires all three)

#### AI Rules
```
STYLE: Pop Art
TYPE: Bold comic-book inspired interface

MUST USE:
- Thick black borders: border-4 border-black
- Hard offset shadows: shadow-[4px_4px_0_#000]
- Bold flat colors: bg-[#ffdd00], bg-[#ff69b4], bg-[#00bfff]
- Heavy typography: font-black uppercase tracking-wider
- Ben-Day dot patterns as background texture
- White or bright color backgrounds
- Comic-style elements (speech bubbles, action words)

MUST AVOID:
- Gradients (use flat color fills only)
- Low saturation / muted colors
- Thin borders (border must be border-2+)
- Soft shadows (shadow-md, shadow-lg)
- Rounded-full shapes
- Minimal / clean design language

COLOR RULES:
- Primary: Yellow (#ffdd00)
- Secondary: Hot Pink (#ff69b4)
- Accent: Electric Blue (#00bfff)
- Borders: Black (#000000)
- Background: White (#ffffff) or bright colors
- Text: Black on light, White on dark colors

SPECIAL EFFECTS:
- Hard shadow offset increases on hover
- Translate shift on hover for depth effect
- Ben-Day dots overlay for pop art texture
- Active state presses shadow inward

## Animation & Interaction Rules

- Comic Pow!: Hover applies exaggerated scale + tilt: `hover:scale-110 hover:-rotate-3` — like a comic SFX panel bursting out of the frame. Never use `hover:translate-y` alone without `scale` and `rotate`.
- Ben-Day Dynamics: Use dual dot layers. Base black dots: `opacity-10 group-hover:opacity-30`. Secondary red dots offset by half a grid: `opacity-0 group-hover:opacity-20`. Together they simulate the Ben-Day color shift characteristic of Lichtenstein prints.
- Punchy Motion: All transitions `duration-100 ease-out` — rubber-stamp speed, not smooth. Never use `duration-200` or slower for hover/active states.
- Active Snap: `active:scale-95 active:rotate-2 active:translate-x-[4px] active:translate-y-[4px] active:shadow-[2px_2px_0_#000]` — the inward press pushes shadow back toward zero, creating a punchy click feel.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-black`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[2px_2px_0_#000]`
- Medium: `shadow-[4px_4px_0_#000]`
- Large: `shadow-[6px_6px_0_#000]`
- Hover: `shadow-[6px_6px_0_#000]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-black uppercase`
- Body: `font-bold`

**Required Classes**

Button:
```
px-6 py-3
border-4 border-black
rounded-lg
font-black
uppercase tracking-wider
shadow-[4px_4px_0_#000]
transition-all duration-150
```

Card:
```
bg-white
border-4 border-black
rounded-lg
shadow-[6px_6px_0_#000]
```

Input:
```
bg-white
border-4 border-black
rounded-lg
text-black
font-bold
focus:border-[#ff69b4]
focus:shadow-[4px_4px_0_#ff69b4]
```

**Forbidden**

Classes: `bg-gradient-to-r`, `bg-gradient-to-l`, `bg-gradient-to-b`, `bg-gradient-to-t`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `text-gray-300`, `text-gray-200`

Patterns: `^bg-gradient`, `^shadow-(?!\[)`, `^rounded-full`, `^border$`, `^text-gray-[1-3]`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `halftoneCard`, `boldCaption`, `wowBadge`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-[#ffdd00] text-black
  border-[4px] border-black
  rounded-lg
  shadow-[6px_6px_0_#000]
  hover:bg-[#ff69b4]
  hover:shadow-[10px_10px_0_#000]
  hover:-translate-y-1
  hover:scale-110 hover:-rotate-3
  active:scale-95 active:rotate-2
  active:translate-x-[4px] active:translate-y-[4px]
  active:shadow-[2px_2px_0_#000]
  transition-all duration-100 ease-out
  font-black uppercase text-xl tracking-wider
">
  POW!
</button>
```

**Card**
```html
<div className="group bg-white border-[4px] border-black rounded-lg p-8 shadow-[8px_8px_0_#000] hover:shadow-[16px_16px_0_#000] hover:-translate-y-2 hover:-translate-x-2 transition-all duration-150 ease-out relative overflow-hidden cursor-pointer">
  {/* Ben-Day dots — base layer deepens on hover */}
  <div className="absolute inset-0 opacity-10 group-hover:opacity-30 transition-opacity duration-150" style={{backgroundImage: 'radial-gradient(circle, #000 2px, transparent 2px)', backgroundSize: '10px 10px'}} />
  {/* Ben-Day dots — red accent layer appears on hover (Ben-Day Dynamics) */}
  <div className="absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity duration-150" style={{backgroundImage: 'radial-gradient(circle, #ff0000 2px, transparent 2px)', backgroundSize: '10px 10px', backgroundPosition: '5px 5px'}} />
  <div className="relative z-10">
    <div className="inline-block bg-[#00bfff] border-[3px] border-black px-4 py-1 mb-4 font-black text-sm uppercase tracking-wider transform rotate-2 group-hover:-rotate-3 group-hover:scale-110 group-hover:bg-[#ffdd00] transition-all duration-150">
      NEW!
    </div>
    <h4 className="text-black text-4xl font-black uppercase mb-3 transform group-hover:skew-x-[-5deg] transition-transform duration-150">
      Comic Card
    </h4>
    <p className="text-gray-700 font-medium leading-relaxed">
      Bold, colorful pop culture aesthetic with comic book styling.
    </p>
  </div>
</div>
```


---


### 太阳朋克 (Solarpunk)

**Slug**: `solarpunk`

#### Description
An optimistic eco-futurism style blending nature and technology in harmonious aesthetics. Organic curves, plant elements, warm gradients, and soft rounded corners. Ideal for eco-friendly, sustainable development, and green tech products.

#### Design Philosophy
Solarpunk style originates from an optimistic imagination of the future, depicting a world where humans and nature coexist harmoniously. It conveys hope and vitality through organic curves, plant elements, and warm color tones.

Core principles:
- Nature fusion: Organically combining plant and technology elements
- Warm tones: Leaf green, golden yellow, and sky blue form a warm color palette
- Organic curves: Soft rounded corners and flowing lines
- Optimistic emotion: Bright, fresh, and vibrant visual language

#### Do's (必须做)
1. Use warm light backgrounds bg-[#fef3c7] or bg-green-50
2. Use leaf green as primary color text-green-400 or bg-green-400
3. Use golden yellow as accent text-amber-400 or bg-amber-400
4. Use large rounded corners rounded-2xl or rounded-3xl for organic feel
5. Use warm gradients bg-gradient-to-br from-green-400 to-amber-400
6. Add plant-themed decorative elements to cards
7. Use soft shadows shadow-lg shadow-green-200/50

#### Don'ts (禁止做)
1. No pure black backgrounds or dark themes
2. No sharp right angles rounded-none
3. No cold industrial elements
4. No high-contrast neon glow effects
5. No dystopian or wasteland elements
6. No gloomy, oppressive color schemes

#### AI Rules
```
STYLE: Solarpunk
TYPE: Eco-futurism organic interface

MUST USE:
- Light warm background: bg-[#f0fdf4] or bg-green-50 or bg-[#fef3c7]
- Organic gradients: bg-gradient-to-r from-green-400 to-emerald-500
- Soft shadows: shadow-lg shadow-green-200/50
- Large rounded corners: rounded-2xl or rounded-3xl
- Plant-themed icons: Leaf, Sun, Sprout, TreePine from Lucide
- Warm color palette: green-400, amber-400, sky-400
- Semi-transparent backgrounds: bg-white/80 backdrop-blur-sm

MUST AVOID:
- Dark/black backgrounds
- Sharp corners (rounded-none, rounded-sm)
- Industrial cold design
- Neon glow effects
- Dystopian or harsh aesthetics
- Gray/muted color schemes

COLOR RULES:
- Primary: Leaf Green (#4ade80)
- Secondary: Solar Gold (#fbbf24)
- Accent: Sky Blue (#38bdf8)
- Background: Warm cream (#fef3c7) or green-50
- Text: Dark green or gray-800
- Borders: Green-200 with subtle tint

SPECIAL EFFECTS:
- Organic gradient decorations
- Subtle backdrop blur for depth
- Hover lift with shadow enhancement
- Smooth transitions duration-300

## Animation & Interaction Rules

- Phototropic Lift: Elements float upward with slight tilt on hover, simulating growth toward light, keeping amplitude gentle to avoid instability.
- Solar Flare: Primary button brightens from green toward warm gold on hover, releasing a larger warm-toned halo.
- Organic Unfolding: Decorative patches and leaf elements unfold with longer duration, recommended duration-700 with ease-in-out.
- Soft Glass Resonance: Active state prioritizes feedback through opacity and shadow density changes, no mechanical hard-press feel.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-green-200`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-md shadow-green-100/40`
- Medium: `shadow-lg shadow-green-200/40`
- Large: `shadow-xl shadow-green-200/50`
- Hover: `shadow-xl shadow-green-300/50`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
rounded-2xl
font-medium
transition-all duration-300
```

Card:
```
bg-white/80
border border-green-200
rounded-3xl
```

Input:
```
bg-white/80
border border-green-200
rounded-2xl
text-gray-800
focus:border-green-400
focus:shadow-lg focus:shadow-green-200/40
```

**Forbidden**

Classes: `bg-black`, `bg-gray-950`, `bg-gray-900`, `bg-[#0a0a0f]`, `rounded-none`, `rounded-sm`, `text-cyan-400`, `shadow-[0_0_20px`

Patterns: `^bg-gray-9`, `^bg-black`, `^rounded-none`, `^rounded-sm$`, `shadow-\[0_0_\d+px_rgba`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `leafPanel`, `solarProgress`, `ecoAlert`


#### Component Examples

**Button**
```html
// Leaf Primary
<button className="px-6 py-3 bg-gradient-to-r from-green-400 to-emerald-500 text-white rounded-2xl shadow-[0_8px_20px_rgba(52,211,153,0.3)] hover:from-amber-400 hover:to-yellow-500 hover:shadow-[0_12px_32px_rgba(251,191,36,0.4)] hover:-translate-y-1 hover:rotate-1 active:scale-95 active:opacity-95 transition-all duration-500 ease-out font-medium">
  Grow Together
</button>

// Solar Gold
<button className="px-6 py-3 bg-gradient-to-r from-amber-400 to-yellow-500 text-amber-900 rounded-2xl shadow-[0_8px_20px_rgba(251,191,36,0.3)] hover:from-yellow-300 hover:to-amber-400 hover:shadow-[0_14px_34px_rgba(251,191,36,0.45)] hover:-translate-y-1 hover:-rotate-1 active:scale-95 active:opacity-95 transition-all duration-500 ease-out font-medium">
  Harvest Energy
</button>

// Outline Organic
<button className="px-6 py-3 bg-white/50 backdrop-blur-sm border-2 border-green-400 text-green-600 rounded-2xl hover:bg-green-50/80 hover:shadow-[0_10px_24px_rgba(74,222,128,0.28)] hover:-translate-y-0.5 active:opacity-90 transition-all duration-500 ease-out font-medium">
  Explore Nature
</button>
```

**Card**
```html
<div className="group bg-white/80 backdrop-blur-sm border border-green-200 rounded-3xl p-6 shadow-lg shadow-green-100/50 hover:shadow-[0_20px_48px_rgba(52,211,153,0.24)] hover:-translate-y-2 hover:rotate-1 hover:scale-[1.01] transition-all duration-700 ease-in-out relative overflow-hidden">
  {/* Organic decoration */}
  <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-green-100 to-transparent rounded-bl-full scale-100 group-hover:scale-150 group-hover:from-amber-200/70 transition-all duration-700 ease-in-out" />

  <div className="relative">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-8 h-8 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center group-hover:from-amber-400 group-hover:to-yellow-500 transition-colors duration-500">
        <Leaf className="w-4 h-4 text-white" />
      </div>
      <h3 className="text-green-700 font-semibold text-sm uppercase tracking-wide group-hover:text-amber-700 transition-colors duration-500">Eco Module</h3>
    </div>
    <h4 className="text-gray-800 text-xl font-bold mb-3">
      Solar Garden
    </h4>
    <p className="text-gray-600 leading-relaxed">
      A harmonious blend of sustainable technology and living greenery.
    </p>
  </div>
</div>
```


---


### 日式RPG (JRPG)

**Slug**: `jrpg`

#### Description
Classic Japanese RPG menu and dialogue box aesthetics with beveled borders, gradient backgrounds, status bars, and ornate frames. Ideal for game interfaces, interactive narratives, and fantasy-style products.

#### Design Philosophy
JRPG style descends from the menu screens of 16-bit and 32-bit Japanese role-playing games -- the era when Final Fantasy, Dragon Quest and Chrono Trigger turned a simple status screen into a piece of worldbuilding. Every panel was carved, gilded and lit like an artifact from the game's own universe.

The look is built from a handful of deliberate choices: a deep navy field (#0f172a to #1e293b) that reads as night sky or dungeon stone, beveled frames that catch light on the top-left and fall into shadow on the bottom-right, and a two-color accent system -- gold #fbbf24 for anything the player can act on, crystal white #f0f9ff for anything the player must read.

Core principles:
- Beveled depth: No flat surfaces. Panels and buttons use paired inset shadows, light from the top-left and dark from the bottom-right, so every element reads as a physical plate with thickness
- Layered panels: Vertical ramps from slate-800 to slate-900 give large surfaces a subtle sheen, the way a backlit screen renders depth without any texture art
- Ornamental framing: Corner caps, double borders and hairline inner strokes turn a plain container into a framed window
- Status-driven color: HP, MP and EXP bars each own a color ramp (red-amber, blue-cyan, green-lime) so state is legible before a single number is read
- Textured restraint: Grain or scanline layers stay at low opacity in the background, so the interface never fights the numbers

Applying it to modern interfaces means treating every card as a menu entry and every action as a command: buttons click like a selection cursor landing, modals open with a short vertical wipe instead of a fade, and focus states glow gold rather than turning blue. Typography usually pairs a pixel or blocky display face for headers with a clean sans for body copy -- the display face carries the nostalgia, the sans keeps long text readable.

Suitable for: game UI and launcher screens, retro-gaming storefronts and wikis, achievement and leaderboard dashboards, esports overlays, and any product that wants the weight of a 90s adventure menu without becoming unreadable.

#### Do's (必须做)
1. Use deep navy blue backgrounds bg-[#0f172a] or bg-slate-900
2. Use border-2 border-[#1e40af] with inset shadows for beveled effect
3. Gold highlight text text-[#fbbf24] for titles and important info
4. Use gradient backgrounds bg-gradient-to-b from-blue-900 to-slate-900
5. Status bars use bg-[#22c55e] for HP, bg-blue-500 for MP
6. Card panels use double-layer borders ring-1 ring-blue-400/20 border-2 border-blue-800
7. Buttons use inset shadow shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] for raised effect
8. Menu interactions use hard-cut feedback (duration-75 to 120) simulating controller selection rhythm

#### Don'ts (禁止做)
1. No minimalist flat style (no borders, no shadows)
2. No white or light backgrounds
3. No modern sans-serif fonts only (must pair with serif or pixel fonts)
4. No overly rounded rounded-full buttons
5. No transparent/borderless panels
6. No low-contrast color combinations
7. No slow web-style transitions (duration-300+) that dilute game menu feel

#### AI Rules
```
STYLE: JRPG
TYPE: Classic Japanese RPG menu interface

MUST USE:
- Dark background: bg-[#0f172a] or bg-slate-900
- Beveled borders: border-2 with inset shadows
- Gold accent text: text-[#fbbf24]
- Crystal white text: text-[#f0f9ff]
- Gradient panels: bg-gradient-to-b from-slate-800 to-slate-900
- HP/MP bars with colored gradients
- Corner decorations on panels
- Shadow depth: shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]

MUST AVOID:
- White/light backgrounds
- Flat minimal design without borders
- Modern sans-serif only typography
- rounded-full buttons
- Transparent/borderless panels
- Low contrast color combinations

COLOR RULES:
- Primary: Royal Blue (#1e40af)
- Accent: Gold (#fbbf24)
- Background: Dark Navy (#0f172a)
- Text: Crystal White (#f0f9ff)
- HP: Green (#22c55e)
- MP: Blue (#3b82f6)
- Borders: Blue shades with glow

SPECIAL EFFECTS:
- Inset shadows for beveled/raised look
- Corner ornaments on panels
- Gradient overlays for depth
- Stat bar animations

Animation & Interaction Rules:
- Cursor Snap: Interaction feedback prioritizes hard-cut, using duration-75 to 120, simulating D-pad menu item selection.
- Retro Confirm Press: Active must have key press-down feel (scale + translate-y + inset shadow switch).
- Menu Hover State: Hover lights up gold border or highlight bar, maintaining high-contrast confirmation feedback.
- Flashing Prompts: Prompt labels can use lightweight pulse, avoiding large-area animations that interfere with readouts.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-blue-700`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.3)]`
- Medium: `shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.5)]`
- Large: `shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_12px_rgba(0,0,0,0.6)]`
- Hover: `shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_4px_8px_rgba(0,0,0,0.4)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
rounded-md
font-bold
tracking-wide
border-2
transition-all duration-200
```

Card:
```
bg-gradient-to-b from-slate-800 to-slate-900
border-2 border-blue-700
rounded-md
ring-1 ring-blue-400/20
```

Input:
```
bg-slate-900
border-2 border-blue-700
rounded-md
text-[#f0f9ff]
focus:border-blue-400
focus:ring-1 focus:ring-blue-400/30
shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-slate-50`, `shadow-sm`, `shadow-md`, `shadow-lg`, `rounded-full`, `rounded-3xl`, `border-0`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^bg-slate-[1-3]`, `^shadow-(?!\[)`, `^rounded-full`, `^rounded-3xl`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `statusWindow`, `menuList`, `goldFrame`


#### Component Examples

**Button**
```html
// RPG Primary Button
<button className="group relative px-6 py-3 bg-gradient-to-b from-blue-700 to-blue-900 border-2 border-blue-500 rounded-sm text-[#f0f9ff] font-bold tracking-widest shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_0_rgba(0,0,0,0.8)] hover:from-blue-600 hover:to-blue-800 hover:border-[#fbbf24] hover:text-[#fbbf24] active:scale-[0.95] active:translate-y-[4px] active:shadow-[inset_0_4px_8px_rgba(0,0,0,0.6),0_0_0_rgba(0,0,0,0.8)] transition-all duration-75 ease-linear overflow-hidden">
  <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[#fbbf24] opacity-0 group-hover:opacity-100 transition-none">{">"}</span>
  <span className="pl-4">Attack</span>
</button>

// RPG Gold Button
<button className="px-6 py-3 bg-gradient-to-b from-yellow-500 to-yellow-700 border-2 border-yellow-400 rounded-sm text-slate-900 font-bold tracking-widest shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_3px_0_rgba(0,0,0,0.65)] hover:from-yellow-400 hover:to-yellow-600 active:scale-[0.96] active:translate-y-[3px] active:shadow-[inset_0_4px_8px_rgba(0,0,0,0.35),0_0_0_rgba(0,0,0,0.6)] transition-all duration-75 ease-linear">
  Confirm
</button>

// RPG Outline Button
<button className="group relative px-6 py-3 bg-slate-900/80 border-2 border-blue-400/60 rounded-sm text-blue-300 font-bold tracking-widest shadow-[0_2px_4px_rgba(0,0,0,0.3)] hover:border-[#fbbf24] hover:text-[#fbbf24] hover:bg-slate-800/80 transition-all duration-75 ease-linear">
  <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[#fbbf24] opacity-0 group-hover:opacity-100 transition-none">{">"}</span>
  <span className="pl-4">Cancel</span>
</button>
```

**Card**
```html
<div className="group bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-sm p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.05),0_6px_0_rgba(0,0,0,0.8)] ring-1 ring-blue-400/20 hover:border-[#fbbf24] transition-colors duration-75 ease-linear cursor-pointer relative">
  {/* Corner decoration */}
  <div className="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 border-[#fbbf24] group-hover:border-white transition-colors duration-75" />
  <div className="absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 border-[#fbbf24] group-hover:border-white transition-colors duration-75" />
  <div className="absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 border-[#fbbf24] group-hover:border-white transition-colors duration-75" />
  <div className="absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 border-[#fbbf24] group-hover:border-white transition-colors duration-75" />

  <div className="relative">
    <div className="flex items-center gap-2 mb-4 border-b border-blue-700/50 pb-3 group-hover:border-[#fbbf24]/50 transition-colors duration-75">
      <h3 className="text-[#fbbf24] font-bold tracking-widest text-sm uppercase group-hover:animate-pulse">Character Status</h3>
    </div>
    <div className="space-y-3">
      <div className="flex justify-between text-[#f0f9ff] text-sm font-bold tracking-wide">
        <span>HP</span>
        <span className="group-hover:text-[#fbbf24] transition-colors duration-75">234 / 500</span>
      </div>
      <div className="w-full h-3 bg-slate-950 rounded-sm border border-slate-600 overflow-hidden">
        <div className="h-full w-[47%] bg-gradient-to-r from-green-500 to-green-400 rounded-sm shadow-[0_0_6px_rgba(34,197,94,0.4)]" />
      </div>
    </div>
  </div>
</div>
```


---


### 非对称网格 (Asymmetric Grid)

**Slug**: `asymmetric-grid`

#### Description
A layout approach that breaks traditional symmetric grids, creating dynamic and engaging page structures through irregular column widths, overlapping elements, and visual tension. Ideal for creative portfolios, art exhibitions, and brand showcases.

#### Design Philosophy
Asymmetric Grid breaks the even distribution of traditional grids, creating visual tension through unequal column widths, element overlap, and whitespace contrast.

Core principles:
- Break symmetry: Intentionally use unequal column and row widths
- Visual tension: Create dynamism through size contrast and position offset
- Whitespace as content: Large whitespace areas contrast with dense regions
- Layer overlap: Allow elements to overlap each other for depth
- Spatial breakout: On interaction, elements "jump" to the foreground from the chaotic grid

#### Do's (必须做)
1. Use CSS Grid grid-template-columns to define unequal column widths
2. Allow elements to span multiple columns and rows col-span-2 row-span-3
3. Use -translate and z-index to create overlap effects
4. Maintain sufficient whitespace contrasting with dense areas
5. Use clearly differentiated font size hierarchy
6. Let images and content blocks break grid boundaries
7. On hover, significantly raise z-index and scale, making elements pop out from the grid
8. Use hard-edge shadows (shadow-[Xpx_Ypx_0px_color]) to reinforce physical separation feel
9. Card internal titles/labels displace with different delays, creating parallax offset

#### Don'ts (禁止做)
1. No perfectly equal column widths
2. No neatly aligned elements without variation
3. No ignoring mobile responsive adjustments
4. No excessive clutter that loses readability
5. No elements all similar in size
6. No soft shadows (shadow-sm, shadow-md)
7. No overly long duration (not exceeding 300ms)

#### AI Rules
```
You are an Asymmetric Grid layout expert. Generated code must follow:

## Layout Rules
- Use CSS Grid 12-column system, but column widths must be unequal
- Allow element overlap, use z-index to control layering
- Use -translate to create offset effects
- Maintain visual tension: large whitespace areas contrasting with dense regions

## Animation & Interaction Rules
- Spatial Tension: On hover, significantly raise z-index (z-50) and use scale-105, making elements "jump" to the foreground from the chaotic grid.
- Hard Popping: Use crisp ease-out with duration-200 to duration-300, paired with high-contrast hard shadows (shadow-[8px_8px_0px_color]).
- Parallax Content: Card internal titles, labels, and descriptions displace with different delays (delay-75, delay-100) and translate distances on hover, creating typographic offset.
- Physical Feedback: Active state resets translate and shadow to zero, simulating press-and-bounce-back.

## Forbidden
- Symmetric layouts with all equal column widths
- Rounded design (rounded-lg, rounded-xl)
- Soft shadows (shadow-sm, shadow-md)
- Transitions exceeding duration-300
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#0f0f0f]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-[4px_4px_0px_#0f0f0f]`
- Large: `shadow-[8px_8px_0px_#ff3366]`
- Hover: `hover:shadow-[4px_4px_0px_#ff3366]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
font-bold
uppercase
tracking-widest
```

Card:
```
border-2
border-[#0f0f0f]
```

Input:
```
border-2
border-[#0f0f0f]
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^rounded-(?:lg|xl|2xl|full)`, `^shadow-(?:sm|md|lg|xl)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `section`, `nav`


#### Component Examples

**Button**
```html
<button className="
  relative px-8 py-4
  bg-[#0f0f0f] text-white
  font-bold uppercase tracking-widest
  hover:-translate-x-2 hover:-translate-y-2
  hover:shadow-[6px_6px_0px_#ff3366]
  active:translate-x-0 active:translate-y-0 active:shadow-none
  transition-all duration-200 ease-out
">
  Explore
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-white
  border-2 border-[#0f0f0f]
  -rotate-2
  hover:rotate-1 hover:scale-105 hover:z-50
  hover:-translate-y-4
  hover:shadow-[8px_8px_0px_#ff3366]
  transition-all duration-300 ease-out
">
  <span className="inline-block text-xs uppercase tracking-widest text-gray-500 bg-gray-100 px-2 py-1 group-hover:-translate-y-2 group-hover:bg-[#ff3366] group-hover:text-white transition-all duration-300">Featured</span>
  <h3 className="text-3xl font-bold mt-4 mb-4 group-hover:translate-x-2 transition-transform duration-300 delay-75">Breaking the Grid</h3>
  <p className="text-gray-600 group-hover:translate-x-1 transition-transform duration-300 delay-100">Asymmetry creates visual tension and dynamic spatial interest.</p>
</div>
```


---


### 视差滚动 (Parallax Sections)

**Slug**: `parallax-sections`

#### Description
An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersive experience pages.

#### Design Philosophy
Parallax Sections creates depth through differential scrolling speeds between background and foreground, letting users experience a layered visual journey while scrolling.

Core principles:
- Depth layering: Fixed backgrounds with scrolling content create a three-dimensional spatial feel
- Immersive experience: Each section stands as its own scene, like flipping through a picture book
- Rhythm control: Full-screen sections control the user's browsing pace
- Visual focus: Each section highlights one primary information point

#### Do's (必须做)
1. Use bg-fixed to create fixed background parallax effect
2. Each section uses min-h-screen full-screen height
3. Content areas use semi-transparent backgrounds bg-white/90 for readability
4. Use sticky top-0 for sticky scroll effects
5. Background images use bg-cover bg-center to maintain proportions
6. Transition sections use gradient or blur effects
7. Interactions prioritize opacity and blur changes to express depth of field, avoiding large displacement animations that cause dizziness
8. Cards can add slow sweep light layers (Glass Glare) to enhance lens reflection feel
9. Uniformly use longer easing duration-500/700 for cinematic narrative rhythm

#### Don'ts (禁止做)
1. No insufficient contrast between background images and content
2. No inconsistent section heights that break rhythm
3. No excessive parallax layers causing performance issues
4. No ignoring mobile parallax degradation handling
5. No overly dense content that breaks focus
6. No large vertical card hover jumps (background already has displacement, foreground should be restrained)
7. No short, abrupt animations (would break immersive narrative)

#### AI Rules
```
You are a Parallax Sections layout expert. Generated code must follow:

## Layout Rules
- Each section uses min-h-screen full-screen height
- Backgrounds use bg-fixed bg-cover bg-center
- Content uses semi-transparent backgrounds (bg-white/90 or bg-black/40 depending on scene) with backdrop-blur
- Navigation uses fixed + backdrop-blur-lg

## Forbidden
- Using bg-scroll (breaks parallax effect)
- Inconsistent section heights
- Insufficient contrast between background and content

## Animation & Interaction Rules
- Decoupled Depth: Foreground cards avoid large Y-axis floating, prioritize opacity and blur to reinforce depth of field feedback.
- Glass Glare: Can use gradient sweep layers that slowly appear on hover, simulating lens reflection.
- Cinematic Slowness: Interaction rhythm uses duration-500 to 700, maintaining narrative continuity and immersion.
- Immersive Focus: Active feedback prioritizes background brightness changes, avoiding obvious scaling that breaks layout stability.

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), row on desktop (md:flex-row)
- Reduce font sizes on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: min 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. All interactive elements have hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout is responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing is consistent using the defined scale
6. All animations respect prefers-reduced-motion
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/20`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-lg`
- Medium: `shadow-xl`
- Large: `shadow-2xl`
- Hover: `hover:shadow-2xl`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans leading-relaxed`

**Required Classes**

Button:
```
backdrop-blur-md
rounded-full
```

Card:
```
backdrop-blur-sm
rounded-2xl
```

Input:
```
backdrop-blur-md
rounded-full
```

**Forbidden**

Classes: `bg-scroll`, `rounded-none`, `shadow-none`

Patterns: `^bg-scroll`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `section`, `nav`, `divider`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-white/10 backdrop-blur-md
  text-white
  uppercase tracking-widest
  rounded-full
  font-medium
  border border-white/20
  hover:bg-white/30 hover:border-white/50
  hover:shadow-[0_0_30px_rgba(255,255,255,0.2)]
  active:bg-white/5
  transition-all duration-500 ease-out
">
  Explore Story
</button>
```

**Card**
```html
<div className="
  group relative p-10 md:p-14
  bg-black/40 backdrop-blur-md
  rounded-2xl
  border border-white/10
  hover:bg-black/60 hover:border-white/30 hover:backdrop-blur-xl
  transition-all duration-700 ease-out
  max-w-2xl
  overflow-hidden
">
  <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
  <h3 className="text-4xl font-light text-white mb-6 tracking-wide group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.4)] transition-all duration-500">The Parallax View</h3>
  <p className="text-white/70 leading-relaxed text-lg font-light group-hover:text-white/90 transition-colors duration-500">
    Scroll to reveal layered storytelling. Foreground stays calm while background depth keeps moving.
  </p>
</div>
```


---


### 暖色仪表盘 (Warm Dashboard)

**Slug**: `warm-dashboard`

#### Description
A warm and soft dashboard design style with coral/terracotta backgrounds, cream-white cards, and gentle shadows, creating a comfortable and professional data display experience.

#### Design Philosophy
Warm Dashboard is a warm, professional interface design style that makes data presentation more approachable and friendly through warm-toned backgrounds and soft card designs.

Core principles:
- Warm comfort: Coral/terracotta backgrounds convey warmth
- Clear hierarchy: Cream-white cards form clear contrast on warm backgrounds
- Soft touch: Large rounded corners and diffused shadows create soft visuals
- Professional readability: Dark gray text ensures data readability
- Accent colors: Teal and golden yellow as data highlights and chart colors

#### Do's (必须做)
1. Use warm-toned backgrounds bg-[#d4a088] or bg-[#c9967a]
2. Cards use cream white bg-[#faf8f5] or bg-white
3. Use large rounded corners rounded-2xl or rounded-3xl
4. Use soft diffused shadows shadow-xl shadow-black/10
5. Charts use teal #4a9d9a and golden #e8b86d colors
6. Text uses dark gray text-gray-800 or text-gray-600
7. Sidebar uses semi-transparent white bg-white/80 backdrop-blur
8. Data highlights use accent-colored circular backgrounds

#### Don'ts (禁止做)
1. No cool-toned backgrounds (blue, purple)
2. No pure black text text-black
3. No sharp corners rounded-none rounded-sm
4. No hard-edge shadows
5. No highly saturated neon colors
6. No thick borders border-2 or above

#### AI Rules
```
You are a Warm Dashboard design style frontend development expert.

## Core Features

Background:
- Main background: bg-[#d4a088] coral/terracotta
- Optional variants: bg-[#c9967a] darker, bg-[#e0b8a4] lighter

Cards:
- Background: bg-[#faf8f5] cream white or bg-white
- Rounded corners: rounded-2xl or rounded-3xl
- Shadows: shadow-xl shadow-black/8 (soft diffused)
- hover: hover:shadow-2xl hover:-translate-y-1

Color System:
- Teal (primary accent): #4a9d9a - for primary buttons, positive data
- Golden (chart primary): #e8b86d - for charts, highlights
- Coral (secondary accent): #c17767 - for negative data, warnings
- Sage (auxiliary): #6b8e8e - for secondary elements

Text:
- Headings: text-gray-800 font-semibold/bold
- Body: text-gray-600
- Secondary: text-gray-500 text-gray-400
- On warm background: text-white

## Layout

Sidebar:
- bg-white/80 backdrop-blur-xl
- Width w-60
- Contains logo, avatar, navigation

Main area:
- bg-[#d4a088] warm background
- p-6 md:p-8 lg:p-10
- Stats card grid + chart cards

## Forbidden

- Cool backgrounds (blue, purple, gray)
- Pure black text
- Sharp corners
- Hard-edge shadows
- Neon colors
- Thick borders

## Animation & Interaction Rules
- Micro-Focus: As a data-dense dashboard, card interactions must never cause dramatic visual jumps. Hover allows only very slight upward float (hover:-translate-y-0.5), with enhanced shadow (shadow-xl to shadow-2xl) to focus attention.
- Tinted Diffusion: Abandon dead-black shadows. Hover highlight operations (like primary buttons) must emit a soft halo in the same color family as the primary color (e.g., hover:shadow-[0_8px_20px_rgba(74,157,154,0.25)]), maintaining the overall warm atmosphere.
- Data Pulse: Enhance data readability. When hovering on data cards, key metrics (KPI values) can quickly micro-scale (group-hover:scale-105) or switch to accent color (teal or golden), helping users lock onto core information.
- Warm Utility: All state transitions must balance efficiency and softness, recommended duration-200 ease-out.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-gray-200/50`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-lg shadow-black/5`
- Medium: `shadow-xl shadow-black/8`
- Large: `shadow-2xl shadow-black/10`
- Hover: `hover:shadow-2xl hover:-translate-y-1`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold text-gray-800`
- Body: `text-gray-600`

**Required Classes**

Button:
```
px-5 py-2.5 md:px-6 md:py-3
rounded-xl
shadow-lg
hover:shadow-xl hover:-translate-y-0.5
transition-all duration-200
font-medium text-sm md:text-base
```

Card:
```
bg-[#faf8f5]
rounded-2xl md:rounded-3xl
shadow-xl shadow-black/8
p-5 md:p-6 lg:p-8
hover:shadow-2xl hover:-translate-y-1
transition-all duration-300
```

Input:
```
w-full px-4 py-3
bg-white
border border-gray-200
rounded-xl
text-gray-800
placeholder:text-gray-400
focus:outline-none focus:ring-2 focus:ring-[#4a9d9a]/30
focus:border-[#4a9d9a]
transition-all duration-200
```

**Forbidden**

Classes: `bg-blue-500`, `bg-blue-600`, `bg-purple-500`, `bg-purple-600`, `text-black`, `rounded-none`, `rounded-sm`, `shadow-[0px_0px_0px`, `border-2`, `border-4`

Patterns: `^rounded-none$`, `^rounded-sm$`, `^text-black$`, `^border-[2-4]$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `sidebar`, `statCard`, `navItem`, `channelCard`


#### Component Examples

**Button**
```html
<button className="px-6 py-3 bg-[#4a9d9a] text-white rounded-xl shadow-[0_4px_12px_rgba(74,157,154,0.2)] hover:bg-[#3d8380] hover:shadow-[0_8px_20px_rgba(74,157,154,0.3)] hover:-translate-y-0.5 active:scale-[0.98] active:translate-y-0 active:shadow-[0_2px_8px_rgba(74,157,154,0.2)] transition-all duration-200 ease-out font-medium">
  Generate Report
</button>
```

**Card**
```html
<div className="group bg-[#faf8f5] rounded-3xl shadow-[0_8px_24px_rgba(0,0,0,0.04)] border border-transparent p-6 md:p-8 hover:shadow-[0_16px_40px_rgba(0,0,0,0.08)] hover:border-gray-100 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer">
  <div className="flex items-center justify-between mb-4">
    <span className="text-gray-500 text-sm font-medium group-hover:text-gray-700 transition-colors duration-200">Total Revenue</span>
    <span className="flex h-3 w-3">
      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#4a9d9a] opacity-20 group-hover:opacity-40" />
      <span className="relative inline-flex rounded-full h-3 w-3 bg-[#4a9d9a]" />
    </span>
  </div>
  {/* 数据联动跳动 */}
  <p className="text-4xl font-bold text-gray-800 mb-2 transform origin-left group-hover:scale-105 group-hover:text-[#4a9d9a] transition-all duration-200 ease-out">
    $142,300
  </p>
  <p className="text-sm text-gray-400 group-hover:text-gray-500 transition-colors">
    <span className="text-[#e8b86d] font-semibold">+12%</span> from last month
  </p>
</div>
```


---


### 霓虹渐变 (Neon Gradient)

**Slug**: `neon-gradient`

#### Description
Vivid gradient cards on dark backgrounds with thick colored borders and neon glow effects. Ideal for tech products, SaaS landing pages, and youth-oriented brands.

#### Design Philosophy
Neon Gradient is a bold, modern design style that uses vivid gradient cards and thick colored borders on dark backgrounds to create a futuristic and tech-forward feel.

Core principles:
- Dark canvas: Deep purple/dark blue backgrounds as the perfect backdrop for neon colors
- Vivid gradients: Purple-pink, cyan-green, yellow-green and other highly saturated gradient fills
- Thick colored borders: 3-4px bright borders for enhanced visual impact
- Glow effects: box-shadow simulating neon light halos
- Floating elements: Stars, rockets, geometric shapes as decorations

Use cases: SaaS products, developer tools, gaming platforms, youth-oriented brands

#### Do's (必须做)
1. Use dark backgrounds bg-[#0f0a1e] or bg-slate-900
2. Cards use gradient fills bg-gradient-to-br from-purple-500 to-pink-500
3. Add thick colored borders border-4 border-yellow-400
4. Use rounded corners rounded-2xl or rounded-3xl
5. Add glow shadows shadow-[0_0_30px_rgba(168,85,247,0.5)]
6. Titles use gradient text or pure white
7. Decorative elements use Lucide icons (Star, Rocket, Sparkles)
8. Buttons use gradient backgrounds + glow effects

#### Don'ts (禁止做)
1. No light backgrounds
2. No low-saturation colors
3. No thin borders border or border-2
4. No gray-toned cards
5. No omitting glow effects
6. No emoji (use Lucide icons instead)

#### AI Rules
```
You are a Neon Gradient design style frontend development expert.

## Core Features

Background:
- Dark: bg-[#0f0a1e] or bg-slate-900
- Can add radial gradient: bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-900/20

Cards:
- Gradient fill: bg-gradient-to-br from-purple-500 to-pink-500
- Thick borders: border-4 border-yellow-400 (contrast color)
- Rounded corners: rounded-2xl or rounded-3xl
- Glow: shadow-[0_0_30px_rgba(168,85,247,0.4)]

Color System:
- Purple: #a855f7 - primary
- Pink: #ec4899 - accent
- Cyan: #22d3ee - contrast
- Yellow: #fbbf24 - border highlight
- Green: #a3e635 - auxiliary

Gradient Combinations:
- Purple-pink: from-purple-500 via-pink-500 to-rose-500
- Cyan-green: from-cyan-400 via-teal-500 to-green-500
- Cyan-pink: from-cyan-400 to-pink-500
- Yellow-green: from-yellow-400 via-green-400 to-cyan-400

Border Colors (contrast principle):
- Purple-pink card -> border-yellow-400 or border-cyan-400
- Cyan-green card -> border-pink-400 or border-yellow-400
- Pink card -> border-cyan-400

## Decorative Elements

Use Lucide React icons:
- Star - with fill-current
- Rocket
- Sparkles
- Zap
- Shield

Position: absolute, scattered across the page
Effects: animate-pulse, animate-bounce

## Interactions

- hover:shadow-[0_0_40px_...] glow enhancement
- hover:scale-105 enlarge
- hover:-translate-y-2 float up
- transition-all duration-300

## Animation & Interaction Rules

- Fluid Luminescence: Gradient backgrounds need bg-[length:200%_auto] and switch bg-position on hover, creating a color flow sliding effect inside the tube.
- Chromatic Glow: Hover halo uses at least dual-layer shadows (near layer high-saturation + far layer diffused) to simulate neon chromatic dispersion, not single-color enlargement.
- Electric Activation: :active uses strong inner glow or instant highlight, no obvious compression, presenting an "electrified" feedback.
- Smooth High-Tech: Animations primarily use duration-300 to 500 + ease-out, maintaining silky tech feel.

## Forbidden

- Light backgrounds
- Low-saturation colors
- Thin borders (border, border-2)
- Gray tones
- Emoji characters (use icons instead)
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-yellow-400`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_0_15px_rgba(168,85,247,0.3)]`
- Medium: `shadow-[0_0_30px_rgba(168,85,247,0.4)]`
- Large: `shadow-[0_0_40px_rgba(168,85,247,0.6)]`
- Hover: `hover:shadow-[0_0_40px_rgba(168,85,247,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold text-white`
- Body: `text-white/80`

**Required Classes**

Button:
```
px-6 py-3 md:px-8 md:py-4
bg-gradient-to-r from-cyan-400 to-pink-500
text-white font-bold
rounded-xl
border-2 border-white/20
shadow-[0_0_20px_rgba(236,72,153,0.5)]
hover:shadow-[0_0_30px_rgba(236,72,153,0.7)]
hover:scale-105
transition-all duration-300
```

Card:
```
bg-gradient-to-br from-purple-500 via-pink-500 to-rose-500
rounded-2xl md:rounded-3xl
border-4 border-yellow-400
p-6 md:p-8
shadow-[0_0_30px_rgba(168,85,247,0.4)]
hover:shadow-[0_0_40px_rgba(168,85,247,0.6)]
hover:-translate-y-2
transition-all duration-300
```

Input:
```
w-full px-5 py-4
bg-white/5
border-2 border-purple-500/50
rounded-xl
text-white
placeholder:text-white/40
focus:outline-none
focus:border-cyan-400
focus:shadow-[0_0_20px_rgba(34,211,238,0.3)]
transition-all duration-300
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-slate-50`, `bg-gray-500`, `text-gray-500`, `rounded-none`, `rounded-sm`, `rounded`, `shadow-sm`

Patterns: `^bg-white$`, `^bg-gray-[0-2]00$`, `^rounded-none$`, `^rounded-sm$`, `^rounded$`, `^border$`, `^border-2$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `nav`, `badge`, `floatingCard`, `decorator`


#### Component Examples

**Button**
```html
{/* 主按钮 - 流体霓虹 */}
<button className="
  px-6 py-3 md:px-8 md:py-4
  bg-gradient-to-r from-cyan-400 via-pink-500 to-cyan-400
  bg-[length:200%_auto] bg-left
  text-white font-bold
  rounded-xl
  border-4 border-white/20
  shadow-[0_0_18px_rgba(236,72,153,0.45)]
  hover:bg-right
  hover:shadow-[0_0_24px_#ec4899,0_0_42px_rgba(34,211,238,0.45)]
  hover:-translate-y-1
  active:scale-[0.98]
  active:shadow-[inset_0_0_20px_rgba(255,255,255,0.8)]
  transition-all duration-500 ease-out
  text-sm md:text-base
">
  开始免费试用
</button>

{/* 次按钮 - 电流描边 */}
<button className="
  px-6 py-3 md:px-8 md:py-4
  bg-transparent
  text-white font-bold
  rounded-xl
  border-4 border-cyan-400
  shadow-[0_0_12px_rgba(34,211,238,0.25)]
  hover:bg-cyan-400/10
  hover:shadow-[0_0_20px_rgba(34,211,238,0.5),0_0_36px_rgba(168,85,247,0.35)]
  transition-all duration-500 ease-out
  text-sm md:text-base
">
  观看演示
</button>
```

**Card**
```html
<div className="
  group relative overflow-hidden
  bg-gradient-to-br from-purple-500 via-pink-500 to-cyan-400
  bg-[length:200%_200%] bg-left
  rounded-2xl md:rounded-3xl
  border-4 border-yellow-400
  p-6 md:p-8
  shadow-[0_0_28px_rgba(168,85,247,0.4)]
  hover:bg-right
  hover:shadow-[0_0_24px_#ec4899,0_0_44px_rgba(34,211,238,0.45)]
  hover:-translate-y-2
  transition-all duration-500 ease-out
">
  <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4 shadow-[0_0_15px_rgba(255,255,255,0.25)] group-hover:scale-110 group-hover:animate-pulse transition-all duration-500">
    <Zap className="w-6 h-6 text-white" />
  </div>
  <h3 className="text-xl md:text-2xl font-bold text-white mb-2">极速响应</h3>
  <p className="text-white/85 text-sm md:text-base">
    渐变流动、双层色散发光与通电图标共同构成高能霓虹反馈。
  </p>
</div>
```


---


### Apple 流动玻璃 (Apple Liquid Glass)

**Slug**: `liquid-glass`

#### Description
Apple's revolutionary design language from WWDC 2025, creating an organic, fluid visual experience beyond traditional frosted glass through SVG refraction filters, rainbow edge halos, fluid morphing animations, and multi-layer glass stacking.

#### Design Philosophy
Liquid Glass is Apple's revolutionary design language released at WWDC 2025, transcending traditional frosted glass effects to create truly organic, fluid visual experiences through light refraction, rainbow edges, and fluid animations.

Core principles:
- Neon stroke text: Titles use text-stroke with cyan glow stroke for a neon effect
- Gradient fill text: Purple-to-magenta gradient fill with 3D shadow for dimensional feel
- Rainbow refraction edges: Edges display prismatic effects with red-orange-yellow-green-cyan-blue-purple spectrum gradients
- Fluid morphing: Border radius produces liquid deformation animations during interaction
- Multi-layer depth: 3+ glass layers stacked for rich spatial hierarchy
- High saturation: backdrop-saturate-180 makes background colors more vivid

## Typography Design Core (Most Important Visual Element)

### Hero Title (Main Title)
Purple gradient fill + thick cyan stroke (3px) + 3D offset shadow:
- background: linear-gradient(to right, #a855f7, #ff2d92, #a855f7)
- -webkit-text-stroke: 3px #4ecdc4
- text-shadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 20px rgba(78,205,196,0.5), 0 0 40px rgba(168,85,247,0.3)
- filter: drop-shadow(0 0 15px rgba(78,205,196,0.4))

### Subtitle (Cyan Glow)
White/cyan text + glow effect (no stroke):
- color: white or gradient cyan
- text-shadow: 0 0 20px rgba(78,205,196,0.8), 0 0 40px rgba(78,205,196,0.4), 2px 2px 0 rgba(0,0,0,0.3)

### h1/h2 Titles
Thinner stroke (2px) + glow + slight 3D:
- -webkit-text-stroke: 2px #4ecdc4
- text-shadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 15px rgba(78,205,196,0.4)

### Body Text
High-contrast white for readability:
- color: text-white/80 to text-white/90

Differences from Glassmorphism:
| Feature | Glassmorphism | Liquid Glass |
|---------|---------------|--------------|
| Border | border-white/20 | Rainbow gradient border |
| Blur | blur-2xl | blur-3xl + saturate-180 |
| Animation | Simple transitions | Liquid morph |
| Depth | Single layer | Multi-layer stacking |
| Text | Plain white | Gradient + thick stroke + 3D shadow |
| Stroke | None | 3px cyan neon stroke |
| Shadow | Standard drop | 3D offset + glow combo |

#### Do's (必须做)
1. Hero titles use thick stroke -webkit-text-stroke: 3px #4ecdc4
2. Hero titles use 3D offset shadow text-shadow: 4px 4px 0 rgba(0,0,0,0.5)
3. Hero titles use gradient fill bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7]
4. Subtitles use cyan glow text-shadow: 0 0 20px rgba(78, 205, 196, 0.8)
5. Use ultra-high blur values backdrop-blur-[40px] or backdrop-blur-3xl
6. Add saturation enhancement backdrop-saturate-[1.8] or backdrop-saturate-200
7. Use rainbow gradient borders to simulate light refraction effects
8. Use extra-large rounded corners rounded-3xl or rounded-[24px]
9. Use fluid animations transition-all duration-500 ease-out

#### Don'ts (禁止做)
1. No plain white titles (must use gradient + thick stroke + 3D shadow)
2. No omitting 3D offset shadow (4px 4px is mandatory)
3. No thin strokes (Hero must be 3px, h1/h2 at least 2px)
4. No omitting text glow effects (loses neon feel)
5. No low blur values backdrop-blur-sm (too weak)
6. No omitting saturation enhancement (colors will appear dull)
7. No right angles or small rounded corners (rounded-none, rounded-sm)
8. No fast transitions (duration-100, duration-150)

#### AI Rules
```
You are an Apple Liquid Glass design style frontend development expert. This is Apple's brand-new design language released at WWDC 2025. All generated code must strictly follow these constraints:

## Typography Design (Most Important!)

### Hero Title - Must use these styles:
- font-black with gradient fill from-[#a855f7] via-[#ff2d92] to-[#a855f7]
- WebkitTextStroke: 3px #4ecdc4
- textShadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 25px rgba(78,205,196,0.6), 0 0 50px rgba(168,85,247,0.4)
- filter: drop-shadow(0 0 15px rgba(78,205,196,0.4))

### Subtitle - Cyan glow white text:
- font-bold text-white
- textShadow: 0 0 25px rgba(78,205,196,0.9), 0 0 50px rgba(78,205,196,0.5), 3px 3px 0 rgba(0,0,0,0.4)

### h2/h3 Titles - Thinner stroke (2px):
- WebkitTextStroke: 2px #4ecdc4
- textShadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 15px rgba(78,205,196,0.5)

## Absolutely Forbidden

- Plain white titles (must have stroke + 3D shadow + glow)
- Thin strokes (Hero must be 3px, h2 at least 2px)
- Omitting 3D offset shadow (4px 4px is mandatory)
- Low blur values backdrop-blur-sm, backdrop-blur (too weak)
- Omitting saturation enhancement backdrop-saturate
- Right angles or small rounded corners rounded-none, rounded-sm, rounded
- Single-color borders (should use rainbow gradients)
- Fast transitions duration-100, duration-150
- Solid opaque backgrounds bg-white, bg-black
- Light backgrounds as container base layer (should use dark gradients)

## Must Follow

- Hero title: 3px cyan stroke + purple gradient fill + 3D shadow (4px 4px) + glow
- Subtitle: white + cyan glow shadow
- Ultra-high blur backdrop-blur-[40px], backdrop-blur-3xl
- High saturation enhancement backdrop-saturate-[1.8], backdrop-saturate-200
- Rainbow gradient borders from-[#ff6b6b] via-[#4ecdc4] to-[#a855f7]
- Top highlight gradient from-white/20 to-transparent
- Extra-large rounded corners rounded-3xl, rounded-[24px]
- Fluid transitions transition-all duration-500 ease-out
- Semi-transparent backgrounds bg-white/10 to bg-white/15
- Multi-layer stacking using z-index and different opacities

## Rainbow Colors

Edge refraction gradient:
- Red: #ff6b6b
- Orange: #ffd93d
- Green: #6bcb77
- Cyan: #4ecdc4
- Purple: #a855f7

Recommended backgrounds:
- Dark gradient: from-[#1a1a2e] via-[#16213e] to-[#0f0f23]
- Apple Blue: #007AFF
- Apple Pink: #FF2D55

## Layer Structure

1. Base: Dark gradient background
2. Middle: Liquid glass container (backdrop-blur-[40px] backdrop-saturate-[1.8])
3. Border layer: Rainbow gradient pseudo-element before:
4. Highlight layer: Top gradient pseudo-element after:
5. Top: Content elements

## Core Effects

1. Rainbow border: before pseudo-element + gradient background + p-[1px]
2. Top highlight: after pseudo-element + white-to-transparent gradient
3. Liquid animation: animation: liquid-morph 8s ease-in-out infinite
4. Glow effect: hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]
5. Compression feedback: active:scale-[0.98]

## Animation & Interaction Rules

- Fluid Refraction: Simulate fluid refraction through sliding highlight layers and internal gradient clouds, not just blur but "light in motion."
- Spatial Push: Hover needs slight forward push (scale about 1.01-1.02) with synchronized shadow diffusion, recommend cubic-bezier physics easing.
- Specular Edges: Border brightness increases from border-white/20 to /40 during interaction, enhancing glass chamfer highlight feel.
- Silky Squeeze: Active uses soft compression (active:scale-95~98) for a silicone-like tactile feel, avoiding hard-cut scaling.

## Self-Check

After each code generation, verify:
1. Hero title has 3px cyan stroke and 3D offset shadow
2. Subtitle has cyan glow effect
3. Has dark gradient background container
4. Has backdrop-blur-[40px] or backdrop-blur-3xl
5. Has backdrop-saturate-[1.8] or higher
6. Has rainbow gradient border
7. Has top highlight bar
8. Uses rounded-[24px] or larger corners
9. Transition time >= 500ms
10. Text readability is good
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/20`
- Radius: `rounded-[24px]`

**Shadow**
- Small: `shadow-lg shadow-black/5`
- Medium: `shadow-xl shadow-black/10`
- Large: `shadow-2xl shadow-black/15`
- Hover: `hover:shadow-xl hover:shadow-black/15`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-out`

**Typography**
- Heading: `font-black bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7] bg-clip-text text-transparent`
- Body: `text-white/80`

**Required Classes**

Button:
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
rounded-[20px]
text-white
before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10
before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10
after:bg-gradient-to-b after:from-white/20 after:to-transparent
hover:bg-white/15 hover:shadow-[0_0_20px_rgba(168,85,247,0.3)]
transition-all duration-500 ease-out
```

Card:
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
rounded-[24px]
shadow-xl shadow-black/10
before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10
before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10
after:bg-gradient-to-b after:from-white/15 after:to-transparent
[box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)]
```

Input:
```
bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
border border-white/20
rounded-[16px]
text-white placeholder-white/50
focus:outline-none focus:bg-white/15
focus:border-transparent
focus:shadow-[0_0_0_2px_rgba(168,85,247,0.5),0_0_20px_rgba(168,85,247,0.2)]
transition-all duration-500 ease-out
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `rounded`, `bg-white`, `bg-black`, `bg-gray-100`, `bg-gray-900`, `shadow-[0px_0px_0px`, `backdrop-blur-sm`, `backdrop-blur`

Patterns: `^rounded-none`, `^rounded-sm$`, `^rounded$`, `^bg-(?!white\/|gradient|transparent)`, `^border-(?!white\/|transparent)`, `^backdrop-blur$`, `^backdrop-blur-sm$`, `^duration-(100|150|200)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `glassPanel`, `refractionBadge`, `glassStack`, `nav`, `toggle`, `slider`


#### Component Examples

**Button**
```html
<button className="
  group relative overflow-hidden px-8 py-4
  bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
  rounded-[20px]
  text-white font-medium
  before:absolute before:inset-0 before:-z-10 before:rounded-[20px]
  before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
  before:p-[1px]
  after:absolute after:inset-[1px] after:-z-10 after:rounded-[19px] after:bg-white/10
  border border-white/20
  shadow-[0_8px_24px_rgba(0,0,0,0.12)]
  hover:bg-white/15 hover:border-white/40
  hover:shadow-[0_18px_42px_rgba(0,0,0,0.22)]
  hover:scale-[1.02]
  active:scale-95
  transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
">
  <span className="pointer-events-none absolute inset-0 -translate-x-[130%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-[130%]" />
  <span className="relative z-10">Spatial UI</span>
</button>
```

**Card**
```html
<div className="
  group relative overflow-hidden p-6 md:p-8
  bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8]
  rounded-[24px]
  border border-white/20
  shadow-[0_12px_30px_rgba(0,0,0,0.18)]
  before:absolute before:inset-0 before:rounded-[24px]
  before:p-[1px] before:-z-10
  before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7]
  after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10
  after:bg-gradient-to-b after:from-white/15 after:to-transparent
  [box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)]
  hover:bg-white/15 hover:border-white/40
  hover:-translate-y-2 hover:scale-[1.01]
  hover:shadow-[0_28px_64px_rgba(0,0,0,0.35)]
  transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)]
">
  <div className="pointer-events-none absolute -inset-1/2 bg-gradient-to-br from-[#ff2d55]/25 via-[#a855f7]/20 to-[#007aff]/25 blur-3xl opacity-45 transition-all duration-1000 ease-out group-hover:rotate-12 group-hover:scale-110" />
  <div className="pointer-events-none absolute inset-0 -translate-x-[130%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 ease-out group-hover:translate-x-[130%]" />

  <div className="relative z-10">
  <h3 className="text-xl font-semibold text-white mb-2">
    Liquid Glass Card
  </h3>
  <p className="text-white/80">
    多层玻璃体积感与流体折射叠加，营造空间计算般的前推深度。
  </p>
  </div>
</div>
```


---


### 北欧极简风 (Scandinavian Minimalism)

**Slug**: `scandinavian`

#### Description
Warm minimalist design rooted in Scandinavian tradition, emphasizing natural materials, generous whitespace, wood tones, and Hygge living aesthetics for a serene, cozy visual experience.

#### Design Philosophy
Scandinavian Minimalism originates from the design traditions of Nordic countries such as Denmark, Sweden, Norway, and Finland.

Core principles:
- Less is more: every element has a reason to exist
- Connection to nature: using tones of natural materials like wood and linen
- Hygge spirit: creating a warm, comfortable, and happy atmosphere
- Beauty in function: a perfect balance of utility and aesthetics
- Worship of light: generous whitespace simulates Nordic natural light

#### Do's (必须做)
1. Use warm gray-white backgrounds bg-[#f5f0eb]
2. Choose natural wood tone colors text-[#a89279]
3. Create breathing room with generous whitespace py-28 px-6
4. Use delicate font weights font-extralight font-light
5. Minimal borders and dividers border-[#d4cdc5]/40
6. Smooth, slow transition animations transition-colors duration-500
7. Interactions should focus on brightness and color temperature adjustments, simulating the warm touch of wool and wood
8. Hover hints should use subtle border or background changes, avoiding strong shadows and obvious displacement
9. Secondary text should slowly brighten on hover, enhancing typographic breathing rhythm

#### Don'ts (禁止做)
1. Do not use highly saturated vivid colors
2. Do not use heavy borders and shadows
3. Do not densely arrange elements -- maintain ample whitespace
4. Do not use decorative fonts or oversized type
5. Do not use bounce, spring, or fast scale animations
6. Do not use strong press feedback (active state allows only subtle brightness changes)

#### AI Rules
```
You are designing in Scandinavian Minimalism style.
- Use warm neutral tones: birch white #f5f0eb, charcoal #3d3d3d, wool gray #d4cdc5
- Accent with natural colors: pine green #5a7a6b, fjord blue #7ba0b8
- Font weights: extralight and light only
- Generous whitespace and breathing room
- Subtle borders and transitions
- No bright colors, no heavy shadows
- Lowercase text for a calm, approachable feel

Animation & Interaction Rules:
- Warm Texture: Animations should convey natural material touch, prioritizing brightness/color temperature adjustments over bouncing and scaling.
- Morning Fog: Transitions should use duration-700 + ease-in-out, revealing slowly like morning mist dissipating.
- Silent Elevation: Hover hints should prioritize subtle border and background changes, keeping shadows extremely light or omitted.
- No Impact: Active state should only provide slight brightness feedback, with no noticeable deformation.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4cdc5]/40`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-500`

**Typography**
- Heading: `font-light tracking-wide`
- Body: `font-light`

**Required Classes**

Button:
```
transition-colors
duration-300
```

Card:
```
rounded-sm
transition-colors
```

Input:
```
bg-transparent
focus:outline-none
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-slate-900`, `font-black`, `font-extrabold`, `font-bold`, `border-4`, `border-[3px]`, `border-[4px]`, `shadow-[4px_4px`

Patterns: `^bg-(?:black|gray-9|slate-9)`, `^font-(?:black|extrabold|bold)$`, `^border-(?:[3-9]|\d{2})`, `^shadow-\[\d+px_\d+px_0`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3.5
  bg-[#3d3d3d] text-[#f5f0eb]
  font-light text-sm tracking-wide
  rounded-sm
  hover:bg-[#5a7a6b]
  hover:brightness-95
  active:bg-[#4a6358]
  transition-all duration-700 ease-in-out
">
  explore
</button>
```

**Card**
```html
<div className="
  group p-10
  bg-white/60
  rounded-sm
  border border-[#d4cdc5]/30
  hover:border-[#d4cdc5]/80
  hover:bg-[#fcfaf8]
  transition-all duration-700 ease-in-out
">
  <h3 className="text-xl font-light text-[#3d3d3d] mb-4 tracking-wide group-hover:text-[#5a7a6b] transition-colors duration-700">
    Hygge Moment
  </h3>
  <p className="text-sm font-light text-[#a89279] leading-relaxed group-hover:text-[#8a7660] transition-colors duration-700">
    Embracing the quiet comfort of simple things with balanced light, texture, and breath.
  </p>
</div>
```


---


### 赛璐璐动画风 (Cel Shading)

**Slug**: `cel-shading`

#### Description
A rendering style inspired by traditional cel animation, featuring bold black outlines, flat color fills, hard shadows without gradients, and vivid saturated colors full of cartoon and game energy.

#### Design Philosophy
Cel Shading (Toon Shading) simulates the visual effect of traditional hand-drawn animation.

Core principles:
- Bold black outlines: all elements have distinct 3px black borders
- Flat color fills: using solid colors with no gradients
- Hard shadows: shadows are solid offsets, not blurred
- High saturation: vivid colors with strong contrast
- Game-like UI: buttons and cards feel lively like game menus
- Frame-skipping feel: interactions are extremely brief, simulating keyframes rather than smooth transitions

#### Do's (必须做)
1. Use 3px bold black borders on all elements border-[3px] border-[#1a1a2e]
2. Hard shadow effect shadow-[3px_3px_0_#1a1a2e]
3. Use solid color fills, no gradients bg-[#e63946]
4. Bold fonts font-black uppercase
5. Click interaction: shadow shrinks + offset hover:translate-x-0.5
6. High-saturation palette: red, blue, green, yellow
7. Use extremely short duration-75 to simulate animation frame-skipping
8. On active, apply scale-x-110 scale-y-90 for Squash & Stretch
9. On hover, a white highlight diagonal stripe sweeps across the button

#### Don'ts (禁止做)
1. Do not use gradient colors (maintain flat color fills)
2. Do not use blurred shadows shadow-lg
3. Do not use thin borders border
4. Do not use low-saturation or grayish tones
5. Do not use smooth transitions above duration-300 (too soft)
6. Do not use ease-in-out (cartoon physics uses linear or ease-in)

#### AI Rules
```
You are designing in Cel Shading (Toon Shading) style.
- All elements MUST have 3px solid black borders: border-[3px] border-[#1a1a2e]
- Use hard offset shadows ONLY: shadow-[3px_3px_0_#1a1a2e] or shadow-[4px_4px_0_#1a1a2e]
- NO gradients, NO blur shadows, NO soft edges
- Flat saturated colors: #e63946, #4ea8de, #2ecc71, #f1c40f
- Text is always bold/black weight and uppercase
- Light background #fafaf5 with dark ink outlines
- Think "video game menu" or "cartoon UI"

Animation & Interaction Rules:
- Anime Physics: Use extremely short transitions (duration-75) to simulate 2D animation keyframes. Avoid silky smooth easing.
- Squash & Stretch: On :active, use cartoon physics -- active:scale-x-110 active:scale-y-90 -- combined with translate toward click direction.
- Zero-Blur Impact: On :active, hard shadow must instantly snap to zero (active:shadow-none), creating a strong physical "hit" sensation.
- Toon Highlight: On hover, a white diagonal stripe (bg-white/30 -skew-x-12) sweeps across the button via translate-x from off-screen to [200%], simulating cel shading's hard specular highlight.
- Hover Lift: Elements can hover:-translate-y-1 with expanded shadow to "charge up" before clicking.
```


#### Design Tokens

**Border**
- Width: `border-[3px]`
- Color: `border-[#1a1a2e]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0_#1a1a2e]`
- Medium: `shadow-[3px_3px_0_#1a1a2e]`
- Large: `shadow-[4px_4px_0_#1a1a2e]`
- Hover: `hover:shadow-[1px_1px_0_#1a1a2e]`

**Interaction**
- Hover Translate: `hover:translate-x-0.5 hover:translate-y-0.5`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-black uppercase tracking-tight`
- Body: `font-bold`

**Required Classes**

Button:
```
border-[3px]
border-[#1a1a2e]
font-black
uppercase
```

Card:
```
border-[3px]
border-[#1a1a2e]
shadow-[3px_3px_0_#1a1a2e]
```

Input:
```
border-[3px]
border-[#1a1a2e]
focus:outline-none
```

**Forbidden**

Classes: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `bg-gradient-to-r`, `bg-gradient-to-b`, `bg-gradient-to-br`, `rounded-lg`, `rounded-xl`, `rounded-2xl`

Patterns: `^shadow-(?:sm|md|lg|xl|2xl)$`, `^bg-gradient`, `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^font-(?:light|extralight|thin)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-6 py-3
  bg-[#e63946] text-white
  font-black uppercase text-sm
  border-[3px] border-[#1a1a2e]
  shadow-[4px_4px_0_#1a1a2e]
  hover:bg-[#ff4d5a]
  hover:-translate-y-1
  hover:shadow-[6px_6px_0_#1a1a2e]
  active:scale-x-110 active:scale-y-90
  active:translate-x-1 active:translate-y-2
  active:shadow-none
  transition-all duration-75
  overflow-hidden
">
  <div className="absolute inset-0 w-8 bg-white/30 -skew-x-12 -translate-x-12 group-hover:translate-x-[200%] transition-transform duration-300 ease-linear" />
  <span className="relative z-10 block group-active:translate-y-0.5 transition-transform duration-75">Attack!</span>
</button>
```

**Card**
```html
<div className="
  p-6 bg-white
  border-[3px] border-[#1a1a2e]
  shadow-[4px_4px_0_#1a1a2e]
  hover:shadow-[6px_6px_0_#1a1a2e]
  hover:-translate-x-0.5 hover:-translate-y-0.5
  transition-all duration-75
">
  <h3 className="text-xl font-black text-[#1a1a2e] uppercase mb-2">Title</h3>
  <p className="font-bold text-[#1a1a2e]/60">Content</p>
</div>
```


---


### 电影视频首屏 (Cinematic Video Hero)

**Slug**: `cinematic-video-hero`

#### Description
A cinematic opener led by a short looping video. A poster frame paints first as the LCP; the muted video autoplays and loops only once in view; text sits on a readability scrim. Dark grading and slow motion build a trailer-like immersive entrance.

#### Design Philosophy
The cinematic-video-hero creed: the opener is a trailer, not a slide. Video injects a sense of time into a static page — light flowing, mist drifting, color breathing — but it must first yield to performance: the poster paints instantly, the video slips in behind it.

Core principles:
- Poster first: the poster frame is the LCP and must be instantly visible (AVIF/WebP, small and sharp). The video is progressive enhancement, never a first-paint dependency
- Video is atmosphere, not content: the background video carries mood and motion; critical information always lives in the text layer, never in the video (which may not play)
- Muted autoplay loop: muted + autoplay + loop + playsInline (silence is what allows autoplay); a short loop (6-10s) seams seamlessly, never a jarring jump-cut
- Readability scrim: text over video always sits on a gradient darkening for 4.5:1; however much the video moves, it never eats the text
- Dark cinematic grade: near-black base + low-saturation warm/cool clash + one warm-gold accent (#E4C063), like graded film
- Slow motion: cinematic slowness, not flashy speed. Motion serves mood; fast induces nausea

Design principles:
- Performance line: video preload="none", load/play only in view (IntersectionObserver), poster attribute as the floor; explicit aspect-ratio to prevent CLS; no autoplay video below the hero
- Data and fallback: honor prefers-reduced-motion (no autoplay, show the poster still), honor Save-Data (skip the video), mobile may show poster only
- Formats: prefer webm (VP9/AV1) + mp4 (H.264) dual sources; always pair with a poster
- Accessibility: decorative video gets aria-hidden; informational video gets <track> captions; give users a pause affordance

#### Do's (必须做)
1. Poster frame as LCP: poster attribute + AVIF/WebP, small and sharp, instant
2. Video muted + autoplay + loop + playsInline, a silent seamless short loop (6-10s)
3. Video preload="none"; load()/play() only in view via IntersectionObserver
4. Always scrim text over video with a gradient darkening for 4.5:1 contrast
5. Dark cinematic grade: near-black #05060A base with one warm-gold #E4C063 accent
6. Explicit aspect-ratio or fixed container height to prevent CLS
7. Dual-source: webm (VP9) + mp4 (H.264), always paired with a poster
8. Slow, cinematic motion; all critical information in the text layer, never in the video
9. Under prefers-reduced-motion / Save-Data, do not autoplay — show the poster still

#### Don'ts (禁止做)
1. Never make the video the LCP dependency or omit the poster (blank first paint, LCP blowup)
2. Never preload="auto" or auto-load a large video (data + performance disaster)
3. Never put critical information inside the video (it may not play or may be downgraded)
4. Never autoplay with sound (browsers block it and it disturbs users)
5. Never place text directly on video with no scrim
6. Never use fast / jump-cut motion or a loop that does not seam
7. Never ignore prefers-reduced-motion or a mobile fallback

#### AI Rules
```
# Cinematic Video Hero Design System

You are an expert frontend developer specializing in cinematic video-hero interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Cinematic Video Hero
- **Essence**: The opener is a trailer; a short looping video injects a sense of time, but the poster leads for performance
- **Mood**: Filmic, atmospheric, premium, trailer-like
- **Inspiration**: Film studio landing pages, product launch teasers, streaming-service hero reels

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Video as the LCP dependency / no poster | Blank first paint, LCP blowup |
| preload="auto" or auto-loading a large video | Data + performance disaster |
| Critical information inside the video | It may not play or may be downgraded |
| Autoplay with sound | Browsers block it and it disturbs users |
| Text directly on video with no scrim | Unreadable, fails contrast |
| Fast / jump-cut motion or a non-seamless loop | Breaks the cinematic feel |
| Ignoring prefers-reduced-motion or a mobile fallback | Accessibility + data fail |

## Required

### Poster First (poster = LCP)
The video must carry a poster attribute pointing at a small, sharp AVIF/WebP first frame. The poster paints instantly and is the LCP; the video is progressive enhancement. Set an explicit aspect-ratio (e.g. h-screen or aspect-video) to prevent CLS.

### Video Loading and Playback
- Attributes: muted loop playsInline preload="none" + poster
- Play only in view (IntersectionObserver), never load on page load:
```js
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(() => {}); io.disconnect(); }
}, { threshold: 0.25 });
io.observe(v);
```
- Dual source: `<source src="x.webm" type="video/webm"><source src="x.mp4" type="video/mp4">`

### Readability Scrim
Before text over video, lay a gradient darkening for 4.5:1:
`linear-gradient(to top, rgba(5,6,10,0.78), rgba(5,6,10,0.2) 45%, rgba(5,6,10,0.45))`

### Dark Cinematic Grade
- Near-black base #05060A / raised surface #141821 / paper text #F3EFE8
- Text on footage: text-white + white/80 + white/60
- One warm gold #E4C063: primary CTA, chapter kickers, highlights; steel #9AA6B8 for secondary
- Optional: cv-letterbox top/bottom black bars for a widescreen frame

### Fallbacks (critical)
- prefers-reduced-motion: do not autoplay, show the poster still, offer a play button for opt-in
- Save-Data (navigator.connection.saveData): skip the video entirely, show poster only
- Mobile may show poster only (saves data + battery)

### Accessibility
- Decorative video aria-hidden="true"; informational video gets <track kind="captions">
- Provide a pause/play affordance; never strip user control

## Self-Verification Checklist

- [ ] Video has a poster and the poster is the LCP, instant
- [ ] preload="none" + play only in view (IntersectionObserver)
- [ ] muted loop playsInline, a silent seamless short loop
- [ ] Text over video sits on a scrim and passes contrast
- [ ] Critical information is in the text layer, not the video
- [ ] prefers-reduced-motion / Save-Data fallbacks present
- [ ] Dark grade + single warm-gold accent + CLS prevented
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/20`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(0,0,0,0.4)]`
- Medium: `shadow-[0_10px_30px_rgba(0,0,0,0.5)]`
- Large: `shadow-[0_28px_70px_rgba(0,0,0,0.6)]`
- Hover: `hover:shadow-[0_16px_44px_rgba(0,0,0,0.55)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-semibold text-white tracking-tight`
- Body: `text-white/80 leading-relaxed`

**Required Classes**

Button:
```
rounded-full
transition-all duration-300
active:scale-[0.98]
```

Card:
```
relative overflow-hidden
rounded-xl
```

Input:
```
bg-white/10 backdrop-blur-md
border border-white/25
rounded-full
text-white placeholder-white/50
focus:outline-none focus:border-[#E4C063]/70 focus:bg-white/15
transition-all duration-300
```

**Forbidden**

Classes: `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `rounded-none`, `duration-100`

Patterns: `^bg-gradient-to-r$`, `^from-(indigo|purple|pink|fuchsia)-`, `^rounded-none$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center gap-2
  px-7 py-3.5 rounded-full
  bg-[#E4C063] text-[#05060A] font-semibold
  hover:bg-[#efce78] active:scale-[0.98]
  transition-all duration-300
">
  Watch the film
  <span aria-hidden>&#9654;</span>
</button>

<button className="inline-flex items-center gap-2 px-7 py-3.5 rounded-full
  bg-white/10 backdrop-blur-md border border-white/25 text-white
  hover:bg-white/18 transition-all duration-300">
  Learn more
</button>
```

**Card**
```html
<article className="relative aspect-video overflow-hidden rounded-xl">
  <img src="/poster.avif" alt="Aurora over the range" loading="lazy" decoding="async"
    className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-gradient-to-t from-black/75 to-transparent" />
  <div className="absolute bottom-0 p-5">
    <p className="text-xs uppercase tracking-widest text-[#E4C063] mb-1">Scene 01</p>
    <h3 className="text-white text-lg font-semibold">The long dissolve</h3>
  </div>
</article>
```


---


### 侘寂风 (Wabi-Sabi)

**Slug**: `wabi-sabi`

#### Description
A digital expression of Japanese Wabi-Sabi aesthetics, celebrating the beauty of imperfection, the elegance of natural aging, and the zen of extreme whitespace, conveyed through ink tones, tea hues, and paper textures.

#### Design Philosophy
Wabi-Sabi is the deepest philosophical concept in Japanese traditional aesthetics.

Core principles:
- Beauty of imperfection: cracks, wear, and irregularity are gifts bestowed by time
- Ma (space): whitespace is not emptiness, but meaningful space
- Natural decay: the process of growth, aging, and fading is itself beautiful
- Depth in simplicity: discovering profundity in ultimate simplicity
- Ichigo ichie: this moment is the only one, never to be repeated

#### Do's (必须做)
1. Use warm paper-toned backgrounds bg-[#f7f3ec] bg-[#f2ede4]
2. Ink color as primary text color text-[#3a3a3a]
3. Extreme whitespace and spacing py-32 px-8
4. Use serif fonts font-serif
5. Ultra-thin divider lines border-[#d4cdc5]/30
6. Slow fade-in animations transition-opacity duration-1000

#### Don'ts (禁止做)
1. Do not use vivid colors or high saturation
2. Do not use heavy shadows or thick borders
3. Do not densely arrange elements
4. Do not use decorative animations or bounce effects

#### AI Rules
```
You are designing in Wabi-Sabi style.
- Warm paper-toned backgrounds: #f7f3ec, #f2ede4
- Ink-like text color: #3a3a3a
- Muted natural accents: moss green #8a9a7b, tea brown #b5a78c
- Always use serif fonts (font-serif)
- Extreme whitespace: py-32, large gaps between sections
- Ultra-thin borders: border-[#d4cdc5]/30
- Slow transitions: duration-500 or longer
- No bold colors, no heavy shadows, no decorative elements
- Embrace asymmetry and imperfection
- Think "zen garden" and "ceramic pottery"

Animation & Interaction Rules:
- Absolute Stillness: The core of Wabi-Sabi is tranquility. Absolutely no translate (displacement), scale (scaling), or spring animations. Elements must remain still like stones.
- Shadowless Void: Abandon all box-shadow for modern depth. Layer hierarchy is expressed only through generous whitespace and very faint border lines.
- Dust Breathing: All interactions must be extremely slow. Use duration-1000 or longer transitions (e.g., duration-[1500ms]) with ease-in-out. Let background color deepening look like natural light slowly dimming.
- Ink Fading: On hover, text color should not change abruptly but transition through opacity changes (e.g., from opacity-60 slowly to opacity-100), simulating ink appearing through time.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-opacity duration-1000`

**Typography**
- Heading: `font-serif font-light tracking-wide`
- Body: `font-serif font-light`

**Required Classes**

Button:
```
bg-transparent
transition-colors
duration-500
```

Card:
```
transition-colors
```

Input:
```
bg-transparent
focus:outline-none
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-slate-900`, `font-black`, `font-extrabold`, `font-bold`, `border-4`, `border-[3px]`, `border-[4px]`, `shadow-lg`

Patterns: `^bg-(?:black|gray-9|slate-9)`, `^font-(?:black|extrabold|bold)$`, `^shadow-(?:lg|xl|2xl)$`, `^bg-gradient`, `^animate-(?:bounce|spin|pulse)$`, `^text-(?:[6-9]xl|\dxl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-3 bg-transparent text-[#3a3a3a] font-serif text-sm tracking-[0.2em] border-b border-[#d4cdc5]/50 hover:border-[#3a3a3a] hover:bg-[#3a3a3a]/5 active:bg-[#3a3a3a]/10 transition-all duration-1000 ease-in-out">
  Enter Silence
</button>
```

**Card**
```html
<div className="group p-12 bg-[#f2ede4] border-l border-[#d4cdc5]/30 hover:border-[#8a9a7b]/40 hover:bg-[#efebe1] transition-all duration-[1500ms] ease-in-out cursor-default">
  <h3 className="text-xl font-serif font-light text-[#3a3a3a]/70 mb-6 tracking-widest group-hover:text-[#3a3a3a] transition-colors duration-1000">
    Imperfect Beauty
  </h3>
  <p className="text-sm text-[#8a8278] font-serif leading-loose group-hover:text-[#5c564f] transition-colors duration-1000">
    Nothing lasts, nothing is finished, and nothing is perfect. The aesthetic of the unfinished leaves space for the mind to wander.
  </p>
</div>
```


---


### 枯山水 (Zen Garden)

**Slug**: `zen-garden`

#### Description
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

#### Do's (必须做)
1. Use sand-white backgrounds bg-[#f5f3ee]
2. Moss green as accent color text-[#8a9a7b]
3. Extreme whitespace with generous vertical spacing py-32
4. Delicate natural borders border-[#c4bba8]/30
5. Serif fonts with light weight font-serif font-light
6. Very slow transition animations transition duration-700

#### Don'ts (禁止做)
1. Do not use bright vivid colors
2. Do not use heavy borders or thick lines
3. Do not use fast animations or bounce effects
4. Do not densely arrange elements -- whitespace is the core

#### AI 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.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-sm`
- Large: `shadow-sm`
- Hover: `hover:shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-700`

**Typography**
- Heading: `font-serif font-light tracking-wide`
- Body: `font-serif font-light`

**Required Classes**

Button:
```
bg-transparent
transition-colors
duration-700
```

Card:
```
transition-colors
```

Input:
```
bg-transparent
focus:outline-none
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-slate-900`, `font-black`, `font-extrabold`, `font-bold`, `border-2`, `border-4`, `border-[3px]`, `border-[4px]`

Patterns: `^bg-(?:black|gray-9|slate-9)`, `^font-(?:black|extrabold|bold)$`, `^shadow-(?:lg|xl|2xl)$`, `^bg-gradient`, `^animate-(?:bounce|spin|pulse)$`, `^text-(?:[6-9]xl|\dxl)$`, `^border-(?:[2-9]|\[\d+px\])$`, `^bg-(?:red|blue|yellow|pink|orange|purple)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-transparent
  text-[#4a5548]/70 font-serif text-sm tracking-widest
  border border-transparent
  hover:border-[#8a9a7b]/30
  hover:text-[#4a5548]
  hover:bg-[#8a9a7b]/5
  hover:shadow-[0_0_20px_rgba(138,154,123,0.05)]
  focus-visible:outline-none focus-visible:border-[#8a9a7b]/40
  transition-all duration-1000 ease-in-out
">
  Enter Quietude
</button>
```

**Card**
```html
<div className="
  group p-12
  bg-[#f5f3ee]
  border-l border-[#8a9a7b]/30
  hover:border-[#8a9a7b]/50
  transition-colors duration-1000 ease-in-out
">
  <h3 className="text-xl font-serif font-light text-[#4a5548]/60 group-hover:text-[#4a5548] tracking-widest mb-6 transition-colors duration-1000 ease-in-out">
    静 寂
  </h3>
  <p className="text-[#4a5548]/50 font-serif font-light leading-loose group-hover:text-[#4a5548]/80 transition-colors duration-1000 ease-in-out delay-100">
    Listen to the sound of snow falling on moss. The mind becomes clear when the water is still.
  </p>
</div>
```


---


### 科幻HUD (Sci-Fi HUD)

**Slug**: `sci-fi-hud`

#### Description
A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experience of operating high-tech equipment.

#### Design Philosophy
Sci-Fi HUD style draws from futuristic tech interfaces in movies and games, where "information IS the interface."

Design principles:
- Deep space background: extremely deep blue-gray backgrounds simulate a space command room
- Glowing geometry: all elements use cyan/teal glowing borders to create a holographic projection feel
- Information density: layering and modularization maintain readability of large amounts of real-time data
- Real-time dynamics: radar sweeps, data stream scrolling, and status pulses convey a "system running" feeling
- Translucent materials: panels use glassmorphism effects with backdrop blur

#### Do's (必须做)
1. Use deep space backgrounds bg-[#020617] or bg-slate-950
2. Panels use translucent bg-slate-900/85 backdrop-blur-xl
3. Borders use glow effects border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
4. Text uses cool tones text-[#E5F2FF] or text-slate-300
5. Use font-mono uppercase tracking-wider for a tech feel
6. Corner decorations use L-shaped borders border-t-2 border-l-2
7. Status indicators use glowing pulse animations
8. Progress bars use gradient fills with glow sweep effects
9. On interaction, corner brackets perform lock displacement (contract/expand) for Tactical Lock feel
10. Scanlines on hover increase contrast or shift, simulating data overload
11. Active state uses bright inner glow feedback for holographic click rather than gravity sink

#### Don'ts (禁止做)
1. Do not use light/white backgrounds
2. Do not use warm tones (orange, pink, etc. -- warm colors only for warning states)
3. Do not use regular shadows shadow-md (must use glow shadows)
4. Do not use serif fonts
5. Do not use cute/rounded design language
6. Do not use large border-radius rounded-2xl+
7. Do not let panel interactions only deepen regular shadows (lacks system activation feel)
8. Do not let status lights remain static (HUD requires continuous pulse or flicker)

#### AI Rules
```
STYLE: Sci-Fi HUD
TYPE: Futuristic command center interface

MUST USE:
- Deep space background: bg-[#020617] or bg-slate-950
- Semi-transparent panels: bg-slate-900/85 backdrop-blur-xl
- Cyan glow borders: border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
- L-shaped corner decorations on important panels
- font-mono uppercase tracking-wider for labels
- Status indicators with pulse animation
- Scanline overlays for tech atmosphere
- Progress bars with gradient fill and glow

MUST AVOID:
- Light/white backgrounds
- Warm color schemes (except for warning/danger status)
- Regular shadows (shadow-md, shadow-lg)
- Serif fonts
- Cute/rounded design language
- Large border-radius (rounded-2xl+)

Animation & Interaction Rules:
- Tactical Lock: On hover, L-shaped corner brackets perform short lock displacement (duration-150).
- Data Overload: On hover, increase scanline visibility and glow intensity to simulate data overload.
- Holographic Pierce: Active state prioritizes bright inner glow feedback over gravity-style sinking.
- Terminal Blinking: Status lights and key indicators maintain pulse or flicker to sustain system-online feel.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-cyan-500/30`
- Radius: `rounded`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(6,182,212,0.2)]`
- Medium: `shadow-[0_0_15px_rgba(6,182,212,0.3)]`
- Large: `shadow-[0_0_25px_rgba(6,182,212,0.5)]`
- Hover: `shadow-[0_0_25px_rgba(6,182,212,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold font-mono`
- Body: `font-mono`

**Required Classes**

Button:
```
font-mono
uppercase
tracking-widest
border
transition-all
```

Card:
```
backdrop-blur
border
relative
```

Input:
```
bg-slate-950
border
font-mono
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`

Patterns: `^bg-white`, `^shadow-(?!\[|none)`, `^rounded-(?:2xl|3xl|full)`, `^font-serif`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary HUD Button
<button className="group relative px-8 py-3 bg-slate-900/80 border border-cyan-500/50 text-cyan-400 rounded-sm shadow-[0_0_10px_rgba(6,182,212,0.3)] hover:bg-cyan-500/10 hover:border-cyan-300 hover:text-cyan-300 hover:shadow-[0_0_20px_rgba(6,182,212,0.6),inset_0_0_10px_rgba(6,182,212,0.2)] active:scale-95 active:shadow-[inset_0_0_20px_rgba(255,255,255,0.6)] transition-all duration-150 ease-out overflow-hidden font-mono text-sm uppercase tracking-widest">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_2px,rgba(6,182,212,0.1)_2px,rgba(6,182,212,0.1)_4px)] opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
  <span className="relative z-10">Initialize</span>
</button>

// Active HUD Button
<button className="px-6 py-3 bg-cyan-500/20 border border-cyan-300 text-cyan-300 rounded-sm shadow-[0_0_20px_rgba(6,182,212,0.5)] font-mono text-sm uppercase tracking-widest">
  System Active
</button>

// Danger HUD Button
<button className="px-6 py-3 bg-slate-900/80 border border-red-500/40 text-red-400 rounded-sm shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:border-red-400 hover:shadow-[0_0_25px_rgba(239,68,68,0.5)] transition-all duration-150 font-mono text-sm uppercase tracking-widest">
  Override
</button>
```

**Card**
```html
<div className="group relative bg-slate-900/80 backdrop-blur-xl border border-cyan-500/20 rounded-sm p-8 shadow-[0_4px_24px_rgba(0,0,0,0.6)] hover:border-cyan-400/60 hover:shadow-[0_0_30px_rgba(6,182,212,0.25)] transition-all duration-200 cursor-crosshair">
  {/* L-shaped corner lock animation */}
  <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-cyan-500 group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border-cyan-300 transition-all duration-150" />
  <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-cyan-500 group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:border-cyan-300 transition-all duration-150" />
  <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-cyan-500 group-hover:-translate-x-1 group-hover:translate-y-1 group-hover:border-cyan-300 transition-all duration-150" />
  <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-cyan-500 group-hover:translate-x-1 group-hover:translate-y-1 group-hover:border-cyan-300 transition-all duration-150" />

  {/* Scanline overload */}
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(148,163,184,0.03)_2px,rgba(148,163,184,0.03)_4px)] group-hover:opacity-80 pointer-events-none rounded-sm transition-opacity duration-150" />

  <div className="relative z-10">
    <div className="flex items-center gap-3 mb-5">
      <div className="w-2 h-2 bg-cyan-500 shadow-[0_0_8px_rgba(6,182,212,1)] group-hover:bg-cyan-300 group-hover:animate-pulse" />
      <h3 className="text-cyan-500 font-mono text-xs uppercase tracking-[0.2em] group-hover:text-cyan-300 transition-colors">
        System Module
      </h3>
    </div>
    <h4 className="text-white text-xl font-mono font-bold mb-3 group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.5)] transition-all duration-200">
      Subsystem Status
    </h4>
    <p className="text-slate-400 text-sm font-mono leading-relaxed group-hover:text-slate-300 transition-colors duration-200">
      &gt; Quantum core operating at optimal efficiency.
      <br/>&gt; Awaiting command input...
    </p>
  </div>
</div>
```


---


### 滚动叙事 (Scrollytelling)

**Slug**: `scrollytelling`

#### Description
Scrolling is the narrative timeline. A sticky canvas pins to the viewport while text steps scroll past it, each step triggering a state change — numbers count, shapes morph, layers light up. Information reveals frame by frame with reading progress, like a New York Times data feature.

#### Design Philosophy
The scrollytelling creed: scrolling is playback, not browsing. As the reader scrolls down they aren't turning pages — they're driving a timeline. Every scroll position maps to a frame of the story; the sticky canvas is the stage and the text steps are the narration.

Core principles:
- Scroll is the scrubber: page height is story duration. The reader sets their own pace, fast-forward or rewind at will
- Sticky canvas + stepped text: one visualization pins to the viewport (position: sticky) while text steps scroll over it; each step entering view flips the canvas state via IntersectionObserver
- One focus per step: each step reveals exactly one new thing — a number, a line, a highlight. Overload kills narrative tension
- State is discrete: the canvas switches between a few explicit states (step 0/1/2/3…), not a continuous scrub. Discrete states read better, maintain better, and are far more accessible
- Data is the protagonist: charts, maps, animated numbers are the content, not decoration. Type serves the data
- Restrained palette: dark base + one lead accent (signal blue #2F6FED) + one alert contrast (vermilion #E8503A); more turns to noise

Design principles:
- Performance line: transition canvas states with transform/opacity, never recompute layout in a scroll handler; trigger with IntersectionObserver, not offsetTop reads in a scroll listener
- Accessibility line: under prefers-reduced-motion transitions complete instantly (no tweening), every step's text is always readable and the canvas end-state is reachable; reading order equals DOM order
- Mobile: pin the canvas to the top or a half-screen, text below — never let the canvas crowd out the words
- Honest numbers: count-up animation is only presentation; the real values must live in the DOM for screen readers and search engines

#### Do's (必须做)
1. Dark base #0E1116 with warm white text #F7F5F0 for a longform-feature immersion (or invert: light base, dark type)
2. One sticky canvas — position: sticky; top: 0; height: 100vh — pinned while text steps scroll over it
3. Use IntersectionObserver to detect each step entering view and switch the canvas to its discrete state
4. Reveal one focus per step: a single number, line, or highlighted layer
5. Animate numbers with count-up, but write the real value into the DOM for screen readers and SEO
6. Transition canvas states with transform/opacity only, 0.5-0.8s ease-out
7. Signal blue #2F6FED marks the current focus; vermilion #E8503A only for contrast/alerts
8. Give each step block generous space (at least 60-80vh) so the reader and the canvas transition have time
9. Under prefers-reduced-motion make transitions instant and numbers jump to final value; reading order unchanged

#### Don'ts (禁止做)
1. Never read offsetTop/getBoundingClientRect in a scroll handler for continuous scrub (jank) — trigger discrete states with IntersectionObserver
2. Never cram multiple new facts into one step (narrative tension collapses)
3. Never animate layout properties on canvas states (top/width/height) — transform/opacity only
4. Never let a count-up animation be the only source of a number (screen readers / SEO can't read it)
5. Never let the canvas crowd out text on mobile
6. Never use more than two accent colors
7. Never omit the prefers-reduced-motion instant fallback

#### AI Rules
```
# Scrollytelling Design System

You are an expert frontend developer specializing in scrollytelling (scroll-driven data narrative). Generate all code strictly following these specifications.

## Style Identity
- **Name**: Scrollytelling
- **Essence**: Scrolling is playback; a sticky canvas + stepped text drive a data story
- **Mood**: Editorial, journalistic, considered, data-forward
- **Inspiration**: NYT / The Pudding / Reuters Graphics scroll-driven features

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Reading offsetTop/getBoundingClientRect in a scroll handler for continuous scrub | Jank; trigger discrete states with IntersectionObserver instead |
| Multiple new facts per step | Narrative tension collapses |
| Animating layout props on canvas states (top/width/height) | Use transform/opacity only |
| Count-up as the only source of a number | Screen readers and SEO can't read it |
| Canvas crowding out text on mobile | Text must stay readable |
| More than two accent colors | Turns to noise |
| Missing prefers-reduced-motion instant fallback | Accessibility is non-negotiable |

## Required

### Palette
- Dark base #0E1116, raised surface #1C2530, text #F7F5F0 (may invert to light)
- Lead accent signal blue #2F6FED (current focus)
- Alert contrast vermilion #E8503A (contrast/alerts only)

### Core Structure: Sticky Canvas + Stepped Text
Two overlaid parts:
1. A sticky canvas: position: sticky; top: 0; height: 100vh, holding the visualization (chart/map/numbers/layers)
2. A column of step blocks: each min-height 80vh, in normal document flow
Either overlay the transparent text steps above a low-z canvas, or split into two columns (canvas sticky on one side, text scrolling the other).

### Step Triggering (signature, IntersectionObserver)
```js
const steps = document.querySelectorAll("[data-step]");
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) setCanvasState(Number(e.target.dataset.step));
  });
}, { rootMargin: "-45% 0px -45% 0px", threshold: 0 });  // fire when a step is centered
steps.forEach((s) => io.observe(s));
```

### Canvas State Switching
- Discrete states 0/1/2/3…, one focus each
- Layers cross-fade via .st-layer[data-active] controlling opacity/transform
- Number count-up: rAF tween from old to new, but keep the real end value in the DOM

### Honest Numbers
```html
<span aria-label="1,240 people">
  <span data-count-to="1240" aria-hidden>0</span>
</span>
```

### React Implementation Notes
- useRef for canvas state, useState for current step
- Build the IntersectionObserver in useEffect, disconnect in cleanup
- reduced-motion: detect with matchMedia; if set, zero transition duration and jump numbers to final

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({ trigger: ".st-canvas", pin: true, start: "top top", end: "+=300%" });
gsap.utils.toArray("[data-step]").forEach((el, i) => {
  ScrollTrigger.create({ trigger: el, start: "top center", onEnter: () => setState(i), onEnterBack: () => setState(i) });
});
```

### Typography
- Numbers/headlines in a grotesque sans (Archivo / Inter) for a data feel
- Step titles text-2xl~3xl bold, body max-width 40ch for stepped reading
- Chapter/step numbers in monospace + signal blue

## Self-Verification Checklist

- [ ] Dark base + one signal blue + one vermilion, no more than two accents
- [ ] Canvas is sticky-pinned while text steps scroll over it
- [ ] Steps trigger discrete states via IntersectionObserver, not continuous scroll scrub
- [ ] One focus revealed per step
- [ ] Count-up real values live in the DOM for screen readers
- [ ] Canvas transitions use transform/opacity only
- [ ] prefers-reduced-motion instant fallback present
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-[0_1px_2px_rgba(0,0,0,0.4)]`
- Medium: `shadow-[0_4px_16px_rgba(0,0,0,0.5)]`
- Large: `shadow-[0_16px_48px_rgba(0,0,0,0.6)]`
- Hover: `hover:shadow-[0_8px_28px_rgba(47,111,237,0.25)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200 ease-out`

**Typography**
- Heading: `font-bold text-[#F7F5F0] tracking-tight`
- Body: `text-[#F7F5F0]/70 leading-relaxed`

**Required Classes**

Button:
```
bg-[#2F6FED] text-white font-semibold
rounded-md
hover:bg-[#2560d4] active:scale-[0.98]
focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2F6FED]/50
transition-all duration-200
```

Card:
```
border-l-2 border-[#2F6FED]
pl-6 py-4
bg-transparent
```

Input:
```
bg-[#1C2530] border border-white/10
rounded-md
text-[#F7F5F0] placeholder-[#F7F5F0]/30
focus:outline-none focus:border-[#2F6FED] focus:ring-2 focus:ring-[#2F6FED]/30
transition-all duration-200
```

**Forbidden**

Classes: `bg-white`, `bg-gray-100`, `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `rounded-full`, `duration-1000`

Patterns: `^bg-gradient-`, `^bg-white$`, `^from-(indigo|purple|pink|fuchsia)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center gap-2
  px-5 py-2.5 rounded-md
  bg-[#2F6FED] text-white font-semibold text-sm
  hover:bg-[#2560d4] active:scale-[0.98]
  focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2F6FED]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0E1116]
  transition-all duration-200
">
  Next chapter
  <span aria-hidden>&darr;</span>
</button>
```

**Card**
```html
<div className="relative pl-6 border-l-2 border-[#2F6FED] py-4">
  <span className="absolute -left-[9px] top-5 w-4 h-4 rounded-full bg-[#2F6FED] ring-4 ring-[#0E1116]" />
  <span className="font-mono text-xs uppercase tracking-widest text-[#2F6FED]">Step 02</span>
  <h3 className="text-2xl font-bold text-[#F7F5F0] mt-2 mb-2">The line crosses zero</h3>
  <p className="text-[#F7F5F0]/70 leading-relaxed max-w-md">
    As you reach this step, the chart above highlights the moment the trend flips.
  </p>
</div>
```


---


### 可爱极简 (Kawaii Minimal)

**Slug**: `kawaii-minimal`

#### Description
A gentle style blending Japanese kawaii culture with minimalist design. Soft pastel palettes, rounded shapes, airy whitespace, and delicate micro-interactions, ideal for lifestyle apps, children's products, and creative tools.

#### Design Philosophy
Kawaii Minimal blends the warmth of Japanese cute culture with the restraint of Nordic minimalism.

Core principles:
- Soft pastels: using low-saturation pink, purple, blue, and yellow tones to create a gentle atmosphere
- Rounded shapes: large border-radius, circular elements, avoiding sharp edges
- Airy whitespace: ample breathing room makes the interface feel relaxed and comfortable
- Micro-interactions: delicate bounce and wiggle animations add playfulness
- Function first: cute but not cluttered, keeping information clear

#### Do's (必须做)
1. Use warm white backgrounds bg-[#FFF7ED] or bg-orange-50
2. Use large rounded corners rounded-2xl rounded-3xl rounded-full
3. Use soft shadows shadow-sm shadow-md (avoid dark strong shadows)
4. Text uses rounded sans-serif fonts font-sans font-medium
5. Buttons use pastel gradients or soft solid colors
6. Cards use light borders border-pink-200 or no borders
7. Interactions use bounce scaling hover:scale-105 active:scale-95
8. Generous spacing p-6 p-8 gap-6 gap-8
9. Add jelly-like squash and stretch to interactions for a soft, squishy feel

#### Don'ts (禁止做)
1. Do not use dark/black backgrounds
2. Do not use sharp corners rounded-none rounded-sm
3. Do not use glow/neon effects
4. Do not use high-saturation fluorescent colors
5. Do not use bold black borders
6. Do not overcrowd information -- maintain whitespace
7. Do not use stiff linear transitions -- prefer easing curves with bounce feel

#### AI Rules
```
STYLE: Kawaii Minimal
TYPE: Cute minimalist pastel interface

MUST USE:
- Warm light background: bg-[#FFF7ED] or bg-orange-50
- Large rounded corners: rounded-2xl, rounded-3xl, rounded-full
- Soft shadows: shadow-sm, shadow-md (not dark/strong)
- Pastel colors: pink-300, purple-300, cyan-200, yellow-200
- Bounce interactions: hover:scale-105 active:scale-95
- Generous spacing: p-6, p-8, gap-6
- font-sans font-medium for text
- White cards with light borders

MUST AVOID:
- Dark/black backgrounds
- Sharp corners (rounded-none, rounded-sm)
- Glow/neon effects
- High saturation neon colors
- Bold black borders
- Dense information layout

Animation & Interaction Rules:
- Jelly Bounce: Hover uses squash-and-stretch (non-uniform scale-x and scale-y changes) for gummy elasticity.
- Cloud Lift: Cards can gently float upward with enhanced pastel shadows, maintaining a light, joyful floating feel.
- Squishy Press: Active uses more pronounced compression (0.90-0.95) with tightened shadows, simulating a soft squishy touch.
- Spring Easing: Prefer cubic-bezier(0.34,1.56,0.64,1) bounce rhythm, avoiding stiff linear transitions.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-pink-200`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `shadow-lg`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold`
- Body: `font-medium`

**Required Classes**

Button:
```
rounded-full
transition-all
font-medium
```

Card:
```
rounded-3xl
shadow-md
```

Input:
```
rounded-2xl
border-2
focus:outline-none
```

**Forbidden**

Classes: `bg-gray-900`, `bg-gray-950`, `bg-black`, `bg-slate-900`, `rounded-none`, `rounded-sm`, `shadow-[0_0_`, `text-shadow`, `border-black`, `border-gray-900`

Patterns: `^bg-(?:gray-9|black|slate-9)`, `^rounded-(?:none|sm)$`, `^shadow-\[0_0_.*(?:rgba|#)`, `^border-(?:black|gray-9)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Kawaii
<button className="px-8 py-4 bg-pink-300 text-white rounded-full shadow-[0_8px_0_#f472b6,0_15px_20px_rgba(244,114,182,0.35)] hover:bg-pink-400 hover:shadow-[0_6px_0_#f472b6,0_10px_15px_rgba(244,114,182,0.35)] hover:translate-y-[2px] hover:scale-x-[1.05] hover:scale-y-[0.97] active:translate-y-[8px] active:shadow-[0_0_0_#f472b6,0_0_0_rgba(244,114,182,0)] active:scale-[0.95] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] font-medium">
  Click Me
</button>

// Pastel Outline
<button className="px-6 py-3 bg-white border-2 border-pink-200 text-pink-400 rounded-full hover:bg-pink-50 hover:border-pink-300 hover:scale-x-[1.04] hover:scale-y-[0.98] active:scale-[0.94] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] font-medium">
  Explore
</button>

// Gradient Kawaii
<button className="px-6 py-3 bg-gradient-to-r from-pink-300 to-purple-300 text-white rounded-full shadow-md hover:shadow-[0_12px_24px_rgba(244,114,182,0.28)] hover:-translate-y-1 hover:rotate-[1deg] active:scale-[0.93] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] font-medium">
  Let's Go
</button>
```

**Card**
```html
<div className="group bg-white rounded-3xl p-8 shadow-[0_10px_30px_rgba(251,207,232,0.4)] border-2 border-pink-100 hover:shadow-[0_20px_40px_rgba(244,114,182,0.3)] hover:-translate-y-3 hover:rotate-[1deg] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] cursor-pointer">
  <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-200 to-purple-200 flex items-center justify-center mb-6 shadow-inner group-hover:scale-110 group-hover:-rotate-[12deg] transition-transform duration-300 ease-out">
    <span className="text-white text-lg">*</span>
  </div>
  <h3 className="text-gray-800 text-xl font-bold mb-3 group-hover:text-pink-400 transition-colors duration-300">
    Sweet Feature
  </h3>
  <p className="text-gray-500 text-sm leading-relaxed font-medium">
    A delightful, marshmallow-soft experience designed with care and gentle playful energy.
  </p>
</div>
```


---


### 动力学构成主义 (Kinetic Constructivism)

**Slug**: `kinetic-constructivism`

#### Description
Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit, triangles swing like pendulums, blocks march to a beat. The kinematics descend from El Lissitzky and Rodchenko posters; the rhythm comes from the machine itself.

#### Design Philosophy
The kinetic-constructivist creed: geometry is not static ornament — it is a machine. Constructivism treats the canvas as engineering: the diagonal is a vector of force, the circle is an axis of rotation, the triangle is a wedge in motion. When those primitives actually move, the poster becomes the machine: every disc orbits, every diagonal drives forward.

Core principles:
- Primitives are parts: only the most basic geometry (circle, triangle, square, thick bar, arc), assembled like machine components; no illustration, no photography
- Motion is structure: animation is not garnish but the externalization of compositional relationships — discs orbit and spin, triangles swing, squares march to a beat, diagonal blocks sweep in
- Three colors, one ink, one paper: constructivist red #E0231B, ultramarine blue #1C4A87, chrome yellow #F4B301, on warm ink #17130E and bone paper #EFE9DC — never a fourth hue
- The diagonal is the main axis: organize key compositions along -30deg / -45deg diagonals for tension and direction; orthogonal layout is reserved for the stable scaffold
- Hard edges, zero radius: every edge is a knife-cut straight line, flat solid fills, no gradients, no shadows, no glow
- Mechanical easing: entrances use expo-out (fast start, slow settle), loops use linear or stepped gear motion, rebounds use restrained back — never a cutesy bounce

Design principles:
- Performance line: animate transform / opacity only; all geometric motion via transform (translate / rotate / scale), never triggering reflow
- Accessibility line: under prefers-reduced-motion every loop settles into its constructivist end-state; the frame remains a complete constructivist poster with zero information loss
- Rhythm line: only one group of primitives leads the motion per viewport while the rest holds a static scaffold, avoiding the cheap look of everything moving at once
- Typography: ultra-bold uppercase sans-serif headlines + tabular numeric labels; the type blocks are themselves part of the composition and may rotate along the diagonal

#### Do's (必须做)
1. Set the page on bone paper #EFE9DC with warm ink #17130E for a printed-poster feel
2. Use only three accents — constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301 — never a fourth
3. Use only basic primitives: circle, triangle, square, thick diagonal bar, arc — flat fills, hard edges, zero radius
4. Organize key compositions along -30deg / -45deg diagonals with rotated type blocks and color bands for directional tension
5. Make primitives genuinely move mechanically: discs orbit/spin, triangles swing, squares march, diagonal blocks sweep
6. Entrances use expo-out (cubic-bezier(0.16,1,0.3,1), 0.6-0.9s); rotation loops use linear or steps() for a gear feel
7. Headlines in ultra-bold uppercase sans (Archivo/Anton family, wght 800-900) + tabular numeric labels
8. Every animation ships a prefers-reduced-motion fallback that settles on the complete constructivist end-state

#### Don'ts (禁止做)
1. Never use rounded corners, shadows (md+), gradients, glow or blur — constructivism is knife-cut hard edges and flat color
2. Never introduce a fourth hue, never use low-saturation pastels, never muddy the primaries
3. Never let illustration, photography or 3D skeuomorphism steal the stage from geometry — primitives are the protagonist
4. Never use cutesy bouncy easing or dragging loops over 1.2s
5. Never let every primitive move at once (keep a static scaffold; one dominant motion at a time)
6. Never animate top/left/width/height (layout thrash) — geometric motion uses transform only
7. Never skip the prefers-reduced-motion fallback

#### AI Rules
```
# Kinetic Constructivism Design System

You are an expert frontend developer specializing in kinetic constructivism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Kinetic Constructivism
- **Essence**: geometric primitives are machine parts; motion is the externalization of compositional relationships — the poster moves
- **Mood**: rational, forceful, industrial, propaganda-poster directional tension
- **Inspiration**: El Lissitzky, Alexander Rodchenko, Varvara Stepanova Soviet constructivist posters; Bauhaus geometry; the primitive-in-motion origins of motion graphics

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rounded corners / shadows / gradients / glow / blur | Constructivism is knife-cut hard edges + flat fills; any softening kills the industrial feel |
| A fourth hue / low-sat pastels / muddied primaries | Only red, blue, yellow + ink + paper; color is a structural signal, not atmosphere |
| Illustration / photography / 3D skeuomorphism | Basic primitives are the protagonist; anything else steals the stage |
| Cutesy bouncy easing / loops over 1.2s | Breaks the mechanical rhythm; use expo-out entrances, linear or stepped loops |
| Every primitive moving at once | Keep a static scaffold; one dominant motion at a time |
| Animating top/left/width/height/margin | Layout thrash; only transform and opacity may animate |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### The Frame (paper, ink, three colors)
- Background #EFE9DC (bone paper), body #17130E (warm ink)
- Three accents: constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301
- Flat fills, hard edges (rounded-none), key blocks get a 2px or 4px ink stroke

### Primitive Library (only these)
Disc, triangle, square, thick diagonal bar, arc / concentric ring. Assemble like machine parts; no other shapes.

### Diagonal Composition
Organize key compositions along -30deg or -45deg diagonals; headline type blocks may rotate -3deg to -6deg; color bands cut in along the diagonal. Orthogonal grids only for the stable scaffold.

### Mechanical Motion (signature)
```css
@keyframes kc-spin   { to { transform: rotate(360deg); } }          /* gear self-rotation, linear */
@keyframes kc-orbit  { to { transform: rotate(360deg); } }          /* parent rotates, child rides the rim */
@keyframes kc-pendulum { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(24deg)} } /* pendulum, ease-in-out */
@keyframes kc-march  { to { transform: translateX(24px); } }        /* squares march, steps(3) */
@keyframes kc-sweep  { from{transform:translateX(-110%) skewX(-12deg)} to{transform:translateX(0) skewX(-12deg)} }
```
- Orbit: outer div runs kc-orbit (rotate 360deg linear), a child disc sits on the top rim -> a circle orbiting a circle
- Spin: a disc / radial burst runs kc-spin, linear, for a gear feel
- Pendulum: a triangle / thick bar with transform-origin:top center runs kc-pendulum, ease-in-out
- March: a row of squares runs kc-march, steps(3) alternate, for mechanical stepping
- Entrance: color/type blocks use expo-out (cubic-bezier(0.16,1,0.3,1), 0.6-0.9s)

### Easing
- Entrance: cubic-bezier(0.16,1,0.3,1) (expo-out, fast start slow settle)
- Rotation / orbit loops: linear (constant gear speed)
- Pendulum: ease-in-out
- Rebound (restrained): cubic-bezier(0.34,1.4,0.64,1); never an exaggerated >1.56 overshoot

### Typography
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Archivo:wght@700;800;900&family=Space+Mono&display=swap" />
```
Headline stack: font-family: "Archivo", "Anton", "Helvetica Neue", ui-sans-serif, sans-serif; ultra-bold (800-900), uppercase, tracking-tight.
Labels / numbers: font-family: "Space Mono", ui-monospace, monospace; uppercase, letter-spacing 0.2-0.3em, tabular-nums.

### Rhythm
- One dominant motion per viewport; the rest holds a static scaffold
- Entrances 0.6-0.9s; hover feedback 0.3-0.4s; loops 3-12s (bigger wheels turn slower)

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .kc-spin, .kc-orbit, .kc-pendulum, .kc-march { animation: none !important; }
}
```
Every loop settles into its constructivist end-state; the frame stays a complete poster.

### animejs Recipe (optional, project ships animejs@4)
```js
import { animate, stagger } from "animejs";
animate(".kc-square", {
  translateX: [0, 24],
  ease: "steps(3)",
  loop: true,
  alternate: true,
  duration: 900,
  delay: stagger(120),
});
```

## Self-Verification Checklist

- [ ] Paper ground, ink type, only red/blue/yellow
- [ ] Only circle/triangle/square/diagonal/arc, hard edges, zero radius, flat fills
- [ ] Key composition on the diagonal, headline blocks rotated
- [ ] Primitives genuinely move mechanically (orbit/spin/pendulum/march), not static mockups
- [ ] Only transform / opacity animate
- [ ] One dominant motion per viewport
- [ ] prefers-reduced-motion fallback settling on the constructivist end-state
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#17130E]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]`

**Typography**
- Heading: `font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9]`
- Body: `text-[#17130E]/80`

**Required Classes**

Button:
```
uppercase font-extrabold tracking-[0.12em] text-sm
border-2 border-[#17130E]
rounded-none
transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]
active:scale-[0.98]
```

Card:
```
bg-[#EFE9DC]
border-2 border-[#17130E]
rounded-none
```

Input:
```
bg-transparent
border-2 border-[#17130E]
rounded-none
text-[#17130E] placeholder-[#17130E]/30
focus:outline-none
```

**Forbidden**

Classes: `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`

Patterns: `^rounded-(md|lg|xl|2xl|3xl|full)$`, `^shadow-(md|lg|xl|2xl)$`, `^bg-gradient-`, `^blur-`, `^drop-shadow-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative overflow-hidden
  px-7 py-3.5
  bg-[#17130E] text-[#EFE9DC]
  uppercase tracking-[0.12em] text-sm font-extrabold
  border-2 border-[#17130E] rounded-none
  transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]
  hover:text-[#EFE9DC]
  active:scale-[0.98]
">
  <span className="absolute inset-0 bg-[#E0231B] -translate-x-full -skew-x-12
    group-hover:translate-x-0 transition-transform duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]" />
  <span className="relative z-10">Build Forward</span>
</button>
```

**Card**
```html
<article className="group relative bg-[#EFE9DC] border-2 border-[#17130E] rounded-none p-6 overflow-hidden">
  <span className="absolute top-0 left-0 right-0 h-2 bg-[#1C4A87]" />
  <span className="absolute -right-6 -top-6 w-16 h-16 rounded-full bg-[#F4B301] border-2 border-[#17130E]
    [transform-origin:center] group-hover:[animation:kc-spin_1.2s_linear_infinite]" />
  <span className="block font-mono text-xs text-[#E0231B] tabular-nums mb-4">01</span>
  <h3 className="text-2xl font-extrabold uppercase text-[#17130E] tracking-tight leading-none mb-3">
    Motion Is Structure
  </h3>
  <p className="text-sm text-[#17130E]/70 leading-relaxed max-w-xs">
    The disc does not decorate — it turns. Every part carries a force.
  </p>
</article>
```


---


### 故障广播 (Broadcast Glitch)

**Slug**: `broadcast-glitch`

#### Description
The motion packaging of a dying broadcast signal. On CRT black, scanlines crawl, RGB channels split into red-cyan jitter, SMPTE color bars sweep, and the picture occasionally jumps like bad tracking. This is the revival of 90s TV idents and VHS glitch art — not a synthwave sunset, but a broken signal itself glowing.

#### Design Philosophy
The glitch creed: treat "signal failure" as an aesthetic. When an old CRT's signal breaks, it leaks scanlines, splits color into red-cyan ghosting, and makes the picture twitch and jump — and those "defects" are the most alive motion language there is. It revives 90s TV idents, test cards and VHS tape texture, not the romantic neon sunset of synthwave.

Core principles:
- The signal is the stage: CRT near-black #0B0B0E, always overlaid with slowly crawling scanlines, as if the picture is emitted from a cathode-ray tube
- Three primary signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000 — drawn from TV primaries and the test card, never synthwave's purple-pink gradients
- Channel splitting is the signature: important type and shapes get RGB red-cyan offset (chromatic aberration) with a slight random jitter, as if the signal is misaligned
- Glitch is the motion: frame jumps (clip + translate with stepped hard cuts), VHS horizontal tearing, signal-bar sweeps, power-on white flash — all the moves of a bad signal
- Hard edges, no radius: this is an electronic signal, not soft-light UI — square corners, flat color, thick rules, monospace type, everything hard
- No sunset: never the purple-pink-orange gradient and horizon grid of outrun/synthwave — that is a different style; this one is a broken broadcast signal

Design principles:
- Performance line: scanlines via CSS gradient overlay + transform scroll, glitch via transform/clip-path, never reflow
- Accessibility line: under prefers-reduced-motion disable jitter, jumps and flicker (anti-vertigo), settling on a clear test-card end-state
- Restraint line: glitch is a highlight, not a screen-wide seizure — small amplitude, low frequency, tearing only at key moments
- Legibility line: body text never gets channel splitting (only titles/decor do), keeping prose crisp

#### Do's (必须做)
1. CRT near-black #0B0B0E background always overlaid with slowly crawling scanlines (repeating-linear-gradient + transform scroll)
2. Only three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000, from TV/test-card
3. Titles get RGB channel splitting: red-cyan double-shadow text-shadow + slight random jitter for signal misalignment
4. Glitch motion uses steps() hard cuts: frame jumps, VHS horizontal tearing, signal-bar sweeps — never a smooth transition
5. Hard square corners, flat fills, thick borders, monospace / condensed bold type — everything hard
6. Use SMPTE color bars as the signature decoration (white yellow cyan green magenta red blue)
7. Open with a CRT power-on white flash + collapse (scaleY 0->1)
8. Every glitch/flicker/jitter ships a prefers-reduced-motion off-switch, settling on a clear test-card end-state (anti-vertigo)

#### Don'ts (禁止做)
1. Never the purple-pink-orange sunset gradient and horizon grid of synthwave/outrun — that is a different style
2. Never rounded corners, soft light or gentle shadows — this is a hard electronic signal, not soft UI
3. Never a fourth hue, never muddy or desaturate the three signal colors
4. Never a screen-wide continuous seizure-like jitter — glitch is a highlight, small amplitude, low frequency
5. Never channel-split the body text (titles/decor only) or prose becomes unreadable
6. Never animate top/left/width/height — scanlines/glitch use transform/clip-path
7. Never skip prefers-reduced-motion (jitter and flicker carry a vertigo risk)

#### AI Rules
```
# Broadcast Glitch Design System

You are an expert frontend developer specializing in the broadcast glitch style. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Broadcast Glitch (Retro TV)
- **Essence**: treat an old CRT's "signal failure" as motion aesthetic — scanlines, channel splitting, frame jumps, test cards
- **Mood**: nostalgic, gritty, electronic; 90s TV idents and VHS glitch art
- **Inspiration**: SMPTE color bars, MTV/channel idents, VHS tape glitch, datamosh

> Important distinction: this is NOT synthwave / outrun. Never use the purple-pink-orange sunset gradient or horizon grid. This style is a "broken broadcast signal" — black ground, flat color, hard edges, scanlines.

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Purple-pink-orange sunset gradient / horizon grid | That is synthwave/outrun, a different style; this one is a bad signal |
| Rounded corners / soft light / gentle shadows | Hard electronic signal, not soft UI; square corners, flat color |
| A fourth hue / muddying the three signal colors | Only glitch red / CRT cyan / test-card yellow, from TV primaries |
| Screen-wide continuous seizure jitter | Glitch is a highlight — small amplitude, low frequency, tear only at key moments |
| Channel-splitting the body text | Prose must stay readable; split titles/decor only |
| Animating top/left/width/height | Layout thrash; scanlines/glitch use transform/clip-path |
| Missing prefers-reduced-motion fallback | Jitter and flicker carry a vertigo risk; non-negotiable |

## Required

### Signal Stage
- CRT near-black #0B0B0E background, panel #101014, always overlaid with crawling scanlines
- Phosphor-white #EDEDED text, monospace / condensed bold
- Three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000

### Scanlines (always present)
```css
.bg-scanlines { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.7) 3px); }
@keyframes bg-scan { to { transform: translateY(6px); } }
.bg-scan { animation: bg-scan 0.4s steps(3) infinite; }
```
Use a pointer-events-none absolutely-positioned overlay over the whole screen.

### Channel Splitting (signature)
```css
h1 { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; }
@keyframes bg-split { 0%,100% { text-shadow: 2px 0 #00E5D8, -2px 0 #FF2E4C; } 50% { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; } }
```
Titles and decor only; body stays single-color and crisp.

### Glitch Frame Jump (stepped hard cut)
```css
@keyframes bg-jitter { 0%,92%,100% { transform: translate(0,0); } 93% { transform: translate(-3px,1px); } 95% { transform: translate(2px,-1px); } }
.bg-jitter { animation: bg-jitter 4s steps(1) infinite; }
```
Still most of the time, an occasional jump — not a continuous shake.

### SMPTE Color Bars
Seven equal bars: white #EDEDED / yellow #F5E000 / cyan #00E5D8 / green #3DFF6E / magenta #FF2E9A / red #FF2E4C / blue #2E6BFF. Use as corner decoration or divider strip.

### CRT Power-On
```css
@keyframes bg-poweron { from { transform: scaleY(0.02); opacity: 0.2; } to { transform: scaleY(1); opacity: 1; } }
```

### Typography
Titles/body in monospace or condensed bold (ui-monospace / "Azeret Mono" / "Unbounded" family), uppercase, wide tracking, hard electronic feel.

### Rhythm
- Scanline crawl 0.4s steps(3) always on; frame jump once per ~4s; split pulse 2s; flicker 1.2s
- Everything uses steps() — hard cut, never smooth

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .bg-scan, .bg-jitter, .bg-split, .bg-flicker, .bg-poweron { animation: none !important; }
}
```
Disable all jitter and flicker, settle on a clear test-card end-state.

## Self-Verification Checklist

- [ ] CRT black ground + always-on crawling scanlines
- [ ] Only glitch red / CRT cyan / test-card yellow, no sunset gradient
- [ ] Titles have RGB channel splitting, body single-color and readable
- [ ] Glitch is an occasional frame jump (stepped hard cut), not a screen-wide shake
- [ ] A SMPTE color-bars element is present
- [ ] Only transform/opacity/clip-path animate
- [ ] prefers-reduced-motion fallback present (anti-vertigo)
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#EDEDED]/30`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-transform duration-100`

**Typography**
- Heading: `font-mono font-bold uppercase text-[#EDEDED] tracking-tight`
- Body: `font-mono text-[#EDEDED]/70`

**Required Classes**

Button:
```
rounded-none
border-2
font-mono font-bold uppercase tracking-[0.15em]
transition-transform duration-100
active:translate-y-0.5
```

Card:
```
bg-[#101014]
border-2 border-[#EDEDED]/30
rounded-none
```

Input:
```
bg-[#101014]
rounded-none
border-2 border-[#EDEDED]/30
font-mono text-[#00E5D8] placeholder-[#EDEDED]/25
focus:outline-none focus:border-[#00E5D8]
```

**Forbidden**

Classes: `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-br`, `bg-gradient-to-b`, `bg-gradient-to-t`

Patterns: `^rounded-(md|lg|xl|2xl|3xl|full)$`, `^bg-gradient-`, `^blur-`, `^shadow-(md|lg|xl|2xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative
  px-7 py-3 rounded-none
  bg-[#FF2E4C] text-[#0B0B0E]
  font-mono font-bold uppercase tracking-[0.15em] text-sm
  border-2 border-[#EDEDED]
  transition-transform duration-100
  hover:[text-shadow:2px_0_#00E5D8,-2px_0_#F5E000]
  active:translate-y-0.5
">
  <span className="relative z-10">&#9654; Transmit</span>
</button>
```

**Card**
```html
<article className="relative bg-[#101014] border-2 border-[#EDEDED]/30 rounded-none overflow-hidden">
  {/* test-bar header */}
  <div className="flex h-2">
    <span className="flex-1 bg-[#EDEDED]" /><span className="flex-1 bg-[#F5E000]" />
    <span className="flex-1 bg-[#00E5D8]" /><span className="flex-1 bg-[#FF2E4C]" />
  </div>
  {/* scanline overlay */}
  <span className="pointer-events-none absolute inset-0 opacity-30"
    style={{ background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.6) 3px)" }} />
  <div className="relative p-6">
    <span className="block font-mono text-xs text-[#00E5D8] mb-3">CH-01 / LIVE</span>
    <h3 className="font-mono font-bold uppercase text-xl text-[#EDEDED] tracking-tight mb-2">Signal Lost</h3>
    <p className="font-mono text-sm text-[#EDEDED]/60">Please stand by. Normal service will not resume.</p>
  </div>
</article>
```


---


### 动力学排印 (Kinetic Typography)

**Slug**: `kinetic-typography`

#### Description
Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a single signal orange points the way.

#### Design Philosophy
The kinetic creed: words are not placed, they enter. When type is the only protagonist, motion stops being decoration and becomes tone of voice — weight is volume, width is breath, stagger is punctuation.

Core principles:
- Type is the interface: no illustration, no icon salad; hierarchy is carried entirely by extreme contrast of size, weight and width (12px annotations share the stage with 12vw headlines)
- The variable font is the engine: animate font-variation-settings wght and wdth axes, not positions and colors — a native motion no other style owns
- Choreography rule: one dominant motion per viewport; while letters stagger in, everything else holds still
- Mask entrances: text rises from an overflow mask (translateY 110% → 0) like an actor stepping from behind a curtain — never a flat fade
- One signal color: #FF4D00 appears only on primary CTAs, key words and hover feedback, never as a surface
- Motion is physics: expo-out easing cubic-bezier(0.22,1,0.36,1), fast start, slow settle; 30-50ms stagger builds the wave

#### Do's (必须做)
1. Stage the page on near-black ink #0B0B0C with warm bone text #F4F1EB for maximum contrast
2. Load a variable font (e.g. Anybody, wght 100-900 + wdth 50-150) as the display face
3. Mask entrances for headlines: overflow-hidden wrapper, inner element animates translateY(110%) to 0, staggered 30-50ms per char/word
4. One easing everywhere: expo-out cubic-bezier(0.22,1,0.36,1), 0.7-0.9s
5. Animate font-variation-settings: weight breathing 300-800, width stretching 100-150 with scroll velocity
6. Extreme size contrast: 11-12px uppercase tracked labels against clamp(3rem,10vw,9rem) tracking-tight headlines
7. Seamless CSS marquee (duplicate content, translateX -50% loop), pause on hover
8. Signal orange #FF4D00 only on primary CTAs, key words and hover states
9. Every animation ships a prefers-reduced-motion fallback that lands on the static end state

#### Don'ts (禁止做)
1. Never animate layout properties (top/left/width/height) — transform/opacity/font-variation-settings only
2. Never run multiple dominant motions in one viewport (choreography: one protagonist at a time)
3. Never let images or illustration steal the stage from type (imagery is texture at most)
4. Never use more than one accent, never flood signal orange as a surface color
5. Never substitute a flat opacity fade for a mask rise
6. Never drag animations past 1.2s or use linear easing
7. Never skip the prefers-reduced-motion fallback

#### AI Rules
```
# Kinetic Typography Design System

You are an expert frontend developer specializing in kinetic typography. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Kinetic Typography
- **Essence**: Type is the interface; the variable font is the animation engine
- **Mood**: Confident, rhythmic, editorial-brutalist, stage-like
- **Inspiration**: Motion posters, title sequences, Studio Dumbar-school type experiments

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Animating top/left/width/height/margin | Layout thrash; only transform, opacity, font-variation-settings may animate |
| Multiple dominant motions per viewport | Choreography rule: one protagonist at a time |
| Images/illustration competing with type | Type owns the stage; imagery is texture at most |
| More than one accent; orange surfaces | #FF4D00 is a signal, never a fill |
| Opacity-only fades for entrances | Mask rises are the signature; flat fades are forbidden |
| Animations over 1.2s or linear easing | Kills the snap; use expo-out under 0.9s |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### Stage
- Background #0B0B0C (near-black ink), raised surface #141416
- Text #F4F1EB (warm bone), secondary rgba(244,241,235,0.55)
- The one accent #FF4D00: primary CTAs, key words, hover feedback only

### Variable Font Engine
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap" />
```
Display stack: font-family: "Anybody", Archivo, ui-sans-serif, sans-serif
(fonts.googleapis.com works too; loli.net mirrors it for CN access)

### Mask Rise Entrance (signature)
```html
<span class="block overflow-hidden">
  <span class="inline-block" style="transform: translateY(110%); animation: kt-rise 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(var(--i) * 40ms)">Word</span>
</span>
```
```css
@keyframes kt-rise { to { transform: translateY(0); } }
```

### Weight Breathing
```css
@keyframes kt-breathe {
  from { font-variation-settings: "wght" 300; }
  to { font-variation-settings: "wght" 800; }
}
.kt-breathe { animation: kt-breathe 2.4s ease-in-out infinite alternate; }
```
Apply to ONE key word per viewport.

### Scroll-Velocity Width Stretch (advanced, JS)
```js
let last = scrollY, vel = 0;
(function tick() {
  vel = vel * 0.9 + Math.abs(scrollY - last) * 0.1; last = scrollY;
  el.style.fontVariationSettings = `"wght" 700, "wdth" ${Math.min(150, 100 + vel * 2)}`;
  requestAnimationFrame(tick);
})();
```

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);
const split = SplitText.create(".headline", { type: "chars" });
gsap.from(split.chars, {
  yPercent: 110, stagger: 0.04, duration: 0.9, ease: "expo.out",
  scrollTrigger: { trigger: ".headline", start: "top 80%" },
});
```

### Marquee
Duplicate strip content twice inside a track; animate track translateX(-50%) linear infinite 24s; pause on hover.

### Type Scale
- Labels: 11-12px, uppercase, letter-spacing 0.2-0.3em
- Body: 15-16px, line-height 1.6
- Headlines: clamp(3rem, 10vw, 9rem), letter-spacing -0.02em, line-height 0.95

### Rhythm
- One easing: cubic-bezier(0.22,1,0.36,1)
- Entrances 0.7-0.9s; hover 0.3-0.5s; stagger 30-50ms per char, 80-120ms per line

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .kt-line > span, .kt-breathe, .kt-marquee-track { animation: none; transform: none; }
}
```
Everything lands on its static end state; zero information loss.

## Self-Verification Checklist

- [ ] Ink stage, bone type, single orange signal
- [ ] Headlines use mask rise + stagger, never flat fades
- [ ] Only transform/opacity/font-variation-settings animate
- [ ] One dominant motion per viewport
- [ ] prefers-reduced-motion fallback present
- [ ] expo-out easing everywhere
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#F4F1EB]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]`

**Typography**
- Heading: `font-bold text-[#F4F1EB] tracking-tight leading-[0.95]`
- Body: `text-[#F4F1EB]/70`

**Required Classes**

Button:
```
uppercase tracking-[0.15em] text-sm font-semibold
border border-[#F4F1EB]/25
rounded-none
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:border-[#FF4D00]
active:scale-[0.98]
```

Card:
```
border-t border-[#F4F1EB]/15
rounded-none
hover:border-[#FF4D00]
transition-colors duration-500
```

Input:
```
bg-transparent
border-b border-[#F4F1EB]/20
rounded-none
text-[#F4F1EB] placeholder-[#F4F1EB]/25
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`

Patterns: `^rounded-(lg|xl|2xl|3xl|full)$`, `^shadow-(md|lg|xl|2xl)$`, `^bg-gradient-`, `^duration-(100|150|2000)$`, `^ease-linear$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative overflow-hidden
  px-7 py-3.5
  bg-transparent border border-[#F4F1EB]/25
  text-[#F4F1EB] uppercase tracking-[0.15em] text-sm font-semibold
  transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
  hover:border-[#FF4D00] hover:text-[#0B0B0C]
  active:scale-[0.98]
">
  <span className="absolute inset-0 bg-[#FF4D00] translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]" />
  <span className="relative z-10">Enter Motion</span>
</button>
```

**Card**
```html
<article className="group border-t border-[#F4F1EB]/15 py-8 px-1
  transition-colors duration-500 hover:border-[#FF4D00]
">
  <span className="block font-mono text-xs text-[#F4F1EB]/40 mb-4">01</span>
  <h3 className="text-3xl md:text-4xl text-[#F4F1EB] tracking-tight leading-none mb-3
    [font-variation-settings:'wght'_450]
    group-hover:[font-variation-settings:'wght'_800]
    transition-[font-variation-settings] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
  ">
    Weight Is Volume
  </h3>
  <p className="text-[#F4F1EB]/55 text-sm max-w-sm leading-relaxed">
    The headline speaks louder as you approach. No color change, no shadow — just mass.
  </p>
</article>
```


---


### 黑色电影 (Film Noir)

**Slug**: `film-noir`

#### Description
A dramatic visual style drawn from classic 1940-50s film noir. Extreme light-dark contrast, deep grayscale layers, diagonal shadows, and a mysterious atmosphere, suited for story-driven products, photography portfolios, and premium brands.

#### Design Philosophy
Film Noir style draws from the visual language of 1940-50s Hollywood film noir.

Core principles:
- Extreme contrast: almost no middle ground between deep black and bright white, creating dramatic tension
- Light and shadow narrative: diagonal shadows, window-blind light patterns, and spotlight effects tell stories
- Grayscale dominance: black, white, and gray as primary tones, with only minimal accent colors (crimson, gold)
- Classical typography: serif headings + sans-serif body text, echoing vintage newspaper aesthetics
- Mysterious atmosphere: information is barely visible, drawing users to explore deeper

#### Do's (必须做)
1. Use deep black backgrounds bg-[#0a0a0a] or bg-neutral-950
2. Text uses gray-white colors text-neutral-100 text-neutral-300
3. Use serif fonts for headings font-serif italic
4. Cards use extremely subtle gray to distinguish layers bg-neutral-900 bg-neutral-800
5. Emphasis elements use crimson text-[#c41e3a] (very sparingly)
6. Use linear gradients to simulate light and shadow effects
7. Borders are ultra-thin or absent border-neutral-800
8. Hover effects use brightness changes rather than color changes
9. Buttons use group wrapper with inner light beam sweep layer (-translate-x-[200%] to group-hover:translate-x-[200%])
10. active:scale-[0.98] for tactile press confirmation
11. focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-950
12. Crimson bleed line: w-12 h-[2px] bg-[#c41e3a], expanding to group-hover:w-full (duration-700)

#### Don'ts (禁止做)
1. Do not use colorful backgrounds
2. Do not use high-saturation colors (crimson only as accent)
3. Do not use overly large rounded corners rounded-2xl+
4. Do not use cartoon/cute elements
5. Do not use glow effects
6. Do not use gradient buttons
7. Do not omit active:scale-[0.98] from buttons (no tactile confirmation = button is decorative)
8. Do not use focus:ring without focus:ring-offset-neutral-950 (focus ring must separate from element on dark backgrounds)
9. Do not use animation duration below 300ms (Noir rhythm is slow and dramatic, not snappy)

#### AI Rules
```
STYLE: Film Noir
TYPE: Dramatic high-contrast monochrome interface

MUST USE:
- Deep black background: bg-[#0a0a0a] or bg-neutral-950
- Grayscale palette: neutral-100 through neutral-950
- Serif italic headings: font-serif italic
- Extremely subtle layer separation: bg-neutral-900 vs bg-neutral-800
- Minimal crimson accent: text-[#c41e3a] / bg-[#c41e3a] (sparingly)
- Diagonal gradient light effects for drama
- Thin or no borders: border-neutral-800
- Uppercase small tracking labels: text-xs uppercase tracking-[0.2em]

MUST AVOID:
- Colorful backgrounds
- High saturation colors (crimson only as rare accent)
- Large rounded corners (rounded-2xl+)
- Cartoon/cute elements
- Glow effects (forbidden — breaks the noir darkness)
- Gradient buttons
- Emoji or playful iconography
- Buttons without active:scale-[0.98]
- focus:ring without focus:ring-offset-neutral-950
- Animation duration below 300ms (Noir is slow and dramatic, not snappy)

COLOR SYSTEM:
- Background: #0a0a0a (near black)
- Card: neutral-900
- Card border hover: neutral-600 (from neutral-800)
- Text primary: neutral-100 → white on group-hover
- Text secondary: neutral-400 → neutral-300 on group-hover
- Text muted: neutral-500
- Crimson accent: #c41e3a (very sparingly)
- Gold accent: #d4af37 (very sparingly)
- Borders: neutral-700 to neutral-800

## Animation & Interaction Rules

- Light Shaft Sweep: ALL buttons use group class. Inside, an absolute div with bg-gradient-to-r from-transparent via-white/30 to-transparent starts at -translate-x-[200%] skew-x-[-20deg] and sweeps to translate-x-[200%] on group-hover. Use transition-transform duration-700 ease-in-out. The skew creates a diagonal "flashlight beam" effect. The sweep is slow and deliberate — this is noir, not a sprint.
- Harsh Monochrome Swap: Primary button hover does hover:bg-neutral-100 hover:text-neutral-950 hover:border-neutral-100. This is a complete binary inversion (dark→light), not a gradual shade change. The abruptness reflects 40s film drama where scenes cut hard between shadow and light.
- Venetian Blinds Pattern: Cards have an absolute overlay with bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,#fff_4px,#fff_6px)] at opacity-0, transitioning to group-hover:opacity-[0.06]. This is barely perceptible — like light filtering through half-closed window blinds in a detective's office.
- Crimson Bleed: Cards include a horizontal line w-12 h-[2px] bg-[#c41e3a] that expands to group-hover:w-full over duration-700 ease-out. Simulates blood spreading, or a film title card's crimson underline unfurling.
- Text Reveal: Card headings and body text brighten on group-hover (neutral-100→white, neutral-400→neutral-300) using transition-colors duration-500. Combined with venetian blinds pattern, creates the effect of light falling on text.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98].
- Focus Ring Dark: Always use focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-950.
- Slow Easing: Buttons use duration-500. Cards use duration-700. The sweeping light shaft uses duration-700 ease-in-out. NEVER use duration below 300ms — slowness is inherent to noir's dramatic weight.

## Self-Check

After generating code, verify:
1. All buttons are wrapped in group, have the light shaft sweep div inside
2. All buttons have active:scale-[0.98]
3. All focusable elements have focus:ring-offset-neutral-950
4. Cards have venetian blinds overlay (opacity-0 → group-hover:opacity-[0.06])
5. Cards have crimson bleed line (w-12 → group-hover:w-full)
6. No animation duration below 300ms
7. No rounded-2xl or larger
```


#### Design Tokens

**Border**
- Width: `border-b`
- Color: `border-neutral-800`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `shadow-lg`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-500`

**Typography**
- Heading: `font-serif italic`
- Body: `font-sans`

**Required Classes**

Button:
```
font-serif
italic
tracking-wide
transition-colors
```

Card:
```
bg-neutral-900
relative
overflow-hidden
```

Input:
```
bg-neutral-950
border-b
font-serif
focus:outline-none
```

**Forbidden**

Classes: `bg-blue-`, `bg-green-`, `bg-pink-`, `bg-purple-`, `bg-yellow-`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-[0_0_`, `text-shadow`

Patterns: `^bg-(?:blue|green|pink|purple|yellow|cyan|teal|indigo|violet|fuchsia)-`, `^rounded-(?:2xl|3xl|full)`, `^shadow-\[0_0_`, `^animate-(?:bounce|spin|wiggle)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary Noir — light shaft sweep + harsh monochrome swap */}
<button className="
  group relative
  px-6 py-3
  bg-neutral-950 text-neutral-100
  border border-neutral-700
  font-serif italic tracking-widest
  hover:bg-neutral-100 hover:text-neutral-950 hover:border-neutral-100
  focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-950
  active:scale-[0.98]
  transition-colors duration-500
  overflow-hidden
">
  {/* Light shaft — sweeps left to right on group-hover */}
  <div className="
    absolute inset-0
    bg-gradient-to-r from-transparent via-white/30 to-transparent
    -translate-x-[200%] skew-x-[-20deg]
    group-hover:translate-x-[200%]
    transition-transform duration-700 ease-in-out
    pointer-events-none
  " />
  <span className="relative z-10">Investigate</span>
</button>

{/* Ghost Noir */}
<button className="
  group relative
  px-6 py-3
  bg-transparent text-neutral-300
  border border-neutral-600
  font-serif italic tracking-widest
  hover:border-neutral-200 hover:text-neutral-100
  focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 focus:ring-offset-neutral-950
  active:scale-[0.98]
  transition-colors duration-500
  overflow-hidden
">
  <div className="
    absolute inset-0
    bg-gradient-to-r from-transparent via-white/15 to-transparent
    -translate-x-[200%] skew-x-[-20deg]
    group-hover:translate-x-[200%]
    transition-transform duration-700 ease-in-out
    pointer-events-none
  " />
  <span className="relative z-10">Read More</span>
</button>

{/* Crimson Accent */}
<button className="
  group relative
  px-6 py-3
  bg-[#c41e3a] text-white
  font-serif italic tracking-widest
  hover:bg-[#a01830]
  focus:outline-none focus:ring-2 focus:ring-[#c41e3a] focus:ring-offset-2 focus:ring-offset-neutral-950
  active:scale-[0.98]
  transition-colors duration-500
  overflow-hidden
">
  <div className="
    absolute inset-0
    bg-gradient-to-r from-transparent via-white/20 to-transparent
    -translate-x-[200%] skew-x-[-20deg]
    group-hover:translate-x-[200%]
    transition-transform duration-700 ease-in-out
    pointer-events-none
  " />
  <span className="relative z-10">Confess</span>
</button>
```

**Card**
```html
<div className="
  group relative
  bg-neutral-900 border border-neutral-800
  p-8
  overflow-hidden
  hover:border-neutral-600
  transition-colors duration-700
  cursor-crosshair
">
  {/* Venetian blinds light pattern — barely visible on hover */}
  <div className="
    absolute inset-0
    opacity-0 group-hover:opacity-[0.06]
    transition-opacity duration-700
    bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,#fff_4px,#fff_6px)]
    pointer-events-none
  " />

  {/* Diagonal light shaft — shifts on hover */}
  <div className="
    absolute -top-20 -right-20 w-40 h-80
    bg-gradient-to-b from-white/5 to-transparent
    rotate-45
    group-hover:from-white/10
    transition-all duration-700
    pointer-events-none
  " />

  <div className="relative">
    <p className="text-neutral-500 text-xs uppercase tracking-[0.2em] mb-3">Case File #47</p>
    <h3 className="text-neutral-100 text-xl font-serif italic mb-3 group-hover:text-white transition-colors duration-500">
      The Last Witness
    </h3>
    <p className="text-neutral-400 text-sm leading-relaxed group-hover:text-neutral-300 transition-colors duration-500">
      The rain hammered against the window as the detective studied the photograph.
      Something didn't add up.
    </p>
    {/* Crimson bleed line — expands from 48px to full width on hover */}
    <div className="mt-6 h-[2px] bg-[#c41e3a] w-12 group-hover:w-full transition-all duration-700 ease-out" />
  </div>
</div>
```


---


### 街机CRT (Arcade CRT)

**Slug**: `arcade-crt`

#### Description
80-90s arcade monitor aesthetics featuring scanlines, screen curvature, neon glow, and RGB chromatic aberration effects. Ideal for gaming, retro tech, and creative projects.

#### Design Philosophy
Arcade CRT style recreates the nostalgic glow of 80-90s arcade CRT monitors.

Core principles:
- Scanline overlay: all content areas use repeating-linear-gradient scanline effects
- Neon glow: key elements use text-shadow/box-shadow glow effects
- Pixel fonts: all text uses monospace fonts
- Ultra-dark backgrounds: near-pure black backgrounds maximize neon contrast
- RGB chromatic aberration: headings use magenta and cyan offset text-shadow
- High saturation: only high-saturation neon colors are used

#### Do's (必须做)
1. Use scanline overlay on all content areas
2. Apply neon glow (text-shadow/box-shadow) to key elements
3. Use monospace/pixel fonts for all text
4. Keep backgrounds near-black to maximize neon contrast
5. Add RGB chromatic aberration on headlines
6. Use high-saturation neon colors only

#### Don'ts (禁止做)
1. Don't use pastel or muted colors
2. Don't use serif or sans-serif body fonts
3. Don't use rounded corners larger than 4px
4. Don't use subtle shadows - only neon glows
5. Don't use gradients that aren't neon-to-dark

#### AI Rules
```
STYLE: Arcade CRT
TYPE: Retro gaming CRT monitor aesthetic

MUST USE:
- Background: Always near-black (#050505 or #0a0a0a)
- Primary accent: Neon green (#39ff14) for main interactive elements
- Secondary accents: Magenta (#ff00ff), Cyan (#00ffff), Red (#ff2a2a), Yellow (#FFFF00)
- All text must use monospace or pixel fonts (font-mono)
- Scanline overlay: repeating-linear-gradient on content areas
- RGB chromatic aberration: text-shadow with offset magenta and cyan on headlines
- Neon glow: box-shadow with color matching the element
- uppercase text with wide letter-spacing for labels

MUST AVOID:
- Light/white backgrounds
- Pastel or muted colors
- Serif or sans-serif fonts
- Large border-radius (max 4px)
- Subtle/standard shadows (use neon glow only)
- Gradients that aren't neon-to-dark

Animation & Interaction Rules:
- Neon Breathing: On hover, outer glow (box-shadow) must visibly expand, optionally with subtle animate-pulse to simulate voltage instability flicker.
- Arcade Button Press: Active state (:active) must simulate the feel of a real arcade button being slammed down hard. Use strong displacement active:translate-y-[4px] and instantly change shadow size.
- CRT Distortion: On interaction, RGB chromatic aberration can be amplified by changing text-shadow offsets (magenta and cyan separation distance).
- Instant Feedback: CRT has no smooth physical inertia; interaction response time should be short, such as duration-100 or duration-150.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#39ff14]/40`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(57,255,20,0.3)]`
- Medium: `shadow-[0_0_20px_rgba(57,255,20,0.5)]`
- Large: `shadow-[0_0_40px_rgba(57,255,20,0.8)]`
- Hover: `shadow-[0_0_30px_rgba(57,255,20,0.6)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-[0.15em]`
- Body: `font-mono text-sm`

**Required Classes**

Button:
```
font-mono
uppercase
tracking-[0.2em]
border-2
transition-all duration-200
```

Card:
```
bg-[#0a0a0a]
border-2
```

Input:
```
bg-black
border-2
text-[#39ff14]
font-mono
focus:border-[#39ff14]
focus:shadow-[0_0_15px_rgba(57,255,20,0.3)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^shadow-(?!\[)`, `^rounded-[23]xl`, `^rounded-full`, `^font-serif`, `^font-sans`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative px-8 py-4 bg-[#39ff14]/10 text-[#39ff14] font-mono text-xl uppercase tracking-[0.2em] border-2 border-[#39ff14] shadow-[0_0_15px_rgba(57,255,20,0.4),inset_0_0_15px_rgba(57,255,20,0.2)] hover:bg-[#39ff14] hover:text-black hover:shadow-[0_0_40px_rgba(57,255,20,0.8),inset_0_0_20px_rgba(57,255,20,0.5)] active:translate-y-[6px] active:shadow-[0_0_10px_rgba(57,255,20,0.5)] transition-all duration-150">
  <span className="group-hover:animate-pulse">INSERT COIN</span>
</button>
```

**Card**
```html
<div className="group bg-[#0a0a0a] border-2 border-[#39ff14]/30 p-6 relative overflow-hidden hover:border-[#39ff14] hover:shadow-[0_0_30px_rgba(57,255,20,0.2)] hover:-translate-y-1 transition-all duration-200 cursor-crosshair">
  {/* Scanline overlay */}
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(57,255,20,0.05)_2px,rgba(57,255,20,0.05)_4px)] pointer-events-none group-hover:opacity-50 transition-opacity duration-200" />

  <div className="relative">
    <div className="flex items-center gap-3 mb-3">
      <div className="w-3 h-3 bg-[#39ff14] shadow-[0_0_10px_rgba(57,255,20,0.8)] group-hover:animate-ping" />
      <h3 className="text-[#39ff14] font-mono text-xs uppercase tracking-[0.2em]">Game Module</h3>
    </div>
    <h4 className="text-white text-xl font-mono font-bold mb-2 transition-all duration-100 group-hover:text-[#39ff14] group-active:translate-x-[2px]" style={{textShadow: '-2px 0 #ff00ff, 2px 0 #00ffff'}}>
      TITLE HERE
    </h4>
    <p className="text-[#39ff14]/60 font-mono text-sm leading-relaxed group-hover:text-[#39ff14]/90">
      Description text with terminal green tint.
    </p>
  </div>
</div>
```


---


### Frutiger Aero (Frutiger Aero)

**Slug**: `frutiger-aero`

#### Description
Glass-textured aesthetics from the Windows Vista/7 era, blending sky-blue gradients, translucent frosted glass panels, and natural elements for a fresh, airy digital-nature feel.

#### Design Philosophy
Frutiger Aero draws inspiration from the Windows Vista/7 Aero glass aesthetic -- sky-blue gradients, frosted glass panels, water droplets, and a feeling of floating in clean air.

Core principles:
- Translucency: Semi-transparent white panels over bright sky gradients
- Nature meets technology: Organic shapes, bubbles, and leaves blended with digital UI
- Light and airy: Generous whitespace, soft shadows, rounded corners everywhere
- Glossy reflections: Subtle gradient highlights that simulate light on glass surfaces

#### Do's (必须做)
1. Use sky blue gradient backgrounds (from-sky-300 to-sky-500)
2. Apply backdrop-blur and translucent white panels (bg-white/30 to bg-white/50)
3. Use large rounded corners (rounded-2xl to rounded-3xl)
4. Add glossy top-half highlight div (absolute, bg-gradient-to-b from-white/60 to-white/10, h-1/2) on buttons and cards
5. Include nature-inspired decorative elements (bubbles, leaves, water) as absolute positioned blur divs
6. Use clean sans-serif typography
7. Aurora orbs on cards: two absolute blur-3xl divs (green + sky-blue) that group-hover:scale-150
8. Buttons use active:scale-95 for bouncy jelly press physics
9. Luminous glow on button hover: hover:shadow-[0_8px_20px_rgba(2,132,199,0.6)]
10. focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500 for all focusable elements

#### Don'ts (禁止做)
1. Don't use dark or black backgrounds
2. Don't use sharp corners or angular shapes
3. Don't use neon or harsh colors
4. Don't use monospace fonts
5. Don't use flat/matte surfaces without any glass effect
6. Don't use active:scale-[0.98] -- use active:scale-95 for the jelly bounce physics
7. Don't use focus:ring without focus:ring-offset-sky-500 (focus ring invisible on sky blue background)

#### AI Rules
```
You are a Frutiger Aero design style expert. All generated code must follow these rules:

## Absolute Forbidden

- Dark or black backgrounds (bg-black, bg-gray-900, bg-slate-900)
- Sharp corners (rounded-none, rounded-sm)
- Monospace fonts (font-mono)
- Neon glow effects or harsh saturated colors
- Flat/matte surfaces without glass effect
- active:scale-[0.98] -- use active:scale-95 instead (Aero has jelly bounce physics)
- focus:ring without focus:ring-offset-sky-500 (ring invisible on sky-blue background)

## Must Follow

- Background: Sky blue gradients (from-sky-300 to-sky-500)
- Cards: Semi-transparent white (bg-white/30 to bg-white/70) with backdrop-blur-xl
- Borders: Subtle white borders (border-white/30 to border-white/60)
- Rounded corners: Always large (rounded-2xl or rounded-3xl)
- Glossy highlight: Absolute div with h-1/2 bg-gradient-to-b from-white/60 to-white/10 on buttons and cards
- Glass effect is mandatory on all cards and panels
- Generous padding and airy spacing

## Animation & Interaction Rules

- Aero Glossy Layer: Every button and major card MUST include an absolute div positioned at top-0 left-0 right-0 h-1/2 with bg-gradient-to-b from-white/60 to-white/10 rounded-t-full (or rounded-t-3xl for cards). On group-hover, this brightens to from-white/80 to-white/20. This simulates the classic Web 2.0 glossy top-half glass reflection.
- Aurora Orbs: Cards use two absolutely-positioned blur-3xl rounded-full divs -- one with bg-green-400/20 (top-right corner, -top-16 -right-16 w-40 h-40) and one with bg-sky-400/20 (bottom-left corner). On group-hover, both scale to group-hover:scale-150 and intensify (green-300/30, sky-300/30). Use transition-all duration-500. The orbs create the aurora/glow atmosphere.
- Luminous Glow: Primary buttons hover to hover:shadow-[0_8px_20px_rgba(2,132,199,0.6),0_0_30px_rgba(125,211,252,0.3),...]. The double shadow (directional + ambient) creates the luminous aqua water glow.
- Jelly Bounce: active:scale-95 (not 0.98 or 0.97). The 5% compression is the Aero "jelly" squash. Combined with active:translate-y-0 and active:shadow collapsing, it bounces back. use active:shadow-[0_2px_5px_...] (small shadow indicates pressed state).
- Card Float: hover:-translate-y-2 hover:scale-[1.02] -- more dramatic than other styles because glass panels feel lighter. Shadow expands to hover:shadow-[0_16px_48px_...].
- Focus Ring on Sky: focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500. Without ring-offset-sky-500, the ring blends into the sky-blue background and becomes invisible.
- Easing: duration-200 ease-out for buttons. duration-300 ease-out for cards. Aurora orbs use duration-500 (they expand slowly, like clouds).

## Color Palette

Sky gradients: from-sky-300, via-sky-400, to-sky-500
Glass panels: bg-white/30, bg-white/40, bg-white/50, bg-white/70
Text: text-white (on dark areas), text-sky-900 (on glass), text-sky-700/80 (secondary)
Accents: emerald-300/green-400 (nature aurora), sky-200/sky-300 (water aurora)

## Unique Elements (Aero-Only)

1. Glossy top-half: absolute h-1/2 white gradient overlay on every button and card
2. Aurora orbs: two blur-3xl absolute divs (green + sky-blue) that expand on group-hover
3. Luminous glow: multi-shadow combining directional + ambient sky-blue glow
4. Jelly bounce: active:scale-95 (5% compression, bigger than other styles)
5. Rounded-full capsule buttons (never square)

## Self Check

After generating code verify:
1. Sky-blue gradient background present
2. All panels have backdrop-blur and semi-transparent white backgrounds
3. Glossy top-half div present on buttons (h-1/2 absolute) and cards
4. Aurora orbs present on cards (green + sky-blue blur-3xl, group-hover:scale-150)
5. active:scale-95 (not scale-[0.98] or scale-[0.97])
6. focus:ring-offset-sky-500 on all focusable elements
7. Large rounded corners on all elements (rounded-2xl+)
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/40`
- Radius: `rounded-3xl`

**Shadow**
- Small: `shadow-md`
- Medium: `shadow-lg`
- Large: `shadow-2xl`
- Hover: `hover:shadow-xl`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-sans font-bold text-white drop-shadow-lg`
- Body: `font-sans text-white/80`

**Required Classes**

Button:
```
bg-gradient-to-b from-white/90 to-white/60
backdrop-blur-md
border border-white/50
rounded-full
text-sky-700
shadow-lg
hover:shadow-xl
transition-all duration-300
```

Card:
```
bg-white/40 backdrop-blur-xl
border border-white/50
rounded-3xl
shadow-xl
```

Input:
```
bg-white/30 backdrop-blur-md
border border-white/40
rounded-2xl
text-sky-900 placeholder:text-sky-400/50
focus:outline-none focus:border-white/70 focus:bg-white/40
transition-all
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-gray-950`, `bg-slate-900`, `rounded-none`, `rounded-sm`, `font-mono`, `border-black`, `border-gray-900`, `backdrop-blur-sm`

Patterns: `^bg-(black|gray-9|slate-9)`, `^rounded-(none|sm)$`, `^font-mono$`, `^border-(black|gray-9)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary Aero Glossy Button */}
<button className="
  group relative
  px-8 py-3
  bg-gradient-to-b from-sky-400 to-sky-600
  border border-sky-300/50
  rounded-full
  text-white font-bold text-sm
  shadow-[0_4px_10px_rgba(2,132,199,0.4),inset_0_-3px_5px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.3)]
  hover:shadow-[0_8px_20px_rgba(2,132,199,0.6),0_0_30px_rgba(125,211,252,0.3),inset_0_-3px_5px_rgba(0,0,0,0.2)]
  hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500
  active:scale-95 active:translate-y-0
  active:shadow-[0_2px_5px_rgba(2,132,199,0.3),inset_0_2px_4px_rgba(0,0,0,0.3)]
  transition-all duration-200 ease-out
  overflow-hidden
">
  {/* Glossy top-half highlight — brightens on group-hover */}
  <div className="
    absolute top-0 left-0 right-0 h-1/2
    bg-gradient-to-b from-white/60 to-white/10
    rounded-t-full
    group-hover:from-white/80 group-hover:to-white/20
    transition-colors duration-200
    pointer-events-none
  " />
  <span className="relative z-10 drop-shadow-sm">Glossy Button</span>
</button>

{/* Secondary Aero Glass Button */}
<button className="
  group relative
  px-8 py-3
  bg-gradient-to-b from-white/80 to-white/50
  backdrop-blur-md border border-white/60
  rounded-full
  text-sky-700 font-bold text-sm
  shadow-[0_4px_10px_rgba(255,255,255,0.4),inset_0_1px_1px_rgba(255,255,255,0.8)]
  hover:shadow-[0_8px_20px_rgba(255,255,255,0.5)] hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-sky-500
  active:scale-95 active:translate-y-0
  transition-all duration-200 ease-out
  overflow-hidden
">
  <div className="
    absolute top-0 left-0 right-0 h-1/2
    bg-gradient-to-b from-white/70 to-white/20
    rounded-t-full
    group-hover:from-white/90 group-hover:to-white/30
    transition-colors duration-200
    pointer-events-none
  " />
  <span className="relative z-10">Glass Button</span>
</button>
```

**Card**
```html
<div className="
  group relative
  p-8
  bg-gradient-to-br from-white/70 to-white/30
  backdrop-blur-xl
  border border-white/60
  rounded-3xl
  shadow-[0_8px_32px_rgba(14,165,233,0.15),inset_0_0_0_1px_rgba(255,255,255,0.8)]
  hover:shadow-[0_16px_48px_rgba(14,165,233,0.3),0_0_60px_rgba(125,211,252,0.15),inset_0_0_0_1px_rgba(255,255,255,0.9)]
  hover:-translate-y-2 hover:scale-[1.02]
  transition-all duration-300 ease-out
  overflow-hidden
  cursor-pointer
">
  {/* Aurora orb — green, top-right, expands on group-hover */}
  <div className="
    absolute -top-16 -right-16 w-40 h-40
    bg-green-400/20 blur-3xl rounded-full
    group-hover:scale-150 group-hover:bg-green-300/30
    transition-all duration-500
    pointer-events-none
  " />
  {/* Aurora orb — sky-blue, bottom-left, expands on group-hover */}
  <div className="
    absolute -bottom-16 -left-16 w-40 h-40
    bg-sky-400/20 blur-3xl rounded-full
    group-hover:scale-150 group-hover:bg-sky-300/30
    transition-all duration-500
    pointer-events-none
  " />

  {/* Glossy top-edge highlight */}
  <div className="
    absolute top-0 left-0 right-0 h-1/3
    bg-gradient-to-b from-white/50 to-transparent
    rounded-t-3xl
    pointer-events-none
  " />

  <div className="relative z-10">
    <h3 className="text-xl font-semibold text-sky-900 mb-2">
      Aero Card
    </h3>
    <p className="text-sky-700/80 leading-relaxed">
      Frosted glass panel with aurora atmosphere and glossy reflection.
    </p>
  </div>
</div>
```


---


### 反设计 (Anti-Design)

**Slug**: `anti-design`

#### Description
An experimental brutalist style that deliberately breaks traditional UI conventions, with ultra-thick borders, high-saturation colors, and irregular typography.

#### Design Philosophy
Anti-Design deliberately breaks every UI convention. Where traditional design seeks harmony, Anti-Design seeks visual conflict.

Core principles:
- Ultra-thick black borders (4-8px) on every element
- Sharp corners only (border-radius: 0) - nothing is ever rounded
- High-saturation primary colors: red, blue, yellow, magenta, cyan, green
- Rotated text and elements at odd angles (-3deg to 5deg)
- Dramatically mixed font sizes within the same section
- Asymmetric, uneven borders (thicker on right/bottom)
- Intentional visual conflict between adjacent elements
- Hard offset shadows only - no soft shadows ever

#### Do's (必须做)
1. Use ultra-thick black borders (4-8px) on everything
2. Use sharp corners only (border-radius: 0)
3. Apply high-saturation primary colors (red, blue, yellow, magenta)
4. Rotate text and elements at odd angles (-3deg to 5deg)
5. Mix font sizes dramatically within the same section
6. Use asymmetric, uneven borders (thicker on right/bottom)
7. Create intentional visual conflict between adjacent elements
8. Use hard offset shadows only (e.g., shadow-[8px_8px_0_#000])
9. Use font-black weight and uppercase for emphasis
10. Use aggressive hover states with abrupt color flips and border jumps
11. Break alignment on interaction using translate/rotate/size shifts
12. Prefer transition-none or linear timing for raw feedback

#### Don'ts (禁止做)
1. Don't use rounded corners of any kind
2. Don't use subtle or muted colors
3. Don't use consistent spacing or alignment
4. Don't use drop shadows or soft shadows
5. Don't use gradients (flat colors only)
6. Don't make things pretty or harmonious
7. Don't use backdrop-blur or translucency
8. Don't use smooth polished easing (ease-in-out, spring, bounce)

#### AI Rules
```
You are an Anti-Design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rounded corners of any kind (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full)
- Subtle or muted colors (grays, pastels, earth tones)
- Soft shadows (shadow-sm, shadow-md, shadow-lg, shadow-xl)
- Gradients of any kind (all colors must be flat high-saturation)
- Backdrop blur or translucency effects
- Consistent spacing or alignment that looks "designed"
- Harmonious color combinations

## Must Follow

- Borders: Always 4-8px solid black. Thicker on right and bottom for depth
- Border-radius: ALWAYS 0. Never round anything
- Colors: Only high-saturation primaries - #FF0000, #0000FF, #FFFF00, #FF00FF, #00FF00, #00FFFF
- Backgrounds: Alternate between white, yellow, and other bright colors per section
- Shadows: Hard offset only (e.g., shadow-[8px_8px_0_#000]). No soft shadows
- Text: Mix sizes dramatically. Use font-black weight. Uppercase for emphasis
- Layout: Intentionally break grid alignment. Rotate elements (-3deg to 5deg)
- Fonts: Bold sans-serif. Mix sizes within sections for visual tension
- White space: Can be either very tight or exaggerated - never "just right"

## Animation & Interaction Rules

- Aggressive hover only: abrupt color collisions, border-thickness jumps, and harsh offsets
- Broken layout on interaction is encouraged: alignment can intentionally fail on hover/focus
- Zero polish: use transition-none or linear with near-zero duration; no smooth easing curves
- Focus states should be louder than default states (thicker borders, stronger shadows, rotation/shift)

## Color Palette

Primary:
- Pure Black: #000000 (borders, text, shadows)
- Pure White: #FFFFFF (backgrounds)
- Red: #FF0000 (primary accent, buttons)
- Blue: #0000FF (secondary accent, focus states)
- Yellow: #FFFF00 (section backgrounds, highlights)
- Magenta: #FF00FF (accent)
- Cyan: #00FFFF (accent)
- Green: #00FF00 (accent)

## Special Elements

- Ultra-thick borders on every element
- Hard offset shadows with no blur
- Rotated/tilted elements for visual disruption
- Dramatically mixed font sizes
- Asymmetric border widths
- Alternating high-saturation section backgrounds
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[4px_4px_0_#000]`
- Medium: `shadow-[8px_8px_0_#000]`
- Large: `shadow-[12px_12px_0_#000]`
- Hover: `hover:shadow-[12px_12px_0_#000]`

**Interaction**
- Hover Translate: `hover:-translate-x-1 hover:-translate-y-1`
- Transition: `transition-all duration-100`

**Typography**
- Heading: `font-black uppercase`
- Body: `font-bold text-sm`

**Required Classes**

Button:
```
rounded-none
border-4
border-black
font-black
uppercase
shadow-[4px_4px_0_#000]
transition-all duration-100
```

Card:
```
rounded-none
border-4
border-black
shadow-[8px_8px_0_#000]
bg-white
```

Input:
```
rounded-none
border-4
border-black
font-bold
focus:outline-none
focus:border-[#0000FF]
focus:shadow-[4px_4px_0_#0000FF]
```

**Forbidden**

Classes: `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow`

Patterns: `^rounded-(?!none)`, `^shadow-(?!\[|none)`, `^bg-gradient-`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-6 py-3
  bg-[#FF0000] text-white
  font-black text-xl uppercase
  border-4 border-black
  rounded-none
  shadow-[8px_8px_0_#000]
  hover:bg-[#0000FF] hover:text-[#FFFF00]
  hover:border-8 hover:shadow-[12px_12px_0_#000]
  hover:-translate-x-2 hover:rotate-3
  active:bg-[#FFFF00] active:text-black
  active:shadow-none active:translate-x-[8px] active:translate-y-[8px]
  transition-none
  cursor-help
">
  CLICK ME
</button>
```

**Card**
```html
<div className="
  bg-white
  border-4 border-black
  p-6
  rounded-none
  shadow-[8px_8px_0_#000]
  hover:bg-[#FFFF00]
  hover:border-8
  hover:shadow-[12px_12px_0_#000]
  hover:-translate-x-2 hover:-translate-y-2
  hover:rotate-1
  transition-none
">
  <h3 className="text-2xl font-black uppercase mb-2">CARD TITLE</h3>
  <p className="text-sm font-bold text-black/70">Raw brutalist content block</p>
</div>
```


---


### 网页粗野主义 (Brutalist Web)

**Slug**: `brutalist-web`

#### Description
A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form.

#### Design Philosophy
Brutalist Web embraces the raw aesthetics of the early 1990s internet. Content is king; decoration is irrelevant.

Core principles:
- Content over decoration - every element serves an informational purpose
- System fonts and monospace stacks - no custom web fonts needed
- Unstyled HTML feel - as if CSS barely exists
- Intentional lo-fi appearance - the roughness is the design
- Blue underlined links, purple visited links - classic browser defaults
- Times New Roman or Georgia for headings, system sans-serif or monospace for body
- Pure white backgrounds with black text - maximum readability
- Thin 1px borders only - no thick borders, no decorative frames
- Minimal or zero padding - content touches edges
- No visual hierarchy tricks - the document structure IS the hierarchy

#### Do's (必须做)
1. Use pure white (#ffffff) backgrounds for all sections
2. Use system font stacks: font-mono or system-ui, sans-serif for body text
3. Use Times New Roman or Georgia (font-serif) for headings
4. Use blue (#0000ff) underlined links as the primary interactive element
5. Use thin 1px solid borders for structural separation
6. Use no border-radius anywhere (border-radius: 0 or rounded-none)
7. Keep layout linear and document-like - single column preferred
8. Use minimal spacing - tight margins and padding
9. Let HTML structure define visual hierarchy (h1 > h2 > h3 > p)
10. Use plain black (#000000) text on white background
11. Buttons use transition-none for zero-delay state switching
12. Input focus uses focus:bg-[#ffffcc] yellow highlight, simulating 90s browser selection feel

#### Don'ts (禁止做)
1. Don't use rounded corners of any kind
2. Don't use box shadows or text shadows
3. Don't use gradients or background images
4. Don't use CSS animations or transitions of any kind (transition-none is the rule)
5. Don't use hover effects beyond underline or color changes
6. Don't use custom web fonts or icon fonts
7. Don't use background colors other than white
8. Don't use large padding or excessive whitespace
9. Don't use card-based layouts with visual embellishment
10. Don't use focus:ring -- use focus:outline-dotted instead

#### AI Rules
```
You are a Brutalist Web style frontend development expert. All generated code must recreate the raw, unstyled feel of 1990s early internet HTML pages.

## Absolutely Forbidden

- Rounded corners of any kind (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full)
- Box shadows or text shadows of any kind
- Gradients of any kind (backgrounds must be flat white)
- CSS animations, transitions, or transforms -- use transition-none everywhere
- Hover effects beyond underline or color changes
- Custom web fonts or icon fonts (system fonts only)
- Background colors other than white or #dfdfdf (system silver)
- Thick borders (max 2px for bevel effect, else 1px)
- Large padding or spacing that feels "designed"
- Card-style layouts with decorative embellishment
- focus:ring-* (use focus:outline-dotted instead)

## Must Follow

- Backgrounds: Pure white (#ffffff) everywhere, #dfdfdf for system UI elements
- Text: Black (#000000) only, no gray shades
- Links: Blue (#0000ff) underlined, visited links purple (#551a8b), hover red (#ff0000)
- Borders: 1px solid black for content; 2px bevel (border-t-white border-l-white border-r-[#808080] border-b-[#808080]) for buttons
- Border-radius: ALWAYS 0, never round anything
- Headings: Times New Roman or Georgia (font-serif), bold
- Body text: System monospace or sans-serif font stack
- Layout: Linear, document-flow, single-column preferred
- Spacing: Minimal - tight margins, small padding (px-2 py-1, px-4 py-2)
- Hierarchy: Rely on HTML heading levels (h1-h6) not visual tricks
- Interactive elements: Windows 95-style bevel buttons

## Animation & Interaction Rules

- Zero Transition: ALL state changes must be instant. Always add transition-none to every interactive element. Hover, active, focus state switches happen at 0ms -- this IS the brutalist physics.
- Native Button Bevel: Buttons use the Windows 95 raised border illusion: border-2 border-t-white border-l-white border-r-[#808080] border-b-[#808080]. On :active, reverse the bevel: active:border-t-[#808080] active:border-l-[#808080] active:border-r-white active:border-b-white. No shadow, no scale, no translate -- pure border reversal.
- Raw Focus: Never use focus:ring. Use focus:outline-dotted focus:outline-1 focus:outline-black focus:outline-offset-1. For inputs, add focus:bg-[#ffffcc] to simulate the 90s yellow text selection highlight.
- Link Hover: Only color change (blue to red) and existing underline. No other effects.

## Color Palette

- Pure Black: #000000 (all text, borders)
- Pure White: #ffffff (all backgrounds)
- System Silver: #dfdfdf (button backgrounds)
- System Gray: #808080 (border shadow side)
- Link Blue: #0000ff (hyperlinks)
- Visited Purple: #551a8b (visited links)
- Red: #ff0000 (hover state, errors)
- Green: #008000 (success, secondary accent)
- Yellow: #ffffcc (focus highlight)

## Visual References

Think of: early Craigslist, academic personal homepages, W3C specification pages, plain HTML with minimal CSS. The page should look like it was made in Notepad and uploaded via FTP.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: ``

**Typography**
- Heading: `font-serif font-bold`
- Body: `font-mono text-sm`

**Required Classes**

Button:
```
rounded-none
border
border-black
font-mono
bg-white
```

Card:
```
rounded-none
border
border-black
bg-white
```

Input:
```
rounded-none
border
border-black
font-mono
bg-white
```

**Forbidden**

Classes: `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow`

Patterns: `^rounded-(?!none)`, `^shadow-(?!none)`, `^bg-gradient-`, `^backdrop-blur`, `^animate-`, `^transition-`, `^duration-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-4 py-1.5
  bg-[#dfdfdf] text-black
  font-sans text-sm
  border-2 border-t-white border-l-white border-r-[#808080] border-b-[#808080]
  rounded-none
  cursor-pointer
  hover:bg-[#e9e9e9]
  active:border-t-[#808080] active:border-l-[#808080] active:border-r-white active:border-b-white
  transition-none
">
  Submit Form
</button>
```

**Card**
```html
<div className="
  bg-white
  border border-black
  p-4
  rounded-none
">
  <h3 className="font-serif text-lg font-bold mb-1">Section Title</h3>
  <p className="font-mono text-sm text-black">Plain content block with minimal styling.</p>
  <a href="#" className="text-[#0000ff] underline text-sm font-mono">Read more</a>
</div>
```


---


### 全息渐变 (Holographic)

**Slug**: `holographic`

#### Description
Rainbow spectrum iridescent gradient aesthetics simulating holographic prismatic refraction and dynamic light effects for an otherworldly iridescent experience.

#### Design Philosophy
Holographic simulates the prismatic beauty of holographic foil -- rainbow spectrum gradients that shift and flow with viewing angle, creating an otherworldly iridescent experience.

Core principles:
- Prismatic refraction: multi-color spectrum gradients with 3+ color stops
- Cosmic deep space: dark backgrounds make holographic elements leap forward
- Dynamic light effects: gradient position animation simulates holographic foil angle changes
- Translucent layering: glass-textured cards with backdrop blur

#### Do's (必须做)
1. Use multi-color gradient backgrounds (linear-gradient with 3+ color stops)
2. Apply background-size animation for moving gradient effects
3. Use semi-transparent cards over dark cosmic backgrounds
4. Add prismatic box-shadow with multiple colored glows
5. Include holographic sticker badges with full spectrum gradients
6. Use dark purple/navy backgrounds (#0a0a1f, #1a0b2e) to make holographic elements pop
7. Spectrum Shift: use bg-[length:200%_auto] on gradient buttons + hover:bg-right for lateral color flow
8. Prismatic Glow: buttons hover to multi-color shadow
9. Buttons must have active:scale-95 + focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f]
10. Card gradient text uses bg-[length:200%_auto] + group-hover:bg-right for synchronized color shift

#### Don'ts (禁止做)
1. Don't use flat solid colors without gradient
2. Don't use light/white backgrounds (kills the holographic effect)
3. Don't use muted or desaturated colors
4. Don't use sharp corners without any glow
5. Don't use more than 2 non-gradient elements in a row
6. Don't use hover:scale-105 alone -- always combine with gradient shift and prismatic shadow
7. Don't omit active:scale-95 from buttons (no tactile confirmation)
8. Don't use focus:ring without focus:ring-offset-[#0a0a1f] (ring invisible on dark cosmic background)

#### AI Rules
```
## Holographic Style Rules
- Background: Deep dark (#0a0a1f or #1a0b2e) - cosmic/space feel
- Primary effect: Rainbow spectrum gradients using linear-gradient with 3+ stops
- Gradient colors: #ff0080 -> #ff6b00 -> #ffd700 -> #00ff88 -> #00d4ff -> #6366f1 -> #a855f7
- Cards: Semi-transparent (bg-white/5 to bg-white/10) with backdrop-blur
- Text highlights: Use bg-clip-text with gradient for headings
- Borders: Subtle white/10 to white/20 with purple/prismatic glow on hover
- Animate gradients: Use background-size: 200% and animate background-position
- Holographic badges: Small elements with full rainbow gradient + shimmer overlay
- All interactive elements should have prismatic box-shadow on hover
- Never use light/white backgrounds
- Never use flat solid colors without gradient treatment
- Never use muted or desaturated color palettes

## Animation & Interaction Rules

### Spectrum Shift (Gradient Slide)
- Apply bg-[length:200%_auto] to all gradient buttons and card headings
- On hover: hover:bg-right — gradient slides laterally, simulating angle-dependent holographic foil color shift
- Transition: transition-[background-position] duration-500 (smooth spectrum sweep)
- NEVER use hover:bg-right without bg-[length:200%_auto] (no movement without oversized gradient)

### Prismatic Glow (Multi-Color Shadow)
- Button hover: hover:shadow-[0_0_40px_rgba(0,212,255,0.6),0_0_20px_rgba(255,0,128,0.4)] — dual cyan+magenta glows
- Card hover: hover:shadow-[0_0_30px_rgba(147,51,234,0.3)] — purple prism glow
- Resting shadow always present: shadow-[0_0_20px_rgba(147,51,234,0.5)]

### Liquid Glass (Card Float)
- Always use group class on card containers
- Cards: hover:-translate-y-2 hover:bg-white/10 hover:border-purple-400/40
- Card headings use Spectrum Shift synchronized with card hover via group-hover:bg-right

### Jelly Press (Active State)
- All buttons: active:scale-95 active:translate-y-0 — jelly press confirms interaction
- Focus: focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f]
- ring-offset-[#0a0a1f] mandatory — ring invisible on dark cosmic background without it

### Duration
- Button transitions: duration-500 ease-out (slow = luxurious holographic feel)
- Card transitions: duration-300 ease-out
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_0_15px_rgba(147,51,234,0.2)]`
- Medium: `shadow-[0_0_25px_rgba(147,51,234,0.4)]`
- Large: `shadow-[0_0_50px_rgba(147,51,234,0.6)]`
- Hover: `shadow-[0_0_30px_rgba(147,51,234,0.4)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500`

**Typography**
- Heading: `font-sans font-bold`
- Body: `font-sans text-sm`

**Required Classes**

Button:
```
rounded-
bg-gradient-
transition-all
shadow-[0_0_
```

Card:
```
backdrop-blur
bg-white/
rounded-
border
```

Input:
```
backdrop-blur
bg-white/
rounded-
focus:border-purple
focus:shadow-[0_0_
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `shadow-sm`, `shadow-md`, `shadow-lg`, `text-gray-900`, `text-black`, `rounded-none`, `border-black`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^bg-slate-[1-3]`, `^shadow-(?!\[)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3.5 rounded-xl font-bold tracking-wide
  text-white
  bg-gradient-to-r from-[#ff0080] via-[#ffd700] to-[#00d4ff]
  bg-[length:200%_auto]
  shadow-[0_0_20px_rgba(147,51,234,0.5)]
  hover:bg-right
  hover:shadow-[0_0_40px_rgba(0,212,255,0.6),0_0_20px_rgba(255,0,128,0.4)]
  hover:-translate-y-1
  focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f]
  active:scale-95 active:translate-y-0
  active:shadow-[0_0_10px_rgba(147,51,234,0.5)]
  transition-all duration-500 ease-out
">
  Activate Portal
</button>
```

**Card**
```html
<div className="
  group
  bg-white/5 backdrop-blur-xl rounded-2xl p-6
  border border-white/10 shadow-xl
  hover:bg-white/10 hover:border-purple-400/40
  hover:-translate-y-2
  hover:shadow-[0_0_30px_rgba(147,51,234,0.3)]
  transition-all duration-300 ease-out
  cursor-pointer
">
  <h3 className="
    text-lg font-bold mb-2
    text-transparent bg-clip-text
    bg-gradient-to-r from-[#ff0080] via-[#ffd700] to-[#00d4ff]
    bg-[length:200%_auto] group-hover:bg-right
    transition-[background-position] duration-500
  ">
    Holographic Card
  </h3>
  <p className="text-white/60 text-sm group-hover:text-white/75 transition-colors duration-300">
    Prismatic glass panel with rainbow border glow
  </p>
</div>
```


---


### 生成艺术 (Generative Art)

**Slug**: `generative-art`

#### Description
Algorithm-driven procedural visual aesthetics using mathematical functions, noise textures, and parametric graphics to create unique dynamic interfaces. Ideal for creative coding, data visualization, and art projects.

#### Design Philosophy
Generative Art style originates from creative coding and algorithmic aesthetics, where every visual element is generated by mathematical functions and procedural rules.

Core principles:
- Algorithm-driven: colors, shapes, and textures are generated through mathematical functions, not hand-drawn
- Parametric design: output is controlled through seed values, iteration counts, and other parameters
- Order within chaos: Perlin noise, fractals, and particle systems create the intersection of nature and mathematics
- Code as art: monospace fonts and parameter labels hint at the underlying code nature
- Dark canvas: near-black backgrounds make algorithmically generated colors more striking

#### Do's (必须做)
1. Use near-black backgrounds bg-[#0a0a0a] or bg-neutral-950
2. Use HSL rotation to generate algorithmic palettes, with violet #7c3aed as base
3. All text uses font-mono monospace fonts
4. Use SVG geometric patterns (circles, lines, curve grids) as decorative backgrounds
5. Display parameter elements: seed values, coordinates, iteration counts, etc.
6. Use mathematical easing functions to drive animations
7. Cards use bg-neutral-900/80 backdrop-blur dark glass effect
8. Interactive elements use violet glow shadow-[0_0_20px_rgba(124,58,237,0.4)]
9. Interaction feedback stays linear and precise (ease-linear + duration-200)

#### Don'ts (禁止做)
1. Do not use images or raster bitmaps
2. Do not use traditional UI patterns (unless algorithmically transformed)
3. Do not use static, lifeless layouts
4. Do not use more than 5 colors without algorithmic justification
5. Do not use decorative elements that are not procedurally derived
6. Do not use light/white backgrounds
7. Do not use serif or sans fonts (must use monospace)
8. Do not use spring, bounce, or other skeuomorphic elastic animations

#### AI Rules
```
STYLE: Generative Art
TYPE: Algorithm-driven visual aesthetics

MUST USE:
- Dark background: bg-[#0a0a0a] or bg-neutral-950
- Primary accent: Violet/purple (#7c3aed) as base generative color
- Color palette: Algorithmically derived via HSL rotation from violet base
- Monospace fonts: font-mono for all text (code-art aesthetic)
- SVG geometric shapes as decorative backgrounds
- Dark glass cards: bg-neutral-900/80 backdrop-blur with subtle borders
- Violet glow: shadow-[0_0_20px_rgba(124,58,237,0.4)] for interactive elements
- Parameter display: Show seed values, coordinates, algorithm names as UI elements

MUST AVOID:
- Stock photos or raster images
- Light/white backgrounds
- Serif or sans-serif fonts
- Conventional shadows (shadow-md)
- Static lifeless layouts
- Decorative elements that are not procedurally derived

Animation & Interaction Rules:
- Algorithmic Flow: Interactions should reflect parameter computation, simulating noise flow through grid or gradient layer linear displacement.
- Parameter Shifting: On hover, slightly adjust letter-spacing and marker shapes (e.g., square dot rotation), hinting at seed/parameter changes without being flashy.
- Exact Precision: Prefer ease-linear with duration-200, maintaining programmatic, predictable feedback rhythm.
- Mathematical Glow: Glow should have clear geometric edges, avoiding excessive fogging that blurs information hierarchy.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-neutral-800`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(124,58,237,0.15)]`
- Medium: `shadow-[0_0_20px_rgba(124,58,237,0.25)]`
- Large: `shadow-[0_0_40px_rgba(124,58,237,0.4)]`
- Hover: `shadow-[0_0_25px_rgba(124,58,237,0.3)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-mono font-bold`
- Body: `font-mono text-sm`

**Required Classes**

Button:
```
px-6 py-3
rounded-lg
font-mono
text-sm
transition-all duration-300
border
```

Card:
```
bg-neutral-900/80
backdrop-blur
border border-neutral-800
rounded-xl
```

Input:
```
bg-neutral-950
border border-neutral-700
rounded-lg
text-neutral-100
font-mono
text-sm
focus:border-violet-500
focus:shadow-[0_0_10px_rgba(124,58,237,0.2)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-slate-50`, `font-serif`, `font-sans`, `shadow-sm`, `shadow-md`, `shadow-lg`, `rounded-none`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^bg-slate-[1-3]`, `^shadow-(?!\[)`, `^font-serif`, `^font-sans`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative px-6 py-3 rounded-lg overflow-hidden font-mono text-sm uppercase tracking-[0.18em] bg-violet-900/35 text-violet-300 border border-violet-500/50 hover:border-violet-400 hover:text-white hover:shadow-[0_0_20px_rgba(124,58,237,0.4)] active:opacity-90 transition-all duration-200 ease-linear">
  <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(124,58,237,0.3)_50%,transparent_75%)] bg-[length:200%_200%] bg-[0%_0%] group-hover:bg-[100%_100%] transition-all duration-500 ease-linear" />
  <span className="relative z-10 group-hover:tracking-[0.24em] transition-all duration-200 ease-linear">Generate</span>
</button>

<button className="group px-6 py-3 rounded-lg font-mono text-sm uppercase tracking-[0.18em] bg-transparent text-violet-400 border border-violet-500/40 hover:border-violet-400 hover:bg-violet-500/10 hover:shadow-[0_0_14px_rgba(124,58,237,0.25)] transition-all duration-200 ease-linear">
  <span className="group-hover:tracking-[0.24em] transition-all duration-200 ease-linear">Parameters</span>
</button>
```

**Card**
```html
<div className="group bg-neutral-900/80 backdrop-blur rounded-xl p-6 border border-neutral-800 relative overflow-hidden hover:border-violet-500/40 hover:shadow-[0_0_30px_rgba(124,58,237,0.14)] transition-all duration-200 ease-linear cursor-crosshair">
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(124,58,237,0.05)_2px,rgba(124,58,237,0.05)_4px)] transition-opacity duration-200 ease-linear" />
  <div className="relative z-10">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-2 h-2 rounded-none bg-violet-500 shadow-[0_0_8px_rgba(124,58,237,0.6)] group-hover:rotate-45 transition-transform duration-200 ease-linear" />
      <h3 className="text-violet-400 font-mono text-xs uppercase tracking-[0.2em]">Algorithm // 0x42</h3>
    </div>
    <h4 className="text-white text-lg font-mono font-bold mb-2 group-hover:text-violet-200 transition-colors duration-200 ease-linear">Perlin Noise</h4>
    <p className="text-neutral-400 font-mono text-sm leading-relaxed group-hover:text-neutral-300 transition-colors duration-200 ease-linear">
      Gradient noise function for organic procedural textures. Seed dynamically injected.
    </p>
  </div>
</div>
```


---


### 粒子系统 (Particle System)

**Slug**: `particle`

#### Description
A floating particle network on deep dark tech backgrounds, using connection lines, pulses, and trails to create a sense of data flow. Ideal for tech companies, data visualization, and creative portfolios.

#### Design Philosophy
A living network of floating particles and connection lines creates a sense of data flowing through space -- tech-forward yet organic and mesmerizing.

Core principles:
- Deep dark backgrounds provide the canvas for luminous particle effects
- Particles drift slowly and randomly, forming organic constellations
- Connection lines appear between nearby particles at low opacity
- Foreground content stays clean, readable, and unobstructed
- Cool-toned accents (blue, teal, violet) reinforce the tech atmosphere

#### Do's (必须做)
1. Use deep dark backgrounds (blue-black #0a0e1a or #0f1419)
2. Add floating particle elements as background decoration
3. Show connection lines between nearby particles at low opacity
4. Keep foreground content clean and highly readable
5. Use cool-toned accent colors (blue, teal, violet)
6. Apply subtle glow effects to particles and key UI elements
7. Use backdrop-blur for glass-like card surfaces
8. On hover, enhance node activation feel (corner highlights, thin border glow, localized current light)
9. Shadows maintain low opacity with wide spread for nebula-style ghost glow
10. Foreground components respond quickly (duration-150~200), contrasting with slow background particles

#### Don'ts (禁止做)
1. Don't let particles obscure content readability
2. Don't use warm or earthy colors for primary palette
3. Don't use heavy borders or thick outlines
4. Don't use patterns that compete with particle animation
5. Don't use light backgrounds
6. Don't use conventional box shadows (use glow effects instead)
7. Don't let hover glow become solid opaque blocks (must stay airy and translucent)
8. Don't apply long bouncy easing to controls (particle UI should feel precise)

#### AI Rules
```
STYLE: Particle System
TYPE: Deep dark tech aesthetic with floating particle network

MUST USE:
- Background: Deep blue-black (#0a0e1a or #0f1419)
- Particles: Small circles (1-6px) in semi-transparent white/blue/teal, slowly drifting
- Connection lines: Thin lines between nearby particles, very low opacity
- Text: Light blue-white (#e0e8ff) for primary, white/50 for secondary
- Cards: Very dark glass (bg-[#0f1419]/80) with minimal borders (white/5)
- Accents: Blue (#3b82f6), Teal (#14b8a6), Violet (#a78bfa)
- Interactive elements: Subtle blue glow on hover
- Backdrop blur on cards and overlays

MUST AVOID:
- Light backgrounds
- Warm or earthy color palettes
- Heavy borders or thick outlines
- Conventional box shadows
- Patterns that compete with particle animation

Animation & Interaction Rules:
- Node Excitation: On hover, use thin border highlights and corner micro-bright spots to express node activation and energy injection.
- Nebula Glow: Shadows use low-opacity wide-spread blue-teal diffusion, avoiding heavy solid shadows.
- Quantum Snap: Foreground control interactions use duration-150~200, maintaining precise fast feedback.
- Text Illumination: On card hover, secondary text can brighten from white/50 to white/70 or bright blue.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/5`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(59,130,246,0.1)]`
- Medium: `shadow-[0_0_20px_rgba(59,130,246,0.2)]`
- Large: `shadow-[0_0_40px_rgba(59,130,246,0.3)]`
- Hover: `hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-sans font-semibold`
- Body: `font-sans text-sm`

**Required Classes**

Button:
```
rounded-lg
font-medium
transition-all duration-300
```

Card:
```
backdrop-blur
rounded-xl
border border-white/5
```

Input:
```
bg-[#0a0e1a]
border border-white/10
rounded-lg
text-[#e0e8ff]
focus:border-blue-500/50
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `border-black`, `border-gray-900`, `shadow-sm`, `shadow-md`, `shadow-lg`, `text-gray-900`, `text-black`

Patterns: `^bg-white`, `^bg-gray-[1-3]00`, `^shadow-(sm|md|lg|xl)$`, `^text-gray-[8-9]00`, `^text-black`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Primary Button
<button className="group relative px-8 py-3 rounded-lg font-mono text-sm uppercase tracking-widest bg-blue-600/10 border border-blue-500/30 text-blue-400 transition-all duration-200 hover:bg-blue-600 hover:text-white hover:shadow-[0_0_20px_rgba(59,130,246,0.4),inset_0_0_10px_rgba(255,255,255,0.2)] active:scale-95 overflow-hidden">
  <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-linear" />
  <span className="relative z-10">Get Started</span>
</button>

// Secondary Button
<button className="px-6 py-3 rounded-lg font-medium text-sm bg-white/5 backdrop-blur border border-white/10 text-white/80 transition-all duration-200 hover:bg-white/10 hover:border-blue-400/30 hover:text-white">
  Learn More
</button>

// Ghost Button
<button className="px-6 py-3 rounded-lg font-medium text-sm text-white/60 transition-all duration-200 hover:text-white hover:bg-white/5">
  View Docs
</button>

```

**Card**
```html
<div className="group relative bg-[#0f1419]/80 backdrop-blur-xl rounded-xl p-8 border border-white/5 transition-all duration-300 hover:border-blue-500/40 hover:bg-[#151b22] hover:shadow-[0_0_40px_rgba(59,130,246,0.1)] overflow-hidden">
  <div className="absolute top-0 right-0 w-2 h-2 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:shadow-[0_0_10px_#60a5fa] transition-opacity duration-300" />
  <div className="absolute bottom-0 left-0 w-2 h-2 bg-teal-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:shadow-[0_0_10px_#2dd4bf] transition-opacity duration-300 delay-75" />
  <div className="flex items-center gap-3 mb-4">
    <div className="w-10 h-10 bg-blue-500/10 border border-blue-500/20 rounded-lg flex items-center justify-center group-hover:bg-blue-500 group-hover:scale-110 transition-all duration-300">
      <span className="text-blue-400 group-hover:text-white transition-colors duration-300">N</span>
    </div>
    <h3 className="text-lg font-semibold text-[#e0e8ff] group-hover:text-white transition-colors duration-200">Feature Title</h3>
  </div>
  <p className="text-white/50 leading-relaxed group-hover:text-white/70 transition-colors duration-200">
    Description with clean readability on deep dark background.
  </p>
</div>
```


---


### 视差杂志 (Parallax Editorial)

**Slug**: `parallax-editorial`

#### Description
Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into a paced turn of the page.

#### Design Philosophy
The parallax-editorial creed: scrolling is turning pages, and depth is the fourth dimension of the layout. When foreground and background move at different rates, a flat page finally gains the thickness of paper — the reader doesn't swipe across a screen, they move through a stack of spreads sliding out of register.

Core principles:
- Depth is hierarchy: background slow, foreground fast. The rate difference itself reads as importance — near things lead, far things lag
- Typography before parallax: parallax is the stage, not the star. The type must stand on its own first — serif display headings, a comfortable measure (65-75 characters), clear chapter structure
- Sticky interlock: an image pins while text scrolls over it, or the reverse — image and text meshing like a magazine spread
- Editorial signals: chapter numbers, drop caps, hanging punctuation, column rules — these are magazine grammar, not decoration
- Restrained accent: brick red #B3401F only for drop caps, chapter numbers, pull quotes and links; body copy stays near-black ink
- Rhythm and rest: generous whitespace is the breath. Parallax passages must alternate with quiet text-only passages or the eye tires

Design principles:
- Performance line: parallax uses transform: translate3d (compositor layer) only, rAF-throttled, never mutating top/margin in a scroll handler
- Accessibility line: under prefers-reduced-motion all layers drop to zero rate difference and become a normal static layout; reading order never changes
- Depth discipline: at most three parallax rate tiers per viewport, more turns muddy
- Responsive: on mobile, weaken or disable parallax (performance + motion sickness) while keeping the typography and sticky structure

#### Do's (必须做)
1. Warm paper base #F5F0E6 with near-black ink body #1A1712 for a printed feel
2. Serif display face for headlines (e.g. Fraunces / Playfair), sans or same-family for body
3. Parallax layers via transform: translate3d(0, scrollProgress * rate, 0) — small rate for background, larger for foreground
4. Sticky image-text interlock: position: sticky pins the image layer while text scrolls in the adjacent column
5. Number chapters with large serif figures and a thin top rule to build magazine structure
6. Drop caps: float the paragraph's first letter, scale it 3-4 lines tall, brick red #B3401F
7. Keep the measure at 65-75 characters per line, line-height 1.6-1.75
8. Brick red #B3401F only on drop caps, chapter numbers, pull quotes and links; keep the rest ink
9. rAF-throttle all parallax and ship a prefers-reduced-motion zero-rate fallback

#### Don'ts (禁止做)
1. Never mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
2. Never exceed three parallax rate tiers per viewport (muddy depth)
3. Never let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
4. Never keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
5. Never use multiple accents or flood brick red as a surface color
6. Never omit the prefers-reduced-motion fallback
7. Never use cold or pure-white backgrounds (kills the warm paper feel)

#### AI Rules
```
# Parallax Editorial Design System

You are an expert frontend developer specializing in parallax editorial layout. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Parallax Editorial
- **Essence**: Scrolling is turning pages; depth is the layout's fourth dimension
- **Mood**: Printed, considered, literary, cinematic long-form
- **Inspiration**: Magazine spreads, longform scrollytelling features, printed editorial typography

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Mutating top/margin/height in a scroll handler | Layout thrash; parallax is transform: translate3d only |
| More than 3 parallax rate tiers per viewport | Muddy depth |
| Parallax overpowering readability | Body copy is never the parallax subject; measure stays under 75ch |
| Heavy parallax on mobile | Performance and motion sickness — weaken or disable |
| Multiple accents / brick-red surfaces | One accent; brick is a signal, not a fill |
| Cold or pure-white backgrounds | Kills the warm paper feel |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### Paper and Ink
- Background #F5F0E6 (warm paper), deep paper #EBE3D3
- Body #1A1712 (near-black ink), secondary rgba(26,23,18,0.7)
- The one accent #B3401F (brick red): drop caps, chapter numbers, pull quotes, links
- Sand #C9BBA0 for dividers / secondary decoration

### Type
Serif display face for headings (Fraunces or Playfair Display recommended):
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&display=swap" />
```
Headings font-family: "Fraunces", Georgia, serif; body same-family or a humanist sans.
(fonts.googleapis.com works too; loli.net mirrors it for CN access.)

### Parallax Engine (signature, rAF-throttled)
Tag each layer with data-parallax="rate" (0.1-0.5); one shared rAF loop updates them:
```js
let ticking = false;
function onScroll() {
  if (ticking) return; ticking = true;
  requestAnimationFrame(() => {
    const y = window.scrollY;
    document.querySelectorAll("[data-parallax]").forEach((el) => {
      const rate = parseFloat(el.dataset.parallax);
      el.style.setProperty("--pe-y", `${-y * rate}px`);
    });
    ticking = false;
  });
}
window.addEventListener("scroll", onScroll, { passive: true });
```
```css
[data-parallax] { transform: translate3d(0, var(--pe-y, 0), 0); will-change: transform; }
```
Background layers small rate (0.1-0.2), foreground large (0.35-0.5).

### Sticky Interlock
Two-column grid; the image column is position: sticky; top: 0; height: 100vh while the text column flows normally — a pin-and-scroll mesh.

### Editorial Typography Grammar
- Chapters: large serif numerals (text-4xl+) with a thin top rule (border-t)
- Drop caps: .pe-dropcap with ::first-letter float, scaled 3-4 lines, brick red
- Measure: body max-width 65-75ch, line-height 1.6-1.75
- Pull quotes: large italic serif with a left brick rule

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("[data-parallax]").forEach((el) => {
  gsap.to(el, {
    yPercent: () => -30 * parseFloat(el.dataset.parallax) * 5,
    ease: "none",
    scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true },
  });
});
```

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
```
All layers drop to zero rate difference; the layout becomes static and reading order is unchanged.

## Self-Verification Checklist

- [ ] Warm paper base, ink body, single brick-red accent
- [ ] Parallax is transform: translate3d + rAF-throttled only
- [ ] No more than 3 rate tiers per viewport
- [ ] Body measure 65-75ch with serif headings / chapter numbers / drop caps
- [ ] Sticky image-text interlock present
- [ ] prefers-reduced-motion zero-rate fallback
- [ ] Parallax weakened or disabled on mobile
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#1A1712]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-[0_24px_60px_rgba(26,23,18,0.12)]`
- Hover: `hover:shadow-[0_30px_70px_rgba(26,23,18,0.16)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-300 ease-out`

**Typography**
- Heading: `font-serif text-[#1A1712]`
- Body: `text-[#1A1712]/75 leading-relaxed`

**Required Classes**

Button:
```
font-serif
transition-colors duration-300
hover:text-[#B3401F]
```

Card:
```
border-t border-[#1A1712]/20
rounded-none
pt-5
```

Input:
```
bg-transparent
border-b border-[#1A1712]/25
rounded-none
text-[#1A1712] placeholder-[#1A1712]/30
focus:outline-none focus:border-[#B3401F]
transition-colors duration-300
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-white`, `bg-black`, `bg-slate-900`, `bg-gray-900`, `bg-gradient-to-r`, `from-indigo-600`

Patterns: `^rounded-(lg|xl|2xl|3xl|full)$`, `^bg-(white|black)$`, `^bg-gradient-`, `^bg-(slate|gray|zinc|blue|indigo)-(800|900)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative inline-flex items-center gap-2
  font-serif text-[#1A1712] text-lg
  transition-colors duration-300
  hover:text-[#B3401F]
">
  <span>Read the chapter</span>
  <span className="inline-block w-8 h-px bg-[#B3401F] origin-left scale-x-100 group-hover:scale-x-150 transition-transform duration-300" />
</button>
```

**Card**
```html
<article className="border-t border-[#1A1712]/20 pt-5">
  <span className="font-serif text-4xl text-[#B3401F] leading-none">03</span>
  <h3 className="font-serif text-2xl text-[#1A1712] mt-3 mb-2">The Register Shift</h3>
  <p className="text-[#1A1712]/70 leading-relaxed max-w-prose">
    When foreground and background slide out of register, the page gains the thickness of paper.
  </p>
</article>
```


---


### VHS美学 (VHS Aesthetic)

**Slug**: `vhs-aesthetic`

#### Description
80-90s VHS tape visual aesthetics with color distortion, scanline noise, and signal glitch effects. Ideal for nostalgia, retro tech, and creative video projects.

#### Design Philosophy
VHS Aesthetic recreates the analog warmth and beautiful imperfections of 80-90s VHS tapes.

Core principles:
- Scanline overlay: all content areas use repeating-linear-gradient horizontal scanlines
- RGB chromatic aberration: text uses magenta and cyan offset text-shadow to simulate color separation
- Noise texture: low-opacity noise/grain overlay layer
- Signal glitch: horizontal offset tracking distortion effects on hover
- VHS markers: REC indicator, timestamps, counters, and other tape UI elements
- Monospace fonts: all text uses monospace fonts, uppercase preferred
- Ultra-dark backgrounds: black or deep purple backgrounds maximize neon contrast

#### Do's (必须做)
1. Apply horizontal scanline overlay on all content areas
2. Use RGB color separation on text (magenta + cyan offset shadows)
3. Add noise/grain texture overlay with low opacity
4. Include VHS-style timestamps and REC indicators
5. Use monospace fonts throughout
6. Keep backgrounds dark (black or deep purple #1a0a2e)
7. Add tracking distortion effects on hover
8. Use uppercase text with wide letter-spacing for labels

#### Don'ts (禁止做)
1. Don't use clean, crisp typography
2. Don't use light backgrounds
3. Don't use modern sans-serif fonts
4. Don't use smooth gradients
5. Don't use rounded corners larger than 2px
6. Don't use subtle, refined effects

#### AI Rules
```
STYLE: VHS Aesthetic
TYPE: 80-90s VHS tape visual aesthetic

MUST USE:
- Background: Black (#000000) or deep purple (#1a0a2e)
- Primary accent: Magenta (#ff00ff) for borders, glows, highlights
- Secondary accent: Cyan (#00ffff) for text, secondary elements
- Tertiary: Yellow (#ffff00) for warnings/timestamps, Green (#00ff00) for status
- All text: Monospace font, uppercase preferred
- Scanlines: Apply repeating-linear-gradient overlay
- Color separation: Use text-shadow with offset magenta and cyan
- Timestamps: Show "REC" indicator, date/time in corner
- Noise: Add grain/noise texture overlay with low opacity
- Tracking distortion: Slight horizontal offset on hover/animation

MUST AVOID:
- Light/white backgrounds
- Pastel or muted colors
- Serif or sans-serif body fonts
- Large border-radius (max 2px)
- Smooth gradients
- Subtle/standard shadows (use neon glow only)

Animation & Interaction Rules:
- Tape Tracking Jitter: Completely abandon smooth animations. On hover, use extremely short duration-75 for crisp, even slightly harsh visual feedback (e.g., instant skew-x-2 or translate-x-1), simulating VHS tape tracking errors.
- Chroma Split Glow: Neon shadows must not just glow -- they must be "misaligned." On hover, magenta and cyan text-shadow or box-shadow must pull apart in opposite directions, simulating tape color dispersion.
- Scanline Distortion: Scanline overlays on cards should speed up vertical scrolling or instantly change opacity (e.g., from opacity-10 to opacity-30) when the container is hovered.
- Playback Snap: Active (:active) state should simulate pressing a heavy VCR physical button. Eliminate all glow and produce a harsh sink (active:scale-95 active:shadow-none).
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#ff00ff]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(255,0,255,0.2)]`
- Medium: `shadow-[0_0_20px_rgba(255,0,255,0.4)]`
- Large: `shadow-[0_0_40px_rgba(255,0,255,0.6)]`
- Hover: `shadow-[0_0_20px_rgba(255,0,255,0.3)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-mono font-bold uppercase tracking-wider`
- Body: `font-mono text-sm`

**Required Classes**

Button:
```
font-mono
uppercase
tracking-widest
border
transition-all duration-200
```

Card:
```
bg-[#1a0a2e]
border
```

Input:
```
bg-black
border
text-[#00ffff]
font-mono
focus:border-[#00ffff]
focus:shadow-[0_0_10px_rgba(0,255,255,0.3)]
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^bg-white`, `^bg-gray-[1-3]`, `^shadow-(?!\[)`, `^rounded-[23]xl`, `^rounded-full`, `^font-serif`, `^font-sans`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="group relative px-8 py-3 bg-[#ff00ff]/20 text-[#ff00ff] font-mono font-bold uppercase tracking-widest border-2 border-[#ff00ff] shadow-[2px_0_#00ffff,-2px_0_#ff00ff] hover:bg-[#ff00ff]/40 hover:text-white hover:shadow-[4px_0_#00ffff,-4px_0_#ff00ff] hover:skew-x-2 active:skew-x-0 active:scale-95 active:shadow-none transition-all duration-75 ease-linear overflow-hidden">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,255,255,0.1)_2px,rgba(255,255,255,0.1)_4px)] opacity-50 group-hover:opacity-100 transition-opacity duration-75" />
  <span className="relative z-10">PLAY_TAPE</span>
</button>
```

**Card**
```html
<div className="group relative bg-[#1a0a2e]/90 border-2 border-[#ff00ff]/40 p-8 shadow-[0_0_15px_rgba(255,0,255,0.2)] hover:border-[#00ffff] hover:shadow-[0_0_25px_rgba(0,255,255,0.4)] transition-all duration-100 ease-linear cursor-crosshair">
  {/* 扫描线与录像带杂音 */}
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.05)_2px,rgba(0,255,255,0.05)_4px)] pointer-events-none group-hover:opacity-100 opacity-60 transition-opacity duration-100" />
  <div className="absolute top-1/4 left-0 w-full h-2 bg-white/10 opacity-0 group-hover:opacity-100 group-hover:animate-pulse" />

  <div className="relative z-10">
    <div className="flex items-center gap-2 mb-4">
      <div className="w-3 h-3 bg-red-500 rounded-full group-hover:animate-pulse shadow-[0_0_8px_#ef4444]" />
      <span className="text-red-500 font-mono text-xs uppercase tracking-widest">REC</span>
    </div>
    <h3 className="text-white text-3xl font-mono font-bold uppercase mb-2 group-hover:-skew-x-3 transition-transform duration-75" style={{ textShadow: '-2px 0 #ff00ff, 2px 0 #00ffff' }}>
      NIGHT_DRIVE.AVI
    </h3>
    <p className="text-[#00ffff]/70 font-mono text-sm group-hover:text-white transition-colors duration-100">
      &gt; Playback tracking adjusted. Signal acquired.
    </p>
  </div>
</div>
```


---


### 赤陶暖调 (Terracotta)

**Slug**: `terracotta`

#### Description
A Mediterranean terracotta and warm earth design style with warm clay tones, rough handcrafted textures, and natural patterns. Ideal for lifestyle brands, dining, travel, and artisan product showcases.

#### Design Philosophy
Terracotta originates from the millennia-old pottery traditions of the Mediterranean coast, infusing the warm hues of fired earth into digital design.

Core principles:
- Warmth of earth: terracotta (#b5654a) as the primary color, conveying the warmth of clay tempered by flame
- Handcrafted texture: rounded corners and soft shadows simulate the tactile feel of handmade goods
- Natural harmony: cream white base with earth-tone accents, like sunlight falling on pottery
- Breath of life: olive green (#8b9d77) as a botanical accent, giving the design vitality
- Beauty of simplicity: rejecting over-decoration, letting materials and colors speak for themselves

#### Do's (必须做)
1. Use warm cream backgrounds bg-[#faf5ef]
2. Use terracotta as the primary accent color text-[#b5654a]
3. Rounded corners for handcrafted texture rounded-lg rounded-xl
4. Warm soft shadows shadow-md shadow-[#b5654a]/10
5. Natural comfortable spacing py-20 px-6
6. Use earth-tone gradient layers #d4a373 #7a6350
7. Add warm glow and steady transitions on interaction, simulating sun-baked clay warmth
8. Click feedback uses press-down displacement (active:translate-y) rather than elastic scaling
9. Form focus borders use terracotta or olive green, avoiding cold-color highlight rings

#### Don'ts (禁止做)
1. Do not use cool tones like blue or purple bg-blue-* bg-purple-*
2. Do not use sharp right angles rounded-none rounded-sm
3. Do not use neon or high-saturation fluorescent colors
4. Do not use heavy pure black text-black bg-black
5. Do not use bounce/spring elastic animations
6. Do not use harsh cold-color focus rings

#### AI Rules
```
You are designing in Terracotta style inspired by Mediterranean clay craftsmanship.
- Use warm earth tones: cream #faf5ef, terracotta #b5654a, sand #d4a373, earth #7a6350
- Accent with olive green #8b9d77 for natural vitality
- Rounded corners (rounded-lg, rounded-xl) to evoke handcrafted ceramics
- Warm, soft shadows using terracotta-tinted shadow colors
- Generous spacing for a relaxed, inviting feel
- No cool blues, purples, or neon colors
- No sharp corners or heavy black elements

Animation & Interaction Rules:
- Sun-Baked Glow: On hover, use warm glow and background deepening to simulate the warm radiance of sun-heated clay.
- Clay Press: Active state forbids elastic scaling; use translate-y with inset shadow to convey hard material press-down resistance.
- Handcrafted Slowness: Interactions use duration-300 ease-out, avoiding overly modern bouncy feedback.
- Earthy Focus: Form focus uses terracotta or olive green borders to reinforce state, avoiding harsh blue rings.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4a373]/30`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm shadow-[#b5654a]/5`
- Medium: `shadow-md shadow-[#b5654a]/10`
- Large: `shadow-lg shadow-[#b5654a]/12`
- Hover: `hover:shadow-lg hover:shadow-[#b5654a]/15`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-semibold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
rounded-lg
font-medium
transition-colors duration-300
```

Card:
```
bg-[#faf5ef]
rounded-xl
border border-[#d4a373]/25
```

Input:
```
px-4 py-3
bg-white
border border-[#d4a373]/40
rounded-lg
text-[#7a6350]
placeholder-[#d4a373]/50
focus:border-[#b5654a]
focus:ring-2 focus:ring-[#b5654a]/20
transition-all duration-300
```

**Forbidden**

Classes: `bg-blue-500`, `bg-purple-500`, `bg-cyan-500`, `bg-indigo-500`, `text-black`, `bg-black`, `rounded-none`, `rounded-sm`, `shadow-2xl`, `bg-gradient-to-r`

Patterns: `^bg-blue-`, `^bg-purple-`, `^bg-cyan-`, `^bg-indigo-`, `^bg-violet-`, `^bg-gradient-`, `^text-blue-`, `^text-purple-`, `^text-cyan-`, `^neon-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3.5
  bg-[#b5654a] text-[#faf5ef]
  text-sm font-medium tracking-wide
  rounded-lg
  shadow-[0_4px_12px_rgba(181,101,74,0.2)]
  hover:bg-[#a05a42]
  hover:shadow-[0_8px_20px_rgba(181,101,74,0.3)]
  hover:-translate-y-0.5
  active:translate-y-[2px]
  active:shadow-[0_0_0_rgba(181,101,74,0.2),inset_0_2px_4px_rgba(0,0,0,0.1)]
  transition-all duration-300 ease-out
">
  Explore
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#faf5ef]
  rounded-xl
  border border-[#d4a373]/30
  shadow-[0_6px_16px_rgba(122,99,80,0.06)]
  hover:shadow-[0_12px_30px_rgba(181,101,74,0.12)]
  hover:border-[#b5654a]/40
  hover:-translate-y-1
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="w-12 h-1 bg-[#8b9d77] mb-5 group-hover:w-16 transition-all duration-300 ease-out" />
  <h3 className="text-xl font-semibold text-[#7a6350] mb-3 group-hover:text-[#b5654a] transition-colors duration-300">
    Earthen Craft
  </h3>
  <p className="text-sm text-[#7a6350]/80 leading-relaxed font-medium">
    Molded by hand, baked by the sun. Interactions feel grounded, warm, and distinctly human.
  </p>
</div>
```


---


### 单色极简 (Monochrome)

**Slug**: `monochrome`

#### Description
An ultimate monochrome design in pure black, white, and gray, building visual hierarchy through precise grayscale levels, font-weight contrast, and negative space without relying on any color. Ideal for photography, architecture, and premium brands.

#### Design Philosophy
Monochrome is the complete abandonment of color, building a full visual hierarchy solely through the precise orchestration of black, white, and gray.

Core principles:
- Zero hue dependency: no colors with any hue are used; all visual information is conveyed through grayscale
- Grayscale hierarchy: precise gray gradients from #111111 to #fafafa establish information priority
- Font-weight contrast: differences between font-light and font-bold replace color differentiation
- Negative space composition: generous whitespace is not empty -- it is part of the design
- Grid order: strict grid systems ensure every element has a precise position

#### Do's (必须做)
1. Use pure grayscale backgrounds bg-[#fafafa] or bg-white
2. Primary text uses dark gray text-[#111111], secondary text text-[#666666]
3. Build hierarchy through font-light and font-bold weight contrast
4. Generous negative space whitespace py-24 px-8
5. Ultra-thin border dividers border-[#e5e5e5]
6. Grid-based layout alignment

#### Don'ts (禁止做)
1. Do not use any color with hue (no blue/red/green/pink, etc.)
2. Do not use rounded-full circular corners
3. Do not use heavy shadows shadow-lg shadow-xl shadow-2xl
4. Do not use gradients bg-gradient-to-*

#### AI Rules
```
You are designing in Monochrome style.
- Use ONLY grayscale colors: #111111, #333333, #666666, #999999, #cccccc, #e5e5e5, #f5f5f5, #fafafa, #ffffff
- NEVER use any color with hue (no blue, red, green, pink, orange, etc.)
- Build hierarchy with font-weight contrast: font-light for body, font-bold for headings
- Use generous negative space (py-24, px-8) for breathing room
- Borders must be subtle: grayscale borders in the #e5e5e5 to #cccccc range
- No rounded-full, no heavy shadows, no gradients
- Keep corners sharp: rounded-sm or rounded-none
- Uppercase tracking-wider for labels and small text
- Grid-based alignment for all layouts

Animation & Interaction Rules:
- Deliberate Slowness: Interactions should use duration-500 to 700 slow rhythm, avoiding fast jumps.
- Grayscale Breathing: Only allow adjacent grayscale transitions (e.g., #111111 to #2a2a2a), maintaining restraint.
- Line Growth: Prefer thin line extension as interaction hints, reducing large-area contrast switching.
- Static Elevation: Avoid translate and heavy shadows, maintaining a quiet two-dimensional plane feel.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e5e5e5]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-light`

**Required Classes**

Button:
```
rounded-sm
transition-colors
font-medium
```

Card:
```
rounded-sm
border
```

Input:
```
border-b
focus:outline-none
bg-transparent
```

**Forbidden**

Classes: `bg-blue-500`, `bg-red-500`, `bg-green-500`, `bg-pink-500`, `bg-purple-500`, `bg-yellow-500`, `bg-orange-500`, `bg-cyan-500`, `bg-indigo-500`, `bg-teal-500`

Patterns: `^bg-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-`, `^text-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-`, `^border-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-`, `^rounded-full$`, `^shadow-(?:xl|2xl)$`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-[#111111] text-[#fafafa]
  text-xs font-medium tracking-[0.2em] uppercase
  rounded-sm
  hover:bg-[#2a2a2a]
  transition-colors duration-700 ease-in-out
">
  Discover
</button>
```

**Card**
```html
<div className="
  group p-10
  bg-[#f5f5f5]
  rounded-sm
  border border-[#e5e5e5]
  hover:bg-[#ebebeb]
  hover:border-[#cccccc]
  transition-colors duration-700 ease-in-out
">
  <h3 className="text-2xl font-light text-[#111111] mb-6 tracking-wide">The Silent Void</h3>
  <p className="text-sm font-light text-[#666666] leading-relaxed group-hover:text-[#444444] transition-colors duration-700">
    In the absence of color, form and space reveal their true essence.
  </p>
  <div className="mt-8 flex items-center">
    <span className="text-xs uppercase tracking-widest text-[#111111]">Read More</span>
    <div className="ml-4 h-px w-0 bg-[#111111] transition-all duration-700 ease-in-out group-hover:w-12" />
  </div>
</div>
```


---


### 水墨画风 (Ink Wash)

**Slug**: `ink-wash`

#### Description
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

#### Do's (必须做)
1. Use xuan-paper warm backgrounds bg-[#f8f5f0]
2. Ink color as primary text color text-[#2c2c2c]
3. Generous whitespace to create mood py-32 px-8
4. Use serif fonts for calligraphic texture font-serif
5. Ink-wash thin border dividers border-[#2c2c2c]/20
6. Slow transition animations mimicking ink diffusion transition-all duration-700
7. Interaction feedback focuses on ink color deepening and border bleeding, avoiding obvious displacement animations

#### Don'ts (禁止做)
1. Do not use vivid saturated colors -- ink wash is primarily gray-toned
2. Do not use heavy shadows -- they break the ethereal mood
3. Do not use thick borders -- ink wash lines should be as delicate as brush strokes
4. Do not use decorative animations or bounce effects -- maintain tranquility
5. Do not use spring or bounce interaction curves -- avoid mechanical elasticity

#### AI 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.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-sm`
- Large: `shadow-md`
- Hover: `hover:shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-700`

**Typography**
- Heading: `font-serif font-light tracking-wide`
- Body: `font-serif font-light`

**Required Classes**

Button:
```
bg-transparent
transition-all
duration-700
```

Card:
```
transition-colors
```

Input:
```
bg-transparent
focus:outline-none
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-slate-900`, `font-black`, `font-extrabold`, `font-bold`, `border-4`, `border-[3px]`, `border-[4px]`, `shadow-lg`

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


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3
  bg-transparent
  text-[#2c2c2c] font-serif text-sm tracking-[0.2em]
  border-b border-[#2c2c2c]/30
  hover:border-[#2c2c2c]
  hover:bg-[#2c2c2c]/5
  hover:shadow-[0_4px_20px_rgba(44,44,44,0.05)]
  active:bg-[#2c2c2c]/10
  active:shadow-[inset_0_2px_4px_rgba(44,44,44,0.1)]
  transition-all duration-1000 ease-in-out
">
  Continue
</button>
```

**Card**
```html
<div className="
  group p-10
  bg-[#f8f5f0]
  border-l border-[#2c2c2c]/10
  hover:border-[#2c2c2c]/60
  hover:bg-[#f3efe8]
  transition-all duration-1000 ease-in-out
">
  <h3 className="text-xl font-serif font-light text-[#2c2c2c]/80 mb-6 tracking-widest group-hover:text-[#2c2c2c] transition-colors duration-700">
    山水之间
  </h3>
  <p className="text-sm text-[#a89279] font-serif leading-loose group-hover:text-[#6b7b6e] transition-colors duration-1000 ease-in-out">
    Ink flows where the mind wanders. In the vast white space, the invisible landscape emerges.
  </p>
</div>
```


---


### 中世纪现代 (Mid-Century Modern)

**Slug**: `mid-century-modern`

#### Description
1950s Atomic Age design aesthetics with geometric patterns, organic curves, and saturated colors. Inspired by Eames chairs, atomic clocks, and starburst motifs.

#### Design Philosophy
Mid-Century Modern is a design movement that flourished from the 1940s to 1960s, born at the intersection of post-war optimism and the Space Age. It pursues the perfect unity of form and function, believing that good design should serve everyday life.

Its core aesthetic derives from "organic modernism": the fusion of geometric forms with natural curves. Ovals, kidney shapes, starbursts, and atomic models appear repeatedly, reflecting that era's dual faith in scientific progress and natural harmony.

The color palette favors saturated yet non-glaring warm tones -- burnt orange, mustard yellow, olive green, peacock blue -- paired with cream white and deep charcoal neutral bases. These colors, drawn from nature and modern materials, are both warm and restrained.

Typography emphasizes clarity and readability, favoring sans-serif fonts with moderate weight and generous spacing. Headings often use uppercase with wide letter-spacing, while body text maintains comfortable line height.

In interface design, Mid-Century Modern emphasizes whitespace, grid alignment, and visual hierarchy. Cards and containers use subtle rounded corners (not sharp right angles), shadows are soft and restrained, conveying an elegance that is both retro and timeless.

#### Do's (必须做)
1. Use saturated warm tones bg-[#e8572a] text-[#2a6e5e] paired with cream base bg-[#f5f0e1]
2. Use medium rounded corners rounded-lg rounded-xl to simulate organic curves
3. Use wide letter-spacing tracking-wide tracking-wider for retro typography feel
4. Add subtle soft shadows shadow-md shadow-lg for depth
5. Use sans-serif fonts font-sans for modern clarity
6. Maintain ample whitespace p-8 p-12 gap-8 to let the design breathe
7. Use border-2 with style colors border-[#e8572a] to emphasize geometric structure
8. Leverage grid and flexbox for symmetrical balanced layouts

#### Don'ts (禁止做)
1. Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
2. Do not use sharp right angles rounded-none or extreme rounded-full
3. Do not use heavy shadows shadow-2xl or glow effects
4. Do not use serif fonts font-serif or handwritten fonts
5. Do not use gradient backgrounds bg-gradient-to-r that break the flat color block feel
6. Do not densely arrange content without whitespace
7. Do not use pure black backgrounds bg-black

#### AI Rules
```
You are a Mid-Century Modern design style frontend development expert. All generated code must strictly follow these constraints:

Absolutely Forbidden:
- Fluorescent or neon colors (pink-500, cyan-400, lime-400)
- Sharp right angles rounded-none
- Pure black backgrounds bg-black
- Gradients bg-gradient-to-*
- Serif fonts font-serif
- Heavy shadows or glow effects

Must Follow:
- Cream base bg-[#f5f0e1]
- Burnt orange primary text-[#e8572a] bg-[#e8572a]
- Teal accent text-[#2a6e5e] bg-[#2a6e5e]
- Gold decoration text-[#c4a35a]
- Charcoal text text-[#3d3d3d]
- Medium rounded corners rounded-lg rounded-xl
- Sans-serif fonts font-sans
- Wide letter-spacing tracking-wide tracking-wider
- Ample whitespace p-8 gap-8

Animation & Interaction Rules:
- Analog Switch: Interactions should simulate retro mechanical button presses; active uses hard displacement + shadow disappearance for damped feedback.
- Brass Shimmer: Brass decorations (like starbursts) slightly rotate and deepen in color on hover, creating metallic reflection.
- Retro Elevation: Card hover enhances hard-edge shadow extension with slight reverse displacement for printmaking-style layering.
- Warm Dimming: Cream base only slightly darkens on interaction, avoiding high-contrast flashing or modern neon feel.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#3d3d3d]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[2px_2px_0_#3d3d3d]`
- Medium: `shadow-[4px_4px_0_#3d3d3d]`
- Large: `shadow-[6px_6px_0_#3d3d3d]`
- Hover: `hover:shadow-[6px_6px_0_#3d3d3d]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-sans font-bold tracking-wide uppercase`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
font-sans font-semibold uppercase tracking-wider
transition-all duration-200
```

Card:
```
rounded-xl
border-2 border-[#3d3d3d]
bg-[#f5f0e1]
```

Input:
```
rounded-lg
border-2 border-[#3d3d3d]/30
bg-white
text-[#3d3d3d]
font-sans tracking-wide
focus:border-[#e8572a]
focus:outline-none
```

**Forbidden**

Classes: `font-serif`, `rounded-none`, `rounded-full`, `shadow-2xl`, `bg-gradient-to-r`, `bg-gradient-to-l`, `bg-gradient-to-b`, `bg-gradient-to-t`, `bg-black`, `bg-[#ff71ce]`

Patterns: `^font-serif$`, `^rounded-(?:none|full)$`, `^shadow-2xl$`, `^bg-gradient-`, `^bg-(?:pink|cyan|lime)-`, `^text-(?:pink|cyan|lime)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3
  bg-[#e8572a] text-[#f5f0e1]
  font-sans font-semibold uppercase tracking-wider text-sm
  rounded-lg
  border-2 border-[#3d3d3d]
  shadow-[4px_4px_0_#3d3d3d]
  hover:shadow-[6px_6px_0_#3d3d3d]
  hover:-translate-y-[2px] hover:-translate-x-[2px]
  active:shadow-none active:translate-y-[4px] active:translate-x-[4px]
  transition-all duration-150 ease-out
">
  Explore
</button>
```

**Card**
```html
<div className="
  group relative p-8
  bg-[#f5f0e1]
  border-2 border-[#3d3d3d]
  rounded-xl
  shadow-[4px_4px_0_#3d3d3d]
  hover:bg-[#efe9d3]
  hover:shadow-[8px_8px_0_#3d3d3d]
  hover:-translate-y-1 hover:-translate-x-1
  transition-all duration-200 ease-out
">
  {/* Starburst decoration */}
  <div className="absolute top-4 right-4 w-8 h-8">
    <div className="w-full h-full text-[#c4a35a] group-hover:rotate-45 group-hover:text-[#a88945] transition-all duration-500 ease-in-out">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <polygon points="12,0 14,9 24,9 16,14 18,24 12,18 6,24 8,14 0,9 10,9" />
      </svg>
    </div>
  </div>

  <div className="w-12 h-1 bg-[#e8572a] rounded-full mb-4 group-hover:w-20 transition-all duration-300 ease-out" />
  <h3 className="text-xl font-sans font-bold text-[#3d3d3d] tracking-wide mb-3 group-hover:text-[#e8572a] transition-colors duration-200">
    Atomic Living
  </h3>
  <p className="text-[#3d3d3d]/75 font-sans leading-relaxed">
    Timeless design for the modern home. Where form meets function in perfect, analog harmony.
  </p>
</div>
```


---


### 构成主义 (Constructivism)

**Slug**: `constructivism`

#### Description
Soviet Constructivist poster style with bold red-and-black color schemes, diagonal compositions, geometric planes, and agitprop typography.

#### Design Philosophy
Constructivism originated from the Russian avant-garde art movement of the 1910s, reaching its peak in the Soviet Union during the 1920s-30s. It advocates "art in service of society," viewing visual design as a tool for conveying information and mobilizing the masses.

The core visual language of Constructivism includes: bold diagonal compositions, colliding geometric planes, and high-contrast red-and-black color schemes. These elements together build a visual experience full of energy and urgency that viewers cannot ignore.

Typography plays a key role in Constructivism. Text is not merely a content carrier but a compositional element. Large bold headings often appear diagonally or vertically, with extreme weight contrast -- oversized titles against small body text create dramatic tension.

The color palette is strictly limited: Soviet red (#cc0000), pure black (#1a1a1a), and yellowed paper (#f2e8d5) form the basic triad. Gold and brown serve as accents, hinting at revolutionary-era printing techniques and aged paper.

In modern interface design, Constructivism is suited for scenarios requiring strong visual impact. Tilted color blocks, hard-edge geometry, bold typography -- these elements make the page feel like a revolutionary poster, with every element shouting loudly.

#### Do's (必须做)
1. Use red-black high-contrast palette bg-[#cc0000] text-[#1a1a1a] with yellowed base bg-[#f2e8d5]
2. Use diagonals and tilted elements -rotate-6 rotate-3 skew-x-3
3. Use ultra-bold fonts font-black text-6xl uppercase for visual impact
4. Use sharp right angles rounded-none to maintain geometric hard edges
5. Use hard-edge shadows shadow-[4px_4px_0_#1a1a1a] to simulate printmaking effect
6. Maintain extreme font-weight contrast -- dramatic difference between large titles and small body text
7. Use border-4 border-[#1a1a1a] to emphasize block division
8. Leverage transform and rotate to create dynamic diagonal compositions

#### Don'ts (禁止做)
1. Do not use soft rounded corners rounded-lg rounded-xl rounded-full
2. Do not use soft gradients bg-gradient-to-r
3. Do not use soft shadows shadow-sm shadow-md
4. Do not use more colors beyond the three-color system of red, black, and yellowed paper
5. Do not use soft font weights font-light font-normal font-medium
6. Do not use large whitespace that weakens urgency
7. Do not use curves and organic shapes

#### AI Rules
```
You are a Constructivism design style frontend development expert. All generated code must strictly follow these constraints:

Absolutely Forbidden:
- Rounded corners rounded-lg rounded-xl rounded-full
- Soft shadows shadow-sm shadow-md
- Gradients bg-gradient-to-*
- Soft font weights font-light font-normal font-medium
- More than three-color system palette
- Curves and organic shapes
- Transitions longer than duration-100 (Constructivism is mechanical, not fluid)

Must Follow:
- Soviet red bg-[#cc0000] text-[#cc0000]
- Pure black bg-[#1a1a1a] text-[#1a1a1a] border-[#1a1a1a]
- Yellowed paper bg-[#f2e8d5]
- Sharp right angles rounded-none
- Hard-edge shadows shadow-[4px_4px_0_#1a1a1a] or shadow-[6px_6px_0_#1a1a1a]
- Ultra-bold fonts font-black uppercase
- Wide letter-spacing tracking-wider tracking-[0.2em] tracking-[0.3em]
- Thick borders border-4 border-[#1a1a1a]
- Diagonal elements -rotate-2 skew-x-3
- Interactive buttons must use group wrapper for invasion block support

Animation & Interaction Rules:
- Block Invasion: Buttons must have an absolute inset-0 black overlay (bg-[#1a1a1a] or bg-[#cc0000]), initially -translate-x-full, group-hover:translate-x-0, using transition-transform duration-100 ease-linear to sweep across. Text sits in a relative z-10 span.
- Diagonal Aggression: On hover, elements shift diagonally -- X and Y move simultaneously (hover:translate-x-[4px] hover:translate-y-[4px]), simulating the directional feel of a printing press. Shadow shrinks in sync (shadow-[6px] to shadow-[2px]).
- Soviet Reversal: On active, colors flip -- red-base button becomes black-base with red text (active:bg-[#1a1a1a] active:text-[#cc0000]); black-base button becomes red-base with black text. Shadow snaps to zero (active:shadow-none).
- Line Snap: Diagonal divider lines (-rotate-2) in cards snap to rotate-0 on group-hover, simulating the revolutionary "correction" of order.
- Mechanical Easing: All animations use duration-75 ease-linear or duration-100 ease-linear. Strictly no ease-in-out or ease (too soft).
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#1a1a1a]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[2px_2px_0_#1a1a1a]`
- Medium: `shadow-[4px_4px_0_#1a1a1a]`
- Large: `shadow-[6px_6px_0_#1a1a1a]`
- Hover: `hover:shadow-[2px_2px_0_#1a1a1a]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-sans font-black uppercase tracking-widest`
- Body: `font-sans font-bold`

**Required Classes**

Button:
```
rounded-none
border-4 border-[#1a1a1a]
font-sans font-black uppercase tracking-widest
shadow-[4px_4px_0_#1a1a1a]
transition-all duration-150
```

Card:
```
rounded-none
border-4 border-[#1a1a1a]
shadow-[6px_6px_0_#1a1a1a]
overflow-hidden
```

Input:
```
rounded-none
border-4 border-[#1a1a1a]
bg-[#f2e8d5]
text-[#1a1a1a]
font-sans font-bold uppercase tracking-wider
focus:border-[#cc0000]
focus:outline-none
```

**Forbidden**

Classes: `font-serif`, `font-light`, `font-normal`, `font-medium`, `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`

Patterns: `^font-(?:serif|light|normal|medium)$`, `^rounded-(?!none)`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^bg-gradient-`, `^italic$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-3
  bg-[#cc0000] text-[#f2e8d5]
  font-sans font-black uppercase tracking-[0.2em] text-sm
  rounded-none border-4 border-[#1a1a1a]
  shadow-[6px_6px_0_#1a1a1a]
  hover:shadow-[2px_2px_0_#1a1a1a]
  hover:translate-x-[4px] hover:translate-y-[4px]
  active:translate-x-[6px] active:translate-y-[6px]
  active:shadow-none
  active:bg-[#1a1a1a] active:text-[#cc0000]
  transition-all duration-75 ease-linear
  overflow-hidden
  -rotate-1
">
  {/* Black block invasion — sweeps in from the left on hover */}
  <div className="absolute inset-0 bg-[#1a1a1a] -translate-x-full group-hover:translate-x-0 transition-transform duration-100 ease-linear" />
  <span className="relative z-10">ACTION</span>
</button>
```

**Card**
```html
<div className="group relative p-0 bg-[#f2e8d5] border-4 border-[#1a1a1a] rounded-none shadow-[6px_6px_0_#1a1a1a] overflow-hidden">
  {/* Banner — switches from red to black on group-hover */}
  <div className="bg-[#cc0000] group-hover:bg-[#1a1a1a] px-6 py-3 transition-colors duration-75 ease-linear">
    <h3 className="text-lg font-sans font-black text-[#f2e8d5] group-hover:text-[#cc0000] uppercase tracking-[0.2em] transition-colors duration-75 ease-linear">
      MANIFESTO
    </h3>
  </div>

  <div className="p-6">
    {/* Diagonal accent line — tilted at rest, straightens on hover */}
    <div className="w-full h-1 bg-[#1a1a1a] mb-4 -rotate-2 group-hover:rotate-0 transition-transform duration-75 ease-linear" />
    <p className="text-[#1a1a1a] font-sans font-bold leading-tight text-sm uppercase tracking-wider">
      Art must serve the revolution. Design is a weapon of progress and transformation.
    </p>
    {/* Color swatches — red/black swap on hover */}
    <div className="mt-4 flex gap-2">
      <span className="w-4 h-4 bg-[#cc0000] group-hover:bg-[#1a1a1a] inline-block transition-colors duration-75" />
      <span className="w-4 h-4 bg-[#1a1a1a] group-hover:bg-[#cc0000] inline-block transition-colors duration-75" />
      <span className="w-4 h-4 bg-[#d4a843] inline-block" />
    </div>
  </div>
</div>
```


---


### 欧普艺术 (Op Art)

**Slug**: `op-art`

#### Description
Op Art movement style that uses geometric patterns to create optical illusions and a sense of motion. Black-and-white contrast at its core, supplemented by vibrating color pairs.

#### Design Philosophy
Op Art (Optical Art) emerged in the 1960s, championed by Bridget Riley and Victor Vasarely. It uses precisely calculated geometric patterns to create visual illusions of movement, vibration, and depth on a two-dimensional surface, challenging the viewer's perceptual system.

The core of Op Art lies in "visual tension": when black and white alternate at specific frequencies and angles, the human eye perceives the illusion of motion. Concentric circles, checkerboards, moire fringes, and gradient lines -- these seemingly simple elements, after meticulous calculation, can make a static image come alive.

In terms of color, Op Art is grounded in the extreme contrast of pure black and pure white. When color is needed, "vibrating color pairs" are chosen -- red and blue, yellow and purple -- complementary colors that, when juxtaposed, produce an oscillating effect on the retina, giving the viewer a sense of restless energy.

In interface design, Op Art must be used with restraint. Large areas of optical patterns can easily cause visual fatigue, so they typically appear as localized decorations or background textures, paired with generous whitespace and clear information hierarchy.

Typography pursues minimalism and geometric precision: sans-serif fonts, uniform weight, and strict grid alignment. Text should not compete with optical patterns for attention but instead serve as a "safe island" in a sea of patterns -- clear, stable, and readable.

#### Do's (必须做)
1. Use pure black-and-white high contrast bg-black text-white bg-white text-black
2. Use geometric pattern elements -- concentric circles, stripes, checkerboards as decoration
3. Use vibrating color pairs as accents text-[#ff3300] bg-[#0066ff] text-[#ffcc00]
4. Use minimal sans-serif fonts font-sans font-medium
5. Use strict grid alignment grid grid-cols-* items-center justify-center
6. Maintain large areas of whitespace to balance the visual intensity of optical patterns
7. Use border-2 border-black to emphasize geometric lines
8. Use rounded-none to maintain sharp geometric edges
9. Cards use group class; on hover, inner concentric circle decorations trigger rotation: group-hover:animate-[spin_4s_linear_infinite] (Illusion Generation -- static geometry becomes dynamic illusion)
10. On hover, content area inverts black-and-white: hover:bg-black hover:text-white transition-colors duration-150 (Harsh Strobe -- extreme collision)
11. Headings on group-hover apply perspective distortion: group-hover:-skew-x-12 transition-transform duration-150 (Warp & Distort -- spatial illusion)
12. Active state instantly switches to warning red: active:bg-[#ff3300] active:border-[#ff3300] (Brutal Action -- blinding flash)

#### Don'ts (禁止做)
1. Do not use dense optical patterns over large areas causing visual fatigue
2. Do not use soft gradients bg-gradient-to-r that weaken contrast
3. Do not use soft shadows shadow-sm shadow-md that break the flat feel
4. Do not use rounded corners rounded-lg rounded-xl rounded-full
5. Do not use serif fonts font-serif
6. Do not use more than two accent colors; keep black-and-white as the dominant palette
7. Do not use semi-transparency or blur effects opacity-50 backdrop-blur
8. Do not use smooth gradient transitions on hover (must be hard black-white cuts, duration-100 or duration-150)
9. Do not keep optical patterns static on hover (rotation or motion effects are the source of illusion; static loses the Op Art essence)
10. Do not use smooth transition colors on active state (warning red should flash instantly, not gradient)

#### AI Rules
```
You are an Op Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Rounded corners rounded-lg rounded-xl rounded-full
- Soft shadows shadow-sm shadow-md shadow-lg
- Gradients bg-gradient-to-*
- Serif fonts font-serif
- Semi-transparency and blur effects opacity-50 backdrop-blur
- Dense optical patterns over large areas (causes visual fatigue)

## Must Follow

- Pure black bg-black text-black border-black
- Pure white bg-white text-white
- Sharp geometry rounded-none
- Sans-serif fonts font-sans font-medium
- Wide letter spacing tracking-wider tracking-[0.3em]
- Uppercase typography uppercase
- Large areas of whitespace to balance visual intensity
- Optical patterns as localized decoration, not full coverage

## Color Palette

Black and white dominant (90% area):
- Pure black: #000000
- Pure white: #ffffff

Vibrating color pairs (10% accents):
- Red: #ff3300
- Blue: #0066ff
- Yellow: #ffcc00

## Decorative Elements

- Concentric circle patterns
- Checkerboards
- Stripe patterns
- Moire fringes
- Geometric lines

## Animation & Interaction Rules

- Illusion Generation: Cards use group class; inner concentric circle decorations group-hover:animate-[spin_4s_linear_infinite], static geometry becomes dynamic illusion. Do not rotate in non-hover state (avoid visual pollution).
- Harsh Strobe: On hover, invert black-and-white hover:bg-black hover:text-white transition-colors duration-150. Must be a hard cut, no smooth gradients.
- Warp & Distort: Headings on group-hover apply skew distortion group-hover:-skew-x-12 transition-transform duration-150, creating spatial illusion.
- Brutal Action: Active state instantly switches to warning red active:bg-[#ff3300] active:border-[#ff3300], no transition, simulating a blinding flash.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-black`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-[4px_4px_0_#000000]`
- Large: `shadow-[6px_6px_0_#000000]`
- Hover: `hover:shadow-[4px_4px_0_#000000]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-sans font-bold uppercase tracking-[0.3em]`
- Body: `font-sans font-medium`

**Required Classes**

Button:
```
rounded-none
border-2 border-black
font-sans font-medium uppercase tracking-[0.3em]
transition-colors duration-200
```

Card:
```
rounded-none
border-2 border-black
bg-white
```

Input:
```
rounded-none
border-2 border-black
bg-white
text-black
font-sans font-medium uppercase tracking-wider
focus:border-[#ff3300]
focus:outline-none
```

**Forbidden**

Classes: `font-serif`, `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `shadow-sm`, `shadow`, `shadow-md`

Patterns: `^font-serif$`, `^rounded-(?!none)`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^bg-gradient-`, `^backdrop-blur`, `^opacity-(?:[1-4]\d|50)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-12 py-4
  bg-black text-white
  font-sans font-black uppercase tracking-[0.4em] text-sm
  rounded-none
  border-4 border-black
  hover:bg-white hover:text-black
  active:bg-[#ff3300] active:text-white active:border-[#ff3300]
  transition-colors duration-100
  overflow-hidden
">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_4px,black_4px,black_8px)] opacity-0 group-hover:opacity-10 transition-none" />
  <span className="relative z-10">Perceive</span>
</button>
```

**Card**
```html
<div className="
  group relative p-10
  bg-white
  border-4 border-black
  rounded-none overflow-hidden
  hover:bg-black hover:text-white
  transition-colors duration-150
  cursor-crosshair
">
  {/* Concentric rings — spin on hover (Illusion Generation) */}
  <div className="absolute top-0 right-0 w-32 h-32 overflow-hidden opacity-30 group-hover:opacity-100 transition-opacity duration-150">
    <div className="w-64 h-64 -translate-x-16 -translate-y-16 group-hover:animate-[spin_4s_linear_infinite]">
      {[...Array(8)].map((_, i) => (
        <div
          key={i}
          className="absolute inset-0 border-[3px] border-black rounded-full group-hover:border-white"
          style={{ margin: `${i * 10}px` }}
        />
      ))}
    </div>
  </div>

  <div className="relative z-10">
    <div className="w-12 h-2 bg-[#ff3300] mb-6 group-hover:bg-white transition-colors duration-150" />
    <h3 className="text-xl font-sans font-black text-black tracking-wider mb-3 uppercase group-hover:text-white group-hover:-skew-x-12 transition-all duration-150">
      Optical
    </h3>
    <p className="text-black/60 font-sans leading-relaxed text-sm group-hover:text-white/70 group-hover:tracking-wider transition-all duration-300">
      The eye deceives. Geometry reveals truth hidden in plain sight.
    </p>
  </div>
</div>
```


---


### 伊斯兰几何 (Islamic Geometric)

**Slug**: `islamic-geometric`

#### Description
Islamic geometric pattern design style with precise tessellation patterns, arabesque motifs, and the classic pairing of gold and deep blue.

#### Design Philosophy
Islamic geometric art is one of the most precise decorative systems in human civilization, still awe-inspiring after a millennium. It is based on strict mathematical principles -- tessellation of regular polygons, star-shaped multi-pointed patterns, and arabesque scrollwork -- constructing an infinitely extending visual universe.

The core philosophy is "Unity in Multiplicity." Simple geometric elements, through rotation, symmetry, and repetition, generate dazzlingly complex patterns. This process of "from simple to complex" is regarded as a meditation on the beauty of creation.

The color palette follows the classic Persian-Arabic tradition: deep blue (lapis lazuli) as the base, gold (gilding) as accents, and ivory white as breathing space. Emerald green and deep red appear as supporting colors in specific areas, adding layers and depth.

In typography, Islamic geometric style favors elegant and substantial fonts. Headings use medium-weight sans-serif fonts with moderate letter spacing, conveying solemnity and refinement. Body text maintains comfortable line height and spacing.

In interface design, geometric tessellation patterns typically appear as border decorations, dividers, or background textures rather than covering the entire surface. The core is a "framing" sensibility -- exquisite geometric borders surrounding content areas, like the mosaic inlays of a mosque dome surrounding the central space.

#### Do's (必须做)
1. Use deep blue and gold classic palette bg-[#1a3a5c] text-[#c9a74e] paired with ivory bg-[#f5ecd7]
2. Use geometric tessellation patterns as border and decorative elements
3. Use symmetrical layouts text-center items-center justify-center
4. Use elegant border decorations border-2 border-[#c9a74e]
5. Maintain a dignified font style font-sans font-semibold tracking-wide
6. Use subtle gold shadows shadow-[0_4px_12px_rgba(201,167,78,0.2)]
7. Use rounded-lg or rounded-xl to create an arch-like feel
8. Maintain generous whitespace to let geometric decorations breathe
9. Keep interaction effects symmetrically expanding with gold radiance, avoiding disordered displacement

#### Don'ts (禁止做)
1. Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
2. Do not use asymmetric chaotic layouts
3. Do not use overly minimal undecorated designs -- moderate decoration is core
4. Do not use heavy shadows shadow-2xl that break the refined feel
5. Do not use handwritten or cartoon fonts
6. Do not use pure black backgrounds bg-black (use deep blue instead)
7. Do not densely stack content without structural separation
8. Do not use bouncy spring effects; maintain solemn stability

#### AI Rules
```
You are an Islamic Geometric design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Fluorescent or neon colors (pink-500, cyan-400, lime-400)
- Asymmetric chaotic layouts
- Pure black backgrounds bg-black (use deep blue bg-[#1a3a5c])
- Handwritten or cartoon fonts
- Overly minimal undecorated designs
- Heavy shadows shadow-2xl

## Must Follow

- Deep blue base bg-[#1a3a5c]
- Ivory white bg-[#f5ecd7]
- Gold decorations text-[#c9a74e] border-[#c9a74e]
- Symmetrical centered layouts text-center
- Elegant borders border-2 border-[#c9a74e]
- Geometric corner decorations
- Gold gradient divider lines
- Moderate rounded corners rounded-lg rounded-xl
- Sans-serif fonts font-sans font-semibold
- Relaxed letter spacing tracking-wide tracking-wider

## Color Palette

Core three colors:
- Deep blue (lapis lazuli): #1a3a5c
- Ivory white: #f5ecd7
- Gold: #c9a74e

Supporting colors:
- Emerald: #2d7d46
- Deep red: #8b2332

## Decorative Elements

- Geometric tessellation patterns
- Star textures
- Corner border decorations
- Gold gradient divider lines
- Arch-shaped containers

## Animation & Interaction Rules

- Sacred Symmetry: Interaction effects maintain strict symmetry; corner decorations expand outward slightly in sync on hover.
- Divine Illumination: Gold borders and dividers can slowly enhance their glow, avoiding abrupt flashing.
- Tessellation Reveal: Geometric patterns increase visibility on hover/focus, embodying the layered sense of order being revealed.
- Elegant Easing: Recommend duration-500 + ease-out, maintaining a solemn and elegant rhythm.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#c9a74e]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_2px_4px_rgba(201,167,78,0.1)]`
- Medium: `shadow-[0_4px_12px_rgba(201,167,78,0.15)]`
- Large: `shadow-[0_8px_24px_rgba(201,167,78,0.2)]`
- Hover: `hover:shadow-[0_6px_20px_rgba(201,167,78,0.25)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-sans font-semibold tracking-wide`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
border-2 border-[#c9a74e]
font-sans font-semibold tracking-wider
transition-all duration-300
```

Card:
```
rounded-xl
border-2 border-[#c9a74e]
shadow-[0_4px_12px_rgba(201,167,78,0.15)]
```

Input:
```
rounded-lg
border-2 border-[#1a3a5c]/30
bg-[#f5ecd7]
text-[#1a3a5c]
font-sans tracking-wide
focus:border-[#c9a74e]
focus:outline-none
```

**Forbidden**

Classes: `font-mono`, `rounded-none`, `rounded-full`, `shadow-2xl`, `bg-black`, `bg-[#ff71ce]`, `bg-[#01cdfe]`, `bg-[#00ff00]`, `text-[#ff71ce]`, `text-[#01cdfe]`

Patterns: `^rounded-(?:none|full)$`, `^shadow-2xl$`, `^bg-(?:pink|cyan|lime|green)-`, `^text-(?:pink|cyan|lime|green)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-10 py-4
  bg-[#1a3a5c] text-[#c9a74e]
  font-sans font-semibold tracking-widest text-sm
  rounded-lg
  border border-[#c9a74e]/50
  shadow-[0_4px_15px_rgba(26,58,92,0.5)]
  hover:bg-[#15304d]
  hover:border-[#c9a74e]
  hover:shadow-[0_8px_25px_rgba(201,167,78,0.3)]
  active:scale-[0.98]
  transition-all duration-500 ease-out
  overflow-hidden
">
  <span className="absolute top-1 left-1 w-3 h-3 border-t border-l border-[#c9a74e]/40 group-hover:-translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-500" />
  <span className="absolute bottom-1 right-1 w-3 h-3 border-b border-r border-[#c9a74e]/40 group-hover:translate-x-0.5 group-hover:translate-y-0.5 transition-transform duration-500" />
  <span className="relative z-10">Explore</span>
</button>
```

**Card**
```html
<div className="
  group relative p-10
  bg-[#f5ecd7]
  border-2 border-[#c9a74e]
  rounded-xl
  shadow-[0_8px_30px_rgba(26,58,92,0.1)]
  hover:shadow-[0_15px_40px_rgba(26,58,92,0.15)]
  hover:-translate-y-1
  transition-all duration-500 ease-out
  overflow-hidden
">
  <div className="absolute top-2 left-2 w-6 h-6 border-t-2 border-l-2 border-[#c9a74e]/60 group-hover:border-[#c9a74e] group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-500" />
  <div className="absolute top-2 right-2 w-6 h-6 border-t-2 border-r-2 border-[#c9a74e]/60 group-hover:border-[#c9a74e] group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-500" />
  <div className="absolute bottom-2 left-2 w-6 h-6 border-b-2 border-l-2 border-[#c9a74e]/60 group-hover:border-[#c9a74e] group-hover:-translate-x-1 group-hover:translate-y-1 transition-all duration-500" />
  <div className="absolute bottom-2 right-2 w-6 h-6 border-b-2 border-r-2 border-[#c9a74e]/60 group-hover:border-[#c9a74e] group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-500" />

  <div className="flex justify-center mb-6">
    <div className="w-10 h-10 text-[#c9a74e] group-hover:rotate-45 transition-transform duration-700 ease-out">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <polygon points="12,0 15,8 24,8 17,13 19,22 12,17 5,22 7,13 0,8 9,8" />
      </svg>
    </div>
  </div>

  <div className="w-12 h-0.5 bg-gradient-to-r from-transparent via-[#c9a74e] to-transparent mx-auto mb-4 opacity-80 group-hover:opacity-100 transition-opacity duration-500" />
  <h3 className="text-2xl font-sans font-semibold text-[#1a3a5c] text-center mb-4 tracking-wider group-hover:text-[#214a75] transition-colors duration-300">
    Tessellation
  </h3>
  <p className="text-[#1a3a5c]/70 text-center font-sans leading-relaxed">
    Infinite patterns emerging from the profound unity of simple geometric forms.
  </p>
</div>
```


---


### 印度节庆 (Indian Festive)

**Slug**: `indian-festive`

#### Description
The dazzling aesthetics of Indian Diwali and Holi festivals, with rich gold ornamentation, jewel-tone palettes, and mandala motifs. Ideal for celebrations, events, and lifestyle brands.

#### Design Philosophy
Indian Festive draws from the dazzling visual language of Diwali (Festival of Lights) and Holi (Festival of Colors), transforming thousands of years of South Asian color traditions into modern digital interfaces.

Core concepts:
- Dazzling exuberance: Bold use of high-saturation jewel tones -- vermillion, saffron orange, royal purple, peacock teal -- expressing the fervor and vitality of festivals
- Gold ornamentation: Gold lines, borders, and glows are the soul of Indian decorative arts, representing the sacred and prosperity
- Mandala motifs: Symmetrical geometric floral patterns serve as both meditative vehicles and visual hierarchy builders
- Light and hope: Diwali is the "festival of lights," with warm radiance permeating every interactive detail

In design expression, Indian Festive style does not hold back on layering and clashing colors. Unlike Western minimalism's restraint, it embraces richness, layering, and decorativeness, treating every interface element as a visual celebration.

Suitable for celebration event pages, lifestyle brands, cultural education platforms, and any digital product needing to convey passion, diversity, and abundance.

#### Do's (必须做)
1. Use vermillion bg-[#e63946] and saffron orange bg-[#ff9f1c] as primary accent colors
2. Generously use gold text-[#d4af37] and border-[#d4af37] for decorative lines and glows
3. Use warm ivory bg-[#fff8e7] as the base background
4. Use royal purple text-[#7b2d8e] and peacock teal text-[#2a9d8f] as supporting colors
5. Components use medium rounded corners rounded-xl for a soft festive atmosphere
6. Add gold box-shadow glow effects shadow-[0_0_20px_rgba(212,175,55,0.3)]
7. Use gradient backgrounds bg-gradient-to-r to enhance color expressiveness
8. Headings use bold with wider tracking font-bold tracking-wide
9. Button hover triggers gold glow burst: hover:shadow-[0_0_35px_rgba(212,175,55,0.8)]
10. Button hover:-translate-y-1 hover:scale-[1.03] (festive upward jubilation)
11. Button active:scale-95 active:translate-y-0 active:shadow-[0_0_16px_rgba(212,175,55,0.4)]
12. Cards use group class; color strip expands from w-12 to group-hover:w-full (duration-500, ribbon unfurling)
13. focus:ring-2 focus:ring-[#d4af37] focus:ring-offset-2 focus:ring-offset-[#fff8e7]

#### Don'ts (禁止做)
1. Do not use cold blue-gray tones bg-gray-100, bg-slate-50
2. Do not use pure black backgrounds bg-black, bg-[#000]
3. Do not use sharp corners without rounding rounded-none
4. Do not use low-saturation or dull colors
5. Do not use overly tech-feel neon blue-green text-[#00ffff]
6. Do not omit gold decorative elements
7. Do not use monochromatic schemes; colors should be layered
8. Do not omit active:scale-95 on buttons (festive buttons must have a jubilant bounce feel)
9. Do not omit focus:ring-offset-[#fff8e7] on focus:ring (focus ring must separate from ivory background)

#### AI Rules
```
You are an Indian Festive design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Cold blue-gray tones (bg-gray-100, bg-slate-50)
- Pure black backgrounds (bg-black)
- Sharp corners (rounded-none)
- Low-saturation or muted colors
- Neon cyber colors (text-[#00ffff], text-[#ff00ff])
- Monochromatic schemes

## Must Follow

- Vermillion red #e63946 and saffron orange #ff9f1c as primary accents
- Warm ivory background bg-[#fff8e7]
- Gold decorations using border-[#d4af37] and shadow with gold rgba
- Royal purple #7b2d8e for text and headings
- Rounded corners rounded-xl
- Multi-color gradients for emphasis
- Bold typography with tracking-wide

## Color Palette

Primary:
- Vermillion: #e63946
- Warm White: #fff8e7
- Saffron: #ff9f1c
- Royal Purple: #7b2d8e
- Teal: #2a9d8f
- Gold: #d4af37

## Special Elements

- Mandala-inspired circular decorations
- Gold border and glow effects
- Multi-color gradient strips
- Warm layered backgrounds
- Festive light/lamp motifs

## Animation & Interaction Rules

### Grand Illumination (Button Glow)
- Resting: shadow-[0_0_16px_rgba(212,175,55,0.4)] -- always-on gold aura
- Hover: hover:shadow-[0_0_35px_rgba(212,175,55,0.8)] -- glow explodes to 35px (diya lamp igniting)
- NEVER use flat shadow on interactive elements

### Joyful Flourish (Button Motion)
- hover:-translate-y-1 hover:scale-[1.03] -- lift AND grow simultaneously (lamp rising + fireworks ascending)
- active:scale-95 active:translate-y-0 -- joyful bounce-back
- active:shadow-[0_0_16px_rgba(212,175,55,0.4)] -- glow settles back to resting

### Golden Touch (Focus)
- focus:ring-2 focus:ring-[#d4af37] focus:ring-offset-2 focus:ring-offset-[#fff8e7]
- ring-offset-[#fff8e7] mandatory -- gold ring must separate from ivory background

### Ceremonial Unfurling (Card Color Strip)
- Resting: w-12 h-1 bg-gradient-to-r from-[#e63946] via-[#ff9f1c] to-[#d4af37]
- On group-hover: group-hover:w-full -- ribbon unfurls across full card width (gift unwrapping)
- Transition: duration-500 ease-out
- Always use group class on card container

### Card Hover
- hover:-translate-y-2 hover:scale-[1.02] -- festive ascension
- hover:shadow-[0_15px_40px_rgba(230,57,70,0.2),0_0_30px_rgba(212,175,55,0.3)] -- dual jewel-tone glow
- Heading: group-hover:text-[#e63946] transition-colors duration-300 -- purple to vermillion shift
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#d4af37]/50`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(212,175,55,0.15)]`
- Medium: `shadow-[0_4px_16px_rgba(212,175,55,0.2)]`
- Large: `shadow-[0_8px_28px_rgba(212,175,55,0.3)]`
- Hover: `hover:shadow-[0_0_28px_rgba(212,175,55,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-wide text-[#7b2d8e]`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-xl
border-2 border-[#d4af37]
shadow-[0_0_16px_rgba(212,175,55,0.4)]
font-bold tracking-wide
transition-all duration-300 ease-in-out
```

Card:
```
rounded-xl
bg-[#fff8e7]
border-2 border-[#d4af37]/50
shadow-[0_4px_20px_rgba(212,175,55,0.2)]
```

Input:
```
rounded-xl
border-2 border-[#d4af37]/30
bg-[#fff8e7]
text-[#7b2d8e]
focus:border-[#d4af37]
focus:shadow-[0_0_16px_rgba(212,175,55,0.4)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-none`, `bg-black`, `bg-[#000]`, `bg-gray-100`, `bg-gray-50`, `bg-slate-50`, `bg-slate-100`, `text-[#00ffff]`, `text-[#ff00ff]`, `border-[#00ffff]`

Patterns: `^rounded-none$`, `^bg-(?:black|slate-[1-2]|gray-[1-2])`, `^text-\[#(?:00ffff|ff00ff)\]`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-4
  bg-[#e63946] text-white
  font-bold tracking-wide
  rounded-xl
  border-2 border-[#d4af37]
  shadow-[0_0_16px_rgba(212,175,55,0.4)]
  hover:shadow-[0_0_35px_rgba(212,175,55,0.8)]
  hover:-translate-y-1 hover:scale-[1.03]
  focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:ring-offset-2 focus:ring-offset-[#fff8e7]
  active:scale-95 active:translate-y-0
  active:shadow-[0_0_16px_rgba(212,175,55,0.4)]
  transition-all duration-300 ease-out
">
  Celebrate
</button>
```

**Card**
```html
<div className="
  group
  p-8
  bg-[#fff8e7]
  rounded-xl
  border-2 border-[#d4af37]/50
  shadow-[0_4px_20px_rgba(212,175,55,0.2)]
  hover:-translate-y-2 hover:scale-[1.02]
  hover:shadow-[0_15px_40px_rgba(230,57,70,0.2),0_0_30px_rgba(212,175,55,0.3)]
  transition-all duration-300 ease-out
  cursor-pointer
">
  {/* Ceremonial Unfurling color strip */}
  <div className="w-12 h-1 bg-gradient-to-r from-[#e63946] via-[#ff9f1c] to-[#d4af37] rounded-full mb-4 group-hover:w-full transition-all duration-500 ease-out" />
  <h3 className="text-2xl font-bold text-[#7b2d8e] mb-3 group-hover:text-[#e63946] transition-colors duration-300">
    Festival of Lights
  </h3>
  <p className="text-[#7b2d8e]/70">
    Illuminating every corner with warmth and joy
  </p>
</div>
```


---


### 非洲纺织 (African Textile)

**Slug**: `african-textile`

#### Description
Design style inspired by West African Kente cloth and Adire tie-dye, featuring bold geometric weave patterns, earth tones clashing with vivid colors, and handcrafted textures.

#### Design Philosophy
African Textile draws inspiration from West African Kente weaving and Adire indigo tie-dye, transforming centuries of textile craft traditions into a vibrant digital design language.

Core concepts:
- Bold geometry: The warp-and-weft weaving of Kente cloth produces strong geometric stripes and color blocks, with each pattern carrying specific cultural meaning and social status symbolism
- Earth tones: Dark wood, terracotta orange, and sand gold form a warm and substantial color foundation, echoing the red soil and grasslands of the African continent
- Handcrafted texture: Rough fabric textures and imperfect handmade edges give the interface a unique human warmth
- Color collision: The vivid contrast between warm earth tones and forest green mimics the visual impact of bright stripes interspersed against dark backgrounds in Kente cloth

Kente cloth is called "the cloth of kings" (nwentoma) in Akan culture, and its weaving techniques have been listed as UNESCO Intangible Cultural Heritage. Each color and pattern combination represents different proverbs, historical events, or philosophical concepts.

Suitable for cultural brands, artisan e-commerce, educational platforms, and any project seeking to convey strength, tradition, and a connection to the earth.

#### Do's (必须做)
1. Use Kente orange bg-[#c4501f] and gold bg-[#f0c75e] for accent elements
2. Use dark wood bg-[#2c1810] as main background to convey weight
3. Use sand bg-[#e8d5b5] for secondary backgrounds and card base colors
4. Use forest green text-[#1a5632] for text and decorative color
5. Employ geometric stripes and color blocks as decorations to simulate weave patterns
6. Use thick borders border-2 or border-4 to convey the structural feel of fabric
7. Components use small rounded corners rounded-lg to keep handcrafted but not rough
8. Headings use font-bold uppercase tracking-widest to convey solemnity
9. Keep interaction rhythm steady, prefer duration-300
10. Add press damping on click (active:scale-[0.98] + active:brightness-90)
11. Allow localized weave blocks to shift slightly on hover, simulating fabric tension

#### Don'ts (禁止做)
1. Do not use neon or high-saturation fluorescent colors text-[#00ffff]
2. Do not use soft pastel tones bg-pink-100, bg-purple-100
3. Do not use very large rounded corners rounded-full or rounded-3xl
4. Do not use pure white backgrounds bg-white
5. Do not use glassmorphism or blur effects backdrop-blur
6. Do not omit geometric decorative elements
7. Do not use light, fast interactions (duration-75 + large displacement)

#### AI Rules
```
You are an African Textile design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Neon or fluorescent colors (text-[#00ffff], text-[#ff00ff])
- Pastel or soft pink/purple tones (bg-pink-100, bg-purple-100)
- Very round shapes (rounded-full, rounded-3xl)
- Pure white backgrounds (bg-white)
- Glass morphism or blur effects (backdrop-blur)
- Thin hairline borders (border, border-[0.5px])

## Must Follow

- Kente orange #c4501f and gold #f0c75e as primary accents
- Dark wood #2c1810 for backgrounds and text
- Sand #e8d5b5 for card backgrounds
- Forest green #1a5632 for secondary accents
- Bold geometric decorations (stripes, blocks, squares)
- Thick borders border-2 or border-4
- Hard offset shadows shadow-[4px_4px_0px_#2c1810]
- Uppercase bold headings with wide tracking

## Animation & Interaction Rules

- Heavy tactility: Interactions should feel weighted and handcrafted, not floating
- Use deliberate timing around duration-300 for primary hover/active feedback
- Deep press on click: use active:scale-[0.98], active:brightness-90, and shadow collapse
- Woven shifts: Geometric accent blocks can move 1-2px on hover to mimic textile tension
- Avoid glitch or jitter motion; movement must stay grounded and physical

## Color Palette

Primary:
- Kente Orange: #c4501f
- Dark Wood: #2c1810
- Gold: #f0c75e
- Forest Green: #1a5632
- Sand: #e8d5b5

## Special Elements

- Kente stripe patterns (repeating color blocks)
- Geometric square and rectangular decorations
- Woven texture overlays
- Bold color block dividers
- Earth-tone gradients
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#2c1810]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[2px_2px_0px_#2c1810]`
- Medium: `shadow-[4px_4px_0px_#2c1810]`
- Large: `shadow-[6px_6px_0px_#2c1810]`
- Hover: `hover:shadow-[6px_6px_0px_#2c1810]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200 ease-in-out`

**Typography**
- Heading: `font-bold uppercase tracking-widest text-[#2c1810]`
- Body: `font-sans tracking-wide`

**Required Classes**

Button:
```
rounded-lg
border-2 border-[#f0c75e]
shadow-[4px_4px_0px_#2c1810]
font-bold uppercase tracking-widest
transition-all duration-200 ease-in-out
```

Card:
```
rounded-lg
bg-[#e8d5b5]
border-2 border-[#2c1810]
shadow-[4px_4px_0px_#2c1810]
```

Input:
```
rounded-lg
border-2 border-[#2c1810]/40
bg-[#e8d5b5]
text-[#2c1810]
focus:border-[#c4501f]
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `rounded-3xl`, `bg-white`, `bg-pink-100`, `bg-purple-100`, `text-[#00ffff]`, `text-[#ff00ff]`, `backdrop-blur`, `backdrop-blur-md`, `backdrop-blur-lg`

Patterns: `^rounded-(?:full|3xl)$`, `^bg-(?:white|pink-[1-3]|purple-[1-3])`, `^text-\[#(?:00ffff|ff00ff)\]`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-4
  bg-[#c4501f] text-[#e8d5b5]
  font-bold uppercase tracking-widest
  rounded-lg
  border-4 border-[#2c1810]
  shadow-[4px_4px_0px_#2c1810]
  hover:shadow-[6px_6px_0px_#2c1810]
  hover:-translate-y-1
  active:shadow-none active:translate-y-[4px] active:translate-x-[4px]
  active:scale-[0.98] active:brightness-90
  transition-all duration-300
">
  <span className="inline-flex items-center gap-2">
    Explore
    <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="square" strokeLinejoin="miter" strokeWidth="3" d="M5 12h14M12 5l7 7-7 7"></path>
    </svg>
  </span>
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#e8d5b5]
  rounded-lg
  border-4 border-[#2c1810]
  shadow-[6px_6px_0px_#2c1810]
  hover:shadow-[8px_8px_0px_#2c1810]
  hover:-translate-y-1
  transition-all duration-300
">
  <div className="flex gap-1 mb-4 group-hover:gap-2 transition-all duration-300">
    <div className="w-4 h-4 bg-[#c4501f]" />
    <div className="w-4 h-4 bg-[#f0c75e] group-hover:-translate-y-1 transition-transform duration-300" />
    <div className="w-4 h-4 bg-[#1a5632]" />
    <div className="w-4 h-4 bg-[#c4501f] group-hover:translate-y-1 transition-transform duration-300" />
    <div className="w-4 h-4 bg-[#f0c75e]" />
  </div>
  <h3 className="text-2xl font-bold text-[#2c1810] uppercase tracking-wider mb-3 group-hover:text-[#c4501f] transition-colors duration-300">
    Kente Weave
  </h3>
  <p className="text-[#2c1810]/80 font-medium">
    Woven threads carry the stories of generations
  </p>
</div>
```


---


### 韩式极简 (Korean Minimal)

**Slug**: `korean-minimal`

#### Description
Korean minimalist design aesthetic influenced by K-beauty and Korean architecture. Soft pastel tones, generous whitespace, refined rounded corners, and restrained ornamentation.

#### Design Philosophy
Korean Minimal originates from the deep pursuit of "whitespace" and "restraint" in Korean contemporary design aesthetics, blending the soft textures of K-beauty with the clean lines of modern Korean architecture.

Core concepts:
- Whitespace as beauty: Large areas of blank space are not emptiness but a sense of breathing. Korean Minimal treats whitespace as the most important design element, allowing content to emerge naturally in tranquility
- Pastel warmth: Unlike the cold gray tones of Nordic minimalism, Korean Minimal chooses pastels with a slightly warm undertone -- blush pink, sage green, sand -- giving the interface a soft yet not cold personality
- Restrained decoration: Decorative elements are compressed to the extreme -- a thin line, a subtle rounded corner, a faint shadow is all there is. One more is too much, one less is too little
- Refined touch: Influenced by K-beauty product design, every interaction pursues a silky, refined, and premium feel

Korean Minimal's influence in the global design world is growing, especially in beauty, lifestyle, and premium consumer goods. It proves that minimalism need not be cold -- it can be warm and soft while maintaining elegant restraint.

Suitable for beauty brands, lifestyle e-commerce, personal blogs, photography portfolios, and any digital product pursuing a refined and serene atmosphere.

#### Do's (必须做)
1. Use generous whitespace p-8 md:p-12 lg:p-16 to create a breathing feel
2. Use warm white bg-[#faf9f7] as the main background color
3. Use slate blue text-[#3d4a5c] as the primary text color
4. Use pastel colors for subtle accents text-[#d4a5a5], bg-[#a8c5b8]/10
5. Use refined large rounded corners rounded-2xl or rounded-3xl
6. Use ultra-thin borders border border-[#3d4a5c]/10
7. Use soft shadows shadow-sm or custom light shadows
8. Fonts should be light and clean font-light or font-normal, tracking-wide

#### Don'ts (禁止做)
1. Do not use high-saturation pure colors bg-red-500, bg-blue-600
2. Do not use thick borders border-2, border-4
3. Do not use strong shadows shadow-xl, shadow-2xl
4. Do not use uppercase and tracking-widest (too aggressive)
5. Do not use dark/black backgrounds bg-black, bg-[#0a0a0a]
6. Do not over-decorate or stack elements excessively
7. Do not use neon or fluorescent colors

#### AI Rules
```
You are a Korean Minimal design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- High saturation pure colors (bg-red-500, bg-blue-600, bg-green-500)
- Thick borders (border-2, border-4)
- Heavy shadows (shadow-xl, shadow-2xl)
- Uppercase text and ultra-wide tracking (uppercase tracking-widest)
- Dark/black backgrounds (bg-black, bg-[#0a0a0a])
- Neon or fluorescent colors
- Excessive decorations or visual clutter

## Must Follow

- Warm white background bg-[#faf9f7]
- Slate blue text text-[#3d4a5c]
- Generous whitespace and padding (p-8, p-10, p-12)
- Delicate rounded corners rounded-2xl
- Ultra-thin borders border border-[#3d4a5c]/8 or /10
- Soft subtle shadows shadow-sm
- Light font weights font-light or font-normal
- Wide but gentle tracking tracking-wide

## Color Palette

Primary:
- Slate Blue: #3d4a5c
- Warm White: #faf9f7
- Blush Pink: #d4a5a5
- Sage Green: #a8c5b8
- Sand: #e8d4b8

## Design Principles

- Whitespace is the primary design element
- Less is always more
- Subtle is always better than obvious
- Every element must have room to breathe
- Decorations should be minimal (thin lines, small dots)

## Animation & Interaction Rules

- Lazy Breathing: Transitions should use duration-700 or above with ease-in-out, maintaining a languid, steady pace without short, snappy feedback.
- Micro Lift: Hover displacement stays at the -translate-y-0.5 level, expressing layers through ultra-shallow warm-toned shadow spread.
- Muted Whisper: Text and borders only do same-hue micro-difference transitions, avoiding high-contrast color jumps that break the quiet atmosphere.
- Soft Press: Active feedback primarily uses slight background darkening, not relying on obvious scaling or bouncing.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#3d4a5c]/8`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-[0_4px_12px_rgba(61,74,92,0.06)]`
- Large: `shadow-[0_8px_24px_rgba(61,74,92,0.08)]`
- Hover: `hover:shadow-[0_4px_12px_rgba(61,74,92,0.06)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-light tracking-wide text-[#3d4a5c]`
- Body: `font-sans font-light`

**Required Classes**

Button:
```
rounded-2xl
shadow-sm
font-normal tracking-wide
transition-all duration-300 ease-in-out
```

Card:
```
rounded-2xl
bg-[#faf9f7]
border border-[#3d4a5c]/8
shadow-sm
```

Input:
```
rounded-2xl
border border-[#3d4a5c]/10
bg-[#faf9f7]
text-[#3d4a5c]
font-light tracking-wide
focus:border-[#d4a5a5]/50
focus:outline-none
```

**Forbidden**

Classes: `border-2`, `border-4`, `shadow-xl`, `shadow-2xl`, `bg-black`, `bg-[#0a0a0a]`, `bg-red-500`, `bg-blue-600`, `bg-green-500`, `uppercase`

Patterns: `^border-[2-4]$`, `^shadow-(?:xl|2xl)$`, `^bg-(?:black|\[#0[0-9a-f]{5}\])`, `^bg-(?:red|blue|green|orange|purple)-[4-9]`, `^font-(?:black|extrabold)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-3.5
  bg-[#faf9f7] text-[#3d4a5c]
  font-light tracking-wide
  rounded-2xl
  border border-[#3d4a5c]/10
  shadow-[0_4px_15px_rgba(232,212,184,0.18)]
  hover:-translate-y-0.5
  hover:text-[#2f3946]
  hover:shadow-[0_16px_36px_rgba(168,197,184,0.18)]
  active:bg-[#f3f0ea]
  transition-all duration-700 ease-in-out
">
  Discover
</button>
```

**Card**
```html
<div className="
  group
  p-10
  bg-[#faf9f7]
  rounded-2xl
  border border-[#3d4a5c]/10
  shadow-[0_8px_24px_rgba(232,212,184,0.14)]
  hover:-translate-y-0.5
  hover:shadow-[0_24px_50px_rgba(212,165,165,0.16)]
  transition-all duration-1000 ease-in-out
">
  <div className="w-8 h-px bg-[#d4a5a5]/80 mb-6" />
  <h3 className="text-xl font-light text-[#3d4a5c] mb-4 tracking-wide group-hover:text-[#2f3946] transition-colors duration-700">
    Gentle Touch
  </h3>
  <p className="text-sm text-[#3d4a5c]/55 leading-relaxed group-hover:text-[#3d4a5c]/70 transition-colors duration-700">
    A slow and delicate interface rhythm, where warmth appears in quiet gradients.
  </p>
</div>
```


---


### 粉彩哥特 (Pastel Goth)

**Slug**: `pastel-goth`

#### Description
A unique fusion of dark aesthetics and candy colors, pairing soft hues like pastel purple and pastel blue with gothic elements such as skulls and crosses. Dark backgrounds with pastel highlights.

#### Design Philosophy
Pastel Goth is a unique aesthetic subculture born from Tumblr in the 2010s, creating a subversive fusion of traditional gothic dark elements with sweet candy colors.

Core concepts:
- Dark-sweet collision: The somber deep purple-black base contrasts vividly yet harmoniously with soft candy colors like lavender, pastel blue, and pastel pink. This sense of contradiction is the soul of Pastel Goth
- Gothic symbols: Traditional gothic symbols like skulls, crosses, bats, and moons are "cutified" -- recolored in pastels, dissolving fear while preserving mystery
- Soft glow effect: Pastel colors on dark backgrounds produce a soft, fluorescent-like glow, creating a dreamy yet slightly eerie atmosphere
- Subcultural attitude: Rejecting the binary opposition of mainstream aesthetics -- neither fully cute nor fully dark, but creating a third space between the two

Pastel Goth aesthetics reflect a challenge to traditional aesthetic boundaries: who says darkness cannot be sweet? Who says cuteness cannot be deep? This style suits brands pursuing unique individuality, indie music projects, subcultural communities, and any creative project seeking balance between darkness and sweetness.

In digital design, Pastel Goth creates an interface experience with both visual impact and soft tactility through deep purple-black backgrounds paired with pink and lavender text and decorations.

#### Do's (必须做)
1. Use deep purple bg-[#2d1b3d] and near-black bg-[#1a1225] as background colors
2. Use lavender text-[#d4a5e3] and pastel blue text-[#7ec8c8] as main text colors
3. Use pink text-[#f5a5b8] and periwinkle text-[#b8a5f5] as decorative colors
4. Add soft pastel glow effects shadow-[0_0_20px_rgba(212,165,227,0.3)]
5. Use medium rounded corners rounded-xl to keep soft but not overly cute
6. Use semi-transparent pastel borders border border-[#d4a5e3]/30
7. Headings can use font-bold but paired with pastel colors to soften
8. Use gradients bg-gradient-to-r to transition between pastel colors where appropriate
9. On hover, let pastel purple and teal glows layer and spread, creating a Toxic Glow contrast of sweet-dark
10. Use duration-300 to 500 for interaction rhythm, maintaining Creepy Softness languid atmosphere
11. Card corner accent elements can shift or rotate slightly, reinforcing the Occult Hover subcultural quality

#### Don'ts (禁止做)
1. Do not use bright white or pure white backgrounds bg-white, bg-gray-50
2. Do not use high-saturation pure colors bg-red-500, bg-blue-600
3. Do not use earth tones bg-[#8b7355], text-amber-700
4. Do not use overly sunny warm tones bg-yellow-300, bg-orange-400
5. Do not use sharp corners without rounding rounded-none
6. Do not omit pastel highlights -- pure darkness is not Pastel Goth
7. Do not use overly bright greens text-green-400, bg-green-500
8. Do not use only a single purple glow (need conflicting layers of pastel purple/teal/pink)
9. Do not use overly fast 100ms-level animations (loses the eerie softness)

#### AI Rules
```
You are a Pastel Goth design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- White or light backgrounds (bg-white, bg-gray-50, bg-[#faf9f7])
- Pure saturated colors (bg-red-500, bg-blue-600)
- Earth tones (bg-amber-700, text-[#8b7355])
- Warm sunny colors (bg-yellow-300, bg-orange-400)
- Sharp corners (rounded-none)
- Pure dark without pastel highlights
- Bright green (text-green-400, bg-green-500)

## Must Follow

- Dark purple #2d1b3d and near-black #1a1225 as backgrounds
- Lavender #d4a5e3 as primary text/accent color
- Pastel teal #7ec8c8, pastel pink #f5a5b8, periwinkle #b8a5f5 as secondary accents
- Soft pastel glow effects shadow-[0_0_Xpx_rgba(212,165,227,...)]
- Rounded corners rounded-xl
- Semi-transparent pastel borders border-[#d4a5e3]/20 or /30
- Gradient text using pastel colors for headings

## Color Palette

Primary:
- Dark Purple: #2d1b3d
- Near Black: #1a1225
- Lavender: #d4a5e3
- Pastel Teal: #7ec8c8
- Pastel Pink: #f5a5b8
- Periwinkle: #b8a5f5

## Special Elements

- Pastel glow orbs (blurred circles)
- Cross and gothic symbols in pastel
- Gradient text (lavender to pink to periwinkle)
- Small pastel dots as decorations
- Semi-transparent borders with pastel glow

## Animation & Interaction Rules

- Toxic Glow: Hover glow must reflect conflicting layers of pastel purple, teal, and pink, not single-color glow.
- Creepy Softness: Interactions maintain duration-300 to 500, allowing slight float-up but avoiding excessive bouncing.
- Sweet Rebellious Press: Active state can briefly invert border/glow colors, highlighting subcultural rebelliousness.
- Occult Hover: Corner decorations or micro-symbols can shift and brighten slightly, creating an uneasy yet cute atmosphere.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d4a5e3]/20`
- Radius: `rounded-xl`

**Shadow**
- Small: `shadow-[0_0_8px_rgba(212,165,227,0.15)]`
- Medium: `shadow-[0_0_16px_rgba(212,165,227,0.2)]`
- Large: `shadow-[0_0_24px_rgba(212,165,227,0.3)]`
- Hover: `hover:shadow-[0_0_24px_rgba(212,165,227,0.4)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-in-out`

**Typography**
- Heading: `font-bold tracking-wide text-[#d4a5e3]`
- Body: `font-sans text-[#b8a5f5]/70`

**Required Classes**

Button:
```
rounded-xl
border border-[#d4a5e3]/30
shadow-[0_0_16px_rgba(212,165,227,0.25)]
font-bold tracking-wide
transition-all duration-300 ease-in-out
```

Card:
```
rounded-xl
bg-[#1a1225]
border border-[#b8a5f5]/20
shadow-[0_0_20px_rgba(184,165,245,0.15)]
```

Input:
```
rounded-xl
border border-[#d4a5e3]/20
bg-[#1a1225]
text-[#d4a5e3]
focus:border-[#f5a5b8]/50
focus:shadow-[0_0_16px_rgba(245,165,184,0.2)]
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-[#faf9f7]`, `bg-[#fff8e7]`, `bg-red-500`, `bg-blue-600`, `bg-green-500`, `bg-yellow-300`, `bg-orange-400`

Patterns: `^bg-(?:white|gray-[1-3]|\[#(?:faf|fff|f5f))`, `^bg-(?:red|blue|green|yellow|orange)-[3-6]`, `^text-(?:amber-|green-[3-5]|\[#8b7)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-8 py-3.5
  bg-[#2d1b3d] text-[#d4a5e3]
  font-bold tracking-widest uppercase
  rounded-xl
  border-2 border-[#d4a5e3]/30
  shadow-[0_0_15px_rgba(212,165,227,0.2)]
  hover:bg-[#d4a5e3] hover:text-[#1a1225]
  hover:shadow-[0_0_25px_rgba(245,165,184,0.6),0_0_16px_rgba(126,200,200,0.35)]
  hover:-translate-y-1
  active:bg-[#f5a5b8] active:shadow-[0_0_10px_rgba(245,165,184,0.8)] active:scale-95
  transition-all duration-300 ease-out
">
  Enter the Void
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-[#1a1225]
  rounded-2xl
  border border-[#b8a5f5]/20
  shadow-[0_8px_30px_rgba(0,0,0,0.5)]
  hover:border-[#f5a5b8]/50
  hover:shadow-[0_10px_40px_rgba(245,165,184,0.15),0_0_20px_rgba(126,200,200,0.1)]
  hover:-translate-y-1
  transition-all duration-500 ease-out
  cursor-pointer
">
  <div className="flex gap-3 mb-6">
    <div className="w-3 h-3 rounded-full bg-[#d4a5e3] shadow-[0_0_8px_#d4a5e3] group-hover:scale-125 transition-transform duration-300" />
    <div className="w-3 h-3 rounded-full bg-[#7ec8c8] shadow-[0_0_8px_#7ec8c8] group-hover:scale-125 transition-transform duration-300 delay-75" />
    <div className="w-3 h-3 rounded-full bg-[#f5a5b8] shadow-[0_0_8px_#f5a5b8] group-hover:scale-125 transition-transform duration-300 delay-150" />
  </div>
  <h3 className="text-2xl font-black text-[#d4a5e3] mb-3 tracking-wide group-hover:text-[#f5a5b8] transition-colors duration-300">
    Midnight Garden
  </h3>
  <p className="text-[#b8a5f5]/70 font-medium leading-relaxed group-hover:text-[#b8a5f5]/90 transition-colors duration-300">
    Where shadows bloom in pastel light, with a soft and rebellious undercurrent.
  </p>
</div>
```


---


### 极繁主义 (Maximalism)

**Slug**: `maximalism`

#### Description
Maximalist design -- more is more. Layered patterns, mixed fonts, saturated colors, and decorative borders. A stark contrast to minimalism, embracing richness, opulence, and visual impact.

#### Design Philosophy
Maximalism is a direct rebellion against minimalism. It believes "more is more," rejecting the restraint of whitespace and embracing layering, decoration, and visual richness. From Baroque palaces to Bohemian interior design, maximalism has always been a natural product of human expressive desire.

In digital design, maximalism manifests as bold clashing color combinations, mixed use of multiple fonts, layered decorative borders, and patterned backgrounds. Every inch of screen space is given visual meaning, every element competes for attention, yet achieves a kind of chaotic harmony in the overall composition.

Core concepts:
- Layered richness: Multiple visual element layers stacked together -- background patterns, decorative borders, shadows, and gradients used in combination
- Saturated color clashing: Hot pink, bright yellow, electric blue, vivid purple, and emerald green in bold combinations, rejecting grayscale neutrals
- Mixed typography: Mixing serif, sans-serif, and handwritten fonts on the same page, with each area having its own typographic personality
- Decoration above all: Borders using double lines, dashed lines, wavy lines, and other varied styles; buttons and cards with additional decorative layers

Maximalism suits fashion brands, art exhibitions, music festival websites, and creative portfolios -- any scenario requiring strong visual expression. It is not suited for efficiency-focused tool products.

The key to designing maximalist work: although everything is "full," it is not without logic. Colors need contrast relationships, fonts need hierarchical relationships, and decorative elements need rhythmic patterns. Maximal, but not chaotic.

#### Do's (必须做)
1. Use saturated clash color combinations: bg-[#d4145a], bg-[#ffbe0b], bg-[#3a86ff], bg-[#8338ec], bg-[#06d6a0]
2. Mix fonts: headings font-serif font-black, body font-sans, labels font-mono
3. Use double borders or decorative borders: border-4 border-double, border-[3px] border-dashed
4. Add multi-layer shadows: shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]
5. Use gradient background overlays: bg-gradient-to-br from-[#d4145a] via-[#8338ec] to-[#3a86ff]
6. Boldly use uppercase tracking-widest and extra-large font sizes text-6xl and above
7. Add decorative pseudo-elements and pattern backgrounds to cards and containers
8. Use rotate and skew transforms to add dynamic feel

#### Don'ts (禁止做)
1. Do not use grayscale neutral colors (gray-300, gray-400, gray-500) as primary colors
2. Do not use excessive whitespace (gap-16 or larger spacing)
3. Do not use a single font throughout the entire page
4. Do not use 1px thin borders (border or border-[1px])
5. Do not use low-saturation color palettes (opacity-30 or lower on primary colors)
6. Do not use minimal undecorated designs
7. Do not use pure white bg-white as large-area backgrounds

#### AI Rules
```
You are a Maximalism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Grayscale neutral backgrounds (gray-100 through gray-500)
- Single font family throughout (must mix at least 2)
- Thin 1px borders (border or border-[1px])
- Excessive whitespace and minimal layouts
- Low-saturation or muted color palettes
- Pure white bg-white as primary background
- Subtle, understated design choices

## Must Follow

- Deep navy background bg-[#1a0a2e] as base
- Saturated accent colors: #d4145a, #ffbe0b, #3a86ff, #8338ec, #06d6a0
- Thick borders border-4 with bold accent colors
- Multi-layer offset shadows shadow-[4px_4px_0px_color,8px_8px_0px_color]
- Mixed fonts: font-serif for headings, font-sans for body, font-mono for labels
- Gradient backgrounds bg-gradient-to-br/to-r with multiple accent stops
- uppercase tracking-widest on buttons and labels
- Decorative elements: dashed borders, color badges, pattern backgrounds

## Color Palette

Primary:
- Hot Pink: #d4145a
- Deep Navy: #1a0a2e
- Vivid Yellow: #ffbe0b
- Electric Blue: #3a86ff
- Vivid Purple: #8338ec
- Emerald: #06d6a0

## Unique Elements (Maximalism-Only)

1. Multi-layer shadows: shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff] for stacked depth
2. Gradient borders & backgrounds: from-[#d4145a] via-[#8338ec] to-[#3a86ff]
3. Mixed typography: font-serif headings, font-sans body, font-mono labels on same page
4. Decorative badges: colored tag spans with font-mono uppercase tracking
5. Double/dashed border accents: border-dashed border-[#8338ec]/50 as section dividers

## Animation & Interaction Rules

- Z-Index Popping: Hovered elements must quickly come to front (hover:z-50) and scale up with rotation, actively “squeezing out” from the crowded layout.
- Sensory Overload: Hover can simultaneously trigger color inversion, shadow explosion, and angle change, maintaining high-pressure visual stimulation.
- Snappy & Aggressive: Use short durations (duration-100~200) for fast switching, avoiding soft elegant easing.
- Active Chaos: Active allows strong compression and angle shifts, creating out-of-control but readable “burst feedback.”
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#d4145a]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[3px_3px_0px_#ffbe0b]`
- Medium: `shadow-[4px_4px_0px_#ffbe0b,8px_8px_0px_#3a86ff]`
- Large: `shadow-[6px_6px_0px_#ffbe0b,12px_12px_0px_#3a86ff]`
- Hover: `hover:shadow-[2px_2px_0px_#ffbe0b,4px_4px_0px_#3a86ff]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-serif font-black uppercase tracking-widest`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-sm
font-black uppercase tracking-widest
border-4
transition-all duration-200
```

Card:
```
rounded-sm
bg-[#1a0a2e]
border-4 border-[#d4145a]
```

Input:
```
rounded-sm
border-4 border-[#8338ec]
bg-[#1a0a2e]
text-white
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `text-gray-300`, `text-gray-400`, `text-gray-500`, `border`, `border-[1px]`, `shadow-sm`, `shadow-md`

Patterns: `^bg-(?:white|gray-(?:50|100|200))$`, `^text-gray-[2-5]`, `^border$`, `^border-\[1px\]$`, `^shadow-(?:sm|md|lg|xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button
  className="
    relative z-10 px-8 py-4
    bg-[#ff00ff]
    text-[#ffff00] font-black uppercase tracking-widest text-2xl
    border-4 border-[#ffbe0b]
    shadow-[8px_8px_0px_#00ffff]
    hover:z-50 hover:scale-110 hover:-rotate-3
    hover:bg-[#00ffff] hover:text-[#ff00ff] hover:border-[#ffff00]
    hover:shadow-[16px_16px_0px_#000]
    active:scale-90 active:rotate-6 active:shadow-none
    transition-all duration-150
  "
>
  OVERLOAD
</button>
```

**Card**
```html
<div className="group relative z-10 transition-all duration-200 hover:z-50 hover:scale-105 hover:rotate-2">
  {/* Decorative background layer */}
  <div className="absolute -top-2 -left-2 w-full h-full bg-[#ffbe0b] rounded-sm" />
  <div className="absolute -top-1 -left-1 w-full h-full bg-[#3a86ff] rounded-sm group-hover:bg-[#00ffff]" />
  <div
    className="
      relative
      p-8
      bg-[#ffff00]
      border-4 border-[#d4145a]
      rounded-sm
      shadow-[12px_12px_0px_#ff00ff]
      group-hover:bg-[#ff00ff] group-hover:shadow-[24px_24px_0px_#00ffff]
      transition-all duration-200
    "
  >
    <div className="absolute -top-8 -right-8 flex h-24 w-24 rotate-12 items-center justify-center rounded-full border-4 border-black bg-[#00ffff] text-3xl font-black text-black transition-all duration-200 group-hover:-rotate-45 group-hover:scale-150 group-hover:bg-[#ffff00]">
      !!!
    </div>

    <div className="flex items-center gap-3 mb-4">
      <span className="px-3 py-1 bg-[#ffbe0b] text-[#1a0a2e] text-xs font-mono font-bold uppercase tracking-wider">
        Featured
      </span>
      <span className="px-3 py-1 bg-[#06d6a0] text-[#1a0a2e] text-xs font-mono font-bold uppercase tracking-wider">
        New
      </span>
    </div>
    <h3 className="text-5xl font-serif font-black text-black mb-3 uppercase leading-none group-hover:text-[#ffff00] transition-colors">
      More is More
    </h3>
    <p className="text-xl font-bold text-black border-l-8 border-[#00ffff] pl-4 group-hover:text-white group-hover:border-[#ffff00] transition-colors">
      Why whisper when you can scream? Overlap, clash, and dominate the viewport.
    </p>
  </div>
</div>
```


---


### 中世纪手抄本 (Medieval Manuscript)

**Slug**: `medieval-manuscript`

#### Description
Medieval illuminated manuscript style with ornate drop-cap initials, parchment textures, gold and deep-red decorative borders. Gothic blackletter combined with illustrative elements.

#### Design Philosophy
The Medieval Illuminated Manuscript represents the pinnacle of Western book art, born in the scriptoria of monasteries. Every page is a union of faith and aesthetics -- gold-leaf decorated initials, intricate vine-scroll patterns, deep red and deep green mineral pigments, and the warm texture unique to parchment.

In digital design, the manuscript style recreates the solemnity and refinement of that era: parchment color #f0e6d0 as the base, simulating the warm tones of animal hide; deep red #8b1a1a for headings and decorations, symbolizing cinnabar among mineral pigments; gold #c9a74e for borders, dividers, and important decorations, echoing the gilding craft.

Core concepts:
- Gilded decoration: Gold borders and dividers simulate the gold-leaf application effect, with key elements highlighted in gold
- Ornate drop caps: Enlarged first letters of headings (text-6xl and above), using serif fonts to simulate the Gothic blackletter effect
- Parchment texture: bg-[#f0e6d0] base color with subtle radial-gradient to simulate the color variation of parchment
- Decorative borders: Double-line borders (border-double), corner decorations, and vine-scroll pattern suggestions

Manuscript style suits historical museum websites, classical literature projects, medieval-themed game interfaces, wine and artisan brands, and other scenarios requiring a classical, solemn atmosphere.

Font choice is crucial: serif fonts (font-serif) throughout, headings in bold uppercase to simulate the visual weight of Gothic blackletter, body text in regular weight to ensure readability.

#### Do's (必须做)
1. Use parchment color bg-[#f0e6d0] as the main background base
2. Use gold border-[#c9a74e] and text-[#c9a74e] for decorations and highlights
3. Use deep red text-[#8b1a1a] for headings and important text
4. Use border-double border-4 or border-[3px] to simulate manuscript double-line borders
5. Heading first letters use text-5xl or larger for drop cap effect
6. Use serif fonts font-serif throughout for classical consistency
7. Use dark brown #3d2b1f for body text and secondary border color
8. Add corner decoration hints: pseudo-elements or small icons simulating vine-scroll patterns
9. Button :active shifts to lower-right: active:translate-x-[3px] active:translate-y-[3px] active:shadow-[1px_1px_0px_#3d2b1f] (Wax Seal Impact -- wax seal press feel)
10. Gold borders slowly brighten on hover: hover:border-[#dfbf66] transition-all duration-700 ease-in-out (Gold Leaf Shimmer -- candlelight reflecting on gold leaf)
11. Cards use group class; corner decorations group-hover:opacity-100, drop cap group-hover:drop-shadow-[0_0_8px_rgba(201,167,78,0.6)] gold leaf emergence
12. Button hover: hover:shadow-[5px_5px_0px_#3d2b1f] (shadow deepens, press preview)

#### Don'ts (禁止做)
1. Do not use sans-serif fonts font-sans as the primary font
2. Do not use modern gradients (bg-gradient-to-r with modern neon/tech colors)
3. Do not use neon, fluorescent, or high-saturation modern colors
4. Do not use frosted glass effects (backdrop-blur)
5. Do not use pure black bg-black or pure white bg-white backgrounds
6. Do not use rounded corners rounded-xl or larger modern rounded corners
7. Do not use tech or futuristic design elements
8. Do not use hover:-translate-y-* on buttons (parchment is laid flat, no floating feel)
9. Do not omit active:translate-x-[3px] active:translate-y-[3px] on buttons (Wax Seal Impact is a core interaction feature)
10. Do not use animation duration < 300ms (the solemnity of manuscripts requires slow, composed transitions)

#### AI Rules
```
You are a Medieval Manuscript design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sans-serif fonts (font-sans) as primary font
- Modern gradients (bg-gradient-to-r with modern neon/tech colors)
- Neon, fluorescent, or high-saturation modern colors
- Backdrop blur effects (backdrop-blur)
- Pure black bg-black or pure white bg-white backgrounds
- Large rounded corners (rounded-xl, rounded-2xl, rounded-full)
- Futuristic or tech-style design elements

## Must Follow

- Parchment background bg-[#f0e6d0] as base
- Deep red #8b1a1a for headings and important text
- Gold #c9a74e for borders, decorations, and highlights
- Dark brown #3d2b1f for body text and secondary borders
- Serif fonts font-serif throughout
- Double-line borders border-double border-4 for ornate frames
- Corner decorations on cards and containers
- Drop cap effect on hero titles (first letter enlarged)

## Color Palette

Primary:
- Deep Red: #8b1a1a
- Parchment: #f0e6d0
- Gold Leaf: #c9a74e
- Monastery Green: #2d4a2d
- Dark Brown: #3d2b1f

## Unique Elements (Medieval Manuscript-Only)

1. Drop cap: first letter of headings enlarged (text-5xl+) in gold #c9a74e
2. Double-line borders: border-double border-4 border-[#c9a74e] for ornate framing
3. Corner flourishes: small border-t/l/r/b decorations at card corners
4. Parchment texture: radial-gradient overlays simulating skin variation
5. Gold dividers: border-t-2 border-[#c9a74e] horizontal separators

## Animation & Interaction Rules

- Parchment Stillness: No light floating or elastic scaling; maintain solemn stillness on the parchment plane.
- Wax Seal Impact: Active feedback uses hard shadow + lower-right displacement, simulating a wax seal press.
- Gold Leaf Shimmer: Gold borders and drop caps slowly brighten on hover, recommend duration-700 ease-in-out.
- Ink Saturation: Red-brown text and decorative lines should deepen progressively, avoiding abrupt jumps.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#c9a74e]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[1px_1px_0px_#3d2b1f]`
- Medium: `shadow-[2px_2px_0px_#3d2b1f]`
- Large: `shadow-[3px_3px_0px_#3d2b1f]`
- Hover: `hover:shadow-[1px_1px_0px_#3d2b1f]`

**Interaction**
- Hover Translate: `hover:translate-x-[1px] hover:translate-y-[1px]`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-serif font-bold uppercase tracking-wider`
- Body: `font-serif leading-relaxed`

**Required Classes**

Button:
```
rounded-sm
font-serif uppercase tracking-widest
border-4 border-double border-[#c9a74e]
transition-all duration-300
```

Card:
```
rounded-sm
bg-[#f0e6d0]
border-4 border-double border-[#c9a74e]
```

Input:
```
rounded-sm
border-2 border-[#3d2b1f]/30
bg-[#f0e6d0]/80
text-[#3d2b1f]
font-serif
focus:border-[#c9a74e]
focus:outline-none
```

**Forbidden**

Classes: `font-sans`, `bg-black`, `bg-white`, `backdrop-blur`, `backdrop-blur-sm`, `backdrop-blur-md`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `text-[#ff00ff]`

Patterns: `^font-sans$`, `^bg-(?:black|white)$`, `^backdrop-blur`, `^rounded-(?:xl|2xl|3xl|full)$`, `^(?:text|bg)-\[#(?:ff00ff|00ffff|00ff00)\]$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-[#8b1a1a]
  text-[#f0e6d0] font-serif uppercase tracking-[0.2em] font-bold
  border-4 border-double border-[#c9a74e]
  shadow-[4px_4px_0px_#3d2b1f]
  hover:bg-[#721515]
  hover:shadow-[5px_5px_0px_#3d2b1f]
  hover:border-[#dfbf66]
  active:translate-x-[3px] active:translate-y-[3px]
  active:shadow-[1px_1px_0px_#3d2b1f]
  transition-all duration-300
">
  Proceed
</button>
```

**Card**
```html
<div className="
  group p-10
  bg-[#f0e6d0]
  border-4 border-double border-[#3d2b1f]
  shadow-[6px_6px_0px_rgba(61,43,31,0.8)]
  hover:border-[#8b1a1a]
  transition-all duration-700 ease-in-out
  relative overflow-hidden
">
  <div className="absolute top-2 left-2 text-[#8b1a1a] opacity-60 group-hover:opacity-100 transition-opacity duration-500 font-serif">+</div>
  <div className="absolute top-2 right-2 text-[#8b1a1a] opacity-60 group-hover:opacity-100 transition-opacity duration-500 font-serif">+</div>
  <div className="absolute bottom-2 left-2 text-[#8b1a1a] opacity-60 group-hover:opacity-100 transition-opacity duration-500 font-serif">+</div>
  <div className="absolute bottom-2 right-2 text-[#8b1a1a] opacity-60 group-hover:opacity-100 transition-opacity duration-500 font-serif">+</div>

  <h3 className="text-3xl font-serif font-bold text-[#3d2b1f] mb-4 tracking-wide uppercase leading-none group-hover:text-[#8b1a1a] transition-colors duration-700">
    <span className="text-6xl text-[#c9a74e] mr-2 float-left leading-[0.8] drop-shadow-sm group-hover:drop-shadow-[0_0_8px_rgba(201,167,78,0.6)] transition-all duration-700">
      I
    </span>
    lluminated
  </h3>
  <p className="text-[#3d2b1f] font-serif text-lg leading-relaxed pt-2">
    Written by the hand of the faithful scribe, where every stroke carries weight.
  </p>
</div>
```


---


### 涂鸦街头 (Graffiti Street)

**Slug**: `graffiti-street`

#### Description
Street graffiti art style with spray-paint textures, bold clashing colors, hand-lettered tags, and brick-wall backgrounds. A visual expression of urban culture and rebellious spirit.

#### Design Philosophy
Graffiti Street style originates from the graffiti culture of 1960s New York subways and Philadelphia streets, one of the four elements of hip-hop culture. From early simple "tag" signatures to later "wildstyle" and "piece" (masterpiece) works, graffiti has always been a symbol of urban youth self-expression and rebellious spirit.

In digital design, graffiti style recreates the raw energy of the streets: dark gray/near-black #1c1c1e simulates asphalt and brick-wall base colors; spray-paint red #ff2d55 and neon cyan #00e5ff are signature high-saturation clash colors; bold uppercase letters and tilted text mimic the spontaneity of spray-painted writing.

Core concepts:
- Spray-paint texture: text-shadow and drop-shadow simulate the fuzzy edges of spray-paint diffusion
- Bold color clashing: Red, cyan, yellow, purple, and orange in high-saturation collision -- rejecting harmony, pursuing impact
- Hand-lettered tags: Tilted text -rotate-[N deg], bold uppercase, and irregular spacing mimic hand-sprayed tags
- Brick-wall background: Dark gray base with subtle grid textures suggesting brick or concrete walls

Graffiti style suits music label websites, streetwear brands, skateboard culture communities, and indie musician homepages -- any scenario that needs to express urban rebellious spirit and youth cultural identity.

Key principle: Graffiti never aligns, never softens, never asks permission. Every element should have the spontaneous feel and raw power of being "sprayed directly on."

#### Do's (必须做)
1. Use dark gray/near-black bg-[#1c1c1e] as main background simulating brick walls/asphalt
2. Use high-saturation clash colors: text-[#ff2d55], text-[#00e5ff], text-[#ffea00], text-[#b620e0]
3. Text uses font-black uppercase with random rotation -rotate-[N deg]
4. Use text-shadow or drop-shadow to simulate spray-paint diffusion effect
5. Buttons and tags use thick borders border-4 and hard offset shadows shadow-[Npx_Npx_0px]
6. Add skew-x or skew-y transforms to elements for street dynamic feel
7. Use different colored underlines underline decoration to simulate spray-paint lines
8. Mix extra-large font sizes (text-7xl+) and extra-small sizes (text-xs) for contrast

#### Don'ts (禁止做)
1. Do not use soft pastel colors
2. Do not use thin fonts (font-light, font-thin)
3. Do not use symmetrical, neatly aligned grid layouts
4. Do not use rounded cute elements (rounded-full on cards)
5. Do not use frosted glass effects (backdrop-blur)
6. Do not use soft shadows (shadow-sm, shadow-md)
7. Do not use warm, cozy color schemes

#### AI Rules
```
You are a Graffiti Street design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Pastel or soft colors (pink-200, blue-200, etc.)
- Thin fonts (font-light, font-thin, font-normal)
- Perfectly aligned symmetric grid layouts
- Rounded cute elements (rounded-full on cards)
- Backdrop blur effects (backdrop-blur)
- Soft shadows (shadow-sm, shadow-md, shadow-lg)
- Warm cozy color schemes

## Must Follow

- Dark asphalt background bg-[#1c1c1e] as base
- High-saturation spray colors: #ff2d55, #00e5ff, #ffea00, #b620e0, #ff6d00
- Extra-bold fonts font-black uppercase throughout
- Random rotation and skew transforms on elements
- Thick borders border-4 with hard offset shadows shadow-[Npx_Npx_0px]
- Text shadow for spray paint glow effect
- Asymmetric, non-grid layouts preferred
- No rounded corners: rounded-none throughout

## Color Palette

Primary:
- Spray Red: #ff2d55
- Asphalt: #1c1c1e
- Cyan Spray: #00e5ff
- Neon Yellow: #ffea00
- Purple: #b620e0
- Orange: #ff6d00

## Unique Elements (Graffiti-Only)

1. Spray paint transforms: style={{ transform: "rotate(Ndeg) skewX(Ndeg)" }} on text and cards
2. Drip decorations: thin vertical div elements simulating paint drips
3. Brick wall texture: repeating-linear-gradient grid pattern in the background
4. Stencil text: font-black uppercase with letter-spacing and optional stroke
5. Color tag badges: inline colored spans with font-black uppercase labels

## Animation & Interaction Rules

- Paint Drip: On hover, drip decorations stretch along the Y axis, simulating fresh spray paint running.
- Vandalism Snap: Interactions allow more aggressive rotation/tilt switching, emphasizing the unauthorized street vandalism feel.
- Hard Contrast: Active must instantly remove hard shadows and shift significantly, creating a "stamp-hitting-wall" impact.
- Zero Polish: Animations stay short and hard-cut (duration-100/150 + ease-linear), avoiding elegant smooth styles.
```


#### Design Tokens

**Border**
- Width: `border-4`
- Color: `border-[#ff2d55]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[3px_3px_0px_#00e5ff]`
- Medium: `shadow-[4px_4px_0px_#00e5ff]`
- Large: `shadow-[6px_6px_0px_#00e5ff]`
- Hover: `hover:shadow-[2px_2px_0px_#00e5ff]`

**Interaction**
- Hover Translate: `hover:translate-x-[2px] hover:translate-y-[2px]`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-black uppercase tracking-wider`
- Body: `font-bold`

**Required Classes**

Button:
```
rounded-none
font-black uppercase tracking-wider
border-4
transition-all duration-150
```

Card:
```
rounded-none
bg-[#1c1c1e]
border-4
```

Input:
```
rounded-none
border-4
bg-[#1c1c1e]/80
text-white
font-bold uppercase
focus:outline-none
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `font-light`, `font-thin`, `font-normal`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^font-(?:light|thin|normal)$`, `^shadow-(?:sm|md|lg|xl)$`, `^backdrop-blur`, `^(?:bg|text)-(?:pink|blue|green)-[1-3]00$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button
  className="
    px-8 py-4
    bg-[#ff2d55]
    text-white font-black uppercase tracking-wider text-lg
    border-4 border-[#1c1c1e]
    shadow-[6px_6px_0px_#00e5ff]
    hover:bg-[#00e5ff] hover:text-[#1c1c1e]
    hover:shadow-[8px_8px_0px_#ffea00]
    hover:-translate-y-1
    active:shadow-none active:translate-x-[6px] active:translate-y-[6px]
    transition-all duration-100 ease-linear
  "
  style={{ transform: "rotate(-2deg) skewX(-2deg)" }}
>
  TAG IT
</button>
```

**Card**
```html
<div
  className="
    group
    p-8
    bg-[#1c1c1e]
    border-4 border-[#ff2d55]
    shadow-[8px_8px_0px_#ffea00]
    hover:shadow-[12px_12px_0px_#00e5ff]
    hover:-translate-y-2 hover:-rotate-1
    transition-all duration-150 ease-linear
    relative overflow-hidden
  "
  style={{ transform: "rotate(1deg)" }}
>
  {/* Spray paint drip decoration */}
  <div className="absolute top-0 right-8 w-3 h-12 bg-[#ff2d55] origin-top group-hover:scale-y-[2.5] transition-transform duration-300 ease-out" />
  <div className="absolute top-0 right-14 w-2 h-9 bg-[#00e5ff] origin-top group-hover:scale-y-[3] transition-transform duration-500 ease-out delay-75" />

  <span className="inline-block px-3 py-1 bg-[#ffea00] text-[#1c1c1e] text-xs font-black uppercase tracking-widest mb-4"
    style={{ transform: "rotate(-2deg)" }}
  >
    Fresh
  </span>
  <h3 className="text-3xl font-black text-[#00e5ff] uppercase mb-3"
    style={{ transform: "skewX(-4deg)" }}
  >
    STREET ART
  </h3>
  <p className="text-white/70 text-sm font-bold group-hover:text-white transition-colors duration-100">
    The wall is the canvas. The city is the gallery. Make it loud.
  </p>
</div>
```


---


### 大理石奢华 (Marble Luxury)

**Slug**: `marble-luxury`

#### Description
High-end design style with marble textures and gold accents, featuring white marble-textured backgrounds, gold line separators, and black text. Ideal for luxury brands, hotels, and premium real estate.

#### Design Philosophy
Marble Luxury design style originates from the material aesthetics of high-end architecture and interior design. Since ancient Rome, marble has symbolized power, wealth, and timeless beauty, with its natural gray veining against a warm white base creating a uniquely rhythmic visual pattern.

In digital design, Marble Luxury pursues "restrained luxury" -- not ostentatious gilded splendor, but conveying premium quality through refined material suggestions and perfectly placed gold accents. White marble #f8f6f3 as the background base is warmer and more textured than pure white; pure black #1a1a1a for text creates ultimate readability contrast.

Core concepts:
- Material suggestion: Subtle radial-gradient and linear-gradient overlays simulate the color variation and veining of marble texture
- Gold restraint: Antique gold #c9a96e used only for dividers, borders, and key decorations -- never in large areas
- Extreme whitespace: Generous padding and margin create breathing room; low information density but every element is meticulously placed
- Elegant typography: Thin or regular-weight serif fonts convey the composure and confidence of luxury brands

Marble Luxury style suits high-end hotel websites, luxury brand showcases, premium real estate, fine jewelry, and high-end beauty brands -- any scenario needing to convey quality and exclusivity.

Design key: Restraint is the highest expression of luxury. The less gold, the more precious it appears. The more space, the more composed it feels.

#### Do's (必须做)
1. Use marble white bg-[#f8f6f3] as the main background base
2. Use pure black text-[#1a1a1a] as the primary text color
3. Use antique gold border-[#c9a96e] for dividers and fine border decorations
4. Generous whitespace: py-20 or more for section spacing, px-12 or more for container padding
5. Use serif fonts font-serif and maintain thin font weights (font-normal or font-light visual feel)
6. Use tracking-[0.2em] or wider letter spacing for a luxurious typographic feel
7. Use 1px fine line separators: border-t border-[#c9a96e]/30 as elegant dividers
8. Subtle hover transitions duration-500 or more, slow and composed

#### Don'ts (禁止做)
1. Do not use high-saturation neon or fluorescent colors
2. Do not use thick borders (border-4 and above)
3. Do not use hard offset shadows (shadow-[Npx_Npx_0px])
4. Do not use bold aggressive typography (font-black uppercase)
5. Do not use dense information layouts or small spacing
6. Do not use cartoon, hand-drawn, or rough visual elements
7. Do not use pure white bg-white (use the warmer #f8f6f3)

#### AI Rules
```
You are a Marble Luxury design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- High-saturation neon or fluorescent colors
- Thick borders (border-4 and above)
- Hard offset shadows (shadow-[Npx_Npx_0px])
- Bold aggressive typography (font-black uppercase)
- Dense information layouts with small spacing
- Cartoon, hand-drawn, or rough visual elements
- Pure white bg-white (use warmer #f8f6f3)
- Playful or casual design elements

## Must Follow

- Warm marble white bg-[#f8f6f3] as primary background
- Onyx black text-[#1a1a1a] for text
- Antique gold #c9a96e only for borders, separators, and subtle accents
- Serif fonts font-serif throughout
- Wide letter spacing tracking-[0.2em] or more on labels
- Generous whitespace: py-20+ for sections, p-12 for cards
- Fine 1px borders: border border-[#c9a96e]/20
- Slow transitions: duration-500 ease-in-out
- Very subtle shadows: shadow-[0_2px_20px_rgba(0,0,0,0.04)]

## Color Palette

Primary:
- Onyx: #1a1a1a
- Marble White: #f8f6f3
- Antique Gold: #c9a96e
- Warm Taupe: #8a7968
- Light Marble: #e8e0d6

## Unique Elements (Marble Luxury-Only)

1. Marble texture: radial-gradient overlays simulating stone veining
2. Gold line separators: 1px border-t border-[#c9a96e]/20 or custom gradient lines
3. Extreme whitespace: p-12, py-20, generous margins for breathing room
4. Underline-on-hover: animated gold underlines expanding from center
5. Frame borders: fine gold border inset from page edges as decorative framing

## Animation & Interaction Rules

- Monumental Weight: Elements maintain stable positions, avoiding hover displacement and scaling. Weight is conveyed through light-shadow layer changes.
- Foil Stamping Shift: Gold/rose-gold text on hover can do slow flowing highlight shift (bg-position), simulating polished metal reflection.
- Cold & Rigid: Active state does not use elastic deformation. Use slight inset shadow to express the tactile feel of cold, hard material being pressed.
- Polish Gleam: Cards only do low-frequency, low-amplitude brightness and shadow changes (duration-700), maintaining the polished marble texture.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#c9a96e]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-[0_1px_10px_rgba(0,0,0,0.03)]`
- Medium: `shadow-[0_2px_20px_rgba(0,0,0,0.04)]`
- Large: `shadow-[0_4px_30px_rgba(0,0,0,0.06)]`
- Hover: `hover:shadow-[0_4px_30px_rgba(0,0,0,0.06)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wide`
- Body: `font-serif leading-relaxed`

**Required Classes**

Button:
```
rounded-none
font-serif tracking-[0.2em] uppercase
border border-[#c9a96e]/40
transition-all duration-500 ease-in-out
```

Card:
```
rounded-none
bg-[#f8f6f3]
border border-[#c9a96e]/20
shadow-[0_2px_20px_rgba(0,0,0,0.04)]
```

Input:
```
bg-transparent
border-b border-[#1a1a1a]/20
text-[#1a1a1a]
font-serif tracking-wide
focus:outline-none
transition-all duration-500
```

**Forbidden**

Classes: `bg-white`, `border-4`, `border-8`, `font-black`, `shadow-[4px_`, `shadow-[6px_`, `text-[#ff`, `text-[#00ff`, `bg-[#ff`, `bg-[#00ff`

Patterns: `^bg-white$`, `^border-[4-8]$`, `^font-black$`, `^shadow-\[\d+px_\d+px_0px`, `^(?:text|bg)-\[#(?:ff[0-9a-f]{2}[0-9a-f]{2}|00ff)\]$`, `^backdrop-blur`, `^rounded-(?:full|xl|2xl|3xl)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button
  className="
    group
    px-12 py-4
    bg-[#1a1a1a]
    text-[#f8f6f3] font-serif tracking-[0.16em]
    border border-[#c9a96e]/40
    shadow-[0_10px_28px_rgba(0,0,0,0.28)]
    hover:border-[#c9a96e]/70
    hover:shadow-[0_18px_40px_rgba(0,0,0,0.42)]
    active:shadow-[inset_0_6px_12px_rgba(0,0,0,0.55),0_10px_28px_rgba(0,0,0,0.28)]
    transition-all duration-700 ease-out
  "
>
  <span className="bg-gradient-to-r from-[#c9a96e] via-[#f1dbc1] to-[#c9a96e] bg-[length:200%_auto] bg-clip-text text-transparent transition-[background-position,color] duration-700 ease-out group-hover:bg-right">
    Exclusive
  </span>
</button>
```

**Card**
```html
<div className="
  group
  relative overflow-hidden
  p-12
  bg-[#f8f6f3]
  border border-[#c9a96e]/20
  shadow-[0_10px_28px_rgba(0,0,0,0.08)]
  hover:border-[#c9a96e]/45
  hover:shadow-[0_16px_40px_rgba(0,0,0,0.14)]
  transition-all duration-700
">
  <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(201,169,110,0.08),transparent_55%)] opacity-40 transition-opacity duration-700 group-hover:opacity-60" />

  <div className="relative z-10">
  <span className="text-xs font-serif text-[#c9a96e] tracking-[0.3em] uppercase mb-6 block">
    Collection
  </span>
  <h3 className="text-2xl font-serif text-[#1a1a1a] mb-4 tracking-wide bg-gradient-to-r from-[#8a7968] via-[#c9a96e] to-[#8a7968] bg-[length:200%_auto] bg-clip-text text-transparent transition-[background-position] duration-1000 group-hover:bg-right">
    Carrara White
  </h3>
  <p className="text-[#8a7968] font-serif text-sm leading-relaxed mb-6">
    Timeless elegance carved from Italian marble, where every vein tells a story of geological artistry.
  </p>
  <div className="pt-6 border-t border-[#c9a96e]/20">
    <span className="text-xs font-serif text-[#8a7968] tracking-[0.2em] uppercase">
      View Details &rarr;
    </span>
  </div>
  </div>
</div>
```


---


### 维多利亚植物 (Victorian Botanical)

**Slug**: `victorian-botanical`

#### Description
Victorian-era botanical illustration style with delicate line-drawn plants, floral ornaments, and the elegance of a natural history museum. A classic pairing of dark green and gold.

#### Design Philosophy
Victorian Botanical style originates from the natural history research craze of 19th-century Victorian England. Botanists and illustrators of the era used delicate line drawings to document plant specimens from around the world -- these illustrations were not only scientific documents but also artistic treasures.

Core concepts:
- Delicate line drawing: Precise lines reminiscent of copperplate engravings, each stroke carrying the rigor of a scientist
- Natural history aesthetics: The composure and elegance of a museum specimen room, a unity of knowledge and beauty
- Dark green and gold: The classic color pairing of Victorian interior design, deep yet richly layered
- Paper texture: The warm base color of aged parchment, lending digital interfaces a sense of historical weight

This style is suitable for museums, libraries, tea brands, botanical gardens, premium stationery, and nature-themed cultural products. It translates the Victorian era's reverence for the natural world into a contemporary design language, recreating the refinement and restraint of that golden age in digital interfaces.

When designing, focus on the meticulous crafting of details rather than visual impact. Let every element be as carefully arranged as a botanical specimen, containing rich layers of information beneath a seemingly understated surface.

#### Do's (必须做)
1. Use dark green #2d4a2d as the primary color, paired with gold #8b6914 accent elements
2. Use aged paper color bg-[#faf5ef] for backgrounds, creating a parchment texture
3. Use serif fonts font-serif; add tracking-wide letter spacing to headings
4. Use fine-line borders border border-[#2d4a2d]/30, echoing line-drawn illustrations
5. Keep rounded corners moderate rounded-lg; do not use fully rounded corners
6. Use warm-toned shadows shadow-[0_2px_8px_rgba(45,74,45,0.1)]
7. Add delicate decorative lines and separator elements
8. Use gold highlights for interactive states hover:border-[#8b6914]

#### Don'ts (禁止做)
1. Do not use neon or high-saturation fluorescent colors
2. Do not use pure black backgrounds or dark themes
3. Do not use rounded-full fully rounded buttons
4. Do not use bold sans-serif fonts as headings
5. Do not use gradient backgrounds or rainbow colors
6. Do not use oversized shadows shadow-xl, shadow-2xl
7. Do not use dynamic, flashy animation effects

#### AI Rules
```
You are a Victorian Botanical design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Neon or high-saturation fluorescent colors
- Pure black backgrounds or dark themes
- rounded-full fully rounded corners
- Sans-serif fonts as heading fonts
- Gradient backgrounds or rainbow colors
- Large shadows shadow-xl, shadow-2xl

## Must Follow

- Primary color #2d4a2d (dark green), accent #8b6914 (gold)
- Background color #faf5ef (aged paper)
- Use font-serif serif fonts
- Fine-line borders border border-[#2d4a2d]/20
- Moderate rounded corners rounded-lg
- Warm-toned and restrained shadows

## Color Palette

Primary:
- Dark green: #2d4a2d
- Aged paper: #faf5ef
- Gold: #8b6914
- Dried rose: #6b3a3a
- Fern green: #3d5c3d

## Special Elements

- Delicate decorative separator lines
- Serif font italic for botanical name annotations
- tracking-wide and tracking-[0.3em] for labels
- Subtle paper texture backgrounds

## Animation & Interaction Rules
- Specimen Stillness: Specimens are pinned to paper. Strictly no hover:-translate-y (float-up) effects. Interactions must stay on the 2D plane, conveyed only through color and subtle light-shadow changes.
- Magnifying Inspection: On hover, inner titles, initials, or illustrations can have very slow internal scaling (e.g., group-hover:scale-105), simulating a scholar examining a specimen with a magnifying glass.
- Gilded Reveal: During interaction, dark green text or ultra-fine borders should transition extremely slowly (duration-700) to classical gold (#8b6914), simulating gold leaf reflecting candlelight on a book page.
- Ink Deepening: On :active, do not shrink. Instead, deepen text color or background paper color, simulating pressing a dip pen firmly onto old paper to make a mark.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#2d4a2d]/20`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_1px_4px_rgba(45,74,45,0.06)]`
- Medium: `shadow-[0_2px_8px_rgba(45,74,45,0.1)]`
- Large: `shadow-[0_4px_16px_rgba(45,74,45,0.12)]`
- Hover: `hover:shadow-[0_4px_12px_rgba(139,105,20,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-serif tracking-wide`
- Body: `font-serif`

**Required Classes**

Button:
```
rounded-lg
font-serif tracking-wide
border border-[#8b6914]/60
transition-all duration-300
```

Card:
```
bg-[#faf5ef]
border border-[#2d4a2d]/20
rounded-lg
shadow-[0_2px_8px_rgba(45,74,45,0.08)]
```

Input:
```
bg-[#faf5ef]
border border-[#2d4a2d]/20
rounded-lg
text-[#2d4a2d]
focus:border-[#8b6914]/60
focus:outline-none
```

**Forbidden**

Classes: `rounded-full`, `bg-black`, `bg-gray-900`, `text-[#ff00ff]`, `text-[#00ffff]`, `text-[#ff6b6b]`, `bg-gradient-to-r`, `bg-gradient-to-br`, `shadow-xl`, `shadow-2xl`

Patterns: `^bg-(?:black|gray-9)`, `^bg-gradient`, `^shadow-(?:xl|2xl)`, `^text-\[#(?:ff00ff|00ffff)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-3 bg-[#faf5ef] text-[#2d4a2d] border border-[#2d4a2d]/30 rounded font-serif italic tracking-widest text-lg shadow-[0_2px_10px_rgba(45,74,45,0.05)] hover:bg-[#2d4a2d] hover:text-[#faf5ef] hover:border-[#8b6914] hover:shadow-[0_4px_15px_rgba(139,105,20,0.15)] active:bg-[#1a2d1a] transition-all duration-700 ease-in-out">
  Examine Specimen
</button>
```

**Card**
```html
<div className="group p-8 bg-[#faf5ef] border border-[#2d4a2d]/20 rounded-lg shadow-[0_4px_20px_rgba(45,74,45,0.05)] hover:border-[#8b6914]/50 transition-colors duration-700 ease-in-out cursor-text">
  <div className="border-b border-[#2d4a2d]/15 pb-4 mb-5 flex justify-between items-end">
    <div>
      <h3 className="text-2xl font-serif text-[#2d4a2d] tracking-wider group-hover:text-[#8b6914] transition-colors duration-700">
        Rosa Damascena
      </h3>
      <p className="text-sm font-serif text-[#8b6914]/80 italic mt-2">
        Rosaceae Family, Plate IV.
      </p>
    </div>
    <span className="text-3xl font-serif text-[#2d4a2d]/10 group-hover:scale-110 group-hover:text-[#8b6914]/20 transition-all duration-700">
      IV
    </span>
  </div>
  <p className="text-[#2d4a2d]/70 font-serif leading-relaxed text-sm">
    A heritage rose cultivar prized for its deep fragrance. Documented in the royal botanical surveys of 1842, preserved here in meticulous detail.
  </p>
</div>
```


---


### 立体主义 (Cubism)

**Slug**: `cubism`

#### Description
The Cubism movement of Picasso and Braque, featuring geometric fragmented compositions, multi-perspective overlays, angular shapes, and subdued earth-tone palettes.

#### Design Philosophy
Cubism is one of the most revolutionary art movements of the 20th century, pioneered by Picasso and Braque around 1907. It completely broke with the single-point perspective tradition since the Renaissance, redefining visual expression through geometric fragments and multi-perspective overlays.

Core concepts:
- Geometric fragmentation: Decomposing objects into basic geometric shapes -- triangles, rectangles, irregular polygons
- Multi-perspective overlay: Presenting multiple angles of an object in the same composition, breaking the limitation of a single viewpoint
- Earth-tone palette: Subdued browns, ochres, and steel blues, originating from the restrained color use of the Analytical Cubism period
- Angular tension: Creating visual tension through sharp edges and asymmetric compositions

In digital design, Cubism style is suitable for art galleries, creative agencies, cultural events, and high-end brands. It conveys intellectualism, avant-garde thinking, and a spirit of challenging tradition.

When designing, focus on the layering and interweaving of geometric elements, suggesting depth through planes at different angles rather than using traditional perspective or shadows. Colors are restrained but compositions are bold -- this is the core paradox and charm of Cubism.

#### Do's (必须做)
1. Use angular geometric shapes with skew and rotate transforms
2. Use earth-tone palette #5c4033 and #e8dcc8 as primary colors
3. Use thick line borders border-2 paired with dark border colors
4. Use small rounded corners rounded or rounded-sm to maintain angularity
5. Cards and containers use asymmetric layouts and tilted angles
6. Simulate multi-perspective effects through z-index and overlapping elements
7. Text uses font-bold and uppercase to emphasize geometric feel
8. Use clip-path or transform to create fragmented visuals
9. Keep interaction feedback crisp: hover/active primarily use 1-4px displacement and shadow offset, duration kept at 150-200ms

#### Don'ts (禁止做)
1. Do not use large rounded corners rounded-2xl, rounded-full
2. Do not use soft gradients or blur effects
3. Do not use neon or fluorescent colors
4. Do not use symmetrical centered traditional layouts
5. Do not use circular or organic curved shapes
6. Do not use thin hairline borders border
7. Do not use overly soft shadows
8. Do not use spring bounce, floating loops, or large-scale animations (e.g., hover:scale-110)

#### AI Rules
```
You are a Cubism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Large rounded corners rounded-2xl, rounded-full
- Soft gradients or blur effects
- Neon or fluorescent colors
- Fully symmetrical centered traditional layouts
- Organic curves or circular shapes
- Thin hairline borders border (must be border-2 or thicker)

## Must Follow

- Earth-tone palette: #5c4033 (burnt sienna), #e8dcc8 (canvas)
- Borders use border-2 paired with rounded-sm
- Hard shadows shadow-[Npx_Npx_0px_color]
- font-bold uppercase tracking-widest to emphasize geometric feel
- Create fragmented visuals through skew, rotate, clip-path
- Overlapping elements and asymmetric layouts

## Animation & Interaction Rules

- Motion must be short and crisp: transition duration kept at 100-200ms, prefer combined transitions of transform, box-shadow, and border-color
- Hover feedback primarily uses geometric displacement: 1-2px shift + shadow offset + slight angular disturbance (1-3deg)
- Active state must have a "stamp" feel: 3-4px displacement with shadow significantly shrinking or removed
- No spring bounce, floating loops, slow fade-in/out, or large-scale animations
- One-time light-band/slice sweep effects are allowed but must not steal focus or introduce blur softening

## Color Palette

Primary:
- Sienna: #5c4033
- Canvas: #e8dcc8
- Khaki: #8b7355
- Steel blue: #3d5c6e
- Terracotta: #9b3d25

## Special Elements

- Geometric fragment decorations (clip-path, skew, rotate)
- Hard-edge shadows (no blur)
- Asymmetric compositions
- Bold uppercase letter typography
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#5c4033]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[3px_3px_0px_#5c4033]`
- Medium: `shadow-[6px_6px_0px_#5c4033]`
- Large: `shadow-[8px_8px_0px_#5c4033]`
- Hover: `hover:shadow-[3px_3px_0px_#8b7355]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-bold uppercase tracking-widest`
- Body: `font-sans text-[#5c4033]/80`

**Required Classes**

Button:
```
rounded-sm
font-bold uppercase tracking-widest
border-2
shadow-[4px_4px_0px_#8b7355]
transition-all duration-150
```

Card:
```
bg-[#e8dcc8]
border-2 border-[#5c4033]
rounded-sm
shadow-[6px_6px_0px_#5c4033]
```

Input:
```
bg-[#e8dcc8]
border-2 border-[#5c4033]/40
rounded-sm
text-[#5c4033]
focus:border-[#9b3d25]
focus:outline-none
```

**Forbidden**

Classes: `rounded-2xl`, `rounded-3xl`, `rounded-full`, `rounded-xl`, `shadow-sm`, `shadow-md`, `shadow-lg`, `bg-gradient-to-r`, `bg-gradient-to-br`, `text-[#ff00ff]`

Patterns: `^rounded-(?:xl|2xl|3xl|full)`, `^shadow-(?:sm|md|lg|xl)$`, `^bg-gradient`, `^blur-`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative px-8 py-3 overflow-hidden
  bg-[#5c4033] text-[#e8dcc8]
  border-2 border-[#8b7355]
  rounded-sm -skew-x-[3deg] font-bold uppercase tracking-widest text-sm
  shadow-[4px_4px_0px_#8b7355]
  hover:shadow-[2px_2px_0px_#3d5c6e]
  hover:translate-x-[2px] hover:translate-y-[2px] hover:-rotate-[1deg]
  active:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:rotate-0
  transition-[transform,box-shadow,border-color] duration-150
">
  <span className="relative z-10">Explore</span>
  <span className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-[#9b3d25]/20 skew-x-[-18deg] transition-transform duration-150 group-hover:translate-x-[420%]" />
</button>
```

**Card**
```html
<div className="
  group relative p-6
  bg-[#e8dcc8]
  border-2 border-[#5c4033]
  rounded-sm
  shadow-[6px_6px_0px_#5c4033]
  hover:-translate-x-[2px] hover:-translate-y-[2px]
  hover:shadow-[8px_8px_0px_#3d5c6e] hover:border-[#3d5c6e]
  active:translate-x-[2px] active:translate-y-[2px] active:shadow-[4px_4px_0px_#5c4033]
  transition-[transform,box-shadow,border-color] duration-150
">
  <div className="absolute top-0 right-0 w-16 h-16 bg-[#3d5c6e]/20 -skew-x-12 transition-transform duration-150 group-hover:-translate-x-1 group-hover:translate-y-1" />
  <div className="absolute bottom-0 left-0 w-12 h-12 bg-[#9b3d25]/15 skew-y-6 transition-transform duration-150 group-hover:translate-x-1 group-hover:-translate-y-1" />
  <div className="relative z-10">
    <h3 className="text-xl font-bold text-[#5c4033] uppercase tracking-wider mb-2">
      Analytical Phase
    </h3>
    <div className="w-12 h-0.5 bg-[#9b3d25] mb-3" />
    <p className="text-[#5c4033]/70 text-sm leading-relaxed">
      Deconstructing form into geometric planes, revealing multiple perspectives simultaneously.
    </p>
  </div>
</div>
```


---


### 热带天堂 (Tropical Paradise)

**Slug**: `tropical-paradise`

#### Description
Tropical resort-inspired design with palm leaves, vivid floral colors, and a bright sun-and-sand tone. Ideal for travel, resorts, lifestyle, and food-and-beverage brands.

#### Design Philosophy
Tropical Paradise draws from the natural colors and resort atmosphere of tropical islands, infusing the vibrant energy of sunshine, ocean, palm leaves, and tropical flowers into digital interfaces.

Core concepts:
- Bright colors: Bold combinations of coral red, mango yellow, palm green, and teal convey tropical vitality and passion
- Sunny tone: A warm pale-yellow base color like sunlight on a sandy beach, evoking relaxation and joy
- Natural inspiration: The organic forms of palm leaves and the colorful blooms of tropical flowers are woven into design elements
- Resort experience: The overall atmosphere conveys a relaxed, carefree, and anticipation-filled vacation feeling

This style is ideal for travel resorts, tropical dining, surf brands, tropical fruit beverages, island wedding planning, and outdoor lifestyle brands.

When designing, use vivid colors boldly while maintaining harmony. Rounded shapes and generous whitespace keep the composition airy and transparent. Tropical style is not a chaotic pile of colors but rather like a tropical garden -- colorful yet orderly, passionate yet elegant.

#### Do's (必须做)
1. Use teal primary #00897b paired with warm yellow base #fffde7
2. Use coral red #ff6f61 and mango yellow #ffc107 as accent colors
3. Use rounded-2xl or rounded-full for rounded corners conveying a soft resort feel
4. Use warm colored shadows like shadow-[0_4px_20px_rgba(0,137,123,0.2)]
5. Use large rounded fonts; headings can pair font-bold with tracking-tight
6. Interactive states should be bright and lively: use vivid color changes on hover
7. Backgrounds can use subtle warm gradients from-[#fffde7] to-[#fff8e1]
8. Maintain generous whitespace and transparency
9. Hover uses wave-drift feel (gentle rotation + float up + slight scale), avoid mechanical displacement
10. Shadows emphasize tropical sun colors (teal/coral) rather than gray-black shadows
11. Card decoration dots can do subtle bouncing on hover, simulating a sea breeze

#### Don'ts (禁止做)
1. Do not use dark/black background themes
2. Do not use gray-dominant color schemes
3. Do not use sharp right angles and hard edges rounded-none
4. Do not use dull dark tones
5. Do not use overly dense layouts
6. Do not use cool-toned shadows
7. Do not use overly formal serif fonts
8. Do not use stiff, short linear animations that break the resort relaxation feel
9. Do not use dark gray heavy shadows instead of tropical colored glows

#### AI Rules
```
You are a Tropical Paradise design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Dark/black backgrounds
- Gray-dominant color schemes
- rounded-none sharp corners
- Dull dark tones
- Cool-toned shadows
- Serif fonts

## Must Follow

- Teal primary #00897b, warm yellow base #fffde7
- Accent colors: coral red #ff6f61, mango yellow #ffc107, palm green #4caf50
- Use rounded-2xl or rounded-full for soft rounded corners
- Warm colored shadows shadow-[0_4px_20px_rgba(0,137,123,0.15)]
- Generous whitespace and transparency
- Hover effects use -translate-y float up

## Color Palette

Primary:
- Teal: #00897b
- Sunshine white: #fffde7
- Coral red: #ff6f61
- Mango yellow: #ffc107
- Palm green: #4caf50

## Special Elements

- Circular decorative blur orbs (blur-3xl)
- Colorful small dot decorations
- Gradient backgrounds from-[#fffde7] to-[#fff8e1]
- Bright hover float-up animations

## Animation & Interaction Rules

- Wave Drift: Hover uses gentle rotation + float up + micro scale (e.g., -translate-y-2 rotate-1 scale-[1.02]), paired with duration-500 ease-in-out.
- Tropical Sun Glow: Hover shadow spread should use tropical colors like teal/coral, not dark gray shadows.
- Breeze Response: Colored decoration dots produce brief micro-bounces on hover, simulating a sea breeze.
- Fluid Clicks: Active uses soft scale-95 with shadow convergence, creating a sand-stepping press-down feel.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(0,137,123,0.08)]`
- Medium: `shadow-[0_4px_20px_rgba(0,137,123,0.12)]`
- Large: `shadow-[0_8px_30px_rgba(0,137,123,0.18)]`
- Hover: `hover:shadow-[0_8px_30px_rgba(0,137,123,0.15)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight`
- Body: `font-sans text-gray-600`

**Required Classes**

Button:
```
rounded-full
font-bold
shadow-[0_4px_16px_rgba(0,137,123,0.3)]
transition-all duration-300
```

Card:
```
bg-white
rounded-2xl
shadow-[0_4px_20px_rgba(0,137,123,0.1)]
```

Input:
```
bg-white
border-2 border-[#00897b]/20
rounded-full
focus:border-[#00897b]
focus:outline-none
transition-all duration-300
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-gray-800`, `rounded-none`, `text-gray-900`, `shadow-[0_0_16px_rgba(0,0,0`, `font-serif`

Patterns: `^bg-(?:black|gray-[89])`, `^rounded-none$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-10 py-4
  bg-[#00897b] text-white
  rounded-full font-bold tracking-wide
  shadow-[0_6px_20px_rgba(0,137,123,0.3)]
  hover:bg-[#00796b]
  hover:shadow-[0_10px_30px_rgba(0,137,123,0.4)]
  hover:-translate-y-1 hover:scale-105
  active:scale-95
  active:shadow-[0_2px_10px_rgba(0,137,123,0.3)]
  transition-all duration-300 ease-in-out
">
  Book Escape
</button>
```

**Card**
```html
<div className="
  group p-8
  bg-white
  border border-[#00897b]/10
  rounded-[2rem]
  shadow-[0_8px_30px_rgba(0,137,123,0.08)]
  hover:shadow-[0_20px_50px_rgba(0,137,123,0.15)]
  hover:-translate-y-2 hover:rotate-1 hover:scale-[1.02]
  transition-all duration-500 ease-in-out
  cursor-pointer
">
  <div className="flex items-center gap-3 mb-6">
    <span className="inline-block w-3 h-3 rounded-full bg-[#ff6f61] group-hover:scale-125 transition-transform duration-300" />
    <span className="inline-block w-3 h-3 rounded-full bg-[#ffc107] group-hover:scale-125 transition-transform duration-300 delay-75" />
    <span className="inline-block w-3 h-3 rounded-full bg-[#4caf50] group-hover:scale-125 transition-transform duration-300 delay-150" />
  </div>
  <h3 className="text-2xl font-bold text-[#00897b] mb-3 group-hover:text-[#ff6f61] transition-colors duration-300">
    Bali Retreat
  </h3>
  <p className="text-gray-600 font-medium leading-relaxed mb-5">
    Escape to paradise with crystal waters and swaying palms. Let the warm breeze carry your worries away.
  </p>
  <div className="pt-4 border-t border-[#00897b]/10">
    <span className="text-[#ff6f61] font-black text-lg group-hover:tracking-wide transition-all duration-300">From $299/night</span>
  </div>
</div>
```


---


### GitHub 风格 (GitHub Style)

**Slug**: `github-style`

#### Description
GitHub design language style with clean interface hierarchy, a refined grayscale system, blue interactive color, monospace code fonts, and developer-friendly information architecture.

#### Design Philosophy
GitHub Style is a design language originating from the GitHub platform, providing clear, efficient, and distraction-free working interfaces for tens of millions of developers worldwide. Its design philosophy is "let the content speak."

Core concepts:
- Content first: Code and documentation are the protagonists; UI is the supporting cast. All design decisions serve content readability and actionability
- Grayscale system: A refined grayscale hierarchy builds visual layers -- from #1f2328 (text) to #f6f8fa (background), each shade of gray has a clear semantic role
- Blue interaction: #0969da as the sole primary interaction color, precisely guiding user attention in a gray world
- Semantic functional colors: Green for success/merge, yellow for warning/pending, red for danger/delete -- each color has a clear meaning

This style is suitable for developer tools, code platforms, technical documentation, project management, and any product targeting a technical audience.

GitHub's design proves a truth: in information-dense scenarios, restrained visual design actually creates the best user experience. Every pixel of decoration must have a clear functional reason, or it should not exist.

#### Do's (必须做)
1. Use GitHub blue #0969da as the primary interaction color
2. Use white #ffffff and light gray bg-[#f6f8fa] for backgrounds
3. Use #1f2328 (dark gray) and #656d76 (secondary gray) for text
4. Unify borders with border-[#d0d7de]
5. Use rounded-md (6px) for consistent rounded corners
6. Use monospace font font-mono and bg-[#f6f8fa] for code blocks
7. Use semantic functional colors: green #1f883d, yellow #9a6700, red #cf222e
8. Maintain compact but clear spacing

#### Don'ts (禁止做)
1. Do not use gradient backgrounds or colorful decorations
2. Do not use large rounded corners rounded-2xl, rounded-full (except for avatars)
3. Do not use heavy shadows shadow-lg, shadow-xl
4. Do not use non-semantic decorative colors
5. Do not use serif fonts
6. Do not use oversized fonts or overly wide spacing
7. Do not use dynamic, flashy animation effects

#### AI Rules
```
You are a GitHub Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Gradient backgrounds bg-gradient-*
- Large rounded corners rounded-2xl, rounded-3xl (except avatars)
- Heavy shadows shadow-lg, shadow-xl
- Non-semantic decorative colors
- Serif fonts
- Oversized fonts or overly wide spacing
- Dynamic flashy animations

## Must Follow

- Blue #0969da as the primary interaction color
- Backgrounds: #ffffff, #f6f8fa
- Text: #1f2328 (primary), #656d76 (secondary)
- Borders: border-[#d0d7de]
- Rounded corners: rounded-md (6px)
- Code: font-mono bg-[#f6f8fa]

## Semantic Functional Colors

- Success/merge: #1f883d (green)
- Warning/pending: #9a6700 (yellow)
- Danger/delete: #cf222e (red)
- Interaction/link: #0969da (blue)

## Color Palette

Grayscale system:
- Text: #1f2328
- Secondary text: #656d76
- Light text: #8b949e
- Border: #d0d7de
- Light background: #f6f8fa
- Background: #ffffff
- Dark navigation: #24292f

## Animation & Interaction Rules

- Extreme Utility: Interactions prioritize state expression, avoiding eye-catching displacement/scaling effects. Duration kept at 75 to 150.
- Micro-Tactility: Button press provides only slight confirmation (e.g., active:scale-[0.98] + background darkening), not overly skeuomorphic.
- A11y Focus Rings: Focus state must provide clear ring (focus:ring-4 + brand blue/green transparency), not just border color change.
- Subtle Borders: Card hover primarily adjusts background and border shade, not using obvious shadows.

## Self-Check

After each code generation, verify:
1. No gradients used
2. Rounded corners consistently rounded-md
3. Shadows extremely light or none
4. Colors used with correct semantics
5. Overall feel is clean and professional
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#d0d7de]`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-[0_1px_0_rgba(27,31,36,0.04)]`
- Medium: `shadow-[0_1px_3px_rgba(27,31,36,0.12)]`
- Large: `shadow-[0_3px_6px_rgba(140,149,159,0.15)]`
- Hover: `hover:shadow-[0_1px_3px_rgba(27,31,36,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-150`

**Typography**
- Heading: `font-semibold text-[#1f2328]`
- Body: `text-sm text-[#1f2328]`

**Required Classes**

Button:
```
rounded-md
text-sm font-semibold
border
shadow-[0_1px_0_rgba(27,31,36,0.04)]
transition-colors duration-150
```

Card:
```
bg-white
border border-[#d0d7de]
rounded-md
```

Input:
```
bg-[#f6f8fa]
border border-[#d0d7de]
rounded-md
text-sm text-[#1f2328]
focus:bg-white
focus:border-[#0969da]
focus:shadow-[0_0_0_3px_rgba(9,105,218,0.3)]
focus:outline-none
```

**Forbidden**

Classes: `rounded-2xl`, `rounded-3xl`, `rounded-full`, `bg-gradient-to-r`, `bg-gradient-to-br`, `bg-gradient-to-b`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `font-serif`

Patterns: `^rounded-(?:2xl|3xl|full)`, `^bg-gradient`, `^shadow-(?:lg|xl|2xl)`, `^text-(?:[4-9]xl)`, `^blur-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  px-4 py-1.5
  bg-[#1f883d] text-white
  border border-[#1b7f37]
  rounded-md
  text-sm font-semibold
  shadow-[0_1px_0_rgba(27,31,36,0.04)]
  hover:bg-[#1a7f37]
  active:bg-[#197935]
  active:scale-[0.98]
  focus:outline-none focus:ring-4 focus:ring-[#1f883d]/30
  transition-all duration-100
">
  Merge pull request
</button>
```

**Card**
```html
<div className="
  group
  p-4
  bg-white
  border border-[#d0d7de]
  rounded-md
  hover:bg-[#f6f8fa]
  hover:border-[#8c959f]
  transition-colors duration-150
">
  <div className="flex items-center gap-2 mb-2">
    <span className="text-[#0969da] text-sm font-semibold group-hover:underline cursor-pointer">
      stylekit/design-system
    </span>
    <span className="px-1.5 py-0.5 text-xs font-medium text-[#656d76] border border-[#d0d7de] rounded-full">
      Public
    </span>
  </div>
  <p className="text-[#656d76] text-sm mb-3">
    A comprehensive design token system for building consistent UIs
  </p>
  <div className="flex items-center gap-4 text-xs text-[#656d76]">
    <span className="flex items-center gap-1">
      <span className="w-3 h-3 rounded-full bg-[#3178c6]" />
      TypeScript
    </span>
    <span>1.2k stars</span>
    <span>Updated 2 hours ago</span>
  </div>
</div>
```


---


### 巫术核心 (Witchcore)

**Slug**: `witchcore`

#### Description
Occult aesthetic style with tarot cards, moon phase symbols, crystals, and herbal elements. Deep purple tones paired with golden mystical runes and shimmering stardust effects on dark backgrounds.

#### Design Philosophy
Witchcore design draws inspiration from the occult, tarot, and natural magic traditions, constructing a visual world filled with ritual and mystical power through deep, dark purple tones and shimmering golden runes.

Core concepts:
- Mystical atmosphere: Deep purple and midnight black as the foundation, creating a dark and profound sense of space
- Rune decoration: Golden runes and moon phase symbols as core decorative elements, imbuing the interface with a sense of ritual
- Stardust texture: Faint glowing particles scattered across backgrounds, like dust shimmering in a starlit sky
- Natural magic: Herb green and amethyst purple as supporting colors, bridging the natural and the supernatural

The design language blends medieval alchemical manuscripts, Victorian-era divination aesthetics, and modern dark interface design. Every interactive element should feel like casting a spell -- buttons like activating runes, cards like turning tarot cards, input fields like inscribing prophecies.

Suitable for: occult apps, tarot reading platforms, crystal healing shops, dark aesthetic blogs, indie game interfaces.

#### Do's (必须做)
1. Use deep purple to midnight black gradient backgrounds bg-gradient-to-b from-[#4a1942] to-[#0d0b14]
2. Gold rune text text-[#c9a74e] with subtle glow [text-shadow:0_0_8px_rgba(201,167,78,0.4)]
3. Use semi-transparent gold borders border border-[#c9a74e]/30 hover:border-[#c9a74e]/60
4. Card backgrounds use bg-[#0d0b14]/80 backdrop-blur-sm for a hazy feel
5. Stardust background effects using radial-gradient with subtle light accents
6. Use serif fonts font-serif paired with tracking-wider for a ritualistic feel
7. Interactive elements enhance gold glow on hover hover:shadow-[0_0_20px_rgba(201,167,78,0.3)]
8. Use amethyst color text-[#7b68ae] as secondary information color

#### Don'ts (禁止做)
1. Do not use bright white or light gray backgrounds
2. Do not use high-saturation neon colors (such as cyan, lime)
3. Do not use rounded cute design elements (such as rounded-full buttons)
4. Do not use modern sans-serif fonts as main headings
5. Do not use regular shadows shadow-md (must be glow shadows or deep shadows)
6. Do not use bright cheerful gradients (such as pink-blue, pink-purple gradients)
7. Do not use flat design language; all elements need layers and depth

#### AI Rules
```
STYLE: Witchcore
TYPE: Occult mystical interface

MUST USE:
- Dark backgrounds: bg-[#0d0b14] or bg-[#4a1942]
- Gold rune text: text-[#c9a74e]
- Text glow: style={{textShadow: '0 0 10px rgba(201,167,78,0.3)'}}
- Glowing gold borders: border border-[#c9a74e]/30
- Serif fonts: font-serif for all text
- uppercase tracking-wider for labels
- Amethyst secondary: text-[#7b68ae]
- Herb green accent: text-[#3d8b6e]

MUST AVOID:
- Light/white backgrounds
- Neon/high-saturation modern colors
- Sans-serif fonts for headings
- Regular shadows (shadow-md)
- Rounded/cute elements (rounded-full)
- Bright cheerful gradients

COLOR RULES:
- Primary: Mystic purple (#4a1942)
- Secondary: Midnight (#0d0b14)
- Gold rune: #c9a74e
- Amethyst: #7b68ae
- Herb green: #3d8b6e

SPECIAL EFFECTS:
- Stardust particle overlays
- Rune glow pulsing animation
- Moon phase symbols as decorative elements
- Radial gradient for mystical light sources

ANIMATION & INTERACTION RULES:
- Ritual Levitation: Cards and primary elements must NOT bounce quickly. Use extremely slow upfloat (hover:-translate-y-2) with duration-1000 ease-in-out. Simulate the feeling of ritual levitation, not a spring.
- Occult Glow: On hover, the gold rune glow (text-shadow or box-shadow using #c9a74e) must expand and pulse as if imbued with magic. Use drop-shadow CSS filter on headings for text glow enhancement.
- Shadow Engulf: On dark backgrounds (#0d0b14), hover should expand a deep purple/amethyst outer glow outward, simulating dark matter or mystical fog spreading.
- Talisman Press: On :active, cancel the glow and add a deep inset shadow (active:shadow-[inset_0_0_20px_rgba(0,0,0,0.8)]) plus slight downward translate (active:translate-y-1), simulating pressing a heavy talisman or ritual object.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_2px_8px_rgba(13,11,20,0.6)]`
- Medium: `shadow-[0_4px_16px_rgba(13,11,20,0.7)]`
- Large: `shadow-[0_8px_30px_rgba(13,11,20,0.8)]`
- Hover: `hover:shadow-[0_0_25px_rgba(201,167,78,0.2)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-in-out`

**Typography**
- Heading: `font-serif tracking-wider uppercase`
- Body: `font-serif`

**Required Classes**

Button:
```
px-8 py-3
font-serif
uppercase tracking-widest
transition-all duration-500
```

Card:
```
bg-[#0d0b14]/90
border border-[#c9a74e]/30
```

Input:
```
bg-[#0d0b14]/80
border border-[#c9a74e]/20
text-[#c9a74e]
font-serif
focus:border-[#c9a74e]/60
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `shadow-sm`, `shadow-md`, `shadow-lg`, `rounded-full`, `rounded-2xl`, `rounded-3xl`, `text-cyan-`

Patterns: `^bg-(?:white|gray-[1-3])`, `^shadow-(?!\[|none)`, `^rounded-(?:full|2xl|3xl)`, `^text-(?:cyan|lime|pink)-`, `^bg-(?:cyan|lime|pink)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Rune Primary
<button className="px-10 py-3 bg-[#4a1942] border border-[#c9a74e]/50 text-[#c9a74e] font-serif uppercase tracking-[0.3em] shadow-[0_0_15px_rgba(201,167,78,0.2)] hover:shadow-[0_0_30px_rgba(201,167,78,0.6),inset_0_0_10px_rgba(201,167,78,0.2)] hover:border-[#c9a74e] hover:bg-[#5a1e50] active:shadow-[inset_0_0_20px_rgba(0,0,0,0.8)] active:translate-y-1 transition-all duration-700 ease-in-out">
  Invoke
</button>

// Rune Filled
<button className="px-8 py-3 bg-[#c9a74e] text-[#0d0b14] font-serif font-bold uppercase tracking-widest shadow-[0_0_20px_rgba(201,167,78,0.4)] hover:shadow-[0_0_30px_rgba(201,167,78,0.6)] transition-all duration-500">
  Activate
</button>

// Amethyst Variant
<button className="px-8 py-3 bg-transparent border border-[#7b68ae]/50 text-[#7b68ae] font-serif uppercase tracking-widest shadow-[0_0_15px_rgba(123,104,174,0.2)] hover:shadow-[0_0_25px_rgba(123,104,174,0.4)] hover:border-[#7b68ae] transition-all duration-500">
  Divine
</button>
```

**Card**
```html
<div className="group p-10 bg-[#0d0b14]/95 border border-[#c9a74e]/30 shadow-[0_4px_20px_rgba(13,11,20,0.9)] hover:shadow-[0_0_40px_rgba(123,104,174,0.3)] hover:-translate-y-2 hover:border-[#c9a74e]/60 transition-all duration-1000 ease-in-out cursor-default relative overflow-hidden">
  <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(123,104,174,0.1),transparent_50%)] opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-1000" />
  <div className="relative z-10 flex flex-col items-center text-center">
    <div className="w-2 h-2 bg-[#c9a74e] rounded-full shadow-[0_0_10px_rgba(201,167,78,0.8)] mb-6 group-hover:scale-150 group-hover:shadow-[0_0_20px_rgba(201,167,78,1)] transition-all duration-700" />
    <h3 className="text-[#c9a74e] font-serif text-2xl tracking-[0.2em] mb-4 uppercase group-hover:drop-shadow-[0_0_8px_rgba(201,167,78,0.5)] transition-all duration-700" style={{textShadow: "0 0 10px rgba(201,167,78,0.3)"}}>
      Lunar Divination
    </h3>
    <p className="text-[#7b68ae]/80 font-serif leading-relaxed group-hover:text-[#7b68ae] transition-colors duration-700">
      The veils between worlds grow thin under the waning crescent.
    </p>
  </div>
</div>
```


---


### 霓虹东京 (Neon Tokyo)

**Slug**: `neon-tokyo`

#### Description
Tokyo Kabukicho neon nightscape style with rain-slicked street reflections, layered neon signage, and cyberpunk urban night vibes. Unlike cyberpunk-neon's sci-fi feel, this leans toward authentic urban nightscapes.

#### Design Philosophy
Neon Tokyo draws inspiration from the neon nightscapes of Tokyo's Kabukicho, Shinjuku, and Shibuya. Unlike Cyberpunk Neon's sci-fi futurism, this style is closer to authentic urban nightscapes -- rain-soaked streets reflecting layered neon signs, warm and cool colors intertwining on wet asphalt.

Core concepts:
- Urban nightscape: A near-black deep blue-gray base simulating Tokyo's late-night city skyline
- Neon signage: Multi-color neon lights layered together, with pink, cyan, orange, and purple flickering in alternation
- Wet reflections: Elements carry a subtle reflective quality, like neon reflections on rain-slicked streets
- Layered depth: Bright foreground and dark background, simulating the visual depth of city alleyways

The key difference from Cyberpunk Neon: Neon Tokyo is warmer, more organic, and closer to real photography aesthetics. It does not pursue cold technological vibes but instead captures the lonely romance of a late-night wanderer in a neon jungle.

Suitable for: nightlife apps, music streaming, streetwear brands, urban photography portfolios, Japanese izakaya menus.

#### Do's (必须做)
1. Use deep night blue-black background bg-[#0a0a1a] or bg-gradient-to-b from-[#0a0a1a] to-[#12041e]
2. Neon pink text text-[#ff1493] with glow [text-shadow:0_0_10px_rgba(255,20,147,0.6)]
3. Alternate multi-color neon borders border-[#ff1493], border-[#00f0ff], border-[#ff6b00]
4. Enhance neon glow on hover hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]
5. Use sans-serif bold fonts paired with Japanese kana decorative elements
6. Add semi-transparent card backgrounds bg-[#0a0a1a]/80 backdrop-blur-md to simulate glass reflections
7. Gradient text effect bg-gradient-to-r from-[#ff1493] to-[#00f0ff] bg-clip-text text-transparent
8. Use multi-layered box-shadow to simulate neon tube glow diffusion

#### Don'ts (禁止做)
1. Do not use white or light backgrounds
2. Do not use low-saturation, dull colors
3. Do not use regular shadows shadow-md (must be colored glow shadows)
4. Do not use soft gradients (such as soft pink, pale blue)
5. Do not use serif fonts (except as Japanese decorative elements)
6. Do not use overly neat, corporate layouts
7. Do not use single-color neon (must be multi-color interweaving)

#### AI Rules
```
STYLE: Neon Tokyo
TYPE: Urban nightscape interface

MUST USE:
- Dark night sky background: bg-[#0a0a1a]
- Multi-color neon glows (not single-color)
- Primary pink: text-[#ff1493], border-[#ff1493]
- Cyan accent: text-[#00f0ff]
- Warm neon: text-[#ff6b00]
- Purple neon: text-[#bc13fe]
- Glow shadows with color: shadow-[0_0_20px_rgba(255,20,147,0.5)]
- backdrop-blur for glass/reflection effect
- font-bold uppercase tracking-wider for labels
- rounded-sm for subtle edge softness

MUST AVOID:
- Light/white backgrounds
- Low saturation or muted colors
- Regular shadows (shadow-md)
- Serif fonts (except for Japanese decorative text)
- Single-color neon palettes
- Corporate or overly clean layouts

COLOR RULES:
- Neon Pink: #ff1493 (primary)
- Night Sky: #0a0a1a (background)
- Cyan Neon: #00f0ff
- Warm Neon: #ff6b00
- Purple Neon: #bc13fe

DIFFERENCE FROM CYBERPUNK-NEON:
- Warmer, more organic feel
- Multi-color neon mixing (not cyan-dominant)
- Street photography aesthetic, not sci-fi
- Wet reflections, not scan lines

## Animation & Interaction Rules

- Rain-Slicked Reflections: Bottom reflection gradients should intensify on hover with higher opacity and mixed-color refraction.
- Signboard Flicker: Primary neon headings can use subtle irregular flicker to mimic aging street signage.
- Bleeding Glows: Hover state should expand pink/cyan/orange glow layers simultaneously so light bleeds at the edges.
- Damp Atmosphere: Transitions stay smooth (duration-300 to 500) to preserve wet-night ambience rather than sharp arcade motion.
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-[#ff1493]/30`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-[0_0_10px_rgba(255,20,147,0.2)]`
- Medium: `shadow-[0_0_15px_rgba(255,20,147,0.3)]`
- Large: `shadow-[0_0_25px_rgba(255,20,147,0.4)]`
- Hover: `hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
font-bold
uppercase tracking-wider
transition-all duration-300
rounded-sm
```

Card:
```
bg-[#0a0a1a]/80
backdrop-blur-md
border border-[#ff1493]/30
rounded-sm
```

Input:
```
bg-[#0a0a1a]/80
border border-[#ff1493]/30
rounded-sm
text-white
focus:border-[#ff1493]
focus:shadow-[0_0_15px_rgba(255,20,147,0.3)]
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `shadow-sm`, `shadow-md`, `shadow-lg`, `text-gray-900`, `rounded-2xl`, `rounded-3xl`

Patterns: `^bg-(?:white|gray-[1-3]|slate-[1-3])`, `^shadow-(?!\[|none)`, `^rounded-(?:2xl|3xl)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="
  group relative
  px-6 py-3
  bg-[#0a0a1a]/80 backdrop-blur-md
  border-2 border-[#ff1493]
  text-[#ff1493] font-bold uppercase tracking-wider
  shadow-[0_0_15px_rgba(255,20,147,0.4),0_0_20px_rgba(0,240,255,0.15),inset_0_0_12px_rgba(255,20,147,0.08)]
  hover:text-white hover:border-[#00f0ff] hover:bg-[#ff1493]/10
  hover:shadow-[0_0_28px_rgba(255,20,147,0.7),0_0_36px_rgba(0,240,255,0.45),0_0_44px_rgba(255,107,0,0.3)]
  active:bg-[#ff1493]/20
  transition-all duration-500
  rounded-sm
">
  Enter
</button>
```

**Card**
```html
<div className="group relative overflow-hidden bg-[#0a0a1a]/80 backdrop-blur-md border border-[#ff1493]/30 rounded-sm p-6 shadow-[0_0_15px_rgba(255,20,147,0.15)] hover:border-[#ff1493]/60 hover:shadow-[0_0_28px_rgba(255,20,147,0.35),0_0_44px_rgba(0,240,255,0.18)] transition-all duration-500">
  <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-[#ff1493]/10 via-[#00f0ff]/0 to-transparent pointer-events-none transition-all duration-500 group-hover:from-[#ff1493]/30 group-hover:via-[#00f0ff]/15" />
  <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-[#ff6b00]/10 to-transparent pointer-events-none opacity-60 transition-opacity duration-500 group-hover:opacity-100" />

  <div className="relative">
    <div className="flex items-center justify-between mb-4">
      <span className="text-[#00f0ff] text-xs font-bold uppercase tracking-widest transition-colors duration-300 group-hover:text-white">Kabukicho</span>
      <div className="flex gap-1">
        <div className="w-1.5 h-1.5 bg-[#ff1493] shadow-[0_0_6px_rgba(255,20,147,0.8)] transition-all duration-300 group-hover:scale-150 group-hover:shadow-[0_0_14px_rgba(255,20,147,1)]" />
        <div className="w-1.5 h-1.5 bg-[#00f0ff] shadow-[0_0_6px_rgba(0,240,255,0.8)] transition-all duration-300 delay-75 group-hover:scale-150 group-hover:shadow-[0_0_14px_rgba(0,240,255,1)]" />
        <div className="w-1.5 h-1.5 bg-[#ff6b00] shadow-[0_0_6px_rgba(255,107,0,0.8)] transition-all duration-300 delay-150 group-hover:scale-150 group-hover:shadow-[0_0_14px_rgba(255,107,0,1)]" />
      </div>
    </div>
    <h3 className="text-white text-xl font-bold mb-3 animate-[neon-flicker_3s_linear_infinite] transition-all duration-300 group-hover:[text-shadow:0_0_16px_rgba(255,20,147,0.8),0_0_28px_rgba(0,240,255,0.35)]">
      Midnight Alley
    </h3>
    <p className="text-gray-400 leading-relaxed text-sm transition-colors duration-300 group-hover:text-gray-200">
      Neon signs flicker above rain-slicked streets, casting liquid color across the pavement.
    </p>
  </div>
</div>
```


---


### 纸艺手作 (Paper Craft)

**Slug**: `paper-craft`

#### Description
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.

#### Do's (必须做)
1. Use paper white bg-[#fdf6ee] or soft warm white for backgrounds
2. Cards use paper shadows shadow-[4px_4px_0px_rgba(0,0,0,0.08)] to simulate raised effects
3. Buttons use offset shadows shadow-[3px_3px_0px_rgba(0,0,0,0.1)] to simulate paper piece elevation
4. Use rounded but imperfect corners rounded-xl paired with slight rotation rotate-[1deg]
5. Color blocks use bright craft colors bg-[#e85d75], bg-[#5cb8a5], bg-[#f5c040]
6. Text uses dark color text-[#2d2d2d] paired with handwritten-feel or rounded sans-serif fonts
7. Layering effects use multiple divs with absolute positioning and different shadow depths
8. On hover, slightly lift hover:-translate-y-1 hover:shadow-[5px_5px_0px_rgba(0,0,0,0.12)]
9. Multi-layer cards on hover let bottom paper layers fan out in different directions (Layer Separation)
10. When buttons and cards shift, shadow offset distance increases in sync, emphasizing paper lifting off the surface
11. Input focus uses deeper inset shadow to simulate cardboard cutout (Cutout Depth)

#### Don'ts (禁止做)
1. Do not use dark/black backgrounds
2. Do not use glow effects or neon shadows
3. Do not use metallic textures or glassmorphism
4. Do not use overly precise right-angle edges (looks too digital)
5. Do not use high-saturation fluorescent colors
6. Do not use gradient glow effects
7. Do not use drop-shadow filters (use box-shadow to simulate paper shadows)
8. Do not use spring bounce curves (paper is light but not rubbery)
9. Do not let layered paper pieces all move in the same direction on hover (loses the handmade peeling feel)

#### AI 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.
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[2px_2px_0px_rgba(0,0,0,0.06)]`
- Medium: `shadow-[4px_4px_0px_rgba(0,0,0,0.08)]`
- Large: `shadow-[6px_6px_0px_rgba(0,0,0,0.1)]`
- Hover: `hover:shadow-[5px_5px_0px_rgba(0,0,0,0.12)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
font-bold
rounded-xl
shadow-[3px_3px_0px_rgba(0,0,0,0.1)]
transition-all duration-200
```

Card:
```
bg-white
rounded-2xl
shadow-[4px_4px_0px_rgba(0,0,0,0.08)]
```

Input:
```
bg-white
border-2 border-[#e0d8cc]
rounded-xl
text-[#2d2d2d]
focus:border-[#e85d75]
focus:outline-none
```

**Forbidden**

Classes: `bg-black`, `bg-gray-900`, `bg-gray-950`, `shadow-[0_0_`, `text-cyan-`, `text-fuchsia-`, `bg-cyan-`, `bg-fuchsia-`

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


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Paper Primary
<button className="px-8 py-3 bg-[#e85d75] text-white font-bold rounded-xl shadow-[4px_4px_0px_rgba(45,45,45,0.15)] hover:-translate-y-1 hover:-translate-x-1 hover:shadow-[6px_6px_0px_rgba(45,45,45,0.15)] active:translate-y-1 active:translate-x-1 active:shadow-[1px_1px_0px_rgba(45,45,45,0.2)] transition-all duration-200 ease-out -rotate-1 hover:rotate-0">
  Create
</button>

// Paper Teal
<button className="px-8 py-3 bg-[#5cb8a5] text-white font-bold rounded-xl shadow-[4px_4px_0px_rgba(45,45,45,0.15)] hover:-translate-y-1 hover:translate-x-0.5 hover:shadow-[6px_6px_0px_rgba(45,45,45,0.14)] active:translate-y-1 active:shadow-[1px_1px_0px_rgba(45,45,45,0.2)] transition-all duration-200 ease-out rotate-[0.5deg] hover:rotate-0">
  Explore
</button>

// Paper Outline
<button className="px-8 py-3 bg-white border-2 border-[#2d2d2d] text-[#2d2d2d] font-bold rounded-xl shadow-[3px_3px_0px_rgba(0,0,0,0.08)] hover:-translate-y-0.5 hover:shadow-[5px_5px_0px_rgba(0,0,0,0.12)] active:translate-y-0.5 active:shadow-[1px_1px_0px_rgba(0,0,0,0.1)] transition-all duration-200 ease-out">
  Learn More
</button>
```

**Card**
```html
<div className="group relative w-full max-w-sm">
  {/* Back paper layer */}
  <div className="absolute inset-0 bg-[#f5c040] rounded-2xl rotate-[2deg] shadow-[3px_3px_0px_rgba(0,0,0,0.08)] group-hover:rotate-[6deg] group-hover:translate-x-2 group-hover:translate-y-1 transition-all duration-300 ease-out" />
  {/* Middle paper layer */}
  <div className="absolute inset-0 bg-[#5cb8a5] rounded-2xl -rotate-[1deg] shadow-[3px_3px_0px_rgba(0,0,0,0.08)] group-hover:-rotate-[4deg] group-hover:-translate-x-2 group-hover:translate-y-2 transition-all duration-300 ease-out delay-75" />
  {/* Front card */}
  <div className="relative bg-white rounded-2xl p-6 shadow-[4px_4px_0px_rgba(0,0,0,0.08)] group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0px_rgba(0,0,0,0.12)] transition-all duration-300 ease-out">
    <div className="inline-block px-3 py-1 bg-[#e85d75] text-white text-xs font-bold rounded-lg mb-3 -rotate-1 group-hover:rotate-0 transition-transform duration-200">
      Craft
    </div>
    <h3 className="text-[#2d2d2d] text-xl font-bold mb-2">
      Paper Origami
    </h3>
    <p className="text-[#666666] leading-relaxed text-sm">
      Fold, cut, and create layered paper sculptures with tactile handmade depth.
    </p>
  </div>
</div>
```


---


### 工程蓝图 (Blueprint)

**Slug**: `blueprint`

#### Description
Engineering blueprint and technical drawing style with white lines on blue, grid coordinates, annotation lines, and dimension markers. Ideal for architecture, engineering, tech, and education.

#### Design Philosophy
Blueprint draws design inspiration from traditional cyanotype blueprint printing and modern engineering drafting. White lines on a blue background are its most iconic visual feature, while grid systems, annotation lines, and dimension markers give the interface a precise, professional, and trustworthy character.

Core concepts:
- Blue background with white lines: The classic blueprint color scheme -- white lines and text on a deep blue background
- Grid system: Background grids suggest a precise coordinate system and measurement units
- Annotation language: Annotation lines, dimension markers, and coordinate labels serve as both decorative and navigational elements
- Technical font: Monospace fonts reinforce the precision feel of engineering drafting

Blueprint style naturally conveys "carefully planned" and "professionally reliable" messaging. It suits any scenario that needs to demonstrate technical depth and engineering thinking. UI elements should look as if drawn on drafting paper -- buttons like legend buttons, cards like detail zoom boxes on drawings, input fields like annotation columns.

Suitable for: architecture firms, engineering consultancies, tech product launch pages, educational institutions, and technical documentation websites.

#### Do's (必须做)
1. Use blueprint blue bg-[#1e3a5f] for backgrounds paired with grid line background effects
2. Use white text-white or light blue text-[#a0c4e8] for text and lines
3. Use monospace font font-mono to enhance the technical drafting feel
4. Use white/light blue thin line borders border border-white/30
5. Use orange text-[#ff6b35] for annotation highlight markers
6. Cards use semi-transparent backgrounds bg-[#1e3a5f]/60 backdrop-blur-sm
7. Add grid backgrounds bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)]
8. Use dashed elements border-dashed to simulate auxiliary lines

#### Don'ts (禁止做)
1. Do not use warm-toned backgrounds
2. Do not use rounded, soft design elements
3. Do not use gradient color fills (lines and fills should be solid colors)
4. Do not use glow effects or neon shadows
5. Do not use serif fonts or handwritten fonts
6. Do not use large areas of colored blocks
7. Do not use elements with overly large rounded corners rounded-2xl rounded-3xl

#### AI Rules
```
STYLE: Blueprint
TYPE: Engineering technical drawing interface

MUST USE:
- Blueprint blue background: bg-[#1e3a5f]
- White lines and text: text-white, border-white/30
- Monospace font: font-mono for all text
- uppercase tracking-widest for labels
- Grid background pattern for coordinates
- Orange annotations: text-[#ff6b35] for highlights
- Light blue secondary: text-[#a0c4e8]
- Corner markers on cards (L-shaped borders)
- Dashed lines for auxiliary elements: border-dashed

MUST AVOID:
- Warm-toned backgrounds
- Rounded/soft design elements
- Gradient fills
- Glow or neon effects
- Serif or handwritten fonts
- Large colored blocks
- Large border-radius (rounded-2xl+)

COLOR RULES:
- White line: #ffffff (primary elements)
- Blueprint blue: #1e3a5f (background)
- Light blue: #4a90d9, #a0c4e8 (secondary elements)
- Annotation orange: #ff6b35 (highlights, callouts)

SPECIAL EFFECTS:
- Grid background pattern (20px spacing)
- Corner bracket markers on containers
- Dimension lines with end markers
- Coordinate labels as decorative elements

Animation & Interaction Rules:
- CAD Precision: Interaction effects must be crisp and precise, prefer duration-100 (adjustable within 75-150ms range), avoiding sluggish ease-in-out.
- Crosshair Reveals: On hovering interactive elements, use before/after or corner markers to reveal crosshair and alignment hints.
- Blueprint Highlight: Default blue-white palette; active or confirm states can briefly light up engineering orange #ff6b35, but it must not dominate the main visual for long.
- Grid Interaction: Container hover can slightly increase grid line visibility (white lines to light blue lines), serving only as measurement feedback, not emotional animation.
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/30`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-[0_2px_10px_rgba(0,0,0,0.3)]`
- Hover: `hover:bg-white/5`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-mono tracking-wider uppercase`
- Body: `font-mono`

**Required Classes**

Button:
```
px-6 py-3
font-mono
uppercase tracking-widest
text-sm
transition-all duration-200
```

Card:
```
bg-[#1e3a5f]/60
border border-white/20
```

Input:
```
bg-transparent
border border-white/30
text-white
font-mono
focus:border-[#4a90d9]
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `shadow-sm`, `shadow-md`, `shadow-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`

Patterns: `^bg-(?:white|gray-[1-3]|slate-[1-3])`, `^shadow-(?:sm|md|lg|xl|2xl)`, `^rounded-(?:xl|2xl|3xl|full)`, `^font-serif`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
// Blueprint Primary (Snappy)
<button className="group relative px-6 py-2 bg-transparent text-[#a0c4e8] font-mono text-sm uppercase tracking-widest border border-[#a0c4e8]/50 hover:bg-[#a0c4e8]/10 hover:border-white hover:text-white active:bg-[#ff6b35] active:border-[#ff6b35] active:text-white transition-all duration-100 motion-reduce:transition-none overflow-hidden">
  <span className="absolute top-1 left-1 w-1.5 h-1.5 border-t border-l border-white opacity-0 group-hover:opacity-100 transition-opacity duration-100" />
  <span className="absolute bottom-1 right-1 w-1.5 h-1.5 border-b border-r border-white opacity-0 group-hover:opacity-100 transition-opacity duration-100" />
  <span className="relative z-10">Execute</span>
</button>

// Blueprint Filled (CAD Confirm)
<button className="group relative px-6 py-2 bg-white text-[#1e3a5f] font-mono font-bold text-sm uppercase tracking-widest border border-white hover:bg-[#a0c4e8] active:bg-[#ff6b35] active:text-white active:border-[#ff6b35] transition-all duration-100 motion-reduce:transition-none overflow-hidden">
  <span className="absolute left-2 right-2 top-1/2 h-px -translate-y-1/2 bg-[#1e3a5f]/0 group-hover:bg-[#1e3a5f]/25 transition-colors duration-100" />
  <span className="relative z-10">Compile</span>
</button>

// Annotation Variant
<button className="group relative px-6 py-2 bg-transparent border border-[#ff6b35]/60 text-[#ff6b35] font-mono text-sm uppercase tracking-widest hover:bg-[#ff6b35]/10 hover:border-[#ff6b35] hover:text-white active:bg-[#ff6b35] active:text-white transition-all duration-100 motion-reduce:transition-none overflow-hidden">
  <span className="absolute inset-y-1 left-1 w-px bg-[#ff6b35]/0 group-hover:bg-[#ff6b35]" />
  <span className="absolute inset-y-1 right-1 w-px bg-[#ff6b35]/0 group-hover:bg-[#ff6b35]" />
  <span className="relative z-10">Annotate</span>
</button>
```

**Card**
```html
<div className="group relative p-8 bg-[#1e3a5f] border border-white/20 hover:border-white/60 transition-colors duration-100 motion-reduce:transition-none cursor-crosshair overflow-hidden">
  {/* Blueprint Grid Overlay */}
  <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:20px_20px] pointer-events-none group-hover:bg-[linear-gradient(rgba(160,196,232,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(160,196,232,0.1)_1px,transparent_1px)] transition-all duration-100" />

  {/* Corner markers */}
  <div className="absolute top-2 left-2 w-3 h-3 border-t-2 border-l-2 border-white/40 group-hover:border-[#ff6b35] transition-colors duration-100" />
  <div className="absolute top-2 right-2 w-3 h-3 border-t-2 border-r-2 border-white/40 group-hover:border-[#ff6b35] transition-colors duration-100" />
  <div className="absolute bottom-2 left-2 w-3 h-3 border-b-2 border-l-2 border-white/40 group-hover:border-[#ff6b35] transition-colors duration-100" />
  <div className="absolute bottom-2 right-2 w-3 h-3 border-b-2 border-r-2 border-white/40 group-hover:border-[#ff6b35] transition-colors duration-100" />

  <div className="relative z-10 flex items-center gap-3 mb-4">
    <div className="w-2 h-[1px] bg-[#ff6b35]" />
    <span className="text-[#ff6b35] font-mono text-xs uppercase tracking-widest">Section A-2</span>
    <div className="flex-1 h-[1px] bg-white/10" />
  </div>
  <h3 className="relative z-10 text-white font-mono text-lg tracking-wider uppercase mb-3">
    Structural Overview
  </h3>
  <p className="relative z-10 text-[#a0c4e8]/75 font-mono text-sm leading-relaxed">
    Cross-section analysis of the primary load-bearing framework.
  </p>
</div>
```


---


### 多巴胺设计 (Dopamine Design)

**Slug**: `dopamine-design`

#### Description
高饱和度霓虹配色、大胆排版、充满能量感的视觉冲击力。2025-2026 年度设计趋势，用色彩直接刺激多巴胺分泌，让界面充满快乐和兴奋。

#### Design Philosophy
Dopamine Design is the hottest design trend of 2025-2026. The core idea is to use highly saturated colors, bold typography, and energetic visual elements to directly stimulate feelings of joy and excitement.

Core principles:
- Color explosion: 5-6 high-saturation colors, no dull or muted tones
- Bold typography: oversized fonts, heavy weights, tight leading
- Rounded & friendly: large border-radius, pill shapes, bubble elements
- Playful motion: elastic animations, overshoot, joyful micro-interactions
- Anti-gray: minimize gray usage, replace neutrals with color

#### Do's (必须做)
1. Use high-saturation colors: bg-[#ff006e] bg-[#8338ec] bg-[#ffbe0b] bg-[#3a86ff]
2. Maximum border-radius: rounded-full rounded-3xl rounded-2xl
3. Oversized headings: text-5xl md:text-7xl font-black
4. Pill-shaped buttons: rounded-full px-8
5. Colored shadows: shadow-[0_8px_30px_rgba(255,0,110,0.4)]
6. Gradient backgrounds: bg-gradient-to-br from-pink-500 via-purple-500 to-blue-500
7. Bouncy hover effects: hover:scale-105 transition-transform
8. Sprinkle emojis and playful icons

#### Don'ts (禁止做)
1. No large gray areas: text-gray-500 bg-gray-100
2. No desaturated/pastel colors
3. No small border-radius: rounded-sm rounded-md
4. No serious/corporate typography
5. No serif fonts
6. No black/gray shadows: shadow-lg

#### AI Rules
```
You are a Dopamine Design expert. This is the 2025-2026 design mega-trend centered on high-saturation colors, bold typography, and joyful energy.

## Design Tokens (Strict)
### Color System
- Primary: #ff006e (Hot Pink) — CTA, key actions, hero accents
- Secondary: #8338ec (Electric Purple) — cards, gradients, secondary actions
- Accent-Yellow: #ffbe0b — badges, highlights, warnings
- Accent-Blue: #3a86ff — links, info states, secondary gradients
- Accent-Green: #06d6a0 — success states, positive indicators
- Accent-Orange: #fb5607 — notifications, energy accents
- Surface-Light: #ffffff — card backgrounds (light mode)
- Surface-Dark: #1a0a2e — card backgrounds (dark variant)
- Text-Primary: #1a1a2e — headings on light bg
- Text-On-Color: #ffffff — text on colored surfaces

### Typography Scale
- Hero: text-5xl md:text-7xl font-black tracking-tight leading-[0.95]
- Section Title: text-3xl md:text-5xl font-extrabold tracking-tight
- Card Title: text-xl md:text-2xl font-bold
- Body: text-base font-medium leading-relaxed
- Caption: text-sm font-semibold uppercase tracking-widest
- Font Stack: 'Inter', 'SF Pro Display', system-ui, sans-serif

### Spacing & Radius
- Card padding: p-6 md:p-8
- Section gap: py-16 md:py-24
- Button: px-8 py-4 (desktop), px-6 py-3 (mobile)
- Border-radius: rounded-3xl (cards), rounded-full (buttons, badges), rounded-2xl (inputs)

### Shadows (Always Colored)
- Pink glow: shadow-[0_8px_30px_rgba(255,0,110,0.4)]
- Purple glow: shadow-[0_8px_30px_rgba(131,56,236,0.35)]
- Blue glow: shadow-[0_8px_30px_rgba(58,134,255,0.3)]
- Hover amplify: increase spread by 30%, add hover:-translate-y-0.5

## Absolute Constraints
1. ZERO gray backgrounds — replace bg-gray-* with tinted surfaces (bg-pink-50, bg-purple-50, bg-[#f8f0ff])
2. ZERO gray text — use text-[#1a1a2e] for primary, colored text for secondary
3. ZERO gray shadows — every shadow must carry a hue from the palette
4. ZERO small radius — rounded-2xl is the minimum for any container
5. ZERO thin font weights — font-semibold minimum for body, font-black for headings
6. ZERO serif fonts — sans-serif only, Inter preferred
7. ALL buttons must be pill-shaped (rounded-full) with colored shadow
8. ALL interactive elements must have hover:scale-105 + active:scale-95

## Decorative Elements (Anti-"AI Taste")
- Replace generic emoji with: SVG geometric shapes (circles, triangles, hexagons), CSS gradient orbs, abstract blob shapes via clip-path
- Use CSS geometric decorations: rotating gradient borders, animated dot grids, color-shifting orbs
- Background patterns: radial gradient blobs, mesh gradients, animated grain texture
- Icon style: Lucide or Phosphor icons with colored fills, never outline-only

## Motion System
- Hover: scale(1.05) + shadow amplify, duration-200, ease-out
- Press: scale(0.95), duration-100
- Enter: fadeInUp with 0.6s cubic-bezier(0.16,1,0.3,1)
- Stagger: 0.08s delay between siblings
- Gradient animation: background-size 200% with 3s infinite alternate

## Self-Check Mechanism
Before outputting any component, verify:
1. Does every surface have a non-gray color or gradient?
2. Are all shadows colored (not black/gray)?
3. Is border-radius >= rounded-2xl for containers?
4. Are headings font-bold or heavier?
5. Do interactive elements have scale + shadow hover effects?
If any check fails, fix before output.

## Responsive
- Mobile: text-3xl hero, px-6 py-3 buttons, rounded-2xl cards, single column
- Desktop: text-7xl hero, px-8 py-4 buttons, rounded-3xl cards, multi-column grid
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-[0_4px_15px_rgba(255,0,110,0.25)]`
- Medium: `shadow-[0_8px_30px_rgba(255,0,110,0.4)]`
- Large: `shadow-[0_12px_40px_rgba(131,56,236,0.5)]`
- Hover: `hover:shadow-[0_12px_40px_rgba(255,0,110,0.6)]`

**Interaction**
- Hover Translate: `hover:scale-105 hover:-translate-y-0.5`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-sans font-black tracking-tight`
- Body: `font-sans text-base font-medium`

**Required Classes**

Button:
```
rounded-full
font-bold
shadow-[0_8px_30px_rgba(255,0,110,0.4)]
hover:scale-105
active:scale-95
transition-all duration-300
```

Card:
```
rounded-3xl
```

Input:
```
rounded-2xl
border-2
focus:outline-none
```

**Forbidden**

Classes: `text-gray-500`, `text-gray-400`, `text-gray-300`, `bg-gray-100`, `bg-gray-50`, `bg-gray-200`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^text-gray-\d+$`, `^bg-gray-\d+$`, `^shadow-(sm|md|lg|xl)$`, `^rounded-(none|sm|md)$`, `^font-(serif|mono|normal|light|thin)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-4 bg-[#ff006e] text-white text-lg font-bold rounded-full shadow-[0_8px_30px_rgba(255,0,110,0.4)] hover:shadow-[0_12px_40px_rgba(255,0,110,0.6)] hover:scale-105 hover:-translate-y-0.5 active:scale-95 transition-all duration-200">
  Let's Go!
</button>
```

**Card**
```html
<div className="rounded-3xl bg-gradient-to-br from-[#8338ec] to-[#3a86ff] p-8 text-white shadow-[0_16px_50px_rgba(131,56,236,0.35)] hover:shadow-[0_20px_60px_rgba(131,56,236,0.5)] hover:scale-[1.02] transition-all duration-200">
  <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-white/20 rounded-full text-sm font-semibold backdrop-blur-sm mb-4">
    <span>New</span>
  </div>
  <h3 className="text-2xl font-black mb-2">Dopamine Boost</h3>
  <p className="text-white/80 leading-relaxed">Colors that make you feel alive. Bold, bright, and unapologetically joyful.</p>
</div>
```


---


### Linear 风格 (Linear Style)

**Slug**: `linear-style`

#### Description
受 Linear 应用启发的极简暗色设计风格。精确的排版、克制的动效、开发者审美的极致表达。深色背景配合微妙的渐变和精细的边框。

#### Design Philosophy
Linear Style draws from the beloved developer tool Linear. The design philosophy: "Every pixel has a purpose."

Core principles:
- Dark-first: near-black background (#0a0a0b), content is the only focus
- Precise typography: Inter font, fine-tuned letter-spacing, balanced line-height
- Restrained gradients: purple gradient only for primary CTAs and branding
- Subtle borders: 1px semi-transparent white borders for hierarchy
- No excess: no shadows, no oversized border-radius, no flashy effects

#### Do's (必须做)
1. Near-black backgrounds: bg-[#0a0a0b] or bg-zinc-950
2. Text hierarchy: text-white and text-zinc-400
3. Subtle borders: border border-white/10
4. Button gradient: bg-gradient-to-r from-[#5e6ad2] to-[#8b5cf6]
5. Inter font with tracking-tight or -tracking-[0.01em]
6. Opacity-based interactions: hover:text-white
7. Restrained border-radius: rounded-lg max
8. Use backdrop-blur-sm for floating layers

#### Don'ts (禁止做)
1. No white/light backgrounds (dark is the foundation)
2. No large border-radius: rounded-2xl, rounded-3xl, rounded-full
3. No colored shadows or large shadows
4. No multiple fonts (Inter only)
5. No oversaturated colors (except brand purple)
6. No decorative elements (gradient backgrounds, blobs, noise textures)

#### AI Rules
```
You are a Linear Style design expert. This style emulates the design language of the Linear project management tool — precise, restrained, and developer-focused.

## Absolute Rules
- Background: #0a0a0b or bg-zinc-950 — always dark
- Text: text-white for primary, text-zinc-400 for secondary, text-zinc-500/600 for tertiary
- Borders: border border-white/10 — always 1px, always semi-transparent
- Brand color: #5e6ad2 (indigo-purple) — used sparingly for CTAs and accents
- Font: Inter only, tracking-tight, text-sm as default body size
- Border-radius: rounded-lg max, rounded-md for small elements

## Forbidden
- White or light backgrounds
- Large border-radius (rounded-2xl+)
- Colored shadows
- Multiple fonts
- High-saturation colors (except brand purple)
- Decorative elements (gradients as decoration, blobs, patterns)

## Interaction Pattern
- Use opacity for hover states: hover:opacity-90 or hover:bg-white/[0.06]
- Transitions must be fast: duration-150
- No scale transforms on hover
- Focus: focus:border-[#5e6ad2]/50

## Typography Scale
- Hero: text-4xl font-semibold tracking-tight
- Section: text-2xl font-semibold tracking-tight
- Body: text-sm text-zinc-400
- Label: text-xs text-zinc-500 font-medium uppercase tracking-wider
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-150`

**Typography**
- Heading: `font-sans font-semibold tracking-tight`
- Body: `font-sans text-sm`

**Required Classes**

Button:
```
rounded-lg
font-medium
text-sm
transition-opacity duration-150
```

Card:
```
rounded-lg
border border-white/10
bg-white/[0.03]
```

Input:
```
rounded-lg
border border-white/10
bg-white/[0.03]
text-white text-sm
focus:outline-none
```

**Forbidden**

Classes: `bg-white`, `bg-gray-50`, `bg-gray-100`, `bg-slate-50`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^bg-(?:white|gray-(?:50|100)|slate-50)$`, `^rounded-(?:2xl|3xl|full)$`, `^shadow-(?:sm|md|lg|xl|2xl)$`, `^shadow-.*\/\d+$`, `^font-(?:serif|mono)$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-4 py-2 bg-gradient-to-r from-[#5e6ad2] to-[#8b5cf6] text-white text-sm font-medium rounded-lg hover:opacity-90 active:opacity-80 transition-opacity duration-150">
  Create Issue
</button>
```

**Card**
```html
<div className="rounded-lg border border-white/10 bg-white/[0.03] p-5 hover:bg-white/[0.06] transition-colors duration-150">
  <div className="flex items-center gap-3 mb-3">
    <div className="w-4 h-4 rounded-full border-2 border-[#5e6ad2]" />
    <span className="text-sm text-white font-medium">STY-142</span>
    <span className="ml-auto text-xs text-zinc-500">2h ago</span>
  </div>
  <h4 className="text-white text-sm mb-1.5">Add dark mode support for dashboard</h4>
  <p className="text-zinc-500 text-xs leading-relaxed">Implement theme switching with system preference detection and manual override.</p>
  <div className="mt-3 flex items-center gap-2">
    <span className="px-2 py-0.5 text-[10px] font-medium text-[#5e6ad2] bg-[#5e6ad2]/10 rounded">Feature</span>
    <span className="px-2 py-0.5 text-[10px] font-medium text-[#f2c94c] bg-[#f2c94c]/10 rounded">In Progress</span>
  </div>
</div>
```


---


### 清爽电商 (Shopify Clean)

**Slug**: `shopify-clean`

#### Description
A clean, modern aesthetic built for independent storefronts. Product-first layouts with clear pricing hierarchy and smooth conversion paths.

#### Design Philosophy
Shopify Clean is a conversion-oriented e-commerce design language.

Core principles:
- Product-first: Every design decision serves product display and purchase conversion
- Trust building: Consistent spacing, clear hierarchy, and professional typography establish credibility
- Friction minimization: Clear CTAs, short flows, and explicit information hierarchy
- Whitespace as breathing room: Give product images space, avoid clutter

#### Do's (必须做)
1. Use pure white bg-white or light gray bg-[#f7f7f8] as base
2. Primary button uses brand green bg-[#008060] text-white rounded-lg
3. Product cards use border border-[#e3e3e3] hover:shadow-md transition
4. Price uses text-lg font-semibold text-[#1a1a1a] for emphasis
5. Strikethrough price uses line-through text-muted text-sm
6. Image containers use aspect-square or aspect-[3/4] for grid consistency
7. Trust badges use small icon + text-xs combos
8. CTA buttons are always full-width on mobile

#### Don'ts (禁止做)
1. Never use dark backgrounds as primary (affects product color accuracy)
2. Never exceed rounded-xl on product cards
3. Never use large decorative elements on product listing pages
4. Never use low-contrast colors for pricing
5. Never use desaturated colors on CTA buttons
6. Never apply filters or color overlays on product images

#### AI Rules
```
You are a Shopify Clean e-commerce design expert.

## Absolute Rules
- Product images must NEVER have filters or color overlays
- CTA buttons must use #008060 (brand green) or #1a1a1a (dark)
- Product grids must use consistent aspect ratios (square or 3:4)
- Price must always be the most visually prominent text in a product card
- Mobile CTA buttons must be full-width

## Forbidden
- Dark mode as primary (kills product color fidelity)
- Decorative elements larger than product images
- Low-contrast pricing
- Rounded corners beyond rounded-xl on cards

## Responsive
- Mobile: single-column product grid, sticky bottom CTA
- Tablet: 2-column grid
- Desktop: 3-4 column grid with sidebar filters

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), row on desktop (md:flex-row)
- Reduce font sizes on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: min 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. All interactive elements have hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout is responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing is consistent using the defined scale
6. All animations respect prefers-reduced-motion
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e3e3e3]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-normal`

**Required Classes**

Button:
```
px-6 py-3
rounded-lg
font-medium
transition-colors duration-200
```

Card:
```
bg-white
rounded-lg
border border-[#e3e3e3]
```

Input:
```
px-4 py-3
border border-[#e3e3e3]
rounded-lg
focus:ring-2 focus:ring-[#008060]/20
focus:border-[#008060]
```

**Forbidden**

Classes: `rounded-2xl`, `shadow-2xl`, `bg-gradient-to-r`, `border-4`

Patterns: `^shadow-2xl`, `^bg-gradient-`, `^border-[48]`, `^rounded-(2xl|3xl|full)`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="w-full px-6 py-3 bg-[#008060] text-white text-sm font-medium rounded-lg hover:bg-[#006e52] active:bg-[#005c45] transition-colors duration-200">Add to Cart</button>
```

**Card**
```html
<div className="group border border-[#e3e3e3] rounded-lg overflow-hidden bg-white hover:shadow-md transition-shadow duration-200">
  <div className="aspect-square bg-[#f7f7f8] overflow-hidden">
    <div className="w-full h-full bg-gradient-to-br from-[#f0f0f0] to-[#e8e8e8] group-hover:scale-105 transition-transform duration-300" />
  </div>
  <div className="p-4">
    <p className="text-sm text-[#6b7280] mb-1">Brand Name</p>
    <h3 className="text-base font-medium text-[#1a1a1a] mb-2">Product Title</h3>
    <div className="flex items-baseline gap-2">
      <span className="text-lg font-semibold text-[#1a1a1a]">$49.00</span>
      <span className="text-sm text-[#9ca3af] line-through">$65.00</span>
    </div>
  </div>
</div>
```


---


### 奢品零售 (Luxury Retail)

**Slug**: `luxury-retail`

#### Description
Premium retail aesthetic with generous whitespace, serif typography, and gold-marble accents that communicate exclusivity and refinement.

#### Design Philosophy
Luxury Retail design philosophy comes from high-end fashion and jewelry retail.

Core principles:
- Restraint is prestige: Fewer elements communicate luxury; whitespace is the most expensive design language
- Serif authority: Serif fonts establish heritage and craftsmanship
- Gold accents: Gold appears only as accent on key interactions and dividers
- Tactile quality: Subtle textures and gradients suggest material refinement

#### Do's (必须做)
1. Use warm white bg-[#faf9f6] instead of pure white
2. Headings use serif font-serif text-[#1a1a1a]
3. Gold accents limited to borders, dividers, icons: border-[#c9a96e] or text-[#c9a96e]
4. Product images use large display, at least aspect-[3/4]
5. Buttons use thin border style: border border-[#1a1a1a] bg-transparent hover:bg-[#1a1a1a] hover:text-white
6. Body text uses tracking-wide and leading-relaxed for elegance
7. Use 1px dividers border-[#e8e0d4] instead of thick separators

#### Don'ts (禁止做)
1. Never use saturated bright colors (breaks premium feel)
2. Never use sans-serif bold as main heading
3. Never exceed rounded-sm (luxury prefers sharp or micro-rounded corners)
4. Never use gold as a large fill color (gold is accent only)
5. Never use emojis or cartoon graphics
6. Never use small product images (luxury images must be large and clear)

#### AI Rules
```
You are a Luxury Retail design expert.

## Absolute Rules
- Headings MUST be set in serif fonts
- Background is warm white #faf9f6 — never pure white
- Gold #c9a96e is strictly an accent: borders, dividers, small text only
- Product images stay large (aspect-[3/4] minimum)
- Buttons are outlined, never filled; hover inverts them to solid
- All text carries generous tracking and leading

## Forbidden
- Bright saturated colors
- Corner radii beyond rounded-sm
- Bold sans-serif headings
- Large gold fill areas
- Emojis or cartoon graphics
- Small product thumbnails

## Responsive
- Mobile: full-width hero, stacked product cards
- Desktop: 2-3 column editorial grid

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), switch to rows on desktop (md:flex-row)
- Scale down type on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: minimum 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. Every interactive element has hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout stays responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing follows the defined scale consistently
6. All animations honor prefers-reduced-motion
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e8e0d4]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-serif text-[#1a1a1a] tracking-wide`
- Body: `text-[#8b7355] tracking-wide leading-relaxed`

**Required Classes**

Button:
```
border border-[#1a1a1a]
bg-transparent
text-[#1a1a1a]
text-xs tracking-[0.2em] uppercase
hover:bg-[#1a1a1a] hover:text-[#faf9f6]
transition-all duration-300
```

Card:
```
bg-[#faf9f6]
rounded-sm
```

Input:
```
bg-transparent
border-b border-[#c9a96e]
text-[#1a1a1a]
placeholder:text-[#8b7355]
focus:outline-none focus:border-[#1a1a1a]
tracking-wide
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `bg-blue-500`, `bg-red-500`, `shadow-2xl`

Patterns: `^rounded-(?:lg|xl|2xl|3xl|full)`, `^bg-(?:blue|red|green|yellow|purple|pink)-\d+`, `^shadow-(?:lg|xl|2xl)`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `heading`, `badge`, `nav`


#### Component Examples

**Button**
```html
<button className="px-8 py-3 border border-[#1a1a1a] text-[#1a1a1a] text-xs tracking-[0.2em] uppercase font-light hover:bg-[#1a1a1a] hover:text-[#faf9f6] transition-all duration-300">Discover</button>
```

**Card**
```html
<div className="group">
  <div className="aspect-[3/4] bg-[#f0ece4] overflow-hidden mb-4">
    <div className="w-full h-full bg-gradient-to-b from-[#e8e0d4] to-[#d8cfc0] group-hover:scale-[1.02] transition-transform duration-500" />
  </div>
  <p className="text-xs tracking-[0.15em] uppercase text-[#8b7355] mb-1">Collection</p>
  <h3 className="font-serif text-lg text-[#1a1a1a] mb-1">Signature Piece</h3>
  <p className="text-sm text-[#8b7355]">$1,280</p>
</div>
```


---


### 鲜活市集 (Fresh Market)

**Slug**: `fresh-market`

#### Description
E-commerce style for food, grocery, and organic brands. Warm tones with rounded cards and natural textures convey freshness and trust.

#### Design Philosophy
Fresh Market draws inspiration from farmers' markets and organic food stores.

Core principles:
- Natural warmth: Warm base tones evoke sunshine and harvest
- Rounded friendliness: Large border-radius and soft shadows convey approachability
- Freshness perception: Green means fresh, orange means vibrant, brown means earthy
- Artisan texture: Subtle textures suggest natural, handmade quality

#### Do's (必须做)
1. Use warm cream base bg-[#fef9f0]
2. Primary button uses pumpkin orange bg-[#e8722a] text-white rounded-full
3. Product cards use large rounded-2xl shadow-sm
4. Category tags use pill shape rounded-full bg-[#d4e4bc] text-[#2d5016]
5. Headings use font-bold text-[#2d5016]
6. Use green text-[#2d5016] to convey freshness and organic
7. Price tags use color block bg-[#f5c542] text-[#8b4513] rounded-lg px-2
8. Images use rounded-xl overflow-hidden to soften edges

#### Don'ts (禁止做)
1. Never use cool-tone backgrounds (blue-gray breaks warm base)
2. Never use sharp corners rounded-none (conflicts with friendly feel)
3. Never use pure black text (use deep brown #8b4513 or deep green #2d5016)
4. Never use industrial fonts (geometric sans, etc.)
5. Never use neon or fluorescent colors

#### AI Rules
```
You are an expert frontend developer specializing in Fresh Market, a warm food and grocery e-commerce style. All generated code must strictly follow these constraints:

## Absolute Rules
- Every surface sits on warm cream bg-[#fef9f0] — never cold white or gray backgrounds
- Round every corner: rounded-lg is the minimum, rounded-2xl is preferred for cards
- Deep green #2d5016 carries headings and freshness signals
- Pumpkin orange #e8722a is reserved for CTAs and moments of energy
- Never render pure black text — substitute deep brown #8b4513 or deep green #2d5016
- Product imagery must be large and appetizing

## Forbidden
- Cool blue or gray backgrounds
- Sharp corners (rounded-none)
- Pure black text
- Neon or fluorescent colors
- Industrial or geometric typefaces

## Responsive
- Mobile: single-column flow with large product images
- Desktop: 3-4 column product grid

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Build mobile-first with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), switch to rows on desktop (md:flex-row)
- Scale headings down on mobile: text-3xl md:text-5xl
- Keep interactive targets touch-friendly at a minimum of 44px

## Self-Check Verification
After generating code, confirm:
1. Every interactive element has hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout adapts cleanly across breakpoints
4. Typography hierarchy reads clearly (h1 > h2 > h3 > body)
5. Spacing stays consistent with the defined scale
6. Animations respect prefers-reduced-motion
```


#### Design Tokens

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

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-bold`
- Body: `font-sans`

**Required Classes**

Button:
```
px-6 py-3
rounded-full
font-medium
transition-all duration-200
```

Card:
```
bg-white
rounded-2xl
shadow-sm
```

Input:
```
px-5 py-3
bg-white
border border-[#d4e4bc]
rounded-full
text-[#2d5016]
placeholder:text-[#8b7355]
focus:outline-none
focus:ring-2 focus:ring-[#2d5016]/20
transition-colors
```

**Forbidden**

Classes: `bg-blue-500`, `bg-gray-100`, `bg-gray-50`, `text-black`, `rounded-none`, `shadow-xl`, `shadow-2xl`

Patterns: `^bg-blue-`, `^bg-gray-`, `^bg-slate-`, `^text-black`, `^rounded-none`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-3 bg-[#e8722a] text-white font-medium rounded-full hover:bg-[#d4641f] active:scale-95 transition-all duration-200 shadow-sm">Add to Basket</button>
```

**Card**
```html
<div className="group bg-white rounded-2xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200">
  <div className="aspect-square bg-[#f5f0e8] overflow-hidden">
    <div className="w-full h-full bg-gradient-to-br from-[#d4e4bc] to-[#c5d4a8] group-hover:scale-105 transition-transform duration-300" />
  </div>
  <div className="p-4">
    <div className="flex items-center gap-2 mb-2">
      <span className="text-[10px] px-2 py-0.5 rounded-full bg-[#d4e4bc] text-[#2d5016] uppercase tracking-wide">Organic</span>
    </div>
    <h3 className="font-bold text-[#2d5016] mb-1">Farm Fresh Avocados</h3>
    <p className="text-xs text-[#8b7355] mb-2">500g, locally sourced</p>
    <div className="flex items-center justify-between">
      <span className="text-lg font-bold text-[#e8722a]">$4.99</span>
      <button className="w-8 h-8 rounded-full bg-[#2d5016] text-white text-lg flex items-center justify-center hover:bg-[#1e3a0e] transition-colors">+</button>
    </div>
  </div>
</div>
```


---


### 数据密集 (Data Dense)

**Slug**: `data-dense`

#### Description
High-density admin panel style with compact spacing and small components. Prioritizes data tables and operational efficiency.

#### Design Philosophy
Data Dense is an efficiency-first admin interface design language.

Core principles:
- Maximum information density: Show the most useful data in limited screen space
- Scan efficiency: Compact line-height, strict alignment, fast vertical scanning
- Action immediacy: Inline actions, shortcuts, batch selection reduce clicks
- Status visualization: Color-coded states understood without reading text

#### Do's (必须做)
1. Use white bg-white with very light blue-gray bg-[#f8fafc] alternating rows
2. Table rows use compact py-2 text-sm or text-xs
3. Status badges use color coding bg-blue-50 text-blue-700 rounded px-1.5 py-0.5 text-xs
4. Buttons use small size px-2.5 py-1 text-xs rounded
5. Spacing uses 4px increments: gap-1 gap-2 gap-3
6. Table headers use text-xs uppercase tracking-wide text-[#64748b] font-medium
7. Use monospace for numbers, IDs, code-like data
8. Dividers use border-[#e2e8f0] thin lines

#### Don'ts (禁止做)
1. Never use large spacing p-6+ (wastes data display space)
2. Never use large rounded-xl+ corners (wastes pixels)
3. Never use large text-lg+ for table data
4. Never use decorative gradients or heavy shadows (adds visual noise)
5. Never hide important actions in dropdowns (frequent actions must be visible)
6. Never use large whitespace areas (data comes first)

#### AI Rules
```
You are a Data Dense admin panel design expert.

## Absolute Rules
- Maximize information density: table rows use py-2 or less
- All table text must be text-sm or text-xs
- Numbers and IDs must use font-mono
- Status must be color-coded (green=active, yellow=pending, red=error, blue=info)
- Buttons must stay small: px-2.5 py-1 text-xs
- Table headers must be uppercase text-[10px] tracking-wide

## Forbidden
- Large padding (p-6 and above)
- Large rounded corners (rounded-xl and above)
- Decorative gradients or heavy shadows
- Large font sizes in data areas
- Hiding frequent actions inside menus
- Large whitespace gaps

## Responsive
- Mobile: tables scroll horizontally, KPI cards stack vertically
- Desktop: full table view with inline actions
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#e2e8f0]`
- Radius: `rounded`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-sm`
- Large: `shadow-sm`
- Hover: `hover:shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-150`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-normal`

**Required Classes**

Button:
```
px-2.5 py-1
text-xs
rounded
transition-colors
```

Card:
```
bg-white
border border-[#e2e8f0]
rounded
```

Input:
```
px-2.5 py-1.5
text-xs
border border-[#e2e8f0]
rounded
focus:ring-1 focus:ring-[#3b82f6]
```

**Forbidden**

Classes: `rounded-xl`, `rounded-2xl`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `p-6`, `p-8`, `text-xl`, `text-2xl`

Patterns: `^rounded-(xl|2xl|3xl|full)`, `^shadow-(lg|xl|2xl)`, `^p-[6-9]`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="flex items-center gap-1.5">
  <button className="px-2.5 py-1 text-xs font-medium bg-[#3b82f6] text-white rounded hover:bg-[#2563eb] transition-colors">Save</button>
  <button className="px-2.5 py-1 text-xs font-medium border border-[#e2e8f0] text-[#64748b] rounded hover:bg-[#f8fafc] transition-colors">Cancel</button>
  <button className="px-2.5 py-1 text-xs font-medium text-[#ef4444] hover:bg-red-50 rounded transition-colors">Delete</button>
</div>
```

**Card**
```html
<div className="flex gap-3">
  <div className="flex-1 bg-white border border-[#e2e8f0] rounded px-3 py-2.5">
    <p className="text-[10px] uppercase tracking-wide text-[#64748b] mb-0.5">Revenue</p>
    <p className="text-lg font-semibold text-[#1e293b] font-mono">$42,389</p>
    <p className="text-[10px] text-[#22c55e]">+12.5%</p>
  </div>
  <div className="flex-1 bg-white border border-[#e2e8f0] rounded px-3 py-2.5">
    <p className="text-[10px] uppercase tracking-wide text-[#64748b] mb-0.5">Orders</p>
    <p className="text-lg font-semibold text-[#1e293b] font-mono">1,284</p>
    <p className="text-[10px] text-[#ef4444]">-3.2%</p>
  </div>
  <div className="flex-1 bg-white border border-[#e2e8f0] rounded px-3 py-2.5">
    <p className="text-[10px] uppercase tracking-wide text-[#64748b] mb-0.5">Users</p>
    <p className="text-lg font-semibold text-[#1e293b] font-mono">8,921</p>
    <p className="text-[10px] text-[#22c55e]">+8.1%</p>
  </div>
</div>
```


---


### 超大字体排版 (Oversized Typography)

**Slug**: `oversized-typography`

#### Description
The defining portfolio trend of 2026: type IS the layout. Names and headlines become viewport-scale heroes via fluid clamp() sizing, imagery recedes to accents, and a single international orange cuts through near-black on warm white.

#### Design Philosophy
Oversized Typography promotes text from information carrier to the layout itself. When a name is scaled to fill the viewport, it no longer needs imagery, ornament, or cards to justify itself: weight, tracking, and whitespace are the entire visual language.

Core principles:
- Type is the layout: the hero is not headline-plus-image, it is one text-[clamp(3rem,12vw,10rem)] word. Images appear only as small accents in the margins
- Fluid, not breakpoints: sizes use clamp(min, vw, max) so giant words continuously fill the viewport width instead of jumping between breakpoints
- Compression creates tension: font-black with tracking-tighter and leading-[0.85] lets strokes nearly touch, locking lines into one black mass
- Two-voice contrast: viewport-scale display type carries emotion while font-mono uppercase tracking-widest micro-labels carry data. Nothing is allowed to live between these two extremes
- Discipline of one color: near-black #0A0A0A and warm white #FAFAF8 own 95% of the canvas; international orange #FF4D00 appears only on key actions and hover moments, sharp because it is scarce

#### Do's (必须做)
1. Size headlines with fluid text-[clamp(3rem,12vw,10rem)] so they continuously fill the viewport
2. Set giant type as font-black uppercase tracking-tighter leading-[0.85] so lines nearly interlock
3. Use font-mono text-xs uppercase tracking-widest for nav, labels, and meta information
4. Pair sections with giant index numbers (01 / 02 / 03) at text-[clamp(2rem,6vw,5rem)] font-black
5. Restrict color to near-black #0A0A0A, warm white #FAFAF8, and a single accent #FF4D00
6. Hover via underline underline-offset-8 decoration-2 or a flip to orange, never via shadows
7. Use -webkit-text-stroke outline text for hover inversions or secondary lines
8. Separate sections with border-t border-[#0A0A0A]/15 hairlines and py-24+ whitespace
9. Include an infinite marquee text strip as a kinetic typographic element

#### Don'ts (禁止做)
1. Never use gradient backgrounds or gradient text (bg-gradient-*); solid colors only
2. Never stack rounded cards; rounded-none or rounded-sm at most
3. Never apply shadows (shadow-*); hierarchy comes from size, weight, and whitespace alone
4. Never introduce a second accent color; no chroma exists beyond #FF4D00
5. Never replace verbal expression with decorative icons; arrows serve type, not the reverse
6. Never center small headings — titles are either huge or left-aligned, no timid middle ground

#### AI Rules
```
You are an Oversized Typography design expert generating 2026-style portfolio code.

## Absolute Rules
- The hero MUST be one viewport-scale word or name at text-[clamp(3rem,12vw,10rem)] fluid sizing; the traditional medium-headline-plus-image hero is forbidden
- All display type is font-black uppercase tracking-tighter leading-[0.85]
- Only two typographic voices exist: viewport-scale display, and font-mono text-xs uppercase tracking-widest micro-labels; body text at text-sm/base appears sparingly
- Palette is strictly #0A0A0A near-black text, #FAFAF8 warm white background, #FF4D00 as the single accent, #71717A / #E4E4E7 support grays
- Number sections with giant indices 01 / 02 / 03
- Hover states use underline underline-offset-8, a flip to orange, or solid/outline inversion via -webkit-text-stroke
- Images may only appear as small accents (max one third of viewport width) and never compete with the type

## Forbidden
- Gradients of any kind (bg-gradient-*, gradient text)
- Shadows of any kind (all shadow-*)
- Border radius beyond rounded-sm
- Any second accent color
- Centered small-size headings
- Decorative icon sets replacing verbal expression

## Responsive
- Giant type scales via clamp(); no font-size breakpoints needed
- Keep leading-[0.85] and uppercase on mobile; let giant words wrap into a type block
- Marquee, indices, and hairlines stay identical across breakpoints
- Touch targets at least 44px; pad mono labels with py-3 for tap area

## Self-Check
After generating, verify:
1. The first thing seen is type, not imagery
2. The only chroma on the page is #FF4D00
3. Zero shadow-* and bg-gradient-* classes exist
4. Every display heading is uppercase + font-black + negative tracking
5. Nav and meta rows are font-mono uppercase tracking-widest
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#0A0A0A]/15`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-black uppercase tracking-tighter leading-[0.85]`
- Body: `font-sans text-sm leading-relaxed`

**Required Classes**

Button:
```
font-mono
uppercase
tracking-widest
rounded-none
transition-colors duration-200
```

Card:
```
border-t border-[#0A0A0A]/15
rounded-none
bg-transparent
```

Input:
```
bg-transparent
border-0 border-b border-[#0A0A0A]/30
rounded-none
font-mono uppercase tracking-widest
focus:border-[#FF4D00]
```

**Forbidden**

Classes: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`, `bg-gradient-to-br`, `rounded-md`, `rounded-lg`, `rounded-xl`

Patterns: `^shadow-(?!none)`, `^bg-gradient-`, `^rounded-(md|lg|xl|2xl|3xl|full)`, `^drop-shadow-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-4 bg-[#0A0A0A] text-[#FAFAF8] font-mono text-xs uppercase tracking-widest rounded-none border border-[#0A0A0A] hover:bg-[#FF4D00] hover:border-[#FF4D00] transition-colors duration-200">Start a Project</button>
```

**Card**
```html
<div className="group border-t border-[#0A0A0A]/15 py-8 cursor-pointer">
  <div className="flex items-baseline gap-6">
    <span className="font-mono text-sm text-[#71717A]">01</span>
    <div className="flex-1">
      <h3 className="text-[clamp(2rem,5vw,4rem)] font-black uppercase tracking-tighter leading-[0.9] text-[#0A0A0A] group-hover:text-[#FF4D00] transition-colors duration-200">Brand Identity</h3>
      <p className="font-mono text-xs uppercase tracking-widest text-[#71717A] mt-3">Art Direction — 2026</p>
    </div>
    <span className="text-2xl text-[#0A0A0A] group-hover:translate-x-2 group-hover:text-[#FF4D00] transition-all duration-200">&rarr;</span>
  </div>
</div>
```


---


### 终端风 (Developer Terminal)

**Slug**: `developer-terminal`

#### Description
Turn a website into a terminal session: phosphor-green mono text, prompt prefixes, paired command-and-output blocks, and a tmux status bar. Tool authenticity as developer identity.

#### Design Philosophy
Developer Terminal does not imitate how a terminal looks; it borrows how a terminal speaks. For developers, the terminal is home -- the most honest, efficient, decoration-free tool they own. Building a personal site as a terminal session is a statement: my identity needs no marketing page, the tool itself is my business card.

Core concepts:
- Content as output: every block of content is the result of a command. Visitors are not "browsing a page", they are "reading a session" -- headings are prompts, body copy is stdout, errors are stderr
- Tool authenticity: a real terminal has no gradients, no shadows, no photography. Only monospace glyphs, a cursor, and color semantics. This restraint is not poverty -- it is professionalism itself
- Color as syntax highlighting: phosphor green for primary output, cyan for paths and links, magenta for keywords and errors, amber for strings and warnings, blue-gray for comments. Color never decorates, it only means
- Session liveness: a blinking cursor implies the session is still open; a tmux status bar implies the system is still running. The page is not a static document, it is a living process

The paradox of terminal aesthetics: it looks the least "designed", yet demands the strictest design discipline -- a single sans-serif glyph or gradient block shatters the whole illusion.

#### Do's (必须做)
1. Use font-mono everywhere, no exceptions
2. Near-black bg-[#0A0E12] with phosphor green text-[#4AF626] as primary text
3. Start section headings with a prompt prefix: visitor@stylekit:~$ command
4. Use a blinking cursor block w-2 h-4 bg-[#4AF626] on headings or inputs
5. Structure content as command + output pairs; comment lines start with # in text-[#6272A4]
6. Render lists as ls -la aligned output and tables with ps aux style headers
7. Express status with exit code badges: [0] OK in green / [1] ERR in magenta
8. Panels use border border-[#1F2937] rounded-sm; end pages with a tmux status bar
9. Separate sections with ASCII rules (------) instead of decorative dividers

#### Don'ts (禁止做)
1. Never use sans-serif or serif fonts (font-sans, font-serif)
2. Never use white or light backgrounds (bg-white, bg-gray-50)
3. Never use rounded-lg or larger radii (terminal chrome stays within rounded-sm)
4. Never use gradients (bg-gradient-*) or glassmorphism (backdrop-blur)
5. Never use photography or illustration (a terminal only has glyphs)
6. Never exceed 4 terminal accent colors (cyan/magenta/amber/blue-gray only)
7. Never use heavy shadows shadow-md or above (terminals are flat)

#### AI Rules
```
You are a Developer Terminal design expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden
- Any sans-serif / serif font (font-sans, font-serif)
- White or light backgrounds (bg-white, bg-gray-50, etc.)
- rounded-lg or larger radii (only rounded-sm and rounded-none allowed)
- Gradients bg-gradient-* and glassmorphism backdrop-blur
- Photography or illustration (a terminal only has glyphs)
- A 5th accent color (only #8BE9FD / #FF79C6 / #FFB86C / #6272A4 allowed)
- Heavy shadows shadow-md and above

## Must Follow
- font-mono globally
- Background #0A0E12, panels #0D141B, borders border-[#1F2937]
- Primary text phosphor green #4AF626; comments start with # in #6272A4
- Section headings start with a prompt prefix: visitor@stylekit:~$ command
- Headings or inputs carry a blinking cursor block (w-2 h-4 bg-[#4AF626] animate-pulse)
- Organize content as command + output pairs; lists as ls -la aligned output
- Status via exit code badges: [0] OK (green) / [1] ERR (magenta #FF79C6)
- End pages with a tmux style status bar
- Separate sections with ASCII rules (------)

## Color Semantics
- #4AF626 green: primary output, success, prompt commands
- #8BE9FD cyan: paths, links, usernames, info
- #FF79C6 magenta: keywords, errors, destructive actions
- #FFB86C amber: strings, numbers, warnings
- #6272A4 blue-gray: comments, secondary info, inactive items

## Motion & Interaction
- Cursor blink via steps() or animate-pulse, roughly 1s period
- Hover only shifts background alpha (hover:bg-[#4AF626]/10) or border brightness; no translate or scale
- Optional faint scanline texture (repeating-linear-gradient, alpha under 0.03)
- Use transition-colors duration-150

## Responsive
- Mobile: still a single-column terminal window, text-xs/text-sm, tables scroll horizontally
- Desktop: terminal window centered around max-w-5xl, keep an 80-column feel

## Self-Check
1. No non-mono font anywhere on the page
2. No gradients, glassmorphism, heavy shadows, or images
3. Every section reads as the output of a command
4. Color carries semantics only, never decoration
5. A tmux status bar exists at the bottom and at least one cursor blinks
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#1F2937]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-150`

**Typography**
- Heading: `font-mono font-bold tracking-tight`
- Body: `font-mono`

**Required Classes**

Button:
```
font-mono
text-sm
rounded-sm
transition-colors duration-150
```

Card:
```
font-mono
bg-[#0D141B]
border border-[#1F2937]
rounded-sm
```

Input:
```
font-mono
bg-[#0A0E12]
border border-[#1F2937]
rounded-sm
text-[#4AF626]
caret-[#4AF626]
placeholder:text-[#6272A4]
focus:outline-none focus:border-[#4AF626]/60
```

**Forbidden**

Classes: `font-sans`, `font-serif`, `bg-white`, `bg-gray-50`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-md`, `shadow-lg`

Patterns: `^font-(sans|serif)`, `^bg-(white|gray-50|gray-100|slate-50)`, `^rounded-(lg|xl|2xl|3xl|full)`, `^shadow-(md|lg|xl|2xl)`, `^bg-gradient-`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<div className="flex flex-wrap items-center gap-3 font-mono text-sm">
  <button className="px-4 py-1.5 bg-[#4AF626] text-[#0A0E12] font-bold rounded-sm hover:bg-[#3FD41F] active:translate-y-px transition-colors duration-150">
    ./deploy --prod
  </button>
  <button className="px-4 py-1.5 bg-transparent text-[#4AF626] border border-[#1F2937] rounded-sm hover:border-[#4AF626]/60 hover:bg-[#4AF626]/10 transition-colors duration-150">
    make build
  </button>
  <button className="px-4 py-1.5 bg-transparent text-[#FF79C6] border border-[#FF79C6]/40 rounded-sm hover:bg-[#FF79C6]/10 transition-colors duration-150">
    rm -rf ./cache
  </button>
</div>
```

**Card**
```html
<div className="bg-[#0D141B] border border-[#1F2937] rounded-sm font-mono text-sm overflow-hidden">
  <div className="flex items-center justify-between px-4 py-2 border-b border-[#1F2937]">
    <p className="text-[#4AF626]"><span className="text-[#8BE9FD]">visitor@stylekit</span><span className="text-[#6272A4]">:~$</span> whoami --verbose</p>
    <span className="text-xs text-[#4AF626] border border-[#4AF626]/40 rounded-sm px-1.5 py-0.5">[0] OK</span>
  </div>
  <div className="px-4 py-3 space-y-1">
    <p className="text-[#6272A4]"># identity loaded from ~/.profile</p>
    <p className="text-[#4AF626]">name: <span className="text-[#FFB86C]">&quot;Full-stack Developer&quot;</span></p>
    <p className="text-[#4AF626]">stack: <span className="text-[#8BE9FD]">[typescript, react, node]</span></p>
    <p className="text-[#4AF626]">uptime: <span className="text-[#FFB86C]">8 years</span></p>
  </div>
</div>
```


---


### 横滚画廊 (Horizontal Gallery)

**Slug**: `horizontal-gallery`

#### Description
A white-cube, curator-style portfolio layout. Borderless large images line up along a horizontal snap-scroll rail; whitespace acts as the gallery wall, numbered hairline captions echo museum labels, and viewing becomes a walk.

#### Design Philosophy
Horizontal Gallery imagines the page as a white-cube museum: viewing is not an infinite downward feed but a forward walk along an exhibition line, pausing in front of each work.

Core principles:
- Whitespace is the wall: gallery white #FCFCFA is not emptiness but the silence between works; spacing itself is a curatorial decision
- Horizontal is the route: overflow-x-auto plus scroll-snap turns scrolling into walking, each piece snapping to rest before the viewer
- The work is the protagonist: no borders, no shadows, no rounded corners; container decoration must never compete with the artwork
- Captions are curation: No. 01 numbering and hairline uppercase captions speak in the voice of a museum wall label

#### Do's (必须做)
1. Build the gallery strip with overflow-x-auto snap-x snap-mandatory, each work shrink-0 snap-start
2. Artwork images are always rounded-none with no border and no shadow, object-cover inside aspect-[4/5] or aspect-[3/2]
3. Give every work a No. 01 / Fig. 01 index and a hairline caption text-xs uppercase tracking-[0.2em] text-[#8A8A85] below the image
4. All dividers are hairlines: border-t border-[#E8E6E1], never thicker than 1px
5. Keep vast horizontal whitespace between works gap-16 md:gap-24, with wall margins px-6 md:px-20 at both ends
6. Place the section title as the first strip cell with sticky left-0 bg-[#FCFCFA] so it accompanies the scroll
7. Set titles in font-serif font-light tracking-wide, body in sans muted tones; hierarchy comes from size and letter-spacing, not weight
8. Hide the horizontal scrollbar (scrollbar-width: none plus ::-webkit-scrollbar display: none) and replace it with a hairline progress line and arrows

#### Don'ts (禁止做)
1. Never add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
2. Never place text on top of artwork; captions live only below the image
3. Never mix vertical masonry or multi-row grids inside the horizontal strip
4. Never use heavy borders (border-2 and up); every line stays a hairline
5. Never use flashy backgrounds: gradient walls, textured walls, or large color blocks are forbidden on the gallery wall
6. Never use saturated multicolor decoration; the only accent allowed is a restrained terracotta #A85A3A

#### AI Rules
```
You are a curator-minded frontend expert specializing in the Horizontal Gallery (white cube) layout. All generated code must strictly follow these constraints:

## Absolute Rules

- The core content area is a horizontal strip: overflow-x-auto snap-x snap-mandatory, items shrink-0 snap-start
- Artwork images: rounded-none, no border, no shadow, object-cover, aspect-[4/5] or aspect-[3/2]
- Every work carries an index (No. 01 / Fig. 01) in terracotta #A85A3A and a caption below the image: text-xs uppercase tracking-[0.2em] text-[#8A8A85]
- Background is gallery white #FCFCFA, text is ink #1A1A1A, all dividers are hairlines border-[#E8E6E1]
- Horizontal whitespace between works is generous: gap-16 md:gap-24, wall margins px-6 md:px-20
- Section titles use font-serif font-light tracking-wide; body text is sans
- Hide horizontal scrollbars (scrollbar-width: none; ::-webkit-scrollbar display: none) and show a hairline progress line or arrows instead
- A sticky title cell (sticky left-0 bg-[#FCFCFA]) may accompany the strip

## Forbidden

- Shadows, rounded corners, or borders on artwork images
- Text overlaid on artwork
- Vertical masonry or multi-row grids inside the strip
- Borders thicker than 1px anywhere
- Gradient, textured, or saturated multicolor backgrounds on the wall
- Any accent color other than restrained terracotta #A85A3A

## Layout Structure

Strip container:
- flex gap-16 md:gap-24 overflow-x-auto snap-x snap-mandatory
- hidden scrollbar, hairline progress underneath

Work cell:
- figure with w-72 to w-[28rem], shrink-0, snap-start
- image block aspect-[4/5] or aspect-[3/2] overflow-hidden
- figcaption: mt-5 pt-4 border-t border-[#E8E6E1], index then serif title then caption

## Responsive

- Mobile (< 768px): narrower cells (w-64), wall margins px-6, keep the strip horizontal
- Tablet (768px+): w-80 cells, px-12 margins
- Desktop (1024px+): mixed w-80 / w-[28rem] cells, px-20 margins, sticky title cell enabled
- Respect prefers-reduced-motion: disable smooth scrolling and scale transitions

## Self-Check

After generating code, verify:
1. The strip snaps horizontally and the scrollbar is hidden
2. No artwork image has a shadow, radius, or border
3. Every work shows an index and a hairline caption below the image
4. All lines on the page are 1px hairlines in #E8E6E1
5. The only accent color present is #A85A3A
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#E8E6E1]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-300`

**Typography**
- Heading: `font-serif font-light tracking-wide`
- Body: `font-sans font-light`

**Required Classes**

Button:
```
rounded-none
uppercase
tracking-[0.2em]
transition-colors duration-300
```

Card:
```
rounded-none
shadow-none
```

Input:
```
rounded-none
bg-transparent
border-b border-[#E8E6E1]
focus:border-[#1A1A1A]
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `border-2`

Patterns: `^rounded-(sm|md|lg|xl|2xl|3xl|full)$`, `^shadow-(sm|md|lg|xl|2xl)$`, `^border-[248]$`, `^bg-gradient-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-8 py-3 bg-[#1A1A1A] text-[#FCFCFA] rounded-none text-xs font-light uppercase tracking-[0.2em] hover:bg-[#2E2E2C] transition-colors duration-300">View Works</button>
```

**Card**
```html
<figure className="w-72 shrink-0 snap-start">
  <div className="aspect-[4/5] overflow-hidden bg-[#E8E6E1]">
    <img
      src="/artwork-01.jpg"
      alt="Untitled Study"
      className="w-full h-full object-cover rounded-none"
    />
  </div>
  <figcaption className="mt-5 pt-4 border-t border-[#E8E6E1]">
    <p className="text-[10px] uppercase tracking-[0.25em] text-[#A85A3A] mb-2">No. 01</p>
    <p className="font-serif font-light text-base text-[#1A1A1A]">Untitled Study</p>
    <p className="text-xs uppercase tracking-[0.2em] text-[#8A8A85] mt-1.5">Archival Pigment Print, 2026</p>
  </figcaption>
</figure>
```


---


### 论文排版风 (LaTeX Paper)

**Slug**: `latex-paper`

#### Description
The typographic language of LaTeX academic papers, brought to the web: Computer Modern feel, centered title and abstract, hierarchically numbered sections, theorem environments, numbered equations, booktabs tables, and hanging-indent references. Built for research homepages, lecture notes, and scholarly portfolios.

#### Design Philosophy
LaTeX Paper treats the typesetting system of academic papers as a visual language: everything is numbered, everything is citable. The sense of order itself is the visual grammar of scholarly credibility.

Core principles:
- Numbering is navigation: sections 1 / 1.1 / 1.2, equations (1) (2), Theorem 1, Figure 1, Table 1, references [1] — every element has a unique coordinate that readers can point to precisely
- Ritual is credibility: centered title, author line, date, and a narrow abstract block — this century-old opening ceremony lends content a peer-reviewed air
- Structure before decoration: no shadows, no rounded corners, no colorful buttons; the only emphasis tools are numbering, italics, rules of varying weight, and hyperref blue
- Ink black on paper white, blue for citations: #111111 carries the text, #FFFFFF is the page, #0B5394 marks only links and cross-references — wherever blue appears, it can be clicked
- Serif throughout, theorem environments instead of cards, booktabs tables with no vertical rules, hanging-indent references, and a page that reads like a printable PDF

#### Do's (必须做)
1. Use serif fonts throughout with font-serif; add tracking-tight on headings for a Computer Modern feel
2. Center the document head: title text-3xl md:text-4xl, author line text-sm, italic date, stacked vertically
3. Set the abstract as a narrow indented block max-w-xl mx-auto px-8 with a centered bold small heading
4. Number section headings hierarchically: 1 / 1.1 / 1.2, with a gap-3 between number and title
5. Build theorem environments with light fill bg-[#F5F5F0] or a left rule border-l-2 border-[#111111]: bold label + italic body
6. Display equations centered on their own line with an (n) tag on the right: flex justify-between or relative + absolute right-0
7. Use booktabs tables: heavy border-t-2 border-b-2 border-[#111111] rules plus a thin border-b under the header, never vertical rules
8. Color links and cross-references in hyperref blue text-[#0B5394], underline on hover
9. Set references with hanging indents: pl-8 -indent-8 or grid grid-cols-[2rem_1fr] with [n] labels on the left
10. Keep the text column at max-w-2xl or max-w-3xl with leading-relaxed line height

#### Don'ts (禁止做)
1. Never draw vertical rules or zebra striping in tables — booktabs allows horizontal rules only
2. Never use large colorful buttons or gradients — actions are solid ink, thin outlines, or hyperref-blue links
3. Never set body text in sans-serif — it breaks the paper feel; use monospace only for code
4. Never round corners — rounded-none everywhere, paper has no border radius
5. Never use shadows (shadow-*) — paper is flat; hierarchy comes from rules and whitespace
6. Never add decorative graphics, emoji, or illustrations — graphics may only appear as numbered, captioned figures

#### AI Rules
```
You are a LaTeX Paper design expert. Everything is numbered, everything is citable.

## Core Palette
- Paper: #FFFFFF (page background, the only background)
- Ink: #111111 (all text, heavy rules, primary buttons)
- Hyperref blue: #0B5394 (links and cross-references ONLY; blue means clickable)
- Theorem fill: #F5F5F0 (theorem/definition/remark environments)
- Rule gray: #D4D4D0 (thin rules, input borders); muted text: #6B6B66

## Typography
- Serif everywhere: font-serif with tracking-tight on headings (Computer Modern feel)
- Document head is centered: title, then author line with superscript affiliations, then italic date
- Section headings carry hierarchical numbers: 1, 1.1, 1.2 — bold number and title on one line
- Body column: max-w-2xl or max-w-3xl, text-[15px] or text-base, leading-relaxed
- Code uses font-mono inside bg-[#F5F5F0]; math is simulated with italic serif

## Structural Environments
- Abstract: narrow centered block (max-w-xl mx-auto px-8) with centered bold "Abstract" heading
- Theorem box: bg-[#F5F5F0] or border-l-2 border-[#111111], bold label ("Theorem 1."), italic body
- Display equation: own centered line in italic serif, with (n) number flushed right
- Table: booktabs only — border-t-2 and border-b-2 in #111111, thin border-b under header, NO vertical rules, NO zebra rows; caption ABOVE the table ("Table 1: ...")
- Figure: content + centered caption BELOW ("Figure 1: ..."), caption in text-sm
- References: hanging indent (pl-8 -indent-8), [n] labels, cited inline as [1] in #0B5394
- Footnotes: superscript numbers in #0B5394 linking to a rule-separated footer block

## Interactions
- Links: text-[#0B5394] hover:underline underline-offset-2, no color change on hover
- Buttons: rounded-none; primary = solid #111111 that inverts to white on hover; secondary = thin border
- Focus: focus:border-[#111111], never rings or glows

## Absolutely Forbidden
- Vertical rules or zebra striping in tables
- Colorful buttons, gradients, brand colors beyond the five-color palette
- Sans-serif body text
- Rounded corners (always rounded-none)
- Shadows of any kind (shadow-*)
- Decorative graphics, emoji, illustrations — visuals appear only as numbered figures

## Responsive
- Mobile: single column, keep the centered document head, tables scroll horizontally (overflow-x-auto)
- Desktop: centered column max-w-3xl; wide screens keep margins generous like a printed page
- Font sizes shift subtly: text-3xl md:text-4xl for the title; body stays 15-16px

## Self-Check
1. Does every section, equation, figure, and table carry a number?
2. Is blue used ONLY for links and cross-references?
3. Are all corners square and all surfaces flat (no shadow)?
4. Do tables have horizontal rules only?
5. Does the page read like a printable PDF?
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#D4D4D0]`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-200`

**Typography**
- Heading: `font-serif tracking-tight`
- Body: `font-serif`

**Required Classes**

Button:
```
font-serif
rounded-none
transition-colors duration-200
```

Card:
```
rounded-none
bg-[#F5F5F0]
border-l-2 border-[#111111]
```

Input:
```
font-serif
rounded-none
border border-[#D4D4D0]
focus:outline-none focus:border-[#111111]
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `bg-gradient-to-r`, `font-sans`

Patterns: `^rounded-(sm|md|lg|xl|2xl|3xl|full)`, `^shadow-(sm|md|lg|xl|2xl)`, `^bg-gradient-`, `^divide-x`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
{/* Primary: solid ink, like a bold imperative */}
<button className="px-6 py-2.5 bg-[#111111] text-[#FFFFFF] font-serif text-sm tracking-tight rounded-none border border-[#111111] hover:bg-[#FFFFFF] hover:text-[#111111] transition-colors duration-200">
  Download PDF
</button>

{/* Secondary: thin ruled outline */}
<button className="px-6 py-2.5 bg-transparent text-[#111111] font-serif text-sm tracking-tight rounded-none border border-[#111111] hover:bg-[#F5F5F0] transition-colors duration-200">
  View Source
</button>

{/* Citation link: hyperref blue, like \cite{} */}
<button className="font-serif text-sm text-[#0B5394] hover:underline underline-offset-2">
  [BibTeX]
</button>
```

**Card**
```html
<div className="bg-[#F5F5F0] border-l-2 border-[#111111] rounded-none px-6 py-5 max-w-2xl">
  <p className="font-serif text-[15px] leading-relaxed text-[#111111]">
    <span className="font-bold not-italic">Theorem 1.</span>{" "}
    <span className="italic">
      A layout in which every element carries a number can be referenced
      without ambiguity; order, once visible, reads as credibility.
    </span>
  </p>
  <p className="font-serif text-sm text-[#6B6B66] mt-3">
    See Section <span className="text-[#0B5394]">2.1</span> for the proof sketch.
  </p>
</div>
```


---


### 学术科普风 (Distill Style)

**Slug**: `distill-style`

#### Description
An academic explainer aesthetic modeled on Distill.pub: a narrow serif column carries the argument, sidenotes carry the asides, and figures break the measure to carry the evidence. Built for science blogs, researcher homepages, and scholarly portfolios.

#### Design Philosophy
Distill Style is "paper typography, translated to the web": three centuries of journal rigor rebuilt with web-native breathing room.

Core principles:
- Argument first: every visual decision serves legibility and credibility; decoration is noise
- The narrow measure is respect: body column locks at ~42rem (65-75 characters), the comfortable limit of one eye-sweep per line
- Three bandwidths of information: body text carries the argument, sidenotes carry asides and provenance, full-bleed figures carry the evidence
- Citations are links: the numbered superscript is the ancestor of the hyperlink; on the web they become one
- Color is semantic: ink gray states, academic blue points only to the clickable and the cited, chart orange highlights only data

#### Do's (必须做)
1. Body text uses font-serif in a narrow column max-w-[42rem] mx-auto with leading-[1.75]
2. Sidenotes float into the right margin on large screens (xl:absolute, text-xs text-[#6B7280]) and collapse inline as light-gray blocks bg-[#F3F4F6] on small screens
3. Numbered citations use superscript <sup>[1]</sup> in academic blue text-[#2A7AE2], resolved in a references list
4. Figures break the measure: max-w-4xl mx-auto centered, with figcaption in text-[13px] text-[#6B7280] starting with Fig. N:
5. All separation uses hairlines: border-t border-[#E5E7EB], never thicker than 1px
6. Academic blue #2A7AE2 only for links, citations, and key emphasis; data emphasis only in chart orange #E4572E
7. Byline block: author/affiliation/date/DOI as a hairline-divided meta grid with small uppercase tracked labels
8. Tables follow booktabs: border-t-2 border-b-2 border-[#1F2933] with a thin header rule, no vertical rules
9. Headings are font-serif font-semibold text-[#1F2933]; hierarchy comes from size and whitespace, not color

#### Don'ts (禁止做)
1. Never use gradients bg-gradient-* (papers have no gradients; evidence needs no filter)
2. Never use heavy shadows: shadow-sm at most, no shadow-lg/shadow-2xl or colored shadows
3. Never use large radii: rounded-md at most; prefer square corners for prose and figure containers
4. Never let body text run full width: the measure never exceeds 42rem; full bleed belongs to figures only
5. Never add colorful decoration or large color fields: color serves information, not mood
6. Never set body text in sans-serif: prose must be serif; sans is reserved for UI labels and metadata
7. Never add vertical rules or zebra striping to tables (the two booktabs rules are enough)

#### AI Rules
```
You are a Distill Style (academic explainer) design expert. This style translates journal-grade paper typography into web-native layouts, modeled on Distill.pub.

## Absolute Rules
- Background: pure white #FFFFFF; secondary surfaces only #F3F4F6
- Body text: font-serif, color #1F2933, column locked at max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 is reserved for links, numbered citations, and key emphasis only
- Chart orange #E4572E is reserved for data emphasis inside figures only
- Sidenotes: xl:absolute floating in the right margin as small gray sans text; inline light-gray blocks below xl
- Citations: superscript [1] in academic blue, resolved in a numbered references list at the page end
- Figures break the measure: max-w-4xl mx-auto, always followed by a hairline-topped figcaption starting with "Fig. N:"
- Byline block: authors / affiliations / date / DOI as a hairline-divided meta grid with uppercase tracked labels
- Tables: booktabs only - 2px top and bottom rules, 1px header rule, no vertical rules, no zebra striping
- Radius: rounded-md maximum; shadows: shadow-sm maximum

## Forbidden
- Gradients of any kind (bg-gradient-*)
- Heavy or colored shadows (shadow-lg, shadow-2xl)
- Radii beyond rounded-md
- Full-width body text (prose wider than 42rem)
- Sans-serif body copy (sans is only for UI labels and metadata)
- Decorative color fields, zebra tables, vertical table rules

## Layout & Spacing
- Section rhythm: py-12 md:py-16 between article blocks
- Prose column: max-w-[42rem]; figure column: max-w-4xl; page shell: max-w-5xl
- Hairlines (border-[#E5E7EB]) separate every metadata region

## Responsive
- Mobile: sidenotes collapse inline as bordered light-gray asides; figures go full-width with horizontal scroll for wide tables
- Desktop (xl+): sidenotes float into the right margin; the prose column stays centered

## Self-Check Verification
After generating code, verify:
1. Body text is serif, no wider than 42rem, with leading-[1.75]
2. Blue appears only on links/citations/emphasis; orange appears only on data
3. Every figure has a numbered figcaption; every citation number resolves in the references
4. No gradients, no shadows above shadow-sm, no radius above rounded-md
5. Tables have horizontal rules only
6. All interactive elements have visible hover and focus states
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#E5E7EB]`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-sm`
- Large: `shadow-sm`
- Hover: `hover:shadow-sm`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-colors duration-150`

**Typography**
- Heading: `font-serif font-semibold text-[#1F2933] tracking-tight`
- Body: `font-serif text-[#1F2933] leading-[1.75]`

**Required Classes**

Button:
```
rounded-md
text-sm font-medium
transition-colors duration-150
```

Card:
```
bg-white
border border-[#E5E7EB]
rounded-md
```

Input:
```
bg-white
border border-[#E5E7EB]
rounded-md
focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `bg-gradient-to-r`

Patterns: `^rounded-(?:lg|xl|2xl|3xl|full)$`, `^shadow-(?:md|lg|xl|2xl|inner)$`, `^bg-gradient`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-5 py-2.5 bg-[#1F2933] text-white text-sm font-medium rounded-md hover:bg-[#111827] transition-colors duration-150">Download PDF</button>
```

**Card**
```html
<div className="relative bg-white border border-[#E5E7EB] rounded-md p-6">
  <p className="text-[11px] uppercase tracking-[0.14em] text-[#6B7280] mb-2">Abstract</p>
  <h3 className="font-serif text-lg font-semibold text-[#1F2933] mb-2">Why Momentum Really Works</h3>
  <p className="font-serif text-sm leading-[1.75] text-[#1F2933]">We derive a closed-form view of momentum<sup className="text-[#2A7AE2] font-sans text-[10px]">[1]</sup> and visualize its damping behavior across the eigenspace of the loss surface.</p>
  <p className="mt-3 pt-3 border-t border-[#E5E7EB] text-xs text-[#6B7280] font-sans">Gabriel Goh - Distill, 2017 - DOI 10.23915/distill.00006</p>
  <p className="mt-2 text-xs leading-relaxed text-[#6B7280] font-sans border-l-2 border-[#2A7AE2]/40 bg-[#F3F4F6] px-3 py-2 rounded-sm"><span className="text-[#2A7AE2] font-medium">SN.</span> 边注：小屏内联折叠，大屏悬浮右缘。</p>
</div>
```


---


### 创意工作室风 (Creative Studio)

**Slug**: `studio-bold`

#### Description
A bold, confident portfolio style for design studios, agencies, and freelancers. Oversized typography, bold color blocking, rich hover states, client logo walls, and team grids — professional but never corporate, with personality built in.

#### Design Philosophy
Creative Studio is "the website designers make for themselves": all the expressive energy of an agency site, held together by editorial restraint.

Core principles:
- Boldness is attitude: oversized type, full-width color blocks, edge-to-edge imagery — no quiet neutral backgrounds, every viewport says "this is our taste"
- Navigation is hung: sticky nav with coral underline or block markers on hover, making navigation itself an interface expression
- Project cards are posters: every project card is a mini poster — the title takes 30% height, and on hover it slides up, scales, and shifts color, telling the visitor "clicking me leads somewhere good"
- Color blocks are sections: instead of card borders, use coral or warm-sand color blocks to partition functional areas — header is full black, projects are light sand, footer is darker — visual rhythm driven by background color
- Proof is trust: client logo walls, team avatar grids, testimonial pull quotes — social proof embedded in the browsing rhythm without interrupting flow

Design principles:
- Hierarchy comes from size and weight, not color: headings can go to text-7xl, subtitles stay text-xl font-normal — mass difference is hierarchy
- Hover states must be worth waiting for: transition-duration-300, scale-105, shadow-2xl, border color shift — four things happening at once makes visitors feel "this site is alive"
- Monochromatic color blocks are the layout skeleton: dark zones at #1A1A1A + #0D0D0D recede to background, light zones at #F5F5F0 breathe as midground, coral only where the eye needs to land
- Whitespace is a luxury: section spacing starts at py-24, giving each color block room to breathe before the next
- Sans-serif only: Inter or equivalent, weight range 400-700-900, no multi-weight mixing

#### Do's (必须做)
1. Dark sections use bg-[#1A1A1A] with text-white; light sections use bg-[#F5F5F0] with text-[#1A1A1A]
2. Oversized hero headings: text-6xl md:text-7xl lg:text-8xl font-bold leading-[0.95] tracking-tight text-white, with select words highlighted in text-[#FF6B6B]
3. Project cards use bg-[#F5F5F0] rounded-none overflow-hidden group, with group-hover:scale-[1.02] group-hover:shadow-2xl transition-all duration-300
4. CTA buttons use bg-[#FF6B6B] text-white font-bold px-8 py-4 text-lg hover:bg-[#E55A5A] hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300
5. Client logo rows: flex flex-wrap justify-center gap-12 py-12 opacity-60 grayscale hover:grayscale-0 transition-all duration-300
6. Team avatar grids: flex -space-x-3, with rounded-full border-2 border-white shadow-md on each avatar
7. Section transitions use color blocks: dark background starts, light background takes over, dark background closes — no borders between sections
8. Fixed navigation: fixed top-0 w-full z-50 bg-[#1A1A1A]/95 backdrop-blur-sm border-b border-white/10, with hover items in text-[#FF6B6B]
9. Testimonial blocks: max-w-4xl mx-auto text-center italic text-2xl md:text-3xl leading-relaxed text-[#1A1A1A] px-12 py-16

#### Don'ts (禁止做)
1. Never use small or standard sizing for hero headings (below text-5xl): a creative studio hero must carry visual impact
2. Never use rounded-lg or larger radii (except avatars): project cards should be clean and square; rounding softens confidence
3. Never use serif fonts: all text must be sans-serif; body uses font-light or font-normal, headings use font-bold or font-black
4. Never rely on thin borders for section separation: sections transition via bg color blocks, not borders — the color switch is the separator
5. Never use subtle hover states: hover must shift in scale, shadow, and color simultaneously; fading opacity is insufficient
6. Never use pure white bg-white: dark zones use #1A1A1A, light zones use #F5F5F0; white only appears on text

#### AI Rules
```
You are a Creative Studio design expert. This is a bold, confident portfolio style for design studios, agencies, and freelancers — inspired by Pentagram, IDEO, and top-tier agency sites.

## Absolute Rules
- Background: dark #1A1A1A for hero and footer; warm sand #F5F5F0 for content sections; deep #0D0D0D for footer bottom
- Body text: font-sans, font-light or font-normal, color inherits from section bg
- Headings: font-bold or font-black, sizes start at text-5xl and go up
- Coral #FF6B6B: the sole accent color — for headline highlights, CTAs, hover indicators, active nav items
- All sections are color blocks: switch bg color instead of using borders for separation
- Project cards: bg-[#F5F5F0] rounded-none, hover: scale-[1.02] + shadow-2xl + title shifts to coral
- CTA buttons: bg-[#FF6B6B] text-white font-bold, hover: bg-[#E55A5A] + shadow-xl + -translate-y-0.5
- Navigation: fixed top-0 w-full z-50 bg-[#1A1A1A]/95 backdrop-blur-sm, hover items turn coral
- Radius: rounded-none for cards and buttons; rounded-full only for avatars
- Shadows: cards use no shadow default, shadow-2xl on hover; buttons use shadow-xl on hover

## Forbidden
- Serif fonts of any kind (font-serif)
- Pure white backgrounds (bg-white) — white is text-only
- Subtle or single-axis hover states — hover must shift scale, shadow, and color simultaneously
- Thin borders for section separation — sections transition via bg color blocks
- Rounded-lg or larger on containers (cards, buttons, sections)
- Undersized hero headings (anything below text-5xl)
- Quiet/default shadows (shadow-sm, shadow-md) on hoverable elements

## Layout & Spacing
- Hero: min-h-screen, large heading, one-line description, dual CTAs
- Section rhythm: py-20 md:py-28 between color-block sections
- Project grid: 2-3 column grid with gap-8 md:gap-12
- Client logos: flex wrap centered, grayscale with hover:grayscale-0
- Team avatars: overlapping flex -space-x-3 with white borders
- Testimonials: centered italic block with generous padding

## Color Block Patterns
- Hero / Nav / Footer: bg-[#1A1A1A] or bg-[#0D0D0D], white text
- Work / Process / Team sections: bg-[#F5F5F0], dark text
- CTA band: could be either — use coral button to anchor the band

## Responsive
- Mobile: single-column project grid, nav collapses to hamburger with coral icon
- Tablet: 2-column grid, nav links visible
- Desktop: 3-column grid, full nav with CTA button

## Self-Check Verification
After generating code, verify:
1. No bg-white anywhere on structural elements
2. Every hoverable card has scale + shadow + color transitions
3. Coral (#FF6B6B) is the only accent color in use
4. No rounded corners on cards, buttons, or sections
5. Section transitions go dark → light → dark (or a subsection thereof)
6. All interactive elements have visible hover and focus states
7. Hero heading is at least text-5xl
```


#### Design Tokens

**Border**
- Width: `border-2`
- Color: `border-white/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-2xl`
- Hover: `hover:shadow-2xl`

**Interaction**
- Hover Translate: `hover:-translate-y-0.5`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-bold tracking-tight text-[#1A1A1A]`
- Body: `font-sans font-light leading-relaxed`

**Required Classes**

Button:
```
font-bold
rounded-none
transition-all duration-300
```

Card:
```
bg-[#F5F5F0]
rounded-none
overflow-hidden
group
```

Input:
```
bg-[#333333]
border-0 border-b-2 border-white/20
text-white
focus:outline-none focus:border-[#FF6B6B] focus:ring-0
```

**Forbidden**

Classes: `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `bg-white`, `font-serif`, `shadow-sm`, `shadow-md`, `shadow-lg`

Patterns: `^rounded-(?:lg|xl|2xl|3xl)$`, `^shadow-(?:sm|md|lg|xl|inner)$`, `^font-serif$`, `^bg-gradient`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `nav`


#### Component Examples

**Button**
```html
<button className="bg-[#FF6B6B] text-white font-bold px-8 py-4 text-lg hover:bg-[#E55A5A] hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 rounded-none">Start a Project</button>
```

**Card**
```html
<div className="group bg-[#F5F5F0] overflow-hidden">
  <div className="relative">
    <div className="aspect-[16/10] bg-gradient-to-br from-[#333333] to-[#1A1A1A] group-hover:scale-[1.02] transition-all duration-300"></div>
    <div className="absolute top-4 left-4 flex gap-2">
      <span className="text-[11px] uppercase tracking-[0.12em] bg-white/90 text-[#1A1A1A] px-3 py-1 font-medium">Branding</span>
      <span className="text-[11px] uppercase tracking-[0.12em] bg-white/90 text-[#1A1A1A] px-3 py-1 font-medium">2024</span>
    </div>
  </div>
  <div className="p-8">
    <h3 className="text-2xl font-bold text-[#1A1A1A] group-hover:text-[#FF6B6B] transition-colors duration-300 mb-3">Project Title</h3>
    <p className="text-base text-[#333333] leading-relaxed font-light">A bold rebrand for a forward-thinking design studio. Strategy, identity, and digital execution.</p>
    <div className="flex items-center gap-2 mt-6">
      <span className="text-sm font-medium text-[#FF6B6B]">View Case Study</span>
      <span className="text-[#FF6B6B] group-hover:translate-x-1 transition-transform duration-300">&rarr;</span>
    </div>
  </div>
</div>
```


---


### 暗色画廊风 (Dark Gallery)

**Slug**: `gallery-dark`

#### Description
A dark photography gallery portfolio: near-black canvases let full-bleed images command absolute attention; warm amber accents highlight metadata and captions while ultra-light typography retreats into the background. For photographers, filmmakers, and visual artists whose work speaks louder than chrome.

#### Design Philosophy
Dark Gallery is "subtraction as curation": strip away everything that competes with the work, leaving only the frame that holds the viewing experience.

Core principles:
- The dark is the frame: #0A0A0A is not a "dark mode" background — it is the dimmed gallery room where each photograph emerges from shadow, spotlit by its own light
- Full-bleed is respect: images stretch to the edge without padding, shadow, or border — the image becomes its own boundary, detail has nowhere to hide
- Amber is presence: #C4956A warm amber is reserved for dates, tags, captions, and wayfinding — like the tiny reading light on a gallery wall label, it illuminates only what matters
- Restraint is trust: ultra-light font weights, hairline separators, generous whitespace, wide tracking — the more the design retreats, the deeper the viewing goes
- Sans-serif is now: body text is always sans-serif (Inter/font-sans), rejecting decorative typography entirely — as quiet and precise as a gallery brochure

Design principles:
- Color is atmosphere: #0A0A0A creates the immersive dark field; #1A1A1A layers for cards and containers; #2A2A2A defines borders and dividers — hierarchy is built entirely through gray-scale depth, not hue
- Typography is breathing: oversized headlines in ultra-light weight deliver visual impact; metadata in tiny caps with wide tracking provides context — two rhythms in dialogue
- The image is the headline: the traditional card layout with "title above, text below" dissolves — the image becomes the title. Captions only supplement: time, place, medium, dimensions
- Grid is rhythm: equal-width columns arrange thumbnails at a breathable distance; hover brings only a subtle brightness shift — letting the viewer choose their own focus
- Transition is immersion: page changes and lightbox opens should be smooth and unobtrusive — at least 300ms ease-out, like a film fade

This is Dark Gallery: not a "dark mode minimal" but a "gallery experience digitized" — translating the ceremony of the exhibition space, the immersion of the dark room, and the restraint of the wall label into pixels.

#### Do's (必须做)
1. Full-bleed images: use overflow-hidden on the container, object-cover w-full h-full on the image, padding-0 on the container
2. Background uses bg-[#0A0A0A]; elevated surfaces use bg-[#1A1A1A]; dividers and borders use border-[#2A2A2A]
3. Metadata (dates, tags, locations, wall labels) in text-[#C4956A] text-[10px] uppercase tracking-[0.15em] font-light
4. Body text uses font-sans font-light text-white; headlines use text-4xl md:text-6xl lg:text-7xl font-light tracking-tight
5. Cards use border border-[#2A2A2A] rounded-sm with no shadows or elevation
6. Thumbnail grids use grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6 with hover:opacity-90 for a subtle brightness shift
7. Navigation uses px-6 md:px-8 py-4 md:py-5 border-b border-[#2A2A2A] with links in text-[11px] uppercase tracking-[0.15em] font-light
8. Inputs use bg-[#0A0A0A] border-[#2A2A2A] focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30 rounded-sm

#### Don'ts (禁止做)
1. Never use colored shadows (shadow-lg shadow-2xl) or gradient backgrounds (bg-gradient-*) — they break the purity of the dark field
2. Never use large border radii: rounded-sm at most; image containers must be rounded-none (square corners)
3. Never use light backgrounds (bg-white, bg-gray-50, bg-gray-100) — they puncture the immersive dark atmosphere
4. Never use colored or bright dividers: all separators use border-[#2A2A2A] hairline only
5. Never use serif fonts (font-serif) or heavy font weights (font-bold, font-semibold) — keep it contemporary sans-serif and lightweight
6. Never add padding or border around images — full-bleed is mandatory

#### AI Rules
```
You are a Dark Gallery design expert. This style digitizes the high-end physical gallery experience: immersive dark field, full-bleed image priority, warm amber information layer, ultra-light minimal typography.

## Absolute Rules
- Background: primary bg-[#0A0A0A]; secondary bg-[#1A1A1A]; interactive bg-[#2A2A2A] / border-[#2A2A2A]
- Body: font-sans font-light, text-white
- Headings: font-light tracking-tight text-white in oversized weights (text-4xl through text-7xl)
- Warm amber #C4956A only for dates, tags, captions, wall labels — never for body paragraphs or main headings
- Images: object-cover w-full h-full full-bleed; containers: overflow-hidden padding-0 border-0
- Hierarchy through gray-scale stacking (#0A0A0A → #1A1A1A → #2A2A2A) and whitespace, never through hue
- All dividers: border-[#2A2A2A] hairline (1px)
- Radii: cards rounded-sm at most (2px); image containers rounded-none
- Tracking: headings tracking-tight, metadata tracking-[0.15em], navigation tracking-[0.2em]
- Transitions: transition-all duration-300 ease-out

## Forbidden
- Gradients bg-gradient-*
- Shadows of any kind (invisible on dark surfaces)
- Radii beyond rounded-sm; image containers must be square
- Light backgrounds (bg-white, bg-gray-50)
- Serif fonts (font-serif) or heavy weights (font-bold, font-semibold)
- Padding or border around images
- Colored or bright dividers

## Layout & Spacing
- Page shell: bg-[#0A0A0A]
- Thumbnail grid: grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6
- Card padding: p-4 (or p-0 for full-bleed image cards)
- Section rhythm: py-16 md:py-24
- Container padding: px-6 md:px-8 lg:px-12

## Self-Check
1. Background is not white or light gray — must be #0A0A0A series
2. All images are full-bleed (no padding, no border)
3. Warm amber only on metadata, not on body or headings
4. Font is font-sans font-light; no font-serif or font-bold
5. No gradients, no shadows, no large radii
6. Divider color is #2A2A2A, not light gray or colored
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#2A2A2A]`
- Radius: `rounded-sm`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-none`
- Hover: `shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300`

**Typography**
- Heading: `font-sans font-light tracking-tight text-white`
- Body: `font-sans font-light text-white leading-relaxed`

**Required Classes**

Button:
```
border border-[#2A2A2A]
rounded-sm
font-light
tracking-wider
transition-all duration-300
```

Card:
```
bg-[#0A0A0A]
border border-[#2A2A2A]
rounded-sm
```

Input:
```
bg-[#0A0A0A]
border border-[#2A2A2A]
rounded-sm
font-light
text-white
focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30
```

**Forbidden**

Classes: `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`

Patterns: `^rounded-(?:md|lg|xl|2xl|3xl|full)$`, `^shadow-(?:sm|md|lg|xl|2xl|inner)$`, `^bg-gradient`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-5 py-2.5 bg-[#1A1A1A] text-white text-sm font-light tracking-wider border border-[#2A2A2A] rounded-sm hover:border-[#C4956A] hover:bg-[#2A2A2A] transition-all duration-300">Exhibition Info</button>
```

**Card**
```html
<div className="bg-[#0A0A0A] border border-[#2A2A2A] rounded-sm overflow-hidden">
  <div className="aspect-[4/3] bg-[#1A1A1A] flex items-center justify-center text-[#3A3A3A] text-xs font-light tracking-wider">[ Full-Bleed Image ]</div>
  <div className="p-4">
    <span className="text-[#C4956A] text-[10px] uppercase tracking-[0.15em] font-light">Tokyo, 2026</span>
    <h3 className="text-white text-sm font-light tracking-wide mt-1">Between Shadows</h3>
    <p className="text-[#4A4A4A] text-xs font-light mt-1">Archival pigment print, 80 x 120 cm</p>
  </div>
</div>
```


---


### 暖感有机风 (Warm Organic)

**Slug**: `warm-organic`

#### Description
A warm, naturalist portfolio style for architects, interior designers, product designers, ceramic artists, and landscape architects. Think warm-toned minimalism: terracotta and clay colors, natural textures, soft shadows, organic curves, and a palpable sense of craft. The design itself feels handmade — like it was printed on textured paper.

#### Design Philosophy
Warm Organic is "the breath of the earth palette": weaving the colors of terracotta, clay, sand, and olive branch into a digital interface until the page feels as warm and tactile as a hand-thrown vessel.

Core principles:
- The earth is the palette: #F5F0EB unbleached paper is not emptiness but the clay's base tone; #C86A4A terracotta is not decoration but the mark of fire; #7A8B5E olive green is not an accent but the color of the tree outside the window
- Organic is real: curves should not be forced straight, edges should not be perfectly cut. Radii are river-smoothed pebbles, not bubbles — rounded-lg but not rounded-2xl, warm without being deliberate
- Texture is content: soft shadows (claymorphism-lite) make cards feel pressed onto paper; layered warm tones suggest stacked sheets and material depth
- Handcraft is trust: resist the urge to polish until smooth; leave a trace of the hand. The designer does not hide their marks, just as a potter does not erase their fingerprints

Design principles:
- Warm contrast: the gap between deep brown #2D2A24 and warm white #F5F0EB does not chase extreme contrast but the soft tension of sunlight through a linen curtain
- Restrained radii: rounded-lg only, but enough curvature to dissolve every sharp edge, like pebbles smoothed by water
- Shadows carry warmth: box-shadows use warm brown #2D2A24 with transparency, not cold gray #000, so shadows fall on earth not concrete
- Texture as ground: flat color blocks retain a hint of grain (via background pattern or noise) so the digital surface is never too cold
- Green is growth: olive #7A8B5E appears as a natural metaphor in botanical illustrations, ecological data, or secondary emphasis, sitting beside terracotta like a potted plant next to a clay vase

#### Do's (必须做)
1. Set the page background to bg-[#F5F0EB] warm off-white; cards and panels use bg-[#E8DED1] or bg-white/60 translucent white
2. Use unified rounded-lg radii everywhere — curves that look natural like river-smoothed pebbles, not artificial bubbles
3. Cards cast warm shadows: shadow-[0_4px_20px_-4px_rgba(45,42,36,0.12)] with warm brown undertone, never cold gray
4. Body text uses font-sans text-[#2D2A24] leading-relaxed; headings use font-serif font-medium or font-sans font-light tracking-wide
5. Accent colors: text-[#C86A4A] terracotta for links and CTAs, bg-[#C86A4A] for buttons; olive green text-[#7A8B5E] for secondary tags and natural elements
6. Dividers use warm hairlines: border-t border-[#D4BFA5] opacity-60, like the natural shadow between stacked sheets of paper
7. Inputs use bg-[#E8DED1]/40 warm gray background, border-[#D4BFA5] edges, switching to terracotta border-[#C86A4A] with ring-1 ring-[#C86A4A]/20 on focus
8. Decorative dividers use circular or organic shapes: w-12 h-12 rounded-full bg-[#D4BFA5]/30 with a hairline olive dot

#### Don'ts (禁止做)
1. Never use cool grays like #999 or #6B7280 for text or background neutrals — every neutral must lean warm
2. Never use sharp rounded-none or tiny rounded-sm — the organic aesthetic needs soft, rounded edges
3. Never use cool shadows (shadow with #000 or cold gray); shadows must carry a warm brown undertone
4. Never use saturated neon colors or cool blues — terracotta #C86A4A and olive #7A8B5E are the only accent colors
5. Never use glassmorphism (backdrop-blur + translucent white) — organic texture comes from warm color layers and soft shadows, not frosted glass
6. Never use pure black #000000 for body text; deep brown #2D2A24 is the maximum darkness for text

#### AI Rules
```
You are a Warm Organic design expert building earthy, handcrafted portfolio interfaces. Every piece of generated code must obey these constraints:

## Absolute Rules

- Page background is bg-[#F5F0EB] (unbleached paper); cards and panels use bg-[#E8DED1] (sand) or translucent bg-white/60
- All text uses text-[#2D2A24] (deep warm brown) — pure black #000000 is never allowed
- Terracotta is the primary accent: bg-[#C86A4A] / text-[#C86A4A] on buttons, links, and CTAs
- Olive green is the secondary accent: bg-[#7A8B5E] / text-[#7A8B5E] on tags, natural elements, and secondary emphasis
- Clay carries the neutrals: bg-[#D4BFA5] for subtle surfaces, border-[#D4BFA5] for hairline dividers
- Corner radius is rounded-lg as the standard — never larger than rounded-lg, never smaller than rounded-md
- Shadows are warm brown rgba(45,42,36,0.12), never cold gray; the card shadow is shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]
- Headings use font-serif font-medium or font-sans font-light tracking-wide
- Body copy uses font-sans text-[#2D2A24] leading-relaxed
- Dividers use border-[#D4BFA5] at opacity-60 so they stay warm-toned, never cool gray
- Decorative accents are small circular dots (w-2 h-2 rounded-full) tinted terracotta or olive

## Forbidden

- Cool grays such as #999 or #6B7280 — every neutral must lean warm
- Sharp rounded-none corners or tiny rounded-sm radii
- Cold shadows built on #000 or cool gray
- Saturated neons or cool blues (no cyan, no electric blue)
- Glassmorphism (backdrop-blur plus translucent white)
- Pure black #000000 on any text
- Gradients drifting toward cool tones

## Layout & Spacing

- Sections: py-16 md:py-24
- Containers: max-w-5xl, or max-w-4xl for prose
- Card grids: gap-6 md:gap-8
- Card padding: p-5 md:p-6
- Centered prose column: max-w-3xl mx-auto

## Responsive

- Mobile: single column with compact card padding
- Tablet (768px+): two-column project card grids
- Desktop (1024px+): wider cards, richer shadows, more generous whitespace

## Self-Check

Verify after generating:
1. Every color belongs to the warm organic palette — no cool grays, no neons
2. Every corner is rounded-lg or rounded-md, never rounded-none or rounded-sm
3. Every shadow uses warm brown rgba(45,42,36,*), never #000 or cool gray
4. Body text is #2D2A24, not #000000
5. Terracotta #C86A4A and olive #7A8B5E are the only accents present
6. Every neutral leans warm (paper, sand, clay tones)
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#D4BFA5]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-[0_2px_8px_-2px_rgba(45,42,36,0.08)]`
- Medium: `shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]`
- Large: `shadow-[0_8px_30px_-6px_rgba(45,42,36,0.12)]`
- Hover: `hover:shadow-[0_8px_30px_-6px_rgba(45,42,36,0.15)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-serif font-medium text-[#2D2A24] tracking-tight`
- Body: `font-sans text-[#2D2A24] leading-relaxed`

**Required Classes**

Button:
```
rounded-lg
text-sm font-medium
transition-all duration-200
```

Card:
```
bg-[#E8DED1]
rounded-lg
shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]
```

Input:
```
bg-[#E8DED1]/40
border border-[#D4BFA5]
rounded-lg
focus:outline-none focus:border-[#C86A4A] focus:ring-1 focus:ring-[#C86A4A]/20
```

**Forbidden**

Classes: `rounded-none`, `rounded-sm`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `shadow-black`, `bg-gray-50`, `bg-gray-100`, `bg-gray-200`

Patterns: `^rounded-(?:none|sm|xl|2xl|3xl|full)$`, `^shadow-(?:md|lg|xl|2xl|inner)$`, `^bg-gray-`, `^text-gray-`, `^border-gray-`, `^backdrop-blur`


#### Component Recipes

Available recipes: `button`, `card`, `input`, `divider`


#### Component Examples

**Button**
```html
<button className="px-6 py-2.5 bg-[#C86A4A] text-white text-sm font-medium rounded-lg hover:bg-[#B55A3A] active:bg-[#A04A2A] shadow-[0_2px_12px_-3px_rgba(200,106,74,0.3)] transition-all duration-200">Get in Touch</button>
```

**Card**
```html
<div className="bg-[#E8DED1] rounded-lg p-6 shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]">
  <p className="text-[10px] uppercase tracking-[0.15em] text-[#7A8B5E] mb-2">Project</p>
  <h3 className="font-serif text-lg font-medium text-[#2D2A24] mb-2">Clay House</h3>
  <p className="text-sm leading-relaxed text-[#2D2A24]/80">A residential project in the Catalonian countryside, built with rammed earth and local terracotta tiles.</p>
  <div className="mt-4 pt-4 border-t border-[#D4BFA5] opacity-60 flex items-center gap-3">
    <span className="inline-block w-2 h-2 rounded-full bg-[#7A8B5E]/50"></span>
    <span className="text-xs text-[#7A8B5E]">Architecture · 2025</span>
  </div>
</div>
```


---


### 发布会主题 (Launch Keynote)

**Slug**: `launch-keynote`

#### Description
An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas plays a pre-rendered product animation as you scroll, one product and one message per viewport, like a trillion-dollar product page.

#### Design Philosophy
The launch-keynote creed: the page is a product unveiling, not a flyer. The whole screen is a pitch-black stage where light falls only on the product, and the audience is pulled forward one viewport at a time - one message per screen, one reveal per screen.

Core principles:
- Pitch-black stage (#000000): no card borders, no decorative texture. Black is an infinitely deep backdrop and the product lights itself. Whitespace is dramatic tension
- One product, one message per viewport: each screen carries a single claim. Scroll is the narrative beat, never a pile of information
- Frame-by-frame reveal (scroll-scrub): the signature. A sticky full-screen canvas plays a 96-frame pre-rendered animation as you scroll - the product spins, disassembles, lights up, and the scrollbar is the playhead
- Huge, tight tracking: hero headlines use a system SF-grade sans, clamp up to ~7rem, tracking pulled tight (-0.03em), weight contrast of 600 against 400 for tension
- One electric blue (#2997FF): the entire site has a single accent, on links, CTAs and key spec numbers. Everything else is black, near-white (#F5F5F7) and mid gray (#86868B)
- Spec grids: technical numbers land in a calm, restrained, monospaced-aligned grid of large figures that reads as credible

Design principles:
- Performance line: the frame sequence uses webp frames + IntersectionObserver lazy-loading, preloading 96 Image objects only when the section nears view; a poster paints first to prevent a blank frame; rAF throttling reads scroll position once per frame, never layout-thrashing
- No CLS: every image and the canvas carry an explicit aspect-ratio; canvas is devicePixelRatio-aware but capped at 2x to avoid a memory blowup
- Fallback: under prefers-reduced-motion, skip the scroll wiring and statically render the final frame with all callouts visible
- Accessibility: give the decorative canvas aria-hidden; critical information always lives in the text layer, never baked into the frames

#### Do's (必须做)
1. Pitch-black #000000 stage, no borders or texture, the product self-lights, whitespace is tension
2. One product and one message per viewport; scroll is a narrative beat, not stacked info
3. Frame-by-frame reveal: a sticky full-screen canvas plays a webp frame sequence on scroll, scrollbar as playhead
4. Lazy-load the frame sequence only in view (IntersectionObserver); paint the poster first to avoid a blank frame
5. Huge, tight hero type: a system SF-grade sans, clamp up to ~7rem, tracking -0.03em
6. One electric-blue #2997FF accent for links/CTAs/key numbers; everything else black, near-white #F5F5F7, mid gray #86868B
7. Present specs as a calm grid of large numbers; explicit aspect-ratio to prevent CLS
8. Under prefers-reduced-motion, statically render the final frame with all callouts visible

#### Don'ts (禁止做)
1. Never use rainbow gradients or a second accent (beyond the one electric blue it is all black/white/gray)
2. Never read offsetTop / getBoundingClientRect per frame inside a scroll handler (layout thrash)
3. Never preload all 96 frames on page load (IO lazy-load or it is a data disaster)
4. Never bake critical information into the frame images (frames may not load; reduced-motion shows one frame)
5. Never pile on card borders and rounded decoration that break the infinite depth of the black stage
6. Never ignore prefers-reduced-motion or a devicePixelRatio cap

#### AI Rules
```
# Launch Keynote Design System

You are an expert frontend developer specializing in Apple-keynote product-reveal interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Launch Keynote
- **Essence**: The page is a product unveiling; a pitch-black stage, a scroll-scrubbed frame sequence, one product and one message per viewport
- **Mood**: Premium, cinematic, restrained, trillion-dollar product page
- **Inspiration**: apple.com product pages, keynote reveals, flagship hardware launches

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rainbow gradients or a second accent color | Beyond one electric blue it is all black/white/gray |
| Reading offsetTop / getBoundingClientRect per frame in a scroll handler | Layout thrash |
| Preloading all frames on page load | Data disaster; lazy-load via IntersectionObserver |
| Baking critical info into the frame images | Frames may not load; reduced-motion shows one frame |
| Piling on card borders and rounded decoration | Breaks the infinite depth of the black stage |
| Ignoring prefers-reduced-motion or a devicePixelRatio cap | Accessibility + memory blowup |

## Required

### Pitch-black stage + one electric blue
- Background is always #000000, raised surface #1D1D1F, text near-white #F5F5F7, secondary mid-gray #86868B
- The whole site has one accent #2997FF (pressed #0071E3): links, CTAs, key spec numbers
- No decorative texture; whitespace is dramatic tension; one product and one message per viewport

### Signature: scroll-scrubbed frame sequence
Structure = a section ~350vh tall containing a sticky top-0 h-screen canvas:
```html
<section class="relative h-[350vh]">
  <div class="sticky top-0 h-screen flex items-center justify-center">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
```

Lazy-load (preload the 96 webp frames only in view):
```js
const io = new IntersectionObserver(([e]) => {
  if (!e.isIntersecting) return; io.disconnect();
  for (let i = 0; i < 96; i++) {
    const img = new Image();
    img.src = "/frames/frame-" + String(i).padStart(4, "0") + ".webp";
    frames[i] = img;
  }
}, { rootMargin: "50% 0px" });
io.observe(sectionEl);
```

rAF scrub (read scroll position once per frame):
```js
let raf = 0;
function draw() {
  raf = 0;
  const rect = sectionEl.getBoundingClientRect();
  const total = rect.height - innerHeight;
  const p = Math.min(1, Math.max(0, -rect.top / total));
  const idx = Math.min(95, Math.floor(p * 95));
  const img = frames[idx];
  if (img && img.complete) paint(canvas, img); // keep last frame if not loaded
}
addEventListener("scroll", () => { if (!raf) raf = requestAnimationFrame(draw); }, { passive: true });
```

Canvas sizing (devicePixelRatio-aware, capped at 2):
```js
const dpr = Math.min(2, devicePixelRatio || 1);
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// object-fit: contain by hand: compute a uniform scale, letterbox with black
```

Frame count/size: a webp sequence (e.g. 1280x720), around 96 frames; always pair a poster.webp painted first to avoid a blank frame.

### Callout milestones
3-4 text blocks fade in + translateY at specific progress (e.g. p>0.2, p>0.5, p>0.8), animating opacity/transform only.

### Fallbacks (critical)
- prefers-reduced-motion: skip the scroll wiring, statically render the final frame frame-0095 with all callouts visible
- Frame not loaded: keep the last drawn frame (a drawn cache), never clear to a white flash

### Typography
System SF stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...; hero clamps up to ~7rem with -0.03em tracking; weight contrast 600/400; specs in a grid of large numbers.

## Self-Verification Checklist

- [ ] Background is pitch-black with one electric blue and no second accent
- [ ] Scrub = sticky canvas + rAF, reading scroll once per frame
- [ ] 96 frames lazy-loaded via IO, poster painted first, last frame kept if not loaded
- [ ] devicePixelRatio capped at 2, explicit aspect-ratio to prevent CLS
- [ ] prefers-reduced-motion statically renders the final frame with all callouts visible
- [ ] Critical information is in the text layer, not the frames
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_12px_rgba(0,0,0,0.6)]`
- Medium: `shadow-[0_12px_40px_rgba(0,0,0,0.7)]`
- Large: `shadow-[0_30px_80px_rgba(0,0,0,0.8)]`
- Hover: `hover:shadow-[0_18px_50px_rgba(41,151,255,0.25)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-semibold text-[#F5F5F7] tracking-tight`
- Body: `text-[#86868B] leading-relaxed`

**Required Classes**

Button:
```
rounded-full
transition-all duration-300
active:scale-[0.98]
```

Card:
```
bg-[#1D1D1F]
rounded-2xl
```

Input:
```
bg-[#1D1D1F]
border border-white/10
rounded-xl
text-[#F5F5F7] placeholder-[#86868B]
focus:outline-none focus:border-[#2997FF]
transition-colors duration-300
```

**Forbidden**

Classes: `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `bg-white`, `duration-100`

Patterns: `^bg-gradient-to-r$`, `^from-(indigo|purple|pink|fuchsia|emerald|amber)-`, `^text-(red|green|amber|purple)-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center gap-1.5
  px-6 py-3 rounded-full
  bg-[#2997FF] text-white font-medium tracking-tight
  hover:bg-[#0071E3] active:scale-[0.98]
  transition-all duration-300">
  Buy
</button>

<a href="#learn" className="inline-flex items-center gap-1
  text-[#2997FF] font-medium tracking-tight
  hover:underline underline-offset-4">
  Learn more
  <span aria-hidden>&rsaquo;</span>
</a>
```

**Card**
```html
<article className="rounded-3xl bg-[#1D1D1F] p-8">
  <p className="text-xs uppercase tracking-[0.2em] text-[#2997FF] mb-3">Chip</p>
  <h3 className="text-white text-2xl font-semibold tracking-tight mb-2">
    A17 performance
  </h3>
  <p className="text-[#86868B] leading-relaxed">
    The fastest ever, and it is only getting started.
  </p>
</article>
```


---


### 奢华画册 (Luxe Lookbook)

**Slug**: `luxe-lookbook`

#### Description
The couture aesthetic of a fashion maison's digital flagship: a porcelain ground, ink-noir type, one muted gold; oversized high-contrast Didone serif display, a full-bleed silk-motion film hero, and a lookbook grid with hover image reveals. Absence is the luxury, restraint is the polish, numerals become art -- a house that charges four thousand euros for a coat.

#### Design Philosophy
The luxe-lookbook creed: luxury is subtraction, not addition. A true maison never shouts -- it speaks through negative space, through restraint, through letting a single garment own the whole screen. The digital flagship is a lookbook that moves: the image is the subject, the words are a whisper, the gold lands in exactly one place.

Core principles:
- Absence is the luxury: vast negative space is not waste, it is confidence. Only a house that dares let a headline own half the screen, and a coat photograph float in emptiness, reads as one that charges four thousand euros
- The lookbook is narrative: the grid is not a product rack, it is a season's story. Portrait plates unfold in sequence, revealing slowly on hover, like turning the pages of a printed lookbook
- Motion like silk, not fireworks: a looping silk-motion video breathes life into a static page, but the motion must be slow and seamless -- satin falling, never an effect exploding
- One muted gold: the only accent across the whole site is #9A7B4F muted gold -- on the kicker, the hairline focus, a single CTA. One more use and it turns cheap
- Numerals as art: the oversized high-contrast Didone serif (Playfair Display) sets titles and numbers like engravings; weight comes from the typeface's own thick-thin contrast, never from bold
- Editorial restraint: square corners everywhere, hairline rules (1px #141210/20) dividing columns, uppercase labels at 0.3em tracking. Any radius, shadow, or gradient cheapens the house

Design principles:
- Performance line: the video poster frame is the LCP (AVIF first), preload="none", muted autoplay only in view, pause offscreen; explicit aspect-ratio to prevent CLS
- Fallbacks: prefers-reduced-motion / Save-Data show the poster still only, with a play button
- Imagery: portrait 4:5 plates via <picture> AVIF+WebP, lazy-loaded with explicit aspect-ratio; hover uses transform/opacity only (scale 1.04 + caption rise)
- Typographic hierarchy: Didone serif for display, a neutral sans for body and labels; generous body line-height, all-caps wide-tracked labels

#### Do's (必须做)
1. Porcelain #F7F5F1 ground, ink #141210 type, one muted gold #9A7B4F accent
2. Oversized high-contrast Didone serif (Playfair Display) for titles, clamp() up to ~8rem
3. Vast whitespace: let a single headline or one portrait plate own most of the screen
4. Lookbook grid: 4:5 portraits via <picture> AVIF+WebP, hover scale(1.04) slow reveal + caption rise
5. Poster-first video hero: poster AVIF as LCP, preload=none, muted autoplay in view, pause offscreen
6. Hairline rules (1px #141210/20) to divide columns; square corners everywhere (rounded-none)
7. Uppercase labels at 0.3em tracking; neutral sans for body and labels, serif for display only
8. Under prefers-reduced-motion / Save-Data, do not autoplay -- show the poster still

#### Don'ts (禁止做)
1. Never use radius, shadow, or gradient (each one cheapens it -- use square corners and hairlines)
2. Never spread the gold around (the single accent lands only on kicker / focus / one CTA)
3. Never fake weight with font-bold (thickness comes from the Didone serif's own contrast)
4. Never crowd the layout (whitespace is luxury, density is cheap)
5. Never make the video the LCP dependency or omit the poster (blank first paint, LCP blowup)
6. Never use fast or jump-cut showy motion (motion is silk falling, not an effect exploding)

#### AI Rules
```
# Luxe Lookbook Design System

You are an expert frontend developer specializing in fashion-maison lookbook interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Luxe Lookbook
- **Essence**: A digital flagship as a moving lookbook; absence is the luxury, one gold accent, numerals as art
- **Mood**: Couture, editorial, restrained, quietly expensive
- **Inspiration**: Celine, The Row, Jacquemus campaign sites; printed fashion lookbooks

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Radius, shadow, or gradient decoration | Each one cheapens it; use square corners and hairlines |
| Gold used in many places | The single accent lands only on kicker / focus / one CTA |
| font-bold to fake weight | Thickness comes from the Didone serif's own contrast |
| Crowded layout | Whitespace is the luxury |
| Video as the LCP dependency / no poster | Blank first paint, LCP blowup |
| Fast / jump-cut showy motion | Motion is silk falling, not an effect exploding |

## Required

### Palette
- Porcelain ground #F7F5F1 / stone surface #E8E3DB / ink text #141210 / taupe body #6B6259
- One muted gold #9A7B4F: kicker, hairline focus, a single primary CTA
- Square corners everywhere (rounded-none); hairline rules border-[#141210]/20

### Typography
- Display uses the oversized high-contrast Didone serif (Playfair Display); titles clamp() up to ~8rem, line-height ~0.92
- Body and labels use a neutral sans; labels are uppercase at 0.3em tracking (tracking-[0.3em])
- Weight comes from the typeface, never font-bold; generous line-height

### Silk-Motion Video Hero (poster = LCP)
- The video must carry a poster (AVIF first) as the LCP; muted loop playsInline preload="none"
- Play only in view via IntersectionObserver, pause offscreen:
```js
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(() => {}); }
  else { v.pause(); }
}, { threshold: 0.25 });
io.observe(v);
```
- Scrim text over the film with a gradient darkening for 4.5:1
- Explicit aspect-ratio / h-screen to prevent CLS

### Lookbook Grid (hover reveal)
- Portrait 4:5 plates via <picture>: `<source srcSet=".avif" type="image/avif"><source srcSet=".webp" type="image/webp">`
- Lazy-load loading="lazy" decoding="async" with an explicit aspect-[4/5]
- Hover uses transform/opacity only: group-hover:scale-[1.04] (duration-700 ease) plus a caption rise
- Keyboard-focusable (focus-within reveals too)

### Fallbacks
- prefers-reduced-motion / Save-Data: do not autoplay, show the poster still, offer a play button
- Mobile may show poster only

## Self-Verification Checklist

- [ ] Square corners everywhere; no radius, shadow, or gradient decoration
- [ ] Gold appears in only a very few places
- [ ] Titles set in the Didone serif, ample whitespace, no font-bold
- [ ] Video poster is the LCP, preload=none, play only in view, pause offscreen
- [ ] Lookbook images use <picture> AVIF+WebP, explicit 4:5, lazy, hover-transform reveal
- [ ] reduced-motion / Save-Data fall back to the poster still
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#141210]/20`
- Radius: `rounded-none`

**Shadow**
- Small: `shadow-none`
- Medium: `shadow-none`
- Large: `shadow-[0_30px_80px_-40px_rgba(20,18,16,0.35)]`
- Hover: `hover:shadow-none`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-500 ease-out`

**Typography**
- Heading: `font-serif text-[#141210] tracking-tight`
- Body: `text-[#6B6259] leading-relaxed`

**Required Classes**

Button:
```
rounded-none
uppercase tracking-[0.2em]
transition-all duration-500
```

Card:
```
rounded-none
bg-[#F7F5F1]
```

Input:
```
rounded-none
bg-transparent
border-b border-[#141210]/25
text-[#141210] placeholder-[#141210]/40
focus:outline-none focus:border-[#9A7B4F]
transition-all duration-500
```

**Forbidden**

Classes: `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `rounded-full`, `rounded-lg`, `rounded-xl`, `shadow-lg`, `shadow-xl`, `font-bold`

Patterns: `^rounded-(lg|xl|2xl|full)$`, `^from-(indigo|purple|pink|fuchsia)-`, `^shadow-(md|lg|xl|2xl)$`, `^drop-shadow-`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center justify-center
  px-9 py-4 rounded-none
  bg-[#141210] text-[#F7F5F1]
  uppercase tracking-[0.2em] text-xs
  hover:bg-[#9A7B4F]
  transition-all duration-500
">
  Book an appointment
</button>

<button className="inline-flex items-center justify-center px-9 py-4 rounded-none
  bg-transparent text-[#141210] border border-[#141210]
  uppercase tracking-[0.2em] text-xs
  hover:bg-[#141210] hover:text-[#F7F5F1] transition-all duration-500">
  View the collection
</button>
```

**Card**
```html
<article className="group bg-[#F7F5F1]">
  <div className="relative aspect-[4/5] overflow-hidden bg-[#E8E3DB]">
    <picture>
      <source srcSet="/look-01.avif" type="image/avif" />
      <source srcSet="/look-01.webp" type="image/webp" />
      <img src="/look-01.webp" alt="The camel coat" loading="lazy" decoding="async"
        className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]" />
    </picture>
  </div>
  <div className="pt-6 border-t border-[#141210]/15 mt-6">
    <p className="uppercase tracking-[0.3em] text-xs text-[#9A7B4F] mb-2">Look 01</p>
    <h3 className="font-serif text-2xl text-[#141210]">The Camel Coat</h3>
  </div>
</article>
```


---


### 着色器渐变 (Shader Gradient)

**Slug**: `shader-gradient`

#### Description
A premium SaaS aesthetic built on a real-time WebGL fragment-shader mesh gradient. A slowly breathing iridescent field flows across a near-black canvas while frosted-glass panels float above it, paired with a clean modern sans and a single bright accent - the living-gradient look of Stripe, Linear, and Vercel heroes.

#### Design Philosophy
The shader-gradient creed: the background is not an image, it is light that never repeats. A genuine real-time shader brings the hero to life - the gradient flows slowly, colors bleed into one another, like a breathing aurora. That living quality is a premium-SaaS signal: it says "we wrote a shader even for the background", not "we pasted an exported gradient PNG".

Core principles:
- Living background = premium signal: a real fragment shader running on the GPU, a noise-driven flowing field where no two frames are identical. Cheapness comes from a static gradient or a fake CSS keyframe animation; class comes from the continuous evolution of a true shader
- Restraint is discipline: only the canvas moves, the DOM never flies around. Every UI animation touches transform / opacity only, leaving the GPU budget for the shader. One living gradient per page is enough - do not fill the screen with canvases
- Near-black plus iridescence: a deep near-black base #08090D lets the iridescent gradient (violet #7C5CFF / cyan #22D3EE / magenta #F472B6) glow. Hues bleed rather than hard-cut, using fbm domain warping to produce organic flow
- Frosted glass carries content: content sits on backdrop-blur glass panels with a 1px white/10 border and a dark scrim to hold text at 4.5:1 over the gradient field. The gradient is atmosphere; text must always stay crisp
- One accent color: violet #7C5CFF is the single UI accent (primary CTA, focus ring, links); everything else is glass and near-black. Multiple loud colors destroy the premium feel

Design principles:
- Performance line: cap devicePixelRatio at 2; pause the rAF loop when offscreen via IntersectionObserver and resume in view; a single full-screen quad with a shader compiled once, never rebuilt per frame
- Fallback chain: prefers-reduced-motion renders exactly one static frame (no loop); when WebGL is unavailable, fall back to a visually similar static CSS gradient; mobile may downsample or show a still
- Accessibility and CLS: decorative canvas gets aria-hidden; explicit size / fixed container height prevents CLS; the content layer is always independent of the canvas, so the page stays readable if the canvas fails

#### Do's (必须做)
1. Drive the flowing gradient with a real WebGL fragment shader: full-screen quad + time / resolution uniforms + fbm domain warp
2. Cap devicePixelRatio at 2 and re-size the canvas and viewport on resize
3. Pause requestAnimationFrame offscreen and resume in view via IntersectionObserver to save power and GPU
4. Under prefers-reduced-motion render exactly one static frame, never start the animation loop
5. When WebGL is unavailable, fall back to a visually similar static CSS gradient background
6. Sit content on backdrop-blur frosted-glass panels with a 1px white/10 border and a dark scrim for 4.5:1
7. Near-black #08090D base with an iridescent gradient, using only a single violet #7C5CFF UI accent
8. Restrict every DOM animation to transform / opacity, leaving the animation budget for the shader
9. Give the decorative canvas aria-hidden, set explicit size to prevent CLS, keep the content layer independent of the canvas

#### Don'ts (禁止做)
1. Never fake a real-time shader with a static gradient PNG or a CSS keyframe animation (the root of cheapness)
2. Never skip a devicePixelRatio cap (pixel blowup and dropped frames on retina)
3. Never keep the rAF loop running while offscreen (burns power and GPU for nothing)
4. Never ignore prefers-reduced-motion or omit the WebGL-unavailable fallback
5. Never place text directly on the gradient field with no glass panel / scrim (fails contrast)
6. Never fill the screen with multiple canvases or multiple loud accents (kills the premium restraint)
7. Never animate DOM element position / shadow and steal the shader's GPU budget

#### AI Rules
```
# Shader Gradient Design System

You are an expert frontend developer specializing in real-time shader-gradient interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Shader Gradient
- **Essence**: The background is not an image, it is light that never repeats - a real WebGL fragment shader that makes the hero feel alive
- **Mood**: Premium, modern, calm, high-craft SaaS
- **Inspiration**: Stripe / Linear / Vercel hero backgrounds, GPU mesh gradients

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Static gradient PNG or CSS keyframe faking a real-time shader | The root of cheapness |
| No devicePixelRatio cap | Pixel blowup and dropped frames on retina |
| rAF loop running while offscreen | Burns power and GPU for nothing |
| Ignoring prefers-reduced-motion / omitting a no-WebGL fallback | Accessibility + robustness fail |
| Text directly on the gradient with no glass panel / scrim | Fails contrast |
| Multiple canvases or multiple loud accents | Kills premium restraint |
| Animating DOM position / shadow | Steals the shader's GPU budget |

## Required

### Real WebGL shader (the core technique)
A single full-screen quad plus a fragment shader compiled once, a noise-driven flowing field. Reuse this skeleton directly:

Vertex shader (full-screen quad, passthrough):
```glsl
attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }
```

Fragment shader (fbm domain-warp gradient, uniforms u_res / u_time / u_speed / u_blend / u_grain):
```glsl
precision highp float;
uniform vec2 u_res; uniform float u_time, u_speed, u_blend, u_grain;
vec2 hash2(vec2 p){ p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return fract(sin(p)*43758.5453)*2.0-1.0; }
float noise(vec2 p){ vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);
  return mix(mix(dot(hash2(i),f),dot(hash2(i+vec2(1,0)),f-vec2(1,0)),u.x),
             mix(dot(hash2(i+vec2(0,1)),f-vec2(0,1)),dot(hash2(i+vec2(1,1)),f-vec2(1,1)),u.x),u.y); }
float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.0; a*=0.5; } return v; }
void main(){
  vec2 uv=gl_FragCoord.xy/u_res.xy; vec2 q=uv; q.x*=u_res.x/u_res.y;
  float t=u_time*0.05*u_speed;
  float f1=fbm(q*1.5+vec2(t,-t*0.5));
  float f2=fbm(q*2.0+vec2(f1*u_blend-t*0.3,f1+t*0.2));
  float f=fbm(q*1.2+f2*(0.6+u_blend));
  vec3 base=vec3(0.031,0.035,0.051), violet=vec3(0.486,0.361,1.0), cyan=vec3(0.133,0.827,0.933), magenta=vec3(0.956,0.447,0.714);
  vec3 col=base;
  col=mix(col,violet,smoothstep(0.15,0.75,f+0.35));
  col=mix(col,cyan,smoothstep(0.3,0.9,f2*0.5+0.5)*0.6);
  col=mix(col,magenta,smoothstep(0.4,1.0,f1*0.5+0.5)*0.45);
  float vig=smoothstep(1.2,0.2,length(uv-0.5)); col*=0.55+0.6*vig;
  col+=(fract(sin(dot(uv+t,vec2(12.9898,78.233)))*43758.5453)-0.5)*u_grain*0.12;
  gl_FragColor=vec4(col,1.0);
}
```

### Render loop and performance
- const dpr = Math.min(window.devicePixelRatio || 1, 2)
- resize: canvas.width = clientWidth * dpr; gl.viewport(0, 0, w, h); update u_res
- IntersectionObserver: cancelAnimationFrame when offscreen, restart in view
- Compile the shader once; per frame only update uniforms (u_time = performance.now() / 1000)

### Fallback chain (critical)
- prefers-reduced-motion: draw exactly one frame (fixed t), do not requestAnimationFrame
- gl is null (WebGL unavailable): keep the .sg-fallback CSS static gradient under the canvas and return
- Mobile may downsample (dpr = 1) or show a still

### Visuals and content layer
- Near-black #08090D base; iridescent violet #7C5CFF / cyan #22D3EE / magenta #F472B6
- Content sits on .sg-glass frosted panels: bg-white/[0.05] + backdrop-blur-2xl + border-white/10
- Text over the gradient gets a scrim or glass backing for 4.5:1
- One UI accent, violet #7C5CFF: primary CTA, focus ring focus:ring-[#7C5CFF]/25, links
- Every DOM animation touches transform / opacity only

### Accessibility and CLS
- canvas aria-hidden="true"; explicit container height (h-screen etc.) to prevent CLS
- The content layer is independent of the canvas; the page stays readable if the canvas fails

## Self-Verification Checklist

- [ ] A real WebGL fragment shader (full-screen quad + fbm flow), not a fake animation
- [ ] dpr capped at 2 + resize handling + IntersectionObserver pause offscreen
- [ ] prefers-reduced-motion single frame + no-WebGL CSS fallback
- [ ] Text sits on glass panels / scrim and passes contrast
- [ ] Near-black base + single violet accent + DOM animates only transform/opacity
- [ ] canvas aria-hidden + CLS prevented
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-white/10`
- Radius: `rounded-2xl`

**Shadow**
- Small: `shadow-[0_2px_10px_rgba(0,0,0,0.4)]`
- Medium: `shadow-[0_20px_60px_rgba(0,0,0,0.45)]`
- Large: `shadow-[0_30px_90px_rgba(0,0,0,0.55)]`
- Hover: `hover:shadow-[0_24px_70px_rgba(124,92,255,0.25)]`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-300 ease-out`

**Typography**
- Heading: `font-semibold text-white tracking-tight`
- Body: `text-white/70 leading-relaxed`

**Required Classes**

Button:
```
rounded-xl
transition-all duration-300
active:scale-[0.98]
```

Card:
```
bg-white/[0.06] backdrop-blur-2xl
border border-white/10
rounded-2xl
```

Input:
```
bg-white/[0.06] backdrop-blur-xl
border border-white/12
rounded-xl
text-white placeholder-white/40
focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25
transition-all duration-300
```

**Forbidden**

Classes: `bg-gradient-to-r`, `from-indigo-600`, `via-purple-600`, `to-pink-500`, `animate-pulse`, `duration-100`

Patterns: `^bg-gradient-to-r$`, `^animate-(pulse|bounce)$`, `^duration-100$`


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="inline-flex items-center gap-2
  px-6 py-3 rounded-xl
  bg-[#7C5CFF] text-white font-medium
  shadow-[0_8px_30px_rgba(124,92,255,0.35)]
  hover:bg-[#8f72ff] active:scale-[0.98]
  transition-all duration-300
">
  Start building
</button>

<button className="inline-flex items-center gap-2 px-6 py-3 rounded-xl
  bg-white/8 backdrop-blur-xl border border-white/12 text-white
  hover:bg-white/12 transition-all duration-300">
  View docs
</button>
```

**Card**
```html
<div className="relative rounded-2xl p-6
  bg-white/[0.06] backdrop-blur-2xl
  border border-white/10
  shadow-[0_20px_60px_rgba(0,0,0,0.45)]">
  <div className="w-9 h-9 rounded-lg bg-[#7C5CFF]/20 border border-[#7C5CFF]/30 mb-4" />
  <h3 className="text-white text-lg font-semibold mb-2">Realtime by default</h3>
  <p className="text-white/60 text-sm leading-relaxed">
    Every frame is computed on the GPU. Nothing is baked.
  </p>
</div>
```


---


### 粉彩应用风 (Pastel App UI)

**Slug**: `pastel-ui`

#### Description
A mobile-first pastel interface for community and content apps, using warm cream, lilac, mint, butter yellow, and coral to create a friendly but legible experience.

#### Design Philosophy
Pastel App UI 不追求把所有元素都染成浅色，而是用暖奶油色托住内容，用少量粉彩色提示状态与情绪。它适合风格发现、生活方式、收藏和社区类手机应用。

核心原则：
- 颜色表达情绪，深色文字表达结构
- 卡片适合触摸，按钮拥有明确主次
- 评分、收藏和快捷反馈在首屏附近可见
- 移动端优先，底部导航保持稳定
- 柔和不等于低对比，正文和控件保持可读

#### Do's (必须做)
1. 使用暖奶油色作为主背景，粉彩色只承担分组和状态提示
2. 使用 rounded-2xl 到 rounded-3xl 的卡片与触控控件
3. 移动端优先设计底部导航、单列信息流和拇指可达操作
4. 将收藏、使用、评分和快捷反馈放在内容决策点附近
5. 使用深灰或深紫文字保证正文对比度
6. 用细边框和柔和阴影区分层级，避免大面积玻璃效果

#### Don'ts (禁止做)
1. 不要让浅色文字放在浅色背景上
2. 不要使用荧光色或高饱和渐变覆盖整个页面
3. 不要把所有卡片做成同一颜色和同一层级
4. 不要把关键操作藏在页面最底部
5. 不要使用过小的触控目标或密集的横向表格

#### AI Rules
```
STYLE: Pastel App UI

MUST USE:
- Warm cream backgrounds with pastel accents reserved for grouping and state
- Deep plum or charcoal text for readable headings and body copy
- rounded-2xl to rounded-3xl touch surfaces
- Mobile-first single-column flows and a stable bottom navigation
- Visible save, use, rating, and quick-feedback actions near the decision point
- Soft borders and tinted shadows instead of heavy glass panels

MUST AVOID:
- Low-contrast light text on pastel backgrounds
- Full-page neon gradients or excessive glassmorphism
- Tiny touch targets and dense desktop tables on mobile
- Hiding core actions at the bottom of a long detail page

INTERACTION:
- Use 200-300ms transitions, subtle lift on hover, and scale-[0.98] on press
- Respect prefers-reduced-motion
- Keep the primary action reachable by the thumb

COLOR ROLES:
- Background: #fff8f0
- Primary action: #66508f
- Soft surfaces: #d9c7ff and #cbefdf
- Emotional accents: #ffe49a and #ffb5a7
- Text: #332d3d
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#66508f]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
border
font-medium
inline-flex
items-center
```

Card:
```
rounded-lg
border
bg-white/80
```

Input:
```
rounded-lg
border
bg-background
focus:outline-none
```

**Forbidden**

Classes: 

Patterns: 


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-5 py-3 rounded-2xl bg-[#66508f] text-white font-semibold shadow-lg shadow-[#66508f]/20 hover:-translate-y-0.5 active:scale-[0.98] transition-all">Use this style</button>
```

**Card**
```html
<article className="rounded-3xl bg-[#cbefdf] p-5 border border-[#66508f]/10 shadow-sm"><p className="text-xs uppercase tracking-[0.16em] text-[#66508f]/70 mb-3">Featured</p><h3 className="text-xl font-semibold text-[#332d3d] mb-2">Calm discovery</h3><p className="text-sm leading-relaxed text-[#5b5364]">Soft color, clear hierarchy, and a friendly rhythm for mobile exploration.</p></article>
```


---


### 移动编辑风 (Mobile Editorial)

**Slug**: `mobile-editorial`

#### Description
A mobile editorial style that compresses magazine rhythm into a phone screen with serif headlines, warm paper surfaces, and modular content cards.

#### Design Philosophy
Mobile Editorial 把手机 App 当作一本可以被滑动阅读的袖珍杂志。内容不是堆在卡片里，而是通过标题、图片、摘要和留白建立节奏。

核心原则：
- 标题负责个性，正文负责阅读
- 一屏只突出一个主要故事或行动
- 颜色克制，珊瑚色只用于动作和强调
- 评论与收藏作为内容旁注出现
- 用稳定的底部导航保持方向感

#### Do's (必须做)
1. 使用有性格的衬线标题与清晰的无衬线正文搭配
2. 采用暖白纸张背景和细线分割内容层级
3. 移动端使用单列流、横向专题卡和底部导航
4. 使用珊瑚色作为唯一强行动色
5. 让评论、作者和发布时间成为内容旁注
6. 为长内容提供清晰的阅读进度和折叠层级

#### Don'ts (禁止做)
1. 不要使用过多强调色破坏编辑节奏
2. 不要让标题、按钮和标签争夺同一视觉焦点
3. 不要用大面积渐变替代内容层级
4. 不要在手机端强行塞入桌面多列布局
5. 不要让正文小于 15px 或行高过紧

#### AI Rules
```
STYLE: Mobile Editorial

MUST USE:
- Warm paper background #fffdf8 and ink text #24211f
- Distinctive serif display headlines paired with readable sans-serif body text
- Single-column mobile reading flow with clear title, summary, metadata, and action order
- Fine separators, generous vertical rhythm, and one coral action color
- Comments, author, and save actions presented as content annotations
- Stable bottom navigation for mobile orientation

MUST AVOID:
- Multiple competing accent colors
- Desktop multi-column layouts forced onto phones
- Tiny body text or compressed line-height
- Decorative gradients replacing editorial hierarchy

INTERACTION:
- Use restrained transitions and underline or color changes for links
- Preserve reading position when expanding comments or details
- Keep actions at least 44px tall on touch devices

COLOR ROLES:
- Paper: #fffdf8
- Ink: #24211f
- Action: #e97b61
- Supporting accents: #c5d8c1, #e9d7a9, #d7c4e8
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#24211f]`
- Radius: `rounded-md`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-md
border
font-medium
inline-flex
items-center
```

Card:
```
rounded-md
border
bg-white/80
```

Input:
```
rounded-md
border
bg-background
focus:outline-none
```

**Forbidden**

Classes: 

Patterns: 


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-5 py-3 rounded-full bg-[#e97b61] text-white font-medium hover:bg-[#d9644e] active:scale-[0.98] transition-colors">Read the story</button>
```

**Card**
```html
<article className="bg-[#fffdf8] border-y border-[#24211f]/15 py-5"><p className="text-xs uppercase tracking-[0.18em] text-[#e97b61] mb-3">Field note · 06 min</p><h3 className="font-serif text-2xl text-[#24211f] mb-2">The quiet power of a good palette</h3><p className="text-sm leading-7 text-[#24211f]/65">A modular story card designed for reading, saving, and returning later.</p></article>
```


---


### 柔和工具风 (Soft Utility)

**Slug**: `soft-utility`

#### Description
A soft utility style for frequently used mobile tools, balancing efficiency and warmth with calm surfaces, clear state colors, and friendly hierarchy.

#### Design Philosophy
Soft Utility 面向每天都会打开的工具型 App。它保留柔和色彩和圆润触感，但让状态、输入、筛选和确认拥有比装饰更高的权重。

核心原则：
- 先让用户完成任务，再表达风格
- 颜色承担状态，不用颜色替代文字
- 控件有明确的默认、聚焦、完成和错误状态
- 主要动作固定在拇指容易到达的位置
- 信息密度适中，避免空洞的装饰

#### Do's (必须做)
1. 使用深青色作为主行动色，保证按钮和正文可读
2. 用薄荷、杏色、蓝色区分状态和模块，而不是装饰性铺色
3. 在移动端采用底部操作栏和清晰的返回路径
4. 所有输入控件提供 focus、error、success 和 disabled 状态
5. 使用 rounded-xl 到 rounded-2xl，保持密度而不过度可爱
6. 为常用操作提供一键完成和可撤销反馈

#### Don'ts (禁止做)
1. 不要用低对比度文字承载关键任务信息
2. 不要为了柔和而移除边界、分隔和状态反馈
3. 不要把工具型页面做成纯展示卡片墙
4. 不要使用过度弹跳或影响效率的动画
5. 不要让主操作在不同页面随意改变位置

#### AI Rules
```
STYLE: Soft Utility

MUST USE:
- Deep teal primary actions with pale surfaces and distinct state colors
- Rounded-xl to rounded-2xl controls that preserve information density
- Mobile-first bottom action bars and thumb-reachable primary actions
- Explicit default, focus, success, error, disabled, and loading states
- Status colors paired with text or icons; never communicate meaning by color alone
- Fast, restrained motion that supports task completion

MUST AVOID:
- Low-contrast text for task-critical information
- Turning a tool screen into a decorative card gallery
- Removing boundaries or state feedback in the name of softness
- Bouncy animations that slow down repeated actions

INTERACTION:
- Use 160-240ms transitions and scale-[0.98] on press
- Keep primary controls in a consistent location across screens
- Provide undo or confirmation for destructive actions

COLOR ROLES:
- Surface: #f4f8f6
- Text: #203b40
- Primary: #2d5b63
- Success/support: #a9d8cc
- Notice: #f3c98b
- Secondary states: #e6b7b0 and #b8c9ed
```


#### Design Tokens

**Border**
- Width: `border`
- Color: `border-[#2d5b63]`
- Radius: `rounded-lg`

**Shadow**
- Small: `shadow-sm`
- Medium: `shadow-md`
- Large: `shadow-lg`
- Hover: `hover:shadow-md`

**Interaction**
- Hover Translate: `none`
- Transition: `transition-all duration-200`

**Typography**
- Heading: `font-semibold tracking-tight`
- Body: `font-sans`

**Required Classes**

Button:
```
rounded-lg
border
font-medium
inline-flex
items-center
```

Card:
```
rounded-lg
border
bg-white/80
```

Input:
```
rounded-lg
border
bg-background
focus:outline-none
```

**Forbidden**

Classes: 

Patterns: 


#### Component Recipes

Available recipes: `button`, `card`, `input`


#### Component Examples

**Button**
```html
<button className="px-5 py-3 rounded-2xl bg-[#2d5b63] text-white font-semibold shadow-md shadow-[#2d5b63]/20 hover:bg-[#234b52] active:scale-[0.98] transition-colors">Complete task</button>
```

**Card**
```html
<section className="rounded-2xl bg-[#f4f8f6] border border-[#2d5b63]/15 p-5"><div className="flex items-center gap-3 mb-4"><span className="h-10 w-10 rounded-xl bg-[#a9d8cc]" /><div><h3 className="font-semibold text-[#203b40]">Today’s focus</h3><p className="text-xs text-[#557077]">3 tasks remaining</p></div></div><div className="h-2 rounded-full bg-[#d9e8e3] overflow-hidden"><div className="h-full w-2/3 rounded-full bg-[#2d5b63]" /></div></section>
```


---


## 4. Component Recipes Registry

Component recipes provide parameterized templates for generating consistent components.


### Button (`button`)

**Description**: Bold button with hard-edge shadow and hover displacement

**Parameters**:
- `size` (select): Size
- `fullWidth` (boolean): Full Width

**Variants**: primary, secondary, accent, outline

**Slots**: `icon`, `label`


### Card (`card`)

**Description**: Container with black border and hard-edge shadow

**Parameters**:
- `padding` (select): Padding
- `interactive` (boolean): Interactive

**Variants**: default, accent, flat

**Slots**: `title`, `children`


### Input (`input`)

**Description**: Form input with sharp borders and focus shadow

**Parameters**:
- `size` (select): Size

**Variants**: default, filled

**Slots**: `placeholder`


### Heading (`heading`)

**Description**: Bold heading with sharp typography

**Parameters**:
- `level` (select): Level

**Variants**: default, inverted, accent

**Slots**: `text`


### Badge (`badge`)

**Description**: Small label with brutal styling

**Parameters**:
- `size` (select): Size

**Variants**: default, accent, outline

**Slots**: `label`


### Navigation (`nav`)

**Description**: Top navigation bar with black bottom border

**Parameters**:
- `sticky` (boolean): Sticky

**Variants**: default, inverted

**Slots**: `logo`, `children`


### Modal (`modal`)

**Description**: Liquid glass modal with inner glow border and depth shadow

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `title`, `children`


### Pill Badge (`pill`)

**Description**: Capsule-shaped liquid glass badge with inner shadow highlight

**Parameters**:
- `size` (select): Size

**Variants**: default, success, warning, error

**Slots**: `icon`, `label`


### Toggle Switch (`toggle`)

**Description**: iOS-style liquid glass toggle switch with glow effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Slider (`slider`)

**Description**: Liquid glass slider with glowing thumb and translucent track

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, accent

**Slots**: `children`


### Control Grid (`controlGrid`)

**Description**: iOS Control Center style grid of liquid glass controls

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Control Tile (`controlTile`)

**Description**: Single control tile for Control Center style grids

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, active

**Slots**: `icon`, `label`


### Chrome Button (`chromeButton`)

**Description**: Button with metallic chrome gradient and Y2K futuristic sheen

**Parameters**:
- `size` (select): Size

**Variants**: silver, holographic, pink

**Slots**: `label`


### Bubble Frame (`bubbleFrame`)

**Description**: Frame with bubble/inflatable aesthetic and Y2K translucent feel

**Parameters**:
- `padding` (select): Padding

**Variants**: default, pink, blue

**Slots**: `children`


### Holographic Badge (`holographicBadge`)

**Description**: Badge with holographic/iridescent effect and Y2K shimmer

**Parameters**:
- `size` (select): Size

**Variants**: rainbow, silver, pink

**Slots**: `label`


### Squiggle Divider (`squiggleDivider`)

**Description**: Divider with Memphis-style squiggly line pattern

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, colorful, bold

**Slots**: `children`


### Shape Card (`shapeCard`)

**Description**: Card decorated with random Memphis geometric shapes

**Parameters**:
- `padding` (select): Padding

**Variants**: default, pastel, bold

**Slots**: `title`, `children`


### Pattern Badge (`patternBadge`)

**Description**: Badge with Memphis pattern background

**Parameters**:
- `size` (select): Size

**Variants**: dots, stripes, zigzag

**Slots**: `label`


### Ornate Frame (`ornateFrame`)

**Description**: Frame with Art Deco geometric border pattern and gold accents

**Parameters**:
- `padding` (select): Padding

**Variants**: gold, silver, dark

**Slots**: `children`


### Deco Separator (`decoSeparator`)

**Description**: Decorative separator with Art Deco fan/sunburst motif

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, wide, narrow

**Slots**: `children`


### Gold Accent Badge (`goldAccentBadge`)

**Description**: Badge with gold accent and geometric Art Deco shape

**Parameters**:
- `size` (select): Size

**Variants**: gold, silver, bronze

**Slots**: `label`


### Geometric Decorator (`geometricDecorator`)

**Description**: Decorative element with primary color geometric shapes following Bauhaus principles

**Parameters**:
- `visible` (boolean): Visible

**Variants**: circle, triangle, square

**Slots**: `children`


### Grid Module (`gridModule`)

**Description**: Grid-based content module following Bauhaus grid principles

**Parameters**:
- `padding` (select): Padding

**Variants**: default, compact, wide

**Slots**: `title`, `children`


### Function Badge (`functionBadge`)

**Description**: Minimal badge following Bauhaus 'form follows function' principle

**Parameters**:
- `size` (select): Size

**Variants**: red, blue, yellow, black

**Slots**: `label`


### Forest Panel (`forestPanel`)

**Description**: Panel with Ghibli forest/nature aesthetic and warm earthy tones

**Parameters**:
- `padding` (select): Padding

**Variants**: default, enchanted, autumn

**Slots**: `title`, `children`


### Soot Sprite Badge (`sootSpriteBadge`)

**Description**: Cute round badge inspired by Ghibli soot sprites

**Parameters**:
- `size` (select): Size

**Variants**: dark, dusty, sparkle

**Slots**: `icon`


### Wind Alert (`windAlert`)

**Description**: Alert with gentle wind/breeze aesthetic inspired by Ghibli

**Parameters**:
- `visible` (boolean): Visible

**Variants**: info, gentle, storm

**Slots**: `title`, `message`


### Speech Bubble (`speechBubble`)

**Description**: Comic speech bubble container with thick borders and tail

**Parameters**:
- `visible` (boolean): Visible

**Variants**: speech, thought, shout

**Slots**: `children`


### Action Panel (`actionPanel`)

**Description**: Panel with comic action lines background effect

**Parameters**:
- `padding` (select): Padding

**Variants**: default, intense, subtle

**Slots**: `children`


### Halftone Overlay (`halftoneOverlay`)

**Description**: Container with halftone dot pattern overlay effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, dense, sparse

**Slots**: `children`


### Melting Frame (`meltingFrame`)

**Description**: Frame with melting/dripping edge effect and surreal depth

**Parameters**:
- `padding` (select): Padding

**Variants**: default, warm, cool

**Slots**: `children`


### Dream Panel (`dreamPanel`)

**Description**: Panel with dreamy, ethereal background and surreal styling

**Parameters**:
- `padding` (select): Padding

**Variants**: default, twilight, dawn

**Slots**: `title`, `children`


### Eye Badge (`eyeBadge`)

**Description**: Badge with surrealist eye motif and dreamlike styling

**Parameters**:
- `size` (select): Size

**Variants**: open, closed, dreaming

**Slots**: `icon`


### Woodblock Panel (`woodblockPanel`)

**Description**: Panel with woodblock print aesthetic and strong border outlines

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, indigo

**Slots**: `children`


### Hanko Seal (`hankoSeal`)

**Description**: Traditional Japanese hanko (name seal) style badge

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `character`


### Wave Divider (`waveDivider`)

**Description**: Decorative divider inspired by ukiyo-e wave patterns

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Ink Progress (`inkProgress`)

**Description**: Progress bar with brush stroke ink effect

**Parameters**:
- `value` (select): Value

**Variants**: indigo, vermilion

**Slots**: `children`


### Seasonal Tab (`seasonalTab`)

**Description**: Tab component with seasonal color themes

**Parameters**:
- `visible` (boolean): Visible

**Variants**: spring, summer, autumn, winter

**Slots**: `label`


### Brush Heading (`brushHeading`)

**Description**: Heading with brush stroke underline decoration

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `text`


### Layered Mountain (`layeredMountain`)

**Description**: Decorative background element with layered mountain silhouettes

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Stone Panel (`stonePanel`)

**Description**: Medieval stone-textured panel with carved edge effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, dark

**Slots**: `children`


### Shield Badge (`shieldBadge`)

**Description**: Heraldic shield-shaped badge for status or labels

**Parameters**:
- `visible` (boolean): Visible

**Variants**: purple, blood, gold

**Slots**: `label`


### Wax Seal (`waxSeal`)

**Description**: Circular wax seal decoration with embossed effect

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `icon`


### Tracery Divider (`traceryDivider`)

**Description**: Gothic tracery-inspired decorative divider

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Illuminated Initial (`illuminatedInitial`)

**Description**: Medieval illuminated manuscript style decorative initial letter

**Parameters**:
- `visible` (boolean): Visible

**Variants**: gold, blood

**Slots**: `letter`


### Parchment Card (`parchmentCard`)

**Description**: Card styled to look like aged parchment with burnt edges

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, aged

**Slots**: `children`


### Neon Glow Panel (`neonGlowPanel`)

**Description**: Dark panel with animated neon border glow effect

**Parameters**:
- `glowIntensity` (select): Glow Intensity

**Variants**: magenta, cyan, purple

**Slots**: `children`


### Chrome Text (`chromeText`)

**Description**: Metallic chrome gradient text with reflective shine effect

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `text`


### Sunset Progress (`sunsetProgress`)

**Description**: Progress bar with sunset gradient colors and neon glow

**Parameters**:
- `value` (select): Value

**Variants**: default

**Slots**: `children`


### Neon Toggle (`neonToggle`)

**Description**: Toggle switch with neon glow effect when active

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### VHS Badge (`vhsBadge`)

**Description**: Retro VHS-style badge with tracking lines effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: rec, play, pause

**Slots**: `label`


### Grid Divider (`gridDivider`)

**Description**: Horizontal divider with perspective grid pattern

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Leather Panel (`leatherPanel`)

**Description**: Panel styled to look like aged leather binding

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, green

**Slots**: `children`


### Wax Seal Badge (`waxSealBadge`)

**Description**: Circular badge styled as a wax seal

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `icon`


### Book Spine Tab (`bookSpineTab`)

**Description**: Tab styled like a book spine label

**Parameters**:
- `visible` (boolean): Visible

**Variants**: brown, green, burgundy

**Slots**: `label`


### Fleuron Divider (`fleuronDivider`)

**Description**: Decorative divider with fleuron (typographic ornament)

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Reading Progress (`readingProgress`)

**Description**: Progress bar styled like a page marker bookmark

**Parameters**:
- `value` (select): Value

**Variants**: default

**Slots**: `children`


### Manuscript Card (`manuscriptCard`)

**Description**: Card with lined paper effect like a manuscript page

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Candle Glow (`candleGlow`)

**Description**: Decorative candle with animated glow effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Garden Panel (`gardenPanel`)

**Description**: Linen-textured panel with vine border decoration for garden content

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, floral, honey

**Slots**: `children`


### Botanical Badge (`botanicalBadge`)

**Description**: Circular badge with pressed flower aesthetic for labels and tags

**Parameters**:
- `size` (select): Size

**Variants**: leaf, flower, berry

**Slots**: `icon`


### Seed Packet Tag (`seedPacketTag`)

**Description**: Rectangular tag styled like vintage seed packet labels

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, rose, herb

**Slots**: `icon`, `label`


### Mason Jar Progress (`masonJarProgress`)

**Description**: Progress bar styled like a mason jar filling up with preserves

**Parameters**:
- `value` (select): Value

**Variants**: honey, jam, herb

**Slots**: `children`


### Cross Stitch Divider (`crossStitchDivider`)

**Description**: Decorative divider with cross-stitch embroidery pattern

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Leaf Card (`leafCard`)

**Description**: Card with botanical leaf corner decorations

**Parameters**:
- `padding` (select): Padding

**Variants**: default, autumn

**Slots**: `title`, `children`


### Journal Ornament (`journalOrnament`)

**Description**: Decorative ornament for journal entries with botanical flourishes

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Garden Tab (`gardenTab`)

**Description**: Tab component with botanical illustration styling

**Parameters**:
- `visible` (boolean): Visible

**Variants**: garden, kitchen, craft

**Slots**: `icon`, `label`


### Wildflower Alert (`wildflowerAlert`)

**Description**: Alert boxes with wildflower-themed decorations

**Parameters**:
- `visible` (boolean): Visible

**Variants**: info, warning, error, success

**Slots**: `icon`, `title`, `message`


### Harvest Table (`harvestTable`)

**Description**: Table styled like a seed catalog or planting schedule

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Overprint Badge (`overprintBadge`)

**Description**: Badge with overprint/misregistration effect and riso color palette

**Parameters**:
- `size` (select): Size

**Variants**: pink, blue, orange

**Slots**: `label`


### Misprint Card (`missprintCard`)

**Description**: Card with slight misprint offset aesthetic and riso texture

**Parameters**:
- `padding` (select): Padding

**Variants**: default, heavy, subtle

**Slots**: `title`, `children`


### Noise Overlay (`noiseOverlay`)

**Description**: Container with riso noise/grain texture overlay

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, dense, sparse

**Slots**: `children`


### Hazard Stripe (`hazardStripe`)

**Description**: Yellow/black diagonal warning stripe decoration for panels

**Parameters**:
- `position` (select): Position

**Variants**: default

**Slots**: `children`


### Military Panel (`militaryPanel`)

**Description**: HUD-style panel with angular corners and optional hazard stripes

**Parameters**:
- `hasHazardStripe` (boolean): Hazard Stripe

**Variants**: default, warning, danger, info

**Slots**: `title`, `children`


### Status Bar (`statusBar`)

**Description**: HP/Shield/Energy bar with segmented design and percentage display

**Parameters**:
- `value` (select): Value

**Variants**: hp, shield, energy

**Slots**: `label`


### Toggle Switch (`toggleSwitch`)

**Description**: Chunky military-style toggle switch with power icon

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Rank Badge (`rankBadge`)

**Description**: Military rank insignia badge with chevron design

**Parameters**:
- `visible` (boolean): Visible

**Variants**: solid, outline, glow

**Slots**: `icon`, `label`


### Diagnostics Row (`diagnosticsRow`)

**Description**: Table row with status indicator dot for system diagnostics

**Parameters**:
- `visible` (boolean): Visible

**Variants**: online, offline, standby

**Slots**: `system`, `value`


### Checkbox Array (`checkboxArray`)

**Description**: Military style checkbox group for subsystem toggles

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `children`


### Lace Panel (`lacePanel`)

**Description**: Decorative panel with lace-like border pattern and corner rose ornaments

**Parameters**:
- `padding` (select): Padding

**Variants**: default, rose

**Slots**: `children`


### Ribbon Badge (`ribbonBadge`)

**Description**: Elegant ribbon-shaped badge with Victorian styling

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, rose, silver

**Slots**: `label`


### Rosette Badge (`rosetteBadge`)

**Description**: Circular rosette badge with scalloped edges

**Parameters**:
- `size` (select): Size

**Variants**: default

**Slots**: `label`


### Rosary Progress (`rosaryProgress`)

**Description**: Progress indicator styled as a string of rosary beads

**Parameters**:
- `steps` (select): Steps

**Variants**: default

**Slots**: `children`


### Lace Divider (`laceDivider`)

**Description**: Decorative horizontal divider with lace pattern

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, rose

**Slots**: `children`


### Ornate Dropdown (`ornateDropdown`)

**Description**: Victorian-styled dropdown menu with decorative borders

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default

**Slots**: `trigger`, `content`


### Lantern Badge (`lanternBadge`)

**Description**: Badge styled like a Chinese lantern with neon glow

**Parameters**:
- `size` (select): Size

**Variants**: red, gold, jade

**Slots**: `label`


### Dragon Scroll (`dragonScroll`)

**Description**: Scroll-shaped panel with dragon motif border and neon accents

**Parameters**:
- `padding` (select): Padding

**Variants**: default, imperial, jade

**Slots**: `title`, `children`


### Seal Stamp (`sealStamp`)

**Description**: Square seal/stamp badge in Chinese chop style with neon glow

**Parameters**:
- `size` (select): Size

**Variants**: red, gold, jade

**Slots**: `character`


### Pagoda Panel (`pagodaPanel`)

**Description**: Panel with pagoda-inspired tiered header and neon accents

**Parameters**:
- `padding` (select): Padding

**Variants**: default, imperial, night

**Slots**: `title`, `children`


### Cloud Motif (`cloudMotif`)

**Description**: Decorative divider with traditional Chinese cloud pattern styling

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, golden, jade

**Slots**: `children`


### Warped Banner (`warpedBanner`)

**Description**: Full-width banner with skewed transform and fluorescent gradient background

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, purple, pink

**Slots**: `title`, `subtitle`


### Scanline Overlay (`scanlineOverlay`)

**Description**: Decorative overlay panel with CSS scanline effect for retro CRT feel

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, dense, subtle

**Slots**: `children`


### Glitch Badge (`glitchBadge`)

**Description**: Small inline badge with offset shadow and monospace text

**Parameters**:
- `size` (select): Size

**Variants**: green, purple, pink, yellow

**Slots**: `label`


### Acid Progress (`acidProgress`)

**Description**: Progress bar with fluorescent fill and hard edges

**Parameters**:
- `value` (select): Value

**Variants**: green, purple, pink

**Slots**: `children`


### Distortion Divider (`distortionDivider`)

**Description**: Horizontal divider with zigzag distortion pattern

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, thick, dotted

**Slots**: `children`


### Sticky Note (`stickyNote`)

**Description**: Sticky note card with slight rotation and shadow

**Parameters**:
- `rotation` (select): Rotation

**Variants**: yellow, pink, blue, green

**Slots**: `children`


### Doodle Border (`doodleBorder`)

**Description**: Container with hand-drawn wavy border effect

**Parameters**:
- `padding` (select): Padding

**Variants**: default, thick, dotted

**Slots**: `children`


### Pencil Divider (`pencilDivider`)

**Description**: Horizontal divider with pencil-drawn line aesthetic

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, wavy, dashed

**Slots**: `children`


### Sketch Badge (`sketchBadge`)

**Description**: Badge with hand-drawn circle border

**Parameters**:
- `size` (select): Size

**Variants**: red, blue, green, orange

**Slots**: `label`


### Notebook List (`notebookList`)

**Description**: List container styled like notebook paper with lines

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, grid, dotted

**Slots**: `children`


### Wet Wash Panel (`wetWashPanel`)

**Description**: Panel with wet watercolor wash background and organic edges

**Parameters**:
- `padding` (select): Padding

**Variants**: default, warm, cool

**Slots**: `title`, `children`


### Splatter Badge (`splatterBadge`)

**Description**: Badge with paint splatter shape and watercolor coloring

**Parameters**:
- `size` (select): Size

**Variants**: rose, sky, sage

**Slots**: `label`


### Bleed Divider (`bleedDivider`)

**Description**: Divider with watercolor bleed/spread effect

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, warm, cool

**Slots**: `children`


### Canvas Panel (`canvasPanel`)

**Description**: Panel with canvas/linen texture background

**Parameters**:
- `padding` (select): Padding

**Variants**: default, warm, cool

**Slots**: `title`, `children`


### Brushstroke Badge (`brushstrokeBadge`)

**Description**: Badge with brushstroke-shaped background

**Parameters**:
- `size` (select): Size

**Variants**: warm, cool, earth

**Slots**: `label`


### Palette Nav (`paletteNav`)

**Description**: Navigation styled like a painter's palette

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, warm, cool

**Slots**: `children`


### Gallery Frame (`galleryFrame`)

**Description**: Ornate gallery-style frame for content

**Parameters**:
- `padding` (select): Padding

**Variants**: gold, dark, minimal

**Slots**: `children`, `caption`


### Impasto Alert (`impastoAlert`)

**Description**: Alert with thick impasto texture border

**Parameters**:
- `visible` (boolean): Visible

**Variants**: info, warning, success

**Slots**: `title`, `message`


### Torn Paper Card (`tornPaperCard`)

**Description**: Card with torn/ripped paper edge effect

**Parameters**:
- `padding` (select): Padding

**Variants**: default, vintage, colorful

**Slots**: `children`


### Layered Stack (`layeredStack`)

**Description**: Stacked layers with slight offset for depth

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, scattered, neat

**Slots**: `children`


### Cutout Badge (`cutoutBadge`)

**Description**: Badge styled like a magazine cutout

**Parameters**:
- `size` (select): Size

**Variants**: red, blue, yellow, mixed

**Slots**: `label`


### Masking Tape Divider (`maskingTapeDivider`)

**Description**: Divider styled like masking/washi tape

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, colorful, vintage

**Slots**: `children`


### Scrapbook Frame (`scrapbookFrame`)

**Description**: Photo frame with scrapbook decoration

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, polaroid, vintage

**Slots**: `children`, `caption`


### Corrupted Image (`corruptedImage`)

**Description**: Image frame with RGB shift and corruption effect classes

**Parameters**:
- `padding` (select): Padding

**Variants**: default, heavy, subtle

**Slots**: `children`


### Static Noise (`staticNoise`)

**Description**: Panel with static noise texture overlay

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, dense, sparse

**Slots**: `children`


### Glitch Text (`glitchText`)

**Description**: Text container with glitch animation classes and RGB channel split

**Parameters**:
- `visible` (boolean): Visible

**Variants**: cyan, magenta, yellow

**Slots**: `text`


### Broken Grid (`brokenGrid`)

**Description**: Container with intentionally misaligned grid aesthetic

**Parameters**:
- `padding` (select): Padding

**Variants**: default, shifted, fragmented

**Slots**: `children`


### Signal Meter (`signalMeter`)

**Description**: Signal strength meter with segmented bars

**Parameters**:
- `level` (select): Level

**Variants**: default, weak, strong

**Slots**: `children`


### Dialogue Box (`dialogueBox`)

**Description**: VN-style dialogue box with semi-transparent background

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, narrator, thought

**Slots**: `speaker`, `message`


### Choice Panel (`choicePanel`)

**Description**: Choice selection panel with hover highlight

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, highlighted, locked

**Slots**: `children`


### Character Slot (`characterSlot`)

**Description**: Character portrait frame/slot

**Parameters**:
- `position` (select): Position

**Variants**: default, active, faded

**Slots**: `children`


### Save Slot Card (`saveSlotCard`)

**Description**: Save/load slot card with timestamp area

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, empty, current

**Slots**: `title`, `timestamp`, `preview`


### Scene Fade (`sceneFade`)

**Description**: Scene transition overlay panel

**Parameters**:
- `visible` (boolean): Visible

**Variants**: fadeBlack, fadeWhite, dissolve

**Slots**: `children`


### Sakura Badge (`sakuraBadge`)

**Description**: Circular badge with soft pink gradient and petal-like border

**Parameters**:
- `size` (select): Size

**Variants**: pink, lavender, gold

**Slots**: `icon`


### Sparkle Panel (`sparklePanel`)

**Description**: Panel with sparkle/glitter border decoration

**Parameters**:
- `padding` (select): Padding

**Variants**: default, romantic, dreamy

**Slots**: `title`, `children`


### Ribbon Banner (`ribbonBanner`)

**Description**: Decorative ribbon-shaped banner

**Parameters**:
- `visible` (boolean): Visible

**Variants**: pink, lavender, gold

**Slots**: `label`


### Heart Progress (`heartProgress`)

**Description**: Progress bar with heart-shaped fill aesthetic

**Parameters**:
- `value` (select): Value

**Variants**: love, friendship, magic

**Slots**: `children`


### Flow Frame (`flowFrame`)

**Description**: Decorative frame with flowing floral border

**Parameters**:
- `padding` (select): Padding

**Variants**: default, sakura, rose

**Slots**: `children`


### HUD Status Bar (`hudStatusBar`)

**Description**: Horizontal status bar with segmented indicators and neon glow

**Parameters**:
- `segments` (select): Segments

**Variants**: default, alert, success

**Slots**: `label`, `value`


### Hologram Panel (`hologramPanel`)

**Description**: Translucent panel with holographic shimmer border effect

**Parameters**:
- `padding` (select): Padding

**Variants**: default, cyan, pink

**Slots**: `title`, `children`


### Cockpit Nav (`cockpitNav`)

**Description**: Navigation bar styled like mecha cockpit controls

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, compact

**Slots**: `children`


### Data Stream (`dataStream`)

**Description**: Vertical data stream display with monospace scrolling text feel

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, cyan, pink

**Slots**: `children`


### Mission Briefing (`missionBriefing`)

**Description**: Alert/notification panel with military briefing aesthetic

**Parameters**:
- `visible` (boolean): Visible

**Variants**: info, warning, critical

**Slots**: `title`, `message`


### Sprite Frame (`spriteFrame`)

**Description**: Card with pixel-art border, stepped corners, no border-radius

**Parameters**:
- `padding` (select): Padding

**Variants**: default, golden, dark

**Slots**: `children`


### Pixel Badge (`pixelBadge`)

**Description**: Small pixel-art badge/tag with hard borders

**Parameters**:
- `size` (select): Size

**Variants**: blue, red, yellow, green

**Slots**: `label`


### HP Bar (`hpBar`)

**Description**: HP/health bar with stepped pixel segments

**Parameters**:
- `value` (select): Value

**Variants**: hp, mp, exp

**Slots**: `children`


### Menu Panel (`menuPanel`)

**Description**: RPG menu panel with pixel-art frame

**Parameters**:
- `padding` (select): Padding

**Variants**: default, dark, golden

**Slots**: `title`, `children`


### Katana Slash (`katanaSlash`)

**Description**: Decorative divider with diagonal slash line and neon glow, evoking a katana cut

**Parameters**:
- `visible` (boolean): Visible

**Variants**: red, purple, blue

**Slots**: `children`


### Kamon Badge (`kamonBadge`)

**Description**: Circular badge styled like a Japanese family crest with neon outline

**Parameters**:
- `size` (select): Size

**Variants**: fire, water, wind

**Slots**: `icon`


### Dojo Panel (`dojoPanel`)

**Description**: Panel with traditional dojo aesthetic and neon accents

**Parameters**:
- `padding` (select): Padding

**Variants**: default, combat, meditation

**Slots**: `title`, `children`


### Bushido Alert (`bushidoAlert`)

**Description**: Alert box with samurai honor code aesthetic and neon accents

**Parameters**:
- `visible` (boolean): Visible

**Variants**: honor, warning, defeat

**Slots**: `title`, `message`


### Blade Progress (`bladeProgress`)

**Description**: Progress bar styled like a katana blade being drawn from its sheath

**Parameters**:
- `value` (select): Value

**Variants**: steel, flame, lightning

**Slots**: `children`


### Rune Glyph (`runeGlyph`)

**Description**: Circular glyph badge with golden border and mystical feel

**Parameters**:
- `size` (select): Size

**Variants**: gold, silver, indigo

**Slots**: `icon`


### Summoning Panel (`summoningPanel`)

**Description**: Panel with concentric circle border decoration

**Parameters**:
- `padding` (select): Padding

**Variants**: default, golden, ethereal

**Slots**: `title`, `children`


### Spellbook Tab (`spellbookTab`)

**Description**: Tab button with arcane styling

**Parameters**:
- `visible` (boolean): Visible

**Variants**: active, inactive, locked

**Slots**: `icon`, `label`


### Mana Bar (`manaBar`)

**Description**: Magical energy bar with gradient fill and glow

**Parameters**:
- `value` (select): Value

**Variants**: mana, health, stamina

**Slots**: `children`


### Enchantment Alert (`enchantmentAlert`)

**Description**: Alert box with mystical border and glow effects

**Parameters**:
- `visible` (boolean): Visible

**Variants**: blessing, curse, neutral

**Slots**: `title`, `message`


### Shoji Screen (`shojiScreen`)

**Description**: Panel styled like a shoji sliding door with circuit pattern overlay

**Parameters**:
- `padding` (select): Padding

**Variants**: default, illuminated, dark

**Slots**: `children`


### Seigaiha Banner (`seigaihaBanner`)

**Description**: Banner with seigaiha wave pattern border accents

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, golden, cyan

**Slots**: `title`, `subtitle`


### Origami Card (`origamiCard`)

**Description**: Card with folded paper aesthetic and digital circuit accents

**Parameters**:
- `padding` (select): Padding

**Variants**: default, crane, lotus

**Slots**: `title`, `children`


### Torii Divider (`toriiDivider`)

**Description**: Horizontal divider styled like a torii gate silhouette

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, golden, neon

**Slots**: `children`


### Furoshiki Wrap (`furoshikiWrap`)

**Description**: Container with wrapping cloth aesthetic and tied corner accents

**Parameters**:
- `padding` (select): Padding

**Variants**: default, silk, digital

**Slots**: `children`


### Gear Badge (`gearBadge`)

**Description**: Badge with gear/cog border decoration and metallic finish

**Parameters**:
- `size` (select): Size

**Variants**: brass, copper, iron

**Slots**: `icon`


### Brass Panel (`brassPanel`)

**Description**: Panel with brass/copper frame and rivets in Victorian industrial style

**Parameters**:
- `padding` (select): Padding

**Variants**: default, aged, polished

**Slots**: `title`, `children`


### Clockwork Progress (`clockworkProgress`)

**Description**: Progress bar with clockwork/gear aesthetic and metallic finish

**Parameters**:
- `value` (select): Value

**Variants**: brass, copper, iron

**Slots**: `children`


### Halftone Card (`halftoneCard`)

**Description**: Card with halftone dot pattern background and bold pop-art borders

**Parameters**:
- `padding` (select): Padding

**Variants**: default, red, blue, yellow

**Slots**: `title`, `children`


### Bold Caption (`boldCaption`)

**Description**: Large bold caption text container with pop-art styling

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, outline, shadow

**Slots**: `text`


### Wow Badge (`wowBadge`)

**Description**: Comic-style explosion badge with starburst shape

**Parameters**:
- `size` (select): Size

**Variants**: wow, pow, bam

**Slots**: `label`


### Leaf Panel (`leafPanel`)

**Description**: Panel with organic leaf-shaped border and nature-inspired styling

**Parameters**:
- `padding` (select): Padding

**Variants**: default, lush, minimal

**Slots**: `title`, `children`


### Solar Progress (`solarProgress`)

**Description**: Progress bar with solar energy aesthetic and warm gradients

**Parameters**:
- `value` (select): Value

**Variants**: solar, wind, water

**Slots**: `children`


### Eco Alert (`ecoAlert`)

**Description**: Alert component with eco-friendly nature aesthetic

**Parameters**:
- `visible` (boolean): Visible

**Variants**: info, growth, warning

**Slots**: `title`, `message`


### Status Window (`statusWindow`)

**Description**: RPG status window with ornate double-border and gradient background

**Parameters**:
- `padding` (select): Padding

**Variants**: default, dark, golden

**Slots**: `title`, `children`


### Menu List (`menuList`)

**Description**: RPG-style menu list container with beveled border

**Parameters**:
- `visible` (boolean): Visible

**Variants**: default, compact, wide

**Slots**: `children`


### Gold Frame (`goldFrame`)

**Description**: Ornate golden frame for important content with metallic gradient border

**Parameters**:
- `padding` (select): Padding

**Variants**: gold, silver, bronze

**Slots**: `children`


### Grid Section (`section`)

**Description**: Asymmetric grid section with unequal columns

**Parameters**:
- `split` (select): Column Split

**Variants**: default, inverted

**Slots**: `left`, `right`


### Transition Divider (`divider`)

**Description**: Gradient divider between parallax sections

**Parameters**:
- `height` (select): Height

**Variants**: gradient, solid, fade

**Slots**: `text`


### Sidebar (`sidebar`)

**Description**: Semi-transparent white sidebar with blur effect

**Parameters**:
- `width` (select): Width

**Variants**: default

**Slots**: `logo`, `children`


### Stat Card (`statCard`)

**Description**: Dashboard statistic card with label, value and trend

**Parameters**:
- `size` (select): Size

**Variants**: default, withIndicator

**Slots**: `label`, `value`, `trend`


### Nav Item (`navItem`)

**Description**: Sidebar navigation item with active state

**Parameters**:
- `size` (select): Size

**Variants**: default, active

**Slots**: `icon`, `label`


### Channel Card (`channelCard`)

**Description**: Bottom channel statistics card with gradient background

**Parameters**:
- `padding` (select): Padding

**Variants**: default

**Slots**: `title`, `children`


### Floating Card (`floatingCard`)

**Description**: Rotated floating card for hero sections

**Parameters**:
- `rotation` (select): Rotation

**Variants**: purplePink, cyanGreen, pinkRose

**Slots**: `icon`, `label`


### Decorator (`decorator`)

**Description**: Animated decorative icons for backgrounds

**Parameters**:
- `size` (select): Size

**Variants**: star, rocket, sparkles

**Slots**: `icon`


### Glass Panel (`glassPanel`)

**Description**: Large liquid glass panel for sections and containers

**Parameters**:
- `padding` (select): Padding

**Variants**: default

**Slots**: `children`


### Refraction Badge (`refractionBadge`)

**Description**: Small glass capsule badge with rainbow edge and pulse animation

**Parameters**:
- `size` (select): Size
- `pulse` (boolean): Pulse Animation

**Variants**: default, success, warning, error

**Slots**: `icon`, `label`


### Glass Stack (`glassStack`)

**Description**: Multiple glass layers stacked with offset for depth effect

**Parameters**:
- `layers` (select): Layers

**Variants**: default

**Slots**: `children`


---


## 5. Layout Archetypes Registry

Layout archetypes define pre-structured page patterns.


### Landing Pages


#### Centered Hero (`landing-hero-centered`)

Centered headline, subtitle, and CTA. Clean and focused.

**Sections**:
- `hero`: Hero (contained)
- `features`: Features (grid)
- `social-proof`: Social Proof (contained)
- `cta-section`: CTA Section (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Single column stack. Hero min-height 60vh. Features in 1 column.
- Tablet: Features in 2-column grid. Increased padding.
- Desktop: Features in 3-column grid. Hero 80vh. Max-width containers.

**Recommended Styles**: Any


#### Split Hero (`landing-hero-split`)

Text on left, image/visual on right. Great for product showcases.

**Sections**:
- `hero`: Hero (split)
- `logos`: Logo Bar (contained)
- `features`: Features (grid)
- `cta-section`: CTA Section (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Image stacks above text. Single column features.
- Tablet: Split layout maintained. Features 2 columns.
- Desktop: Full split 1:1 with max-width constraint. Features 3 columns.

**Recommended Styles**: Any


#### Fullscreen Hero (`landing-hero-fullscreen`)

Full viewport hero with background image or color. High impact.

**Sections**:
- `hero`: Hero (full-width)
- `about`: About (split)
- `features`: Features (grid)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Hero still full viewport. Features single column.
- Tablet: Features 2 columns. About section stacks.
- Desktop: Full 100vh hero. Features 4-column grid. Split about section.

**Recommended Styles**: Any


#### Video Background Hero (`landing-video-hero`)

Full-screen video background with overlay text. High impact for product demos.

**Sections**:
- `hero`: Video Hero (full-width)
- `features`: Features (grid)
- `demo`: Product Demo (contained)
- `cta-section`: CTA Section (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Video replaced with static image on slow connections. Single column features.
- Tablet: Video plays. Features 2-column grid.
- Desktop: Full 100vh video hero. Features 3-column. Large demo section.

**Recommended Styles**: Any


#### SaaS Pricing Page (`landing-saas-pricing`)

Complete SaaS pricing page with hero, pricing tiers, FAQ, and CTA.

**Sections**:
- `hero`: Pricing Hero (contained)
- `toggle`: Billing Toggle (contained)
- `pricing-tiers`: Pricing Tiers (grid)
- `comparison`: Feature Comparison (contained)
- `faq`: FAQ (contained)
- `cta-section`: CTA Section (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Single column pricing cards. FAQ stacks vertically.
- Tablet: 2-column pricing grid. Comparison table scrolls horizontally.
- Desktop: 3-column pricing tiers. Full comparison table visible.

**Recommended Styles**: Any


#### Waitlist Page (`landing-waitlist`)

Minimal pre-launch page with email collection and countdown.

**Sections**:
- `hero`: Waitlist Hero (contained)
- `teaser`: Feature Teaser (grid)
- `social-proof`: Early Signups (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Single column. Compact form. Countdown smaller.
- Tablet: Slightly wider container. 3-column teaser.
- Desktop: Centered max-width container. Prominent countdown.

**Recommended Styles**: Any


### Dashboard Pages


#### Left Sidebar (`dashboard-sidebar-left`)

Classic dashboard with left sidebar navigation and main content area.

**Sections**:
- `sidebar`: Sidebar (stack)
- `header`: Header (full-width)
- `stats`: Stats (grid)
- `main-content`: Main Content (stack)

**Responsive Behavior**:
- Mobile: Sidebar collapses to hamburger menu. Stats 2-column.
- Tablet: Sidebar visible, narrower. Stats 2-column.
- Desktop: Full sidebar 280px. Stats 4-column. Spacious layout.

**Recommended Styles**: Any


#### Top Navigation (`dashboard-topnav`)

Dashboard with horizontal top navigation. More content space.

**Sections**:
- `topnav`: Top Navigation (full-width)
- `page-header`: Page Header (contained)
- `content`: Content (contained)

**Responsive Behavior**:
- Mobile: Hamburger menu. Single column content.
- Tablet: Full top nav. 2-column content grid.
- Desktop: Full width top nav. Max-width content container.

**Recommended Styles**: Any


#### Dual Sidebar (`dashboard-dual-sidebar`)

Dashboard with left navigation and right properties/details panel.

**Sections**:
- `left-sidebar`: Left Sidebar (stack)
- `header`: Header (full-width)
- `main-content`: Main Content (stack)
- `right-sidebar`: Right Panel (stack)

**Responsive Behavior**:
- Mobile: Both sidebars collapse to slide-out drawers. Single column main.
- Tablet: Left sidebar visible. Right panel as modal/drawer.
- Desktop: Full dual sidebar layout with 280px panels on each side.

**Recommended Styles**: Any


#### Kanban Board (`dashboard-kanban`)

Horizontal scrolling kanban board layout like Trello.

**Sections**:
- `header`: Board Header (full-width)
- `board`: Kanban Board (full-width)
- `footer`: Board Footer (full-width)

**Responsive Behavior**:
- Mobile: Single column view with column selector dropdown.
- Tablet: 2-3 visible columns with horizontal scroll.
- Desktop: Full board with all columns visible. Drag and drop.

**Recommended Styles**: Any


### Blog Pages


#### Classic Blog (`blog-classic`)

Traditional blog layout with featured post and post grid.

**Sections**:
- `header`: Header (contained)
- `featured`: Featured Post (contained)
- `posts`: Post Grid (grid)
- `pagination`: Pagination (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Single column posts. Featured post card simplified.
- Tablet: 2-column post grid.
- Desktop: 3-column post grid. Large featured post.

**Recommended Styles**: Any


#### Magazine Style (`blog-magazine`)

Magazine-style layout with varied card sizes and sidebar.

**Sections**:
- `header`: Header (contained)
- `main-with-sidebar`: Main Content (sidebar)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Sidebar moves below main content. Single column.
- Tablet: 2-column main grid. Sidebar below.
- Desktop: Main content + sidebar layout. Magazine grid.

**Recommended Styles**: Any


#### Minimal Blog (`blog-minimal`)

Clean, text-focused blog layout with no images. Perfect for writing.

**Sections**:
- `header`: Header (contained)
- `posts`: Post List (stack)
- `pagination`: Pagination (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Narrow container. Generous line height for readability.
- Tablet: Wider container. Same minimal layout.
- Desktop: Max-width 2xl for optimal reading. Clean typography.

**Recommended Styles**: Any


#### Grid Blog (`blog-grid`)

Pinterest-style masonry grid layout for visual blogs.

**Sections**:
- `header`: Header (contained)
- `filters`: Category Filters (contained)
- `posts`: Post Grid (grid)
- `load-more`: Load More (contained)
- `footer`: Footer (contained)

**Responsive Behavior**:
- Mobile: Single column cards. Full-width images.
- Tablet: 2-column grid. Category filters scroll horizontally.
- Desktop: 4-column masonry grid. Hover effects on cards.

**Recommended Styles**: Any


### Form Pages


#### Multi-Step Form (`form-multi-step`)

Wizard-style form with progress indicator and step-by-step input.

**Sections**:
- `header`: Form Header (contained)
- `progress`: Progress Indicator (contained)
- `form-content`: Form Content (contained)
- `navigation`: Form Navigation (contained)
- `help`: Help Section (contained)

**Responsive Behavior**:
- Mobile: Full-width form. Progress as dots. Stacked buttons.
- Tablet: Wider container. Progress bar visible.
- Desktop: Centered max-width container. Inline navigation buttons.

**Recommended Styles**: Any


#### Settings Page (`form-settings`)

Settings page with sidebar navigation and form sections.

**Sections**:
- `header`: Page Header (contained)
- `settings-layout`: Settings Layout (sidebar)
- `section-profile`: Profile Section (stack)
- `section-security`: Security Section (stack)
- `section-notifications`: Notifications Section (stack)
- `danger-zone`: Danger Zone (contained)

**Responsive Behavior**:
- Mobile: Navigation as tabs at top. Single column forms.
- Tablet: Sidebar navigation visible. Forms full-width.
- Desktop: 240px sidebar. Form sections with max-width.

**Recommended Styles**: Any


---


## 6. Usage Guidelines

### Core Product Flows

#### Path A: Style -> Rules -> Code

1. **Select Style**: Browse preset styles via https://www.stylekit.top/en/styles
2. **Copy Rules**: Use the selected style's tokens, component recipes, and AI rules
3. **Generate Elsewhere**: Apply those constraints inside your own editor or AI coding workflow

#### Path B: Template -> Prompt -> Build

1. **Choose Structure**: Start from a page template in https://www.stylekit.top/en/templates
2. **Choose Prompt**: Copy a prompt from https://www.stylekit.top/en/ui-prompts or a focused prompt page
3. **Build**: Combine the template structure with the selected style rules

### Critical Rules

1. **Always use exact token classes** - Don't approximate or substitute
2. **Never use forbidden classes** - Check forbidden lists before generating
3. **Follow component recipes** - Use parameterized templates, not ad-hoc code
4. **Preserve style evidence** - Keep palette, spacing rhythm, and motion cues from the selected StyleKit page
5. **Review before shipping** - Check the generated UI against the selected style rules

### Example Workflow (Path A)

```
# Use a StyleKit style as generation constraints

1. Open https://www.stylekit.top/en/styles and choose a target style

2. Copy style tokens, component recipes, and AI rules

3. Open https://www.stylekit.top/en/templates or https://www.stylekit.top/en/ui-prompts
   -> choose structure and prompt scaffolding
   -> generate code inside your own coding workflow
```

---

## End of Generated Reference

For the latest updates and interactive documentation, visit:
- Concise index: https://www.stylekit.top/llms.txt
- Web interface: https://www.stylekit.top

This file follows the llms.txt specification: https://llmstxt.org/