Colors
Variable Name | HEX | RGB | Sample |
---|---|---|---|
$primary | #fab4d6 | 250, 180, 214 | |
$secondary | #c8bff4 | 200, 191, 244 | |
$san-pink-1 | #fab4d6 | 250, 180, 214 | |
$san-pink-2 | #ffe4ed | 255, 228, 237 | |
$san-pink-3 | #ffc9e0 | 255, 201, 224 | |
$san-pink-4 | #ffd1fc | 255, 209, 252 | |
$san-pink-5 | #ffd8eb | 255, 216, 235 | |
$san-blue-1 | #3d556f | 61, 85, 111 | |
$san-blue-2 | #b6dcff | 182, 220, 255 | |
$san-purple-1 | #eed5fd | 238, 213, 253 | |
$san-purple-2 | #c8bff4 | 200, 191, 244 | |
$san-purple-3 | #d3caff | 211, 202, 255 | |
$san-purple-4 | #b9b6e5 | 185, 182, 229 | |
$san-purple-5 | #d4b0ed | 212, 176, 237 | |
$san-purple-6 | #97a1e1 | 151, 161, 225 | |
$san-orange-1 | #fad0c6 | 250, 208, 198 | |
$san-orange-2 | #fba980 | 251, 169, 128 | |
$san-yellow-1 | #f7cb6b | 247, 203, 107 |
Gradients
Variable Name | GRADIENT | DIRECTION | Sample |
---|---|---|---|
$san-gradient-1 | #c8bff4 ($san-purple-2) #ffe4ed ($san-pink-2) |
VERTICAL | |
$san-gradient-2 | #ffe4ed ($san-pink-2) #d3caff ($san-purple-3) |
HORIZONTAL | |
$san-gradient-3 | #fad0c6 ($san-orange-1) #ffd1fc ($san-pink-4) |
VERTICAL | |
$san-gradient-4 | #b6dcff ($san-blue-2) #b9b6e5 ($san-purple-4) |
VERTICAL | |
$san-gradient-5 | #f7cb6b ($san-yellow-1) #fba980 ($san-orange-2) |
VERTICAL | |
$san-gradient-6 | #d4b0ed ($san-purple-5) #97a1e1 ($san-purple-6) |
VERTICAL |