Open the studioColor, type, gradients. Everything ships as code. One studio, zero handoff friction.
Design tokens that speak Figma, CSS, Tailwind, JSON. Whatever your stack runs on.
Every token lands as a CSS variable, dark-mode overrides included. Paste once, theme forever.
:root {
--brand-500: #457b9d;
--brand-600: #38638b;
--accent-500: #e63946;
}
[data-theme="dark"] {
--brand-500: #7db3d5;
--accent-500: #f27d88;
}Brand scales mapped to the same variables, ready for utilities like bg-brand-500.
colors: {
brand: {
500: "var(--brand-500)",
600: "var(--brand-600)",
},
accent: {
500: "var(--accent-500)",
},
}Standards-format design tokens that drop straight into Style Dictionary or any token build.
"brand": {
"500": {
"$type": "color",
"$value": "#457b9d"
},
"600": {
"$type": "color",
"$value": "#38638b"
}
}KOLO writes the files to a branch and opens the pull request. Tokens ship like code.
branch kolo/tokens-update commit chore(tokens): brand scales v3 src/styles/tokens.css +42 −18 tailwind.config.ts +9 −4 ✓ pull request opened
Connect once with a six-character code, then push a palette, a type system, or a whole kit into the file you’re working in. Scoped variables, text styles, light and dark modes, no manual renaming. Go on, try it.
Plus SCSS, SVG, and shareable links.
Fresh palettes from the community. Click one to open it in the studio.
See all trends