АйДаКемп · design/glassmorphism-v1

Дизайн-система v2

Все правки собраны в одном месте: кнопки, spacing, motion, модалки, breakpoints

v2 · 2026-04-29 Изменения vs v1 помечены NEW FIX
ТокеныКнопкиSpacingMotionZ-indexКарточкиФормыHero mobileМодалкиFAQSkeletonФотоBreakpointsGlass WCAGDo/Don't
01 · Токены

Цвета — единственный источник правды

Только через CSS-переменные. Никаких #ec7c00 в компонентах.

Brand Orange
bg-primary / text-primary
#ec7c00 · Единственный CTA
hover:bg-primary-hover
#d46e00 · Hover кнопок
text-primary-light
#f59332 · Иконки, акценты
bg-primary-soft
#fff1df · Фон бейджей, pill
bg-primary-muted
rgba(236,124,0,.12) · Ghost-элементы
Brand Blue + Surfaces
bg-blue
#1b4fd8 · Ссылки, бейджи доверия
bg-blue-s
#eff6ff · Фон секции Shifts, FAQ
bg-navy
#0d1a2b · Hero фон, overlay
bg-surface
#f7f8fb · Основной фон страницы
bg-surface-alt
#f0f4ff · Голубой фон секций
bg-surface-warm
#f7f5f2 · Тёплый (About, Дарья)
Типографика — шкала
44px
H1 Desktop Hero
36px
H1 Mobile Hero
28px
H2 крупный
24px
H2 стандарт
20px
H3 карточки
18px
Подзаголовки
16px
Основной текст ← минимум
14px
Labels · badges только
12px
Подписи к иконкам
02 · Кнопки FIX

Кнопки — 4 варианта вместо одного «тяжёлого»

Текущая проблема: полная ширина + тёмный текст на оранжевом → давит. Новое правило: всегда белый текст на цветном фоне.

A — Pill РЕКОМЕНДУЕМ
Смотреть смены ↓
class="btn btn-orange btn-pill-xl" border-radius: 100px /* не xl — pill */ color: white /* не #1e2430! */ width: auto /* не 100%! */
Pill снимает агрессию: та же оранжевая, но форма мягче. Не на всю ширину — воздух по бокам. Пульс-анимация только на главном CTA.
B — Dark Navy NEW
class="btn btn-navy btn-pill-xl" background: #0d1a2b color: white /* оранжевый акцент — иконка */
Премиально, тихо. Оранжевый не кричит, но иконка Telegram остаётся якорем. Хорошо работает поверх светлых секций.
C — Два действия NEW
/* Первая — главная, вся ширина */ /* Вторая — ghost, снимает давление */
Снимает ощущение «одного правильного пути». Мама может выбрать — посмотреть смены или написать сразу.
D — Outlined (вторичные кнопки)
ShiftCard — действия
Contacts / Links
Размерная шкала — применение
btn-xl · 52px Hero CTA, Sticky CTA btn-pill-xl → border-radius:100px
btn-l · 48px Form submit, ShiftCard Выбрать btn-pill-l или rounded-xl
btn-m · 44px Secondary CTA, Contacts rounded-lg
btn-s · 36px Card utilities (Даты, Детали) rounded-md
✗ ЗАПРЕЩЕНО — текущий вариант
Контраст 4.1:1 — WCAG AA не проходит на 16px тексте.
Тёмный текст на оранжевом — непривычно, глаз ожидает белый.
✓ ПРАВИЛЬНО — белый текст
Контраст 5.2:1 — WCAG AA ✓
Pill форма снимает «давление», white text — привычно.
03 · Spacing NEW

Шкала отступов

Сейчас в коде: mt-2, mt-3, mt-4, gap-1.5, gap-2.5 — хаос. Шкала: кратно 4px.

4px var(--s1) gap между иконкой и текстом внутри badge
8px var(--s2) gap между кнопками, отступ badge от края
12px var(--s3) padding карточки маленькой, gap в форме
16px var(--s4) padding px карточки, gap между элементами
24px var(--s5) padding py секции внутри карточки, mx мобиль
32px var(--s6) gap между карточками, padding крупных блоков
48px var(--s7) padding py секции страницы
64px var(--s8) gap между крупными секциями
/* Запрещено: произвольные отступы */ mt-[14px] gap-[6px] px-[18px] ← ✗ /* Правильно: шкала */ mt-3 (12px) gap-2 (8px) px-4 (16px) ← ✓
04 · Motion NEW

Анимации и переходы

Три скорости. Только transform/opacity — не width/height.

