Brand Style Guide

Welcome to DCE’s Website Style Guide!

This resource outlines the key design and functional elements that define our online identity.

The guidelines ensure a consistent and memorable user experience. Join us in maintaining the integrity of our brand across all digital platforms. Let’s create a cohesive and impactful online presence together.

Table of Contents

Typography

Titles and Quotes

Libre Baskerville is a web font based on the American Type Founder’s Baskerville from 1941, but it has a taller x-height, wider counters and a little less contrast, that allow it to work well for reading on-screen.

The DCE uses Libre Baskerville for display titles and quotations.

https://fonts.google.com/specimen/Libre+Baskerville

The five boxing wizards jump quickly

Body Copy

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width.

The DCE uses Roboto for body copy, some titles (third level and below) and annotation labels.

https://fonts.google.com/specimen/Roboto

The five boxing wizards jump quickly

Website/digital type specifications.

The styles for the website are set within element or typography section. You can find it by clicking on the settings button in the top bar, and then selecting typography in the theme style. As shown to the right.

Please use the styles defined in the website theme as much as possible, avoiding manual overrides.

H1 Sample Text in white is shown in the header above.
When neccessary, add a style/text shadow in an appropriate colour to make the text legible.

H2 Sample Text

H3 Sample Text

H4 Sample Text

H5 Sample Text

Colour Palette

Stick with this guideline to maintain brand continuity across all projects.

All of the brand colours are defined as global colours are within the website theme.

DCE Brand Identity Elements

DCE Brand ID with corporate name, full colour
DCE Brand ID with corporate name, single colour

DCE Brand ID with corporate name, reverse

Creating New Content Pages 

Notes:

Ensure that the Page Settings>Page Layout> Elementor Full Width

Creating Page Hero Image Banners

Hero Container Content

The top container consists of three elements.

  • Spacer 250 pixels
  • Heading H1
  • Spacer 50 Pixels

Background Image size

Optimal performance 1500 pixels x 585 pixels

 

Container settings

Upcoming style guide additions

  • The Possibility Process Book Template
  • Website Section templates

We use essential cookies to make our site work and to improve user experience and analyze website traffic. By clicking “Accept,” and/or continuing to use our website you agree to our website’s cookie use as described in our Privacy Policy.