# Design System Inspired by IBM

> Category: Медиа и потребительский сектор
> Корпоративные технологии. Дизайн-система Carbon, структурированная синяя палитра.

## 1. Визуальная тема и атмосфера

Сайт IBM — это цифровое воплощение корпоративного авторитета, выстроенного на дизайн-системе Carbon: настолько методично структурированном языке дизайна, что он читается как инженерная спецификация, отрендеренная в виде веб-страницы. Страница строится на жёстком дуализме: яркий белый (`#ffffff`) холст с почти чёрным (`#161616`) текстом, пронизанный единственным неизменным акцентом — IBM Blue 60 (`#0f62fe`). Это не игривый минимализм технологического стартапа; это корпоративная точность, дистиллированная в пиксели. Каждый элемент существует внутри жёсткой сетки Carbon 2x, каждый цвет привязан к семантическому токену, каждое значение отступа привязывается к базовой единице 8px.

Шрифтовое семейство IBM Plex — основа системы. IBM Plex Sans с начертанием Light (300) для заголовков создаёт неожиданно лёгкое, почти изысканное качество при больших размерах — намеренный контрапункт корпоративной серьёзности IBM. При размерах основного текста начертание Regular (400) с межбуквенным интервалом 0.16px в подписях 14px вводит педантичный микроинтервал, благодаря которому текст Carbon ощущается скорее инженерным, чем дизайнерским. IBM Plex Mono обслуживает код, данные и технические метки, завершая трио семейства наряду с редко используемым IBM Plex Serif.

Что определяет визуальную идентичность IBM за пределами монохромности плюс синий — это опора на систему компонентных токенов Carbon. Каждое интерактивное состояние сопоставляется с CSS-свойством с префиксом `--cds-` (Carbon Design System). Кнопки не имеют жёстко заданных цветов; они ссылаются на `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. Эта токенизированная архитектура означает, что весь визуальный слой — тонкая оболочка над глубоко систематизированным фундаментом: дизайнерский эквивалент хорошо типизированного API.

**Ключевые характеристики:**
- IBM Plex Sans с весом 300 (Light) для дисплейного использования — корпоративная весомость через типографическую сдержанность
- IBM Plex Mono для кода и технического контента с последовательным межбуквенным интервалом 0.16px при малых размерах
- Единственный акцентный цвет: IBM Blue 60 (`#0f62fe`) — каждый интерактивный элемент, каждый CTA, каждая ссылка
- Система токенов Carbon (`--cds-*`), управляющая всеми семантическими цветами и позволяющая переключать темы на уровне переменных
- Сетка отступов 8px со строгим соблюдением — никаких произвольных значений, всё выровнено
- Плоские карточки без рамок на поверхности `#f4f4f4` Gray 10 — глубина через наслоение цветов фона, а не тени
- Поля ввода с нижней рамкой (не в рамке) — фирменный паттерн форм Carbon
- Радиус скругления 0px у основных кнопок — подчёркнуто прямоугольные, без смягчения

## 2. Цветовая палитра и роли

### Основные цвета
- **IBM Blue 60** (`#0f62fe`): Единственный интерактивный цвет. Основные кнопки, ссылки, состояния фокуса, активные индикаторы. Это единственный хроматический оттенок в основной UI-палитре.
- **White** (`#ffffff`): Фон страницы, поверхности карточек, текст кнопок на синем фоне, `--cds-background`.
- **Gray 100** (`#161616`): Основной текст, заголовки, тёмные фоны поверхностей, навбар, подвал. `--cds-text-primary`.

### Нейтральная шкала (семейство Gray)
- **Gray 100** (`#161616`): Основной текст, заголовки, тёмный UI-chrome, фон подвала.
- **Gray 90** (`#262626`): Второстепенные тёмные поверхности, состояния hover на тёмных фонах.
- **Gray 80** (`#393939`): Третичный тёмный, активные состояния.
- **Gray 70** (`#525252`): Второстепенный текст, вспомогательный текст, описания. `--cds-text-secondary`.
- **Gray 60** (`#6f6f6f`): Текст-заглушка, отключённый текст.
- **Gray 50** (`#8d8d8d`): Отключённые иконки, приглушённые метки.
- **Gray 30** (`#c6c6c6`): Рамки, разделительные линии, нижние рамки полей ввода. `--cds-border-subtle`.
- **Gray 20** (`#e0e0e0`): Тонкие рамки, контуры карточек.
- **Gray 10** (`#f4f4f4`): Второстепенный фон поверхности, заливка карточек, чередующиеся строки. `--cds-layer-01`.
- **Gray 10 Hover** (`#e8e8e8`): Состояние hover для поверхностей Gray 10.

