My first role on Litebox

When I joined Litebox, this was my first project: I started from the branding already developed by another designer on the team, and my job was to turn that visual language into a robust, scalable design system.

Design System

I built the entire system from the ground up: breakpoints, typography scale, buttons, color tokens, spacing, and the rest of the atoms and components, always staying true to the identity the original designer had laid out in the branding. The goal was for any new screen built afterward to rely on consistent rules, without having to reinvent design decisions on every page.

Modular architecture, per client request

The client needed to be able to freely rebuild the site from their CMS, assembling new pages by combining existing pieces without depending on a developer for every change. To solve this, instead of designing complete, closed pages, we split the design system into independent sections, each self contained and with its own 4 breakpoints (360, 768, 1280, and 1440+). Any section could be combined with any other and the result would still hold together visually, no matter the order or the number of sections used.

Applying it across the rest of the site

With the system and the sections defined, we moved on to the rest of the pages: several solutions pages, product pages, and other sections of the site, all built on that same modular base. The project also had a dedicated illustrator for the site's main illustrations.

This was my first project at the agency, and it taught me more than just the technical side of building a system. I got to see firsthand how well this team works: their pace, their methodology, the way they approach a project from day one. I'm genuinely happy with how this team operates, and it made settling into a brand new environment a lot easier than I expected.

It was also around this project that I started exploring Claude as an AI tool for the first time. I wasn't using it in depth yet, more just discovering what it could add to the process, but it was the beginning of incorporating it into how I work.

On the design side, this project confirmed something I keep coming back to since: for clients who want full independence over their site, an Atomic Design approach, breaking the system down into small, self contained, combinable pieces rather than closed, fixed pages, is by far the strongest way to deliver that. It's what actually lets a client rebuild their site freely without breaking anything, and it's a principle I now look for at the start of any project with similar needs.

👇 the full project on Litebox's Behance.
https://lnkd.in/ds2tm6hv