# Tokens — marketing-dark-4

> Источник: B2B AdTech-маркетплейс рекламных площадок (RU). Captured 2026-04-26.
> CSS prefix: `--md4-*`

## Сводка

| Аспект | Значение | Особенность |
|---|---|---|
| Шрифт | Inter (single family + system fallback) | Нет отдельного display, нет mono |
| Палитра marketing | 7 цветов | Бимодальность: signature yellow #effd37 + 6 нейтралей |
| Палитра UI | +25 цветов | Labels/status/blue family — невидимы на marketing |
| Веса шрифта | 400 / 700 / 800 | 500 в дизайне есть, но мёртвый (2%) |
| Размеры шрифта | 12 / 14 / 16 / 20 / 24 / 36 / 46 | Гэп 24→36→46 для display |
| Letter-spacing | везде normal | Trust the typeface — bold choice |
| Line-height | px (не unitless) | 16/20/24/32/48/64 |
| Spacing scale | 4px base, 2px declared granularity | 32 declared --size-*, 22 dead (69%) |
| Section rhythm | 80px (default) / 100px (huge) / 44px (tight) | Outside --size-* scale |
| Container | min 1280px / max 1440px / hero text 970px | Desktop-first hard floor |
| Radius | 0 dominant 89% + 16/22/26 button progression + pill 100 | Binary biased + signature 26 |
| Shadows | ОДНА `0 6px 12px rgba(0,0,0,0.12)` универсальная | Flat dark — нет glow, нет blur |
| Focus ring | 3px halo blue + 2px outline violet | Signature accessible focus |
| Анимации | 250ms default + 100ms input + 1500ms cookie-out | Только linear для cookie, ease-default для остального |

## Ключевые токены и обоснования

