Skip to content

Instantly share code, notes, and snippets.

@AprilSylph

AprilSylph/design-tokens.js

Created April 24, 2025 13:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AprilSylph/7ccd0eb2b0b0e1faba2a088e005f151d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AprilSylph/7ccd0eb2b0b0e1faba2a088e005f151d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
design-tokens.js
module.exports = {
// colors
colorNavy: 'rgba(0, 25, 53, 1)',
colorBlue: 'rgba(0, 184, 255, 1)',
colorPurple: 'rgba(124, 92, 255, 1)',
colorPink: 'rgba(255, 97, 206, 1)',
colorRed: 'rgba(255, 73, 48, 1)',
colorOrange: 'rgba(255, 138, 0, 1)',
colorYellow: 'rgba(232, 215, 58, 1)',
colorGreen: 'rgba(1, 207, 53, 1)',
colorBlack: 'rgba(0, 0, 0, 1)',
colorWhite: 'rgba(255, 255, 255, 1)',
colorTransparent: 'rgba(255, 255, 255, 0)',
colorNavy3: 'rgba(251, 252, 252, 1)',
colorNavy5: 'rgba(242, 244, 245, 1)',
colorNavy10: 'rgba(229, 232, 235, 1)',
colorNavy15: 'rgba(217, 221, 225, 1)',
colorNavy20: 'rgba(204, 209, 215, 1)',
colorNavy30: 'rgba(179, 186, 194, 1)',
colorNavy40: 'rgba(153, 163, 174, 1)',
colorNavy50: 'rgba(128, 140, 154, 1)',
colorNavy60: 'rgba(102, 117, 134, 1)',
colorNavy70: 'rgba(76, 94, 114, 1)',
colorNavy80: 'rgba(51, 71, 93, 1)',
colorNavy85: 'rgba(38, 59, 83, 1)',
colorNavy90: 'rgba(26, 48, 73, 1)',
colorNavy95: 'rgba(13, 36, 63, 1)',
colorNavy100: 'rgba(0, 25, 53, 1)',
colorNavyTint3: 'rgba(0, 25, 53, 0.03)',
colorNavyTint5: 'rgba(0, 25, 53, 0.05)',
colorNavyTint10: 'rgba(0, 25, 53, 0.1)',
colorNavyTint15: 'rgba(0, 25, 53, 0.15)',
colorNavyTint20: 'rgba(0, 25, 53, 0.2)',
colorNavyTint30: 'rgba(0, 25, 53, 0.3)',
colorNavyTint40: 'rgba(0, 25, 53, 0.4)',
colorNavyTint50: 'rgba(0, 25, 53, 0.5)',
colorNavyTint60: 'rgba(0, 25, 53, 0.6)',
colorNavyTint70: 'rgba(0, 25, 53, 0.7)',
colorNavyTint80: 'rgba(0, 25, 53, 0.8)',
colorNavyTint85: 'rgba(0, 25, 53, 0.85)',
colorNavyTint90: 'rgba(0, 25, 53, 0.9)',
colorNavyTint95: 'rgba(0, 25, 53, 0.95)',
colorGray3: 'rgba(247, 247, 247, 1)',
colorGray5: 'rgba(242, 242, 242, 1)',
colorGray10: 'rgba(229, 229, 229, 1)',
colorGray15: 'rgba(217, 217, 217, 1)',
colorGray20: 'rgba(204, 204, 204, 1)',
colorGray30: 'rgba(179, 179, 179, 1)',
colorGray40: 'rgba(153, 153, 153, 1)',
colorGray50: 'rgba(128, 128, 128, 1)',
colorGray60: 'rgba(102, 102, 102, 1)',
colorGray70: 'rgba(76, 76, 76, 1)',
colorGray80: 'rgba(51, 51, 51, 1)',
colorGray85: 'rgba(38, 38, 38, 1)',
colorGray90: 'rgba(26, 26, 26, 1)',
colorGray95: 'rgba(13, 13, 13, 1)',
colorGray100: 'rgba(0, 0, 0, 1)',
colorBlackTint3: 'rgba(0, 0, 0, 0.03)',
colorBlackTint5: 'rgba(0, 0, 0, 0.05)',
colorBlackTint10: 'rgba(0, 0, 0, 0.1)',
colorBlackTint15: 'rgba(0, 0, 0, 0.15)',
colorBlackTint20: 'rgba(0, 0, 0, 0.2)',
colorBlackTint30: 'rgba(0, 0, 0, 0.3)',
colorBlackTint40: 'rgba(0, 0, 0, 0.4)',
colorBlackTint50: 'rgba(0, 0, 0, 0.5)',
colorBlackTint60: 'rgba(0, 0, 0, 0.6)',
colorBlackTint70: 'rgba(0, 0, 0, 0.7)',
colorBlackTint80: 'rgba(0, 0, 0, 0.8)',
colorBlackTint85: 'rgba(0, 0, 0, 0.85)',
colorBlackTint90: 'rgba(0, 0, 0, 0.9)',
colorBlackTint95: 'rgba(0, 0, 0, 0.95)',
colorWhiteTint3: 'rgba(255, 255, 255, 0.03)',
colorWhiteTint5: 'rgba(255, 255, 255, 0.05)',
colorWhiteTint10: 'rgba(255, 255, 255, 0.1)',
colorWhiteTint15: 'rgba(255, 255, 255, 0.15)',
colorWhiteTint20: 'rgba(255, 255, 255, 0.2)',
colorWhiteTint30: 'rgba(255, 255, 255, 0.3)',
colorWhiteTint40: 'rgba(255, 255, 255, 0.4)',
colorWhiteTint50: 'rgba(255, 255, 255, 0.5)',
colorWhiteTint60: 'rgba(255, 255, 255, 0.6)',
colorWhiteTint70: 'rgba(255, 255, 255, 0.7)',
colorWhiteTint80: 'rgba(255, 255, 255, 0.8)',
colorWhiteTint85: 'rgba(255, 255, 255, 0.85)',
colorWhiteTint90: 'rgba(255, 255, 255, 0.9)',
colorWhiteTint95: 'rgba(255, 255, 255, 0.95)',
colorBlue5: 'rgba(229, 248, 255, 1)',
colorBlue10: 'rgba(204, 241, 255, 1)',
colorBlue20: 'rgba(153, 227, 255, 1)',
colorBlue30: 'rgba(102, 212, 255, 1)',
colorBlue40: 'rgba(51, 198, 255, 1)',
colorBlue50: 'rgba(0, 184, 255, 1)',
colorBlue60: 'rgba(0, 147, 204, 1)',
colorBlue70: 'rgba(0, 110, 153, 1)',
colorBlue80: 'rgba(0, 74, 102, 1)',
colorBlue90: 'rgba(0, 37, 51, 1)',
colorBlue95: 'rgba(0, 18, 25, 1)',
colorBlueTint5: 'rgba(0, 184, 255, 0.05)',
colorBlueTint10: 'rgba(0, 184, 255, 0.1)',
colorBlueTint20: 'rgba(0, 184, 255, 0.2)',
colorBlueTint30: 'rgba(0, 184, 255, 0.3)',
colorBlueTint40: 'rgba(0, 184, 255, 0.4)',
colorBlueTint50: 'rgba(0, 184, 255, 0.5)',
colorBlueTint60: 'rgba(0, 184, 255, 0.6)',
colorBlueTint70: 'rgba(0, 184, 255, 0.7)',
colorBlueTint80: 'rgba(0, 184, 255, 0.8)',
colorBlueTint90: 'rgba(0, 184, 255, 0.9)',
colorBlueTint95: 'rgba(0, 184, 255, 0.95)',
colorPurple5: 'rgba(242, 239, 255, 1)',
colorPurple10: 'rgba(229, 222, 255, 1)',
colorPurple20: 'rgba(203, 190, 255, 1)',
colorPurple30: 'rgba(176, 157, 255, 1)',
colorPurple40: 'rgba(150, 125, 255, 1)',
colorPurple50: 'rgba(124, 92, 255, 1)',
colorPurple60: 'rgba(99, 74, 204, 1)',
colorPurple70: 'rgba(74, 55, 153, 1)',
colorPurple80: 'rgba(50, 37, 102, 1)',
colorPurple90: 'rgba(25, 18, 51, 1)',
colorPurple95: 'rgba(12, 9, 25, 1)',
colorPurpleTint5: 'rgba(124, 92, 255, 0.05)',
colorPurpleTint10: 'rgba(124, 92, 255, 0.1)',
colorPurpleTint20: 'rgba(124, 92, 255, 0.2)',
colorPurpleTint30: 'rgba(124, 92, 255, 0.3)',
colorPurpleTint40: 'rgba(124, 92, 255, 0.4)',
colorPurpleTint50: 'rgba(124, 92, 255, 0.5)',
colorPurpleTint60: 'rgba(124, 92, 255, 0.6)',
colorPurpleTint70: 'rgba(124, 92, 255, 0.7)',
colorPurpleTint80: 'rgba(124, 92, 255, 0.8)',
colorPurpleTint90: 'rgba(124, 92, 255, 0.9)',
colorPurpleTint95: 'rgba(124, 92, 255, 0.95)',
colorPink5: 'rgba(255, 239, 250, 1)',
colorPink10: 'rgba(255, 223, 245, 1)',
colorPink20: 'rgba(255, 192, 235, 1)',
colorPink30: 'rgba(255, 160, 226, 1)',
colorPink40: 'rgba(255, 129, 216, 1)',
colorPink50: 'rgba(255, 97, 206, 1)',
colorPink60: 'rgba(204, 78, 165, 1)',
colorPink70: 'rgba(153, 58, 124, 1)',
colorPink80: 'rgba(102, 39, 82, 1)',
colorPink90: 'rgba(51, 19, 41, 1)',
colorPink95: 'rgba(25, 10, 21, 1)',
colorPinkTint5: 'rgba(255, 97, 206, 0.05)',
colorPinkTint10: 'rgba(255, 97, 206, 0.1)',
colorPinkTint20: 'rgba(255, 97, 206, 0.2)',
colorPinkTint30: 'rgba(255, 97, 206, 0.3)',
colorPinkTint40: 'rgba(255, 97, 206, 0.4)',
colorPinkTint50: 'rgba(255, 97, 206, 0.5)',
colorPinkTint60: 'rgba(255, 97, 206, 0.6)',
colorPinkTint70: 'rgba(255, 97, 206, 0.7)',
colorPinkTint80: 'rgba(255, 97, 206, 0.8)',
colorPinkTint90: 'rgba(255, 97, 206, 0.9)',
colorPinkTint95: 'rgba(255, 97, 206, 0.95)',
colorRed5: 'rgba(255, 237, 234, 1)',
colorRed10: 'rgba(255, 219, 214, 1)',
colorRed20: 'rgba(255, 182, 172, 1)',
colorRed30: 'rgba(255, 146, 131, 1)',
colorRed40: 'rgba(255, 109, 89, 1)',
colorRed50: 'rgba(255, 73, 48, 1)',
colorRed60: 'rgba(204, 58, 38, 1)',
colorRed70: 'rgba(153, 44, 29, 1)',
colorRed80: 'rgba(102, 29, 19, 1)',
colorRed90: 'rgba(51, 15, 10, 1)',
colorRed95: 'rgba(25, 7, 5, 1)',
colorRedTint5: 'rgba(255, 73, 48, 0.05)',
colorRedTint10: 'rgba(255, 73, 48, 0.1)',
colorRedTint20: 'rgba(255, 73, 48, 0.2)',
colorRedTint30: 'rgba(255, 73, 48, 0.3)',
colorRedTint40: 'rgba(255, 73, 48, 0.4)',
colorRedTint50: 'rgba(255, 73, 48, 0.5)',
colorRedTint60: 'rgba(255, 73, 48, 0.6)',
colorRedTint70: 'rgba(255, 73, 48, 0.7)',
colorRedTint80: 'rgba(255, 73, 48, 0.8)',
colorRedTint90: 'rgba(255, 73, 48, 0.9)',
colorRedTint95: 'rgba(255, 73, 48, 0.95)',
colorOrange5: 'rgba(255, 243, 229, 1)',
colorOrange10: 'rgba(255, 232, 204, 1)',
colorOrange20: 'rgba(255, 208, 153, 1)',
colorOrange30: 'rgba(255, 185, 102, 1)',
colorOrange40: 'rgba(255, 161, 51, 1)',
colorOrange50: 'rgba(255, 138, 0, 1)',
colorOrange60: 'rgba(204, 110, 0, 1)',
colorOrange70: 'rgba(153, 83, 0, 1)',
colorOrange80: 'rgba(102, 55, 0, 1)',
colorOrange90: 'rgba(51, 28, 0, 1)',
colorOrange95: 'rgba(25, 14, 0, 1)',
colorOrangeTint5: 'rgba(255, 138, 0, 0.05)',
colorOrangeTint10: 'rgba(255, 138, 0, 0.1)',
colorOrangeTint20: 'rgba(255, 138, 0, 0.2)',
colorOrangeTint30: 'rgba(255, 138, 0, 0.3)',
colorOrangeTint40: 'rgba(255, 138, 0, 0.4)',
colorOrangeTint50: 'rgba(255, 138, 0, 0.5)',
colorOrangeTint60: 'rgba(255, 138, 0, 0.6)',
colorOrangeTint70: 'rgba(255, 138, 0, 0.7)',
colorOrangeTint80: 'rgba(255, 138, 0, 0.8)',
colorOrangeTint90: 'rgba(255, 138, 0, 0.9)',
colorOrangeTint95: 'rgba(255, 138, 0, 0.95)',
colorYellow5: 'rgba(253, 251, 235, 1)',
colorYellow10: 'rgba(250, 247, 216, 1)',
colorYellow20: 'rgba(246, 239, 176, 1)',
colorYellow30: 'rgba(241, 231, 137, 1)',
colorYellow40: 'rgba(237, 223, 97, 1)',
colorYellow50: 'rgba(232, 215, 58, 1)',
colorYellow60: 'rgba(186, 172, 46, 1)',
colorYellow70: 'rgba(139, 129, 35, 1)',
colorYellow80: 'rgba(93, 86, 23, 1)',
colorYellow90: 'rgba(46, 43, 12, 1)',
colorYellow95: 'rgba(23, 21, 6, 1)',
colorYellowTint5: 'rgba(232, 215, 58, 0.05)',
colorYellowTint10: 'rgba(232, 215, 58, 0.1)',
colorYellowTint20: 'rgba(232, 215, 58, 0.2)',
colorYellowTint30: 'rgba(232, 215, 58, 0.3)',
colorYellowTint40: 'rgba(232, 215, 58, 0.4)',
colorYellowTint50: 'rgba(232, 215, 58, 0.5)',
colorYellowTint60: 'rgba(232, 215, 58, 0.6)',
colorYellowTint70: 'rgba(232, 215, 58, 0.7)',
colorYellowTint80: 'rgba(232, 215, 58, 0.8)',
colorYellowTint90: 'rgba(232, 215, 58, 0.9)',
colorYellowTint95: 'rgba(232, 215, 58, 0.95)',
colorGreen5: 'rgba(230, 250, 235, 1)',
colorGreen10: 'rgba(204, 245, 215, 1)',
colorGreen20: 'rgba(153, 236, 174, 1)',
colorGreen30: 'rgba(103, 226, 134, 1)',
colorGreen40: 'rgba(52, 217, 93, 1)',
colorGreen50: 'rgba(1, 207, 53, 1)',
colorGreen60: 'rgba(1, 166, 42, 1)',
colorGreen70: 'rgba(1, 124, 32, 1)',
colorGreen80: 'rgba(0, 83, 21, 1)',
colorGreen90: 'rgba(0, 41, 11, 1)',
colorGreen95: 'rgba(0, 21, 5, 1)',
colorGreenTint5: 'rgba(1, 207, 53, 0.05)',
colorGreenTint10: 'rgba(1, 207, 53, 0.1)',
colorGreenTint20: 'rgba(1, 207, 53, 0.2)',
colorGreenTint30: 'rgba(1, 207, 53, 0.3)',
colorGreenTint40: 'rgba(1, 207, 53, 0.4)',
colorGreenTint50: 'rgba(1, 207, 53, 0.5)',
colorGreenTint60: 'rgba(1, 207, 53, 0.6)',
colorGreenTint70: 'rgba(1, 207, 53, 0.7)',
colorGreenTint80: 'rgba(1, 207, 53, 0.8)',
colorGreenTint90: 'rgba(1, 207, 53, 0.9)',
colorGreenTint95: 'rgba(1, 207, 53, 0.95)',
colorRainbow0: 'rgba(0, 184, 255, 1)',
colorRainbow1: 'rgba(1, 207, 53, 1)',
colorRainbow2: 'rgba(116, 211, 56, 1)',
colorRainbow3: 'rgba(232, 215, 58, 1)',
colorRainbow4: 'rgba(255, 138, 0, 1)',
colorRainbow5: 'rgba(255, 105, 24, 1)',
colorRainbow6: 'rgba(255, 73, 48, 1)',
colorRainbow7: 'rgba(255, 85, 127, 1)',
colorRainbow8: 'rgba(255, 97, 206, 1)',
colorRainbow9: 'rgba(190, 95, 230, 1)',
colorRainbow10: 'rgba(124, 92, 255, 1)',
// spaces
spaceXxxs: '2px',
spaceXxs: '4px',
spaceXs: '8px',
spaceS: '12px',
spaceM: '16px',
spaceL: '20px',
spaceXl: '24px',
spaceXxl: '28px',
spaceXxxl: '32px',
// radii
radiusNone: '0px',
radiusXxxs: '2px',
radiusXxs: '4px',
radiusXs: '8px',
radiusS: '12px',
radiusM: '16px',
radiusL: '20px',
radiusXl: '24px',
radiusXxl: '28px',
radiusXxxl: '32px',
radiusRound: '9999px',
// semantic radii
radiusThumbS: '2px',
radiusThumbM: '4px',
radiusThumbL: '8px',
radiusAvatarS: '2px',
radiusAvatarM: '4px',
radiusAvatarL: '8px',
radiusAvatarRound: '9999px',
radiusUiSquare: '8px',
radiusUiRound: '9999px',
radiusPostImage: '4px',
radiusBadge: '4px',
radiusLabel: '2px',
radiusButton: '9999px',
radiusDropdown: '8px',
radiusBanner: '8px',
radiusModalS: '12px',
radiusModalM: '16px',
radiusModalL: '20px',
radiusPanel: '8px',
radiusPanelMobile: '12px',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment