Платформа ученика

Редакционный тёплый стиль: бумажный фон, шрифт Unbounded в заголовках, чернильные кнопки, violet-акцент, янтарные стикеры.

Акцент: violet + amber (стикеры)Нейтрали: нейтральные, фон #fcfbfdСкругления: rounded-full (кнопки) / rounded-2xl (карточки)Навигация: Словомарка + подчёркивание активного пункта, чек-лист у имени

Цвета

Один акцентный цвет на систему. Семантика едина для всех: emerald — успех, amber — внимание/награда, rose — ошибка.

Акцент

violet-100

фоны-подложки, ховеры подсказок

violet-600

акцент: активные состояния, бары, ссылки

violet-700

ховер чернильных кнопок

amber-300

стикеры, выделения (повёрнутые бейджи)

stone-900

кнопки, тёмные карты, аватар

Нейтрали

#fcfbfd

фон страниц

white

карточки, поля

stone-200

границы, треки, разделители

stone-400

подписи, брови-лейблы

stone-600

второстепенный текст

stone-900

основной текст, чернильные поверхности

Семантика (общая)

emerald · успех / пройденamber · внимание / наградаrose · ошибка

Типографика

Системный шрифт (ui-sans-serif). Иерархия — размером и весом, не цветом.

Заголовок страницы

text-2xl font-bold

Заголовок секции / карточки

font-semibold

Основной текст — описания, параграфы, пояснения.

text-sm text-zinc-600 (педагог: text-slate-600)

Подпись — даты, метаданные, вспомогательные подсказки

text-xs text-zinc-400

Кнопки и ссылки

Один основной CTA на экран.

Текстовая ссылка →

rounded-2xl bg-violet-500 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-violet-600

Бейджи и статусы

ПройденНе пройденФлагманский тестСкоро

rounded bg-emerald-100 px-1.5 py-0.5 text-[11px] font-medium text-emerald-800

Карточки и поверхности

Стандартная

Основной контейнер контента

Выделенная

Акцентные блоки: отчёт, рекомендации

Пустое состояние

Нет данных + иллюстрация + CTA

rounded-2xl border border-stone-200 bg-white p-6

Формы и фильтры

Фильтры-чипы

w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none transition focus:border-violet-400 focus:ring-2 focus:ring-violet-100

Прогресс и данные

Одна серия — один цвет; подписи несут идентичность, тултип по ховеру.

Прогресс-бар64%

Горизонтальный бар (BarList)96

Вторая строка55

412

Стат-карточка: число + подпись

Чат с ИИ

Сообщение ассистента — нейтральная подложка.

Сообщение пользователя — акцентная.

Соответствие токенов между системами

Новые страницы собираются из этих пар — меняется только контекст.

Роль	Ученик	Педагог	Админ
Акцент	indigo-600	teal-600	indigo-600
Нейтрали	zinc-*	slate-*	zinc-*
Карточка	rounded-2xl	rounded-xl	rounded-2xl
Навигация	светлый топбар	сайдбар slate-900	сайдбар zinc-950
ИИ-доступ	виджет-чат + страница	кнопка «Спросить AI»	—

Дизайн-система · AI профориентатор · при создании новых страниц копируйте рецепты классов из этой страницы