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

Иерархия

Принципы

• Лёгкое начертание для дисплейных размеров: Выразительный типовой набор 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. Глубина и приподнятость

Философия теней: 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. Адаптивное поведение

Точки останова

Целевые области касания

• Высота кнопки: 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 — универсальная высота интерактивных элементов