0 Fork 0

Files

T

neo 76c4c5b4fe design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)

- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc.
- 147 files: DESIGN.md + README.md per brand (~2.1 MB)
- Each DESIGN.md contains structured brand analysis (colors, typography, components)
- Updated 00-overview.md with new design-systems directory

2026-06-21 20:40:35 +05:00

5.7 KiB

Raw Permalink Blame History

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
🏢 Brand Design Systems	74 brands (147 DESIGN.md)	✅ Complete
Total	82 patterns + 74 brand systems + 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
├── design-systems/
│   ├── airbnb/
│   │   ├── DESIGN.md (brand analysis: colors, typography, components)
│   │   └── README.md
│   ├── stripe/
│   │   ├── DESIGN.md
│   │   └── README.md
│   ├── ... (72 more brands)
│   └── zapier/
│       ├── DESIGN.md
│       └── README.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:

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

For Designers:

Review pattern files for code examples
Use assets for icons and graphics
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

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

5.7 KiB Raw Permalink Blame History