Дизайн-система, вдохновлённая 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" для табличных чисел в конкретных подписях.

Иерархия

Принципы

• Сжатие как идентичность: 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. Глубина и уровни высоты

Философия теней: 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. Адаптивное поведение

Контрольные точки

Области касания

• Кнопки с комфортными вертикальными отступами (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 для всего остального