Скилл для Claude

Соберите любой макет на дизайн-системе Sola

Установите скилл — и Claude будет рисовать экраны, флоу, лендинги и отдельные компоненты в языке Sola: тем же туманом и матовым стеклом, той же Geologica, теми же точечными цифрами, компонентами и кодом, что в прототипе. На выходе — готовый HTML, который открывается в браузере.

Скачать скилл .zip · 142 КБ
  1. Скачайте архив. Распаковывать не нужно.
  2. Загрузите в Claude: Customize → Skills → + → Upload a skill и выберите архив. В настройках должно быть включено выполнение кода (Code execution).
  3. Попросите макет — в любом чате, скилл подключится сам.

В Claude Code: распакуйте архив в ~/.claude/skills/

01

Обзор

Sola — мобильный трекер здоровья: сон, пульс, шаги, глюкоза, анализы, самочувствие. Эта дизайн-система описана по шести собранным экранам шоурила — всё, что здесь показано, работает в продукте прямо сейчас.

6экранов в шоуриле
513классов продукта
889наборов кейфреймов
16кеглей в CSS
29значений радиуса
38,5 содин цикл шоурила

Инвентаризация честная: 16 кеглей и 29 радиусов — это не система, а след ручной вёрстки по координатам Figma. Документ предлагает сокращённый набор: 6 кеглей текста и 6 ступеней радиуса. Всё остальное в таблицах помечено как «вынужденное» — вектор, матрица цифр, корпус телефона.

СлойГде лежитЧто это
Оболочкаshell.css70 строк Кадр 540×960, корпус телефона, экран 393×852, атмосферные пятна, глобальные токены.
Сцена 1 · Сегодня.sc1963 строки Главный экран-сводка: фраза дня, дуга окна солнца, плитки сна и воды, таб-бар.
Сцена 2 · Анализы.sc2854 строки Сегмент-контрол, четыре строки показателей с тегами, кнопка-плашка.
Сцена 3 · Показатель.sc31093 строки Карточка одного анализа: крупная точечная цифра, график истории, поповер поверх затемнения.
Сцена 4 · Как ты в целом.sc41472 строки Самый длинный экран: инсайт недели, столбики сна, карточки метрик, блоки шагов, глюкозы, пульса.
Сцена 5 · Сон.sc51023 строки Гипнограмма, карточки фаз, графики сна за неделю и месяц.
Сцена 6 · Вечерняя отметка.sc61724 строки Форма: градиентная шкала настроения, чипсы «Что повлияло», поле заметки, кнопка.

Чем этот язык отличается

Туман, а не белое

Фон — #e3ebe5, карточки на нём светлее фона, но не белые: белый с прозрачностью 50–62 %. Чистый #fff в интерфейсе появляется только в тексте на тёмной кнопке.

Цифры — прибор

Каждое показание набрано точечной матрицей 5×6 (Bitcount Single). Это сразу отличает «данные» от «текста» без единой линейки и подписи.

Одно солнце на экран

Тёплая засветка — янтарь и абрикос — ведёт к главному действию дня. Два солнца на экране означают, что главного действия нет.

Отклонение — повод, а не авария

Нет тревожного красного на цифрах. «Ниже нормы» — это охра #c98a00 и слово «ниже», а не восклицательный знак.

02

Принципы

Семь правил из брифа. Каждое решение сверяется с ними, спорное — отбрасывается.

  • Трекер, а не медкарта. Приложение ведёт показатели и статистику. Ощущение — забота, а не больница: ни белого халата, ни синего «госпиталя», ни карточки пациента.
  • Экран начинается с фразы, а не с цифры. «Ты выспался. Пульс ровный — хороший день для движения» идёт до любого графика. Цифра объясняет фразу, а не наоборот.
  • Одна главная цифра на карточку. Если на плитке два равных числа, одно из них лишнее или это две плитки.
  • Супер-эллипс везде. Скругления сглаженные и крупные: 24–40 px на карточках. «Табличных» прямых углов в продукте нет совсем.
  • Мягкость интонации. Без тревожного красного, без восклицательных знаков, без серий и стыда за пропущенный день. Отклонение — повод, а не авария.
  • Зелень и бирюза плюс тёплый акцент. База — туман, шалфей, эвкалипт. Жёлто-оранжевый только акцентом: маркер, указатель, главное действие.
  • Показания — точечным шрифтом. Все цифры продукта набраны матрицей, как на приборе. Единицы и подписи — обычным Geologica в мелком кегле.

03

Направление

На ресерче было четыре направления. Выбрано B — Morning Mist. Три остальных здесь затем, чтобы не вернуться к ним случайно.

ВариантИдеяПалитраРешение
A · Biolumeсвет изнутри Тёмный ночной океан, карточка — сгусток света. Засветка кодирует статус. Abyss Lagoon Amber Отклонено: тёмная тема в приложении про утро читается как ночной прибор.
B · Morning Mistвзято в работу Солнце сквозь туман. Светлые матовые карточки, одна тёплая засветка ведёт к главному. Mist Lagoon Sun Выбрано. Приложение, которое приятно открыть до кофе.
C · Lab Glassличная лаборатория Стекло пробирок, миллиметровка, жёлтый маркер. Эксперимент на 14 дней. Graphite Teal Marker Отклонено для v1: слишком близко к «анализам», забота уходит.
D · Day Arcдень по солнцу Интерфейс окрашен в текущее время суток, окна дня на дуге. Dawn Noon Dusk Частично взято: дуга окна солнца на главном экране — оттуда.

Что из направления B дошло до вёрстки дословно

  • Карточки темнее фона, а не белее. Подтверждено: --surface-card — белый с альфой 50 %, поверх тумана он читается как матовая галька, а не как лист бумаги.
  • Фон-блюр 40. В вёрстке осел на blur(14px) для карточек и blur(28px) для мелких стеклянных элементов — 40 на живом фоне давал кашу.
  • Одна тёплая засветка на экран. Выполняется: золотое пятно всегда стоит над главным действием, остальные три пятна — холодные.
  • Geist Mono CAPS для подписей — не прижился. Единицы («нг/мл», «ммоль/л») набраны Geologica 11/400. Второй шрифт ради трёх слов не окупился.

Роадмап

ЭтапЧто этоСодержание
00сейчасРесерч и направление Аудит 10 конкурентов и рынка РФ · 10 вариантов названия · мудборд из 4 направлений · выбор одного.
01MVPГлавный экран и базовые метрики Онбординг, Apple Health / Health Connect / Huawei · главный экран-сводка · 6 метрик: сон, пульс и HRV, шаги, глюкоза, вода, самочувствие · ручной ввод анализов.
02v0.2Анализы и своя панель Фото бланка → распознавание (Инвитро, Гемотест, Helix, KDL) · тренды и нормы · «пересдать через…» · панель из карточек · инсайт дня одной фразой.
03v0.3Эксперименты и окна дня Эксперимент на себе 14 дней · окна дня: солнце, кофе, экран перед сном · мягкие цели без серий и стыда.
04v1.0Разговор и врач Короткий AI-разговор по своим данным · PDF-сводка для врача · семейный доступ · данные хранятся на устройстве.

04

Цвет

Три набора: поверхности и текст (переменные Figma), палитра направления Morning Mist (откуда берутся засветки) и палитра данных (графики и столбики).

Поверхности и текст — переменные продукта

Surface / Card--surface-card · #ffffff80 Любая карточка и плитка. Белый с альфой 50 %, не #fff.
Surface / Tabbar--surface-tabbar · #ffffff9e Только таб-бар. Плотнее карточки, потому что под ним едет контент.
Surface / Segment active--surface-segment-active · #ffffffd9 Только активная плашка сегмент-контрола. Самая плотная поверхность в продукте.
Surface / Plate--surface-plate · #14211c0f Вторичная кнопка и невыбранный чипс. Чернила с альфой 6 %, не серый.
Text / Primary--text-primary · #14211c Весь основной текст, иконки активной вкладки, фон первичной кнопки.
Text / Secondary--text-secondary · #5e6b66 Подписи, единицы, неактивные вкладки, подсказки. Контраст к туману 5,6:1.
Accent / Primary--accent-primary · #14211c Тот же цвет, что текст. Акцент Sola — чернила, а не цвет. Фон главной кнопки и «плюса».
Text / On accent--text-on-accent · #ffffff Единственное место чистого белого: текст и галочки на чернильном фоне.

Теги показателей

Четыре цвета по типу анализа. Тег рисуется так: текст и иконка — цветом, подложка — тот же цвет через currentColor с opacity:.18. Отдельного «цвета фона тега» в системе нет и быть не должно.