### Интерактивные цвета
- **Blue 60** (`#0f62fe`): Основные интерактивные — кнопки, ссылки, фокус. `--cds-link-primary`, `--cds-button-primary`.
- **Blue 70** (`#0043ce`): Состояние hover для ссылок. `--cds-link-primary-hover`.
- **Blue 80** (`#002d9c`): Активное/нажатое состояние синих элементов.
- **Blue 10** (`#edf5ff`): Синяя тонированная поверхность, фон выбранной строки.
- **Focus Blue** (`#0f62fe`): `--cds-focus` — рамка 2px inset на элементах в фокусе.
- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — белое внутреннее кольцо для фокуса на тёмных фонах.

### Поддержка и статусы
- **Red 60** (`#da1e28`): Ошибка, опасность. `--cds-support-error`.
- **Green 50** (`#24a148`): Успех. `--cds-support-success`.
- **Yellow 30** (`#f1c21b`): Предупреждение. `--cds-support-warning`.
- **Blue 60** (`#0f62fe`): Информационный. `--cds-support-info`.

### Тёмная тема (тема Gray 100)
- **Background**: Gray 100 (`#161616`). `--cds-background`.
- **Layer 01**: Gray 90 (`#262626`). Поверхности карточек и контейнеров.
- **Layer 02**: Gray 80 (`#393939`). Приподнятые поверхности.
- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
- **Interactive**: Blue 40 (`#78a9ff`). Ссылки и интерактивные элементы становятся светлее для контрастности.

## 3. Правила типографики

### Семейство шрифтов
- **Основной**: `IBM Plex Sans`, с запасными вариантами: `Helvetica Neue, Arial, sans-serif`
- **Моноширинный**: `IBM Plex Mono`, с запасными вариантами: `Menlo, Courier, monospace`
- **Serif** (ограниченное использование): `IBM Plex Serif`, для редакционных и выразительных контекстов
- **Иконочный шрифт**: `ibm_icons` — проприетарные иконочные глифы размером 20px

### Иерархия

| Роль | Шрифт | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Максимальный эффект, лёгкое начертание для элегантности |
| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Второстепенный hero, адаптивный резерв |
| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Выразительный заголовок |
| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Заголовки разделов |
| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Заголовки подразделов |
| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Заголовки карточек, заголовки функций |
| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Более лёгкие заголовки карточек |
| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Стандартный текст для чтения |
| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Выделенный основной текст, метки |
| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Компактный текст, подписи |
| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Жирные подписи, элементы навигации |
| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Метаданные, временные метки |
| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Встроенный код, терминал |
| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Блоки кода |
| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Декоративный mono в hero-секции |

### Принципы
- **Лёгкое начертание для дисплейных размеров**: Выразительный типовой набор Carbon использует насыщенность 300 (Light) при 42px и выше. Это создаёт характерное напряжение — контент говорит с корпоративным авторитетом, тогда как сами буквы шепчут с типографической лёгкостью.
- **Микроинтервал при малых размерах**: Межбуквенный интервал 0.16px при 14px и 0.32px при 12px. Эти кажущиеся незначительными значения — секретное оружие Carbon для удобочитаемости при компактных размерах: они слегка открывают плотные буквы IBM Plex.
- **Три функциональных насыщенности**: 300 (дисплейный/выразительный), 400 (основной текст/чтение), 600 (акцент/UI-метки). Насыщенность 700 намеренно отсутствует в производственной типографической шкале.
- **Продуктивный vs. Выразительный**: Продуктивные наборы используют более тесные межстрочные интервалы (1.29) для насыщенного UI. Выразительные наборы дышат свободнее (1.40–1.50) для маркетинга и редакционного контента.

## 4. Стилизация компонентов

### Кнопки

**Основная кнопка (синяя)**
- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
- Text: `#ffffff` (White)
- Padding: 14px 63px 14px 15px (асимметричный — место для иконки в конце)
- Border: 1px solid transparent
- Border-radius: 0px (чёткий прямоугольник — фирменный знак Carbon)
- Height: 48px (по умолчанию), 40px (компактный), 64px (выразительный)
- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner

**Вторичная кнопка (серая)**
- Background: `#393939` (Gray 80)
- Text: `#ffffff`
- Hover: `#4c4c4c` (Gray 70)
- Active: `#6f6f6f` (Gray 60)
- Те же padding и radius, что у основной

