DIMETRA — Дизайн-система

Цветовая палитра

Все цвета определены в теме приложения. Нажмите на свотч, чтобы скопировать HEX-код.

Основные

Бирюзовый

teal · #00817f

Светло-бирюзовый

tealLight · #00b29d

Пурпурный

purple · #872258

Малиновый

crimson · #ba0034

Нейтральные

Фон

bg · #f5f4f2

Поверхность

surface · #edecea

Карточка

card · #ffffff

Граница

border · #e0deda

Текст

text · #1a1c1b

Вторичный

sub · #6b7370

Приглушённый

muted · #9aa09d

Утилитарные

Зелёный

green · #22c55e

Жёлтый

yellow · #eab308

Типографика

Семь текстовых вариантов покрывают все потребности интерфейса. Заголовки — Jost (fallback для Formular), основной текст — Nunito Sans (fallback для Avenir Next Cyr).

Заголовок первого уровня

h1
Formular Bold → Jost 700
28px / 34px

Заголовок второго уровня

h2
Formular Bold → Jost 700
21px / 26px

Подзаголовок или навигация

h3
Formular → Jost 400
17px / 22px

Основной текст приложения. Используется для описаний, параграфов и любого длинного контента.

body
Avenir Next Cyr → Nunito Sans 400
15px / 20px

Акцентный текст для кнопок и выделений

bodyMed
Avenir Next Cyr Medium → Nunito Sans 500
15px / 20px

Подпись, вспомогательная информация, даты

caption
Avenir Next Cyr → Nunito Sans 400
13px / 18px

Мелкий текст, сноски

small
Avenir Next Cyr → Nunito Sans 400
11px / 14px

Метка категории

label
Avenir Next Cyr Medium → Nunito Sans 500
10px / 12px · tracking 1px · uppercase

Шрифты: В приложении используются коммерческие Formular и Avenir Next Cyr. В веб-версии и прототипах — Google Fonts fallback: Jost (→ Formular), Nunito Sans (→ Avenir Next Cyr).

Компоненты

Основные UI-элементы мобильного приложения с точными размерами и цветами из темы.

Кнопки

Высота 52px · Радиус 14px · Шрифт Nunito Sans Medium 15px
Primary: bg #872258 · Action: bg #00817f · Secondary: border #e0deda · Danger: bg #ba003414 border #ba00344D

Карточка

Заголовок карточки

Контент внутри карточки с отступами. Белый фон, граница 1px, скругление 14px.

Фон #ffffff · Граница 1px #e0deda · Радиус 14px · Padding 20px · Hover: тень

Поля ввода

Default

Focused

Неверный формат email

Высота 52px · Радиус 14px · Фон #f5f4f2 · Focus: border #00817f · Error: border #ba0034

Бейджи уведомлений

3 12 99+

Фон #ba0034 · Минимум 20×20px · Радиус 10px · Обводка 1.5px white

Аватары

АВ

МК

ДС

Размеры: 32px, 44px, 56px · Круглые · Инициалы fontSize = size × 0.38

Прогресс-бар

25%

60%

100%

Высота 4px · Track: #e0deda · Fill: #00817f · Радиус 2px

Круговой прогресс

3/7

5/7

80×80px · Stroke 8px · Track: #e0deda · Fill: #00817f · Round caps

Статусы

Завершён

В работе

Просрочен

Ожидание

Точка 8×8px · done: #22c55e · active: #eab308 · overdue: #ba0034 · pending: #9aa09d

Карточки меню

Радиус 18px · Stripe 3px · Icon circle 52px · Accent bg: color + 1F (12% alpha)

Бренд

Цветовая палитра

Типографика

Отступы и скругления

Компоненты

Иконки