Foundations
Colour System
Swift Digital uses an 80 / 15 / 5 colour ratio. Neutrals carry the interface, brand blue signals key actions and semantic colours communicate state. Pink, fuchsia and decorative gradients are not permitted.
Usage Ratio
The proportion of each colour family across any screen.
80%
Neutrals
Surface, structure, text
15%
Brand Blue
Primary actions, focus, links
5%
Semantic
Success, warning, error, info
Brand Primary
The Swift Digital cyan-blue. The only brand accent.
Primary
#21CDEC
primary
Hover
#18AFC9
primary-hover
Active
#1394AB
primary-active
Deep
#0E7A8D
primary-deep
Neutral Ramp
The backbone of the interface. 11 steps from white to near-black.
N0
#FFFFFF
N50
#F4F7F9
N100
#E9EFF3
N200
#D9E1E5
N300
#C5D0D6
N400
#AAB8C2
N500
#7A8B94
N600
#5C6B73
N700
#4A5A63
N800
#2F3E46
N900
#1F2A30
Supporting Colours
Used sparingly for accents and brand depth.
Teal
#2FBF9F
teal
Navy
#1B3A4B
navy
Semantic Colours
Status communication. Use for meaning, never decoration.
Success
#2FBF71
success
Warning
#F5A623
warning
Error
#D64545
error
Info
#2D9CDB
info
Usage Rules
✓ Do
Use neutrals for 80% of every screen. Reserve brand blue for primary CTAs, focus states and active navigation.
✓ Do
Use semantic colour to communicate state — a red badge means "error", never "look here".
✕ Don't
Don't use the legacy pink (#EC2176) anywhere. It has been retired.
✕ Don't
Don't apply brand blue to large background fills, decorative shapes or marketing-style gradients in the product UI.