Colors
To be used with Tailwind classes that apply a color property (eg: "text-blue-dark", "bg-red-light", etc).
| Classname | Value |
#005AA3 | |
#003E70 | |
#004F8F | |
#004680 | |
#E8F4FD | |
#C7E4FA | |
#DEF0FC | |
#0172CB | |
#01508E | |
#0161AC | |
#D7331C | |
#3B1EB0 | |
#BAC7D5 | |
#94A8BE | |
#A6B6C8 | |
#F5F7F9 | |
#D6DEE6 | |
#E5EAEF | |
#E8EDF1 | |
#CAD4DE | |
#DCE3E9 | |
#2D7738 | |
#1F5126 | |
#276831 | |
#235C2B | |
#EAF5EA | |
#CDE4CF | |
#E1EFE2 | |
#28A138 | |
#1D7228 | |
#238B31 | |
#252A31 | |
#0B0C0F | |
#181B20 | |
#697D95 | |
#4A617C | |
#5D738E | |
#4F5E71 | |
#324256 | |
#3E4E63 | |
#AD5700 | |
#954A00 | |
#A75400 | |
#803F00 | |
#FEF2E6 | |
#FAE2C6 | |
#FCECDA | |
#DF7B00 | |
#B26200 | |
#C96F00 | |
#007A69 | |
#006657 | |
#007060 | |
#005C4E | |
#E1F4F3 | |
#BFE8E2 | |
#D6F0EC | |
#00A58E | |
#008472 | |
#009580 | |
#970C0C | |
#6D0909 | |
#890B0B | |
#760909 | |
#FAEAEA | |
#F3CECE | |
#F8E2E2 | |
#D21C1C | |
#9D1515 | |
#B91919 | |
#3B5998 | |
#385490 | |
#354F88 | |
#FFFFFF | |
#E7ECF1 | |
#F1F4F7 | |
transparent |
BorderRadius
| Classname | Value |
50% | |
2px | |
3px | |
6px | |
0 |
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 |
LineHeight
| Classname | Value |
16px | |
20px | |
24px | |
24px | |
1 |
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) |
TransitionDuration
| Classname | Value |
0.15s | |
0.3s | |
0.4s |
Spacing
To be used as a Tailwind prefix for defining margin and padding (eg: "m-sm", "p-xl", etc).
| Classname | Value |
0px | |
0px | |
1px | |
2px | |
4px | |
8px | |
12px | |
16px | |
24px | |
32px | |
40px | |
52px |
FontSize
| Classname | Value |
13px | |
15px | |
16px | |
18px |
FontWeight
| Classname | Value |
400 | |
500 | |
700 |
FontFamily
| Classname | Value |
'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif |
ZIndex
Default Tailwind zIndex classes are also available
| Classname | Value |
1 | |
100 | |
700 | |
825 | |
800 | |
815 | |
900 |