DCBDD Website Style Guide

Static Image Background
Hero Section

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

Read More
Video Background
Hero Section

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

Read More

Logos

DCBDD large color logo with blue lettering over transparent background

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.

Read More

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.

Read More

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

Extra Large Button
Large Button
Medium button
Small button
XS button
Extra Large Button
Large Button
Medium button
Small button
XS button

Buttons - Standard
Dark Background

Extra Large Button
Large Button
Medium button
Small button
XS button
Extra Large Button
Large Button
Medium button
Small button
XS button

Buttons - Bright Styles

Extra Large Button
Large Button
Medium button
Small button
Extra Large Button
Large Button
Medium button
Small button
“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

A full-width section with dark background

Feature Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Feature Heading 3​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Feature Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

a span heading in small size

A full-width section with light background

Feature Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Feature Heading 3​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Feature Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Section (for blog posts)

Card examples with no picture
Card examples with picture and author

DCBDD seeking photos from individuals served

  As we work to update our marketing material and website, DCBDD is seeking photos of the individuals we serve

Read More »
June 21, 2016

Project SEARCH graduates seven from Grady Memorial Hospital program

DCBDD is proud to recognize seven students who recently completed and graduated from Project SEARCH at Grady Memorial Hospital. Project

Read More »
September 29, 2016

National Family Caregivers Month

November is National Family Caregivers Month. Across the US, around 39.8 million people provide 21 or more hours of unpaid

Read More »
October 31, 2016

Strategic Plan 2017-2019

At the December 2016 board meeting, DCBDD passed its 2017-2019 strategic plan. On behalf of more than 2,500 people served

Read More »
January 10, 2017

Form Section

Example form styling for website:

Field examples include:

  • Single line first & last name input fields
  • Input field for email
  • Input field for phone
  • Input fields for addresses
  • Drop-down selection box
  • Checkboxes in columns
  • Multi-line text input field
  • Submit button

(color: #20396F, background-color: #02010100, border size: 1px, border color: #999999, border-radius: 6px)

Oops! We could not locate your form.

en English
ar Arabiczh-CN Chinese (Simplified)nl Dutchen Englishfr Frenchde Germanhi Hindiit Italianpt Portugueseru Russianes Spanish