Версия 8.1 · проверка: нарушений нет

design

Дизайн-система как сервер. Проекты берут у неё только ручки

Что здесь

Константы

Правила среды: ступени экрана, адаптация, шкала размеров, слои, шапка страницы, приложение. Готово

Атомы

Значения: цвет, шрифт, отступ, скругление, тень, линия, движение, иконки. Готово

Компоненты

Вещь на экране. Следующий шаг

Паттерны

Задача из нескольких компонентов. После компонентов

Связи

Темы между собой и места в проектах

Конвенция

По каким правилам собирается система

Техника

Как устроен код и как его поддерживать

Подключение проекта

Всё из договора при сборке, руками ничего

Договор

https://design.‹домен›/latest/‹проект›.json

Шапка

page.html и page.head — в index.html: стили и поведение design, viewport, цвет, иконки, теги iOS

Манифест

app.manifest — в manifest.webmanifest рядом с index.html

Service worker

app.serviceWorker — обновление и правила кеша

Иконки

В icons/ по именам из Приложения

Константа

Медиа-запросы

Три ступени экрана и признаки устройства

Ступени

Телефон до 720 · компьютер с 721 · широкий с 1200

Входит в

Шрифты

В проектах

Кино 26 · Калории 4 · Дашборд 13

Значения

Запросы · 7

Название	Код	Как писать и что подставится
Телефонодна колонка во всю ширину	media-01phone	`@media (--phone)`(max-width: 720px)
Компьютерколонка 720 по центру	media-02desktop	`@media (--desktop)`(min-width: 721px)
Широкийрядом с колонкой встаёт боковая	media-03wide	`@media (--wide)`(min-width: 1200px)
Мышьнаведение только под ней	media-04mouse	`@media (--mouse)`(hover: hover) and (pointer: fine)
Меньше движенияанимации выключены	media-05reduced-motion	`@media (--reduced-motion)`(prefers-reduced-motion: reduce)
Приложениеоткрыто с экрана «Домой»	media-06standalone	`@media (--standalone)`(display-mode: standalone)
Телефон повёрнутэкран «Поверните телефон»	media-07phone-landscape	`@media (--phone-landscape)`(orientation: landscape) and (max-height: 500px)

Правила

Только то, чего не видно в таблицах

В CSS — только имя: @media (--desktop). Сервер подставляет запрос.

В JS — запрос из договора проекта: media['--desktop'].

Наведение — только под (--mouse).

Своих чисел в @media нет. Нужна новая ступень — сначала константа.

В проектах

Собирается на лету из ветки main каждого проекта. Написанное руками вместо константы тоже показано: его надо перевести на константу

Кино

26 мест: Признак устройства напрямую 20, Ступень числом 6

Признак устройства напрямую 20

web/index.html:25web/index.html:26web/index.html:28web/index.html:29web/index.html:31web/index.html:32web/index.html:34web/index.html:35web/index.html:37web/index.html:38web/index.html:40web/index.html:41web/index.html:43web/index.html:44web/index.html:46web/index.html:47web/index.html:49web/index.html:50web/src/pages/Home.tsx:190web/src/styles/app.css:90

Ступень числом 6

web/src/components/wide.ts:5web/src/pages/discovery/FindSheet.tsx:67web/src/styles/app.css:14web/src/styles/app.css:180web/src/styles/app.css:280web/src/styles/app.css:334

Калории

4 мест: Признак устройства напрямую 4

Признак устройства напрямую 4

main/web/src/app.css:408main/web/src/app.css:422main/web/src/config/animation.ts:21main/web/src/keyboard.ts:71

Дела

нет репозитория /projects/todo

Дашборд

13 мест: Ступень числом 12, Признак устройства напрямую 1

Ступень числом 12

web/app.css:29web/app.css:43web/app.css:76web/app.css:94web/app.css:100web/app.css:146web/app.css:152web/app.css:178web/app.css:196web/app.css:203web/app.css:207web/js/01_core.js:116

Признак устройства напрямую 1

web/app.css:118

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/media/style.css
constants/media/topic.json

Коды

7: media-01 … media-07

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

