Design Tokens Demo
Полная демонстрация всех цветов, типографики и отступов
Цветовая схема
Blue
blue-50
#F2F9FF
blue-100
#E8F1FB
blue-200
#BED1E8
blue-300
#7EA6D5
blue-400
#3366A3
blue-500
#00408C
blue-600
#003370
blue-700
#002654
blue-800
#001E41
Green
green-50
#F2F9EC
green-100
#E5F3D9
green-200
#D9EBBF
green-300
#C0DD94
green-400
#9DC94D
green-500
#85BC21
green-600
#6A961A
green-700
#435E11
green-800
#1B2607
Gray
gray-50
#F8F8F8
gray-100
#E7E7E8
gray-200
#D1D2D4
gray-300
#BCBDC0
gray-400
#939598
gray-500
#6E7072
gray-600
#4A4B4C
gray-700
#1D1E1E
gray-800
#1D1E1E
Additional Colors
additional-violet
#8B3282
additional-red
#E02D2D
additional-orange
#EF8522
additional-lime-200
#259740
additional-lime-100
#68BD49
additional-cyan-300
#2EA4C0
additional-cyan-200
#5EC8E2
additional-cyan-100
#7ACAE4
Semantic Colors
danger
#E02D2D
success
#68BD49
warning
#EF8522
info
#3366A3
Типографика
Размеры шрифта (font-size)
xs (0.8rem)
Пример текста размером xs
s (1.2rem)
Пример текста размером s
md (1.4rem)
Пример текста размером md
lg (1.6rem)
Пример текста размером lg
xl (1.8rem)
Пример текста размером xl
3xl (2.4rem)
Пример текста размером 3xl
4xl (2.8rem)
Пример текста размером 4xl
5xl (3.2rem)
Пример текста размером 5xl
7xl (4rem)
Пример текста размером 7xl
Насыщенность шрифта (font-weight)
font-weight: 400
Обычный текст с насыщенностью 400 — Regular
font-weight: 500
Текст средней насыщенности 500 — Medium
font-weight: 600
Полужирный текст с насыщенностью 600 — Semi Bold
font-weight: 700
Жирный текст с насыщенностью 700 — Bold
font-weight: 800
Экстра-жирный текст с насыщенностью 800 — Extra Bold
Шрифты (font-family)
Font Family Body (TT Neoris)
Съешь ещё этих мягких французских булок
Font Family Mono (Roboto Mono)
The quick brown fox jumps over the lazy dog
📏 Spacing (Отступы)
xxs (0.8rem)
xs (1.2rem)
s (1.6rem)
m (2rem)
l (2.4rem)
xl (3.2rem)
2xl (4rem)
3xl (4.8rem)
4xl (5.6rem)
5xl (6.4rem)
6xl (7.2rem)
7xl (9.6rem)
8xl (12.4rem)
9xl (14.8rem)
10xl (20rem)
Border Radius (Скругления)
none
0
sharp
0.2rem
xxs
0.4rem
xs
0.4rem
sm
0.8rem
default
1.2rem
md
1.6rem
lg
2rem
xl
2.4rem
2xl
2.8rem
3xl
3.2rem
4xl
5.6rem
5xl
6.4rem
6xl
12.8rem
full
9999px