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

Board of Directors opening

The Delaware County Board of Commissioners is seeking to appoint one (1) member to the Delaware County Board of Developmental

Read More »
January 4, 2024

5/9/24 Personnel and Programs Committee Meeting CANCELED

Due to a last-minute change in Board member availability, the Personnel and Programs Committee Meeting scheduled for 5/9/24 has been

Read More »
May 9, 2024

DCBDD office temporarily closed

DCBDD temporarily closed its administrative office building from July 9-12 as a precautionary measure. The closure was necessary to evaluate

Read More »
July 9, 2024

ROI for Early Intervention Core Team Primary Service Providers (2025)

DCBDD is now accepting Requests of Interest (ROI) for our Early Intervention Core Team Primary Service Providers. All ROI responses

Read More »
July 29, 2024

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)

Name(Required)
Email(Required)
Subscribe to the following DCBDD Newsletters:(Required)