дизайн-система ☉ фаза A

Индиго-ночь: токены и компоненты

Страница для глазной проверки. Всё ниже собрано только из токенов visual_language_v3 — если что-то выглядит чужим, это брак.

Цвет

  • --bg-page #0E1B2A поле страницы (индиго-бумага)
  • --bg-surface #13283A карточки, плашки
  • --bg-deep #0A141F код, колодцы, футер
  • --ink-primary #F2ECE2 заголовки, body — 14.8:1
  • --ink-secondary #A8C4D4 лиды, вторичный — 9.5:1
  • --ink-meta #7FA8C2 мета, лейблы — 6.9:1
  • --line-steel #3A6E8F ЛИНИИ и цифры ≥24px — 3.2:1
  • --fire #E8703A интерактив, грани — ≤5-8% экрана
  • --fire-hover #C2703D hover/pressed огня
  • --gold #F6C177 золото зари: цифры, ☉, блик
  • --hairline-color rgba(58,110,143,.35) волосяные линии, рамки тегов

Типографика — «Кузница»

Display — Podkova Variable 800 (иерархия размером и цветом, не весом)

Съешь ещё этих мягких булок

H1 — Машина держит форму, ты держишь поле

H2 — У тебя не хаос, у тебя чебуречная

H3 — Разбор полутора часов

Body — Literata Variable (opsz), ~65ch, leading 1.6-1.7

Ночь на индиго-бумаге: тёплый, заземлённый мир, где свет — это плотность пигмента, а не свечение. Интерфейс рисуется тем же карандашом, что и арт: срезы вместо радиусов, штрихи, отпускающие нажим, зерно бумаги на плашках. Курсив Literata тоже дома.

UI/Mono — PT Mono, caps, letter-spacing .06-.1em

Записаться на разбор → аудит → система

Кнопки (hover = вспышка-блик)

Огонь вспыхивает золотом, сталь — льдом. Низ контура не светится, пик — на срезе. Наведи и подожди цикл (2.8s).

Карточки: два регистра

Кейс

Огненный регистр

Акцентная карточка: грани 2px огнём, гаснут от среза 16px. Внутри — tag, Podkova-заголовок, Literata-текст, тихая ссылка.

Смотреть разбор
Система

Стальной регистр

Тихая карточка: грани 1.5px сталью. Большинство карточек на странице — такие; огонь достаётся одной-двум.

Подробнее

Системный лог

сайт собран из токенов шрифты self-hosted радиусы: 0 лев так и не позировал анфас

Формы-underline

Почта без @ не дойдёт — проверь адрес

Фактуры

зерно бумаги — paper_indigo_fine.png, multiply 5%

дрожь руки — svg #hand-tremor на линии