# LearnSpace — Re-Design Dossier № 01

Academic Risograph · Edition One 10 Systems ● 1 Vision ● Зерно & Чернила For Maxim D. · 2026.05.29
Сегодня LearnSpace выглядит как любая ed-tech платформа: фиолетовый градиент, Inter, округлые карточки. Этот документ предлагает противоположное — интеллектуальную графическую систему с характером печатной книги, редакторской сетки и двух чернильных тонов, которая отличает учебный продукт от продукта-курьера.

###### Принципы

Бумага, не экран. Цвет #f1ebe0 — тёплая бумажная основа. Никакого чисто-белого.

Два чернила. Глубокий индиго #14213d и вермильон #d94e1f. Третий цвет — только для семантики.

###### Типографика

Fraunces — дисплейный сериф с осью оптического размера и SOFT/WONK для эмоции.

Newsreader — тело текста, оптимизированное для длинного чтения.

JetBrains Mono — метаданные, технические надписи, рубрики.

###### Сетка

Асимметричная редакторская. Линейки вместо обводок. Зерно поверх всего как след печати.

Раздел 00 — фундамент

## Палитра, литеры & сетка

Tokens: 26
Fonts: 3 семейства
Grid: 12 col / 8px
Effects: grain, riso, rule

###### ① TYPOGRAPHIC SCALE

Aa
Fraunces — display, opsz 110, SOFT 30
Fraunces italic — accent, SOFT 100, WONK 1
Newsreader — body 16/24, italic 18/27
JetBrains Mono — meta 11/16, eyebrows

###### ② INK

Бумага → ink → вермильон.
Семантика — мох (успех), охра (предупр.).

###### ③ EFFECTS & TEXTURES

GRAIN

Grain — fixed overlay, multiply.
Hatch — fill для прогресс-баров.
Rule — горизонтальные разделители вместо box-shadow.

fig. 00 — design tokens, three columns SPEC · LS-DS / v.02

#### Что меняется в ls.css

- --bg: #f1ebe0 вместо #eef2ff
- Шрифты: Fraunces + Newsreader + JetBrains Mono вместо Manrope/Unbounded
- Скругления: 0—2px, не 12—16px
- Тени: жёсткие 3px 3px 0 вместо мягких box-shadow
- Градиенты исчезают — заменяются штриховкой

tokens paper grain rule
Раздел 01 — точка входа

## Login. Первое впечатление

Path: /login.html
Roles: all
Length: один экран
Tone: уверенный
Learn·Space

## Учить — это ремесло.
Войдите в мастерскую.

«Школа должна напоминать не офис, а тихую читальню, где каждый занят своим переплётом смысла.» — Колофон, 2026
№ 01 · auth

### Здравствуй снова

Введите вашу почту или логин. Пароль помнит вас.

Почта или логин
maxim@school.by
Пароль
• • • • • • • •
Войти → Гостем
Нет аккаунта? Создать Забыли пароль?
fig. 01 — login screen, split column MOCK · auth/login

#### Решения

Половина экрана отдана манифесту. Гигантская курсивная «L» как декоративная литера на тёмной стороне.

- Поля — линия снизу, не box. Шрифт ввода — сериф 22px.
- Один primary в вермильоне, secondary — outline.
- Цитата-эпиграф в подвале левой колонки.

login.html auth primary screen
Раздел 02 — каждодневный экран

## Dashboard как утренняя газета

Path: /dashboard.html
Roles: student / teacher
Density: высокая
Hierarchy: сегодня → неделя
L·S
М
Пятница · 29 мая · 06:42

# Доброе утро,
Максим.

Три урока, одна контрольная и тёплый чай. День сложится.
Стрик
дней подряд
17
Сегодня · 4 занятия → всё расписание
08:30

##### Алгебра. Корни третьей степени

9-Б · И. К. Петрова · 45 мин
войти →
10:15

##### Физика. Закон сохранения импульса

9-Б · М. Я. Шилов · лаборатория
войти →
12:00

##### Английский. Reported speech, drill

9-Б · A. Sokolova · self-paced
войти →
fig. 02 — dashboard, student view MOCK · dashboard.html

#### Решения

Иерархия чтения: имя → день → расписание. Никаких «Welcome back, John!» баннеров.

- Стрик отдельным геральдическим блоком справа.
- Уроки — табличная типографика: время / название / преподаватель / ссылка.
- Сайдбар: моноширинные капители, не «Material-icons».
- Hero-фраза с курсивным выделением имени.

dashboard.html student teacher основной экран
Раздел 03 — урок в реальном времени

## Доска. Зелень и мел

Path: /classroom.html
Tools: 22 инструмента
Theme: сохраняется
Поверх: стеклянный UI

