Sargam Design Methodology

Sargam is a free-form design improvisation framework that drives to scale and gives flexibility and creative freedom for working with the unknown of the future. Helps you materialize higher-level concepts, such as design principles and brand values, into concrete interfaces without losing core design ethos.

From the design principles, brand & product philosophy, tonality, foundations, to libraries, conceptual models, patterns, and final deliverables. Sargam brings all of these together in a way that allows teams to think deeply, envision the future and produce at an elite level in terms of both quality and speed.

Sargam focuses on the unseen design system problems:

  1. Consistency taking over craftsmanship.
  2. Inauthentic, strategic constraints.
  3. Dying simplicity and clarity.
  4. Busy, monotonous, gatekeeping work.

Three distinct levels of Sargam design

  1. Principles
  2. Compositions
  3. Inventory

Level 1: Principles

At level one, the design guiding principles at the foundational level will be defined. Below are some of the key areas Sargam covers in Level 1, based on Indian Classical Music (ICM) aesthetics:

  1. Colour spectrum (Swaras in ICM)
  2. Sequential schemes (Shruti)
  3. Typography (Alankaar)
  4. Spacings & paddings (Taal)
  5. Layouts (Dhrupad)

Level 2: Compositions

Compositions demonstrates how the above principles have been applied in components, screens or patterns, and document extended or derived patterns for specific use cases. Sargam recommends to keep the compositions elastic, valuing craftsmanship over consistency. Compositions are further categorized into 3 subcategories:

  1. Components (Raga in ICM)
  2. Features/User stories/JTBD (Ghazals)
  3. Apps (Gharana)

Level 3: Inventory

Inventory aims to record foundations like design tokens, token translation workflow, insight framework, how we work, how we name files, how we organize them, design tools, developers hand-off guides etc.

A collection of standardized formats to keep all stakeholders aligned and accelerate design workflows across teams. Templates to empower the team to work in parallel and ship high-quality work with speed. Below are some of the key areas Sargam UI inventory provides:

  1. Design tokens & translation workflow
  2. Kick-off templates: Insight framework, How we work, Get started building, Personas, UAT checklist
  3. Developers Hand-Off Guide

Sargam UI

Sargam UI allows you to craft and ship your products with confidence. It’s a free-form design system improvisation framework, made for creators who want to craft and deliver high-quality products with speed and scale.

UI v0.4 is now available on the Figma community. The goal is to build a design system that fosters and honours Sargam design methodology and principles, in a way that works for the majority.

Sargam guiding principles:

Authentic — Nothing like Sargam.
Clarity — Eliminate ambiguity.
Crafted — Thoughtful, elegant, no-compromise craftsmanship.
Simple — Keep it super simple.
Universal — Welcoming & accessible visual language.
Warmth — Built for warmth and a caring vibe.

Download the Sargam UI

Share your experiences and thoughts in the comments section. And if you liked the Sargam approach, then please share it on your social accounts.

A terribly slow writer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SCOTTeVEST Revolution Plus Winter Coat REVIEW The perfect cold weather companion

Why modern design should borrow from fine art

#NEPALVSCOVID19 — A Virtual Design Thinking Challenge

Cultural Probes/Probe Kits used for Research

Blender 3D Overview — Basic and Advance Control

The right visualisation at the right time

UI/UX Case Study — Designing a Learning Management System Mobile App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


A terribly slow writer.

More from Medium

What are deceptive patterns in design?

Running A Remote Design Sprint

Agile in the real world

Final onboarding screen of the new metacloud

How PayPal’s Team Revolutionized Their Design Process with UXPin Merge

PayPal scaled their teams with Merge graphic