Color Palette

Soft pastel colors that create a friendly, approachable feel. Copies the Tailwind class (e.g. bg-bubble-pink).

CSS variable lines (click to copy):

/* Tailwind CSS v4 - globals.css */
@theme inline {
  --color-bubble-pink: oklch(0.95 0.03 350);
  --color-bubble-sky: oklch(0.95 0.03 220);
  --color-bubble-mint: oklch(0.95 0.03 160);
  --color-bubble-peach: oklch(0.95 0.03 60);
  --color-bubble-lavender: oklch(0.95 0.03 280);
}

Border Radius

Generous rounding creates the signature KiteUI feel.

Typography

Tight tracking for a modern, compact look.

Shadows & Effects

Gradients

Copies the gradient stop classes. Use with bg-gradient-to-r or bg-gradient-to-br.