uinaf/design

Design tokens, CSS primitives, and an adherence lint for uinaf surfaces.

Guide: design.uinaf.dev. Agents start from https://design.uinaf.dev/llms.txt.

Install

pnpm add @uinaf/design

@import "@uinaf/design/css";

Without a bundler, link the files directly; a browser cannot resolve a bare specifier:

<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" />

Berkeley Mono is licensed and loads only from cdn.uinaf.dev; the stylesheet imports it.

import { tokens } from "@uinaf/design";
import { CDN } from "@uinaf/design/cdn";

Package exports: package.json. Reference screens and uinaf.dev surfaces are not in the package; read them at design.uinaf.dev/pages/<name>.md and design.uinaf.dev/templates/<name>.md.

Adherence lint

Add the binary as a script, so it resolves from node_modules/.bin, and run it in CI:

{ "scripts": { "design:check": "design-check src" } }

Pass every UI path (design-check src app). It exits 1 on raw hex, off-scale type, radius over 6px, stacked nav rows, and the other guardrails. design-check --help lists the flags.

Existing violations

Record a baseline on a clean tree, before any change; a later baseline hides your own new violations:

npm run design:check -- --update-ratchet
git add .design-ratchet.json

Then gate on the ratchet, plus a clean check of the files the branch touched:

{
  "scripts": {
    "design:check": "design-check src --ratchet",
    "design:check:changed": "design-check --changed"
  }
}

• --ratchet fails only when a rule's count rises, warnings included. A swap of one violation for another passes; --changed catches it.
• A new release can add a rule, which reads as a rise from zero. Read the rule, then re-record on a clean tree.
• When a count falls, re-record to lock it in.

To prove the wiring, add <div style="border-radius: 20px"> to a page: the check names the file, line, and fix.

Docs

• Design spec
• Contributing
• Security

License

MIT for the tokens and docs in this repository. Berkeley Mono remains proprietary; do not redistribute font binaries.