Простота
Интерфейс понятный и не перегруженный. Пользователь быстро видит, что можно сделать дальше.
Обзор
Invert — это дизайн-система для разработки мобильных интерфейсов. Она объединяет правила интерфейса, визуальные стили и набор компонентов, чтобы команда могла создавать единый, понятный и предсказуемый пользовательский опыт.
Базовые стили
UI-компоненты
Паттерны
Доступность
Рекомендации
- Ускоряет разработку интерфейсов.
- Помогает держать единый стиль продукта.
- Снижает количество ошибок в дизайне и разработке.
- Упрощает масштабирование продукта.
Принципы
Предсказуемость
Компоненты и паттерны ведут себя одинаково во всех частях продукта.
Иерархия
Важные действия и блоки визуально выделяются и легко считываются.
Доступность
Интерфейсы остаются читаемыми, контрастными и удобными для всех пользователей.
Консистентность
Одинаковые задачи решаются одинаковыми элементами интерфейса.
Как пользоваться системой
Документация разделена на понятные разделы. Используйте её как практический справочник при проектировании и разработке.
Основы
Цвета, типографика, отступы и скругления.
Компоненты
Переиспользуемые элементы: кнопки, поля, карточки и другие блоки.
Паттерны
Готовые интерфейсные решения для типовых пользовательских сценариев.
Доступность
Правила, которые помогают делать интерфейсы удобными и понятными для всех.
Accessibility
Этот раздел задаёт мобильные принципы доступности для компонентов и паттернов Invert: читаемость, понятное взаимодействие, контраст и удобные touch-цели в light/dark темах.
Readable content
Текст и структура экрана должны быть читаемыми без зума и повторного сканирования интерфейса.
Clear interaction
Каждое действие понятно по подписи, состоянию и ожидаемому результату на мобильном экране.
Sufficient contrast
Текст, иконки и контролы сохраняют различимость в обоих темах и разных условиях освещения.
Accessible touch targets
Нажатия не требуют точного прицеливания: зона касания и отступы безопасны для пальца.
Core principles
Единая база для дизайна и разработки мобильного UI в Invert.
Clarity
Смысл экрана считывается за секунды. Пользователь понимает что можно сделать прямо сейчас.
Readability
Размеры текста и интервалы комфортны для чтения в движении. Критичные подписи не уходят в мелкий кегль.
Contrast
Ключевые элементы заметны на фоне, а статусы не теряются при смене темы.
Touch comfort
Кнопки и интерактивные элементы доступны без ошибочных нажатий в плотных сценариях.
Predictable behavior
Одинаковые действия ведут к одинаковому результату: состояния и переходы консистентны.
Assistive support
Экран можно пройти ассистивными технологиями без потери контекста и состояния.
Visual hierarchy
Разделяй primary и secondary действия, группируй связанные блоки и используй контраст/spacing для приоритета, чтобы не перегружать экран.
Good
- Primary CTA внизу экрана, secondary — текстовой кнопкой рядом.
- Блоки «профиль», «платежи», «безопасность» разделены отступами.
- Один доминирующий акцентный цвет на ключевом действии.
Bad
- Несколько одинаково ярких кнопок конкурируют за внимание.
- Карточки сливаются: нет ритма и визуальных групп.
- Критичные действия спрятаны среди второстепенных.
- Один экран — одна главная задача.
- Secondary действия визуально спокойнее primary.
- Сложные сценарии разбивай на шаги или секции.
Color and contrast
В Invert контраст проверяется для текста, контролов и состояний в light/dark. Цвет не используется как единственный сигнал.
Accessible examples
- Body текст с устойчивым читаемым контрастом к фону.
- Большой текст может иметь чуть мягче контраст, но остаётся читаемым.
- Interactive контролы визуально различимы в default/pressed/disabled.
- Success/Warning/Error используют semantic токены + текст статуса.
Inaccessible examples
- Серый текст на близком сером фоне.
- Disabled контрол пропадает и выглядит как «сломанный».
- Ошибка отмечена только красной линией без текста причины.
Contrast checklist
- Body текст: высокий и стабильный контраст.
- Large текст: допускается ниже, но без потери читаемости.
- Контролы: заметны как отдельные интерактивные объекты.
- Disabled: понятен статус, а не «исчезновение» элемента.
Typography and readability
Базовый mobile-текст держи комфортным (обычно от 16px), line-height — свободным, а подписи/helper — читаемыми даже в плотных формах.
Good text block
- Body: 16px, line-height около 20–22.
- Заголовки создают иерархию, а не декоративный шум.
- Поддерживаются увеличенные системные размеры текста.
Bad text block
- Плотные абзацы без воздуха и длинные строки.
- Caption используется для важного контента.
- Иерархия заголовков смешана или случайна.
- Не прячь важные инструкции в helper/caption.
- Избегай длинных «стен текста» на одном экране.
- Проверяй читабельность на compact и large text settings.
Touch targets and spacing
Tap-цели должны быть достаточно крупными, а соседние действия — отделены. Видимый размер и touch-area могут отличаться, но действие должно быть надёжным.
Good
- Icon button имеет достаточную touch-область и понятную подпись.
- Bottom sheet actions разделены интервалами.
- Segmented control не требует «ювелирного» попадания.
- Критичные действия дублируются кнопкой, не только жестом.
Bad
- Плотный toolbar с маленькими иконками вплотную.
- Action row без вертикального ритма и безопасных отступов.
- Удаление доступно только swipe-жестом.
- Размер touch area приоритетнее видимого пиктограммы.
- Между интерактивными элементами нужен «воздух».
- Icon-only элементы всегда должны иметь понятную цель.
Screen reader and assistive support
Мобильный интерфейс должен иметь логичный порядок чтения и понятные имена контролов: Search button, Favorite toggle, Show/Hide password, Accordion, Tab bar item, Badge/counter.
- Порядок чтения совпадает с визуальным потоком экрана.
- Icon-only кнопки получают осмысленные названия действий.
- Изменения состояний озвучиваются явно: selected, expanded, updated.
- Toggles/tabs/counters/expandables имеют читаемые состояния.
- Декоративные элементы не создают шум в озвучке.
Labels, icons and states
Подписи и состояния должны объяснять смысл действий, а не только «украшать» интерфейс.
Do
- “Edit profile” вместо безымянного карандаша.
- “Add card” вместо общего “Add”.
- Status chip с текстом + цветом, не цветом одним.
- Badge показывает значимую метрику, не декор.
Don’t
- Одинаковые иконки для разных действий.
- Неясные названия: “Open”, “Apply”, “Go”.
- Состояния только цветом без текстового контекста.
Images and non-text content
Смысловые изображения сопровождаются текстом, декоративные — не отвлекают. Текст внутри картинки не заменяет полноценный контент.
- Avatar: показывай имя пользователя рядом с изображением.
- Chart card: добавляй краткий текстовый вывод рядом с графиком.
- Onboarding illustration: дублируй смысл заголовком и описанием.
- Product image: ключевые параметры указывай текстом.
- Decorative background: не должен нести критичный смысл.
Forms and validation
Формы в мобильном продукте должны быть однозначными: постоянные label, логичный порядок полей, корректный keyboard type и понятные сообщения об ошибках.
Good
- Label остаётся видимым, placeholder дополняет, но не заменяет его.
- Ошибка объясняет как исправить значение.
- Телефон, email, code получают корректную мобильную клавиатуру.
Bad
- Поле с placeholder-only подписью.
- Валидация только красной рамкой без текста.
- Случайный порядок полей ломает сценарий ввода.
Motion and feedback
Анимация помогает ориентироваться, но не перегружает. Feedback всегда дублируется читаемым состоянием.
Subtle motion
Короткие переходы между экранами и мягкие state-change анимации.
Excessive motion
Длительные, резкие или частые анимации, мешающие задаче пользователя.
Loading state
Skeleton/loader + понятный контекст загрузки, а не «пустой экран».
Success feedback
Явный текстовый результат + спокойная визуальная индикация.
Accessibility checklist
Финальная быстрая проверка перед релизом мобильного экрана.
Visual
- Contrast достаточный для чтения.
- Иерархия экрана очевидна.
- Текст читается без увеличения.
- Light/dark обе темы рабочие.
Interaction
- Tap areas достаточного размера.
- Контролы не слипаются по отступам.
- Критичные действия не только через жесты.
Content
- Подписи действий конкретные.
- Иконки понятны без угадывания.
- Ошибки объясняют исправление.
- Состояния не только цветом.
Assistive support
- Логичный порядок чтения элементов.
- Контролы названы по смыслу действия.
- Декоративные элементы не шумят.
- Изменения состояния сообщаются ясно.
Icons
Palette page
Что это: Визуальная палитра цветов дизайн‑системы, разбитая по семействам (серый, зелёный, красный и т.д.).
Зачем: Быстро подобрать оттенок и использовать один и тот же цвет в макетах и коде.
Как использовать: Выбери семейство, найди нужную карточку — название токена и HEX можно копировать в стили и переменные.
blue
5
000F31
10
001947
15
00235A
20
012D6E
25
003786
30
00429B
35
034CB4
40
0058CC
45
0D63E3
50X
0070FF
55
2B7FFF
60
468FFD
65
5E9EFF
70
76ADFE
75
8CBBFF
80
A4C9FE
85
B9D7FF
90
D1E4FE
95
E7F2FF
96
EDF6FF
97
F3F9FF
graphite
5
0D1115
10
171C20
15
20262B
20X
2A3137
25
343C43
30
3F4850
35
49545D
40
54606A
45
5E6C77
50
6A7885
55
768694
60
8293A2
65
8DA0B0
70
96AABB
75
AABBCA
80
BBC8D4
85
CCD5DF
90
DCE3EB
95
EEF1F7
96
F1F4F9
97
F4F6FB
gray
5
111111
10
1B1B1B
15
262626
20X
303030
25
3B3B3B
30
474747
35
535353
40
5E5E5E
45
6A6A6A
50
767676
55
848484
60
919191
65
9E9E9E
70
ABABAB
75
B9B9B9
80
C6C6C6
85
D4D4D4
90
E2E2E2
95
F1F1F1
96
F5F5F5
97
F8F8F8
green
5
001504
10
03210E
15
012D13
20
003919
25
034521
30
015228
35
085F30
40
026D36
45
087B40
50
0D8847
55
00984F
60
0EA658
65
10B55F
70X
0DC267
75
5BCF83
80
83D99C
85
A5E2B6
90
C1EDCC
95
E0F6E5
96
E8F9EC
97
F0FBF3
orange
5
1D0D01
10
2D1600
15
3C1F00
20
492900
25
593203
30
6A3C00
35
7A4602
40
8A5100
45
9C5B03
50
AC6600
55
C37304
60
D78009
65
EB8D05
70X
FF9900
75
FFA439
80
FDB972
85
FECB97
90
FFDDBB
95
FFEEDD
96
FFF3E6
97
FFF7EE
pink
5
26050D
10
3A0817
15
4D0B1F
20
610E28
25
731632
30
871A3C
35
9B2246
40
B12650
45
C52D5B
50
DB3165
55
F33771
60X
FF3C77
65
FF6C90
70
FF859F
75
FD9DB0
80
FFB2C0
85
FFC5CF
90
FDDAE0
95
FEECEF
96
FFF1F3
97
FFF5F7
red
5
260605
10
390B08
15
4C1008
20
5D170F
25
711C13
30
842419
35
982A1F
40
AC3225
45
C2382A
50
D64030
55
EE4735
60X
FF4D3A
65
FE725F
70
FF8A77
75
FF9F8F
80
FDB5A7
85
FFC8BD
90
FFDAD1
95
FDEDE9
96
FEF2EF
97
FFF6F4
sky
5
05121A
10
081E29
15
0B2937
20
133445
25
173F53
30
1F4B61
35
245872
40
2B6481
45
307192
50
377EA1
55
3E8CB4
60
4299C5
65
4BA7D6
70
50B5E8
75X
5AC8FF
80
78D1FF
85
9CDDFF
90
C1E8FD
95
E0F4FE
96
E8F7FE
97
EFF9FE
violet
5
190532
10
260C46
15
33115D
20
401872
25
4E1E8B
30
5C26A1
35
6A2EB7
40
7A34D3
45X
883BE9
50
9054EA
55
9A67EF
60
A579F4
65
AF8BF5
70
B99BF8
75
C4ACF9
80
CFBDFC
85
DBCDFF
90
E7DEFE
95
F3EEFF
96
F7F4FF
97
F9F7FF
yellow
5
161001
10
221B02
15
332906
20
403407
25
4E3F09
30
5C4A0A
35
6B560B
40
79610C
45
8B700E
50
9E7F10
55
B59112
60
CCA30F
65
DFB211
70
EBBC12
75
EFC42A
80X
F7D044
85
F9DB75
90
F9E193
95
FDF0C7
96
FDF4D7
97
FDF8E7
Base palette
Что это: Справочная таблица всех базовых цветовых токенов с путём, HEX и алиасами.
Зачем: Точно знать значение каждого токена при вёрстке, в переменных CSS или в коде.
Как использовать: Найди токен по пути (например gray/50), возьми HEX или alias для подстановки в стили.
blue
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| blue/10 | #001947 | — | |
| blue/15 | #00235A | — | |
| blue/20 | #012D6E | — | |
| blue/25 | #003786 | — | |
| blue/30 | #00429B | — | |
| blue/35 | #034CB4 | — | |
| blue/40 | #0058CC | — | |
| blue/45 | #0D63E3 | — | |
| blue/5 | #000F31 | — | |
| blue/50X | #0070FF | — | |
| blue/55 | #2B7FFF | — | |
| blue/60 | #468FFD | — | |
| blue/65 | #5E9EFF | — | |
| blue/70 | #76ADFE | — | |
| blue/75 | #8CBBFF | — | |
| blue/80 | #A4C9FE | — | |
| blue/85 | #B9D7FF | — | |
| blue/90 | #D1E4FE | — | |
| blue/95 | #E7F2FF | — | |
| blue/96 | #EDF6FF | — | |
| blue/97 | #F3F9FF | — |
graphite
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| graphite/10 | #171C20 | — | |
| graphite/15 | #20262B | — | |
| graphite/20X | #2A3137 | — | |
| graphite/25 | #343C43 | — | |
| graphite/30 | #3F4850 | — | |
| graphite/35 | #49545D | — | |
| graphite/40 | #54606A | — | |
| graphite/45 | #5E6C77 | — | |
| graphite/5 | #0D1115 | — | |
| graphite/50 | #6A7885 | — | |
| graphite/55 | #768694 | — | |
| graphite/60 | #8293A2 | — | |
| graphite/65 | #8DA0B0 | — | |
| graphite/70 | #96AABB | — | |
| graphite/75 | #AABBCA | — | |
| graphite/80 | #BBC8D4 | — | |
| graphite/85 | #CCD5DF | — | |
| graphite/90 | #DCE3EB | — | |
| graphite/95 | #EEF1F7 | — | |
| graphite/96 | #F1F4F9 | — | |
| graphite/97 | #F4F6FB | — |
gray
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| gray/10 | #1B1B1B | — | |
| gray/15 | #262626 | — | |
| gray/20X | #303030 | — | |
| gray/25 | #3B3B3B | — | |
| gray/30 | #474747 | — | |
| gray/35 | #535353 | — | |
| gray/40 | #5E5E5E | — | |
| gray/45 | #6A6A6A | — | |
| gray/5 | #111111 | — | |
| gray/50 | #767676 | — | |
| gray/55 | #848484 | — | |
| gray/60 | #919191 | — | |
| gray/65 | #9E9E9E | — | |
| gray/70 | #ABABAB | — | |
| gray/75 | #B9B9B9 | — | |
| gray/80 | #C6C6C6 | — | |
| gray/85 | #D4D4D4 | — | |
| gray/90 | #E2E2E2 | — | |
| gray/95 | #F1F1F1 | — | |
| gray/96 | #F5F5F5 | — | |
| gray/97 | #F8F8F8 | — |
green
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| green/10 | #03210E | — | |
| green/15 | #012D13 | — | |
| green/20 | #003919 | — | |
| green/25 | #034521 | — | |
| green/30 | #015228 | — | |
| green/35 | #085F30 | — | |
| green/40 | #026D36 | — | |
| green/45 | #087B40 | — | |
| green/5 | #001504 | — | |
| green/50 | #0D8847 | — | |
| green/55 | #00984F | — | |
| green/60 | #0EA658 | — | |
| green/65 | #10B55F | — | |
| green/70X | #0DC267 | — | |
| green/75 | #5BCF83 | — | |
| green/80 | #83D99C | — | |
| green/85 | #A5E2B6 | — | |
| green/90 | #C1EDCC | — | |
| green/95 | #E0F6E5 | — | |
| green/96 | #E8F9EC | — | |
| green/97 | #F0FBF3 | — |
orange
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| orange/10 | #2D1600 | — | |
| orange/15 | #3C1F00 | — | |
| orange/20 | #492900 | — | |
| orange/25 | #593203 | — | |
| orange/30 | #6A3C00 | — | |
| orange/35 | #7A4602 | — | |
| orange/40 | #8A5100 | — | |
| orange/45 | #9C5B03 | — | |
| orange/5 | #1D0D01 | — | |
| orange/50 | #AC6600 | — | |
| orange/55 | #C37304 | — | |
| orange/60 | #D78009 | — | |
| orange/65 | #EB8D05 | — | |
| orange/70X | #FF9900 | — | |
| orange/75 | #FFA439 | — | |
| orange/80 | #FDB972 | — | |
| orange/85 | #FECB97 | — | |
| orange/90 | #FFDDBB | — | |
| orange/95 | #FFEEDD | — | |
| orange/96 | #FFF3E6 | — | |
| orange/97 | #FFF7EE | — |
pink
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| pink/10 | #3A0817 | — | |
| pink/15 | #4D0B1F | — | |
| pink/20 | #610E28 | — | |
| pink/25 | #731632 | — | |
| pink/30 | #871A3C | — | |
| pink/35 | #9B2246 | — | |
| pink/40 | #B12650 | — | |
| pink/45 | #C52D5B | — | |
| pink/5 | #26050D | — | |
| pink/50 | #DB3165 | — | |
| pink/55 | #F33771 | — | |
| pink/60X | #FF3C77 | — | |
| pink/65 | #FF6C90 | — | |
| pink/70 | #FF859F | — | |
| pink/75 | #FD9DB0 | — | |
| pink/80 | #FFB2C0 | — | |
| pink/85 | #FFC5CF | — | |
| pink/90 | #FDDAE0 | — | |
| pink/95 | #FEECEF | — | |
| pink/96 | #FFF1F3 | — | |
| pink/97 | #FFF5F7 | — |
red
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| red/10 | #390B08 | — | |
| red/15 | #4C1008 | — | |
| red/20 | #5D170F | — | |
| red/25 | #711C13 | — | |
| red/30 | #842419 | — | |
| red/35 | #982A1F | — | |
| red/40 | #AC3225 | — | |
| red/45 | #C2382A | — | |
| red/5 | #260605 | — | |
| red/50 | #D64030 | — | |
| red/55 | #EE4735 | — | |
| red/60X | #FF4D3A | — | |
| red/65 | #FE725F | — | |
| red/70 | #FF8A77 | — | |
| red/75 | #FF9F8F | — | |
| red/80 | #FDB5A7 | — | |
| red/85 | #FFC8BD | — | |
| red/90 | #FFDAD1 | — | |
| red/95 | #FDEDE9 | — | |
| red/96 | #FEF2EF | — | |
| red/97 | #FFF6F4 | — |
sky
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| sky/10 | #081E29 | — | |
| sky/15 | #0B2937 | — | |
| sky/20 | #133445 | — | |
| sky/25 | #173F53 | — | |
| sky/30 | #1F4B61 | — | |
| sky/35 | #245872 | — | |
| sky/40 | #2B6481 | — | |
| sky/45 | #307192 | — | |
| sky/5 | #05121A | — | |
| sky/50 | #377EA1 | — | |
| sky/55 | #3E8CB4 | — | |
| sky/60 | #4299C5 | — | |
| sky/65 | #4BA7D6 | — | |
| sky/70 | #50B5E8 | — | |
| sky/75X | #5AC8FF | — | |
| sky/80 | #78D1FF | — | |
| sky/85 | #9CDDFF | — | |
| sky/90 | #C1E8FD | — | |
| sky/95 | #E0F4FE | — | |
| sky/96 | #E8F7FE | — | |
| sky/97 | #EFF9FE | — |
violet
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| violet/10 | #260C46 | — | |
| violet/15 | #33115D | — | |
| violet/20 | #401872 | — | |
| violet/25 | #4E1E8B | — | |
| violet/30 | #5C26A1 | — | |
| violet/35 | #6A2EB7 | — | |
| violet/40 | #7A34D3 | — | |
| violet/45X | #883BE9 | — | |
| violet/5 | #190532 | — | |
| violet/50 | #9054EA | — | |
| violet/55 | #9A67EF | — | |
| violet/60 | #A579F4 | — | |
| violet/65 | #AF8BF5 | — | |
| violet/70 | #B99BF8 | — | |
| violet/75 | #C4ACF9 | — | |
| violet/80 | #CFBDFC | — | |
| violet/85 | #DBCDFF | — | |
| violet/90 | #E7DEFE | — | |
| violet/95 | #F3EEFF | — | |
| violet/96 | #F7F4FF | — | |
| violet/97 | #F9F7FF | — |
yellow
| Путь токена | Цвет | HEX | Alias |
|---|---|---|---|
| yellow/10 | #221B02 | — | |
| yellow/15 | #332906 | — | |
| yellow/20 | #403407 | — | |
| yellow/25 | #4E3F09 | — | |
| yellow/30 | #5C4A0A | — | |
| yellow/35 | #6B560B | — | |
| yellow/40 | #79610C | — | |
| yellow/45 | #8B700E | — | |
| yellow/5 | #161001 | — | |
| yellow/50 | #9E7F10 | — | |
| yellow/55 | #B59112 | — | |
| yellow/60 | #CCA30F | — | |
| yellow/65 | #DFB211 | — | |
| yellow/70 | #EBBC12 | — | |
| yellow/75 | #EFC42A | — | |
| yellow/80X | #F7D044 | — | |
| yellow/85 | #F9DB75 | — | |
| yellow/90 | #F9E193 | — | |
| yellow/95 | #FDF0C7 | — | |
| yellow/96 | #FDF4D7 | — | |
| yellow/97 | #FDF8E7 | — |
Semantic colors (Day & Night)
Что это: Цвета по смыслу (текст, фон, границы, акцент) для светлой (Day) и тёмной (Night) темы.
Зачем: Один интерфейс корректно выглядит и днём, и ночью — подставляется нужный HEX по теме.
Как использовать: В коде используй семантический токен (например text/primary), а не конкретный HEX — значение подставится из темы.
| Путь токена | HEX (Day) | HEX (Night) | Alias Day | Alias Night |
|---|---|---|---|---|
| accent/accent | #0DC267 | #0DC267 | green/70X | green/70X |
| accent/content | #111111 | #111111 | gray/5 | gray/5 |
| accent/content-invert | #FFFFFF | #F8F8F8 | — | gray/97 |
| accent/disabled | #E0F6E5 | #C1EDCC | green/95 | green/90 |
| accent/hover | #10B55F | #10B55F | green/65 | green/65 |
| accent/pressed | #0EA658 | #0EA658 | green/60 | green/60 |
| avatar/bg | #E2E2E2 | #303030 | gray/90 | gray/20X |
| avatar/icon | #919191 | #919191 | gray/60 | gray/60 |
| border/default | #E2E2E2 | #303030 | gray/90 | gray/20X |
| border/strong | #ABABAB | #5E5E5E | gray/70 | gray/40 |
| border/subtle | #F1F1F1 | #262626 | gray/95 | gray/15 |
| button/danger/bg | #FF4D3A | #FF4D3A | red/60X | red/60X |
| button/danger/disabled/bg | #E2E2E2 | #E2E2E2 | gray/90 | gray/90 |
| button/danger/disabled/icon | #ABABAB | #919191 | gray/70 | gray/60 |
| button/danger/disabled/text | #ABABAB | #919191 | gray/70 | gray/60 |
| button/danger/hover/bg | #EE4735 | #EE4735 | red/55 | red/55 |
| button/danger/icon | #FFFFFF | #FFFFFF | — | — |
| button/danger/pressed/bg | #D64030 | #D64030 | red/50 | red/50 |
| button/danger/text | #FFFFFF | #FFFFFF | — | — |
| button/primary/bg | #0DC267 | #0DC267 | green/70X | green/70X |
| button/primary/disabled/bg | #E2E2E2 | #1B1B1B | gray/90 | gray/10 |
| button/primary/disabled/icon | #ABABAB | #919191 | gray/70 | gray/60 |
| button/primary/disabled/text | #ABABAB | #919191 | gray/70 | gray/60 |
| button/primary/hover/bg | #10B55F | #10B55F | green/65 | green/65 |
| button/primary/icon | #FFFFFF | #FFFFFF | — | — |
| button/primary/pressed/bg | #0EA658 | #0EA658 | green/60 | green/60 |
| button/primary/text | #FFFFFF | #FFFFFF | — | — |
| button/secondary/bg | #E0F6E5 | #003919 | green/95 | green/20 |
| button/secondary/disabled/bg | #F8F8F8 | #1B1B1B | gray/97 | gray/10 |
| button/secondary/disabled/icon | #C6C6C6 | #919191 | gray/80 | gray/60 |
| button/secondary/disabled/text | #C6C6C6 | #919191 | gray/80 | gray/60 |
| button/secondary/hover/bg | #A5E2B6 | #087B40 | green/85 | green/45 |
| button/secondary/icon | #0EA658 | #0DC267 | green/60 | green/70X |
| button/secondary/pressed/bg | #A5E2B6 | #03210E | green/85 | green/10 |
| button/secondary/text | #0EA658 | #0DC267 | green/60 | green/70X |
| button/tertiary/disabled/icon | #ABABAB | #919191 | gray/70 | gray/60 |
| button/tertiary/disabled/text | #ABABAB | #919191 | gray/70 | gray/60 |
| button/tertiary/hover/icon | #0DC267 | #83D99C | green/70X | green/80 |
| button/tertiary/hover/text | #0DC267 | #83D99C | green/70X | green/80 |
| button/tertiary/icon | #0EA658 | #0DC267 | green/60 | green/70X |
| button/tertiary/pressed/icon | #83D99C | #A5E2B6 | green/80 | green/85 |
| button/tertiary/pressed/text | #83D99C | #A5E2B6 | green/80 | green/85 |
| button/tertiary/text | #0EA658 | #0DC267 | green/60 | green/70X |
| chat/incoming/text | #111111 | #F8F8F8 | gray/5 | gray/97 |
| chat/outgoing/bg | #0DC267 | #0DC267 | green/70X | green/70X |
| chat/outgoing/text | #FFFFFF | #111111 | — | gray/5 |
| danger/base | #FF4D3A | #FF4D3A | red/60X | red/60X |
| danger/content | #FFFFFF | #111111 | — | gray/5 |
| danger/content-invert | #111111 | #F8F8F8 | gray/5 | gray/97 |
| danger/disabled | #FFF6F4 | #FFDAD1 | red/97 | red/90 |
| danger/hover | #FE725F | #FE725F | red/65 | red/65 |
| danger/pressed | #AC3225 | #AC3225 | red/40 | red/40 |
| info/base | #0070FF | #0070FF | blue/50X | blue/50X |
| info/bg | #F3F9FF | #012D6E | blue/97 | blue/20 |
| info/content | #0070FF | #468FFD | blue/50X | blue/60 |
| input/bg | #F8F8F8 | #1B1B1B | gray/97 | gray/10 |
| input/border | #E2E2E2 | #474747 | gray/90 | gray/30 |
| input/disabled/bg | #F1F1F1 | #1B1B1B | gray/95 | gray/10 |
| input/disabled/border | #E2E2E2 | #303030 | gray/90 | gray/20X |
| input/disabled/text | #C6C6C6 | #474747 | gray/80 | gray/30 |
| input/error/bg | #F8F8F8 | #1B1B1B | gray/97 | gray/10 |
| input/error/border | #FF4D3A | #FF4D3A | red/60X | red/60X |
| input/error/text | #FF4D3A | #FF4D3A | red/60X | red/60X |
| input/focus/border | #0DC267 | #0DC267 | green/70X | green/70X |
| input/hover/border | #C6C6C6 | #5E5E5E | gray/80 | gray/40 |
| input/placeholder | #ABABAB | #848484 | gray/70 | gray/55 |
| input/text | #111111 | #F8F8F8 | gray/5 | gray/97 |
| modal/bg | #FFFFFF | #1B1B1B | — | gray/10 |
| modal/border | #E2E2E2 | #474747 | gray/90 | gray/30 |
| overlay/bg | #000000 | #000000 | — | — |
| skeleton/bg | #E2E2E2 | #303030 | gray/90 | gray/20X |
| skeleton/wave | #F1F1F1 | #474747 | gray/95 | gray/30 |
| success/base | #0EA658 | #0EA658 | green/60 | green/60 |
| success/bg | #E0F6E5 | #003919 | green/95 | green/20 |
| success/content | #0EA658 | #0EA658 | green/60 | green/60 |
| surface/card/bg | #FFFFFF | #1B1B1B | — | gray/10 |
| surface/card/border | #E2E2E2 | #303030 | gray/90 | gray/20X |
| surface/card/elevated/bg | #FFFFFF | #262626 | — | gray/15 |
| surface/page/bg | #F5F5F5 | #111111 | gray/96 | gray/5 |
| tabbar/icon/active | #0DC267 | #0DC267 | green/70X | green/70X |
| tabbar/icon/inactive | #767676 | #767676 | gray/50 | gray/50 |
| tabbar/text/active | #0DC267 | #0DC267 | green/70X | green/70X |
| tabbar/text/inactive | #919191 | #919191 | gray/60 | gray/60 |
| tag/accent/bg | #E0F6E5 | #003919 | green/95 | green/20 |
| tag/accent/border | #83D99C | #0EA658 | green/80 | green/60 |
| tag/accent/text | #0EA658 | #0DC267 | green/60 | green/70X |
| tag/danger/bg | #FFDAD1 | #5D170F | red/90 | red/20 |
| tag/danger/text | #FF4D3A | #FF4D3A | red/60X | red/60X |
| tag/default/bg | #E2E2E2 | #303030 | gray/90 | gray/20X |
| tag/default/border | #E2E2E2 | #5E5E5E | gray/90 | gray/40 |
| tag/default/text | #5E5E5E | #C6C6C6 | gray/40 | gray/80 |
| tag/warning/bg | #FDF0C7 | #403407 | yellow/95 | yellow/20 |
| tag/warning/text | #EBBC12 | #F7D044 | yellow/70 | yellow/80X |
| text/invert/primary | #FFFFFF | #111111 | — | gray/5 |
| text/invert/secondary | #F1F1F1 | #303030 | gray/95 | gray/20X |
| text/muted | #919191 | #919191 | gray/60 | gray/60 |
| text/primary | #111111 | #F8F8F8 | gray/5 | gray/97 |
| text/secondary | #5E5E5E | #C6C6C6 | gray/40 | gray/80 |
| warning/base | #F7D044 | #F7D044 | yellow/80X | yellow/80X |
| warning/bg | #FDF0C7 | #403407 | yellow/95 | yellow/20 |
| warning/content | #F7D044 | #F7D044 | yellow/80X | yellow/80X |
Radius & Spacing
Что это: Токены скруглений углов и отступов (padding, gap, spacing) в одном месте.
Зачем: Одинаковые радиусы и отступы во всех компонентах — интерфейс выглядит едино и предсказуемо.
Как использовать: Бери значение из таблицы для кнопок, карточек, полей ввода и отступов между элементами.
radius
| Путь токена | Тип | Значение | Alias | Описание |
|---|---|---|---|---|
| radius/avatar/radius | number | {radius.circle} | — | — |
| radius/bottomsheet/radius | number | {radius.xl} | — | — |
| radius/button/radius | number | {radius.m} | — | — |
| radius/card/radius | number | {radius.l} | — | — |
| radius/chat/message/radius | number | {radius.l} | — | — |
| radius/circle | number | 0.5 | — | аватары |
| radius/full | number | 999 | — | круг/пилюля |
| radius/input/radius | number | {radius.m} | — | — |
| radius/l | number | 16 | — | карточки, большие блоки |
| radius/m | number | 12 | — | основные кнопки, поля, теги |
| radius/modal/radius | number | {radius.xl} | — | — |
| radius/s | number | 8 | — | инпуты, маленькие кнопки, бейджи |
| radius/tag/radius | number | {radius.m} | — | — |
| radius/xl | number | 24 | — | крупные контейнеры, таббар, bottom-sheet |
| radius/xs | number | 4 | — | микроконтролы, бордеры внутри, мелкие элементы |
Typography presets
Что это: Набор текстовых стилей: заголовки (h1, h2, h3), основной текст, подписи, лейблы кнопок.
Зачем: Одна и та же типографика во всём продукте — размер, межстрочный интервал и насыщенность заданы токенами.
Как использовать: Выбери пресет по роли (заголовок, тело текста, подпись) и применяй его размер, line-height и weight из таблицы.
body-strong
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| body-strong/line-height | number | 20 | line-height/s |
| body-strong/size | number | 14 | size/s |
| body-strong/weight | number | 600 | font-weight/semibold |
body
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| body/line-height | number | 20 | line-height/s |
| body/size | number | 14 | size/s |
| body/weight | number | 400 | font-weight/regular |
button
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| button/label-small/line-height | number | 20 | line-height/s |
| button/label-small/size | number | 14 | size/s |
| button/label-small/weight | number | 500 | font-weight/medium |
| button/label/line-height | number | 22 | line-height/m |
| button/label/size | number | 16 | size/m |
| button/label/weight | number | 500 | font-weight/medium |
caption
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| caption/line-height | number | 14 | line-height/xxs |
| caption/size | number | 11 | size/xxs |
| caption/weight | number | 400 | font-weight/regular |
chat
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| chat/message/line-height | number | 20 | line-height/s |
| chat/message/size | number | 14 | size/s |
| chat/message/weight | number | 400 | font-weight/regular |
| chat/timestamp/line-height | number | 16 | line-height/xs |
| chat/timestamp/size | number | 12 | size/xs |
| chat/timestamp/weight | number | 400 | font-weight/regular |
empty
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| empty/subtitle/line-height | number | 20 | line-height/s |
| empty/subtitle/size | number | 14 | size/s |
| empty/subtitle/weight | number | 400 | font-weight/regular |
| empty/title/line-height | number | 24 | line-height/l |
| empty/title/size | number | 18 | size/l |
| empty/title/weight | number | 600 | font-weight/semibold |
h1
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| h1/line-height | number | 32 | line-height/xxl |
| h1/size | number | 24 | size/xxl |
| h1/weight | number | 600 | font-weight/semibold |
h2
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| h2/line-height | number | 26 | line-height/xl |
| h2/size | number | 20 | size/xl |
| h2/weight | number | 600 | font-weight/semibold |
h3
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| h3/line-height | number | 24 | line-height/l |
| h3/size | number | 18 | size/l |
| h3/weight | number | 600 | font-weight/semibold |
h4
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| h4/line-height | number | 22 | line-height/m |
| h4/size | number | 16 | size/m |
| h4/weight | number | 600 | font-weight/semibold |
help
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| help/line-height | number | 16 | line-height/xs |
| help/size | number | 12 | size/xs |
| help/weight | number | 400 | font-weight/regular |
input
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| input/label/line-height | number | 16 | line-height/xs |
| input/label/size | number | 12 | size/xs |
| input/label/weight | number | 500 | font-weight/medium |
| input/placeholder/line-height | number | 22 | line-height/m |
| input/placeholder/size | number | 16 | size/m |
| input/placeholder/weight | number | 400 | font-weight/regular |
| input/value/line-height | number | 22 | line-height/m |
| input/value/size | number | 16 | size/m |
| input/value/weight | number | 400 | font-weight/regular |
label
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| label/line-height | number | 16 | line-height/xs |
| label/size | number | 12 | size/xs |
| label/weight | number | 500 | font-weight/medium |
placeholder
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| placeholder/line-height | number | 20 | line-height/s |
| placeholder/size | number | 14 | size/s |
| placeholder/weight | number | 400 | font-weight/regular |
tag
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| tag/line-height | number | 16 | line-height/xs |
| tag/size | number | 12 | size/xs |
| tag/weight | number | 500 | font-weight/medium |
Typography page
Что это: Образцы того, как выглядят заголовки, основной текст и подписи в интерфейсе.
Зачем: Увидеть живой результат стиля перед тем как применять его в макете или коде.
Как использовать: Сравни образцы между собой, выбери нужный пресет и используй его параметры (указаны под каждым блоком) в стилях.
body
Основной текст. Используется для контента и описаний.
body-strong
Пример текста для body-strong
button
Текст кнопки
caption
Подпись или вспомогательный текст
chat
Пример текста для chat
empty
Пример текста для empty
h1
Заголовок H1 — Invert Design System
h2
Заголовок H2 — раздел
h3
Заголовок H3 — подсекция
h4
Пример текста для h4
help
Пример текста для help
input
Пример текста для input
label
Метка поля ввода
placeholder
Пример текста для placeholder
tag
Пример текста для tag
Typography — Android
Что это: Токены шрифтов и размеров для приложений на Android.
Зачем: Одинаковая типографика в мобильном приложении на Android.
Как использовать: Подставляй значения из таблицы в стили или в код мобильного приложения.
font-face
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| font-face | string | Roboto | — |
font-weight
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| font-weight/bold | number | 700 | — |
| font-weight/medium | number | 500 | — |
| font-weight/regular | number | 400 | — |
| font-weight/semibold | number | 600 | — |
line-height
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| line-height/l | number | 24 | — |
| line-height/m | number | 22 | — |
| line-height/s | number | 20 | — |
| line-height/xl | number | 26 | — |
| line-height/xs | number | 16 | — |
| line-height/xxl | number | 32 | — |
| line-height/xxs | number | 14 | — |
size
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| size/l | number | 18 | — |
| size/m | number | 16 | — |
| size/s | number | 14 | — |
| size/xl | number | 20 | — |
| size/xs | number | 12 | — |
| size/xxl | number | 24 | — |
| size/xxs | number | 11 | — |
Typography — iOS
Что это: Токены шрифтов и размеров для приложений на iOS.
Зачем: Одинаковая типографика в мобильном приложении на iOS.
Как использовать: Подставляй значения из таблицы в стили или в код мобильного приложения.
font-face
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| font-face | string | SF Pro Display | — |
font-weight
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| font-weight/bold | number | 700 | — |
| font-weight/medium | number | 500 | — |
| font-weight/regular | number | 400 | — |
| font-weight/semibold | number | 600 | — |
line-height
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| line-height/l | number | 24 | — |
| line-height/m | number | 22 | — |
| line-height/s | number | 20 | — |
| line-height/xl | number | 26 | — |
| line-height/xs | number | 16 | — |
| line-height/xxl | number | 32 | — |
| line-height/xxs | number | 14 | — |
size
| Путь токена | Тип | Значение | Alias |
|---|---|---|---|
| size/l | number | 18 | — |
| size/m | number | 16 | — |
| size/s | number | 14 | — |
| size/xl | number | 20 | — |
| size/xs | number | 12 | — |
| size/xxl | number | 24 | — |
| size/xxs | number | 11 | — |
Accordion
Что это: Компонент для сворачивания и раскрытия контента по секциям.
Зачем: Уменьшает визуальную перегрузку и помогает показывать только нужную информацию в моменте.
Когда и как использовать: Используй для FAQ, фильтров, характеристик и длинных настроек, когда часть данных второстепенная.
Title
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | title, body, defaultExpanded, disabled |
| Состояния | collapsed, expanded, disabled |
| Поведение | тап по header; анимация высоты/opacity; опционально one-open-at-a-time |
| Layout | header min 44dp, контент с внутренними отступами, divider между элементами |
| A11y | Semantics(button), announce expanded/collapsed, focus order |
Bottom Sheet
Переход в Apple Human Design Liquid Glass IOS 26
Что это: Выезжающая снизу панель для быстрых действий и выбора без ухода с текущего экрана.
Зачем: Сохраняет контекст пользователя и ускоряет выполнение сценария.
Когда и как использовать: Подходит для выбора, подтверждения, фильтрации и коротких многошаговых действий.
Button
Button
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | variant(height), title, actions, dismissible |
| Состояния | collapsed/partial/full, dragging |
| Поведение | drag handle, swipe down to close, backdrop tap to dismiss (если разрешено) |
| Layout | safe area bottom/top, max height по контенту и размеру экрана |
| A11y | focus trap внутри шторки, announce opening/closing |
Action bar
Что это: Панель с основными действиями в одном блоке (primary/secondary).
Зачем: Собирает ключевые кнопки в предсказуемой зоне и снижает вероятность ошибок.
Когда и как использовать: Используй в карточках, формах, экранах подтверждения и внизу сценариев с двумя-тремя действиями.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | buttonsCount, showContentSwapper, showHomeIndicator, actions[] |
| Состояния | default, pressed, disabled |
| Поведение | быстрые действия внизу экрана; приоритет до 3 кнопок |
| Layout | fixed bottom + safe area; согласованные отступы и высота |
| A11y | semantic labels на действиях, min tap target 44dp |
Snackbar
Что это: Краткое уведомление о результате действия.
Зачем: Даёт быстрый фидбек без прерывания пользовательского потока.
Когда и как использовать: Показывай после сохранения, удаления, отправки или ошибки, когда не нужен модальный диалог.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | type(success|danger|default), text, duration, action(optional) |
| Поведение | auto-dismiss; очередь сообщений; не перекрывать важные CTA |
| Layout | bottom offset + safe area, max width на desktop/tablet |
| A11y | announce via live region/SemanticsService.announce |
| Flutter | ScaffoldMessenger или кастомный overlay с единым менеджером |
Avatar
Что это: Блок отображения пользователя в виде фото, инициалов или плейсхолдера.
Зачем: Помогает идентифицировать аккаунт и усиливает персонализацию интерфейса.
Когда и как использовать: Используй в профиле, списках чатов, комментариях и заголовках экранов.
БЯ
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | size, shape, mode(image|letters|icon|placeholder) |
| Fallback | image -> letters -> placeholder |
| Layout | фиксированные размеры 16/24/40/48/96/208 |
| Производительность | кеширование изображений, lazy loading |
| A11y | semanticLabel с именем пользователя |
Add/Remove avatar
Что это: Контрол загрузки и удаления аватара в одном компоненте.
Зачем: Делает изменение фото профиля понятным и быстрым.
Когда и как использовать: Используй в настройках профиля: в состоянии add открывай выбор файла, в remove подтверждай удаление.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | size(96|208), state(add|change), imageFile |
| Поведение | tap add -> picker, tap change -> remove/reset |
| Layout | action button поверх правого нижнего угла |
| Валидация | тип image/*, ограничение размера файла, обработка ошибок |
| Flutter | image_picker/file_picker + хранение preview через MemoryImage/FileImage |
Card
Что это: Контейнер для связанной информации и действий.
Зачем: Структурирует контент и облегчает сканирование интерфейса.
Когда и как использовать: Подходит для списков сущностей, превью, блоков аналитики и контента с локальными действиями.
Заголовок карточки
Краткое описание или вспомогательный текст внутри карточки.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | variant, padding, radius, elevation/border |
| Контент | title, subtitle, media, actions |
| Layout | фиксированная внутренняя сетка и spacing tokens |
| Поведение | tap whole card или только action-зоны (выбрать один паттерн) |
| A11y | чёткий hit area и semantic grouping |
Card Stack
Что это: Группа карточек с визуальной иерархией слоёв.
Зачем: Показывает связанный набор объектов и акцент на активном элементе.
Когда и как использовать: Используй для подборок, историй, шаблонов и сценариев со свайпом между карточками.
Первая карточка
Вторая карточка
Третья карточка
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | count, activeIndex, overlap, scale |
| Поведение | swipe/drag/animate between cards |
| Layout | согласованные offsets и z-index |
| Производительность | виртуализация/предзагрузка изображений |
| Flutter | Stack + Positioned/AnimatedPositioned/AnimatedSwitcher |
Search
Что это: Поле поиска для фильтрации и быстрого доступа к сущностям.
Зачем: Сокращает путь к нужному результату в больших списках.
Когда и как использовать: Используй на экранах каталога, истории, компонентов и иконок, где элементов много.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | query, placeholder, onChanged, onSubmitted, clearAction |
| Состояния | default, focused, filled, disabled, error |
| Поведение | debounce 250-400ms, clear, optional suggestions |
| A11y | semantic label, announce results count |
| Flutter | TextField + controller + Stream/debounce |
Input
Что это: Базовое текстовое поле ввода.
Зачем: Даёт предсказуемый паттерн ввода и снижает ошибки в формах.
Когда и как использовать: Используй для имени, описания, комментария и других свободных текстовых данных.
helper text
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | label, value, onChanged, helperText, errorText, size, enabled |
| Состояния | default, focused, filled, error, disabled |
| Валидация | onBlur/onSubmit + inline error |
| Layout | фиксированная высота по size, ellipsis для overflow |
| Flutter | TextFormField + InputDecoration + validator |
Select
Что это: Компонент выбора одного значения из списка вариантов.
Зачем: Снижает вариативность ввода и упрощает принятие решения.
Когда и как использовать: Подходит для статусов, ролей, фильтров, категорий и настроек с фиксированным набором значений.
label
content
helper text
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | label, selectedValue, items, onChanged, helper/error |
| Состояния | default, focused/opened, filled, error, disabled |
| Поведение | open list, select item, close with сохранением выбора |
| Layout | иконка chevron, clear visual selected item |
| Flutter | DropdownMenu/PopupMenuButton или кастомный bottom sheet selector |
Skeleton
Что это: Скелетон-заглушка формы будущего контента.
Зачем: Снижает ощущение ожидания и помогает понять, что загрузка идёт.
Когда и как использовать: Используй при сетевых запросах дольше короткой паузы, повторяя форму реального контента.
Карточка загружена
Контент плавно появился после skeleton-плейсхолдера.
Эта зона нужна как пример реального loading-state.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | borderRadius(4/8/12/16/24/circle), animated |
| Поведение | shimmer/pulse, stop animation когда контент готов |
| Layout | базовый skeleton: 96×96; shape через radius токены |
| A11y | считать декоративным, скрывать от screen reader |
| Flutter | ShaderMask/AnimatedContainer или пакет skeletonizer |
Tabs
Что это: Табы для переключения между связанными разделами на одном экране.
Зачем: Помогают быстро менять контекст без переходов между страницами.
Когда и как использовать: Используй для 2–5 разделов с равной важностью и короткими названиями.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | type, tabs[], activeIndex, onTabChange, icon/counter |
| Состояния | active, inactive, pressed, disabled |
| Поведение | preserve state per tab when switching |
| Layout | fixed vs scrollable width strategy |
| Flutter | TabBar + TabController/DefaultTabController |
Tab bar
Liquid Glass
Что это: Нижняя навигационная панель для основных разделов приложения.
Зачем: Даёт постоянный быстрый доступ к ключевым разделам.
Когда и как использовать: Используй как основную навигацию с 3–5 пунктами и стабильным составом вкладок.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | items, activeIndex, separateSearch |
| Состояния | active/inactive, pressed |
| Поведение | switch root sections, optional separate search action |
| Layout | safe area bottom + фиксированная высота |
| Flutter | BottomNavigationBar/NavigationBar с кастомным glass container |
Toggle
Apple HIG toggle behavior and visual language Liquid Glass
Что это: Переключатель состояния в формате on/off.
Зачем: Позволяет мгновенно включать и отключать настройку.
Когда и как использовать: Используй для бинарных параметров: уведомления, темы, разрешения, автосинхронизация.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | value(bool), onChanged, showAxLabel |
| Состояния | on, off, disabled |
| Поведение | tap toggles immediately; optional haptic |
| A11y | semantic role switch + announce current value |
| Flutter | Switch/Switch.adaptive с кастомизацией темы |
Bubble chat
Что это: Сообщение в чате в формате входящей/исходящей пузырьковой реплики.
Зачем: Повышает читаемость диалога и разделяет стороны общения.
Когда и как использовать: Используй в мессенджерах и саппорт-чатах для текстовых и коротких мультимедийных сообщений.
22:00
Привет! Я пишу по поводу этого
22:00
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | isMine, position, replyType, hasImage, time, status |
| Состояния | only-one/top/center/bottom + mine/other |
| Поведение | reply preview, image preview, message status/checks |
| Layout | max bubble width, перенос текста, media ratio |
| Flutter | ListView.builder + item grouping + keyed animations |
Message input
Liquid Glass
Что это: Поле ввода сообщения с действиями вложения и отправки.
Зачем: Собирает ключевые действия чата в одном понятном контроле.
Когда и как использовать: Используй в нижней части чата; поддерживай multiline при росте текста и ясный статус отправки.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | property(Default/input/more input/reply), text, onSend, onAttach |
| Состояния | empty, typing, multiline, reply |
| Поведение | auto-grow textarea, send enabled when valid |
| Layout | safe area bottom, keyboard insets handling |
| Flutter | TextField(maxLines null) + AnimatedContainer + MediaQuery.viewInsets |
Checkbox
Что это: Контрол множественного выбора независимых пунктов.
Зачем: Позволяет выбрать несколько опций одновременно.
Когда и как использовать: Используй в фильтрах, согласиях и настройках, где возможны несколько активных значений.
Получать уведомления
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | checked, onChanged, state(default/disabled/danger), label |
| Состояния | checked/unchecked, disabled, error(danger) |
| Поведение | tap по box и label |
| A11y | semantic role checkbox + announce checked state |
| Flutter | CheckboxListTile/Row + Checkbox |
Radio
Что это: Контрол выбора одного варианта из группы.
Зачем: Исключает конфликт выбора и делает решение однозначным.
Когда и как использовать: Используй когда нужно выбрать только один вариант: тариф, способ доставки, тип отображения.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | value, groupValue, onChanged, state |
| Состояния | selected, unselected, disabled, danger |
| Поведение | выбор меняет groupValue |
| A11y | semantic grouping для radio group |
| Flutter | Radio |
Date input
Что это: Поле выбора даты с маской и вызовом календаря.
Зачем: Снижает ошибки формата и ускоряет ввод даты.
Когда и как использовать: Используй для дат рождения, бронирования, дедлайнов; ручной ввод оставляй как дополнительный путь.
label
ДД.MM.ГГГГ
helper text
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | value(DateTime?), onTap/onChanged, filled, state, helper, size |
| Состояния | default, focused, filled, error, disabled |
| Поведение | open picker, format output локалью |
| Валидация | min/max date, required, parse errors |
| Flutter | showDatePicker + TextEditingController |
Phone input
Что это: Поле ввода телефона с кодом страны и форматной маской.
Зачем: Снижает ошибки номера и повышает конверсию форм.
Когда и как использовать: Используй в регистрации и контактах; поддерживай автоопределение страны и ручную смену кода.
🇷🇺
+
7
error text
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | country, value, mask, state, filled, onChanged |
| Поведение | autodetect country by dial code, dynamic mask |
| Валидация | E.164 + локальные правила длины |
| A11y | announce selected country and formatted value |
| Flutter | libphonenumber + input formatter + country selector |
Pincode input
Что это: Поле ввода PIN/OTP по символам.
Зачем: Ускоряет подтверждение и делает прогресс ввода наглядным.
Когда и как использовать: Используй в авторизации, подтверждении операций и двухфакторной защите.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | length, value, state, size, onCompleted |
| Состояния | default, focused, filled, error |
| Поведение | single hidden input + визуальные слоты, paste support |
| Безопасность | опционально obscureText и disable screenshots (по требованиям) |
| Flutter | TextField + formatter + custom slot renderer |
Progress bar
Что это: Индикатор прогресса выполнения процесса.
Зачем: Снижает неопределённость ожидания и помогает планировать действие.
Когда и как использовать: Используй для загрузок, этапов и длительных операций, когда важно показать динамику.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | type(progress|segmented), value/currentStep, totalSteps |
| Состояния | determinate, indeterminate |
| Поведение | анимация изменения значения без резких скачков |
| Layout | высота трека и контраст fill по теме |
| Flutter | LinearProgressIndicator + кастомный segmented painter |
Icon swapper
Что это: Компонент переключения одной иконки на другую по состоянию.
Зачем: Делает состояние действия визуально очевидным без текста.
Когда и как использовать: Используй для избранного, лайка, скрыть/показать, переключения режимов и состояний.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | iconName, size, weight/style, color, state |
| Поведение | animated swap при смене состояния |
| Layout | фиксированный bounding box под размер |
| Производительность | prefer SVG/vector и кеширование |
| Flutter | Icon widget + custom icon font/svg + AnimatedSwitcher |
Loader
Что это: Индикатор фоновой или блокирующей загрузки.
Зачем: Показывает, что система обрабатывает действие, и снижает повторные клики.
Когда и как использовать: Используй при коротких запросах и в точках ожидания, где ещё нет готового контента.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | size, color, isAnimating |
| Поведение | continuous rotation, pause on hidden/offstage |
| Layout | центрирование в контейнере, достаточный контраст |
| A11y | announce loading state при необходимости |
| Flutter | CircularProgressIndicator или кастомный spinner |
Toolbar
Glass-style top navigation bar from iOS patterns Liquid Glass
Что это: Верхняя панель экрана с заголовком и ключевыми действиями.
Зачем: Создаёт структуру экрана и быстрый доступ к базовым операциям.
Когда и как использовать: Используй на основных экранах приложения для навигации, названия раздела и действий.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | style, title, subtitle, leading/trailing actions |
| Состояния | default, compact, large title, back |
| Поведение | scroll collapse/expand для large styles |
| Layout | safe area top, fixed heights per style |
| Flutter | SliverAppBar/AppBar + кастомные actions |
Top bar for bottom sheet
Top bar pattern for sheet header from Apple HIG Apple HIG
Что это: Верхняя панель внутри bottom sheet с заголовком и действиями.
Зачем: Упрощает ориентацию в контексте модальной панели.
Когда и как использовать: Используй в sheet-сценариях с несколькими шагами, подтверждением или дополнительными действиями.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | style, title, subtitle, leadingAction, trailingAction |
| Layout | grabber + header with safe area and stable height |
| Поведение | close/drag affordance, sync with sheet state |
| A11y | semantic title и доступные действия закрытия |
| Flutter | showModalBottomSheet + custom header widget |
Segmented control
Liquid Glass
Что это: Сегментированный переключатель режимов в одном контроле.
Зачем: Быстро переключает взаимно исключающие варианты без смены экрана.
Когда и как использовать: Используй для смены режима отображения, фильтра или типа данных при 2–5 опциях.
Характеристики
Коротко и по делу: ниже практические рекомендации, чтобы компонент был удобным и предсказуемым.
| Параметр | На что обратить внимание |
|---|---|
| API | mode(icon|label), size, count, stretched, activeIndex |
| Состояния | selected, unselected, pressed |
| Поведение | single selection + smooth thumb/segment transition |
| Layout | fixed height by size, width strategy fixed/stretched |
| Flutter | CupertinoSlidingSegmentedControl или кастомный segmented |