Design System

Color

PRIMARY
NAVY BLUE
00263E
.color-navy
STONE
879BAA
.color-stone
PEBBLE
C6CFD9
.color-pebble
PEBBLE LIGHT
DEE2E6
.color-pebble-light
SECONDARY
BLUE
0082BB
.color-blue
ORANGE
FAA21b
.color-orange
GRAYSCALE
WHITE
FFFFFF
.color-white
GRAY
F2F2F2
.color-gray
DARK GRAY
E5E5E5
.color-gray-dark
PEBBLE LIGHT
DEE2E6
.color-pebble-light

Typography

HEADINGS
H1

Utopia Std Bold REALTOR®

Utopia Std Bold

H2

Utopia Std Bold

H3

Utopia Std Bold (stone)

H4
H5
BODY COPY
BODY INTRO – NAVY (.body-intro .color-navy)
BODY PARAGRAPH – NAVY (.body-paragraph .color-navy)
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.

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

NAVIGATION
NAVIGATION – MAIN (.navigation-heading-font .color-blue)
SUB NAVIGATION – HEADINGS (.navigation-heading-font)
SUB NAVIGATION – SECONDARY (.navigation-secondary-font)









Welcome to our new home!

Looking for Professional Development and Standard Forms?
They moved to BCREA Access.

Learn more HERE.