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

Primary Purple

#534ab7

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.

Layout quality baseline

Spacing scale

8pt system

space-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