DCBDD Website Style Guide

Static Image Background

Hero Section

H1 Title with static image, slider, or video + CTA

Video Background

Hero Section

H1 Title with static image, slider, or video + CTA

Logos

Icons

Colors

Core Colors

The core colors should be used for the majority of communications.

rgba(52,157,219,1)

HEX #3498DB

rgba(32,57,111,1)

HEX #20396F

Complementary Blues

The complementary blues can be used to accent the core colors.

rgba(123,190,233,1)

HEX #7BBEE9

rgba(37,135,200,1)

HEX #2587C8

rgba(34,108,157,1)

HEX #226C9D

Brights

The brights can be also be used as accents. Keep in mind, brights are only accent colors and should not replace the core colors. Use brights sparingly to keep their value.

rgba(181,11,88,1)

HEX #B50B58

rgba(246,201,8,1)

HEX #F6C908

rgba(146,208,80,1)

HEX #92D050

rgba(102,57,158,1)

HEX #66399E

Internal image section with text + CTA on left

The image chosen for this element has the main subject on the right side to allow enough room for a title, text, and a CTA on the left.

Internal image section with text + CTA on right

The image chosen for this element has the main subject on the left side to allow enough room for a title, text, and a CTA on the right. The text in this case can be justified left or right.

Heading One (H1)

color: #20396F, font-size 3.3rem, font-weight: bold

Heading Two (H2)

color: #20396F, font-size 2.9rem, font-weight: bold

Heading Three (H3)

color: #20396F, font-size 2rem, font-weight: bold

Heading Four (H4)

color: #20396F, font-size 1.6rem, font-weight: bold

Heading Five (H5)

color: #20396F, font-size 1.3rem, font-weight: bold

Heading Six (H6)

color: #20396F, font-size 1rem (16px), font-weight: bold

Paragraph Text (p)

color: #303030, font-size 1rem (16px), font-weight: normal

Link Text (a)

color: #B50B58, font-size: 1rem (16px), font-weight: normal

Buttons - Standard
Light Background

Buttons - Standard
Dark Background

Buttons - Bright Styles

“This is what a quote or a testimonial section might look like on the site”

(color: #20396F, font-size 1.5rem (22px), font-weight: normal, font-style: italic)

This is a section that allows you to draw attention to it or emphasize something.

(color: #20396F, font-size 2.5rem (40px), font-weight: 900, font-style: normal, line-height: 1.3em)

a span heading in small size