Truffle — Stax Design System

Role

Lead UX Designer

Industry

FinTech

Tools

Figma,Storybook

Partners

Design Team, Entineering

Overview

A scalable, unified design system built from the ground up to eliminate UI inconsistencies, accelerate development, and establish a single source of truth across all Stax applications.

Problem Statement

Every team was solving the same problems — differently.

Design side

Designers repeatedly reinvented UI patterns with no shared library, creating visual inconsistencies across products.

Dev side

Developers implemented components inconsistently, causing friction in cross-team collaboration and slower time-to-market.

Research & Discovery

Grounded in audits, benchmarks, and real team feedback

Competitive analysis: Benchmarked industry-leading systems, Google Material Design, IBM Carbon, to identify best practices and avoid reinventing the wheel.

Internal UX audit: Documented UI inconsistencies and pain points across all Stax applications to establish a clear baseline.

Stakeholder interviews: Engaged designers, developers, and PMs to surface workflow inefficiencies and define what the system needed to solve first.

Design Process

Built to last — and built to be used

Naming & brand identity

Named "Truffle" after Stax's pig mascot, playful but purposeful branding that drove internal adoption and gave the system a personality teams could rally around.

Accessible color system

Built and rigorously tested a color palette to meet AA contrast standards. Navigated a mid-project company rebrand requiring a full color and typography overhaul.

Typography pivot

Switched from a non-monospaced font to a monospaced one better suited for fintech, ensuring precision and legibility in numerical displays.

Core component library

Prioritized buttons, text fields, dropdowns, and modals, each with flexible states, dark/light theming, and WCAG-compliant contrast ratios.

Storybook integration

Partnered with engineering to build real-time component testing and documentation in Storybook, with design tokens bridging the design-to-code handoff.

Do's & Don'ts documentation

Created clear usage guidelines to prevent inconsistencies and reduce back-and-forth between designers and engineers during implementation.

Impact

Faster cycles. Cleaner handoffs. A more inclusive product.

30%

Faster design-to-development cycles

AA

WCAG contrast compliance across all components

1

Source of truth for all Stax applications

Cross-functional collaboration

Standardized guidelines eliminated the constant back-and-forth between design and engineering.

Scalability

A modular, token-based system that evolves with Stax's product and brand as the company grows.

Take a Peek at the Truffle Design System

Here

Future Considerations

Expand to include motion design and advanced data visualization components.

Implement automated accessibility testing for ongoing compliance.

Establish a governance model to ensure long-term maintenance and system evolution.

Takeaways

Design for change

A mid-project rebrand forced a full overhaul, scalability and flexibility aren't optional in a design system.

Adoption is a design problem

Training sessions, onboarding materials, and stakeholder buy-in were just as important as the components themselves.

Structure enables creativity

Standardization doesn't limit designers, it frees them to focus on innovation within a reliable foundation.