/design-system

SparkSales Design System

A single source of truth for colours, typography, spacing and components.

Colours

Primary (Teal)

primary
#51CEBB
--color-primary
primary-light
#57DDC8
--color-primary-light
primary-dark
#4BC2B0
--color-primary-dark
primary-bg
#F0FCFA
--color-primary-bg

Accent (Blues & Orange)

accent-dark-blue
#296EC2
--color-accent-dark-blue
accent-bright-blue
#4892FB
--color-accent-bright-blue
accent-blue
#135DB8
--color-accent-blue
accent-light-blue
#E1EBF4
--color-accent-light-blue
accent-orange
#FAA82D
--color-accent-orange

Dark / Secondary

dark
#211E31
--color-dark
dark-2
#0B1128
--color-dark-2
secondary
#211E31
--color-secondary
secondary-light
#413D55
--color-secondary-light
secondary-dark
#13111D
--color-secondary-dark

Text

text-title
#211E31
--color-text-title
text-regular
#595866
--color-text-regular
text-muted
#808099
--color-text-muted

Grey Scale

grey-1
#F7F8FA
--color-grey-1
grey-bg
#F4F6F8
--color-grey-bg
grey-3
#E1E1E1
--color-grey-3
grey-4
#F9FAFB
--color-grey-4
grey-mid
#495667
--color-grey-mid
grey-platform
#697385
--color-grey-platform

Semantic

error
#F44336
--color-error
success
#36B37E
--color-success
warning
#FAA82D
--color-warning
bg-page
#E6EFFF
--color-bg-page

Typography

.ss-h1
H1 · Lato Bold 36–48px
Grow Your Sales Engine
.ss-h2
H2 · Lato Bold 32–40px
Revenue-Driven Outreach
.ss-h3
H3 · Lato Bold 28–32px
Personalised Sequences
.ss-h4
H4 · Lato Bold 20px
Campaign Automation
.ss-h5
H5 · Lato Bold 18px
Smart Lead Scoring
.ss-h6
H6 · Lato Bold 16px
Onboarding Flow
.ss-subtitle-1
Subtitle 1 · Lato 500 16px
Subtitle level one
.ss-subtitle-2
Subtitle 2 · Lato 500 14px
Subtitle level two
.ss-lead-bold
Lead Bold · Roboto 700 20px
A compelling leading statement.
.ss-lead-reg
Lead Regular · Roboto 400 18px
Supporting lead copy that draws the reader in.
.ss-body-1
Body 1 · Roboto 400 16px
Body text used for the main content area of sections and articles.
.ss-body-2
Body 2 · Roboto 400 14px
Secondary body text for less prominent descriptions.
.ss-caption
Caption · Roboto 400 12px
Caption text for labels and timestamps.
.ss-overline
Overline · Roboto 600 12px UPPERCASE
Section label
.ss-button
Button · Roboto 500 14–16px
Get Started Free

Buttons

Sizes

Solid

Outline

Ghost & Link

States

Form Controls

Please enter a valid email address.

Looks good!

Checkbox

Radio

Cards

Default Card

White background, subtle shadow.

Grey Card

Flat grey background.

Teal Card

Primary tint with border.

Blue Card

Accent blue-tint background.

Dark Card

Dark background, white text.

Interactive Card

Hover for lift effect.

Badges & Tags

NeutralPrimaryPrimary SolidBlueBlue SolidOrangeOrange SolidDarkErrorSuccessMuted
SmallMediumLarge
CRMOutreachAnalyticsAutomationAI

Spacing & Border Radius

Spacing (4px grid)

4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
80px
96px

Border Radius

--radius-xs
2px
--radius-sm
4px
--radius-md
8px
--radius-lg
16px
--radius-xl
24px
--radius-full
∞

Shadows

Card
--shadow-card
Input
--shadow-input
Dropdown
--shadow-dropdown
Elevated
--shadow-elevated