TADA Cognitive Solutions

Welcome to the
TADA Style Guide

The single reference for all TADA brand assets: fonts, colors, logos, and components. Use this page to quickly find and download everything you need to represent the brand correctly.

This guide is updated for v2.0 (April 2026).
If you have questions, contact: ben.ouart@tadanow.com
Version2.0
Primary FontSpace Grotesk
Secondary FontInter
PlatformWebflow

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, social post 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 at ben.ouart@tadanow.com

Part 1 — Brand
01 — Brand
Logo & Assets
Click any thumbnail to open the full asset in a new tab, then right-click to save. Always maintain clearspace equal to the height of the icon on all sides.
Primary Logo
TADA color logo
Logo — Color
Use on white or light backgrounds
Download
TADA white logo
Logo — White
Use on dark or colored backgrounds
Download
Icon & Favicon
TADA icon
Icon
Download
TADA favicon
Favicon · 32×32
Download
Clearspace Rule
TADA logo clearspace
← X →
X = height of icon
02 — Brand
Colors
The TADA color palette. Click any swatch to copy the hex code.
Primary Color — Twilight Plum
Tint 2
#7a6084
Tint 1
#513059
BASE
Base Hue
#412148
Shade 1
#2d1233
Shade 2
#2b1e2e
Secondary Color — Coral Red
Tint 2
#ffcfca
Tint 1
#ffa196
BASE
Base Hue
#ff635d
Shade 1
#eb4842
Shade 2
#cc3e38
Other Colors
Teal
#1eaabc
Electric Cyan
#1defff
White
#f9fafb
Black
#272727
Dark Grey
#444445
Grey
#8b8b8b
Brand Gradient
Twilight Plum · 0%
#412148
Cyan Blue · 58%
#1eaabc
Electric Cyan · 100%
#1defff
Copy CSS ↗
03 — Brand
Typography
Two fonts. Space Grotesk for headlines. Inter for body copy, labels, and UI text.
Space Grotesk — Primary Font
Space Grotesk
Use for all headlines, H1–H4. Fallback: Helvetica
Download from Google Fonts

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 Space Grotesk is not available, please use Helvetica as it is similar in overall style.

Display
72px · 4.5rem
The quick brown fox.
H1
48px · 3rem
The quick brown fox jumps over the lazy dog.
H2
34px · 2.125rem
The quick brown fox jumps over the lazy dog.
H3
26px · 1.625rem
The quick brown fox jumps over the lazy dog.
H4
18px · 1.125rem
The quick brown fox jumps over the lazy dog.
Inter — Secondary Font
Inter
Use for H5, H6, body copy, labels, and all UI text. Fallback: Roboto
Download from Google Fonts

It's clean, simple, easy. It works for body copy, UI labels, subheadings and captions. If Inter is not available, please use Roboto as it is similar in overall style.

