Skip to main content

Style Guide

Brand Palette
Color One#A9C0EBrgb 169,192,235$primary.color-primary.color-primary-bg
Color Two#E2EBFCrgb 226,235,252$primary-variant-1.color-primary-variant-1.color-primary-variant-1-bg
Color Three#266AEBrgb 38,106,235$primary-variant-2.color-primary-variant-2.color-primary-variant-2-bg
Color Four#5973A4rgb 89,115,164$secondary.color-secondary.color-secondary-bg
Color Five#95A5C5rgb 149,165,197$secondary-variant-1.color-secondary-variant-1.color-secondary-variant-1-bg
Color Six#0E347Brgb 14,52,123$secondary-variant-2.color-secondary-variant-2.color-secondary-variant-2-bg
Gray Scale
Black#272727rgb 39,39,39$black.color-black.color-black-bg
Dark Gray#676767rgb 103,103,103$dark-gray.color-dark-gray.color-dark-gray-bg
Medium Gray#CBCBCBrgb 203,203,203$medium-gray.color-medium-gray.color-medium-gray-bg
Light Gray#EDEDEDrgb 237,237,237$light-gray.color-light-gray.color-light-gray-bg
White#FDFDFDrgb 253,253,253$white.color-white.color-white-bg
Status Color
Success#1BD330rgb 27,211,48$success.color-success.color-success-bg
Warning#FF7621rgb 255,118,33$warning.color-warning.color-warning-bg
Alert#FA0026rgb 250,0,38$alert.color-alert.color-alert-bg

Typography

Remember that all text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text. https://webaim.org/resources/contrastchecker/ .

Fonts
Aa Bb
Dd Cc
Primary font family lato, Helvetica, Arial, sans-serif$primary-font-family.primary-font
Aa Bb
Dd Cc
Secondary font family Garamond, sans-serif$secondary-font-family.secondary-font
Aa Bb
Dd Cc
Tertiary font familyTimes new roman, serif$tertiary-font-family.tertiary-font
Font colors
Aa Bb
Dd Cc
primary font color$primary-font-color $primary.primary-font-color
Aa Bb
Dd Cc
secondary font color$secondary-font-color $primary-variant-2.secondary-font-color
Aa Bb
Dd Cc
tertiary font color$tertiary-font-color$white.tertiary-font-color
Headers

H1 The quick brown fox jumps over a lazy dog


H2 The quick brown fox jumps over a lazy dog


H3 The quick brown fox jumps over a lazy dog


H4 The quick brown fox jumps over a lazy dog


H5 The quick brown fox jumps over a lazy dog

H6 The quick brown fox jumps over a lazy dog

Call Out The quick brown fox ...


Subtitles
SubtitleThe quick brown fox jumps over a lazy dog
.subtitle
Light CaptionThe quick brown fox jumps over a lazy dog
.light-subtitle
Caption
Bold CaptionThe quick brown fox jumps over a lazy dog
.bold-caption
Light CaptionThe quick brown fox jumps over a lazy dog
.light-caption
Paragraph
Paragraph

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

Buttons & Links

Buttons
Dark variant
Primary button
Secondary button
Tertiary button
Light variant
Primary button
Secondary button
Tertiary button
External Primary Button
Dark variant
Primary button
Secondary button
Light variant
Primary button
Secondary button
Download Primary Button
Dark variant
Primary button
Secondary button
Light variant
Primary button
Secondary button
Social Media
Light variant
Hyper Links
Light variant

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.

Spacing
XXS 2px
XS 4px
S 8px
M 16px
L 32px
XL 64px
XXL 128px
XXS 2px
XS 4px
S 8px
M 16px
L 32px
XL 64px
XXL 128px

SASS Variable $spacing-__