🧪 Варианты дизайна
4 карточки
Вариант A
Акцентная полоса слева, минимум деталей. Чисто и строго.
border-left · 4px
Вариант B
Заливка цветом фона, мягкий и уютный вариант.
background: accent-light
Вариант C
Скругление сверху-слева и снизу-справа + цветная «подложка».
border-radius: 30px 8px
Вариант D
Пунктирная рамка, прозрачный фон — лёгкий и воздушный.
border: 2px dashed
🔘 Варианты кнопок
5 стилей
Обычная
Главная
Обводка
Ghost
Маленькая
Большая
⚡ все кнопки — статичные (без JS), стили через классы
✒️ Типографика
вариации текста
Заголовок с весом 700
Подзаголовок чуть светлее
«Хороший дизайн — это когда всё выглядит так, как будто иначе и быть не может.»
— мелкий текст для мета-информации
📋 Стилизованный список
с декоративным маркером
- Пункт списка с нестандартным маркером
- Второй пункт — разделитель снизу
- Третий пункт, и последний без разделителя
◆ маркер через ::before
🎨 Цветовая палитра
основные цвета
все цвета управляются через CSS-переменные в :root
✨ Симпатичные мелочи
детали, которые радуют глаз
Живая точка
Анимация пульсации —
простая, но оживляет страницу.
градиент
→
Плавный переход цвета — всегда выглядит дорого.
Индикатор прогресса / пагинация —
минималистично и понятно.
✦
Декоративная плашка
с символом и мягкой тенью