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

# Дизайн-система, вдохновлённая 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 для всего остального