Tag / Vitamin --tag-vitamin · #c98a00Витамины D, B12. Охра, не жёлтый.
Tag / Mineral --tag-mineral · #b8452cФерритин, магний, железо.
Tag / Hormone --tag-hormone · #5a4bc4ТТГ, кортизол. Единственный холодный тег.
Tag / Blood --tag-blood · #c23e62Гемоглобин, эритроциты.

Палитра направления — откуда берётся свет

Этих шести цветов нет в переменных Figma: они живут в градиентах фона, засветках и тенях. Знать их надо — без них новый экран окажется плоским.

Mist#eef2ec Фон кадра. В сценах чуть зеленее — #e3ebe5.
Sage#b7cdbf Подложки, левый край градиентной шкалы настроения.
Eucalyptus#4e7d6e Цвет тени стекла: rgba(78,125,110,.12). Больше нигде.
Lagoon#1fa59a «В норме». Буква аватара, линии графиков, ссылки-подсказки.
Sun#ffc75a Главная засветка и ручка дуги. Одна на экран.
Apricot#ff9a5c Действие и пик. Правый край шкалы, акцентная тень карточки.

Палитра данных

Графики, столбики и точки живут своей палитрой — она градиентная, а не категорийная: цвет говорит о значении, а не о серии. Бирюза #1bae9e встречается в CSS 272 раза — это основной цвет «в норме» на любом графике.

Data / Norm#1bae9e Основной цвет графиков. 272 вхождения в CSS.
Data / Good#5db17a Переход бирюзы в зелень на градиентных лентах.
Data / Watch#c1b643 Оливковая середина градиента: «обрати внимание».
Data / Off#f37423 Вне нормы на ленте. Ни разу не красный.
Data / Peak#e8742e Пик столбика, крайняя точка истории.
Data / Alert#e34237 · только α ≤ .18 Единственный красный. Работает только как еле заметная заливка под значением, сплошной заливкой — никогда.

Правила цвета

  • Акцент продукта — чернила #14211c, а не цвет. Главная кнопка, «плюс» в таб-баре и выбранный чипс — тёмные. Цветом красится только то, что сообщает значение.
  • Чистый #ffffff — только текст на чернильном фоне. Любая белая поверхность в системе имеет альфу: 50 %, 62 %, 85 %.
  • Серого нет. Второй уровень текста — #5e6b66, это зелёный. Подложка — #14211c с альфой 6 %, тоже зелёный. Нейтральный #888 ломает тон немедленно.
  • Тёплое на экране — одно. Если золотая засветка указывает на два разных элемента, значит главного действия нет, и экран надо переделывать, а не добавлять второе солнце.
  • Красный не касается цифр. «Ниже нормы» — охра и слово; ярко-красный разрешён только как подсветка области графика с альфой не выше 18 %.
  • Цвет тега приходит из currentColor. Подложка всегда наследует цвет текста с opacity .18 — так новый тип анализа добавляется одной строкой.

05

Типографика

Один шрифт на весь интерфейс — Geologica. Вариативная толщина от 200 до 600, кириллица полная. Второй «шрифт» — точечная матрица, она в следующем разделе.

Sola
Ты выспался. Пульс ровный
Окно для солнца · Сон · Вода
Белок в эритроцитах, который переносит кислород
Иду гулять · Напомнить пересдать
нг/мл · Анализ · 28.09 · 12:40–13:20

В CSS продукта 16 разных кеглей — это след ручного переноса координат из Figma. Ниже — шесть ролей, к которым всё сводится. Числа в скобках — сколько раз кегль встречается в реальном CSS.

РольКегльВесИнтерлиньяжГде
Display.s6-title30 px (4)3001.18 · tracking −0,45 Заголовок экрана: «Вечерняя отметка», «Как ты в целом». Один на экран.
Headline.s1-head28 px (1)200–3001.21 Фраза дня на главном. Переносится на три строки — это нормально.
Title.s1-tile-title17 px (9)30021 px Заголовок карточки и плитки: «Сон», «Вода», «Окно для солнца».
Body.s3-pop-text15 px (24)40019–22 px Текст поповера, поле ввода, подпись кнопки большой.
Button / Small.s2-tag-label13 px (22)50013–16 px Тег, чипс, сегмент, кнопка-пилюля, подсказка.
Caption.s1-badge-text11 px (85)50014 px Самый частый кегль продукта: бейдж, единица, дата, подпись оси.
Micro.s1-tab-label10 px (33)400 / 50013 px Только подписи вкладок и подписи под столбиками графика. Ниже 10 px не опускаться.

Правила набора

  • Вес растёт, когда кегль падает. 30 px — Light 300, 11 px — Medium 500. Иначе мелкая подпись на туманном фоне исчезает.
  • Трекинг трогаем только на Display. −0,45 px на 30 px. На 15 px и мельче letter-spacing: 0 — в CSS шесть таких явных нулей, это не случайность.
  • Интерлиньяж в пикселях, не в процентах. В Figma подписи заданы как 14 px, 19 px, 21 px. Доля на 11-пиксельном тексте даёт дробь и съезжает на полпикселя.
  • Заголовок экрана не переносится, фраза дня — переносится. У заголовка white-space: nowrap, у фразы — три явных абзаца.
  • Единицы — обычным текстом. «нг/мл», «ммоль/л», «ч», «м» набраны Geologica 11/400 цветом secondary и всегда стоят после точечной цифры, никогда над ней.
  • Geist Mono из мудборда не используется. Если он появится в макете — это ошибка переноса из ресерча, а не новое правило.

Шрифт подключается ссылкой на Google Fonts. Если документ открыт без сети, Geologica подменится системным гротеском: пропорции поедут, но структура и цвета останутся верными.

06

Точечные цифры

Все показания продукта — матрица 5×6 из скруглённых квадратов. В Figma это шрифт Bitcount Single Light, в вёрстке — инлайновый SVG: ассеты из Figma недоступны, а шрифта нет в Google Fonts.

Крупное показание

Шаг сетки 5,2 px, точка 3,64 px (0,7 шага), радиус 1,1648 px (0,32 точки), следующая цифра через 31,2 px — ровно шесть шагов, то есть между цифрами всегда одна пустая колонка. Эти пропорции не меняются: меняется только шаг.

.s3-big · 5 колонок × 6 строк

Значение в плитке

Шаг 4 px. Ширина растёт по шесть шагов на цифру, поэтому плитку с четырёхзначным числом надо проектировать по максимуму, а не по текущему значению.

шаг 4 px · «1400 мл»
пг/мл

Значение в строке

Шаг 2 px — минимум, при котором матрица ещё читается. Единица стоит справа, обычным Geologica 11/400, с отступом 6 px.

.s2-num · шаг 2 px

Полный набор глифов

Десять цифр и двоеточие. Буквы в матрице не набираются никогда: «ч», «м», «мин» — обычный текст. Если нужен знак, которого нет в наборе, значит это не показание.

0–9 и «:» · больше в системе нет

Правила

  • Матрица — только для измеренного. 7:42 сна, 1400 мл воды, 160 пг/мл B12, 38 минут до конца окна. Количество анализов, номер недели и «5 из 8» — обычный текст.
  • Цвет матрицы — currentColor. Цифра наследует цвет контекста: в норме #14211c, на оранжевом столбике — белая. Отдельного цвета у цифр нет.
  • Шаг выбирается из четырёх: 2 · 4 · 5,2 · 7. Промежуточные значения дают дробные координаты точек и мыло на экране.
  • Ширина блока считается заранее: 6 × шаг × количество цифр − шаг. Плитка «Вода» заложена под 4 цифры, хотя сегодня там 1400.
  • Единица — справа и ниже базовой линии матрицы. «7 ч 42 м»: цифры матрицей, «ч» и «м» — Geologica 11/400 цветом secondary.

07

Геометрия и ритм

Экран 393 × 852. Боковое поле 20 px, значит рабочая ширина 353 px — это ширина кнопки, карточки, сегмент-контрола и таб-бара. Число 353 в CSS встречается чаще любого другого размера.

Радиусы

40 · экран
32 · карточка
28 · плитка
24 · поповер
16 · таб-бар
10 · кнопка
8 · чипс
6 · тег

В CSS 29 разных радиусов, но 116 из 333 вхождений — это 1,25 px, точки матрицы цифр. Реальных ступеней восемь, и они подчинены правилу чем крупнее элемент, тем круглее: радиус — примерно 20–30 % от короткой стороны.

