Документация

Правила системы: размерная шкала, состояния, токены темы, словарь свойств и спецификации компонентов. Это источник, из которого собираются библиотеки в Figma, темы в Builder и контекст для агентов.

67 из 67

Основы

12 страниц · база перед первым продуктом
Introducing SDDSСтарт

Что это за система, как работает white-label-модель и с чего начать по роли.

SizesОбновлено

Единая шкала: токен размера — уровень системы, а не высота в пикселях.

States

Как выглядит каждое состояние и по каким правилам они комбинируются.

Themes tokens

Как построить, применить и расширить брендовую тему на токенах.

Corner Radius

От строгого нуля до Rounded: как радиус передаёт характер бренда.

Spacing & Layout

Шкала расстояний и правила сборки блоков на сетке.

Properties Vocabulary

Единые имена свойств, их значения и правила применения.

Interaction Model

Что происходит по клику, наведению и с клавиатуры.

Validation Model

Когда показывать ошибку и как её формулировать.

Accessibility

Контраст, фокус, размеры целей и вспомогательные технологии.

Component Library

Как компоненты сгруппированы по назначению и почему именно так.

Iconsновое

Весь набор: три начертания, три размера, поиск по тегам.

Glossary

Ключевые термины системы: незнакомое слово — ищите здесь.

Для агентов и разработчиков

Тот же источник, но в машинном виде
AI-ready контекст

Структура со связями между сущностями и версиями — агент получает правила системы, а не текст страницы.

MCPбета

Подключение по Model Context Protocol: компоненты, токены и правила читаются напрямую из системы.

Шаблон спецификации

По нему пишется новая страница компонента. Пока не заполнены обязательные разделы — это черновик.

Компоненты

55 спецификаций · категория — это раздел библиотеки

Actions4

Button

Интерактивный элемент для выполнения действия

IconButton

Кнопка только с иконкой

LinkButton

Кнопка, стилизованная как текстовая ссылка

ButtonGroup

Группа связанных кнопок, объединённых в единый контрол

Data Entry17

Autocomplete

Текстовое поле с выпадающим списком подсказок на основе…

CheckBox

Элемент для независимого выбора одного или нескольких вариантов

CodeInput / CodeField

Поле для ввода короткого кода

ComboBox

Поле ввода, которое позволяет выбирать значения из выпадающего…

DatePicker

Комбинация текстового поля и выпадающего календаря с…

Dropzone

Интерактивная область, предназначенная для перетаскивания и…

NumberInput

Числовое поле ввода со стрелками инкремента/декремента

RadioBox

Элемент для выбора одного варианта из группы взаимоисключающих

Range

Компонент для ввода диапазона значений

Segment

Группа элементов для переключения между несколькими категориями…

Select

Выпадающий список для выбора одного или нескольких значений

Slider

Ползунок для выбора числового значения в диапазоне

Switch

Переключатель бинарного состояния

TextArea

Многострочное поле для ввода текста

TextField

Однострочное поле для ввода текста

TimePicker

Поле для выбора времени суток с раскрывающимся списком значений

TreeSelect

Иерархический выпадающий список с раскрытием уровней дерева

Data Display14

Accordion

Список со сворачиваемыми секциями контента

Avatar

Визуальное представление пользователя или сущности в виде…

Badge

Небольшая метка, накладываемая на другой компонент

Card

Контейнер для группировки связанного контента

Cell

Строка-ячейка для списков и таблиц

Chip

Компактный элемент в виде метки или тега для отображения…

Counter

Числовой индикатор количества

Divider

Разделительная линия

Indicator

Точечный или цветовой маркер состояния

List

Компонент для отображения упорядоченного набора элементов списком

Loader

Индикатор загрузки контента

Note

Компонент для отображения вспомогательной или пояснительной…

Rating

Визуальное отображение оценки в виде звёзд или произвольных…

Spinner

Частный случай Loader в виде крутящегося элемента, который…

Navigation11

BreadCrumbs

Цепочка ссылок, отображающая путь пользователя в иерархии раздела

Carousel

Компонент для горизонтального прокручивания набора элементов

DropdownMenu

Выпадающее меню со списком навигационных пунктов или действий

Pagination

Компонент для постраничной навигации по большому набору данных

PaginationDots

Элементы переключения с индикатором текущей позиции

ScrollBar

Кастомный компонент полосы прокрутки

Steps

Горизонтальный или вертикальный набор шагов многоэтапного процесса

TabBar

Нижняя панель вкладок для мобильного интерфейса

Tabs

Горизонтальные вкладки для переключения между разделами

Tour

Онбординг-тур

Tree

Иерархический список с раскрываемыми узлами

Overlay9

BottomSheet

Панель, появляющаяся снизу экрана поверх контента

Drawer

Боковая панель, выезжающая поверх основного контента

Modal

Диалоговое окно, блокирующее взаимодействие с основным контентом

Notification

Уведомления поверх контента с возможностью закрытия

Popover

Всплывающий контейнер с расширенным контентом, привязанный к…

ProgressBar

Горизонтальная полоса загрузки с известным процентом завершения

Toast

Временное всплывающее уведомление

ToolBar

Панель инструментов с набором действий

Tooltip

Небольшая всплывающая подсказка по наведению или фокусу