W3C DTCG, Style Dictionary, Tailwind, CSS variables or SCSS. Name each role and copy the file straight into your project.
{
"color": {
"primary": {
"$value": "#7c5cff",
"$type": "color"
},
"secondary": {
"$value": "#00d4ff",
"$type": "color"
},
"accent": {
"$value": "#ff7ad9",
"$type": "color"
},
"success": {
"$value": "#10b981",
"$type": "color"
},
"warning": {
"$value": "#f59e0b",
"$type": "color"
},
"danger": {
"$value": "#ef4444",
"$type": "color"
},
"neutral": {
"$value": "#64748b",
"$type": "color"
},
"background": {
"$value": "#ffffff",
"$type": "color"
},
"foreground": {
"$value": "#0b0b10",
"$type": "color"
}
}
}