РадиусЭлементКороткая сторонаПравило
40 pxЭкран, фон сцены393Совпадает с корпусом, задаётся один раз в оболочке.
32 pxКарточка: инсайт, фазы сна, шкала настроения12825 %
28 pxПлитка сна и воды, пилюля «Дальше по дню»152 / 42Плитка — 18 %, пилюля — полукруг.
24 pxПоповер, поле заметки10423 %
16 pxТаб-бар6425 %
14 pxСегмент-контрол снаружи4432 %
10 pxКнопка, «плюс», аватар, иконка-кнопка40–52--radius-10, единственный радиус-переменная.
9 pxПлашка внутри сегмента36На 5 меньше внешнего — вложенный радиус всегда меньше.
8 pxЧипс «Что повлияло»3424 %
6 pxТег показателя, бейдж2623 %
50 %Точки графиков, засветки—24 вхождения.

Отступы

  • 20 px — единственный отступ первого уровня. --space-20: поле экрана, внутреннее поле карточки, горизонтальный паддинг кнопки. Все заголовки карточек стоят на left: 20px; top: 20px.
  • Внутри компонента — 8, 10, 12. Зазор между иконкой и подписью чипса — 8 px (через gap), тега — 6 px. Паддинг тега асимметричный: 0 10px 0 8px — слева меньше, потому что иконка круглая.
  • Высоты фиксированы и их мало: 26 (тег, бейдж) · 34 (чипс) · 40 (кнопка малая, аватар, иконка-кнопка) · 44 (сегмент) · 52 (кнопка большая) · 64 (таб-бар). Нового значения высоты без причины не вводим.
  • Между карточками — 16 px по вертикали. Между карточкой и заголовком следующего блока — 24 px.
  • Все координаты в пикселях. Это шоурил 393 px, не резиновая вёрстка: доля от ширины на дробных координатах Figma (59,97 px) даёт расхождение в полпикселя и мыло на границах.

08

Стекло и тень

Эффект Glass/Card из Figma — это три свойства разом: полупрозрачный белый, размытие фона и одна-единственная тень цвета эвкалипта. Ни одно нельзя выбросить.

Сон

чм

глубже обычного

Glass / Card

Белый 50 % + backdrop-filter: blur(14px) + 0 14px 40px -10px rgba(78,125,110,.12). Тень зелёная, а не чёрная: чёрная на туманном фоне даёт грязь.

.s1-tile · .s4-card · .s5-card
акцентная тень

Glass / Card Accent

Та же геометрия, тень цветом rgba(255,154,92,.25) — абрикос. Ставится только под карточкой главного действия дня, и только под одной.

box-shadow: 0 14px 40px -10px rgba(255,154,92,.25)
Дальше по дню

Пилюля с бликом

Единственный элемент с двойной тенью: 0 4px 12px rgba(0,0,0,.3) плюс тёплый ореол 0 8px 28px rgba(255,199,90,.3). Кромка — 1px solid rgba(20,33,28,.02), почти невидимая, но без неё край рвётся.

.s1-pill · blur(24px)
ПоверхностьРазмытиеЗаливкаКогда
Карточка, плиткаblur(14) · 26 раз#ffffff80 или rgba(255,255,255,.5) Значение по умолчанию для всего крупного.
Мелкое стеклоblur(28) · 8 раз#ffffff80 Аватар 40×40, сегмент-контрол. Маленькая площадь требует более сильного размытия, иначе под ней видно пятна фона.
Пилюляblur(24) · 4 разапрозрачная Плавающая над контентом, заливки нет вообще — только размытие и тень.
Поповерblur(10) · 2 разаrgba(255,255,255,.96) Почти непрозрачный: под ним текст, который не должен просвечивать.
Затемнениеblur(4) · 2 разаrgba(20,33,28,.22) Подложка под поповером. Затемнение зелёное, не чёрное.

Правила

  • Тень одна на всю систему: 0 14px 40px -10px rgba(78,125,110,.12). Отрицательный spread −10 поджимает её под карточку: без него тень вылезает из-под краёв и карточка «висит».
  • Размытие без заливки не работает. backdrop-filter без полупрозрачного фона даёт мутное пятно без границ.
  • Кромки нет. В Sola у стекла нет светлой обводки: границу держит тень. Единственное исключение — пилюля с её 2-процентной кромкой.
  • Вложенного стекла не бывает. Внутри стеклянной карточки — только плашки --surface-plate и цветные подложки тегов. Стекло в стекле даёт двойное размытие и съедает кадры.

09

Свет и атмосфера

Фон экрана — не цвет, а пять размытых пятен поверх #e3ebe5. Они дают тот самый «туман с солнцем» и определяют, какой цвет всплывёт под конкретной карточкой.

Атмосфера главного экрана

Пять эллипсов: золото сверху справа, шалфей слева, бирюза снизу слева, персик по центру справа, мята внизу. Все — radial-gradient(closest-side, …) с тремя стопами и размытием 40–44. Размеры пятен больше экрана в полтора раза: край градиента не должен попадать в кадр.

.s1-blob-a … .s1-blob-e
ПятноЦветРазмытиеРоль
Goldrgba(255,203,104, .76 → .36 → 0)40 Главное. Стоит над действием дня. Одно на экран.
Peachrgba(255,178,110, .72 → .34 → 0)44 Тёплый низ, поддержка золота.
Tealrgba(98,201,192, .64 → .29 → 0)44 Холодная сторона. Обычно под блоком «в норме».
Sagergba(146,180,146, .55 → .26 → 0)44 Зелёный баланс, гасит избыток тепла.
Mintrgba(158,198,176, .5 → .23 → 0)40 Самое слабое. Связывает низ экрана с фоном кадра.

Длинный экран: пятна дублируются

На прокручиваемых экранах (анализы, показатель) каждое пятно продублировано со сдвигом +840 px — ровно на высоту контентной области. Так фон выглядит бесконечным, но файл остаётся из четырёх форм, а не из двадцати.

Локальные засветки

  • Ручка дуги — radial-gradient 57,6 px, blur 6, почти белый центр rgba(255,232,180,.85). Это единственная точка экрана, где свет «горит».
  • Свечение плитки сна — мятный эллипс 200×100, blur 18, живёт внутри плитки под overflow:hidden.
  • Свечение графика — копия линии с filter: blur(11px); opacity:.55 под основной линией плюс копия с blur(4) и opacity .7. Три слоя: свет, мягкий, чёткий.
  • Тёплая подсветка цифры — 0 0 8px rgba(255,199,90,.45), ставится на активную точку графика, не на саму цифру.

Правила света

  • Градиент всегда трёхстопный и заканчивается нулевой альфой того же цвета. Переход в transparent в Safari даёт серую кайму.
  • Размытие 40–44 для фона, 4–18 для элементов. Промежуточных значений нет.
  • Засветка не красит текст. Если на пятне золота текст стал нечитаем, двигают пятно, а не цвет текста.
  • Пятна не анимируются по отдельности. Они едут вместе с контентом одним слоем — иначе на телефоне падает частота кадров.

10

Движение

Весь шоурил — один цикл 38,5 секунды. У каждого анимированного элемента одинаковая длительность и общий старт, а различия заданы процентами внутри кейфреймов. Задержек нет ни одной.

КриваяРазГде
ease-out312Появление: шторки, сдвиги, проявления. Значение по умолчанию.
cubic-bezier(.4,0,1,1)228Уход: исчезновение и сдвиг за край.
ease-in-out205Непрерывное: дыхание засветок, качание дуги.
cubic-bezier(.22,1,.36,1)172Главный вход экрана — длинный мягкий выброс.
linear(…) 51 стоп257Пружина из Figma. Переносится дословно, не аппроксимируется.
step-end66Переключение состояния: подпись сменилась, галочка встала.

Приём «шторка»

Во всех сценах элементы появляются через маску: контейнер overflow:hidden на 100 px больше содержимого с каждой стороны, содержимое лежит внутри на left:50px; top:50px. Анимируется сама маска, а не контент. Поэтому образцы в этом документе начинаются с left:50px; top:50px — песочница документа сбрасывает это на поток.

  • Длительность у всех одна — 38,5 с. Разные скорости получаются шириной окна в процентах, а не разными animation-duration.
  • Точки графиков — одно правило на класс. 53 точки в сцене 3 используют nth-child и CSS-переменную сдвига, а не 53 копии блока анимации.
  • Текст печатается шириной клипа. Поле заметки «набирается» через width обёртки с overflow:hidden, а не посимвольно.
  • Главное движение — вертикаль. Контент приезжает снизу, шторки открываются сверху вниз. Горизонтальных въездов в продукте нет, кроме сегмент-контрола.
  • prefers-reduced-motion выключает всё. В конце каждого файла сцены стоит animation:none с сохранением видимого состояния — не скрытого.

