Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza
Last active August 27, 2024 18:24
Show Gist options
  • Save jasonmelgoza/5c5406de171724f5ed1767107642d9d5 to your computer and use it in GitHub Desktop.
Save jasonmelgoza/5c5406de171724f5ed1767107642d9d5 to your computer and use it in GitHub Desktop.
{
"base": {
"white": "colors.white",
"black": "colors.black",
"gray": {
"25": {
"hex": "#FCFCFD",
"hsl": "240, 20.0%, 99.0%"
},
"50": {
"hex": "#F9FAFB",
"hsl": "210, 20.0%, 98.0%"
},
"100": {
"hex": "#F2F4F7",
"hsl": "216, 23.8%, 95.9%"
},
"200": {
"hex": "#EAECF0",
"hsl": "220, 16.7%, 92.9%"
},
"300": {
"hex": "#D0D5DD",
"hsl": "216.9, 16.0%, 84.1%"
},
"400": {
"hex": "#98A2B3",
"hsl": "217.8, 15.1%, 64.9%"
},
"500": {
"hex": "#667085",
"hsl": "220.6, 13.2%, 46.1%"
},
"600": {
"hex": "#475467",
"hsl": "215.6, 18.4%, 34.1%"
},
"700": {
"hex": "#344054",
"hsl": "217.5, 23.5%, 26.7%"
},
"800": {
"hex": "#182230",
"hsl": "215, 33.3%, 14.1%"
},
"900": {
"hex": "#101828",
"hsl": "220, 42.9%, 11%"
},
"950": {
"hex": "#0C111D",
"hsl": "222.4, 41.5%, 8%"
}
},
"darkGray": {
"25": {
"hex": "#FAFAFA",
"hsl": "0, 0.0%, 98.0%"
},
"50": {
"hex": "#F5F5F6",
"hsl": "240, 5.3%, 96.3%"
},
"100": {
"hex": "#F0F1F1",
"hsl": "180, 3.4%, 94.3%"
},
"200": {
"hex": "#ECECED",
"hsl": "240, 2.7%, 92.7%"
},
"300": {
"hex": "#CECFD2",
"hsl": "225, 4.3%, 81.6%"
},
"400": {
"hex": "#94969C",
"hsl": "225, 3.9%, 59.6%"
},
"500": {
"hex": "#85888E",
"hsl": "220, 3.8%, 53.9%"
},
"600": {
"hex": "#61646C",
"hsl": "223.6, 5.4%, 40.2%"
},
"700": {
"hex": "#333741",
"hsl": "222.9, 12.1%, 22.7%"
},
"800": {
"hex": "#1F242F",
"hsl": "221.2, 20.5%, 15.3%"
},
"900": {
"hex": "#161B26",
"hsl": "221.2, 26.7%, 11.8%"
},
"950": {
"hex": "#0C111D",
"hsl": "222.4, 41.5%, 8%"
}
},
"brand": {
"25": {
"hex": "#FCFAFF",
"hsl": "264, 100%, 99.0%"
},
"50": {
"hex": "#F9F5FF",
"hsl": "264, 100%, 98.0%"
},
"100": {
"hex": "#F4EBFF",
"hsl": "267, 100%, 96.1%"
},
"200": {
"hex": "#E9D7FE",
"hsl": "267.7, 95.1%, 92.0%"
},
"300": {
"hex": "#D6BBFB",
"hsl": "265.3, 88.9%, 85.9%"
},
"400": {
"hex": "#B692F6",
"hsl": "261.6, 84.7%, 76.9%"
},
"500": {
"hex": "#9E77ED",
"hsl": "259.8, 76.6%, 69.8%"
},
"600": {
"hex": "#7F56D9",
"hsl": "258.8, 63.3%, 59.4%"
},
"700": {
"hex": "#6941C6",
"hsl": "258, 53.8%, 51.6%"
},
"800": {
"hex": "#53389E",
"hsl": "255.9, 47.7%, 42.0%"
},
"900": {
"hex": "#42307D",
"hsl": "254, 44.5%, 33.9%"
},
"950": {
"hex": "#2C1C5F",
"hsl": "254.3, 54.5%, 24.1%"
}
},
"error": {
"25": {
"hex": "#FFFBFA",
"hsl": "12, 100%, 99.0%"
},
"50": {
"hex": "#FEF3F2",
"hsl": "5, 85.7%, 97.3%"
},
"100": {
"hex": "#FEE4E2",
"hsl": "4.3, 93.3%, 94.1%"
},
"200": {
"hex": "#FECDCA",
"hsl": "3.5, 96.3%, 89.4%"
},
"300": {
"hex": "#FDA29B",
"hsl": "4.3, 96.1%, 80.0%"
},
"400": {
"hex": "#F97066",
"hsl": "4.1, 92.5%, 68.8%"
},
"500": {
"hex": "#F04438",
"hsl": "3.9, 86%, 58%"
},
"600": {
"hex": "#D92D20",
"hsl": "4.2, 74.3%, 48.8%"
},
"700": {
"hex": "#B42318",
"hsl": "4.2, 76.5%, 40%"
},
"800": {
"hex": "#912018",
"hsl": "4, 71.6%, 33.1%"
},
"900": {
"hex": "#7A271A",
"hsl": "8.1, 64.9%, 29%"
},
"950": {
"hex": "#55160C",
"hsl": "8.2, 75.3%, 19%"
}
},
"warning": {
"25": {
"hex": "#FFFCF5",
"hsl": "42, 100%, 98.0%"
},
"50": {
"hex": "#FFFAEB",
"hsl": "45, 100%, 96.1%"
},
"100": {
"hex": "#FEF0C7",
"hsl": "44.7, 96.5%, 88.8%"
},
"200": {
"hex": "#FEDF89",
"hsl": "44.1, 98.3%, 76.7%"
},
"300": {
"hex": "#FEC84B",
"hsl": "41.9, 98.9%, 64.5%"
},
"400": {
"hex": "#FDB022",
"hsl": "38.9, 98.2%, 56.3%"
},
"500": {
"hex": "#F79009",
"hsl": "34, 93.7%, 50.2%"
},
"600": {
"hex": "#DC6803",
"hsl": "27.9, 97.3%, 43"
},
"700": {
"hex": "#B54708",
"hsl": "21.8, 91.5%, 37.1%"
},
"800": {
"hex": "#93370D",
"hsl": "18.8, 83.7%, 31.4%"
},
"900": {
"hex": "#7A2E0E",
"hsl": "17.8, 79.4%, 26.7%"
},
"950": {
"hex": "#4E1D09",
"hsl": "17.4, 79.3%, 17.1%"
}
},
"success": {
"25": {
"hex": "#F6FEF9",
"hsl": "142.5, 80%, 98.0%"
},
"50": {
"hex": "#ECFDF3",
"hsl": "144.7, 81%, 95.9%"
},
"100": {
"hex": "#DCFAE6",
"hsl": "140, 75%, 92.2%"
},
"200": {
"hex": "#ABEFC6",
"hsl": "143.8, 68%, 80.4%"
},
"300": {
"hex": "#75E0A7",
"hsl": "148, 63.3%, 66.9%"
},
"400": {
"hex": "#47CD89",
"hsl": "149.6, 57.3%, 54.1%"
},
"500": {
"hex": "#17B26A",
"hsl": "152.1, 77.1%, 39.4%"
},
"600": {
"hex": "#079455",
"hsl": "153.2, 91%, 30.4%"
},
"700": {
"hex": "#067647",
"hsl": "154.8, 90.3%, 24.3%"
},
"800": {
"hex": "#085D3A",
"hsl": "155.3, 84.2%, 19.8%"
},
"900": {
"hex": "#074D31",
"hsl": "156, 83.3%, 16.5%"
},
"950": {
"hex": "#053321",
"hsl": "156.5, 82.1%, 11%"
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment