back to projects

building libra ai from the ground up

product designdesign system

design system, onboarding, web app and marketing site for an early stage ai product.

2026

overview

i joined libra ai as their product designer, coming in early enough that there was no design foundation to build on. the work spans three fronts: a design system from scratch, the product itself from onboarding through the web app, and the marketing site that introduces it all.

design system

built the company’s design system from scratch, establishing reusable components so design to dev handoff stops being a negotiation every time. the goal was less about a tidy library and more about giving the team one source of truth they could actually ship from.

buttons

seven hierarchies from primary solid down to link gray, each with rest and hover states, in label only, leading icon and trailing icon variants.

libra ai button variants with label only
with label
libra ai button variants with a leading icon
with leading icon
libra ai button variants with a trailing icon
with trailing icon

toggle

libra ai toggle component variants
twelve toggle variants

sidebar

two sidebar treatments: one that keeps recent work visible, and a lighter one that collapses to the essentials.

libra ai sidebar variants
sidebar/1 and sidebar/2

chatbox

libra ai chatbox composer states
composer states

onboarding and web app

designed the onboarding flows and the web app end to end, translating requirements into interfaces that feel obvious to use. onboarding carries a lot of weight for an early product, so it got the most attention: the shortest path to someone understanding what libra does for them.

onboarding

four steps from first sign in to a workspace that already knows where your work lives and who you work with.

libra ai welcome and sign in screen
welcome to libra workbase
libra ai hosting choice screen
where should your brain live
libra ai integrations connection screen
connect your context
libra ai team invite screen
invite your team

enterprise landing page

designed the enterprise landing page along with the feature, use case and blog pages, so the story stays consistent from the first visit through to the product.

watch my work live

illustrations

a set of isometric illustrations built for the landing page, carrying the same visual language across the feature and use case sections.

isometric illustration of libra ai integrations
isometric illustration of stacked libra ai layers
isometric illustration of libra ai surfaces
isometric illustration of connected libra ai tools