workbuddy_skills/open-design/design-systems/vercel/DESIGN-uk.md

Design System Inspired by Vercel

Category: Інструменти розробника Розгортання фронтенду. Чорно-біла точність, шрифт Geist.

1. Visual Theme & Atmosphere

Сайт 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, що створює лінію, схожу на межу, без наслідків для блокової моделі. Ця техніка дозволяє межам існувати у шарі тіні, забезпечуючи плавніші переходи, закруглені кути без обрізання і менш виражену візуальну вагу порівняно з традиційними межами. Вся система глибини побудована на шарових, багатозначних стеках тіней, де кожен шар виконує конкретну функцію: один для межі, один для м'якого підйому, один для навколишньої глибини.

Key Characteristics:

• Geist Sans з екстремальним від'ємним міжлітерним інтервалом (від -2.4px до -2.88px на великих розмірах) — текст як стисла інфраструктура
• Geist Mono для коду та технічних міток з OpenType "liga" глобально
• Техніка тіні-як-межі: box-shadow 0px 0px 0px 1px замінює традиційні межі скрізь
• Багатошарові стеки тіней для нюансованої глибини (межа + підйом + навколишнє в одному оголошенні)
• Майже чисто біле полотно з текстом #171717 — не зовсім чорний, що створює м'який мікроконтраст
• Акцентні кольори для робочих процесів: Ship Red (#ff5b4f), Preview Pink (#de1d8d), Develop Blue (#0a72ef)
• Система кільця фокуса з використанням hsla(212, 100%, 48%, 1) — насичений синій для доступності
• Бейджі-пігулки (9999px) з тонованим фоном для індикаторів статусу

2. Color Palette & Roles

Primary

• Vercel Black (#171717): Основний текст, заголовки, темне фонове покриття. Не чистий чорний — легка теплота запобігає різкості.
• Pure White (#ffffff): Фон сторінки, поверхні карток, текст кнопок на темному.
• True Black (#000000): Вторинне застосування, --geist-console-text-color-default, використовується в конкретних контекстах консолі/коду.

Workflow Accent Colors

• Ship Red (#ff5b4f): --ship-text, крок робочого процесу "відправити до продакшену" — теплий, нагальний коралово-червоний.
• Preview Pink (#de1d8d): --preview-text, робочий процес розгортання для попереднього перегляду — яскравий пурпурово-рожевий.
• Develop Blue (#0a72ef): --develop-text, робочий процес розробки — яскравий, зосереджений синій.

Console / Code Colors

• Console Blue (#0070f3): --geist-console-text-color-blue, синій для підсвічування синтаксису.
• Console Purple (#7928ca): --geist-console-text-color-purple, фіолетовий для підсвічування синтаксису.
• Console Pink (#eb367f): --geist-console-text-color-pink, рожевий для підсвічування синтаксису.

Interactive

• 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.

Neutral Scale

• Gray 900 (#171717): Основний текст, заголовки, текст навігації.
• Gray 600 (#4d4d4d): Вторинний текст, описовий текст.
• Gray 500 (#666666): Третинний текст, приглушені посилання.
• Gray 400 (#808080): Текст-заповнювач, відключені стани.
• Gray 100 (#ebebeb): Межі, контури карток, розділювачі.
• Gray 50 (#fafafa): Тонкий відтінок поверхні, підсвітка внутрішньої тіні.

Surface & Overlay

• 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): Текст бейджу-пігулки, темніший синій для читабельності.

Shadows & Depth

• 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. Typography Rules

Font Family

• Primary: Geist, з запасними варіантами: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Monospace: Geist Mono, з запасними варіантами: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• OpenType Features: "liga" увімкнено глобально для всього тексту Geist; "tnum" для табличних чисел у конкретних підписах.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Hero	Geist	48px (3.00rem)	600	1.00–1.17 (tight)	-2.4px to -2.88px	Максимальне стиснення, білбордний вплив
Section Heading	Geist	40px (2.50rem)	600	1.20 (tight)	-2.4px	Заголовки розділів функцій
Sub-heading Large	Geist	32px (2.00rem)	600	1.25 (tight)	-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 (relaxed)	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 (tight)	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 (tight)	normal	text-transform: uppercase, технічні мітки
Micro Badge	Geist	7px (0.44rem)	700	1.00 (tight)	normal	text-transform: uppercase, крихітні бейджі

Principles

• Стиснення як ідентичність: Geist Sans на великих розмірах використовує міжлітерний інтервал від -2.4px до -2.88px — найагресивніший від'ємний трекінг серед усіх великих дизайн-систем. Це створює текст, що відчувається мінімізованим, наче код, оптимізований для продакшену. Трекінг поступово послаблюється зі зменшенням розміру: -1.28px при 32px, -0.96px при 24px, -0.32px при 16px та нормальний при 14px.
• Лігатури скрізь: Кожен текстовий елемент Geist вмикає OpenType "liga". Лігатури — не декоративні, а структурні: вони створюють щільніші, ефективніші комбінації гліфів.
• Три насиченості, чіткі ролі: 400 (основний/читальний), 500 (інтерфейс/інтерактивний), 600 (заголовки/акцент). Жирного (700) немає, окрім крихітних мікробейджів. Цей вузький діапазон насиченостей створює ієрархію через розмір і трекінг, а не через насиченість.
• Mono для ідентичності: Geist Mono у верхньому регістрі з "tnum" або "liga" слугує "голосом консолі розробника" — компактні технічні мітки, що пов'язують маркетинговий сайт з продуктом.

4. Component Stylings

Buttons

Primary White (Shadow-bordered)

• Background: #ffffff
• Text: #171717
• Padding: 0px 6px (мінімальний — ширина визначається вмістом)
• Radius: 6px (злегка закруглений)
• Shadow: rgb(235, 235, 235) 0px 0px 0px 1px (кільцева межа)
• Hover: фон змінюється на var(--ds-gray-1000) (темний)
• Focus: обведення 2px solid var(--ds-focus-color) + тінь var(--ds-focus-ring)
• Use: Стандартна вторинна кнопка

Primary Dark (Inferred from Geist system)

• Background: #171717
• Text: #ffffff
• Padding: 8px 16px
• Radius: 6px
• Use: Основний заклик до дії ("Start Deploying", "Get Started")

Pill Button / Badge

• Background: #ebf5ff (тонований синій)
• Text: #0068d6
• Padding: 0px 10px
• Radius: 9999px (повна пігулка)
• Font: 12px насиченість 500
• Use: Бейджі статусу, теги, мітки функцій

Large Pill (Navigation)

• Background: прозорий або #171717
• Radius: 64px–100px
• Use: Навігація вкладками, селектори розділів

Cards & Containers

• Background: #ffffff
• Border: через тінь — rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Radius: 8px (стандартний), 12px (для виділених/зображальних карток)
• Shadow stack: 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
• Hover: тонке посилення тіні

Inputs & Forms

• Radio: стандартне оформлення з фокусним фоном var(--ds-gray-200)
• Focus shadow: 1px 0 0 0 var(--ds-gray-alpha-600)
• Focus outline: 2px solid var(--ds-focus-color) — незмінне синє кільце фокуса
• Border: через техніку тіні, а не традиційну межу

Navigation

• Чиста горизонтальна навігація на білому тлі, прилипаюча
• Логотип Vercel вирівняний ліворуч, 262x52px
• Посилання: Geist 14px насиченість 500, текст #171717
• Активний стан: насиченість 600 або підкреслення
• CTA: темні кнопки-пігулки ("Start Deploying", "Contact Sales")
• Мобільний: згортання в меню-гамбургер
• Випадаючі меню продукту з багаторівневими меню

Image Treatment

• Скріншоти продукту з межею 1px solid #ebebeb
• Зображення із закругленим верхом: радіус 12px 12px 0px 0px
• Скріншоти панелі керування/коду домінують у розділах функцій
• М'які градієнтні фони за зображеннями-героями (пастельний багатоколірний)

Distinctive Components

Workflow Pipeline

• Горизонтальний конвеєр з трьох кроків: Develop → Preview → Ship
• Кожен крок має власний акцентний колір: синій → рожевий → червоний
• З'єднані лініями/стрілками
• Візуальна метафора основної ціннісної пропозиції Vercel

Trust Bar / Logo Grid

• Логотипи компаній (Perplexity, ChatGPT, Cursor тощо) у відтінках сірого
• Горизонтальна прокрутка або сіткова розкладка
• Тонке розділення межею #ebebeb

Metric Cards

• Відображення великого числа (наприклад, "10x faster")
• Geist 48px насиченість 600 для показника
• Опис нижче сірим основним текстом
• Контейнер картки з межею-тінню

5. Layout Principles

Spacing System

• Базова одиниця: 8px
• Шкала: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
• Примітний стрибок: від 16px до 32px — у первинній шкалі немає 20px або 24px

Grid & Container

• Максимальна ширина вмісту: приблизно 1200px
• Герой: центрований одноколонний з великим верхнім відступом
• Розділи функцій: сітки з 2–3 колонок для карток
• Розділювачі на всю ширину з використанням border-bottom: 1px solid #171717
• Скріншоти коду/панелі керування на повну ширину або в контейнері з межею

Whitespace Philosophy

• Галерейна порожнеча: Масивне вертикальне відступання між розділами (80px–120px+). Білий простір І Є дизайном — він говорить, що Vercel нічого не потрібно доводити і нічого приховувати.
• Стислий текст, розширений простір: Агресивний від'ємний міжлітерний інтервал у заголовках урівноважується щедрим оточуючим простором. Текст щільний; простір навколо нього — величезний.
• Ритм розділів: Білі розділи чергуються з білими розділами — кольорового розмаїття між розділами немає. Розділення забезпечується лише межами (тіньовими межами) і відступами.

Border Radius Scale

• Мікро (2px): Фрагменти вбудованого коду, малі елементи span
• Тонкий (4px): Малі контейнери
• Стандартний (6px): Кнопки, посилання, функціональні елементи
• Комфортний (8px): Картки, елементи списку
• Зображальний (12px): Виділені картки, контейнери зображень (із закругленим верхом)
• Великий (64px): Пігулки навігації вкладками
• XL (100px): Великі навігаційні посилання
• Повна пігулка (9999px): Бейджі, пігулки статусу, теги
• Коло (50%): Перемикач меню, контейнери аватарів

6. Depth & Elevation

Level	Treatment	Use
Flat (Level 0)	Без тіні	Фон сторінки, текстові блоки
Ring (Level 1)	rgba(0,0,0,0.08) 0px 0px 0px 1px	Тінь-як-межа для більшості елементів
Light Ring (Level 1b)	rgb(235,235,235) 0px 0px 0px 1px	Легше кільце для вкладок, зображень
Subtle Card (Level 2)	Ring + rgba(0,0,0,0.04) 0px 2px 2px	Стандартні картки з мінімальним підйомом
Full Card (Level 3)	Ring + Subtle + rgba(0,0,0,0.04) 0px 8px 8px -8px + внутрішнє кільце #fafafa	Виділені картки, підсвічені панелі
Focus (Accessibility)	Обведення 2px solid hsla(212, 100%, 48%, 1)	Клавіатурний фокус на всіх інтерактивних елементах

Shadow Philosophy: Vercel, мабуть, має найскладнішу систему тіней у сучасному веб-дизайні. Замість використання тіней для підйому у традиційному стилі Material Design, Vercel застосовує багатозначні стеки тіней, де кожен шар має чітку архітектурну функцію: один створює "межу" (0px поширення, 1px), інший додає м'якість навколишнього середовища (розмиття 2px), ще один відповідає за глибину на відстані (розмиття 8px з від'ємним поширенням), а внутрішнє кільце (#fafafa) створює тонке підсвічування, що змушує картку "світитися" зсередини. Такий шаровий підхід робить картки відчутно побудованими, а не парючими.

Decorative Depth

• Градієнт героя: м'який пастельний багатоколірний градієнтний фон за контентом-героєм (ледве помітний, атмосферний)
• Межі розділів: 1px solid #171717 (повна темна лінія) між основними розділами
• Жодних варіацій фонового кольору — глибина походить виключно від шарування тіней і контрасту меж

7. Do's and Don'ts

Do

• Використовуйте 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 для основного тексту — мікротеплота має значення

Don't

• Не використовуйте додатній міжлітерний інтервал для Geist Sans — він завжди від'ємний або нульовий
• Не використовуйте насиченість 700 (жирний) для основного тексту — 600 є максимумом, і лише для заголовків
• Не використовуйте традиційний CSS border на картках — застосовуйте техніку тіньової межі
• Не вводьте теплі кольори (помаранчеві, жовті, зелені) у хром інтерфейсу
• Не застосовуйте акцентні кольори робочого процесу (Ship Red, Preview Pink, Develop Blue) декоративно
• Не використовуйте важкі тіні (> 0.1 непрозорості) — система тіней є пошептною
• Не збільшуйте міжлітерний інтервал основного тексту — Geist розроблений для щільного набору
• Не використовуйте радіус пігулки (9999px) на кнопках основної дії — пігулки призначені лише для бейджів/тегів
• Не пропускайте внутрішнє кільце #fafafa в тінях карток — це сяйво, яке робить систему такою, що працює

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile Small	<400px	Вузька одна колонка, мінімальний відступ
Mobile	400–600px	Стандартний мобільний, складена розкладка
Tablet Small	600–768px	Починаються сітки з 2 колонок
Tablet	768–1024px	Повні сітки карток, розширений відступ
Desktop Small	1024–1200px	Стандартна десктопна розкладка
Desktop	1200–1400px	Повна розкладка, максимальна ширина вмісту
Large Desktop	>1400px	Відцентровано, щедрі поля

Touch Targets

• Кнопки використовують комфортний відступ (8px–16px по вертикалі)
• Навігаційні посилання 14px з достатнім відступом
• Бейджі-пігулки мають горизонтальний відступ 10px для зон дотику
• Перемикач мобільного меню використовує кругову кнопку з радіусом 50%

Collapsing Strategy

• Герой: відображення 48px → масштабується, пропорційно зберігаючи від'ємний трекінг
• Навігація: горизонтальні посилання + CTA → меню-гамбургер
• Картки функцій: 3 колонки → 2 колонки → одна складена колонка
• Скріншоти коду: зберігають пропорції, можуть горизонтально прокручуватися
• Логотипи панелі довіри: сітка → горизонтальна прокрутка
• Футер: кілька колонок → одна складена колонка
• Відступи розділів: 80px+ → 48px на мобільних

Image Behavior

• Скріншоти панелі керування зберігають оформлення межі на всіх розмірах
• Градієнт героя пом'якшується/спрощується на мобільних
• Скріншоти продукту використовують адаптивні зображення з незмінним радіусом межі
• Розділи на повну ширину зберігають оформлення від краю до краю

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Vercel Black (#171717)
• Background: Pure White (#ffffff)
• Heading text: Vercel Black (#171717)
• Body text: Gray 600 (#4d4d4d)
• Border (shadow): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Link: Link Blue (#0072f5)
• Focus ring: Focus Blue (hsla(212, 100%, 48%, 1))

Example Component Prompts

• "Create a hero section on white background. Headline at 48px Geist weight 600, line-height 1.00, letter-spacing -2.4px, color #171717. Subtitle at 20px Geist weight 400, line-height 1.80, color #4d4d4d. Dark CTA button (#171717, 6px radius, 8px 16px padding) and ghost button (white, shadow-border rgba(0,0,0,0.08) 0px 0px 0px 1px, 6px radius)."
• "Design a card: white background, no CSS border. Use shadow stack: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Radius 8px. Title at 24px Geist weight 600, letter-spacing -0.96px. Body at 16px weight 400, #4d4d4d."
• "Build a pill badge: #ebf5ff background, #0068d6 text, 9999px radius, 0px 10px padding, 12px Geist weight 500."
• "Create navigation: white sticky header. Geist 14px weight 500 for links, #171717 text. Dark pill CTA 'Start Deploying' right-aligned. Shadow-border on bottom: rgba(0,0,0,0.08) 0px 0px 0px 1px."
• "Design a workflow section showing three steps: Develop (text color #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Each step: 14px Geist Mono uppercase label + 24px Geist weight 600 title + 16px weight 400 description in #4d4d4d."

Iteration Guide

1. Завжди використовуйте тінь-як-межу замість CSS-межі — 0px 0px 0px 1px rgba(0,0,0,0.08) є основою
2. Міжлітерний інтервал масштабується разом з розміром шрифту: -2.4px при 48px, -1.28px при 32px, -0.96px при 24px, нормальний при 14px
3. Лише три насиченості: 400 (читання), 500 (взаємодія), 600 (оголошення)
4. Колір є функціональним, а не декоративним — кольори робочого процесу (червоний/рожевий/синій) позначають лише етапи конвеєра
5. Внутрішнє кільце #fafafa в тінях карток — це те, що надає карткам Vercel їхнє тонке внутрішнє сяйво
6. Geist Mono у верхньому регістрі для технічних міток, Geist Sans для всього іншого