Primary Purple
#534ab7
Skill5 design
foundation
A unified visual language for learning products, built with the same premium softness, spacing, and interaction patterns from the Skill5 reference.
Explore Components
✓
✦
⛨
◔
Typography
Heading 1
All-in-one learning platform
88px / 84px
Heading 2
Core HR solutions
72px / 68px
Heading 3
Built for everyone
18px / 24px
Heading 4
Section label
14px / 20px
Bold L
Integrate with your tools
18px / 28px
Bold M
Words of appreciation
16px / 24px
Bold S
Request a Demo
14px / 20px
Regular L
Premium soft contrast with generous leading for readable product communication.
18px / 31px
Regular M
Streamline onboarding, training, and team performance in one place.
15px / 25px
Regular S
Support text and metadata values
13px / 20px
Colors & Surfaces
Deep Blue
#125082
Accent Cyan
#2abcea
Accent Magenta
#e50c85
Signal Yellow
#fac031
Surface
#ffffff
Soft Surface
#fbfbfb
Gradient Surface
Primary Accent Flow
Used in hero focal points and strong actions.
Neutral Surface
Panel & Card Canvas
Soft backgrounds with low-contrast borders and depth.
UI Components
Buttons
Feature Cards
▣
For HR professionals
Use one dashboard for hiring, compliance, and people operations.
◔
For managers
Track team goals and progress with clear operational visibility.
✦
For teams
Centralised records and workflows reduce repetitive admin work.
Layout & Spacing
Spatial foundation
One rhythm. Every surface aligned.
This section maps the exact spacing and layout primitives used across pages: an 8pt scale, a stable container width, and predictable vertical cadence for faster scanning.
Spacing scale
8pt systemspace-1
4px Hairline adjustments
space-2
8px Icon-label spacing
space-3
12px Compact controls
space-4
16px Base component padding
space-6
24px Card and module padding
space-8
32px Block-level separation
space-10
40px Section rhythm
space-12
48px Large section offset
Container & grid
Max content width
Desktop container
1180px Page gutter
Safe edge spacing
16px Grid columns
Layout baseline
12 Desktop gap
Core breathing room
24px Section vertical
Primary rhythm step
40px Vertical rhythm
Compose sections with consistent steps of 24 / 32 / 40 so visual weight remains balanced from hero to footer.
Motion & Interaction
Integration Carousel Motion
A rotating centre-stage card echoes the integration reel behaviour from the reference.
M
Hover Lift + Shadow
Feature Card Elevation
Subtle translate and shadow increase on hover.
Icons
Icon Set (rounded Lucide style)
Sparkles
Shield
Grid
Business
Users
Arrow