Мармеладыч
Дизайн-токены проекта из макета Figma
Типографика — Roboto (UI)
text-2xs · 10px / 1.1 · микро-подписи, бейджи
Мармеладыч 123
text-xs · 12px / 1.2 · caption
Мармеладыч 123
text-sm · 14px / 1.1 · body M
Мармеладыч 123
text-base · 16px / 1.2 · body L, кнопки (Bold)
Мармеладыч 123
text-lg · 20px / 1.1 · заголовок экрана (Bold)
Мармеладыч 123
text-xl · 24px / 1.2 · крупный заголовок / display S
Мармеладыч 123
Типографика — Inter (дисплейные цифры)
text-2xl · 32px / 1 · display · font-display font-semibold
+2500 XP
text-3xl · 40px / 1 · цифры XP · font-display font-semibold
+2500 XP
text-4xl · 50px / 1 · display L · font-display font-semibold
+2500 XP
Цвета — семантические
background
#FFFFFF
foreground
#42291A
primary
#42291A
secondary
#F2F2F2
accent
#FF7D9E
muted
#F2F2F2
muted-foreground
rgba(66,41,26,.6)
destructive
#FA2027
border
#E9E6E5
ring
#42291A
Цвета — бренд
brand-brown
#42291A
brand-pink
#FF7D9E
brand-pink-light
#FFC6D5
brand-pink-pastel
#FFE5EC
brand-orange
#FF7800
brand-amber
#FAC000
brand-yellow
#DEDE00
brand-lime
#A1C200
brand-blue
#47A8DB
success
#1FA62B
Тени
shadow-hero
0 0 30px rgba(66,41,26,.19)
shadow-card
0 6px 34px rgba(66,41,26,.12)
shadow-md
0 0 24px rgba(66,41,26,.10)
shadow-soft
0 0 12px rgba(66,41,26,.08)
shadow-low
0 6px 10px rgba(66,41,26,.06)
shadow-glow-pink
0 0 17px rgba(249,88,109,.31)
Радиусы
rounded-xs · 4px
rounded-md · 16px
rounded-lg · 24px
rounded-xl · 32px
rounded-2xl · 40px
rounded-3xl · 48px
rounded-4xl · 64px
Аватар
sm · 80px
default · 125px
lg · 160px
fallback