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

- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
2026-06-21 20:40:35 +05:00
1 parent e3738f2b3e
commit 76c4c5b4fe
@@ -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 между секциями |
@@ -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 (должны быть отзывы/логотипы/цифры).
@@ -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]
@@ -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.