Bloom

Installation

Bloom is a small, opinionated design system for vibe-coded prototypes. Purple brand, Geist fonts, primitives recolored with bloom-nx tokens. Pick how you want to consume it.

Guides

SvelteKit

The expected home. Clone, install, start designing.

Vite

Non-kit Svelte apps — same primitives, no file-based router.

Manual

Plain HTML, React, or anything else — lift the tokens only.

components.json

The config the add CLI reads. Know each field.

What you get

Tokens

Semantic hex token palette, Geist type, 4px rhythm, motion curves. Everything flows from one theme file.

Components

Familiar API shapes on bits-ui — no extra wrapper layer — recolored with bloom-nx tokens, plus first-class bloom-only extensions beyond the base catalog.

Prototypes

A handoff surface for vibe-coded flows. Ship real screens; devs get a live reference, not a static spec.

Stack

Bloom stays close to the defaults so you can lean on every bits-ui doc without translation:

  • SvelteKit with runes (svelte@5).
  • Tailwind v4 with @theme inline wiring CSS variables into utility classes.
  • bits-ui primitives (no wrapper layer).
  • Hex design tokens — a --bloom-* primitive base (src/lib/tokens/bloom-primitives.css) aliased to semantic tokens in theme.css, built on a neutral base color that Bloom recolors.
  • Geist Variable + Geist Mono Variable via @fontsource-variable.
  • Remix Icon via the <Icon> primitive — glyphs named -line (outline) / -fill (solid), off the remixicon font.

Next steps

Start with SvelteKit if you’re building a new prototype. If you already have an app and want the brand, jump to Theming to lift the palette.