Foundations
->
Colors
www.palermodesigns.ca
Colors
Display
Display 1
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Headings
Heading 1
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Heaeding 2
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Heading 3
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Heading 4
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Heading 5
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Heading 6
Size: 18
Weight: SemiBold
Line height: 28
The quick brown fox jumps over the lazy dog
Body
body-large
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
body-1
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
body-2
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
body-3
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
Button
label
Size: 56
Weight: Bold
Line height: 64
The quick brown fox jumps over the lazy dog
01 - Core
Error
50
#FFEBED
100
#FFC3C5
200
#FF9B9E
300
#FF737B
400
#FF4B53
500
#FF1744
600
#E7002B
700
#C80021
800
#A90018
900
#8B000F
Neutral
0
#FFFFFF
50
#F5F5F5
100
#E8E8E8
200
#BDBDBD
300
#9E9E9E
400
#828282
500
#666666
600
#4E4E4E
700
#333333
800
#1F1F1F
900
#141414
1000
#000000
Primary
50
#E6F1FF
100
#C0D9FF
200
#94BFFF
300
#6FA3FF
400
#4A87FF
500
#0071F1
600
#005BCA
700
#0045A3
800
#00307B
900
#001A54
Success
50
#C2FBD3
100
#A5F9BD
200
#88F7A7
300
#6BF592
400
#4EF37C
500
#00C853
600
#00B144
700
#009D3B
800
#008B33
900
#007A2B
Warning
50
#FFF2CC
100
#FFE699
200
#FFDC66
300
#FFD333
400
#FFCA00
500
#FFA900
600
#D98A00
700
#B87700
800
#946300
900
#744E00
03 - Theme
Border
Default
Light
Color/Neutral/100 -> #E8E8E8
Dark
Color/Neutral/500 -> #666666
Focused
Light
Color/Primary/500 -> #0071F1
Dark
Color/Primary/700 -> #0045A3
Hover
Light
Color/Neutral/500 -> #666666
Dark
Color/Neutral/100 -> #E8E8E8
Icon
Error
Light
Color/Error/500 -> #FF1744
Dark
Color/Error/200 -> #FF9B9E
Interactive
Light
Color/Primary/500 -> #0071F1
Dark
Color/Primary/300 -> #6FA3FF
Primary
Light
Color/Neutral/900 -> #141414
Dark
Color/Neutral/0 -> #FFFFFF
Secondary
Light
Color/Neutral/600 -> #4E4E4E
Dark
Color/Neutral/50 -> #F5F5F5
Inverted
Primary
Light
Color/Neutral/0 -> #FFFFFF
Dark
Color/Neutral/900 -> #141414
Secondary
Light
Color/Neutral/50 -> #F5F5F5
Dark
Color/Neutral/500 -> #666666
Surface
Button
Primary
Light
Color/Neutral/900 -> #141414
Dark
Color/Neutral/0 -> #FFFFFF
Secondary
Light
Color/Neutral/0 -> #FFFFFF
Dark
Color/Neutral/900 -> #141414
Menu Item
Hover
Light
Color/Neutral/50 -> #F5F5F5
Dark
Color/Neutral/700 -> #333333
Selected
Light
Color/Primary/50 -> #E6F1FF
Dark
Color/Primary/800 -> #00307B
Primary
Light
Color/Neutral/0 -> #FFFFFF
Dark
Color/Neutral/900 -> #141414
Text
Body
Light
Color/Neutral/600 -> #4E4E4E
Dark
Color/Neutral/50 -> #F5F5F5
Error
Light
Color/Error/500 -> #FF1744
Dark
Color/Error/200 -> #FF9B9E
Header
Light
Color/Neutral/900 -> #141414
Dark
Color/Neutral/0 -> #FFFFFF
Interactive
Light
Color/Primary/500 -> #0071F1
Dark
Color/Primary/300 -> #6FA3FF
Inverted
Body
Light
Color/Neutral/50 -> #F5F5F5
Dark
Color/Neutral/500 -> #666666
Header
Light
Color/Neutral/0 -> #FFFFFF
Dark
Color/Neutral/900 -> #141414