Семантика / SEM

Единая система трёхбуквенных кодов и грамматик имён. Любое имя в дизайн-системе — от цвета до компонента — собирается из конечного реестра кодов по фиксированным формулам. Этот реестр — основа, на которой в Figma строятся переменные, стили и компоненты: прочитав имя, понимаешь смысл значения, не открывая файл.

Принципы

Код — три заглавные латинские буквы, иногда с суффиксом:
- BRA/PRM — семейство со слэшем;
- FGR_CVB_100 — составной код;
Одно значение — одно имя. Имя отвечает на вопрос «что это», а не «какое оно»;
Имя читается слева направо от общего к частному: домен → группа → деталь;
Разделители нормированы:
- / — внутри путей токенов;
- _ — внутри составных кодов и имён сетов;
- = — в значениях вариантов;

Пространство — три слоя

Система пространственная: каждый элемент представляется трёхмерным и находится в одном из трёх слоёв. Слой — первый осмысленный сегмент цветового токена.

Код	Полное имя	Смысл	Примеры
`ABV`	Above surface	Над поверхностью: приподнятые элементы, отбрасывают тень вниз	кнопки, чипы, лейблы, тогглы
`SFC`	Surface	Сама поверхность: несущие плоскости	карточки, панели, контейнеры
`BLW`	Below surface	Под поверхностью, «в яме»: утопленные элементы	поле ввода текста, канавки, wells

Акценты — смысловая роль

Код	Полное имя	Когда применяется
`DFT`	Default	Обычное, нейтральное состояние по умолчанию
`PRM`	Primary	Основное действие в контексте, одно на экран
`ACC`	Accent	Акцентное выделение, привлечение внимания брендом
`POS`	Positive	Успех, подтверждение, корректность
`ATN`	Attention	Предупреждение, требует внимания
`NEG`	Negative	Ошибка, опасное действие

Состояния — интерактив

Код	Полное имя	Смысл
`RGL`	Regular	Покой, состояние по умолчанию
`HVR`	Hover	Курсор над элементом
`FCS`	Focus	Фокус клавиатуры/ввода
`PRS`	Pressed	Нажатие
`DSB`	Disabled	Недоступен
`CHD`	Checked	Включён/выбран — вместо PRS у переключаемых (CHB, TOG, RAD)
`_***_FLD`	Filled	Суффикс «заполнено» — только у INP: RGL_FLD, HVR_FLD, FCS_FLD, DSB_FLD

Роли — что красим

Код	Полное имя	Смысл
`FGR`	Foreground	Цвет контента: текст, иконка, глиф
`BRD`	Border	Цвет рамки, обводки, разделителя
`BGR`	Background	Цвет фона элемента

Домены значений

Код	Полное имя	Что хранит	Форма
`CLR`	Absolute color palette	442 абсолютных цвета: 13 семейств × шкала 025–975	семейство/шаг
`FCL`	Functional color palette	263 функциональных цвета — переменные Figma	слой/акцент/состояние/роль
`TXT`	Absolute text palette	84 текстовых стиля: 12 начертаний × 7 размеров	TXT/начертание/размер
`FTY`	Functional text palette	10 функциональных текстовых ролей	FTY/роль
`SPC`	Spacings	Шкала отступов 4–64 px	шаг
`RAD`	Radiuses	Шкала скруглений 4–40 px	шаг
`THK`	Thicknesses	Шкала толщин 1–7 px	шаг
`ICN`	Icons	Библиотека иконок	имя иконки

Компоненты

Код	Полное имя	Примечание
`BTN`	Button	кнопка с текстом и иконками
`BTI`	Icon button	иконочная кнопка
`CHB`	Checkbox	состояние CHD
`TOG`	Toggle	состояние CHD
`INP`	Input	состояния с суффиксом _FLD
`RAD`	Radiobutton	коллизия с RAD радиуса — см. известные коллизии
`SPC`	Spacer	компонент-прокладка; коллизия с SPC отступов

Модификаторы

Код	Смысл
`GRD`	Gradient — градиент «света сверху» для слоя ABV (8 стилей)
`SHD`	Shadow — тень, кодирует глубину слоя (90 стилей)
`CVB`	Contrast variant — контрастный вариант контента на другом слое: FGR_CVB_100, FGR_CVB_200
`LGT`	Light — тема/режим светлого
`SEM`	Semantics — этот раздел документации