**Третичная кнопка (Ghost Blue)**
- Background: transparent
- Text: `#0f62fe` (Blue 60)
- Border: 1px solid `#0f62fe`
- Hover: `#0353e9` текст + Blue 10 тонированный фон
- Border-radius: 0px

**Ghost-кнопка**
- Background: transparent
- Text: `#0f62fe` (Blue 60)
- Padding: 14px 16px
- Border: none
- Hover: `#e8e8e8` тонированный фон

**Кнопка опасности**
- Background: `#da1e28` (Red 60)
- Text: `#ffffff`
- Hover: `#b81921` (Red 70)

### Карточки и контейнеры
- Background: `#ffffff` на белой теме, `#f4f4f4` (Gray 10) для приподнятых карточек
- Border: none (плоский дизайн — без рамки или тени на большинстве карточек)
- Border-radius: 0px (соответствует прямоугольной эстетике кнопок)
- Hover: фон смещается к `#e8e8e8` (Gray 10 Hover) для кликабельных карточек
- Content padding: 16px
- Разделение: наслоение цветов фона (white → gray 10 → white) вместо теней

### Поля ввода и формы
- Background: `#f4f4f4` (Gray 10) — `--cds-field`
- Text: `#161616` (Gray 100)
- Padding: 0px 16px (только горизонтальный)
- Height: 40px (по умолчанию), 48px (большой)
- Border: нет на боках/сверху — `2px solid transparent` снизу
- Bottom-border active: `2px solid #161616` (Gray 100)
- Focus: `2px solid #0f62fe` (Blue 60) нижняя рамка — `--cds-focus`
- Error: `2px solid #da1e28` (Red 60) нижняя рамка
- Label: 12px IBM Plex Sans, межбуквенный интервал 0.32px, Gray 70
- Вспомогательный текст: 12px, Gray 60
- Placeholder: Gray 60 (`#6f6f6f`)
- Border-radius: 0px (сверху) — поля ввода с острыми углами

### Навигация
- Background: `#161616` (Gray 100) — тёмная шапка на всю ширину
- Height: 48px
- Логотип: логотип IBM из 8 полос, белый на тёмном, выровнен по левому краю
- Ссылки: 14px IBM Plex Sans, насыщенность 400, `#c6c6c6` (Gray 30) по умолчанию
- Link hover: `#ffffff` текст
- Активная ссылка: `#ffffff` с индикатором нижней рамки
- Переключатель платформ: горизонтальные вкладки, выровненные по левому краю
- Поиск: поле поиска с выдвижением по клику на иконку
- Мобильный: гамбургер с панелью, выезжающей слева

### Ссылки
- По умолчанию: `#0f62fe` (Blue 60) без подчёркивания
- Hover: `#0043ce` (Blue 70) с подчёркиванием
- Посещённые: остаются Blue 60 (состояние посещённой ссылки не меняется)
- Встроенные ссылки: подчёркнуты по умолчанию в основном тексте

### Характерные компоненты

**Блок контента (Hero/Feature)**
- Чередующиеся полосы фона white/gray-10 на всю ширину
- Заголовок выровнен по левому краю с дисплейным шрифтом 60px или 48px
- CTA как синяя основная кнопка со стрелочной иконкой
- Изображение/иллюстрация выровнены по правому краю или располагаются ниже на мобильных

**Tile (кликабельная карточка)**
- Background: `#f4f4f4` или `#ffffff`
- Нижняя рамка на всю ширину или смена фона при hover
- Иконка стрелки в правом нижнем углу при hover
- Без тени — плоскость и есть идентичность

**Tag / Label**
- Background: контекстный цвет с непрозрачностью 10% (например, Blue 10, Red 10)
- Text: соответствующий цвет 60-го оттенка
- Padding: 4px 8px
- Border-radius: 24px (таблетка — исключение из правила 0px)
- Font: 12px насыщенность 400

**Баннер уведомления**
- Полоса на всю ширину, обычно фон Blue 60 или Gray 100
- Белый текст, 14px
- Иконка закрытия выровнена по правому краю

## 5. Принципы компоновки

### Система отступов
- Базовая единица: 8px (сетка Carbon 2x)
- Шкала отступов компонентов: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
- Шкала отступов компоновки: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
- Мини-единица: 8px (минимально используемый отступ)
- Внутренний padding компонентов: обычно 16px
- Зазор между карточками/тайлами: 1px (волосяная линия) или 16px (стандартный)

