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

Открытая страница: смотреть можно всем. Она вшивает настоящие стили продукта и рисует настоящую разметку компонентов — это не перерисовка, а те же самые кнопки, бейджи и поля. Значения собраны из tokens.css при сборке, поэтому разойтись с продуктом им нечем. Тема одна — светлая.

Цвет

Основа

Акцент

Служебные

Полупрозрачные: --background-50 rgba(255, 255, 255, 0.5) · --surface-75 rgba(255, 255, 255, 0.75) · --accent-soft rgba(194, 233, 0, 0.18)

Типографика

основная	Helvetica Neue Cyr — --font-body
заголовочная	Helvetica Display, начертание 900 — --font-display
моноширинная	Disket Mono — --font-mono. Без строчной кириллицы: «чат» превращается в «ЧАТ». Для русского не использовать.

Ниже — настоящие классы .text-* продукта. Кегль крупных строк уменьшен для показа, остальное как в коде.

класс	кегль / вес / интерлиньяж	образец
text-alpha	112px / 900 / 124px	Играем сегодня
text-xxl-1	72px / 900 / 84px	Играем сегодня
text-xxl-2	56px / 900 / 68px	Играем сегодня
text-xl	48px / 900 / 56px	Играем сегодня
text-lg	28px / 900 / 36px	Играем сегодня
text-title1	24px / 500 / 32px	Играем сегодня
text-title2	20px / 600 / 24px	Играем сегодня
text-body-1	17px / 600 / 22px	Играем сегодня
text-body-2	15px / 500 / 20px	Играем сегодня
text-callout	13px / 500 / 18px	Играем сегодня
text-caption	12px / 600 / 16px	Играем сегодня

Кнопки

Настоящие .btn продукта: четыре размера, пять видов, выключенное состояние.

размер	высота / кегль	кнопка
btn--sm	32px / 15px	Играть
btn--md	44px / 17px	Играть
btn--lg	52px / 19px	Играть
btn--xl	60px / 22px	Играть

Бейджи

Обычный бейдж набирается ПРОПИСНЫМИ (text-transform: uppercase) — помните про кириллицу в моношрифте, здесь она набирается основной гарнитурой и потому читается.

Поля и состояния

Настоящий .input. Состояние фокуса живьём показать статикой нельзя — рядом приведены его значения из кода.

Карточки и поверхности

В продукте карточку обрезает суперэллипс (clip-path), а её тень рисует отдельный слой SVG по тому же контуру. Здесь показана обычная CSS-геометрия: приём с обрезкой требует скриптов, а эта страница обязана читаться без них.

Радиусы и сглаживание

Сглаживание угла — --shape-smoothing: 0.6. Это буквально параметр Figma «Corner smoothing» (у пресета iOS он 60%). В макете: ставьте нужный радиус и сглаживание 60%.

Рамка — 1px solid rgba(var(--border-color), var(--border-opacity)).

Тени и стекло

--shadow-soft	0 2px 8px rgba(15, 15, 15, 0.06)
--shadow-card	0 6px 16px rgba(15, 15, 15, 0.07), 0 2px 4px rgba(15, 15, 15, 0.05)
--shadow-float	0 24px 60px rgba(15, 15, 15, 0.12), 0 6px 16px rgba(15, 15, 15, 0.07)
--glass-bg	rgba(255, 255, 255, 0.72)
--glass-blur	blur(24px) saturate(140%)
--glass-border	rgba(15, 15, 15, 0.08)

Канонические числа тени карточки, которую рисует слой SVG: смещение вниз 8, размытие ≈18px, #0F0F0F при 14%.

Состояния

состояние	как выражено
нажатие	кнопка темнеет до --accent-pressed #a8cb00 и слегка сжимается
выключено	:disabled — прозрачность и запрет указателя, см. образец выше
фокус	:focus-visible — видимое кольцо; появляется только при вводе с клавиатуры
загрузка	класс .skeleton — серая плашка с бегущим бликом вместо содержимого
ошибка	цвет --error #d62839; текст ошибки называет, ЧТО делать, а не только что сломалось
живое событие	.badge--dot и .card--live — пульсация, а не заливка

Движение

Кривые заданы функцией linear(), а не cubic-bezier: пружину тремя точками Безье не описать, а именно она даёт фирменный отскок.

токен	назначение
--ease-spring	пружина: появление и перелёт
--ease-pop	рождение «из ничего»
--ease-snap	резкий доводчик, null
--ease-standard	null
--dur-fade	—
--dur-slide	—
--dur-scale	—
--dur-scale-xl	—
--dur-twitch	—
--dur-loop	—

Ритм экрана

--space-block	56px	между блоками
--space-head	20px	заголовок блока → содержимое
--space-cards	24px	между карточками
--tabbar-height	88px	высота нижней навигации

Иконки — 36 шт.

Достаны разбором icons.tsx: это те же самые контуры, что в продукте, а не срисованные. Основа — 24×24, обводка currentColor толщиной 2, скруглённые концы. Цвет наследуется от текста, поэтому иконка красится там, где стоит.

