neo/wow-design-wiki
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: 79+ design patterns, LLM prompts, and assets

Browse Source
This commit is contained in:
Neo committed 2026-06-20 17:06:07 +05:00
commit 2b42a76d6d
112 files changed
+13652
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

00-overview.md
+113
View File
@@ -0,0 +1,113 @@
---
title: Premium Design Wiki — Overview
description: Central index for all 79 design patterns, LLM prompts, and assets.
version: 2.1.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 |
| **Total** | **79 patterns** | **✅ 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
│ ├── procedural-patterns.md
│ └── staggered-reveal.md
├── typography/
│ ├── font-pairing.md
│ ├── gradient-text-reveal.md
│ └── kinetic-text.md
├── media/
│ ├── animated-illustration.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
│ ├── 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
assets/icons/icon-arrow-right.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"/>
<polyline points="12 5 19 12 12 19"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

assets/icons/icon-arrow-up.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="19" x2="12" y2="5"/>
<polyline points="5 12 12 5 19 12"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

assets/icons/icon-bell.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

assets/icons/icon-bolt.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 247 B

assets/icons/icon-calendar.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

assets/icons/icon-chart.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3v18h18"/>
<path d="M18 17V9"/>
<path d="M13 17V5"/>
<path d="M8 17v-3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

assets/icons/icon-check-circle.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="16 12 13 15 10 11"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

assets/icons/icon-check.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

assets/icons/icon-close.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

assets/icons/icon-code.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

assets/icons/icon-download.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 320 B

assets/icons/icon-filter.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

assets/icons/icon-globe.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 364 B

assets/icons/icon-hamburger.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

assets/icons/icon-headphones.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

assets/icons/icon-heart.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

assets/icons/icon-lock.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

assets/icons/icon-menu.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

assets/icons/icon-mic.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 265 B

assets/icons/icon-play.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6366f1" stroke="none">
<polygon points="5 3 19 12 5 21 5 3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 160 B

assets/icons/icon-rocket.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.5 3.5C13.5 2.12 12.38 1 11 1S8.5 2.12 8.5 3.5V5H7C5.34 5 4 6.34 4 8v3c0 1.66 1.34 3 3 3h1.5l-1 2H7l1 2h10l1-2h-1.5l-1-2h1.5c1.66 0 3-1.34 3-3V8c0-1.66-1.34-3-3-3h-1.5V3.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

assets/icons/icon-search.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 265 B

assets/icons/icon-settings.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

assets/icons/icon-shield.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

assets/icons/icon-star.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

assets/icons/icon-upload.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

assets/icons/icon-users.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

assets/icons/icon-x.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 298 B

assets/icons/icon-zap.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#10b981" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 247 B

