Карточка инструмента
Используйте для элементов каталога, метрик, сводок функций и кратких превью.
Токены
Цвет, отступы, скругления и анимация
Токены — единственный допустимый источник истины для визуальных примитивов. Новые страницы должны использовать их, а не переопределять.
Фон
Поверхность
Акцент
Радиус
6 / 10 / 16
Используйте только `sm`, `md`, `lg`.
Отступы
8-32
Большая часть интерфейса помещается в основной диапазон отступов.
Анимация
150–220 мс
Переходы должны оставаться ненавязчивыми и быстрыми.
Типографика
Читаемая иерархия с компактной плотностью
H1 страницы: основная идентичность страницы
Раздел H2: основной блок контента
Группа карточек H3: вторичная группировка
Карточка H4: стандартный заголовок карточки
Лид-текст зарезервирован для коротких вступлений на странице и пояснительных подзаголовков.
Основной текст — слой по умолчанию для справочного текста, описаний инструментов и пояснений результатов.
Подпись используется для метаданных, счётчиков, примечаний к полям и вторичных подсказок.
Карточки
Стандартизированные контейнеры контента
Карточка списка
Используйте для строк результатов, связанных инструментов, списков переходов или блоков недавней истории.
Элементы управления
Кнопки, поля, пилюли и язык состояний
Паттерны
Переиспользуемая компоновка страницы
!
Основное уведомление
Используйте блоки уведомлений для справочного текста, сообщений о конфиденциальности или ограничений инструмента.
| Слой | Сценарий использования |
|---|---|
| Токен | Цвет, типографика, отступы, анимация |
| Основы | Примитивы типографики и компоновки |
| Компонент | Кнопки, карточки, элементы форм |