AAKASH

Base design system

Building a universal design system powering 6 products across Aakash

Introduction

Seven product teams, seven ways to build a button!

That sentence lived in our roadmap and in the daily friction between designers and devs. I proposed this design system in order to stop wasted design time, reduce bugs, and give product teams a shared toolkit that saved hours and cut rework

My Role as an independent designer

End-to-end, Lead designer

I led the initiative end-to-end: auditing existing interfaces, defining cross-platform tokens, building components, and partnering with engineers to ship a code-backed system and adoption playbook

Design systems work is much more about people than pixels

Problems we faced

Issues holding our product teams back

As our product ecosystem grew, so did the gaps between teams. What started as small inconsistencies turned into UI debt, slower execution, and rising frustration. Major problems we faced were,

Execution speed

Most time went to fixing handoffs, delaying releases and pushing ideas to backlogs

Execution speed

Most time went to fixing handoffs, delaying releases and pushing ideas to backlogs

Execution speed

Most time went to fixing handoffs, delaying releases and pushing ideas to backlogs

Execution speed

Most time went to fixing handoffs, delaying releases and pushing ideas to backlogs

Design dev collaboration

UI debt caused misalignment, back-and-forth fixes, and slower delivery

Design dev collaboration

UI debt caused misalignment, back-and-forth fixes, and slower delivery

Design dev collaboration

UI debt caused misalignment, back-and-forth fixes, and slower delivery

Design dev collaboration

UI debt caused misalignment, back-and-forth fixes, and slower delivery

Scalability

7 products were using seven design languages, making it hard to ship features quickly

Scalability

7 products were using seven design languages, making it hard to ship features quickly

Scalability

7 products were using seven design languages, making it hard to ship features quickly

Scalability

7 products were using seven design languages, making it hard to ship features quickly

Inconsistency

Different styles and patterns led to a broken experience and constant rework

Inconsistency

Different styles and patterns led to a broken experience and constant rework

Inconsistency

Different styles and patterns led to a broken experience and constant rework

Inconsistency

Different styles and patterns led to a broken experience and constant rework

Why this mattered?

Inconsistent UI meant poor user experience, more bugs, and slower product velocity

Our goal was clear: one system that reduces friction, speeds implementation, and scales with the teams

Solution was obvious

A single design system for all products

With this born the nomenclature "Base", serving as a foundation for all of our products

Base design system

Exam management (Enterprise)

Phoenix (Enterprise)

Aakash Guru (Enterprise)

Crystal (B2C)

Vyom (B2C)

MyAakash (B2C)

Aakash DLP (B2C)

The approach

Process we followed while implementing the DS

Rather than jumping straight into building components, we followed a structured process. We audited existing patterns, defined a shared foundation, tested it with teams in real work, and only then moved to implementation.

Step 1

Component audit

We reviewed seven products and mapped 180+ component variations, uncovering duplication and inconsistencies slowing teams down.

Step 1

Component audit

We reviewed seven products and mapped 180+ component variations, uncovering duplication and inconsistencies slowing teams down.

Step 1

Component audit

We reviewed seven products and mapped 180+ component variations, uncovering duplication and inconsistencies slowing teams down.

Step 1

Component audit

We reviewed seven products and mapped 180+ component variations, uncovering duplication and inconsistencies slowing teams down.

Step 2

DS Creation

We built tokens, patterns, and core components, giving all teams a shared visual language for the first time.

Step 2

DS Creation

We built tokens, patterns, and core components, giving all teams a shared visual language for the first time.

Step 2

DS Creation

We built tokens, patterns, and core components, giving all teams a shared visual language for the first time.

Step 2

DS Creation

We built tokens, patterns, and core components, giving all teams a shared visual language for the first time.

Step 3

Team usage & feedbacks

Designers tested early components, helping us refine real-world gaps and shape a system teams actually wanted to use.

Step 3

Team usage & feedbacks

Designers tested early components, helping us refine real-world gaps and shape a system teams actually wanted to use.

Step 3

Team usage & feedbacks

Designers tested early components, helping us refine real-world gaps and shape a system teams actually wanted to use.

Step 3

Team usage & feedbacks

Designers tested early components, helping us refine real-world gaps and shape a system teams actually wanted to use.

Step 4

Code implementation

