This page serves as a style guide for your Button, Headline and Text Styles. The styles can be configured under Online Store → Customize → Theme Settings.
COLORS
ci1
#101010
#3c3c3c
#606060
#8e8e8e
#c5c5c5
#e1e1e1
#f6f6f6
ci2
#131e53
#243276
#304095
#4452a0
#5c6ac4
#b3bcf5
#f4f5fa
ci3
#0f4e0e
#30812e
#32902f
#48ad45
#6ac567
#8adb88
#c6f7c4
Headline Style 1

Headline demo text

min-font-size: 3rem, max-font-size: 4.1rem, font-weight: 400, line-height: 1.1
Headline Style 2

Headline demo text

min-font-size: 2.8rem, max-font-size: 3.8rem, font-weight: 400, line-height: 1.1
Headline Style 3

Headline demo text

min-font-size: 2.6rem, max-font-size: 3.6rem, font-weight: 400, line-height: 1.1
Headline Style 4

Headline demo text

min-font-size: 2.4rem, max-font-size: 3.4rem, font-weight: 400, line-height: 1.1
Headline Style 5
Headline demo text
min-font-size: 2.2rem, max-font-size: 3.2rem, font-weight: 500, line-height: 1.1
Headline Style 6
Headline demo text
min-font-size: 2rem, max-font-size: 3rem, font-weight: 500, line-height: 1.1
Headline Style 7
Headline demo text
min-font-size: 1.8rem, max-font-size: 2.8rem, font-weight: 500, line-height: 1.1
Headline Style 8
Headline demo text
min-font-size: 1.6rem, max-font-size: 2.6rem, font-weight: 500, line-height: 1.1
Headline Style 9
Headline demo text
min-font-size: 1.4rem, max-font-size: 2.4rem, font-weight: 500, line-height: 1.1
Headline Style 10
Headline demo text
min-font-size: 1.2rem, max-font-size: 2.2rem, font-weight: 500, line-height: 1.1
Text Style 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 2.5rem, max-font-size: 3.5rem, font-weight: 400, line-height: 2.8
Text Style 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 1.5rem, max-font-size: 1.8rem, font-weight: 200, line-height: 1.5
Text Style 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 2rem, max-font-size: 2rem, font-weight: 400, line-height: 1.5
Text Style 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 2rem, max-font-size: 2rem, font-weight: 400, line-height: 1.5
Text Style 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 2rem, max-font-size: 2rem, font-weight: 400, line-height: 1.5
Text Style 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, similique, non voluptates pariatur assumenda amet cumque sit et vel officiis voluptate totam quis est deserunt veniam! Consectetur dolorem nihil totam.

min-font-size: 2rem, max-font-size: 2rem, font-weight: 400, line-height: 1.5
Button Style 1
Button Style 2
Button Style 3
Button Style 4
Button Style 5
Button Style 6
Button Style 7
Button Style 8
Button Style 9
Button Style 10
Icons
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.