Skip to main content

Style Guide

Brand Palette
Color One#002147rgb 0,33,71$primary.color-primary.color-primary-bg
Color Two#495E77rgb 73,94,119$primary-variant-1.color-primary-variant-1.color-primary-variant-1-bg
Color Three#D8E3F0rgb 216,227,240$primary-variant-2.color-primary-variant-2.color-primary-variant-2-bg
Color Four#D6E4F5rgb 214,228,245$primary-variant-3.color-primary-variant-3.color-primary-variant-3-bg
Color Five#F4F8FFrgb 244,248,255$secondary.color-secondary.color-secondary-bg
Color Six#FDF4D5rgb 253,244,213$secondary-variant-1.color-secondary-variant-1.color-secondary-variant-1-bg
#FEF1EErgb 254,241,238$secondary-variant-2.color-secondary-variant-2.color-secondary-variant-2-bg
#D8E3F0rgb 216,227,240$light-blue.color-light-blue.color-light-blue-bg
#EAE2F0rgb 234,226,240$secondary-variant-3.color-secondary-variant-3.color-secondary-variant-3-bg
Gray Scale
Black#272727rgb 39,39,39$black.color-black.color-black-bg
Dark Gray#002147rgb 0,33,71$black-variant-1.color-black-variant-1.color-black-variant-1-bg
Medium Gray#676767rgb 103,103,103$dark-gray.color-dark-gray.color-dark-gray-bg
Light Gray#E5E5E5rgb 229,229,229$medium-gray.color-medium-gray.color-medium-gray-bg
White#EDEDEDrgb 237,237,237$light-gray.color-light-gray.color-light-gray-bg
#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 $black.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
jjjXXS 2px
jjjXS 4px
jjjS 8px
jjjM 16px
jjjL 32px
jjjXL 64px
jjjXXL 128px

SASS Variable $spacing-__

Register your school for free

Register today