Токены Calibra Dent

Единственный источник значений мобильного стиля. prototype/src/tokens.css и prototype/src/js/05-tokens.js собираются из этого файла (python3 tools/tokens.py) — руками их не править. Фон «Утро», акцент «Синий входа» #016BE0, «+» из прозрачного стекла — утверждено командой 19.10.2026. Файл для кода — tokens/mobile.tokens.json; имена в колонке «Dart» — предложение, сопоставление с AppColors решает фронт.

Цвета

Токен	Значение	CSS / Dart	Где
surface/ground	`#F4F8FD`	`--ground` `surfaceGround`	Сплошная подложка там, где градиент не нужен.
surface/solid	`#FFFFFF`	`--surface` `surface`	Бегунок сегментов, белые подложки внутри стекла.
text/title	`#062F63`	`--title` `textTitle`	Заголовки экранов и листов, крупные цифры показателей.
text/primary	`#12233D`	`--label` `textPrimary`	Основной текст, значения в строках.
text/secondary	`#435573`	`--label-2` `textSecondary`	Вторичный текст, подзаголовки групп, даты, оси графиков.
text/placeholder	`#50627E`	`--label-3` `textPlaceholder`	Подсказки в полях и поиске, иконка поиска.
text/on-accent	`#FFFFFF`	`--on-accent` `textOnAccent`	Текст и иконки на синей заливке.
line/separator	`rgba(18,70,140,.12)`	`--sep` `lineSeparator`	Разделитель строк внутри карточки (отступ 16 px слева), сетка графиков.
fill/subtle	`rgba(1,86,184,.07)`	`--fill` `fillSubtle`	Нажатая строка, фон сегментов, трек полос, плашки «Новая» и «Отменена».
fill/control	`#B7C9E2`	`--fill-2` `fillControl`	Будущие шаги и этапы, выключенный переключатель, шевроны, рамка радиокнопки.
accent/base	`#016BE0`	`--accent` `accent`	Маленькие заливки: счётчик, выбранный зуб, включённый переключатель, полосы этапов, первый ряд графика.
accent/text	`#0159BE`	`--accent-text` `accentText`	Синий текст и иконки: ссылки, активная вкладка, «+», выбранный чип, рамка фокуса.
accent/soft	`rgba(1,107,224,.13)`	`--accent-soft` `accentSoft`	Фон выбранного чипа и плитки, плашка «В работе», мягкая кнопка, информационная заметка.
accent/glow	`rgba(1,95,205,.5)`	`--accent-glow` `accentGlow`	Цвет тени под синими элементами. Тень всегда синяя, не серая.
status/neutral-text	`#435573`	`--neutral` `statusNeutralText`	«Новая», «Ждёт техника», «Ожидает».
status/neutral-fill	`rgba(1,86,184,.07)`	`--neutral-bg` `statusNeutralFill`	Плашка нейтрального статуса.
status/neutral-mark	`#8EA1BA`	`--neutral-mark` `statusNeutralMark`	Цвет на схеме зубов, в диаграммах.
status/progress-text	`#0159BE`	`--progress` `statusProgressText`	«В работе».
status/progress-fill	`rgba(1,107,224,.13)`	`--progress-bg` `statusProgressFill`	Плашка «В работе».
status/progress-mark	`#016BE0`	`--progress-mark` `statusProgressMark`	Схема зубов, диаграммы.
status/warning-text	`#8C5D04`	`--warn` `statusWarningText`	«На проверке», «Ограничен», предупреждения.
status/warning-fill	`#FFF0CC`	`--warn-bg` `statusWarningFill`	Плашка и заметка-предупреждение.
status/warning-mark	`#D99A12`	`--warn-mark` `statusWarningMark`	Схема зубов, диаграммы.
status/rework-text	`#B5400A`	`--rework` `statusReworkText`	«Доработка», «Правка», «Срочная».
status/rework-fill	`#FFE8D6`	`--rework-bg` `statusReworkFill`	Плашка правки и срочности.
status/rework-mark	`#E2702A`	`--rework-mark` `statusReworkMark`	Схема зубов, диаграммы.
status/danger-text	`#B3261E`	`--bad` `statusDangerText`	«Нужны данные», «Отозван», просрочка (текстом), ошибки полей, «Удалить».
status/danger-fill	`#F9DEDC`	`--bad-bg` `statusDangerFill`	Плашка и сообщение об ошибке.
status/danger-mark	`#D2453B`	`--bad-mark` `statusDangerMark`	Схема зубов, диаграммы, точка непрочитанного.
status/success-text	`#14803C`	`--ok` `statusSuccessText`	«Завершена», «Принята», «Активен», «Совместим».
status/success-fill	`#DCFBE7`	`--ok-bg` `statusSuccessFill`	Плашка успеха.
status/success-mark	`#1E9150`	`--ok-mark` `statusSuccessMark`	Схема зубов, диаграммы.
status/muted-text	`#50627E`	`--muted` `statusMutedText`	«Отменена», «Истёк».
status/muted-fill	`rgba(1,86,184,.07)`	`--muted-bg` `statusMutedFill`	Плашка закрытого статуса.
status/muted-mark	`#C9D1DC`	`--muted-mark` `statusMutedMark`	Схема зубов, диаграммы.
status/urgent	`#C2470A`	`--urgent` `statusUrgent`	Молния срочной заявки.
chart/1	`#016BE0`	`--chart-1` `chart1`	Первый ряд, главная величина.
chart/2	`#E3A06A`	`--chart-2` `chart2`	Второй ряд.
chart/3	`#0E8FA3`	`--chart-3` `chart3`	Третий ряд.
chart/4	`#7A4FD6`	`--chart-4` `chart4`	Четвёртый ряд.
chart/5	`#7AB3F2`	`--chart-5` `chart5`	Пятый ряд.
chart/6	`#94A3B8`	`--chart-6` `chart6`	«Прочие» и всё сверх пяти.
overlay/scrim	`rgba(14,44,92,.18)`	`--scrim` `overlayScrim`	Затемнение экрана под листом.
surface/viewer	`#0D1522`	`--viewer` `surfaceViewer`	Фон просмотра фото — единственная тёмная поверхность.
surface/brand-wash	`#E3EBFF`	`--brand-wash` `surfaceBrandWash`	Подложка иллюстраций экрана загрузки. Как AuthBrandPanel.panelWash во фронте: слои assets/auth/brand рассчитаны на эту светлую заливку, на синем они мутнеют.
surface/jaw	`#DCE5F1`	`--jaw` `surfaceJaw`	Челюсть на схеме зубов. Во фронте челюсть #D9D9D9 (серый); в мобильном стиле — холодный оттенок палитры, белые зубы на нём читаются так же.
glass/control	`rgba(255,255,255,.42)`	`--glass` `glassControl`	Нижний бар, кнопки верхней панели, «+», «Назад» в нижней панели.
glass/sheet	`rgba(255,255,255,.5)`	`--glass-sheet` `glassSheet`	Листы снизу — плотнее бара.
glass/field	`rgba(255,255,255,.5)`	`--glass-field` `glassField`	Поле сообщения и кнопка вложения в чате, пилюли над перепиской.
glass/toast	`rgba(255,255,255,.6)`	`--glass-toast` `glassToast`	Всплывающее уведомление, плашка вложения.
glass/dark	`rgba(255,255,255,.14)`	`--glass-dark` `glassDark`	Кнопки поверх тёмного просмотра фото.
glass/lens	`rgba(18,70,140,.1)`	`--glass-lens` `glassLens`	Линза активной вкладки внутри бара, без размытия.

