Design System

@nishkodotco/abhyas-design-system is everything the website looks like, in app.abhyas.design: React components built on GitHub's Primer, foundation tokens, the stylesheets and the checks. It depends on nothing in the website. The website installs it and follows its standards. Browse it in Storybook.

What's in it

Standards

1. Foundations come from tokens. Use tokens for spacing, sizing, type, borders, radii, shadows, motion, opacity and layers. Edit tokens/foundations.json and run npm run tokens:build. npm run tokens:check rejects raw foundation values and stale output.
2. Colours come from tokens. Define colors in the foundation registry; the generated styles/tokens.css is the only stylesheet with literal colors. Use var(--accent) and friends; add a token when a new colour is needed.
3. Styles live in the design system. The website has no stylesheets of its own; it imports @nishkodotco/abhyas-design-system/styles.css once.
4. Components are drawn from props. A design-system component never calls the database; the website loads data and passes it in, with callbacks for actions (onSignIn, onSignOut, onAdd).
5. Every component has a story, with invented data only: Storybook is public.
6. Primer first. Build on Primer React components and Primer's tokens before writing new UI.

abhyas-check enforces 1 and 2. app.abhyas.design runs npm run check; the website runs npm run check (abhyas-check --site .) before every release.

Foundation catalogue

Search every token, browse individual families, inspect responsive thresholds, or try the token playground. Existing color, spacing, font, drawer and tab variables remain supported as aliases. Exact existing values are retained; geometry, SVG coordinates and data-driven progress remain local.

CSS media thresholds are generated from named registry entries because native CSS variables cannot be used in media conditions. The same values are exported as JavaScript breakpoints and media; the drawer uses media.drawer. Consumers can import the registry through the package's /tokens.json export.

Using it in the website

// web/package.json
"@nishkodotco/abhyas-design-system": "^1.0.0"

// web/.npmrc
@nishkodotco:registry=https://npm.pkg.github.com

// web/app/layout.js
import "@nishkodotco/abhyas-design-system/styles.css";

// a component
import { Header, Drawer } from "@nishkodotco/abhyas-design-system";

The website installs a released version from GitHub Packages, and its lock file pins it. To move to a newer release, run npm update @nishkodotco/abhyas-design-system in web/ (or npm install @nishkodotco/abhyas-design-system@2 for a new major version) and open a pull request.

frontend.dev's CI reads the package with its own GITHUB_TOKEN, because the package grants frontend.dev read access (package settings → Manage Actions access). To install on your own computer, add a classic token with read:packages to ~/.npmrc:

//npm.pkg.github.com/:_authToken=<token>

Repository ownership and releases

All design source belongs exclusively to app.abhyas.design. Product documentation belongs to app.abhyas.context. The package keeps the name @nishkodotco/abhyas-design-system, so frontend imports do not change.

Design merges deploy Storybook and compiled documentation assets to design.abhyas.nishko.co. Package publication is owned by design's manual Release design package workflow. Before its first package release, the design repository needs write access in the existing package's Manage Actions access settings; frontend read access stays in place.

Changing it

1. Change components, styles, tokens or stories in app.abhyas.design.
2. Run npm test, npm run check and npm run build-site, then merge to deploy design.
3. In app.abhyas.context, run npm run design:update, review the design revision and checksum in design.lock.json, and commit it.
4. Context verifies and publishes the compiled design assets alongside documentation. Its /storybook/ route stays available without storing Storybook source.
5. Release a package from design when required; update the package in a frontend pull request.