asadesignsystem

For Asad's own projects and his internal dev web. Poppins, one royal blue accent, roomy pill controls, flat white cards on a light blue-grey ground, the BuildWithAngga look.

One source

Tokens

31 colours in light and dark, type, spacing, radius and shadow, read from tokens.json.

37 components

Components

33 with a CSS and a React version side by side, 4 React only. Every one has code to copy.

Ready pages

Blocks

A full dashboard (sidebar, KPIs, chart, data table) and the dev web status page.

Three ways to use it

Plain HTML, no build

variables.css + ads.css, then the ads- classes.

Tailwind v4 + React

tailwind-theme.css in globals.css, then npx shadcn add comes out on-brand.

JavaScript

tokens.js exports every value for light and dark, for charts and canvas.