У каждого компонента фиксированный набор вариантов и явные ограничения. Собирайте макеты из них, не изобретая новые состояния.
Форма всегда pill. Primary — зелёная заливка, белый текст: основное действие на светлом фоне. Secondary — белая заливка, зелёный текст: на зелёной или тёмной плашке. Ghost — только зелёная обводка 1,5 px: второстепенное действие рядом с Primary. Нельзя: прямые углы, две Primary-кнопки рядом.
Бейдж, тег, плашка-метка. Всегда pill, одна строка, 1–3 слова. Accent — главный маркер. Subtle — раздел, хронометраж. Outline — нейтральная метка на фото. Inverse — на зелёной или тёмной плашке. Нельзя: длинные фразы, два бейджа одного стиля подряд.
Базовый контейнер контента. Default — белая на светлом фоне, тонкая граница. Muted — мятная подложка без границы. Featured — зелёная заливка, выделяет одну колонку из ряда. Паддинг 24, зазор 16. Нельзя: больше одной Featured в ряду, тень вместе с границей, смешение радиусов на одном носителе.
Контейнер для иконки Lucide. Subtle — мятный фон, зелёная иконка (основной случай). Accent — зелёный фон, белая иконка. Circle — круглая форма для декоративных акцентов. Обводка иконки 2 px. Никогда не заливать иконку цветом и не ставить тень.
Шапка секции: Eyebrow (капс) → Title (Affect Bold, −2%) → зелёная черта 60 × 4 → Subtitle. Все слоты отключаются, минимальный вид — только Title. Нельзя: одно слово на строке, зелёный цвет всего заголовка, черта без заголовка.
Информационная плашка: сноска, предупреждение, важная мысль. Текст — Body/M, максимум 2–3 строки. Нельзя: несколько Note подряд, зелёный текст целиком, использовать вместо карточки для длинного контента.
Числовой показатель: метрика, цена, срок, процент. Число — Display/Hero, зелёное на светлом фоне и белое на тёмном. Подпись — Body/M, не более двух строк. Нельзя: больше четырёх Stat в ряду.
Поддерживающая графика бренда. Circle — мягкая мятная заливка, уходит за угол макета. Ring — разомкнутое кольцо, рифма к знаку МИРЭКС. Arcs — динамические полосы. Всегда за контентом. Максимум два элемента на носитель.