Brand style guide and global presets reference
Table of contents
01. Color palette
- The x4 brand colors (directly below) are using Divi color palette “global colors.” Changes to those will result in modification of that color anywhere it’s used throughout the site.
- ⚠️ All swatches in this site’s Divi default/saved color palette have been set to RGB(10 10 10 / 0.03) to dissuade use of that palette. Use global colors or color variations selected from brand color derivatives (tones, tints, shades) instead.
https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/
#e38250
OTD’s tertiary brand color is a medium light shade of orange.
- RGB: 227 130 80
- HSL: 20 72 60
#c46324
The “Dottie” donate dot spot color is a shade of orange.
- RGB: 196 99 36
- HSL: 24 69 45
#94b5e0
Tones
#9cb6da
#a2b7d3
#a9b7cd
#afb8c7
#b5b9c0
#bababa
Tints to white
#a7c1e5
#b9cdea
#cbd9f0
dce6f5
eef2fa
ffffff
Shades to black
#7a94b7
#61758f
#495769
#323a46
#1c2025
#000000
#a3d963
Tones
#a4cf6f
#a4c579
#a3bb83
#a2b28c
#a0a895
#9e9e9e
Tints to white
#b4e07e
#c4e698
#d3ecb1
#e2f3cb
#f1f9e5
ffffff
Shades to black
#86b153
#6a8b43
#506634
#364425
#1f2516
#000000
02. Typography
- Theme Customizer > Typographic Settings controls the base styles for the following Header and Body Text properties in all modules throughout the site:
- color
- font
- font size
- font weight
- line height
IMPORTANT! This site uses text modules for BOTH heading/subheading and body text content.
- DO NOT combine a header and subsequent subheader or body text into a single text module.
While this is technically possible, it removes the ability to style the layout with Divi’s native design controls and custom CSS will be needed. - DO NOT adjust preset’s base styles (indicated by the module controls bing colored grey).
Doing so makes those changes to ALL instances of the module using that preset.
- Use the Text module > Preset > heading-subheading-primary to create headings or subheadings (h1-h6).
- Add the header text, select it, then set the appropriate heading level. The text module’s All Text Preset automatically applies the appropriate styles.
- When necessary, customize this instance of the text module (indicated by module controls colored purple) by adjusting Settings > Design > Heading Text.
- Use the Text module > Preset > body-text-paragraph-primary to create body text, including UL and OL lists.
- Text content added to the text module is set as paragraph text by defaul. The text module’s BODY TEXT PRESET automatically applies the appropriate styles.
- When necessary, customize this instance of the text module (indicated by module controls colored purple) by adjusting Settings > Design > Text.
See OTD-website-typeographic-hierarchy for type scale documentation.
Barlow
A slightly rounded, low-contrast, grotesk type family which consists of Normal, Semi Condensed, and Condensed fonts, each with 9 weights in Roman and Italic.
Use for header text.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Headings: h1 – h6
Barlow Normal
Barlow Semi Condensed
Barlow Condensed
Heading 1 normal
Heading 1 semi condensed
Heading 1 condensed
Heading 2 normal
Heading 2 semi condensed
Heading 2 condensed
Heading 3 normal
Heading 3 semi condensed
Heading 3 condensed
Heading 4 normal
Heading 4 semi condensed
Heading 4 condensed
Heading 5 normal
Heading 5 semi condensed
Heading 5 condensed
Heading 6 normal
Heading 6 semi condensed
Heading 6 condensed
Lato
Classical proportions give the letterforms harmony and elegance, combined with a sleek treatment that feels contemporary. Semi-rounded details feel warm, while the underlying structure provides stability and seriousness across 10 styles, from thin to black.
Use for body text.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Body text
Body text – paragraph primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Body text – ordered list primary
- Lorum ipsum
- Lorum ipsum
- Body text – unordered list primary
- Lorum ipsum
- Lorum ipsum
Small text – primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
03. Modules
The last part of this style guide handles some of the most-used modules inside Divi. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.
Button
Image
Video
Blurb
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Divider
OTD story cards
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Team member card
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Toggle
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Accordion
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.