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 — стандартна висота інтерактивного елементу