Серия писем для запуска
Плотная карточка с понятным статусом, сроком и мягким акцентом.
Reference file
Дизайн-система для частой работы
Компактный визуальный язык для приложений: спокойные акценты, тонкие линии, читаемые формы, плотная навигация и темы без усталости для глаз.
1. Цветовая палитра
Поверхности и текст
--bgtheme
--surfacetheme
--surface-2theme
--bordertheme
--texttheme
--text-2theme
--text-3theme
--mutedtheme
Акцент и сайдбар
--accenttheme
--accent-softtheme
--accent-2theme
--sidebar-bgtheme
Семантика и стадии
--successtheme
--warningtheme
--dangertheme
--infotheme
2. Темы
Темы переключаются через html[data-theme]. Меняются акцент, мягкий фон тегов, состояние кнопок и выбранные элементы навигации.
Teal
Forest
Coral
Violet
Cobalt
Turquoise
3. Типографика
Шрифт: Inter с системным fallback. Базовый размер: 14px, line-height 1.45. Заголовки плотные, без чрезмерной крупности.
H1 — Заголовок страницы
H2 — Раздел
H3 — Подзаголовок
Body — основной текст для карточек, описаний, форм и рабочих экранов.
Muted — вспомогательный текст, пояснения и тихие подписи.
SMALL — МЕТАДАННЫЕ 12PX4. Радиусы и тени
Радиусы
6 / sm
8 / base
12 / lg
16 / xl
Тени
--shadow-sm
--shadow-md
--shadow-lg
5. Кнопки
Варианты
Размеры
С иконкой
6. Формы
Покажется в карточке и календаре
Введите валидную дату в формате ДД.ММ.ГГГГ
Чекбоксы и переключатели
7. Бейджи, чипы, статусы
готово
в работе
ошибка
инфо
email
анонс
заметка
лендинг
8. Карточки и списки
Лендинг продукта
Карточки не должны спорить с контентом, только помогать сканировать.
Список задач
- Уточнить цветовые токены Сегодня
- Проверить мобильный вид Сегодня
- Подготовить тему Coral Завтра