Дизайн-система "Твой Дом"

Выгружено из макета Figma. Обновить - pnpm figma:tokens и pnpm figma icons.

Палитра

orange

orange-50
#FFF3EF
orange-100
#FFE7DE
orange-200
#FFCEBE
orange-300
#FFB69D
orange-400
#FF9D7D
orange-500
#FF855C
orange-600
#CF6D4D
orange-700
#9F563D
orange-800
#6F3E2E
orange-900
#3F271F

green

green-50
#CFEBDF
green-100
#CCEBD6
green-200
#99D6AD
green-300
#66C285
green-400
#33AD5C
green-500
#009933
green-600
#037D2C
green-700
#316B35
green-800
#09461E
green-900
#0C2B16

turquoise

turquoise-50
#E8F4F2
turquoise-100
#D1EAE5
turquoise-200
#A3D5CC
turquoise-300
#75BFB2
turquoise-400
#47AA99
turquoise-500
#19957F
turquoise-600
#177A69
turquoise-700
#156052
turquoise-800
#13453C
turquoise-900
#112A26

yellow

yellow-50
#FFFCEA
yellow-100
#FFF8D5
yellow-200
#FFF1AB
yellow-300
#FFEB81
yellow-400
#FFE457
yellow-500
#FFDD2D
yellow-600
#CFB427
yellow-700
#DFA205
yellow-800
#6F621B
yellow-900
#3F3815

pink

pink-50
#FAEBF0
pink-100
#F5D6E0
pink-200
#EBADC2
pink-300
#E085A3
pink-400
#D65C85
pink-500
#CC3366
pink-600
#A62C55
pink-700
#812543
pink-800
#5B1E32
pink-900
#351621

neutral

neutral-0
#FFFFFF
neutral-50
#FAFAFA
neutral-100
#F5F5F5
neutral-200
#E8E8E8
neutral-300
#D0D0D0
neutral-400
#B0B0B0
neutral-500
#989898
neutral-600
#808080
neutral-700
#606060
neutral-800
#424242
neutral-900
#242424
neutral-1000
#121212

beige

beige-0
#F8F7F5
beige-50
#F0EDE1
beige-100
#DED9CA
beige-200
#D4CEB7
beige-300
#CAC3AC
beige-400
#BAB192
beige-500
#9B906D
beige-600
#918661
beige-700
#80744E
beige-800
#706337
beige-900
#574B20
beige-1000
#473C11

Роли

Ссылаются на палитру. В вёрстке предпочтительны они: смена оттенка роли не требует правок в компонентах.

text-6
beige-500
tertiary-2
orange-800
bg-dark
orange-900
icon-secondary-5
#EC2227
bg-dark-beige
beige-0
bg-lite-grey-2
neutral-100
secondary-1
beige-400
icon-secondary-4
neutral-900
icon-tertiary-1
neutral-300
secondary-5
beige-500
icon-secondary-3
#14150F
bg-white
neutral-0
bg-medium-grey
neutral-300
icon-secondary-6
neutral-500
border
neutral-100
text
neutral-900
secondary-2
orange-600
bg-light-grey
neutral-50
secondary-4
yellow-500
border-2
neutral-300
text-5
neutral-0
icon-tertiary-1-2
yellow-700
bg-dark-grey
neutral-700
primary-3
neutral-900
text-2
orange-900
secondary-3
turquoise-300
border-hover
beige-100
text-3
neutral-600
icon-primary
green-500
tertiary-1
green-100
border-active
beige-200
icon-secondary-2
neutral-0
primary-1
green-500
text-secondary-2
beige-800
text-secondary-1
green-400
border-1
green-800
text-4
#A7A7A7
Вне палитры - 3

Эти роли не сводятся ни к одному примитиву. Расхождение в дизайн-системе, стоит вернуть дизайнеру.

  • #EC2227 - Иконки/color-icon-secondary-5
  • #14150F - Иконки/color-icon-secondary-3
  • #A7A7A7 - Текст/color-text-4

Типографика

text-content-14-regular · 14/18 · w400
Съешь ещё этих мягких французских булок
text-content-14-bold · 14/18 · w700
Съешь ещё этих мягких французских булок
text-content-16-semibold · 16/22 · w600
Съешь ещё этих мягких французских булок
text-content-16-medium · 16/22 · w500
Съешь ещё этих мягких французских булок
text-content-20-semibold · 20/24 · w600
Съешь ещё этих мягких французских булок
text-content-22-medium · 22/28 · w500
Съешь ещё этих мягких французских булок
text-content-12-regular · 12/16 · w400
Съешь ещё этих мягких французских булок
text-content-20-bold · 20/24 · w700
Съешь ещё этих мягких французских булок
text-content-12-semibold · 12/16 · w600
Съешь ещё этих мягких французских булок
text-content-18-medium · 18/24 · w500
Съешь ещё этих мягких французских булок
text-content-10-regular · 10/12 · w400
Съешь ещё этих мягких французских булок
text-content-page-title · 32/38 · w600
Съешь ещё этих мягких французских булок
text-content-12-bold · 12/16 · w700
Съешь ещё этих мягких французских булок
text-content-14-medium · 14/18 · w500
Съешь ещё этих мягких французских булок
text-content-16-regular · 16/22 · w400
Съешь ещё этих мягких французских булок
text-content-22-semibold · 22/28 · w600
Съешь ещё этих мягких французских булок
text-content-14-semibold · 14/18 · w600
Съешь ещё этих мягких французских булок
text-main-card-title · 24/26 · w500
Съешь ещё этих мягких французских булок
text-main-subsection · 32/38 · w500
Съешь ещё этих мягких французских булок
text-main-hero · 60/60 · w400
Съешь ещё этих мягких французских булок
text-main-navigation · 18/20 · w400
Съешь ещё этих мягких французских булок
text-main-lead · 20/30 · w400
Съешь ещё этих мягких французских булок
text-main-button-18 · 18/20 · w500
Съешь ещё этих мягких французских булок
text-main-promo-text · 24/26 · w400
Съешь ещё этих мягких французских булок
text-main-promo-title · 44/48 · w500
Съешь ещё этих мягких французских булок
text-main-story-label · 14/16 · w400
Съешь ещё этих мягких французских булок
text-main-button-16 · 16/18 · w500
Съешь ещё этих мягких французских булок
text-main-benefit-text · 16/20 · w300
Съешь ещё этих мягких французских булок
text-main-section · 48/48 · w500
Съешь ещё этих мягких французских булок

