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.

The goal is to build a 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.

Coming soon. Stay tuned.



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