✦ Case Study · Design System

Base360
Unified Inbox Design System

Building a scalable design language from the ground up for a B2C unified inbox SaaS — then shipping a high-fidelity landing page designed to convert.

Product
Base360
Role
UI/UX Designer · Design Systems Lead
Platform
Web — B2C SaaS
Scope
Design Tokens · Component Library · Landing Page

A unified inbox needs a unified design language.

Base360 brings every customer conversation — email, chat, social — into a single inbox. Before any screen could be designed at speed, the product needed a real design system underneath it: consistent tokens, clear Figma naming conventions, and a component library that could scale across future features.

I owned this end-to-end: the full design system, and a polished, high-fidelity landing page built to convert visitors into signups.

1
Complete design system shipped
1
Hi-fi landing page, live-coded
100%
Figma-to-code consistency

No system means no speed later.

Without a defined design system, every new screen would mean re-deciding spacing, color, and component behavior from scratch — slowing the team down right when they needed to move fast.

Problem Statement

Base360 needed a design foundation that could scale with the product — not just a set of screens, but tokens and components future features could plug into without reinventing the wheel.

What was missing

  • No defined design tokens (color, spacing, type scale)
  • No naming convention for components in Figma
  • No reusable component library
  • No landing page built to convert, just a placeholder

Goals

  • Ship a scalable, documented design system
  • Establish clean naming conventions for team handoff
  • Build a landing page with real interactive polish
  • Keep Figma and shipped code in sync

Scaffolding the structure, writing the words.

Two parts of this project leaned on AI tooling directly — mapping out the landing page's structure before locking layout, and getting first-draft copy that didn't sound generic.

Relume — IA Scaffolding
Used to scaffold the landing page's information architecture and section flow early on, so I could evaluate structure before investing time in high-fidelity Figma work.
Claude — On-Brand Copywriting
Used to draft and iterate on-brand copy across the FAQ, testimonials, and pricing sections — then hand-edited for tone and accuracy against Base360's actual voice.
Where the judgment stayed human

The design tokens, component naming conventions, and the interactive scroll-synced lead card were built by hand — this is the layer where consistency and craft matter most, and where AI-generated defaults tend to feel generic.


A system built to scale, a page built to convert.

🎨
Design Tokens
Color, spacing, and type scale defined as reusable tokens — the single source of truth for every future screen.
🧩
Component Library
A documented, consistently-named Figma component library the team can build from without guesswork.
🚀
Landing Page
Hi-fi, hand-coded landing page with a scroll-synced interactive lead card, pricing, testimonials, and FAQ.

A foundation the product can build on.

1
Complete, documented design system
1
Live, hand-coded landing page
100%
Naming consistency across Figma files
Design Systems B2C SaaS Design Tokens Component Library AI-Assisted Copywriting
Lessons Learned

AI tooling is at its best scaffolding structure and drafting first-pass content — it's not a substitute for the naming discipline and visual consistency a real design system needs. Those still take deliberate, unhurried craft.

Next Case Study
Àdàbà AI — Legal Assistant for TFGBV Survivors