Токены и компоненты
Всё, из чего собирается интерфейс. Значения ниже прочитаны из настоящего CSS прямо сейчас — измените ширину окна или переключите тему, и цифры пересчитаются.
Ни одного px в компонентах
Размер, отступ, радиус и тень берутся токеном. Для шрифта обязателен префикс length:.
Две темы, а не инверсия
В ночной теме нет холодных оттенков и ярких заливок. Проверяйте каждый компонент переключателем вверху.
Крупная область нажатия
Продуктом пользуются одной рукой, в темноте и на усталую голову. Мелких целей быть не должно.
Цвет
Сначала базовые палитры — они одинаковы в обеих темах. Ниже семантические токены: именно они меняются при переключении и именно их нужно использовать в компонентах.
Кремовый — Бумага детской книжки. Фон и поверхности дневной темы
--color-cream-50
--color-cream-100
--color-cream-200
--color-cream-300
Медовый — Цвет ночника. Основной акцент бренда, кнопки и выбранные состояния
--color-honey-200
--color-honey-300
--color-honey-400
--color-honey-500
--color-honey-600
--color-honey-700
Лавандовый — Сумерки. Второй акцент: иллюстрации, спокойные акценты
--color-dusk-200
--color-dusk-300
--color-dusk-400
--color-dusk-500
--color-dusk-600
--color-dusk-700
Мятный — Спокойствие и состояния «всё хорошо»
--color-mint-200
--color-mint-400
--color-mint-600
Коралловый — Тёплое предупреждение вместо агрессивного красного
--color-coral-200
--color-coral-400
--color-coral-600
Ночной индиго — Фон ночной темы вместо чёрного: мягче для глаз в темноте
--color-night-950
--color-night-900
--color-night-800
--color-night-700
--color-night-600
Семантические токены — переключаются вместе с темой
--color-surface
Фон страницы
--color-surface-raised
Карточки, поля ввода
--color-surface-sunken
Утопленные блоки, треки
--color-border-subtle
Рамки по умолчанию
--color-content
Основной текст
--color-content-muted
Пояснения
--color-content-faint
Подписи и мелочи
--color-accent
Акцент: кнопки, выбор
--color-accent-content
Текст на акценте
--color-accent-soft
Мягкая акцентная подложка
Типографика
Шкала крупнее обычной: текст читают в полутьме и часто на вытянутой руке. Отдельная шкала story — для текста самой сказки, его читают вслух.
--text-fluid-2xsсейчас —
Сказка на ночь
--text-fluid-xsсейчас —
Сказка на ночь
--text-fluid-smсейчас —
Сказка на ночь
--text-fluid-baseсейчас —
Сказка на ночь
--text-fluid-lgсейчас —
Сказка на ночь
--text-fluid-xlсейчас —
Сказка на ночь
--text-fluid-2xlсейчас —
Сказка на ночь
--text-fluid-3xlсейчас —
Сказка на ночь
--text-fluid-4xlсейчас —
Сказка на ночь
--text-fluid-5xlсейчас —
Сказка на ночь
--text-fluid-6xlсейчас —
Сказка на ночь
--text-fluid-storyсейчас —
Сказка на ночь
--text-fluid-story-lgсейчас —
Сказка на ночь
Отступы
Одна шкала на padding, margin и gap. Полоска показывает реальную ширину токена на текущем экране.
--spacing-fluid-3xs —--spacing-fluid-2xs —--spacing-fluid-xs —--spacing-fluid-sm —--spacing-fluid-md —--spacing-fluid-lg —--spacing-fluid-xl —--spacing-fluid-2xl —--spacing-fluid-3xl —Скругления
Округлые и мягкие: это детский продукт, острых углов в нём нет.
--radius-fluid-xs
—
--radius-fluid-sm
—
--radius-fluid-md
—
--radius-fluid-lg
—
--radius-fluid-xl
—
Тени
Тени тёплые, без серого — иначе интерфейс выглядит холодным даже в дневной теме.
--shadow-soft
Карточки в покое
--shadow-lifted
Наведение, выбранное
--shadow-floating
Модальные слои
--shadow-glow
Ореол ночника
Движение
Длительности и кривые. Всё движение отключается системной настройкой «уменьшить анимацию» — это уже учтено глобально.
Длительности
--duration-quick Отклик на нажатие
--duration-base Обычные переходы
--duration-slow Появление блоков
--duration-dreamy Медленные, «сонные» сцены
Кривые
--ease-gentleОсновная кривая
--ease-bounce-softЛёгкий отскок для появлений
Контейнеры
--container-fluid-xsУзкие формы
--container-fluid-smОдна колонка
--container-fluid-mdКонтент-страницы
--container-fluid-lgОсновная сетка
--container-fluid-xlШирокие экраны
--container-fluid-proseТекст сказки
Метки
Заливка считается от цвета поверхности, поэтому в ночной теме метки сами становятся приглушёнными.
Варианты
Размеры, точка-индикатор и иконка
Поля ввода
Подпись всегда видима, ошибка озвучивается сразу, у select — нативное системное колесо на телефоне.
Обычные состояния
Имя прозвучит в сказке — можно домашнее
Станет спутником героя
От возраста зависят длина сказки и словарь
Свой голос можно будет записать позже
Ошибки и ограничения
Без имени сказка получится чужой — напишите хотя бы одно слово
Выберите возраст, иначе сказка может оказаться слишком сложной
Пары предложений достаточно
Здесь помещается не больше 300 символов
Карточки-выбор
Ключевой элемент продукта. Вся карточка — кнопка, выбранное состояние отмечено рамкой, подложкой и галочкой сразу: цвета в темноте может не хватить.
Кому сегодня сказка
Одиночный выбор — карточки ведут себя как радиокнопки
Что важно сегодня
Множественный выбор — можно отметить несколько тем
Горизонтальная раскладка, средний размер и выключенное состояние
Прогресс генерации
Сказка собирается небыстро, и это нормально. Дышащий вариант нужен для долгого ожидания: под него легче ждать, чем под дёрганый спиннер.
Полоса с подписью этапа
Обычно занимает около минуты
Без известного срока
Иногда очередь занимает пару минут
Этапы
- Знакомимся с ребёнком
- Придумываем героя
- Пишем сказку
- Рисуем картинки
- Записываем голос
Пишем сказку
Можно выключить экран — сказка придёт уведомлением, когда будет готова
Пустые состояния
Пустой список — это начало, а не ошибка. Тон приглашающий, а не извиняющийся.
Здесь появятся ваши сказки
Первая займёт минуту: расскажите про ребёнка, выберите тему — и можно укладываться.
Ничего не нашлось
Попробуйте другое слово или посмотрите все темы целиком.
Ребёнок ещё не добавлен
Имя, возраст и пара слов о характере — этого хватит.
Сказка не сохранилась
Связь пропала на середине. Текст мы не потеряли — попробуйте ещё раз.
Карточки
Базовая поверхность интерфейса. Интерактивный вариант чуть приподнимается при наведении.
Обычная карточка
Поверхность по умолчанию: мягкая тень, крупный радиус, тёплая рамка.
Интерактивная
Наведите курсор — карточка приподнимется и подсветит рамку акцентом.
Утопленная с метками
Так выглядит карточка сказки в списке: метки сверху, название, пара строк описания.