Документ для дизайнеров, разработчиков и нейросетей. Содержит токены, типографику, компоненты и принципы тона голоса для продукта цифровой самоблокировки от ставок и казино. Откройте в браузере → нажмите Ctrl/Cmd + P → «Сохранить как PDF».
Цифровая самоблокировка (self-exclusion blacklist) от ставок, казино и онлайн-гемблинга. Пользователь добровольно вносит себя в blacklist на 3 месяца — Навсегда.
Не лечение лудомании, не терапия, не финансовый продукт. Барьер не врач и не психолог — это цифровой инструмент трения и блокировки.
Щит + пауза. «Дверь, которую ты сам себе закрыл». Не наручники — добровольное обязательство.
Веб-кабинет (управление) + мобильное приложение Android и iOS (блокировка) + Максимальный режим (Device Owner / MDM).
Глубокая ночная база + лёд/мята/фиалка как акценты. Никакого казино-красного, золота, неона. Тон — доверие, спокойствие, обязательство.
Основной бренд-акцент
Вторичный акцент
Защита активна, успех
Максимальный режим
Внимание, попытки
Срыв, кризис
linear-gradient(135deg,#b9defe,#7cc3ff 45%,#9aa6ff)linear-gradient(135deg,#5fe3b1,#7cc3ff)radial × 2 over canvasSans · UI body
Inter
400 / 500 / 600 / 700
Display · headlines
Instrument Serif
400 regular + italic
Mono · meta, code
Geist Mono
300 / 400 / 500
| Уровень | Семейство | Размер | Tracking | Применение |
|---|---|---|---|---|
| Hero H1 | Inter 600 / Instrument italic | 56–72 / 36 mob | -0.04em | Главный заголовок hero |
| Section H2 | Instrument 400 | 40–56 / 32 mob | -0.02em | Заголовок секции |
| Card H3 | Inter 600 | 20 | -0.025em | Карточки, моды |
| Body | Inter 400 | 15 / 17 | 0 | Описания, параграфы |
| Caption | Inter 500 | 13 / 13.5 | 0 | Метаданные, пункты |
| Eyebrow / Badge | Inter 500 | 11 | +0.08–0.1em UPPER | Над заголовками, статусы |
| Stat number | Instrument 400 | 36–44 | -0.02em tabular | Числа, остаток дней |
| Mono meta | Geist Mono 400 | 10.5–12 | +0.05–0.1em | Время, домены, IDs |
8 — input, чип12 — кнопка вторичная16 — small card22 — primary glass card28 — hero panel, mode block999 — CTA, badgeGlass:
inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.7)
Primary CTA:
inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(124,195,255,.35), 0 14px 30px -10px rgba(124,195,255,.45)
Основная поверхность UI — «жидкое стекло»: полупрозрачный фон, blur, внутренний highlight сверху, тень снизу. Создаёт глубину без агрессии.
183 дня
Усиленная · до 26 декабря 2026
.glass {
background: linear-gradient(140deg,
rgba(255,255,255,.07),
rgba(255,255,255,.015) 40%,
rgba(124,195,255,.04));
backdrop-filter: blur(22px) saturate(140%);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(0,0,0,.4),
0 30px 60px -30px rgba(0,0,0,.7);
}
primary = brand gradient · ghost = glass-soft
Барьер
щит + пауза
Безопасный отступ вокруг лого — половина высоты щита. На светлых поверхностях использовать сплошной #1c2440 для контура.
Lucide-style: stroke 1.6–1.8, без заливок, скруглённые концы. Размеры 14 / 16 / 18 / 20 / 24. Цвет — наследуется от текста или акцент бренда.
Все ключевые заголовки и подзаголовки строятся по формуле 4U — Useful, Urgent, Unique, Ultra-specific. Тон — взрослый, прямой, без стигмы и морализаторства.
| Принцип | Делаем | Не делаем |
|---|---|---|
| Useful | Говорим, что конкретно блокируется и как это помогает | «Заботимся о вашем благополучии» |
| Urgent | «За 12 минут», «до конца вечера», «прямо сейчас» | «Когда будете готовы» |
| Unique | «Личный blacklist на твоей стороне, а не оператора» | «Лучший инструмент на рынке» |
| Ultra-specific | «4 218 доменов», «72 часа задержки», «PIN 6 цифр» | «Много казино», «надолго» |
| Анти-стигма | «Внеси себя в blacklist», «закрой себе дверь» | «Признай зависимость», «зависимые люди» |
| Честность | «Не лечит. Закрывает доступ.» | «Поможем избавиться от зависимости» |
±8px по Y, 6s ease-in-out. Hero-панели, статус-карты.
Aurora blobs — 14s, translate + scale 1.05. Фоны секций.
Зелёная точка «активно», 2.2s, box-shadow ripple.
Блик по CTA на hover, 1.6s linear.
Hover scale 1.02 + tighten shadow, 250ms cubic-bezier(.2,.8,.2,1).
Никаких резких bounce и slide. Только мягкие, лекарственные движения.
:root {
/* Surfaces */
--canvas: #050813;
--surface-1: #0a0f1f;
--surface-2: #11172b;
--surface-3: #1c2440;
--divider: #2a3358;
/* Text */
--text: #f4f6ff;
--text-muted: #a6b0cf;
--text-subtle: #6a7499;
/* Accents */
--ice: #7cc3ff;
--sky: #56b8ff;
--mint: #5fe3b1;
--violet: #9aa6ff;
--amber: #ffc879;
--danger: #ff7c8a;
/* Typography */
--font-sans: "Inter", system-ui, sans-serif;
--font-display: "Instrument Serif", serif;
--font-mono: "Geist Mono", monospace;
/* Radius */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px;
--r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;
}