Bloom

Manual

Not a Svelte project? Lift the tokens by hand. You'll lose the component composition but keep the visual system.

Scope

Manual consumption is for React, Vue, plain HTML, or a landing page that doesn’t need the component layer. You get:

  • The hex token palette and the semantic token names.
  • The Geist type stack.
  • The 4px spacing rhythm and the radius scale.
  • Light + dark theming via data-theme.

You do not get: the bloom-nx component layer, the motion tokens’ prefers-reduced-motion behavior baked into utilities, or the bits-ui composition.

1. Copy the tokens

Grab both token files from the Bloom repo — src/lib/tokens/bloom-primitives.css (the ~870 hex --bloom-* primitives) and src/lib/tokens/theme.css (the semantic aliases that point at them). They’re plain CSS — no build step. Import bloom-primitives.css first, then theme.css, before any component styles: the aliases resolve to nothing without the primitives, so order matters.

src/lib/tokens/ (abridged) 
/* bloom-primitives.css — hex base, switches on [data-theme] */
:root,
[data-theme='light'] {
	--bloom-background-surface: #ffffff;
	--bloom-background-surface-neutral: #faf9fa;
	--bloom-background-button-brand-primary: #5f34ec;
	/* …~870 --bloom-* primitives… */
}

[data-theme='dark'] {
	--bloom-background-surface: #0c0c0e;
	--bloom-background-button-brand-primary: #7e71f6;
	/* …every primitive redeclared… */
}

/* theme.css — semantic aliases onto the primitives (theme-agnostic) */
:root,
[data-theme='light'] {
	--radius: 0.875rem;
	--page: var(--bloom-background-surface-neutral); /* canvas */
	--background: var(--surface-1); /* feed / base */
	--foreground: var(--bloom-text-base-primary);
	--primary: var(--bloom-background-button-brand-primary);
	--border: var(--bloom-border-base-neutral-subtle);
	--ring: var(--bloom-border-action-focus);
	/* …remaining semantic aliases… */
}

2. Consume by variable name

Reference tokens with var(). Don’t inline raw hex values — the whole point is that the palette is centralized and the dark theme reroutes every variable.

styles.css 
.btn {
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
}

3. Fonts

Install @fontsource-variable/geist and @fontsource-variable/geist-mono via your package manager, or self-host the woff2 files from Vercel Font. Set font-family: 'Geist Variable', system-ui, sans-serif on html.

4. Icons

Bloom uses Remix Icon. Browse and download SVGs from remixicon.com and inline them, or load the remixicon web font and emit <i class="ri-{name}"> glyphs — or use any icon set that fits your stack.

page.html 
<!-- Drop the SVG in /public/icons/ and reference it. -->
<img src="/icons/arrow-right.svg" alt="" width="16" height="16" />

5. Dark mode

Toggle data-theme="dark" on <html>. The token file already defines every variable for both themes, so a single attribute flip recolors the whole tree.