Цветовые роли ProfessorWeb

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

В этом уроке вы закрепите цветовые роли reading-lab на основе действующей палитры ProfessorWeb. Сохраняем тёмный фон, фиолетовую основу акцента и зелёные ссылки. Предыдущие уроки уже определили иерархию, сетку и ритм; цвет будет поддерживать их, а не заменять.

От реальных значений к ролям

В текущем static/site.css сайта используются фон #1f202a, поверхность #252631, основной текст #e4e4e4 и второстепенный текст #b7b9c9. Фиолетовый акцент имеет значения #6c43af и #7e4ecc, ссылки — #46d96f и #83eba0. Мы прочитали эти значения из исходника; это не измерение контраста и не обещание, что любое сочетание подходит для любого размера текста.

В базе стенда эти цвета уже записаны как переменные --lab-*. Названия связаны с назначением: --lab-bg обозначает окружение, --lab-surface — отдельную поверхность, --lab-link — обычную ссылку. Если позднее появится другой оттенок, имя роли сможет сохраниться. Поэтому --lab-purple-1 хуже объясняет компонент, чем --lab-accent.

Рассмотрим фон заметки и фон листинга. Оба отличаются от общего окружения, но решают разные задачи. Заметка выделяет самостоятельное пояснение, а листинг отделяет технический текст. Можно использовать близкие поверхности, сохранив другие признаки различия: подпись языка, моноширинный набор и внутреннее устройство. Не обязательно создавать ещё один насыщенный цвет для каждой формы содержания.

Основной текст тоже не обязан быть чисто белым. Наш светлый оттенок относится ко всему объяснению, а приглушённый — к коротким служебным сведениям. Но слово «приглушённый» не разрешает делать информацию практически невидимой. Уровень подготовки и подпись изображения должны оставаться читаемыми; сокращение контраста без проверки не является способом добиться спокойствия страницы.

Ограниченный фиолетовый акцент

Создайте полный файл lesson-06.css и подключите его после предыдущих дополнений:

.reading-lab .lab-header { background: var(--lab-surface); }
.reading-lab .lab-kicker { color: var(--lab-muted); }
.reading-lab .lab-heading h1 { color: var(--lab-ink); }
.reading-lab .lab-prose a { text-decoration-thickness: .08em; text-underline-offset: .2em; }
.reading-lab .lab-note { background: var(--lab-surface); }
.reading-lab .lab-note h3 { color: var(--lab-ink); }
.reading-lab .lab-toc { background: var(--lab-surface); }
.reading-lab .lab-code-label { background: var(--lab-surface); }
.reading-lab .lab-brand { padding: .25rem .5rem; background: var(--lab-accent); border-radius: var(--lab-radius); }

Ожидаемый эффект — небольшая фирменная область в хедере и спокойное основное содержание. Акцент не распространяется на все заголовки статьи. Название остаётся светлым и крупным; зелёные ссылки сохраняют собственную роль действия. Так два узнаваемых цвета работают в разных местах и не конкурируют на каждой строке.

text-underline-offset отодвигает подчёркивание от текста, а толщина задаёт его заметность. Эти свойства не превращают ссылку в кнопку: она по-прежнему читается внутри предложения. Устройство отступа описано в MDN. В нашем макете конкретные значения выбраны для исходной типографики и могут требовать уточнения с другим шрифтом.

Мы не добавили цветной бордер только вдоль одной стороны каждой карточки. Такой бордер иногда нужен для конкретного статуса, но в обычном объяснении он не имеет самостоятельного смысла. Повторяющийся декоративный штрих превращает разные блоки в один узнаваемый шаблон. Здесь роль заметки уже выражена отдельной поверхностью и внутренним расстоянием.

Цвет и смысл сообщения

Предположим, в будущем автор добавит предупреждение о потере файла. Одного красного оттенка будет недостаточно: текст должен назвать опасное действие и последствия. Аналогично зелёный фон не доказывает успешного выполнения программы. Не оформляйте учебное предположение как полученный результат только потому, что компонент называется «успех».

В нашем стенде заметка сообщает о сохранении маршрута старого урока. Это пояснение, а не системное уведомление. Поэтому у неё нет яркого сигнального цвета и значка тревоги. Если любую полезную информацию показывать как предупреждение, действительно важные ограничения потеряют заметность. Дизайн зависит от характера сообщения.

Проверяйте цветовые сочетания попарно. Текст на общей поверхности, текст на фиолетовом акценте, ссылка в таблице и подпись под белым скриншотом являются разными ситуациями. Значение цвета само по себе ничего не говорит о контрасте без соседнего фона и размера. В серии доступности это будет отдельной проверкой; здесь сохраняем ясные роли и не объявляем соответствие стандарту по одному набору переменных.

Для пробного изменения представьте, что заметке назначен ярко-зелёный фон, а её ссылке оставлен фирменный зелёный текст. Ссылка может потеряться, хотя оба цвета принадлежат палитре. Причина — сочетание ролей, а не недостаточная современность оттенка. Исправление должно вернуть различие текста и поверхности, а не добавить ещё одну тень или рамку.

Как не потерять палитру при расширении

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

Градиент в каждом заголовке также не является обязательным признаком обновления. Он создаёт неодинаковую яркость букв и усложняет согласование с изображениями и кодом. В учебной статье достаточно точных размеров, ритма и аккуратных поверхностей. Фирменный акцент может оставаться в логотипе и небольших элементах навигации.

Отдельно рассмотрите реальные изображения старых уроков. Они могут иметь белый фон или собственную цветовую схему программы. Не перекрашивайте их автоматически фильтром ради совпадения с тёмной страницей: оттенки и контраст интерфейса могут быть частью объяснения. Лучше организовать спокойное место изображения и связать его с подписью, что мы сделаем в уроке иллюстраций.

Если преподавательская статья требует нескольких типов заметок, сначала испытайте один нейтральный компонент на разных текстах. Различие названий и содержания часто достаточно. Новое оформление должно появляться из новой учебной функции, а не из желания увеличить число вариантов в каталоге компонентов.

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