Design System
Color
PRIMARY
NAVY BLUE
00263E
.color-navy
00263E
.color-navy
STONE
879BAA
.color-stone
879BAA
.color-stone
PEBBLE
C6CFD9
.color-pebble
C6CFD9
.color-pebble
PEBBLE LIGHT
DEE2E6
.color-pebble-light
DEE2E6
.color-pebble-light
SECONDARY
BLUE
0082BB
.color-blue
0082BB
.color-blue
ORANGE
FAA21b
.color-orange
FAA21b
.color-orange
GRAYSCALE
WHITE
FFFFFF
.color-white
FFFFFF
.color-white
GRAY
F2F2F2
.color-gray
F2F2F2
.color-gray
DARK GRAY
E5E5E5
.color-gray-dark
E5E5E5
.color-gray-dark
PEBBLE LIGHT
DEE2E6
.color-pebble-light
DEE2E6
.color-pebble-light
Typography
HEADINGS
H1
Utopia Std Bold REALTOR®
Utopia Std Bold
H2
Utopia Std Bold REALTOR®
Utopia Std Bold
H3
Utopia Std Bold REALTOR® (navy)
Utopia Std Bold (stone)
H4
Utopia Std Bold REALTOR® (navy)
H5
Utopia Std Bold REALTOR® (navy)
BODY COPY
BODY INTRO – NAVY (.body-intro .color-navy)
Open Sans Regular
REALTOR® Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam elit sed augue efficitur, ut condimentum lectus tristique. Fusce ac ex ex. Phasellus tristique felis nibh, et consectetur erat tempor id. Integer rutrum porta faucibus. Proin eleifend ligula turpis, vel tempus dui porta sit amet. Suspendisse sit amet hendrerit risus. Praesent mattis elementum libero vitae viverra. Curabitur venenatis vulputate erat sed congue. Aliquam sodales rhoncus eros, a feugiat mauris feugiat id.
BODY PARAGRAPH – NAVY (.body-paragraph .color-navy)
Open Sans Regular
This is the default paragraph size throughout the website. Wrapping content in a paragraph tag ensures this style gets used.
LINKS
Make a link with the class .link-arrow to add an arrow to the left of the link in our styled navy.
<a class=”link-arrow” href=”#”>Sample Link</a>
Sample Link
<a class=”link-arrow” href=”#”>Sample Link</a>
Sample Link