Bajaj Markets Figma Make Design System

A lightweight design system package that provides reusable CSS tokens and base styling for building consistent user interfaces.

INSTALLATION

npm install bajajmarkets-figma-make-design-system

USAGE

Import the stylesheet in your project:

import "bajajmarkets-figma-make-design-system/style.css";

DESIGN TOKENS

All tokens are available via CSS variables (:root)

COLORS --color-primary --color-primary-hover --color-secondary --color-text-primary --color-text-secondary --color-text-muted --color-background

SPACING --spacing-xs --spacing-sm --spacing-md --spacing-lg --spacing-xl

TYPOGRAPHY --font-size-xs --font-size-sm --font-size-md --font-size-lg --font-size-xl

EXAMPLE

HTML: Click Me

CSS: .primary-btn { background: var(--color-primary); color: #ffffff; padding: var(--spacing-md); font-size: var(--font-size-md); border-radius: 6px; }

PACKAGE CONTENTS

dist/ index.css index.js index.umd.cjs *.d.ts

USE CASES

• Shared design tokens across applications
• Figma Make integrations
• Rapid UI prototyping
• Consistent branding

SCRIPTS

npm run dev npm run build

NOTES

• Import CSS before using tokens
• Framework agnostic (React, HTML, etc.)

MAINTAINER

Bajaj Finserv Markets

LICENSE

MIT