Style Kit Fonts Fonts

https://clamp.font-size.app/ | https://min-max-calculator.9elements.com/?16,24,320,1200

-

Title Fonts

values min 40 max 60 | clamp(2.5rem, 2.012rem + 2.44vw, 3.75rem);

[Display Title] Add Your Heading Text Here

values min 40 max 50 | clamp(2.5rem, 2.256rem + 1.22vw, 3.125rem);

[Title 1 H1] Add Your Heading Text Here

values min 35 max 45 | clamp(2.188rem, 1.944rem + 1.22vw, 2.813rem);

[Title 2 H2] Add Your Heading Text Here

values min 30 max 40 | clamp(1.875rem, 1.509rem + 1.83vw, 2.813rem);

[Title 3 H3] Add Your Heading Text Here

values min 25 max 30 | clamp(1.563rem, 1.441rem + 0.61vw, 1.875rem);

[Title 4 H4] Add Your Heading Text Here

values min 23 max 27 | clamp(1.438rem, 1.34rem + 0.49vw, 1.688rem);
[Title 5 H5] Add Your Heading Text Here
values min 20 max 24 | clamp(1.25rem, 1.152rem + 0.49vw, 1.5rem);
[Title 6 H6] Add Your Heading Text Here
values min 25 max 30 |clamp(1.563rem, 1.441rem + 0.61vw, 1.875rem);
[Overline/subheader] Add Your Heading Text Here
-

Text Fonts

values min 22 max 25 | clamp(1.375rem, 1.302rem + 0.37vw, 1.563rem);

[Display Text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 22 max 25 | clamp(1.375rem, 1.302rem + 0.37vw, 1.563rem);

[Large Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 16 max 18 | clamp(1rem, 0.951rem + 0.24vw, 1.125rem);

[Normal Text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 12 max 14 | clamp(0.75rem, 0.701rem + 0.24vw, 0.875rem);

[Small Text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 12 max 14 | clamp(0.75rem, 0.701rem + 0.24vw, 0.875rem);

[Caption] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 8 max 12 | clamp(0.5rem, 0.402rem + 0.49vw, 0.75rem);

[Button Text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 12 max 14 | clamp(0.75rem, 0.701rem + 0.24vw, 0.875rem);

[Fprn Label] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

values min 12 max 14 | clamp(0.75rem, 0.701rem + 0.24vw, 0.875rem);

[Form Style 16] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Style Kit Colors

Background

Site Background
Color code
|
Light Background
Color code
|
Dark Background
Color code
|
Background 4
Color code
|

Accent

Accent 1
Color code
|
Accent 2
Color code
|
Accent 3
Color code
|
Accent 4
Color code
|

Text

Titles
Color code
|
Normal Text
Color code
|
Secondary Text
Color code
|
Inverted Text
Color code
|

Supporting

Border
Color code
|
Color Style 14
Color code
|
Color Style 15
Color code
|
Color Style 16
Color code
|

Global Fonts

-

[Primary Font] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-

[Secondary Font] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-

[TextFont] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-

[Accent Font] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-

Systen Colors

Primary
Color code
|
Secondary
Color code
|
Accent
Color code
|
Text
Color code
|