В этот документ кейфреймы не включены. 889 наборов занимают около 600 КБ и в статическом справочнике ничего не рисуют. Всё остальное из shell.css и scene-1…6.css вставлено дословно — именно им нарисованы образцы ниже. За анимацией идти в сами файлы сцен.

11

Каталог компонентов

В первой колонке — сам компонент, нарисованный тем же CSS, что и в продукте: сборщик вынимает фрагмент разметки из scene-N.html по его data-node-id, а стили приходят из scene-N.css. Если компонент в продукте изменится, образец здесь изменится вместе с ним.

Образцы уменьшены: рабочая ширина Sola — 353 px, ячейка каталога уже. Пропорции сохранены, кегли внутри — настоящие.

Каркас экрана

ОбразецКомпонентСостоянияГде
9:41
Статус-бар.sola-statusbar один вид Общий слой оболочки на все шесть экранов. Часы 14/600, сигнал, батарея — всё чернилами #14211c.
Home-индикатор.s2-home один вид Низ экрана, 134×5, радиус 2,5. Стоит поверх всего, кроме затемнения.

Сегодня

Анализы

Динамика

Я

 Таб-бар на 5.s1-tabbar активная вкладка · обычная Все экраны, кроме модальных. 353×64, стекло 9e, радиус 16.
Кнопка «плюс».s1-tab-plus один вид Центр таб-бара, 56×40. Единственный тёмный элемент внутри стекла.

Действия

ОбразецКомпонентСостоянияГде
Напомнить пересдать
Кнопка основная.s3-btn · .s6-btn обычная · нажатая · неактивная Главное действие экрана, внизу: «Напомнить пересдать», «Сохранить».
Сфотографировать бланк
Кнопка-плашка.s2-btn-plate обычная · нажатая Вторичное действие: «Добавить анализ». Подложка --surface-plate.
Напомнить
Кнопка малая.s2-btn-primary обычная Внутри карточки: «Иду гулять». Высота 40, кегль 13/500.

Сохранить

Сохранено

 Кнопка формы.s6-btn обычная · после сохранения Вечерняя отметка. Подпись меняется на месте, через step-end.
Иконка-кнопка.s3-iconbtn · .s6-iconbtn назад · закрыть Левый верхний угол внутреннего экрана. 40×40, без фона — только иконка.

Дальше по дню

 Пилюля-подсказка.s1-pill обычная Плавает над контентом: «Дальше по дню ↓». Единственный элемент с тёплым ореолом.

Все

Вне нормы

Пересдать

 Сегмент-контрол.s2-seg три секции, одна активна Фильтр периода и типа: «Все · Витамины · Гормоны», «Неделя · Месяц · Год».
А
Аватар.s1-avatar буква · фото Правый верх главного. 40×40, стекло blur(28), буква цветом Lagoon.

Метки

ОбразецКомпонентСостоянияГде
Витамин D
Витамин D · 25(OH)D
Тег показателя.s2-tag · .s3-tag витамин · минерал · гормон · кровь Строка анализа, шапка показателя, поповер. Подложка — currentColor с .18.
+30 мин
Бейдж в плитке.s1-badge дельта · период Внутри плитки «Сон»: «+30 мин». Без фона, 11/500.

Пятница · 21:30

 Бейдж раздела.s6-badge · .s3-badge дата · лаборатория · состояние Правый верх экрана: «Пятница · 21:30», «Анализ · 28.09».

Сон

Сон

 Чипс выбора.s6-chip-sel · .s6-chip-plate выбран · не выбран «Что повлияло»: сон, кофе, прогулка, стресс. Галочка есть всегда, у невыбранного она visibility:hidden — чтобы ширина не прыгала.

По тяжёлым дням ищем, что мешает

 Подсказка системы.s6-hint + .s6-sparkle обычная Фраза от приложения. Всегда со звёздочкой цветом Lagoon — так видно, что это не твои слова.

Карточки и плитки

ОбразецКомпонентСостоянияГде

Сон

Ч

М

глубже обычного

+30 мин
Плитка метрики.s1-tile сон · вода Главный экран, две в ряд по 170,5. Заголовок 17/300, значение матрицей, подпись 11,5/400.

Главное за неделю

Сон стал ровнее — на 30 минут дольше и без поздних отбоев

Часы · Самочувствие

 Карточка-инсайт.s4-card [229:693] обычная «Главное за неделю» одной фразой. Единственная карточка с тёплой тенью rgba(255,199,90,.25).

HRV

мс

в норме

 Плитка-метрика узкая.s4-card [229:1114] HRV · пульс покоя Динамика, пара плиток 170,5×148, радиус 28.

Требует внимания

Анализ · 28.09

Витамин B12

пг/мл

ты 160

−30 до нормы

норма 190–900

Магний

ммоль/л

ты 0,62

−0,04 до нормы

норма 0,66–1,07

Что с этим делать

 Карточка анализов.s4-card [229:1080] в норме · требует внимания 353×312 — самая высокая карточка продукта. Внутри тег, значение, шкала нормы.

Фазы · Сб, 3 окт

чаще просыпался

глубокий

быстрый

лёгкий

пробуждения

 Карточка фаз сна.s5-card [229:1812] обычная · «чаще просыпался» Четыре полосы фаз по 10 px, значения матрицей, бейдж-комментарий справа.

Как прошёл день?

21:30

%

тяжело

отлично

 Шкала настроения.s6-card до выбора · после Единственная карточка с градиентной заливкой во всю ширину: шалфей → туман → песок → солнце → абрикос.

Пара слов, если хочется

Голова с утра, мало спал

0 / 200

6 / 200

12 / 200

18 / 200

24 / 200

 Поле заметки.s6-field пустое · с текстом · счётчик 353×104, радиус 24. Счётчик «28 / 200» в правом нижнем углу, 11/500.

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

Норма 130–160 г/л · Сдают утром натощак

Гемоглобин
Как поднять
Что есть
Когда пересдать
Поповер.s3-pop + .s3-dim открыт Объяснение показателя поверх затемнения. 361×257, стекло .96, три действия внизу.

Данные

ОбразецКомпонентСостоянияГде
Точечное показание.s2-num · .s3-big · .s5-bc шаг 2 · 4 · 5,2 · 7 Любое измеренное число. Матрица 5×6, следующая цифра через шесть шагов.

Вечерняя отметка

 Заголовок экрана.s6-title один на экран 30/300, трекинг −0,45. Не переносится: white-space:nowrap.
Витамин D

нг/мл

ниже

Ферритин

нг/мл

ниже

Гемоглобин

г/л

норма

ТТГ

мЕд/л

норма

 Список показателей.s2-list в норме · ниже · выше Четыре строки с шагом 56 px: тег, значение матрицей, единица, состояние, шеврон.

История

норма от 30

норма от 130

05.10.24

Helix

12.03

Гемотест

08.07

KDL

15.01

Инвитро

28.09

Инвитро

03.24

Helix

11.24

KDL

06.25

Гемотест

28.09

Инвитро

02.24

Helix

09.24

Helix

03.25

KDL

12.25

Гемотест

28.09

Инвитро

 График истории.s3-chart норма · тренд · точки-маркеры Показатель во времени: сетка из 52 точек, цветная лента, подписи дат и лабораторий.

Сон за неделю

+30 мин к прошлой

ч

м

прошлая ночь

7:05

Пн

8:06

Вт

6:40

Ср

7:20

Чт

8:18

Пт

6:48

Сб

7:42

Вс

7:24

4:36

8:24

7:05

4:36

5:12

8:54

8:06

8:12

4:06

9:06

6:40

5:06

5:30

8:36

7:20

7:48

4:48

9:12

8:18

4:54

5:54

8:48

6:48

6:36

5:06

9:00

7:42

скачет на 3 часа

−2 ч 40 м до цели

все ночи в цели

+30 мин к прошлой

 Столбики сна.s4-card [229:702] в цели · ниже цели · сегодня Семь столбиков по дням, подпись под каждым. Цвет столбика кодирует попадание в цель.

Шаги

из 9000

 Блок метрики.s4-card [229:1235] шаги · глюкоза · пульс Заголовок, значение, мини-график и подпись «из 9000». Три одинаковых блока подряд.

Ночь

23:18 – 07:00

23:18

01:00

03:00

05:00

07:00

Глубокий сон — в первые 3 часа, как и должно быть

 Гипнограмма.s5-card [229:1682] четыре фазы Экран сна. Ступенчатая лента фаз по времени, подписи слева.