Грамматики имён

Функциональный цвет (переменная FCL)

<слой>/<акцент>/<состояние>/<роль>
ABV/DFT/RGL/BGR — фон обычной приподнятой кнопки

Абсолютный цвет (токен CLR)

<семейство>/<шаг>
GRY/200 — серый, шаг 200 шкалы 025–975
BRA/PRM/025 — бренд-основной, шаг 025

Семейства: BLU, BRN, GRY, GRN, ORG, PNK, RED, VIL, YEL, BRA/PRM, BRA/SEC + особые WHT и BLC. Функциональный токен всегда ссылается на абсолютный: FCL → CLR.

Тень и градиент

<слой>/<акцент>/<состояние>/SHD напр. BLW/NEG/HVR/SHD
ABV/<PRM|ACC>/<состояние>/GRD напр. ABV/PRM/RGL/GRD

Типографика

TXT/<начертание>/<размер> напр. TXT/TWR/SZM — Roboto Flex Regular 16
FTY/<роль> напр. FTY/HD1 — заголовок 1 (Inter Medium 32)

Начертания: TWT Thin 100, TWL Light 300, TWR Regular 400, TWM Medium 500, TWB Bold 700, TWE ExtraBold 800; курсивные — те же с I вместо W: TIT, TIL, TIR, TIM, TIB, TIE.

Компонент-сет

<КОД_КОМПОНЕНТА>_<размер> напр. BTN_SZM
вариант: Emphasis=<код>, State=<код> напр. Emphasis=PRM, State=HVR

Размеры компонентов: SZS 16, SZM 24, SZL 32 (высота строки контроля в px из шкалы SPC).

Шкалы шагов

Одни и те же имена шагов XXS SXS SZS SZM SZL SXL XXL используются во всех шкалах, но означают разные значения. Шаг выбирается по смыслу, значение — из таблицы шкалы.

Шаг	`SPC` отступы, px	`RAD` скругления, px	`THK` толщины, px	`TXT` кегль, px
`XXS`	4	4	1	10
`SXS`	8	8	2	12
`SZS`	16	12	3	14
`SZM`	24	16	4	16
`SZL`	32	24	5	20
`SXL`	48	32	6	24
`XXL`	64	40	7	32

Отступы дополнительно выражаются в rem (0.25 / 0.5 / 1 / 1.5 / 2 / 3 / 4) — база 16 px. Скругления компонентов по умолчанию — RAD/SZS = 12 px.

Правила именования

Новый код добавляется только в реестр этой страницы — свободная трёхбуквенная комбинация, не совпадающая с существующими;
Имя токена целиком в верхнем регистре;
Сегменты имени разделяются через /, порядок фиксирован формулой домена;
Имя сета компонентов — КОД_SZ*;
Вариант сета описывается парами Ключ=Значение через запятую;
Составные коды пишутся через _:
- FGR_CVB_100 — правило;
- BRA/PRM — исключение: семейство со слэшем;
Человеческое имя обязательно дублируется кодом («Emphasis Primary / PRM»);

Известные коллизии

Код	Значение 1	Значение 2	Как различать
`RAD`	Radiuses — шкала скруглений	Radiobutton — компонент	контекст: шкала идёт одна, компонент — с суффиксом размера: RAD_SZM
`SPC`	Spacings — шкала отступов	Spacer — компонент-прокладка	сет Spacer без суффикса размера, варианты Size=XXS…XXL

Разбор имён

Имя	Читается как
`ABV/DFT/RGL/FGR`	контент (текст, иконка) обычной приподнятой кнопки в покое → GRY/925 = #1B1B1B
`ABV/DFT/RGL/BGR`	фон обычной приподнятой кнопки в покое → GRY/200 = #DBDBDB
`BLW/DFT/RGL/BGR`	фон поля ввода в покое, «дно ямы» → GRY/975 = #0E0E0E
`ABV/NEG/HVR/SHD`	тень приподнятого элемента ошибки при наведении
`TXT/TIB/SXS`	Roboto Flex Bold Italic, кегль 12
`INP_SZL` `Emphasis=POS, State=FCS_FLD`	большое поле ввода, акцент «успех», в фокусе, заполнено