ANIRUDDHA

ANI- Design System

Inclusion Design

A modern, efficient and user-centric scalable Figma Design System

May 2024

Learn more

MAY 2024

What's ANI- Design System?

The ANI Design System is a comprehensive and flexible design framework created to streamline the design and development process for digital products. This system incorporates a wide range of design elements and principles to ensure consistency, efficiency, and responsiveness across various platforms and devices.

The ANI Design System is a comprehensive and flexible design framework created to streamline the design and development process for digital products.

This system incorporates a wide range of design elements and principles to ensure consistency, efficiency, and responsiveness across various platforms and devices.

TECH STACK

Why ANI Design System

To Address Design Challenges Through Innovative Solutions

The ANI Design System empowers teams to create beautiful, consistent, and user-friendly digital products more efficiently than ever before.

3

4

5

6

7

8

2

3

4

5

6

7 %

Efficient...

Boost Design Speed

3

4

5

6

7

8

2

3

4

5

6

7 %

Efficient...

Boost Design Speed

3

4

5

6

7

8

2

3

4

5

6

7 %

Efficient...

Boost Design Speed

Increased Design Speed

The ANI Design System accelerates the design process by up to 70%.

Moden CTA

CTA01

Home

CTA02

Error

Profile

Works

Moden CTA

CTA01

Home

CTA02

Error

Profile

Works

Moden CTA

CTA01

Home

CTA02

Error

Profile

Works

Modernized Call to Action

Allows you to customize your experience to greater heights with Moden CTA's.

Components

Organisms

Molecules

Atoms

Components

Organisms

Molecules

Atoms

Components

Organisms

Molecules

Atoms

Consistency Management

Ensures a cohesive look and feel across all products and platforms.

Color System

The ANI Design System features an extensive color palette with shades and tints ranging from 50 to 900.

Scale & Grid

Typography

Responsive Type-scale

This responsive typography system was developed using the Type-Scale tool, ensuring optimal readability and visual hierarchy across all screen sizes.

Effective Scaling

The typography scales fluidly between 16px (mobile) and 20px (desktop) base sizes using CSS clamp() for a truly responsive experience.

Reduced Dev Time

This pre-built type scale components and styles can be quickly implemented, cutting down on development time by up to 10%.

Grid System

Responsive Grid

The system utilizes a flexible 12-column grid with responsive breakpoints:

Mobile: 4 columns
Tablet: 8 columns
Desktop: 12 columns

Layout Type

Stretch (fluid), Center, or Left (fixed)

Grid Elements

Margins and gutters adjust automatically based on screen size to maintain visual balance

Icons & Shadows

Iconography

Custom Icon Components

ANI Design System includes a custom icon set designed for clarity and consistency.
Icons are available in multiple sizes and styles (outlined, filled) to suit various design needs.

Dark Mode Icons

Icons for both light and dark modes are added as components and variant with multiple size options for consistency.

Increased Speed

This pre-built icon component and style can be quickly implemented, cutting down on development time by up to 10%.

Shadow

Drop Shadow Effect

A set of predefined drop shadows creates depth and hierarchy for any component.

Illusion Effect

This drop shadow in Figma can be applied to any object or frame to   create the illusion of depth.

This drop shadow in Figma can be applied to any object or frame to create the illusion of depth.

Different Offsets

Various sizes are provided for different use cases, so your CTA's are highlighted appropriately.

Design System Testing

The ANI Design System has undergone extensive usability and validation testing, receiving approval from various design leaders and researchers.

Here’s a glimpse from one of the final testing meetings, featuring UX Design Leader Mr. Vishal Chawla from MIT Lincoln Labs, alongside several esteemed design professionals.

The ANI Design System has undergone extensive usability and validation testing, receiving approval from various design leaders and researchers.

Here’s a glimpse from one of the final testing meetings, featuring UX Design Leader
Mr. Vishal Chawla from MIT Lincoln Labs, alongside several esteemed design professionals.