SkinHub · Этап 3 · Концепт · стенд стиля · 3 октября 2026

Стенд стиля

Как стиль выглядит в деле и из чего он собран. Все цвета, шрифты, радиусы, отступы и тени живут в одном файле tokens.css; стенд и экраны главной берут значения только оттуда. Контраст проверяется скриптом contrast.py. Экраны: UI главной.

01 · Стиль в деле

В деле

Sign in
Event · Season 1Neon HeistJoin event
★ Butterfly Danger Close Acid Etched Moonrise
Кнопки
Open case · $1.00Try free See all
Карточки
Prime Cut$1.00 Pistol Pack
-20%$1.10$0.90
Состояния и проверка
Skin sent to Steam Not enough balance Provably Fair
02 · Атрибуты

Атрибуты

Из задачи продукта и исследования: самый понятный интерфейс в категории и доверие к честности выпадения. Вкус дизайнера — Netflix и beton.ua. Каждый цвет ниже выводится из одного атрибута.

ИгровойТёмная арена CS2: арт и цвета редкости читаются только на тёмном. beton.ua, Netflix, стиль Home.
ЭнергичныйАзарт ивентов и открытий — один кислотный акцент на действиях. beton.ua.
ПростойИерархия текстом, а не цветом: цена белая, остальное серое. Задача продукта, приём Discord.
ЧестныйРезультат и ошибка названы явно и своим цветом. Боль «нет доверия к честности».
03 · Цвета

Цвета

Основной · графит

Из атрибута «Игровой»: тёмная арена, на которой арт скинов и редкость — самое яркое.

Фон--c-bg#111111
Карточка--c-surface#1f1f21
Панель--c-surface-2#18181a
Меню--c-surface-3#141415
Лунка--c-surface-well#26262a

Акцентный · лайм

Из атрибута «Энергичный»: кислотный цвет beton.ua, один на весь интерфейс. Только действия, выбранное состояние, заголовок баннера.

Акцент--c-accent#7dff3a
На акценте--c-on-accent#000000

Нейтральный · шкала серых

Из атрибута «Простой»: иерархия держится на яркости текста — белые цены, серые подписи.

Текст, цена--c-text#ffffff
Светлый--c-neutral-200#d9d9de
Подписи--c-text-muted#a1a1a6
Контур, не текст--c-neutral-500#707072
Граница--c-line-strong#39393b
Граница карточки--c-line#28282a

Состояния

Из атрибута «Честный»: результат называется явно. Успех не совпадает с акцентом по оттенку и светлоте, ошибка — с редкостью Covert.

Успех--c-success#2fd492
Ошибка--c-error#ff5a6a
Live--c-live#eb4b4b

Данные · редкость CS2

Не бренд, а смысл предмета: игрок узнаёт редкость по цвету из самой игры. Поэтому акцент не совпадает ни с одной из них.

Mil-Spec--c-rarity-milspec#4b69ff
Restricted--c-rarity-restricted#8847ff
Classified--c-rarity-classified#d32ce6
Covert--c-rarity-covert#eb4b4b
★ Rare--c-rarity-gold#e4ae39
04 · Шрифты

Шрифты

Пара: сжатый наклонный капс для громкого (заголовки, цены, номера) и спокойный гротеск для интерфейса.

--font-displayNeon Heist$3,167.07Barlow Condensed 800 Italic — заголовки, капсом. 700 — цены и номера, цифры табличные.
--font-bodyTry any case freeNo sign-up · same odds as real · demo wins don't countGolos Text 400–700 — весь интерфейс. Кириллица и латиница в одном рисунке.
ТокенРазмер, pxОбразецГде
--fs-2xs10Badge · COVERTбейджи, подписи плиток
--fs-xs12Bottom menu labelнижнее меню, плашки
--fs-sm12Sign in and get it at Level 1подписи
--fs-md14Case name in a cardназвания, мобайл
--fs-base14Interface textтекст, десктоп
--fs-lg16Buttons and tabsкнопки, табы
--fs-xl18Strip titleзаголовки плашек
--fs-2xl20$21.00цены, мобайл
--fs-3xl24$34.20цены, десктоп
--fs-4xl28Hot Casesзаголовки полок, мобайл
--fs-5xl32How it worksзаголовки полок, десктоп
--fs-6xl40Neon Heistбаннер, мобайл
--fs-7xl46Dragon Hoardбаннер, десктоп
--fs-8xl60Climbлидерборд
--fs-num-sm / -lg96 / 1701номера Hot Cases
05 · Форма

Форма

Один рабочий радиус 6px на всё — от стиля Home. Тени — не глубина, а отрыв и свечение.

Радиусы

--radius-xs
2 · плашки
--radius-sm
4 · чипы
--radius-md
6 · всё
full

Отступы

--space-22
--space-44
--space-66
--space-88
--space-1010
--space-1212
--space-1414
--space-1616
--space-2020
--space-2424
--space-2828
--space-3232
--space-4040
--space-4848
--space-5656
--space-6464

