Start with a point of view.
Choose a coordinated preset, pair heading and body fonts, and tune color, spacing, shape, and motion with a live preview.
Independent project · Open source
bloom.
A place for your
ideas to take root.
A design system studio for the creative soul. Find a direction, shape a visual language, and leave with a foundation you can build on.
Built for the creative soul.By Erik Rodriguez
- Project
- Independent, open-source product
- My role
- Concept, product design, visual identity, development
- Built with
- Vue 3 · TypeScript · Vitest
Hosted on GitHub Pages
The idea
Make the starting point worth starting from.
Bloom helps designers, developers, and independent creatives turn an initial visual direction into a coherent design system. I wanted to make the space between a blank canvas and a usable foundation feel approachable, without reducing a system to a couple of colors.
The product decision
Show what is possible.
Then make room for their own.
Bloom opens with a complete, view-only reference. People can explore the relationships between colors, typography, spacing, components, and motion before making decisions for their own project.
Creation is a guided workflow with six coordinated style presets. Each direction gives people something concrete to respond to, then lets them adjust the details. The original stays intact while their system becomes the studio’s visual language.
From direction to system
A little guidance. Room to grow.
Move beyond the palette.
Separate raw values from their purpose. Surfaces, text, actions, and feedback receive semantic roles that carry through light and dark appearances.
Leave with something usable.
Export a code starter with tokens, responsive component styles, and a working demo, or share a PDF reference. Bloom JSON keeps the system editable.
A foundation with purpose.
Brand expression and interface feedback have different jobs.
SuccessWarningErrorInfo
Primitive / the value
--color-error-500Semantic / the purpose
--error-borderComponent / the application
--input-invalidOne decision flows into the interface.
Visual identity
The system blooms
as it evolves.
The blossom tree makes the central idea visible: a system grows from shared roots. Its flowers reflect the project’s branding, while the tree and moon give Bloom a recognizable identity of its own.
I paired photographic bark with vector blossoms, restrained motion, and a quiet interface. The tree is expressive; the controls give people the clarity to work. On mobile, the composition keeps the primary action clear of the artwork.
What exists today
A working product.
An ongoing practice.
Bloom is live and open source, with 70 palette shades, editable feedback colors, paired typography, component examples, motion guidelines, and page-specific developer references. Focused Vitest checks cover token generation, imports, exports, color conversion, and workspace behavior.
This is an independent product exploration, with no adoption or business-impact claims. It provides a practical starting system. Broader imports and a complete distributable component library are still future work.
Built for the creative soul. A starting point for what comes next.