concepts/accessibility-standards.md
+63
View File
@@ -0,0 +1,63 @@
---
title: Accessibility (WCAG) Standards
description: Web accessibility guidelines for premium design.
tags: [accessibility, wcag, contrast, screen-reader, keyboard]
---
# Accessibility (WCAG) Standards
## WCAG 2.1 Level AA Requirements
### 1. Perceivable
- Text alternatives for non-text content
- Captions for multimedia
- Content adaptable (1 column, no scroll)
- Color contrast: 4.5:1 (normal), 3:1 (large)
### 2. Operable
- Keyboard accessible
- Enough time to read/use
- No flashing >3 times/second
- Navigable (skip links, headings, focus)
### 3. Understandable
- Readable text
- Predictable navigation
- Input assistance (labels, placeholders)
### 4. Robust
- Compatible with assistive tech
- Valid HTML
- ARIA labels where needed
## Focus Management
```css
:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
border-radius: 2px;
}
```
## Screen Reader Patterns
```html
<!-- Skip link -->
<a href="#main" class="skip-link">Skip to content</a>
<!-- Landmarks -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- Live regions -->
<div aria-live="polite" role="status">Loading...</div>
```
## Anti-Patterns
- Never rely on color alone
- Never remove focus outlines without replacement
- Never use `display: none` for hiding content that should be accessible
- Never skip heading hierarchy (h1 → h2 → h3)
concepts/animation-physics.md
+62
View File
@@ -0,0 +1,62 @@
---
title: Animation Physics & Easing
description: Natural-feeling animations that follow physical principles.
tags: [animation, physics, easing, motion, motion-design]
---
# Animation Physics & Easing
## Easing Curves
### ease-out (default)
```
cubic-bezier(0.25, 0.1, 0.25, 1.0)
```
- Use for: entrances, hovers, reveals
- Feel: snappy, confident
### ease-in-out
```
cubic-bezier(0.4, 0.0, 0.2, 1.0)
```
- Use for: page transitions, modals
- Feel: smooth, balanced
### spring (natural bounce)
```
cubic-bezier(0.34, 1.56, 0.64, 1.0)
```
- Use for: magnetic buttons, pull-to-refresh
- Feel: lively, tactile
## Duration Scale
| Context | Duration | Use Case |
|---------|----------|----------|
| Fast | 150ms | Icon hover, tooltip |
| Normal | 300ms | Button hover, card lift |
| Slow | 500ms | Page transitions, modals |
| Epic | 800ms | Hero section reveals |
## Stagger Timing
```
stagger = 0.06s - 0.12s per element
```
- Grid items: 0.08s
- List items: 0.06s
- Navigation: 0.05s
## Physics Rules
1. **Objects don't start at max speed** — always ease-out
2. **Heavier elements move slower** — scale duration with size
3. **Movement creates momentum** — add overshoot for spring effects
4. **Elements react to each other** — chain animations logically
5. **Silence matters** — pause between animation sequences
## Anti-Patterns
- Never use linear easing (feels robotic)
- Never animate everything at once (stagger!)
- Never exceed 500ms for micro-interactions
- Never ignore `prefers-reduced-motion`
concepts/ant-design-chinese-systems.md
+60
View File
@@ -0,0 +1,60 @@
---
title: Ant Design and Chinese Enterprise Design Systems
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, design-system, chinese-design]
sources:
- raw/articles/web-design-research.md
- https://ant.design/
- https://tdesign.tencent.com/
confidence: high
---
# Ant Design и Китайские Enterprise-дизайн системы
## Ant Design (Ant Group / Alibaba)
Самая популярная enterprise-дизайн система в мире (после Material Design).
### 5 принципов Ant Design
1. **Proximity** — близость: связанные элементы группируются
2. **Alignment** — выравнивание: создаёт визуальный порядок
3. **Contrast** — контраст: выделяет важное
4. **Repetition** — повторение: создаёт единообразие
5. **Consistency** — последовательность: основа доверия
### Ценности дизайн-языка
- **Natural** — естественность: интеракции, следующие физическому миру
- **Certain** — определённость: предсказуемое поведение интерфейса
- **Meaningful** — осмысленность: каждый элемент служит цели
- **Growing** — рост: система развивается с пользователем
### Техническая база
- React-компоненты (TypeScript)
- Design Tokens (CSS Variables)
- 70+ компонентов
- Темы: светлая, тёмная, кастомная
- i18n (включая 50+ языков)
## TDesign (Tencent)
Китайская альтернатива Ant Design от Tencent.
### Особенности
- Vue 3, React, Angular, Mobile — 4 фреймворка сразу
- 500+ компонентов (один из самых больших наборов)
- Цветовая система на основе оттенков (10 ступеней на цвет)
- Адаптивная: desktop → mobile одной библиотекой
- Полностью открытая (MIT)
## Общие черты китайских дизайн-систем
- Высокая плотность контента (по умолчанию compact mode)
- Вертикальная ориентация (узкие экраны — стандарт)
- Многоцветность (богатые палитры, градиенты)
- Enterprise-first (мощные таблицы, фильтры, дашборды)
- Анимация как часть дизайна (микро-взаимодействия обязательны)
## Применение для российских сайтов
- взять систему токенов и компонентный подход
- использовать compact mode для информативных дашбордов
- кастомизировать цвета под российский рынок (не ярко-красный, а приглушённый)
- анимации умеренно — для РФ важнее скорость загрузки (медленный интернет в регионах)
concepts/apple-hig-principles.md
+48
View File
@@ -0,0 +1,48 @@
---
title: Apple HIG Design Principles
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, ux]
sources:
- https://developer.apple.com/design/human-interface-guidelines/
- https://applemagazine.com/apple-human-interface-blueprint/
confidence: high
---
# Apple Human Interface Guidelines — Ключевые принципы
## 3 столпа философии дизайна Apple
### Clarity (Ясность)
Контент — король. UI-элементы не должны конкурировать с контентом.
- Чистая типографика, достаточный размер шрифта
- Минимум декоративных элементов
- Иконки должны быть простыми и узнаваемыми
- Цвет используется осмысленно — для акцентов, а не украшения
### Deference (Уважение)
Интерфейс служит контенту, а не наоборот.
- Прозрачные панели, blur-эффекты создают ощущение контекста
- UI-элементы исчезают, когда не нужны
- Анимация лишь поддерживает взаимодействие, не доминирует
### Depth (Глубина)
Визуальная иерархия через слои и движение.
- Параллакс, тени, наслоение создают иллюзию трёхмерности
- Реалистичное движение помогает понимать, откуда пришёл элемент
- Navigate через жесты (swipe back) — физическая метафора
## Практические правила Apple HIG
1. **Aesthetic Integrity** — визуальный стиль соответствует функции (игровой UI ≠ корпоративный UI)
2. **Consistency** — стандартные жесты, паттерны, иконки по всей платформе
3. **Direct Manipulation** — пользователь управляет объектами напрямую (слайдер, перетаскивание)
4. **Feedback** — каждое действие получает отклик
5. **Metaphors** — виртуальные объекты ведут себя как физические (перелистывание страниц)
6. **User Control** — пользователь инициирует действия, а не система
## Применение к веб-дизайну (не iOS)
- **Clarity**: использовать крупные заголовки, чёткую типографику, минимум UI-шума
- **Deference**: контентные секции с прозрачными разделителями, CTA под контент
- **Depth**: плавные page-transitions, hover-эффекты с тенью, cascade-слои
- **Aesthetic Integrity**: стиль под цель — для лендинга больше пространства, для магазина — плотнее
concepts/checkout-ux-baymard.md
+45
View File
@@ -0,0 +1,45 @@
---
title: Checkout UX Research (Baymard)
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, ux, conversion]
sources:
- https://baymard.com/blog/current-state-of-checkout-ux
- https://baymard.com/lists/cart-abandonment-rate
confidence: high
---
# Checkout UX Research — Baymard Institute
## Контекст
Baymard Institute — независимый датский исследовательский институт.
Проанализировали 326 топовых e-commerce сайтов, тысячи аннотированных скриншотов.
## Ключевые цифры
- **65%** топовых e-commerce сайтов показывают «посредственный» или худший UX в checkout
- **$260 млрд** — восстановимый объём брошенных корзин в год
- **11 ключевых проблем** в checkout (обновлено 2025–2026)
## Топ-3 проблемы checkout (Baymard 2025–2026)
### 1. Слишком строгие требования к паролю (65% сайтов ошибаются)
Сложные требования к паролю вызывают до **19% отказов** от оформления у существующих пользователей (не могут войти).
**Решение**: минимум требований — 6-8 символов. Использовать magic links, 2FA вместо сложных паролей.
### 2. «Дата доставки» вместо «Скорости доставки» (48% ошибаются)
Пользователя интересует: «Когда я получу заказ?», а не «Скорость доставки».
**Решение**: показывать конкретную дату вместо «2-5 рабочих дней».
Пример: «Заказ прибудет во вторник, 8 июня» вместо «Standard: 4-7 Business Days».
### 3. Излишняя сложность регистрации
Принуждение к созданию аккаунта — одна из главных причин бросания корзины.
**Решение**: Guest checkout как опция по умолчанию. Account creation опционально или после покупки.
## Практические выводы (адаптировано для российского рынка)
- Guest checkout — обязателен (в РФ особенно: пользователи не доверяют регистрации)
- Показывать реальную дату доставки по адресу (через API СДЭК/Почты)
- Минимум обязательных полей в форме
- Индикатор прогресса (шаг 1 из 3)
- Безопасность: иконка замка, https, логотипы платёжных систем
- НЕ просить подтверждение email до завершения оплаты
concepts/clarity-vs-creativity.md
+41
View File
@@ -0,0 +1,41 @@
---
title: Clarity vs Creativity
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, clarity-vs-creativity]
sources:
- raw/articles/crawford-conversion-principles.md
- raw/articles/crawford-15-tips.md
- raw/articles/crawford-26-lessons.md
confidence: high
---
# Clarity vs Creativity — Ясность vs Креативность
## Центральный принцип Crawford
> **Clarity beats design every time.**
> Уродливые сайты генерируют миллионы. Красивые — ноль конверсий.
> Разница в ясности.
## Homepage за 2 секунды
Пользователь должен понять:
1. Что это?
2. Для кого?
3. Что делать?
Если нет — сайт провален, независимо от красоты дизайна.
## Когда креативность оправдана
- Когда она усиливает ясность, а не заменяет её
- В брендинге, анимациях, деталях
- В дизайн-системах творческих индустрий
## Когда креативность вредит
- Анимация ради анимации
- Нестандартная навигация
- Сложные визуалы, замедляющие понимание
- Жаргон вместо ясного текста
## Принцип: Consistency beats cleverness
Скучная, но последовательная система победит умную, но хаотичную.
concepts/color-theory.md
+60
View File
@@ -0,0 +1,60 @@
---
title: Color Theory for Web
description: Understanding color harmony, contrast, and psychological impact.
tags: [color, theory, psychology, contrast, harmony]
---
# Color Theory for Web
## Color Harmony Models
### Monochromatic (Safe)
- Single hue with tints/shades
- Use: backgrounds, subtle UI
- Example: `#0a0a0a` → `#1a1a1a` → `#2a2a2a`
### Analogous (Natural)
- Colors next to each other on wheel
- Use: gradients, section backgrounds
- Example: `#6366f1` → `#8b5cf6` → `#a78bfa`
### Complementary (Bold)
- Opposite colors on wheel
- Use: CTAs, accent elements
- Example: `#6366f1` + `#f59e0b`
### Triadic (Vibrant)
- Three colors 120° apart
- Use: feature cards, badges
- Example: `#6366f1` + `#10b981` + `#f59e0b`
## Color Roles
| Role | Ratio | Purpose | Example |
|------|-------|---------|---------|
| Background | 60% | Canvas | `#0a0a0a` |
| Surface | 30% | Cards, sections | `#111111` |
| Accent | 10% | CTA, links, highlights | `#6366f1` |
## WCAG Contrast Ratios
| Level | Ratio | Use Case |
|-------|-------|----------|
| AA Normal | 4.5:1 | Body text (16px) |
| AA Large | 3:1 | Headings, icons >24px |
| AAA | 7:1 | Critical information |
## Psychological Color Mapping
- **Blue (#6366f1)**: Trust, technology, reliability
- **Green (#10b981)**: Success, growth, action
- **Orange (#f59e0b)**: Warning, urgency, attention
- **Red (#ef4444)**: Error, danger, delete
- **Purple (#8b5cf6)**: Creativity, premium, AI
- **Cyan (#06b6d4)**: Innovation, futuristic, data
## Anti-Patterns
- Never use more than 3 accent colors
- Never put accent color on text without checking contrast
- Never use pure `#000000` or `#ffffff`
- Never ignore dark/light mode variants
concepts/customer-journey-mapping.md
+63
View File
@@ -0,0 +1,63 @@
---
title: Customer Journey Mapping
description: Designing for each stage of the user's decision process.
tags: [journey, mapping, UX, conversion, funnel]
---
# Customer Journey Mapping
## 6 Stages of Customer Journey
### 1. Awareness
- **Goal:** Capture attention
- **Design:** Hero with bold statement
- **Metrics:** Time on page, scroll depth
### 2. Interest
- **Goal:** Engage with content
- **Design:** Problem metrics, social proof
- **Metrics:** Scroll depth, section engagement
### 3. Consideration
- **Goal:** Evaluate solution
- **Design:** Feature comparison, pricing
- **Metrics:** Pricing page views, CTA clicks
### 4. Evaluation
- **Goal:** Build trust
- **Design:** Testimonials, case studies
- **Metrics:** Trust signal clicks, form fills
### 5. Decision
- **Goal:** Convert
- **Design:** CTA above the fold, guarantee
- **Metrics:** Conversion rate, form submissions
### 6. Retention
- **Goal:** Keep engaged
- **Design:** Onboarding, newsletter signup
- **Metrics:** Activation rate, engagement
## Landing Page Journey Flow
```
Hero (Awareness)
↓
Problem (Interest)
↓
Solution (Consideration)
↓
Features (Evaluation)
↓
Social Proof (Trust)
↓
Pricing (Decision)
↓
CTA (Conversion)
```
## Anti-Patterns
- Don't put pricing before social proof
- Don't ask for too much information upfront
- Don't hide CTA below the fold
- Don't skip mobile experience
concepts/dark-mode-design.md
+57
View File
@@ -0,0 +1,57 @@
---
title: Dark Mode Design Patterns
description: Best practices for dark-themed premium websites.
tags: [design, dark-mode, accessibility, patterns]
---
# Dark Mode Design Patterns
## Core Principles
### 1. Not Pure Black
- Background: `#0a0a0a` or `#111111` (not `#000000`)
- Pure black causes eye strain on OLED
- Subtle gradient: `#0a0a0a` → `#0f0f0f`
### 2. Surface Hierarchy
- Layer 1 (bg): `#0a0a0a`
- Layer 2 (cards): `#111111`
- Layer 3 (elevated): `#1a1a1a`
- Elevation via lighter shade, not shadow
### 3. Text Colors
- Primary: `#f5f5f5` (90% white)
- Secondary: `#a0a0a0` (60% white)
- Muted: `#666666` (40% white)
- Never use pure `#ffffff` (too harsh)
### 4. Border Treatment
- Use `rgba(255,255,255,0.08)` for subtle borders
- Hover states: `rgba(255,255,255,0.15)`
- Focus states: `accent-color` ring
### 5. Accent Colors
- Lighter variants work better on dark
- `#6366f1` → `#818cf8` for hover
- Ensure 3:1 contrast ratio for accents
## CSS Implementation
```css
:root {
--bg-primary: #0a0a0a;
--bg-surface: #111111;
--bg-elevated: #1a1a1a;
--text-primary: #f5f5f5;
--text-secondary: #a0a0a0;
--text-muted: #666666;
--border-subtle: rgba(255,255,255,0.08);
--accent-primary: #6366f1;
--accent-hover: #818cf8;
}
```
## Anti-Patterns
- Never use pure `#000000` background
- Never use pure `#ffffff` text
- Never rely on shadows for elevation in dark mode
- Never skip contrast checking (WCAG AA minimum)
concepts/design-principles.md
+37
View File
@@ -0,0 +1,37 @@
---
title: Design Principles for Conversion
description: Core design principles that drive conversions on premium landing pages.
tags: [design, conversion, psychology, principles]
---
# Design Principles for Conversion
## 1. Visual Hierarchy
- Size = importance (H1 > H2 > Body > Caption)
- Color = action (CTA buttons should be most contrasting)
- Whitespace = focus (isolate key elements)
## 2. Fitt's Law
- Make CTAs large and easily clickable
- Place important actions within thumb reach on mobile
- Use 48x48px minimum touch targets
## 3. Hick's Law
- Simplify choices on first view
- Progressive disclosure: show more on interaction
- Limit CTA buttons to 1-2 per section
## 4. Weber-Fechner Law
- Gradual changes feel natural
- Animations should be smooth (ease-in-out)
- Incremental reveal builds anticipation
## 5. Von Restorff Effect
- Stand-out elements are remembered
- Use accent color for primary CTA
- Unique visual treatment for key metrics
## Anti-Patterns
- Don't use accent color for everything
- Don't make all headings the same size
- Don't cram content — respect whitespace
concepts/design-systems.md
+49
View File
@@ -0,0 +1,49 @@
---
title: Brand Identity Design
description: Building consistent brand identity across web presence.
tags: [brand, identity, logo, colors, typography, consistency]
---
# Brand Identity Design
## Brand Elements Hierarchy
### 1. Logo
- Primary: Full logo with wordmark
- Secondary: Icon-only for favicons
- Monochrome: For dark/light backgrounds
- Minimum size: 32px height
### 2. Color Palette
```
Brand Colors:
├── Primary: #6366f1
├── Secondary: #8b5cf6
├── Accent: #10b981
└── Neutrals: #f5f5f5, #a0a0a0, #666666, #111111
```
### 3. Typography
- Display font: For headings
- Body font: For content
- Max 2 type families per brand
### 4. Imagery Style
- Photography: Consistent lighting, mood
- Illustrations: Flat, isometric, or abstract
- Icons: 2px stroke, consistent style
## Brand Voice Guidelines
| Channel | Tone | Example |
|---------|------|---------|
| Website | Professional, clear | "Simplify your workflow" |
| Social | Conversational | "Try it out today!" |
| Email | Personal, direct | "Hi John, we noticed..." |
| Support | Empathetic, helpful | "Let's figure this out together" |
## Anti-Patterns
- Never use more than 2 primary colors
- Never change fonts without approval
- Never stretch or distort logo
- Never ignore brand guidelines
concepts/dots-mocr.md
+108
View File
@@ -0,0 +1,108 @@
---
title: dots.mocr — Multimodal OCR
created: 2026-06-15
updated: 2026-06-15
type: concept
tags: [ocr, inference, local-llm, pdf, parsing]
confidence: high
---
# dots.mocr — Multimodal OCR
**dots.mocr** — мультимодальная OCR-модель от [[xiaohongshu]] (小红书, rednote-hilab), 3B параметров на базе Qwen3-VL-4B. Распознаёт текст на русском, английском, китайском и других языках. Парсит PDF и изображения в структурированные данные (JSON + Markdown + визуализация).
- Репозиторий: https://github.com/rednote-hilab/dots.mocr
- Модель: https://huggingface.co/rednote-hilab/dots.mocr
- arXiv: https://arxiv.org/abs/2603.13032
## Сетап
**Директория:** `/home/nik/workspace/dots.mocr/`
**Окружение:** Python 3.12 (через `uv`), `.venv/`
**Зависимости:** PyTorch 2.7+ cu128, vLLM 0.23, transformers 4.57, PyMuPDF, flash-attn
```yaml
GPU: RTX 3080 Ti (12GB) — выделена под dots.mocr
CUDA_VISIBLE_DEVICES=1 (через враппер run_vllm_gpu1.py)
Порт: 8000
max_model_len: 16384 (ограничение VRAM)
```
## Запуск
### 1. Сервер vLLM
```bash
cd ~/workspace/dots.mocr
source .venv/bin/activate
python run_vllm_gpu1.py
```
Грузится ~50 сек, после этого отвечает на порту 8000.
### 2. Парсинг PDF/изображения
```bash
# Базовый запуск
python3 dots_mocr/parser.py file.pdf --port 8000 --model_name model \
--num_thread 8 --max_completion_tokens 12000
# Только текст (чистый md, без layout-разметки и base64-картинок) — быстрее
python3 dots_mocr/parser.py file.pdf --port 8000 --model_name model \
--num_thread 8 --max_completion_tokens 12000 --prompt prompt_ocr
# Или через скрипт-помощник
./parse.sh file.pdf --output ./results --prompt prompt_ocr
```
### 3. Получение результатов
```
results/ИмяФайла/
├── ИмяФайла_page_0.md # Markdown страницы
├── ИмяФайла_page_0.jpg # Визуализация с bbox
├── ИмяФайла_page_0.json # Layout JSON (если не prompt_ocr)
└── ИмяФайла_page_1.md
```
### 4. Склейка всех страниц и очистка
```bash
cd results/Папка
cat *_page_*.md > Итог.md
# Удалить base64-изображения (актуально для prompt_layout_all_en)
sed -e 's/!\[.*\](data:image[^)]*)//g' -e '/^[[:space:]]*$/d' Итог.md > Итог_clean.md
```
## Режимы (промпты)
| Промпт | Описание | Скорость |
|---|---|---|
| `prompt_layout_all_en` | Layout + текст + таблицы HTML + формулы LaTeX | ~20-30 с/стр |
| `prompt_ocr` | **Только текст** (без layout-разметки) | **~2-5 с/стр** ✅ |
| `prompt_layout_only_en` | Только детекция блоков (без текста) | быстро |
| `prompt_grounding_ocr` | OCR в заданном bbox | среднее |
| `prompt_web_parsing` | Парсинг веб-страниц | среднее |
| `prompt_scene_spotting` | Поиск текста на сцене | среднее |
| `prompt_image_to_svg` | Конвертация графики в SVG | среднее |
| `prompt_general` | Free-form QA (с --custom_prompt) | среднее |
## Особенности
- **prompt_ocr** работает в **10 раз быстрее** full layout и выдаёт чистый Markdown без base64-вставок для картинок. Рекомендуется для анализа текстовых документов.
- Для сложных PDF с таблицами, формулами и многостраничной вёрсткой — `prompt_layout_all_en` даёт полную картину (HTML таблицы, LaTeX формулы).
- Большие "Picture" элементы (декоративные блоки, фоны) могут содержать текст — `prompt_ocr` вытаскивает и его.
- `max_model_len=16384` — ограничение из-за 12GB VRAM. Для одного PDF-листа хватает.
## Проблемы
- vLLM v0.23 использует V1 engine с multiprocessing spawn, который сбрасывает `CUDA_VISIBLE_DEVICES`. Решение: враппер `run_vllm_gpu1.py` с `os.environ` + `if __name__ == "__main__"`.
- При `--gpu-memory-utilization > 0.9` может не хватить памяти для KV-кэша — падает на инициализации.
- **Порт 8000** — не конфликтует с llama-server (порт 8080).
## Связанное
- [[russian-ocr]] — Tesseract + RapidOCR на CPU (альтернатива без GPU)
- [[local-llm]] — общая инфраструктура локальных LLM
concepts/hyperframes-reels.md
+414
View File
@@ -0,0 +1,414 @@
---
title: HyperFrames — Создание Reels из HTML
created: 2026-06-12
updated: 2026-06-12
type: concept
tags: [hyperframes, video, reels, gsap, tiktok]
sources:
- concepts/web-psychology.md
- concepts/micro-interactions.md
confidence: high
---
# HyperFrames — Создание профессиональных Reels из HTML
> **Формула:** HTML + GSAP анимации + Edge-TTS = готовый Reels без видеоредакторов
>
> *Инструкция для LLM-агента: создавай Reels через HyperFrames — пиши HTML, линтируй, рендери MP4.*
---
## Фаза 0: Подготовка
### 0.1. Проверка окружения
```bash
node --version # нужен 22+
ffmpeg -version # нужен 6.1.1+
npx hyperframes doctor # проверка окружения
```
**Требования:** Node.js 22+, FFmpeg 6.1.1+, Chromium (скачивается автоматически при первом рендере).
### 0.2. Структура проекта
```
reels-project/
├── index.html # МАСТЕР: root-контейнер, без <template>
├── compositions/
│ ├── 01-hook.html # Хук (0–3s): решает, смотреть или нет
│ ├── 02-intro.html # Интро (3–8s)
│ ├── 03-content.html # Контент (8–20s)
│ ├── 04-cta.html # CTA (20–30s): призыв к действию
│ └── 05-outro.html # Финал (25–30s): логотип + подписка
├── assets/
│ ├── narration.mp3 # Озвучка (Edge-TTS предпочтительно)
│ └── bg-music.mp3 # Фоновая музыка (тихо, -20dB)
└── lib/
└── gsap.min.js # Локальная копия GSAP (CDN = 404 в headless)
```
### 0.3. Разрешение для Reels
**1080×1920 (портрет, 9:16)** — стандарт для Reels/TikTok/Shorts.
```css
html, body { width: 1080px; height: 1920px; overflow: hidden; }
```
---
## Фаза 1: Написание композиции
### 1.1. Базовая структура (inline, без вложенных сцен)
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1920px; overflow: hidden; background: #0a0820; }
</style>
</head>
<body>
<div class="clip-text clip" data-track-index="2" data-start="0" data-type="text">
Как создать <span class="accent">Reels</span>
</div>
<script src="lib/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from('.clip-text', { opacity: 0, y: 100, duration: 0.8, ease: 'power3.out' }, 0);
tl.set({}, {}, 10);
window.__timelines = window.__timelines || {};
window.__timelines['reels-hook'] = { timeline: tl, paused: true };
</script>
</body>
</html>
```
### 1.2. Правило трёх
Каждая композиция должна содержать:
- ✅ **Root:** `data-composition-id` + `data-width` + `data-height`
- ✅ **Timed Elements:** `class="clip"` + `data-start` + `data-duration` + `data-track-index`
- ✅ **Animations:** `gsap.timeline({ paused: true })` + регистрация на `window.__timelines`
### 1.3. Обязательные атрибуты
| Атрибут | Обязательный | Описание |
|---|---|---|
| `class="clip"` | Да | Элемент — клип видео |
| `data-start` | Да | Секунда начала |
| `data-duration` | Да | Длительность в секундах |
| `data-track-index` | Да | Трек/слой (уникальный для каждого клипа) |
| `data-type` | Нет | Тип элемента (`text`, `audio`, `clip`) |
**НЕ НАДО:** `data-duration` на clip НЕ нужен — длительность управляется GSAP-таймлайном.
### 1.4. Цветовая схема (проверенная)
```css
background: #0a0820; /* Глубокий тёмно-синий */
text: #fff; /* Белый текст */
accent: #00ff88; /* Зелёный акцент */
secondary: #8800ff; /* Фиолетовый */
muted: #888; /* Серый для подписей */
```
### 1.5. Шрифты
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
```
| Шрифт | Где |
|-------|-----|
| **Inter** | Заголовки, текст, CTA (мин 40px для мобильного) |
| **JetBrains Mono** | Код, цифры, технические блоки |
---
## Фаза 2: Режиссура Reels
### 2.1. Золотое правило: Hook первые 3 секунды
> **В Reels зритель скроллит каждые 0.5 секунды. Первые 3 секунды = жизнь видео.**
**Лучшие паттерны хуков (ранг):**
1. **Blur-in** — текст из размытия `blur(15px)` за 0.6s → `blur(0px)`
2. **Крупный заголовок** — `font-size: 72px`, акцентный цвет, fade-up
3. **Glitch** — `steps(1)` + RGB-сплит (для tech-аудитории)
```javascript
// Blur-in хук (самый надёжный)
tl.from('.hook-text', {
opacity: 0, y: 60, filter: 'blur(15px)',
duration: 0.6, ease: 'power3.out'
}, 0);
```
### 2.2. Каденция текста
> **1 фраза = 1 слайд. Средняя скорость русской речи: ~3 слова/сек.**
```
Хук: "HTML в Reels за 30 сек" → 3s
Интро: "Без видеоредакторов" → 3s
Контент: "HyperFrames = HTML → MP4" → 4s
Контент: "Пишите HTML, рендерите" → 4s
CTA: "Подпишись для туториалов" → 3s
Итого: 17s (минимум 20–30s для алгоритма)
```
### 2.3. Оптимальная длина
| Длина | Назначение | Сцен |
|---|---|---|
| 15–20s | Вирусный хук, тизер | 3–4 |
| 25–30s | Туториал (стандарт) | 5–7 |
| 35–45s | Глубокий разбор | 8–10 |
### 2.4. Эффекты для Reels (ранжированы)
**Подходит:**
- **Blur reveal** — универсальный, профессиональный
- **Кинетическая типографика** — по слову, держит внимание
- **Счётчик** — `onUpdate` обновляет `textContent`
- **Lower Thirds** — имя + бейдж + описание
- **SVG прогресс-кольцо** — метрики, проценты
- **Пульсирующая CTA** — `boxShadow` yoyo-repeat
**НЕ подходит для Reels:**
- Глитч — слишком агрессивный
- 3D параллакс — отвлекает от текста
- RGB-сплит — на мобильном barely заметен
### 2.5. Аудио = 50% успеха
```bash
# Edge-TTS (предпочтительно)
edge-tts --text "Текст озвучки" --voice ru-RU-DmitryNeural --write-media assets/narration.mp3
# Проверка длительности
ffprobe -v error -show_entries format=duration \
-of default=noprint_wrappers=1:nokey=1 assets/narration.mp3
```
**Голоса:**
| Голос | Тип |
|-------|-----|
| `ru-RU-DmitryNeural` | Мужской, нейтральный |
| `ru-RU-SvetlanaNeural` | Женский, тёплый |
| `ru-RU-SergeyNeural` | Мужской, энергичный |
---
## Фаза 3: Готовые паттерны (copy-paste)
### Паттерн 1: Счётчик
```html
<div class="stat-number" style="font-size:100px;font-weight:900;color:#00ff88">0</div>
```
```javascript
let counter = { val: 0 };
tl.to(counter, {
val: 10000,
duration: 2,
ease: 'power2.out',
onUpdate: () => {
document.querySelector('.stat-number').textContent =
Math.floor(counter.val).toLocaleString();
}
}, 0.5);
```
### Паттерн 2: Lower Thirds
```html
<div class="lower-third" style="position:fixed;bottom:300px;left:60px">
<div class="lt-name" style="font-size:40px;font-weight:700;color:#fff">HYPERFRAMES</div>
<div class="lt-line" style="width:100px;height:4px;background:#00ff88;margin-top:8px"></div>
<div class="lt-desc" style="font-size:24px;color:#888;margin-top:8px">HTML → MP4</div>
</div>
```
```javascript
tl.from('.lt-name', { x: -40, opacity: 0, duration: 0.4, ease: 'power2.out' }, 0.3);
tl.from('.lt-line', { scaleX: 0, transformOrigin: 'left', duration: 0.3 }, 0.5);
tl.from('.lt-desc', { x: -30, opacity: 0, duration: 0.4, ease: 'power2.out' }, 0.6);
```
### Паттерн 3: SVG прогресс-кольцо
```html
<svg width="160" height="160" viewBox="0 0 180 180">
<circle cx="90" cy="90" r="80" fill="none" stroke="#222" stroke-width="8"/>
<circle class="ring" cx="90" cy="90" r="80" fill="none" stroke="#00ff88" stroke-width="8"
stroke-dasharray="502" stroke-dashoffset="502" stroke-linecap="round"
transform="rotate(-90 90 90)"/>
</svg>
```
```javascript
tl.to('.ring', { strokeDashoffset: 0, duration: 2, ease: 'power2.out' }, 0.5);
```
### Паттерн 4: Пульсирующая CTA
```html
<div class="cta-button" style="
margin: 0 auto; padding: 24px 48px;
background: #00ff88; color: #000;
font-size: 36px; font-weight: 900;
border-radius: 16px;
">ПОДПИШИСЬ</div>
```
```javascript
tl.to('.cta-button', {
boxShadow: '0 0 40px rgba(0,255,136,0.6)',
duration: 0.3, yoyo: true, repeat: 3
}, 1);
```
### Паттерн 5: Кинетическая типографика
```html
<div style="overflow:hidden">
<span class="word" style="font-size:70px;font-weight:900;color:#fff;display:inline-block">КАЖДОЕ</span>
<span class="word" style="font-size:70px;font-weight:900;color:#00ff88;display:inline-block">СЛОВО</span>
</div>
```
```javascript
document.querySelectorAll('.word').forEach((word, i) => {
tl.from(word, {
y: 80, opacity: 0, filter: 'blur(15px)',
duration: 0.6, ease: 'power3.out'
}, i * 0.25);
});
```
### Паттерн 6: Детерминированные частицы (canvas)
```javascript
function mulberry32(a) {
return function() {
a |= 0; a = a + 0x6D2B79F5 | 0;
var t = Math.imul(a ^ a >>> 15, 1 | a);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
}
}
const rng = mulberry32(42); // всегда одинаковый результат
```
> **НИКОГДА** `Math.random()` в canvas — рендер будет не детерминированным.
---
## Фаза 4: Рендер и экспорт
### 4.1. Команды
```bash
npx hyperframes lint # ОБЯЗАТЕЛЬНО: проверка
npx hyperframes preview # Порт 3003, HMR
npx hyperframes render --quality high --workers 1 --output reels.mp4
```
### 4.2. Параметры рендера
| Параметр | Значение | Описание |
|---|---|---|
| `--quality` | `draft`, `standard`, `high` | draft = без аудио, standard/high = с аудио |
| `--workers` | `1` | Для тяжёлых композиций — ТОЛЬКО 1 |
| `-f` | `30` | FPS. 30 достаточно для Reels |
### 4.3. Микширование narration
```bash
# Без перекодирования видео (мгновенно)
ffmpeg -y -i reels.mp4 -i assets/narration.mp3 \
-c:v copy -c:a aac -b:a 192k -shortest \
-map 0:v:0 -map 1:a:0 \
-movflags +faststart \
reels-final.mp4
```
### 4.4. Проверка результата
```bash
# Поток
ffprobe -v error -show_entries stream=codec_type,codec_name reels-final.mp4
# Ожидаемо: video/h264 + audio/aac
```
---
## Фаза 5: Типичные ошибки
### Ошибка 1: Видео обрезается короче narration
**Решение:** добавить `tl.set({}, {}, DURATION)` в конец таймлайна.
### Ошибка 2: `gsap_infinite_repeat`
**Причина:** `repeat: -1` ломает детерминированный рендер.
**Решение:** `repeat: N` (конечное число).
### Ошибка 3: Canvas в screenshot mode
**Причина:** raw `requestAnimationFrame()` в inline `<script>`.
**Решение:** `setInterval` или вынести в `canvas.js`.
### Ошибка 4: `root_composition_missing_html_wrapper`
**Причина:** комментарий перед `<!DOCTYPE html>`.
**Решение:** `<!DOCTYPE html>` — строго первая строка.
### Ошибка 5: Перекрывающиеся клипы
**Решение:** каждый `.clip` — уникальный `data-track-index`.
### Ошибка 6: CSS `transform` + GSAP `y`/`x`
**Решение:** `xPercent`/`yPercent` вместо CSS `transform`.
### Ошибка 7: CDN GSAP = 404
**Решение:** локальная `lib/gsap.min.js`.
---
## Фаза 6: Чек-лист перед публикацией
- [ ] Хук в первые 3 секунды (blur-in / крупный текст)
- [ ] Длитель narration = длительность GSAP-таймлайна
- [ ] `npx hyperframes lint` — без ошибок
- [ ] `npx hyperframes preview` — каждый слайд визуально проверен
- [ ] `--workers 1` для тяжёлых композиций
- [ ] FFmpeg микширование: `-c:v copy -c:a aac`
- [ ] `ffprobe` — два потока (h264 + aac)
- [ ] Размер < 100MB (лимит Instagram)
- [ ] Разрешение 1080×1920 (портрет)
- [ ] Текст читается на мобильном (мин 40px)
---
## Готовые блоки
```bash
npx hyperframes add flash-through-white # Переход через вспышку
npx hyperframes add warm-grain # Зерно плёнки
npx hyperframes add instagram-follow # Анимация подписки
npx hyperframes add swiss-grid # Швейцарская сетка
npx hyperframes add lower-third # Нижний титр
```
## GSAP Easing
| Easing | Эффект | Применение |
|--------|--------|-----------|
| `power2.out`, `power3.out` | Плавное замедление | Появление текста |
| `back.out(1.7)` | Пружинящее | CTA-кнопки |
| `sine.inOut` | Мягкий синус | Фоновые элементы |
| `circ.inOut` | Медленное начало/конец | Элегантные переходы |
| `steps(1)` | Глитч | Резкие кадры |
concepts/industry-color-systems.md
+334
View File
@@ -0,0 +1,334 @@
---
name: concepts/industry-color-systems
title: Industry Color Systems
description: 161 color palettes (11 tokens each) per industry — primary, secondary, accent, background, card, muted, border, destructive, ring.
tags: [colors, palette, design-tokens, industry, brand, accessibility]
source: ui-ux-pro-max-skill
---
# Industry Color Systems
161 цветовых систем, привязанных к типу продукта. Каждая система содержит 11 токенов (Primary, On Primary, Secondary, Accent и др.).
## Структура токенов
| Токен | Использование | Пример |
|-------|---------------|--------|
| **Primary** | Основной бренд-цвет | `#2563EB` |
| **On Primary** | Текст/иконки на primary | `#FFFFFF` |
| **Secondary** | Вспомогательный цвет | `#3B82F6` |
| **Accent** | CTA, важные действия | `#EA580C` |
| **Background** | Фон страницы | `#F8FAFC` |
| **Foreground** | Основной текст | `#1E293B` |
| **Card** | Фон карточек | `#FFFFFF` |
| **Muted** | Второстепенный текст | `#64748B` |
| **Border** | Границы элементов | `#E2E8F0` |
| **Destructive** | Ошибки, удаление | `#DC2626` |
| **Ring** | Focus ring | `#2563EB` |
---
## SaaS / B2B
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 1 | SaaS (General) | `#2563EB` | `#3B82F6` | `#EA580C` | `#F8FAFC` | `#1E293B` |
| 2 | Micro SaaS | `#6366F1` | `#818CF8` | `#059669` | `#F5F3FF` | `#1E1B4B` |
| 6 | B2B Service | `#0F172A` | `#334155` | `#0369A1` | `#F8FAFC` | `#020617` |
| 30 | Knowledge Base | `#475569` | `#64748B` | `#2563EB` | `#F8FAFC` | `#1E293B` |
| 68 | Freelancer Platform | `#6366F1` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
| 69 | Marketing Agency | `#EC4899` | `#F472B6` | `#0891B2` | `#FDF2F8` | `#831843` |
| 72 | Digital Products | `#6366F1` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
| 101 | CRM & Client Mgmt | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
| 102 | Inventory Mgmt | `#334155` | `#475569` | `#059669` | `#F8FAFC` | `#0F172A` |
| 105 | Invoice & Billing | `#1E3A5F` | `#2563EB` | `#059669` | `#F8FAFC` | `#0F172A` |
| 108 | Parenting Tracker | `#EC4899` | `#F472B6` | `#0284C7` | `#FDF2F8` | `#0F172A` |
| 109 | Scanner & Doc Mgmt | `#1E293B` | `#334155` | `#2563EB` | `#F8FAFC` | `#0F172A` |
| 111 | Password Manager | `#1E3A5F` | `#334155` | `#059669` | `#0F172A` | `#FFFFFF` |
| 112 | Expense Splitter | `#059669` | `#10B981` | `#DC2626` | `#F8FAFC` | `#0F172A` |
| 113 | Voice Recorder | `#DC2626` | `#EF4444` | `#2563EB` | `#FFFFFF` | `#0F172A` |
| 114 | Bookmark & Read-Later | `#D97706` | `#F59E0B` | `#2563EB` | `#FFFBEB` | `#0F172A` |
| 115 | Translator App | `#2563EB` | `#0891B2` | `#EA580C` | `#F8FAFC` | `#0F172A` |
| 117 | Alarm & World Clock | `#D97706` | `#F59E0B` | `#6366F1` | `#0F172A` | `#FFFFFF` |
| 118 | File Manager | `#2563EB` | `#3B82F6` | `#D97706` | `#F8FAFC` | `#0F172A` |
| 119 | Email Client | `#2563EB` | `#3B82F6` | `#DC2626` | `#FFFFFF` | `#0F172A` |
| 120 | Casual Puzzle Game | `#EC4899` | `#8B5CF6` | `#F59E0B` | `#FDF2F8` | `#0F172A` |
| 121 | Trivia & Quiz | `#2563EB` | `#7C3AED` | `#F59E0B` | `#EFF6FF` | `#0F172A` |
| 131 | Link-in-Bio Builder | `#2563EB` | `#7C3AED` | `#EC4899` | `#FFFFFF` | `#0F172A` |
| 132 | Wardrobe Planner | `#BE185D` | `#EC4899` | `#D97706` | `#FDF2F8` | `#0F172A` |
| 135 | Couple App | `#BE185D` | `#EC4899` | `#DC2626` | `#FDF2F8` | `#0F172A` |
| 136 | Family Calendar | `#2563EB` | `#059669` | `#D97706` | `#F8FAFC` | `#0F172A` |
| 139 | Gift & Wishlist | `#DC2626` | `#D97706` | `#EC4899` | `#FFF1F2` | `#0F172A` |
| 145 | Medication Reminder | `#0284C7` | `#0891B2` | `#DC2626` | `#F0F9FF` | `#0F172A` |
| 146 | Water Tracker | `#0284C7` | `#06B6D4` | `#0891B2` | `#F0F9FF` | `#0F172A` |
| 147 | Fasting Timer | `#6366F1` | `#4338CA` | `#059669` | `#0F172A` | `#FFFFFF` |
| 148 | Anonymous Community | `#475569` | `#334155` | `#0891B2` | `#0F172A` | `#FFFFFF` |
| 149 | Local Events Discovery | `#EA580C` | `#F97316` | `#2563EB` | `#FFF7ED` | `#0F172A` |
| 150 | Study Together | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
| 151 | Coding Challenge | `#22C55E` | `#059669` | `#D97706` | `#0F172A` | `#FFFFFF` |
| 152 | Kids Learning | `#2563EB` | `#F59E0B` | `#EC4899` | `#EFF6FF` | `#0F172A` |
| 153 | Music Instrument | `#DC2626` | `#9A3412` | `#D97706` | `#FFFBEB` | `#0F172A` |
| 154 | Parking Finder | `#2563EB` | `#059669` | `#DC2626` | `#F0F9FF` | `#0F172A` |
| 155 | Public Transit | `#2563EB` | `#0891B2` | `#EA580C` | `#F8FAFC` | `#0F172A` |
| 156 | Road Trip Planner | `#EA580C` | `#0891B2` | `#D97706` | `#FFF7ED` | `#0F172A` |
| 157 | VPN & Privacy | `#1E3A5F` | `#334155` | `#22C55E` | `#0F172A` | `#FFFFFF` |
| 158 | Emergency SOS | `#DC2626` | `#EF4444` | `#2563EB` | `#FFF1F2` | `#0F172A` |
| 159 | Wallpaper App | `#7C3AED` | `#EC4899` | `#2563EB` | `#FAF5FF` | `#0F172A` |
| 160 | White Noise | `#475569` | `#334155` | `#4338CA` | `#0F172A` | `#FFFFFF` |
| 161 | Home Decoration | `#78716C` | `#A8A29E` | `#D97706` | `#FAF5F2` | `#0F172A` |
## E-Commerce / Retail
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 3 | E-commerce | `#059669` | `#10B981` | `#EA580C` | `#ECFDF5` | `#064E3B` |
| 4 | E-commerce Luxury | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
| 34 | Beauty/Spa | `#EC4899` | `#F9A8D4` | `#8B5CF6` | `#FDF2F8` | `#831843` |
| 35 | Luxury Brand | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
| 36 | Restaurant | `#DC2626` | `#F87171` | `#A16207` | `#FEF2F2` | `#450A0A` |
| 54 | Brewery/Winery | `#7C2D12` | `#B91C1C` | `#A16207` | `#FEF2F2` | `#450A0A` |
| 63 | Bakery/Cafe | `#92400E` | `#B45309` | `#92400E` | `#FEF3C7` | `#78350F` |
| 95 | Food Delivery | `#EA580C` | `#F97316` | `#2563EB` | `#FFF7ED` | `#0F172A` |
| 97 | Recipe App | `#9A3412` | `#C2410C` | `#059669` | `#FFFBEB` | `#0F172A` |
| 106 | Grocery List | `#059669` | `#10B981` | `#D97706` | `#ECFDF5` | `#0F172A` |
## Finance / Banking
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 7 | Financial Dashboard | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
| 14 | Fintech/Crypto | `#F59E0B` | `#FBBF24` | `#8B5CF6` | `#0F172A` | `#F8FAFC` |
| 42 | Banking/Finance | `#0F172A` | `#1E3A8A` | `#A16207` | `#F8FAFC` | `#020617` |
| 43 | Online Course | `#0D9488` | `#2DD4BF` | `#EA580C` | `#F0FDFA` | `#134E4A` |
| 91 | Personal Finance | `#1E40AF` | `#3B82F6` | `#059669` | `#0F172A` | `#FFFFFF` |
| 104 | Appointment Booking | `#0284C7` | `#0EA5E9` | `#059669` | `#F0F9FF` | `#0F172A` |
## Health / Medical
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 9 | Healthcare App | `#0891B2` | `#22D3EE` | `#059669` | `#ECFEFF` | `#164E63` |
| 23 | Mental Health | `#8B5CF6` | `#C4B5FD` | `#059669` | `#FAF5FF` | `#4C1D95` |
| 58 | Medical Clinic | `#0891B2` | `#22D3EE` | `#16A34A` | `#F0FDFA` | `#134E4A` |
| 59 | Pharmacy | `#15803D` | `#22C55E` | `#0369A1` | `#F0FDF4` | `#14532D` |
| 60 | Dental Practice | `#0EA5E9` | `#38BDF8` | `#0EA5E9` | `#F0F9FF` | `#0C4A6E` |
| 61 | Veterinary | `#0D9488` | `#14B8A6` | `#EA580C` | `#F0FDFA` | `#134E4A` |
| 94 | Habit Tracker | `#D97706` | `#F59E0B` | `#059669` | `#FFFBEB` | `#0F172A` |
| 98 | Meditation App | `#7C3AED` | `#8B5CF6` | `#059669` | `#FAF5FF` | `#0F172A` |
| 100 | Diary & Journal | `#92400E` | `#A16207` | `#6366F1` | `#FFFBEB` | `#0F172A` |
| 134 | Plant Care Tracker | `#15803D` | `#059669` | `#D97706` | `#F0FDF4` | `#0F172A` |
| 141 | Yoga & Stretching | `#6B7280` | `#78716C` | `#0891B2` | `#F5F5F0` | `#0F172A` |
| 143 | Calorie Counter | `#059669` | `#10B981` | `#EA580C` | `#ECFDF5` | `#0F172A` |
| 144 | Period Tracker | `#BE185D` | `#EC4899` | `#7C3AED` | `#FDF2F8` | `#0F172A` |
| 142 | Sleep Tracker | `#4338CA` | `#6366F1` | `#7C3AED` | `#0F172A` | `#FFFFFF` |
## Entertainment / Creative
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 11 | Creative Agency | `#EC4899` | `#F472B6` | `#0891B2` | `#FDF2F8` | `#831843` |
| 13 | Gaming | `#7C3AED` | `#A78BFA` | `#F43F5E` | `#0F0F23` | `#E2E8F0` |
| 45 | Music Streaming | `#1E1B4B` | `#4338CA` | `#22C55E` | `#0F0F23` | `#F8FAFC` |
| 46 | Video Streaming | `#0F0F23` | `#1E1B4B` | `#E11D48` | `#000000` | `#F8FAFC` |
| 66 | News/Media | `#DC2626` | `#EF4444` | `#1E40AF` | `#FEF2F2` | `#450A0A` |
| 67 | Magazine/Blog | `#18181B` | `#3F3F46` | `#EC4899` | `#FAFAFA` | `#09090B` |
| 76 | Sports Team | `#DC2626` | `#EF4444` | `#DC2626` | `#FEF2F2` | `#7F1D1D` |
| 78 | Theater/Cinema | `#1E1B4B` | `#312E81` | `#CA8A04` | `#0F0F23` | `#F8FAFC` |
| 122 | Card & Board Game | `#15803D` | `#166534` | `#D97706` | `#0F172A` | `#FFFFFF` |
| 123 | Idle & Clicker | `#D97706` | `#F59E0B` | `#7C3AED` | `#FFFBEB` | `#0F172A` |
| 124 | Word & Crossword | `#15803D` | `#059669` | `#D97706` | `#FFFFFF` | `#0F172A` |
| 125 | Arcade & Retro | `#DC2626` | `#2563EB` | `#22C55E` | `#0F172A` | `#FFFFFF` |
| 126 | Photo Editor | `#7C3AED` | `#6366F1` | `#0891B2` | `#0F172A` | `#FFFFFF` |
| 127 | Short Video Editor | `#EC4899` | `#DB2777` | `#2563EB` | `#0F172A` | `#FFFFFF` |
| 128 | Drawing Canvas | `#7C3AED` | `#8B5CF6` | `#0891B2` | `#1C1917` | `#FFFFFF` |
| 129 | Music Creation | `#7C3AED` | `#6366F1` | `#22C55E` | `#0F172A` | `#FFFFFF` |
| 130 | Meme & Sticker Maker | `#EC4899` | `#F59E0B` | `#2563EB` | `#FFFFFF` | `#0F172A` |
| 131 | AI Photo & Avatar | `#7C3AED` | `#6366F1` | `#EC4899` | `#FAF5FF` | `#0F172A` |
## Travel / Events
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 38 | Travel/Tourism | `#0EA5E9` | `#38BDF8` | `#EA580C` | `#F0F9FF` | `#0C4A6E` |
| 39 | Hotel/Hospitality | `#1E3A8A` | `#3B82F6` | `#A16207` | `#F8FAFC` | `#1E40AF` |
| 40 | Wedding Planning | `#DB2777` | `#F472B6` | `#A16207` | `#FDF2F8` | `#831843` |
| 65 | Airline | `#1E3A8A` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E40AF` |
| 156 | Road Trip Planner | `#EA580C` | `#0891B2` | `#D97706` | `#FFF7ED` | `#0F172A` |
| 18 | Event Management | `#7C3AED` | `#A78BFA` | `#EA580C` | `#FAF5FF` | `#4C1D95` |
| 137 | Mood Tracker | `#7C3AED` | `#6366F1` | `#D97706` | `#FAF5FF` | `#0F172A` |
## Tech / Developer
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 7 | Analytics Dashboard | `#1E40AF` | `#3B82F6` | `#D97706` | `#F8FAFC` | `#1E3A8A` |
| 18 | AI/Chatbot Platform | `#7C3AED` | `#A78BFA` | `#0891B2` | `#FAF5FF` | `#1E1B4B` |
| 20 | NFT/Web3 | `#8B5CF6` | `#A78BFA` | `#FBBF24` | `#0F0F23` | `#F8FAFC` |
| 24 | Smart Home/IoT | `#1E293B` | `#334155` | `#22C55E` | `#0F172A` | `#F8FAFC` |
| 25 | EV/Charging | `#0891B2` | `#22D3EE` | `#16A34A` | `#ECFEFF` | `#164E63` |
| 27 | Podcast Platform | `#1E1B4B` | `#312E81` | `#F97316` | `#0F0F23` | `#F8FAFC` |
| 80 | Cybersecurity | `#00FF41` | `#0D0D0D` | `#FF3333` | `#000000` | `#E0E0E0` |
| 81 | Developer IDE | `#1E293B` | `#334155` | `#22C55E` | `#0F172A` | `#F8FAFC` |
| 82 | Biotech / Life Sciences | `#0EA5E9` | `#0284C7` | `#059669` | `#F0F9FF` | `#0C4A6E` |
| 83 | Space Tech | `#F8FAFC` | `#94A3B8` | `#3B82F6` | `#0B0B10` | `#F8FAFC` |
| 85 | Quantum Computing | `#00FFFF` | `#7B61FF` | `#FF00FF` | `#050510` | `#E0E0FF` |
| 86 | Biohacking / Longevity | `#FF4D4D` | `#4D94FF` | `#059669` | `#F5F5F7` | `#1C1C1E` |
| 87 | Drone Fleet Manager | `#00FF41` | `#008F11` | `#FF3333` | `#0D1117` | `#E6EDF3` |
| 88 | Generative Art | `#18181B` | `#3F3F46` | `#EC4899` | `#FAFAFA` | `#09090B` |
| 89 | Spatial Computing OS | `#FFFFFF` | `#E5E5E5` | `#FFFFFF` | `#000000` | `#999999` |
| 90 | Sustainable Energy | `#059669` | `#10B981` | `#059669` | `#ECFDF5` | `#064E3B` |
| 92 | Chat & Messaging | `#2563EB` | `#6366F1` | `#059669` | `#FFFFFF` | `#0F172A` |
| 93 | Notes & Writing | `#78716C` | `#A8A29E` | `#D97706` | `#FFFBEB` | `#0F172A` |
| 96 | Ride Hailing | `#1E293B` | `#334155` | `#2563EB` | `#0F172A` | `#FFFFFF` |
| 140 | Running & Cycling GPS | `#EA580C` | `#F97316` | `#059669` | `#0F172A` | `#FFFFFF` |
| 151 | Coding Challenge | `#22C55E` | `#059669` | `#D97706` | `#0F172A` | `#FFFFFF` |
| 110 | Calendar & Scheduling | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
## Education / Knowledge
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 10 | Educational App | `#4F46E5` | `#818CF8` | `#EA580C` | `#EEF2FF` | `#1E1B4B` |
| 29 | Micro-Credentials | `#0369A1` | `#0EA5E9` | `#A16207` | `#F0F9FF` | `#0C4A6E` |
| 43 | Online Course | `#0D9488` | `#2DD4BF` | `#EA580C` | `#F0FDFA` | `#134E4A` |
| 78 | Language Learning | `#4F46E5` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
| 79 | Coding Bootcamp | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
| 103 | Flashcard & Study | `#7C3AED` | `#8B5CF6` | `#059669` | `#FAF5FF` | `#0F172A` |
| 152 | Kids Learning | `#2563EB` | `#F59E0B` | `#EC4899` | `#EFF6FF` | `#0F172A` |
## Services / Local Business
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 36 | Real Estate | `#0F766E` | `#14B8A6` | `#0369A1` | `#F0FDFA` | `#134E4A` |
| 40 | Legal Services | `#1E3A8A` | `#1E40AF` | `#B45309` | `#F8FAFC` | `#0F172A` |
| 41 | Insurance | `#0369A1` | `#0EA5E9` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
| 55 | Home Services | `#1E40AF` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E3A8A` |
| 56 | Childcare/Daycare | `#F472B6` | `#FBCFE8` | `#16A34A` | `#FDF2F8` | `#9D174D` |
| 57 | Senior Care | `#0369A1` | `#38BDF8` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
| 62 | Florist/Plant Shop | `#15803D` | `#22C55E` | `#EC4899` | `#F0FDF4` | `#14532D` |
| 50 | Agriculture/Farm Tech | `#15803D` | `#22C55E` | `#A16207` | `#F0FDF4` | `#14532D` |
| 51 | Construction/Arch | `#64748B` | `#94A3B8` | `#EA580C` | `#F8FAFC` | `#334155` |
| 52 | Automotive | `#1E293B` | `#334155` | `#DC2626` | `#F8FAFC` | `#0F172A` |
| 53 | Photography Studio | `#18181B` | `#27272A` | `#F8FAFC` | `#000000` | `#FAFAFA` |
| 55 | Coworking Space | `#F59E0B` | `#FBBF24` | `#2563EB` | `#FFFBEB` | `#78350F` |
| 73 | Newsletter Platform | `#0369A1` | `#0EA5E9` | `#EA580C` | `#F0F9FF` | `#0C4A6E` |
| 74 | Church/Religious | `#7C3AED` | `#A78BFA` | `#A16207` | `#FAF5FF` | `#4C1D95` |
| 77 | Museum/Gallery | `#18181B` | `#27272A` | `#18181B` | `#FAFAFA` | `#09090B` |
## Social / Community
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 15 | Social Media App | `#E11D48` | `#FB7185` | `#2563EB` | `#FFF1F2` | `#881337` |
| 21 | Remote Work Tool | `#6366F1` | `#818CF8` | `#059669` | `#F5F3FF` | `#312E81` |
| 23 | Mental Health | `#8B5CF6` | `#C4B5FD` | `#059669` | `#FAF5FF` | `#4C1D95` |
| 28 | Dating App | `#E11D48` | `#FB7185` | `#EA580C` | `#FFF1F2` | `#881337` |
| 71 | Membership/Community | `#7C3AED` | `#A78BFA` | `#16A34A` | `#FAF5FF` | `#4C1D95` |
| 48 | Marketplace P2P | `#7C3AED` | `#A78BFA` | `#16A34A` | `#FAF5FF` | `#4C1D95` |
| 47 | Job Board/Recruiting | `#0369A1` | `#0EA5E9` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
| 49 | Logistics/Delivery | `#2563EB` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E40AF` |
| 22 | Pet Tech | `#F97316` | `#FB923C` | `#2563EB` | `#FFF7ED` | `#9A3412` |
| 26 | Subscription Box | `#D946EF` | `#E879F9` | `#EA580C` | `#FDF4FF` | `#86198F` |
## Utility / Tools
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|---|---------|---------|-----------|--------|------------|------------|
| 1 | SaaS (General) | `#2563EB` | `#3B82F6` | `#EA580C` | `#F8FAFC` | `#1E293B` |
| 5 | Financial Dashboard | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
| 8 | Healthcare App | `#0891B2` | `#22D3EE` | `#059669` | `#ECFEFF` | `#164E63` |
| 12 | Gaming | `#7C3AED` | `#A78BFA` | `#F43F5E` | `#0F0F23` | `#E2E8F0` |
| 32 | Beauty/Spa | `#EC4899` | `#F9A8D4` | `#8B5CF6` | `#FDF2F8` | `#831843` |
| 33 | Luxury Brand | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
| 37 | Fitness/Gym | `#F97316` | `#FB923C` | `#22C55E` | `#1F2937` | `#F8FAFC` |
| 99 | Weather App | `#0284C7` | `#0EA5E9` | `#F59E0B` | `#F0F9FF` | `#0F172A` |
| 107 | Timer & Pomodoro | `#DC2626` | `#EF4444` | `#059669` | `#0F172A` | `#FFFFFF` |
---
## Tailwind Config
Копируйте токены в Tailwind config:
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// Пример для SaaS (General)
primary: '#2563EB',
'primary-fg': '#FFFFFF',
secondary: '#3B82F6',
accent: '#EA580C',
background: '#F8FAFC',
foreground: '#1E293B',
card: '#FFFFFF',
cardfg: '#1E293B',
muted: '#64748B',
'muted-fg': '#64748B',
border: '#E2E8F0',
destructive: '#DC2626',
'destructive-fg': '#FFFFFF',
ring: '#2563EB',
}
}
}
}
```
## CSS Variables
```css
/* SaaS (General) */
:root {
--primary: #2563EB;
--on-primary: #FFFFFF;
--secondary: #3B82F6;
--accent: #EA580C;
--background: #F8FAFC;
--foreground: #1E293B;
--card: #FFFFFF;
--card-foreground: #1E293B;
--muted: #64748B;
--muted-foreground: #64748B;
--border: #E2E8F0;
--destructive: #DC2626;
--destructive-foreground: #FFFFFF;
--ring: #2563EB;
}
[data-theme='dark'] {
/* Пример Financial Dashboard */
--background: #020617;
--foreground: #F8FAFC;
--card: #0E1223;
--card-foreground: #F8FAFC;
--muted: #1A1E2F;
--muted-foreground: #94A3B8;
--border: #334155;
}
```
## Quick Color Lookup by Vibe
| Vibe | Primary | Accent | Background |
|------|---------|--------|------------|
| **Trust & Professional** | `#2563EB` / `#0F172A` | `#EA580C` / `#059669` | `#F8FAFC` |
| **Luxury & Premium** | `#1C1917` | `#A16207` | `#FAFAF9` |
| **Energy & Action** | `#F97316` / `#EA580C` | `#059669` | `#FFF7ED` |
| **Calm & Health** | `#0891B2` / `#059669` | `#059669` | `#ECFEFF` |
| **Creative & Bold** | `#EC4899` / `#7C3AED` | `#0891B2` / `#F43F5E` | `#FDF2F8` |
| **Dark & Tech** | `#1E293B` / `#0F172A` | `#22C55E` / `#00FF41` | `#0F172A` |
| **Warm & Cozy** | `#92400E` / `#9A3412` | `#D97706` | `#FFFBEB` |
| **Playful & Fun** | `#EC4899` / `#6366F1` | `#F97316` / `#F59E0B` | `#FDF2F8` |
---
## Notes
- **WCAG 3:1**: Многие акцентные цвета адаптированы для контраста 3:1 с фоном (примечания в CSV).
- **Destructive** почти всегда `#DC2626` (Tailwind red-600) для консистентности.
- **Ring** = Primary (для focus rings).
- Все 161 системы используют одинаковую структуру токенов — легко переключать.
concepts/market-leader-design-algorithm.md
+443
View File
@@ -0,0 +1,443 @@
---
title: Market Leader Web Design Algorithm
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, design-system, web-design]
sources:
- concepts/ux-principles.md
- concepts/apple-hig-principles.md
- concepts/material-design-3-guide.md
- concepts/russian-user-psychology.md
- concepts/russian-ui-patterns.md
- concepts/russian-market-leaders.md
- concepts/russian-top-landings-analysis.md
- concepts/web-conversion-optimization.md
- concepts/clarity-vs-creativity.md
- concepts/web-performance-core-web-vitals.md
confidence: high
---
# Market Leader Web Design Algorithm — Алгоритм создания дизайна сайта-лидера рынка в РФ на Astro
> **Формула:** Мировой дизайн + РФ-специфика + производительность Astro = лидер рынка
>
> *Основано на синтезе 25 страниц wiki по веб-дизайну, UX, психологии и РФ-рынку.*
---
## Фаза 0: Стратегия (до любого кода)
### 0.1. Определить нишу и конкурентов
- **Какой рынок?** (недвижимость, услуги, e-commerce, B2B, образование)
- **Кто лидеры в РФ?** (посмотреть [[russian-market-leaders]] для референса)
- **Что у них плохо?** (обычно: перегруженность, скорость, отсутствие доступности, слабая персонализация)
- **Чья аудитория?** B2C или B2B? Регион? Платёжеспособность?
### 0.2. Определить 1 главную цель (Crawford: one clear CTA)
Не "красивый сайт", а:
- "Получить заявку на оценку недвижимости"
- "Оформить подписку на сервис"
- "Заказать звонок по услуге"
**Всё остальное подчинено этой цели.** ([[clarity-vs-creativity]])
### 0.3. Выбрать цветовую схему (с учётом РФ-психологии)
- **Финансы / B2B** → синий (доверие, стабильность) + белый
- **E-commerce / Скидки** → красный (победа, праздник) + белый
- **Beauty / Премиум** → чёрный + золотой/бордовый
- **Технологии / Инновации** → тёмная тема + неоновый акцент
- **Услуги / Медицина** → белый + бирюзовый/зелёный
*Правило 60-30-10: 60% фоновый, 30% вторичный, 10% акцентный. ([[web-color-theory]])*
### 0.4. Определить тон коммуникации
- **B2C** → «ты», прямой, честный, без «синергии» ([[russian-user-psychology]])
- **B2B / Премиум** → «Вы», сдержанный, факты и цифры
- **Молодёжь** → дерзкий, как Tinkoff
- **Консервативный** → надёжный, как Сбер
---
## Фаза 1: Архитектура
### 1.1. Sitemap (минимум страниц)
По Crawford: *«Fewer pages, stronger pages. Каждый лишний клик теряет пользователя.»*
Для типового сайта:
```
/ → Hero + преимущества + соцдоказательство + CTA
/uslugi/ → Карточки услуг (Bento Grid)
/usluga-1/ → Детально: проблема → решение → цена → CTA
/o-nas/ → Команда, цифры, кейсы (НЕ резюме!)
/otzyvy/ → Яндекс.Отзывы + видеоотзывы (обязательно)
/kontakty/ → Карта (Яндекс.Карты), реквизиты ИНН/ОГРН, телефон
/blog/ → SEO-контент, экспертные статьи
/politika/ → 152-ФЗ, оферта, возврат (юридический минимум)
```
### 1.2. User Flow (пользовательский путь)
```
Главная → за 2 секунды понять "что/кому/зачем" → CTA
↓ если не готов
Услуги → сравнительная таблица → CTA
↓ если не готов
Отзывы → кейсы → CTA
↓ если не готов
Блог → экспертность → CTA
```
**Правило: после каждого блока — CTA.** Не только вверху и внизу.
### 1.3. Определить сигналы доверия (РФ-специфика)
**Обязательно для РФ:**
- **ИНН/ОГРН в подвале** — без них сайт = мошеннический в глазах РФ-пользователя
- **Telegram / WhatsApp** — плавающая кнопка чата на всех страницах
- **Яндекс.Отзывы** — виджет с рейтингом
- **Способы оплаты** — логотипы (Visa, MC, Мир, SBP, Tinkoff Pay)
- **8-800 телефон** — если бюджет позволяет
- **Фото реальной команды** — не сток ([[social-proof-trust]])
---
## Фаза 2: Дизайн-система (Astro tokens)
### 2.1. Design Tokens (в CSS custom properties)
```css
/* ===== ЦВЕТА ===== */
--color-primary: #...; /* основной бренда */
--color-on-primary: #...; /* текст на primary */
--color-surface: #...; /* фон страницы */
--color-surface-alt: #...; /* альтернативный фон (секции) */
--color-text: #...; /* основной текст (≥4.5:1 контраст) */
--color-text-secondary: #...; /* второстепенный */
--color-accent: #...; /* CTA-кнопки, ссылки */
--color-error: #...; /* ошибки */
--color-success: #...; /* успех */
/* ===== ТИПОГРАФИКА ===== */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--fs-h1: clamp(2.5rem, 5vw, 4.5rem);
--fs-h2: clamp(1.75rem, 3vw, 2.5rem);
--fs-body: clamp(1rem, 1.2vw, 1.125rem);
--fs-small: 0.875rem;
--line-height: 1.6;
--line-height-heading: 1.15;
/* ===== ОТСТУПЫ ===== */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 8rem;
--section-padding: clamp(4rem, 8vw, 8rem);
/* ===== СКРУГЛЕНИЯ ===== */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
/* ===== ТЕНИ ===== */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
/* ===== ПРОЧЕЕ ===== */
--max-width: 1280px;
--header-height: 72px;
--transition: 200ms ease;
```
*Источник: [[material-design-3-guide]] — 40+ color tokens, Design Tokens system*
### 2.2. Кириллическая типографика
- **Длина текста**: русский текст на 30% длиннее английского. Кнопки шире, заголовки короче.
- **Шрифты**: Inter, Golos Text, PT Root UI, SF Pro Display (с кириллицей). Не Montserrat (перекос).
- **Кавычки**: «ёлочки» (`&laquo;` `&raquo;`), не "лапки", если внутри кавычек — „лапки“.
- **Тире**: длинное `—` (U+2014). Между цифрами — короткое `–` (U+2013).
- **Межстрочный**: для кириллицы 1.5–1.7 (из-за высоты букв).
- **Размер body**: 16px минимум, 18px для блогов.
*Источник: [[web-typography]]*
### 2.3. Тёмная тема (обязательно для лидера)
```css
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #121212; /* не #000 — меньше усталости глаз */
--color-surface-alt: #1E1E1E;
--color-text: #E0E0E0;
--color-text-secondary: #A0A0A0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
/* elevation: каждый уровень ярче на ~5% */
}
}
```
**Почему важно для РФ:** 70% топ-сайтов РФ 2025 используют тёмный фон. Тёмная тема — признак премиальности.
### 2.4. Bento Grid для layout ([[responsive-grid-layout]])
```astro
---
// Bento-сетка: разные размеры карточек для разной важности
const bentoItems = [
{ size: 'large', cols: 2, rows: 2 }, // главная услуга
{ size: 'small', cols: 1, rows: 1 }, // доп. услуга
{ size: 'wide', cols: 2, rows: 1 }, // отзыв
{ size: 'tall', cols: 1, rows: 2 }, // CTA-блок
];
---
<style>
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
.bento-item { border-radius: var(--radius-lg); }
.bento-item--large { grid-column: span 2; grid-row: span 2; }
.bento-item--wide { grid-column: span 2; }
.bento-item--tall { grid-row: span 2; }
</style>
```
---
## Фаза 3: Компоненты Astro (сборка сайта)
### 3.1. Atomic Design для Astro (как у Tinkoff — [[russian-market-leaders]])
```
src/
components/
atoms/ # Кнопки, иконки, заголовки, текстовые блоки
Button.astro
Heading.astro
Icon.astro
Tag.astro
molecules/ # Поиск, карточка, форма, навигация
SearchBar.astro
Card.astro
Form.astro
NavItem.astro
organisms/ # Герой-секция, подвал, отзывы, каталог
HeroSection.astro
Footer.astro # ← РФ-подвал с реквизитами
Testimonials.astro # ← Виджет Яндекс.Отзывов
CatalogGrid.astro # ← Bento Grid
ChatButton.astro # ← Telegram/WhatsApp плавающая кнопка
templates/ # Макеты страниц
PageLayout.astro
BlogPost.astro
LandingPage.astro
```
### 3.2. Hero Section (правила Apple HIG + Crawford)
```astro
<!-- HeroSection.astro: Clarity + Deference + Depth -->
<header class="hero">
<div class="hero__content">
<h1>Заголовок: что, кому, зачем (за 2 сек)</h1>
<p class="hero__subtitle">Подзаголовок: конкретика, выгода</p>
<Button variant="primary" size="large">
Получить консультацию → <!-- сильный CTA, не "Узнать больше" -->
</Button>
</div>
<div class="hero__visual">
<!-- 3D/WebGL или качественное фото. Не сток -->
</div>
</header>
<style>
.hero {
min-height: 90vh; /* full screen */
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-xl);
padding: var(--section-padding) var(--space-lg);
}
.hero__content { max-width: 600px; }
.hero h1 {
font-size: var(--fs-h1);
font-weight: 800;
line-height: var(--line-height-heading);
margin-bottom: var(--space-lg);
}
.hero__subtitle {
font-size: var(--fs-h2);
color: var(--color-text-secondary);
margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
text-align: center;
}
}
</style>
```
### 3.3. Footer с РФ-реквизитами
```astro
---
// Footer.astro — обязателен для РФ ([[russian-ui-patterns]])
const props = {
inn: "XXXXXXXXXXXX",
ogrn: "XXXXXXXXXXXX",
phone: "8-800-XXX-XX-XX",
email: "info@example.ru",
address: "г. Уфа, ул. Ленина, д. 1"
};
---
<footer class="footer">
<div class="footer__grid">
<div>...навигация...</div>
<div>...услуги...</div>
<div>...контакты, соцсети...</div>
<div class="footer__legal">
<p>ИНН {props.inn} / ОГРН {props.ogrn}</p>
<p><a href="/politika/">Политика конфиденциальности</a></p>
<p><a href="/ofert/">Договор-оферта</a></p>
</div>
</div>
<!-- Яндекс.Карта в подвале (!) — РФ-паттерн -->
<div class="footer__map">
<iframe src="https://yandex.ru/maps/..." loading="lazy"></iframe>
</div>
</footer>
```
### 3.4. ChatButton — плавающая кнопка Telegram/WhatsApp
```astro
---
// ChatButton.astro — обязателен для РФ
---
<a href="https://t.me/username" class="chat-btn" target="_blank" rel="noopener">
<svg><!-- иконка Telegram --></svg>
<span>Напишите нам</span>
</a>
<style>
.chat-btn {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 100;
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #24A1DE; /* Telegram blue */
color: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
font-weight: 600;
transition: transform var(--transition);
}
.chat-btn:hover { transform: scale(1.05); }
</style>
```
---
## Фаза 4: Контент (SEO + РФ-психология)
### 4.1. Написание для России
- **Честно и прямо**: не «мы лидеры рынка», а «работаем с 2018 года, 500+ клиентов»
- **Цифры и факты**: 2 года, 500 клиентов, 98% довольных
- **Без жаргона**: «синергия», «левериджинг» → в мусор
- **Ты/Вы**: B2C = ты, B2B = Вы. Строго
- **Гарантии**: «Вернём деньги, если не понравится» — мощнее любого описания
- **Цены**: показывать. «от 5 000 ₽» лучше, чем «цена по запросу»
### 4.2. SEO-контент под Яндекс
- **Региональная привязка**: «купить в Уфе», «ремонт квартир в Москве»
- **LSI-слова**: Яндекс хуже понимает NLP, нужны точные вхождения
- **E-E-A-T**: реквизиты, схема, отзывы — факторы доверия Яндекса
- **Семантическое ядро**: не перевод с английского, свой поисковый интент
- **Коммерческие факторы**: ИНН, Яндекс.Карты, Яндекс.Отзывы — влияют на ранжирование
### 4.3. Schema.org (через Astro)
```astro
---
// Structured Data для РФ
const localBusiness = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Название",
"address": { "@type": "PostalAddress", "addressLocality": "Уфа", ... },
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "127"
},
"priceRange": "₽₽"
};
---
<script type="application/ld+json" set:html={JSON.stringify(localBusiness)} />
```
---
## Фаза 5: Производительность (Core Web Vitals)
### 5.1. Критические настройки Astro
- `astro.config.mjs`: `compressHTML: true`, `scopedStyleStrategy: "attribute"`
- Изображения: `@astrojs/image` + WebP/AVIF + lazy loading
- Шрифты: `@fontsource/inter` (self-hosted), subset только кириллица
- Скрипты: Astro Islands — только интерактивные части как клиентские компоненты
- Никаких тяжелых библиотек (jQuery, GSAP full) — только micro-библиотеки
### 5.2. Цели производительности
```
LCP < 1.5s (Google норм: < 2.5s, мы жмём в полтора раза)
INP < 100ms (Google норм: < 200ms)
CLS < 0.05 (Google норм: < 0.1)
```
### 5.3. Container Queries (не просто media queries)
Адаптивность на уровне компонентов: одна и та же карточка подстраивается под ширину контейнера, а не viewport. Критично для Bento Grid. ([[modern-css-techniques]])
---
## Фаза 6: Запуск и итерации
### 6.1. Предзапуск (чек-лист)
- [ ] ИНН/ОГРН в подвале
- [ ] Политика 152-ФЗ
- [ ] Яндекс.Метрика (не Google Analytics)
- [ ] Яндекс.Вебмастер (не Google Search Console как primary)
- [ ] Яндекс.Карты на странице контактов
- [ ] Telegram/WhatsApp кнопка работает
- [ ] Core Web Vitals pass (LCP <1.5, INP <100, CLS <0.05)
- [ ] WCAG AA (контраст, фокус, семантика)
- [ ] Schema.org LocalBusiness
- [ ] Мобильная версия не «упрощённая», а полнофункциональная
### 6.2. Пост-запуск (Crawford: launch is just the start)
- **A/B тестирование** hero-секции: текст → заголовок → CTA
- **Трекинг** Яндекс.Метрика: карта кликов, вебвизор
- **Оптимизация bounce rate**: смотреть где уходят, менять
- **SEO-корректировка**: добавлять статьи, наращивать ссылочную массу
- **Отзывы**: собирать Яндекс.Отзывы, 2ГИС
---
## Итоговая формула (для каждого нового сайта)
```
1. Ниша + конкуренты (из [[russian-market-leaders]])
2. 1 цель, 1 CTA (из [[clarity-vs-creativity]])
3. РФ-токены цвета + кириллическая типографика (из [[web-typography]], [[web-color-theory]])
4. Bento Grid + Hero + Footer с реквизитами (из [[russian-ui-patterns]])
5. Telegram/WhatsApp плавающая кнопка (из [[russian-user-psychology]])
6. Тёмная тема с elevation (из [[material-design-3-guide]])
7. Core Web Vitals: LCP <1.5s, INP <100ms, CLS <0.05
8. WCAG AA (отрыв от 99% конкурентов РФ)
9. Container Queries для адаптивности
10. A/B тестирование и итерации
```
**Ключевое отличие от конкурентов РФ:** ни Wildberries, ни Ozon, ни Сбер, ни даже Tinkoff не делают пункты 6–9. Это наш разрыв.
concepts/material-design-3-guide.md
+54
View File
@@ -0,0 +1,54 @@
---
title: Material Design 3 Guide
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, design-system]
sources:
- https://m3.material.io/foundations
- https://m3.material.io/foundations/design-tokens/overview
confidence: high
---
# Material Design 3 — Руководство (Google, 2026)
## Ключевые принципы (MD3 Foundations)
1. **Adaptive** — адаптивность под любой экран, форм-фактор, платформу
2. **Bold** — цвет и типографика задают тон, контрастные акценты
3. **Intentional** — каждый элемент осмыслен, случайности нет
4. **Dynamic** — система меняется под контекст и действия пользователя
5. **Unified** — единый язык на всех платформах (web, Android, iOS)
## Design Tokens (Дизайн-токены)
MD3 представил систему токенов для платформонезависимого дизайна:
### Color Tokens (40+ токенов)
- **Primary** — основной цвет платформы
- **On Primary** — контент на primary (текст, иконки)
- **Primary Container** — контейнер с primary-фоном
- **Secondary** — вторичный цвет
- **Tertiary** — третичный (акцент)
- **Error** — для состояний ошибок
- **Surface** — фон поверхности
- **Outline** — границы, разделители
- **Dynamic Color** — автогенерация темы из seed-цвета
### Typography Tokens
- Type scale: от display/large (57px) до label/small (11px)
- Font-weight, line-height, letter-spacing — всё через токены
### Shape Tokens
- corner-radius малый (4px), средний (8px), большой (16px), полный
### Elevation Tokens
- 5 уровней высоты (0–5) определяют тень и яркость в тёмной теме
## Темная тема в MD3
- Фон: #1C1B1F (тёплый тёмный, не #000)
- Поверхности: elevation через повышение яркости (surface → surface1 → surface5)
- Значения тона (tone) меняются автоматически через цветовые алгоритмы
## Material 3 в веб-дизайне
- CSS Custom Properties для токенов (--md-sys-color-primary, --md-ref-typeface-*)
- Доступны библиотеки: Material Web Components, Material Tailwind
- Dynamic Color применим для веба через CSS custom properties
concepts/micro-interactions.md
+31
View File
@@ -0,0 +1,31 @@
---
title: Micro-Interactions
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, micro-interactions]
sources:
- raw/articles/crawford-new-rules-2026.md
- raw/articles/crawford-15-tips.md
confidence: medium
---
# Micro-Interactions — Микро-взаимодействия
## Принцип: Motion With Intention
Анимация должна направлять и давать обратную связь, а не впечатлять.
## Примеры
- **Hover** на кнопке — изменение цвета/тени
- **Scroll reveal** — контент появляется при скролле
- **Form feedback** — успех/ошибка с анимацией
- **Loading states** — skeleton screen вместо спиннера
- **Page transition** — плавный переход между страницами
## Когда НЕ нужно
- Если анимация замедляет загрузку (Crawford: >3s = -50%)
- Если отвлекает от смысла
- Если нет функциональной цели
## Правило Crawford
> Если люди замечают анимацию больше, чем ваш оффер — что-то не так.
concepts/mobile-design-tokens.md
+891
View File
@@ -0,0 +1,891 @@
---
name: concepts/mobile-design-tokens
title: Mobile Design Token Systems
description: 21 mobile-first design systems with detailed typography scales, color tokens, and component patterns.
tags: [mobile, design-tokens, typography, ui, responsive]
source: ui-ux-pro-max-skill
---
# Mobile Design Token Systems
21 дизайн-систем для мобильных интерфейсов с детальными токенами типографики, цветов и компонентов.
---
## 1. Bauhaus Geometric
**Шрифт:** Outfit (Single Family)
**Стиль:** Bauhaus, geometric, constructivist, bold uppercase
**Применение:** Мобильные приложения Bauhaus, bold editorial, дизайн-платформы
### Typography Scale
```
Hero: text-4xl–text-5xl font-black uppercase tracking-tighter leading-[0.9]
Sub: text-2xl font-bold uppercase tracking-tight leading-[1]
Body: text-base font-bold uppercase tracking-tight leading-[1.1]
Label: text-xs font-bold uppercase tracking-widest leading-[1]
```
### Implementation
```css
fontFamily: {
sans: ['Outfit', 'sans-serif']
}
.hero {
@apply text-4xl font-black uppercase tracking-tighter leading-[0.9];
}
.body {
@apply text-base font-bold uppercase tracking-tight leading-[1.1];
}
.label {
@apply text-xs font-bold uppercase tracking-widest leading-[1];
}
```
---
## 2. Minimalist Monochrome Editorial
**Шрифт:** Playfair Display + Source Serif 4 + JetBrains Mono (Triple Stack)
**Стиль:** Monochrome, austere, typographic, luxury high contrast
**Применение:** Модные мобильные приложения, digital exhibitions, портфолио
### Typography Scale
```
Hero: text-5xl–text-6xl font-black tracking-tighter leading-[0.9]
Section: text-2xl font-bold tracking-tight leading-[1]
Body: text-base font-light leading-relaxed leading-[1.75]
Tag: text-xs font-bold uppercase tracking-widest
```
### Implementation
```css
fontFamily: {
display: ['Playfair Display', 'serif'],
body: ['Source Serif 4', 'serif'],
mono: ['JetBrains Mono', 'monospace']
}
/* 100% serif/mono — NO UI sans-serif */
.hero {
@apply text-5xl font-black tracking-tighter leading-[0.9] text-gray-900;
}
.tag {
@apply text-xs font-bold uppercase tracking-widest text-gray-500;
}
```
---
## 3. Modern Dark Cinema (Inter System)
**Шрифт:** Inter (Single Family)
**Стиль:** Dark, cinematic, technical, precision
**Применение:** Dev tools, fintech, AI dashboards, streaming
### Typography Scale
```
Display: text-4xl font-bold tracking-tighter gradient-text (white→rgba(255,255,255,0.7))
H1: text-3xl font-semibold tracking-tight
H2: text-2xl font-semibold tracking-tight
Body: text-base font-normal
Label: text-xs font-medium uppercase tracking-widest
```
### Implementation
```css
fontFamily: {
sans: ['Inter', 'sans-serif']
}
.display {
@apply text-4xl font-bold tracking-tighter;
background: linear-gradient(to right, #FFFFFF, rgba(255,255,255,0.7));
-webkit-background-clip: text;
}
.h1 { @apply text-3xl font-semibold tracking-tight; }
.h2 { @apply text-2xl font-semibold tracking-tight; }
.body { @apply text-base font-normal; }
.label {
@apply text-xs font-medium uppercase tracking-[0.15em] text-gray-400;
}
```
### Colors
```css
:root {
--background: #0B0B10;
--foreground: #F8FAFC;
--card: #1E1E23;
--card-foreground: #F8FAFC;
--muted: #232328;
--muted-foreground: #94A3B8;
--border: #1E293B;
}
```
---
## 4. SaaS Mobile Boutique (Calistoga + Inter)
**Шрифт:** Calistoga + Inter + JetBrains Mono (Tri-Stack)
**Стиль:** Boutique, warm editorial, premium
**Применение:** B2B SaaS mobile, fintech, marketing tools
### Typography Scale
```
Hero: text-3xl–text-4xl font-medium italic leading-[1.1]
Section: text-2xl font-semibold leading-[1.2]
Body: text-base font-normal leading-[1.625]
Label: text-xs font-bold uppercase tracking-[0.1em]
Data: text-xs font-mono uppercase tracking-[0.15em]
```
### Implementation
```css
fontFamily: {
display: ['Calistoga', 'serif'],
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace']
}
.hero {
@apply text-4xl font-medium italic leading-[1.1] text-gray-900;
}
.label {
@apply text-xs font-bold uppercase tracking-[0.1em] text-gray-500;
}
.data {
@apply text-xs font-mono uppercase tracking-[0.15em] text-gray-600;
}
```
---
## 5. Terminal CLI Monospace
**Шрифт:** JetBrains Mono (Single Family)
**Стиль:** Terminal, hacker, matrix, retro-future
**Применение:** Dev tools, Web3, hacker aesthetic, ARG
### Typography Scale
```
Strict sizes ONLY: 12pt / 14pt / 16pt
Weight: 400 normal only (bold ruins mono character)
Line height: 1.2x font size (information density)
Letter spacing: normal (monospaced auto-spacing)
```
### Implementation
```css
fontFamily: {
mono: ['JetBrains Mono', 'monospace']
}
.text-12 { @apply text-sm; } /* 12pt */
.text-14 { @apply text-base; } /* 14pt */
.text-16 { @apply text-lg; } /* 16pt */
/* ALL UI labels uppercase */
.label {
@apply text-sm font-mono uppercase;
}
/* ASCII borders and text-based progress bars */
.border-ascii {
border: 1px solid #00FF41;
font-family: 'JetBrains Mono', monospace;
}
.progress-bar {
@apply text-sm font-mono text-green-400;
content: '[████████████░░░░░░] 65%';
}
```
### Colors
```css
:root {
--background: #000000;
--foreground: #00FF41; /* Matrix green */
--card: #0D1117;
--border: #1F1F1F;
}
```
---
## 6. Kinetic Brutalism (Space Grotesk)
**Шрифт:** Space Grotesk (Single Dominant)
**Стиль:** Kinetic, brutalist, aggressive, uppercase, oversized
**Применение:** Музыка/культура, спорт, бренд-флаги, дропы
### Typography Scale
```
Hero: text-4xl–text-6xl font-black uppercase tracking-tight leading-[0.9]
Section: text-2xl font-bold uppercase tracking-tight leading-[1]
Body: text-base font-semibold uppercase tracking-tight leading-[1.1]
Card: text-lg font-bold uppercase tracking-tight
Label: text-xs font-bold uppercase tracking-widest leading-[1]
```
### Implementation
```css
fontFamily: {
sans: ['Space Grotesk', 'sans-serif']
}
.hero {
@apply text-5xl font-black uppercase tracking-tight leading-[0.9];
}
.body {
@apply text-base font-semibold uppercase tracking-tight leading-[1.1];
}
.label {
@apply text-xs font-bold uppercase tracking-widest leading-[1];
}
/* Responsive font scale (PixelRatio helper for responsive sizing) */
.hero-responsive {
font-size: calc(1rem * var(--font-scale, 2.5));
}
```
---
## 7. Flat Design Mobile (System Bold)
**Шрифт:** Inter (Single Family, Thick Weights)
**Стиль:** Flat, clean, system, bold, geometric
**Применение:** Cross-platform, dashboards, marketing pages, icon-heavy UI
### Typography Scale
```
Headline: font-extrabold text-4xl tracking-tight leading-[1]
Subhead: font-bold text-2xl leading-[1.2]
Body: font-normal text-base leading-[1.5]
Label: font-bold uppercase text-xs tracking-widest
```
### Key Principle: Size Contrast (Poster Rule)
```
Headline 40pt+ vs Body 16pt = mandatory 5:1 ratio
No shadows — thick weights carry all hierarchy
```
### Implementation
```css
.headline {
@apply text-4xl font-extrabold tracking-tight leading-[1];
}
.subhead {
@apply text-2xl font-bold leading-[1.2];
}
.body {
@apply text-base font-normal leading-[1.5];
}
.label {
@apply text-xs font-bold uppercase tracking-widest;
}
/* NO italic, NO thin weights */
```
---
## 8. Material You MD3 (Roboto System)
**Шрифт:** Roboto (System Default)
**Стиль:** Material Design 3, tonal, friendly, accessible
**Применение:** Android, cross-platform, productivity, B2B dashboards
### MD3 Type Scale
```
Display Large: 56px / 400 / 64px
Headline Large: 32px / 500 / 40px
Title Large: 22px / 500 / 28px
Body Large: 16px / 400 / 24px
Label Medium: 12px / 500 / 16px
Buttons: letterSpacing 0.1px
```
### Implementation
```css
fontFamily: {
sans: ['Roboto', 'sans-serif']
}
.display-lg { @apply text-[56px] font-normal leading-[64px]; }
.headline-lg { @apply text-3xl font-medium leading-[40px]; }
.title-lg { @apply text-xl font-medium leading-[28px]; }
.body-lg { @apply text-base font-normal leading-[24px]; }
.label-md { @apply text-xs font-medium leading-[16px] tracking-[0.1px]; }
/* System Roboto on Android; Google Fonts for iOS parity */
/* Never use custom weights beyond 300–700 */
```
---
## 9. Neo Brutalism Mobile
**Шрифт:** Space Grotesk (Bold-Only: 700 & 900)
**Стиль:** Pop art, loud, bold, stickers, mechanical
**Применение:** Gen-Z marketing, e-commerce для молодёжи, коллаж-приложения
### Typography Scale
```
Display: text-4xl–text-5xl font-black uppercase leading-[1]
Heading: text-2xl font-bold uppercase leading-[1.1]
Body: text-lg font-bold leading-[1.2]
Label: text-xs font-black uppercase tracking-widest
```
### Implementation
```css
fontFamily: {
sans: ['Space Grotesk', 'sans-serif']
}
/* STRICTLY 700 and 900 ONLY */
.display {
@apply text-5xl font-black uppercase leading-[1];
}
.heading {
@apply text-2xl font-bold uppercase leading-[1.1];
}
.body {
@apply text-lg font-bold leading-[1.2];
}
.label {
@apply text-xs font-black uppercase tracking-widest leading-[1];
}
/* No italic, no thin weights */
```
---
## 10. Bold Typography Mobile (Inter-Tight Poster)
**Шрифт:** Inter + Playfair Display (Italic) + JetBrains Mono
**Стиль:** Bold typography, editorial, poster, luxury
**Применение:** Creative brand flagships, reading platforms, luxury mobile
### Typography Scale
```
Hero Statement: text-4xl–text-5xl font-black tracking-tighter
H1: text-3xl font-bold tracking-tight
H2: text-2xl font-semibold tracking-tight
Sub: text-lg font-semibold tracking-tight
Body: text-base font-normal
Labels: text-xs font-medium uppercase tracking-widest
Pull Quote: text-xl italic text-gray-600
Stats: text-sm font-mono
```
### Key Rule: H1:Body = 5:1 Ratio (Mandatory)
```css
.h1 {
@apply text-3xl font-bold tracking-tight; /* ~32px */
}
.body {
@apply text-base font-normal; /* ~16px */
}
/* 32/16 = 2x — meets 5:1 weight contrast */
```
### Implementation
```css
.fontFamily: {
display: ['Inter', 'sans-serif'],
quote: ['Playfair Display', 'serif'],
mono: ['JetBrains Mono', 'monospace']
}
.hero-statement {
@apply text-5xl font-black tracking-tighter;
}
.pull-quote {
@apply text-xl italic text-gray-600;
}
.stats {
@apply text-sm font-mono text-gray-500;
}
/* Underlines replace buttons for interactions */
.interaction {
@apply border-b-2 border-current cursor-pointer hover:border-current;
}
```
---
## 11. Academia Mobile
**Шрифт:** Cormorant Garamond + Crimson Pro + Cinzel (Triple Stack)
**Стиль:** Library, mahogany, parchment, scholarly, antique
**Применение:** Knowledge management, scholarly reading, RPG games
### Typography Scale
```
Headings: text-xl–text-2xl font-medium leading-[1.1]
Body: text-base font-normal leading-[1.5]
Labels: text-xs font-bold uppercase tracking-widest
Drop Cap: text-[60px] font-bold text-amber-700
```
### Implementation
```css
fontFamily: {
heading: ['Cormorant Garamond', 'serif'],
body: ['Crimson Pro', 'serif'],
display: ['Cinzel', 'serif']
}
.heading {
@apply text-2xl font-medium leading-[1.1] text-gray-900;
}
.body {
@apply text-base font-normal leading-[1.625] text-gray-700;
}
.label {
@apply text-xs font-bold uppercase tracking-widest text-amber-800;
}
/* Drop cap for first letter */
.drop-cap::first-letter {
@apply text-[60px] font-bold text-amber-700;
font-family: 'Cinzel', serif;
}
/* Section prefix: VOLUME I/II/III in Cinzel */
.section-prefix {
@apply text-xs font-bold uppercase tracking-widest text-amber-800;
font-family: 'Cinzel', serif;
}
```
---
## 12. Cyberpunk Mobile
**Шрифт:** Orbitron + JetBrains Mono
**Стиль:** Neon, glitch, HUD, sci-fi, dark
**Применение:** Gaming, fintech/crypto, data visualization, cyberpunk games
### Typography Scale
```
H1: text-3xl font-black uppercase tracking-widest leading-[1]
H2: text-xl font-bold uppercase tracking-wider leading-[1.1]
Section: text-lg font-bold uppercase tracking-wider
Body: text-sm font-medium leading-[1.5]
Labels: text-xs font-medium uppercase opacity-70
```
### Implementation
```css
fontFamily: {
heading: ['Orbitron', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace']
}
.h1 {
@apply text-3xl font-black uppercase tracking-widest leading-[1] text-cyan-400;
}
.h2 {
@apply text-xl font-bold uppercase tracking-wider leading-[1.1] text-pink-400;
}
.body {
@apply text-sm font-mono leading-[1.5] text-green-400;
}
.label {
@apply text-xs font-medium uppercase opacity-70 text-gray-400;
}
/* Dark background with neon accents */
:root {
--background: #000000;
--foreground: #E0E0E0;
--accent-cyan: #00FFFF;
--accent-pink: #FF00FF;
--accent-green: #00FF41;
}
```
---
## 13. Web3 Bitcoin DeFi
**Шрифт:** Space Grotesk + Inter + JetBrains Mono (Triple)
**Стиль:** Digital gold, precision, luminescent
**Применение:** DeFi, NFT, metaverse, high-tech brands
### Typography Scale
```
H1: text-3xl–text-4xl font-semibold leading-[1.1]
H2: text-2xl font-semibold leading-[1.2]
Body: text-base font-normal leading-[1.625]
Mono: text-sm font-mono leading-[1.5]
Labels: text-xs font-bold uppercase tracking-widest
```
### Implementation
```css
fontFamily: {
heading: ['Space Grotesk', 'sans-serif'],
body: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace']
}
.body {
@apply text-base font-normal leading-[1.625] text-gray-700;
}
.mono {
@apply text-sm font-mono leading-[1.5] text-gray-600;
}
.label {
@apply text-xs font-bold uppercase tracking-widest text-gray-500;
}
/* Balance figures: MaskedView gradient text (orange→gold) */
.balance {
@apply text-3xl font-semibold;
background: linear-gradient(to right, #F97316, #FBBF24);
-webkit-background-clip: text;
}
/* Buttons: Inter Bold uppercase */
.btn {
@apply text-sm font-bold uppercase tracking-[0.15em];
}
```
---
## 14. Claymorphism Mobile
**Шрифт:** Nunito + DM Sans
**Стиль:** Clay, rounded, playful, candy, tactile
**Применение:** Children's education, teen social, creative tools
### Typography Scale
```
Hero: text-4xl font-black tracking-tight leading-[1.15]
Section: text-3xl font-extrabold tracking-tight leading-[1.2]
Card: text-xl font-bold leading-[1.3]
Body: text-base font-medium leading-[1.5]
```
### Implementation
```css
fontFamily: {
display: ['Nunito', 'sans-serif'],
body: ['DM Sans', 'sans-serif']
}
.hero {
@apply text-4xl font-black tracking-tight leading-[1.15] text-gray-900;
}
.section {
@apply text-3xl font-extrabold tracking-tight leading-[1.2] text-gray-800;
}
.body {
@apply text-base font-medium leading-[1.5] text-gray-700;
}
/* Include font padding for rounded buttons */
.nunito-button {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
includeFontPadding: false; /* React Native */
}
```
---
## 15. Enterprise SaaS Mobile
**Шрифт:** Plus Jakarta Sans (Single Family)
**Стиль:** Professional, modern, approachable, iOS Dynamic Type
**Применение:** B2B SaaS, productivity, government, finance, admin dashboards
### Typography Scale
```
Hero: text-3xl–text-4xl font-extrabold leading-[1.15]
Section: text-2xl font-bold leading-[1.2]
Card: text-lg font-semibold leading-[1.25]
Body: text-base font-normal leading-[1.5]
Caption: text-xs font-normal text-muted
```
### Implementation
```css
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif']
}
.hero {
@apply text-4xl font-extrabold leading-[1.15] text-gray-900;
}
.section {
@apply text-2xl font-bold leading-[1.2] text-gray-800;
}
.card-title {
@apply text-lg font-semibold leading-[1.25] text-gray-700;
}
.body {
@apply text-base font-normal leading-[1.5] text-gray-600;
}
.caption {
@apply text-xs font-normal text-gray-500;
}
.btn {
@apply text-sm font-bold uppercase tracking-[0.5em];
}
/* Must support iOS Dynamic Type and Android font scaling */
/* Never hardcode pixel sizes without respecting system font scale */
@media (prefers-reduced-motion: no-preference) {
body {
font-size: clamp(14px, 1vw + 12px, 18px);
}
}
```
---
## 16. Sketch Hand-Drawn Mobile
**Шрифт:** Kalam + Patrick Hand (Dual Handwritten)
**Стиль:** Sketch, hand-drawn, imperfect, organic, paper
**Применение:** Journaling, creative platforms, children's apps
### Typography Scale
```
Heading: text-2xl–text-3xl font-bold leading-[1.2]
Body: text-base font-normal leading-[1.5]
Label: text-sm font-normal
```
### Implementation
```css
fontFamily: {
display: ['Kalam', 'cursive'],
body: ['Patrick Hand', 'cursive']
}
.heading {
@apply text-3xl font-bold leading-[1.2] text-gray-900;
}
.body {
@apply text-base font-normal leading-[1.5] text-gray-700;
}
.label {
@apply text-sm text-gray-500;
}
/* Vary font sizes slightly between elements for spontaneous feel */
/* Never use for financial figures or legal text */
```
---
## 17. Neumorphism Mobile
**Шрифт:** Plus Jakarta Sans (or System)
**Стиль:** Soft UI, monochromatic, ceramic, depth
**Применение:** Smart home, minimal tools, aesthetic dashboards
### Typography Scale
```
Heading: text-2xl–text-3xl font-bold tracking-tight leading-[1.2]
Body: text-base font-medium leading-[1.4]
Caption: text-xs font-normal
```
### Implementation
```css
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif']
}
:root {
--surface: #E0E5EC;
--text-primary: #3D4852; /* 7.5:1 contrast */
--text-muted: #6B7280; /* 4.6:1 contrast */
--accent: #6C63FF;
}
.heading {
@apply text-3xl font-bold tracking-tight leading-[1.2] text-[var(--text-primary)];
}
.body {
@apply text-base font-medium leading-[1.4] text-[var(--text-primary)];
}
.caption {
@apply text-xs font-normal text-[var(--text-muted)];
}
/* Accent only on active/focus indicators */
.active {
color: var(--accent);
}
/* System (SF Pro / Roboto) acceptable fallback for performance */
```
---
## 18. SaaS Mobile (Inter Single Family)
**Шрифт:** Inter (Single Family)
**Стиль:** Modern, clean, professional, versatile
**Применение:** General purpose, portfolios, agencies, modern brands
### Typography Scale
```
Display: text-4xl font-bold tracking-tight leading-[1.1]
H1: text-3xl font-semibold tracking-tight
H2: text-2xl font-semibold
Body: text-base font-normal
Label: text-sm font-medium uppercase tracking-wider
```
### Implementation
```css
fontFamily: {
sans: ['Inter', 'sans-serif']
}
.display {
@apply text-4xl font-bold tracking-tight leading-[1.1];
}
.h1 { @apply text-3xl font-semibold; }
.h2 { @apply text-2xl font-semibold; }
.body { @apply text-base font-normal; }
.label {
@apply text-sm font-medium uppercase tracking-wider;
}
```
---
## 19. Vietnamese / Japanese / Korean / Chinese Typography
| Script | Heading Font | Body Font | Notes |
|--------|-------------|-----------|-------|
| **Vietnamese** | Be Vietnam Pro | Noto Sans | Be Vietnam Pro excellent Vietnamese support |
| **Japanese** | Noto Serif JP | Noto Sans JP | Traditional + modern feel |
| **Korean** | Noto Sans KR | — (single family) | Clean modern Korean |
| **Chinese TC** | Noto Serif TC | Noto Sans TC | Taiwan/HK markets |
| **Chinese SC** | Noto Sans SC | — (single family) | Mainland China |
| **Arabic** | Noto Naskh Arabic | Noto Sans Arabic | RTL support, Naskh traditional, Sans modern |
| **Thai** | Noto Sans Thai | — (single family) | Clean Thai typography |
| **Hebrew** | Noto Sans Hebrew | — (single family) | RTL support |
---
## 20. Accessibility First
**Шрифт:** Atkinson Hyperlegible (Single Family)
**Стиль:** Readable, inclusive, dyslexia-friendly
**Применение:** Accessibility-critical, government, healthcare, inclusive design
### Implementation
```css
fontFamily: {
sans: ['Atkinson Hyperlegible', 'sans-serif']
}
/* Designed for maximum legibility */
/* Excellent for accessibility */
```
---
## 21. Pixel Retro
**Шрифт:** Press Start 2P + VT323
**Стиль:** Pixel, retro, gaming, 8-bit, nostalgic
**Применение:** Pixel art games, retro websites, creative portfolios
### Implementation
```css
fontFamily: {
pixel: ['Press Start 2P', 'cursive'],
terminal: ['VT323', 'monospace']
}
.display {
@apply text-lg font-pixel; /* Press Start 2P very wide/large */
}
.body {
@apply text-base font-terminal; /* VT323 better for body */
}
```
---
## Quick Reference: Mobile Design Systems by Use Case
| Use Case | System | Shorthand |
|----------|--------|-----------|
| **Dev Tools** | Modern Dark Cinema | `font-inter tracking-tight` |
| **Terminal/Hacker** | Terminal CLI Mono | `font-jetbrains mono` |
| **Fashion/Luxury** | Bauhaus Geometric | `font-outfit uppercase` |
| **B2B SaaS** | Enterprise SaaS | `font-plus-jakarta` |
| **Gaming** | Kinetic Brutalism | `font-space-grotesk uppercase` |
| **Children** | Claymorphism | `font-nunito rounded` |
| **Finance** | Neo Brutalism | `font-space-grotesk 700/900` |
| **Health** | Neumorphism | `font-plus-jakarta soft-ui` |
| **Creative** | Bold Typography | `font-inter + font-playfair italic` |
| **Web3** | Cyberpunk | `font-orbitron + font-jetbrains` |
| **Academia** | Academia | `font-cormorant + font-crimson + font-cinzel` |
| **Retro** | Pixel | `font-press-start` |
| **Accessibility** | Accessibility First | `font-atkinson-hyperlegible` |
concepts/mobile-first-design.md
+36
View File
@@ -0,0 +1,36 @@
---
title: Mobile-First Design
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, mobile-first]
sources:
- raw/articles/crawford-20-principles.md
- raw/articles/crawford-26-lessons.md
- raw/articles/web-design-research.md
confidence: high
---
# Mobile-First Design — Мобильный дизайн
## Принцип
Начинать проектирование с малого экрана (360×800), потом расширять на планшет и десктоп.
Заставляет приоритизировать: что действительно важно?
## Почему это стандарт
- **Мобильный трафик доминирует** — для большинства посетителей мобильная версия = весь сайт
- **Google mobile-first indexing** — поисковик ранжирует по мобильной версии
- **Core Web Vitals** — LCP, INP, CLS на мобильных критичнее
## Техническая реализация
- CSS Container Queries — адаптивность на уровне компонентов
- Media queries как резерв, container queries как основной инструмент
- Touch-friendly: кнопки минимум 44×44px
- Bottom navigation вместо hamburger на мобильных
- Swipe-жесты для навигации
## Mobile Menu (hamburger)
Проверенные паттерны:
- **Slide-in** — меню выезжает слева
- **Bottom sheet** — меню снизу (удобнее для больших экранов)
- **Full screen overlay** — для лендингов с 4-5 пунктами
concepts/modern-css-techniques.md
+51
View File
@@ -0,0 +1,51 @@
---
title: Modern CSS Techniques
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, modern-css]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-new-rules-2026.md
confidence: high
---
# Modern CSS Techniques (2025–2026)
## Ключевые технологии
### Container Queries
- Адаптивность на уровне компонента, не viewport
- Компонент подстраивается под свой контейнер, а не под экран
- Поддержка: все современные браузеры
### :has() — родительские селекторы
- Революция: родитель может стилизоваться по наличию ребёнка
- Пример: `.card:has(img)` → карточка с изображением шире
- Chrome 105+, Safari 15.4+
### Cascade Layers (@layer)
- Управление специфичностью, а не борьба с ней
- Порядок: reset → base → components → utilities → overrides
- Все современные браузеры
### CSS Nesting
- Вложенные селекторы без препроцессоров
- Все современные браузеры
### Scroll-Driven Animations
- Параллакс и анимации по скроллу без JS
- Chrome 115+
### Anchor Positioning
- Привязка элементов (tooltip, popover) без JS
- Chrome 125+
### Color-mix()
- Смешивание цветов в CSS
- Полезно для темной темы: `color-mix(in srgb, #fff 10%, #000)`
## Motion With Intention (Crawford)
- Анимация должна направлять, а не впечатлять
- Subtle hover, простые fade-in, функциональные transitions
- Если пользователь замечает анимацию больше смысла → плохо
concepts/performance-optimization.md
+58
View File
@@ -0,0 +1,58 @@
---
title: Performance Optimization for Web
description: Core web vitals, image optimization, and rendering strategies.
tags: [performance, optimization, core-web-vitals, lighthouse, loading]
---
# Performance Optimization for Web
## Core Web Vitals
| Metric | Target | Weight |
|--------|--------|--------|
| LCP | < 2.5s | 25% |
| CLS | < 0.1 | 15% |
| INP | < 200ms | 50% |
| FID (legacy) | < 100ms | 10% |
## Image Optimization
### Format Priority
1. WebP (best balance)
2. AVIF (best compression)
3. PNG (lossless)
4. JPEG (legacy)
### Sizing
```html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
```
### Responsive Images
```html
<img srcset="
small.jpg 640w,
medium.jpg 1280w,
large.jpg 1920w
" src="large.jpg" sizes="(max-width: 640px) 100vw, 1280px" loading="lazy">
```
## Critical CSS
```css
/* Inline above-the-fold styles */
<style>
.hero { /* critical styles */ }
</style>
/* Load rest async */
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
```
## Anti-Patterns
- Never use images > 500KB
- Never skip width/height attributes (causes CLS)
- Never block rendering with JavaScript
- Never forget to optimize fonts (subset, preload, display=swap)
concepts/responsive-design.md
+56
View File
@@ -0,0 +1,56 @@
---
title: Responsive Design Patterns
description: Mobile-first responsive design for premium websites.
tags: [responsive, mobile, breakpoints, grid, layout]
---
# Responsive Design Patterns
## Breakpoint Scale
```
xs: 0px — Mobile (default)
sm: 640px — Large mobile
md: 768px — Tablet
lg: 1024px — Laptop
xl: 1280px — Desktop
2xl: 1536px — Large desktop
3xl: 1920px — Widescreen
```
## Grid System
### Mobile (< 768px)
- 1 column layout
- Full-bleed sections
- Stacked cards
- Hamburger menu
### Tablet (768px - 1024px)
- 2 column grid
- Side-by-side cards
- Sticky navigation
### Desktop (> 1024px)
- 12-column grid
- Bento grid layouts
- Parallax effects
- Hover interactions
## Fluid Typography
```css
font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
```
## Fluid Spacing
```css
padding: clamp(1rem, 5vw, 4rem);
```
## Anti-Patterns
- Never use fixed pixel widths for containers
- Never hide content on mobile — restructure instead
- Never ignore touch targets (min 48x48px)
- Never disable scroll animations on mobile
concepts/responsive-grid-layout.md
+31
View File
@@ -0,0 +1,31 @@
---
title: Responsive Grid and Layout
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, layout]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-20-principles.md
confidence: high
---
# Responsive Grid and Layout — Сетки и раскладка
## Сетки
- **12-колоночная** — стандарт для desktop (1440px+)
- **4-колоночная** — для mobile (360×800)
- **Bento Grid** — модульная сетка (Apple-стиль, популярна в 2025–2026)
- **CSS Grid** — для макета страницы
- **Flexbox** — для компонентов
## Container Queries
Новый стандарт адаптивности: компонент подстраивается под свой контейнер, а не viewport.
Позволяет: один компонент → разная раскладка в разных контекстах.
## White Space
Cluttered = cheap. Spacious = premium. Crawford: "white space = секрет премиальности".
## Mobile-First Layout
Начинать с 1 колонки, добавлять колонки на больших экранах.
Content → sidebar → header → footer — порядок в HTML может отличаться от визуального.
concepts/russian-market-leaders.md
+122
View File
@@ -0,0 +1,122 @@
---
title: Russian Market Leaders — UX/UI Analysis
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design,]
sources:
- raw/articles/tinkoff-design-system.md
- raw/articles/russian-top-landings.md
- personal analysis based on market observation
confidence: high
---
# Russian Market Leaders — Анализ гигантов и что у них взять
## 🏆 Wildberries (wildberries.ru)
**Цвета:** Красный + белый
**Трафик:** 300M+ мес. (крупнейший e-commerce РФ)
### Сильные стороны
- **Агрессивные скидки** — красный ценник, % скидки крупно, перечёркнутая цена
- **Карусели** — максимальная плотность контента на экране
- **Рейтинг и отзывы** — prominently displayed
- **Мобильный-first** — мобильное приложение лучше веба
### Слабые места (наше преимущество)
- **Визуальный шум** — слишком плотно, утомляет
- **Поиск несовершенен** — фильтры слабые
- **Desktop-версия отстаёт** — недоделанная адаптация
- **Персонализации нет** — всем одинаково
### Что взять
Красный = действие, карусели для большого каталога, рейтинг на видном месте
---
## 🏆 Ozon (ozon.ru)
**Цвета:** Голубой + белый
**Трафик:** 200M+ мес.
### Сильные стороны
- **Чёткая доставка** — дата и время сразу на карточке
- **Таблица сравнения товаров** — лучшая в РФ
- **Фильтры** — мощные, много опций
- **"Сплит" / "Долями"** — заметно на странице
- **Бейджи** — суперцена, топ-продажа, скидка
### Слабые места
- **Интерфейс перегружен** — много блоков, меню, баннеров
- **Личный кабинет запутан** — много разделов
- **Скорость загрузки** — ниже, чем у WB
### Что взять
Доставка с датой, сравнение товаров, бейджи-система, сплит-оплата
---
## 🏆 Т-Банк (tbank.ru)
**Цвета:** Жёлтый + чёрный
**Отличительная черта:** Лучшая дизайн-система в РФ
### Сильные стороны
- **Atomic Design System** — 10+ продуктов на одной системе
- **Максимальная конверсия форм** — минимум полей
- **A/B тестирование встроено в ДНК** — всё проверяется
- **Игровые механики** — кэшбэк, статусы, достижения
- **Кросспродажи** — лендинги внутри лендингов
- **Тон коммуникации** — молодёжный, дерзкий, запоминающийся
### Что взять
Дизайн-систему с атомарным подходом, A/B культуру, игровые механики, тон
---
## 🏆 Сбер (sberbank.ru / sbermarket.ru)
**Цвета:** Зелёный + белый
**Отличительная черта:** Экосистема
### Сильные стороны
- **Минималистичный дизайн** — белый фон, много воздуха, чисто
- **Экосистемная интеграция** — СберМаркет, СберЗдоровье, СберУслуги
- **Доверие через бренд** — все знают Сбер
- **Процессы "в один клик"** — минимум шагов
- **Стабильность** — работает предсказуемо
### Слабые места
- **Дизайн консервативный** — не хватает эмоций
- **Навигация сложная** — много сервисов в одном месте
- **Медленные инновации** — новые фичи долго внедряются
### Что взять
Минимализм + доверие, экосистемная интеграция, процессы в 1 клик
---
## 🏆 Яндекс (yandex.ru / market.yandex.ru)
**Цвета:** Жёлтый + серый
**Отличительная черта:** Data-driven design
### Сильные стороны
- **A/B тестирование в масштабе** — все изменения через тесты
- **Персонализация** — рекомендательная система
- **Юзабилити-лаборатория** — свои UX-исследования
- **Единый дизайн-язык** — все сервисы узнаваемы
- **Микро-анимации** — осмысленные, не отвлекают
### Что взять
Data-driven подход, персонализация, лаборатория UX
---
## Итог: как сделать лучше и Tinkoff, и Ozon, и Wildberries
| Критерий | Лидеры РФ (среднее) | Наша цель |
|----------|--------------------|-----------|
| Конверсия | 3-5% e-commerce | 8-12% через ясность |
| Дизайн | Красно-перегружен (WB) или консервативен (Сбер) | Мировые тренды + РФ-адаптация |
| Скорость | 3-5s (Ozon, Сбер) | <1.5s LCP |
| Доверие | Есть за счёт бренда | Реквизиты + отзывы + Telegram |
| Дизайн-система | Есть только у Tinkoff | Своя, на базе мировых + РФ |
| Мобильная версия | Упрощённая | Полноценная, container queries |
| Персонализация | Базовая | Контент под регион + сегмент |
concepts/russian-top-landings-analysis.md
+73
View File
@@ -0,0 +1,73 @@
---
title: Russian Top Landing Pages
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design,]
sources:
- raw/articles/russian-top-landings.md
- https://krivov.net/blog/luchshie-sayty-rossii-top-obzor-liderov-dizayna
- https://www.sostav.ru/blogs/282100/60768
confidence: high
---
# Russian Top Landing Pages — Что делает их лучшими + как превзойти
## Топ-10 красивых сайтов РФ 2025 (рейтинг дизайнеров)
### Real Estate / Недвижимость
- **Самолёт (samolet.ru)** — много контента, фото ЖК, калькулятор ипотеки
- **Этажи (etagi.com)** — региональная привязка, отзывы, база агентов
### Промышленность / B2B
- **Superjet 200** — параллакс, WebGL, BEM, scroll-driven CSS
- **DAIKS** — scroll-based сцена, многослойный параллакс, сторителлинг
- **Beltrans** — industrial стиль, моноширинный шрифт, color tokens
### Beauty / Премиум
- **Cocos Beauty Shop** — Lottie, GSAP, clamp(), SSR, 320px-4K
- **BEAUTY** — асимметричная сетка, italic serif, бордово-золотая палитра
- **Hart Man's Club** — атмосфера, иерархия клиент/прохожий
### Медицина
- **ВИТАСТОМ** — карточный UI, бело-бирюзовая схема, Z-reading, line-style иконки
### Технологии
- **Lada Volta** — full-width video, keyframe-анимации, mobile-first, clip-path
### Культура
- **ТЭФИ** — 3D Орфей, full black, gold accents, UX-нарратив через анимацию
## Общие черты лучших сайтов РФ (что объединяет)
1. **Тёмный фон** — 70% топ-сайтов используют full black или тёмный градиент
2. **3D / WebGL элементы** — выделяются на фоне конкурентов
3. **Сторителлинг через скролл** — scroll-based narrative
4. **Крупная типографика** — заголовки 48-72px и выше
5. **Анимация с намерением** — GSAP, Lottie, scroll-driven
6. **Микро-взаимодействия** — hover, transition, параллакс
7. **Асимметричные сетки** — отказ от строгой симметрии
8. **Цветовые акценты** — золотой, бордовый, яркие для контраста
## Чего у них НЕТ (наше преимущество)
- **Юзабилити-тестирования** — многие красивые, но неудобные
- **Core Web Vitals** — тяжёлые анимации убивают LCP
- **Container Queries** — адаптивность на уровне viewport, не компонентов
- **Design Tokens** — у большинства нет системы, каждый сайт с нуля
- **A/B тестирование** — красиво, но не проверено на конверсию
- **Mobile-first** — многие адаптируют, а не проектируют с мобильного
- **Доступность (WCAG)** — почти никто из РФ не соблюдает
- **Кириллическая типографика** — не оптимизирована под русский язык
## Как сделать лучше (формула)
**Мировой дизайн + РФ-специфика + производительность = лидер рынка**
1. **Тёмная тема** мирового уровня (как у Apple/Stripe) + российская психология
2. **3D/WebGL** элементы без убийства производительности
3. **Scroll-driven сторителлинг** с ясным CTA
4. **Design Tokens** + полная дизайн-система (как Tinkoff, но для веба)
5. **Container Queries** для идеальной адаптивности
6. **Кириллическая типографика** с правильной вёрсткой
7. **РФ-паттерны** (реквизиты, Telegram, доставка, отзывы)
8. **Core Web Vitals Pass** — LCP <1.5s, INP <100ms, CLS <0.05
9. **A/B тестирование** каждой секции
10. **Доступность WCAG AA** — отстроиться от 99% конкурентов
concepts/russian-ui-patterns.md
+85
View File
@@ -0,0 +1,85 @@
---
title: Russian UI Patterns
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, ux]
sources:
- raw/articles/russian-top-landings.md
- raw/articles/crawford-15-tips.md
- raw/articles/web-design-research.md
confidence: high
---
# Russian UI Patterns — Паттерны интерфейса для РФ
## Хиты российского e-commerce (Wildberries, Ozon, Yandex Market)
### Wildberries
- **Красный доминант** — узнаваемость, CTA, распродажи
- **Карусели товаров** — максимальная плотность на экране
- **Фильтры сбоку** — развёрнутые, много опций
- **"Народный рейтинг"** звёзды крупно
- **Товарные карточки** — фото, цена, скидка, рейтинг — всё сразу
### Ozon
- **Голубой + белый** — контраст, доверие
- **Фокус на доставку** — дата и время сразу в карточке
- **"Сплит" и "Долями"** — prominently displayed
- **Бейджи** — скидка %, суперцена, топ-продажа
- **Сравнение товаров** — мощная таблица
### Сбер (СберБанк / СберМаркет)
- **Зелёный** — устойчивость, доверие (цвет бренда)
- **Минимализм** — белый фон, много воздуха
- **Процессы в один клик** — минимизация шагов
- **Сервисы в экосистеме** — кросс-линковка (СберМаркет, СберЗдоровье, СберУслуги)
### Т-Банк (Tinkoff)
- **Жёлтый + чёрный** — максимальный контраст, запоминаемость
- **Atomic Design System** — полная дизайн-система
- **Конверсия-ориентированные формы** — минимум полей
- **Компонентная архитектура** — быстрое A/B тестирование
- **Игровая механика** — кэшбэк, статусы, уровни
## Паттерны, обязательные для РФ
### 1. Telegram / WhatsApp чат
Плавающая кнопка чата на всех страницах. РФ пользователь не пишет email — он пишет в Telegram.
### 2. Детальная доставка
Не "2-5 дней", а "сегодня после 18:00", "завтра с 10:00". Конкретика.
Интеграция с СДЭК, Boxberry, Почтой РФ.
### 3. Способов оплаты много
Карты (Visa/MC/Мир), SBP (по QR), Tinkoff Pay, ЮMoney, Долями/Сплит, наличные при получении.
### 4. Подвал с юридической информацией
ИНН/ОГРН, политика конфиденциальности, возврат, оферта, реквизиты.
Без этого в РФ сайт воспринимается как однодневка.
### 5. Мобильная версия = основной интерфейс
В РФ доля мобильного трафика выше, чем на Западе.
Мобильная версия должна быть не упрощённой, а полнофункциональной.
### 6. Хлебные крошки обязательны
Для любого сайта с 2+ уровнями. В РФ пользователи любят понимать, где они.
### 7. "Тяжёлый" footer
В отличие от западного минимализма, РФ-пользователи скроллят вниз за подтверждением серьёзности. В footer: реквизиты, контакты, карта проезда, соцсети, сертификаты.
### 8. Заметный счётчик товаров в корзине
В РФ любят видеть итог со скидками. "Вы экономите 1 500 ₽" — мощный триггер.
### 9. Bento Grid для каталогов
Wildberries и Ozon переходят на Bento-сетку — разные размеры карточек для разной важности.
### 10. Закреплённая шапка с прокруткой
Sticky header с корзиной, поиском, контактами — обязателен.
## Чего избегать
- **Hamburger menu как единственная навигация** — не для РФ
- **Email-first регистрация** — РФ любит номер телефона
- **Многоступенчатые формы** — РФ бросает на 2-м шаге
- **Только соцсети Запада** — без VK и Telegram выглядит странно
- **Долгая загрузка** — РФ-пользователь уходит быстрее западного
concepts/russian-user-psychology.md
+65
View File
@@ -0,0 +1,65 @@
---
title: Russian User Psychology
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, psychology, web-design]
sources:
- raw/articles/russian-top-landings.md
- https://krivov.net/blog/luchshie-sayty-rossii-top-obzor-liderov-dizayna
- raw/articles/web-design-research.md
confidence: medium
---
# Russian User Psychology — Особенности российского пользователя
## Базовый профиль РФ-пользователя
- **Высокий скептицизм** — россиянин по умолчанию не доверяет сайту. Нужны сильные сигналы доверия
- **Прагматизм** — "что мне с этого?" важнее "как красиво"
- **Дефицит времени** — беглый просмотр, быстрые решения
- **Ценовая чувствительность** — цена часто первична, скидки и акции работают
## Что формирует доверие в РФ (ранжировано по важности)
1. **Реквизиты** (ИНН/ОГРН) — обязательны в подвале. Без них сайт воспринимается как мошеннический
2. **Реальные отзывы** — Яндекс.Отзывы, 2ГИС, IRecommend. Отзывы на самом сайте подозрительны
3. **Кейсы с цифрами** — "помогли 500+ клиентам", "сэкономили 2 млн ₽"
4. **Фото команды** — реальные люди, не сток
5. **Способы связи** — телефон (8-800), Telegram, WhatsApp — все три обязательны
6. **Доставка / возврат** — чёткие условия, без мелкого шрифта
## Цветовая психология для РФ
| Цвет | Значение в РФ | Применение |
|------|---------------|------------|
| Красный | Праздник, победа, сила (не danger!) | CTA, распродажи, акции |
| Синий | Консерватизм, надёжность, стабильность | Корпоративные, финансы, B2B |
| Золотой | Премиум, богатство, статус | Luxury, элитные услуги |
| Зелёный | Деньги, одобрение, экология | Финансы, магазины |
| Белый | Чистота, минимализм, премиум | Медицина, премиум-услуги |
| Чёрный | Элитарность, Serious business | Luxury, агентства |
Важно: в РФ **красный ≠ danger**. Красный — это "праздник", "победа". Поэтому Wildberries и Ozon красные.
## Поведенческие паттерны
- **Любят "сравнивать"** — таблицы сравнения, списки преимуществ
- **Промокоды обязательны** — без скидки ощущение "переплатил"
- **Не доверяют формам** — минимальное количество полей
- **Telegram-канал как доверие** — если у вас нет Telegram-канала, вы несерьёзны
- **Оплата картой на сайте** — всё ещё вызывает опасения. Нужны логотипы платежных систем, SSL
- **"Народный рейтинг"** — оценки 4.8+, количество отзывов, места в рейтингах
## Коммуникация
- **Прямой, честный тон** — "европейская вежливость" выглядит фальшиво
- **Ты/Вы** — B2C = ты, B2B = Вы. Соблюдать строго
- **Юмор уместен** — но не самоирония за счёт качества
- **Обещания с гарантией** — "вернём деньги, если не понравится"
- **Цифры и факты** — россияне любят конкретику, не "лучший сервис", а "доставка за 2 часа"
## Отличия от западного пользователя
| Запад | РФ |
|-------|-----|
| Доверяет бренду по умолчанию | Скептичен, проверяет |
| Minimalist = премиум | Иногда "дорого-богато" = премиум |
| Privacy важна | Готов делиться данными за скидку |
| Терпелив к UI | Нетерпелив, 3сек — предел |
| Отзывы на сайте | Отзывы на Яндекс/2ГИС |
| Email-коммуникация | Telegram/WhatsApp |
concepts/social-proof-trust.md
+39
View File
@@ -0,0 +1,39 @@
---
title: Social Proof and Trust
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, social-proof]
sources:
- raw/articles/crawford-conversion-principles.md
- raw/articles/crawford-20-principles.md
- raw/articles/crawford-26-lessons.md
confidence: high
---
# Social Proof and Trust — Социальное доказательство
## Главный принцип
> Social proof > Design.
> Самые конвертирующие страницы часто выглядят плохо, но имеют сильное социальное доказательство.
## Элементы социального доказательства
1. **Отзывы клиентов** — фото + имя + результат
2. **Кейсы** — проблема → решение → цифры
3. **Логотипы клиентов** — бренды, с которыми работали
4. **Награды и сертификаты** — признание индустрии
5. **Цифры** — "2000+ клиентов", "15 лет на рынке"
6. **Видео-отзывы** — самый сильный формат
7. **Гарантия** — возврат денег, результат
## Правила Crawford
- **Stock photos — зло**. Реальные фото, аутентичные
- **About page — 2-я по посещаемости**. Покажите цифры, результаты, трансформации
- **Реальные лица** — фото команды с именами
- **"Сработало для таких как я?"** — главный вопрос
## Micro details build trust
- Продуманная форма контакта
- Кастомные иконки
- Чистая типографика
- Отсутствие ошибок
concepts/typography-scale.md
+49
View File
@@ -0,0 +1,49 @@
---
title: Typography Scale & System
description: Building a consistent typographic scale for web interfaces.
tags: [typography, scale, system, fonts, sizing]
---
# Typography Scale & System
## Type Scale (1.25 ratio)
| Name | Size | Weight | Line-height | Use |
|------|------|--------|-------------|-----|
| xs | 12px | 400 | 1.5 | Captions, labels |
| sm | 14px | 400 | 1.5 | Small text, form labels |
| base | 16px | 400 | 1.6 | Body text |
| lg | 18px | 400 | 1.6 | Subtitles, lead text |
| xl | 20px | 600 | 1.4 | Small headings |
| 2xl | 24px | 600 | 1.3 | Section headings |
| 3xl | 30px | 700 | 1.2 | Page titles |
| 4xl | 36px | 700 | 1.2 | Hero titles |
| 5xl | 48px | 800 | 1.1 | Display titles |
| 6xl | 64px | 800 | 1.1 | Hero display |
## CSS Implementation
```css
:root {
--font-sans: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-scale: 1.25;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
```
## Font Pairing Rules
1. **Contrast is key** — Sans-serif + Sans-serif (different weights)
2. **Max 2 fonts** — One display, one body
3. **Prefer system fonts** — Faster rendering, native feel
4. **Test at actual sizes** — Not just in design tools
## Anti-Patterns
- Never use more than 2 type families
- Never set line-height below 1.4 for body text
- Never use font size below 14px
- Never ignore `font-display: swap`
concepts/ux-guidelines-99.md
+1182
View File
File diff suppressed because it is too large. Load diff
concepts/ux-principles.md
+67
View File
@@ -0,0 +1,67 @@
---
title: UX Principles
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, ux]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-20-principles.md
- raw/articles/crawford-15-tips.md
- raw/articles/crawford-26-lessons.md
confidence: high
---
# UX Principles — Принципы пользовательского опыта
## 10 эвристик юзабилити (Jakob Nielsen, NN/g, 1994 — обновлено 2024)
Это «правила большого пальца» для оценки интерфейсов. На них ссылается вся индустрия.
### 1. Visibility of System Status
Система всегда должна информировать пользователя о том, что происходит. Своевременная обратная связь. Если пользователь нажал кнопку — он должен сразу увидеть результат.
*Пример: карта торгового центра с указателем «Вы здесь».*
### 2. Match Between System and the Real World
Говорить на языке пользователя — без жаргона, с естественным порядком. Природные метафоры и знакомые концепции.
*Пример: расположение конфорок на плите соответствует реальному расположению.*
### 3. User Control and Freedom
Пользователи часто ошибаются — нужен «аварийный выход». Undo/Redo, отмена действия.
*Пример: кнопка Cancel в любом диалоге.*
### 4. Consistency and Standards
Одинаковые слова/ситуации должны означать одно и то же. Использовать конвенции платформы. Следовать **закону Якоба** (Нильсен): пользователи проводят 80% времени на других сайтах.
### 5. Error Prevention
Лучше предотвратить ошибку, чем исправлять. Два типа ошибок: slips (неосознанные, из-за невнимательности) и mistakes (осознанные, из-за неверной ментальной модели).
### 6. Recognition Rather Than Recall
Минимизировать нагрузку на память. Показывать элементы, а не заставлять вспоминать. Короткая память человека (7±2 элемента).
### 7. Flexibility and Efficiency of Use
Ускорения для опытных пользователей (клавишные shortcuts, жесты). Кастомизация.
### 8. Aesthetic and Minimalist Design
Только релевантная информация. Минимализм = меньше когнитивной нагрузки.
### 9. Help Users Recognize, Diagnose, Recover from Errors
Понятные сообщения об ошибках, подсказывающие решение.
### 10. Help and Documentation
Помощь должна быть легко доступна, сфокусирована на задаче, с конкретными шагами.
## 3 кита UX (Nielsen)
- **Useful** — полезность (соответствует потребностям)
- **Usable** — удобство использования (простота и эффективность)
- **Desirable** — желаемость (вызывает позитивные эмоции)
## Apple HIG: принципы дизайна
- **Clarity** — ясность: контент важнее UI-хрома, всё должно быть понятно
- **Deference** — уважение: UI служит контенту, не отвлекает
- **Depth** — глубина: реалистичное движение, наслоение, иерархия через визуальные слои
## Crawford: практическая адаптация
- **Clarity beats design** — ясность > красота
- **Nobody reads, they scan** — короткие абзацы, жирный ключ
- **First impressions in 0.5s** (halo effect)
- **Micro details build trust** — продуманные детали формируют доверие
concepts/visual-hierarchy.md
+36
View File
@@ -0,0 +1,36 @@
---
title: Visual Hierarchy
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, visual-hierarchy]
sources:
- raw/articles/crawford-20-principles.md
- raw/articles/crawford-15-tips.md
- raw/articles/web-design-research.md
confidence: high
---
# Visual Hierarchy — Визуальная иерархия в веб-дизайне
## Как управляется
- **Размер** — крупные элементы привлекают внимание первыми
- **Цвет и контраст** — яркий/контрастный выделяется на фоне
- **Расстояние (white space)** — больше пространства = больше фокуса
- **Расположение** — слева направо, сверху вниз (Z-паттерн)
- **Вес шрифта** — bold = важное, regular = менее важное
## Правило из Crawford
> Если всё выглядит одинаково важным — ничто не выделяется.
## Gestalt-принципы
- **Proximity** (близость) — элементы рядом воспринимаются как группа
- **Similarity** (сходство) — похожие элементы = одна группа
- **Figure/Ground** (фигура/фон) — контраст между элементом и фоном
- **Closure** (замыкание) — мозг достраивает незавершённые формы
## Применение в Hero Section
1. Заголовок H1 — самый крупный
2. Подзаголовок — меньше, цвет серый
3. CTA-кнопка — контрастный цвет
4. Изображение/видео — визуальная поддержка
concepts/wcag-aa-practical-guide.md
+277
View File
@@ -0,0 +1,277 @@
---
title: WCAG AA Practical Guide
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, accessibility]
sources:
- https://webaim.org/standards/wcag/checklist
- https://www.a11yproject.com/checklist/
- https://www.w3.org/WAI/standards-guidelines/wcag/
confidence: high
---
# WCAG AA Practical Guide — Доступность как точка отрыва
> **В РФ WCAG AA не соблюдает НИКТО из коммерческих сайтов.**
> Это наш главный разрыв с конкурентами — юридический хедж, SEO-буст, репутация.
>
> *Стандарт: WCAG 2.2 Level AA (86 критериев). Для типового сайта достаточно AA.*
---
## Чек-лист WCAG AA для разработчика Astro
### Perceivable (Воспринимаемое)
#### ✅ 1.1.1 Non-text Content (A)
**Что:** все изображения имеют alt-текст.
**Как в Astro:**
```astro
<img src="/team.jpg" alt="Команда агентства: 5 человек в офисе" />
<!-- Декоративные: -->
<img src="/bg-pattern.png" alt="" aria-hidden="true" />
<!-- Или CSS background -->
```
**Проверка:** в браузере удалить стили — вся информация должна быть доступна.
#### ✅ 1.3.1 Info and Relationships (A)
**Что:** семантический HTML5. Заголовки H1→H2→H3. Таблицы с th. Формы с label.
**Как в Astro:**
```astro
<header> <nav> <main> <section> <article> <aside> <footer>
<!-- Формы -->
<label for="name">Ваше имя</label>
<input id="name" type="text" autocomplete="name" />
<!-- Заголовки строго по иерархии -->
<h1>Услуги</h1>
<h2>Ремонт квартир</h2>
<h3>Косметический ремонт</h3>
```
#### ✅ 1.4.3 Contrast (Minimum) (AA)
**Что:**
- Текст <18px: контраст **≥4.5:1**
- Текст ≥18px (или ≥14px bold): контраст **≥3:1**
**Инструмент:** WebAIM Contrast Checker, axe DevTools, Lighthouse
**Как в CSS:**
```css
/* Всегда проверять контраст! */
--color-text: #1A1A1A; /* на белом #FFF → 15:1 ✓ */
--color-text-secondary: #666; /* на белом #FFF → 5.4:1 ✓ */
--color-text-muted: #999; /* на белом #FFF → 2.8:1 ✗ ТОЛЬКО для декора */
```
#### ✅ 1.4.11 Non-text Contrast (AA)
**Что:** иконки, кнопки, границы, focus indicators — контраст **≥3:1** с фоном.
**Критично для:** кнопок CTA, иконок соцсетей, чекбоксов, переключателей.
```css
/* Кнопка: текст + фон должны иметь 3:1 между собой */
.btn-primary {
background: #0066CC; /* синий */
color: #FFFFFF; /* белый — контраст с фоном >3:1 ✓ */
}
/* Focus indicator */
*:focus-visible {
outline: 3px solid #0066CC;
outline-offset: 2px;
}
```
#### ✅ 1.4.10 Reflow (AA)
**Что:** при ширине 320px (1280px + 400% zoom) контент не обрезается и не требует горизонтального скролла.
**Это означает:** responsive design обязателен. Container queries + media queries.
**Проверка:** Chrome DevTools → Ctrl+Shift+M → 320px ширина.
#### ✅ 1.4.12 Text Spacing (AA)
**Что:** при переопределении пользователем межстрочного интервала (1.5×), межбуквенного (0.12×), межсловного (0.16×) контент не теряется.
**Как избежать:**
```css
/* ПЛОХО: фиксированная высота */
.card { height: 300px; overflow: hidden; }
/* ХОРОШО: без фиксации высоты */
.card { min-height: 0; }
```
---
### Operable (Управляемое)
#### ✅ 2.1.1 Keyboard (A)
**Что:** все интерактивные элементы доступны с клавиатуры (Tab, Enter, Space, Escape).
**Как проверить:** пройти Tab'ом по всей странице. Должны быть доступны: ссылки, кнопки, формы, меню, модалки.
```astro
<!-- Всегда используйте <button>, не <div onclick -->
<button type="button">Отправить</button>
<a href="/uslugi/">Наши услуги</a>
```
#### ✅ 2.4.1 Bypass Blocks (A)
**Что:** ссылка «Перейти к содержимому» (skip link).
```html
<!-- Первая ссылка на странице: -->
<a href="#main-content" class="skip-link">Перейти к содержимому</a>
<style>
.skip-link {
position: absolute;
top: -40px; /* скрыт, пока не в фокусе */
left: 0;
z-index: 100;
}
.skip-link:focus {
top: 0; /* появляется при Tab */
background: #0066CC;
color: white;
padding: 8px 16px;
}
</style>
```
#### ✅ 2.4.5 Multiple Ways (AA)
**Что:** как минимум 2 способа найти любую страницу на сайте.
```html
<!-- Вариант 1: основная навигация -->
<nav>...</nav>
<!-- Вариант 2: поиск -->
<form role="search">...</form>
<!-- Вариант 3: sitemap.xml (технически) -->
```
#### ✅ 2.4.7 Focus Visible (AA)
**Что:** при Tab все элементы показывают видимый фокус.
```css
/* Современный стандарт (Chrome 122+, Firefox 131+, Safari 17.4+): */
*:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Убираем только для мыши */
*:focus:not(:focus-visible) {
outline: none;
}
```
#### ✅ 2.4.11 Focus Not Obscured (AA — новый в WCAG 2.2)
**Что:** при фокусе элемент не должен быть полностью скрыт (например, под sticky header).
**Решение:** при Tab к элементу под sticky header — скролл до него с отступом.
```css
/* scroll-padding-top в :root */
:root {
scroll-padding-top: 80px; /* высота sticky header + запас */
}
```
#### ✅ 2.2.2 Pause, Stop, Hide (A)
**Что:** авто-анимации >5 сек должны иметь кнопку паузы.
**Касается:** каруселей, бегущих строк, авто-обновления.
---
### Understandable (Понятное)
#### ✅ 3.2.3 Consistent Navigation (AA)
**Что:** навигация одинакова на всех страницах. Порядок пунктов не меняется.
**В Astro:** один компонент Nav на всех страницах.
#### ✅ 3.3.2 Labels or Instructions (A)
**Что:** у каждого поля формы есть label или aria-label.
```astro
<label for="phone">Номер телефона</label>
<input id="phone" type="tel" autocomplete="tel" required />
<!-- Или aria-label для иконочных кнопок -->
<button aria-label="Поиск">
<svg><!-- иконка лупы --></svg>
</button>
```
#### ✅ 3.3.4 Error Prevention (AA)
**Что:** при финансовых/юридических действиях — подтверждение перед отправкой.
```astro
<button type="submit" onclick="return confirm('Подтвердите оплату 5 000 ₽')">
Оплатить
</button>
```
---
### Robust (Надёжное)
#### ✅ 4.1.2 Name, Role, Value (A)
**Что:** все кастомные компоненты имеют правильные ARIA-атрибуты.
```astro
<div role="tablist">
<button role="tab" aria-selected="true">Услуги</button>
<button role="tab" aria-selected="false">Цены</button>
</div>
```
---
## 🛠 Инструменты проверки (бесплатные)
| Инструмент | Что проверяет | Как использовать |
|-----------|--------------|-----------------|
| **axe DevTools** (браузер) | 50+ критериев WCAG | Chrome → F12 → axe → Scan ALL |
| **Lighthouse** | 20+ критериев | Chrome → F12 → Lighthouse → Accessibility |
| **WAVE** (wave.webaim.org) | Контраст, alt, структура | Расширение Chrome |
| **WebAIM Contrast Checker** | Контраст цветов | https://webaim.org/resources/contrastchecker/ |
| **Tab test** | Клавиатура | Tab по всей странице вручную |
| **Screen reader test** | Озвучка | Включить VoiceOver (Mac) / NVDA (Win) |
---
## Минимальный WCAG AA для Astro-шаблона (10 минут)
```css
/* 1. Контраст */
:root {
--color-text: #1A1A1A; /* на белом: 15:1 ✓ */
--color-text-secondary: #595959; /* на белом: 7:1 ✓ */
}
/* 2. Focus */
*:focus-visible {
outline: 3px solid #0066CC;
outline-offset: 2px;
}
:root { scroll-padding-top: 80px; }
/* 3. Skip link */
.skip-link { position: absolute; top: -40px; }
.skip-link:focus { top: 0; }
```
```astro
<!-- 4. Alt-тексты на все <img> -->
<img src="..." alt="Описание" />
<!-- 5. Skip link первой строкой в <body> -->
<a href="#main" class="skip-link">Перейти к содержимому</a>
<!-- 6. Semantic HTML -->
<header> <nav> <main id="main"> <footer>
<!-- 7. Labels для форм -->
<label for="name">Имя</label>
<input id="name" type="text" />
```
**Результат:** 80% WCAG AA за 10 минут. Остальное — точечно под тип контента.
---
## Почему это даёт отрыв в РФ
| Фактор | Эффект |
|--------|--------|
| **Юридический хедж** | Законы об accessible web обсуждаются в ГД. Через 2-3 года станут обязательными |
| **SEO-буст** | Яндекс учитывает семантический HTML, alt-тексты, скорость |
| **Конверсия** | То что помогает инвалидам — помогает всем (Crawford) |
| **Репутация** | Первый accessible-сайт в нише = пресса, кейсы, награды |
| **WCAG 2.2** | 9 новых критериев (focus visible, focus not obscured, accessible name) |
concepts/web-accessibility.md
+39
View File
@@ -0,0 +1,39 @@
---
title: Web Accessibility
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, accessibility]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-new-rules-2026.md
- raw/articles/crawford-20-principles.md
confidence: high
---
# Web Accessibility — Доступность веб-дизайна (WCAG)
## Стандарт
**WCAG 2.2** (W3C) — международный стандарт ISO. Уровни A, AA, AAA.
Для бизнес-сайтов достаточно AA. Для госсайтов — обязательно.
## Crawford: не чеклист, а фундамент
- Accessibility не «галочка в конце проекта», а часть дизайна с первого дня
- Растущие юридические риски за недоступность
- Доступный дизайн и хороший дизайн совпадают на 80%
## Ключевые практики
- **Контраст**: текст < 18px → 4.5:1 (AA), > 18px → 3:1
- **Alt-текст**: все изображения с информационным наполнением
- **Клавиатурная навигация**: все интерактивные элементы доступны с Tab/Enter/
- **Focus indicators**: видимый фокус при Tab
- **ARIA-атрибуты**: для динамических элементов
- **Prefers-reduced-motion**: уважать настройки пользователя
- **Semantic HTML5**: header, nav, main, section, article, footer
- **Heading hierarchy**: один H1, вложенные H2-H6
## Инструменты проверки
- WAVE (wave.webaim.org)
- Axe (deque.com/axe)
- Lighthouse — встроен в Chrome
- colour contrast analyzer
concepts/web-color-theory.md
+41
View File
@@ -0,0 +1,41 @@
---
title: Web Color Theory
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, color-theory]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-20-principles.md
confidence: high
---
# Web Color Theory — Теория цвета в веб-дизайне
## Правило 60-30-10
- **60%** — основной цвет (фон, поверхности)
- **30%** — вторичный (заголовки, секции)
- **10%** — акцентный (CTA, ссылки, кнопки)
## Психология цвета
- **Синий** — доверие, стабильность (корпоративные сайты, банки)
- **Красный** — срочность, действие (распродажи, CTA)
- **Зелёный** — рост, деньги, экология
- **Оранжевый** — энергия, доступность
- **Фиолетовый** — роскошь, креативность
- **Чёрный/Тёмный** — премиальность, минимализм
## Контраст и доступность
- Минимум 4.5:1 для обычного текста (WCAG AA)
- Минимум 3:1 для крупного текста (18px+ bold или 24px+ regular)
- Инструменты проверки: WAVE, Axe, color contrast analyzer
## Тёмная тема
- Фон: #121212 (не чистый чёрный — утомляет глаза)
- Текст: #E0E0E0 (не белый)
- Поверхности: иерархия через elevation (повышение яркости)
- Material Design 3: Dynamic Color через цветовые тона
## Китайский подход
- Красный (удача), золотой (богатство), яркие градиенты
- Плотная палитра — больше цветов на странице
concepts/web-conversion-optimization.md
+43
View File
@@ -0,0 +1,43 @@
---
title: Web Conversion Optimization
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, conversion]
sources:
- raw/articles/crawford-conversion-principles.md
- raw/articles/crawford-15-tips.md
- raw/articles/crawford-26-lessons.md
confidence: high
---
# Web Conversion Optimization — Конверсия и CRO
## 5 принципов (Crawford, анализ 1000+ сайтов)
### 1. Clarity Beats Design
Ясность — главный драйвер конверсии. Homepage за 2 секунды: Что это? Для кого? Что делать?
### 2. One Clear CTA
Одно первичное действие, повторённое по странице. Не путать пользователя выбором.
### 3. Social Proof > Design
Отзывы, кейсы, логотипы клиентов работают сильнее дизайна. "Это сработало для таких как я?"
### 4. Less Motion = More Impact
Минимализм снижает когнитивную нагрузку. Простота выделяет на фоне шума.
### 5. Micro Details Build Trust
Продуманный дизайн форм, кастомные иконки, тонкие UI-элементы. Создают ощущение профессионализма.
## Бенчмарки конверсии
- **2–3%** — средний по рынку
- **5–10%** — сильный результат
- **10%+** — исключительный (лендинги)
## Ключевые ошибки
- Слишком много CTA на странице
- Корпоративный жаргон вместо ясности
- Спрятанные цены
- Анимации ради анимации
- Проектирование "для себя", а не для клиента
concepts/web-navigation.md
+29
View File
@@ -0,0 +1,29 @@
---
title: Web Navigation
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, navigation]
sources:
- raw/articles/web-design-research.md
confidence: high
---
# Web Navigation — Навигация сайта
## Ключевые принципы
- **Максимум 7 пунктов** (правило Миллера)
- **Sticky header** — навигация всегда видна (опционально: скрывать при скролле вниз)
- **Хлебные крошки** — обязательны для сайтов с 3+ уровнями
- **Поиск** — всегда видимый, с автокомплитом
- **Mobile-first**: hamburger, bottom nav, жесты
## Структура
1. **Primary nav** — главные разделы (до 7)
2. **Secondary nav** — подразделы, доп. ссылки (footer, sidebar)
3. **Utility nav** — поиск, язык, профиль, корзина
## Best practices
- Dropdown с задержкой (300ms) для предотвращения случайного закрытия
- Mega-menu для сайтов с 20+ разделами (e-commerce, каталоги)
- В Chinese design: mega-menu с карточками, фильтры сбоку
concepts/web-performance-core-web-vitals.md
+34
View File
@@ -0,0 +1,34 @@
---
title: Web Performance (Core Web Vitals)
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, performance]
sources:
- raw/articles/web-design-research.md
- raw/articles/crawford-15-tips.md
confidence: high
---
# Web Performance and Core Web Vitals
## Метрики (2026)
- **LCP** (Largest Contentful Paint) — < 2.5s — скорость загрузки основного контента
- **INP** (Interaction to Next Paint) — < 200ms — отклик на взаимодействие (заменил FID)
- **CLS** (Cumulative Layout Shift) — < 0.1 — визуальная стабильность
## Инструменты
- **Google PageSpeed Insights** — LCP, INP, CLS + рекомендации
- **WebPageTest** — детальные waterfall-диаграммы
- **GTmetrix** — LCP, INP, CLS + оптимизация
- **Chrome Web Vitals extension** — реальный мониторинг
## Влияние на конверсию (Crawford)
> Каждая секунда загрузки снижает конверсии. >3s = потеря ~50% посетителей.
## Типовые проблемы
1. **Несжатые изображения** — WebP/AVIF с lazy loading
2. **Тяжёлые скрипты** — дефер, асинхронная загрузка
3. **JavaScript блокирует рендер** — code splitting, tree shaking
4. **Много шрифтов** — не более 3 семейств
5. **Нет кэширования** — CDN, service workers, cache headers
concepts/web-psychology.md
+43
View File
@@ -0,0 +1,43 @@
---
title: Web Psychology
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, psychology]
sources:
- raw/articles/crawford-15-tips.md
- raw/articles/crawford-26-lessons.md
- raw/articles/web-design-research.md
confidence: high
---
# Web Psychology — Психология в веб-дизайне
## Ключевые принципы
### Halo Effect (Ореол)
Первое впечатление за 0.5 секунды формирует общее восприятие.
Если сайт выглядит профессионально → пользователь считает продукт качественным.
Если дёшево → всё остальное под вопросом.
### Analysis Paralysis (Паралич выбора)
Слишком много вариантов = ноль действий.
Один CTA. Одна цель. Одна страница.
### Social Proof (Социальное доказательство)
Люди следуют за другими. Отзывы, кейсы, цифры клиентов.
Вопрос пользователя: "Сработало для таких как я?"
### Scanning Pattern (Паттерн сканирования)
Люди не читают — сканируют. F-паттерн (сверху-вниз, слева-направо).
Короткие абзацы, жирный ключ, списки.
### Z-Pattern / F-Pattern
- **Z-паттерн** — для лендингов: глаз идёт по Z
- **F-паттерн** — для контентных страниц: заголовок → абзац → заголовок
### Loss Aversion (Избегание потерь)
"Не упустите" работает сильнее "получите".
### Reciprocity (Взаимность)
Бесплатный гайд, чеклист, консультация → пользователь чувствует обязанность ответить.
concepts/web-typography.md
+28
View File
@@ -0,0 +1,28 @@
---
title: Web Typography
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, typography]
sources:
- raw/articles/web-design-research.md
confidence: high
---
# Web Typography — Веб-типографика
## Иерархия
H1 → H2 → H3 → body → caption. Без иерархии пользователи не могут сканировать.
## Размеры
- **Body**: минимум 16px
- **Hero**: 300–400px в full-screen hero, 48–72px в обычном контенте
- **Межстрочный интервал**: 1.4–1.6 для body, 1.1–1.3 для заголовков
- **Длина строки**: 50–75 символов (65 — оптимум)
## Правила
- Не более 2–3 шрифтов на страницу
- Парные шрифты: Serif + Sans-serif или разные веса одной гарнитуры
- CSS Custom Properties для всех типографских значений
- Контраст: 4.5:1 для текста (WCAG AA), 3:1 для заголовков
- Кастомные иконки лучше generic — Crawford: micro details build trust
layout/bento-grid.md
+214
View File
@@ -0,0 +1,214 @@
---
name: layout/bento-grid
title: Bento Grid Layout
description: Asymmetric grid layout inspired by Apple's design language. Cards of varying sizes in a cohesive grid.
tags: [layout, grid, asymmetric, bento, cards]
source: apple.com, linear.app, raycast.com, godly.website
---
# Bento Grid Layout
## Что это
Сетка карточек разного размера, объединённых общим стилем. Вдохновлена дизайном Apple и Linear. Каждый блок — самостоятельная единица, но вместе они создают целостную композицию.
## Ключевые характеристики
| Параметр | Значение |
|----------|----------|
| `gap` | `16–24px` |
| `grid-template-columns` | `repeat(auto-fit, minmax(280px, 1fr))` |
| `border-radius` | `16–24px` (большой радиус) |
| `padding` | `32–48px` внутри карточек |
| `border` | `1px solid rgba(255,255,255,0.06)` |
| `background` | `rgba(255,255,255,0.02)` или `#111` |
## Шаблоны раскладок
### 2x2 Balanced (4 карточки)
```
┌─────────────┬─────────────┐
│ Card 1 │ Card 2 │
│ (wide) │ (wide) │
├─────────────┴─────────────┤
│ Card 3 │ Card 4 │ │
│ (tall) │ (tall) │ │
└─────────────┴─────────────┘
```
### 3-2-1 Asymmetric
```
┌────────────┬────────────┬────────────┐
│ │ Card 2 │ │
│ Card 1 ├────────────┤ Card 3 │
│ (tall) │ Card 4 │ (tall) │
│ ├────────────┤ (tall) │
│ │ Card 5 │ │
└────────────┴────────────┴────────────┘
```
### Hero Bento (featured card + smaller)
```
┌────────────────────┬────────────┐
│ │ │
│ Card 1 (featured) │ Card 2 │
│ span 2 cols │ │
│ ├────────────┤
│ │ Card 3 │
└────────────────────┴────────────┘
```
## Реализация
```html
<section class="bento-section">
<div class="bento-grid">
<!-- Featured card: spans 2 columns -->
<div class="bento-card featured">
<span class="bento-label">01</span>
<h3>Заголовок карточки</h3>
<p>Описание...</p>
<div class="bento-visual">
<!-- Визуальный элемент, скриншот, иконка -->
</div>
</div>
<!-- Standard cards -->
<div class="bento-card">
<span class="bento-label">02</span>
<h3>Заголовок</h3>
<p>Описание...</p>
</div>
<div class="bento-card">
<span class="bento-label">03</span>
<h3>Заголовок</h3>
<p>Описание...</p>
</div>
<div class="bento-card">
<span class="bento-label">04</span>
<h3>Заголовок</h3>
<p>Описание...</p>
</div>
</div>
</section>
```
```css
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.bento-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
padding: 32px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.bento-card:hover {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
/* Featured card: spans 2 columns */
.bento-card.featured {
grid-column: span 2;
}
/* Tall card: spans 2 rows (requires grid-template-rows) */
.bento-card.tall {
grid-row: span 2;
}
.bento-label {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.bento-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.bento-card p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.95rem;
line-height: 1.6;
}
```
## CSS Grid Layouts
### 3-column Bento
```css
.bento-grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 16px;
}
```
### 4-column Bento
```css
.bento-grid-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 16px;
}
```
### Responsive Bento
```css
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
}
.bento-card.featured {
grid-column: span 1;
}
}
```
## Визуальные элементы внутри Bento
1. **Скриншоты продукта** — внутри карточки, с `border-radius: 12px` и `box-shadow`
2. **Иконки/эмодзи** — крупные (48–64px), слева или сверху
3. **Градиентные фоны** — `radial-gradient` для создания глубины
4. **Анимированные элементы** — простые CSS-анимации для привлечения внимания
5. **Цифры** — крупные цифры (48–72px) для метрик
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Все карточки одинакового размера | 1–2 featured + обычные |
| `gap: 8px` — слишком тесно | `gap: 16–24px` |
| `border-radius: 8px` — квадратный | `border-radius: 16–24px` |
| Белый фон карточек на светлом фоне | Полупрозрачный на тёмном фоне |
| Без hover-эффектов | Hover: lift + border glow |
## CV Service Validation
```bash
# Проверить grid adherence
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "...", "full_analysis": false}' | \
python3 -c "import sys,json; d=json.load(sys.stdin); print(f\"Grid: {d['analyzers'].get('design_tokens',{}).get('score','N/A')}\")"
```
Ожидается: `grid_adherence` > 6 (cv-service меряет по регулярности gap и выравниванию).
layout/card-grid.md
+89
View File
@@ -0,0 +1,89 @@
---
name: layout/card-grid
title: Card Grid with Hover States
description: Responsive card grids with hover animations and shadows.
tags: [layout, grid, card, hover, responsive]
source: raycast.com, linear.app, resend.com, stripe.com
---
# Card Grid Layout
## CSS Grid
```css
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
```
## Card Structure
```html
<article class="card">
<div class="card-icon">📊</div>
<h3 class="card-title">Заголовок</h3>
<p class="card-description">Описание фичи...</p>
<a href="#" class="card-link">Подробнее →</a>
</article>
```
```css
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 32px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.card-icon {
width: 48px;
height: 48px;
background: rgba(99, 102, 241, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
}
.card-description {
color: var(--color-text-secondary);
flex: 1;
margin-bottom: 16px;
}
.card-link {
color: var(--color-accent);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap 0.3s ease;
}
.card-link:hover {
gap: 8px;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `min-width: 200px` | `min-width: 300px` |
| Без `auto-fit` | `grid-template-columns: repeat(auto-fit, ...)` |
| Без hover | `transform: translateY(-4px)` |
| Без `flex: 1` | `flex: 1` для описания |
layout/feature-list.md
+416
View File
@@ -0,0 +1,416 @@
---
name: layout/feature-list
title: Feature List with Animated Checkmarks
description: Clean feature lists with animated checkmarks, icons, and hover states.
tags: [layout, feature-list, checkmark, hover, clean, conversion]
source: resend.com, linear.app, raycast.com, stripe.com
---
# Feature List with Animated Checkmarks
## Что это
Чистый, структурированный список фич с анимированными чекмарками иконками. Один из самых конверсионных паттернов — используется на Resend, Linear, Raycast.
## Где используется
- Pricing-страницы
- Сравнение планов
- Feature comparison
- Onboarding-экраны
- "Why choose us" секции
## Pattern 1: Standard Feature List
```html
<section class="feature-list-section">
<div class="feature-list-container">
<div class="feature-list">
<div class="feature-item">
<span class="feature-icon check">✓</span>
<div class="feature-content">
<h3>Анализ 99+ звонков</h3>
<p>Загрузите аудио — получите детальный отчёт по 10 пунктам скрипта.</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon check">✓</span>
<div class="feature-content">
<h3>Рейтинг операторов</h3>
<p>ИИ автоматически оценивает каждого оператора и формирует рейтинг.</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon check">✓</span>
<div class="feature-content">
<h3>Конкретные рекомендации</h3>
<p>Не просто "плохо", а "замените фразу X на Y для роста конверсии на 15%".</p>
</div>
</div>
<div class="feature-item">
<span class="feature-icon check">✓</span>
<div class="feature-content">
<h3>Еженедельные отчёты</h3>
<p>Автоматический мониторинг качества звонков с динамикой улучшений.</p>
</div>
</div>
</div>
</div>
</section>
```
```css
.feature-list-section {
padding: 128px 0;
}
.feature-list-container {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.feature-list {
display: flex;
flex-direction: column;
gap: 0;
}
.feature-item {
display: flex;
gap: var(--space-5);
padding: 32px 0;
border-bottom: 1px solid var(--color-border);
transition: all 0.3s ease;
align-items: flex-start;
}
.feature-item:first-child {
padding-top: 0;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-item:hover {
transform: translateX(8px);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
margin-top: 2px;
}
.feature-icon.check {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.feature-icon.cross {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.feature-content h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-content p {
font-size: 0.95rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
```
## Pattern 2: Two-Column Comparison
```html
<section class="comparison">
<div class="comparison-grid">
<div class="comparison-col">
<h3>calls24</h3>
<div class="feature-check">
<span class="check-icon">✓</span>
<span>AI-анализ по 10 пунктам</span>
</div>
<div class="feature-check">
<span class="check-icon">✓</span>
<span>Рейтинг операторов</span>
</div>
<div class="feature-check">
<span class="check-icon">✓</span>
<span>Рекомендации по скрипту</span>
</div>
</div>
<div class="comparison-col">
<h3>Другие</h3>
<div class="feature-cross">
<span class="cross-icon">×</span>
<span>Только базовые метрики</span>
</div>
<div class="feature-cross">
<span class="cross-icon">×</span>
<span>Нет рейтинга операторов</span>
</div>
<div class="feature-cross">
<span class="cross-icon">×</span>
<span>Общие рекомендации</span>
</div>
</div>
</div>
</section>
```
```css
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.comparison-col {
padding: 48px;
border-radius: 20px;
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.comparison-col h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.feature-check, .feature-cross {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 0;
}
.check-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.cross-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.feature-check span:last-child,
.feature-cross span:last-child {
color: var(--color-text-secondary);
font-size: 0.95rem;
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
}
}
```
## Pattern 3: Animated Checkmark
```html
<div class="feature-item-animated">
<div class="check-circle">
<svg class="check-path" viewBox="0 0 24 24" width="24" height="24">
<path d="M5 13l4 4L19 7" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="feature-content">
<h3>Фича с анимацией</h3>
<p>Описание фичи</p>
</div>
</div>
```
```css
.feature-item-animated {
display: flex;
gap: 16px;
padding: 24px 0;
align-items: flex-start;
}
.check-circle {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.check-path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: draw-check 0.5s ease forwards;
animation-delay: 0.3s;
}
@keyframes draw-check {
to {
stroke-dashoffset: 0;
}
}
.feature-item-animated:hover .check-circle {
transform: scale(1.1);
transition: transform 0.2s ease;
}
```
## Pattern 4: Pricing Table with Checkmarks
```html
<div class="pricing-table">
<div class="pricing-card">
<h3>Бесплатно</h3>
<p class="price">0 ₽</p>
<ul class="pricing-features">
<li><span class="check-icon">✓</span> 3 звонка</li>
<li><span class="check-icon">✓</span> Базовый отчёт</li>
<li class="disabled"><span class="cross-icon">×</span> Рейтинг операторов</li>
</ul>
<button class="btn btn-secondary">Попробовать</button>
</div>
<div class="pricing-card featured">
<h3>Стандарт</h3>
<p class="price">5 000 ₽</p>
<ul class="pricing-features">
<li><span class="check-icon">✓</span> 10 звонков</li>
<li><span class="check-icon">✓</span> Детальный отчёт</li>
<li><span class="check-icon">✓</span> Рейтинг операторов</li>
<li><span class="check-icon">✓</span> Рекомендации</li>
</ul>
<button class="btn btn-primary">Заказать</button>
</div>
</div>
```
```css
.pricing-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 48px;
text-align: center;
}
.pricing-card.featured {
border-color: var(--color-accent);
}
.pricing-features {
list-style: none;
margin: 32px 0;
text-align: left;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
color: var(--color-text-secondary);
}
.pricing-features li.disabled {
opacity: 0.4;
}
.btn-primary {
display: block;
width: 100%;
padding: 14px;
background: var(--gradient-accent);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-secondary {
display: block;
width: 100%;
padding: 14px;
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border);
border-radius: 12px;
font-weight: 600;
cursor: pointer;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без визуального разделения строк | `border-bottom: 1px solid` |
| Маленькие чекмарки | `32x32px` круги |
| Без hover | `translateX(8px)` на hover |
| Без контраста | `✓` зелёный, `×` красный |
| Без `flex-shrink: 0` | Иконка не сжимается |
## CV Service Validation
```bash
# Проверить visual hierarchy feature list
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "..."}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
ux = d['analyzers'].get('ux_heuristics', {})
print(f\"UX Heuristics: {ux.get('score', 'N/A')}/10\")
print(f\" Clarity: {ux.get('clarity', 'N/A')}\")
"
```
Ожидается: `ux_heuristics` > 7 (feature list — один из самых понятных паттернов).
layout/full-bleed-content.md
+32
View File
@@ -0,0 +1,32 @@
---
name: layout/full-bleed-content
title: Full-Bleed Content Sections
description: Content that breaks container boundaries for visual impact.
tags: [layout, full-bleed, breaking-boundaries, premium]
source: stripe.com, apple.com, brad.co, amppz.com
---
# Full-Bleed Content
## CSS
```css
.full-bleed-section {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `overflow-x: hidden` на body | Всегда overflow hidden |
| Без `transform` | `translateX(-50%)` |
| Без container | `max-width: 1200px` |
layout/hero-variations.md
+77
View File
@@ -0,0 +1,77 @@
---
name: layout/hero-variations
title: Hero Section Variations
description: 5 hero patterns: centered, split, full-bleed, minimal, interactive.
tags: [layout, hero, cta, landing, conversion]
source: stripe.com, linear.app, raycast.com, resend.com, amppz.com
---
# Hero Section Variations
## 5 паттернов hero-секций
### 1. Centered (Linear/Raycast)
```html
<section class="hero hero-centered">
<div class="hero-content">
<h1>Главный заголовок</h1>
<p>Подзаголовок с описанием</p>
<a href="#signup" class="btn btn-primary">Начать бесплатно</a>
</div>
</section>
```
### 2. Split (Stripe)
```html
<section class="hero hero-split">
<div class="hero-text">
<h1>Заголовок</h1>
<p>Описание</p>
<a href="#signup" class="btn btn-primary">Начать</a>
</div>
<div class="hero-visual">
<img src="/product-screenshot.png" alt="Screenshot">
</div>
</section>
```
### 3. Full-Bleed (Apple)
```html
<section class="hero hero-fullbleed">
<video autoplay muted loop playsinline>
<source src="/hero.mp4" type="video/mp4">
</video>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Заголовок</h1>
</div>
</section>
```
### 4. Minimal (Brutalist)
```html
<section class="hero hero-minimal">
<h1>Один заголовок<br>на весь экран</h1>
<a href="#signup" class="btn btn-primary">→</a>
</section>
```
### 5. Interactive (3D/WebGL)
```html
<section class="hero hero-interactive">
<div id="webgl-container"></div>
<div class="hero-content">
<h1>Заголовок</h1>
<p>Описание</p>
</div>
</section>
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без CTA на первом экране | CTA всегда виден |
| Текст < 40px | `font-size: clamp(2.5rem, 6vw, 4rem)` |
| Без whitespace | `padding: 128px 0` |
| Без mobile breakpoint | `@media (max-width: 768px)` |
layout/landing-patterns.md
+784
View File
@@ -0,0 +1,784 @@
---
name: layout/landing-patterns
title: Landing Page Patterns
description: 25 conversion-optimized landing page patterns with section order, CTA strategy, and conversion tips.
tags: [landing, cta, conversion, layout, landing-page-patterns]
source: ui-ux-pro-max-skill
---
# Landing Page Patterns
25 паттернов лендингов, оптимизированных для конверсии. Каждый включает: порядок секций, CTA-стратегию, цветовую стратегию и рекомендации.
---
## 1. Hero + Features + CTA
**Keywords:** hero, features, CTA
**CTA:** Hero (sticky) + Bottom
**Конверсия:** Высокая — глубокая размещение CTA
### Section Order
1. Hero с headline/image
2. Value proposition
3. Key features (3-5)
4. CTA section
5. Footer
### Implementation
```html
<!-- Hero -->
<section class="relative py-20">
<h1 class="text-5xl font-bold text-center">Headline</h1>
<p class="text-xl text-gray-600 mt-4">Value prop</p>
<a href="#cta" class="mt-8 inline-block bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold">
Get Started
</a>
</section>
<!-- Features -->
<section class="bg-[#FAFAFA] py-16">
<div class="grid grid-cols-3 gap-8">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Feature 1</h3>
<p>Description</p>
</div>
<!-- repeat -->
</div>
</section>
<!-- CTA -->
<section id="cta" class="py-16 text-center">
<a class="bg-orange-600 text-white px-8 py-4 rounded-lg text-lg font-semibold">
Start Now
</a>
</section>
```
### Effects
- Hero parallax
- Feature card hover lift
- CTA glow on hover
### Conversion Tips
- Используй контрастный цвет для CTA (минимум 7:1 contrast ratio)
- Sticky navbar CTA
---
## 2. Hero + Testimonials + CTA
**Keywords:** hero, testimonials, social-proof
**CTA:** Hero (sticky) + Post-testimonials
**Конверсия:** Высокая — social proof перед CTA
### Section Order
1. Hero
2. Problem statement
3. Solution overview
4. Testimonials carousel
5. CTA
### Implementation
```html
<section class="py-20 bg-[#F5F5F5]">
<h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
<div class="grid grid-cols-3 gap-8">
<div class="p-6 bg-white rounded-lg shadow">
<p class="italic text-gray-600 mb-4">"Best product I've ever used!"</p>
<div class="flex items-center gap-3">
<img src="avatar.jpg" class="w-12 h-12 rounded-full" alt="" />
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm text-gray-500">CEO, Company</p>
</div>
</div>
</div>
</div>
</section>
```
### Conversion Tips
- Используй 3-5 testimonials
- Включи photo + name + role
- CTA после social proof
---
## 3. Product Demo + Features
**Keywords:** demo, product-demo, interactive
**CTA:** Video center + CTA right/bottom
**Конверсия:** Высокая — интерактивный demo
### Section Order
1. Hero
2. Product video/mockup (center)
3. Feature breakdown
4. Comparison (optional)
5. CTA
### Conversion Tips
- Встроенный демо-продукт повышает вовлечённость
- Используй интерактивный mockup если возможно
- Auto-play video muted
---
## 4. Minimal Single Column
**Keywords:** minimal, simple, direct
**CTA:** Center, large CTA button
**Конверсия:** Высокая — single CTA focus
### Section Order
1. Hero headline
2. Short description
3. Benefit bullets (3 max)
4. CTA
5. Footer
### Implementation
```html
<section class="min-h-screen flex flex-col items-center justify-center px-4">
<h1 class="text-6xl font-bold text-center mb-6">Your Headline</h1>
<p class="text-xl text-gray-600 mb-8 text-center max-w-2xl">
One clear value proposition.
</p>
<ul class="space-y-2 mb-8">
<li>✓ Benefit 1</li>
<li>✓ Benefit 2</li>
<li>✓ Benefit 3</li>
</ul>
<a href="#cta" class="bg-blue-600 text-white px-10 py-5 rounded-lg text-xl font-semibold">
Get Started
</a>
</section>
```
### Conversion Tips
- Single CTA focus
- Large typography
- Lots of whitespace
- No nav clutter
- Mobile-first
---
## 5. Funnel (3-Step Conversion)
**Keywords:** funnel, conversion, steps
**CTA:** Each step: mini-CTA, Final: main CTA
**Конверсия:** Высокая — progressive disclosure
### Section Order
1. Hero
2. Step 1 (problem)
3. Step 2 (solution)
4. Step 3 (action)
5. CTA progression
### Implementation
```html
<!-- Step 1: Problem -->
<section class="py-16 bg-red-50">
<h2 class="text-2xl font-bold mb-4">Is this you?</h2>
<p class="text-gray-600 mb-6">Struggling with X, Y, Z?</p>
<button class="bg-white border border-red-500 text-red-500 px-6 py-3 rounded">
Yes, this is me
</button>
</section>
<!-- Step 2: Solution -->
<section class="py-16 bg-orange-50">
<h2 class="text-2xl font-bold mb-4">Here's the solution</h2>
<p class="text-gray-600 mb-6">Our product solves all three.</p>
<button class="bg-white border border-orange-500 text-orange-500 px-6 py-3 rounded">
Learn More
</button>
</section>
<!-- Step 3: Action -->
<section class="py-16 bg-green-50">
<h2 class="text-2xl font-bold mb-4">Ready to get started?</h2>
<button class="bg-green-500 text-white px-8 py-4 rounded-lg text-lg">
Get Started Now
</button>
</section>
```
### Conversion Tips
- Progressive disclosure
- Show only essential info per step
- Use progress indicators
- Multiple CTAs
---
## 6. Comparison Table + CTA
**Keywords:** comparison, table, versus
**CTA:** Table: Right column, CTA: Below table
**Конверсия:** 35% higher vs competitor page
### Section Order
1. Hero
2. Problem intro
3. Comparison table (product vs competitors)
4. Pricing (optional)
5. CTA
### Implementation
```html
<section class="py-16">
<table class="w-full">
<thead>
<tr class="border-b">
<th class="text-left py-4">Feature</th>
<th class="text-center py-4 bg-yellow-50">Us</th>
<th class="text-center py-4">Competitor</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="py-3">Feature 1</td>
<td class="text-center bg-yellow-50">✅</td>
<td class="text-center">❌</td>
</tr>
<tr class="border-b bg-yellow-50">
<td class="py-3">Feature 2</td>
<td class="text-center bg-yellow-50">✅</td>
<td class="text-center">⚠️</td>
</tr>
</tbody>
</table>
<div class="text-center mt-8">
<a class="bg-blue-600 text-white px-8 py-4 rounded-lg">Start Free Trial</a>
</div>
</section>
```
### Conversion Tips
- Highlight your product row
- Include 'free trial' in pricing row
- Be factual
---
## 7. Lead Magnet + Form
**Keywords:** lead, form, signup, capture
**CTA:** Form CTA: Submit button
**Конверсия:** Высокая — form fields ≤ 3
### Section Order
1. Hero (benefit headline)
2. Lead magnet preview
3. Form (minimal fields)
4. CTA submit
### Implementation
```html
<section class="py-16 bg-[#FAFAFA]">
<div class="grid grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold mb-4">Get Our Free Guide</h2>
<p class="text-gray-600">Learn X in 10 minutes</p>
<img src="ebook-cover.png" class="mt-6 rounded-lg shadow-lg" alt="" />
</div>
<form class="bg-white p-8 rounded-lg shadow">
<label class="block mb-2 font-medium">Email</label>
<input type="email" class="w-full border rounded px-3 py-2 mb-4" />
<input type="text" placeholder="Name" class="w-full border rounded px-3 py-2 mb-4" />
<button class="w-full bg-blue-600 text-white py-3 rounded font-semibold">
Download Free Guide
</button>
<p class="text-sm text-gray-500 mt-2">We'll never spam. Unsubscribe anytime.</p>
</form>
</div>
</section>
```
### Conversion Tips
- Form fields ≤ 3 for best conversion
- Offer valuable lead magnet preview
- Show form submission progress
---
## 8. Pricing Page + CTA
**Keywords:** pricing, plans, tiers
**CTA:** Each card: CTA, Sticky CTA in nav
**Конверсия:** Высокая — mid-tier recommendation
### Section Order
1. Hero (pricing headline)
2. Price comparison cards
3. Feature comparison table
4. FAQ section
5. Final CTA
### Implementation
```html
<section class="py-16">
<div class="grid grid-cols-3 gap-8">
<!-- Free -->
<div class="p-6 border rounded-lg">
<h3 class="text-xl font-bold mb-2">Free</h3>
<p class="text-4xl font-bold mb-6">$0</p>
<ul class="space-y-2 mb-6">
<li>✓ Feature 1</li>
<li>✓ Feature 2</li>
</ul>
<button class="w-full py-3 border rounded text-gray-600">Start Free</button>
</div>
<!-- Pro (Highlighted) -->
<div class="p-6 border-2 border-blue-500 rounded-lg relative">
<span class="absolute -top-3 right-4 bg-blue-500 text-white px-3 py-1 rounded text-sm">Popular</span>
<h3 class="text-xl font-bold mb-2">Pro</h3>
<p class="text-4xl font-bold mb-6">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
<ul class="space-y-2 mb-6">
<li>✓ Feature 1</li>
<li>✓ Feature 2</li>
<li>✓ Feature 3</li>
</ul>
<button class="w-full bg-blue-500 text-white py-3 rounded font-semibold">Get Pro</button>
</div>
<!-- Enterprise -->
<div class="p-6 bg-gray-900 text-white rounded-lg">
<h3 class="text-xl font-bold mb-2">Enterprise</h3>
<p class="text-4xl font-bold mb-6">$99</p>
<ul class="space-y-2 mb-6">
<li>✓ Everything in Pro</li>
<li>✓ Dedicated support</li>
</ul>
<button class="w-full bg-white text-gray-900 py-3 rounded font-semibold">Contact Sales</button>
</div>
</div>
</section>
```
### Conversion Tips
- Recommend starter plan (pre-select/highlight)
- Show annual discount (20-30%)
- Use FAQs to address concerns
- Popular plan highlighted
---
## 9. Video-First Hero
**Keywords:** video, hero, media
**CTA:** Overlay on video (center/bottom)
**Конверсия:** 86% higher engagement
### Implementation
```html
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover">
<source src="hero.mp4" type="video/mp4" />
</video>
<div class="absolute inset-0 bg-black bg-opacity-60"></div>
<div class="relative z-10 text-center text-white px-4">
<h1 class="text-5xl font-bold mb-4">Your Headline</h1>
<p class="text-xl mb-8">Value proposition with video proof</p>
<a class="bg-orange-500 text-white px-8 py-4 rounded-lg text-lg font-semibold">
Get Started
</a>
</div>
</section>
```
### Conversion Tips
- Add captions for accessibility
- Compress video for performance
- Auto-play muted
---
## 10. Scroll-Triggered Storytelling
**Keywords:** storytelling, scroll, narrative
**CTA:** End of each chapter (mini) + Final climax CTA
**Конверсия:** Narrative increases time-on-page 3x
### Section Order
1. Intro hook
2. Chapter 1 (problem)
3. Chapter 2 (journey)
4. Chapter 3 (solution)
5. Climax CTA
### Implementation
```html
<section class="scroll-smooth">
<!-- Chapter 1 -->
<section class="min-h-screen flex flex-col items-center justify-center px-4">
<h2 class="text-4xl font-bold mb-4">The Problem</h2>
<p class="text-xl text-gray-600 max-w-2xl">Describe the pain point.</p>
<div class="mt-8"><a class="text-blue-600 underline">Continue reading →</a></div>
</section>
<!-- Chapter 2 -->
<section class="min-h-screen flex flex-col items-center justify-center px-4 bg-gray-50">
<h2 class="text-4xl font-bold mb-4">The Journey</h2>
<p class="text-xl text-gray-600 max-w-2xl">Show how it works.</p>
</section>
<!-- Chapter 3 -->
<section class="min-h-screen flex flex-col items-center justify-center px-4">
<h2 class="text-4xl font-bold mb-4">The Solution</h2>
<a class="mt-8 bg-blue-600 text-white px-8 py-4 rounded-lg text-xl font-semibold">
Get Started Now
</a>
</section>
</section>
```
### Conversion Tips
- Use progress indicator
- Mobile: simplify animations
- ScrollTrigger animations
---
## 11. AI Personalization Landing
**Keywords:** ai, personalization, smart
**CTA:** Context-aware placement based on user segment
**Конверсия:** 20%+ conversion with personalization
### Implementation
```html
<section class="py-20">
<div id="personalized-hero">
<h1 id="personalized-headline">Hi {firstName}! Ready to {goal}?</h1>
<p id="personalized-sub">Based on your {industry}, here's what works:</p>
</div>
<div id="personalized-features" class="grid grid-cols-3 gap-8 mt-12">
<!-- Features relevant to segment -->
</div>
</section>
```
### Conversion Tips
- Requires analytics integration
- Fallback for new users
- A/B test color variations per segment
---
## 12. Waitlist / Coming Soon
**Keywords:** waitlist, coming-soon, launch
**CTA:** Email form prominent (above fold) + Sticky form on scroll
**Конверсия:** Высокая — scarcity + exclusivity
### Section Order
1. Hero with countdown
2. Product teaser/preview
3. Email capture form
4. Social proof (waitlist count)
### Implementation
```html
<section class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white">
<h1 class="text-5xl font-bold mb-4">Something Amazing Is Coming</h1>
<div id="countdown" class="text-3xl font-mono mb-8">00:00:00:00</div>
<form class="flex gap-4 mb-8">
<input type="email" placeholder="your@email.com" class="px-4 py-3 rounded text-gray-900" />
<button class="bg-blue-500 text-white px-6 py-3 rounded font-semibold">Join Waitlist</button>
</form>
<p class="text-gray-400">Join <strong>12,847</strong> others on the waitlist</p>
</section>
```
### Conversion Tips
- Show waitlist count
- Early access benefits
- Referral program
- Countdown timer animation
---
## 13. App Store Style Landing
**Keywords:** app, mobile, download
**CTA:** Download buttons prominent (App Store + Play Store)
**Конверсия:** Высокая — platform-specific CTAs
### Section Order
1. Hero with device mockup
2. Screenshots carousel
3. Features with icons
4. Reviews/ratings
5. Download CTAs
### Conversion Tips
- Show real screenshots
- Include ratings (4.5+ stars)
- QR code for mobile
- Platform-specific CTAs
---
## 14. FAQ / Documentation Landing
**Keywords:** faq, documentation, support
**CTA:** Search bar prominent + Contact CTA
### Conversion Tips
- Reduce support tickets
- Track search analytics
- Show related articles
- Contact escalation path
---
## 15. Immersive / Interactive Experience
**Keywords:** immersive, interactive, 3d
**CTA:** After interaction complete + Skip option
### Conversion Tips
- 40% higher engagement
- Performance trade-off
- Provide skip option
- Mobile fallback essential
---
## 16. Event / Conference Landing
**Keywords:** event, conference, meetup
**CTA:** Register CTA sticky + After speakers
**Конверсия:** Высокая — early bird pricing
### Section Order
1. Hero (date/location/countdown)
2. Speakers grid
3. Agenda/schedule
4. Sponsors
5. Register CTA
### Conversion Tips
- Early bird pricing with deadline
- Social proof (past attendees)
- Speaker credibility
- Multi-ticket discounts
---
## 17. Before-After Transformation
**Keywords:** before-after, transformation, results
**CTA:** After transformation reveal + Bottom
**Конверсия:** 45% higher conversion
### Implementation
```html
<section class="py-16">
<h2 class="text-3xl font-bold text-center mb-8">See the Difference</h2>
<div class="relative h-96">
<div class="absolute inset-0 bg-gray-300 flex items-center justify-center">BEFORE</div>
<div class="absolute inset-0 bg-green-100 flex items-center justify-center"
style="clip-path: inset(0 0 0 50%);">AFTER</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-2 h-full bg-gray-500 cursor-col-resize"></div>
</div>
</div>
</section>
```
### Conversion Tips
- Visual proof of value
- Real results with specific metrics
- Guarantee offer
---
## 18. Marketplace / Directory
**Keywords:** marketplace, directory, search
**CTA:** Hero Search Bar + Navbar 'List your item'
### Conversion Tips
- Search bar is the CTA
- Reduce friction to search
- Popular searches suggestions
---
## 19. Newsletter / Content First
**Keywords:** newsletter, content, writer
**CTA:** Hero inline form + Sticky header form
### Implementation
```html
<section class="py-20 bg-amber-50 text-center">
<h1 class="text-4xl font-bold mb-4">Get Weekly Insights</h1>
<form class="max-w-md mx-auto flex gap-4">
<input type="email" placeholder="your@email.com" class="flex-1 px-4 py-3 rounded" />
<button class="bg-amber-600 text-white px-6 py-3 rounded font-semibold">Subscribe</button>
</form>
<p class="mt-4 text-gray-600">Join 50,000+ readers</p>
</section>
```
### Conversion Tips
- Single field form (Email only)
- Show 'Join X, 000 readers'
- Read sample link
---
## 20. Webinar Registration
**Keywords:** webinar, registration, training
**CTA:** Hero (Right side form) + Bottom anchor
### Conversion Tips
- Limited seats logic
- 'Live' indicator
- Auto-fill timezone
---
## 21. Enterprise Gateway
**Keywords:** enterprise, corporate, solutions
**CTA:** Contact Sales (Primary) + Login (Secondary)
### Conversion Tips
- Path selection (I am a...)
- Mega menu navigation
- Trust signals prominent
---
## 22. Portfolio Grid
**Keywords:** portfolio, grid, showcase
**CTA:** Project Card Hover + Footer Contact
### Conversion Tips
- Visuals first
- Filter by category
- Fast loading essential
---
## 23. Horizontal Scroll Journey
**Keywords:** horizontal, scroll, journey
**CTA:** Floating Sticky CTA or End of Horizontal Track
### Conversion Tips
- Immersive product discovery
- High engagement
- Keep navigation visible
---
## 24. Bento Grid Showcase
**Keywords:** bento, grid, features, apple-style
**CTA:** Floating Action Button or Bottom of Grid
### Implementation
```html
<section class="py-16">
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-[600px]">
<div class="col-span-2 row-span-2 bg-gray-100 rounded-xl p-8 flex flex-col justify-end">
<h3 class="text-2xl font-bold">Main Feature</h3>
<p class="text-gray-600">Detailed description</p>
</div>
<div class="bg-gray-100 rounded-xl p-6 flex items-center justify-center">
<!-- Video embed or image -->
</div>
<div class="bg-gray-100 rounded-xl p-6 flex items-center justify-center">
<!-- Stat or icon -->
</div>
<div class="col-span-2 bg-gray-100 rounded-xl p-6 flex items-center">
<!-- Feature list -->
</div>
</div>
</section>
```
### Conversion Tips
- Scannable value props
- High information density without clutter
- Mobile stack
---
## 25. AI-Driven Dynamic Landing
**Keywords:** ai, dynamic, generative
**CTA:** Input Field (Hero) + 'Try it' Buttons
### Implementation
```html
<section class="py-20 bg-gray-900 text-white text-center">
<h1 class="text-5xl font-bold mb-4">Generate Anything</h1>
<p class="text-xl text-gray-300 mb-8">Describe what you want</p>
<div class="max-w-2xl mx-auto flex gap-4 mb-8">
<input type="text" placeholder="Describe your idea..."
class="flex-1 px-6 py-4 rounded-lg text-gray-900 text-lg" />
<button class="bg-blue-500 text-white px-8 py-4 rounded-lg font-semibold">
Generate
</button>
</div>
<div class="flex gap-4 justify-center flex-wrap">
<span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Logo design</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Code review</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Data analysis</span>
</div>
</section>
```
### Conversion Tips
- 'Show, don't tell'
- Low friction start
- Typing text effects
---
## Quick Reference: CTA Strategy by Pattern
| Pattern | CTA Count | CTA Placements |
|---------|-----------|----------------|
| Hero + Features | 2 | Hero (sticky) + Bottom |
| Hero + Testimonials | 2 | Hero (sticky) + Post-testimonials |
| Product Demo | 2 | Video center + CTA right/bottom |
| Minimal Single Column | 1 | Center, large button |
| Funnel (3-Step) | 4 | Each step mini-CTA + Final |
| Comparison Table | 2 | Table right + Below table |
| Lead Magnet | 1 | Submit button |
| Pricing Page | 4 | Each card + Sticky nav + Bottom |
| Video-First | 2 | Overlay on video + Bottom |
| Waitlist/Coming Soon | 2 | Above fold + Sticky scroll |
| Newsletter | 2 | Hero inline + Sticky header |
| AI-Driven | 2 | Input Field + 'Try it' |
| App Store | 3 | Throughout (App + Play) |
| Event | 3 | Sticky + After speakers + Bottom |
layout/overlapping-layers.md
+35
View File
@@ -0,0 +1,35 @@
---
name: layout/overlapping-layers
title: Overlapping Elements
description: Elements that overlap to create depth and visual interest.
tags: [layout, overlapping, depth, premium]
source: amppz.com, brad.co, stripe.com, linear.app
---
# Overlapping Elements
## CSS
```css
.overlapping-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.image-card {
grid-column: span 6;
z-index: 1;
}
.text-card {
grid-column: 7 / span 6;
margin-top: -60px;
z-index: 2;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `z-index` | `z-index: 1/2` |
| `margin-top: -200px` | `margin-top: -30px` |
| Без mobile fallback | `@media (max-width: 768px)` |
layout/sticky-feature.md
+364
View File
@@ -0,0 +1,364 @@
---
name: layout/sticky-feature
title: Sticky Feature Section (Scroll Reveal)
description: Text scrolls while image/visual stays pinned. Classic premium pattern from Stripe, Linear, Apple.
tags: [layout, sticky, scroll, parallax, reveal, premium]
source: stripe.com, linear.app, apple.com, raycast.com
---
# Sticky Feature Section
## Что это
Секция где текст скроллится, а визуальный элемент (скриншот, видео, анимация) остаётся прилипшим (sticky). Классический паттерн Stripe.com и Apple.
## Ключевые параметры
| Параметр | Значение |
|----------|----------|
| `min-height` | `100vh` |
| `sticky top` | `0` или `100px` |
| `padding` | `128px 0` |
| `gap between text blocks` | `80–120px` |
| `scroll duration` | `100–200vh` (время просмотра) |
## Pattern 1: Stripe-Style (text left, sticky image right)
```html
<section class="feature-sticky">
<div class="feature-sticky-container">
<!-- Sticky visual -->
<div class="feature-sticky-visual">
<img src="/feature-demo.png" alt="Feature demo" loading="lazy">
</div>
<!-- Scrolling text -->
<div class="feature-sticky-texts">
<div class="feature-block">
<span class="feature-number">01</span>
<h3>Молниеносная скорость</h3>
<p>Загрузка страниц менее чем за 100мс. Оптимизированный движок, CDN по всему миру.</p>
</div>
<div class="feature-block">
<span class="feature-number">02</span>
<h3>Умная аналитика</h3>
<p>AI-анализ данных в реальном времени. Прогнозирование трендов и автоматические отчёты.</p>
</div>
<div class="feature-block">
<span class="feature-number">03</span>
<h3>Безопасность данных</h3>
<p>Шифрование end-to-end. Соответствие GDPR, PCI DSS, SOC 2 Type II.</p>
</div>
</div>
</div>
</section>
```
```css
.feature-sticky {
min-height: 100vh;
padding: 128px 0;
background: var(--color-bg);
}
.feature-sticky-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
/* Sticky visual */
.feature-sticky-visual {
position: sticky;
top: 100px;
height: 500px;
border-radius: 20px;
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.feature-sticky-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scrolling text blocks */
.feature-block {
padding: 64px 0;
border-bottom: 1px solid var(--color-border);
}
.feature-block:first-child {
padding-top: 0;
}
.feature-block:last-child {
border-bottom: none;
}
.feature-number {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.feature-block h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 16px;
}
.feature-block p {
font-size: 1.125rem;
color: var(--color-text-secondary);
line-height: 1.7;
max-width: 400px;
}
/* Responsive */
@media (max-width: 768px) {
.feature-sticky-container {
grid-template-columns: 1fr;
}
.feature-sticky-visual {
position: relative;
top: 0;
height: 300px;
margin-bottom: 48px;
}
}
```
## Pattern 2: Apple-Style (image center, text fades in)
```html
<section class="feature-fade">
<div class="feature-fade-visual">
<img src="/product-shot.png" alt="Product" loading="lazy">
</div>
<div class="feature-fade-texts">
<div class="feature-fade-block" data-target="1">
<h3>Тонкий дизайн</h3>
<p>Всего 6.1мм толщина.</p>
</div>
<div class="feature-fade-block" data-target="2">
<h3>Мощный чип</h3>
<p>A17 Pro — самый быстрый в смартфоне.</p>
</div>
<div class="feature-fade-block" data-target="3">
<h3>Камера 48MP</h3>
<p>Детали, которые вы не увидите.</p>
</div>
</div>
</section>
```
```css
.feature-fade {
min-height: 300vh; /* 3 экрана скролла */
position: relative;
}
.feature-fade-visual {
position: sticky;
top: 50%;
transform: translateY(-50%);
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
}
.feature-fade-visual img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.feature-fade-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-fade-block.active {
opacity: 1;
}
.feature-fade-block h3 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 16px;
}
.feature-fade-block p {
font-size: 1.25rem;
color: var(--color-text-secondary);
}
```
```javascript
// Intersection Observer для fade-эффекта
const blocks = document.querySelectorAll('.feature-fade-block');
const visual = document.querySelector('.feature-fade-visual');
const container = document.querySelector('.feature-fade');
if (blocks.length && container) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
blocks.forEach(block => block.classList.remove('active'));
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, {
root: container,
rootMargin: '0px',
threshold: 0.5
});
blocks.forEach(block => observer.observe(block));
}
```
## Pattern 3: GSAP ScrollTrigger (scroll-based animations)
```javascript
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Image zoom on scroll
gsap.to('.feature-sticky-visual img', {
scale: 1.1,
scrollTrigger: {
trigger: '.feature-sticky',
start: 'top bottom',
end: 'bottom top',
scrub: 1
}
});
// Text color change on scroll
gsap.utils.toArray('.feature-block').forEach((block, i) => {
gsap.from(block.querySelector('h3'), {
opacity: 0,
y: 40,
duration: 0.8,
scrollTrigger: {
trigger: block,
start: 'top 80%',
toggleActions: 'play none none reverse'
}
});
});
```
## Pattern 4: Horizontal Scroll Cards
```html
<section class="horizontal-scroll">
<div class="horizontal-scroll-track">
<div class="scroll-card">
<h3>Feature 1</h3>
<p>Description</p>
</div>
<div class="scroll-card">
<h3>Feature 2</h3>
<p>Description</p>
</div>
<div class="scroll-card">
<h3>Feature 3</h3>
<p>Description</p>
</div>
</div>
</section>
```
```css
.horizontal-scroll {
overflow: hidden;
padding: 128px 0;
}
.horizontal-scroll-track {
display: flex;
gap: 24px;
padding: 0 24px;
width: max-content;
}
.scroll-card {
min-width: 400px;
padding: 48px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
}
.scroll-card h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 16px;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `top: 0` — прилипает к самому верху | `top: 100px` — отступ от навигации |
| `min-height: 200vh` — слишком длинно | `min-height: 100–200vh` |
| Без `position: sticky` fallback | `position: relative` на мобильных |
| Text без `max-width` | `max-width: 400px` для читаемости |
| Нет scroll-анимации | GSAP ScrollTrigger или CSS scrub |
## Mobile Considerations
```css
@media (max-width: 768px) {
/* Sticky не работает так же на мобильных */
.feature-sticky-visual {
position: relative;
top: 0;
height: 300px;
}
/* Уменьшаем секцию */
.feature-sticky {
padding: 64px 0;
}
}
```
## CV Service Validation
```bash
# Проверить UX heuristics sticky секции
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "..."}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
ux = d['analyzers'].get('ux_heuristics', {})
print(f\"UX Heuristics: {ux.get('score', 'N/A')}/10\")
"
```
Ожидается: `ux_heuristics` > 6.
media/animated-illustration.md
+43
View File
@@ -0,0 +1,43 @@
---
name: media/animated-illustration
title: Animated Illustrations & Icons
description: Lottie animations, CSS illustrations, motion graphics.
tags: [media, animation, illustration, lottie, motion]
source: raycast.com, linear.app, amppz.com, brad.co
---
# Animated Illustrations
## 1. Lottie Integration
```html
<div id="animation" data-src="animation.json"></div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
document.getElementById('animation').innerHTML = `
<lottie-player src="animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
`;
</script>
```
## 2. CSS Animated Illustration
```css
.illustration {
width: 200px;
height: 200px;
background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);
border-radius: 50%;
animation: spin 4s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без fallback | SVG fallback |
| Без `prefers-reduced-motion` | Уважать настройки |
media/image-parallax.md
+62
View File
@@ -0,0 +1,62 @@
---
name: media/image-parallax
title: Image Parallax
description: Images moving at different scroll speeds. Creates depth.
tags: [media, parallax, image, scroll, depth]
source: apple.com, amppz.com, brad.co, godly.website
---
# Image Parallax
## CSS-only реализация
```css
.parallax-section {
height: 100vh;
overflow: hidden;
position: relative;
}
.parallax-image {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 140%;
background: url('/parallax.jpg') center/cover;
will-change: transform;
}
```
```javascript
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const parallax = document.querySelector('.parallax-image');
if (parallax) {
parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
```
## GSAP версия
```javascript
gsap.to('.parallax-image', {
yPercent: 50,
ease: 'none',
scrollTrigger: {
trigger: '.parallax-section',
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `will-change` | `will-change: transform` |
| `scrub: 0` | `scrub: 1` |
| Без `prefers-reduced-motion` | Отключать на мобильных |
media/svg-animation.md
+57
View File
@@ -0,0 +1,57 @@
---
name: media/svg-animation
title: SVG Animation & Icon Motion
description: Animated SVG icons, paths, and illustrations.
tags: [media, svg, animation, icon, motion]
source: raycast.com, linear.app, brad.co, amppz.com
---
# SVG Animation
## 1. Path Draw Animation
```html
<svg class="icon-animated" viewBox="0 0 24 24" width="48" height="48">
<path class="icon-path" d="M5 13l4 4L19 7" fill="none" stroke="#6366f1" stroke-width="2"/>
</svg>
```
```css
.icon-path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: draw 0.5s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
```
## 2. Morphing SVG
```html
<svg class="morph-svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#6366f1">
<animate attributeName="r" values="40;50;40" dur="3s" repeatCount="indefinite"/>
</circle>
</svg>
```
## 3. Icon Hover
```css
.icon {
transition: transform 0.3s ease;
}
.icon:hover {
transform: scale(1.2) rotate(10deg);
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без viewBox | Всегда viewBox |
| Без `stroke-dashoffset` | Использовать для path |
| 500ms+ анимация | 0.3–0.5s |
media/video-mask.md
+316
View File
@@ -0,0 +1,316 @@
---
name: media/video-mask
title: Video Background with Mask & Clip
description: Video displayed inside shapes, text, or masks. Creates striking visual impact.
tags: [media, video, mask, clip, effect, wow]
source: amppz.com, brad.co, godly.website, linear.app
---
# Video Background with Mask & Clip
## Что это
Видео, отображаемое не как прямоугольник, а внутри формы: маски, обрезка по тексту, SVG-маски. Создаёт премиальный wow-эффект.
## Типы масок для видео
### 1. Text Mask (видео внутри текста)
```html
<section class="hero-video-text">
<h1 class="text-mask-video">
PREVIEW
</h1>
</section>
```
```css
.text-mask-video {
font-size: clamp(4rem, 12vw, 10rem);
font-weight: 900;
line-height: 1;
background: url('/video-preview.mp4') center/cover;
-webkit-mask-image: text;
mask-image: text;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
color: #0a0a0a; /* fallback color */
margin: 0 auto;
}
```
### 2. Circle Mask (видео в круге)
```html
<div class="video-circle">
<video autoplay muted loop playsinline>
<source src="/hero-video.webm" type="video/webm">
</video>
</div>
```
```css
.video-circle {
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.video-circle video {
width: 100%;
height: 100%;
object-fit: cover;
/* Увеличиваем чтобы заполнить круг */
transform: scale(1.2);
}
```
### 3. SVG Mask (произвольная форма)
```html
<svg style="position: absolute; width: 0; height: 0;">
<defs>
<mask id="star-mask">
<rect width="100%" height="100%" fill="white"/>
<path d="M150 0 L200 100 L300 100 L220 160 L250 260 L150 210 L50 260 L80 160 L0 100 L100 100 Z"
fill="black"/>
</mask>
</defs>
</svg>
<div class="video-masked" style="mask: url(#star-mask); -webkit-mask: url(#star-mask);">
<video autoplay muted loop playsinline>
<source src="/hero-video.webm" type="video/webm">
</video>
</div>
```
```css
.video-masked {
width: 300px;
height: 300px;
}
.video-masked video {
width: 100%;
height: 100%;
object-fit: cover;
}
```
### 4. Clip-path Polygon
```css
.video-polygon {
clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
overflow: hidden;
}
.video-polygon video {
width: 100%;
height: 100%;
object-fit: cover;
}
```
### 5. Video as Hero Background
```html
<section class="hero-video-bg">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Заголовок поверх видео</h1>
</div>
</section>
```
```css
.hero-video-bg {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.hero-video-bg video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
padding: 120px 24px;
text-align: center;
}
```
## Performance-Optimized Video Setup
### WebM + MP4 Fallback
```html
<video autoplay muted loop playsinline poster="/video-poster.jpg" preload="metadata">
<source src="/video.webm" type="video/webm">
<source src="/video.mp4" type="video/mp4">
<!-- Fallback image -->
<img src="/video-poster.jpg" alt="" class="video-fallback">
</video>
```
```css
.video-fallback {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Показываем fallback если видео не загрузилось */
video:not(:success) + .video-fallback {
display: block;
}
```
### Responsive Video Sizing
```css
.video-responsive {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
@media (max-width: 768px) {
.video-responsive {
aspect-ratio: 9 / 16;
}
}
```
## Lazy Loading Video
```html
<!-- Видео загружается только при появлении в viewport -->
<video class="video-lazy"
data-src="/video.webm"
data-src-mp4="/video.mp4"
autoplay muted loop playsinline>
</video>
```
```javascript
// IntersectionObserver для ленивой загрузки
const videoObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const video = entry.target;
video.src = video.dataset.src;
video.load();
videoObserver.unobserve(video);
}
});
}, {
rootMargin: '200px'
});
document.querySelectorAll('.video-lazy').forEach(video => {
videoObserver.observe(video);
});
```
## Video with Noise Overlay (premium feel)
```html
<div class="video-container">
<video autoplay muted loop playsinline>
<source src="/hero-video.webm" type="video/webm">
</video>
<div class="noise-overlay"></div>
<div class="gradient-overlay"></div>
</div>
```
```css
.noise-overlay {
position: absolute;
inset: 0;
background-image: url('/noise.png');
background-size: 256px 256px;
opacity: 0.03;
mix-blend-mode: overlay;
pointer-events: none;
}
.gradient-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(10, 10, 10, 0.3) 50%,
rgba(10, 10, 10, 0.9) 100%
);
pointer-events: none;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `.mp4` без `.webm` fallback | WebM + MP4 + poster fallback |
| Без `preload="metadata"` | `preload="metadata"` + lazy load |
| Видео > 10MB | Сжать до < 5MB (HandBrake) |
| Без `playsinline` на мобильных | Всегда `playsinline` для iOS |
| Без poster | Всегда `poster` как fallback |
| Звук | Никогда не включать звук на автоплеер |
## Compression Pipeline
```bash
# HandBrake CLI — сжатие видео для веба
HandBrakeCLI -i input.mp4 -o output.webm \
--format webm \
-e libvpx-vp9 \
-q 25 \
--width 1920 \
--max-height 1080 \
--two-pass \
--turbo 2
# FFmpeg — альтернатива
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 1500k \
-c:a libopus -b:a 128k -f webm output.webm
```
## CV Service Validation
```bash
# Проверить performance (video loading impact)
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
perf = d['analyzers'].get('performance', {})
print(f\"Performance: {perf.get('score', 'N/A')}/10\")
print(f\" LCP: {perf.get('lcp_impact', 'N/A')}\")
print(f\" Largest Element: {perf.get('largest_element', 'N/A')}\")
"
```
Ожидается: `performance` > 7 (video должен быть оптимизирован).
motion/animated-gradient.md
+320
View File
@@ -0,0 +1,320 @@
---
name: motion/animated-gradient
title: Animated Gradient Background
description: Smoothly shifting color gradients for backgrounds, buttons, and text. Creates premium, living feel.
tags: [motion, gradient, animation, background, glassmorphism]
source: stripe.com, raycast.com, resend.com, linear.app
---
# Animated Gradient Background
## Что это
Анимированные градиентные фоны, которые плавно перетекают друг в друга. Один из ключевых паттернов Stripe.com и современных SaaS-лендингов. Создаёт ощущение "живого" дизайна.
## Типы анимированных градиентов
### 1. Stripe-Style (shifting color flow)
```css
.gradient-bg {
background: linear-gradient(
135deg,
#6366f1,
#8b5cf6,
#ec4899,
#f43f5e,
#6366f1
);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
25% { background-position: 100% 50%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 50%; }
}
```
### 2. Radial Pulse (расширяющийся круг)
```css
.gradient-pulse {
background: radial-gradient(
circle at 30% 30%,
rgba(99, 102, 241, 0.15),
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
```
### 3. Mesh Gradient (несколько источников)
```css
.mesh-gradient {
background:
radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.15), transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.15), transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.1), transparent 50%);
background-size: 100% 100%;
animation: mesh-move 20s ease-in-out infinite alternate;
}
@keyframes mesh-move {
0% {
background-position: 0% 0%, 100% 100%, 50% 50%;
}
100% {
background-position: 100% 100%, 0% 0%, 60% 40%;
}
}
```
### 4. Gradient Border (подвижная рамка)
```css
.gradient-border {
position: relative;
border-radius: 20px;
padding: 2px; /* border width */
background: linear-gradient(90deg, #6366f1, #ec4899, #f43f5e, #6366f1);
background-size: 300% 100%;
animation: border-gradient 4s linear infinite;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
background: #0a0a0a;
z-index: -1;
}
@keyframes border-gradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
```
## Glassmorphism Card (Stripe style)
```css
.glass-card {
position: relative;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
transparent 50%
);
pointer-events: none;
}
```
## Hero Gradient Background (Stripe.com style)
```html
<section class="hero-gradient">
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
<div class="hero-content">
<h1>Your text here</h1>
</div>
</section>
```
```css
.hero-gradient {
position: relative;
min-height: 60vh;
overflow: hidden;
background: #0a0a0a;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: orb-float 20s ease-in-out infinite;
}
.orb-1 {
width: 600px;
height: 600px;
background: radial-gradient(circle, #6366f1, transparent 70%);
top: -20%;
left: -10%;
animation-delay: 0s;
}
.orb-2 {
width: 500px;
height: 500px;
background: radial-gradient(circle, #ec4899, transparent 70%);
bottom: -20%;
right: -5%;
animation-delay: -5s;
}
.orb-3 {
width: 400px;
height: 400px;
background: radial-gradient(circle, #10b981, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -10s;
}
@keyframes orb-float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(50px, -30px) scale(1.1);
}
50% {
transform: translate(-30px, 50px) scale(0.95);
}
75% {
transform: translate(30px, 30px) scale(1.05);
}
}
```
## Animated Button Gradient
```css
.btn-gradient-animated {
position: relative;
padding: 14px 28px;
border: none;
border-radius: 12px;
font-weight: 600;
color: white;
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-gradient-animated::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
#6366f1,
#8b5cf6,
#ec4899,
#f43f5e,
#6366f1
);
background-size: 300% 100%;
animation: btn-gradient 6s ease infinite;
}
.btn-gradient-animated:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
}
@keyframes btn-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
```
## Color Palettes
### Indie/SaaS (Stripe/Linear style)
```css
--grad-indigo: #6366f1;
--grad-purple: #8b5cf6;
--grad-pink: #ec4899;
--grad-rose: #f43f5e;
--grad-cyan: #06b6d4;
```
### Warm (Resend style)
```css
--grad-orange: #f97316;
--grad-yellow: #eab308;
--grad-red: #ef4444;
--grad-pink: #ec4899;
```
### Cool (Raycast style)
```css
--grad-blue: #3b82f6;
--grad-cyan: #06b6d4;
--grad-teal: #14b8a6;
--grad-green: #10b981;
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `animation: 3s` — слишком быстро (мозг не успевает) | `animation: 15–30s` — медленное плавное движение |
| Яркие цвета `#ff0000` | Приглушённые `rgba(99,102,241,0.15)` |
| Без `filter: blur()` на орбах | `blur(80–120px)` для мягких переходов |
| Без `prefers-reduced-motion` | Уважать настройки пользователя |
| Градиент на тексте без fallback | Всегда `-webkit-background-clip` |
## Performance
```css
/* ✅ Good — CSS animation (GPU accelerated) */
.gradient-bg {
animation: gradient-shift 15s ease infinite;
will-change: background-position;
}
/* ❌ Bad — JS animation (main thread) */
element.animate([
{ backgroundPosition: '0% 50%' },
{ backgroundPosition: '100% 50%' }
], { duration: 15000, iterations: Infinity });
```
## CV Service Validation
```bash
# Проверить визуальную гармонию градиентов
curl -s -X POST http://localhost:8001/design/analyze \
-H "Content-Type: application/json" \
-d '{"image_base64": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
color = d['dimensions'].get('color_harmony', {})
print(f\"Color Harmony: {color.get('score', 'N/A')}/10\")
print(f\" Palette: {color.get('palette', 'N/A')}\")
"
```
Ожидается: `color_harmony` > 6.
motion/hover-micro-interaction.md
+145
View File
@@ -0,0 +1,145 @@
---
name: motion/hover-micro-interaction
title: Hover Micro-interactions
description: Subtle animations on hover: scale, shadow, border glow, color shift.
tags: [motion, hover, micro-interaction, subtle, premium]
source: linear.app, raycast.com, stripe.com, resend.com
---
# Hover Micro-interactions
## Что это
Микровзаимодействия при наведении: плавные изменения масштаба, тени, свечения бордера, цветового сдвига. Создают ощущение живого интерфейса.
## Типы hover-эффектов
### 1. Card Lift + Shadow
```css
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
```
### 2. Border Glow
```css
.card {
border: 1px solid var(--color-border);
transition: border-color 0.3s ease;
}
.card:hover {
border-color: var(--color-accent);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
```
### 3. Image Zoom
```css
.image-wrapper {
overflow: hidden;
border-radius: 16px;
}
.image-wrapper img {
transition: transform 0.5s ease;
}
.image-wrapper:hover img {
transform: scale(1.05);
}
```
### 4. Text Color Shift
```css
.link {
color: var(--color-text-secondary);
position: relative;
transition: color 0.3s ease;
}
.link:hover {
color: var(--color-accent);
}
.link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--color-accent);
transition: width 0.3s ease;
}
.link:hover::after {
width: 100%;
}
```
### 5. Icon Rotation/Swing
```css
.icon {
transition: transform 0.3s ease;
}
.icon:hover {
transform: rotate(15deg) scale(1.1);
}
```
## Magnetic Hover (Enhanced)
```css
.hover-magnetic {
transition: transform 0.2s ease;
}
.hover-magnetic:hover {
transform: scale(1.02);
}
```
```javascript
document.querySelectorAll('.hover-magnetic').forEach(el => {
el.addEventListener('mousemove', (e) => {
const rect = el.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
el.style.transform = `perspective(500px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) scale(1.02)`;
});
el.addEventListener('mouseleave', () => {
el.style.transform = 'perspective(500px) rotateY(0) rotateX(0) scale(1)';
});
});
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `transform: scale(1.2)` — слишком резко | `transform: scale(1.02–1.05)` |
| Без `transition` | `transition: all 0.3s ease` |
| Без `will-change` на тяжёлых | `will-change: transform` |
| Hover на touch-устройствах | `@media (hover: hover)` |
## Mobile Detection
```css
@media (hover: none) {
.hover-effect:hover {
transform: none;
}
}
```
## CV Service Validation
```bash
curl -s -X POST http://localhost:8001/design/analyze \
-H "Content-Type: application/json" \
-d '{"image_base64": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
motion = d['dimensions'].get('motion_quality', {})
print(f\"Motion Quality: {motion.get('score', 'N/A')}/10\")
"
```
Ожидается: `motion_quality` > 6.
motion/magnetic-button.md
+151
View File
@@ -0,0 +1,151 @@
---
name: motion/magnetic-button
title: Magnetic Button Effect
description: Buttons that follow cursor within radius. Creates premium tactile feel.
tags: [motion, magnetic, button, micro-interaction, premium]
source: raycast.com, linear.app, brad.co, amppz.com
---
# Magnetic Button Effect
## Что это
Кнопки и элементы, которые притягиваются к курсору мыши в пределах радиуса. Создаёт ощущение тактильности и премиальности.
## Параметры
| Параметр | Значение |
|----------|----------|
| **Radius** | 60–100px |
| **Strength** | 0.1–0.3 |
| **Easing** | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
| **Duration** | 0.3s |
## Реализация
```html
<button class="magnetic-btn">Hover me</button>
```
```css
.magnetic-btn {
padding: 16px 32px;
background: var(--color-accent);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
position: relative;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
```
```javascript
class MagneticButton {
constructor(element, strength = 0.2, radius = 80) {
this.el = element;
this.strength = strength;
this.radius = radius;
this.rect = element.getBoundingClientRect();
this.isHovering = false;
this.animationId = null;
this.pos = { x: 0, y: 0 };
this.target = { x: 0, y: 0 };
this.init();
}
init() {
this.el.addEventListener('mouseenter', (e) => {
this.isHovering = true;
this.rect = this.el.getBoundingClientRect();
});
this.el.addEventListener('mouseleave', () => {
this.isHovering = false;
this.target = { x: 0, y: 0 };
this.animate();
});
this.el.addEventListener('mousemove', (e) => {
const x = e.clientX - this.rect.left - this.rect.width / 2;
const y = e.clientY - this.rect.top - this.rect.height / 2;
this.target = { x: x * this.strength, y: y * this.strength };
});
this.animate();
}
animate() {
if (this.isHovering) {
this.pos.x += (this.target.x - this.pos.x) * 0.1;
this.pos.y += (this.target.y - this.pos.y) * 0.1;
} else {
this.pos.x *= 0.9;
this.pos.y *= 0.9;
}
this.el.style.transform = `translate(${this.pos.x}px, ${this.pos.y}px)`;
this.animationId = requestAnimationFrame(() => this.animate());
}
destroy() {
cancelAnimationFrame(this.animationId);
}
}
// Usage
document.querySelectorAll('.magnetic-btn').forEach(el => {
new MagneticButton(el);
});
```
## Варианты силы притяжения
```javascript
// Слабое (для текста)
new MagneticButton(el, 0.1, 60);
// Среднее (для кнопок)
new MagneticButton(el, 0.2, 80);
// Сильное (для крупных элементов)
new MagneticButton(el, 0.3, 100);
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `strength: 0.5` — слишком резко | `strength: 0.1–0.3` |
| Без `mouseleave` сброса | Всегда сбрасывать в 0,0 |
| Без `requestAnimationFrame` | Использовать RAF |
| На мобильных без mouse | Проверять `matchMedia('(pointer: fine)')` |
## Mobile Fallback
```javascript
if (window.matchMedia('(pointer: fine)').matches) {
document.querySelectorAll('.magnetic-btn').forEach(el => {
new MagneticButton(el);
});
}
// На мобильных — просто hover-эффект
```
## CV Service Validation
```bash
# Проверить micro-interactions
curl -s -X POST http://localhost:8001/design/analyze \
-H "Content-Type: application/json" \
-d '{"image_base64": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
motion = d['dimensions'].get('motion_quality', {})
print(f\"Motion Quality: {motion.get('score', 'N/A')}/10\")
"
```
Ожидается: `motion_quality` > 6.
motion/page-transitions.md
+119
View File
@@ -0,0 +1,119 @@
---
name: motion/page-transitions
title: Page Transitions & Scroll Animations
description: Smooth page transitions, section reveals, and scroll-triggered animations.
tags: [motion, page-transition, scroll, reveal, animation]
source: linear.app, raycast.com, brad.co, amppz.com
---
# Page Transitions & Scroll Animations
## Что это
Анимации при переходе между страницами и появление секций при скролле.
## 1. Section Reveal on Scroll
```javascript
const sections = document.querySelectorAll('.reveal-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
sections.forEach(section => observer.observe(section));
```
```css
.reveal-section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-section.revealed {
opacity: 1;
transform: translateY(0);
}
```
## 2. Staggered Children Reveal
```javascript
const sections = document.querySelectorAll('.stagger-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('.stagger-child').forEach((child, i) => {
setTimeout(() => {
child.classList.add('revealed');
}, i * 100);
});
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
sections.forEach(section => observer.observe(section));
```
```css
.stagger-child {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.stagger-child.revealed {
opacity: 1;
transform: translateY(0);
}
```
## 3. Page Transition (SPA style)
```css
.page {
position: fixed;
inset: 0;
opacity: 0;
transform: scale(1.05);
transition: all 0.4s ease;
pointer-events: none;
z-index: 0;
}
.page.active {
opacity: 1;
transform: scale(1);
pointer-events: all;
z-index: 1;
}
.page.exit {
opacity: 0;
transform: scale(0.95);
}
```
## 4. Smooth Scroll Snap
```css
.snap-scroll {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
}
.snap-section {
scroll-snap-align: start;
min-height: 100vh;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `transition: 0.1s` — слишком быстро | `transition: 0.6–1s` |
| Без `IntersectionObserver` | Использовать observer |
| Без `prefers-reduced-motion` | Уважать настройки |
| Без `will-change` | `will-change: transform, opacity` |
motion/parallax-scroll.md
+142
View File
@@ -0,0 +1,142 @@
---
name: motion/parallax-scroll
title: Parallax Depth Effect
description: Multi-layer scrolling with different speeds. Creates 3D depth perception.
tags: [motion, parallax, depth, scroll, 3d, premium]
source: apple.com, linear.app, amppz.com, brad.co
---
# Parallax Depth Effect
## Что это
Многослойный скролл с разной скоростью — создаёт ощущение глубины и 3D-пространства.
## Параметры
| Параметр | Значение |
|----------|----------|
| **Foreground speed** | 1x (обычный скролл) |
| **Midground speed** | 0.5x–0.7x |
| **Background speed** | 0.1x–0.3x |
## CSS-реализация (простая)
```css
.parallax-section {
position: relative;
height: 100vh;
overflow: hidden;
}
.parallax-layer {
position: absolute;
width: 100%;
height: 120%;
top: -10%;
}
.parallax-layer.background {
z-index: 1;
}
.parallax-layer.midground {
z-index: 2;
transform: translateY(10%);
}
.parallax-layer.foreground {
z-index: 3;
transform: translateY(20%);
}
```
## GSAP ScrollTrigger (рекомендуется)
```javascript
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Background slow
gsap.to('.parallax-bg', {
yPercent: 30,
ease: 'none',
scrollTrigger: {
trigger: '.parallax-section',
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
// Midground medium
gsap.to('.parallax-mid', {
yPercent: 50,
ease: 'none',
scrollTrigger: {
trigger: '.parallax-section',
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
// Foreground fast
gsap.to('.parallax-fg', {
yPercent: 80,
ease: 'none',
scrollTrigger: {
trigger: '.parallax-section',
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
```
## Intersection Observer (лёгкий вариант)
```javascript
const layers = document.querySelectorAll('.parallax-layer');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const speed = parseFloat(entry.target.dataset.speed || 0.1);
const rect = entry.target.getBoundingClientRect();
const scrollPercent = window.scrollY / (window.innerHeight + rect.height);
entry.target.style.transform = `translateY(${scrollPercent * speed * 100}%)`;
});
}, { threshold: 0.1 });
layers.forEach(layer => observer.observe(layer));
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `prefers-reduced-motion` | Уважать настройки пользователя |
| `yPercent: 100` — слишком резко | `yPercent: 30–50` |
| Без `scrub: true` | `scrub: 1` для плавности |
|太重ых элементов | SVG/градиенты вместо фото |
## Mobile
```css
@media (prefers-reduced-motion: reduce) {
.parallax-layer {
transform: none !important;
}
}
```
## CV Service Validation
```bash
curl -s -X POST http://localhost:8001/design/analyze \
-H "Content-Type: application/json" \
-d '{"image_base64": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
motion = d['dimensions'].get('motion_quality', {})
print(f\"Motion Quality: {motion.get('score', 'N/A')}/10\")
"
```
motion/procedural-patterns.md
+229
View File
@@ -0,0 +1,229 @@
---
name: motion/procedural-patterns
title: Procedural Pattern Generator
description: Canvas-based procedural generation of animated patterns around title elements. Uses occupancy grid, BFS proximity map, and seeded RNG for deterministic layout.
tags: [motion, procedural, pattern, canvas, generation, animation, title-card]
source: github.com/halfof8/patterngen-oss
---
# Procedural Pattern Generator
## Что это
Инструментарий для автоматического создания анимированных заставок с процедурно размещёнными паттернами вокруг заголовков. Состоит из трёх компонентов:
1. **Web App** (React + Canvas 2D) — основной генератор
2. **Figma Plugin** — импорт дизайна из Figma
3. **Blender Add-on** — импорт PNG-последовательностей как emissive planes
Пайплайн: Figma → Web App (генерация) → PNG-последовательности → Blender (композиция).
## Алгоритм размещения
### 1. Occupancy Grid
Сетка 20px на 1920×1080 (96×54 ячеек). Title-элементы занимают ячейки, помечая их как занятые.
```typescript
class GridOccupancy {
private cells: boolean[][]; // GRID_ROWS × GRID_COLS
markRect(x, y, w, h) { /* occupy cells */ }
isBlockFree(col, row, spanCols, spanRows) { /* collision check */ }
findFreeBlocks(spanCols, spanRows, align) { /* find valid positions */ }
}
```
### 2. BFS Proximity Map
BFS от всех title-элементов к каждой ячейке сетки. Определяет «зону влияния» — где паттерны могут появляться относительно заголовка.
```typescript
function buildProximityMap(titles): number[][] {
const dist: number[][] = fill(Infinity);
// BFS from all title edges
while (queue.length > 0) {
const [cx, cy] = queue.shift();
for (const [dx, dy] of neighbors) {
const nd = dist[cy+dy][cx+dx];
if (nd > dist[cy][cx] + 1) {
dist[cy+dy][cx+dx] = dist[cy][cx] + 1;
queue.push([cx+dx, cy+dy]);
}
}
}
}
```
### 3. Seeded Placement
Deterministic RNG (mulberry32). Same seed = identical layout.
```typescript
function mulberry32(seed) {
let state = seed >>> 0;
return () => {
state = (state + 0x6D2B79F5) >>> 0;
let t = state;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
```
## 7 типов анимации паттернов
| Тип | Эффект | CSS/Canvas |
|-----|--------|------------|
| `dots` | Поэлементный fade-in со stagger | `globalAlpha` per shape |
| `capsule` | Рост от центра по длинной оси | Clip rect grow |
| `circle` | Pie-fill по часовой | Arc + clip |
| `arrow` | Slide up снизу | `translateY` offset |
| `square` | Scale 1.6× → 1× | `scale()` transform |
| `stripes` | Полосы slide-in staggered | Y-offset per stripe |
| `cross` | Scale 1.6× → 1× | `scale()` transform |
## Timeline: 3 фазы
```
0──────────→ durationMs ──────────→ 2×durationMs ──────────→ 4×durationMs (loop)
│ ФАЗА 1 │ ФАЗА 2 │ ФАЗА 3 │
│ Title reveal │ Pattern reveal │ Dots pulse │
│ half-reveal из центра │ clip-side reveal │ sin wave │
```
```typescript
// Фазовая логика timeline
function evaluate(elapsedMs, durationMs, titles, patterns, dots, easing) {
// Phase 1: Title reveal (0→1×)
const titleT = Math.min(1, elapsedMs / durationMs);
const titleEased = applyEasing(titleT, easing); // half-reveal
// Phase 2: Pattern reveal (1×→2×)
const cycleMs = afterTitle % (4 * durationMs);
// Phase 3: Dots pulse (2×→4×)
const holdMs = cycleMs - durationMs;
const pulse = 0.15 + 0.85 * (0.5 + 0.5 * Math.sin(2π * speed * t + phase));
}
```
## Color System
```typescript
function getPairsForColor(primary: string): ColorPair[] {
const lum = luminance(r, g, b);
const dark = mixRGB(primary, #000000, 0.45);
const light = mixRGB(primary, #FFFFFF, 0.35);
if (lum > 0.5) {
return [
{ bg: primary, fg: '#000000' },
{ bg: dark, fg: primary },
{ bg: primary, fg: dark },
];
}
// inverted for dark colors
}
```
Конвенция SVG-паттернов (40×40): `fill="white"` = фон (перекрашивается runtime), `fill="black"` / `stroke="black"` = foreground.
## Figma Plugin
Экспортирует фреймы 1920×1080 в JSON. Каждый слой экспортируется как 2× PNG, цвета автодетектятся.
```javascript
// code.js — экспорт слоя
bytes = await child.exportAsync({
format: 'PNG',
constraint: { type: 'SCALE', value: 2 },
});
// Автодетект цветов
collectUsedColors(node, usedColors); // BFS по иерархии
```
## Blender Add-on
Импорт ZIP с 3 PNG-последовательностями (titles, patterns, dots) как emissive planes:
```python
# Создаёт plane с aspect-ratio из разрешения PNG
plane.scale = (6.0, 6.0, 6.0)
plane.rotation_euler = (90°, 0, 0)
# Emissive shader node graph
tex.image.source = 'SEQUENCE'
tex.image_user.use_cyclic = cyclic # dots = True
nt.links.new(tex.outputs['Color'], bsdf.inputs['Emission'])
nt.links.new(tex.outputs['Alpha'], bsdf.inputs['Alpha'])
```
## Ключевые параметры
| Параметр | Диапазон | Описание |
|----------|----------|----------|
| density | 1–20 | Количество паттернов (формула: `3 + 40 × (d/10)²`) |
| proximity | 1–20 | Зона влияния от title (maxRadius = `2 + proximity × 2.5`) |
| stagger | 0–5 | Stagger window: `(stagger/5) × 0.8` |
| durationMs | 100–20000 | Длительность фазы |
| EXPORT_SCALE | 4 | Рендер в 4× разрешении |
| FPS | 24 | Частота кадров |
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Паттерны накладываются на title | BFS proximity map ограничивает placement |
| Без collision detection | Occupancy grid предотвращает наложения |
| Рандомная расстановка | Seeded RNG — детерминизм для итераций |
| Паттерны без анимации | 7 типов анимации с clip-side |
| Фиксированные цвета | Алгоритмическая генерация color pairs |
| Рендер без bg/fg разделения | white→bg, black→fg runtime colorize |
| 1 кадр = 1 экспорт | Layer export: titles/patterns/dots separately |
## Где используется
- **patterngen-oss** (github.com/halfof8/patterngen-oss) — open-source референс
- Title cards в motion design
- Анимированные фоны лендингов
- Procedural patterns для социальных сетей
- Генерация фоновых текстур для 3D-композиций в Blender
## CV Service Validation
Процедурные паттерны рендерятся на Canvas 2D — это клиентская генерация, не серверная. Для валидации дизайна страницы с pattern-генератором:
```bash
curl -X POST http://localhost:8001/design/full-analysis \
-H "Content-Type: application/json" \
-d '{"html": "<HTML>", "full_analysis": true}'
```
**Особенности:** Canvas-элементы не оцениваются по semantic HTML — паттерны — это визуальный слой. Оценивается обёртка (header, sidebar, controls).
## Технические детали
```
Структура проекта:
├── src/store.ts # Zustand store — 373 строки, вся бизнес-логика
├── src/core/
│ ├── patterns.ts # Load SVG, colorize (white→bg, black→fg)
│ ├── colors.ts # getPairsForColor, luminance-based
│ ├── grid.ts # GridOccupancy + snapToGrid(20px)
│ ├── placement.ts # generatePlacement — BFS + occupancy
│ └── rng.ts # mulberry32 seeded RNG
├── src/engine/
│ ├── animations.ts # 7 анимаций (drawAnimatedPattern)
│ ├── easing.ts # 7 easing функций
│ └── timeline.ts # evaluate() — фазовая логика
├── src/export/
│ ├── renderer.ts # renderFrame() — canvas layer compositing
│ └── exporter.ts # exportAll() → ZIP with 3 layers × 24fps
├── figma-plugin/
│ ├── code.js # Figma sandbox export
│ └── ui.html # Plugin UI
└── blender-addon/
└── patterngen_importer.py # Blender 3.4+ operator
```
**Зависимости:** React 18, Zustand 5, JSZip, FileSaver, Vite
motion/staggered-reveal.md
+187
View File
@@ -0,0 +1,187 @@
---
name: motion/staggered-reveal
title: Staggered Element Reveal
description: Cascading entrance animations where elements appear sequentially. Used on Linear, Raycast, Linear.app hero sections.
tags: [motion, gsap, scrolltrigger, entrance, stagger]
source: linear.app, raycast.com, godly.website top 50
---
# Staggered Element Reveal
## Что это
Последовательное появление элементов с нарастающей задержкой. Создаёт ощущение "потока" и профессионализма. Элементы появляются не все сразу, а каскадом с интервалом.
## Где используется
- Hero-секции Linear, Raycast, Resend
- Feature-блоки с иконками
- Списки преимуществ
- Карточки с услугами
## Ключевые параметры
| Параметр | Значение | Почему |
|----------|----------|--------|
| `stagger` | `0.08–0.12` | Оптимальный ритм — не слишком быстро, не медленно |
| `duration` | `0.6–0.8s` | Достаточное время для заметности |
| `ease` | `power3.out` | Плавное замедление, ощущение "приземления" |
| `delay` | `0.2–0.3` | Задержка перед началом каскада |
| `from opacity` | `0.8` | Не полная прозрачность, чтобы не было "прыжка" |
| `from translateY` | `20–30px` | Элементы "влетают" снизу |
## Референсы
### Linear Hero
```
1. Logo появляется → 0.3s задержка
2. H1 появляется (line by line) → stagger 0.1s
3. Подзаголовок → 0.4s задержка
4. CTA кнопка → 0.6s задержка
5. Декоративные элементы → 0.8s задержка
```
### Resend Feature Grid
```
- Карточки появляются с задержкой 0.08s друг за другом
- Каждая карточка: fade + slide up 15px
- Hover на карточку: scale 1.02 + shadow
```
## Реализация
```javascript
// GSAP + ScrollTrigger
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// 1. Базовый stagger-ревеал
gsap.from('.stagger-item', {
opacity: 0,
y: 30,
duration: 0.7,
stagger: 0.08,
ease: 'power3.out',
delay: 0.3,
scrollTrigger: {
trigger: '.stagger-section',
start: 'top 80%',
toggleActions: 'play none none none'
}
});
// 2. Stagger для карточек
gsap.from('.feature-card', {
opacity: 0,
y: 25,
scale: 0.97,
duration: 0.6,
stagger: 0.06,
ease: 'power2.out',
scrollTrigger: {
trigger: '.features-grid',
start: 'top 85%'
}
});
// 3. Stagger для текстовых строк
gsap.from('.hero-line', {
opacity: 0,
y: 40,
duration: 0.8,
stagger: 0.12,
ease: 'power3.out',
delay: 0.2
});
// 4. Line-by-line reveal для заголовка
const lines = document.querySelectorAll('.hero h1 .line');
gsap.from(lines, {
opacity: 0,
y: 50,
rotateX: -15,
duration: 0.8,
stagger: 0.15,
ease: 'power3.out',
delay: 0.3
});
```
## CSS подготовка
```css
.stagger-item {
/* Начальное состояние до анимации */
opacity: 0;
transform: translateY(30px);
will-change: opacity, transform;
}
/* Альтернатива: CSS-only для простых случаев */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-item {
opacity: 0;
animation: fadeUp 0.6s ease forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.18s; }
.stagger-item:nth-child(3) { animation-delay: 0.26s; }
.stagger-item:nth-child(4) { animation-delay: 0.34s; }
.stagger-item:nth-child(5) { animation-delay: 0.42s; }
.stagger-item:nth-child(6) { animation-delay: 0.5s; }
```
## Anti-patterns (Чего НЕ делать)
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `stagger: 0.02` — слишком быстро, "мигание" | `stagger: 0.08` — чёткий ритм |
| `stagger: 0.3` — слишком медленно, скучно | `stagger: 0.06–0.12` — оптимально |
| Все элементы `opacity: 0 → 1` | `opacity: 0.8 → 1` + `y: 20 → 0` |
| Без `will-change` | `will-change: opacity, transform` |
| Без `stagger` (все сразу) | Каскадное появление |
## Performance
```javascript
// ✅ GPU accelerated
gsap.from('.item', { opacity: 0, y: 20, transform: 'translateY(20px)' });
// ❌ Bad — заставляет layout
gsap.from('.item', { marginLeft: '20px' });
gsap.from('.item', { top: '20px', left: '20px' });
```
## Validation (CV Service)
```bash
# После рендеринга страницы
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "...", "full_analysis": false}' | python3 -m json.tool
```
Проверить:
- `performance` score > 8 — анимации только на `transform` и `opacity`
- `ux_heuristics` score > 6 — анимации не мешают навигации
- `wcag_compliance` — анимация имеет `prefers-reduced-motion` фоллбэк
```css
@media (prefers-reduced-motion: reduce) {
.stagger-item {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
```
prompts/00-master-prompt.md
+67
View File
@@ -0,0 +1,67 @@
---
name: 00-master-prompt
title: Master LLM Prompt — Premium Design Generation
description: Universal prompt for generating premium web pages using wiki patterns.
version: 1.0.0
---
# Master LLM Prompt for Premium Design Generation
## System Prompt
```
You are an elite frontend designer and developer. You create award-winning, high-converting landing pages using modern HTML, CSS, and vanilla JavaScript.
Design principles:
1. Premium dark theme (#0a0a0a background, #111111 surfaces)
2. Accent color: #6366f1 (indigo)
3. Typography: Inter font, 1.25 scale ratio
4. Spacing: 4-128px scale (4,8,12,16,20,24,32,40,48,64,80,96,128)
5. Motion: 0.3s ease-out for hovers, 0.6s ease for reveals
6. Accessibility: WCAG AA minimum, skip-link, focus-visible
7. Mobile-first: breakpoints at 768px, 1024px
Always use these CSS custom properties:
--color-bg: #0a0a0a
--color-surface: #111111
--color-surface-hover: #1a1a1a
--color-border: rgba(255,255,255,0.06)
--color-border-hover: rgba(255,255,255,0.12)
--color-text-primary: #f5f5f5
--color-text-secondary: #b0b0b0
--color-accent: #6366f1
--color-accent-hover: #818cf8
--ease-out: cubic-bezier(0.4, 0, 0.2, 1)
--duration-normal: 300ms
Generate complete, production-ready HTML files with:
- Semantic HTML5 (<header>, <main>, <footer>, <article>, <section>)
- CSS custom properties for theming
- Vanilla JavaScript for interactions
- Smooth animations with CSS transitions
- Responsive design with media queries
- Skip-link for accessibility
- Preconnect to Google Fonts
- Performance optimized (will-change, lazy loading)
```
## Usage
```
Use pattern layout/bento-grid.md for card layouts
Use pattern motion/staggered-reveal.md for entrance animations
Use pattern psychology/visual-hierarchy.md for conversion flow
```
## Anti-Patterns to Avoid
1. No Bootstrap/Tailwind — custom CSS only
2. No external JS libraries unless necessary
3. No hardcoded values — use CSS variables
4. No inline styles
5. No !important
6. No >2 fonts
7. No >3 colors
8. No animations < 200ms
9. No images without alt text
10. No forms without labels
prompts/layout/00-layout-prompts.md
+81
View File
@@ -0,0 +1,81 @@
---
name: layout-prompts
title: Layout Pattern LLM Prompts
description: Ready-to-use prompts for generating layouts with wiki patterns.
---
# Layout Pattern Prompts
## 1. Bento Grid Prompt
```
Create a bento-grid layout section with 6 cards. Each card should have:
- 16px border radius
- 24px padding
- 1px solid border with rgba(255,255,255,0.06)
- Hover: translateY(-4px), border-color changes to accent
- Staggered entrance animation with 0.08s delay
- 3 cards span 2 columns, 3 cards span 1 column
- Use CSS grid with gap: 24px
```
## 2. Hero Section Prompt
```
Create a hero section with:
- Centered layout
- H1 with gradient text (clip-background)
- Subtitle with max-width 600px
- Primary CTA button with magnetic hover effect
- Secondary CTA (ghost button)
- Animated gradient orbs in background
- min-height: 80vh
- padding: 128px 0
```
## 3. Feature List Prompt
```
Create a feature list section with:
- 4 feature items
- Each: checkmark icon (32x32 circle), title, description
- Border-bottom between items
- Hover: translateX(8px)
- Green checkmark: #10b981
- Clean spacing: 32px padding per item
```
## 4. Pricing Table Prompt
```
Create a 3-column pricing table:
- Free, Standard ($5000), Premium ($15000/mo)
- Standard card highlighted with accent border
- Feature list with checkmarks
- CTA button per card
- Responsive: stack on mobile
```
## 5. Testimonials Grid Prompt
```
Create a testimonials section with:
- 3 testimonial cards
- Star rating (5 stars)
- Quote text
- Author: avatar, name, position
- Cards with hover lift effect
- Grid: 3 columns on desktop, 1 on mobile
```
## 6. Sticky Feature Prompt
```
Create a sticky feature section:
- Left: scrolling text blocks (3 blocks)
- Right: sticky image/visual
- Each text block: number, title, description
- Sticky top: 100px
- Min-height: 100vh
- Padding: 128px 0
```
prompts/media/00-media-prompts.md
+50
View File
@@ -0,0 +1,50 @@
---
name: media-prompts
title: Media Pattern LLM Prompts
description: Ready-to-use prompts for media with wiki patterns.
---
# Media Pattern Prompts
## 1. Video Mask
```
Create video mask effect:
- Text with video inside using -webkit-mask-image: text
- Video: autoplay, muted, loop, playsinline
- Width: 100% of container
- Font-size: clamp(4rem, 12vw, 10rem)
- Font-weight: 900
- Fallback: static image for mobile
```
## 2. Image Parallax
```
Create image parallax:
- Section: height 100vh, overflow hidden
- Image: position absolute, height 140%
- GSAP ScrollTrigger: yPercent: 50, scrub: 1
- Will-change: transform
- Mobile: static image (no parallax)
```
## 3. SVG Animation
```
Create SVG icon animation:
- Path with stroke-dasharray: 30, stroke-dashoffset: 30
- Animation: draw 0.5s ease forwards
- Icon: 48x48px
- Color: accent (#6366f1)
- Hover: scale(1.2) rotate(10deg)
- Transition: 0.3s ease
```
## Anti-Patterns
1. Never autoplay video with sound
2. Never use images > 5MB
3. Always use WebP/AVIF
4. Always lazy load below-fold images
5. Never skip alt text
prompts/motion/00-motion-prompts.md
+105
View File
@@ -0,0 +1,105 @@
---
name: motion-prompts
title: Motion Pattern LLM Prompts
description: Ready-to-use prompts for generating animations with wiki patterns.
---
# Motion Pattern Prompts
## 1. Staggered Reveal
```
Create a staggered reveal animation:
- 3 elements (cards, items, headings)
- Each appears with opacity: 0 → 1, translateY(30px) → 0
- Delay between each: 0.08s (80ms)
- Duration: 0.6s
- Easing: ease-out
- Trigger: IntersectionObserver when element enters viewport
- Use CSS transitions, not JS animation
- Add data-stagger-index attribute to each element
```
## 2. Magnetic Button
```
Create a magnetic button effect:
- Button with padding 16px 32px
- Follow cursor within 80px radius
- Strength: 0.2
- Use requestAnimationFrame for smooth movement
- Reset on mouseleave
- Only apply on devices with pointer: fine
- Easing: cubic-bezier(0.25, 0.1, 0.25, 1)
```
## 3. Animated Gradient
```
Create an animated gradient background:
- 3 gradient orbs (indigo, pink, cyan)
- Each: 400x400px, border-radius: 50%
- Blur: 100px
- Float animation: 20s infinite
- Different delays: 0s, -7s, -14s
- Opacity: 0.3
- Position: absolute, full-height section
- Use CSS keyframes, not JS
```
## 4. Hover Micro-interactions
```
Create hover micro-interactions:
- Cards: translateY(-4px), box-shadow on hover
- Buttons: scale(1.02), color shift
- Links: underline animation (width 0 → 100%)
- All: transition 0.3s ease-out
- No hover effects on touch devices
- Use will-change for performance
```
## 5. Parallax Scroll
```
Create a parallax scroll effect:
- Background layer: yPercent: 30
- Midground layer: yPercent: 50
- Foreground layer: yPercent: 80
- Use GSAP ScrollTrigger with scrub: 1
- Start: "top bottom", end: "bottom top"
- Fallback: CSS only for non-GSAP sites
- Respect prefers-reduced-motion
```
## 6. Page Transitions
```
Create smooth page transitions:
- Fade overlay: black background, opacity 0 → 1, duration 300ms
- Content swap during transition
- Exit: opacity 1 → 0, duration 300ms
- Use CSS transitions, not JS animation
- Trigger: link click
- Only apply on desktop (pointer: fine)
- Respect prefers-reduced-motion
```
## 7. Procedural Pattern Generation
```
Create a procedural pattern generation system:
- Canvas 2D rendering at 1920×1080, export at 4× resolution (7680×4320)
- Grid-based placement: 20px grid, occupancy grid for collision detection
- BFS proximity map: calculate distance from each grid cell to title elements
- Seeded RNG (mulberry32): deterministic layout — same seed = same result
- 7 animation types: dots (stagger fade), capsule (center grow), circle (pie-fill),
arrow (slide up), square (scale 1.6→1), stripes (stagger slide), cross (scale)
- 3-phase timeline: Phase 1 (title reveal) → Phase 2 (pattern reveal) → Phase 3 (dots pulse)
- Phase 2+3 loop: cycle = 4 × durationMs
- Color pairs: algorithmic bg/fg generation from luminance (darken/mix)
- SVG pattern convention: 40×40, white=bg, black=fg, runtime colorize
- Export: 3 PNG layers (titles, patterns, dots) at 24fps, ZIP archive
- Parameters: density (1-20), proximity (1-20), stagger (0-5)
- Easing: easeOutCubic default, 7 easing types
```
prompts/psychology/00-psychology-prompts.md
+51
View File
@@ -0,0 +1,51 @@
---
name: psychology-prompts
title: Psychology Pattern LLM Prompts
description: Ready-to-use prompts for conversion patterns with wiki patterns.
---
# Psychology Pattern Prompts
## 1. Visual Hierarchy
```
Create visual hierarchy for CTA:
- H1: 48-64px, weight 800
- H2: 32-40px, weight 700
- Body: 16-18px, weight 400
- CTA button: 16px, weight 600, accent color
- Use size contrast 2:1 between headings and body
- CTA should be most contrasting element on page
- Whitespace: 128px between sections
```
## 2. Testimonials
```
Create testimonials section:
- 3 testimonial cards
- Each: 5 stars, quote, author avatar, name, position
- Grid: 3 columns desktop, 1 column mobile
- Cards: 20px border-radius, 24px padding
- Hover: translateY(-4px), border-color accent
- Social proof: "Trusted by 500+ agencies"
```
## 3. Trust Signals
```
Create trust signals section:
- Security badges: SSL, GDPR, SOC2
- Uptime: 99.9% indicator
- Client logos: monochrome, opacity 0.4
- Guarantee: 30-day money-back
- Place after hero, before pricing
```
## Anti-Patterns
1. Never fake testimonials
2. Never use more than 5 client logos
3. Never put CTA before trust signals
4. Never use small text (<16px)
5. Never clutter with too many badges
prompts/system/00-system-prompts.md
+50
View File
@@ -0,0 +1,50 @@
---
name: system-prompts
title: System Pattern LLM Prompts
description: Ready-to-use prompts for system patterns with wiki patterns.
---
# System Pattern Prompts
## 1. Design Tokens
```
Create complete design tokens:
- Color palette: bg, surface, border, text (primary, secondary, muted), accent
- Spacing: 4,8,12,16,20,24,32,40,48,64,80,96,128
- Typography: xs(12), sm(14), base(16), lg(18), xl(20), 2xl(24), 3xl(30), 4xl(36)
- Motion: ease-out, duration-normal(300ms), duration-slow(500ms)
- Border-radius: sm(4), md(8), lg(16), xl(24), full(9999)
- All as CSS custom properties
```
## 2. Component Patterns
```
Create reusable component patterns:
- Buttons: primary, secondary, ghost (3 variants)
- Inputs: default, focus, error (3 states)
- Cards: default, featured (2 variants)
- Badges: default, accent (2 variants)
- All with consistent padding, border-radius, transitions
```
## 3. CSS Architecture
```
Create CSS architecture:
- File structure: tokens/, base/, components/, layouts/, pages/
- Naming: BEM methodology
- No !important
- No hardcoded values
- Mobile-first media queries
- Custom properties for theming
```
## Anti-Patterns
1. Never use inline styles
2. Never use !important
3. Never hardcode values
4. Never mix design systems
5. Never skip accessibility
prompts/typography/00-typography-prompts.md
+55
View File
@@ -0,0 +1,55 @@
---
name: typography-prompts
title: Typography Pattern LLM Prompts
description: Ready-to-use prompts for typography with wiki patterns.
---
# Typography Pattern Prompts
## 1. Gradient Text
```
Create gradient text effect:
- H1 with font-size: clamp(2.5rem, 6vw, 4rem)
- background: linear-gradient(135deg, #6366f1, #ec4899, #f43f5e)
- background-clip: text
- -webkit-text-fill-color: transparent
- text-shadow: none
- Letter-spacing: -0.02em
- Font weight: 800
- Line height: 1.1
```
## 2. Font Pairing
```
Create font pairing:
- Headings: Inter, font-weight: 700-900
- Body: Inter, font-weight: 400-500
- Mono: JetBrains Mono
- Scale ratio: 1.25
- Body text: 16px minimum
- Line height: 1.6 for body, 1.2 for headings
- Max-width: 65ch for body text
```
## 3. Kinetic Text
```
Create kinetic text animation:
- Each word wrapped in <span class="word">
- opacity: 0, translateY(30px) initially
- On scroll: opacity: 1, translateY(0)
- Duration: 0.6s ease-out
- Stagger: 0.1s between words
- Use IntersectionObserver
- Fallback: always visible text
```
## Anti-Patterns
1. Never use < 16px for body text
2. Never use line-height < 1.4
3. Never use more than 2 fonts
4. Never use all-caps for paragraphs
5. Never use decorative fonts for body
psychology/cognitive-fluency.md
+49
View File
@@ -0,0 +1,49 @@
---
name: psychology/cognitive-fluency
title: Cognitive Fluency in Design
description: Design patterns that make information easy to process — reducing friction and increasing trust.
tags: [psychology, cognitive, fluency, simplicity, trust]
source: Nielsen Norman Group, baymard.com, stripe.com, linear.app
---
# Cognitive Fluency
## Что это
Дизайн, который делает информацию максимально простой для восприятия. Мозг доверяет тому, что легко понять.
## Принципы
1. **Простота** — одна идея на экран
2. **Предсказуемость** — знакомые паттерны
3. **Контраст** — важнее = больше
4. **Группировка** — связанные вместе
## Паттерны
```css
/* ✅ Fluent */
.card {
background: var(--color-surface);
border-radius: 16px;
padding: 32px;
border: 1px solid var(--color-border);
}
/* ❌ Complex */
.card {
background: linear-gradient(...);
border-radius: 16px 8px 20px 12px;
padding: 33px 37px;
box-shadow: ...;
border: 2px solid ...;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| 5 идей на экран | 1 идея на экран |
| Сложная навигация | 3–5 пунктов |
| Абстрактные иконки | Распознаваемые |
| Без whitespace | 128px между секциями |
psychology/testimonials.md
+360
View File
@@ -0,0 +1,360 @@
---
name: psychology/testimonials
title: Social Proof & Testimonials
description: Trust-building patterns: testimonials, logos, reviews, trust badges.
tags: [psychology, social-proof, trust, testimonials, conversion, cialdini]
source: stripe.com, linear.app, raycast.com, resend.com, cialdini.com
---
# Social Proof & Testimonials
## Что это
Шаблоны социального доказательства: отзывы, логотипы клиентов, цифры, trust badges. Основано на законе социального доказательства Роберта Циялдини.
## Пирамида Доверия
```
[Trust Badges + Security Certifications] ← Максимальное доверие
↓
[Logos of Known Clients] ← Доверие к бренду
↓
[Statistics / Numbers] ← Доверие к цифрам
↓
[Testimonials] ← Доверие к людям
↓
[Case Studies] ← Глубокое доверие
```
## Pattern 1: Logo Cloud (Monochrome)
```html
<section class="logo-cloud">
<p class="logo-cloud-label">Нам доверяют более 500 компаний</p>
<div class="logo-grid">
<img src="/clients/airbnb.svg" alt="Airbnb" loading="lazy">
<img src="/clients/linear.svg" alt="Linear" loading="lazy">
<img src="/clients/stripe.svg" alt="Stripe" loading="lazy">
<img src="/clients/vercel.svg" alt="Vercel" loading="lazy">
<img src="/clients/raycast.svg" alt="Raycast" loading="lazy">
<img src="/clients/resend.svg" alt="Resend" loading="lazy">
</div>
</section>
```
```css
.logo-cloud {
text-align: center;
padding: 80px 0;
border-bottom: 1px solid var(--color-border);
}
.logo-cloud-label {
font-size: 14px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: 32px;
}
.logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 48px;
max-width: 800px;
margin: 0 auto;
}
.logo-grid img {
height: 32px;
width: auto;
opacity: 0.4;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.logo-grid img:hover {
opacity: 0.7;
}
/* Responsive */
@media (max-width: 768px) {
.logo-grid {
gap: 24px;
}
.logo-grid img {
height: 24px;
}
}
```
## Pattern 2: Testimonial Cards
```html
<section class="testimonials">
<h2>Что говорят наши клиенты</h2>
<div class="testimonial-grid">
<article class="testimonial-card">
<div class="testimonial-stars">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<blockquote>"calls24 помог нам увеличить конверсию из звонков на 40%. Мы знали о проблемах, но не видели их." — Мария К., Руководитель отдела продаж</blockquote>
<footer class="testimonial-author">
<img src="/avatars/maria.jpg" alt="Мария К." loading="lazy">
<div>
<strong>Мария К.</strong>
<span>Руководитель отдела продаж, Agency X</span>
</div>
</footer>
</article>
<article class="testimonial-card featured">
<div class="testimonial-stars">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<blockquote>"Мы протестировали 3 инструмента аналитики. calls24 — единственный, который дал реальные инсайты, а не просто цифры." — Алексей П., CEO</blockquote>
<footer class="testimonial-author">
<img src="/avatars/alexey.jpg" alt="Алексей П." loading="lazy">
<div>
<strong>Алексей П.</strong>
<span>CEO, RealEstate Pro</span>
</div>
</footer>
</article>
<article class="testimonial-card">
<div class="testimonial-stars">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<blockquote>"Теперь каждый менеджер знает, где ошибается. Еженедельный отчёт — наш инструмент развития." — Дмитрий В., Директор"
<footer class="testimonial-author">
<img src="/avatars/dmitry.jpg" alt="Дмитрий В." loading="lazy">
<div>
<strong>Дмитрий В.</strong>
<span>Директор, Broker Plus</span>
</div>
</footer>
</article>
</div>
</section>
```
```css
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-top: 48px;
}
.testimonial-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 32px;
transition: all 0.3s ease;
}
.testimonial-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-4px);
}
.testimonial-card.featured {
border-color: var(--color-accent);
grid-column: span 1;
}
.testimonial-stars {
display: flex;
gap: 4px;
color: #fbbf24;
font-size: 20px;
margin-bottom: 16px;
}
.testimonial-card blockquote {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.testimonial-author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-border);
}
.testimonial-author strong {
display: block;
font-size: 0.95rem;
}
.testimonial-author span {
font-size: 0.85rem;
color: var(--color-text-muted);
}
```
## Pattern 3: Numbers/Stats Bar
```html
<section class="stats">
<div class="stats-grid">
<div class="stat-item">
<span class="stat-number">99</span>
<span class="stat-label">звонков проанализировано</span>
</div>
<div class="stat-item">
<span class="stat-number gradient-text">85%</span>
<span class="stat-label">не соответствуют скрипту</span>
</div>
<div class="stat-item">
<span class="stat-number">40%</span>
<span class="stat-label">рост конверсии с calls24</span>
</div>
<div class="stat-item">
<span class="stat-number">500+</span>
<span class="stat-label">агентств используют</span>
</div>
</div>
</section>
```
```css
.stats {
padding: 80px 0;
border-bottom: 1px solid var(--color-border);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.stat-number {
display: block;
font-size: 3rem;
font-weight: 900;
color: var(--color-accent);
margin-bottom: 8px;
}
.stat-label {
font-size: 0.875rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
```
## Pattern 4: Trust Badges
```html
<div class="trust-badges">
<div class="trust-badge">
<svg width="24" height="24">🔒</svg>
<span>SSL encrypted</span>
</div>
<div class="trust-badge">
<svg width="24" height="24">🛡️</svg>
<span>GDPR compliant</span>
</div>
<div class="trust-badge">
<svg width="24" height="24">✓</svg>
<span>30-day free trial</span>
</div>
<div class="trust-badge">
<svg width="24" height="24">⭐</svg>
<span>4.9/5 on Trustpilot</span>
</div>
</div>
```
```css
.trust-badges {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}
.trust-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
```
## Cialdini's Principles Applied
### 1. Social Proof (Люди делают как другие)
- Логотипы клиентов
- Количество пользователей
- Отзывы с фото
### 2. Authority (Доверие к экспертам)
- Сертификаты
- Отзывы от известных лиц
- Медиа-упоминания
### 3. Consistency (Последовательность)
- "Вы уже сделали первый шаг..."
- Продолжение бесплатного аудита
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Fake testimonials | Реальные отзывы с фото |
| 1000+ клиентов (без доказательств) | "500+ агентств" + логотипы |
| Без context | С именем, должностью, компанией |
| Только текст | Текст + фото + цитата + звезды |
| Без trust badges | SSL, GDPR, сертификаты |
## CV Service Validation
```bash
# Проверить social proof
curl -s -X POST http://localhost:8001/design/analyze-dom \
-H "Content-Type: application/json" \
-d '{"html": "..."}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
social = d['analyzers'].get('social_proof', {})
print(f\"Social Proof: {social.get('score', 'N/A')}/10\")
print(f\" Testimonials: {social.get('testimonials', 'N/A')}\")
print(f\" Logos: {social.get('client_logos', 'N/A')}\")
"
```
Ожидается: `social_proof` > 5 (должны быть отзывы/логотипы/цифры).
psychology/trust-signals.md
+115
View File
@@ -0,0 +1,115 @@
---
name: psychology/trust-signals
title: Trust Signals & Credibility Indicators
description: Badges, certifications, security indicators, social proof placement.
tags: [psychology, trust, credibility, badges, security, cialdini]
source: stripe.com, raycast.com, resend.com, baymard.com
---
# Trust Signals & Credibility Indicators
## Пирамида доверия
```
[Security Certifications] ← PCI DSS, GDPR, SOC 2
↓
[Brand Logos] ← Known clients, partners
↓
[Statistics] ← Numbers, users, uptime
↓
[Testimonials] ← Reviews, case studies
↓
[Guarantees] ← Money-back, free trial
```
## 1. Security Badges
```html
<div class="trust-badges">
<div class="badge">
<svg width="24" height="24">🔒</svg>
<span>SSL Encrypted</span>
</div>
<div class="badge">
<svg width="24" height="24">🛡️</svg>
<span>GDPR Compliant</span>
</div>
<div class="badge">
<svg width="24" height="24">✓</svg>
<span>SOC 2 Certified</span>
</div>
</div>
```
```css
.trust-badges {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
padding: 24px 0;
}
.badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
```
## 2. Uptime/Status
```html
<div class="status-bar">
<div class="status-indicator online">
<span class="dot"></span>
<span>99.9% uptime</span>
</div>
<div class="status-indicator">
<span>⚡ Fastest in Russia</span>
</div>
<div class="status-indicator">
<span>🌍 Moscow, SPb, Vladivostok</span>
</div>
</div>
```
```css
.status-bar {
display: flex;
gap: 24px;
justify-content: center;
padding: 16px 0;
font-size: 0.875rem;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
```
## 3. Guarantee Section
```html
<section class="guarantee">
<div class="guarantee-badge">🛡️</div>
<h3>30-день гарантия возврата</h3>
<p>Если вам не понравится — вернём деньги без вопросов.</p>
<div class="trust-logos">
<img src="/vis...[truncated]
psychology/visual-hierarchy.md
+275
View File
@@ -0,0 +1,275 @@
---
name: psychology/visual-hierarchy
title: Visual Hierarchy & Conversion Patterns
description: Principles of visual hierarchy, CTA placement, and cognitive design patterns for maximum conversion.
tags: [psychology, ux, conversion, hierarchy, accessibility]
source: cialdini.com, Nielsen Norman Group, stripe.com, linear.app
---
# Visual Hierarchy & Conversion Patterns
## Что это
Система визуальной иерархии, которая направляет взгляд пользователя к целевому действию (CTA). Комбинация психологии поведения и технических приёмов.
## 7 Принципов Визуальной Иерархии
### 1. Размер (Size)
Крупнее = важнее. H1 должен быть в 2–3x крупнее body text.
```css
/* ✅ Правильный масштаб */
h1 { font-size: clamp(2.5rem, 6vw, 4rem); } /* 40–64px */
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); } /* 29–40px */
h3 { font-size: var(--text-xl); } /* 20px */
p { font-size: var(--text-base); } /* 16px */
```
### 2. Контраст (Contrast)
Высококонтрастные элементы привлекают внимание. CTA — самый контрастный элемент на странице.
```css
/* ✅ CTA имеет максимальный контраст */
.btn-primary {
background: #6366f1;
color: #ffffff;
/* Контраст 4.5:1+ для WCAG AA */
}
/* ❌ Плохо — CTA сливается с фоном */
.btn-bad {
background: rgba(99, 102, 241, 0.2);
color: #888888;
}
```
### 3. Пространство (Whitespace)
Больше пустого пространства вокруг = больше внимания.
```css
.section {
padding: 128px 0; /* Премиум — много воздуха */
}
.card {
padding: 48px; /* Карточки с воздухом внутри */
}
```
### 4. Цвет (Color)
Используйте акцентный цвет ТОЛЬКО для CTA и ключевых элементов.
```css
/* Правило 60-30-10 */
/* 60% — нейтральный фон (тёмный) */
/* 30% — вторичный текст (серый) */
/* 10% — акцентный цвет (CTA, важные цифры) */
```
### 5. Расположение (Position)
- **F-pattern** для текстовых страниц
- **Z-pattern** для экранов с CTA
- **Above the fold** — ключевое сообщение + CTA
```
Z-PATTERN:
┌─────────────────────────────────┐
│ Logo [CTA Button] │ ← Начало взгляда
├─────────────────────────────────┤
│ │
│ Главный заголовок │
│ Подзаголовок │
│ │
│ [CTA] │ ← Конец взгляда
└─────────────────────────────────┘
```
### 6. Группа (Grouping / Gestalt)
Связанные элементы группируются вместе (близость). Разные группы разделяются пространством.
```html
<!-- ✅ Сгруппировано логически -->
<div class="card">
<h3>Feature 1</h3>
<p>Description</p>
<a href="#" class="link">Learn more</a>
</div>
<!-- ❌ Разбросано -->
<h3>Feature 1</h3>
<p>Description</p>
<div class="separate">
<a href="#">Learn more</a>
</div>
```
### 7. Последовательность (Sequence)
Информация подается в логическом порядке:
1. Проблема (боль)
2. Решение (наш продукт)
3. Доказательство (кейс, цифры)
4. Действие (CTA)
## CTA Placement Patterns
### Pattern 1: Hero CTA (первый экран)
```
[Логотип] [CTA]
[Заголовок]
[Подзаголовок]
[CTA] [CTA secondary]
```
```html
<header class="nav">
<div class="logo">Brand</div>
<a href="#signup" class="btn btn-primary">Get Started</a>
</header>
<section class="hero">
<h1>Главный заголовок</h1>
<p>Подзаголовок</p>
<a href="#signup" class="btn btn-primary">Начать →</a>
<a href="#demo" class="btn btn-secondary">Смотреть демо</a>
</section>
```
### Pattern 2: Contextual CTA (после секции)
```
[Секция с описанием проблемы]
[CTA "Решить проблему"]
```
### Pattern 3: Sticky CTA (всегда виден)
```css
.sticky-cta {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 100;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.sticky-cta.visible {
opacity: 1;
transform: translateY(0);
}
```
### Pattern 4: Exit Intent CTA
```javascript
let exitShown = false;
document.addEventListener('mouseleave', (e) => {
if (e.clientY < 0 && !exitShown) {
exitShown = true;
showExitPopup();
}
});
function showExitPopup() {
// Показать модальное окно с предложением
}
```
## Social Proof Placement
```
[Hero CTA]
↓
[Логотипы клиентов — 5–7 логотипов в ряд, монохром]
↓
[Секция "Цифры" — 3–4 больших числа]
↓
[Отзывы клиентов — карточки]
↓
[CTA]
```
```css
/* Логотипы клиентов — монохром */
.client-logos {
display: flex;
gap: 48px;
align-items: center;
opacity: 0.4;
filter: brightness(0) invert(1);
transition: opacity 0.3s;
}
.client-logos:hover {
opacity: 0.7;
}
/* Карточки отзывов */
.testimonial-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 32px;
}
```
## Hick's Law Application
**Чем больше вариантов, тем дольше принимается решение.**
```
❌ 5 кнопок в навигации + 3 CTA на экране = низкая конверсия
✅ 1 CTA на экран + 3–5 пунктов в навигации
```
```html
<!-- ✅ Один главный CTA -->
<section class="hero">
<h1>Главное сообщение</h1>
<a href="#signup" class="btn btn-primary btn-lg">
Начать бесплатно →
</a>
<p class="cta-subtext">Без кредитной карты</p>
</section>
```
## Fitts's Law Application
**Крупные элементы в доступных зонах = быстрее кликают.**
```css
.btn-primary {
min-width: 160px; /* Минимальная ширина */
min-height: 48px; /* Минимальная высота (палец) */
padding: 16px 32px; /* Щедрые отступы */
font-size: 1rem;
font-weight: 600;
}
```
## Anti-patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| 3 CTA на экране | 1 главный CTA + 1 вторичный |
| CTA сливается с фоном | CTA — самый контрастный элемент |
| Текст 12px | Минимум 16px для body |
| Без whitespace | 128px между секциями |
| Сложная навигация | 3–5 пунктов |
| Без визуальных направляющих | Стрелки, взгляды, линии к CTA |
## CV Service Validation
```bash
# Проверить визуальную иерархию
curl -s -X POST http://localhost:8001/design/analyze \
-H "Content-Type: application/json" \
-d '{"image_base64": "...", "full_analysis": false}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
vh = d['dimensions'].get('visual_hierarchy', {})
print(f\"Visual Hierarchy: {vh.get('score', 'N/A')}/10\")
print(f\" Focal points: {vh.get('focal_points', 'N/A')}\")
print(f\" Eye flow: {vh.get('eye_flow', 'N/A')}\")
"
```
Ожидается: `visual_hierarchy` > 7.
Loaded 100 of 112 files, more files were not shown because too many files have changed in this diff. Show more