Introduction

The main goal of the Expense Management Design System is to create a seamless, scalable system that ensures consistency across platforms and provides clear, reusable components to save time and effort.

The journey began with research, analyzing and comparing popular design systems to define best practices. Then, by considering brand goals and technical requirements, a system was created that supports two brand modes, light and dark theme modes and responsive modes for mobile, tablet and desktop.

The system is based on 4 collections:

Primitives – Foundation variables for colors and sizing.

Brand – Supports two brand modes.

Theme – Defines colors and elements for light and dark themes.

Responsive – Adapts sizing and typography tokens for mobile, tablet, and desktop.

On this page, you'll find the core foundations that serve as the building blocks of the system. These foundational elements define the key rules and attributes that ensure both visual and functional consistency across the design. In addition to the foundations, the system includes a set of components such as buttons, inputs, badges, checkboxes, charts, and more. These elements, along with templates and pages, are organized using the Atomic Design methodology.

Colors

Primitives – The fundamental color palette that provides base values. Primitive tokens are for reference only. They provide the foundation for other tokens.

Brand Colors – These include primary and functional colors that represent various statuses of design system elements, using the primitive values. This collection supports two brand modes.

Semantic and Alpha Tokens – These palettes include a range of brand colors for text, links, icons, foreground, background, and border colors, adjusted for both light and dark themes. Alpha color variables manage opacity for white and black fill colors across both modes.

Aliasing design tokens in Figma helps maintain a structured and scalable color system by linking tokens to foundational values. It allows any token to reference or take on the value of another token. If a token changes, then any token linked to it will update as well. Aliasing lets organize tokens into categories and sub-categories. These categories communicate how a token is used.

Typography

In the design system, the font family is defined in the Brand collection to establish the base for all typography, making it easy to update for each brand. For more detailed typography settings, the 'Responsive' variables collection is used. This includes three modes (Desktop, Tablet, Mobile) to ensure consistency and scalability across different screen sizes. Based on research and best practices font sizes have been defined to meet different hierarchy needs.

Sizing & Radius

Primitive sizing sets the basic values for size tokens, creating a consistent scale for spacing and dimensions that keeps everything looking balanced and responsive across the design system.

All sizing tokens are stored in the Responsive collection, making sure they scale properly across different devices like mobile, tablet and desktop. This helps elements adjust automatically to different spacing and padding sizes using simple number variables.

Breakpoint & Grid

Breakpoints set key screen sizes for responsive design, making sure the layout adjusts smoothly across different devices. The grid system gives a flexible framework for aligning content, keeping spacing and proportions consistent, and ensuring a balanced, responsive interface.

Effects

Shadows are used to add depth, create hierarchy, and give a sense of materiality, enhancing both the aesthetic and user experience. They bring visual interest, help differentiate elements, while blur effects improve readability and add a modern, fresh look to the design.

Conclusion

While building the entire design system from scratch and starting with an empty Figma file was time-consuming, it was truly an enjoyable process.

With collections for two brands, light and dark modes, and responsive design for mobile, tablet, and desktop, the system keeps everything visually consistent and user-friendly. Its flexibility ensures that as the product evolves, the design system can easily adapt, keeping things efficient and consistent for the long term.