Design tokens, CSS primitives, an adherence lint, and the agent skill for uinaf surfaces.
Guide: design.uinaf.dev
Berkeley Mono is licensed; load it from cdn.uinaf.dev, not this package.
pnpm add @uinaf/design@import "@uinaf/design/css";Or link the stylesheet after the CDN font sheet:
<link rel="stylesheet" href="https://cdn.uinaf.dev/fonts/berkeley-mono/variable/font.css" />
<link rel="stylesheet" href="node_modules/@uinaf/design/dist/css/tokens.css" />Token values and the CDN URLs are importable too:
import { tokens } from "@uinaf/design";
import { CDN } from "@uinaf/design/cdn";The package ships a design-check binary. Add it as a script so it resolves
from node_modules/.bin:
{ "scripts": { "design:check": "design-check src" } }It fails on raw hex, off-scale type, radius over 6px, stacked nav rows, and the rest of the guardrails in the spec. Ratchet mode, for a repo with an existing backlog, is in Adopting in a product repo.
| Path | Purpose |
|---|---|
dist/css/tokens.css |
CSS custom properties + component primitives |
dist/tokens.js |
Flat token map |
dist/components.json |
The pattern contract: classes, use, rules, markup |
dist/lint/ |
The design-check binary and its rules |
assets/icons/ |
The closed icon set: eight 16-grid stroke svgs |
DESIGN.md |
Full design spec |
skills/uinaf-design/ |
Agent skill |
Whole example screens are not in the package; they are documents you read, not modules you import. Get them from the guide:
| Surface | Where |
|---|---|
| Pattern cards | design.uinaf.dev |
| Six reference screens | design.uinaf.dev/pages/<name>.md |
| uinaf.dev surfaces | design.uinaf.dev/templates/<name>.md |
MIT for the tokens and docs in this repository. Berkeley Mono remains proprietary; do not redistribute font binaries.