Every tool in.
One file out.
Walk the tools in order — palettes, type, shadows, buttons all converge into a single design file. Export once, as CSS or Figma JSON.
Every tool in.
One file out.
Walk the tools in order — palettes, type, shadows, buttons all converge into a single design file. Export once, as CSS or Figma JSON.
Or use the tools one by one
Every tool works standalone — anything you make can still be added to your design file.
Palette generator
Generate full 50–900 shade scales from any color using perceptually uniform OKLCH math. Export as CSS variables or Figma-ready JSON.
Gradient studio
Build gradients that actually look good. Interpolate through OKLCH to avoid the grey, muddy band that ruins most CSS gradients.
OKLCH color picker
Pick colors natively in the OKLCH space. Drag the gamut canvas, spin the hue wheel, and export in any format — hex, oklch, rgb, hsl.
Type guide
Set typography standards for desktop and mobile. Choose a modular scale ratio, load Google Fonts, and export CSS variables or utility classes.
Button maker
Design primary and secondary buttons in three sizes. Dial in border radius, padding, font size, and weight — then export production-ready CSS.
Shadow & elevation
Build a semantic shadow scale tinted from your palette. Preview on light and dark surfaces and export as CSS tokens or Figma JSON.
Border glow
Wrap a card, button, or search field in an animated conic-gradient border beam. Tune palette, geometry, and motion, then export pure CSS.
Case converter
Transform text between 13 different cases and formats — sentence, title, camel, snake, kebab, slug, and more. Plus copy clean-up utilities.