Colors
Black:
#000
Light Black:
#1f1f1f
White:
#fff
Teal Green:
#00635b
Teal Green 80:
#33827c
Teal Green 60:
#66A19d
Teal Green 40:
#99c1bd
Teal Green 30:
#b2d0cd
Teal Green 20:
#cce0de
Teal Green 10:
#e5efee
Dark Grey:
#717c7d
Dark Grey 80:
#8d9697
Dark Grey 60:
#aab0b1
Dark Grey 40:
#c6cbcb
Dark Grey 30:
#d4d7d8
Dark Grey 20:
#e3e5e5
Dark Grey 10:
#f1f2f2
Yellow:
#c4b200
Light Grey:
#eee
Gold:
#b3a369
Light Gold:
rgba(#b3a369, .03)
Sand:
#e8e3d3
Logo Green:
#014919
Orange:
#d57800
Red:
#be0000
Light Green:
#74aa50
Color Class: .color-x
Background Color Class: .bg-color-x
Both classes are responsive: .color-$breakpoint-x, .bg-color-$breakpoint-x
Colors: black, white, dark-grey, teal-green, yellow, gold, light-gold, sand, logo-green, orange, red, light-green
Headings

Heading 1

Class: .h1
Desktop: 100px / 1
Mobile: 64px / 1.2

Heading 2

Class: .h2
Desktop: 62px / 1
Mobile: 48px / 1.4

Heading 3

Class: .h3
Desktop:50px / 1.2
Mobile: 38px / 1.4

Heading 4

Class: .h4
Desktop:35px / 1.2
Desktop:30px / 1.4
Heading 5
Class: .h5
Desktop:25px / 1.2
Mobile:25px / 1.4
Heading 6
Class: .h6
Desktop:21px / 1.3
Mobile:21px / 1.4
Texts

Body / Default: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate. 

Class: .text
Desktop: 18px / 1.5
Mobile: 16px / 1.5

Body 2: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate. 

Class: .text-sm, .body-2
Desktop: 16px / 1.5
Mobile: 14px / 1.5

Subtitle 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aperiam repellendus adipisci. Tempore, suscipit temporibus, velit similique voluptas, distinctio nemo nostrum iure corporis repellat perferendis. Accusantium ad minus quam debitis.

Class: .text-subtitle-1
Desktop: 36px / 1.3
Mobile: 21px / 1.4

Subtitle 1 Regular: Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsa alias in tempora necessitatibus laudantium optio aperiam corrupti, similique accusantium iure.Architecto omnis id reiciendis explicabo dolor! Exercitationem, eius eos.

Class: .text-subtitle-1-regular
Desktop: 36px / 1.3
Mobile: 21px / 1.4

Subtitle 2: Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aperiam repellendus adipisci. Tempore, suscipit temporibus, velit similique voluptas, distinctio nemo nostrum iure corporis repellat perferendis. Accusantium ad minus quam debitis.

Class: .text-subtitle-2
Desktop: 24px / 1.3
Mobile: 21px / 1.4

Subtitle 2 Regular: Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsa alias in tempora necessitatibus laudantium optio aperiam corrupti, similique accusantium iure.Architecto omnis id reiciendis explicabo dolor! Exercitationem, eius eos.

Class: .text-subtitle-2-regular
Desktop: 24px / 1.3
Mobile: 21px / 1.4

Subtitle 3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aperiam repellendus adipisci. Tempore, suscipit temporibus, velit similique voluptas, distinctio nemo nostrum iure corporis repellat perferendis. Accusantium ad minus quam debitis.

Class: .text-subtitle-3
Desktop: 21px / 1.4
Mobile: 18px / 1.4

Subtitle 3 Regular: Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsa alias in tempora necessitatibus laudantium optio aperiam corrupti, similique accusantium iure.Architecto omnis id reiciendis explicabo dolor! Exercitationem, eius eos.

Class: .text-subtitle-3-regular
Desktop: 21px / 1.4
Mobile: 18px / 1.4

Subtitle 4: Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aperiam repellendus adipisci. Tempore, suscipit temporibus, velit similique voluptas, distinctio nemo nostrum iure corporis repellat perferendis. Accusantium ad minus quam debitis.

Class: .text-subtitle-4
Desktop: 18px / 1.4

Subtitle 4 Regular: Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsa alias in tempora necessitatibus laudantium optio aperiam corrupti, similique accusantium iure.Architecto omnis id reiciendis explicabo dolor! Exercitationem, eius eos.

Class: .text-subtitle-4-regular
Desktop: 18px / 1.4

Caption: Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aperiam repellendus adipisci. Tempore, suscipit temporibus, velit similique voluptas, distinctio nemo nostrum iure corporis repellat perferendis. Accusantium ad minus quam debitis.

Class: .text-caption
12px / 1.5

Overline: Lorem ipsum.

Class: .text-overline
10px / 1.5

Button: Lorem ipsum.

Class: .text-button
16px / 1

Tag: Lorem ipsum.

Class: .text-tag
Desktop: 16px / 1.4
Mobile: 12px / 1.4

Link: Lorem ipsum.

Class: .text-link
18px / 1.5
Buttons 




Class: .button--primary
Variants: .yellow, .white, .black / button--primary-$color
State: .active



Class: .button--secondary
Variants: .white, .black / .button--secondary-$color
State: .active




Class: .button--primary-icon
Variants: .yellow, .white, .black / .button--primary-icon-$color
State: .active



Class: .button--secondary-icon
Variants: .white, .black / .button--secondary-icon-$color
State: .active




Class: .button--primary-icon-only
Variants: .yellow, .white, .black / .button--primary-icon-only-$color
State: .active



Class: .button--secondary-icon-only
Variants: .white, .black / .button--secondary-icon-only-$color
State: .active


Class: .button--accordion
State: .open
Tags
Tag Default
Tag Yellow
Tag Black
Tag White
Tag Grey
Class: .tag
Variants: .yellow, .black, .white, .grey
State: .active
Class: .tag-icon
Variants: .yellow, .black, .white, .grey
State: .active
Inputs 
Class: input--[$states]
States: .error, .warning, .success
Class: input--dark, input--[$states]
States: .error, .warning, .success
Class: .checkbox-label
States: input:disabled
Class: .radio-label
States: input:disabled



Creation: data-js="dropdown"
Variants: data-js-theme="$theme"
Themes: grey, black
Multiple placeholder: data-js-placeholder="My Placeholder"
Search: data-js-search (works only for non multiple)
Fields

* is required


Checkbox Field

Radio Field 

Class: .field
Variants: .select, .checkbox, .radio, .required
Usage: wrapper around label and input
Class: .checkbox-group
Class: .radio-group
Heading Lines

Top





Bottom





Left





Right





Top Left 





Creation: data-js="heading-line"
Class: .heading-line--$variant
Variants: top, bottom, left, right, top-left
Color Variants: current, black, white, gold, teal
Full Version: .full