Дизайн-система
Токены, стекло, шкала и сетка
Всё, из чего собран лендинг. Страница читает те же файлы, что и сборка: значения ниже не переписаны вручную, а взяты из design-system/tokens.json и отчёта об аудите контраста.
Аудит от 2026-09-24 · 185 проверок, из них 96 по стеклу · провалов: 0
Стекло
Главная поверхность системы и главный риск для контраста. У стекла нет собственного цвета: текст лежит на композите «оттенок с альфой поверх того, что под стеклом», а под стеклом ползают пятна градиента. Поэтому альфа — параметр доступности, а не вкуса.
Карточка
альфа 0.66
Карточки bento, блоки состава, отзывы
Плотное
альфа 0.78
Шапка, карточка результата, продукт
Утопленное
альфа 0.5
Зона загрузки, треки шкал, вложенные блоки
Одно и то же стекло над разными подложками
Самая узкая пара системы — «вторичный текст на стекле «карточка bento» · лавандовое пятно»: 5.15:1 при пороге 4.5:1. Любая правка палитры или альфы проверяется в первую очередь по ней.
Цвет
Палитра брифа плюс производные: у каждого акцента есть заливочный оттенок, линия с порогом 3:1 и «чернила» с порогом 4.5:1. Одному цвету все три роли не вытянуть — поэтому их три.
- veil#FBF5F8
- veil-raised#FFFFFF
- veil-inset#F3EAF1
- veil-edge#E7DAE6
- blush#F2C6D9
- blush-soft#F7DCE8
- blush-deep#E7A6C3
- blush-line#BE6E93
- blush-ink#A63A6B
- lilac#C9B8E8
- lilac-soft#E2D9F3
- lilac-deep#B199DC
- lilac-line#8C6CC6
- lilac-ink#5F44A8
- mint#B8E0D2
- mint-soft#D9F0E7
- mint-deep#93CEBA
- mint-line#4F8D77
- mint-ink#1F6B57
- ink#2E2733
- ink-soft#6B6275
- ink-muted#5A5265
- night#1B1620
- night-raised#2A2233
- night-inset#141018
- night-edge#3A3145
- night-deep#120E16
- mist#F5EEF7
- mist-muted#C9BFD4
- mist-faint#BDB2CB
Цвета параметров кожи
- hydration#1F6B57
- sensitivity#A63A6B
- texture#5F44A8
- barrier#2B5C80
Типографическая шкала
Все размеры — clamp от мобильного к десктопу, без единого брейкпоинта в разметке. Заголовки набраны Onest (кириллический аналог Poppins из брифа), текст — Inter с оптической осью.
- displayXlclamp(2.25rem, 1.2rem + 3.9vw, 5rem)lh 0.98tracking -0.015emwght 500Уход, собранный по вашей коже
- displayLclamp(2.25rem, 1.2rem + 3.9vw, 4.75rem)lh 1.02tracking -0.012emwght 500Уход, собранный по вашей коже
- displayMclamp(1.75rem, 1.2rem + 2.1vw, 3rem)lh 1.06tracking -0.01emwght 500Уход, собранный по вашей коже
- headingLclamp(1.25rem, 1.12rem + 0.55vw, 1.625rem)lh 1.26tracking -0.01emwght 600Уход, собранный по вашей коже
- headingM1.125remlh 1.34tracking -0.005emwght 600Уход, собранный по вашей коже
- headingS1remlh 1.4tracking 0emwght 600Уход, собранный по вашей коже
- bodyLclamp(1.0625rem, 1rem + 0.28vw, 1.25rem)lh 1.6tracking 0emwght 400Уход, собранный по вашей коже
- bodyMclamp(1rem, 0.95rem + 0.2vw, 1.0625rem)lh 1.62tracking 0emwght 400Уход, собранный по вашей коже
- bodyS0.9375remlh 1.58tracking 0emwght 400Уход, собранный по вашей коже
- label0.9375remlh 1.3tracking 0.005emwght 600Уход, собранный по вашей коже
- caption0.8125remlh 1.45tracking 0.005emwght 400Уход, собранный по вашей коже
- eyebrow0.8125remlh 1.2tracking 0.16emwght 600Уход, собранный по вашей коже
- metricclamp(2.25rem, 1.7rem + 2.2vw, 3.5rem)lh 1tracking -0.03emwght 60064 / 100 · 1,4 с
- metricS1.5remlh 1.1tracking -0.02emwght 60064 / 100 · 1,4 с
Bento-сетка
Шесть колонок, строка 7.5rem, зазор 1rem на мобильном и 1.5rem от планшета. Шесть, а не двенадцать: карточки крупные, и двенадцать колонок дают ложную свободу — половина сочетаний всё равно не собирается в ритм.
Компоненты
Кнопки, бейджи и шкалы анализа — в тех же состояниях, в которых они встречаются на странице.
выше средней
умеренная
выше средней
Контраст
Аудит — не отчёт постфактум, а гейт: npm run check и CI зовут его до сборки. Ниже — выжимка; полная таблица в design-system/contrast-report.md.
Границы, которые из этого следуют
- Минимальная альфа стекла над градиентом — 0.29 на светлой теме. В токенах взято 0.66: запас на зерно и на то, что пятно под карточкой движется.
- Над голым кадром той же паре понадобилась бы альфа 0.89 — то есть стекло должно перестать быть стеклом. Поэтому под съёмкой всегда лежит плашка.
- Розовый, лавандовый и мятный — заливки. Для текста существуют отдельные «чернильные» токены.
| Применение | Текст | Фон | Контраст |
|---|---|---|---|
| Основной текст на стекле «карточка bento» · чистый фон | #2E2733 | #FEFCFD | 14.14:1 |
| Вторичный текст на стекле «карточка bento» · чистый фон | #6B6275 | #FEFCFD | 5.66:1 |
| Розовый акцент на стекле «карточка bento» · чистый фон | #A63A6B | #FEFCFD | 5.98:1 |
| Лавандовый акцент на стекле «карточка bento» · чистый фон | #5F44A8 | #FEFCFD | 7.14:1 |
| Мятный акцент на стекле «карточка bento» · чистый фон | #1F6B57 | #FEFCFD | 6.23:1 |
| Основной текст на стекле «карточка bento» · розовое пятно | #2E2733 | #FCF3F7 | 13.27:1 |
| Вторичный текст на стекле «карточка bento» · розовое пятно | #6B6275 | #FCF3F7 | 5.32:1 |
| Розовый акцент на стекле «карточка bento» · розовое пятно | #A63A6B | #FCF3F7 | 5.61:1 |
| Лавандовый акцент на стекле «карточка bento» · розовое пятно | #5F44A8 | #FCF3F7 | 6.7:1 |
| Мятный акцент на стекле «карточка bento» · розовое пятно | #1F6B57 | #FCF3F7 | 5.85:1 |
| Основной текст на стекле «карточка bento» · лавандовое пятно | #2E2733 | #F4F0FA | 12.85:1 |
| Вторичный текст на стекле «карточка bento» · лавандовое пятно | #6B6275 | #F4F0FA | 5.15:1 |