We translated designs into reusable coded components and synced them with Figma, reducing handoff friction dramatically.

Step 4

Code implementation

We translated designs into reusable coded components and synced them with Figma, reducing handoff friction dramatically.

Step 4

Code implementation

We translated designs into reusable coded components and synced them with Figma, reducing handoff friction dramatically.

Step 4

Code implementation

We translated designs into reusable coded components and synced them with Figma, reducing handoff friction dramatically.

Step 5

Component QA & Rollout

Each component passed visual and functional QA before we rolled it out to all teams for daily use.

Step 5

Component QA & Rollout

Each component passed visual and functional QA before we rolled it out to all teams for daily use.

Step 5

Component QA & Rollout

Each component passed visual and functional QA before we rolled it out to all teams for daily use.

Step 5

Component QA & Rollout

Each component passed visual and functional QA before we rolled it out to all teams for daily use.

Step 6

Feedback tracking and upgrade requests

Feedback sheets to track QAs bugs, new component requirements & deprecate nonusable components

Step 6

Feedback tracking and upgrade requests

Feedback sheets to track QAs bugs, new component requirements & deprecate nonusable components

Step 6

Feedback tracking and upgrade requests

Feedback sheets to track QAs bugs, new component requirements & deprecate nonusable components

Step 6

Feedback tracking and upgrade requests

Feedback sheets to track QAs bugs, new component requirements & deprecate nonusable components

Things we focused on while executing

Tokens first

A cross-platform token map to guarantee consistent color/spacing/typography across design and code

We also, overrid existing tailwind CSS tokens with our own naming convention which gave us advantage of easier design understanding and developer alignment

A cross-platform token map to guarantee consistent color/spacing/typography across design and code

We also, overrid existing tailwind CSS tokens with our own naming convention which gave us advantage of easier design understanding and developer alignment

module.exports = {
  theme: {
    borderRadius: {
      "border-radius-small": "4px",
      "border-radius-medium": "6px",
      "border-radius-large": "8px",
      full: "9999px",
    },
  },
};

Component audit → build → feedback loop

Audit existing components, design system creation, team trial, then iterate

Developer alignment

Map Figma components to JSX and provide usage rules and code samples so engineers could consume components fast

Things we focused on while executing

Variables

Symentic tokens

Semantic tokens remove hardcoded values from components and replace them with intent-based variables. This creates a clear contract between design and code, making theming, global updates, and long-term maintenance much easier and safer.

For eg, single button codebase themed differntly across different platforms

// Base design system

<div className="base-ds">
  <Button

  variant="primary"
  size="md"
  leftIcon={<MagnifyingGlass 
  size={16}
  weight="bold"/>}
  rightIcon={<ArrowRight size={16} 
  weight="bold" />}>

  Get started

</Button>
</div>

// My Aakash App

<div className="base-ds">
  <Button

  variant="primary"
  size="md"
  leftIcon={<MagnifyingGlass 
  size={16}
  weight="bold"/>}
  rightIcon={<ArrowRight size={16} 
  weight="bold" />}>

  Get started

</Button>
</div>

Typography

Font for Base Design System

Circular Std

The universe is a vast and intricate expanse, filled with countless galaxies.

Choose product to change typo

My Aakash

Phoenix

Vyom

Aakash DLP

Typography

Font for Base Design System

Circular Std

The universe is a vast and intricate expanse, filled with countless galaxies.

Choose product to change typo

My Aakash

Phoenix

Vyom

Aakash DLP

Typography

Font for Base Design System

Circular Std

The universe is a vast and intricate expanse, filled with countless galaxies.

Choose product to change typo

My Aakash

Phoenix

Vyom

Aakash DLP

Typography

Font for Base Design System

Circular Std

The universe is a vast and intricate expanse, filled with countless galaxies.

Choose product to change typo

My Aakash

Phoenix

Vyom

Aakash DLP

Color pallete

The color system was rebuilt from the ground up using a token-driven approach. Contrast-tested values to meet AA/AAA for future scope.

// Paste a code snippet

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          myaakash: {
            primary: "#1A73E8",
            secondary: "#185ABC",
            accent: "#E8F1FF",
          },
          phoenix: {
            primary: "#FF6B00",
            secondary: "#CC5600",
            accent: "#FFF1E6",
          },

