Design Language System

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Principles

Following principles will act as a foundation for the Design System & as a guidance light whenever you have multiple ideas and need a decision factor. All 6 principles are crafted from existing design considering various factors - making this practical, realistic & effective.

Style Guide

The Style Guide establishes the root for visual presentations and a design system connects components, patterns, and visuals together to become one single source of truth for products and brands.

Color Pallete

Shadows & Elevations

Typography

Methodology : Atomic

The Atomic Design methodology created by Brad Frost is a design methodology for crafting robust design systems with explicit order and hierarchy. As the name suggests, it’s derived from a basic chemistry concept: the composition of all matter. To understand atomic design better, we’ll need to brush up on some basic chemistry concepts quickly.

Atoms

If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

Molecule

molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

Compound

Compounds are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Layouts

Layouts are page-level objects that place components into a layout and articulate the design’s underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template.

Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.

Phase 3:
Design system implementation

To setup the behaviour of following a proper design system company-wide, we also took sessions with the Devs to learn figma

DS prioritisation in task list to ensure Design system implementation on production

In order to track and communicate the progress of the different steps, we created a spreadsheet that can be viewed and updated both by design and development. We create Debt list for all components that link out to all the relevant documentation and move them to corresponding status columns (In Design, Needs Feedback, In Development, etc.) throughout the process.

Component UAT

To ensure the quality of design on production