top of page

PROJECT OVERVIEW

InstUI Design System

An ongoing project for defining foundations, patterns, and processes
for a cohesive product ecosystem

🔒 This project is under NDA, please contact me for more details.

🔭 Objectives

  • Unify and modernize the UI by bringing existing fragmented libraries together under a cohesive visual direction.

  • Align Figma and code libraries, ensuring that designers and developers work with the same components rather than parallel, unsynced versions.

  • Establish patterns and guidelines that help teams make consistent decisions for complex workflows, such as search, filtering, and bulk actions.

  • Build trust with designers and developers so that the system becomes the go-to resource, reducing the need for custom, one-off solutions.

  • Support accessibility and scalability with a robust token system that covers multiple themes and contrast modes.

👩‍💻 My Role

I am currently working as a Senior Product Designer on the design system team, where I:

  • Lead the creation of a new design system based on the existing coded components.

  • Integrate the modern look and feel from newer, team-created libraries.

  • Establish scalable patterns and guidelines to support design and engineering decisions.

  • Serve as interim product manager, setting up the backlog and organizing the team’s work.

🎯 Strategic Approach

To establish a foundation, we are creating North Star screens that define the overall style direction. This involves:

  • Refining the color ramp from the provided palette.

  • Selecting an accessible, modern typeface.

  • Experimenting with visual foundations that balance modern aesthetics with scalability.

  • Collaborating with other teams to align early and build shared ownership.

We've also successfully built a robust token system (with Tokens Studio) that:

  • Supports four variable modes, including contrast modes and light/dark themes.

  • Connects directly between Figma and code for reliability and efficiency.

⚙️ Execution

Our work is progressing in two parallel tracks:

  • Rebuilding the Component Library

    • Reconstructing the Figma library to align with the coded components.

    • Adding usability and accessibility improvements.

    • Building components modularly on top of the new token system.

    • Incorporating AI accessibility by structuring components, properties, and layers in ways codegen can interpret correctly.

  • Establishing Key Patterns

    • Defining and documenting patterns for workflows such as search & filtering and bulk actions.

    • Creating guidance that helps teams make faster, more consistent decisions.

To organize this work, I created a component inventory matrix that maps dependencies:

  • Identifies which components are foundational.

  • Shows which can be built in parallel.

  • Serves as the basis for sprint planning and backlog management.

📊 Current Status & Next Steps

Current status

  • The token system is live (4 variable modes). Developers are already using it in active workstreams.

  • Component library rebuild is in progress (modular, token-driven), with foundational pieces underway.

  • Designers have started turning to the DS team more frequently for guidance and decisions (early signs of trust).

  • North Star direction is informing component specs and pattern drafts.

Next steps

  • Finish component parity (Figma ↔ code) and publish v1 usage guidance.

  • Release initial key patterns (search & filtering, bulk actions) with examples.

  • Expand accessibility verification (contrast modes, structure readable by dev tools).

  • Formalize governance & contribution (intake, reviews, versioning).

  • Define and track adoption signals (token usage in code, library pulls, pattern references).

bottom of page