Собрано 3 октября 2026 в Refero: стили — styles.refero.design, экраны — refero.design, тип страницы Home Page, платформа web.
Правило отбора. Ни один источник не копируется целиком. Один стиль — основа, с остальных берётся по 1–2 приёма. Приём — то, что можно показать пальцем: значение, место, количество. У каждого приёма записано, какое волнение пользователя он снимает. Волнения взяты из исследования (research/research.md, CLAUDE.md §2).
| Код | Волнение пользователя |
|---|---|
| В1 | «Это честно? Меня не обманут?» |
| В2 | «Я случайно потрачу настоящие деньги» |
| В3 | «Сколько это стоит на самом деле?» |
| В4 | «Тут вообще кто-то играет? Сайт живой?» |
| В5 | «Всё мелькает и торопит, я не успеваю прочитать» |
| В6 | «Не понимаю, что мне выпало и сколько оно стоит» |
Запросы: gaming, CS2 gaming atmosphere, esports dark neon, game.
| Стиль | Ссылка | Тема | Решение |
|---|---|---|---|
| Home (swoosh.nike) — «Neon-lit gaming arena at midnight» | style/604af0f7… | тёмная | Основа |
| Portal (portalgaming.com) — «violet singularity tearing through obsidian» | style/632b65d0… | тёмная | 1 приём |
| Discord (discord.com) — «Game world behind a chat bubble» | style/faec4b0c… | тёмная | 2 приёма |
| Xbox.com — «stadium-lit arcade storefront» | style/3792d0ca… | светлая | Не берём как стиль: светлый каталог. Берём экран (§3) |
| Twitch — «Stadium scoreboard on parchment» | style/40030487… | светлая | Не берём как стиль. Берём экран (§3) |
Почему основа — Home. Главный довод — цвет акцента. В CS2 цвет уже занят редкостью скина: серый, голубой, синий (Mil-Spec), фиолетовый (Restricted), розовый (Classified), красный (Covert), золотой (★). Брендовый акцент не должен совпадать ни с одной редкостью, иначе кнопка читается как предмет.
#5865f2 почти совпадает с Mil-Spec #4b69ff.#b296f8 почти совпадает с Restricted #8847ff.#b7ff2c в шкале редкостей не встречается. Это единственный из трёх акцентов, который не спорит с предметами.Источник: styles.refero.design/style/604af0f7-b4c3-4921-93af-9da03df81493 · сайт https://www.swoosh.nike
Почти чёрный холст, один хроматический цвет только на действиях, сжатая крупная типографика как вывески турнира, один радиус на всё.
Цвет
| Имя | Значение | Роль в источнике |
|---|---|---|
| Lime Pulse | #b7ff2c | Заливка кнопок действия, выбранная навигация. Единственный цвет |
| Midnight Canvas | #111111 | Фон страницы, героя, навигации |
| Card Charcoal | #1f1f21 | Карточки, модалки, панели — на ступень выше фона |
| Card Border Ink | #28282a | Контур карточки, едва видимый |
| Footer Rule | #39393b | Разделители областей |
| Steel Border | #707072 | Заметный, но тихий контур |
| Fog Border | #e5e5e5 | Линии только на светлых поверхностях |
| Pure White | #ffffff | Текст на тёмном |
| Carbon Black | #000000 | Текст на светлом и на лаймовой кнопке |
Типографика. Roobert 400/500/700, замена — Inter. Шкала: 14 · 16 · 20 · 24 · 64 · 110 px. Межстрочный: display 0.85, heading-lg 1.0, heading-sm 1.2, subheading 1.4, body 1.5.
Форма. Шаг сетки 4px. Радиус 6px у всего: кнопки, карточки, навигация, картинки, модалки. Тень одна — rgba(17,17,17,.125) 0 2px 6px, только у навигации. Отступ между секциями 48–64px, внутри карточки 20–24px, между элементами 16–20px. Ширина до 1440px.
Правила источника. Лайм — только на заливке CTA, обводке действий и выбранном состоянии. Никогда на тексте и больших поверхностях. Второго хроматического цвета нет.
Что берём (основа):
| Приём | Где показать пальцем | Волнение |
|---|---|---|
Фон #111111, карточки #1f1f21, контур #28282a — три ступени серого, без цветных фонов | Фон страницы, карточка кейса, её рамка | В6. Редкость скина видна, только если вокруг нет другого цвета: полоса Covert красная на сером, а не на фиолетовом фоне |
Один акцентный цвет, лайм, только на кнопках с деньгами и действием: Open, Add funds, Sign in | Главная кнопка на странице кейса и «+» у баланса | В2. Сразу видно, какая кнопка тратит баланс: она единственная цветная на экране |
| Радиус 6px на всё | Карточки, кнопки, баннеры | — (связность; волнение не снимает, записано честно) |
Что не берём: заголовки 110px с межстрочным 0.85 — на 390px такая вывеска съедает первый экран, а он у нас под ивент и каталог. Максимум display — 28–34px на мобайле.
Источник: styles.refero.design/style/632b65d0-17de-4972-a3d1-63d5ab062ab8 · сайт https://portalgaming.com
Цвет: Portal Violet #b296f8 (действие, свечение), Wisteria #594b7c, холст #000000, поверхности #0f0f13 / #1d1d1d, контур #292929, текст #e6e6e6, заголовки #ffffff. Бейджи: Indigo Plum #4b3f71 + Lavender Mist #ede9fe, Fuchsia Ink #571c60, Verdant Edge #0e4f26. Типографика: Suisse Intl 900 для заголовков 48–72px, трекинг −0.025em; текст 400/500, трекинг 0.05em; метки 12px, трекинг 0.20em. Форма: один радиус 10px. Тень с фиолетовым оттенком rgba(178,150,248,.20) 0 25px 50px -12px.
| Приём | Где показать пальцем | Волнение |
|---|---|---|
| Бейдж-контур: прозрачная заливка, рамка 1px насыщенного цвета, текст бледный того же тона, 12px, трекинг 0.20em | Метка редкости на скине (COVERT, CLASSIFIED) и метка PROVABLY FAIR у кейса | В6, В1. Редкость читается словом, а не только цветом полоски (дальтоники, мелкий экран). Метка честности выглядит как часть системы, а не как наклейка |
Не берём: фиолетовый акцент (совпадает с Restricted) и фиолетовые тени.
Источник: styles.refero.design/style/faec4b0c-cf93-4150-97de-0a8e7eed1840 · сайт https://discord.com
Цвет: Blurple #5865f2 (только главная CTA), Dark Blurple #3442d9, Hover #8891f2; акценты Fuchsia #eb459e, Cerulean #00b0f4, Ember #fda220; нейтральные #000000, #23272a, #2c2f33, #333333, #50555f, Greyple #99aab5, Fog #babcd9, #f6f6f6, #ffffff; Spring Green #57f287 (успех), Ekko Red #de2761 (опасное). Типографика: ABC Ginto Nord 700/800 капсом, 36/48/56/61px, трекинг −0.01em; текст ABC Ginto 400/500 16/20px; UI — GG Sans 16/1.5. Форма: кнопки 12px, большие кнопки 16px, карточки 16px, панели 24px, пилюли 104px. Секции 80–120px, внутри карточки 32–48px.
| Приём | Где показать пальцем | Волнение |
|---|---|---|
| Пара кнопок: главная — цвет бренда, вторая — белая заливка. Цвет бренда никогда на обеих | Результат демо: Sign in to open for real (лайм) + Try again (demo) (белая) | В2. Бесплатное и платное действие стоят рядом, но выглядят по-разному. Нельзя нажать платное, думая, что это демо |
Текст на тёмном — не белый, а приглушённый #babcd9; белый только у заголовков и цифр | Подписи под ценой, описание кейса, FAQ | В3. Цена и шанс — единственное белое в карточке, глаз находит их первыми |
Не берём: blurple (совпадает с Mil-Spec), заголовки капсом 800 и 3D-персонажей на стыках секций.
Найдены через фильтр сайта в Refero, тип страницы — Home Page.
Источник: refero.design/pages/ae8f9c65-1edf-4c03-aa26-868e1d0d92d4 · xbox.com
| Приём | Где показать пальцем | Волнение |
|---|---|---|
| Пауза ❚❚ рядом с точками карусели, внизу по центру героя, та же высота, что у точек | Наша лента дропов и карусель ивентов | В5. Движение можно остановить одним нажатием там, где взгляд уже ищет управление. Подтверждает решение v11 (пауза у ленты) и даёт второе место — у точек карусели |
Жёлтая плашка-метка над заголовком героя: 11px, капс, трекинг 0.075em, без радиуса (PLAY DAY ONE WITH GAME PASS) | Над названием ивента: EVENT · SEASON 1, PROMO | В3. Сразу ясно, что это за слайд — ивент, промо или новый кейс — до чтения заголовка |
Источник: refero.design/pages/0d48b23c-f244-4617-be56-36e578c2c099 · store.epicgames.com
| Приём | Где показать пальцем | Волнение |
|---|---|---|
Блок цены: чип скидки -50% → зачёркнутая старая цена → новая цена, в одну строку под названием | Карточка кейса со скидкой, оффер Deposit bonus +15% | В3. Видно, от чего считается скидка; нет «−50%» без цифр |
Поиск — поле слева в строке разделов магазина (Search · Discover · Browse · News), а не в шапке | Вторая строка над каталогом на десктопе | В6 (найти конкретный кейс). Альтернатива нашей иконке ⌕ в шапке v11.5: если тест покажет, что иконку не замечают, поле переезжает сюда |
Источник: refero.design/pages/12af1446-9ce2-4d3c-ac6f-44efd5ca0a6b · twitch.tv
| Приём | Где показать пальцем | Волнение |
|---|---|---|
Красная плашка LIVE в левом верхнем углу превью + число зрителей в левом нижнем | Карточка баттла: LIVE + 2/4 players; плитка «Top today» в ленте | В4. Живость — фактом с числом, а не словами «popular» |
Красная точка перед числом в списке (● 44.2K) | Счётчик онлайна в шапке и счётчик баттлов | В4. Одна точка одного цвета везде значит «сейчас идёт» |
| Слой | Источник | Приём |
|---|---|---|
| Фон и поверхности | Home | #111111 / #1f1f21 / #28282a, без цветных фонов |
| Акцент | Home | Один лайм #b7ff2c только на действиях с деньгами и главной CTA. Не совпадает ни с одной редкостью CS2 |
| Радиус | Home | 6px на всё |
| Метки редкости и честности | Portal | Бейдж-контур: рамка 1px + бледный текст, трекинг 0.20em |
| Пара действий | Discord | Главная лаймом, вторая белой; цвет бренда не на обеих |
| Иерархия текста | Discord | Подписи приглушённые, белые только цифры цены и шанса |
| Управление движением | Xbox (экран) | ❚❚ рядом с точками карусели |
| Тип слайда | Xbox (экран) | Плашка-метка 11px капсом над заголовком |
| Цена со скидкой | Epic (экран) | Чип -N% → старая зачёркнутая → новая |
| Живость | Twitch (экран) | LIVE + число, красная точка перед счётчиком |
Конфликт, который надо решить в токенах. Красная LIVE (Twitch) и красная Covert — один тон. Предложение: LIVE — заливка, Covert — только полоска и бейдж-контур. Проверить на макете.
Чего не берём ни у кого: гигантские заголовки (110px Home, 61px Discord) — на мобайле первый экран отдан ивенту и каталогу; 3D-персонажей; цветные тени.