Виды спорта

Фотографии видов и знаки режимов игры: solo — одиночная, pvp — на двоих, tournament — турнирная.

Логотип

Карточки для пересылки

Картинки и ролики, которыми приглашение и результат уходят в мессенджер.

Обложки — 87 шт.

Заставки турниров и разделов.

Баннеры — 32 шт.

Портреты по умолчанию — 36 шт.

«Смуф»-квадраты вместо пустого аватара. Круглых портретов в продукте нет вовсе — решение владельца.

Графики

График рейтинга — лента с прокруткой, а не карточка: точки идут ровным шагом по 26px, в кадре около пятнадцати, остальное листается пальцем в прошлое. Открывается лента на КОНЦЕ — свежая игра важнее первой. Ось X по играм, не по времени: у любителя игры редкие и кучные, шкала дат дала бы пустые недели и слипшиеся вечера.

Всё пунктирное и без заливки. Решение владельца: «просто сухая пунктирная линия с точечками», «засветка салатовая как будто портит». Площадь под кривой ничего не значит — Эло это не объём и не деньги. Лайм из оформления убран целиком и оставлен единственной роли — отмечать ВЫБОР. Точка сделана из двух окружностей с зазором: он читается как визир прибора, а не как маркер данных.

что	как задано в коде
линия	--on-background, толщина 1.75, пунктир 6 4, прозрачность 0.85, скруглённые концы, без заливки
сетка	пунктир 2 4 при 0.08; базовая линия — 5 5 при 0.22
визир	пунктир 3 4 при 0.35
точка	кольцо r 5.5 при 0.28 + ядро r 2.4, цвет --on-background
выбранная точка	кольцо r 8.5 толщиной 2 + ядро r 3.6, цвет --accent — единственное место, где на графике есть лайм
размеры	высота 240, поля сверху 22 и снизу 34, шаг точки 26, отступ ленты 22
кривая	монотонный сплайн Fritsch–Carlson — не перелетает узлы
сетка значений	3–4 линии на круглых значениях, шаг из ряда 10·20·25·50·100·200·500
подпись времени	месяц словом под лентой, липнет к левому краю, пока не въедет следующий

Места

Карточка площадки (.place-card): снимок, название .text-title2, строка «адрес · расстояние» .text-caption.text-secondary, описание .text-body-2 и лента чипов .place-chips с видами спорта. Есть и узкий вариант строкой — .place-row. Содержимое приходит из базы, поэтому здесь показана ФОРМА, а не выдуманная площадка.

Навигация и оверлеи

Нижняя навигация — пять ячеек, высота 88px, низ учитывает безопасную зону. Слева направо: Главная (дом), Рейтинг (кубок), Создать игру (круглая лаймовая), Места (пин), Профиль. Названия живут в aria-label: подписей под значками нет, но для скринридера пять безымянных ссылок были бы неразличимы. Иконки 26×26, у кнопки создания 28×28.

Шторка (.sheet) выезжает снизу, высотой до 85% экрана, с полоской-ручкой сверху; фон за ней затемняется и размывается. Само движение статикой не показать — оно на живой витрине.

Оболочка десктопа

Продукт мобильный. На широком экране он показывается в рамке телефона по центру, а витрина — вьюпортами: по одному или двумя рядом («Мобильный» + «Десктоп»). У телефона и планшета ширина фиксирована, у десктопа — по свободной ширине. Высота ограничена высотой НАСТОЯЩЕГО устройства: иначе расчёты от vh (например max-height: 85vh у шторки) на большом мониторе разошлись бы с телефоном. На низком окне кадр ниже — это видно по подписи.

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

Настоящий .skeleton: серая плашка с бегущим бликом на месте будущего содержимого. Формой повторяет то, что заменяет, — иначе при подстановке экран прыгает.

Звук — 10 сигналов

Каждый сигнал лежит двумя форматами: webm и m4a. Два не про запас — Safari отвечает, что webm играет, и на Opus падает с ошибкой раскодирования, поэтому нужен запасной. Ниже можно послушать и скачать.

Контент — можно скачать

Всё, что есть в продукте: заставки, баннеры, карточки пересылки, портреты, знаки режимов, логотип, шрифты. Нажатие на имя файла скачивает его.

Заставки и обложки — 87 шт.

Баннеры — 32 шт.

Карточки для пересылки — 7 шт.

Виды спорта — 4 шт.

Знаки режимов игры — 9 шт.

Портреты по умолчанию — 36 шт.

Логотип — 1 шт.

Шрифты — 6 файлов

Чего здесь нет — и почему

Честный список: эти разделы живой витрины статикой не показать, и подделывать их картинкой было бы враньём.

движение	кривые и длительности выписаны выше, но САМО движение — только в браузере
карта	Яндекс.Карты, живой виджет
данные	рейтинги, составы, расписания приходят из базы

Всё перечисленное есть на живой витрине — /design — там, где можно нажимать.