fast 150ms
ease-out
Hover кнопок, badge, иконки
base 220ms
cubic-bezier(0.16,1,0.3,1)
Карточки, dropdown, FAQ
slow 350ms
ease-out
Модалки, drawer, hero элементы
spring 300ms
cubic-bezier(0.34,1.56,0.64,1)
Bounce эффект, shift-карточка hover
Правила
✓ Animate: transform, opacity, box-shadow
✓ prefers-reduced-motion: skip all transitions
✓ Hover: translateY(-2px) + shadow up
✓ Active/tap: scale(0.975) — 150ms
✗ Animate: width, height, top, left
✗ Bounce на основных CTA (только на spring-компонентах)
✗ Анимации >400ms в UI (тормозит ощущение)
✗ Spinner без disabled на кнопке
Reduced motion
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
05 · Z-index NEW

Слои — порядок перекрытия

Конфликты: StickyCta перекрывал Header на некоторых устройствах. Фиксированная шкала.

z-toast 100 Toast-уведомления, глобальные ошибки
z-modal 50 Модалки, drawer, backdrop
z-header 30 Header / Navbar — всегда поверх контента
z-sticky 20 StickyCta, PhoneDropdown, BookingBar
z-card 10 Hover карточек (translateY + shadow)
z-base 0 Обычные элементы
06 · ShiftCard

Карточки смен — до и после

До — bg-slate-50, белый фон секции

IT + Творчество

Открыта

27 июня — 10 июля · 14 дней

59 000 ₽
✗ Тёмный текст на кнопке · белый фон не контрастирует с glass
После — glass-surface на #eff6ff NEW

IT + Творчество

Открыта

27 июня — 10 июля · 14 дней

59 000 ₽
✓ glass-surface · белый текст на кнопке · синий тинт тени
Популярная смена — orange border
Популярная

Хакатон Pro

3 места

11 — 24 июля · 14 дней

65 000 ₽
07 · Hero Mobile FIX

Hero Mobile v2 — с тегом и pill-кнопкой

[фото детей]
Пока другие на даче — ваш сделает AI-проект

Летний лагерь
в Подмосковье

7–15 лет · от 48 000 ₽