### Color: `--md4-color-primary` = `#effd37`
**Источник:** `--primary-led-yellow-green` и `--secondary-yellow` (один и тот же hex под двумя именами).
**Почему:** HSL 65°/99%/60% — электрическая лимонно-жёлтая, единственный warm-acid акцент на холодном тёмном холсте. Появляется как primary CTA bg и highlight единственного слова в H1 (brand-word). На hover **инвертируется в чистый white** (#ffffff) — это сигнатурный приём, не стандартный darken/lighten.
**Не потерять:** яркость 99% saturation. Типичная ошибка — взять «жёлтый-помягче» #ffe066 или mustard #f5c518 — это убивает identity. Только electric-lime на максимальной chroma.

### Color: `--md4-color-bg-dark` = `#181a1a`
**Источник:** `--basic-black`. Top-1 в computed (508 hits).
**Почему:** не чистый чёрный — slight cyan tint (hue 180°, sat 4%). Используется и как dark surface, и как text-primary на light. Tooltip имеет drift `#242525` — стало чуть светлее (вероятно legacy). При воспроизведении использовать `#181a1a` как primary, `#242525` опционально для tooltips.

### Typography: одно семейство Inter
**Почему:** Inter покрывает body + display + UI. Free Google Font. Fallback chain `system-ui, "Segoe UI", Roboto` — стандартный modern web.
**Альтернатива:** проприетарных шрифтов нет — копировать как есть.
**Не потерять:** weight economy. Сайт реально использует 400/700/800. Weight 500 = 2% (мёртвый — выкинуть). Веса 300/600/900 не используются вообще — не добавлять.

### Typography: размеры — discrete 7-step
**Почему:** 12/14/16/20/24/36/46 — НЕ модульная шкала. Гэп 24→36→46 для display, нет mid-tier 28/30/32/40/42 — вынуждает editorial decisiveness (small или large, без in-between).
**Не потерять:** H1 = 46px weight 800 — единственное использование 800 на странице. Hero only.
**Не путать:** `font-size` не масштабируется через rem — все значения в `px` (фиксированные line-height тоже в px).

### Spacing: base 4px, declared 2px granularity
**Почему:** объявленная шкала `--size-2` ... `--size-64` шагами 2px (32 токена) — необычно (большинство DS используют 4 или 8). Гипотеза: эта шкала пришла из cabinet UI (страницы /account/*) где нужна мелкая настройка плотности.
**Реальность:** на marketing-страницах используется только 10 значений из 32 (4/8/12/14/16/24/32/36/44/48). Primary unit — 16px.
**Не потерять:** section padding 80/100/44 ВНЕ объявленной --size-* шкалы (она кончается на 64). Это inline values для вертикального ритма секций. Это implementation drift — но воспроизводить надо как есть.

### Radius: binary 0 + button progression
**Почему:** `--md4-radius-none: 0` доминирует 89% (357 из 400 элементов) — sharp edges по умолчанию. Кнопки имеют свою прогрессию 16/22/26 (sm/md/lg) — это **НЕ совпадает** с объявленной T-shirt шкалой `--border-radius-s/m/l/xl: 8/12/16/48`. Buttons и Inputs эволюционировали свою шкалу.
**Не потерять:** signature card radius 26px (button-lg + большие cards). Не путать с 24/28 — 26 это специфический выбор, отличающий бук от соседей.

### Shadows: одна универсальная
**Почему:** `--md4-shadow-popup: 0 6px 12px rgba(0,0,0,0.12)` — единственная box-shadow в системе. Используется на tooltip, notification toast, possibly cards на light sections. На dark canvas теней нет вообще (flat dark).
**Что это значит:** при воспроизведении НЕ добавлять multi-layer shadows, glow, neumorphism. Этот бук — flat-dark-with-light-cards inversion, anti-glassmorphism.

### Focus rings: signature 3px halo + 2px outline
**Почему:** `0 0 0 3px #98a6ff` (aster-flower-blue 3px halo на light) и `outline 2px solid #4443be` (violet-blue) — двухслойная focus indication. Это accessible-by-default паттерн, который надо сохранить.
**Не потерять:** focus rings — сама фича, не косметика. Часто демо-сайты убирают focus styles.

## Guardrails — что не потерять при воспроизведении

1. **Single signature accent** (yellow) и его hover→white инверсия. НЕ добавлять второй marketing accent.
2. **Dark canvas + light cards inversion**, секции зебрятся целиком (dark hero / light body / light card-section / dark CTA / dark footer), не построчно.
3. **No glassmorphism, no glow, no blur, no noise**. Бук — flat-dark, anti-trend.
4. **Single shadow** `0 6px 12px rgba(0,0,0,0.12)` для popup-овершей, иначе никаких теней на dark.
5. **Letter-spacing always normal** — не добавлять -0.02em на H1, не добавлять 0.4px на body.
6. **Buttons always weight 700** независимо от размера.
7. **H1 weight 800 — единственное использование 800** на странице (hero only).
8. **Outline doodle ornaments** (звёздочка, волна, арка, точки) на 1.5px stroke белым с opacity 0.5 — НЕ корпоративный шум, а человеческий слой. Часто 1-2 элемента в hero, не больше.
9. **Brand-word highlight в H1** — одно слово (бренд) подсвечивается жёлтым внутри белого заголовка.
10. **Pastel rainbow strip** — мягкий 4-цветный gradient band внутри tier-card вместо классического % badge. Используется 1 раз на секцию.
11. **Sharp 0 radius доминирует** — не делать всё `border-radius: 16` чтобы выглядело «современно». Cards 16, button progression 16/22/26, всё остальное 0.

## Anti-patterns (что НЕ делать)

- НЕ добавлять gradient hero (бук — solid dark)
- НЕ использовать backdrop-blur
- НЕ ставить multi-layer drop-shadows (только одна popup)
- НЕ добавлять letter-spacing на заголовки
- НЕ использовать font-weight 500 (мёртвый), 600, 900
- НЕ делать H1 lighter than 800
- НЕ применять signature yellow ко вторичным акцентам — single use по странице (CTA × 4 + brand word в H1)
- НЕ использовать declared --size-2..64 шкалу полностью — большая часть мёртвая

## A11y контраст (WCAG)

| Пара | Контраст | Pass |
|---|---|---|
| `#181a1a` на `#ffffff` (text on light) | 19.06:1 | ✅ AAA |
| `#ffffff` на `#181a1a` (text on dark) | 19.06:1 | ✅ AAA |
| `#181a1a` на `#effd37` (text on yellow CTA) | 16.67:1 | ✅ AAA — обоснование выбора чёрного текста на жёлтом |
| `#757575` на `#ffffff` (muted text) | 4.83:1 | ✅ AA (>4.5) |
| `#757575` на `#181a1a` (muted on dark) | 3.94:1 | ⚠️ AA Large only (>3, <4.5) — для small text use #d0cfcf instead |
| `#d0cfcf` на `#181a1a` (border/disabled on dark) | 11.39:1 | ✅ AAA |
| `#effd37` на `#181a1a` (yellow accent text) | 16.67:1 | ✅ AAA |

**Итог:** базовая палитра прошла WCAG AA. Единственная зона риска — `#757575` muted text на dark surface (3.94:1, only AA Large). Решение: использовать `#d0cfcf` для muted text на dark.

## Сравнение с другими marketing-dark буками

| Аспект | marketing-dark-1 | marketing-dark-2 | marketing-dark-3 (quiet) | **marketing-dark-4 (honest-flat)** |
|---|---|---|---|---|
| Тренд | Dark + glow | Dense neon dark | Quiet-dark monodisciplined | **Flat-dark + light cards inversion** |
| Accent | Multi-color | Neon palette | Single violet, gradient on hover only | **Single acid-yellow with hover inversion** |
| Shadows | Layered glow | Glow + neon | Single signature shadow | **Single popup shadow, NO marketing shadow** |
| Glassmorphism | partial | yes | floating glass header | **NO glass, NO blur** |
| Weight | 400/600/700 | 400/500/700 | **400/500/600 only — refuses 700+** | **400/700/800 — refuses 500** |
| Section style | All dark | All dark | Dark with subtle card variations | **Zebra-by-section: dark↔light alternation** |

marketing-dark-4 занимает свою нишу: «honest-dark» B2B без украшательства, но со специфическими аксессуарами (yellow CTA, outline ornaments, pastel discount strips).

## Полный mapping declared → token

См. полный список переменных в [tokens.css](tokens.css). Соответствие исходных `--basic-*`, `--primary-*`, `--secondary-*`, `--label-*`, `--status-*`, `--size-*`, `--border-radius-*` к нашим `--md4-*` сделано в JSON: `_data/color-clusters.json`, `_data/type-clusters.json`, `_data/spacing-scale.json`.