### Сетка и контейнер
- 16-колоночная сетка (система Carbon 2x)
- Максимальная ширина контента: 1584px (максимальная точка останова)
- Межколоночные отступы: 32px (16px на мобильных)
- Поля: 16px (мобильные), 32px (планшеты+)
- Контент обычно занимает 8–12 колонок для комфортной длины строки
- Секции на всю ширину чередуются с ограниченным контентом

### Философия пустого пространства
- **Функциональная плотность**: Carbon предпочитает продуктивную плотность обширному белому пространству. Секции упакованы плотнее по сравнению с потребительскими дизайн-системами — это отражает корпоративную ДНК IBM.
- **Зонирование цветом фона**: Вместо массивных отступов между секциями IBM использует чередующиеся цвета фона (white → gray 10 → white) для создания визуального разделения при минимальном вертикальном пространстве.
- **Постоянный ритм 48px**: Переходы между основными секциями используют вертикальный отступ 48px. Hero-секции могут использовать 80px–96px.

### Шкала радиусов скругления
- **0px**: Основные кнопки, поля ввода, тайлы, карточки — доминирующая обработка. Carbon фундаментально прямоугольный.
- **2px**: Иногда для небольших интерактивных элементов (теги)
- **24px**: Теги/метки (форма таблетки — единственное скруглённое исключение)
- **50%**: Круги аватаров, контейнеры иконок

## 6. Глубина и приподнятость

| Уровень | Обработка | Применение |
|-------|-----------|-----|
| Flat (Level 0) | Без тени, фон `#ffffff` | Стандартная поверхность страницы |
| Layer 01 | Без тени, фон `#f4f4f4` | Карточки, тайлы, чередующиеся секции |
| Layer 02 | Без тени, фон `#e0e0e0` | Приподнятые панели внутри Layer 01 |
| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Выпадающие меню, подсказки, меню переполнения |
| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + тёмная подложка | Модальные диалоги, боковые панели |
| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Кольцо фокуса клавиатуры |
| Bottom-border | `2px solid #161616` по нижнему краю | Активное поле ввода, индикатор активной вкладки |

**Философия теней**: Carbon намеренно избегает теней. IBM добиваетсяглубины прежде всего через наслоение цветов фона — укладывая поверхности с прогрессивно темнеющими серыми вместо добавления box-shadow. Это создаёт плоскую, вдохновлённую печатью эстетику, где иерархия передаётся значением цвета, а не имитацией света. Тени зарезервированы исключительно для плавающих элементов (выпадающие меню, подсказки, модалки), где элемент действительно перекрывает контент. Такая сдержанность придаёт редкой тени значимый эффект — когда что-то парит в Carbon, это имеет значение.

## 7. Что делать и чего не делать

### Делать
- Использовать IBM Plex Sans с насыщенностью 300 для дисплейных размеров (42px+) — лёгкость намеренна
- Применять межбуквенный интервал 0.16px к основному тексту 14px и 0.32px к подписям 12px
- Использовать border-radius 0px для кнопок, полей ввода, карточек и тайлов — прямоугольники и есть система
- Ссылаться на имена токенов `--cds-*` при реализации (например, `--cds-button-primary`, `--cds-text-primary`)
- Использовать наслоение цветов фона (white → gray 10 → gray 20) для глубины вместо теней
- Использовать нижнюю рамку (не рамку вокруг) для индикаторов полей ввода
- Сохранять высоту кнопки по умолчанию 48px и асимметричный padding для размещения иконки
- Применять Blue 60 (`#0f62fe`) как единственный акцент — один синий, чтобы управлять всем

### Не делать
- Не скруглять углы кнопок — радиус 0px является идентичностью Carbon
- Не использовать тени на карточках или тайлах — плоскость и есть суть
- Не вводить дополнительные акцентные цвета — система IBM монохромна плюс синий
- Не использовать насыщенность 700 (Bold) — шкала останавливается на 600 (Semibold)
- Не добавлять межбуквенный интервал к тексту дисплейного размера — интервал только для 14px и ниже
- Не обрамлять поля ввода полными рамками — поля ввода Carbon используют только нижнюю рамку
- Не использовать градиентные фоны — поверхности IBM плоские, однотонные
- Не отклоняться от сетки отступов 8px — каждое значение должно делиться на 8 (с 2px и 4px для микрокорректировок)

## 8. Адаптивное поведение

### Точки останова
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Small (sm) | 320px | Одна колонка, навигация-гамбургер, поля 16px |
| Medium (md) | 672px | Начинаются двухколоночные сетки, расширенный контент |
| Large (lg) | 1056px | Полная навигация видна, сетки 3–4 колонки |
| X-Large (xlg) | 1312px | Максимальная плотность контента, широкие макеты |
| Max | 1584px | Максимальная ширина контента, центрирование с полями |

