Color Palette
Primary Colors
Our sophisticated blue palette symbolizing trust, intelligence, and innovation.
MW Blue
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554
MW Gray
50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827
950
#030712
Utility Colors
Semantic colors for states like success, warning, error, and information.
Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6
Typography
Poppins Type Scale
A structured type scale providing clarity and consistency across all screen sizes.
Display - The quick brown fox
3.75rem / 1 / 700
H1 - The quick brown fox
3rem / 1 / 700
H2 - The quick brown fox
2.25rem / 2.5rem / 600
H3 - The quick brown fox
1.875rem / 2.25rem / 600
H4 - The quick brown fox
1.5rem / 2rem / 600
H5 - The quick brown fox
1.25rem / 1.75rem / 600
H6 - The quick brown fox
1.125rem / 1.75rem / 600
Body Large - The quick brown fox
1.125rem / 1.75rem / 400
Body - The quick brown fox
1rem / 1.5rem / 400
Body Small - The quick brown fox
0.875rem / 1.25rem / 400
Caption - The quick brown fox
0.75rem / 1rem / 400
Spacing Scale
4pt Grid System
Consistent spacing tokens based on a 4pt grid for clean, predictable layouts.
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
8
2rem
10
2.5rem
12
3rem
16
4rem
20
5rem
24
6rem
32
8rem
Elevation & Shadows
Shadow Tokens
Subtle shadows to create depth and hierarchy in your interfaces.
Small
shadow-mw-sm
Medium
shadow-mw-md
Large
shadow-mw-lg
Extra Large
shadow-mw-xl