122 Heading
106 Heading
93 Heading
81 Heading
71 Heading
62 Heading
54 Heading
47 Heading
41 Accent
36 Accent
32 Accent
28 Body
24 Body
21 Body Основа
18 Label
16 Label
Content
/* Full Scale */
:root {
--font-size--label-1: 16px;
--font-size--label-2: 18px;
--font-size--body-1: 21px;
--font-size--body-2: 24px;
--font-size--body-3: 28px;
--font-size--accent-1: 32px;
--font-size--accent-2: 36px;
--font-size--accent-3: 41px;
--font-size--heading-1: 47px;
--font-size--heading-2: 54px;
--font-size--heading-3: 62px;
--font-size--heading-4: 71px;
--font-size--heading-5: 81px;
--font-size--heading-6: 93px;
--font-size--heading-7: 106px;
--font-size--heading-8: 122px;
}
/* Recommended Scale */
/* A curated selection for most common use cases. */
/* Feel free to mix and match tokens from either scale. */
:root {
--font-size--label-1: 16px;
--font-size--label-2: 18px;
--font-size--body-1: 21px;
--font-size--body-2: 24px;
--font-size--body-3: 28px;
--font-size--accent-1: 32px;
--font-size--accent-2: 41px;
--font-size--heading-1: 54px;
--font-size--heading-2: 62px;
--font-size--heading-3: 71px;
--font-size--heading-4: 81px;
--font-size--heading-5: 93px;
}
/* Mobile-first Scale */
/* Base values are set for mobile, then elegantly overridden */
/* at strategic breakpoints using variable reassignment */
/* within media queries. */
:root {
--font-size--label-1: 16px;
--font-size--label-2: 18px;
--font-size--body-1: 21px;
--font-size--body-2: 24px;
--font-size--body-3: 28px;
--font-size--accent-1: 32px;
--font-size--accent-2: 36px;
--font-size--accent-3: 41px;
--font-size--heading-1: 47px;
--font-size--heading-2: 54px;
--font-size--heading-3: 62px;
--font-size--heading-4: 71px;
--font-size--heading-5: 81px;
--font-size--heading-6: 93px;
--font-size--heading-7: 106px;
--font-size--heading-8: 122px;
}