### Целевые области касания
- Высота кнопки: 48px по умолчанию, минимум 40px (компактный)
- Ссылки навигации: высота строки 48px для касания
- Высота поля ввода: 40px по умолчанию, 48px большой
- Кнопки-иконки: область касания 48px квадрат
- Пункты мобильного меню: строки на всю ширину по 48px

### Стратегия сворачивания
- Hero: дисплейный шрифт 60px → 42px → заголовок 32px по мере сужения viewport
- Навигация: полная горизонтальная шапка → гамбургер с выдвигающейся панелью
- Сетка: 4 колонки → 2 колонки → одна колонка
- Тайлы/карточки: горизонтальная сетка → вертикальный стек
- Изображения: сохранение соотношения сторон, max-width 100%
- Подвал: многоколоночные группы ссылок → единый столбец в стеке
- Отступы секций: 48px → 32px → 16px

### Поведение изображений
- Адаптивные изображения с `max-width: 100%`
- Иллюстрации продукта масштабируются пропорционально
- Hero-изображения могут переходить от расположения бок о бок к размещению в стек ниже
- Визуализации данных сохраняют соотношение сторон с горизонтальной прокруткой на мобильных

## 9. Руководство по промптам для агента

### Быстрый справочник цветов
- Основной CTA: IBM Blue 60 (`#0f62fe`)
- Background: White (`#ffffff`)
- Текст заголовков: Gray 100 (`#161616`)
- Основной текст: Gray 100 (`#161616`)
- Второстепенный текст: Gray 70 (`#525252`)
- Поверхность/карточка: Gray 10 (`#f4f4f4`)
- Рамка: Gray 30 (`#c6c6c6`)
- Ссылка: Blue 60 (`#0f62fe`)
- Ссылка hover: Blue 70 (`#0043ce`)
- Кольцо фокуса: Blue 60 (`#0f62fe`)
- Ошибка: Red 60 (`#da1e28`)
- Успех: Green 50 (`#24a148`)

### Примеры промптов для компонентов
- "Создай hero-секцию на белом фоне. Заголовок 60px IBM Plex Sans насыщенность 300, line-height 1.17, цвет #161616. Подзаголовок 16px насыщенность 400, line-height 1.50, цвет #525252, max-width 640px. Синяя CTA-кнопка (фон #0f62fe, текст #ffffff, border-radius 0px, высота 48px, padding 14px 63px 14px 15px)."
- "Спроектируй карточку-тайл: фон #f4f4f4, border-radius 0px, padding 16px. Заголовок 20px IBM Plex Sans насыщенность 600, line-height 1.40, цвет #161616. Основной текст 14px насыщенность 400, letter-spacing 0.16px, line-height 1.29, цвет #525252. Hover: фон меняется на #e8e8e8."
- "Создай поле формы: фон #f4f4f4, border-radius 0px, высота 40px, горизонтальный padding 16px. Метка сверху 12px насыщенность 400, letter-spacing 0.32px, цвет #525252. Нижняя рамка: 2px solid transparent по умолчанию, 2px solid #0f62fe при фокусе. Placeholder: #6f6f6f."
- "Создай тёмную панель навигации: фон #161616, высота 48px. Логотип IBM белый выровнен по левому краю. Ссылки 14px IBM Plex Sans насыщенность 400, цвет #c6c6c6. Hover: текст #ffffff. Активный: #ffffff с нижней рамкой 2px."
- "Создай компонент тега: фон Blue 10 (#edf5ff), текст Blue 60 (#0f62fe), padding 4px 8px, border-radius 24px, 12px IBM Plex Sans насыщенность 400."

### Руководство по итерации
1. Всегда используй border-radius 0px для кнопок, полей ввода и карточек — в Carbon это обязательно
2. Межбуквенный интервал только при малых размерах: 0.16px при 14px, 0.32px при 12px — никогда для дисплейного текста
3. Три насыщенности: 300 (дисплейный), 400 (основной текст), 600 (акцент) — без жирного
4. Blue 60 — единственный акцентный цвет — не вводи вторичные акцентные оттенки
5. Глубина достигается через наслоение цветов фона (white → #f4f4f4 → #e0e0e0), а не тени
6. Поля ввода имеют только нижнюю рамку, никогда полное обрамление
7. Используй префикс `--cds-` для именования токенов, чтобы оставаться совместимым с Carbon
8. 48px — универсальная высота интерактивных элементов