Paramanu Design System

What does Paramanu mean?

Paramanu (परमाणु) is a Sanskrit term meaning atom — the smallest, indivisible particle of matter. In the ancient Indian Vaisheshika school of philosophy, paramanu represented the fundamental building blocks from which all physical reality is composed.

This design system carries the same idea: the smallest, composable building blocks for crafting web interfaces. Each token, style, and component is a paramanu — minimal, purposeful, and designed to combine into something greater.

Why Paramanu?

CSS-First, Zero Runtime

Built entirely on CSS custom properties and @layer cascade ordering. No JavaScript is needed for styling — your buttons, inputs, and layouts work without a framework.

Three Consumption Modes

Drop in via CDN with human-readable classes, use as CSS Modules in bundled apps for scoped styles, or import React components with full type safety.

Accessible by Default

Every component ships WCAG 2.2 AA compliant. Focus-visible indicators, semantic HTML, aria attributes, and automated testing with axe-core — accessibility isn’t an afterthought.

Modern CSS

CSS nesting, light-dark() for automatic dark mode, @layer for predictable cascade, container queries, and @scope — built for how CSS works today.

Three Ways to Use

Choose the integration that fits your project:

CDN

Link the stylesheet and start using classes immediately. No build tools needed.

<link rel="stylesheet" href="https://unpkg.com/@paramanu/cdn/dist/paramanu.css">

<button class="pm-btn pm-btn--primary pm-btn--md">
  Get Started
</button>

CSS Modules

Import as CSS Modules for scoped class names in bundled applications.

import classes from "@paramanu/buttons-js/modules/button/map"

const btn = document.createElement("button")
btn.className = classes["pm-btn"] + " " + classes["pm-btn--primary"]
btn.textContent = "Get Started"

React

Import typed React components with full prop autocompletion.

import { Btn } from "@paramanu/buttons-react"

export default function App() {
  return <Btn variant="primary" size="md">Get Started</Btn>
}

Design Principles

Minimal by Design

Every component does one thing well. No bloated bundles, no hidden dependencies, no surprise side effects. Ship only what you use.

Composable

Tokens feed into components, components combine into patterns. Override any layer without fighting specificity wars.

Progressive Enhancement

Starts with semantic HTML and CSS. Layer on JavaScript interactivity only when needed. Works without JS, shines with it.

Themeable

Swap design tokens at the root level to re-skin everything. Built-in light-dark() support means dark mode with one CSS property.

Start Building

Installation Set up Paramanu in your project in under a minute.

Btn Component Explore the Btn — variants, sizes, accessibility, and live editor.

Design Tokens Colors, spacing, and typography tokens that power every component.

React Storybook Interactive component playground with all variants and states.