Lumika / Foundations

Onest · Desktop 1440 · Mobile 390 · Шаг отступов 4 px

Colors

brand/default#676DFF

bg/soft#F1EEFF

bg/page#F8F7FC

bg/surface#FFFFFF

text/primary#17152B

text/secondary#6F6A83

border/default#E5DFFF

success#25A46F

warning#F5A623

Typography / Onest

Display/Desktop · 66История начинается здесь

Heading/Page · 40История начинается здесь

Heading/Mobile · 32История начинается здесь

Heading/Card · 24История начинается здесь

Body/Large · 18История начинается здесь

Body/Default · 16История начинается здесь

Label/Default · 14История начинается здесь

Caption/Default · 12История начинается здесь

Layout & usage

Отступы: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96
Радиусы: 8 · 12 · 16 · 24 · 32 · 40 · 64 · pill. Кнопки ≥44 px; основной размер 48–56 px.

Загрузка и движение

Взаимодействие — 150 мс, появление — 260–320 мс. Кривая одна на весь интерфейс. Системную настройку «меньше движения» уважает вся страница разом, отдельных медиазапросов писать не нужно.

Скелетоны

<Skeleton />Прямоугольник: обложка, аватар, кнопка.

<SkeletonText />Строки текста, последняя короче.

Море букв

Девочка плывёт по морю из букв и собирает из них своё имя.

Выбрать сюжет

Скелетон повторяет геометриюВысота до и после совпадает, поэтому при подстановке данных ничего не прыгает.

Появление

animate-rise320 мс, снизу на 8px. Контент после загрузки.

animate-fade-in260 мс. Подсказки, пустые состояния, подмена подписи.

animate-pop200 мс, из масштаба 0.96. Мелкое и появившееся по нажатию.

skeletonЗаливка #EEEAFB и бегущий блик 1.6 с, пока данных нет.

stagger(i)Волна по 60 мс: список проявляется друг за другом.

Кривая ease-out-soft

--ease-out-softcubic-bezier(.22, 1, .36, 1) — быстрый старт, мягкая остановка.

ease-out-softlinear — для сравненияОдна и та же дистанция за 700 мс. Мягкая кривая уходит вперёд сразу и притормаживает у цели — движение читается как «подъехало».