Три размера знака

Знак в трёх размерах: 22 px — шапка, 40 px — средний, 88 px — герой онбординга со свечением

• да — это бренд-марка приложения (иконка приложения, герой онбординга)
• нет — это НЕ аватар голоса Sona: аватар Sona — буква «S» (см. C2/C6 гайда)

Тех. детали: инлайн-SVG viewBox 0 0 512 512, круг --teal, дуги и точка #fff; свечение --sona-glow на круглом контейнере

Знак-аватар

Бирюзовый кружок с буквой «S» — лицо Sona в интерфейсе

• да — это аватар ГОЛОСА Sona; его применение — в Components → sona-voice
• нет — это НЕ Сонар-знак (тот — бренд-марка приложения), знаки не путать

Тех. детали: класс .savatar, кружок --grad, буква «S» #fff; размеры .is-lg / .is-md

Линейный контур · неактивный → активный

Глиф «Сегодня» (кружок) — неактивный и активный: форма одна, меняется только обводка. Единый keyline для всего набора

• да — единый keyline 20×20 внутри viewBox 24×24, эффективный штрих 2; глифы — в icons.js (единственный источник), витрина ниже
• нет — задавать stroke-width руками. Вес ВЫВОДИТСЯ из размера и сетки; заданный порознь, он с ними разойдётся

