Skip to quickstart

ASIG 0.7.0 · Open source · MIT

One design language.
Your framework.

Start with a working Orders screen. Keep your framework, own the behavior, and use shared tokens and CSS for a consistent interface.

Choose your starter Add to an existing app

See the starter in action

A 20-second silent demo: filter three sample orders down to two, switch to the dark theme and keep the selected filter. On-screen captions explain each step.

Download the demo (MP4)

A small example you can make your own

Each starter includes search, stage filtering, reset, an empty state and four themes. They use the same fictional Orders data and the published npm packages.

Props & callbacks

Next.js + React

App Router, global CSS and a controlled filter component. State stays in your application.

Run the Next.js starter →

Use Node.js 26. Clone the repository, choose a starter and run:

git clone https://github.com/prabhuvajjiram/agis.git
cd agis/starters/vanilla
npm ci
npm run dev

Replace vanilla with nextjs or angular. Open the local URL printed in your terminal. Every folder is self-contained with its own lockfile.

Already have an application?

Install both packages together and import their CSS once in your global stylesheet.

npm install @angelstones/design-tokens@0.7.0 @angelstones/ui-patterns@0.7.0
@import "@angelstones/design-tokens/tokens.css";
@import "@angelstones/ui-patterns/all.css";

Apply a theme to the page or a wrapper, then use opt-in classes:

<div data-as-theme="operations">
  <button class="as-button" type="button">Save draft</button>
</div>

ASIG provides design tokens, CSS patterns and implementation guidance. Your application implements the click handler, state and data access. These packages do not export React or Angular components.

Build one screen, then share what you learned

  1. Explore complete page examples for typography, spacing and responsive composition.
  2. Read the component contracts for inputs, events, state and accessibility responsibilities.
  3. Tell us where you got stuck, or contribute a small example with invented data.

The starters are learning examples. Add your own authentication, API, persistence and product-specific behavior before production use.