Iconography

Phosphorus icon library

All the icons were inconsistent across 7 products. A simple back arrow had more variations which we can't count, and we spent time editing its margins.

Thus, we used a unified library, Phosphorus Icons. One major benefit was using icon weights seamlessly integrated with our different brand languages

All the icons were inconsistent across 7 products. A simple back arrow had more variations which we can't count, and we spent time editing its margins.

Thus, we used a unified library, Phosphorus Icons. One major benefit was using icon weights seamlessly integrated with our different brand languages

// Paste a code snippet

import phosphorus icon library

Grid & layouts

The grid was designed to scale cleanly from mobile to web. A 4-column grid at 360px maps directly to a 12-column grid at 1200px (4×3), allowing three mobile screens to fit seamlessly into the web layout. This made responsive design predictable and enabled teams to reuse layouts across breakpoints with minimal rework

Some of the components

Sneakpeak into base universe,

Buttons

5 Variations, 4 Sizes, 7 Products

Inputs

7 States, 10 Variants

Dropdowns

Includes search, multiselect, descriptive liners & icons

Cards

Clubbing content into scannable layouts

Bottom navigation

Both in dark or light, upto 5 tabs max

Skeleton

Simple loader for most of the usecases

Badges

Most used component with lot of variations

Toasts

Feedback without interrupting user flow

Calendar

Date duration or multiple individual days

Tables

Over 60% of enterprise product workflows relied on tables as the primary layout

And 80+ unique components, which powered 7 products

Collaboration highlights

Team sync is everything while building a system

Every week became a huddle of designers, engineers, and PMs untangling these differences together. These syncs became alignment rituals that kept everyone moving in one direction. Bit by bit, the system started to feel like one unified product, not seven stitched together

Cross-functional syncs with the team

Design UAT Sessions

Cross-functional syncs with the team

Design UAT Sessions

Cross-functional syncs with the team

Design UAT Sessions

Cross-functional syncs with the team

Design UAT Sessions

Launch

March 2026

We are planning to launch it in upcoming months, once development of all the comps is ready. Till now we have released 30% of the designs across all products and have acheived

Base design system

Base design system

Seven product teams, seven ways to build a button!

Seven product teams, seven ways to build a button!

End-to-end, Lead designer

End-to-end, Lead designer

Issues holding our product teams back

Issues holding our product teams back

Inconsistent UI meant poor user experience, more bugs, and slower product velocityOur goal was clear: one system that reduces friction, speeds implementation, and scales with the teams

Inconsistent UI meant poor user experience, more bugs, and slower product velocityOur goal was clear: one system that reduces friction, speeds implementation, and scales with the teams

A single design system for all products

A single design system for all products

Process we followed while implementing the DS

Process we followed while implementing the DS

Component audit

Component audit

Component audit

DS Creation

DS Creation

DS Creation

Team usage & feedbacks

Team usage & feedbacks

Team usage & feedbacks

Code implementation

Code implementation

Code implementation

Component QA & Rollout

Component QA & Rollout

Component QA & Rollout

Feedback tracking and upgrade requests

Feedback tracking and upgrade requests

Feedback tracking and upgrade requests

Tokens first

Tokens first

Component audit → build → feedback loop

Component audit → build → feedback loop

Developer alignment

Developer alignment

Variables

Variables

Symentic tokens

Symentic tokens

Circular Std

My Aakash

Phoenix

Vyom

Aakash DLP

Circular Std

My Aakash

Phoenix

Vyom

Aakash DLP

Circular Std

My Aakash

Phoenix

Vyom

Aakash DLP

Circular Std

My Aakash

Phoenix

Vyom

Aakash DLP

Color pallete

Color pallete

Phosphorus icon library

Phosphorus icon library

Grid & layouts

Grid & layouts

Some of the components

Some of the components

Buttons

Buttons

Inputs

Dropdowns

Cards

Bottom navigation

Skeleton

Badges

Toasts

Calendar

Inconsistent UI meant poor user experience, more bugs, and slower product velocity

Our goal was clear: one system that reduces friction, speeds implementation, and scales with the teams

Inconsistent UI meant poor user experience, more bugs, and slower product velocity

Our goal was clear: one system that reduces friction, speeds implementation, and scales with the teams