7
лет опыта
1200+
детей
5.0★
Яндекс
ТОП-4
в России
Лицензия Медсестра Страховка
NEW
Tagline pill
«Пока другие на даче — ваш сделает AI-проект» · оранжевый тег поверх фото
FIX
Pill кнопки
Не full-width прямоугольники — pill border-radius:100px
FIX
Белый текст
color:white на всех CTA-кнопках (было #1e2430)
NEW
Два действия
Основная + ghost «Смотреть смены» — снимает давление
NEW
Glass-dark метрики
rgba(255,255,255,0.08) + blur(12px) поверх тёмного фона
NEW
Glass trust pills
Лицензия/Медсестра/Страховка — glass вместо синих блоков
08 · Модалки NEW

ShiftBookModal / ShiftInfoModal

IT + Творчество

27 июня — 10 июля

14 дней · Подмосковье

59 000 ₽
Питание, проживание, программа, трансфер
Bottom sheet — мобиль. Drag-handle, backdrop blur, border-radius 24px top.
Правила модалок
z-index: 50 z-modal — поверх header (z=30)
backdrop: blur(4px) rgba(13,26,43,0.7) — не чёрный, не прозрачный
border-radius: 24px 24px 0 0 Bottom sheet на мобиле
drag-handle: 40×4px bg-gray-200, center, margin-bottom 20px
close: ESC + backdrop click Keyboard accessible
focus trap Tab внутри модалки, не выходит наружу
scroll lock body overflow:hidden пока модалка открыта
animation: slideUp translateY(100%) → 0, duration:350ms, ease-out
09 · Loading states NEW

Skeleton & состояния загрузки

ShiftCard skeleton
Кнопка — состояние загрузки
Правила loading states
disabled во время запроса pointer-events:none, opacity:0.85
Spinner 20×20px stroke-width:3, white, spin 0.8s
Текст меняется «Записаться» → «Отправляем...»
Success: зелёная bg:#10b981, иконка check, 2с потом закрыть
Error: красная рамка border-red-400, текст ошибки под кнопкой
Skeleton вместо пустого всегда skeleton при загрузке данных
10 · FAQ аккордеон NEW

FAQ.astro — паттерн

Ноутбук нужен? +
Нет. Всё оборудование предоставляем. Достаточно приехать с рюкзаком.
Можно ли с нулевым опытом? +
Как забрать ребёнка досрочно? +
/* Правила FAQ */ details → border-radius:14px, border:#e5e7eb summary → padding:16px 20px, font-size:16px, fw:600 open indicator → «+» rotate(45deg) on open, color:blue answer → padding:14px 20px 16px, font-size:15px transition → max-height 220ms ease-out (CSS only)
Фон секции FAQ
Часто спрашивают

Секция на bg-surface-alt (#f0f4ff). FAQ-карточки — белые на голубом. Не glass.

Glass на #f0f4ff даст слабый эффект — достаточно просто белых карточек на голубом фоне. Экономим backdrop-filter.
11 · Фото NEW

Правила использования фотографий

Aspect ratio Hero mobile 3:4 или 1:1. object-position: center 35% — лица не обрезаются
Aspect ratio карточки 16:9 или 3:2 для галереи. Не portrait в горизонтальных рядах
object-fit cover везде. Никаких contain (пустые полосы)
Лица Всегда в верхней 60% кадра. object-position: center 30%
Улыбки Приоритет фото где дети смеются. Никаких «серьёзно работаем»
Градиент поверх Всегда есть overlay для читаемости текста. Не убираем
Размеры AVIF primary + WebP fallback. 390w мобиль, 800w планшет
Alt text hero — alt="" (decorative). Галерея — alt="[описание сцены]"
Lazy loading loading=eager только Hero. Все остальные — loading=lazy
12 · Breakpoints NEW

Что меняется на каждом размере

Компонент Mobile <768px Tablet 768–1024px Desktop >1024px
Hero Mobile.astro — фото+текст+pill кнопки Скрыт (md:hidden) Desktop.astro — две колонки
Shifts Горизонтальный скролл, snap Горизонтальный скролл Сетка 3 колонки
ShiftCard min-w-[calc(100vw-48px)] min-w-[320px] auto, grid-item
LeadForm variant=mobile, полная ширина полная ширина variant=desktop, max-w-md
StickyCta fixed bottom-0, z-20 fixed bottom-0 hidden (md:hidden)
FAQ Карточки на всю ширину 2 колонки 2 колонки max-w-4xl
Reviews 1 карточка (горизонтальный скролл) 2 карточки 3 карточки
Header Логотип + burger меню Логотип + burger Полная навигация
Footer 1 колонка, стек 2 колонки 4 колонки
13 · Glass + WCAG NEW

Контраст на glass-элементах

Основная проблема: backdrop-filter меняет контраст в зависимости от подложки. Решение — минимальный контраст зафиксировать через цвет текста.

glass-dark на тёмном фото (Hero) 18px+ → WCAG AA
Контраст >7:1 на тёмном. Для маленького текста — только 14px+ bold
glass-surface на #eff6ff (Shifts) 16px+ → WCAG AA ✓
Практически белый фон. #1e2430 даёт 14.5:1
glass-dark метрики (Hero 2×2) OK крупный текст
Мелкие подписи 11px: только rgba(255,255,255,0.45) — не WCAG, но допустимо как decorative
Trust pills на тёмном 11px → НЕ WCAG
Декоративные — не основной контент. Но лучше сделать white 100%
Input на CTA (синий фон) 16px placeholder → риск
Placeholder серый на стекле — сложно. Лучше белый bg для input
14 · Do / Don't — чек-лист PR

Перед каждым коммитом

Делай
Кнопки pill border-radius:100px · белый текст · auto-width (не 100%)
Цвета bg-primary / text-primary · никаких bg-orange-500
Шрифт Inter · min 16px для контента · 14px только label/badge
Радиусы 8/12/16/20/24/100px · не произвольные [14px]
Spacing Шкала 4/8/12/16/24/32/48px · не mt-[14px]
Иконки bi-* с aria-hidden="true" · только из icons-manifest.json
Glass Только на цветном/тёмном фоне · не на белом
Motion transform/opacity · 150-350ms · prefers-reduced-motion
Z-index Шкала 10/20/30/50/100 · не z-[99]
Ветка Работаем только в design/glassmorphism-v1
Не делай
bg-orange-* любые Tailwind-оранжевые · только bg-primary
Тёмный текст color:#1e2430 на оранжевой кнопке → всегда white
Прямоугольник full-width + large button = давит · pill или auto-width
Glass на белом невидимо и бессмысленно
Comfortaa не использовать шрифт в production компонентах
Emoji в UI 🚀 🎯 ⚡ 🔥 вместо bi-* — запрещено
Arbitrary values rounded-[14px] mt-[18px] → только шкала
width/height animate только transform/opacity для GPU-ускорения
Partytown разбивает Яндекс.Метрику · инцидент 60К₽
Прямой push в dev только через PR из design/glassmorphism-v1
Порядок реализации
P1 · 2ч
Токены
bg-primary везде · белый текст на кнопках · радиусы
P2 · 3ч
Shifts glass
Фон #eff6ff → glass ShiftCard · glass utility кнопки
P3 · 2ч
Hero mobile
Pill кнопки · tagline pill · glass метрики и trust
P4 · 2ч
Hero desktop
Нижняя плашка → glass · бот-кнопка рядом
P5 · 1ч
CTA блок
Синий фон · glass форма · pill кнопка