Don't Miss Success Summit Dallas 2025 Get Tickets

Tom Ferry Web Guide

Brand Colors

Primary & Accent

Darkest Blue
900 Deep Navy
HEX: #141c29
RGB: 20, 28, 41
HSB: 217, 51, 16
class=”darkestblue”

Dark Blue
800 Corp Blue
HEX: #173159
RGB: 23, 50, 89
HSB: 216, 74, 35
class=”darkblue”

Orange
300 Accountable Orange
HEX: #F36F21
RGB: 243, 111, 33
HSB: 22, 86, 95
class=”orange”

Bright Orange
175 Golden Goal
HEX: #F38D21
RGB: 243, 141, 33
HSB: 31, 86, 95
class=”brightorange”

Red
450 Edge Red
HEX: #DD202B
RGB: 221, 32, 43
HSB: 357, 86, 87
class=”red”

Blue
300 Action Blue
HEX: #1768E5
RGB: 23, 106, 229
HSB: 216, 90, 90
class=”blue”

Gradients

background: linear-gradient(135deg, #141c29 0%, #0c101a 100%)

background: linear-gradient(135deg, #173159 0%, #0e1c36 100%)

background: linear-gradient(135deg, #F38D21 0%, #F36F21 100%)

Typography

H1 – Heading 1 – Main Page Heading

Desktop=68px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

H2 – Heading 2 – Main Heading of a Section

Desktop=49px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

H3 – Heading 3 – Secondary Heading of a Section

Desktop=38px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

H4 – Heading 4 – Goes well with H2 – when used as a section subtitle

Desktop=31px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

H5 – Heading 5 – Goes well with bullet points

Desktop=27px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

H6 – Heading 6 – Goes well with Card Titles, followed by standard text or small text

Desktop=23px – Typography is more than just selecting fonts; it’s about creating a cohesive visual language that reflects the essence of a brand. A well-crafted font hierarchy enhances readability while establishing a clear tone. Consistent application of typography ensures a professional and unified presentation across all platforms.

Font Family

Barlow Condensed

Used for headings and subheadings – default font-weight is “medium/500”
Other weights: 300/Light, 400/Regular, 500 /Medium (Default), 600/SemiBold, 700/Bold
Font Info

 

Barlow

Used for page text content – default font-weight is “medium/500”, default-size:18px
Other weights: 300/Light, 400/Regular, 500 /Medium (Default), 600/SemiBold, 700/Bold
Font Info


Font Weights

.bold {font-weight:700px;}

.semibold {font-weight:600px;}

.medium {font-weight:500px;} *default

.regular {font-weight:400px;}

.light {font-weight:300px;}


Font Sizes

.xxxl {font-size:37px;}
.xxl {font-size:31px;}
.xl {font-size:25px;}
.lg {font-size:21px;}
.md {font-size:18px;} *default
.sm {font-size:15px;}
.xs {font-size:13px;}
.xxs {font-size:11px;}
.xxxs {font-size:9px;}

Tom Ferry Action Buttons

Darkblue Button
class=”button darkblue-button”
Blue Button
class=”button blue-button”
Orange Button
class=”button orange-button”

Ghost Darkblue Button
class=”button invert-darkblue-button”
Ghost Blue Button
class=”button invert-blue-button”
Ghost Orange Button
class=”button invert-orange-button”