rgba(20,33,28,.22) + blur(4)
Затемнение.s3-dim под поповером Подложка модального окна. Зелёное, не чёрное, и обязательно с размытием — без него сквозь него видно детали фона.

Формы и обратная связь

В шоуриле форм нет, кроме поля заметки. Эти компоненты собраны в языке Sola под ближайшие экраны: онбординг, ручной ввод анализа, настройки напоминаний.

ОбразецКомпонентСостоянияГде
Поле ввода.f-input пустое · заполненное · в фокусе · с ошибкой Ручной ввод анализа, поиск по показателям, настройки.
Норма 190–900 пг/мл
Поле с ошибкой.f-err ошибка · подсказка Значение вне диапазона. Кромка #b8452c, подпись под полем, а не поверх.
Селект.f-select обычный · открытый Выбор лаборатории: Инвитро, Гемотест, Helix, KDL.
Напомнить Утром
Выбор.f-box · .f-dot · .f-switch включено · выключено Настройки напоминаний, источники данных, семейный доступ.
Отметка сохранена
Тост.toast успех · нейтральный Подтверждение действия внизу экрана, 2,5 с. Стекло blur(24), без кнопки закрытия.
Анализов пока нетСфотографируй бланк — распознаем сами
Пустое состояние.empty нет данных · нет связи Вкладка «Анализы» до первого ввода. Без иллюстраций — иконка в стеклянном квадрате.
Загрузка.skel скелет · спиннер в кнопке Распознавание бланка, синхронизация с Health. Скелет повторяет форму будущего контента.

12

Экраны и каркас

Каждый экран собран в одной системе координат 393×852. Сверху статус-бар, снизу таб-бар, между ними контент с боковым полем 20 px.

9:41

Статус-бар

Один общий слой на все шесть экранов — он лежит в оболочке, а не в сцене. Часы слева на 26 px (14/600, время системное), остров по центру 114×32 — честная пилюля, а не суперэллипс, справа сигнал 18×12 и батарея 22×12. Всё чернилами. Высота зоны 54 px, контент под неё не заходит.

.sola-statusbar · .sola-island

Сегодня

Анализы

Динамика

Я

Таб-бар на пять

353×64, радиус 16, стекло --surface-tabbar (белый 62 %) и blur(14px). Тень здесь — filter: drop-shadow(0 14px 20px rgba(78,125,110,.12)), а не box-shadow: иконки и «плюс» должны отбрасывать тень по своей форме. Иконки 22×22, stroke 1,5, подписи 10 px. Активная вкладка — чернила и вес 500, остальные — secondary и вес 400. Цветом вкладки не красятся никогда.

.s1-tabbar · .s1-tab-icon · .s1-tab-label-active

Home-индикатор

134×5, радиус 2,5, цвет text-primary. Стоит на 831 px — то есть в 16 px от низа. Поверх него не лежит ничего, кроме затемнения модалки.

.s2-home
содержимое
маска +100

Маска-шторка

Приём появления: контейнер overflow:hidden на 100 px больше содержимого с каждой стороны, содержимое внутри на left:50px; top:50px. Анимируется маска. Без overflow:hidden шторка не работает совсем — элемент просто выезжает за пределы карточки.

.s1-mask · .s6-mask
353 px — рабочая ширина

Сетка экрана

393 − 20 − 20 = 353. Это ширина кнопки, карточки, сегмент-контрола, таб-бара и списка. Пара плиток — 170,5 каждая плюс 12 px между ними. Другой ширины у контента не бывает: если элемент не 353 и не 170,5, он либо вложен, либо нарисован неправильно.

--space-20 · 353 px · 170,5 px

Пересдать B12

13 ноября — напомним за неделю

Блок «Дальше» и хвост экрана

Последний блок длинного экрана: иконка 20×20, строка 13/400 и пояснение 11/400 secondary. Ниже него контент гасится градиентной маской (229:679) — прозрачной сверху, сплошной снизу. Без неё строки упираются в стекло таб-бара и читаются сквозь него как грязь.

.s4-card [229:1603] · mask-image: linear-gradient

13

Кнопки и действия

Четыре типа и один закон: на экране ровно одно главное действие, и оно тёмное. Всё остальное — плашка, пилюля или иконка.

Напомнить пересдать

Основная · 353×52

