Design System

The Sales Natural
Style Guide

Colour, typography, spacing, and components for thesalesnatural.com and the DECIDE App. Apply consistently across all surfaces — website, app, email, and collateral.

ColoursTypographySpacing & RadiusButtonsTags & BadgesCardsFormsComponentsIconsVoice & ToneCode Tokens
01

Colour

The palette is anchored in a single brand green. All greens are derived from it — no other hue family is introduced. Neutrals are warm-tinted to avoid cold greys.

Brand Greens
Green
#1D9E75
--green
Green Dark
#0F6E56
--green-dark
Green Deep
#085041
--green-deep
Green Mid
#9FE1CB
--green-mid
Green Pale
#E6F7F1
--green-pale
Ink Scale (Text & UI)
Ink
#111714
--ink
Ink 2
#3A4440
--ink-2
Ink 3
#6B7A74
--ink-3
Ink 4
#9EAAA4
--ink-4
Surfaces & Borders
White
#FFFFFF
--bg
Off-white
#F7FAF8
--bg-off
Border
#E0E8E4
--border
Semantic Colours (App)
Error / Red
Error Pale
Warning
02

Typography

Display / Hero
DM Serif · 48px
Buyers don't trust sellers.
H1 — Section
DM Serif · 32px
The DECIDE Framework
Body
DM Sans · 15px
Apply the DECIDE Method to grow trust fast and have buyers wanting you to help them decide. Every buyer treated as a unique individual, with their own perceptions of value.
Eyebrow Label
DM Sans · 12px
The complete system
Pull Quote Treatments

The moment you start pitching, they stop listening.

"DECIDE works because it eliminates salesy self-interest — the key to not only growing trust, but growing it very quickly."

03

Spacing & Radius

8px — --space-8
16px — --space-16
32px — --space-32
64px — --space-64
6px
--rad-sm
10px
--rad-md
16px
--rad-lg
04

Buttons

05

Tags & Badges

🎓 Self-paced course✦ AI-poweredComing soonModule 01
85
High ≥70
52
Mid 40–69
28
Low <40
Analysis complete. Your appraisal is ready.
Unable to generate appraisal.
06

Cards

Module 03
Engage: Grow Trust Fast
Relate to buyers personally in natural non-salesy conversations.
Strategy · Featured
DECIDE App
The strategic layer. Manage your real opportunities.
AI voice coaching
PatrickAI
A voice coaching experience that draws on your buyer's actual profile.
J
Jason Wells
Sales Manager
User Buyer
Relationship
Partnership · 72
DECIDE Step
Collaborate
07

Forms

This field is required.
08

Components

D
Discover
E
Engage
C
Collaborate
Traditional Selling
Your agenda is to sell — buyers sense it.
The DECIDE Method
Every buyer treated as a unique individual.
09

Icons

ti-school
ti-chart-dots
ti-microphone
ti-user
ti-check
ti-x
10

Voice & Tone

Do

"Apply the DECIDE Method to grow trust fast and have Buyers wanting you to help them decide."

Don't

"Use our proven sales system to build trust with customers and close more deals."

11

Code Tokens

SwatchCSS VariableHex
--green#1D9E75
--green-dark#0F6E56
--green-deep#085041
--ink#111714
--bg#FFFFFF