H5
18px · 1.125rem
The quick brown fox jumps over the lazy dog.
H6
16px · 1rem
The quick brown fox jumps over the lazy dog.
Body
15px · 0.9375rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Small
13px · 0.8125rem
Small body copy at 13px. Use .small combo class on p1 elements.
Font Usage Example
A short and bold headline
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.
“Cyber” Professional Design Examples
Headline
Body Copy
TADA
Design Dark
This design approach uses a dark base color to create contrast and focus. Well-suited for presentations, dashboards, or digital interfaces where clarity and depth are key.
Headline
Body Copy
TADA
Design Light
A light, vibrant design direction that feels modern, clean, and energetic. Bright background with high-contrast text brings immediacy and visual pop.
Headline
Body Copy
TADA
Design Black
Minimal black background paired with subtle graphic overlays creates a sleek, sophisticated atmosphere. Ideal for hero moments, keynote visuals, or polished brand materials.
Typography Rules
✓
Do
Use dark grey #484847 or Plum #412148 for body text
Use Space Grotesk for H1–H4
Embed fonts before sending documents to clients
Maintain clear weight + size between heading levels
✕
Don't
Use colored typography (Coral, Cyan) for body copy
Use all caps on headlines or body paragraphs
Adjust kerning or tracking manually
Make different heading levels the same size or weight
04 — Brand
Buttons & CTAs
All button variants used across the website. Hover to see interaction states.
Filled Buttons
Button TextButton TextButton Text
Filled PrimaryFilled SecondaryFilled + Icon
Outlined Buttons
Button TextButton TextButton Text
Outlined PrimaryOutlined Secondary
Dark Background Variants
Button TextButton TextButton TextButton TextWatch Full VideoSee Customer Results
States
DefaultDefault
HoverHover
ActiveActive
DisabledDisabled
Part 2 — Technical
05 — Technical
Spacing System
Client-First spacing scale. Always use these classes — never set custom margin or padding values in Webflow. Click any class to copy.
Margin & Gap Scale
Class
Scale
px
rem
margin-bottom-tiny
4px
0.25rem
margin-bottom-xsmall
8px
0.5rem
margin-bottom-small
16px
1rem
margin-bottom-medium
24px
1.5rem
margin-bottom-large
32px
2rem
margin-bottom-xlarge
48px
3rem
margin-bottom-xxlarge
64px
4rem
margin-bottom-huge
96px
6rem
margin-bottom-xhuge
128px
8rem
margin-bottom-xxhuge
192px
12rem
Section Padding
padding-section-small48px top + bottom
padding-section-medium80px top + bottom
padding-section-large128px top + bottom
padding-section-xlarge192px — Hero sections
06 — Technical
Grid & Layout
Container widths, column systems, and breakpoints for Webflow.
Container Widths
Class
Width
Use Case
Visual
container-xlarge
1440px
Hero sections
container-large
1280px
Standard sections
container-medium
960px
Content sections, forms
container-small
720px
Blog posts, RTB
container-xsmall
480px
Modals, narrow CTAs
Breakpoints
Breakpoint
Width
Webflow Label
Rule
Desktop
≥ 992px
Base — design here first
All styles cascade down
Tablet
768–991px
Landscape
Adjust columns + sizes
Mobile L
480–767px
Portrait
Stack to single column
Mobile S
< 480px
Small
Reduce padding + type
07 — Technical
Rich Text — Blog Posts
Rich text blocks (RTBs) are used for all blog post body content. This is the live preview of every element available inside an RTB.
RTB Live Preview
Rich Text Block · container-small (720px)

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.

This is a H3 heading

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

This is a H4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a H6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

08 — Technical
Combo Classes
Apply these alongside base Webflow classes (p1, btn, heading-1, etc.) in the Designer to modify behaviour without duplicating styles. Click any class name to copy.
Text Utilities — Apply on p1
Class
Effect
Preview
.small
Reduces to 14px / 0.78em
The quick brown fox.
.tiny
Reduces to 12px / 0.67em
The quick brown fox.
.centred
Centre-aligns the text
Centred text
.capitals
ALL CAPS text transform
section label
.no-max-width
Removes 65ch max-width
Text flows full width.
.desktop-only
Hidden on tablet + mobile
Desktop only
.mobile-only
Hidden on desktop
Tablet + mobile only
Button Combo Classes — Apply on btn
Class
Effect
Preview
.b-primary
Plum filled — primary action
Button
.b-secondary
Coral filled — secondary action
Button
.b-op
Plum outlined
Button
.b-oe
Outlined Electric Cyan — on dark backgrounds
Button
.btn-sm
Small size modifier
Small
09 — Technical
Accessibility
All approved combinations meet WCAG 2.1. AA requires 4.5:1 for body text, 3:1 for large text. AAA requires 7:1.
Approved Color Combinations
AaBbCc
White on Plum
10.3:1 AAA
AaBbCc
Plum on White
10.3:1 AAA
AaBbCc
Electric Cyan on Plum
11.5:1 AAA
AaBbCc
Dark Grey on White
8.6:1 AAA
AaBbCc
White on Coral
3.6:1 AA Large
AaBbCc
Frost on Dark Plum
7.8:1 AAA
AaBbCc
Orange on White
3.2:1 AA Large
AaBbCc
Teal on White
3.1:1 AA Large
AaBbCc
Coral on Plum
4.7:1 AA