Design Tokens

The foundation of KiteUI's soft, rounded aesthetic.

Color Palette

Soft pastel colors that create a friendly, approachable feel.

bubble-pink

Soft pink for warm, friendly elements

bubble-sky

Light blue for calm, trustworthy elements

bubble-mint

Fresh mint for success and growth

bubble-peach

Warm peach for energetic accents

bubble-lavender

Soft purple for creative elements

/* 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.

rounded-xl

12px

Small buttons, badges

rounded-2xl

16px

Cards, inputs

rounded-3xl

24px

Large cards, modals

rounded-full

9999px

Pills, avatars

Typography

Tight tracking for a modern, compact look.

Headings

font-semibold tracking-tight

Profile Name

Body

text-muted-foreground

Description text

Labels

text-sm font-medium

Field Label

Captions

text-xs text-muted-foreground

Additional info

Shadows & Effects

shadow-sm

Subtle elevation

shadow-md

Medium elevation

backdrop-blur

Glass effect

Gradients

from-pink-300 to-sky-300

from-bubble-pink via-bubble-sky to-bubble-mint

from-purple-400 to-pink-400

from-sky-400 to-emerald-400