Design system
Design System for an Inventory Management App
The system was built to support an inventory management app for retailers, with a focus on essential UI elements like stock tracking, supplier management, and low-stock alerts.
Project Details
Role
UI Designer
Industry / business
SaaS
Project duration
2 Weeks
Objective
This project showcases my ability to create a robust and practical design system using Figma. The focus was on clean organization, reusable components, and clear documentation.
Purpose
The system was built to support an inventory management app for retailers, with a focus on essential UI elements like stock tracking, supplier management, and low-stock alerts.
Focus Areas:
Crafting reusable components.
Building an organized Figma file for easy navigation.
Creating clear, visual documentation for future use.
The Challenge
The primary focus was to create a system that was both practical and visually cohesive, while maintaining clarity and simplicity for future users of the design library.
Key Challenges:
Balancing Simplicity and Functionality:
Inventory management interfaces require clarity and usability above all. Components like tables, filters, and modals had to strike a balance between being visually appealing and functional for users managing large amounts of data.
File Organization for Scalability:
A key challenge was structuring the Figma file in a way that made it easy to navigate, update, and hand off to developers or other designers. Ensuring components, styles, and documentation were logically grouped and named required meticulous attention to detail.
Non-Commercial Nature:
As this was a non-commercial project, the design process was purely focused on showcasing skills rather than solving specific user or business problems. The challenge was to create a system that felt real and practical despite the absence of external constraints or stakeholders.
Laying the Foundation: Mood Boards, Key Screens, and Harmony
The first step in building a design system for Stockpile was to dive into the Material Design 3 system. It served as a guide to better understand how to properly organize the initial structure and ensure the system was grounded in tried-and-true principles. Beyond that, I needed to establish a strong visual direction—because let’s face it, creating a design system on a blank canvas is an uphill battle. Designing without context often leads to components that feel disjointed or need extensive rework later.
Personally, I prefer to design with context. Elements in a UI need to interact harmoniously, so it’s best to create them in a shared space where they naturally complement each other. To avoid the dreaded blank canvas syndrome, I started by collecting inspiration through mood boards. Once I had a general idea of the aesthetic I wanted to achieve, I moved on to exploring a few key use cases:
Dashboard View: A high-level overview showcasing key inventory metrics and actions.
Inventory View: A detailed table of items, categories, and stock levels.
Suppliers View with a Map: A mix of list-based data and geographical visualization.
Once the visual direction was set, I exported individual elements into Figma’s component library, refining and standardizing them for future scalability.
Structure, Organization & WCAG
My focus was on following best practices of to create a system that was efficient, scalable, and easy to use. Key tools included variants, variables, WCAG guidelines and auto layouts, which ensured components were flexible and adaptable to different contexts.
It was important to me, that the colors would work together on a white canvas. Having a lot of data to show and elements that would need users attention can be a tricky problem, because you often have to prioritize user engagement & accessibility over brand awareness. To solve this I went for the energetic bright orange, that would convey the feeling of movement (data, charts, inventory management) and I used it as my primary. To complement that, I used royal blue to keep this professional feeling.
Foundation Library:
Typography
Colors
Spacing
Elevation
Grid System
Glass Effect
Clean and Modern Typography
I selected the sans-serif Satoshi font for its modern and clean look, ensuring readability across different contexts. The type hierarchy was simple:
Bold headings for clarity and emphasis.
Semibold labels for structure.
Regular weight paragraphs for easy readability.
Energy Meets Professionalism
Primary Color: Bright orange #FF6700 to add vibrancy and draw attention.
Secondary Color: Royal blue #0037FD for balance and a polished, professional feel.
Neutral Colors: Shades of gray were used for less prominent elements like borders and dividers, providing a warm backdrop for the energetic orange.
Typography Contrast: Darker shades of gray (#212121 for headings and #424242 for body text) made reading easier and reduced eye strain, especially in data-dense layouts.
Status colors: As for the standard status states I went for the bright green for success and darker red for errors.
Glass Effect: A Subtle, Modern Touch
To add depth and a touch of modernity, I incorporated a subtle glass effect in select areas of the UI. It enhanced the aesthetic without overpowering the functional design.
Accessibility
To make sure my design is passing accessibility standards, I used plugins Contrast for checking contrast ratio of certain elements and Stark for vision disability simulation.
Key takeaways & Used plugins
This project was an opportunity to focus solely on the practical aspects of creating a robust design system. By narrowing the scope to the UI and system structure, I was able to channel my energy into designing a library that is both visually cohesive and easy to use. It was a valuable exercise in organization, efficiency, and attention to detail—key qualities I strive to bring to every project.
Some important lessons and insights from this process include:
Starting with a clear visual direction and designing in context helped me ensure that every component worked harmoniously with others from the start.
Thoughtful color and typography choices can define the tone of an application and make it easier for users to navigate dense information.
Carefull file organization in Figma is essential for collaboration, scalability, and long-term usability.
This project reinforced the importance of balancing creativity with structure, and how a well-crafted design system can serve as a foundation for building consistent and scalable digital products. While this wasn’t a commercial project, it was a great opportunity to refine my skills and demonstrate my ability to deliver clean, practical designs that are easy to work with.
As of now, I’m still looking forward to work more on a documentation of this design system and preparing design tokens, using external applications and plugins to better cooperate with developers, so stay tuned!
Plugins & websites I used to help me work more eficiently:
Many Paster: Coping & pasting multiple text content for columns
Propstar: Organizing Figma components
Batch Styler: Editing multiple style libraries at once
ChatGPT: Image generation, filling the data for presentation purposes and rapid iterations on general ideas
Material Design Palette Generator: Creating cohesive shades of colors.
Contrast: Checking contrast ratio of certain elements, texts and graphics.
Stark: Vision disability simulation
Untiled UI Icon set
If you are interested in my work, please feel free to explore my other projects or contact me. Thank you for taking the time to explore this case study.