Дизайн-система
Токены, шкала и правила, по которым собран лендинг
Всё на этой странице выводится из design-system/tokens.json и из отчёта аудита контраста. Компоненты цветов и отступов не хардкодят — правка идёт в токены, дальше npm run tokens.
Цвет
111 пар проверено · провалов: 0
Палитра из брифа: кремовый фон, тёплый жёлтый и мятный акценты, коричневый текст. Жёлтый и мятный работают только заливкой — на креме они дают 1.63:1 и 1.87:1. Для тех же акцентов голосом текста есть отдельные токены amberInk и mintInk.
- Кремовый#FBF3E7Фон страницы
- Кремовый приподнятый#FFFAF2Карточка
- Кремовый утопленный#F2E7D6Инпут, трек
- Тёплый жёлтый#F2B84BАкцент 1 · заливка
- Жёлтая линия#BE8114Обводка · 3:1
- Жёлтый текстом#8A5A12Акцент голосом текста
- Мятный#8FBFA8Акцент 2 · заливка
- Мятная линия#55907AОбводка · 3:1
- Мятный текстом#2F6B52Акцент голосом текста
- Основной текст#3A2B1EТекст на креме
- Вторичный текст#756654Подзаголовки
- Тёмный фон#241C14Тёмная тема и блоки
| Применение | Текст | Фон | Контраст | Порог |
|---|---|---|---|---|
| Тёмный текст на жёлтой кнопкеСветлая тема | #3A2B1E | #F2B84B | 7.60:1 | 4.5:1 |
| Тёмный текст на жёлтой кнопке в hoverСветлая тема | #3A2B1E | #D99B2B | 5.62:1 | 4.5:1 |
| Тёмный текст на мятной подложкеСветлая тема | #3A2B1E | #8FBFA8 | 6.60:1 | 4.5:1 |
| Тёмный текст на мятной подложке в hoverСветлая тема | #3A2B1E | #6FA68C | 4.86:1 | 4.5:1 |
| Тёмный текст на приглушённом мятномСветлая тема | #3A2B1E | #9ECBB4 | 7.55:1 | 4.5:1 |
| Кольцо фокуса на жёлтой кнопкеСветлая тема | #3A2B1E | #F2B84B | 7.60:1 | 3.0:1 |
| Кольцо фокуса на мятной подложкеСветлая тема | #3A2B1E | #8FBFA8 | 6.60:1 | 3.0:1 |
| Тёмный текст на жёлтой кнопкеТёмная тема | #3A2B1E | #F2B84B | 7.60:1 | 4.5:1 |
Запрещённые сочетания
- Жёлтый #F2B84B как ТЕКСТ на креме1.63:1— запрещено — жёлтый только заливка, для текста есть `amberInk` `#8A5A12`
- Мятный #8FBFA8 как ТЕКСТ на креме1.87:1— запрещено — мятный только заливка, для текста есть `mintInk` `#2F6B52`
- Белый текст на жёлтой кнопке1.79:1— запрещено — на жёлтом только коричневый текст `#3A2B1E`
- Кремовый текст на мятной подложке1.87:1— запрещено — на мятном только коричневый текст
- Жёлтое кольцо фокуса на креме1.63:1— запрещено — на светлой теме кольцо фокуса коричневое
- Вторичный #7A6B58 на утопленной подложке #F2E7D64.54:1— запрещено — внутри инпутов и треков подписи берут `fg.tertiary` `#6B5D4B`
- Жёлтый акцент как ТЕКСТ поверх съёмки под плашкой3.22:1— запрещено — поверх кадра только светлый текст; жёлтому нужна собственная плашка
Типографика
Nunito · Inter · табличные цифры
Заголовки — Nunito: округлый дружелюбный гротеск с кириллицей (Quicksand и Poppins из брифа кириллицы не имеют). Основной текст — Inter. Цифры состава набираются тем же Inter с font-variant-numeric: tabular-nums: моноширинный шрифт сделал бы блок техническим, а табличные цифры дают точность и не дёргают ширину при пересчёте.
- display-xlЗаголовок heroМиска, которую собрал ветеринар
- display-lЗаголовок секцииЧто внутри и откуда это приехало
- display-mЗаголовок шага квизаСколько питомец весит?
- heading-lЗаголовок карточкиЛабораторный контроль
- heading-mПодзаголовокРазбивка рациона
- body-lЛидОтвечаете на семь вопросов о питомце — получаете рацион.
- body-mОсновной текстИндейка — лёгкий белок с полным аминокислотным профилем.
- body-sМелкий текстФиле и бедро охлаждённой индейки, 18 часов от фермы.
- labelПодпись поля и кнопкиПодобрать рацион
- captionСноскаСтавропольский край, ферма «Юрьевская»
- eyebrowНадзаголовокСостав и производство
Скругления и поверхности
Мягкость как решение, а не украшение
Шкала скруглений начинается с 8 пикселей — там, где скругление уже читается. Объём даёт неоморфная пара теней: тёплая тень снизу-справа и световой блик сверху-слева. Тонкая линия по краю здесь не обводка, а граница света: без неё карточка на кремовом фоне теряет край.
- xs · 8px
- sm · 12px
- md · 16px
- lg · 22px
- xl · 28px
- 2xl · 36px
- 3xl · 48px
- Подушкаshadow-soft
- Приподнятаshadow-lifted
- Утопленаshadow-pressed
- Плоскаяshadow-flat
- След лапы · veil 0.014
- Крупка · veil 0.02
- Тёмный блок · surface-deep
Компоненты
Кнопки, бейджи, поля
Иконография
38 знаков · сетка 24×24
Простые дружелюбные контуры вместо готового icon-pack: лапка, миска, косточка и рыбка как вспомогательный графический язык рядом с фотографией. Обводка одной толщины, углы круглые — та же интонация, что у скруглений в интерфейсе.
- paw
- bowl
- bone
- fish
- snow
- chat
- cat
- dog
- heart
- check
- cross
- stomach
- alert
- fur
- scale
- joint
- kidney
- spine
- sleep
- bolt
- medal
- home
- tree
- poultry
- meat
- grain
- question
- leaf
- shield
- truck
- clock
- star
- sun
- moon
- motion
- arrow
- microscope
- pause
Движение
Все анимации выключаются одним переключателем
Бриф требует уважать prefers-reduced-motion. В системе это сделано тремя состояниями: «как в системе», «выключено», «включено» — последнее нужно тем, у кого настройка ОС стоит по другой причине. Ни одна анимация не несёт смысла в одиночку: при выключенном движении шаги квиза меняются мгновенно, план появляется без сдвига, а отклик карточки остаётся тенью.
- instant80ms
- fast140ms
- base220ms
- slow360ms
- slower560ms
- scene900ms
- standardcubic-bezier(0.2, 0, 0, 1)
- outcubic-bezier(0.16, 1, 0.3, 1)
- incubic-bezier(0.7, 0, 0.84, 0)
- softcubic-bezier(0.34, 1.26, 0.64, 1)
- wagcubic-bezier(0.45, 0, 0.55, 1)