Lìonra started as a single tool. Today, the ecosystem includes Lìonra (the main platform, with a lab, blog, and open projects), Lìonra Image (image compression and conversion), Lìonra QRGen (QR code generator), Lìonra CV (resume builder), and two tools still under construction, Lìonra CSS and Lìonra PDF. Alongside those, two satellite projects round out the set, Sharepanel and Github-cards.
When I launched the first tool, I wasn't thinking in terms of an ecosystem. I was thinking: this specific thing solves this specific need. It was the second tool that forced a shift in posture, was I building isolated tools, or something coherent? This post walks through what answering that question taught me.
Visual consistency isn't a detail, it's a landmark
Same colors, same buttons, same typography across every tool. Not just because it looks nice, but because it acts as a cognitive landmark for the user. When someone lands on Lìonra QRGen after using Lìonra Image, they should recognize home without having to think about it.
That instant recognition is exactly what turns a loose collection of tools into a coherent brand. Without it, every tool stays its own isolated product, even if they all sit under the same domain.
In practice, that means defining a shared color palette, reusable interface components (buttons, inputs, cards), and a single typography system, then applying them strictly from the very first design pass of each new tool, rather than retrofitting them after the tool already exists.
A consistent UI, not an identical one
This is the trap I almost fell into. Lìonra Image and Lìonra QRGen share a very similar usage pattern: drag and drop a file or a piece of data, tweak one or two settings, get an instant result. The natural temptation was to copy that minimal UI everywhere, including on Lìonra CV.
Bad idea. A resume builder isn't a drop-and-click tool. It's a tool where the user enters, structures, and organizes information over time, multiple fields, multiple sections, constant back-and-forth between editing and previewing. Forcing the same minimal UI as the other tools would have broken the actual workflow.
// ❌ Wrong approach: copy the "dropzone" UI everywhere
// Lìonra Image and QRGen: upload → adjust → instant result
// → forcing that same structure onto Lìonra CV
// ✅ Right approach: same identity, structure adapted to the use case
// Lìonra Image / QRGen: dropzone + 1-2 controls + instant export
// Lìonra CV: multi-field editor + live preview
// + section-based navigation (info, experience, education...)
//
// In both cases: same colors, same buttons, same typography.
// Only the interaction structure changes, because the need changes.
Lìonra CV keeps the ecosystem's visual identity, colors, accents, typography, base components, but with a radically different interface structure: a multi-field editor organized into sections, not a simple drag-and-drop. Consistency isn't uniformity. It's keeping the same visual language while letting each tool speak for its own use case.
Building an ecosystem means accepting debt along the way
Lìonra CSS and Lìonra PDF are still under construction. And that's fine. An ecosystem doesn't get built in a single sprint, it gets built tool by tool, accepting that some pieces stay in progress while others are already in daily use by real people.
That acceptance has a direct architectural consequence: every tool needs to be able to evolve independently from the others, without blocking each other's release schedule. That means avoiding tight dependencies between tools, each one has to work standalone, even if the experience gets better when used together.
The real test of an ecosystem: the handoff between two tools
The moment that truly reveals whether the consistency works is when a user moves from one tool to another. If the transition feels smooth and natural, with no relearning friction, the ecosystem is working. If every tool feels like its own separate universe, with its own visual conventions and its own muscle memory to build, that's not an ecosystem, that's just a list of links in a menu.
- Shared visual identity: same colors, typography, and base components across every tool
- Adapted interaction structure: each tool keeps the structure its real use case demands, not the structure of the others
- Functional independence: every tool must work standalone, without depending on the others working correctly
- Accepted progression: accepting that some tools stay under construction while others are already live
- Smooth handoff: the real test of consistency happens at the moment a user switches tools, not inside a single tool
What I'm taking away from this
Building an ecosystem isn't about repeating the same interface everywhere. It's about precisely defining what needs to stay identical, the visual identity, the landmarks, the trust a user places in the brand, and what needs to change, the structure, the interaction, the rhythm, tool by tool, based on what each one actually needs.
The Lìonra ecosystem keeps growing: Lìonra Image, QRGen, and CV are live, Lìonra CSS and PDF are under construction. Sharepanel and Github-cards round things out as open-source satellite projects.
Top comments (0)