Фон --accent-primary (#14211c), подпись 15/500 белым, радиус 10, паддинг 0 20. Стоит внизу экрана на 20 px от края. Двух тёмных кнопок на экране не бывает.

.s3-btn · .s6-btn
Сфотографировать бланк

Плашка · 353×52

Та же геометрия, фон --surface-plate — чернила с альфой 6 %, подпись чернилами. Вторичное действие: «Добавить анализ», «Показать все». Серого фона у вторичной кнопки нет: подложка всегда прозрачная.

.s2-btn-plate
Напомнить

Малая · 110×40

Внутри карточки, рядом с заголовком: «Иду гулять». Подпись 13/500, радиус тот же 10. Высоту 40 держим общей с аватаром и иконкой-кнопкой — так шапка карточки не рассыпается.

.s2-btn-primary

Иконка-кнопка · 40×40

Фона нет вообще — только иконка 22×22 с stroke 1,6–1,7. Область нажатия всё равно 40×40. Слева вверху: «назад» на внутреннем экране, «закрыть» на модальном.

.s3-iconbtn · .s6-iconbtn

Дальше по дню

Пилюля · высота 42

Плавает над контентом, заливки нет — только blur(24px), кромка 2 % и двойная тень с тёплым ореолом. Подпись 13/400, рядом стрелка цветом Apricot. Используется ровно один раз на экран.

.s1-pill

Состояния кнопки

Неактивная — та же кнопка с opacity:.35, не серая заливка. Загрузка — спиннер 18 px слева от подписи, подпись меняется на деепричастие. Кнопка не схлопывается в кружок: ширина сохраняется, иначе прыгает вся раскладка.

.b-prim[disabled] · .b-spin

Все

Вне нормы

Пересдать

Сегмент-контрол · 353×44

Внешний радиус 14, внутренняя плашка 9 — вложенный радиус всегда меньше внешнего на величину отступа (4 px). Плашка 115×36 ездит под подписями, подписи не двигаются. Активная — 13/500 чернилами, остальные — 13/400 secondary. Секций максимум три: четвёртая не влезает в 353 без обрезки.

.s2-seg · .s2-seg-plate

14

Чипсы, теги и бейджи

Три разные сущности, которые легко перепутать. Тег говорит, что это за показатель. Чипс — выбор пользователя. Бейдж — подпись без действия.

Витамин D
Витамин D · 25(OH)D

Тег показателя · высота 26

Иконка 14×14 и подпись 13/500 — одним цветом; подложка рисуется через ::before с background: currentColor; opacity:.18. Паддинг 0 10px 0 8px: слева меньше, потому что иконка круглая и оптически отодвигается сама. Четыре цвета — витамин, минерал, гормон, кровь. Новый тип анализа добавляется одной строкой цвета, не новым классом подложки.

.s2-tag · .s2-tag::before · --tag-*

Сон

Сон

Чипс выбора · высота 34

Выбранный — фон чернилами, подпись белая, галочка видна. Невыбранный — --surface-plate, подпись чернилами, галочка visibility:hidden. Галочка остаётся в разметке и в потоке: убрать её через display:none — значит заставить чипс прыгать при выборе.

.s6-chip-sel · .s6-chip-plate
+30 мин

Пятница · 21:30

Бейдж · высота 14–26

Текст 11/500 без подложки. Два применения: дельта внутри плитки («+30 мин») и контекст экрана справа вверху («Пятница · 21:30», «Анализ · 28.09»). Бейдж нельзя нажать — если по нему что-то открывается, это тег или кнопка.

.s1-badge · .s6-badge · .s3-badge

По тяжёлым дням ищем, что мешает

Подсказка системы

Фраза, которую говорит приложение, а не данные. Всегда начинается со звёздочки цветом Lagoon: «По тяжёлым дням ищем, что мешает». Без звёздочки читатель принимает её за подпись к полю.

.s6-hint + .s6-sparkle

15

Карточки и плитки

Карточка — стекло на всю ширину 353. Плитка — половина, 170,5, и всегда в паре. Одна главная цифра на штуку.

Сон

Ч

М

глубже обычного

+30 мин

Плитка метрики · 170,5×152

Радиус 28, стекло 50 %. Заголовок 17/300 на 20,20; значение матрицей по центру; подпись 11,5/400 внизу на 118. Внутри плитки живёт мягкая засветка под overflow:hidden — она и красит плитку в цвет метрики.

.s1-tile · .s1-sleep-glow

Главное за неделю

Сон стал ровнее — на 30 минут дольше и без поздних отбоев

Часы · Самочувствие

Карточка-инсайт · 353×132

Радиус 32. Единственная с тёплой тенью rgba(255,199,90,.25) — это и делает её главной на экране. Структура: бейдж «Главное за неделю», фраза 17/300 на две-три строки, источник «Часы · Самочувствие» внизу. Цифр внутри нет совсем: инсайт — это предложение, а не замер.

.s4-card [229:693]

HRV

мс

в норме

Плитка-метрика · 170,5×148

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

.s4-card [229:1114]

Как прошёл день?

21:30

%

тяжело

отлично

Шкала настроения · 353×128

Единственная карточка с заливкой во всю ширину: linear-gradient(90deg,#a9bdb2,#cfe0d2 25%,#ffe2b0 50%,#ffc75a 75%,#ff9a5c). Указатель — треугольник 7×8, единственный острый элемент системы. Подписи «тяжело» и «отлично» — 11/400 цветом #3d4a45, не secondary: на градиенте он теряется.

.s6-card · .s6-pointer

Фазы · Сб, 3 окт

чаще просыпался

глубокий

быстрый

лёгкий

пробуждения

Карточка фаз сна · 353×140

Радиус 32. Четыре полосы по 10 px с радиусом 2,5 — длина полосы пропорциональна длительности фазы, цвет берётся из палитры данных. Значения матрицей шагом 2, подписи фаз 11/400. Бейдж-комментарий справа вверху объясняет отклонение словами, а не цветом.

.s5-card · .s5-pbar · .s5-badge

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

Норма 130–160 г/л · Сдают утром натощак

Гемоглобин
Как поднять
Что есть
Когда пересдать

Поповер · 361×257

Открывается поверх затемнения rgba(20,33,28,.22) + blur(4). Фон почти непрозрачный — .96, иначе сквозь текст видно график. Структура жёсткая: тег показателя слева вверху, крестик справа, объяснение 15/400, норма и условия сдачи 12/500 secondary, внизу до трёх действий-ссылок.

.s3-pop · .s3-dim

16

Строки и списки

Список показателей — самый плотный элемент продукта: в одной строке высотой 26 px помещаются тег, число, единица, состояние и шеврон.

Витамин D

нг/мл

ниже

Ферритин

нг/мл

ниже

Гемоглобин

г/л

норма

ТТГ

мЕд/л

норма

Список показателей

Шаг строки — 56 px. Колонки встают по правому краю: значение матрицей заканчивается на 229, единица 12/400 начинается там же, состояние на 277, шеврон на 317. Поэтому у значений разной длины разные left — это не ошибка, а выравнивание вправо без flex. Состояние — одно слово: «ниже», «в норме», «выше». Цвет — #e8742e или #1fa59a.

.s2-list · .s2-num · .s2-unit · .s2-state · .s2-chev

Шаги

из 9000

Блок метрики

Повторяется трижды подряд: шаги, глюкоза, пульс. Внутри — заголовок 15/400, значение матрицей, мини-график и подпись «из 9000». Три одинаковых блока подряд допустимы только потому, что у каждого свой тип графика; четыре одинаковых уже читаются как стена.

.s4-card [229:1235]

Кофе до 14:00 → глубже сон

Эксперимент подтвердился · стало привычкой

Строка-итог

«Проверили», «Дальше · месяц» — сводные строки без графика. Кегль 13/400, цвет secondary, слева иконка 14×14. Это подпись к блоку выше, а не отдельный блок: своего фона у неё нет.

.s4-card [229:1598]

17

Графики и данные

Графиков четыре типа, и ни один не повторяет другой: история показателя, столбики, гипнограмма, мини-график в блоке. Цвет в них кодирует значение, а не серию.

История

норма от 30

норма от 130

05.10.24

Helix

12.03

Гемотест

08.07

KDL

15.01

Инвитро

28.09

Инвитро

03.24

Helix

11.24

KDL

06.25

Гемотест

28.09

Инвитро

02.24

Helix

09.24

Helix

03.25

KDL

12.25

Гемотест

28.09

Инвитро

История показателя

Сетка — 52 точки 2×2 с шагом 6 px, цвет #14211c с альфой 8 %: это «норма», а не разлиновка. Лента тренда рисуется тремя слоями — свечение blur(11) с opacity .55, мягкий blur(4) с .7 и чёткая линия. Точки-маркеры с подписями значений стоят только там, где есть замер. Подписи дат и лабораторий — 11/400 secondary.

.s3-chart · .s3-nd · .s3-layer-glow

Сон за неделю

+30 мин к прошлой

ч

м

прошлая ночь

7:05

Пн

8:06

Вт

6:40

Ср

7:20

Чт

8:18

Пт

6:48

Сб

7:42

Вс

7:24

4:36

8:24

7:05

4:36

5:12

8:54

8:06

8:12

4:06

9:06

6:40

5:06

5:30

8:36

7:20

7:48

4:48

9:12

8:18

4:54

5:54

8:48

6:48

6:36

5:06

9:00

7:42

скачет на 3 часа

−2 ч 40 м до цели

все ночи в цели

+30 мин к прошлой

Столбики по дням

Семь столбиков с радиусом 8, подпись дня под каждым. Цвет кодирует попадание в цель: бирюза #1bae9e — в цели, янтарь — ниже, нейтральная подложка — обычный день. Подпись времени внутри столбика, а не над ним: иначе семь подписей дают вторую строку шума.

.s4-card [229:702]

Ночь

23:18 – 07:00

23:18

01:00

03:00

05:00

07:00

Глубокий сон — в первые 3 часа, как и должно быть

Гипнограмма

Ступенчатая лента фаз по времени. Четыре уровня, переходы вертикальные. Подписи фаз слева, время — снизу. Цвет фазы постоянен по всему продукту: тот же цвет в карточке фаз и в легенде.

.s5-card [229:1682]

Показание на графике

Значение всегда матрицей, подпись оси — обычным текстом. Один шаг на один уровень иерархии: 5,2 — герой экрана, 4 — значение в карточке, 2 — значение в строке. Смешивать шаги внутри одной карточки нельзя: две матрицы разного шага рядом читаются как разные приборы.

шаг 2 · 4 · 5,2 · 7

Правила графиков

  • Осей нет. Ни одной линии оси в продукте. Шкалу задаёт сетка из точек или подписи под столбиками.
  • Норма — это фон, а не линия. Диапазон нормы показан разреженной сеткой точек или заливкой с альфой не выше 8 %, пунктирной линией — никогда.
  • Цвет = значение. Серий в графиках Sola нет, поэтому категорийной палитры тоже нет. Если понадобится сравнить две серии, их разводят по двум графикам.
  • Подпись стоит у точки, а не в легенде. Легенды в продукте нет ни одной.
  • Пустой график не рисуется. Нет замеров — показываем пустое состояние с текстом, а не пустую сетку.

18

Формы и ввод

В шоуриле форма одна — поле заметки. Эти компоненты собраны под ближайшие экраны роадмапа: онбординг, ручной ввод анализа, настройки напоминаний. Геометрия и стекло взяты у продукта дословно.

Пара слов, если хочется

Голова с утра, мало спал

0 / 200

6 / 200

12 / 200

18 / 200

24 / 200

Поле заметки — образец из продукта

353×104, радиус 24, стекло 50 % с blur(14) и общей тенью. Плейсхолдер — тот же кегль, что и текст (15/400), цветом secondary: поле не должно выглядеть пустым полем ввода, оно должно выглядеть местом для фразы. Счётчик символов в правом нижнем углу, 11/500. Все остальные поля ниже повторяют эти числа.

.s6-field · .s6-typed
Показатель
Значение Норма 30–100 нг/мл

Поле ввода

Высота 52 — как у большой кнопки, радиус 10, паддинг 16/20. Подпись сверху, 11/500 CAPS с разрядкой .04em, цветом secondary. Подсказка снизу, 13/400. Плейсхолдер с opacity .72, не светлее: на туманном фоне бледный плейсхолдер пропадает.

.f-input · .f-label · .f-hint
Витамин B12 Ниже нормы 190–900 пг/мл

Поле с ошибкой

Кромка и текст — --tag-mineral #b8452c, заливка того же цвета с альфой 5 %. Ярко-красного тут нет: в Sola отклонение — это повод, а не авария. Сообщение всегда под полем и всегда объясняет, какое значение ожидалось.

.f-err · .f-msg.bad
Заметка 47 / 200

Текстовая область

Радиус 24 — как у карточки, не 10: большое поле подчиняется правилу «чем крупнее, тем круглее». Минимальная высота 104, растёт вниз. Счётчик справа внизу, появляется только когда есть лимит.

.f-area · .f-count
Лаборатория

Селект

Та же коробка, что у поля, плюс шеврон 16×16 справа на 18 px, цветом #7f8d87. Нативная стрелка снимается appearance:none — иначе на десктопе появится системный треугольник, которого в Sola нет.

.f-select
Напомнить пересдать Добавить в календарь Утром, 9:00 Вечером, 21:00

Чекбокс и радио

22×22, кромка 1,5 цветом чернил с альфой 26 %. Включённый чекбокс — сплошные чернила и белая галочка (та же, что в чипсе). Радио не закрашивается целиком: кромка окрашивается, внутри точка 10 px. Подпись 15/400, зазор 10.

.f-box · .f-dot
Синхронизация с Health Семейный доступ

Переключатель

52×30, ручка 24 белая с мягкой тенью. Включённый — фон чернилами, не бирюзой: бирюза в Sola означает «в норме», а не «включено». Переключатель меняет состояние сразу, без кнопки «сохранить».

.f-switch

Кнопки формы

Порядок слева направо: главное, вторичное, отказ. «Пропустить» — без фона, подпись secondary и кромка 14 %: в Sola отказ никогда не выглядит как ошибка.

.b-prim · .b-sec · .b-ghost

Правила форм

  • Подпись над полем, подсказка под полем. Плейсхолдер не заменяет подпись: он исчезает при вводе, и пользователь теряет контекст.
  • Ошибка объясняет ожидание. Не «неверное значение», а «норма 190–900 пг/мл».
  • Проверка после ухода из поля, а не на каждом символе. Пока человек печатает, поле нейтральное.
  • Цифры в полях — обычным шрифтом. Матрица только для сохранённых показаний. Поле ввода — это ещё не измерение.
  • Высота поля равна высоте кнопки. 52 px. Форма из поля и кнопки должна выглядеть как одна строка, разрезанная пополам.

19

Состояния и отклик

Чем мягче интонация, тем важнее, чтобы отклик был мгновенным. Sola не ругается — значит, она обязана подтверждать.

Отметка сохранена

Тост

Стекло blur(24) без заливки-цвета, радиус 10, 13/400. Живёт 2,5 секунды над таб-баром, кнопки закрытия нет. Иконка слева — только галочка; иконки «ошибка» в тостах нет, ошибка идёт в поле.

.toast
Напомним 13 ноября

Тост-подтверждение действия

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

.toast.dark
Анализов пока нетСфотографируй бланк — распознаем сами

Пустое состояние

Иконка 26 в стеклянном квадрате 56×56, заголовок 17/300, пояснение 13/400 secondary, действие. Иллюстраций в Sola нет: пустой экран не должен быть праздником, он должен быть коротким.

.empty

Загрузка

Скелет повторяет форму будущего контента: блок под заголовок, блок под значение, блок под подпись. Переливается слева направо за 1,4 с. Спиннер на весь экран в продукте не используется — только внутри кнопки.

.skel
Синхронизировано минуту назад Не удалось прочитать бланк

Сообщения

Одна строка 13/400 с иконкой 14×14. Успех — Lagoon #1fa59a, проблема — #b8452c. Баннеров во всю ширину с заливкой в Sola нет: цветная плашка на туманном фоне выглядит как чужой элемент.

.f-msg.good · .f-msg.bad

Сон

Сон

Нажатие и недоступность

Нажатие — scale(.97) за 120 мс с ease-out, без изменения цвета. Недоступность — opacity:.35 на всём элементе: система не держит отдельных «серых» вариантов ни у одного компонента.

scale(.97) · opacity:.35

20

Доступность

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

ПараКонтрастНормаЗамечание
#14211c на #e3ebe5 — основной текст13,9 : 1AAA Запас огромный, можно опускать вес до 200 на крупном кегле.
#5e6b66 на #e3ebe5 — подписи5,2 : 1AA Проходит на 11 px при весе 500. На весе 300 — уже нет, поэтому мелкое всегда 400–500.
#ffffff на #14211c — кнопка14,4 : 1AAA—
#c98a00 на подложке .18 — тег витамина4,6 : 1AA Самый слабый тег. Опускать альфу подложки ниже .18 нельзя.
#1fa59a на #e3ebe5 — Lagoon2,8 : 1✕ Не проходит. Поэтому Lagoon используется только на иконках и линиях графика, никогда на тексте мельче 17 px.
#3d4a45 на градиенте шкалыот 4,8 до 8,1AA Подписи «тяжело» и «отлично» стоят на краях градиента, где он самый светлый. Сдвинуть их к центру — потерять контраст.
  • Зона нажатия — 44×44, даже если элемент 26 px. Тег, бейдж и шеврон добирают площадь прозрачным паддингом, а не увеличением.
  • Состояние не кодируется только цветом. «Ниже нормы» — это слово «ниже» плюс цвет. Цветной столбик всегда подписан числом.
  • Точечные цифры дублируются в aria-label. Матрица — это SVG из сорока прямоугольников; без подписи скринридер прочитает её как ничто.
  • Декоративный SVG — aria-hidden="true". В вёрстке сцен так и сделано у всех иконок и засветок.
  • prefers-reduced-motion обязателен. Каждый файл сцены заканчивается блоком, который гасит анимации и оставляет элементы в видимом состоянии.
  • Фокус виден. У полей — кольцо 0 0 0 3px rgba(31,165,154,.16). Снимать outline без замены нельзя.

21

Чего не делать

Каждый пункт — ошибка, которая уже случалась на этом проекте или была явно запрещена в брифе.

Два тёплых пятна на экране

Золотая засветка указывает на главное действие дня. Если их две, глаз не знает, куда идти, и экран становится просто красивым.

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

Красный на цифре

«Вне нормы» красным превращает трекер в медкарту. В брифе это записано прямо: «без тревожного красного на любой цифре».

Как надо: охра #c98a00 или #e8742e и слово «ниже». Красный #e34237 — только заливкой с альфой не выше .18.

Белая карточка

Чистый #ffffff на туманном фоне выглядит как вырезанный из другого макета лист. В направлении B записано: карточки чуть темнее фона, а не белее.

Как надо: --surface-card — белый с альфой 50 %.

Чёрная тень

rgba(0,0,0,.12) под стеклом даёт грязно-серый ореол: фон зелёный, и нейтральная тень на нём читается как пятно.

Как надо: 0 14px 40px -10px rgba(78,125,110,.12) — эвкалипт.

Стекло внутри стекла

Вложенный backdrop-filter размывает уже размытое, край внутреннего элемента теряется, на телефоне падает частота кадров.

Как надо: внутри карточки — плашки --surface-plate и подложки тегов через currentColor.

Единицы матрицей

«нг/мл», «ч», «мин» в точечном наборе нечитаемы: в матрице 5×6 нет кириллицы, и буквы приходится рисовать приблизительно.

Как надо: цифры — матрица, единицы — Geologica 11/400 цветом secondary.

Произвольный шаг матрицы

Шаг 3,7 px даёт дробные координаты точек и мыло на ретине. Все точки в продукте стоят на целой сетке.

Как надо: 2 · 4 · 5,2 · 7. Четыре значения на всю систему.

Проценты в интерлиньяже

Figma отдаёт «100 %», но на 11-пиксельном тексте это 11 px, а в макете 14. Подписи уезжают на три пикселя, и строка списка перестаёт выравниваться.

Как надо: интерлиньяж в пикселях — 13, 14, 15, 16, 19, 21.

Маска без overflow:hidden

Приём «шторка» держится ровно на одном свойстве. Без него содержимое просто выезжает за границы карточки и видно весь ход анимации.

Как надо: у каждой .sN-mask обязательно position:absolute; overflow:hidden.

Копия блока анимации на каждую точку

В сцене 3 пятьдесят три точки. Пятьдесят три одинаковых правила animation — это 40 КБ CSS и гарантированное расхождение при правке.

Как надо: одно правило на класс плюс nth-child или CSS-переменная сдвига.

Второй шрифт

В мудборде были Geist Mono для подписей и Bitcount для цифр. Geist Mono не прижился: ради трёх слов он тянет ещё один файл и ломает ритм строки.

Как надо: Geologica на весь интерфейс, матрица — на цифры.

Нейтральный серый

#888 или #f5f5f5 на зелёном фоне выглядят грязными. В Sola нет ни одного нейтрального серого — второй уровень текста это зелёный #5e6b66.

Как надо: все «серые» — чернила #14211c с альфой.

Песочница выше продукта

Ошибка этого документа, а не продукта. Если блок песочницы поставить перед CSS продукта, при равной специфичности побеждает продукт — и образцы молча разъезжаются. Увидеть это можно только глазами, на рендере.

Как надо: оболочка → продукт → песочница. Порядок зашит в build_ds.py.

offsetTop в скроллспае

Тоже про документ. Разделы лежат внутри main внутри грида, и offsetTop считается от offsetParent, а не от страницы. Подсветка меню уезжает на величину верхнего поля раскладки и ещё немного.

Как надо: getBoundingClientRect().top + scrollY.

22

Токены

Всё, что можно пересчитать, собрано в таблицы. Колонка «раз» — сколько раз значение встречается в настоящем CSS продукта.

Цвет

ТокенЗначениеРазНазначение
--surface-card#ffffff8011Карточка, плитка, аватар
--surface-tabbar#ffffff9e5Только таб-бар
--surface-segment-active#ffffffd93Только плашка сегмента
--surface-plate#14211c0f3Вторичная кнопка, невыбранный чипс
--text-primary#14211c62Основной текст, иконки
--text-secondary#5e6b6649Подписи, единицы, неактивное
--text-on-accent#ffffff5Текст на чернилах
--accent-primary#14211c17Фон главной кнопки и «плюса»
--tag-vitamin#c98a003Витамины
--tag-mineral#b8452c3Минералы, ошибка формы
--tag-hormone#5a4bc41Гормоны
--tag-blood#c23e621Кровь
Mist нет переменной#e3ebe5 / #eef2ec6Фон экрана и кадра
Lagoon нет переменной#1fa59a67Буква аватара, иконки, «в норме»
Data / Norm нет переменной#1bae9e272Основной цвет графиков
Sun нет переменной#ffc75a48Засветка, ручка дуги, тёплая тень
Apricot нет переменной#ff9a5c—Акцентная тень, правый край шкалы
Eucalyptus только в тениrgba(78,125,110,.12)13Единственная тень системы

Типографика

КегльРазВесИнтерлиньяжРоль
10 px33400 / 50013 pxПодписи вкладок и осей. Минимум системы.
11 px8550014 pxБейдж, единица, дата. Самый частый кегль.
12 px20400 / 50015 pxЕдиница в строке, состояние, норма в поповере.
13 px22400 / 50013–16 pxТег, чипс, сегмент, кнопка малая, подсказка.
15 px24400 / 50019–22 pxТекст поповера, поле, кнопка большая.
17 px9300 / 60021 pxЗаголовок карточки; 600 — только часы статус-бара.
28–30 px5200–3001,18–1,21Фраза дня и заголовок экрана.
38–48 px220046–58 pxКрупное значение на экране сна. Вынужденное.

Геометрия

ГруппаЗначенияПравило
Ширина393 · 353 · 170,5Экран, контент, половина пары.
Отступ20 · 16 · 12 · 10 · 8 · 620 — поле экрана и карточки, остальные — внутри компонента.
Высота26 · 34 · 40 · 44 · 52 · 64Тег · чипс · малое · сегмент · кнопка · таб-бар.
Радиус40 · 32 · 28 · 24 · 16 · 14 · 10 · 9 · 8 · 620–30 % короткой стороны; вложенный меньше внешнего на величину отступа.
Радиус точки1,25 · 2 · 2,5 · 1,1648Матрица цифр и полосы фаз. В интерфейсе не используются.
Шаг матрицы2 · 4 · 5,2 · 7Точка = 0,7 шага, радиус точки = 0,32 точки, адванс = 6 шагов.
Иконка14 · 16 · 20 · 22В теге · в строке · подсказка · таб-бар и кнопки. Stroke 1,3–1,7.

Свет, стекло, тень

ТокенЗначениеРазГде
Размытие карточкиblur(14px)26Всё крупное стекло
Размытие мелкогоblur(28px)8Аватар, сегмент
Размытие пилюлиblur(24px)4Пилюля
Размытие поповераblur(10px)2Поповер
Размытие затемненияblur(4px)2Подложка модалки
Размытие фонаblur(40px) · blur(44px)25Атмосферные пятна
Тень Glass/Card0 14px 40px -10px rgba(78,125,110,.12)10Все карточки
Тень Glass/Accent0 14px 40px -10px rgba(255,199,90,.25)1Карточка-инсайт
Тень пилюли0 4px 12px rgba(0,0,0,.3), 0 8px 28px rgba(255,199,90,.3)2Пилюля
Ореол точки0 0 8px rgba(255,199,90,.45)4Активный маркер графика
Затемнениеrgba(20,33,28,.22)47Подложка модалки

Движение

ЗначениеРазПрименение
38.5s linear infiniteвсёЕдиный цикл шоурила, общий старт
ease-out312Появление
cubic-bezier(.4,0,1,1)228Уход
ease-in-out205Непрерывное движение
cubic-bezier(.22,1,.36,1)172Главный вход экрана
linear(…) 51 стоп257Пружина из Figma, переносится дословно
step-end66Смена состояния без промежуточных кадров
opacity: 0 / 11749Основной способ показать и спрятать

Непрозрачность

ЗначениеСмысл
.18Подложка тега через currentColor. Минимум, при котором тег читается.
.35Недоступное состояние и приглушённый слой графика.
.55Слой свечения под линией графика.
.7Средний слой свечения, blur(4).
0 / 1Всё остальное. Промежуточных ступеней прозрачности в системе нет.

23

Как пользоваться

Порядок действий, когда приходит новый экран.

  • 1. Найди экран-аналог среди шести. Сводка, список, карточка одного показателя, длинная статистика, график, форма. Седьмого типа экрана в Sola пока нет — если задача не ложится ни на один, это повод обсудить, а не изобретать.
  • 2. Поставь каркас. Статус-бар, боковое поле 20, таб-бар или иконка-кнопка «назад». Рабочая ширина 353.
  • 3. Напиши фразу. Экран начинается с предложения, а не с цифры. Если фразы нет, экран ещё не придуман.
  • 4. Выбери компоненты из каталога (раздел 11). Под названием каждого стоит реальный селектор — по нему элемент находится в scene-N.css.
  • 5. Поставь одну засветку. Золото над главным действием, остальное холодное.
  • 6. Сверься с разделом 21. Четырнадцать способов сломать систему, все проверены на этом проекте.
Что ищешьКуда идти
Точное значение цветаРаздел 04 и сводная таблица в 22
Кегль и вес для подписиРаздел 05, таблица ролей
Как собрать числоРаздел 06, шаг и пропорции матрицы
Радиус у нового элементаРаздел 07, правило «20–30 % короткой стороны»
Как сделать стеклоРаздел 08, три свойства разом
Готовый компонентРаздел 11, первая колонка — живой образец
Форма, которой ещё нет в продуктеРаздел 18
АнимацияРаздел 10 — правила; сами кейфреймы в scene-N.css

Как устроен этот файл

  • Собирается скриптом из частей. ds/p1.html — оболочка и разделы 01–10, ds/p2a.html — каталог, ds/p2.html — разделы 12–23, ds/build_ds.py — сборка. Правка идёт в часть, потом пересборка: собранный sola-ds.html руками не трогают, следующая сборка затрёт.
  • Архив скилла собирается тем же прогоном. ds/build_skill.py кладёт skills/sola-design-system.zip рядом с документом — ровно так же, как у остальных кейсов. Внутрь идут SKILL.md, справочник, шаблон, весь CSS продукта, скрипт формы углов, стоп-кадр и разметка шести экранов. Вес на кнопке подставляется из только что собранного файла, руками его не пишут.
  • Образцы берутся из продукта. В частях стоит <!--FRAG 5 229:1812-->, сборщик подставляет сюда настоящий фрагмент разметки из scene-5.html. Стили приходят из scene-N.css, вставленного целиком. Поменялся продукт — поменялся образец.
  • Порядок стилей. Оболочка → CSS продукта → песочница. Песочница сбрасывает абсолютное позиционирование корней образцов и гасит анимации; если поставить её выше продукта, она молча проиграет.
  • Чего в файле нет. Кейфреймов — 889 наборов, около 600 КБ, в статическом документе они ничего не рисуют. Всё остальное из shell.css и scene-1…6.css вставлено дословно.
  • Документ живой. Если правило в продукте изменилось, а образец здесь остался прежним — документ начинает врать. Пересобирать после каждой правки сцен.