Градиенты и фон

Токен	Значение	CSS / Dart	Где
background/morning	`radial-gradient(140% 62% at 100% 0%,rgba(96,165,243,.42),rgba(96,165,243,0) 66%),radial-gradient(100% 45% at 0% 100%,rgba(150,196,248,.24),rgba(150,196,248,0) 62%),linear-gradient(#FAFCFF,#F3F8FD)`	`--atmo` `backgroundMorning`	Фон всех экранов «Утро»: голубое сияние справа сверху (#60A5F3 42 % → 0 на 66 %), слабое слева снизу (#96C4F8 24 % → 0 на 62 %), основа #FAFCFF → #F3F8FD. PNG 1170×2532 — в ТЗ на цвета.
surface/card	`linear-gradient(168deg,rgba(255,255,255,.92),rgba(255,255,255,.64))`	`--card` `surfaceCard`	Карточки и группы строк: белый 92 % → 64 % под углом 168°.
accent/gradient	`linear-gradient(180deg,#0C72E2,#015FCD)`	`--accent-grad` `accentGradient`	Залитые кнопки, аватар, свои сообщения, «Отправить».
accent/disabled	`linear-gradient(180deg,#B4D3F6,#9FC6F2)`	`--accent-disabled` `accentDisabled`	Отключённая главная кнопка, текст белый, без тени.
overlay/veil	`linear-gradient(rgba(250,252,255,.94) 45%,rgba(250,252,255,0))`	`--veil` `overlayVeil`	Вуаль под верхней панелью при прокрутке, без размытия.

Тени

Токен	Значение	CSS / Dart	Где
shadow/card	`inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1.5px 0 rgba(255,255,255,.95),0 16px 32px -24px rgba(16,66,136,.55)`	`--card-edge` `shadowCard`	Кромка и тень карточки: внутри 1 px белый 80 %, блик сверху 1,5 px белый 95 %, тень #104288 55 % (0 16 32, сжатие −24).
shadow/glass	`inset 0 0 0 .5px rgba(255,255,255,.5),inset 0 8px 10px -8px rgba(255,255,255,.9),inset 0 -8px 10px -9px rgba(255,255,255,.6),0 1px 2px rgba(16,66,136,.1),0 10px 26px -10px rgba(16,66,136,.34)`	`--glass-shadow` `shadowGlass`	Рецепт стекла: кромка 0,5 px белый 50 %, свет сверху и снизу, ближняя и дальняя тень #104288. Блик по кромке — градиент 135° (см. ТЗ на цвета, «Стекло»).
shadow/button	`inset 0 1.5px 0 rgba(255,255,255,.36),0 16px 28px -14px rgba(1,95,205,.78)`	`--button-shadow` `shadowButton`	Залитая синяя кнопка.

Размытие

	Токен	Значение	CSS / Dart	Где
	blur/glass	`9px`	`--glass-blur` `blurGlass`	Размытие фона под стеклом: 9 px в CSS = 18 в Figma; в прототипе плюс насыщенность 180 % и яркость 104 %.

Скругления

Токен	Значение	CSS / Dart	Где
radius/phone	`50px`	`—` `radiusPhone`	Скругление экрана в кадре 390×844.
radius/sheet	`42px`	`—` `radiusSheet`	Лист снизу.
radius/button	`27px`	`—` `radiusButton`	Кнопка 54 px — половина высоты.
radius/card	`24px`	`—` `radiusCard`	Карточки и группы строк.
radius/control	`22px`	`—` `radiusControl`	Кнопки стекла 44 px, поиск, поле сообщения, всплывающее уведомление.
radius/chip	`20px`	`—` `radiusChip`	Чипы 40 px, плитки показателей.
radius/note	`18px`	`—` `radiusNote`	Заметки, сообщения об ошибке, иконка пустого состояния.
radius/list	`16px`	`—` `radiusList`	Список файлов, плитки типов работ.
radius/pill	`11px`	`—` `radiusPill`	Плашки статусов 22 px.
radius/thumb	`10px`	`—` `radiusThumb`	Миниатюры и значки файлов 36 px.

Отступы

Токен	Значение	CSS / Dart	Где
space/gutter	`16px`	`—` `spaceGutter`	Поля экрана слева и справа, отступ текста в строке.
space/section	`22px`	`—` `spaceSection`	Между секциями экрана.
space/stack	`8px`	`—` `spaceStack`	Между заголовком группы и карточкой, между кнопками.
space/row-y	`10px`	`—` `spaceRowY`	Вертикальный отступ строки; высота строки не меньше 54 px.

Размеры

Токен	Значение	CSS / Dart	Где
size/safe-top	`54px`	`—` `safeTop`	Статус-бар и «остров».
size/safe-bottom	`26px`	`—` `safeBottom`	Над полоской «домой».
size/bar	`44px`	`—` `sizeBar`	Кнопки верхней панели; минимальная зона нажатия 44×44.
size/button	`54px`	`—` `sizeButton`	Высота главной кнопки.
size/tabbar	`62px`	`—` `sizeTabbar`	Нижний бар и кнопка «+».
size/row	`54px`	`—` `sizeRow`	Минимальная высота строки.

Шрифты

Токен	Значение	CSS / Dart	Где
type/display-xl	`800 32px/1.1 Manrope; letter-spacing -0.025em`	`—` `displayXl`	Заголовок вкладки («Заявки», «Обзор»).
type/display-l	`800 25px/1.18 Manrope; letter-spacing -0.02em`	`—` `displayL`	Заголовок вложенного экрана.
type/sheet-title	`800 20px/1.2 Manrope; letter-spacing -0.01em`	`—` `sheetTitle`	Заголовок листа.
type/metric	`800 28px/1 Manrope; letter-spacing -0.02em; tabular-nums`	`—` `metric`	Крупные цифры показателей.
type/body	`400 16px/1.35 Inter`	`—` `body`	Основной текст, поля.
type/row-title	`500 16px/1.3 Inter`	`—` `rowTitle`	Название в строке.
type/row-sub	`400 13px/1.35 Inter`	`—` `rowSub`	Вторая строка, подписи.
type/group-head	`600 13px/1.3 Inter`	`—` `groupHead`	Заголовок группы над карточкой.
type/button	`600 16px/1 Inter`	`—` `button`	Кнопки 54 px; кнопки стекла — 15 px.
type/chip	`500 14px/1 Inter`	`—` `chip`	Чипы-фильтры; выбранный — 600.
type/pill	`600 12px/1 Inter`	`—` `pill`	Плашки статусов.
type/tab	`600 10px/1 Inter`	`—` `tab`	Подписи вкладок нижнего бара.

Движение

Токен	Значение	CSS / Dart	Где
motion/ease	`cubic-bezier(.22,.9,.24,1)`	`--ease` `easeStandard`	Переходы экранов 450 мс, листы 500 мс.
motion/spring	`cubic-bezier(.3,1.32,.45,1)`	`--spring` `easeSpring`	Нажатия, линза вкладок, переключатели.
motion/spring-figma	`linear(0, 0.0216, 0.0747, 0.1458, 0.2255, 0.3076, 0.3879, 0.4638, 0.5339, 0.5974, 0.6542, 0.7044, 0.7484, 0.7866, 0.8196, 0.8479, 0.8722, 0.8928, 0.9103, 0.9251, 0.9375, 0.948, 0.9568, 0.9642, 0.9703, 0.9754, 0.9797, 0.9832, 0.9862, 0.9886, 0.9906, 0.9923, 0.9936, 0.9948, 0.9957, 0.9965, 0.9971, 0.9976, 0.9981, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9997, 0.9998, 0.9998, 1)`	`--spring-figma` `figmaSpring`	Пружина из Figma (51 точка, без перелёта) для однократного въезда — челюсть на слайде 3. Во фронте — AuthBrandSlideArt.oneShotCurve.

Оттенки Vita

	A1	`#F1E0C8`
	A2	`#E8C9A8`
	A3	`#D9B08A`
	A3.5	`#C99A72`
	A4	`#B07F55`
	B1	`#F5E9C8`
	B2	`#EED9A8`
	B3	`#C9A86A`
	C1	`#E0D5C4`
	C2	`#C9BCA8`
	D2	`#E0CDB8`
	D3	`#C4A88E`