Typography

Top Level Title

H1

Section Headings

H2

Bold Subheading

Block Quote
H3

section subheading example

H4
Text Link
Larger intro text
H5
Heading
Button Text
Button Text
H6

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

DF - Small Button
Paragraph
Block Quote
Text Link
DF - Big Button
Colour
Designfusion Colours
Text Colours

Neutral Colours

Designfusion Style Guide

Notes - Last updated January 31, 2026
1. Any changes to this page must be approved by Ian first.
2. Make sure to apply to all imported elements.
3. This has been scaled down for smaller screens, not in descriptions.

TYPOGRAPHY

Description - Font Family - Inter, Size - 14px, Weight - Normal, Normal, Colour - DF Dark Blue
‍
Edit - access body (all pages) from typography section, or use DF - T as class, you can also bold this font.
Main Font
This is our global font, used as the standard through our entire site
Description - Standard Font, Colour - White, Background - DF Blue

Edit - Add a background with a div and set to DF Blue, Use class DF - TC to adjust the font. Note: This is only to be used with DF Blue, unless agreed upon otherwise.
Contrast Text
This is our standard text, built on contrast
Description - Standard Font, Colour - DF Green, Background - White or DF Blue

Edit - within text, highlight words then Wrap with Span, after this use class DF - THG
Highlighted Text
Use this to draw attention to a section of text, combine with either standard or contrast
Description - Standard Font, Colour - DF Green, Hint of Padding, Border - Blue Class available  

Edit - You can add as text link element or within text, highlight words then Insert Link, after this use class DF - LK
Text Link
Our standard text link has a bit of space and a blue hover
Text Link
Description - Font Famliy - Inter, Size - 38 Weight - Semi Bold, Colour DF - Blue (combo class White available)

Edit - Change Class to DF - H1 , use combo class with dark background

H1
This is our largest heading, use as a landing point to a page

Description - Font Family - Inter, Size - 30, Weight - Medium,
Colour DF Green (combo class White and Blue available)

Edit - Change Class to DF - H2 , use combo class when it makes most sense

H2
This can be used in many places on site, ie. sub headings or introducing sections

Description - Font Family - Inter, Size - 20, Weight - Normal,
Colour DF Green (combo class White , Green and Blue available)

Edit - Change Class to DF - H3 , use combo class when it makes most sense

H3
Commonly Used throughout website, for section titles forms and more, similar to our main text just larger

Description - Font Family - Inter, Size - 20, Weight - Light,
Colour DF Green (combo class White, Green and Blue available)

Edit - Change Class to DF - H4 , use combo class when it makes most sense

H4
Use this inside of image boxes or large buttons

Description - Longer paragraphs are Standard Text with the ability to reduce visual intensity with Dark Grey

Edit - Class DF - PL

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.

Description - Shorter paragraphs stay at Standard Text

Edit - Class DF - PS

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,

Description - Standard text, with bold label

Edit - Class  DF - T
List Item
  • List Item Header - More text here

APPROVED BRAND COLOURS

DF Green - #BED368
DF Blue - #282156
DF Dark Grey - #97979DF

Note - This is not an official Designfusion colour but can be used on website to reduce intensity of dark colours.
DF Dark Blue - #0A0816
DF Mid Blue - #5592FF

Note - This is to be used in cases where you want to shift attention to secondary topic
DF Orange - #FF9A1A

Note - This is to be used in cases where you want to shift attention to secondary topic

BUTTONS

Description - Primary call-to-action button used for key actions.
‍
Default state features a white background with green outline and green text. On hover, the button fills with brand green and the text changes to white.

Edit - At the button level, adjust class to DF - B1
Button Text
Description - Used on image-based sections such as feature highlights. This button ensures clear contrast and readability over photographic backgrounds.
‍
Outlined white button with white text over an image background.

Edit - At the button level, adjust class to DF - BC
Button Text
Description - High-emphasis button for main conversion actions.

Solid brand green background with white text /
Solid dark brand color background with white text (Add combination class 'blue')

Edit - At the button level, adjust class to DF - B2
Button TextButton Text

LOGOS

PADDING

Description -

Edit - At the Div Block level, adjust class to DF - PAD1

SECTION PADDING

Each one of your sections should include the Section Padding class, to make sure there's consistent padding and your elements are not touching the edges of the screen.