Design System Guide

Цвета

Официальная палитра Brand Guidelines

5 цветов из Ceramic Pro Brand Guidelines v1.0 — фундамент визуальной идентичности бренда. Все остальные оттенки — производные для цифровых интерфейсов.

Brand Pink

var(--primary)

#e91d8f

rgb(233, 29, 143)

C:1 M:97 Y:0 K:0

Акцент, CTA, логотип. Точечное использование.

Black

var(--foreground)

#010101

rgb(1, 1, 1)

C:75 M:68 Y:67 K:90

Текст, тёмные секции, мерч.

Grey

var(--muted-foreground)

#575354

rgb(87, 83, 84)

C:62 M:58 Y:55 K:32

Вторичный текст, рамки.

White

var(--background)

#ffffff

rgb(255, 255, 255)

C:0 M:0 Y:0 K:0

Основной фон, пространство.

Light Grey

var(--border)

#e7e8e8

rgb(231, 232, 232)

C:3 M:2 Y:2 K:5

Фон карточек, разделители.

Расширенная палитра для digital

Brand Guidelines определяет 5 базовых цветов. Для цифровых интерфейсов нужна расширенная палитра: семантические роли, состояния, обратная связь. Ниже — полный набор токенов для светлой и тёмной темы.

Светлая тема

background

#ffffff

Основной фон страницы

foreground

#010101

Основной текст

card

#fafafa

Фон карточек

card-foreground

#010101

Текст в карточках

primary

#e91d8f

Акцент, CTA

primary-foreground

#ffffff

Текст на акценте

secondary

#f5f5f5

Вторичный фон

muted

#e7e8e8

Приглушённый фон

muted-foreground

#575354

Приглушённый текст

border

#e7e8e8

Границы и разделители

destructive

#d32f2f

Ошибки

success

#4caf50

Успех

Тёмная тема

background

#010101

Основной фон страницы

foreground

#f0f0f0

Основной текст

card

#161616

Фон карточек

card-foreground

#f0f0f0

Текст в карточках

primary

#ec1d91

Акцент, CTA

primary-foreground

#ffffff

Текст на акценте

secondary

#1e1e1e

Вторичный фон

muted

#2a2a2a

Приглушённый фон

muted-foreground

#a0a0a0

Приглушённый текст

border

#2e2e2e

Границы и разделители

destructive

#f44336

Ошибки

success

#66bb6a

Успех

Таблица контрастности WCAG

WCAG 2.1 AA требует соотношение контраста 4.5:1 для обычного текста и 3:1 для крупного (от 24px).

Светлая тема

Комбинация	Соотношение	Обычный текст (4.5:1)	Крупный текст (3:1)
foreground (#010101) на background (#ffffff)	`21:1`	Pass	Pass
muted-foreground (#575354) на background (#ffffff)	`7.2:1`	Pass	Pass
primary (#e91d8f) на background (#ffffff)	`4.2:1`	Fail	Pass
primary-foreground (#ffffff) на primary (#e91d8f)	`4.6:1`	Pass	Pass

Тёмная тема

Комбинация	Соотношение	Обычный текст (4.5:1)	Крупный текст (3:1)
foreground (#f0f0f0) на background (#010101)	`19.3:1`	Pass	Pass
muted-foreground (#a0a0a0) на background (#010101)	`9.6:1`	Pass	Pass
primary (#ec1d91) на background (#010101)	`4.5:1`	Pass	Pass

Правило: Brand Pink (#e91d8f) как цвет текста на белом фоне — только при размере от 24px.

Форматы для разных носителей

Одни и те же цвета используются на разных носителях. Ниже — таблица соответствия форматов.

Цвет	Web (HEX)	Web (RGB)	Print (CMYK)	Pantone	CSS Variable
Brand Pink	`#e91d8f`	rgb(233, 29, 143)	C:1 M:97 Y:0 K:0	Pantone 226 C	`var(--primary)`
Black	`#010101`	rgb(1, 1, 1)	C:75 M:68 Y:67 K:90	Process Black	`var(--foreground)`
Grey	`#575354`	rgb(87, 83, 84)	C:62 M:58 Y:55 K:32	Pantone Cool Gray 11 C	`var(--muted-foreground)`
White	`#ffffff`	rgb(255, 255, 255)	C:0 M:0 Y:0 K:0	—	`var(--background)`
Light Grey	`#e7e8e8`	rgb(231, 232, 232)	C:3 M:2 Y:2 K:5	—	`var(--border)`

Вопросы для дизайнера

1. Нужен ли второй акцентный цвет помимо Brand Pink?

2. Тёплый серый (#575354) из гайдлайна или расширить шкалу серых (6-8 оттенков)?

3. Pink — только для крупного текста/CTA или допустим для мелких акцентов?

4. Тёмная тема: для каких контекстов? (hero, footer, showcase, приложения)

5. Переход от dark-first к balanced: согласны с white-first как основой?

Логотип и скругления

Формы букв логотипа имеют скруглённые углы, что подтверждает выбор border-radius: 8px для UI-компонентов.

Logotype R (White BG)

Logotype (White BG)

Logotype Mono (Black BG)

Alt Logo (White BG)

Alt Logo (Black BG)

Alt Logo (Pink)

Сравнение: квадратные vs скруглённые углы

border-radius: 0px

border-radius: 8px