Тени

--shadow-ring
отрыв от фона
--shadow-accent
бабл поддержки
--shadow-halo
ореол аватара

--shadow-live

--shadow-art
1
--shadow-glow
06 · Иконки

Иконки Solar

Набор Solar, вариант Linear: линия 1.5px, скруглённые концы — под линейный стиль интерфейса и тонкие контуры цифр. Цвет — из токенов через currentColor. Файлы — в concept/icons/. На экранах главной стоят те же иконки; свои остались только логотипы соцсетей — брендов в Solar нет.

Нижнее меню

Cases
box Battles
target Sign in
user Rewards
gift Search
magnifer

Характеристики

Hot
fire Lv 5
lock-keyhole Timer
clock-circle Top
cup-star Price
tag-price Fast mode
bolt Players
users-group

Отметка проверки

Provably Fair
shield-check Verified
verified-check

Кнопки

Next
arrow-right Pause
pause Menu
hamburger Close
close-circle Support
headphones

Состояния

Success
check-circle Error
danger-circle Info
info-circle Pending
clock-circle
07 · Компоненты

Компоненты

Три готовых компонента проекта — те же, что на экранах главной.

Главная · акцентSign in
Главная с ценойOpen case · $1.00
Вторая · белаяJoin event
Третья · контурSee leaderboard
Иконка
Недоступна
МалаяTry

1 · Кнопка действия

  • Высота 44 (малая 36) — тач-цель ≥ 44 на основной.
  • Лайм — только деньги и вход; белая — всё остальное; рядом не две лаймовые.
  • --radius-md, --fs-lg 600, отступ --space-20.
  • Недоступна — серая поверхность, текст --c-text-muted.
Mil-SpecCobalt Corenova$0.84
RestrictedMoonrisem0nk$7.10
ClassifiedAcid Etchedkira$21.00
CovertDanger Closenova$73.10
★ Rare · наведение★ Butterfly Knifem0nk$3,167.07

2 · Карточка скина с графикой

  • Фон — цвет редкости, смешанный с --c-surface (34% → 16%).
  • Справа сверху — кейс, из которого выпал скин; по центру — скин с --shadow-art.
  • Название внизу; ник и цена — при наведении и фокусе.
  • Белое название на любой редкости ≥ 7.8:1.
ОбычнаяPrime Cut$1.00
СкидкаPistol Pack
-20%$1.10$0.90
Авторm0nk's pickby m0nk$3.00

3 · Карточка кейса

  • Название серое --c-text-muted 500, цена белая жирная — самое яркое.
  • Скидка: чип → зачёркнутая → новая цена (Epic Games).
  • У авторских кейсов — строка «by автор».
08 · Доступность

Контраст WCAG AA

Посчитано скриптом contrast.py по значениям из tokens.css. Норма AA: обычный текст ≥ 4.5:1, крупный (≥ 24px) ≥ 3:1. Серый --c-neutral-500 не проходил на табе «Top today» (3.59:1) — таб переведён на --c-text-muted; этот серый остаётся только для контуров.