Ступень числом: \((?:min|max)-width:\s*\d{3,4}px\)
Признак устройства напрямую: \((?:hover|pointer|prefers-reduced-motion|display-mode|orientation)\s*:

Исключения

Нет

Константа

Экран

Колонка, боковая и страница по ступеням, высота экрана, безопасные зоны и рамки примеров

Входит в

Нет

В проектах

Кино 7 · Калории 2 · Дашборд 2

Значения

Раскладка · 3

Название	Код	Значение
Колонкакомпьютер: содержимое в колонке по центру	screen-01column-width	720
Боковаяширокий: колонка записи рядом с основной	screen-02aside-width	400
Страницаширокий: вся страница не шире, вместе с полями	screen-03page-width	1200

Высота экрана · 1

Название	Код	Значение
Высота экранабез панели браузера	screen-04screen-height	100dvh

Безопасные зоны · 4

Название	Код	Значение
Сверхувырез и строка состояния	screen-05safe-top	env(safe-area-inset-top, 0)
Снизуполоска «Домой»	screen-06safe-bottom	env(safe-area-inset-bottom, 0)
Слевателефон повёрнут	screen-07safe-left	env(safe-area-inset-left, 0)
Справателефон повёрнут	screen-08safe-right	env(safe-area-inset-right, 0)

Рамки примеров · 4

Название	Код	Значение
Телефон, ширинаiPhone 12–15	screen-09frame-phone-width	390
Телефон, высотаiPhone 12–15	screen-10frame-phone-height	844
Компьютер, ширинасамый узкий компьютер	screen-11frame-desktop-width	721
Широкий, ширинасамый узкий широкий	screen-12frame-wide-width	1200

Правила

Только то, чего не видно в таблицах

Компьютер: содержимое в колонке var(--column-width) по центру.

Широкий: колонка и боковая var(--aside-width) рядом, страница не шире var(--page-width).

Высота экрана — var(--screen-height), не 100vh.

Отступ от края экрана — var(--safe-top) и соседи, env() напрямую не пишется.

В проектах

Кино

7 мест: Безопасная зона напрямую 4, Высота экрана числом 3

Безопасная зона напрямую 4

web/src/styles/app.css:9web/src/styles/app.css:17web/src/styles/app.css:140web/src/styles/app.css:183

Высота экрана числом 3

web/src/styles/app.css:33web/src/styles/app.css:204web/src/styles/app.css:357

Калории

2 мест: Ширина раскладки числом 2

Ширина раскладки числом 2

main/web/src/app.css:188main/web/src/app.css:261

Дела

нет репозитория /projects/todo

Дашборд

2 мест: Высота экрана числом 1, Ширина раскладки числом 1

Высота экрана числом 1

web/app.css:15

Ширина раскладки числом 1

web/app.css:122

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/screen/style.css
constants/screen/topic.json

Коды

12: screen-01 … screen-12

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

Ширина раскладки числом: max-width:\s*(?:720|1[0-9]{3})px\s*[;}]
Безопасная зона напрямую: env\(\s*safe-area-inset
Высота экрана числом: \b100(?:d|s|l)?vh\b

Исключения

Нет

Константа

Адаптация

Как интерфейс переходит между телефоном, компьютером и широким экраном

Ступени

Телефон до 720 · компьютер с 721 · широкий с 1200

Планшет

Своей вёрстки нет: по ширине он компьютер или широкий

Входит в

Нет

В проектах

Нигде

Значения

Пусто — как на ступени левее

Переходы · 13

Название	Код	Телефон	Компьютер	Широкий
Сетка	adapt-01	Телефон Одна колонка во всю ширину	Компьютер Колонка 720 по центру	Широкий Колонка 720 и боковая 400, страница до 1200
Поле экрана	adapt-02	Телефон 16	Компьютер 24	Широкий
Навигацияпалец достаёт до низа экрана	adapt-03	Телефон Таб-бар снизу, до пяти разделов	Компьютер Вкладки в шапке	Широкий
Поверх экранамышь достаёт до любого места	adapt-04	Телефон Шит снизу: 40, 75 или 88%	Компьютер Окно по центру: 560 или 960	Широкий
Запись из списка	adapt-05	Телефон Шит	Компьютер Окно	Широкий В боковой рядом со списком
Выбор из спискав маленький список палец не попадает	adapt-06	Телефон Шит выбора: строки с галочкой	Компьютер Список под кнопкой	Широкий
Ввод текста и числаiOS рисует над клавиатурой свою панель	adapt-07	Телефон Шит ввода над клавиатурой	Компьютер Ввод на месте	Широкий
Удалениежест есть только у пальца	adapt-08	Телефон Свайп, затем подтверждение	Компьютер Корзина, затем подтверждение	Широкий
Перетаскиваниеиначе не отличить от прокрутки	adapt-09	Телефон Удержать и тянуть	Компьютер Тянуть сразу	Широкий
Наведениепо (--mouse), а не по ширине	adapt-10	Телефон Нет	Компьютер Подсветка под мышью	Широкий
Высоты	adapt-11	Телефон Главная 56, поле и строка 48, малая 28	Компьютер Главная, поле и строка 40, малая 32	Широкий
Кегль строки и поляменьше 16 iOS увеличивает страницу у поля	adapt-12	Телефон 17	Компьютер 15	Широкий
Поворот	adapt-13	Телефон Экран «Поверните телефон», видео — во весь экран	Компьютер Любой	Широкий

Правила

Только то, чего не видно в таблицах

Вид меняется только на трёх ступенях из Медиа-запросов.

Компонент один на все ступени: меняются значения, а не разметка.

Тема ссылается на строку adapt-NN, а не пересказывает её.

Своих ступеней и своих правил перевода у проекта нет.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

Не берёт

Калории

Не берёт

Дела

нет репозитория /projects/todo

Дашборд

Не берёт

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/adapt/topic.json

Коды

13: adapt-01 … adapt-13

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

Нет

Исключения

Нет

Константа

Шкала размеров

Какие высоты и ширины элементов можно брать, и минимальная зона нажатия

Почему без токенов

Размер пишется числом из шкалы: токены только повторяли бы числа

Входит в

Нет

В проектах

Нигде

Значения

Значения · 2

Название	Код	Значение
Высоты и шириныв диапазоне 5–99 px других нет	sizes-01	64, 56, 48, 44, 40, 36, 32, 28, 24, 20, 12, 8, 4
Зона нажатияна телефоне не меньше	sizes-02	44

Как берут: шкала

Элемент берёт ступень, а не число под один экран

Акцентом — зона нажатия 44.

Правила

Только то, чего не видно в таблицах

Нет нужной ступени — бери ближайшую.

Зона нажатия меньше 44 добирается полями, а не размером рисунка.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

Не берёт

Калории

Не берёт

Дела

нет репозитория /projects/todo

Дашборд

Не берёт

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/sizes/checks.json
constants/sizes/examples.html
constants/sizes/topic.json

Коды

2: sizes-01 … sizes-02

Классы

Нет

Проверка ловит

Высота и ширина элемента только из списка: 64, 56, 48, 44, 40, 36, 32, 28, 24, 20, 12, 8 и 4.

Ищет в проектах

Нет

Исключения

Нет

Константа

Слои

Что над чем лежит: восемь ступеней от декора под элементом до блокировки экрана

Входит в

Нет

В проектах

Кино 3 · Калории 5 · Дашборд 2

Значения

Значения · 8

Название	Код	Значение
Под элементомкрай таб-бара, клетка календаря, свечение	layers-01layer-below	-1
Над соседямисписок дропдауна, подсказка, перетаскиваемая копия	layers-02layer-raised	1
Липкая шапка блокашапка панели	layers-03layer-sticky	2
Панели экранашапка, таб-бар, панель действий	layers-04layer-bar	10
Над панелямипанель правки	layers-05layer-dock	20
Шит, окно, плеерповерх экрана	layers-06layer-sheet	50
Заставкапока приложение загружается	layers-07layer-splash	100
Поверх всего«Поверните телефон»	layers-08layer-blocker	1000

Правила

Только то, чего не видно в таблицах

z-index — только var(--layer-…).

Своих чисел и calc() от слоя нет. Нужна новая ступень — сначала константа.

В проектах

Кино

3 мест: z-index числом 3

z-index числом 3

web/src/styles/app.css:135web/src/styles/app.css:149web/src/styles/app.css:192

Калории

5 мест: z-index числом 5

z-index числом 5

main/web/src/app.css:260main/web/src/app.css:331main/web/src/app.css:359main/web/src/app.css:373main/web/src/app.css:412

Дела

нет репозитория /projects/todo

Дашборд

2 мест: z-index числом 2

z-index числом 2

web/app.css:21web/app.css:32

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/layers/style.css
constants/layers/topic.json

Коды

8: layers-01 … layers-08

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

z-index числом: z-?[iI]ndex\s*[:=]\s*-?\d+

Исключения

Нет

Константа

Страница

Что стоит в шапке index.html каждого проекта. Готовая шапка — page.head в договоре

Входит в

Нет

В проектах

Кино 2 · Калории 2 · Дашборд 4

Значения

Значения · 7

Название	Код	Значение
viewportChrome сжимает страницу под клавиатуру, Safari нет: шит над клавиатурой поднимает JS	page-01	width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content
theme-colorбраузер читает его до стилей	page-02	--color-bg темы проекта
Язык	page-03	lang="ru" на html
Тёмная темау тёмного проекта на html, у светлого — на тёмной панели	page-04	data-theme="dark"
Заголовок	page-05	name из app в design.json
Стили designпервым стилем; {design} — адрес design	page-06	<link rel="stylesheet" crossorigin href="{design}/latest/‹проект›.css">
Поведение designпоследней строкой шапки, вставляет спрайт иконок	page-07	<script type="module" crossorigin src="{design}/latest/‹проект›.js"></script>

Правила

Только то, чего не видно в таблицах

Шапку проект не пишет руками: вставляет page.head из договора при сборке и подставляет адрес design вместо {design}.

Ссылки на design — с crossorigin: иначе service worker не сохранит их в кеш.

Масштаб не запрещается: кегль поля 17 и так не даёт iOS увеличивать страницу.

В проектах

Кино

2 мест: theme-color вручную 1, viewport вручную 1

theme-color вручную 1

web/index.html:10

viewport вручную 1

web/index.html:6

Калории

2 мест: theme-color вручную 1, viewport вручную 1

theme-color вручную 1

main/web/index.html:10

viewport вручную 1

main/web/index.html:6

Дела

нет репозитория /projects/todo

Дашборд

4 мест: theme-color вручную 2, viewport вручную 2

theme-color вручную 2

web/index.html:8web/pin.html:10

viewport вручную 2

web/index.html:5web/pin.html:5

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/page/topic.json

Коды

7: page-01 … page-07

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

viewport вручную: name=["']viewport["']
theme-color вручную: name=["']theme-color["']

Исключения

Нет

Константа

Приложение

Установка на экран «Домой»: манифест, иконки, теги iOS и service worker

Откуда

Манифест, шапка и правила кеша — готовые в договоре проекта

Своё у проекта

Название, описание и адрес — поле app в design.json, иконки — в icons/

Входит в

Нет

В проектах

Кино 28 · Калории 10 · Дашборд 10

Значения

Значения · 12

Название	Код	Значение
displayбез строки адреса, как приложение	app-01	standalone
orientationвидео поворачивается во весь экран	app-02	portrait
Адресадреса проекта — в design.json	app-03	id = start_url, start_url внутри scope
Язык	app-04	lang ru, dir ltr
Цветазаставка Android того же цвета, что и экран	app-05	theme_color и background_color = --color-bg темы проекта
Иконки манифеста	app-06	icons/icon-192.png 192, icons/icon-512.png 512, icons/icon-maskable-512.png 512 maskable
Иконки страницы	app-07	icons/icon.svg, icons/favicon-32.png 32, icons/apple-touch-icon.png 180
Строка состояния iOSу тёмной экран идёт под строку, отступ даёт --safe-top	app-08	default у светлой темы, black-translucent у тёмной
Теги iOS	app-09	mobile-web-app-capable и apple-mobile-web-app-capable = yes, apple-mobile-web-app-title = short_name
Картинки запуска iOSиначе при запуске белая вспышка	app-10	только у тёмной темы: icons/splash-‹ширина›x‹высота›.png на каждый размер iPhone
Обновление	app-11	при открытии: новая версия встаёт сама, страница один раз перезагружается
Кеш	app-12	страница, design и /api/ — сначала сеть, ждать 3 с; картинки — из кеша, до 200

Проекты · 4

Проект	Название	На экране	Адрес	Описание
Кино	Кино	Кино	/app/	Фильмы и сериалы из Jellyfin
Калории	Калории	Калории	/	Учёт калорий и приёмов пищи
Дела	Дела	Дела	/app	Классы, проекты и задачи
Дашборд	Личная аналитика	Аналитика	/	Калории, шаги, вес, тренировки, финансы, погода и котировки

Правила

Только то, чего не видно в таблицах

Манифест, шапку и правила кеша проект берёт из договора при сборке, а не пишет руками.

Иконки лежат в icons/ рядом с манифестом и называются как в app-06, app-07 и app-10.

API проекта — под /api/: так его ловит правило кеша.

Кнопки «Обновить», тоста и проверки обновлений по таймеру нет: посреди работы страница не перезагружается.

Своих полей манифеста и своих правил кеша у проекта нет.

В проектах

Кино

28 мест: Тег iOS вручную 21, Поле манифеста вручную 4, Правило кеша вручную 3

Тег iOS вручную 21

web/index.html:14web/index.html:16web/index.html:17web/index.html:25web/index.html:26web/index.html:28web/index.html:29web/index.html:31web/index.html:32web/index.html:34web/index.html:35web/index.html:37web/index.html:38web/index.html:40web/index.html:41web/index.html:43web/index.html:44web/index.html:46web/index.html:47web/index.html:49web/index.html:50

Поле манифеста вручную 4

web/vite.config.ts:88web/vite.config.ts:91web/vite.config.ts:100web/vite.config.ts:101

Правило кеша вручную 3

web/vite.config.ts:131web/vite.config.ts:143web/vite.config.ts:155

Калории

10 мест: Поле манифеста вручную 4, Правило кеша вручную 3, Тег iOS вручную 3

Поле манифеста вручную 4

main/web/vite.config.ts:62main/web/vite.config.ts:65main/web/vite.config.ts:75main/web/vite.config.ts:76

Правило кеша вручную 3

main/web/vite.config.ts:109main/web/vite.config.ts:121main/web/vite.config.ts:145

Тег iOS вручную 3

main/web/index.html:12main/web/index.html:15main/web/index.html:16

Дела

нет репозитория /projects/todo

Дашборд

10 мест: Тег iOS вручную 6, Поле манифеста вручную 4

Тег iOS вручную 6

web/index.html:9web/index.html:11web/index.html:12web/pin.html:11web/pin.html:13web/pin.html:14

Поле манифеста вручную 4

web/manifest.json:3web/manifest.json:5web/manifest.json:11web/manifest.json:12

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

constants/app/topic.json

Коды

12: app-01 … app-12

Классы

Нет

Проверка ловит

Нет

Ищет в проектах

Поле манифеста вручную: ["']?(?:short_name|start_url|theme_color|background_color)["']?\s*:
Правило кеша вручную: handler:\s*["'](?:NetworkFirst|CacheFirst|StaleWhileRevalidate|NetworkOnly|CacheOnly)
Тег iOS вручную: apple-mobile-web-app|apple-touch-startup-image

Исключения

Нет

Атом

Цвета

Поверхности, текст и смысл, мягкие подложки, наложения и девять цветов категорий

Платформы

Одни на телефон и компьютер

Темы

Одна на проект, задана в design.json: светлая или тёмная

Входит в

Тени

В проектах

Кино 22 · Калории 17 · Дашборд 59

Значения

Поверхности · 3

Название	Код	Светлая	Тёмная
Фонстраница, шит, окно с содержимым, кубик в карточке	colors-01color-bg	Светлая #f4f5f7	Тёмная #101319
Карточкакарточка, подтверждение, меню, поле	colors-02color-surface	Светлая #ffffff	Тёмная #232833
Плиткакнопка, бейдж, сегмент, скелетон, наведение	colors-03color-tile	Светлая #eaecef	Тёмная #343a47

Текст и линия · 4

Название	Код	Светлая	Тёмная
Чернилатекст, выбранная кнопка	colors-04color-ink	Светлая Аа #2c3e50	Тёмная Аа #eef0f3
Подписьподпись, вторичное	colors-05color-text-muted	Светлая Аа #6b7280	Тёмная Аа #9aa0aa
Тихийплейсхолдер, тихий значок	colors-06color-text-subtle	Светлая Аа #9ca3af	Тёмная Аа #6f7682
Линиярамка, разделитель	colors-07color-border	Светлая #e5e7eb	Тёмная #2c313d

Смысл · 4

Название	Код	Светлая	Тёмная
Акцентглавная кнопка, ссылка, фокус	colors-08color-accent	Светлая #636efa	Тёмная #7c85ff
Красныйошибка, перебор, свайп	colors-09color-danger	Светлая #dc2626	Тёмная #ff5c5c
Зелёныйготово	colors-10color-success	Светлая #16a34a	Тёмная #45c46a
Жёлтыйвыделение, текстом только на тёмной панели	colors-11color-highlight	Светлая #fecb52	Тёмная так же

Постоянные · 2

Название	Код	Светлая	Тёмная
Белыйна цвете и на фото, ручка	colors-12color-white	Светлая #ffffff	Тёмная так же
Чёрныйплеер	colors-13color-black	Светлая #000000	Тёмная так же

Палитра категорий · 9

Мягкие подложки · 5

Название	Код	Светлая	Тёмная
Мягкий акцентчекбокс, подсветка числа	colors-23color-accent-bg	Светлая color-accent · 14%	Тёмная так же
Мягкий красныйудаление, блок ошибки	colors-24color-danger-bg	Светлая color-danger · 14%	Тёмная так же
Мягкий зелёныйбейдж, сохранено	colors-25color-success-bg	Светлая color-success · 14%	Тёмная так же
Мягкий жёлтыйбейдж, выделение, свет прошедшего рекорда	colors-26color-warn-bg	Светлая color-highlight · 30%	Тёмная так же
Светсвежий рекорд на карточке графика	colors-33color-glow	Светлая color-highlight · 45%	Тёмная так же

Панель и наложения · 5

Название	Код	Светлая	Тёмная
Панельнижняя панель	colors-27color-bar	Светлая color-ink	Тёмная color-surface
Стеклошапка, капсула в шапке	colors-28color-glass	Светлая color-bg · 72%	Тёмная так же
Затемнениепод шитом и окном	colors-29color-shade	Светлая color-ink · 28%	Тёмная color-black · 60%
Вуальплитка на панели, дорожка	colors-30color-veil	Светлая color-white · 20%	Тёмная так же
Бейдж на фотоподпись на постере и фото	colors-31color-photo	Светлая color-black · 55%	Тёмная так же

Выключенное · 2

Название	Код	Светлая	Тёмная
Выключенноекнопка, отметка и поле: видно 45%	colors-32disabled-opacity	Светлая 0,45	Тёмная так же
Данныелиния, точка, столбик, опорная линия и доля в строке: видно 55%	colors-34data-opacity	Светлая 0,55	Тёмная так же

Как берут: цвет × заливка

Компонент выбирает клетку, а не собирает пару сам

Сплошная Мягкая Без подложки Акцент

Готовоaccent и whiteГлавная кнопка, отметка, выбранный день

Отменаaccent-bg и accentМягкая кнопка: отмена и второстепенное

ПодробнееaccentТекстовая кнопка, ссылка

Серый

Сегодняtile и inkОбычная кнопка, поле, плитка

Нет: плитка и есть мягкий серый

подписьtext-mutedПодпись

Зелёный

ЦельsuccessЦель достигнута, полоса прогресса

Готовоsuccess-bg и successБейдж «готово»

+917 ккалsuccessРост и прибавка

Жёлтый

РекордhighlightРекорд на графике

Вниманиеwarn-bg и ink: жёлтый текстом не читаетсяПредупреждение

2 140

highlight, только на тёмной панелиЧисло на тёмной панели

Красный

Удалитьdanger и whiteУдаление свайпом

Удалитьdanger-bg и dangerОпасная кнопка: удаление

СброситьdangerТекстовая опасная кнопка, ошибка поля

Категория

Деньгиpalette-1…9 и whiteМетка категории, столбец графика

Нет

Фон под элементом

Плитка

СветлыйПо умолчанию: клетки матрицы как есть

Вуаль

Тёмная панельПлитка становится вуалью, текст белый

Стекло

ФотоТёмное стекло, текст белый

Шапка

ШапкаСветлое стекло над лентой

Правила

Только то, чего не видно в таблицах

Тема одна на проект и задана в design.json. Переключателя нет.

Белый — только на цвете, на фото и на тёмной панели.

Жёлтый текстом — только на тёмной панели.

Палитра — только для категорий, девять цветов по кругу.

Новый цвет — только если значение отличается от всех.

Своих color-mix в проекте нет: оттенок тоже токен.

Акцента, красного и зелёного текстом на тёмной панели светлых проектов нет: не хватает контраста.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

22 мест: --color-bg 6, --color-text-muted 5, --color-accent 2, --color-highlight 2, --color-ink 2, --color-white 2 и ещё 3

--color-bg 6

web/index.html:9web/src/styles/app.css:27web/src/styles/app.css:34web/src/styles/app.css:150web/src/styles/app.css:150web/vite.config.ts:98

--color-text-muted 5

web/src/styles/app.css:126web/src/styles/app.css:174web/src/styles/app.css:309web/src/styles/app.css:480web/src/styles/app.css:532

--color-accent 2

web/src/styles/app.css:440web/src/styles/app.css:476

--color-highlight 2

web/src/styles/app.css:388web/src/styles/app.css:389

--color-ink 2

web/src/styles/app.css:35web/src/styles/app.css:374

--color-white 2

web/src/styles/app.css:393web/src/styles/app.css:394

--color-success 1

web/src/styles/app.css:471

--color-text-subtle 1

web/src/styles/app.css:465

--disabled-opacity 1

web/src/styles/app.css:395

Калории

17 мест: --color-bg 7, --color-accent 3, --color-ink 2, --color-text-subtle 2, --color-accent-bg 1, --color-text-muted 1 и ещё 1

--color-bg 7

main/web/index.html:9main/web/src/app.css:16main/web/src/app.css:38main/web/src/app.css:377main/web/src/app.css:400main/web/src/app.css:417main/web/vite.config.ts:71

--color-accent 3

main/web/src/app.css:245main/web/src/app.css:306main/web/src/app.css:395

--color-ink 2

main/web/src/app.css:39main/web/src/app.css:283

--color-text-subtle 2

main/web/src/app.css:238main/web/src/app.css:295

--color-accent-bg 1

main/web/src/app.css:314

--color-text-muted 1

main/web/src/app.css:53

--disabled-opacity 1

main/web/src/app.css:153

Дела

нет репозитория /projects/todo

Дашборд

59 мест: --color-ink 13, --color-text-muted 8, --color-veil 8, --color-text-subtle 7, --color-accent 3, --color-tile 3 и ещё 12

--color-ink 13

web/app.css:12web/app.css:84web/app.css:110web/app.css:119web/app.css:126web/app.css:129web/app.css:138web/app.css:143web/app.css:145web/app.css:168web/app.css:172web/app.css:195web/js/16_finance.js:258

--color-text-muted 8

web/app.css:24web/app.css:48web/app.css:49web/app.css:83web/app.css:93web/app.css:127web/app.css:137web/app.css:174

--color-veil 8

web/app.css:191web/app.css:191web/app.css:192web/app.css:193web/app.css:193web/app.css:194web/app.css:195web/app.css:195

--color-text-subtle 7

web/app.css:82web/app.css:116web/app.css:144web/app.css:169web/app.css:173web/js/03_plot.js:309web/js/11_feed.js:135

--color-accent 3

web/app.css:166web/app.css:191web/js/03_plot.js:306

--color-tile 3

web/app.css:57web/app.css:124web/app.css:141

--data-opacity 3

web/app.css:115web/app.css:125web/app.css:142

--color-border 2

web/app.css:109web/app.css:161

--color-shade 2

web/app.css:192web/app.css:194

--color-warn-bg 2

web/app.css:92web/js/03_plot.js:468

--color-bg 1

web/app.css:11

--color-black 1

web/app.css:194

--color-danger 1

web/app.css:91

--color-glow 1

web/js/03_plot.js:468

--color-highlight 1

web/app.css:192

--color-surface 1

web/js/03_plot.js:469

--disabled-opacity 1

web/app.css:162

--palette-6 1

web/app.css:193

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/colors/checks.json
atoms/colors/examples.html
atoms/colors/style.css
atoms/colors/topic.json

Коды

34: colors-01 … colors-34

Классы

Нет

Проверка ловит

Цвет текста только токеном --color-*.
Фон только токеном --color-* или палитрой.
Линия только --color-border, в фокусе --color-accent, при ошибке --color-danger.
Значок красится только currentColor.
Цвет числом запрещён, только токены.
Цвет словом запрещён, только токены.
Оттенок только токеном: color-mix лежит в colors.css.
В палитре девять цветов, номера выше 9 нет.
Тема одна на проект, по системе не переключается.
Выключенное только var(--disabled-opacity): своих прозрачностей нет.

Ищет в проектах

Нет

Исключения

Нет

Атом

Шрифты

Семейство, семь кеглей, три жирности и двенадцать ролей текста

Платформы

Кегли и жирность одни. На компьютере меняются три роли: мышь ближе к экрану

Берёт

Медиа-запросы

Входит в

Нет

В проектах

Кино 24 · Калории 26 · Дашборд 58

Значения

Семейство · 1

Название	Код	Значение
СемействоSF Pro Rounded на Mac и iOS, M PLUS Rounded 1c на остальных	fonts-01font-sans	Аа Бб 123

Кегль · 7

Название	Код	Значение
11строка 14: только подпись оси графика на телефоне	fonts-19fs-11	Аа Бб 12311
13строка 18: подпись, метка	fonts-02fs-13	Аа Бб 12313
15строка 20: описание, чип, строка таблицы	fonts-03fs-15	Аа Бб 12315
17строка 22: строка списка, значение, заголовок блока	fonts-04fs-17	Аа Бб 12317
24строка 28: заголовок шита, клавиша	fonts-05fs-24	Аа Бб 12324
30строка 36: герой, итог	fonts-06fs-30	Аа Бб 12330
64строка 72: число в шите, герой на компьютере	fonts-07fs-64	Аа Бб 12364

Жирность · 3

Название	Код	Значение
Обычноетекст, подпись, строка списка, поле	fonts-14fw-regular	Аа Бб 123400
Полужирноеметка, чип, кнопка, значение, заголовок блока	fonts-15fw-bold	Аа Бб 123600
Жирноезаголовок шита и страницы, герой, число	fonts-16fw-heavy	Аа Бб 123700

Межбуквенный интервал · 2

Название	Код	Значение
Плотнеекегль 24	fonts-17ls-tight	Аа Бб 123-0.01em
Ещё плотнеекегли 30 и 64	fonts-18ls-tighter	Аа Бб 123-0.02em

Как берут: роли текста

Текст экрана берёт роль, а не собирает кегль и жирность сам

S M L Название

Баланс17 · полужирноеКарточка, строка, секция

Лента24 · жирноеШит и страница

Хаб30 · жирное, на компьютере 64Герой

Число

2 14024 · жирноеКлавиша и итог в строке

77,930 · жирноеИтог карточки

10064 · жирноеЧисло в шите

Текст

обновлено в 09:4113 · обычноеПодпись, метка, время

Калории и вес за неделю15 · обычноеОписание и строка таблицы

Работа17 · обычное, на компьютере 15Строка списка и значение

Выделенное

Неделя13 · полужирноеМетка и чип

Жим лёжа15 · полужирноеНазвание в таблице

84,2 кг17 · полужирное, на компьютере 15Значение поля

Правила

Только то, чего не видно в таблицах

Минимум 13. Исключение одно: подпись оси графика на телефоне — 11.

Поле на телефоне — всегда 17: меньше 16 iOS увеличивает страницу.

Не опирайся на разницу полужирного и жирного: в Chrome и Firefox 600 выглядит как 700.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

24 мест: t-strong-s 5, t-text-m 3, t-title-m 3, t-title-s 3, --fs-17 2, t-strong-m 2 и ещё 5

t-strong-s 5

web/src/pages/DiscoverySettings.tsx:695web/src/pages/DiscoverySettings.tsx:703web/src/pages/discovery/Monitor.tsx:509web/src/pages/discovery/Search.tsx:449web/src/pages/discovery/common.tsx:148

t-text-m 3

web/src/pages/Item.tsx:309web/src/pages/Item.tsx:403web/src/pages/Library.tsx:168

t-title-m 3

web/src/components/Cards.tsx:176web/src/pages/Library.tsx:167web/src/pages/Profile.tsx:26

t-title-s 3

web/src/components/Cards.tsx:176web/src/pages/Library.tsx:227web/src/pages/discovery/Search.tsx:136

--fs-17 2

web/src/styles/app.css:470web/src/styles/app.css:472

t-strong-m 2

web/src/pages/discovery/Search.tsx:231web/src/pages/discovery/Search.tsx:232

t-text-s 2

web/src/components/Layout.tsx:84web/src/pages/discovery/Monitor.tsx:118

--font-sans 1

web/src/styles/app.css:36

--fs-15 1

web/src/styles/app.css:36

--fw-regular 1

web/src/styles/app.css:36

--lh-15 1

web/src/styles/app.css:36

Калории

26 мест: --font-sans 4, t-text-s 3, t-title-s 3, --fs-15 2, --fs-17 2, --fw-bold 2 и ещё 9

--font-sans 4

main/web/src/app.css:40main/web/src/app.css:158main/web/src/app.css:290main/web/src/app.css:296

t-text-s 3

main/web/src/components/AddFavoriteSheet.tsx:87main/web/src/components/FavoriteParts.tsx:49main/web/src/components/MealSheet.tsx:72

t-title-s 3

main/web/index.html:33main/web/src/components/AddFavoriteSheet.tsx:84main/web/src/components/SectionHead.tsx:13

--fs-15 2

main/web/src/app.css:158main/web/src/app.css:296

--fs-17 2

main/web/src/app.css:40main/web/src/app.css:239

--fw-bold 2

main/web/src/app.css:158main/web/src/app.css:296

--lh-15 2

main/web/src/app.css:158main/web/src/app.css:296

--fs-30 1

main/web/src/app.css:290

--fw-heavy 1

main/web/src/app.css:290

--fw-regular 1

main/web/src/app.css:40

--lh-17 1

main/web/src/app.css:40

--lh-30 1

main/web/src/app.css:290

--ls-tighter 1

main/web/src/app.css:291

t-strong-s 1

main/web/src/components/SectionHead.tsx:14

t-text-m 1

main/web/src/components/AddFavoriteSheet.tsx:85

Дела

нет репозитория /projects/todo

Дашборд

58 мест: --font-sans 13, --fw-regular 11, --fw-bold 7, --fs-13 6, --fs-15 6, --lh-15 6 и ещё 5

--font-sans 13

web/app.css:12web/app.css:24web/app.css:81web/app.css:90web/app.css:110web/app.css:137web/app.css:144web/app.css:168web/app.css:169web/app.css:172web/app.css:173web/app.css:174web/app.css:201

--fw-regular 11

web/app.css:12web/app.css:24web/app.css:81web/app.css:90web/app.css:110web/app.css:137web/app.css:144web/app.css:169web/app.css:173web/app.css:174web/app.css:201

--fw-bold 7

web/app.css:85web/app.css:113web/app.css:130web/app.css:138web/app.css:145web/app.css:168web/app.css:172

--fs-13 6

web/app.css:24web/app.css:81web/app.css:116web/app.css:137web/app.css:144web/app.css:169

--fs-15 6

web/app.css:12web/app.css:90web/app.css:110web/app.css:173web/app.css:174web/app.css:201

--lh-15 6

web/app.css:12web/app.css:90web/app.css:110web/app.css:173web/app.css:174web/app.css:201

--lh-13 5

web/app.css:24web/app.css:81web/app.css:137web/app.css:144web/app.css:169

--fs-17 1

web/app.css:168

--fs-24 1

web/app.css:172

--lh-17 1

web/app.css:168

--lh-24 1

web/app.css:172

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/fonts/checks.json
atoms/fonts/examples.html
atoms/fonts/files/m-plus-rounded-1c-400-cyrillic.woff2
atoms/fonts/files/m-plus-rounded-1c-400-latin.woff2
atoms/fonts/files/m-plus-rounded-1c-700-cyrillic.woff2
atoms/fonts/files/m-plus-rounded-1c-700-latin.woff2
atoms/fonts/style.css
atoms/fonts/topic.json

Коды

32: fonts-01 … fonts-42

Классы

.t-title-s, .t-title-m, .t-title-l, .t-number-s, .t-number-m, .t-number-l, .t-text-s, .t-text-m, .t-text-l, .t-strong-s, .t-strong-m, .t-strong-l

Проверка ловит

Шрифт собирается из токенов: жирность --fw-*, кегль, строка и --font-sans.
Кегль только из токена --fs-*.
Жирность только из токена --fw-*.
Высота строки только из токена --lh-* или 1.
Межбуквенный интервал только из токена --ls-* или 0.
Шрифт только из токена --font-sans.
Кегль не меняется в @media.
Кегль не считается через calc().
@font-face лежит только в fonts.css.

Ищет в проектах

Нет

Исключения

Нет

Атом

Отступы

Поля и зазоры: шкала с шагом 2 px

Платформы

Одни на телефон и компьютер

Входит в

Нет

В проектах

Кино 56 · Калории 18 · Дашборд 58

Значения

Шкала · 6

Название	Код	Значение
2подпись под строкой, зазор сегмента	spacing-01space-1	2
4иконка рядом с текстом	spacing-02space-2	4
8между кнопками, внутри группы	spacing-03space-4	8
12между строками, поле строки	spacing-04space-6	12
16между блоками, поле карточки, поле кнопки	spacing-05space-8	16
24между разделами, поле экрана	spacing-06space-12	24

Правила

Только то, чего не видно в таблицах

Имя — число шагов по 2 px: --space-8 — это 16.

Отрицательный отступ — calc(var(--space-4) * -1).

В проектах

Собирается на лету из ветки main каждого проекта

Кино

56 мест: --space-12 16, --space-4 15, --space-6 10, --space-8 10, --space-2 5

--space-12 16

web/src/styles/app.css:7web/src/styles/app.css:148web/src/styles/app.css:215web/src/styles/app.css:231web/src/styles/app.css:234web/src/styles/app.css:267web/src/styles/app.css:277web/src/styles/app.css:331web/src/styles/app.css:331web/src/styles/app.css:340web/src/styles/app.css:358web/src/styles/app.css:405web/src/styles/app.css:417web/src/styles/app.css:509web/src/styles/app.css:519web/src/styles/app.css:531

--space-4 15

web/src/styles/app.css:17web/src/styles/app.css:170web/src/styles/app.css:183web/src/styles/app.css:223web/src/styles/app.css:234web/src/styles/app.css:251web/src/styles/app.css:258web/src/styles/app.css:266web/src/styles/app.css:304web/src/styles/app.css:364web/src/styles/app.css:378web/src/styles/app.css:412web/src/styles/app.css:425web/src/styles/app.css:435web/src/styles/app.css:457

--space-6 10

web/src/styles/app.css:139web/src/styles/app.css:163web/src/styles/app.css:209web/src/styles/app.css:223web/src/styles/app.css:242web/src/styles/app.css:244web/src/styles/app.css:293web/src/styles/app.css:446web/src/styles/app.css:457web/src/styles/app.css:521

--space-8 10

web/src/styles/app.css:9web/src/styles/app.css:16web/src/styles/app.css:140web/src/styles/app.css:224web/src/styles/app.css:231web/src/styles/app.css:304web/src/styles/app.css:336web/src/styles/app.css:349web/src/styles/app.css:358web/src/styles/app.css:373

--space-2 5

web/src/styles/app.css:9web/src/styles/app.css:251web/src/styles/app.css:318web/src/styles/app.css:425web/src/styles/app.css:521

Калории

18 мест: --space-4 5, --space-8 5, --space-1 2, --space-12 2, --space-2 2, --space-6 2

--space-4 5

main/web/src/app.css:136main/web/src/app.css:165main/web/src/app.css:176main/web/src/app.css:213main/web/src/app.css:270

--space-8 5

main/web/src/app.css:214main/web/src/app.css:214main/web/src/app.css:326main/web/src/app.css:326main/web/src/app.css:326

--space-1 2

main/web/src/app.css:71main/web/src/app.css:288

--space-12 2

main/web/src/app.css:236main/web/src/app.css:416

--space-2 2

main/web/src/app.css:128main/web/src/app.css:282

--space-6 2

main/web/src/app.css:66main/web/src/app.css:214

Дела

нет репозитория /projects/todo

Дашборд

58 мест: --space-4 24, --space-6 12, --space-2 10, --space-8 6, --space-12 5, --space-1 1

--space-4 24

web/app.css:21web/app.css:23web/app.css:27web/app.css:32web/app.css:34web/app.css:41web/app.css:57web/app.css:58web/app.css:59web/app.css:71web/app.css:72web/app.css:74web/app.css:75web/app.css:82web/app.css:93web/app.css:99web/app.css:110web/app.css:112web/app.css:133web/app.css:134web/app.css:134web/app.css:160web/app.css:161web/app.css:180

--space-6 12

web/app.css:21web/app.css:30web/app.css:30web/app.css:32web/app.css:49web/app.css:62web/app.css:69web/app.css:81web/app.css:133web/app.css:161web/app.css:161web/app.css:180

--space-2 10

web/app.css:34web/app.css:81web/app.css:109web/app.css:109web/app.css:110web/app.css:136web/app.css:144web/app.css:147web/app.css:147web/app.css:174

--space-8 6

web/app.css:38web/app.css:89web/app.css:110web/app.css:153web/app.css:161web/app.css:189

--space-12 5

web/app.css:21web/app.css:27web/app.css:27web/app.css:32web/app.css:213

--space-1 1

web/app.css:171

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/spacing/checks.json
atoms/spacing/style.css
atoms/spacing/topic.json

Коды

6: spacing-01 … spacing-06

Классы

Нет

Проверка ловит

Зазор только из шкалы --space-*.
Внутреннее поле только из шкалы --space-*.
Внешний отступ только из шкалы --space-*, auto или calc(var(--space-*) * -1).

Ищет в проектах

Нет

Исключения

Нет

Атом

Скругления

Скругления блоков и элементов: семь значений

Платформы

Одни: на телефоне и компьютере значения совпали

Входит в

Нет

В проектах

Кино 1 · Калории 4 · Дашборд 9

Значения

Скругления · 7

Название	Код	Значение
Шит и окношит, окно	radii-01shape-overlay	28
Карточка и менюкарточка, группа строк, запись, широкий кадр, меню, таб-бар	radii-02shape-block	20
Кнопка и полекнопка 56 и 40, строка, поле, подложка сегмента, клавиша, пункт меню, вкладка	radii-03shape-control	14
Превью и бейджпревью, постер, показатель, бейдж, кнопка 28 и 32, значок карточки, подложка малого таб-бара	radii-04shape-small	10
Вкладка в подложкевкладка и таблетка малого таб-бара: подложка 10 минус поле 2, углы параллельны	radii-07shape-tab	8
Капсулакруг, дорожка, ручка шита, спиннер, радио	radii-05shape-pill	999
Чекбоксотметка 20: скругление 10 сделало бы из неё круг	radii-06shape-mark	6

Правила

Только то, чего не видно в таблицах

Круг — капсулой --shape-pill. 50% нет.

Шит скруглён только сверху: var(--shape-overlay) var(--shape-overlay) 0 0.

Вложенное скругление — внешнее минус поле: вкладка 8 в подложке 10 с полем 2.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

1 мест: --shape-small 1

--shape-small 1

web/src/styles/app.css:511

Калории

4 мест: --shape-overlay 2, --shape-pill 1, --shape-small 1

--shape-overlay 2

main/web/src/app.css:335main/web/src/app.css:391

--shape-pill 1

main/web/src/app.css:305

--shape-small 1

main/web/src/app.css:289

Дела

нет репозитория /projects/todo

Дашборд

9 мест: --shape-mark 3, --shape-pill 2, --shape-small 2, --shape-block 1, --shape-control 1

--shape-mark 3

web/app.css:92web/app.css:140web/app.css:140

--shape-pill 2

web/app.css:86web/app.css:115

--shape-small 2

web/app.css:111web/app.css:123

--shape-block 1

web/app.css:57

--shape-control 1

web/app.css:161

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/radii/checks.json
atoms/radii/style.css
atoms/radii/topic.json

Коды

7: radii-01 … radii-06

Классы

Нет

Проверка ловит

Скругление только ролью --shape-*.

Ищет в проектах

Нет

Исключения

Нет

Атом

Тени

Четыре тени и два кольца

Платформы

Одни. Тень шита — только на телефоне: на компьютере шит становится окном

Темы

В тёмной свои значения у карточки, меню и шита

Берёт

Цвета

Входит в

Нет

В проектах

Калории 1 · Дашборд 2

Значения

Тени и кольца · 6

Название	Код	Светлая	Тёмная
Карточкакарточка на экране и странице	shadows-01shadow-card	Светлая	Тёмная
Панельнижняя панель	shadows-02shadow-bar	Светлая	Тёмная так же
Меню и окноменю, окно	shadows-03shadow-popover	Светлая 0 8 24 rgba(0, 0, 0, 0.12)	Тёмная 0 10 28 rgba(0, 0, 0, 0.5)
Шиттень вверх	shadows-04shadow-sheet	Светлая	Тёмная
Кольцофокус и выбранная карточка, 2 px наружу	shadows-05shadow-focus	Светлая 0 0 0 2 color-accent	Тёмная так же
Кольцо внутрьстрока и поле, 2 px: группа обрезает всё, что шире	shadows-06shadow-focus-inset	Светлая inset 0 0 0 2 color-accent	Тёмная так же

Правила

Только то, чего не видно в таблицах

Обводка без размытия — не тень: inset 0 0 0 1px var(--color-border) можно.

Кольцо наружу — у фокуса и выбранной карточки. Внутрь — в группе, которая обрезает края.

Тень картинки — filter: drop-shadow(var(--shadow-popover)).

В проектах

Собирается на лету из ветки main каждого проекта

Кино

Не берёт

Калории

1 мест: --shadow-popover 1

--shadow-popover 1

main/web/src/app.css:336

Дела

нет репозитория /projects/todo

Дашборд

2 мест: --shadow-focus 2

--shadow-focus 2

web/app.css:111web/app.css:165

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/shadows/checks.json
atoms/shadows/style.css
atoms/shadows/topic.json

Коды

6: shadows-01 … shadows-06

Классы

Нет

Проверка ловит

Тень только токеном --shadow-*, без размытия можно кольцо и обводку цветом из токена.
Тень картинки только токеном: drop-shadow(var(--shadow-popover)).
Кольцо 2 px только токеном --shadow-focus или --shadow-focus-inset.

Ищет в проектах

Нет

Исключения

Нет

Атом

Разделители

Линия между строками

Платформы

Одна на телефон и компьютер. Цвет линии — из Цветов, отступ — из Отступов

Входит в

Нет

В проектах

Дашборд 3

Значения

Линия · 1

Название	Код	Значение
Линиямежду строками и в таблице	dividers-01divider-width	1

Правила

Только то, чего не видно в таблицах

Линию рисует второй из соседей: над первым и под последним её нет.

Между строками линия идёт от текста: слева поле строки, справа до края.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

Не берёт

Калории

Не берёт

Дела

нет репозитория /projects/todo

Дашборд

3 мест: --divider-width 3

--divider-width 3

web/app.css:109web/app.css:143web/app.css:161

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/dividers/checks.json
atoms/dividers/style.css
atoms/dividers/topic.json

Коды

1: dividers-01 … dividers-01

Классы

Нет

Проверка ловит

Линия только var(--divider-width) solid var(--color-border): других толщин, цветов и пунктира нет.

Ищет в проектах

Нет

Исключения

Нет

Атом

Анимации

Глубина нажатия, время и кривая

Платформы

Одни. Какую глубину взять, решает компонент: она зависит от вида кнопки и платформы

Входит в

Нет

В проектах

Кино 1 · Калории 6 · Дашборд 4

Значения

Зажми плитку глубины. Наведи на строку времени: точка пройдёт путь за это время

Глубина нажатия · 3

Название	Код	Значение
Нажатие большойбольшая кнопка на телефоне	motion-01press-98	0,98
Нажатие среднейсредняя кнопка, большая на компьютере, вкладка, клавиша, постер	motion-02press-96	0,96
Нажатие малоймалая кнопка, кнопка-иконка, отметка	motion-03press-92	0,92

Время · 4

Название	Код	Значение
Нажатиесжатие при нажатии	motion-04anim-press	0,12 с
Фонсмена фона	motion-05anim-fill	0,15 с
Окнопоявление окна	motion-07anim-modal	0,25 с
Шитвыезд шита	motion-08anim-sheet	0,35 с

Кривая · 1

Название	Код	Значение
Кривая шитавыезд шита	motion-09ease-sheet	cubic-bezier(0.32, 0.72, 0, 1)

Правила

Только то, чего не видно в таблицах

Чем меньше кнопка, тем глубже нажатие: на 28 сжатие 0,98 не видно.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

1 мест: --anim-fill 1

--anim-fill 1

web/src/styles/app.css:114

Калории

6 мест: --anim-modal 3, --anim-fill 1, --ease-sheet 1, --press-96 1

--anim-modal 3

main/web/src/app.css:345main/web/src/app.css:346main/web/src/app.css:378

--anim-fill 1

main/web/src/app.css:215

--ease-sheet 1

main/web/src/app.css:345

--press-96 1

main/web/src/app.css:343

Дела

нет репозитория /projects/todo

Дашборд

4 мест: --anim-fill 3, --ease-sheet 1

--anim-fill 3

web/app.css:116web/app.css:116web/js/20_app.js:127

--ease-sheet 1

web/js/20_app.js:127

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/motion/checks.json
atoms/motion/style.css
atoms/motion/topic.json

Коды

8: motion-01 … motion-09

Классы

Нет

Проверка ловит

Время анимации только токеном --anim-*.

Ищет в проектах

Нет

Исключения

Нет

Атом

Иконки

Рисунки одного спрайта: бокс 24, цвет от текста, спиннер

Платформы

Одни на телефон и компьютер

Входит в

Нет

В проектах

Кино 83 · Калории 72 · Дашборд 95

Значения

Линия и оборот · 3

Название	Код	Значение
Обычнаяконтур	icons-01icon-line	2
Жирнаякрестик, галочка, шеврон, стрелка	icons-02icon-line-bold	2,6
Оборотспиннер, один оборот	icons-56icon-spin	0,8 с

Навигация · 8

Назадicons-03

Дальшеicons-04

Раскрытьicons-05

Отправитьicons-06

Диапазонicons-07

Открыть снаружиicons-08

Главнаяicons-09

Выйтиicons-10

Действия · 17

Закрытьicons-11

Галочкаicons-12

Добавитьicons-13

Убавитьicons-14

Правитьicons-15

Удалитьicons-16

Поискicons-17

Фильтрicons-18

Настройкиicons-19

Ползункиicons-20

Скачатьicons-21

Вернутьicons-22

Повторicons-76

К сегодняicons-23

Стеретьicons-24

Фотоicons-25

Перетащитьicons-26

Состояния · 6

Готовоicons-27

Подробнееicons-28

Вниманиеicons-29

Недоступноicons-30

Времяicons-31

Датаicons-32

Содержимое · 14

Папкаicons-33

Меткаicons-34

Заметкаicons-35

Текстicons-36

Профильicons-37

В избранноеicons-38

В избранномicons-39

Не нравитсяicons-40

Рейтингicons-41

Оценка ИИicons-42

Обзорicons-43

Серверicons-44

Фильмicons-45

Сериалicons-46

Плеер · 9

Запуститьicons-47

Паузаicons-48

Назад на 10 сicons-49

Вперёд на 10 сicons-50

На экранicons-51

Картинка в картинкеicons-52

Весь экранicons-53

Выйти из экранаicons-54

Спиннерicons-55

Разделы · 19

Весicons-57

Балансicons-58

Остатокicons-59

Шагиicons-60

Едаicons-61

Тренировкиicons-62

Прогрессicons-63

Погодаicons-64

Кошелёкicons-65

Расходыicons-66

Заработокicons-67

Долларicons-68

Биткоинicons-69

Ставкаicons-70

Инфляцияicons-71

Индексicons-72

Котировкаicons-73

Нефтьicons-74

Недвижимостьicons-75

Как берут: размер от кегля

Иконка занимает 1em: её размер равен кеглю вокруг

17 · в кнопке

Правила

Только то, чего не видно в таблицах

Цвет — только currentColor: своего цвета у иконки нет.

Короткий значок — жирной линией: крестик, галочка, шеврон, стрелка.

Заливка — только у точек, плеера и выбранного.

Нужной иконки нет — сначала добавь её в набор.

Текстовых значков × ✓ ‹ › нет.

В проектах

Собирается на лету из ветки main каждого проекта

Кино

83 мест: icon-check 7, icon-spinner 7, icon-chevron-down 6, icon-chevron-right 5, icon-play 5, icon-search 5 и ещё 32

icon-check 7

web/src/components/Cards.tsx:54web/src/components/Choice.tsx:90web/src/components/Mark.tsx:31web/src/components/Settings.tsx:174web/src/components/Window.tsx:335web/src/pages/Item.tsx:124web/src/pages/discovery/Search.tsx:229

icon-spinner 7

web/src/components/Icon.tsx:42web/src/components/Settings.tsx:441web/src/components/Window.tsx:285web/src/pages/Login.tsx:73web/src/pages/discovery/Monitor.tsx:438web/src/pages/discovery/Search.tsx:229web/src/player/Controls.tsx:63

icon-chevron-down 6

web/src/components/Choice.tsx:74web/src/pages/Player.tsx:614web/src/pages/discovery/Monitor.tsx:299web/src/pages/discovery/Search.tsx:279web/src/pages/discovery/Search.tsx:412web/src/pages/discovery/Search.tsx:433

icon-chevron-right 5

web/src/components/Cards.tsx:237web/src/components/Cards.tsx:254web/src/components/Settings.tsx:57web/src/components/Settings.tsx:402web/src/pages/Profile.tsx:134

icon-play 5

web/src/components/Cards.tsx:90web/src/pages/Home.tsx:265web/src/pages/Item.tsx:99web/src/pages/discovery/Monitor.tsx:197web/src/player/Controls.tsx:63

icon-search 5

web/src/components/TextInput.tsx:47web/src/components/TextInput.tsx:74web/src/pages/discovery/FindSheet.tsx:52web/src/pages/discovery/Search.tsx:161web/src/pages/discovery/Search.tsx:286

icon-film 4

web/src/components/Cards.tsx:19web/src/components/Layout.tsx:11web/src/components/Layout.tsx:14web/src/pages/discovery/common.tsx:83

icon-chevron-left 3

web/src/components/Cards.tsx:234web/src/components/Window.tsx:52web/src/pages/Player.tsx:596

icon-close 3

web/src/components/Cards.tsx:115web/src/components/Window.tsx:83web/src/components/Window.tsx:204

icon-star 3

web/src/components/Cards.tsx:43web/src/components/Hero.tsx:35web/src/pages/discovery/common.tsx:37

icon-trash 3

web/src/components/Window.tsx:271web/src/pages/DiscoverySettings.tsx:584web/src/pages/DiscoverySettings.tsx:985

icon-bold 2

web/src/components/Settings.tsx:174web/src/components/Window.tsx:335

icon-download 2

web/src/components/Layout.tsx:14web/src/pages/discovery/Monitor.tsx:207

icon-external 2

web/src/pages/Profile.tsx:34web/src/pages/discovery/common.tsx:241

icon-plus 2

web/src/components/Settings.tsx:413web/src/pages/Discovery.tsx:59

icon-sliders 2

web/src/components/Layout.tsx:103web/src/pages/Discovery.tsx:128

icon 1

web/src/components/Icon.tsx:42

icon-airplay 1

web/src/player/Controls.tsx:201

icon-back-10 1

web/src/player/Controls.tsx:54

icon-compass 1

web/src/components/Layout.tsx:69

icon-erase 1

web/src/components/NumPad.tsx:25

icon-forward-10 1

web/src/player/Controls.tsx:66

icon-fullscreen 1

web/src/player/Controls.tsx:215

icon-fullscreen-exit 1

web/src/player/Controls.tsx:215

icon-heart 1

web/src/pages/Item.tsx:114

icon-heart-fill 1

web/src/pages/Item.tsx:114

icon-home 1

web/src/components/Layout.tsx:61

icon-lock 1

web/src/components/Settings.tsx:56

icon-logout 1

web/src/pages/Profile.tsx:44

icon-pause 1

web/src/player/Controls.tsx:63

icon-pip 1

web/src/player/Controls.tsx:206

icon-reset 1

web/src/pages/Item.tsx:104

icon-server 1

web/src/components/Layout.tsx:114

icon-settings 1

web/src/pages/Player.tsx:619

icon-spin 1

web/src/components/Icon.tsx:42

icon-tv 1

web/src/components/Layout.tsx:11

icon-user 1

web/src/components/Layout.tsx:118

icon-warn 1

web/src/components/Window.tsx:271

Калории

72 мест: icon-bold 13, icon-close 8, icon-check 7, icon-spin 5, icon-chevron-right 4, icon-info 4 и ещё 19

icon-bold 13

main/web/src/components/AiSheet.tsx:559main/web/src/components/ChoiceSheet.tsx:41main/web/src/components/DaySheet.tsx:53main/web/src/components/Header.tsx:53main/web/src/components/ModelResult.tsx:54main/web/src/components/ModelResult.tsx:108main/web/src/components/ModelResult.tsx:124main/web/src/components/SettingsPage.tsx:177main/web/src/components/TagList.tsx:36main/web/src/components/TextField.tsx:50main/web/src/components/TextInputSheet.tsx:162main/web/src/components/WeightLines.tsx:43main/web/src/components/WeightLines.tsx:82

icon-close 8

main/web/src/components/AiSheet.tsx:612main/web/src/components/ModelResult.tsx:54main/web/src/components/PhotoPick.tsx:131main/web/src/components/PhotoViewer.tsx:143main/web/src/components/Sheet.tsx:200main/web/src/components/TextField.tsx:50main/web/src/components/TextInputSheet.tsx:162main/web/src/components/WeightLines.tsx:43

icon-check 7

main/web/src/components/ChoiceSheet.tsx:41main/web/src/components/DaySheet.tsx:53main/web/src/components/ModelResult.tsx:108main/web/src/components/ModelResult.tsx:124main/web/src/components/SettingsPage.tsx:177main/web/src/components/TagList.tsx:36main/web/src/components/WeightLines.tsx:82

icon-spin 5

main/web/src/App.tsx:685main/web/src/app.css:248main/web/src/components/AiSheet.tsx:562main/web/src/components/BusyButton.tsx:15main/web/src/components/WeightLines.tsx:45

icon-chevron-right 4

main/web/src/components/FavoriteCategoryRow.tsx:33main/web/src/components/MealSheet.tsx:123main/web/src/components/PropRow.tsx:33main/web/src/components/SettingsPage.tsx:128

icon-info 4

main/web/src/components/ErrorBoundary.tsx:58main/web/src/components/FavoriteTile.tsx:43main/web/src/components/MealSheet.tsx:121main/web/src/components/ModelResult.tsx:62

icon-spinner 4

main/web/src/App.tsx:685main/web/src/components/AiSheet.tsx:562main/web/src/components/BusyButton.tsx:15main/web/src/components/WeightLines.tsx:45

icon-pencil 3

main/web/src/components/BottomBar.tsx:51main/web/src/components/FavoriteEditSheet.tsx:525main/web/src/components/StageRequest.tsx:70

icon-camera 2

main/web/src/components/FavoriteEditSheet.tsx:406main/web/src/components/PhotoPick.tsx:103

icon-dislike 2

main/web/src/components/ModelResult.tsx:168main/web/src/components/WeightLines.tsx:66

icon-heart 2

main/web/src/components/BottomBar.tsx:53main/web/src/components/MealSheet.tsx:113

icon-lock 2

main/web/src/components/PinGate.tsx:103main/web/src/components/PinGate.tsx:116

icon-logout 2

main/web/src/components/SettingsPage.tsx:437main/web/src/components/SettingsPage.tsx:492

icon-plus 2

main/web/src/components/QtyStepper.tsx:75main/web/src/components/SettingsPage.tsx:114

icon-trash 2

main/web/src/components/ConfirmModal.tsx:29main/web/src/components/SwipeToDelete.tsx:114

icon 1

main/web/src/components/Icon.tsx:31

icon-calendar 1

main/web/src/App.tsx:801

icon-chevron-down 1

main/web/src/components/Header.tsx:53

icon-chevron-left 1

main/web/src/components/Sheet.tsx:183

icon-download 1

main/web/src/components/PhotoViewer.tsx:132

icon-erase 1

main/web/src/components/NumPad.tsx:66

icon-minus 1

main/web/src/components/QtyStepper.tsx:56

icon-settings 1

main/web/src/components/Header.tsx:73

icon-sparkle 1

main/web/src/components/BottomBar.tsx:52

icon-today 1

main/web/src/components/Header.tsx:62

Дела

нет репозитория /projects/todo

Дашборд

95 мест: icon 20, icon-bold 9, icon-chevron-right 7, icon-close 7, icon-check 4, icon-chevron-down 3 и ещё 35

icon 20

web/js/01_core.js:47web/js/05_overlay.js:21web/js/05_overlay.js:97web/js/05_overlay.js:190web/js/06_controls.js:60web/js/06_controls.js:69web/js/06_controls.js:219web/js/06_controls.js:220web/js/07_report.js:29web/js/07_report.js:119web/js/07_report.js:225web/js/08_inputs.js:91web/js/11_feed.js:165web/js/11_feed.js:897web/js/11_feed_settings.js:527web/js/17_hub.js:36web/js/17_hub.js:58web/js/17_hub.js:65web/js/17_hub.js:108web/js/pin.js:16

icon-bold 9

web/js/05_overlay.js:165web/js/06_controls.js:60web/js/06_controls.js:69web/js/06_controls.js:79web/js/08_inputs.js:91web/js/11_feed.js:459web/js/16_finance.js:175web/js/17_hub.js:65web/js/17_hub.js:108

icon-chevron-right 7

web/js/04_calendar.js:23web/js/06_controls.js:224web/js/07_report.js:39web/js/11_feed.js:157web/js/11_feed.js:897web/js/16_finance.js:175web/js/17_hub.js:65

icon-close 7

web/js/05_overlay.js:21web/js/05_overlay.js:97web/js/07_report.js:146web/js/08_inputs.js:91web/js/17_hub.js:108web/js/17_hub.js:174web/js/17_hub.js:211

icon-check 4

web/js/05_overlay.js:165web/js/06_controls.js:60web/js/06_controls.js:69web/js/06_controls.js:79

icon-chevron-down 3

web/js/06_controls.js:14web/js/11_feed.js:459web/js/11_feed.js:897

icon-spin 3

web/js/01_core.js:85web/js/07_report.js:231web/js/11_feed_settings.js:527

icon-spinner 3

web/js/01_core.js:85web/js/07_report.js:231web/js/11_feed_settings.js:527

icon-trash 3

web/js/05_overlay.js:190web/js/11_feed.js:512web/js/17_hub.js:281

icon-chart-line 2

web/js/15_market.js:7web/js/15_market.js:10

icon-chevron-left 2

web/js/04_calendar.js:23web/js/06_controls.js:222

icon-play 2

web/js/11_feed.js:725web/js/11_feed.js:871

icon-reset 2

web/js/06_controls.js:219web/js/07_report.js:247

icon-arrow-up-right 1

web/js/15_market.js:7

icon-arrows-h 1

web/js/06_controls.js:220

icon-bars 1

web/js/10_summary.js:152

icon-bitcoin 1

web/js/15_market.js:7

icon-cart 1

web/js/16_finance.js:372

icon-chart-bars 1

web/js/15_market.js:7

icon-cloud-sun 1

web/js/14_weather.js:57

icon-cutlery 1

web/js/12_physics.js:72

icon-dollar 1

web/js/15_market.js:7

icon-drop 1

web/js/15_market.js:7

icon-dumbbell 1

web/js/13_sport.js:54

icon-erase 1

web/js/01_core.js:103

icon-grip 1

web/js/09_reorder.js:198

icon-house 1

web/js/15_market.js:7

icon-info 1

web/js/05_overlay.js:190

icon-lock 1

web/js/pin.js:16

icon-logout 1

web/js/20_app.js:70

icon-pencil 1

web/js/17_hub.js:71

icon-percent 1

web/js/15_market.js:7

icon-plus 1

web/js/11_feed.js:165

icon-ruble 1

web/js/16_finance.js:373

icon-scale 1

web/js/10_summary.js:29

icon-scales 1

web/js/10_summary.js:167

icon-settings 1

web/js/11_feed.js:872

icon-sneaker 1

web/js/12_physics.js:47

icon-today 1

web/js/04_calendar.js:30

icon-trend 1

web/js/13_sport.js:133

icon-wallet 1

web/js/16_finance.js:273

Для разработчикаФайлы, коды, проверки и поиск в проектах

Файлы

atoms/icons/checks.json
atoms/icons/examples.html
atoms/icons/icons.svg
atoms/icons/style.css
atoms/icons/topic.json

Коды

3: icons-01 … icons-56

Классы

.icon, .icon-bold, .icon-spin

Проверка ловит

Иконка занимает 1em, размер задаёт кегль --fs-* вокруг неё.
Размер иконки не задаётся пропом size.
Толщина линии только токеном --icon-line или --icon-line-bold.
Текстовых значков нет, только иконка из набора.
В разметке значок только иконкой из набора.

Ищет в проектах

Нет

Исключения

Нет

Связи

Наведи или нажми на тему. Синим — из чего она собрана, зелёным — куда входит и какие проекты её берут

Граф

Слева направо: константы, атомы, проекты. Толщина линии к проекту — сколько в нём мест

Откуда прочитано

Ветка main каждого проекта

Кино

main 85344e6, файлов 56

Калории

main b8a85a1, файлов 70

Дела

нет репозитория /projects/todo

Дашборд

main 2224270, файлов 27

Конвенция

По каким правилам собирается система

Виды тем

Вид	Что это	Как узнать	Берёт
Константа	Правило среды	Одно на все проекты: ступени, экран, адаптация, слои, шапка, приложение	Ничего
Атом	Значение	Нет разметки	Константы
Компонент	Вещь на экране	Название — существительное	Константы, атомы, компоненты
Паттерн	Задача пользователя	Название — действие	Константы, атомы, компоненты

Правила

Связи

Кругов нет.
Константа ничего не берёт.
Атом не берёт атом. Одно исключение: кольцо фокуса в Тенях берёт акцент.
У паттерна нет своего вида, только раскладка.

Хозяин

Общая тема — в папке своего вида.
Тема одного проекта — в projects/‹проект›/.
Взял второй проект — тема переезжает в общие.
Чужую проектную тему не берут.

Значения

Цвет, шрифт, отступ, скругление, тень, время — только токены атомов.
Новый токен — только если значение отличается от всех.

Константы

Ступень, признак устройства, слой, экран — только константой.
В CSS: @media (--desktop), z-index: var(--layer-bar).
В JS: запрос и значения — из договора проекта.
Шапка, манифест и правила кеша — из договора, руками не пишутся.
Нужной нет — сначала константа, потом код.

Адаптация

Телефон, компьютер и широкий — по таблице Адаптации.
Тема ссылается на строку adapt-NN, а не пересказывает её.

Имена

Класс темы начинается с её префикса: .button-…
is-… — общие состояния.
Своё у проекта: kino-, cal-, dela-, dash-.
В коде проекта класс design — только целой строкой.

Страница темы

Вид задаёт блоки. Блока нет — его нет на странице.
Правило пишется один раз: в своей теме или здесь.

Версии

Убрано или переименовано — мажор. Добавлено — минор. Только вид — патч.
Версию выбирает пользователь.

Техника

Как устроен код и как его поддерживать

Части

Папка задаёт вид темы и её слой каскада

Папка	Что внутри
`constants/`	Константы: папка на тему
`atoms/`	Атомы: папка на тему
`server/`	Раздача: сборка, ручки, использование, документ, деплой, тесты
`docs/`	Документ: оболочка, стили, страницы
`design.json`	Версия, порядок слоёв, проекты: репозиторий, тема, префикс, `app` для манифеста

Папка темы

Имена файлов постоянные. Списков файлов нигде нет

Файл	Что внутри
`topic.json`	Название, суть, факты, правила ✓ и ✗, `allow`. `items` — значения без CSS: `data` для машины, `steps` по ступеням. `find` — что искать в проектах написанным руками. `projects` — столбцы своего у проектов
`style.css`	Токены и классы. Код рядом: `--x: 1px; /* код · Название · где /`. Группа: `/ == Группа */`. Медиа-запрос: `@custom-media --имя (запрос);`
`checks.json`	Проверки для кода проектов
`examples.html`	Блок «Как берут»
`files/`, `icons.svg`	Шрифты, набор иконок

Ручки

Проектам — только первые четыре

Ручка	Что отдаёт
`/latest/‹проект›.css`	Ядро и темы проекта одним файлом
`/latest/‹проект›.js`	Спрайт иконок, дальше поведение
`/latest/‹проект›.json`	Договор: что проекту можно брать и готовые шапка, манифест и service worker
`/latest/icons.svg`, `/latest/fonts/…`	Иконки и шрифты
`/api/topics`, `/api/topics/‹id›`	Темы
`/api/graph`	Связи тем
`/api/usage?topic=…` или `project=…`, `name=…`	Места в проектах
`/api/problems`	Нарушения
`/health`	Живой ли сервер

Договор проекта

Проект подставляет его при сборке и ничего не пишет руками

Поле	Что внутри
`files`	Адреса CSS, JS, иконок и шрифтов
`page.html`	Открывающий тег: язык и тёмная тема
`page.head`	Строки шапки по порядку. `{design}` — адрес design
`app.manifest`	Готовый `manifest.webmanifest`
`app.serviceWorker`	`update` — обновление, `cache` — правила: `navigate`, `design`, `api`, `images`
`media`	Медиа-запросы для JS
`tokens`, `classes`, `icons`	Что можно брать: имя, тема, код

Как собирается

Сборка

Сервер читает папки тем и держит всё в памяти.
Раз в секунду сверяет время правки. Сдвинулось — собирает заново.
Разбор CSS один: server/css.py.

CSS проекта

Первой строкой порядок слоёв: @layer constants, atoms, components, patterns, project, app;
@media (--desktop) сервер заменяет запросом из констант.
Свой CSS проекта без слоя — всегда сильнее design.
Ответ сжат и с ETag: повторный запрос — 304.

Использование

git читает ветку main каждого проекта.
Пересчёт — только если main сдвинулся. Ничего не пишется.
Токены и классы находятся точно, иконки — по строкам.
Константы ищут по find написанное руками: числа, шапку, манифест. Так видно, что ещё не переведено.
Читается код фронта и манифест: manifest.json, .webmanifest.

Проверки

У каждого токена и запроса код, коды не повторяются.
var() и @media (--имя) ведут на то, что есть.
Числа в @media и z-index — только в константах.
Константа ничего не берёт. Атом берёт другой атом, только если тот в allow.
Ступени в steps — только из Медиа-запросов.
У проекта в design.json тема и все поля app, short_name до 12 букв.
Тесты: v2/.venv/bin/python -m unittest discover -s v2/server/tests -t v2

Как сделать

Задача	Что сделать
Новый токен	Строка в `style.css` с кодом, в нужной группе
Новая ступень, признак устройства или слой	Строка в `constants/media` или `constants/layers`
Новое правило перевода на телефон	Строка в `items` в `constants/adapt`
Новая тема	Папка в `constants/` или `atoms/` с `topic.json` и `style.css`
Новый вид тем	Папка и строка в `KINDS` в `server/build.py`, слой в `design.json`
Правило для людей	Строка в `rules` в `topic.json`
Проверка для проектов	Правило в `checks.json`
Новый проект	Строка в `projects` в `design.json` с `theme` и `app`

Стенд и выкат

Стенд

v2/.venv/bin/uvicorn server.app:app --app-dir v2 --port 4961

Выкат

v2/server/deploy.sh на сервере: забрать main, собрать образ, запустить, дождаться /health

Настройки

DESIGN_ORIGINS — адреса проектов через запятую.
PROJECTS_HOST_DIR — папка с репозиториями проектов на сервере.
DESIGN_PORT — порт, на который внешний nginx ведёт домен.