# Philo Design System

- **Industry:** e-commerce
- **Status:** 2-week dev cycle
- **Team:** 2 designers, founder, 2 developers
- **Timeline:** July 2025 (3-week sprint)
- **Skills:** Figma, Material 3

A 3-week sprint where I turned 15 scattered screens into a dev-ready UI library: a
token-based foundation, 50 documented components, and UI templates that engineers could
build from directly. UX infrastructure for an e-commerce MVP.

## Challenge

The startup had a prototype pieced together from an open-source UI kit and mockups made by
a non-designer. There were no rules whatsoever, while the dev team was shipping at the same
time.

## Audit and review

I audited every existing screen to catalogue inconsistent colors, type, spacing, and
interaction patterns, and identified which pieces could be consolidated into shared
components.

## Solution: one system, built to grow with the product

50+ components, all mapped to React Native. New screens were assembled from existing parts
instead of designed from scratch, cutting the design-to-dev cycle from months to two weeks.
Design tokens flow from foundations into components and full pages.

## Component mapping

Each Figma component maps one to one to its React Native counterpart, so designers and
engineers share a single source of truth.

## More

- [All work](https://ruocanpeng.com/) · [About Stella](https://ruocanpeng.com/about) · [Contact](https://ruocanpeng.com/contact)