#### Сохраняем — улучшаем

Школьная доска уже — отличный аэстетический выбор. Не трогаем зелёный фон и деревянную раму. Меняем только служебный UI: тулбар, миниатюры, всплывающие панели.

- Тулбар: тёмный индиго-стакан с моно-литерами, вермильон для активного инструмента.
- Стикеры — тёплая охра вместо неонового жёлтого.
- Заголовок страницы — Fraunces italic с подчёркивающим штрихом-«мелом».
- Миниатюры справа — без обводок, тонкие линии.

classroom.html whiteboard.js SSE-sync
✎∿○□△—T∑⌖⟲
Закон Ньютона · второй
F = m·a
Сила, действующая на тело, равна произведению его массы на ускорение, которое она ему сообщает.
Спросить:
что такое m?
— инертная или гравитационная?
01
02
03
+
fig. 03 — classroom whiteboard, live MOCK · classroom.html
Раздел 04 — фонд знания

## Библиотека. Книжная сетка

Path: /library.html · /textbooks.html
Layout: 12-col modular
Item: обложка-плита
Tone: каталог
Фонд № 02 · учебники

# Каталог учебников

ВсеМатематикаФизикаХимияБиология
Алгебра · 9 класс
∫

#### Алгебра в задачах и примерах

Е. П. Кузнецова2024 · 304 стр.
Физика · 10

#### Механика, энергия, поле

Жилко В. В.2023
★ Подборка

#### ЦЭ 2025 · математика

Сборник40 вариантов
Геометрия · 10

#### Стереометрия. Введение

Шлыков В. В.2024
Химия · 11

#### Органические соединения

Колевич Т. А.2024
Биология · 11
∞

#### Генетика и эволюция

Лисов Н. Д.2024
Геометрия · 11

#### Векторы в пространстве

Латотин Л. А.2023
fig. 04 — library, modular spread MOCK · library / textbooks

#### Решения

Каждый учебник — каменная плита. Двенадцатиколоночная сетка позволяет редактору «вытаскивать» избранные тайтлы в span-6 блоки.

- Три «вкуса» плит: бумага, чернила, вермильон. Чередуются вручную в редакторском ритме.
- Большие декоративные литеры (∫ ∞) как обложечные элементы.
- Метаданные в футере карточки — моноширинно, по разделителю.

library.html textbooks.html каталог
Раздел 05 — эксперимент

## Лаборатория. Карточки-опыты

Path: /lab.html
Items: симуляции + игры
Schematic: каждая карточка
Filter: предмет / тип

#### Решения

В каждой карточке — миниатюрная схема опыта вместо превью-картинки. Schemа рисуется SVG, читается и при ч/б печати.

- Курсив Fraunces italic в названии — выделяет «суть» эксперимента.
- Подзаголовок — короткий гипотетический вопрос («что будет, если…»).
- Один точка-индикатор вместо тегов «сложности» с цветами.

lab.html biochem-* red-book-* simulations
Опыт № 12 · кафедра

# Лаборатория

ВсеФизикаХимияБиологияИгры
Физика · оптика

##### Интерференция волн

Что произойдёт, если две щели окажутся ближе длины волны?
готов · 4 мин
Химия · растворы

##### Титрование кислоты

Найти точку эквивалентности по индикатору. Считать каждую каплю.
готов · 7 мин
Биохимия

##### Цикл Кребса

Восемь стадий, восемь фермент. Поставить молекулы по кругу.
8 шагов · ~12 мин
Игра

##### Кроссворд · термины

20 ключевых слов из главы «Электролиз». На время.
игра · до 10 мин
Физика · механика

##### Маятник Фуко

Вращение Земли через 24-часовое движение точки.
наблюдение · 3 мин
Биология · экосистемы

##### Красная книга · биомы

Найти причину сокращения вида и собрать факторы среды.
6 видов · ~15 мин
fig. 05 — laboratory, simulation index MOCK · lab.html
Раздел 06 — серьёзный режим

## Экзамен. Чёрный кабинет

Path: /exam-prep* · /test-run
Mode: сфокусированный
Сетка: 40 вопросов
Timer: крупно
ЦЭ · 2025 · Математика · Вариант 03

## Сеанс в тишине

Пауза Сдать раньше
Вопрос 13 из 40 · 2 балла
Найдите наибольшее значение функции f(x) = x³ − 12x + 5 на отрезке [−3; 3].02
A
21
B
23
C
17
D
−11
← Назад Вперёд → ⚑ Пометить
Осталось времени
01:47:22
Карта · 40 вопросов
12345 678910 1112131415 1617181920 2122232425 2627282930 3132333435 3637383940
⛬ полный экран · клавиша F11
fig. 06 — exam mode, focused MOCK · test-run.html

