Bloom | An independent design system studio by Erik Rodriguez

bloom.

A little direction. Room to grow.

Product design & development

A moodboard can capture a feeling. Turning that feeling into a coherent system of type, color, and components is a different kind of work.

Built and available to explore

Browser-based studio: Live
Coordinated starting directions: 6 presets

Independent, open-source product · designed and built by me.

Open bloom.

A feeling.
Then a foundation.

A moodboard gives a designer a direction. It doesn’t tell them how colors, type, and components should work together.

I designed and built Bloom to close that gap: a quiet studio for turning a visual intention into a system you can use.

Keep the freedom to explore.
Give every choice something to grow from.

Nobody starts
with nothing.

An empty editor asks for decisions before people understand the consequences. Bloom opens with a complete, view-only reference instead.

Explore it. See how it works. Then create your own system, with the original always there to return to.

Bloom’s live design-system library, with foundations and components ready to explore — The first experience is a working reference, not a setup form. Creation produces a separate system and keeps existing work intact.

One decision.
A whole family.

A color means little on its own. I made its relationships visible: how it grows into a palette, takes on a purpose, and reaches a component.

50: #fefbfc100: #fcf3f6200: #f9e5ec300: #f5d5e0400: #f1c5d4500: #edb4c8600: #c797a8700: #a17a88800: #7b5e68900: #554148

#edb4c8The starting color

Try another starting color.

Primary coloraction-primarybutton-background

Blossom now carries the main action. The text color adjusts for contrast.

A working excerpt of Bloom’s color model. The starting color feeds both the shade palette and the primary action; component tokens reference that action by name.

Bloom’s color editor showing a generated palette and semantic color roles — The actual editor keeps foundations and their roles together. People can see what a decision affects before changing it.

A little direction.
Still entirely yours.

Six coordinated presets give people something to react to. A live preview follows the choices through color, typography, space, and motion.

The preset starts the conversation. Every foundation stays editable.

Choosing Quiet studio in Bloom’s creation flow, with a live dark-mode preview — A direction and its consequences, side by side. The preview makes the next decision easier to understand.

Even the cherry blossoms follow the primary color. The wood and moonlight hold their structure while the expression changes, the same idea as the system itself.

Good ideas
should travel.

A preview shows that a direction holds together. The next step is making it useful outside the studio.

One decision, carried into code.

:root {
  --action-primary: #edb4c8;
  --action-on-primary: #000000;
  --button-background:
    var(--action-primary);
  --button-text:
    var(--action-on-primary);
}

An excerpt of Bloom’s default action tokens.

Build it.: A code bundle with tokens, responsive component styles, a working HTML demo, and editable configuration.
Share it.: A six-page PDF that carries the decisions into a conversation.
Return to it.: Bloom JSON preserves the editable system for import back into the studio.

Room to grow.

Bloom is live and open source, with editable foundations, fourteen documented component families, and coordinated light and dark appearances. Focused tests cover generation, validation, import, and export.

Next, I want to learn how people carry an intention through to implementation, and add general CSS and Figma imports and a distributable component library.

Explore Bloom