Единый язык интерфейса Your Pelican: цвета, типографика, сетка и компоненты. Всё построено на CSS-переменных — один источник правды для двух тем. Эта страница служебная и не связана с навигацией сайта.
Переключите тему кнопкой вверху, чтобы увидеть, как каждый токен ведёт себя в светлом и тёмном режимах.
data-theme="light") переопределяет те же роли, не добавляя новых. Хардкод цвета вне токенов недопустим.cubic-bezier(0.16, 1, 0.3, 1), короткие длительности, отклик на наведение. Движение поддерживает, а не отвлекает.Восемь ролей. Имя роли остаётся одним и тем же в обеих темах — меняется только значение.
Один шрифт — Google Sans. Размеры заголовков текучие (clamp()): крупно на десктопе, компактно на телефоне. Метки — мелкие капсом с широким трекингом.
Шкала отступов от 6 до 120px. Фоновая сетка — модуль 72px, задаёт ритм всей композиции. Контейнер: max-width 1200px, боковые поля 36px.
На сайте линии сетки ещё тише — 4% белого (тёмная тема) / 5% чёрного (светлая); здесь показано через --border (8%) для читаемости.
Готовые блоки интерфейса. Все используют общие токены, поэтому автоматически подхватывают тему.
Вордмарк: акцентное «your» + текстовое «pelican». Ссылки стоят вертикально, выровнены вправо (как в нижнем правом углу страниц сайта): капс 0.67rem, непрозрачность 0.6→1 при наведении (в светлой теме базовая 0.8). Брендовый акцент — только на :active. Квадратный переключатель темы 32px.
Центральный слайд в фокусе, боковые уходят в перспективу. Глубина задаётся translateZ, чтобы активный кадр всегда был поверх и оставался резким.
Поля прозрачные, рамка 1px --border; фокус красит рамку в акцент, состояние ошибки — в --red (второе поле выше). Плейсхолдер — --faint. Кнопки формы (.cm-btn) — капс 0.67rem/700, на всю ширину; первичная залита акцентом, вторичная — Telegram.
Анимация поддерживает, а не отвлекает: короткие длительности, единая кривая, движение всегда заканчивается покоем.
cubic-bezier(0.16, 1, 0.3, 1), 150–450 мс. Открытие модалки: фон opacity .35s, диалог scale .45s.rAF в покое — фоновая вкладка не крутит цикл, страница остаётся тихой.Два декоративных эффекта сайта. Каждый — на отдельной подложке, запускается один раз и затихает. Нажмите кнопку, чтобы повторить, или наведите курсор на пеликана.
При открытии формы «обсудить проект» один мягкий фронт расходится от краёв диалога к краям и растворяется ровно в момент достижения края — без зависания. Единая фаза DURATION 1.0с (easeOutCubic), растворение — последние 22% прохода; короткий шлейф TRAIL 48px даёт чёткий гребень. Яркость и плотность глифа растут к краям. На сайте — только десктоп (≤768px отключена).
Логотип на главной собран из частиц, сэмплированных из SVG в data-URL (чтобы canvas не тейнтился). Частицы разлетаются от курсора и пружинят домой (SPRING 0.035, FRICTION 0.85), rAF останавливается в покое. Плотность STEP — 6 на десктопе / 4.8 на мобайле (+50% точек). Цвет — всегда брендовый акцент.