# 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 provides 135 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**: 粗边框, 硬阴影, 无圆角, 高对比, 功能主义, expressive, bold, vibrant, 表现力, 张力
- **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**: 杂志排版, 衬线字体, 优雅留白, 网格系统, 极简主义, 作品集, 单色, minimal, clean, simple
- **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**: 立体感, 双重阴影, 柔和, 浅色系, 内凹外凸, modern, contemporary, sleek, 现代, 简洁
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/neumorphism
- **Markdown**: https://www.stylekit.top/api/styles/neumorphism/md
### Liquid Glass (Liquid Glass)
- **Slug**: `glassmorphism`
- **Type**: visual
- **Description**: Premium frosted glass inspired by Apple Liquid Glass. High gaussian blur, saturation boost, multi-layer inner glow and chromatic edges create the sensation of light flowing through real glass.
- **Keywords**: liquid glass, frosted, blur, refraction, translucent, modern, contemporary, sleek, 现代, 简洁
- **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**: 网格, 卡片, 不规则, 作品集, 现代, modern, contemporary, sleek, 简洁, bento
- **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**: 企业, 专业, 简洁, B2B, SaaS, 后台, Dashboard, minimal, clean, simple
- **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**: 极简, 扁平, 无阴影, 作品集, 创意, 艺术, minimal, clean, simple, 留白
- **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**: 柔和, 圆润, 友好, 消费类, App, 社交, 生活服务, modern, contemporary, sleek
- **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**: 自然, 有机, 大地色, 手工, 健康, 环保, 可持续, minimal, clean, simple
- **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**: 渐变, 现代, 活力, 创业, 数字, 动态, 科技感, expressive, bold, vibrant
- **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, nostalgic
- **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**: 暗黑, 深色, 夜间, 开发, 专业, 护眼, modern, contemporary, sleek, 现代
- **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, 侧边栏, modern, contemporary, sleek
- **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**: 几何, 大胆, 色块, 艺术, 创意, 设计, 先锋, expressive, bold, vibrant
- **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**: 瀑布流, Pinterest, 不等高, 图片墙, 作品集, gallery, modern, contemporary, sleek, 现代
- **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**: 分屏, 对比, 左右布局, 对称, 品牌, 展示, modern, contemporary, sleek, 现代
- **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**: 全屏, 滚动, 沉浸式, 场景, 品牌, 故事, expressive, bold, vibrant, 表现力
- **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**: 时间线, 历程, 里程碑, 流程, 步骤, 进度, minimal, clean, simple, 极简
- **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**: 卡片, 堆叠, 立体, 层叠, 轮播, 3D, expressive, bold, vibrant, 表现力
- **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**: 侧边栏, 后台, 管理, 导航, 仪表盘, 应用, modern, contemporary, sleek, 现代
- **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**: 杂志, 多栏, 新闻, 博客, 内容, 网格, modern, contemporary, sleek, 现代
- **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**: 全屏, 英雄区, 大图, 视频, 品牌, 震撼, expressive, bold, vibrant, 表现力
- **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**: 粘土, 3D, 可爱, 柔软, 圆润, 儿童, 趣味, modern, contemporary, sleek
- **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, 文档, 极简, 清爽, 工具, 协作, 笔记, minimal, clean, simple
- **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, 金融, 支付, SaaS, 开发者, 专业, 科技, modern, contemporary, sleek
- **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, 极简, 高端, 科技, 产品, 留白, 精致, minimal, clean, simple
- **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**: 像素, 8-bit, 复古, 游戏, 怀旧, 独立, retro, vintage, nostalgic, pixel
- **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**: 蒸汽波, 复古未来, 霓虹, 80年代, 故障艺术, 赛博, 合成波, 赛博朋克, vaporwave, synthwave, cyberpunk
- **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, 千禧, 未来主义, 金属, 透明, 气泡, 2000年代, retro, vintage, nostalgic
- **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**: 孟菲斯, 几何, 撞色, 80年代, 波普, 图案, 大胆, retro, vintage, nostalgic
- **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**: 装饰艺术, 奢华, 金色, 几何, 1920年代, 优雅, 高端, retro, vintage, nostalgic
- **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**: 包豪斯, 功能主义, 几何, 原色, 现代主义, 极简, modern, contemporary, sleek, 现代
- **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**: 拟物, 写实, 纹理, 质感, 真实, 3D, 阴影, retro, vintage, nostalgic
- **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**: 瑞士, 国际主义, 网格, Helvetica, 理性, 排版, 极简, modern, contemporary, sleek
- **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**: 吉卜力, 宫崎骏, 手绘, 治愈, 自然, 梦幻, 动画, expressive, bold, vibrant
- **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, Google, 层次, 动效, 海拔, 涟漪, 卡片, modern, contemporary, sleek
- **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, 微软, 亚克力, Reveal, 光效, 深度, 动效, modern, contemporary, sleek
- **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**: 漫画, manga, 网点, 对话气泡, 分镜, 动作线, 墨线, expressive, bold, vibrant
- **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**: 手绘, 铅笔, 素描, 纸张, 手写, 涂鸦, 不规则, expressive, bold, vibrant
- **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**: 水彩, 渐变, 柔和, 纸张, 艺术, 流动, 诗意, expressive, bold, vibrant
- **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型, 眼动, 内容优先, 扫描, 阅读, 博客, 新闻, modern, contemporary, sleek
- **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型, 着陆页, 营销, 视觉引导, CTA, 扫描路径, modern, contemporary, sleek, 现代
- **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**: 三栏, 圣杯, 经典, 页头, 页脚, 侧边栏, 导航, modern, contemporary, sleek
- **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**: 仪表盘, 数据, 面板, 图表, 监控, 后台, 分析, modern, contemporary, sleek
- **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**: 赛博朋克, 霓虹, 未来, 发光, 游戏, 科技, expressive, bold, vibrant, 表现力
- **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**: 合成波, 80年代, 霓虹, 复古未来, 网格, 日落, retro, vintage, nostalgic, 复古
- **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**: 柔和野兽派, 温和对比, 浅色阴影, 细边框, 淡彩, expressive, bold, vibrant, 表现力, 张力
- **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**: 俏皮野兽派, 多彩, 倾斜元素, 图标, 年轻化, expressive, bold, vibrant, 表现力, 张力
- **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**: 新艺术, 有机曲线, 藤蔓, 花卉, Mucha, 装饰, 自然, retro, vintage, nostalgic
- **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**: 超现实, 梦境, Dali, 融化, 不合逻辑, 潜意识, 奇幻, expressive, bold, vibrant
- **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**: 浮世绘, 木版画, 北斋, 波浪, 和风, 扁平, 东方美学, retro, vintage, nostalgic
- **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**: 哥特, 中世纪, 大教堂, 尖拱, 玫瑰窗, 黑暗, 神秘, retro, vintage, nostalgic
- **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, 复古未来, 80年代, 日落, 跑车, 棕榈树, 霓虹, retro, vintage, nostalgic
- **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**: 暗黑学院, 古典, 图书馆, 文学, 大学, 皮革, 手稿, retro, vintage, nostalgic
- **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**: 田园, 乡村, 花卉, 刺绣, 蘑菇, 温馨, 手工, retro, vintage, nostalgic
- **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, 印刷, 套印, 半调, 网点, 错位, 手工, expressive, bold, vibrant
- **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**: 机甲, 高达, EVA, 科技面板, 警告, 工业, 军事, expressive, bold, vibrant
- **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**: 哥特, 萝莉塔, 维多利亚, 蕾丝, 暗黑优雅, 玫瑰, 十字架, expressive, bold, vibrant
- **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**: 赛博朋克, 中华风, 霓虹, 龙凤, 印章, 灯笼, 未来东方, expressive, bold, vibrant
- **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**: 酸性, 迷幻, 荧光, 扭曲, 锐舞, Op-Art, 赛博, expressive, bold, vibrant
- **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**: 手绘, 涂鸦, 笔记本, 虚线, 标记笔, 胶带, 图钉, expressive, bold, vibrant
- **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**: 海报, 大字体, 网格, 实验排版, 国际主义, 12列网格, 色块, modern, contemporary, sleek
- **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**: 水彩, 晕染, 透明, 纸张, 颜料, 池化, 植物, 有机, expressive, bold
- **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**: 油画, 印象派, 笔触, 光影, 莫奈, 色彩, 画布, impasto, expressive, bold
- **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
### 拼贴艺术风 (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**: 拼贴, 剪贴, 混合材质, 多层, 杂志, 撕纸, 混搭, washi, expressive, bold
- **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**: 故障, 像素, RGB分离, 扫描线, 数字损坏, 位移, VHS, 通道分离, expressive, bold
- **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**: 视觉小说, ADV对话框, 铭牌, 立绘, 选项, 游戏UI, 交互故事, 装饰边角, modern, contemporary
- **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**: 少女漫画, 樱花, 网点, 花框, 缎带, 闪光, 蕾丝, 爱心, 浪漫
- **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**: 赛博动漫, HUD, 全息, 霓虹, 机甲, 神经数据流, expressive, bold, vibrant, 表现力
- **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**: 像素动漫, JRPG, 8-bit, RPG对话框, 像素, NES色板, retro, vintage, nostalgic, 复古
- **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**: Ma, 侘寂, 留白, 发丝边框, 植物线描, 呼吸感, minimal, clean, simple, 极简
- **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**: 霓虹武士, 赛博武士, 日本, 霓虹, 传统融合, 动作, 刀锋, 鸟居, expressive, bold
- **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**: 魔法阵, 符文, 神秘, 奇幻, 光效, 几何, 魔法, 同心圆, 六芒星
- **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**: 赛博和风, 数字和风, 青海波, 金继ぎ, 障子, 鸟居, 麻叶纹, 电路, expressive, bold
- **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**: 蒸汽朋克, 齿轮, 黄铜, 铜质, 工业, 发条, 维多利亚, 铆钉, expressive, bold
- **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**: 波普, Warhol, Lichtenstein, 半色调, 漫画, 粗体, 网点, 对话泡泡, expressive, bold
- **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**: 生态未来, 可持续, 绿色科技, 植物, 太阳能, 有机, 自然, 乐观, expressive, bold
- **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**: RPG, 菜单, 属性, 道具栏, 奇幻, 对话框, 血条, 经验值, expressive, bold
- **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**: 非对称, 网格, 不规则, 动态, 张力, 重叠, 创意, modern, contemporary, sleek
- **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**: 视差, 滚动, 深度, 层次, 沉浸, 固定背景, 全屏, modern, contemporary, sleek
- **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**: 暖色, 仪表盘, 珊瑚色, 赤陶, 奶油白, 数据可视化, 舒适, modern, contemporary, sleek
- **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**: 霓虹, 渐变, 深色, 发光, 科技, SaaS, 年轻化, expressive, bold, vibrant
- **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**: Apple, Liquid Glass, 流动玻璃, 彩虹边缘, 折射, 多层堆叠, 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**: 北欧, 斯堪的纳维亚, Hygge, 木质, 自然, 温暖, 留白, 舒适, minimal, clean
- **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**: 赛璐璐, 卡通, 轮廓线, 平面阴影, 动画, 游戏, toon, bold, expressive, vibrant
- **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
### 侘寂风 (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**: 侘寂, 日式, 禅, 不完美, 留白, Ma, 纸张, 自然, 东方
- **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**: 枯山水, 日式, 禅, 砂纹, 石组, 苔藓, 冥想, 庭园, karesansui
- **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**: 科幻, HUD, 全息, 雷达, 指挥中心, 太空, 发光边框, 数据流, modern, contemporary
- **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
### 可爱极简 (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**: 可爱, 极简, 粉彩, 圆润, 温柔, 日系, 卡哇伊, minimal, clean, simple
- **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
### 黑色电影 (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**: 黑色电影, 明暗对比, 光影, 戏剧, 复古, 神秘, 高对比, retro, vintage, nostalgic
- **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, scanlines, retro gaming, arcade, pixel, neon glow, chromatic aberration, retro, vintage, nostalgic
- **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**: aero glass, translucent, sky blue, glossy, Vista, Y2K, nature, bubbles, retro, vintage
- **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**: brutalism, anti-design, raw, experimental, bold, punk, rebellious, expressive, vibrant, 表现力
- **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, raw html, 90s web, unstyled, lo-fi, system fonts, plain, minimal, content-first
- **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, rainbow, prismatic, gradient, spectrum, foil, 全息, 虹彩, 棱镜
- **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, algorithmic, procedural, noise, particles, fractal, code art, creative coding, 生成艺术, 算法, 程序化
- **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**: particles, network, connections, floating, tech, nodes, constellation, modern, contemporary, sleek
- **Has Tokens**: Yes
- **Has Recipes**: Yes
- **Style Page**: https://www.stylekit.top/en/styles/particle
- **Markdown**: https://www.stylekit.top/api/styles/particle/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, retro, glitch, scanlines, 80s, 90s, tape, recording, nostalgia, chromatic aberration
- **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**: 赤陶, 地中海, 暖调, 大地色, 手工, 陶土, 自然, 温暖, minimal, clean
- **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**: 单色, 黑白, 灰阶, 极简, 无色彩, 高级感, 摄影, 建筑, minimal, clean
- **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**: 水墨, 国画, 留白, 意境, 东方, 书法, 文化, 气韵, minimal, clean
- **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**: 中世纪, 原子时代, 有机曲线, 星芒, 复古现代, retro, vintage, nostalgic, 复古, 怀旧
- **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**: 构成主义, 苏联, 海报, 几何, 宣传, 对角线, retro, vintage, nostalgic, 复古
- **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**: 光学, 幻觉, 视觉, 运动感, 几何, 黑白, 振动, expressive, bold, vibrant
- **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**: 伊斯兰, 几何, 镶嵌, 阿拉伯, 花纹, 纹理, expressive, bold, vibrant, 表现力
- **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**: 印度, 排灯节, 色彩节, 曼荼罗, 金色, 宝石色, 节庆, expressive, bold, vibrant
- **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**: 非洲, Kente, 编织, 扎染, 纺织, 大地, 手工, expressive, bold, vibrant
- **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**: 韩式, 极简, K-beauty, 留白, 粉彩, 克制, 精致, minimal, clean, simple
- **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**: 粉彩哥特, 柔暗, 糖果色, 骷髅, 十字架, 暗色, 粉紫, expressive, bold, vibrant
- **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**: 极繁, 华丽, 层叠, 混搭, 饱和, 装饰, 丰富, expressive, bold, vibrant
- **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**: 中世纪, 手抄本, 泥金, 花体, 羊皮纸, 哥特字体, 装饰, retro, vintage, nostalgic
- **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**: 涂鸦, 街头, 喷漆, 撞色, 都市, 反叛, 标签, expressive, bold, vibrant
- **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**: 大理石, 奢华, 金色, 高端, 纹理, 精致, 品牌, modern, contemporary, sleek
- **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**: 维多利亚, 植物, 插画, 花卉, 自然, 线描, 博物馆, retro, vintage, nostalgic
- **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**: 立体主义, 毕加索, 几何, 碎片, 多视角, 棱角, 大地色, expressive, bold, vibrant
- **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**: 热带, 天堂, 棕榈, 花卉, 阳光, 度假, 明快, modern, contemporary, sleek
- **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, 开发者, 代码, 简洁, 灰度, 蓝色, 设计系统, modern, contemporary, sleek
- **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**: 巫术, 神秘, 塔罗, 月相, 水晶, 符文, 暗黑, expressive, bold, vibrant
- **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**: 霓虹, 东京, 夜景, 歌舞伎町, 都市, 招牌, 倒影, modern, contemporary, sleek
- **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**: 纸艺, 剪纸, 手作, 层叠, 阴影, 创意, 质感, expressive, bold, vibrant
- **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**: 蓝图, 工程, 技术, 图纸, 网格, 标注, 坐标, minimal, clean, simple
- **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**: 多巴胺, 高饱和, 霓虹, 快乐, 大胆, 能量, expressive, bold, vibrant, 表现力
- **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, 极简, 暗色, 开发者, 精确, 工具, minimal, clean, simple, 留白
- **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**: 电商, 独立站, 产品展示, 购物车, DTC, Shopify, modern, contemporary, sleek, 现代
- **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**: 奢侈品, 高端, 品牌, 零售, 大留白, 衬线, modern, contemporary, sleek, 现代
- **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**: 生鲜, 食品, 有机, 电商, 暖色, 自然, modern, contemporary, sleek, 现代
- **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**: 后台管理, 数据表格, 高密度, 管理面板, 运营, admin, modern, contemporary, sleek, 现代
- **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 scroll, gallery, white cube, portfolio, minimal, 极简
- **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
---
## 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
...
```
**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
```
### Card
```jsx
Neo-Brutalism
Raw, bold, unapologetic design.
```
---
## 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
```
**Card**
```html
Neo-Brutalism
Raw, bold, unapologetic design.
```
---
### 编辑杂志风 (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 */}
{/* Text link with underline reveal */}
```
**Card**
```html
Architecture
The Silent Brutalism
Exploring the raw concrete monoliths that define the modern urban landscape.
```
---
### 新拟物派 (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
```
**Card**
```html
卡片标题
卡片内容描述文字
```
---
### Liquid Glass (Liquid Glass)
**Slug**: `glassmorphism`
#### Description
Premium frosted glass inspired by Apple Liquid Glass. High gaussian blur, saturation boost, multi-layer inner glow and chromatic edges create the sensation of light flowing through real glass.
#### Design Philosophy
Liquid Glass distills the design language Apple introduced at WWDC25. It goes beyond simple translucency plus blur to simulate real glass optics: refraction, chromatic dispersion, inner luminance, and specular edges.
Core principles:
- Optical realism: High blur + saturation boost makes background colors "live" inside the glass
- Inner luminance: Top-down white gradient simulates light hitting the glass surface from above
- Chromatic edges: Borders reveal subtle rainbow dispersion on interaction
- Depth layering: Multiple glass layers with varying opacity and blur
- Fluid motion: All transitions use spring easing to simulate glass physical inertia
#### Do's (必须做)
1. Use high blur values backdrop-blur-[40px] or backdrop-blur-[60px]
2. Add saturation boost backdrop-saturate-[180%]
3. Use multi-layer shadows: outer depth + inset top highlight + edge glow
4. Add inner luminance gradient background-image: linear-gradient(to bottom, rgba(255,255,255,0.18), transparent)
5. Borders use border-white/20, increase to border-white/40 on hover
6. Rounded corners use rounded-2xl or rounded-3xl
7. Transitions use duration-500 + cubic-bezier(0.16,1,0.3,1) spring easing
8. Slight lift on hover -translate-y-0.5 with enhanced shadows
9. Use rich gradient backgrounds as the base layer
#### Don'ts (禁止做)
1. Do not use on solid color backgrounds (requires gradient or image background)
2. Do not use low blur values backdrop-blur-sm or backdrop-blur
3. Do not omit backdrop-saturate (saturation boost is key to Liquid Glass)
4. Do not use opaque backgrounds bg-white, bg-black
5. Do not use sharp or small corners rounded-none, rounded-sm
6. Do not use fast transitions duration-100, duration-150
7. Do not use single-layer flat shadows (must be multi-layer)
8. Do not use strobing or high-frequency looping glow animations
#### AI Rules
```
# Liquid Glass Design System
You are an expert frontend developer specializing in Apple's Liquid Glass (Glassmorphism 2.0) design language. Generate all code strictly following these specifications.
## Style Identity
- **Name**: Liquid Glass / Premium Glassmorphism
- **Category**: Modern, Premium
- **Essence**: Real glass optics — refraction, chromatic dispersion, inner luminance, depth layering
- **Mood**: Ethereal, premium, immersive, futuristic
- **Inspiration**: Apple WWDC25 Liquid Glass, visionOS interfaces
---
## Core Visual Principles
### 1. Background Requirement (CRITICAL)
```
MANDATORY: Rich gradient or image background
Examples:
- from-indigo-600 via-purple-600 to-pink-500
- from-blue-500 via-purple-500 to-pink-500
- from-cyan-400 via-blue-500 to-indigo-600
Add floating ambient orbs for depth:
```
### 2. Glass Panel Three-Layer Structure
```
LAYER 1 — Glass Surface:
bg-white/10 to bg-white/20
backdrop-blur-[40px] or backdrop-blur-[60px]
backdrop-saturate-[180%]
LAYER 2 — Inner Luminance:
LAYER 3 — Multi-Depth Shadows:
shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.35)]
```
### 3. Border System
```
Default: border border-white/20
Hover: border-white/35 to border-white/40
```
### 4. Border Radius
```
REQUIRED: rounded-2xl (16px) or rounded-3xl (24px)
Large, smooth curves for glass aesthetics
```
---
## Interaction Specifications
### Hover Effects
| Element | Effect | Implementation |
|---------|--------|----------------|
| Cards | Lift + glow enhance | hover:-translate-y-1 hover:shadow-[0_16px_56px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.45)] |
| Buttons | Subtle lift + border brighten | hover:-translate-y-0.5 hover:border-white/40 hover:bg-white/28 |
| Links | Background reveal | hover:bg-white/10 |
### Specular Sweep (Light Reflection)
```jsx
```
### Active State
```
active:scale-[0.97]
Brief compression feedback
```
---
## Animation Rules
### Spring Physics
```
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```
This cubic-bezier creates natural spring-like motion simulating glass inertia.
### 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
### Gradient Backgrounds
| Name | Classes |
|------|---------|
| Indigo Purple Pink | from-indigo-600 via-purple-600 to-pink-500 |
| Blue Purple | from-blue-500 via-purple-500 to-pink-500 |
| Violet Fuchsia | from-violet-600 via-purple-600 to-fuchsia-500 |
| Cyan Blue | from-cyan-400 via-blue-500 to-indigo-600 |
### Glass Surface
| Token | Value | Usage |
|-------|-------|-------|
| Glass BG | bg-white/10 to bg-white/20 | Panel backgrounds |
| Glass BG Hover | bg-white/25 to bg-white/30 | Hover states |
| Border | border-white/20 | Default borders |
| Border Hover | border-white/40 | Hover borders |
| Text Primary | text-white | Headlines |
| Text Secondary | text-white/85 | Body copy |
| Text Muted | text-white/50 | Captions |
---
## Forbidden Patterns
| Pattern | Reason |
|---------|--------|
| Solid bg-white, bg-black | Glass requires translucent backgrounds |
| backdrop-blur-sm, backdrop-blur | Insufficient blur for glass effect |
| Omit backdrop-saturate | Loses color vibrancy through glass |
| Single-layer shadow | Glass needs multi-depth shadows |
| rounded-none, rounded-sm | Sharp corners break glass illusion |
| duration-100, duration-150 | Too fast, loses glass fluidity |
| Solid color backgrounds | No refraction without gradient/image |
| Strobing/high-freq animations | Breaks premium feel |
---
## Responsive Guidelines
### Blur Scaling
```
Mobile: backdrop-blur-[30px]
Desktop (md:): backdrop-blur-[40px] to backdrop-blur-[60px]
```
### Shadow Scaling
```
Mobile: shadow-[0_4px_16px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.25)]
Desktop: shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,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
```
---
### 便当盒布局 (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-8`, `gap-10`, `gap-12`
Patterns: `^rounded-none`, `^rounded-sm`
#### Component Recipes
Available recipes: `button`, `card`, `input`
#### Component Examples
**Button**
```html
```
**Card**
```html
Lightning Fast
Modern bento grids require snappy, widget-like micro-interactions to feel alive.
```
---
### 企业简洁风 (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 */}
{/* Secondary Button */}
{/* Ghost Button */}
```
**Card**
```html
{/* Icon container — hover triggers color fill + scale */}
Feature Title
Description of the feature with clear, professional language.
```
---
### 极简扁平风 (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 (Outlined)
```jsx
```
### Card (Bordered)
```jsx
Brief description with minimal styling, maximum contrast, and instant interaction feedback.
// Color Block Card
Featured
High contrast color block for emphasis.
```
---
### 柔和界面风 (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
// Secondary Button
// Soft Ghost
```
**Card**
```html
Feature Title
Soft, friendly description that puts users at ease.
```
---
### 自然有机风 (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
// Secondary Button
// Earthy Accent
```
**Card**
```html
Organic Roots
Sourced from sustainable earth and shaped by slow natural rhythms.
```
---
### 现代渐变风 (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
// Outline Gradient Button
// Glass Button
```
**Card**
```html
Feature Title
Stunning visual effects with modern gradient aesthetics and fluid color flow.
```
---
### 复古怀旧风 (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
```
**Card**
```html
{/* Corner decorations — emerge slowly on hover (Corner Reveal) */}
Chapter One
The Grand Archives
A story that spans generations, told through craftsmanship and the slow passage of time.
```
---
### 暗黑模式 (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: `text-white`, `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 */}
{/* Secondary Button */}
{/* Ghost Button */}
{/* Danger Button */}
```
**Card**
```html
Feature Title
Description with comfortable contrast for night reading.
```
---
### 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
```
**Card**
```html
Panel Title
Content sits quietly on dark surfaces.
```
---
### 几何大胆风 (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
// Circle Button
// Outlined Button
```
**Card**
```html
{/* Decorative shape */}
01
Project Name
Bold geometric design with hard color cuts and shape-driven motion.
{/* Bottom accent bar */}
```
---
### 瀑布流布局 (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
```
**Card**
```html
Card Title
Description text that can be any length
```
---
### 分屏布局 (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
```
**Card**
```html
Night Edit
Dark Mode
High-contrast visual treatment for dramatic storytelling.
Day Edit
Light Mode
Editorial clarity for long-form reading and daylight ergonomics.
```
---
### 全屏滚动布局 (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`, `text-black`
Patterns: `^shadow-(?!none)`, `^border-gray-`
#### Component Recipes
Available recipes: `button`, `card`, `input`
#### Component Examples
**Button**
```html
```
**Card**
```html
{/* Breathing background glow — expands on group-hover */}
This full-screen section captures the entire viewport, creating a cinematic, story-like experience.
```
---
### 垂直时间线布局 (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
```
**Card**
```html
Milestone Reached
The chronological event comes to life when interacted with, illuminating its specific point in history.
```
---
### 卡片堆叠布局 (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
```
**Card**
```html
{/* 底层卡片 */}
{/* 中层卡片 */}
{/* 顶层卡片 */}
Top Card
Hover the stack to reveal the deck beneath.
```
---
### 固定侧边栏布局 (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
```
**Card**
```html
Card Title
Content for the main area card.
```
---
### 杂志网格布局 (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
```
---
### 全屏英雄区布局 (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`, `bg-white`, `text-zinc-900`, `text-gray-900`, `text-black`
Patterns: `^shadow-(?!none)`, `^bg-(?:zinc|gray)-(?:50|100)`, `^border-(?:zinc|gray)-`
#### Component Recipes
Available recipes: `button`, `card`, `input`
#### Component Examples
**Button**
```html
```
---
### 粘土拟态 (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
```
**Card**
```html
Clay Card
柔软可爱的粘土质感卡片
```
---
### 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
```
**Card**
```html
```
---
### 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
```
**Card**
```html
Payments
Accept payments online with a complete platform
```
---
### 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
```
**Card**
```html
iPhone 15 Pro
Titanium. So strong. So light. So Pro.
From $999
```
---
### 像素艺术风 (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
```
**Card**
```html
LEVEL 1
PRESS START TO ENTER THE PIXEL WORLD.
```
---
### 霓虹复古 (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
Welcome to the aesthetic dimension. Where marble statues cry digital tears and the mall music never stops playing.
```
---
### 千禧风格 (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-black`
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
```
**Card**
```html
FUTURE IS NOW
Welcome to the new millennium. Glossy buttons, iridescent glows, absolute digital optimism.
```
---
### 孟菲斯风格 (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
```
**Card**
```html
{/* Decorative shapes — each moves in a different direction (Playful Chaos) */}
MEMPHIS
Bold, colorful, and fun!
```
---
### 装饰艺术风格 (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
```
**Card**
```html
{/* Corner decorations */}
ELEGANCE
Timeless sophistication and golden era luxury.
```
---
### 包豪斯风格 (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
```
**Card**
```html
Form
Follows function
```
---
### 拟物设计 (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
```
**Card**
```html
{/* Leather texture overlay */}
Stitched Leather
Rich material depth with stable highlight and tactile resistance.
```
---
### 瑞士国际风格 (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
```
**Card**
```html
Category
Helvetica Neue
Clean, objective, rational design principles.
```
---
### 吉卜力风格 (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-2`, `border-4`, `shadow-[2px_2px_0px`, `shadow-[4px_4px_0px`, `shadow-[8px_8px_0px`, `bg-[#ff006e]`, `bg-[#ff71ce]`, `bg-[#01cdfe]`
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
```
**Card**
```html
{/* Cloud icon */}
Sky Garden
Where dreams float among the clouds, carried by the gentle wind of summer.
```
---
### 材料设计 (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 a design language launched by Google in 2014, comparing digital interfaces to paper and ink with physical properties.
Core principles:
- Material metaphor: Interfaces are like paper with thickness, stackable and movable
- Elevation system: Expressing hierarchy through shadows
- Bold colors: Vivid primary and accent colors
- Meaningful motion: Animations convey spatial relationships and feedback
#### 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
```
**Card**
```html
Material Surface
Elements express their material nature through elevation and shadow.
```
---
### 流利设计 (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 */}
{/* Secondary Button */}
{/* Ghost Button */}
```
**Card**
```html
{/* Icon container — scale on group-hover */}
Fluent Card
Acrylic material
Light, depth, motion, material, and scale working together seamlessly.
```
---
### 漫画风格 (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
```
**Card**
```html
NEW!
Episode 1
In a world where ordinary UI elements become extraordinary...
```
---
### 铅笔手绘风 (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
```
**Card**
```html
Rough Draft
Drawn with pencil, eraser, and intention. Imperfect lines still tell a clear story.
```
---
### 水彩画风 (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
```
**Card**
```html
Watercolor Card
Colors flowing like water on paper
```
---
### 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
```
**Card**
```html
Article Title
Brief summary of the article content...
5 min read
```
---
### 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
```
**Card**
```html
Seamless Conversion
Every element on this path is engineered to guide the eye and encourage action without overwhelming the reader.
```
---
### 圣杯布局 (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
```
**Card**
```html
Content Card
Main content displayed in the center column of the holy grail layout.
```
---
### 仪表盘布局 (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
```
**Card**
```html
Total Revenue+12.5%
$48,230
vs. $42,890 last month
```
---
### 赛博朋克霓虹 (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
```
**Card**
```html
```
---
### 合成波 (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
```
**Card**
```html
```
---
### 柔和野兽派 (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
{/* 次要按钮 */}
```
**Card**
```html
卡片标题
柔和纸张质感，保留野兽派结构但降低冲击感
```
---
### 俏皮野兽派 (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
```
**Card**
```html
有趣的卡片
带有弹簧感位移与彩色阴影跳跃的俏皮交互
```
---
### 新艺术运动风 (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
```
**Card**
```html
Nature's Beauty
Where art meets organic form in elegant harmony.
```
---
### 超现实主义风 (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
```
**Card**
```html
```
---
### 浮世绘数字风 (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
```
**Card**
```html
印
GREAT WAVE
Beneath the shadow of the mountain, the digital woodblock breathes. Hard edges, flat colors, and deliberate imperfections.
```
---
### 哥特式风 (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
```
**Card**
```html
CATHEDRAL
In the shadow of the spire, where crimson light bleeds through rose windows onto the cold marble floor.
```
---
### 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
```
**Card**
```html
NIGHT CITY
> Grid simulation active
```
---
### 暗黑学院风 (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
```
**Card**
```html
Classical Literature
In the quiet of the library, dust motes drift through candlelight over weathered pages.
```
---
### 田园核风 (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
```
**Card**
```html
Wildflower Meadow
Where every stitch tells a story of spring.
```
---
### 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
```
**Card**
```html
{/* Registration mark — shifts into position on hover (Registration Shift) */}
RISO_PRINT
Embrace the beauty of mechanical imperfection and limited palette expression.
```
---
### 机甲风 (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
```
**Card**
```html
UNIT-01
ARMOR PANEL
Status: Operational
Active
```
---
### 哥特萝莉风 (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
```
**Card**
```html
Dark Elegance
A whisper of lace and shadow, wrapped in velvet moonlight.
```
---
### 赛博中华风 (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
```
**Card**
```html
CYBER ORIENT
Where tradition meets tomorrow
```
---
### 酸性平面设计 (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
```
**Card**
```html
ACID_ZONE
Distorted reality interface module
```
---
### 手绘涂鸦风 (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
```
**Card**
```html
Sketch Note
Scribbled with love, coffee, and a perfectly imperfect process.
```
---
### 瑞士海报风 (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
```
**Card**
```html
2024
HELVETICA
Grid-aligned typographic content
```
---
### 水彩艺术风 (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, 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, 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 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
```
**Card**
```html
Color Bleed
Pigments flow and merge on damp paper, avoiding sharp boundaries.
```
---
### 油画印象派风 (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
```
**Card**
```html
Impression
{/* Brushstroke Reveal underline */}
Light dances across the canvas at golden hour
```
---
### 拼贴艺术风 (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 and shadow expansion. 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 has group-hover:-translate-y-1 group-hover:rotate-[6deg], while the card has group-hover:-translate-y-2 group-hover:-rotate-[1deg].
- Desk Press: On :active, the shadow must sharply collapse and the element shifts slightly down, 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.
- 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.
```
#### 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
```
**Card**
```html
```
---
### 故障艺术风 (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
```
**Card**
```html
SYS_FAILURE
ERR: MEMORY_CORRUPTION at 0x00A4. Visual matrices desynchronized. Proceed with extreme caution.
Status: Offline
```
---
### 视觉小说风 (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
```
**Card**
```html
{/* 角色名牌 */}
Sakura
{/* 对话主面板 */}
{/* L形装饰边角 */}
▼
"The cherry blossoms are beautiful this time of year... Do you think we'll be able to see them together again next spring?"
```
---
### 少女漫画风 (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
```
**Card**
```html
Spring Memory
A gentle breeze carries cherry blossoms and soft daydreams across the page.
```
---
### 赛博动漫风 (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
```
**Card**
```html
DATA PANEL
System status nominal
```
---
### 像素动漫风 (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. 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
```
**Card**
```html
{/* Corner pixels — blink on hover (Corner Blink) */}
QUEST LOG
> A new adventure awaits! Press A to continue...
```
---
### 日系清新风 (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
```
**Card**
```html
Morning Light
Gentle and simple, like morning light filtering through paper screens.
```
---
### 霓虹武士风 (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
```
**Card**
```html
BUSHIDO
The way of the warrior, illuminated by precise neon steel.
```
---
### 魔法阵风 (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-full`, `rounded-2xl`, `rounded-xl`, `rounded-lg`, `bg-white`, `bg-gray-50`, `border-4`, `border-8`, `shadow-md`, `shadow-lg`
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
```
**Card**
```html
ARCANUM
Seal of the Ancients
```
---
### 赛博和风 (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
```
**Card**
```html
SEIGAIHA
Traditional waves, digitally reborn
```
---
### 蒸汽朋克 (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
// Copper Outline
// Iron Variant
```
**Card**
```html
{/* Corner rivets */}
Mechanism Module
Clockwork Engine
Precision-engineered brass mechanism with steam-driven power core.
```
---
### 波普艺术 (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
```
**Card**
```html
{/* Ben-Day dots — base layer deepens on hover */}
{/* Ben-Day dots — red accent layer appears on hover (Ben-Day Dynamics) */}
NEW!
Comic Card
Bold, colorful pop culture aesthetic with comic book styling.
```
---
### 太阳朋克 (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
// Solar Gold
// Outline Organic
```
**Card**
```html
{/* Organic decoration */}
Eco Module
Solar Garden
A harmonious blend of sustainable technology and living greenery.
```
---
### 日式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 originates from the menu and UI design of classic Japanese role-playing games, recreating the retro gaming experience through beveled borders, gradient backgrounds, and ornate frames.
Core principles:
- Beveled borders: Inner and outer shadows with gradients simulate 3D raised buttons and panels
- Dark base: Deep navy blue backgrounds paired with gold and crystal white highlights
- Status visualization: HP/MP/EXP bar charts for intuitive numerical display
- Ornate decoration: Corner ornaments and frames enhance the fantasy world atmosphere
#### 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
// RPG Gold Button
// RPG Outline Button
```
**Card**
```html
{/* Corner decoration */}
Character Status
HP234 / 500
```
---
### 非对称网格 (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
```
**Card**
```html
Featured
Breaking the Grid
Asymmetry creates visual tension and dynamic spatial interest.
```
---
### 视差滚动 (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.
```
#### 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
```
**Card**
```html
The Parallax View
Scroll to reveal layered storytelling. Foreground stays calm while background depth keeps moving.
```
---
### 暖色仪表盘 (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
```
**Card**
```html
Total Revenue
{/* 数据联动跳动 */}
$142,300
+12% from last month
```
---
### 霓虹渐变 (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`, `border`, `border-2`, `rounded-none`, `rounded-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
{/* 主按钮 - 流体霓虹 */}
{/* 次按钮 - 电流描边 */}
```
**Card**
```html
极速响应
渐变流动、双层色散发光与通电图标共同构成高能霓虹反馈。
```
---
### 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
```
**Card**
```html
Liquid Glass Card
多层玻璃体积感与流体折射叠加，营造空间计算般的前推深度。
```
---
### 北欧极简风 (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
```
**Card**
```html
Hygge Moment
Embracing the quiet comfort of simple things with balanced light, texture, and breath.
```
---
### 赛璐璐动画风 (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
```
**Card**
```html
Title
Content
```
---
### 侘寂风 (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
```
**Card**
```html
Imperfect Beauty
Nothing lasts, nothing is finished, and nothing is perfect. The aesthetic of the unfinished leaves space for the mind to wander.
```
---
### 枯山水 (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
```
**Card**
```html
静 寂
Listen to the sound of snow falling on moss. The mind becomes clear when the water is still.
```
---
### 科幻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
// Active HUD Button
// Danger HUD Button
```
**Card**
```html
```
---
### 可爱极简 (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
// Pastel Outline
// Gradient Kawaii
```
**Card**
```html
*
Sweet Feature
A delightful, marshmallow-soft experience designed with care and gentle playful energy.
```
---
### 黑色电影 (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
- 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)
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.
- Harsh Monochrome Swap: Primary button hover does hover:bg-neutral-100 hover:text-neutral-950 hover:border-neutral-100. Complete binary inversion (dark to light).
- Venetian Blinds Pattern: Cards have an absolute overlay with repeating-linear-gradient at opacity-0, transitioning to group-hover:opacity-[0.06]. Barely perceptible -- like light filtering through half-closed window blinds.
- 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.
- 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. NEVER use duration below 300ms.
```
#### 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 */}
{/* Ghost Noir */}
{/* Crimson Accent */}
```
**Card**
```html
{/* Venetian blinds light pattern — barely visible on hover */}
{/* Diagonal light shaft — shifts on hover */}
Case File #47
The Last Witness
The rain hammered against the window as the detective studied the photograph.
Something didn't add up.
{/* Crimson bleed line — expands from 48px to full width on hover */}
```
---
### 街机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
```
**Card**
```html
{/* Scanline overlay */}
Game Module
TITLE HERE
Description text with terminal green tint.
```
---
### 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. On group-hover, this brightens to from-white/80 to-white/20. Simulates classic Web 2.0 glossy top-half glass reflection.
- Aurora Orbs: Cards use two absolutely-positioned blur-3xl rounded-full divs (green + sky-blue). On group-hover, both scale to group-hover:scale-150 and intensify.
- Luminous Glow: Primary buttons hover to multi-shadow creating luminous aqua water glow.
- Jelly Bounce: active:scale-95 (not 0.98 or 0.97). The 5% compression is the Aero "jelly" squash.
- Card Float: hover:-translate-y-2 hover:scale-[1.02] -- more dramatic because glass panels feel lighter.
- Focus Ring on Sky: focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500.
```
#### 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 */}
{/* Secondary Aero Glass Button */}
```
**Card**
```html
Frosted glass panel with aurora atmosphere and glossy reflection.
```
---
### 反设计 (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)
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)
```
#### 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
```
**Card**
```html
CARD TITLE
Raw brutalist content block
```
---
### 网页粗野主义 (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
- 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 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
Animation & Interaction Rules:
- Zero Transition: ALL state changes must be instant. Always add transition-none. Hover, active, focus state switches happen at 0ms.
- Native Button Bevel: Buttons use Windows 95 raised border illusion. On :active, reverse the bevel. No shadow, no scale, no translate.
- Raw Focus: Never use focus:ring. Use focus:outline-dotted. For inputs, add focus:bg-[#ffffcc] for 90s yellow highlight.
- Link Hover: Only color change (blue to red) and existing underline. No other effects.
```
#### 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
```
**Card**
```html
```
---
### 全息渐变 (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
- All interactive elements should have prismatic box-shadow on hover
- Never use light/white backgrounds
- Never use flat solid colors without gradient treatment
Animation & Interaction Rules:
- Spectrum Shift: 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.
- Prismatic Glow: Button hover uses dual cyan+magenta glows. Card hover uses purple prism glow.
- Liquid Glass: Always use group class on card containers. Cards hover:-translate-y-2 with synchronized heading Spectrum Shift via group-hover:bg-right.
- Jelly Press: All buttons: active:scale-95 active:translate-y-0. Focus: focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f].
- Duration: Button transitions duration-500 ease-out. 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
```
**Card**
```html
Holographic Card
Prismatic glass panel with rainbow border glow
```
---
### 生成艺术 (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
```
**Card**
```html
Algorithm // 0x42
Perlin Noise
Gradient noise function for organic procedural textures. Seed dynamically injected.
```
---
### 粒子系统 (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
// Secondary Button
// Ghost Button
```
**Card**
```html
N
Feature Title
Description with clean readability on deep dark background.
```
---
### 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
```
**Card**
```html
{/* 扫描线与录像带杂音 */}
REC
NIGHT_DRIVE.AVI
> Playback tracking adjusted. Signal acquired.
```
---
### 赤陶暖调 (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
```
**Card**
```html
Earthen Craft
Molded by hand, baked by the sun. Interactions feel grounded, warm, and distinctly human.
```
---
### 单色极简 (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
```
**Card**
```html
The Silent Void
In the absence of color, form and space reveal their true essence.
Read More
```
---
### 水墨画风 (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
```
**Card**
```html
山水之间
Ink flows where the mind wanders. In the vast white space, the invisible landscape emerges.
```
---
### 中世纪现代 (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
```
**Card**
```html
{/* Starburst decoration */}
Atomic Living
Timeless design for the modern home. Where form meets function in perfect, analog harmony.
```
---
### 构成主义 (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
```
**Card**
```html
{/* Banner — switches from red to black on group-hover */}
MANIFESTO
{/* Diagonal accent line — tilted at rest, straightens on hover */}
Art must serve the revolution. Design is a weapon of progress and transformation.
{/* Color swatches — red/black swap on hover */}
```
---
### 欧普艺术 (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`, `rounded-full`, `shadow-sm`, `shadow`
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
```
**Card**
```html
{/* Concentric rings — spin on hover (Illusion Generation) */}
{[...Array(8)].map((_, i) => (
))}
Optical
The eye deceives. Geometry reveals truth hidden in plain sight.
```
---
### 伊斯兰几何 (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
```
**Card**
```html
Tessellation
Infinite patterns emerging from the profound unity of simple geometric forms.
```
---
### 印度节庆 (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
```
**Card**
```html
{/* Ceremonial Unfurling color strip */}
Festival of Lights
Illuminating every corner with warmth and joy
```
---
### 非洲纺织 (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
```
**Card**
```html
Kente Weave
Woven threads carry the stories of generations
```
---
### 韩式极简 (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
```
**Card**
```html
Gentle Touch
A slow and delicate interface rhythm, where warmth appears in quiet gradients.
```
---
### 粉彩哥特 (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
```
**Card**
```html
Midnight Garden
Where shadows bloom in pastel light, with a soft and rebellious undercurrent.
```
---
### 极繁主义 (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
```
**Card**
```html
{/* Decorative background layer */}
!!!
Featured
New
More is More
Why whisper when you can scream? Overlap, clash, and dominate the viewport.
```
---
### 中世纪手抄本 (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
```
**Card**
```html
+
+
+
+
I
lluminated
Written by the hand of the faithful scribe, where every stroke carries weight.
```
---
### 涂鸦街头 (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
```
**Card**
```html
{/* Spray paint drip decoration */}
Fresh
STREET ART
The wall is the canvas. The city is the gallery. Make it loud.
```
---
### 大理石奢华 (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
```
**Card**
```html
Collection
Carrara White
Timeless elegance carved from Italian marble, where every vein tells a story of geological artistry.
View Details →
```
---
### 维多利亚植物 (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
```
**Card**
```html
Rosa Damascena
Rosaceae Family, Plate IV.
IV
A heritage rose cultivar prized for its deep fragrance. Documented in the royal botanical surveys of 1842, preserved here in meticulous detail.
```
---
### 立体主义 (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
```
**Card**
```html
Analytical Phase
Deconstructing form into geometric planes, revealing multiple perspectives simultaneously.
```
---
### 热带天堂 (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
```
**Card**
```html
Bali Retreat
Escape to paradise with crystal waters and swaying palms. Let the warm breeze carry your worries away.
From $299/night
```
---
### 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
```
**Card**
```html
stylekit/design-system
Public
A comprehensive design token system for building consistent UIs
TypeScript
1.2k starsUpdated 2 hours ago
```
---
### 巫术核心 (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
// Rune Filled
// Amethyst Variant
```
**Card**
```html
Lunar Divination
The veils between worlds grow thin under the waning crescent.
```
---
### 霓虹东京 (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
```
**Card**
```html
Kabukicho
Midnight Alley
Neon signs flicker above rain-slicked streets, casting liquid color across the pavement.
```
---
### 纸艺手作 (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`, `text-white`, `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
// Paper Teal
// Paper Outline
```
**Card**
```html
{/* Back paper layer */}
{/* Middle paper layer */}
{/* Front card */}
Craft
Paper Origami
Fold, cut, and create layered paper sculptures with tactile handmade depth.
```
---
### 工程蓝图 (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)
// Blueprint Filled (CAD Confirm)
// Annotation Variant
```
**Card**
```html
Cross-section analysis of the primary load-bearing framework.
```
---
### 多巴胺设计 (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.
## Absolute Rules
- ALL colors must be high-saturation: #ff006e (pink), #8338ec (purple), #ffbe0b (yellow), #3a86ff (blue), #06d6a0 (green), #fb5607 (orange)
- Border-radius must be large: rounded-2xl minimum, rounded-full for buttons
- Shadows MUST be colored, never gray
- Typography is bold: font-black for headings, text-5xl+ for hero text
- Buttons are pill-shaped
## Forbidden
- Gray backgrounds or text
- Small border-radius
- Black/gray shadows
- Serif fonts, pastel colors, thin font weights
```
#### 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
```
**Card**
```html
New
Dopamine Boost
Colors that make you feel alive. Bold, bright, and unapologetically joyful.
```
---
### 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 — precise, restrained, developer-focused dark UI.
## Rules
- Background: #0a0a0b, always dark
- Text: white primary, zinc-400 secondary
- Borders: 1px border-white/10
- Brand: #5e6ad2 for CTAs only
- Font: Inter, tracking-tight
- Border-radius: rounded-lg max
## Forbidden
- Light backgrounds, large radius, colored shadows, decorative elements
```
#### 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
```
**Card**
```html
STY-1422h ago
Add dark mode support for dashboard
Implement theme switching with system preference detection and manual override.
FeatureIn Progress
```
---
### 清爽电商 (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
```
#### 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
```
**Card**
```html
Brand Name
Product Title
$49.00$65.00
```
---
### 奢品零售 (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.
## 绝对禁止
- 禁止使用饱和度高的彩色（破坏高端感）
- 禁止使用无衬线粗体作为主标题
- 禁止使用圆角超过 rounded-sm（奢品倾向直角或微圆角）
- 禁止大面积使用金色（金色只能是点缀）
- 禁止使用表情符号或卡通图形
- 禁止使用小尺寸产品图（奢品图片必须大而清晰）
## 必须遵守
- 使用暖白背景 bg-[#faf9f6] 而非纯白
- 标题使用衬线字体 font-serif text-[#1a1a1a]
- 金色点缀仅限边框、分隔线和图标：border-[#c9a96e] 或 text-[#c9a96e]
- 产品图片使用大面积展示，至少 aspect-[3/4]
- 按钮使用细边框样式 border border-[#1a1a1a] bg-transparent hover:bg-[#1a1a1a] hover:text-white
- 正文使用 tracking-wide 和 leading-relaxed 增加优雅感
- 使用 1px 分隔线 border-[#e8e0d4] 代替粗分割
## Absolute Rules
- Headings MUST use serif fonts
- Background must be warm white #faf9f6, never pure white
- Gold #c9a96e is accent ONLY — borders, dividers, small text
- Product images must be large (aspect-[3/4] minimum)
- Buttons must be outlined, not filled (hover inverts)
- All text must use generous tracking and leading
## 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), 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-[#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
```
**Card**
```html
Collection
Signature Piece
$1,280
```
---
### 鲜活市集 (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 a Fresh Market food e-commerce design expert.
## 绝对禁止
- 禁止使用冷色调背景（蓝灰等破坏暖色基调）
- 禁止使用直角 rounded-none（与友好感冲突）
- 禁止使用纯黑文字（用深棕 #8b4513 或深绿 #2d5016 替代）
- 禁止使用工业感字体（无衬线几何体等）
- 禁止使用霓虹色或荧光色
## 必须遵守
- 使用暖奶油底色 bg-[#fef9f0]
- 主按钮使用南瓜橙 bg-[#e8722a] text-white rounded-full
- 产品卡片使用大圆角 rounded-2xl shadow-sm
- 类目标签使用圆药丸形 rounded-full bg-[#d4e4bc] text-[#2d5016]
- 标题适度圆润：font-bold text-[#2d5016]
- 使用绿色 text-[#2d5016] 传达新鲜和有机
- 价格标签使用背景色块 bg-[#f5c542] text-[#8b4513] rounded-lg px-2
- 图片使用 rounded-xl overflow-hidden 柔化边缘
## Absolute Rules
- Background must be warm cream #fef9f0, never cold white or gray
- All corners must be rounded (minimum rounded-lg, prefer rounded-2xl)
- Green #2d5016 for headings and freshness signals
- Orange #e8722a for CTAs and energy
- No pure black — use deep brown #8b4513 or deep green
- Product images must be large and appetizing
## Responsive
- Mobile: single-column 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
- 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-[#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
```
**Card**
```html
Organic
Farm Fresh Avocados
500g, locally sourced
$4.99
```
---
### 数据密集 (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.
## 绝对禁止
- 禁止使用大间距 p-6 以上（浪费数据展示空间）
- 禁止使用大圆角 rounded-xl 以上（占用像素）
- 禁止使用大字号 text-lg 以上作为表格数据
- 禁止使用装饰性渐变或阴影（增加视觉噪音）
- 禁止隐藏重要操作在下拉菜单中（常用操作必须直接可见）
- 禁止使用大面积空白（数据优先）
## 必须遵守
- 使用白色 bg-white 搭配极浅蓝灰 bg-[#f8fafc] 交替行色
- 表格行高紧凑 py-2 text-sm 或 text-xs
- 状态标签使用颜色编码 bg-blue-50 text-blue-700 rounded px-1.5 py-0.5 text-xs
- 按钮使用小尺寸 px-2.5 py-1 text-xs rounded
- 间距统一使用 4px 递增：gap-1 gap-2 gap-3
- 表头使用 text-xs uppercase tracking-wide text-[#64748b] font-medium
- 使用 monospace 显示数字、ID、代码类数据
- 分隔线使用 border-[#e2e8f0] 细线
## Absolute Rules
- Maximum information density: py-2 or less for table rows
- All text in tables 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 be small: px-2.5 py-1 text-xs
- Table headers must be uppercase text-[10px] tracking-wide
## Responsive
- Mobile: horizontal scroll for tables, stacked cards for KPIs
- 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-lg`, `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
```
**Card**
```html
Revenue
$42,389
+12.5%
Orders
1,284
-3.2%
Users
8,921
+8.1%
```
---
### 超大字体排版 (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
```
**Card**
```html
01
Brand Identity
Art Direction — 2026
→
```
---
### 终端风 (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
```
**Card**
```html
visitor@stylekit:~$ whoami --verbose
[0] OK
# identity loaded from ~/.profile
name: "Full-stack Developer"
stack: [typescript, react, node]
uptime: 8 years
```
---
### 横滚画廊 (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
```
**Card**
```html
No. 01
Untitled Study
Archival Pigment Print, 2026
```
---
### 论文排版风 (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 */}
{/* Secondary: thin ruled outline */}
{/* Citation link: hyperref blue, like \cite{} */}
```
**Card**
```html
Theorem 1.{" "}
A layout in which every element carries a number can be referenced
without ambiguity; order, once visible, reads as credibility.
See Section 2.1 for the proof sketch.
```
---
### 学术科普风 (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 [1] 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 modeled on Distill.pub.
## Absolute Rules
- Pure white #FFFFFF background; #F3F4F6 for secondary surfaces only
- Serif body in #1F2933, column max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 only for links, citations, key emphasis
- Chart orange #E4572E only for data emphasis in figures
- Sidenotes float in the right margin on xl screens, collapse inline below
- Numbered superscript citations resolved in a references list
- Figures break the measure at max-w-4xl with "Fig. N:" captions
- Booktabs tables: horizontal rules only
## Forbidden
- Gradients, heavy shadows, radii beyond rounded-md
- Full-width prose, sans-serif body copy
- Zebra striping and vertical table rules
## Responsive
- Mobile: inline sidenotes, scrollable wide tables
- Desktop: floating margin sidenotes beside a centered 42rem column
```
#### 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
```
**Card**
```html
Abstract
Why Momentum Really Works
We derive a closed-form view of momentum[1] and visualize its damping behavior across the eigenspace of the loss surface.
Gabriel Goh - Distill, 2017 - DOI 10.23915/distill.00006
SN. 边注：小屏内联折叠，大屏悬浮右缘。
```
---
### 创意工作室风 (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 for bold agency portfolios.
## Absolute Rules
- Dark #1A1A1A hero/footer; warm sand #F5F5F0 content sections; deep #0D0D0D footer bottom
- Sans-serif only: body font-light/font-normal, headings font-bold/font-black
- Coral #FF6B6B is the sole accent color
- Sections transition via bg color blocks (no borders between sections)
- Cards: no default radius, hover: scale-[1.02] + shadow-2xl + coral title
- CTAs: bg-[#FF6B6B] text-white font-bold, hover scale + shadow + translate
- Nav: fixed, bg-[#1A1A1A]/95 backdrop-blur, hover turns coral
- Avatars: rounded-full with white border
## Forbidden
- Serif fonts, pure white backgrounds, single-axis hovers
- Borders between sections, rounded-lg+ on containers
- Hero headings below text-5xl, subtle shadows
## Responsive
- Mobile: single column, hamburger nav
- Desktop: 3-column grid, full nav
```
#### 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
```
**Card**
```html
Branding2024
Project Title
A bold rebrand for a forward-thinking design studio. Strategy, identity, and digital execution.
View Case Study→
```
---
### 暗色画廊风 (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
```
**Card**
```html
[ Full-Bleed Image ]
Tokyo, 2026
Between Shadows
Archival pigment print, 80 x 120 cm
```
---
### 暖感有机风 (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 (earthy portfolio) design expert specializing in natural, handcrafted visual language. All generated code must strictly follow these constraints:
## 绝对禁止
- 禁止使用冷灰色 #999 / #6B7280 作为文字或背景中性色——所有中性色必须偏暖
- 禁止高饱和霓虹色或冷调蓝——#C86A4A 陶土红和 #7A8B5E 橄榄绿是唯二的强调色
- 禁止玻璃拟态（backdrop-blur + 半透明白）——有机质感来自暖色分层与软阴影，不是毛玻璃
- 禁止正文使用纯黑 #000000，#2D2A24 深褐是正文颜色的上限
## 必须遵守
- 背景使用 bg-[#F5F0EB] 暖白底色，卡片和面板用 bg-[#E8DED1] 或 bg-white/60 半透明白叠加
- 圆角统一为 rounded-lg，粗看是圆角但曲率自然，像水流打磨过的鹅卵石
- 卡片阴影用 warm shadow：shadow-[0_4px_20px_-4px_rgba(45,42,36,0.12)] 暖褐半透，不用冷灰
- 正文使用 font-sans text-[#2D2A24] leading-relaxed，标题用 font-serif font-medium 或 font-sans font-light tracking-wide
- 强调色用 text-[#C86A4A] 陶土红做链接与 CTA，bg-[#C86A4A] 做按钮；橄榄绿 text-[#7A8B5E] 做二级标签与自然元素
- 分割线用 warm hairline：border-t border-[#D4BFA5] opacity-60，像纸张叠放留下的自然阴影
- 输入框用 bg-[#E8DED1]/40 暖灰底、border-[#D4BFA5] 边线、focus 时切换陶土色 border-[#C86A4A] ring-1 ring-[#C86A4A]/20
- 装饰分隔元素用圆形或有机形状：w-12 h-12 rounded-full bg-[#D4BFA5]/30 配合极细橄榄绿点
## Absolute Rules
- Page background: bg-[#F5F0EB] (unbleached paper); card backgrounds: bg-[#E8DED1] (sand) or bg-white/60 translucent
- Primary text: text-[#2D2A24] (deep warm brown); never pure black #000000
- Primary accent: bg-[#C86A4A] / text-[#C86A4A] (terracotta) for buttons, links, and CTAs
- Secondary accent: bg-[#7A8B5E] / text-[#7A8B5E] (olive green) for tags, natural elements, and secondary emphasis
- Neutral surfaces: bg-[#D4BFA5] (clay) for subtle backgrounds; border-[#D4BFA5] for hairline dividers
- Radii: rounded-lg is the standard; never go above rounded-lg or below rounded-md
- Shadows: use warm brown rgba(45,42,36,0.12) not cold gray; card shadow: shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]
- Heading typography: font-serif font-medium or font-sans font-light tracking-wide
- Body typography: font-sans text-[#2D2A24] leading-relaxed
- Dividers: border-[#D4BFA5] with opacity-60, warm-toned not cool gray
- Decorative elements: small circular dots (w-2 h-2 rounded-full) in terracotta or olive tones
## Layout & Spacing
- Section padding: py-16 md:py-24
- Container max width: max-w-5xl or max-w-4xl for prose
- Card spacing: gap-6 md:gap-8
- Card padding: p-5 md:p-6
- Content column: max-w-3xl mx-auto for centered prose
## Responsive
- Mobile: single column, compact card padding
- Tablet (768px+): two-column grids for project cards
- Desktop (1024px+): wider cards, richer shadows, expanded whitespace
## Self-Check
After generating code, verify:
1. Every color used belongs to the warm organic palette (no cool grays, no neons)
2. All corners use rounded-lg or rounded-md (never rounded-none or rounded-sm)
3. Shadows use warm brown rgba(45,42,36,*) not #000 or cool gray
4. Body text is #2D2A24 not #000000
5. Only accent colors present: terracotta #C86A4A and olive #7A8B5E
6. All neutral tones lean warm (sand, clay, paper 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
```
**Card**
```html
Project
Clay House
A residential project in the Catalonian countryside, built with rammed earth and local terracotta tiles.
Architecture · 2025
```
---
## 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/