Тех. детали: viewBox 0 0 24 24, keyline (живая область) 20×20, поле 2, stroke-linecap/linejoin: round. Вес — эффективный штрих 2 CSS-px при отрисовке 24px (1.5 для носителей ≤14px), а stroke-width в разметке выводится: calc(var(--icon-eff) * var(--icon-vb) / var(--icon-px)). Носитель объявляет размер (--icon-px) и сетку глифа (--icon-vb) — и только их. Активная обводка — градиент url(#osnnavgrad); вес у обоих состояний одинаков (B6).

Каталог набора

Все глифы продукта, разложенные по назначению. Имя — то, чем иконка зовётся в icons.js; по нему её и берут. Прежде чем рисовать новую — найди её здесь. Под каждой: что она значит, на каких экранах реально стоит и сколько её экземпляров. Жёлтый бейдж «было N» — сколько разных рисунков обслуживало этот смысл до пересборки. Серый «не используется» — глиф держим про запас, экран ещё не построен. Строка lucide/… — глиф взят из первоисточника дословно: раньше в наборе жили правленые руками копии, и именно они давали ощущение «иконки из разных наборов».

• да — взял имя из каталога, вставил <use href="#i-имя">
• нет — не нашёл и нарисовал свою. Не нашёл — заведи в icons.js, тогда её найдёт следующий

Кнопка «Начать» — главное действие экрана (.start)

Как ведёт себя: при нажатии чуть проседает, с клавиатуры обводится бирюзовым кольцом. Справа — стрелка «→».

Тех. детали: класс .start, фирменный градиент --grad, стрелка через ::after

Круглые кнопки плеера — воспроизведение, пауза, перемотка (.cbtn / .cbtn.main)

Что это: ряд круглых кнопок плеера. Большая центральная запускает воспроизведение и ставит на паузу (иконка сама переключается); маленькие по бокам — вспомогательное, например перемотка на 15 секунд назад. Варианты: большая ярко-бирюзовая (текущее действие) и тихие маленькие.

Тех. детали: .cbtn 52px (вспомогательные), .cbtn.main 82px с градиентом (главная); переключение иконки — скриптом; фокус по токену --focus-ring-dark

Пилюли выбора — один вариант из ряда (.chip)

Что это: ряд кнопок-пилюль с выбором одного варианта — например длительности таймера сна. Как ведёт себя: выбранная подсвечивается бирюзовым, остальные тихие.

Тех. детали: класс .chip, активное состояние .on (фон --teal-tint), скругление --r-chip (999px)

Тумблер слоя звука — включить или выключить (.toggle)

Что это: переключатель одного слоя звука в микшере — например дождя или розового шума. Как ведёт себя: включённый загорается бирюзой и кружок едет вправо; выключенный тёмный.

Тех. детали: класс .toggle, включённое — .on; видимый трек 42×25, зона нажатия через ::before 48×44

Ползунок громкости — общий и для слоёв (.slider)

Что это: горизонтальный ползунок громкости — тянешь кружок и меняешь уровень. Управляется мышью и стрелками клавиатуры. Варианты: при калибровке на дорожке есть риска-ориентир с подписью («здесь шум ещё слышен»); у ползунка отдельного слоя риски нет.

Тех. детали: части — .track (дорожка), .fill (заливка --dark-fill, без градиента), .knob (кружок), .mix (риска), .mixcap (подпись)

Стрелка «дальше» — серый указатель в конце строки (.chev)

Что это: серая стрелка-уголок справа в строке или карточке — подсказка, что по ней можно перейти дальше. Варианты: обычная (строки и списки) и крупнее (карточки-намерения).

Тех. детали: класс .chev, крупная версия .chev--lg, цвет --muted2; один компонент вместо повторов в разных строках

Аватар Куратора — фото в фиолетовой оправе (.gav)

А А

Что это: «лицо» Куратора в интерфейсе — фотография в круге с фиолетовой оправой-кольцом, знак, что говорит живой человек (реш. DK R30). Варианты: фото (канон); без фото — фиолетовый кружок с первой буквой имени (фолбэк), обычный и поменьше.

Тех. детали: фото img.gav — оправа 2px --curator #7C6CD6, object-fit:cover; фолбэк span.gav — фиолетовый диск с инициалом; 42px, маленький .gav--sm 32px (один компонент, размер через --cur-av-size), плоско и без тени

Плита-присутствие Куратора (.cpresence)

Анна · твой куратор Я рядом. Пиши — отвечу в чате. Написать › Анна · твой куратор Посмотрела твою запись за вчера — ты хорошо справился. Один совет… Написать ›

Что это: плоская фиолетовая плита в конце дня на «Сегодня» — присутствие живого Куратора той же грамматикой, что блок Sona: фото, роль-строка «Анна · твой куратор», одна реплика живым голосом и тихое «Написать ›» в углу. Вся плита — одна тап-мишень, ведёт в чат. Как ведёт себя: плита живая — когда от Куратора есть непрочитанное сообщение, реплика-заглушка заменяется началом этого сообщения, а у роль-строки появляется тихая фиолетовая точка (не пульс, не счётчик). Варианты: покой и непрочитанное (реш. DK R30, сменяет строку .guide).

Тех. детали: класс .cpresence — подложка --curator-tint без рамки и тени, радиус --r-nested-lg, паддинг 18px (зеркало .presence); роль-строка .cwho и «Написать ›» .cwrite — --curator-ink; реплика .csay — --ink, обрезка до 2 строк; точка .cdot — --curator; нажатие — фон --curator-tint-deep, фокус — кольцо --curator-line

Поле ввода — строка и заметка (.input)

Что это: поле для ввода текста — имени или короткой заметки. Как ведёт себя: в покое серая рамка, при наборе — бирюзовая с подсветкой; плейсхолдер исчезает, как только начали печатать. Варианты: однострочное поле и многострочная заметка.

Тех. детали: класс .input (и однострочный, и textarea); рамка --line → при фокусе --teal, кольцо --focus-ring, плейсхолдер --muted2

Выбор одного варианта — список с кружком (.opt)

Что это: список с выбором одного варианта; у строки может быть пояснение снизу. Как ведёт себя: выбранная строка подсвечивается бирюзовым фоном и рамкой, кружок слева заливается.

Тех. детали: классы .opts / .opt; выбранное — рамка --teal, фон --teal-tint, точка --grad

Отметка-галочка — выбрать несколько (.opt.check)

Что это: та же строка выбора, но с отметкой нескольких пунктов сразу. Как ведёт себя: отмеченный квадратик заливается бирюзовым с белой галочкой.

Тех. детали: это вариант строки .opt с модификатором .check — квадрат и галочка вместо круглой точки; залив --grad

Пилюли-варианты — компактный выбор отметками (.chip)

Что это: компактная замена списку с галочками — варианты-пилюли, можно отметить несколько (например давность тиннитуса). Как ведёт себя: отмеченная пилюля подсвечивается бирюзой.

Тех. детали: классы .chips / .chip, скругление --r-chip; отмеченное — фон --teal-tint, текст --teal-ink

Строка с переключателем — включить модуль (.toggle-row)

Что это: строка с названием модуля, пояснением и переключателем справа — включить модуль или нет (выбор обратим в любой момент). Как ведёт себя: включённый переключатель заливается бирюзой и кружок едет вправо.

Тех. детали: классы .toggle-row / .toggle; выключенный трек --bg2, включённый --grad, кружок едет на 18px

Плоский тоггл — V3-вариант включения гейта (.toggle--flat)

Что это: тот же тумблер форм, но включённое состояние — плоская бирюза, а не фирменный градиент. Почему так: единственный градиент-якорь зоны (C1b) остаётся за главной кнопкой («Дальше»), поэтому тогглы-гейты в V3 включаются плоским акцентом.

Тех. детали: модификатор .toggle--flat поверх базового .toggle (эта же группа forms); хитбокс ≥44 и фокус наследуются

Раскрывающаяся заметка — «+ заметка» / «зачем это» (.notelink + .notewrap)

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

Тех. детали: ссылка .notelink + контейнер .notewrap; внутри либо textarea.input (заметка), либо панель .expl на фоне --bg2 (пояснение)

Системная строка — время и батарея сверху (.statusbar)

Что это: имитация верхней строки телефона — время, сеть, заряд; в макетах нужна, чтобы экран выглядел как настоящий телефон. Варианты: на светлом фоне и тёмный для плеера.

Тех. детали: класс .statusbar, тёмный вариант .statusbar--dark; цвет текста --ink / --dark-text

Полоса недели — где вы в неделе (.week)

Что это: календарная неделя (день недели + число) с сегодняшней датой и отметками присутствия — не программный номер и не счётчик достижений (реш. DK 2026-07-07). Как выглядят дни: будущий — пустой кружок, пройденный — залит бирюзой, сегодняшний — бирюзовая плашка с реальной датой.

Тех. детали: класс .week, день .wd; пройденный .active, сегодня .today; .lab — день недели, .date — число месяца

Нижняя панель вкладок — главная навигация (.nav)

Два состояния таба: слева — обычный, справа — с точкой непрочитанного (.has-badge).

Что это: нижняя панель с основными разделами — «Сегодня», «Программа», «Чат», «Инструменты». Как ведёт себя: у текущего раздела значок подсвечен бирюзой, остальные серые; на вкладке с непрочитанным — маленькая точка. Активная вкладка отличается только цветом контура, значок тот же.

Тех. детали: класс .nav, активная .on (контур url(#navgrad)), точка .has-badge

Кнопка быстрой помощи — сердце в ладонях (.qranchor)

Что это: круглая кнопка со значком «сердце в ладонях» — быстрый вход в помощь, когда стало тяжело. Один и тот же белый кружок на светлом и тёмном экране. Как ведёт себя: при нажатии чуть проседает. Значок — бирюзовый контур, не красный и не залитый, чтобы не пугать.

Тех. детали: класс .qranchor, контейнер 48×48, диск 44×44, :active scale .96

Бейдж безопасности — компактная метка (.sbadge)

Что это: маленькая красная метка рядом с пунктом, который стоит обсудить со специалистом. Как выглядит: бледно-красная пилюля с треугольником и короткой подписью.

• да — это метка-сигнал, а не оценка тяжести и не вердикт

Тех. детали: класс .sbadge; цвета --safety / --safety-tint / --safety-line

Баннер безопасности — сообщение Tier 1 (.sbanner)

Что это: заметная красная плашка с верхней риской: ситуация требует внимания специалиста. Тон: указывает на необходимость суждения по протоколу, но ничего не диагностирует сама.

• да — «сигнал к суждению, не автоматический вердикт»: помечает, не решает

Тех. детали: класс .sbanner, иконка .sbanner__ic, текст .sbanner__t; цвета --safety / --safety-tint / --safety-ink

Нейро-инфоблок — верхний тир, БЕЗ красного (.emergency)

Что это: острые нейросимптомы тира ВЫШЕ красной плашки (стоп + к врачу, не «сперва покажись»). Как выглядит: нейтральный slate-блок на --bg2 с тёмным ink-рейлом слева и круглым слотом-иконкой — вес держит формой, не цветом.

• да — без красного: два красных рядом конкурируют, реактивную плашку флагов можно не заметить
• да — виден всегда (директива, не вопрос), вне гейта

Тех. детали: класс .emergency (.ei / .et / .act); цвета --bg2 / --line / --ink / --surface

Реактивная плашка флагов — нижний тир, красный (.safety)

Что это: единственное место красного на экране — появляется СРАЗУ при любом «Да». Как выглядит: бледно-красная плашка-в-потоке с иконкой; обёртка-тоггл .safety-wrap.show (отлична от статичного .sbanner).

• да — реактивна: показ через .safety-wrap.show, скрыта по умолчанию

Тех. детали: классы .safety / .safety-wrap; цвета --safety / --safety-tint / --safety-line / --safety-ink(-strong)

Строка-успокоение — позитивная/спокойная нота (.calmline)

Что это: тихая строка-галочка «всё в порядке, идём дальше» (safety — все шесть флагов «нет»; program-fit — полное совпадение). Как выглядит: одна строка с нейтральным глифом-галочкой.

• да — глиф --muted: бирюза зарезервирована за CTA и активным сегментом (C1/D5)
• да — единая конвенция тоггла .show (раньше дрейфовала: .is-hidden + teal-ink)

Тех. детали: класс .calmline (.lf); цвет --muted

Серая нота несовпадения — slate, не красная (.softnote)

Что это: мягкий сигнал несовпадения на program-fit; НЕ блокирует переход, НЕ красная. Как выглядит: серый блок на --bg2 с приглушённой иконкой.

• да — реактивна: появляется сразу при провале критерия, показ через .show

Тех. детали: класс .softnote (.lf / .st); цвета --bg2 / --line / --ink / --muted

Точка шкалы — один кружок для ответа (.dot)

Что это: один кружок шкалы — нажатием отмечают самочувствие. Как ведёт себя: в покое тихий контур, при наведении подсвечивается, выбранный — расцветает бирюзовым и слегка увеличивается с ореолом.

Тех. детали: класс .dot, выбранный .on (градиент, scale 1.12); зона нажатия через ::after

Шкала самочувствия — ряд кружков с подписями (.scale)

Что это: вся шкала целиком — ряд кружков с подписями по краям («Тяжело — Ровно — Отлично»); подписей бывает две или три. Как ведёт себя: после выбора остальные кружки тускнеют и уменьшаются — внимание на ответе. Draft: средний якорь «Ровно» (ждёт DK) — совпадает с репликой Sona на пульс.

Тех. детали: ряд .scale, после выбора — .chosen (остальные opacity .45); подписи краёв .scalelab, цвет --muted2

Пульс самочувствия — точки-шкала и её свёртка (.pulse / .pulsedone)

Что это: ежедневный пульс самочувствия — ряд точек-кружков. На «Сегодня» живёт на общей поверхности блока присутствия Sona вместе с зачином (.presence, см. #comp-presence в группе sona-voice), а не в собственной карточке. Вопрос «Как ты сейчас?» задаёт сама Sona в приветствии. Как ведёт себя: после ответа под шкалой отдельным моментом раскрывается короткий отклик Sona, затем пульс сворачивается в тихую строку «Самочувствие на сегодня отмечено» — её можно снова развернуть.

Тех. детали: контейнер .pulse сам не несёт фон/тень/паддинг (плоский по умолчанию — заливку на «Сегодня» держит родитель .presence), после ответа .answered (раскрыт отклик .doseHint); свёрнутая строка .pulsedone. Жирный .pulse h3 — только review-вариант ?zachin=under

Кружок «сделано» — бирюзовая галочка (.chk)

Что это: маленький бирюзовый кружок с галочкой — знак «сделано» у пройденных шагов и отмеченных пунктов. Варианты: обычный и чуть меньше.

Тех. детали: класс .chk 22×22 (в коде встречается как pchk / schk), маленький .chk--sm 18×18 (как rchk) — один компонент вместо трёх повторов

Точка-маркер у подсказки — тихий серый кружок (.sdot)

Что это: крошечный серый кружок в начале тихой плашки-подсказки (например «сегодня короче»). Декор-маркер — на него не нажимают, он ничего не отмечает.

Тех. детали: класс .sdot 6×6, цвет --muted2

Точка под днём недели — отметка в полосе (.mk)

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

Тех. детали: класс .mk внутри .wd; пройденный --teal, контур --line

Аватар Sona — бирюзовый кружок с буквой «S» (.savatar)

Что это: бирюзовый кружок с буквой «S» — «лицо» Sona, знак, что говорит ассистент. Варианты: четыре размера — крупный в приветствии, поменьше в подсказках, мелкий рядом с короткой репликой.

Тех. детали: класс .savatar, размеры .is-lg 38 / .is-md 30 / .is-sm 22 / .is-xs 20 — один компонент вместо повторов

Приветствие Sona — блок-зачин дня (.coach)

Что это: приветственный блок вверху экрана «Сегодня»: аватар Sona, подпись «Sona · твой AI-проводник», строка-ориентир «Неделя · Тема · День» и короткая фраза-настрой. Строка-ориентир видна сразу, не прячется.

Тех. детали: класс .coach; подпись-проводник цветом --teal-ink

Пузырь Sona — короткая фраза в облачке (.bubble)

Что это: светло-бирюзовое облачко с короткой фразой Sona и хвостиком сверху слева. Одно-два слова внутри могут быть выделены бирюзовым акцентом.

Тех. детали: класс .bubble, фон --teal-tint; акцент внутри — <b> цветом --teal-ink

Мост Sona — тёплая фраза-проводник между этапами (.bridge)

Что это: одна тёплая мысль голосом Sona на бирюзовом тинте вместо боксовой плашки-плиты. Снимает тревогу перехода («дальше — программа», «это обратимо»). Почему так: строка-проводник читается за секунду и теплее любого абзаца-пояснения.

Тех. детали: класс .bridge; аватар-«S» — канон .savatar.is-sm (эта же группа sona-voice)

Отклик Sona на самочувствие — реплика после ответа (.doseHint)

Что это: короткая реплика Sona сразу после того, как отметили самочувствие; подстраивается под ответ (на тяжёлый день фраза мягче, на ровный — спокойнее). По умолчанию скрыта, разворачивается в момент ответа. В демо показана раскрытой.

Тех. детали: класс .doseHint, раскрывается через .pulse.answered; длительность --t-medium

Присутствие Sona + пульс — единая поверхность, chromeless-merge (.presence)

Что это: зачин Sona и пульс-чек-ин «Как ты сейчас?» на ОДНОЙ плоской teal-tint поверхности — без шва между «сообщением» и «контролом» (реш. DK 2026-07-08, chromeless-merge; сменяет более раннюю подачу «пульс инлайн без своей карточки рядом с пузырём без карточки»). Радиус пузыря-приветствия внутри поверхности симметричен — асимметричный «хвостик» (речевой аффорданс, см. изолированный .bubble выше) здесь снят ради цельности плиты. После ответа шкала сворачивается в тихую строку .pulsedone на той же поверхности (полный цикл двух состояний — паттерн _gal-pat-sona-voice.html ↗).

Тех. детали: класс .presence — единственный источник заливки/радиуса/паддинга; вложенные .coach/.bubble/.pulse/.scale/.dot/.pulsedone сами фон не несут, держат только состояние. Пока единственный потребитель — program/templates/today, компонент общесистемный

Подсказка Sona вне «Сегодня» — тихая реплика на других экранах (.guardnote)

Что это: тихая светло-бирюзовая плашка с аватаром Sona и одной короткой мыслью — уместный совет на экранах помимо «Сегодня» (например про звукотерапию). Реплика к месту, а не большое приветствие.

Тех. детали: класс .guardnote, фон --teal-tint

Значок шага — мини-иконка типа практики (.sico)

Что это: маленькая иконка слева в строке шага — с одного взгляда понятно, что за практика (дыхание, видео, звук). Варианты: базовый серый значок и крупнее подсвеченные — для карточек-намерений и плашки уровня.

Тех. детали: класс .sico 34px, крупнее — --s40 (+--tint) и --s46; один компонент вместо повторов в строке шага, плашке уровня и карточке-намерении

Узел на нити дня — кружок шага на вертикальной линии (.fnode)

Что это: кружок на вертикальной линии пути дня (или программы) — на каком шаге вы сейчас и какие пройдены. Как выглядят: будущий шаг — тихий кружок с номером, пройденный — залит бирюзой с галочкой, текущий — бирюзовый контур.

Тех. детали: класс .fnode; пройденный .done, текущий .now; линия — .flow::before

Строка шага — тихий пункт ленты дня (.step)

Что это: тихая строка одного шага — значок, название и пояснение («Дыхание 4-7-8 · 11 минут»); из таких строк собрана лента дня. Как ведёт себя: у пройденного шага строка тускнеет и справа появляется бирюзовая галочка. Текущий шаг показан не строкой, а отдельной яркой карточкой.

Тех. детали: класс .step, пройденный .done (галочка .schk); яркий вид того же шага — .maincard

Карточка текущего шага — единственный яркий блок дня (.maincard)

Что это: крупная яркая карточка шага, который делают прямо сейчас. Весь герой — кликабельное поле-превью на приглушённом брендовом тоне (плоский, не градиент — единственный градиент-якорь зоны остаётся у кнопки), высотой ближе к 16:9, чтобы превью доминировало. На обложке — чип с ФАКТОМ о шаге: у медиа это «Тип · длительность» («Практика · 11 мин», «Видео · 2 мин», «Урок · 2 мин»), у упражнения — просто «Упражнение» (длительности нет). Название вынесено в заголовок и не дублирует чип, а подпись под ним несёт лишь остаток (медиум «аудио»/«видео» или атрибуцию), не повторяя чип; если сказать нечего — её просто нет (как у «Упражнения»). Сигнал типа на обложке разведён по жанру: у видео и аудио — одна большая центральная кнопка play, как на реальном видео-превью; у упражнения и письма — значок-мотив (карандаш), тот же, что и в свёрнутой строке. Play ровно один и только у медиа; у не-медиа play нет вовсе. Кнопка снизу зовёт глаголом действия — «Смотреть», «Слушать» или «Заполнить». На экране такая карточка всегда одна — остальные шаги показаны тихими строками.

Тех. детали: класс .maincard; части — .hero (кликабельное поле-постер, фон-плейсхолдер по умолчанию — саундвейв hero-soundwave.svg / .hasposter с реальной poster-картинкой; высота ~150px; <a> на тот же href, что .start; .media — медиа), .heromotif (значок типа, только НЕ-медиа), .tag (чип «Тип · длит»; длительность — поле duration инстанса content.js, у медиа), .playbig (центральная кнопка play, только медиа), .cardbody (текст), .cmeta (подпись-остаток, скрыта при дубле с чипом), .start (кнопка-глагол). Мотив и play взаимоисключающи: медиа → play, не-медиа → мотив. Единственный градиент-якорь карточки — CTA .start; play — белый сигнификатор, саундвейв-плейсхолдер не градиент-заливка (C1b).

Вход «Оглянуться на день» — тихая строка в конце ленты (.closestep)

Что это: тихая строка-ссылка внизу ленты дня — спокойный вход в ритуал завершения. Намеренно неброская, не похожа на главную кнопку.

Тех. детали: класс .closestep; использует тот же значок .sico, что и строки шагов

Карточка-намерение — «Уснуть», «Сосредоточиться» (.jcard)

Что это: карточка-выбор цели — «Уснуть», «Сосредоточиться» — со значком, названием и пояснением. Как ведёт себя: все карточки равноправны, ни одна не выделена заранее; при нажатии выбранная слегка подсвечивается.

Тех. детали: класс .jcard, значок .sico размера 46

Плашка уровня — состояние словами, без балла (.levelcard)

Что это: спокойная плашка по итогам онбординга — описывает состояние словами («Заметное влияние»), а не баллом. Про то, как тиннитус влияет на жизнь, а не оценка «тяжести» в цифрах.

Тех. детали: класс .levelcard, значок .sico размера 40

Зеркало итога — строки-домены словами, ценность, профиль (.mirror / .valueline / .profileline)

Что это: новый итог-экран замера отражает ответы словами, а не баллом. Зеркало — тихие строки-домена «домен + человеческая фраза» с бирюзовой точкой-маркером (.mirror). Под ним строка ценности «время не зря» (.valueline) и честная сноска про профиль/PDF (.profileline) — замена антипаттерну «раскрытие подробнее» с пустыми заглушками. Почему так: антипод дашборда тяжести — без чисел, полос, радара, светофора.

Тех. детали: классы .mirrors / .mirror (маркер .mirror::before 7px --teal), .valueline, .profileline; источник — onboarding/result V3

Галочка завершения — спокойный итог шага (.check)

Что это: крупный бирюзовый кружок с галочкой на экране завершения шага — спокойный знак «готово». Без салюта, конфетти и процентов, чтобы завершение ощущалось мирно.

Тех. детали: класс .check ~44px, градиентный диск

Строка «записано» — куда ушёл результат шага (.routed)

Что это: тихая строка-факт после завершения шага — куда ушёл результат («Сессия записана — в дневнике практики»). Констатация, без поздравлений.

Тех. детали: класс .routed, маленькая галочка .schk--sm 18px

Заголовок-H1 светлого экрана (.pagetitle)

Что это: крупный slate-заголовок страницы светлого экрана (--fs-h1 27px, --ink), плотный трекинг. Якорь экранов без V3-якоря (.lede / .screen-anchor) — прежде всего «Звуковая терапия».

Тех. детали: класс .pagetitle (--fs-h1, letter-spacing −.025em, --ink)

Подпись секции — uppercase-метка (.section-label / --block)

Что это: единая тихая uppercase-метка раздела (--fs-label-sm 11.5px, --muted2, разрядка .07em). Модификатор --block добавляет вертикальную отбивку для подписи-разделителя блока («Оглянуться на день»).

• да — один компонент на все uppercase-подписи секций (зачин «Сегодня», онбординг, «Оглянуться на день»)

Тех. детали: класс .section-label (+ модификатор .section-label--block); старые имена .block-label / .coach .sona-pos / .onbdots .seclabel остаются алиасами в боевой разметке

Главная мысль крупно — display-якорь экрана (.lede)

Что это: тезис/вопрос экрана «сам как заголовок», набранный крупно (--fs-display 30px, ≈1.9× от основного текста) — он держит ~40% внимания. Одна тихая строка-уточнение снимает неоднозначность. Почему так: иерархия задаётся размером и воздухом, без рамок и плашек.

Тех. детали: класс .lede (h1 на --fs-display, .sub 16px --muted)

Живые факты — вертикальный список без рамок (.facts / .fact)

Что это: антипод криптоплиток — каждый факт остаётся живой фразой (жирный тезис + тихое уточнение), понятной без расшифровки. Единственный акцент — бирюзовая маркер-точка слева. Почему так: воздух между фактами группирует их в один список, рамки и разделители не нужны.

Тех. детали: классы .facts / .fact; маркер — .fact .marker 9px --teal (не путать со scale-data .dot 30px)