Design system

The shared visual language for WareSpace onboarding — tokens and components, in the professional direction (Uxcel/Codecademy): the journey/trail and levels we already have, kept restrained and corporate — certificate, level badges, % complete, light XP. This page is the source of truth; surfaces adopt it one at a time.

Color

Navy #102442 is the brand and primary action; green #00AA6C is the accent / progress. A neutral gray ramp carries surfaces and text; semantic colors are reserved for status. (WareSpace official design system.)

Brand — navy + green
Navy (blue-100)
#102442
Navy 80 (blue-80)
#1C274C
Green (green-100)
#00AA6C
Green 120
#0B8E5F
Green 80
#19CE8C
Green 40
#E6F4EB
Neutral ramp (WareSpace grays)
n50 · Gray 100
#F8F8F9
n100 · Gray 120
#F1F1F1
n200 · Gray 160
#DCDCDC
n300 · Gray 200
#C6C6C6
n500 · Gray 400
#8A8A8A
n600
#5A5F66
n700
#2A3540
n900 (ink)
#102442
Semantic status
Success
#0B8E5F
Warning
#E6A53B
Danger
#E11717
Info
#2F6FD0
Level tiers — the gamification spine
Tier 1 · Foundations
#00AA6C
Tier 2 · Core
#2F6FD0
Tier 3 · Advanced
#6A5ACD
Tier 4 · Mastery
#E6A53B

Typography

Poppins for display/headings (and the wordmark), Roboto for body. A modular scale (~1.25) — tight, negative-tracked headings; calm 1.5 body.

Display · Poppins · 2.6remWelcome aboard
H1 · Poppins · 1.9remYour onboarding
H2 · Poppins · 1.5remLearn to sell
H3 · Poppins · 1.15remDiscovery & qualification
Body · Roboto · 1remListen more than you talk — strong discovery tells you whether to book a tour or offer a hold.
Small · 0.88remRequired before you work in the tools.
Eyebrow · 0.72remPhase 3 · Systems

Spacing, radius & elevation

Spacing scale (4px base)
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 24px
6 · 32px
8 · 48px
Radius (tight · inner · card · pill)
tight · 4px · tags
inner · 6px · nested
card · 10px · surfaces
pill · 999px · buttons
Elevation (navy-tinted)
e1 · subtle
e2 · hover
e3 · feature

Buttons & badges

Buttons
Status badges
✓ Complete In progress 🔒 Locked New
Level tiers & XP
Foundations Core Advanced Mastery 60 XP

Levels & progress

A path is a stack of levels with three states — complete, current, locked. Skill progression and the certificate make "where am I / what's next" obvious without Duolingo whimsy.

Level rows
Skill progression
BeginnerIntermediateAdvanced
Stat counts
3
Completed
1
In progress
5
Locked
Progress ring
62%
Certificate
🔒

Appointment Setter

Certified rep

62% complete5 hrs left

Journey trail (current)

The trail we already ship (v2.0) — kept, just aligned to these tokens. Connected stops light up as you progress; the certification stop is the trophy gate.

DoneGet to know WareSpaceWho we are and who we sell to.
You're hereSystem trainingHubSpot, Aircall, RevenueHero, Rent Manager.
LockedLearn to sell & closeUnlocks after System training.