Styleguide - Hide before launch

Colors

Bauer Blue
(--color-styleguide-primary)
#009CDA
Bauer Secondary
(-color-styleguide-secondary)
#E6E6E6
Bauer Text
(--color-styleguide-text)
#000000
Accent 1
(--color-styleguide-accent-1)
#F5F5F7
Accent 2
(--color-styleguide-accent-2)
#CCC
Accent 3
(--color-styleguide-accent-3)
#E6E8ED
Brand Black
(--color-styleguide-black)
#000
Brand White
(--color-styleguide-white)
#fff
Supreme Yellow
(--color-styleguide-supreme-yellow)
#FFC238
Vapor Red
(--color-styleguide-vapor-red)
#D41D32
Nexus Blue
(--color-styleguide-nexus-blue)
#067FC6
GreenFit Green
(--color-styleguide-greenfit-green)
#78BE20
GreenFit Blue 1
(--color-styleguide-greenfit-blue-1)
#0077C8
GreenFit Blue 2
(--color-styleguide-greenfit-blue-2)
#003865
Prosharp Grey 1
(--color-styleguide-prosharp-grey-1)
#1C1E1F
Prosharp Grey 2
(--color-styleguide-prosharp-grey-2)
#7A7C7E
Prosharp Grey 3
(--color-styleguide-prosharp-grey-3)
#C4C8C9
Prosharp Blue
(--color-styleguide-prosharp-blue)
#0042AC

Typography

X-Large Headline (.h0)

Large Headline (.h1)

Medium Headline (.h2)

Small Headline (.h3)

X-Small Headline (.h4)

Headline Five (.h5)
Headline Six (.h6)

Bauer Headline 0 Bold (.bauer-bold-headline-0)

Bauer Headline 0 Regular (.bauer-regular-headline-0)

Bauer Headline 1 Bold (.bauer-bold-headline-1)

Bauer Headline 1 Regular (.bauer-regular-headline-1)

Bauer Headline 2 Bold (.bauer-bold-headline-2)

Bauer Headline 2 Regular (.bauer-regular-headline-2)

Bauer Headline 3 Bold (.bauer-bold-headline-3)

Bauer Headline 3 Regular (.bauer-regular-headline-3)

Bauer Headline 4 Bold (.bauer-bold-headline-4)

Bauer Headline 4 Regular (.bauer-regular-headline-4)

Bauer Headline 5 Bold (.bauer-bold-headline-5)
Bauer Headline 5 Regular (.bauer-regular-headline-5)
Bauer Headline 6 Bold (.bauer-bold-headline-6)
Bauer Headline 6 Regular (.bauer-regular-headline-6)

Paragraph text 1 - DIN (.bauer-din-paragraph-1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 2 - DIN (.bauer-din-paragraph-2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 3 - DIN (.bauer-din-paragraph-3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 4 - DIN (.bauer-din-paragraph-4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 5 - DIN (.bauer-din-paragraph-5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 1 - Roboto (.bauer-roboto-paragraph-1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 2 - Roboto (.bauer-roboto-paragraph-2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 3 - Roboto (.bauer-roboto-paragraph-3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph text 4 - Roboto (.bauer-roboto-paragraph-4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

Button Primary (.button.button--primary)

Default

Hover

Active

Focus

Disabled

Default - Round

Hover - Round

Active - Round

Focus - Round

Disabled - Round

Button Secondary (.button.button--secondary)

Default

Hover

Active

Focus

Disabled

Default - Round

Hover - Round

Active - Round

Focus - Round

Disabled - Round

Button Tertiary (.button.button--tertiary)

Default

Hover

Active

Focus

Disabled

Default - Round

Hover - Round

Active - Round

Focus - Round

Disabled - Round

Button Quaternary (.button.button--quaternary)

Default

Hover

Active

Focus

Disabled

Default - Round

Hover - Round

Active - Round

Focus - Round

Disabled - Round

Link 1 (.button.button--link-1)

Default

Hover

Active

Focus

Link 2 (.button.button--link-2)

Default

Hover

Active

Focus

Inputs

Primary text input

Placeholder

Value present

Hover

Focus

Disabled

Primary text input round (.input--round)

Placeholder

Value present

Hover

Focus

Disabled

Secondary text input (.input--secondary)

Placeholder

Value present

Hover

Focus

Disabled

Primary select input

Default

Hover

Focus

Disabled

Primary select input round (.input--round)

Default

Hover

Focus

Disabled

Secondary select input (.input--secondary)

Default

Hover

Focus

Disabled

Radio Selectors

Checkbox Selectors