UI DESIGN KIT
UX Research | UI Redesign | User Experience
Bare beginnings – Creating a design system
As a first design team member, I worked on creating the first iteration of StockEdge design system.
TIMELINE
PLATFORM
TEAM MEMBER
1.5 Months
Web & Mobile
Nirupam Paul
ABOUT THE PROJECT
As StockEdge grew across app and web, maintaining consistency across screens and features became important. This project focused on creating a reusable UI Design Kit that brought together core elements like colors, typography, buttons, input fields, cards, icons, and component states.
GOAL
The UI design kit was created to bring consistency, speed, and scalability to the product experience.
-
Consistency: Provide designers and developers with a single source of truth.​
-
Efficiency: Speed up design and development cycles with reusable components and guide new team members smoothly.
-
Collaboration: Enhance communication between cross-functional teams through shared understanding.
-
User Experience: Deliver a seamless and intuitive interface across all StockEdge products.
Understanding the Gaps in the Existing UI
Before building the design kit, I reviewed rather audited all existing app screens to understand how UI elements were being used across different features.
What I looked at
-
Colors and typography
-
Buttons and input fields
-
Cards and content containers
-
Icons and navigation patterns
-
Spacing and layout structure
-
Component states such as default, active, disabled, error, and empty states
What I found
The audit revealed that similar components were being used in different ways across the product. This created visual inconsistency, increased repetitive design work, and made it harder to maintain a unified experience as the product scaled.
Why it mattered
These findings helped define the foundation of the UI Design Kit by identifying which components needed to be standardized, reused, and documented for future product development.
Building a Scalable Design Foundation
Light Theme
Primary
Semantic
Accent
Dark Theme
Primary
Semantic
Accent
Typeface
The five boxing wizards jump quickly
The five boxing wizards jump quickly
01 COLOR
Primary
Reinforces brand recognition and Signals primary user actions clearly.
LM - BLUE
DM -- BLUE
Semantic
Uses color intentionally to signal status, feedback, and financial meaning across the interface.
LM - RED
LM - GREEN
LM - YELLOW
DM -- RED
DM -- GREEN
ACCENT
Adds visual variety, highlights secondary actions, and helps differentiate data without overusing primary or semantic colors.
ORANGE
LM - HOVERBLUE
NEUTRALS
Provides a clean base that supports readability, contrast, and helps key content and actions stand out.
LM-GREY1
LM-GREY2
LM-GREY3
LM-LBLUE1
LM-LBLUE2
LM-GREY1
LM-GREY2
LM-GREY3
LM-LBLUE1
WHITE
02 TYPOGRAPHY
Title - XXL
80px / 700
The five boxing wizards jump quickly
Title - XL
56px / 700
The five boxing wizards jump quickly
Title - L
44px / 700
The five boxing wizards jump quickly
Title - M
32px / 700
The five boxing wizards jump quickly
Title - S
The five boxing wizards jump quickly
24px / 700
FS-Base
The five boxing wizards jump quickly
18px / 500
FS-Large
16px / 500
FS-Regular
14px / 500
FS-Small
12px / 500
FS-Large
16px / 400
FS-Regular
14px / 400
FS-Small
12px / 400
03 SPACING
Bridging Design and Development
To make the design kit easier to implement, I documented the details developers usually need from designers — component specs, spacing, colors, typography, states, assets, and usage rules.
​
​By making these details explicit, the design kit reduced ambiguity during handoff and helped developers build reusable components with consistency across the product.
Lesson Learned
Since this was my first Industry experience on creating a design system for a company, I learnt a bunch of things
?
Vikrant, my manager used to make me to answer the “Why” behind every decision. “Why is the submit button on the left & not right?”. He repeatedly asked me to think of multiple solutions rather than sticking to one.
I also learned to not marry a tool and focus on prototyping on pen+paper. I was an Adobe fanboy since childhood, but here I had to shift to Figma.
A
I level upped my typography game as well. I learned about using font-weight and letter-spacing to create visual hierarchy in the content
CLOSING NOTE
Unfortunately, the work done for design system is covered under NDA. Hence I can’t share the complete work here. Please get in touch to know more.