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, 41, 107, 51), <alpha-value>) | |
rgba(var(--palette-green-dark-active, 28, 74, 35), <alpha-value>) | |
rgba(var(--palette-green-dark-hover, 33, 89, 42), <alpha-value>) | |
rgba(var(--palette-green-darker, 22, 59, 28), <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, 4, 135, 36), <alpha-value>) | |
rgba(var(--palette-green-normal-active, 3, 99, 27), <alpha-value>) | |
rgba(var(--palette-green-normal-hover, 4, 118, 32), <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, 101, 120, 144), <alpha-value>) | |
rgba(var(--palette-ink-light-active, 78, 92, 111), <alpha-value>) | |
rgba(var(--palette-ink-light-hover, 88, 105, 126), <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, 138, 69, 0), <alpha-value>) | |
rgba(var(--palette-orange-dark-active, 87, 44, 0), <alpha-value>) | |
rgba(var(--palette-orange-dark-hover, 112, 56, 0), <alpha-value>) | |
#4D2600 | |
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, 179, 98, 0), <alpha-value>) | |
rgba(var(--palette-orange-normal-active, 128, 70, 0), <alpha-value>) | |
rgba(var(--palette-orange-normal-hover, 153, 84, 0), <alpha-value>) | |
rgba(var(--palette-product-dark, 0, 112, 97), <alpha-value>) | |
rgba(var(--palette-product-dark-active, 0, 66, 57), <alpha-value>) | |
rgba(var(--palette-product-dark-hover, 0, 92, 79), <alpha-value>) | |
rgba(var(--palette-product-darker, 0, 61, 53), <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, 143, 123), <alpha-value>) | |
rgba(var(--palette-product-normal-active, 0, 97, 83), <alpha-value>) | |
rgba(var(--palette-product-normal-hover, 0, 117, 101), <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 | |
28px | |
32px | |
40px | |
48px | |
52px | |
64px | |
0px | |
1px |
BorderRadius
| Classname | Value |
2px | |
4px | |
6px | |
8px | |
12px | |
16px | |
0 | |
9999px |
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(79, 94, 113, 0.12),0 -2px 6px 0 rgba(79, 94, 113, 0.12),0 0 1px 0 rgba(41, 47, 55, 0.15) | |
0 2px 6px 0 rgba(79, 94, 113, 0.08),0 0 2px 0 rgba(79, 94, 113, 0.12),0 0 1px 0 rgba(41, 47, 55, 0.3) | |
0 8px 24px -5px rgba(79, 94, 113, 0.1),0 5px 16px -3px rgba(79, 94, 113, 0.12),0 1px 4px 0 rgba(79, 94, 113, 0.12),0 0 1px 0 rgba(41, 47, 55, 0.3) | |
0 2px 16px 0 rgba(79, 94, 113, 0.04),0 34px 20px 0 rgba(79, 94, 113, 0.05),0 15px 15px 0 rgba(79, 94, 113, 0.1),0 5px 16px 0 rgba(79, 94, 113, 0.15),0 2px 6px -1px rgba(79, 94, 113, 0.14),0 -1px 2px -1px rgba(79, 94, 113, 0.15) | |
0 -2px 16px 0 rgba(79, 94, 113, 0.04),0 -34px 20px 0 rgba(79, 94, 113, 0.05),0 -15px 15px 0 rgba(79, 94, 113, 0.1),0 -5px 16px 0 rgba(79, 94, 113, 0.15),0 -2px 6px -1px rgba(79, 94, 113, 0.14),0 1px 2px -1px rgba(79, 94, 113, 0.15) | |
0 60px 40px 0 rgba(79, 94, 113, 0.05),0 40px 30px 0 rgba(79, 94, 113, 0.08),0 24px 24px 0 rgba(79, 94, 113, 0.14),0 5px 16px 0 rgba(79, 94, 113, 0.15),0 2px 6px -1px rgba(79, 94, 113, 0.14),0 -1px 2px -1px rgba(79, 94, 113, 0.15) | |
0 2px 12px 0 rgba(27, 50, 73, 0.08) |
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 |