Mom's Helper — дизайн-система

Типографика

Четырнадцать текстовых стилей на всё приложение. Стиль — это не «размер шрифта», а связка размер + вес + интерлиньяж + трекинг: применяется одним кликом и одинаково выглядит везде.

Text Styles 14 стилей

«Образец» — как стиль выглядит на самом деле, «Semantic» — имя Text Style для Figma, «Реализация» — класс, которым он набран в коде. Переменные, из которых стиль собран внутри Figma (font-size/*, weight/*), — в разделе Figma ↔ Код.

Layout & grid

Одноколоночный мобильный контейнер с вертикальным скроллом, без классической сетки колонок и без брейкпоинтов — это Telegram Mini App с одним форм-фактором, а не адаптивный сайт под разные вьюпорты. Правила ниже — из кода, а не из макета.

Модуль

Базовая единица пространства — 4px, в коде это --space-unit: 0.25rem. Из неё выведены все отступы, зазоры, радиусы и высоты контролов. Есть и микромодуль 2px — половина шага, только для отбивки строк текста внутри блока, где полный шаг уже слишком много.

В Figma шкала выгружена целиком, 33 значения вплоть до 448px — но это справочник, а не рабочий набор. Реально в коде живут десять ступеней:

Три вида отступа

Одна и та же ступень значит разное в зависимости от того, что она разделяет.

Отступы

Всё кратно четырём: базовая единица --space-unit: 0.25rem, то есть 4px. Ниже — как это разложено по уровням, от контейнера страницы до зазора между иконкой и текстом.

Компоненты

Компоненты приложения по одному — реальные варианты, размеры и состояния из кода, не выдуманные заново. Разделены на примитивы (неделимый контрол, одна роль) и составные (несколько слотов, повторяющиеся элементы или прямой вызов другого компонента внутри).

Все компоненты разом 23 компонента

Чем компоненты отличаются друг от друга и какие вообще ни на что не реагируют. Статичный — состояний нет вовсе: компонент только рисует, нажатие и фокус живут на элементе вокруг. Состояния названы здесь по смыслу и одинаково, чтобы строки сравнивались; в самих блоках имена повторяют код — checked у Switch, selected у ChipSelect, active у Button и BottomNav.

Примитивы

Собраны сами по себе — из токенов и разметки, без других компонентов внутри. Критерий тот же, что в сводной таблице: тип определяется тем, из чего компонент собран, а не тем, что он импортирует. Поэтому PopoverPanel — примитив, хотя стоит поверх Radix: своя у него только поверхность.

Button ui-kit/Button.tsx

Кнопка действия — текст, иконка или и то и другое. Без children рендерится как квадратная icon-only кнопка.

Состав

Варианты

Состояния

Свойства

Switch ui/switch.tsx

Бинарный переключатель вкл/выкл — обёртка над Radix Switch.

Состав

Состояния

Свойства

Badge ui-kit/Badge.tsx

Пилюля со статусом или тегом: «скоро», «Premium», счётчик. Не нажимается, и об этом говорит форма — всегда rounded-full, тогда как всё нажимаемое рядом прямоугольное. Поэтому переопределять форму по месту нельзя.

Состав

Свойства

Avatar ui-kit/Avatar.tsx

Кружок с эмодзи или фото ребёнка. Свойство onAccent — полупрозрачно-белая заливка, когда аватар сидит на акцентной плашке. Не интерактивен.

Состав

Свойства

Input и Field ui-kit/Input.tsx · ui-kit/Field.tsx

Input — готовое поле ввода, текст или число. Field под ним — не поле, а основа: подпись над контролом и общая строка классов поверхности FIELD_SURFACE. Сам по себе Field ничего не рисует — без label он возвращает содержимое как есть. Тот же Field используют SelectField и TimeSelect, поэтому подпись и высота у всех трёх одинаковые.

Состав

Состояния

Свойства

Что содержит

Skeleton ui-kit/Skeleton.tsx

Пульсирующая заглушка на время загрузки. Отдельно есть ListRowSkeleton — загрузочное состояние строки списка, живёт в одном файле с ней. Не интерактивен.

Состав

Варианты

Свойства

AccentPlate ui-kit/AccentPlate.tsx

Акцентная плашка: скруглённый блок с градиентом поверх акцентного цвета. Сам по себе — только фон и отступы, все состояния на элементах внутри.

Состав

Свойства

PopoverPanel «поверхность выпадающего списка» ui-kit/PopoverPanel.tsx

Стилизованная поверхность попапа — рамка, фон, тень — поверх Radix PopoverContent. Содержимое передаётся снаружи. Примитив, а не составной: критерий — из чего собран сам, а не что импортирует.

Состав

Свойства

Slider и SliderField ui-kit/Slider.tsx · ui-kit/SliderField.tsx

Обвязка вокруг Slider: подпись слева, текущее значение справа, ползунок, необязательная подсказка снизу. Не слит с Input и SelectField: у тех общая 44px-коробка с обводкой и фоном, у ползунка своей поверхности нет.

Состав

Состояния

Показаны на голом Slider: у SliderField своих состояний нет, он их только оборачивает.

Свойства

Составные

Собраны из примитивов. Здесь же лежат компоненты, знающие про домен приложения — ребёнка, Premium, типы записей, — тогда как примитивы про данные не знают ничего.

Notice «плашка-сообщение» ui-kit/Notice.tsx

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

Состав

Варианты

Свойства

ScreenState «экран-заглушка» ui-kit/ScreenState.tsx

Полноэкранное состояние вместо всего приложения: обрыв связи с сервером и подгрузка страниц вне мини-аппа. Внутри мини-аппа загрузку показывают скелетоны — по фидбэку пользователя спиннер «проскакивал» и прыгал на настоящие данные. Отличается от Notice ролью — тот живёт внутри страницы рядом с содержимым, этот заменяет собой страницу целиком.

Показано в уменьшенной рамке: в приложении блок занимает весь экран.

Состав

Состояния

Оба состояния показаны в превью выше: у компонента их ровно два, и они и есть весь компонент — отдельного «базового» вида, от которого они отличались бы, не существует.

Свойства

ChipSelect «выбрать один из N» ui-kit/ChipSelect.tsx

Сетка кнопок-пилюль — выбор одного варианта из нескольких, активная опция залита акцентом. options/value/onChange, иконка в опции необязательна.

Состав

Состояния

Свойства

QuickActionButton ui-kit/QuickActionButton.tsx

Плитка быстрой записи на Главной: крупная эмодзи над подписью, вся плитка — одна кнопка. Здесь сразу в работе: сон уже идёт, поэтому плитка активна и подпись сменилась на «Проснулся», а «Прикорм» ещё не реализован — выключен с бейджем. Два «этажа»: primary — фиксированная пара «Кормление/Сон», secondary — настраиваемые. Не вариант Button: у того содержимое всегда в строку, здесь вертикальная плитка фиксированной высоты.

Состав

Состояния

Показаны на компактной плитке — у крупной состояния те же, меняются только размеры и толщина рамки. В приложении, впрочем, активной бывает только крупная, а выключенной только компактная: см. таблицу.

Свойства

ListRow ui-kit/ListRow.tsx

Кликабельная строка со слотами — основной способ показать список в приложении: так собраны настройки, все шторки, модалки, Дашборд и Premium.

В интерфейсе

Правый хвост

Слот trailing — то, чем строки на самом деле отличаются друг от друга; ради него компонент и появился. Ниже каждый элемент показан один раз; сочетания из них перечислены в таблице, чтобы не повторять одно и то же по три раза.

Состав

Состояния

Свойства

Карточка и заголовок секции

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

Варианты

Состав карточки

Экспорты

BottomNav «нижняя навигация» components/BottomNav.tsx

Плавающая пилюля поверх контента, четыре фиксированных таба. Не уезжает со скроллом (position: fixed), поэтому отступ снизу отсчитывается от safe area. Свойств нет вовсе: табы зашиты константой tabs в самом файле. Ни disabled, ни loading — разделы доступны всегда.

Состав

Состояния

Что содержит

StatCard «карточка-показатель» ui-kit/StatCard.tsx

Подпись сверху → крупное число с единицей → вторичная строка → отбитый разделителем футер. Два слота под значением намеренно разные: secondary идёт без разделителя, footer — за ним. Сама карточка не интерактивна, она только показывает число.

Состав

Состояния

Свойства

SelectField и TimeSelect ui-kit/SelectField.tsx · ui-kit/TimeSelect.tsx

Выпадающий список — обёртка над shadcn Select, владеющая его оформлением. TimeSelect — время чч:мм двумя списками; нативный <input type="time"> не используется, потому что в Telegram WebView он рендерится по-разному на разных платформах.

Состав

Состояния

Свойства

Sheet ui-kit/Sheet.tsx

Шторка снизу — основная форма всех модальных экранов: запись кормления, сна, подгузника, замеры, редактирование. Собрана из слотов Header, Body, Section и Footer. В проекте есть и ui/drawer.tsx поверх той же vaul, но его не импортирует ни один файл.

Состав

Состояния

Превью здесь нет намеренно: оба состояния шторки — движение, а не вид. «Открыта» и «закрыта» отличаются положением по вертикали и затемнением фона, свайп — это жест. Статичная картинка показала бы только конечное положение, которое и так видно в превью выше.

Свойства

Иконки

В приложении два набора, и это разные вещи. Векторные иконки — lucide-react, ими нарисован интерфейс: навигация, действия, стрелки, состояния. Эмодзи иконками только выглядят: они приходят из данных — тип события, аватар ребёнка — и живут по правилам текста, а не SVG.

lucide-react 25 иконок

Единственный источник векторных иконок, своих SVG в проекте нет. Иконки ниже нарисованы теми же path, что и в приложении — вытащены из node_modules/lucide-react, а не перерисованы.

Две находки при сверке с кодом. BarChart3 и ChartColumn — один и тот же глиф: первое имя в lucide устаревшее, но в проекте импортируются оба, в разных файлах. И наоборот: действие «Изменить» нарисовано двумя разными иконками — Pencil на Главной и в Статистике, Edit (это square-pen, карандаш в рамке) в Истории и Настройках. Ни то, ни другое не решение — просто так сложилось.

Размеры

Три размера — 16, 20, 24. Все кратны --space-unit (4px), той же базе, на которой стоят отступы и скругления: иконки не исключение из общей шкалы. Раньше значений было девять и размер задавал каждый вызывающий код — те, что создавали разнобой (11, 14, 18, 22, 26), ровно те, что не кратны четырём.

Единственное исключение — эмодзи 48px на заставке поворота экрана: это иллюстрация во весь экран, а не значок, и в шкалу иконок её не загоняли.

Штрих и цвет

Толщина штриха везде 2 — дефолт lucide, никто его не переопределяет. Единственное исключение — активный таб навигации: strokeWidth 2.25, чтобы состояние читалось не только цветом. Цвет иконка не задаёт вовсе: lucide рендерит stroke="currentColor", поэтому иконка всегда того же цвета, что текст рядом — --text-secondary в спокойном состоянии, --accent в активном.

Эмодзи 11 размеров

Это не иконки и не часть набора: эмодзи приходят из данных (тип события, аватар ребёнка) или стоят заглушкой в пустом состоянии. Отсюда и разнобой размеров — у каждого свой, потому что это текст внутри своего компонента, а не элемент шкалы. Переиспользуется как «стандартная иконка строки списка» только 20px; остальные размеры под одно-два места и токенами не являются.

Размер задан теми же классами, что и текст: 12–16px — text-xs/text-sm/text-base, 18–48px — text-lg…text-5xl, кроме 22px и 26px, у которых инлайновый style={{ fontSize: N }}. То есть эмодзи размечены как типографика, а не как иконки — что и объясняет, почему их размеры не сходятся со шкалой lucide.

Figma ↔ Код

Что вошло в выборку. Весь mamkin-mini-app/src, кроме библиотечных components/ui/* (shadcn/Radix, их не трогали) и служебной галереи pages/dev/*. Публичный лендинг LandingPage.tsx тоже вне шкал: он вне Telegram Mini App и размеры там свои, некратные (1.75rem, 1.8rem, 3rem). Отдельные значения из библиотечных файлов в таблицах всё же есть — они помечены в колонке «Где используется».

Всё, что нужно для переноса в Figma Variables, в одном месте — код-токен, примитив/переменная Figma, значение. Без «см. выше»: цвета, типографика, spacing, opacity и border — полностью, без сокращений.

Словарь колонок один на все справочные таблицы страницы: Образец — как токен выглядит на самом деле, Primitive — имя примитива или ссылка на него, Semantic — именованная переменная Figma, ссылающаяся на примитив, CSS-переменная — что от этого есть в коде (бывает только у семантического тира), Значение — разрешённое значение, Реализация — механизм в коде там, где он не сводится к примитиву, Где используется — места в интерфейсе. В таблицах gap/height/width/margin/padding имя переменной приведено к единому виду для Figma и не всегда 1:1 с классом в коде: дробные значения через дефис (h-1-5 вместо h-1.5 — точка не годится для имени переменной), max-h/max-w без приставки (h-44/w-48), margin/padding без направления (m-N/p-N вместо mb-N/px-N). Настоящий класс из кода в таких случаях — в колонке «Где используется». Таблицы разбора компонентов ниже устроены иначе: там строка — это элемент, состояние или свойство, а не токен.

Типографика — Text Styles

Типографическая настройка в Figma — это Text Style: именованный набор Family + Size + Weight + Line height + Letter spacing, применяется одним кликом. Только стили, которые реально повторяются в коде, с готовым line-height под свой размер.

В Figma Text Style к переменной привязаны family (всегда Typography/font-family/base), weight и size — все трое через примитив. Не биндятся вообще (ограничение Figma, не наше решение) — line-height и letter-spacing: всегда сырое число внутри стиля, в процентах. В коде у типографики, в отличие от цвета, вообще нет CSS-переменной — ни одной --font-* в index.css. Реализация — сырые Tailwind-классы прямо в JSX; какие именно и где применяется каждый стиль — в разделе Типографика.

Line-height «Auto» — код не переопределяет line-height (наследуется от шрифта), в Figma это отдельный режим поля, не число. 5% letter-spacing у SectionLabel — то же самое, что 0.05em в коде (Figma-проценты у трекинга считаются от font-size, как и em).

Цвет — Primitives

Neutrals — тёмная и светлая шкала отдельно (не совпадают 1:1, поэтому разные примитивы, не тема одного).

Neutrals — Dark

Neutrals — Light

Цвета — по оттенку

Строки с процентом (напр. color/green/400 15%) — отдельные primitive с прозрачностью, запечённой в HEX/rgba, не наложение opacity поверх основного цвета: Figma не даёт применить Fill Opacity к уже вставленной ссылке на переменную, только к слою целиком.

Цвет — Semantic

CSS-переменная в коде · Semantic (Figma) · Primitive, на который ссылается · где используется. Разрешённое значение цвета — у самого примитива в таблице выше, здесь не повторяется.

Light mode

Dark mode

Status & CTA

Один токен — одна строка. accent/accent-light сюда не входят — дубль варианта default из Accent ребёнка ниже. -bg — тот же primitive, что у основного токена, с прозрачностью.

Dark

Light

Accent ребёнка (7 вариантов × 4 роли)

Modes на бесплатном тарифе Figma нет — вместо одной переменной с 7 режимами здесь 28 отдельных Semantic-переменных (по 4 на цвет: сам акцент / подложка 15% / текст на подложке / обводка 40%). Смена акцента у ребёнка — это выбор готового набора, не один клик по переменной.

--accent-gradient (7 вариантов, 135°, opacity/30 → opacity/15 поверх того же primitive) — Opacity-приёмом не сделать, нужен отдельный Gradient-стиль в Figma, не Number+Color.

Пространство, прозрачность, обводка

Один примитив (space/N), но каждое из семи свойств — свои именованные переменные Figma, каждая со своей ссылкой на примитив (как rounded-control ниже ссылается на space/10). Токен из кода = имя переменной Figma 1:1.

Про колонку «CSS-переменная». Она стоит только у семантического тира — как и у цвета; в таблице примитивов ниже её нет, потому что примитив в коде вообще не существует отдельной переменной. В отличие от цвета, где на каждый семантический токен есть своя --*, здесь настоящая CSS-переменная существует только у скруглений (--radius-*) и у прозрачностей, запечённых в цветовые переменные (--accent-light, --success-bg и т.п.). У gap / height / width / margin / padding и у толщины обводки переменных нет вообще, и прочерк в колонке — не пропуск в документации, а как есть: Tailwind 3 генерирует эти классы статически на этапе сборки, значение подставляется прямо в CSS-правило и во время исполнения ничего не читается. Единая база --space-unit: 0.25rem в index.css объявлена, но реально связывает только шкалу --radius-*, где каждое значение — её множитель; со шкалой Tailwind она совпадает численно, но не связана.

corner radius 8 значений

item spacing (gap) 8 значений

height 26 значений

width 23 значения

margin 12 значений

padding 14 значений

Opacity и толщина обводки — по строению это примитивы (сырое число, ни на что не ссылается), но в Figma-файле их пока нет вообще: вбиваются вручную в каждом использовании. Семантического тира над ними тоже нет — поэтому колонки «Semantic» здесь не бывает, а «Реализация» показывает механизм в коде. rounded-full уже показан выше, в таблице corner radius — отдельной таблицы под него не заводим. Колонка «CSS-переменная» у opacity — не переменная прозрачности как таковой: своей --opacity-* в проекте нет, процент запечён внутрь цветовой переменной (--accent-light — это акцент, уже смешанный с 15%). Где прочерк — значение живёт классом Tailwind или инлайн-стилем, в CSS-переменную не вынесено.

Opacity

stroke — толщина обводки

Тень, градиент, ритм и сетка

Как у opacity и обводки, семантического тира здесь нет: значения одноразовые, ссылаться вниз не на что — поэтому колонки «Semantic» не бывает, а сами токены по строению примитивы. «Реализация» показывается там, где механизм в коде не очевиден из значения.

shadow (elevation) 4 значения

Тень — только у элементов, плавающих поверх контента (навигация, попапы). У обычных карточек сигнал глубины — обводка stroke/thin (значения — в разделе Figma ↔ Код), не тень.

Библиотечный shadow-md в базовых классах ui/popover.tsx — фактически мёртвый: оба реальных потребителя (shadow/popover выше) переопределяют его инлайн-стилем. Тень DesktopFrame (0 24px 80px rgba(0,0,0,.5)) — вне основной шкалы: рендерится только вне мобильного Telegram (браузер, Telegram Desktop), не часть мобильного интерфейса.

gradient 2 значения

Только 2 реальных градиента, оба акцентные — завязаны на var(--accent) текущего ребёнка, не статичная палитра.

section header & rhythm 3 значения

Вертикальный ритм между секциями страницы — 20px практически везде. За это отвечает не отдельный «межсекционный» класс, а штатное схлопывание CSS-margin (margin collapse) между нижним отступом предыдущего блока и встроенным mt-5 компонента ListHeader: браузер берёт максимум из двух соседних margin, не их сумму, поэтому 8/12px нижнего отступа карточки плюс 20px верхнего отступа заголовка дают ровно 20px, а не 28/32px. Эмуляция экрана с этим ритмом — в разделе layout & grid выше.

Margin collapse работает только между block-уровневыми соседями — исключение здесь: компонент с базовым классом inline-flex, а inline-flex элементы в collapse не участвуют, поэтому интервал перед такой секцией держится на встроенном mt-5 заголовка, а не на схлопывании отступов.

layout 2 значения

Ширина мобильного контейнера и горизонтальные поля страницы. Разбор внутренних отступов компонентов, с картинками, остался в разделе Layout & grid.