Дизайн-система
Общий стиль для всех идей
Один CSS-файл, три темы, адаптивная сетка без брейкпоинтов и готовые компоненты. Переключите тему в шапке и поменяйте ширину окна — всё должно оставаться читаемым и удобным.
Типографика
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Основной текст плавно масштабируется от телефона до большого монитора. Системный шрифт — без загрузки веб-шрифтов, страница показывается сразу. Ссылка в тексте, inline code и Ctrl+K.
Второстепенный текст — подписи, пояснения, даты.
Мелкий текст для сносок.<button class="btn">Сохранить</button>Цвета темы
--bg--surface--surface-2--text--muted--accent--success--warning--dangerКнопки
Формы
Карточки и сетка
Колонки перестраиваются сами по доступной ширине: 1 на телефоне, 2–3 на планшете, 4 на ПК.
Сообщения
Инфо. Нейтральное сообщение.
Готово. Изменения сохранены.
Внимание. Осталось 3 дня пробного периода.
Ошибка. Не удалось отправить форму.
Обычный
Акцент
Успех
Внимание
Ошибка
| Идея | Статус | Посетители | Конверсия | Запуск |
|---|---|---|---|---|
| Трекер привычек | Работает | 1 240 | 4.2% | 2026-10-01 |
| Лендинг X | Тест | 380 | 1.1% | 2026-10-08 |