---
title: Premium Design Wiki — Overview
description: Central index for all 82 design patterns, LLM prompts, and assets.
version: 2.2.0
date: 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/
    │   ├── carbon/ (2673 SVG icons, 2.5 MB)
    │   │   ├── actions/ — add, delete, edit, save, download, upload, search...
    │   │   ├── arrows/ — arrow--*, chevron--*, caret--*...
    │   │   ├── communication/ — chat, email, message, phone, share...
    │   │   ├── content/ — image, video, document, table, chart...
    │   │   ├── data/ — analytics, bar-chart, pie-chart, funnel...
    │   │   ├── development/ — code, api, terminal, server, database...
    │   │   ├── editor/ — edit, pencil, highlight, font...
    │   │   ├── navigation/ — chevron, caret, skip, home...
    │   │   ├── people/ — user, avatar, people, team, profile...
    │   │   ├── system/ — warning, error, checkmark, info, caution...
    │   │   ├── media/ — play, pause, stop, volume, film...
    │   │   ├── organization/ — app, folder, tag, bookmark, location...
    │   │   ├── shapes/ — circle, square, triangle, diamond...
    │   │   ├── time/ — calendar, clock, date, schedule...
    │   │   ├── weather/ — sun, moon, cloud, rain, snow...
    │   │   ├── finance/ — currency, payment, credit-card, wallet...
    │   │   ├── security/ — lock, shield, key, password, biometric...
    │   │   └── file-types/ — PDF, DOC, XLS, PPT, CSV, ZIP...
    │   ├── carbon-pictograms/ (1000 SVG pictograms, 2.0 MB)
    │   │   └── 24x24 SVG illustrations (cloud, infrastructure, security...)
    │   ├── 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