Colors
To be used with Tailwind classes that apply a color property (eg: "text-blue-dark", "bg-red-light", etc).
| Classname | Value |
transparent | |
currentColor | |
inherit | |
rgba(var(--palette-blue-dark, 0, 90, 163), <alpha-value>) | |
rgba(var(--palette-blue-dark-active, 0, 62, 112), <alpha-value>) | |
rgba(var(--palette-blue-dark-hover, 0, 79, 143), <alpha-value>) | |
rgba(var(--palette-blue-darker, 0, 56, 102), <alpha-value>) | |
rgba(var(--palette-blue-light, 232, 244, 253), <alpha-value>) | |
rgba(var(--palette-blue-light-active, 199, 228, 250), <alpha-value>) | |
rgba(var(--palette-blue-light-hover, 222, 240, 252), <alpha-value>) | |
rgba(var(--palette-blue-normal, 0, 112, 200), <alpha-value>) | |
rgba(var(--palette-blue-normal-active, 1, 80, 142), <alpha-value>) | |
rgba(var(--palette-blue-normal-hover, 1, 97, 172), <alpha-value>) | |
rgba(var(--palette-bundle-basic, 215, 51, 28), <alpha-value>) | |
rgba(var(--palette-bundle-medium, 59, 30, 176), <alpha-value>) | |
rgba(var(--palette-cloud-dark, 186, 199, 213), <alpha-value>) | |
rgba(var(--palette-cloud-dark-active, 148, 168, 190), <alpha-value>) | |
rgba(var(--palette-cloud-dark-hover, 166, 182, 200), <alpha-value>) | |
rgba(var(--palette-cloud-light, 245, 247, 249), <alpha-value>) | |
rgba(var(--palette-cloud-light-active, 214, 222, 230), <alpha-value>) | |
rgba(var(--palette-cloud-light-hover, 229, 234, 239), <alpha-value>) | |
rgba(var(--palette-cloud-normal, 232, 237, 241), <alpha-value>) | |
rgba(var(--palette-cloud-normal-active, 202, 212, 222), <alpha-value>) | |
rgba(var(--palette-cloud-normal-hover, 220, 227, 233), <alpha-value>) | |
rgba(var(--palette-green-dark, 45, 119, 56), <alpha-value>) | |
rgba(var(--palette-green-dark-active, 31, 81, 38), <alpha-value>) | |
rgba(var(--palette-green-dark-hover, 39, 104, 49), <alpha-value>) | |
rgba(var(--palette-green-darker, 28, 74, 35), <alpha-value>) | |
rgba(var(--palette-green-light, 234, 245, 234), <alpha-value>) | |
rgba(var(--palette-green-light-active, 205, 228, 207), <alpha-value>) | |
rgba(var(--palette-green-light-hover, 225, 239, 226), <alpha-value>) | |
rgba(var(--palette-green-normal, 10, 147, 43), <alpha-value>) | |
rgba(var(--palette-green-normal-active, 29, 114, 40), <alpha-value>) | |
rgba(var(--palette-green-normal-hover, 35, 139, 49), <alpha-value>) | |
rgba(var(--palette-ink-dark, 37, 42, 49), <alpha-value>) | |
rgba(var(--palette-ink-dark-active, 11, 12, 15), <alpha-value>) | |
rgba(var(--palette-ink-dark-hover, 24, 27, 32), <alpha-value>) | |
rgba(var(--palette-ink-light, 105, 125, 149), <alpha-value>) | |
rgba(var(--palette-ink-light-active, 74, 97, 124), <alpha-value>) | |
rgba(var(--palette-ink-light-hover, 93, 115, 142), <alpha-value>) | |
rgba(var(--palette-ink-normal, 79, 94, 113), <alpha-value>) | |
rgba(var(--palette-ink-normal-active, 50, 66, 86), <alpha-value>) | |
rgba(var(--palette-ink-normal-hover, 62, 78, 99), <alpha-value>) | |
rgba(var(--palette-orange-dark, 167, 84, 0), <alpha-value>) | |
rgba(var(--palette-orange-dark-active, 128, 63, 0), <alpha-value>) | |
rgba(var(--palette-orange-dark-hover, 149, 74, 0), <alpha-value>) | |
#663200 | |
rgba(var(--palette-orange-light, 254, 242, 230), <alpha-value>) | |
rgba(var(--palette-orange-light-active, 250, 226, 198), <alpha-value>) | |
rgba(var(--palette-orange-light-hover, 252, 236, 218), <alpha-value>) | |
rgba(var(--palette-orange-normal, 207, 108, 0), <alpha-value>) | |
rgba(var(--palette-orange-normal-active, 173, 87, 0), <alpha-value>) | |
rgba(var(--palette-orange-normal-hover, 184, 96, 0), <alpha-value>) | |
rgba(var(--palette-product-dark, 0, 122, 105), <alpha-value>) | |
rgba(var(--palette-product-dark-active, 0, 102, 87), <alpha-value>) | |
rgba(var(--palette-product-dark-hover, 0, 112, 96), <alpha-value>) | |
rgba(var(--palette-product-darker, 0, 77, 65), <alpha-value>) | |
rgba(var(--palette-product-light, 225, 244, 243), <alpha-value>) | |
rgba(var(--palette-product-light-active, 191, 232, 226), <alpha-value>) | |
rgba(var(--palette-product-light-hover, 214, 240, 236), <alpha-value>) | |
rgba(var(--palette-product-normal, 0, 165, 142), <alpha-value>) | |
rgba(var(--palette-product-normal-active, 0, 132, 114), <alpha-value>) | |
rgba(var(--palette-product-normal-hover, 0, 149, 128), <alpha-value>) | |
rgba(var(--palette-red-dark, 151, 12, 12), <alpha-value>) | |
rgba(var(--palette-red-dark-active, 109, 9, 9), <alpha-value>) | |
rgba(var(--palette-red-dark-hover, 137, 11, 11), <alpha-value>) | |
rgba(var(--palette-red-darker, 99, 8, 8), <alpha-value>) | |
rgba(var(--palette-red-light, 250, 234, 234), <alpha-value>) | |
rgba(var(--palette-red-light-active, 243, 206, 206), <alpha-value>) | |
rgba(var(--palette-red-light-hover, 248, 226, 226), <alpha-value>) | |
rgba(var(--palette-red-normal, 210, 28, 28), <alpha-value>) | |
rgba(var(--palette-red-normal-active, 157, 21, 21), <alpha-value>) | |
rgba(var(--palette-red-normal-hover, 185, 25, 25), <alpha-value>) | |
rgba(var(--palette-social-facebook, 59, 89, 152), <alpha-value>) | |
rgba(var(--palette-social-facebook-hover, 56, 84, 144), <alpha-value>) | |
rgba(var(--palette-social-facebook-active, 53, 79, 136), <alpha-value>) | |
rgba(var(--palette-white-normal, 255, 255, 255), <alpha-value>) | |
rgba(var(--palette-white-normal-active, 231, 236, 241), <alpha-value>) | |
rgba(var(--palette-white-normal-hover, 241, 244, 247), <alpha-value>) |
FontSize
| Classname | Value |
13px | |
15px | |
16px | |
18px |
LineHeight
| Classname | Value |
1 | |
16px | |
20px | |
24px | |
24px |
FontWeight
| Classname | Value |
400 | |
500 | |
700 |
FontFamily
| Classname | Value |
'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif |
Spacing
To be used as a Tailwind prefix for defining margin and padding (eg: "m-300", "p-800", etc).
| Classname | Value |
0px | |
2px | |
4px | |
6px | |
8px | |
12px | |
16px | |
20px | |
24px | |
32px | |
40px | |
48px | |
64px | |
0px | |
1px | |
2px | |
4px | |
8px | |
12px | |
16px | |
24px | |
32px | |
40px | |
52px |
BorderRadius
| Classname | Value |
2px | |
4px | |
6px | |
8px | |
12px | |
16px | |
0 | |
9999px | |
2px | |
3px | |
6px | |
50% |
Screens
To be used as a Tailwind prefix for defining media queries (eg: "sm:opacity-1", "tb:hidden", etc).
| Classname | Value |
320px | |
414px | |
576px | |
768px | |
992px | |
1200px |
BoxShadow
| Classname | Value |
none | |
0 0 2px 0 rgba(37, 42, 49, 0.16),0 2px 4px 0 rgba(37, 42, 49, 0.12) | |
0 0 2px 0 rgba(37, 42, 49, 0.16),0 -2px 4px 0 rgba(37, 42, 49, 0.12) | |
0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24) | |
0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24) | |
0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12) | |
0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12) | |
0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32) | |
0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12) | |
0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12) | |
0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24) | |
0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24) | |
0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32) |
TransitionDuration
| Classname | Value |
0.15s | |
0.3s | |
0.4s |
ZIndex
Default Tailwind zIndex classes are also available
| Classname | Value |
1 | |
100 | |
700 | |
825 | |
800 | |
815 | |
900 |