kora-ui
HomeDocs
Design

Electric palette

Every Tailwind hue, pushed to 100% saturation. The scale mirrors Tailwind's default 50-950 ramp so every utility (bg-*, text-*, border-*, ring-*) exists and behaves identically.

red
orange
yellow
lime
green
cyan
sky
blue
indigo
violet
fuchsia
pink

Full ramps

Click any swatch to copy its token.

red

bg-electric-red-*
50
100
200
300
400
500
600
700
800
900
950

orange

bg-electric-orange-*
50
100
200
300
400
500
600
700
800
900
950

amber

bg-electric-amber-*
50
100
200
300
400
500
600
700
800
900
950

yellow

bg-electric-yellow-*
50
100
200
300
400
500
600
700
800
900
950

lime

bg-electric-lime-*
50
100
200
300
400
500
600
700
800
900
950

green

bg-electric-green-*
50
100
200
300
400
500
600
700
800
900
950

emerald

bg-electric-emerald-*
50
100
200
300
400
500
600
700
800
900
950

teal

bg-electric-teal-*
50
100
200
300
400
500
600
700
800
900
950

cyan

bg-electric-cyan-*
50
100
200
300
400
500
600
700
800
900
950

sky

bg-electric-sky-*
50
100
200
300
400
500
600
700
800
900
950

blue

bg-electric-blue-*
50
100
200
300
400
500
600
700
800
900
950

indigo

bg-electric-indigo-*
50
100
200
300
400
500
600
700
800
900
950

violet

bg-electric-violet-*
50
100
200
300
400
500
600
700
800
900
950

purple

bg-electric-purple-*
50
100
200
300
400
500
600
700
800
900
950

fuchsia

bg-electric-fuchsia-*
50
100
200
300
400
500
600
700
800
900
950

pink

bg-electric-pink-*
50
100
200
300
400
500
600
700
800
900
950

rose

bg-electric-rose-*
50
100
200
300
400
500
600
700
800
900
950

Using the palette

Import the palette once at your app's CSS entry, then use the utilities as normal Tailwind classes.

/* app/globals.css */
@import "tailwindcss";
@import "kora-ui/styles/electric.css";
<button className="bg-electric-blue-500 text-electric-blue-50 hover:bg-electric-blue-600">
  Deploy
</button>

Light vs. dark

Every shade is saturated enough to hold legibility on either surface, so the palette does not ship mode-specific tokens. As a rule of thumb: pick a lighter shade (300-500) for dark backgrounds and a darker shade (600-800) for light ones.