wow-design-wiki/00-overview.md

title, description, version, date

title	description	version	date
Premium Design Wiki — Overview	Central index for all 82 design patterns, LLM prompts, and assets.	2.2.0	2026-06-20

Premium Design Wiki

Mission

Encode premium web design taste into reusable patterns so LLMs can generate professional, conversion-optimized, visually stunning websites.

📊 Progress

Category	Patterns	Status
🏗️ Layout	7 patterns	✅ Complete
🏃 Motion	7 patterns	✅ Complete
✒️ Typography	3 patterns	✅ Complete
🎬 Media	4 patterns	✅ Complete
🧠 Psychology	4 patterns	✅ Complete
🎨 Systems	6 patterns	✅ Complete
🌐 Mobile	21 token systems	✅ Complete
🎯 Landing	25 patterns	✅ Complete
🎬 Blender Pipeline	1 pipeline spec	✅ Complete
⚙️ Deterministic Gen	1 methodology	✅ Complete
Total	82 patterns + assets	✅ Complete

📁 Structure

wow-design-wiki/
├── 00-overview.md
├── concepts/
│   ├── industry-color-systems.md
│   ├── mobile-design-tokens.md
│   └── ux-guidelines-99.md
├── layout/
│   ├── bento-grid.md
│   ├── card-grid.md
│   ├── feature-list.md
│   ├── full-bleed-content.md
│   ├── hero-variations.md
│   ├── landing-patterns.md
│   ├── overlapping-layers.md
│   └── sticky-feature.md
├── motion/
│   ├── animated-gradient.md
│   ├── hover-micro-interaction.md
│   ├── magnetic-button.md
│   ├── page-transitions.md
│   ├── parallax-scroll.md
│   ├── pattern-animations.md
│   ├── procedural-patterns.md
│   └── staggered-reveal.md
├── typography/
│   ├── font-pairing.md
│   ├── gradient-text-reveal.md
│   └── kinetic-text.md
├── media/
│   ├── animated-illustration.md
│   ├── blender-pipeline.md
│   ├── image-parallax.md
│   ├── svg-animation.md
│   └── video-mask.md
├── psychology/
│   ├── cognitive-fluency.md
│   ├── testimonials.md
│   ├── trust-signals.md
│   └── visual-hierarchy.md
├── system/
│   ├── component-patterns.md
│   ├── css-architecture.md
│   ├── design-tokens.md
│   ├── deterministic-generation.md
│   ├── glassmorphism.md
│   ├── noise-texture.md
│   └── responsive-patterns.md
├── prompts/
│   ├── 00-master-prompt.md
│   ├── layout/00-layout-prompts.md
│   ├── motion/00-motion-prompts.md
│   ├── typography/00-typography-prompts.md
│   ├── media/00-media-prompts.md
│   ├── psychology/00-psychology-prompts.md
│   └── system/00-system-prompts.md
└── assets/
    ├── icons/ (22 SVG icons)
    ├── gradients/
    └── patterns/

🎯 How to Use

For LLMs:

1. Read prompts/00-master-prompt.md for system instructions
2. Reference specific pattern files (e.g., layout/bento-grid.md)
3. Use prompts from category folders for quick generation

For Designers:

1. Review pattern files for code examples
2. Use assets for icons and graphics
3. Validate with CV Service

📐 Design System

• Colors: Dark theme (#0a0a0a bg, #111111 surfaces)
• Accent: #6366f1 (indigo)
• Typography: Inter font, 1.25 scale ratio
• Spacing: 4-128px scale
• Motion: 0.3s ease-out for hovers, 0.6s for reveals

🚀 Next Steps

1. Test patterns with CV Service validation
2. Create real-world examples
3. Export as HyperFrames composition
4. Package as SaaS tool for agencies