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

# Design System Inspired by IBM

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

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

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

Сімейство шрифтів IBM Plex є хребтом системи. IBM Plex Sans у світлому накресленні (300) для відображення заголовків створює несподівано повітряну, майже делікатну якість у великих розмірах — навмисний контрапункт корпоративній вазі IBM. У розмірах основного тексту звичайне накреслення (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 border-radius на основних кнопках — без жодного пом'якшення, повністю прямокутні

## 2. Кольорова палітра та ролі

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

### Нейтральна шкала (сімейство сірих)
- **Gray 100** (`#161616`): Основний текст, заголовки, темне оздоблення UI, фон підвалу.
- **Gray 90** (`#262626`): Вторинні темні поверхні, стани наведення на темному тлі.
- **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`): Стан наведення для поверхонь Gray 10.

### Інтерактивні
- **Blue 60** (`#0f62fe`): Основний інтерактивний — кнопки, посилання, фокус. `--cds-link-primary`, `--cds-button-primary`.
- **Blue 70** (`#0043ce`): Стан наведення на посилання. `--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`
- **Серифний** (обмежене використання): `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 | Вторинний герой, адаптивний запасний варіант |
| 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 | Декоративний моно-заголовок для hero-секції |

### Принципи
- **Світле накреслення у великих розмірах**: виразний набір шрифтів Carbon використовує накреслення 300 (Light) при розмірі 42px і більше. Це створює характерну напругу — вміст говорить з корпоративним авторитетом, тоді як літери шепочуть із типографічною легкістю.
- **Мікротрекінгування у малих розмірах**: міжсимвольний інтервал 0.16px при розмірі 14px і 0.32px при 12px. Ці на перший погляд незначні значення є секретною зброєю Carbon для читабельності в компактних розмірах — вони злегка розкривають тісні літери IBM Plex.
- **Три функціональні насиченості**: 300 (відображення/виразний), 400 (основний текст/читання), 600 (акцент/мітки UI). Накреслення 700 навмисно відсутнє у виробничій типографічній шкалі.
- **Продуктивний проти виразного**: продуктивні набори використовують щільніші міжрядкові інтервали (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)
- Такі самі відступи та радіус, як у основної

**Третинна кнопка (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: none з боків/зверху — `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
- Helper text: 12px, Gray 60
- Placeholder: Gray 60 (`#6f6f6f`)
- Border-radius: 0px (зверху) — поля введення мають гострі кути

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

### Посилання
- Default: `#0f62fe` (Blue 60) без підкреслення
- Hover: `#0043ce` (Blue 70) з підкресленням
- Visited: залишається Blue 60 (стан відвіданого не змінюється)
- Вбудовані посилання: підкреслені за замовчуванням в основному тексті

### Характерні компоненти

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

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

**Тег / Мітка**
- 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 (найменший придатний для використання відступ)
- Внутрішні відступи компонентів: як правило, 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` on bottom edge | Активне поле введення, індикатор активної вкладки |

**Філософія тіней**: Carbon навмисно уникає тіней. IBM досягає глибини насамперед через нашарування фонових кольорів — накладання поверхонь з дедалі темнішими відтінками сірого замість додавання box-shadows. Це створює пласку, натхненну друком естетику, де ієрархія передається через значення кольору, а не імітованим світлом. Тіні зарезервовані виключно для плаваючих елементів (спадних меню, підказок, модальних вікон), де елемент справді перекриває вміст. Ця стриманість надає рідкісним тіням значущого ефекту — коли щось «плаває» у 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 і асиметричні відступи для розміщення іконок
- Застосовуйте 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 x 48px
- Елементи мобільного меню: рядки 48px на повну ширину

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

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

## 9. Посібник з підказок для агента

### Швидкий довідник кольорів
- Primary CTA: IBM Blue 60 (`#0f62fe`)
- Background: White (`#ffffff`)
- Heading text: Gray 100 (`#161616`)
- Body text: Gray 100 (`#161616`)
- Secondary text: Gray 70 (`#525252`)
- Surface/Card: Gray 10 (`#f4f4f4`)
- Border: Gray 30 (`#c6c6c6`)
- Link: Blue 60 (`#0f62fe`)
- Link hover: Blue 70 (`#0043ce`)
- Focus ring: Blue 60 (`#0f62fe`)
- Error: Red 60 (`#da1e28`)
- Success: 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, відступи 14px 63px 14px 15px)."
- "Спроектуй тайл-картку: фон #f4f4f4, border-radius 0px, відступ 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, горизонтальний відступ 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. Active: #ffffff з нижньою рамкою 2px."
- "Побудуй компонент тегу: фон Blue 10 (#edf5ff), текст Blue 60 (#0f62fe), відступ 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 — стандартна висота інтерактивного елементу