admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
314 lines
33 KiB
Markdown
314 lines
33 KiB
Markdown
# Дизайн-система, вдохновлённая Vercel
|
||
|
||
> Category: Инструменты разработчика
|
||
> Деплой фронтенда. Точность в чёрно-белых тонах, шрифт Geist.
|
||
|
||
## 1. Визуальная тема и атмосфера
|
||
|
||
Сайт Vercel — это визуальный манифест инфраструктуры разработчика, сделанной невидимой: дизайн-система настолько сдержанная, что граничит с философией. Страница подавляюще белая (`#ffffff`) с почти чёрным (`#171717`) текстом, создавая галерейную пустоту, в которой каждый элемент заработал своё место на экране. Это не минимализм как украшение — это минимализм как инженерный принцип. Дизайн-система Geist обращается с интерфейсом так, как компилятор обращается с кодом: каждый лишний токен убирается до тех пор, пока не останется только структура.
|
||
|
||
Семейство шрифтов Geist — главная ценность системы. Geist Sans использует агрессивный отрицательный кернинг (от -2,4px до -2,88px на дисплейных размерах), создавая заголовки, которые ощущаются сжатыми, срочными и инженерными — как код, минифицированный для продакшена. На размерах для основного текста трекинг расслабляется, но геометрическая точность сохраняется. Geist Mono дополняет систему как моноширинный компаньон для кода, вывода терминала и технических меток. Оба шрифта включают лигатуры OpenType `"liga"` глобально, добавляя уровень типографической изощрённости, которую замечаешь при внимательном чтении.
|
||
|
||
Что отличает Vercel от других монохромных дизайн-систем — это философия «тени вместо рамки». Вместо традиционных CSS-рамок Vercel использует `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` — тень с нулевым смещением, нулевым размытием и распространением в 1px, создающую линию, похожую на рамку, без последствий для блочной модели. Эта техника позволяет рамкам существовать на уровне теней, обеспечивая более плавные переходы, скруглённые углы без обрезки и более деликатный визуальный вес по сравнению с традиционными рамками. Вся система глубины построена на многослойных стеках теней, где каждый слой служит конкретной цели: один для рамки, один для мягкого подъёма, один для фонового рассеивания.
|
||
|
||
**Ключевые характеристики:**
|
||
- Geist Sans с агрессивным отрицательным кернингом (от -2,4px до -2,88px на дисплейных размерах) — текст как сжатая инфраструктура
|
||
- Geist Mono для кода и технических меток с `"liga"` OpenType глобально
|
||
- Техника «тень вместо рамки»: `box-shadow 0px 0px 0px 1px` заменяет традиционные рамки повсеместно
|
||
- Многослойные стеки теней для нюансированной глубины (рамка + подъём + фоновое рассеивание в одном объявлении)
|
||
- Почти чисто белый холст с текстом `#171717` — не совсем чёрный, создающий микро-мягкость контраста
|
||
- Акцентные цвета для рабочего процесса: Ship Red (`#ff5b4f`), Preview Pink (`#de1d8d`), Develop Blue (`#0a72ef`)
|
||
- Система фокусировочных колец с `hsla(212, 100%, 48%, 1)` — насыщенный синий для доступности
|
||
- Значки-таблетки (9999px) с тонированным фоном для индикаторов статуса
|
||
|
||
## 2. Цветовая палитра и роли
|
||
|
||
### Основные
|
||
- **Vercel Black** (`#171717`): Основной текст, заголовки, тёмный фон поверхностей. Не чистый чёрный — лёгкая теплота предотвращает резкость.
|
||
- **Pure White** (`#ffffff`): Фон страниц, поверхности карточек, текст кнопок на тёмном фоне.
|
||
- **True Black** (`#000000`): Вспомогательное использование, `--geist-console-text-color-default`, применяется в конкретных контекстах консоли/кода.
|
||
|
||
### Акцентные цвета рабочего процесса
|
||
- **Ship Red** (`#ff5b4f`): `--ship-text`, этап рабочего процесса «деплой в продакшен» — тёплый, срочный коралловый красный.
|
||
- **Preview Pink** (`#de1d8d`): `--preview-text`, рабочий процесс предварительного просмотра деплоя — яркий пурпурно-розовый.
|
||
- **Develop Blue** (`#0a72ef`): `--develop-text`, рабочий процесс разработки — яркий, насыщенный синий.
|
||
|
||
### Цвета консоли / кода
|
||
- **Console Blue** (`#0070f3`): `--geist-console-text-color-blue`, синий для синтаксического подсвечивания.
|
||
- **Console Purple** (`#7928ca`): `--geist-console-text-color-purple`, фиолетовый для синтаксического подсвечивания.
|
||
- **Console Pink** (`#eb367f`): `--geist-console-text-color-pink`, розовый для синтаксического подсвечивания.
|
||
|
||
### Интерактивные
|
||
- **Link Blue** (`#0072f5`): Основной цвет ссылок с декорированием подчёркиванием.
|
||
- **Focus Blue** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`, фокусировочное кольцо на интерактивных элементах.
|
||
- **Ring Blue** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`, утилита кольца Tailwind.
|
||
|
||
### Нейтральная шкала
|
||
- **Gray 900** (`#171717`): Основной текст, заголовки, текст навигации.
|
||
- **Gray 600** (`#4d4d4d`): Вспомогательный текст, описательный контент.
|
||
- **Gray 500** (`#666666`): Третичный текст, приглушённые ссылки.
|
||
- **Gray 400** (`#808080`): Текст-заполнитель, отключённые состояния.
|
||
- **Gray 100** (`#ebebeb`): Рамки, контуры карточек, разделители.
|
||
- **Gray 50** (`#fafafa`): Тонкий оттенок поверхности, подсветка внутренней тени.
|
||
|
||
### Поверхности и наложения
|
||
- **Overlay Backdrop** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`, фон модальных окон/диалогов.
|
||
- **Selection Text** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`, подсветка выделенного текста.
|
||
- **Badge Blue Bg** (`#ebf5ff`): Фон значка-таблетки, тонированная синяя поверхность.
|
||
- **Badge Blue Text** (`#0068d6`): Текст значка-таблетки, более тёмный синий для читаемости.
|
||
|
||
### Тени и глубина
|
||
- **Border Shadow** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): Фирменный приём — заменяет традиционные рамки.
|
||
- **Subtle Elevation** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): Минимальный подъём для карточек.
|
||
- **Card Stack** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): Полная многослойная тень карточки.
|
||
- **Ring Border** (`rgb(235, 235, 235) 0px 0px 0px 1px`): Светло-серая кольцевая рамка для вкладок и изображений.
|
||
|
||
## 3. Правила типографики
|
||
|
||
### Семейство шрифтов
|
||
- **Основной**: `Geist`, с запасными вариантами: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
|
||
- **Моноширинный**: `Geist Mono`, с запасными вариантами: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
|
||
- **Возможности OpenType**: `"liga"` включены глобально для всего текста Geist; `"tnum"` для табличных чисел в конкретных подписях.
|
||
|
||
### Иерархия
|
||
|
||
| Роль | Шрифт | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (тесно) | -2.4px до -2.88px | Максимальное сжатие, эффект билборда |
|
||
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (тесно) | -2.4px | Заголовки разделов функций |
|
||
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (тесно) | -1.28px | Заголовки карточек, подразделы |
|
||
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | Более лёгкие подзаголовки |
|
||
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | Карточки функций |
|
||
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | Вторичные заголовки карточек |
|
||
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (расслабленно) | normal | Вводные тексты, описания функций |
|
||
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | Стандартный читаемый текст |
|
||
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | Стандартный текст интерфейса |
|
||
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | Навигация, выделенный текст |
|
||
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | Строгие метки, активные состояния |
|
||
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | Кнопки, ссылки, подписи |
|
||
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (тесно) | normal | Компактные кнопки |
|
||
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | Метаданные, теги |
|
||
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | Блоки кода |
|
||
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | Метки кода |
|
||
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (тесно) | normal | `text-transform: uppercase`, технические метки |
|
||
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (тесно) | normal | `text-transform: uppercase`, миниатюрные значки |
|
||
|
||
### Принципы
|
||
- **Сжатие как идентичность**: Geist Sans на дисплейных размерах использует межбуквенный интервал от -2,4px до -2,88px — самый агрессивный отрицательный трекинг среди всех крупных дизайн-систем. Это создаёт текст, который ощущается _минифицированным_, как код, оптимизированный для продакшена. Трекинг постепенно расслабляется по мере уменьшения размера: -1,28px при 32px, -0,96px при 24px, -0,32px при 16px, и normal при 14px.
|
||
- **Лигатуры везде**: Каждый текстовый элемент Geist включает OpenType `"liga"`. Лигатуры — это не украшение, а структура, создающая более плотные и эффективные сочетания глифов.
|
||
- **Три насыщенности, строгие роли**: 400 (основной текст/чтение), 500 (интерфейс/интерактив), 600 (заголовки/акцент). Никакого жирного (700), кроме миниатюрных микро-значков. Этот узкий диапазон насыщенностей создаёт иерархию через размер и трекинг, а не через вес.
|
||
- **Моно для идентичности**: Geist Mono в верхнем регистре с `"tnum"` или `"liga"` служит «голосом консоли разработчика» — компактные технические метки, связывающие маркетинговый сайт с продуктом.
|
||
|
||
## 4. Стили компонентов
|
||
|
||
### Кнопки
|
||
|
||
**Основная белая (с рамкой-тенью)**
|
||
- Фон: `#ffffff`
|
||
- Текст: `#171717`
|
||
- Отступы: 0px 6px (минимальные — ширина определяется контентом)
|
||
- Радиус: 6px (слегка скруглённый)
|
||
- Тень: `rgb(235, 235, 235) 0px 0px 0px 1px` (кольцевая рамка)
|
||
- Наведение: фон переходит к `var(--ds-gray-1000)` (тёмный)
|
||
- Фокус: контур `2px solid var(--ds-focus-color)` + тень `var(--ds-focus-ring)`
|
||
- Использование: стандартная вторичная кнопка
|
||
|
||
**Основная тёмная (на основе системы Geist)**
|
||
- Фон: `#171717`
|
||
- Текст: `#ffffff`
|
||
- Отступы: 8px 16px
|
||
- Радиус: 6px
|
||
- Использование: основной призыв к действию («Start Deploying», «Get Started»)
|
||
|
||
**Кнопка-таблетка / Значок**
|
||
- Фон: `#ebf5ff` (тонированный синий)
|
||
- Текст: `#0068d6`
|
||
- Отступы: 0px 10px
|
||
- Радиус: 9999px (полная таблетка)
|
||
- Шрифт: 12px, насыщенность 500
|
||
- Использование: значки статуса, теги, метки функций
|
||
|
||
**Большая таблетка (навигационная)**
|
||
- Фон: прозрачный или `#171717`
|
||
- Радиус: 64px–100px
|
||
- Использование: навигация по вкладкам, селекторы разделов
|
||
|
||
### Карточки и контейнеры
|
||
- Фон: `#ffffff`
|
||
- Рамка: через тень — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
|
||
- Радиус: 8px (стандартный), 12px (для выделенных/карточек с изображением)
|
||
- Стек теней: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
|
||
- Карточки с изображением: `1px solid #ebebeb` с радиусом 12px у верхних углов
|
||
- Наведение: тонкое усиление тени
|
||
|
||
### Поля ввода и формы
|
||
- Радиокнопка: стандартный стиль с фоком `var(--ds-gray-200)` при фокусе
|
||
- Тень при фокусе: `1px 0 0 0 var(--ds-gray-alpha-600)`
|
||
- Контур при фокусе: `2px solid var(--ds-focus-color)` — единообразное синее фокусировочное кольцо
|
||
- Рамка: через технику тени, а не традиционную рамку
|
||
|
||
### Навигация
|
||
- Чистая горизонтальная навигация на белом, зафиксированная
|
||
- Логотип Vercel выровнен по левому краю, 262x52px
|
||
- Ссылки: Geist 14px насыщенность 500, текст `#171717`
|
||
- Активная: насыщенность 600 или подчёркивание
|
||
- Призыв к действию: тёмные кнопки-таблетки («Start Deploying», «Contact Sales»)
|
||
- Мобильная: сворачивание в гамбургер-меню
|
||
- Выпадающие меню продуктов с многоуровневыми подменю
|
||
|
||
### Обработка изображений
|
||
- Скриншоты продукта с рамкой `1px solid #ebebeb`
|
||
- Изображения со скруглением сверху: радиус `12px 12px 0px 0px`
|
||
- Скриншоты дашборда/предпросмотра кода доминируют в разделах функций
|
||
- Мягкие градиентные фоны за героями изображений (пастельные мультицветные)
|
||
|
||
### Отличительные компоненты
|
||
|
||
**Конвейер рабочего процесса**
|
||
- Трёхэтапный горизонтальный конвейер: Develop → Preview → Ship
|
||
- Каждый этап имеет свой акцентный цвет: синий → розовый → красный
|
||
- Соединены линиями/стрелками
|
||
- Визуальная метафора ключевого ценностного предложения Vercel
|
||
|
||
**Панель доверия / Сетка логотипов**
|
||
- Логотипы компаний (Perplexity, ChatGPT, Cursor и др.) в оттенках серого
|
||
- Горизонтальная прокрутка или сетка
|
||
- Тонкое разделение рамкой `#ebebeb`
|
||
|
||
**Карточки с метриками**
|
||
- Отображение крупного числа (например, «10x faster»)
|
||
- Geist 48px насыщенность 600 для метрики
|
||
- Описание ниже серым текстом основного содержания
|
||
- Контейнер карточки с рамкой-тенью
|
||
|
||
## 5. Принципы компоновки
|
||
|
||
### Система отступов
|
||
- Базовая единица: 8px
|
||
- Шкала: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
|
||
- Заметный скачок: от 16px к 32px — в основной шкале нет 20px или 24px
|
||
|
||
### Сетка и контейнер
|
||
- Максимальная ширина контента: около 1200px
|
||
- Герой: центрированная одноколоночная с щедрым верхним отступом
|
||
- Разделы функций: сетки из 2–3 колонок для карточек
|
||
- Полноширинные разделители с `border-bottom: 1px solid #171717`
|
||
- Скриншоты кода/дашборда в полную ширину или с рамкой
|
||
|
||
### Философия пустого пространства
|
||
- **Галерейная пустота**: огромные вертикальные отступы между разделами (80px–120px+). Белое пространство — ЭТО и есть дизайн: оно транслирует, что Vercel ничего не доказывает и ничего не скрывает.
|
||
- **Сжатый текст, расширенное пространство**: агрессивный отрицательный межбуквенный интервал в заголовках уравновешивается щедрым окружающим пространством. Текст плотный; пространство вокруг него — обширное.
|
||
- **Ритм разделов**: белые секции чередуются с белыми — нет цветовых вариаций между разделами. Разделение достигается исключительно рамками (тень-рамки) и отступами.
|
||
|
||
### Шкала радиусов скругления
|
||
- Микро (2px): строчные фрагменты кода, малые элементы span
|
||
- Тонкий (4px): небольшие контейнеры
|
||
- Стандартный (6px): кнопки, ссылки, функциональные элементы
|
||
- Комфортный (8px): карточки, элементы списка
|
||
- Изображение (12px): выделенные карточки, контейнеры изображений (скруглены сверху)
|
||
- Большой (64px): таблетки навигации по вкладкам
|
||
- XL (100px): крупные навигационные ссылки
|
||
- Полная таблетка (9999px): значки, статусные таблетки, теги
|
||
- Круг (50%): переключатель меню, аватарные контейнеры
|
||
|
||
## 6. Глубина и уровни высоты
|
||
|
||
| Уровень | Обработка | Использование |
|
||
|-------|-----------|-----|
|
||
| Плоский (уровень 0) | Без тени | Фон страницы, текстовые блоки |
|
||
| Кольцо (уровень 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | Тень-рамка для большинства элементов |
|
||
| Светлое кольцо (уровень 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | Более светлое кольцо для вкладок, изображений |
|
||
| Лёгкая карточка (уровень 2) | Кольцо + `rgba(0,0,0,0.04) 0px 2px 2px` | Стандартные карточки с минимальным подъёмом |
|
||
| Полная карточка (уровень 3) | Кольцо + Лёгкая + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + внутреннее кольцо `#fafafa` | Выделенные карточки, выделенные панели |
|
||
| Фокус (доступность) | Контур `2px solid hsla(212, 100%, 48%, 1)` | Клавиатурный фокус на всех интерактивных элементах |
|
||
|
||
**Философия теней**: Vercel можно с уверенностью назвать обладателем самой изощрённой системы теней в современном веб-дизайне. Вместо традиционного использования теней для высоты в духе Material Design, Vercel применяет многозначные стеки теней, где каждый слой несёт особую архитектурную функцию: один создаёт «рамку» (распространение 0px, 1px), другой добавляет фоновую мягкость (размытие 2px), третий управляет глубиной на расстоянии (размытие 8px с отрицательным распространением), а внутреннее кольцо (`#fafafa`) создаёт тонкую подсветку, от которой карточка «светится» изнутри. Этот многослойный подход делает карточки сложенными, а не парящими.
|
||
|
||
### Декоративная глубина
|
||
- Градиент героя: мягкая пастельная мультицветная градиентная завеса за контентом героя (едва заметная, атмосферная)
|
||
- Рамки разделов: `1px solid #171717` (полная тёмная линия) между основными секциями
|
||
- Никакого изменения цвета фона — глубина достигается исключительно за счёт многослойных теней и контраста рамок
|
||
|
||
## 7. Что делать и чего избегать
|
||
|
||
### Делать
|
||
- Использовать Geist Sans с агрессивным отрицательным межбуквенным интервалом на дисплейных размерах (от -2,4px до -2,88px при 48px)
|
||
- Использовать тень-рамку (`0px 0px 0px 1px rgba(0,0,0,0.08)`) вместо традиционных CSS-рамок
|
||
- Включать `"liga"` для всего текста Geist — лигатуры структурные, а не опциональные
|
||
- Использовать систему трёх насыщенностей: 400 (основной текст), 500 (интерфейс), 600 (заголовки)
|
||
- Применять акцентные цвета рабочего процесса (красный/розовый/синий) только в контексте рабочего процесса
|
||
- Использовать многослойные стеки теней для карточек (рамка + подъём + фоновое рассеивание + внутренняя подсветка)
|
||
- Сохранять ахроматическую цветовую палитру — серые от `#171717` до `#ffffff` составляют систему
|
||
- Использовать `#171717` вместо `#000000` для основного текста — микро-теплота имеет значение
|
||
|
||
### Не делать
|
||
- Не использовать положительный межбуквенный интервал для Geist Sans — он всегда отрицательный или нулевой
|
||
- Не использовать насыщенность 700 (жирный) для основного текста — 600 максимум, только для заголовков
|
||
- Не использовать традиционный CSS `border` на карточках — применяйте технику тени-рамки
|
||
- Не вводить тёплые цвета (оранжевые, жёлтые, зелёные) в UI-хром
|
||
- Не применять акцентные цвета рабочего процесса (Ship Red, Preview Pink, Develop Blue) декоративно
|
||
- Не использовать тяжёлые тени (прозрачность > 0,1) — система теней работает на уровне шёпота
|
||
- Не увеличивать межбуквенный интервал основного текста — Geist создан для плотного набора
|
||
- Не использовать радиус таблетки (9999px) на кнопках основного действия — таблетки только для значков/тегов
|
||
- Не пропускать внутреннее кольцо `#fafafa` в тенях карточек — именно оно создаёт свечение, делающее систему работающей
|
||
|
||
## 8. Адаптивное поведение
|
||
|
||
### Контрольные точки
|
||
| Название | Ширина | Ключевые изменения |
|
||
|------|-------|-------------|
|
||
| Mobile Small | <400px | Плотная одна колонка, минимальные отступы |
|
||
| Mobile | 400–600px | Стандартный мобильный, стекированная компоновка |
|
||
| Tablet Small | 600–768px | Начинаются двухколоночные сетки |
|
||
| Tablet | 768–1024px | Полные карточные сетки, расширенные отступы |
|
||
| Desktop Small | 1024–1200px | Стандартная десктопная компоновка |
|
||
| Desktop | 1200–1400px | Полная компоновка, максимальная ширина контента |
|
||
| Large Desktop | >1400px | Центрирование, щедрые поля |
|
||
|
||
### Области касания
|
||
- Кнопки с комфортными вертикальными отступами (8px–16px)
|
||
- Навигационные ссылки 14px с достаточным расстоянием
|
||
- У значков-таблеток 10px горизонтальный отступ для зоны касания
|
||
- Переключатель мобильного меню — круглая кнопка с радиусом 50%
|
||
|
||
### Стратегия сворачивания
|
||
- Герой: дисплейный 48px → уменьшается, сохраняя отрицательный трекинг пропорционально
|
||
- Навигация: горизонтальные ссылки + призывы к действию → гамбургер-меню
|
||
- Карточки функций: 3 колонки → 2 колонки → одна колонка стекированием
|
||
- Скриншоты кода: сохраняют соотношение сторон, возможна горизонтальная прокрутка
|
||
- Логотипы панели доверия: сетка → горизонтальная прокрутка
|
||
- Подвал: многоколоночный → стекированный в одну колонку
|
||
- Отступы разделов: 80px+ → 48px на мобильных
|
||
|
||
### Поведение изображений
|
||
- Скриншоты дашборда сохраняют рамочное оформление на всех размерах
|
||
- Градиент героя смягчается/упрощается на мобильных
|
||
- Скриншоты продукта используют адаптивные изображения с единым радиусом скругления
|
||
- Полноширинные разделы сохраняют обработку от края до края
|
||
|
||
## 9. Руководство по агентным подсказкам
|
||
|
||
### Краткий справочник цветов
|
||
- Основной призыв к действию: Vercel Black (`#171717`)
|
||
- Фон: Pure White (`#ffffff`)
|
||
- Текст заголовков: Vercel Black (`#171717`)
|
||
- Текст основного содержания: Gray 600 (`#4d4d4d`)
|
||
- Рамка (тень): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
|
||
- Ссылка: Link Blue (`#0072f5`)
|
||
- Фокусировочное кольцо: Focus Blue (`hsla(212, 100%, 48%, 1)`)
|
||
|
||
### Примеры подсказок для компонентов
|
||
- «Создай секцию-герой на белом фоне. Заголовок 48px Geist насыщенность 600, line-height 1.00, letter-spacing -2.4px, цвет #171717. Подзаголовок 20px Geist насыщенность 400, line-height 1.80, цвет #4d4d4d. Тёмная кнопка призыва к действию (#171717, радиус 6px, отступы 8px 16px) и призрачная кнопка (белая, тень-рамка rgba(0,0,0,0.08) 0px 0px 0px 1px, радиус 6px).»
|
||
- «Оформи карточку: белый фон, без CSS-рамки. Используй стек теней: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Радиус 8px. Заголовок 24px Geist насыщенность 600, letter-spacing -0.96px. Основной текст 16px насыщенность 400, #4d4d4d.»
|
||
- «Создай значок-таблетку: фон #ebf5ff, текст #0068d6, радиус 9999px, отступы 0px 10px, 12px Geist насыщенность 500.»
|
||
- «Создай навигацию: белый зафиксированный заголовок. Geist 14px насыщенность 500 для ссылок, текст #171717. Тёмная таблетка-призыв "Start Deploying" выровнена вправо. Тень-рамка снизу: rgba(0,0,0,0.08) 0px 0px 0px 1px.»
|
||
- «Оформи раздел рабочего процесса с тремя шагами: Develop (цвет текста #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Каждый шаг: метка 14px Geist Mono в верхнем регистре + заголовок 24px Geist насыщенность 600 + описание 16px насыщенность 400 цветом #4d4d4d.»
|
||
|
||
### Руководство по итерации
|
||
1. Всегда используй тень-рамку вместо CSS border — `0px 0px 0px 1px rgba(0,0,0,0.08)` является основой
|
||
2. Межбуквенный интервал масштабируется с размером шрифта: -2,4px при 48px, -1,28px при 32px, -0,96px при 24px, normal при 14px
|
||
3. Только три насыщенности: 400 (читать), 500 (взаимодействовать), 600 (объявлять)
|
||
4. Цвет функционален, никогда декоративен — цвета рабочего процесса (красный/розовый/синий) обозначают только этапы конвейера
|
||
5. Внутреннее кольцо `#fafafa` в тенях карточек — именно оно создаёт тонкое внутреннее свечение карточек Vercel
|
||
6. Geist Mono в верхнем регистре для технических меток, Geist Sans для всего остального
|