Стайлгайд ФФККР
Рабочий инструмент, а не картинка: отсюда берут токены, атомы и движение при сборке страниц. Сырые цвета и «магические» пиксели в компонентах запрещены — всё через переменные ниже.
Цвет
Сырые шкалы --c-* используются только в файле токенов. Компоненты работают с семантикой --color-*, поэтому одна и та же кнопка живёт и на светлом, и на тёмном.
Бренд
Лёд
Золото наград
Статусы
Семантика
Типографика
Unbounded — только display, заголовки и крупные цифры. Всё остальное Inter.
Пространство, радиусы, тени, слои
Шкала отступов
Радиусы
Тени и свечения
Слои
Движение
Каждый эффект — компонент из components/motion, а не копипаста в странице. Всё уважает prefers-reduced-motion: включите его в системе и перезагрузите страницу — движение исчезнет, вёрстка не поедет.
Длительности и кривые
Компоненты движения
Появляюсь снизу вверх при попадании в экран.
Элемент списка 1
Элемент списка 2
Элемент списка 3
Элемент списка 4
Наведите курсор — свет идёт за ним, подсвечивая границу.
Фон героя. Стекло поверх такого фона не плющится, потому что движется не контейнер.
Стекло и поверхности
Стекло видно только там, где под ним есть что размывать. На белом фоне backdrop-filter не ловит ничего — блок превращается в обычную белую карточку.
Стекло — только поверх изображения или тёмного фона: шапка над героем, подписи поверх кадра, панель над схемой регионов. На светлых секциях вместо стекла — плотная поверхность --surface-1 с ледяной гранью --edge-highlight.
Стеклоblur 20 · saturate 140%
Стеклоblur 20 · saturate 140%
Стеклоblur 20 · saturate 140%Параметры: за счёт чего стекло «дорогое»
blur 12pxblur 20pxblur 32pxsaturate 100%saturate 140%saturate 180%На сайте стоит blur 20px и saturate 140%: 12px не отделяет текст от шумного кадра, 32px превращает фотографию в цветное пятно и заметно грузит прокрутку на мобильном.
Стекло в движении — ради чего оно вообще нужно
Атомы
Все состояния: обычное, наведение, нажатие, фокус с клавиатуры, отключено, загрузка. Пройдите страницу по Tab — кольцо фокуса видно везде.
Card — base / glass / media
Обычная карточка
Поверхность, тень 1, на hover — подъём и тень 2, плюс подсветка.
Стеклянная карточка
Тот же атом на тёмном фоне — цвета берутся из темы секции.
Карточка с обложкой
Обложка 16:9, на hover мягко приближается.
Tabs
Одиночное катание, мужчины — заглушка содержимого вкладки.
Accordion
SectionHeader
Календарь сезона
Метка, заголовок и ссылка «все» — единственный допустимый способ открыть секцию страницы.
Тёмная секция
Секция помечена data-theme="dark". Ни один атом внутри не знает про тему — они просто читают те же --color-*.
Атомы перекрашиваются сами
Те же компоненты, ни одного отдельного «тёмного» класса.
Карточка на тёмном
Поверхность, граница и текст — из семантики темы.
Стекло на тёмном
Тот же атом, другой фон.
Событийные темы
Сайт реагирует на события, а не на человека: время суток, праздник, идущий старт. Профилирования и трекеров здесь нет. Примерьте тему — оформление сменится на живой странице.
Сейчас на сайте: обычное оформление
Пока есть старт со статусом «идёт»
Лайв-блок поднимается наверх, пульсирующий акцент
«Сейчас идёт соревнование»
Включается вручную после крупной победы, живёт 48 часов
Золотое свечение героя и строка-поздравление
«Победа на международном старте»
8 января
Праздничный акцент, конфетти один раз, строка о празднике
«Сегодня День фигурного катания в России»
20 декабря — 8 января
Холодный синий с золотом, редкие снежинки
«С наступающим»
23 февраля, 8 марта, 9 мая, 12 июня
Сдержанно: акцент и строка-поздравление, без декора
«С праздником»
Декабрь, дату ISU объявляет каждый год отдельно
Акцент и строка о всемирном дне
«Всемирный день конькобежного спорта»
1–30 сентября
Календарь поднимается выше новостей, строка «Сезон открыт»
«Сезон открыт»
Календарная зима
Иней по краю героя, холоднее фон
Строки в герое не добавляет
За один-два дня до праздника из реестра
Только строка микрокопии, оформление обычное
«Скоро праздник»
Служебное состояние
Не оформление, а рабочий режим сайта: включается и снимается вручную из админки.
Включается вручную из админки, снимается вручную
Монохром, весь декор и анимации выключены, чёрная лента у логотипа
Строки в герое не добавляет