#### Решения

Экзамен — не дашборд. Никакого сайдбара. Один вопрос — одна страница, всё остальное — карта справа.

- Таймер набран гигантским Fraunces — главный визуальный якорь.
- Карта вопросов — матрица 10×4, не круглые «pills».
- Активный — вермильон, пометка — рамка-флажок, готов — чернила залиты.
- Опции набраны сериф 18px — как в печатном пособии.

test-run.html exam-prep.html focused mode
Раздел 07 — учительский стол

## Журнал. Линованная ведомость

Path: /gradebook · /my-students
Density: максимальная
Стиль: бухгалтерский
Color: 3 семантических

#### Решения

Журнал — самый плотный экран продукта. Это не место для воздуха. Стиль — старая бухгалтерская книга в линейку.

- Имена — Newsreader 16px, цифры — мини-капители Fraunces 18.
- Семантика по цвету: хорошо — мох, плохо — вермильон, нет — точка.
- Вкладки сверху — квадратные, без скруглений.
- Все границы — 1px чернила, никаких shadow-карточек.

gradebook.html analytics.html homework.html teacher
Журнал · 9-Б · Алгебра · IV четверть

## Ведомость оценок

СписокОценкиПропускиОтчёт

Ученик | 05.04 | 08.04 | 12.04 | 15.04 | 19.04 | 22.04 | 26.04 | 03.05 | 10.05 | Ср.
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Антонов Кирилл | 9 | 7 | 10 | 9 | 8 | 9 | · | 10 | 9 | 9.0
Бондарь Анна | 8 | 8 | 7 | 5 | 7 | 8 | 7 | 8 | 9 | 7.4
Васильев Олег | 4 | н | 5 | 6 | 7 | 5 | 7 | 6 | 5 | 5.6
Григорьева Дарья | 10 | 9 | 10 | 10 | 9 | 10 | 10 | 9 | 10 | 9.7
Денисенко Илья | 7 | 8 | 7 | 8 | 9 | 8 | 7 | 8 | 8 | 7.8
Журавлёв Артём | · | 5 | 7 | 7 | 6 | 7 | 8 | 7 | 8 | 6.9
Зайцева Полина | 9 | 8 | 8 | 9 | 9 | 10 | 9 | 9 | 10 | 9.0

fig. 07 — gradebook, dense ledger MOCK · gradebook.html
Раздел 08 — машинная комната

## Админ. Журнал аппарата

Path: /admin · /admin-textbooks
Tone: служебный
Sidebar: тёмный, моно
KPI: четыре карточки
Узел № 1 · служба

## Аппарат LearnSpace

###### System

→ Overview · Users · Classes · Roles

###### Content

· Textbooks · Sims · Lessons

###### Maintenance

· Logs · Backups · SQL console
Пользователей
1·284
+ 12 за неделю
Уроков сегодня
47
из 312 за месяц
Активных классов
38
6 классов офлайн
Аптайм
99.97%
30 дн.
Активность · 12 недель
Журнал событий

06:42 auth teacher@ksenia.by → login ok

06:38 backup ls-2026-05-29-0638.tar.gz · 412 MB · ok

06:31 seed gen_phys10_ch.js · 24 вопроса добавлено

06:29 sse classroom/14 · 6 connections

fig. 08 — admin overview MOCK · admin.html

#### Решения

Админка — служебный, не парадный экран. Сайдбар тёмный (это часто открыто фоном). Никаких «illustrations».

- KPI-карточки чередуют бумагу/индиго/вермильон-акцент.
- Простой ASCII-style бар-чарт без gridlines.
- Журнал событий — моноширинно, время и модуль выделены вермильоном.

admin.html admin-textbooks.html служебный
Раздел 09 — игровая часть

## Профиль & Питомец

Path: /profile · /pet
Tone: тёплый
Геймификация: тонкая
Питомец: SVG-рисунок

#### Решения

Профиль может быть тёплым, но не скатывается в детский сад «Duolingo-style». Геральдика > стикеры.

- Левый блок — тёмный портрет с большой курсивной литерой-инициалом.
- Достижения — пятиугольная сетка из курсивных литер, а не значки.
- Питомец — ручной SVG-рисунок в стиле гравюры, не 3D-моделька.
- Стрики и уровни — без ярких неоновых полосок.

profile.html pet.html gamification
Профиль № 1284
Максим Долголёв
9-Б · Учитель физики · Минск
17
стрик
8.4
ср балл
142
уроков
Питомец · уровень 12

##### Феликс, учёный кот

Сытость 72
Знание 88
Настр. 55
Достижения · 8 из 20
A
B
C
D
·
E
F
G
H
·
fig. 09 — profile & pet MOCK · profile / pet