online Style Guide
Introduction
Colors
Typography
Logos & Assets
Templates
email signature
Buttons & CTAs
Rich Text - Blog Posts
Other
Go to Homepage

v 1.0

PLEASE NOTE: This style guide is being updated with current assets and will be made available shortly.

Welcome to the TADA style guide

Welcome to the online style guide for TADA. You can use this page to quickly reference (or download) company styles such as fonts, text sizes, colors, buttons, socials, Powerpoint templates, and more. Please note this page is still a work-in-progress. More assets, visual examples and templates will be added soon.
‍

If you have any comments or questions about this style guide, please let us know here.

Colors

Primary Color

Tint 2
#7a6084
Tint 1
#513059
Base Hue
#412148
Shade 1
#2d1233
Shade 2
#2b1e2e

Secondary Color

Tint 2
#ffcfca
Tint 1
#ffa196
Base Hue
#ff635d
Shade 1
#eb4842
Shade 2
#cc3e38

Other Colors

Teal
#1eaabc
White
#f9fafb
Black
#272727
dark grey
#444445
grey
#8b8b8b

Typography

Inter is our brand font. Download it here
‍‍
It’s clean, simple, easy. It works for everything from headlines to body copy to text inside our application. Use this font any and every time you can, but if Inter is not available, please use Helvetica as it is similar in overall style. You’ll need to download it on your computer. You’ll also need to ensure the font is embedded into your documents before sending them to client.

H1

The quick brown fox jumps over the lazy dog.

H2

The quick brown fox jumps over the lazy dog.

H3

The quick brown fox jumps over the lazy dog.

H4

The quick brown fox jumps over the lazy dog.

H5
The quick brown fox jumps over the lazy dog.
H6
The quick brown fox jumps over the lazy dog.
Body Copy

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.

The .p1 class can have a number of combo-classes applied to it, such as -
‍
.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

Examples

The .p1 class can have a number of combo-classes applied to it, such as -
‍
.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

A short and bold headline

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

The .p1 class can have a number of combo-classes applied to it, such as -
‍
.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

Guidance
Do not use colored typography (dark-gray #19, Purple #3 or white only)
Do not use all caps
Do not adjust kerning or tracking
Do not make different levels of hierarchy the same weight
Do not make any level of hierarchy the same size or scale as another
Do not separate chunks of text using the same font size

Logos, assets & graphics

Click on each thumbnail to open the asset in a new window, then right-click to download it.
Logo - color
Logo - Black
Favicon color - 32x32px
tada icon
Predict disruptions. Pivot in real-time.
"dna of your business" graphic
DD layer graphic toolbox
digital duplicate™ layers graphic
Dealer Management
Dealer mgmt cycle graphic
supply chain infographic

Templates

Social posts template
tada-themed zoom background
tada-themed zoom background (light)
powerpoint template
(last updated on 12/8/2021)
letterhead

Email Signature

For the non-animated version, click here.

Step 1

Download the template >

Step 2

Open the downloaded file
(TadaNow_Animated-Sig_F.docx)
Select all
COPY

Step 3

Create an email signature in Outlook:
  • From the File tab, click Options.
  • In the Mail section, click the Signatures… button.
  • In the Edit signature field, create your signature. You can modify the formatting and click the icons to add images and links.
  • The first signature you create will be called “default.” To rename, click the Rename button and type a new name for the signature.
  • In the Choose default signature section, select the email account to associate with the signature, if applicable.
  • Using the drop-down menus, select the signature you want to appear appended to new messages and/or replies and forwards. You can also leave this option as (none).
  • PASTE into the blank text area
  • Click OK.

Buttons & CTAs

Button Text
Filled Button - Primary
Button Text
Filled Button - Secondary
Button Text
Filled Button - Icon
Button Text
Outlined Button - Primary
Button Text
Outlined Button - Secondary
Button Text
Outlined Button - Icon

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

L

orem 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.

‍

This is a H2 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.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

‍

This is a H3 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.

‍

This is a H4 heading

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

‍

This is a H5 heading

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

‍

This is a H6 heading

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

‍

This is a figure/image caption

‍

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

‍

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

‍

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Go to Homepage