design guide v2.0 · 26.09.2026

Club
Edition

Характер портала — классическое спортивное медиа, которому доверяют: светлая редакционная подача, много воздуха, крупные фотографии, чистые карточки. Счёт читается мгновенно, потому что вокруг него ничего не шумит. Фирменный характер держат два цвета: кортовый зелёный и лаймовый мяч.

01 / логотип

Знак и его модификации

Обязательные элементы сохранены: слово «today.tennis» и мяч. Мяч — залитый лаймовый круг с тёмными дужками; он же работает индикатором подачи в скорборде и аватаром редакции в комментариях. Слово набирается Inter Tight Extrabold: «today» — кортовым зелёным, «.tennis» — чёрным (на тёмном — «today» лаймовым, «.tennis» белым).

today.tennis
today.tennis
мяч = подача в скорборде
02 / палитра

Белое поле, зелёный корт

Основа — белый и тёплые светло-серые подложки; текст почти чёрный, для чтения часами. Кортовый зелёный — единственный акцент для ссылок и интерактива, читается на белом. Лаймовый мяч — только для live-событий и на тёмных поверхностях. Глина и небо — семантика второго уровня: превью/Challenger и аналитика/WTA.

#FFFFFFфон страницы --bg
#F6F7F4подложки, hover --bg-soft
#EEF2E7тёплый тинт, очки в гейме --bg-tint
#12160Fосновной текст --ink
#6B7263вторичный текст --muted
#E4E7DEразделители --line
#1D7A3Aкорт: ссылки, акценты --court
#C8E415мяч: live, подача, на тёмном --ball
#C65F2Bгрунт: превью, Challenger --clay
#2B6CB0аналитика, WTA --sky
#D92D20live-бейдж --red
#101408тикер, футер, матч-центр --dark
03 / типографика

Четыре шрифта, четыре роли

Inter Tight Extrabold — заголовки и навигация: плотные, уверенные, без капса. Inter — интерфейс и подводки. Spectral — тело статей: сериф для длинного чтения, как у The Athletic. JetBrains Mono — только счета и таблицы, с tabular-nums, чтобы цифры не «прыгали» при обновлении.

Inter Tight 800 · заголовки
tracking −0.03em · без капса
Шторм в Пекине
32–84px
Inter Tight 700 · подзаголовки,
карточки, имена
Полуфинал, в котором решит приём
17–24px
Spectral 400 · тело статей
line-height 1.72 · max-width 720px
Пекинский финал начался так, как закончился их предыдущий матч: Алькарас атаковал вторую подачу и вёл 4:2. Но с этого момента Синнер выиграл восемь геймов из десяти.
18–20px
JetBrains Mono 500/700 · счета,
таблицы · tabular-nums обязательно
6:4  4:6  7:6⁵  ·  30:15
11–19px
04 / компоненты

Карточки, бейджи, кнопки

— кнопки: скругление 10px; primary чёрная, live-действие — лаймовая

— бейджи туров и киккеры рубрик: цвет = семантика

ATP 500 WTA 1000 Challenger ITF Репортаж Аналитика Превью Дата-стори

— статусы матча

Live FT · 2:04 19:30 МСК

— тикер и матч-центр: единственные тёмные элементы, «спорт-бар» поверх светлой страницы

Итоги
ATP · ПекинСиннер6:4 3:6 7:6⁵Муте WTA · ТокиоОсака6:2 6:1Кесслер CH · БрноКопржива4:6 6:3 6:2Риди
05 / состояния

Живой счёт

Изменение счёта вспыхивает лаймовым на ~1.2 секунды (в демо вспышки идут сами). Текущие очки гейма всегда на тёплом тинте — отдельно от посетового счёта. Hover по строке — мягкая серая заливка. Победитель — жирный, с лаймовой точкой.

default
Live
[4]Т. Фриц
[9]А. де Минор
33
3015
изменение счёта (auto demo)
Live
[2]И. Швёнтек
[7]Ц. Чжэн
66
43
подача — мяч у подающего
Live
[118]В. Копржива
[142]Л. Риди
21
4015
finished — победитель жирный
FT
[1]Я. Синнер
[2]К. Алькарас
64
46
765
06 / мобильные состояния

390px — живые превью

Реальные страницы в рамках 390px — отзывчивая вёрстка, не картинки. В мобайле статус матча уезжает в строку над игроками, сеты сжимаются до 30px, меню — в полноэкранный список, лента новостей становится одноколоночной.

главная · 390px
скорборд · 390px
статья · 390px