ТекстФонОбразецКоэффициентAAГде
--c-text #ffffff--c-bg #111111Aa $3.1018.88:1проходит ≥ 4.5Основной текст и цены на фоне
--c-text #ffffff--c-surface #1f1f21Aa $3.1016.45:1проходит ≥ 4.5Цены и заголовки в карточках
--c-text-muted #a1a1a6--c-bg #111111Aa $3.107.34:1проходит ≥ 4.5Подписи, FAQ, футер
--c-text-muted #a1a1a6--c-surface #1f1f21Aa $3.106.40:1проходит ≥ 4.5Названия кейсов в карточках
--c-text-muted #a1a1a6--c-surface-2 #18181aAa $3.106.89:1проходит ≥ 4.5Подписи в панелях
--c-text-muted #a1a1a6--c-surface-3 #141415Aa $3.107.16:1проходит ≥ 4.5Подписи в нижнем меню
--c-text-muted #a1a1a6--c-surface-2 #18181aAa $3.106.89:1проходит ≥ 4.5Неактивный таб «Top today»
--c-neutral-200 #d9d9de--c-bg #111111Aa $3.1013.43:1проходит ≥ 4.5Текст на чипах оплаты
--c-on-accent #000000--c-accent #7dff3aAa $3.1016.24:1проходит ≥ 4.5Кнопка действия: Sign in
--c-bg #111111--c-text #ffffffAa $3.1018.88:1проходит ≥ 4.5Белая кнопка, плашка EVENT
--c-accent #7dff3a--c-bg #111111Aa $3.1014.60:1проходит ≥ 3Заголовки баннеров лаймом
--c-accent #7dff3a--c-surface #1f1f21Aa $3.1012.72:1проходит ≥ 4.5Лайм на карточке
--c-success #2fd492--c-bg #111111Aa $3.109.85:1проходит ≥ 4.5Текст успеха
--c-error #ff5a6a--c-bg #111111Aa $3.106.22:1проходит ≥ 4.5Текст ошибки
--c-on-state #000000--c-success #2fd492Aa $3.1010.95:1проходит ≥ 4.5Плашка успеха
--c-on-state #000000--c-error #ff5a6aAa $3.106.92:1проходит ≥ 4.5Плашка ошибки
--c-rarity-covert-text #ffc2c2--c-surface #1f1f21Aa $3.1010.77:1проходит ≥ 4.5Бейдж Covert
--c-rarity-classified-text #f6c4fb--c-surface #1f1f21Aa $3.1011.13:1проходит ≥ 4.5Бейдж Classified
--c-rarity-gold-text #ffe3a6--c-surface #1f1f21Aa $3.1013.16:1проходит ≥ 4.5Бейдж Fade · FN
--c-text #ffffff--c-rarity-milspec 34% + --c-surface #2e386cAa $3.1011.06:1проходит ≥ 4.5Название на плитке дропа: milspec
--c-text #ffffff--c-rarity-restricted 34% + --c-surface #432d6cAa $3.1011.47:1проходит ≥ 4.5Название на плитке дропа: restricted
--c-text #ffffff--c-rarity-classified 34% + --c-surface #5c2364Aa $3.1011.17:1проходит ≥ 4.5Название на плитке дропа: classified
--c-text #ffffff--c-rarity-covert 34% + --c-surface #642e2fAa $3.1010.64:1проходит ≥ 4.5Название на плитке дропа: covert
--c-text #ffffff--c-rarity-gold 34% + --c-surface #625029Aa $3.107.78:1проходит ≥ 4.5Название на плитке дропа: gold
--c-text #ffffff--c-bg-deep #0b0b0cAa $3.1019.67:1проходит ≥ 4.5Кейс: текст страницы
--c-text-muted #a1a1a6--c-bg-deep #0b0b0cAa $3.107.65:1проходит ≥ 4.5Кейс: лид, подписи, заметки
--c-accent #7dff3a--c-bg-deep #0b0b0cAa $3.1015.21:1проходит ≥ 4.5Кейс: ссылки
--c-success #2fd492--c-bg-deep #0b0b0cAa $3.1010.26:1проходит ≥ 4.5Кейс: метка версии v1.x
--c-live #eb4b4b--c-bg #111111Aa $3.105.07:1проходит ≥ 4.5Кейс: подпись «fold · 844 px»
--c-text #ffffff--c-badge #d7263dAa $3.104.96:1проходит ≥ 4.5Баблы уведомлений (нижнее меню, шапка)
--c-info #5aa9ff--c-bg #111111Aa $3.107.69:1проходит ≥ 3Иконка смены языка (не текст, ≥ 3)
--c-brand-discord #5865f2--c-surface #1f1f21Aa $3.103.57:1проходит ≥ 3Футер: иконка Discord (не текст, ≥ 3)
--c-brand-telegram #26a5e4--c-surface #1f1f21Aa $3.105.94:1проходит ≥ 3Футер: иконка Telegram (не текст, ≥ 3)
--c-brand-youtube #ff0000--c-surface #1f1f21Aa $3.104.12:1проходит ≥ 3Футер: иконка YouTube (не текст, ≥ 3)
--c-neutral-200 #d9d9de--c-surface-well #26262aAa $3.1010.72:1проходит ≥ 4.5Кейс: бейдж +XP
--c-neutral-200 #d9d9de--c-surface #1f1f21Aa $3.1011.70:1проходит ≥ 4.5Кейс: бейдж DEMO
--c-text-muted #a1a1a6--c-surface #1f1f21Aa $3.106.40:1проходит ≥ 4.5Кейс: неактивный сегмент Real
--c-error #ff5a6a--c-error 14% + --c-surface-2 #382125Aa $3.104.90:1проходит ≥ 4.5Кейс: метка «НЕТ»
--c-neutral-200 #d9d9de--c-rarity-milspec 34% + --c-surface #2e386cAa $3.107.86:1проходит ≥ 4.5Кейс: подпись и шанс на плитке скина: milspec
--c-neutral-200 #d9d9de--c-rarity-restricted 34% + --c-surface #432d6cAa $3.108.16:1проходит ≥ 4.5Кейс: подпись и шанс на плитке скина: restricted
--c-neutral-200 #d9d9de--c-rarity-classified 34% + --c-surface #5c2364Aa $3.107.94:1проходит ≥ 4.5Кейс: подпись и шанс на плитке скина: classified
--c-neutral-200 #d9d9de--c-rarity-covert 34% + --c-surface #642e2fAa $3.107.56:1проходит ≥ 4.5Кейс: подпись и шанс на плитке скина: covert
--c-neutral-200 #d9d9de--c-rarity-gold 34% + --c-surface #625029Aa $3.105.53:1проходит ≥ 4.5Кейс: подпись и шанс на плитке скина: gold