Кнопки

Значения взяты из autolayout через Dev Mode: высота 52 или 40, боковой отступ 34, зазор 16, радиус 90, обводка 2px. Наведение и нажатие у каждого варианта свои - в макете они не выводятся сдвигом по шкале палитры. У размера 52 текст в нижнем регистре принудительно, у 40 - обычный.

Заливка · светлая btn_52_lite

Заливка · тёмная btn_52_dark

Заливка · брендовая btn_52_green

Заливка · бежевая btn_52_beg

Обводка · светлая btn_52_lite_stroke

Обводка · тёмная btn_52_dark_stroke

Карточки товара

Одна сущность покрывает шесть актуальных наборов Figma: mobile medium, mobile big, account medium и desktop small/medium/big. На узком viewport размеры и типографика переключаются на мобильные значения.

Карточка партнёра

Компонент card-new: default и skeleton, мобильная и десктопная геометрия переключаются на ширине 1024px.

Декор и интерьер

Для дома и сада

Текстовые кнопки

Отдельный компонент, а не вариант обычной кнопки: у неё нет ни фона, ни рамки, ни отступов, ни высоты, а зазор 12 вместо 16. Наведение уводит текст в бежевый, нажатие - в тёмно-коричневый.

Чипы

Отступы 16/9 и текст 14 SemiBold в обоих видах, высота 36 - и с рамкой, и с заливкой. Круглый чип (2270:55027) выбирает способ получения, дату и интервал; прямоугольный со скруглением 8 (2518:68952) переключает подборки, а группой стоит на подложке (2518:68973). Наведите курсор: невыбранный чип заливается бежевым.

Круглые кнопки

Три размера покупки 40/48/64 и отдельные цветовые сценарии info/delete. Наведение и нажатие повторяют component sets, подпись для скринридера обязательна: у кнопки нет видимого текста.

Поле поиска

Три способа поиска в одном поле по FR-SRCH: текст, голос и фотография. Подсказки запрашиваются через 500 мс после последнего нажатия (UI-14), по Enter - сразу. Две темы: на светлом фоне и поверх изображения.

светлая тема
тёмная тема - на подложке
без голоса и фото

Счётчик количества

Число меняется мгновенно, а событие отправки уходит через 500 мс - одно, последнее (UI-14 из ТЗ). Нажми "плюс" несколько раз подряд и посмотри на строку ниже: она обновится один раз.

Размеры различаются не только масштабом: у 52 фон бежевый и фиксированная ширина 300, у 40 - светло-серый и ширина по содержимому. Так в макете.

52 · btn_count_52
1
40 · btn_count_40
1
карточка · 120x40 → 200x64
1
компактная карточка · 120x40 → 132x48
1
предел достигнут · max
5
заблокирован · лимит
2
Последняя отправка на сервер: —

Иконки - 63

Толщина линии управляется у 45 из 63: у остальных контур сведён в заливку, обводки там нет.

arrow-down-32
arrow-left-32
arrow-right-32
arrow-up-32
calendar-20
calendar-24
camera-24
check-20
chevron-down-32
clock-24
clock-24-2
close-24
cookie-24
copy-20
copy-24
down-20
down-24
down-32
filter-24
help-icon-20
info-24
info-24-2
info-32
katalog-big-20
katalog-big-24
katalog-big-24-24
katalog-small-20
katalog-small-24
left-20
left-24
like-20
lock-24
logout-24
menu-bascet-32
menu-burger-32
menu-like-32
menu-search-20
menu-search-24
menu-search-32
menu-user-32
orders-20
pen-24
phone-16
place-24
right-20
right-24
share-20
shopping-bag-24
star-20
trash-24
up-20
up-24
up-32
user-24
vois-24
vois-48
pay-card-18
pay-sbp-18
pay-parts-18
pay-credit-18
place-brand-24
delivery-18
user-outline-24

Сетка

Брейкпоинт Колонки Gutter Margin Контент
320448304
375448359
76862032704
102462032960
12801220401200
14401220401360
160012201201360
192012201201680