DC Identity

Style guide

A guide for the DesignChief online style

Core typography

Typography is using System UI font.

Standard Headings

Heading 1 with long running sample title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis vitae risus tristique posuere.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 2 sample title

Heading 3 sample title

Heading 4 with text link

Heading 5 sample title

Heading 6 sample title

.h-hero

Hero header

.h-hero.small

Hero header

.h-hero.xsmall

Hero header

.h-large

Large header with long running title text

.h-medium

Medium header with long running title text

.h-small

Medium header with long running title text

.h-section

Section Heading

.h-xsmall

Medium header with long running title text

.p-hero

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.p-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.
Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.
Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Blockquote

A sample block quote

Colours

Your brand colour palette.

Main Colours

DC Red
#CB0700

Secondary Colours

DC Orange
#DC8A00

DC Blue
#007DDD

DC Green
#00AAAA

Grey Colours

Body Dark
#1a1a1a

Body Light
#E5E5E5

Medium Grey
#757575

White
#FFFFFF

Process Colours

Info
#009FF2

Success
#3ADB76

Warning
#DC8A00

Alert
#E80900

Icons

Icon styles and sizes.

Standard Icons

Circle Icons

Social Icons

Icon headers

Icon headers and other inline uses.

Icon Headers

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Heading

Heading with long running title text with long running title text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Icon Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is some text inside of a div block.

Links

Text link styles with icon.

TEXT LINKS

Text link

TEXT LINK CAPS

Buttons

Button options and styles.

.button

Button Text

.button.b-secondary

.button.b-hollow

Button Text Button Text

.button.b-white

Button Text Button

.button.b-small

Button Text Button

.button.b-large

Button Button

Form elements

Form components and size options.

Search

Text Input with Label

Form Label

Text Area

Custom Input with Icon

Select

Checkbox

Checkbox with longer label text sample. Checkbox with longer label text sample. Checkbox with longer label text sample.

Checkbox

Radio

Radio with longer label text sample. Radio with longer label text sample. Radio with longer label text sample.

.f-number

.flex-input

Form Label

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Cards

Various boxed style components.

.card

Badge Standard

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text link

Card with Image

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Badge Small

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card as Link

Badge Standard

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Media

Image and video components.

.img-mask

.img-mask.img-circle

.img-mask.img-16-9

Circle Image Sizes

Video Embed

Dropdown

Dropdown component.

Dropdown

Tabs

Tab components.

Tabs

Content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Content 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Content 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion

Show and hide content with the accordion component.

Accordion Dropdown

Badges

Badge components with various size and colour options.

Standard Badges

Badge

Small Badges

Badge Small

Notifications

Colour coded notification components.

Notifications

Standard notification component.

Alert! Something went wrong while submitting the form.

Success! That went well.

Warning! Something’s not quite right.

Rich text

Body content styles for rich text elements.

Rich text headline

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A sample block quote

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Image with caption

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element. Here is some Bold Text, some Italicised Text and a text link.

Media embed sample

Lightbox & Sliders

Components for multiple images.

Lightbox

SLider

Cookie widget

Cookie widget setup for iubenda.

.iubenda-cs-default-floating

Ready to go?

Contact

Get in touch and let’s chat about your project.

CONTACT CHIEF