Adanat — Design Tokens

Figma UI Kit: Color Semantic · Typography backend · Radius · Sizing · Spacing

Colors

Actions / Primary

bg

#009E51

bg-hover

#0A9451

bg-active

#1A8450

bg-disabled

#F5F5F7

text

#FFFFFF

text-disabled

#A2A2A3

bg 2

#009E51

bg-hover 2

#0A9451

bg-active 2

#1A8450

Actions / Secondary

bg

#FFFFFF

border

#A4B4BD

text

#1F282C

bg-hover

#F5F5F7

text-hover

#0A9451

text-click

#1A8450

disabled

#A2A2A3

Actions / Tertiary

bg

#FFFFFF

text-default

#009E51

bg-hover

#F5F5F7

text-hover

#0A9451

text-click

#1A8450

disabled

#A2A2A3

Background

primary

#FFFFFF

secondary

#F5F5F7

accent-default

#009E51

accent-hover

#0A9451

accent-click

#1A8450

inverse

#1F282C

Border

strong

#D7DFEC

disabled

#A2A2A3

error

#F93232

accent

#009E51

focused

#1F282C

Text

primary

#1F282C

secondary

#7A919D

muted

#A2A2A3

inverse

#FFFFFF

error

#F93232

success

#0BDC04

Text / accent

default

#009E51

hover

#0A9451

click

#1A8450

Icon

primary

#1F282C

secondary

#7A919D

muted

#A2A2A3

inverse

#FFFFFF

error

#F93232

success

#009E51

Radius

rounded-10 · 10px

rounded-14 · 14px

rounded-20 · 20px

rounded-100 · 100px

Sizing

w-color-card · h-color-card · 200×200

Spacing — Primitive

p-0

0px

p-0.5

2px

p-1

4px

p-1.5

6px

p-2

8px

p-3

12px

p-4

16px

p-5

20px

p-6

24px

p-8

32px

p-10

40px

p-12

48px

p-14

56px

p-16

64px

p-20

80px

p-24

96px

p-30

120px

p-40

160px

Проверка: Tailwind дефолты сброшены (`--spacing-*: initial`). Только Figma токены.

Spacing — Semantic

Component / button

Component / card

p-card-padding

24px

gap-card-gap-16

16px between rows

gap-card-gap-40

40px between rows

Component / input

Layout / padding

p-layout-padding-sm · 16

p-layout-padding-md · 24

p-layout-padding-lg · 40

Icons (Figma 9003:41963) · 101 SVG

Использование

name="heart"
.text-text-error
.text-text-accent
:size="48"
:colorize="false"
name="12/check-circle"

Все 24px иконки (Tailwind text-text-primary)

3d
48px-icons
action
arrow-down
arrow-left
arrow-rigth
arrow-up
cart
cart-filled
chevron-down
chevron-left
chevron-right
chevron-up
clock
close
delete
eye
filtr
folder
heart
home
loading
minus
on-eye
paper-clip
plus
search
status
status-check
user

16px (text-text-secondary)

12px (text-text-muted)

40px / Component 5 (без colorize — родные цвета figma)

3d-formats
list
manager
offers
project-design

48px (без colorize)

add-to-favorites
added-to-favorites
back-button
chevron
menu
variant2
variant3
variant4

Badges (Figma 9132:48376)

4 варианта из Figma

txt txt txt В наличии

Свободное наполнение

Новинка Скидка 20% Подробнее В избранном

⚠️ Figma gap=10px не из Spacing primitive (между 2=8 и 3=12) — arbitrary gap-[10px].

Buttons (Figma 9001:34446)

Primary · Normal

Primary · Medium

Secondary · Normal

Secondary · Medium

Tertiary · Normal

Tailwind merge (custom class override)

Иконки через prop icon-right / icon-left (AppIcon-имя). Hover — наведением. Кастомные классы мерджятся через tailwind-merge без конфликтов.

Container (layout breakpoints)

AppContainer · mobile (<768 → 100% − padding 16)

Зелёный блок — содержимое контейнера. Серая зона по бокам — viewport padding (отступы от края экрана).

Breakpoints: tablet:768 · laptop:1440 · desktop:1920. Max-widths: max-w-mobile343 · max-w-tablet720 · max-w-laptop1280 · max-w-desktop1600. Padding из существующих spacing-gutter-site-* токенов.

Inputs (Figma 9079:54750)

5 состояний: Inactive · Focused · Disabled · Error · Success

ФИО
ФИО
ФИО
ФИО
Заполните данные
ФИО
Успешно

С иконкой слева (input+icon)

Email
Email
Ошибка
Email
Успешно

Password (toggle через eye/on-eye)

Пароль
Пароль
Неверный пароль

Search Input (composite)

⚠️ Floating label: появляется при фокусе/значении/error/success/disabled. Inactive — только placeholder. Размер label 13px и leading 1.4 — вне Typography backend (Figma).

Controls — Checkbox / Radio (Figma 9146:55421)

Checkbox · 8 состояний

Checkbox · Label + description

Radio · 7 состояний (через 1 группу)

Radio · Label + description

⚠️ Радиус checkbox=4px (arbitrary, не из таблицы Radius). Иконка-галочка — inline SVG (Figma asset URL временный).

Typography — Desktop scale

text-desktop-3xl — 46px Bold

text-desktop-2xl — 30px Semibold

text-desktop-xl — 24px Semibold

text-desktop-base — 18px Regular

text-desktop-sm — 16px Regular Secondary

text-desktop-xs — 14px Regular Muted

Typography — Mobile scale

text-mobile-5xl — 34px Bold

text-mobile-4xl — 26px Semibold

text-mobile-3xl — 22px Semibold

text-mobile-2xl — 20px Bold

text-mobile-xl — 18px Regular

text-mobile-base — 16px Regular

text-mobile-sm — 14px Regular

text-mobile-xs — 12px Regular Muted