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,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)
@@ -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`
@@ -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 для информативных дашбордов
+- кастомизировать цвета под российский рынок (не ярко-красный, а приглушённый)
+- анимации умеренно — для РФ важнее скорость загрузки (медленный интернет в регионах)
@@ -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**: стиль под цель — для лендинга больше пространства, для магазина — плотнее
@@ -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 до завершения оплаты
@@ -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
+Скучная, но последовательная система победит умную, но хаотичную.
@@ -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
@@ -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
@@ -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)
@@ -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
@@ -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
@@ -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
@@ -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)` | Глитч | Резкие кадры |
@@ -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 системы используют одинаковую структуру токенов — легко переключать.
@@ -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. Это наш разрыв.
@@ -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
@@ -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
+> Если люди замечают анимацию больше, чем ваш оффер — что-то не так.
@@ -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` |
@@ -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 пунктами
@@ -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
+- Если пользователь замечает анимацию больше смысла → плохо
@@ -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)
@@ -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
@@ -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 может отличаться от визуального.
@@ -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 |
+| Персонализация | Базовая | Контент под регион + сегмент |
@@ -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% конкурентов
@@ -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 выглядит странно
+- **Долгая загрузка** — РФ-пользователь уходит быстрее западного
@@ -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 |
@@ -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
+- Продуманная форма контакта
+- Кастомные иконки
+- Чистая типографика
+- Отсутствие ошибок
@@ -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`
@@ -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** — продуманные детали формируют доверие
@@ -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. Изображение/видео — визуальная поддержка
@@ -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) |
@@ -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
@@ -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 через цветовые тона
+
+## Китайский подход
+- Красный (удача), золотой (богатство), яркие градиенты
+- Плотная палитра — больше цветов на странице
@@ -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 на странице
+- Корпоративный жаргон вместо ясности
+- Спрятанные цены
+- Анимации ради анимации
+- Проектирование "для себя", а не для клиента
@@ -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 с карточками, фильтры сбоку
@@ -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
@@ -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 (Взаимность)
+Бесплатный гайд, чеклист, консультация → пользователь чувствует обязанность ответить.
@@ -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