HUMN.AI
DESIGN SYSTEM
My first mission at Humn.ai? Build a Design System from the ground up for the Rideshur platform. The goal was simple: make design and development faster, smoother, and more consistent.
I introduced a Design Token system to keep things scalable and aligned across teams—setting the foundation for a more efficient and future-proof product.
The Project – Building the Rideshur Design System from Scratch
When I joined Humn.ai, my very first task was a big one: build a complete Design System for the Rideshur platform—entirely from scratch. The goal was clear from day one: scale the product efficiently and create a solid design foundation that could grow with the team and the business.
We all know that without a proper Design System and a centralized design library, scaling becomes messy fast. So, I started by auditing everything: cataloging every single component in the existing prototypes, comparing them with the live product, and logging all inconsistencies across design and development.
Laying the Foundation
Once the audit was complete, it was time to roll up my sleeves and get building. The new Design System was structured into three key areas:
Design Tokens
These are the backbone of the system—semantic style values (like colours, spacing, and typography) that power everything. Applying them across all components ensured consistency, scalability, and easier maintenance.
Design Foundations
This is the visual DNA of the platform—grids, colour palettes, typography, spacing scales—all documented and standardized to serve as the base of the system.
Components
Components were broken down using atomic design principles:
-
Building Blocks (Atoms): The most basic UI elements.
-
Modules (Molecules): Groups of atoms forming functional parts of the interface.
-
Templates (Organisms): Page-level structures built from modules.
Each component was rebuilt from scratch to align with design tokens, ensuring a clean and scalable system. All layers were interconnected, so updates could cascade automatically, saving time and avoiding inconsistencies.
Design Tokens – Why They Matter
Design tokens are, in simple terms, design decisions turned into code-friendly values—the subatomic particles of a scalable design system.
They carry the smallest style properties (like color #DC2626, font sizes, or spacing units) and allow those values to be reused across components. Change the token, and every instance updates—no more hunting through dozens of components to update one shade of red.
To keep things flexible and future-proof, I organized tokens into three levels:
-
Foundation Tokens – Raw values with technical naming (e.g., [humn.color.red.600]).
-
Alias Tokens – Semantically meaningful tokens that describe usage (e.g., [humn.color.status.critical]).
-
Component Tokens – Context-specific tokens for individual components (e.g., [textfield.border.error]).
This structure gave the team the freedom to evolve styles without breaking the system—true scalability with zero chaos.
© 2024, All Rights Reserved