nass means Not A Style System.
It is a small CSS package for foundation styles, semantic tokens, theme definitions, and a handful of reusable primitives extracted from JustBookmarks.
It is not a component library, not a full design system, and not a place for product-specific layout or feature styling.
The repo also ships a plain ESM runtime at ./naf.js with colocated TypeScript declarations in ./naf.d.ts so it can be consumed directly from a git submodule without a build step.
Install or vendor the repo, then import the entrypoints you need:
<html lang="en" data-theme="dark">
<head>
<link rel="stylesheet" href="./node_modules/nass/src/entries/index.css" />
<link rel="stylesheet" href="./app.css" />
</head>
</html>If your app uses the optional icon mask variables, also load:
<link rel="stylesheet" href="./node_modules/nass/src/entries/icons.css" />- foundation reset
- semantic tokens
- light and dark themes via
data-theme - base document styles
- reusable primitives such as buttons, cards, panels, forms, alerts, menus, modals, badges, eyebrows, spinners, and the generic icon-mask helper
- fonts and brand typography decisions
- app-shell layout
- component styles
- feature styles
- page styles
- product-specific iconography unless you intentionally opt into the optional icon set
src/entries/foundation.css: layers, reset, tokens, themes, and basesrc/entries/primitives.css: reusable primitive classes onlysrc/entries/index.css: foundation plus primitivessrc/entries/icons.css: optional icon mask variablesnaf.js: plain JS runtime helpersnaf.d.ts: TypeScript declarations fornaf.js
Package subpath import:
import { signal, template, mount } from "nass/naf";Direct git submodule import:
import { signal, template, mount } from "../vendor/nass/naf.js";TypeScript will pick up the colocated naf.d.ts file for the direct file import as long as your resolver supports standard ESM module declarations.
Themes are driven by data-theme on any ancestor, usually html:
<html data-theme="light"><html data-theme="dark">Import NASS first, then app-local CSS after it:
@import url("nass/src/entries/index.css");
@import url("./app.css");Add new product styles in your app. Add new reusable tokens, themes, or primitives in NASS only when they are generic enough to carry across projects.
Run:
npm run demoThen open http://127.0.0.1:4174.