Цвет
Семантические токены — единственный слой, к которому обращаются компоненты. Сырая палитра в модулях не используется.
Поверхности
--color-background#fcfcfbФон приложения--color-surface#ffffffПанели и карточки--color-surface-sunken#f7f7f5Утопленные области--color-surface-hover#efefecНаведение--color-surface-active#e4e4e0НажатиеТекст
--color-text-primary#191c21Основной текст--color-text-secondary#5f636aПодписи и описания--color-text-tertiary#82858aСлужебный текст--color-text-disabled#a8aaa6Недоступное--color-text-accent#12524dСсылки и акценты--color-text-inverted#ffffffНа тёмном фонеГраницы
--color-border#e4e4e0Базовая граница--color-border-subtle#efefecРазделители внутри блока--color-border-strong#d2d3ceПоля ввода, кнопки--color-border-focus#17605aКольцо фокусаАкцент
--color-accent#12524dОсновное действие--color-accent-hover#0d403c--color-accent-subtle#eaf2f0Фон акцентных областей--color-accent-border#a9cbc5--color-accent-contrast#ffffffТекст на акцентеСостояния
--color-success#1f7a4dРабота принята--color-success-subtle#e9f4ee--color-warning#8a5a00Приближается срок--color-warning-subtle#faf1de--color-danger#b3261eСрок нарушен--color-danger-subtle#fbecea--color-info#1b4f8aНейтральное уведомление--color-info-subtle#e9f0f8Типографика
Системный шрифтовой стек. Крупные размеры масштабируются через clamp(), поэтому отдельных мобильных значений не требуется.
Шкала
Стили
Academic Workspace
Design Foundations
Каноническая доменная модель
Деятельность и результат
Задачи на сегодня
Студент выполняет задачи, создаёт работы и предъявляет их на проверку. Каждое суждение о работе сохраняется вместе с основанием, по которому оно вынесено.
Обратная связь опубликована 14 мая, попытка 2 из 3.
Обновлено куратором программы
Форма контроля
Submission.attemptNo = 2Отступы и форма
Шаг сетки — 4px. Тени применяются только к всплывающим слоям, статичные блоки разделяются границами.
Шкала отступов
Радиусы
Тени
Layout
Дизайн-система задаёт пределы и ритм раскладки, но не форму страницы. Готовой сетки из фиксированных колонок здесь нет и не будет.
Container
Breakpoints
Принципы адаптивности
- Mobile FirstБазовые стили описывают узкий экран. Медиазапросы только расширяют раскладку, но не отменяют её.
- Компонент адаптируется, а не заменяетсяОтдельных мобильных и настольных версий одного элемента не существует.
- Раскладка меняется раньше компонентаЕсли содержимое не помещается, сначала перестраивается расположение блоков и только потом упрощается сам блок.
- Все страницы живут внутри ContainerСобственную ширину и поля страница не задаёт.
Принципы раскладки
- Сетки с фиксированным числом колонок нетЧисло колонок принадлежит сценарию, а не дизайн-системе.
- Система задаёт пределы и ритм, а не форму страницыШирина, отступы и breakpoints общие для всех. Расположение блоков — решение конкретного экрана.
- Колонки описываются намерением, а не количествомМинимальная ширина элемента вместо «четыре колонки из двенадцати».
- Расстояния берутся из шкалы отступовПромежуточных значений между блоками не бывает.