UI Kit
Дизайн-система маркетплейса teeu · v1.0 · плотный торговый стиль
01 · ЛОГОТИП
Основной · на светлом фоне
Монохром белый · тёмные поверхности
· Мин. высота в интерфейсе — 28px
· Охранная зона — ½ высоты знака
· Не перекрашивать глаза и улыбку
· В шапке — 34px, в футере — 30px
· Охранная зона — ½ высоты знака
· Не перекрашивать глаза и улыбку
· В шапке — 34px, в футере — 30px
02 · ЦВЕТА
Бренд
{{ c.name }}
{{ c.hex }}
{{ c.use }}
Нейтральные
{{ c.name }}
{{ c.hex }}
{{ c.use }}
Семантические
Aa
{{ c.name }}
{{ c.hex }} / {{ c.bg }}
03 · ТИПОГРАФИКА
Golos Text
Google Fonts · веса 400 / 500 / 600 / 700 / 800 · кириллица
{{ t.name }}
{{ t.spec }}
{{ t.sample }}
04 · КНОПКИ
Primary
Secondary
На тёмном / инверсия
Иконочные 40×40
ghost · outlined
Поля ввода и поиск
чекбоксы 16px · accent #1E4FD8
степпер количества
05 · БЕЙДЖИ И ЧИПЫ
Скидка
−15%до −25%
Статусы
Под заказВ наличииОсталось мало
Счётчики
3115px · синий у корзины, красный у уведомлений
Чипы
Рейтинг
★4.8· 12 отзывов
06 · КАРТОЧКА ТОВАРА
Анатомия
1. Фото 1:1, бейдж скидки слева сверху2. Цена — первая и самая жирная (17px / 800), старая цена зачёркнута рядом
3. Название 13px, максимум 2 строки, обрез многоточием
4. Рейтинг ★ + продавец одной строкой 12px
5. Кнопка «В корзину» — светло-синяя заливка, прижата к низу
Сетка: 6 колонок · gap 12px · радиус 8px · hover: бордер темнее + тень 0 6px 18px rgba(20,30,60,.09)
07 · ШАПКА
08 · СЕТКА, РАДИУСЫ, ТЕНИ
Сетка и отступы
Контейнер: max-width 1320px
Поля: 24px · gap сетки: 12px
Товары: 6 колонок
Шаг отступов: 4 / 8 / 12 / 16 / 24 / 32
Поля: 24px · gap сетки: 12px
Товары: 6 колонок
Шаг отступов: 4 / 8 / 12 / 16 / 24 / 32
Радиусы
6
8
12
6 — бейджи · 8 — кнопки, поля, карточки · 12 — крупные панели и баннеры
Тени и бордеры
хайрлайн
hover
По умолчанию — только бордер #E7E9EE. Тень появляется на hover и у стики-панелей: 0 4px 16px rgba(20,30,60,.05)