Colors

Primary
The action color for your website (button,links, etc.)
Secondary
An alternate to the primary color.
Accent
Typically the least used color on the website
Base
Typically the darkest color or background color for the website
Shade
Default black base. Adjust if you want to slightly change it hue.

Primary background color

bg--primary
bg--primary-comp
bg--primary-dark
bg--primary-hover
bg--primary-light
bg--primary-medium

Secondary background color

bg--secondary
bg--secondary-comp
bg--secondary-dark
bg--secondary-hover
bg--secondary-light
bg--secondary-medium

Accent background color

bg--accent
bg--accent-comp
bg--accent-dark
bg--accent-hover
bg--accent-light
bg--accent-medium

Base background color

bg--base
bg--base-comp
bg--base-dark
bg--base-hover
bg--base-light
bg--base-medium

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.

H1 This is Heading 1

H2 This is Heading 2

H3 This is Heading 3

H4 This is Heading 4

H5 This is Heading 5
H6 This is Heading 6

Font

aA

This is a block of text. Double-click this text to edit it.

Radius

Sets border radius to XS radius (based on radius scale)

Class imput: rounded--xs

Variable imput: var(--radius-xs)
Sets border radius to S radius (based on radius scale)

Class imput: rounded --s

Variable imput: var(radius--s)
Sets border radius to M radius (based on radius scale)

Class imput: rounded --m

Variable imput: var(radius--m)
Sets border radius to L radius (based on radius scale)

Class imput: rounded --l

Variable imput: var(radius--l)
Sets border radius to XL radius (based on radius scale)

Class imput: rounded --xl

Variable imput: var(radius--xl)
Sets border radius to XXL radius (based on radius scale)

Class imput: rounded --xxl

Variable imput: var(radius--xxl)