Main Colors

#FFFFFF
--white
#e6e6e6
--x-light-grey
#cccccc
--light-grey
#999999
--medium-grey
#4c4c4c
--dark-grey
#1a1a1a
--black
#e6e6e6
--red
#f27705
--orange
#efb51c
--gold
#2baac1
--teal
#052147
--minto-navy

Secondary Colors - Dark

#BF0E09
--milano-red
#E43504
--trinidad
#DC7B03
--mango-tango
#0B8FA5
--blue-chill
#4E860A
--green-leaf

Secondary Colors - Neutral

#101011
--woodsmoke
#404041
--ship-grey
#808081
--jumbo
#EDE7DE
--pearl-bush
#F5F3ED
--spring-wood
#FAF9F6
--spring-wood-2

Support Colors

Support colors are those that are used either on a single element (e.g. mobile menu item) or those that define certain behaviour of certain elements (hover for the links). Each use has to be documented.

#333333
#4A4A4A
#007dff
#0c0532

Font faces

Visuelt-Light
The quick brown fox jumps over the lazy dog
Visuelt-LightItalic
The quick brown fox jumps over the lazy dog
Visuelt-Regular
The quick brown fox jumps over the lazy dog
Visuelt-Medium
The quick brown fox jumps over the lazy dog
Visuelt-Bold
The quick brown fox jumps over the lazy dog
SfProTextBold
The quick brown fox jumps over the lazy dog
Arial
The quick brown fox jumps over the lazy dog
Arial Bold
The quick brown fox jumps over the lazy dog
Calibri
The quick brown fox jumps over the lazy dog
Calibri Bold
The quick brown fox jumps over the lazy dog

Typography

h-h1-dark
Visuelt, Medium, 48px   --black
Line height: normal, Letter spacing: -1.1px
h-h1-light
Visuelt, Medium, 48px   --white
Line height: normal, Letter spacing: -1.1px
h-h1-mobile
Visuelt, Medium, 36px   #333333
Line height: normal, Letter spacing: -0.9px
mobile-h-h1-light
Visuelt, Bold, 36px   --white
Line height: normal, Letter spacing: -0.9px
h-h2-dark
Visuelt, Bold, 33px   #333333
Line height: normal, Letter spacing: -0.9px
h-h2-light
Visuelt, Bold, 33px   --white
Line height: normal, Letter spacing: -0.9px
h-h3-light
Visuelt, Bold, 22px   --x-light-grey
Line height: normal, Letter spacing: -0.8px
awards-archives-collapse
Visuelt, Bold, 22px   #333333
Line height: 30px, Letter spacing: -0.8px
h-h3-dark
Visuelt, Bold, 22px   #333333
Line height: normal, Letter spacing: -0.8px
accomplishment-tag
Visuelt, Bold, 22px   --x-light-grey
Line height: 25px, Letter spacing: -0.8px
awards-archives-award-title
Visuelt, Bold, 20px   #333333
Line height: 26px, Letter spacing: -0.9px
symbol-organizer-group-title
SFProText, Bold, 20px   #333333
Line height: normal, Letter spacing: normal
h-h4-dark
Visuelt, Bold, 18px   --minto-navy
Line height: normal, Letter spacing: -0.6px
nav-menu-item-selected
Visuelt, Bold, 18px   --minto-navy
Line height: normal, Letter spacing: 0px
h-h4-light
Visuelt, Bold, 18px   --x-light-grey
Line height: normal, Letter spacing: -0.6px
ui-nat-lang
Visuelt, Medium, 18px   #4A4A4A
Line height: normal, Letter spacing: 0.6px
nav-menu-item
Visuelt, Regular, 18px   --minto-navy
Line height: normal, Letter spacing: 0px
nav-title
Visuelt, Bold, 16px   --gold
Line height: normal, Letter spacing: 0px
ui-dropdown
Visuelt, Medium, 16px   --minto-navy
Line height: normal, Letter spacing: 0.7px
nav-title-dark
Visuelt, Medium, 16px   --minto-navy
Line height: normal, Letter spacing: 0px
company-and-leadership
Visuelt, Medium, 16px   --minto-navy
Line height: normal, Letter spacing: 0.7px
ui-dropdown-light
Visuelt, Medium, 16px   --white
Line height: normal, Letter spacing: 0px
body-light
Visuelt, Regular, 16px   --x-light-grey
Line height: normal, Letter spacing: 0.5px
nav-item
Visuelt, Regular, 16px   --white
Line height: normal, Letter spacing: 0px
body-dark
Visuelt, Regular, 16px   #4a4a4a
Line height: normal, Letter spacing: 0.5px
nav-item-dark
Visuelt, Regular, 16px   --black
Line height: normal, Letter spacing: 0px
body-link
Visuelt, Regular, 16px   #007dff
Line height: normal, Letter spacing: 0.5px
nav-menu-back
Visuelt, Light, 15px   #0c0532
Line height: normal, Letter spacing: 0px
ui-button
Visuelt, Bold, 14px   --white
Line height: normal, Letter spacing: 2.1px
ui-dropdown-mobile
Visuelt, Medium, 14px   #0c0532
Line height: normal, Letter spacing: 0px
ui-smallcap
Visuelt, Medium, 12px   #333333
Line height: normal, Letter spacing: 0px
nav-privacy
Visuelt, Regular, 12px   --black
Line height: normal, Letter spacing: 0.4px
span-news-date
Visuelt, Light Italic, 12px   #333333
Line height: 18px, Letter spacing: 0px
ui-date
Visuelt, Light Italic, 12px   #333333
Line height: normal, Letter spacing: 0px
h-h6-dark
Visuelt, Bold, 11px   --minto-navy
Line height: normal, Letter spacing: 1.5px
ui-tag-label
Visuelt, Medium, 11px   --minto-navy
Line height: normal, Letter spacing: 1.5px

Padding and margin samples

  • Padding defines space inside the element (between green and red line)
  • Padding can be applied by sides - i.e. no padding on left-right, padding 5 on bottom, padding 3 on top
  • Margins defines space between the elements (between black and green line)
  • Margin can be applied by sides - i.e. no margin on left-right, margin 5 on bottom, margin 3 on top
  • Margins and padding can be combined in any way, e.g. you can have padding 1 and margin 3 appiled to the element

no padding,
no margin,
aligned center,
normal image width

padding 1 (0.25 rem),
margin 1 (0.25 rem),
aligned center,
normal image width

padding 2 (0.5 rem),
margin 2 (0.5 rem),
aligned center,
normal image width

padding 3 (1 rem),
margin 3 (1 rem),
aligned center,
normal image width

padding 4 (1.5 rem),
margin 4 (1.5 rem),
aligned center,
normal image width

padding 5 (3 rem),
margin 5 (3 rem),
aligned center,
normal image width