Design System · In Progress

Building
Pansu UI

A premium, token-based design system being built for SaaS products, dashboards, admin panels, mobile apps, and websites. Built to scale.

Explore SystemView Progress →

100+

Components Planned

2

Themes

1500+

Design Tokens

About the Project

Why I Started
Building Pansu UI

Working across multiple SaaS products, I kept running into the same problem. Every project starts with inconsistent UI decisions. Different button styles, arbitrary spacing, no shared token system, and zero scalability.

Pansu UI is my answer to that. A complete, token-first design system that lets any team move from zero to a consistent, production-ready UI without starting from scratch every time.

Built to cover SaaS dashboards, admin panels, mobile apps, and marketing websites with a single, coherent visual language.

100+Planned ComponentsAcross 14 categories
2Theme ModesLight · Dark
1500+Design TokensPrimitive to component
∞ScalabilityToken-based architecture
A11yAccessible FirstWCAG 2.1 AA standard
DevHandoff ReadyVariables + annotations
Design System Foundations

Built on Tokens, Not Guesses

Every decision in Pansu UI is traceable back to a design token. No magic numbers. No hardcoded values.

Color Tokens

Semantic, alias, and primitive layers for consistent color usage across themes.

--color-primary

#E9F4FC

--color-surface

#080F18

--color-text

#FFFFFF

Typography Scale

Fluid type scale with consistent line heights, weights, and tracking.

Display56px / 900
H140px / 800
H232px / 700
H324px / 600
Body16px / 400
Small12px / 400

Spacing System

4px base unit spacing scale for consistent rhythm and density.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px

Radius System

Consistent border radius tokens for a unified, modern component feel.

radius-sm

8px

radius-md

12px

radius-lg

16px

radius-xl

24px

radius-2xl

32px

radius-full

999px

Shadow System

Layered shadows using brand color tints for depth and elevation hierarchy.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

Grid System

Responsive 12-column grid adapting to 8-col tablet and 4-col mobile.

Desktop · 12 cols

Tablet · 8 cols

Mobile · 4 cols

Semantic Tokens

Intent based tokens that map to primitives, fully decoupled from raw values.

--color-success

#22C55E

--color-warning

#F59E0B

--color-error

#EF4444

--color-info

#3B82F6

Button Tokens

Component-level tokens enabling variant, size, and state customisation.

btn-bg-primary

color-primary-600

btn-text-primary

color-white

btn-radius

radius-md

btn-padding-y

space-2.5

btn-padding-x

space-5

btn-font-weight

600

Component Ecosystem

100+ Components, One System

Every component is built with variants, states, responsive behaviour, and token bindings.

Buttons

12 variants

In Progress
Enter email…
Focused state

Inputs

8 variants

Planned

Cards

10 variants

In Progress
Name
Status
Date

Tables

6 variants

Planned
OK

Modals

5 variants

Planned
HomeAboutWork

Navigation

7 variants

Planned

Charts

8 variants

Planned
ActivePendingErrorInfoBeta

Badges

9 variants

In Progress

Tabs

5 variants

Planned
SP
AK
RD
MJ
+12

Avatars

6 variants

Planned
Edit item
Duplicate
Archive
Delete

Dropdowns

5 variants

Planned
Dashboard
Analytics
Settings
Team

Sidebar

4 variants

Planned

Revenue

$48K

Users

2.4K

Growth

+18%

Churn

2.1%

Dashboard Widgets

10 variants

Planned
60%

Data Viz

6 variants

Planned
Design Process

How I'm Building It

Research

Architecture

Token Planning

04

Component Structuring

05

Variant System

06

Responsive

07

Documentation

08

Dev Handoff

System Architecture

Token to Component Flow

A layered architecture ensures every visual decision is traceable, themeable, and scalable.

Layer 1

Primitive Tokens

#E9F4FC16px5008px

Raw values including colors, sizes and weights

Layer 2

Semantic Tokens

color-primarytext-bodyspace-mdradius-lg

Intent-based aliases of primitives

Layer 3

UI Tokens

btn-bginput-bordercard-shadownav-height

Component-specific token bindings

Layer 4

Components

ButtonInputCardModal

Built components using UI tokens

Layer 5

Templates

DashboardAuthLandingAdmin

Full-page layouts from components

Responsive System

Designed for Every Screen

Dashboard
Analytics
Users
Settings

$48K

Revenue

2.4K

Users

+18%

Growth

Desktop · 1440px · 12 cols

$48K

Revenue

2.4K

Users

Tablet · 768px · 8 cols

$48K

Total Revenue

2.4K

Active Users

+18%

Month Growth

Mobile · 375px · 4 cols
Light & Dark Mode

One System, Every Context

Dark Mode

Card Component

Dark surface variant

Done
Background#070D16
Border#E9F4FC/20
Search…
BG
Surface
Primary
Text
Light Mode

Card Component

Light surface variant

Done
Background#FFFFFF
Border#E5E7EB
Search…
BG
Surface
Primary
Text
Future Roadmap

What's Coming Next

Now

Core System

  • Color & Typography tokens
  • Spacing & Radius system
  • Button, Input, Card components
  • Badge, Avatar, Tab components
Currently Building
Q3 2025

Component Library

  • Modal, Drawer, Tooltip
  • Navigation, Sidebar
  • Tables & Data grids
  • Form system & Validation
Q4 2025

Data & Charts

  • Pansu Charts module
  • Dashboard widget library
  • Data visualization tokens
  • Responsive chart system
Q1 2026

Launch

  • Figma Community release
  • Documentation website
  • Code components (React)
  • Pansu Icons library
Get in Touch

Let's Connect

Have a project in mind or want to collaborate on Pansu UI? I'd love to hear from you.

Email

pansari00saurabh@gmail.com

WhatsApp

+91 8005901030

Location

Hyderabad, India

← Back to Portfolio

Pansu UI · By Saurabh Pansari · 2025