Palette
Click any shade to copy
Preview
Shade
Buttons
Card
Example card
Small copy block to preview body text. Adjust fonts in the sidebar.
Form
success message
warning message
error message
primary
secondary
accent
neutral
success
warning
error
{
"colors": {
"primary": {
"50": "#FFFFFF",
"100": "#E4DAFB",
"200": "#C8B7F7",
"300": "#AA94F2",
"400": "#8972ED",
"500": "#6051E7",
"600": "#443AB7",
"700": "#322976",
"800": "#1F183B",
"900": "#000000"
},
"secondary": {
"50": "#FFFFFF",
"100": "#C1E5F0",
"200": "#7BCCE1",
"300": "#0BB1CF",
"400": "#1B91A9",
"500": "#1F7385",
"600": "#1E5562",
"700": "#1A3941",
"800": "#132023",
"900": "#000000"
},
"accent": {
"50": "#FFFFFF",
"100": "#FFD9AB",
"200": "#FDB14E",
"300": "#E09110",
"400": "#B87714",
"500": "#915F16",
"600": "#6B4715",
"700": "#483012",
"800": "#281C0C",
"900": "#000000"
},
"neutral": {
"50": "#FFFFFF",
"100": "#DCDFE5",
"200": "#BAC1CC",
"300": "#99A3B3",
"400": "#79869A",
"500": "#5C6A7F",
"600": "#454F5E",
"700": "#2F363F",
"800": "#1B1E22",
"900": "#000000"
},
"success": {
"50": "#FFFFFF",
"100": "#BFE9D3",
"200": "#7CD1A9",
"300": "#10B981",
"400": "#1B976A",
"500": "#1D7754",
"600": "#1C5940",
"700": "#183C2C",
"800": "#122119",
"900": "#000000"
},
"warning": {
"50": "#FFFFFF",
"100": "#FFD9AB",
"200": "#FDB14E",
"300": "#E09110",
"400": "#B87714",
"500": "#915F16",
"600": "#6B4715",
"700": "#483012",
"800": "#281C0C",
"900": "#000000"
},
"error": {
"50": "#FFFFFF",
"100": "#FFD6D0",
"200": "#FFABA0",
"300": "#FC7C71",
"400": "#F04746",
"500": "#BD3A38",
"600": "#8B2E2B",
"700": "#5C231F",
"800": "#311613",
"900": "#000000"
}
}
}