Style Guide
Action
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Primary
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Secondary
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Accent
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Base
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Neutral
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Seminar Apricot
Kochkurs orange
Coaching rosered
Porridge pink
Elements on Light background
Elements on dark background
Typography
Headline (h1)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h2)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h3)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h4)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h5)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h6)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
text--xxl
text--xxl
text--m
text
text--s
text--xs
Card Heading
This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
buttonCard Heading
This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
button
Card Heading
This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
buttongrid--1
grid--1-2
grid--1-3
grid--2
grid--2-1
grid--2-3
grid--auto-2
grid--3
grid--3-1
grid--3-2
grid--4
grid--5
grid--5
col-span-3
grid--6
grid--6
col-span-4