Ментор рядом.
Следующий шаг понятен.

Полное название

На лендинге, обложках и в шапке продукта. Это собственные SVG-контуры, а не набор текста похожим шрифтом.

Минимальная ширина — 180 px. Охранное поле — половина высоты прописной буквы. Пропорции и геометрию сохраняем.

Самостоятельная монограмма

Аватар и компактные самостоятельные применения. Минимальная ширина — 32 px. Не ставим ТМ рядом с полным названием в одном блоке.

Синий штрих первой Т равен ширине ножки. Лаймовый участок остаётся в М. Не добавляем второй штрих.

На тёмном фоне

Готовый инверсный SVG. Без фильтров, добавленной обводки, градиента и теней. Цветная и одноцветная версии находятся в пакете.

Тон общения

«Понять, где ты сейчас»
Вместо давления — понятное начало.

«Почему этот шаг»
Вместо скрытого алгоритма — причина.

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

Не обещаем трудоустройство, грейд, сертификат или результат за фиксированный срок.

Onest, 900

Выразительный hero с плотным набором. Заголовок остаётся настоящим HTML-текстом. Никаких встроенных в картинку обещаний или кнопок.

Onest, 400–750

Основной текст — 16 px с интервалом 1.6. Объяснение рядом с действием должно читаться без увеличения.

JetBrains Mono — код и технические данные. Обычные подписи остаются в Onest.

Линия и переход

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

Мягкая среда

Волна поддерживает композицию, не перекрывая текст. Лучи внимания — часть исходников канала; в продукте не превращаем лайм в декоративную россыпь.

Действия

Одна заливная главная кнопка на экран. Остальное — вторичные и текстовые действия. Минимальная область нажатия — 44 × 44 px.

Поля

Сообщения

role="status" для новых фоновых результатов, role="alert" для актуальной ошибки. Статические образцы не озвучиваем как новые события.

Карточка материала

Граничные значения

Как выбрать проверки около границ и объяснить свой выбор.

У карточки — понятное название, краткая польза и один путь перехода. Вложенных интерактивных элементов внутри ссылки нет.

Три разных значения

Цифры — условный пример. Цвет повторяет смысл, а текст и форма передают его самостоятельно.

Что не смешиваем

• Самооценка не становится подтверждённым уровнем.
• Завершённый шаг плана не подтверждает уровень автоматически.
• У неподтверждённого навыка показываем «Как подтвердить».
• В текущем радаре — оценка и цель; подтверждённый уровень остаётся в списке согласно ADR 0017.

Наведение и фокус — 160–200 мс. Появление блока — 600–700 мс, смещение до 22 px. Движение без изменения размеров текста.

Правила прокрутки

• Маршрут: плавный ход пунктира без числового «прогресса навыка».
• Система: карточки образуют статическую композицию; ниже мягко появляются объяснения.
• Ступени: небольшое смещение на скролле, до 24 px.
• Без scroll-jacking, фиксации длинного рассказа и обязательного ожидания анимации.
• prefers-reduced-motion отключает движение и плавную прокрутку; смысл и контент сохраняются.

Размеры и ритм

• Базовый шаг — 4 px. Основные интервалы: 8, 12, 16, 24, 32, 48, 64, 96.
• Desktop: левое меню 232 px; ниже 1200 — 214 px. Контент до двух основных колонок.
• До 1000 px hero становится одноколоночным; до 700 px меню переходит в верхнюю горизонтальную навигацию.
• На 360 px поля 24 px; основной текст до 720 px на широком экране.
• Радиусы: 8 для меток, 14 для действий, 22 для карточек. Овальная форма — только компактные вспомогательные метки.

Проверяем перед переносом

• Текст — контраст не менее 4.5:1; крупный текст и необходимые границы — 3:1.
• Видимый фокус 3 px со смещением; все действия доступны с клавиатуры.
• Заголовки идут по уровням, ссылки ведут к указанной цели, изображения имеют alt по смыслу.
• Иллюстрация может быть декоративной; важные сведения всегда дублируются HTML-текстом.
• Светлая и тёмная темы, 360 px, увеличение текста, reduced motion и отключённый JavaScript.