Default theme
Here you can found the default theme values for the different scales.
Palette
Colors
| Name | Hex | color |
|---|
black | #000000 | |
dark | #121212 | |
white | #ffffff | |
Primary
| Name | Hex | color |
|---|
primary.50 | #E4E7EF | |
primary.100 | #BCC2D8 | |
primary.200 | #909BBE | |
primary.300 | #6675A4 | |
primary.400 | #475993 | |
primary.500 | #253E82 | |
primary.600 | #1F387A | |
primary.700 | #162F6F | |
primary.800 | #0D2663 | |
primary.900 | #01164D | |
Secondary
| Name | Hex | color |
|---|
secondary.10 | #FBFCFF | |
secondary.50 | #EDF2FF | |
secondary.100 | #DCE6FF | |
secondary.200 | #CAD9FF | |
secondary.300 | #B9CCFF | |
secondary.400 | #A7C0FF | |
secondary.500 | #95B3FF | |
secondary.600 | #84A6FF | |
secondary.700 | #7299FF | |
secondary.800 | #618DFF | |
secondary.900 | #4F80FF | |
Neutral
| Name | Hex | color |
|---|
neutral.10 | #FAFAFF | |
neutral.50 | #EAEBFE | |
neutral.100 | #C8D1E7 | |
neutral.200 | #AAB2CC | |
neutral.300 | #8B94B2 | |
neutral.400 | #747E9F | |
neutral.500 | #5D698C | |
neutral.600 | #4F5C7B | |
neutral.700 | #3E4965 | |
neutral.800 | #2F374F | |
neutral.900 | #1C2438 | |
Error
| Name | Hex | color |
|---|
error.50 | #FFEBF0 | |
error.100 | #FFCDD7 | |
error.200 | #F29AA1 | |
error.300 | #EA727D | |
error.400 | #F64F5D | |
error.500 | #FD3A45 | |
error.600 | #EE3043 | |
error.700 | #DB263C | |
error.800 | #CE1D35 | |
error.900 | #BF0B29 | |
Warning
| Name | Hex | color |
|---|
warning.50 | #FFF2DF | |
warning.100 | #FFDEB0 | |
warning.200 | #FFC97D | |
warning.300 | #FFB249 | |
warning.400 | #FFA120 | |
warning.500 | #FF9100 | |
warning.600 | #FF8400 | |
warning.700 | #FC7400 | |
warning.800 | #F66200 | |
warning.900 | #ED4403 | |
Success
| Name | Hex | color |
|---|
success.50 | #E4F8EC | |
success.100 | #BFECD1 | |
success.200 | #93E1B3 | |
success.300 | #60D594 | |
success.400 | #28CB7C | |
success.500 | #00C164 | |
success.600 | #00B15A | |
success.700 | #009E4D | |
success.800 | #008D40 | |
success.900 | #006D2C | |
| Name | Hex | color |
|---|
information.50 | #E9EBFD | |
information.100 | #C7CCFA | |
information.200 | #9FABF8 | |
information.300 | #748AF5 | |
information.400 | #4F6EF3 | |
information.500 | #1E52EE | |
information.600 | #1749E2 | |
information.700 | #003ED6 | |
information.800 | #0032CB | |
information.900 | #001ABA | |
Accent
| Name | Hex | color |
|---|
accent.50 | #F1EEFE | |
accent.100 | #E3DEFD | |
accent.200 | #D4CDFC | |
accent.300 | #C6BCFB | |
accent.400 | #B8ACFA | |
accent.500 | #AA9BF8 | |
accent.600 | #9C8AF7 | |
accent.700 | #8D79F6 | |
accent.800 | #7F69F5 | |
accent.900 | #7158F4 | |
Text Styles
| Name | Value | color |
|---|
text-primary | neutral.900 | |
text-secondary | neutral.800 | |
text-disabled | neutral.500 | |
text-link | information.500 | |
text-success | success.800 | |
text-warning | warning.500 | |
text-error | error.900 | |
Background Primary State Styles
| Name | Value | color |
|---|
bg-primary-enabled | primary.800 | |
bg-primary-disabled | primary.600 | |
bg-primary-hover | primary.900 | |
bg-primary-focus | primary.900 | |
bg-primary-pressed | primary.900 | |
Background Secondary State Styles
| Name | Value | color |
|---|
bg-secondary-enabled | secondary.800 | |
bg-secondary-enabled-light | secondary.50 | |
bg-secondary-disabled | secondary.200 | |
bg-secondary-hover | secondary.600 | |
bg-secondary-hover-light | secondary.400 | |
bg-secondary-focus | secondary.600 | |
bg-secondary-focus-light | secondary.400 | |
bg-secondary-pressed | secondary.600 | |
bg-secondary-pressed-light | secondary.400 | |
Border Styles
| Name | Value | color |
|---|
border-primary | primary.800 | |
border-secondary | secondary.200 | |
Layout
Border Widths
| Name | Value |
|---|
"none" | 0px |
"2xs" | 0.5px |
"xs" | 1px |
"sm" | 2px |
"md" | 3px |
"lg" | 4px |
"xl" | 5px |
"2xl" | 6px |
"3xl" | 7px |
"4xl" | 8px |
Radius
| Name | Value |
|---|
"none" | 0px |
"xs" | 2px |
"sm" | 4px |
"md" | 8px |
"lg" | 12px |
"xl" | 16px |
"2xl" | 10px |
"3xl" | 24px |
"4xl" | 32px |
"full" | 9999px |
Spacing
| Name | Value |
|---|
"0" | 0px |
"0.5" | 2px |
"1" | 4px |
"1.5" | 6px |
"2" | 8px |
"2.5" | 10px |
"3" | 12px |
"3.5" | 14px |
"4" | 16px |
"5" | 20px |
"6" | 24px |
"7" | 28px |
"8" | 32px |
"9" | 36px |
"10" | 40px |
"12" | 48px |
"16" | 64px |
"20" | 80px |
"24" | 96px |
"32" | 128px |
"40" | 160px |
"48" | 192px |
"56" | 224px |
"64" | 256px |
"72" | 288px |
"80" | 320px |
"96" | 384px |
"1/2" | 50% |
"1/3" | 33.333% |
"2/3" | 66.666% |
"1/4" | 25% |
"2/4" | 50% |
"3/4" | 75% |
"1/5" | 20% |
"2/5" | 40% |
"3/5" | 60% |
"4/5" | 80% |
"1/6" | 16.666% |
"2/6" | 33.333% |
"3/6" | 50% |
"4/6" | 66.666% |
"5/6" | 83.333% |
"full" | 100% |
Sizes
| Name | Value |
|---|
"0" | 0px |
"0.25" | 1px |
"0.5" | 2px |
"1" | 4px |
"1.5" | 6px |
"2" | 8px |
"2.5" | 10px |
"3" | 12px |
"3.5" | 14px |
"4" | 16px |
"5" | 20px |
"6" | 24px |
"7" | 28px |
"8" | 32px |
"9" | 36px |
"10" | 40px |
"12" | 48px |
"16" | 64px |
"20" | 80px |
"24" | 96px |
"32" | 128px |
"40" | 160px |
"48" | 192px |
"56" | 224px |
"64" | 256px |
"72" | 288px |
"80" | 320px |
"96" | 384px |
Typography
letter Spacings
| Name | Value |
|---|
"2xs" | -0.8 |
"xs" | -0.4 |
"sm" | 0.1 |
"md" | 0.4 |
"lg" | 0.8 |
"xl" | 1.6 |
Line Heights
| Name | Value |
|---|
"2xs" | 16 |
"xs" | 18 |
"sm" | 20 |
"md" | 22 |
"lg" | 24 |
"xl" | 28 |
"2xl" | 32 |
"3xl" | 40 |
Font Weights
| Name | Value |
|---|
"thin" | 100 |
"xlight" | 200 |
"light" | 300 |
"regular" | 400 |
"medium" | 500 |
"semibold" | 600 |
"bold" | 700 |
"extrabold" | 800 |
"black" | 900 |
Font Sizes
| Name | Value |
|---|
"2xs" | 12 |
"xs" | 14 |
"sm" | 16 |
"md" | 18 |
"lg" | 20 |
"xl" | 24 |
"2xl" | 30 |
"3xl" | 32 |
Font Families
| Font | variant |
|---|
"Epilogue" | normal, italic |
"Inter" | normal, italic |