@namche/design-tokens

NAMCHE design tokens and the framework bridges built from them. CSS only — no brand components, assets, generators or design working files.

Generated from NamcheAI/design by NamcheAI/design-kit.

Install

npm install @namche/design-tokens

Plain CSS and Astro

@import "@namche/design-tokens/styles.css";

Tailwind CSS 4

Keep this order. The bridge adds NAMCHE colours, type, spacing, radii, weights and motion to Tailwind's utility API while retaining Tailwind's default product-UI text scale:

@import "tailwindcss";
@import "@namche/design-tokens/styles.css";
@import "@namche/design-tokens/tailwind";

shadcn/ui

Add the semantic bridge last. It supplies the variables behind bg-background, text-foreground, ring-ring and the rest, in both light and dark:

@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@import "@namche/design-tokens/styles.css";
@import "@namche/design-tokens/tailwind";
@import "@namche/design-tokens/shadcn";

Remove the :root and .dark colour blocks that shadcn init generates — this bridge defines them. Night is canonical since 1.1.0: the tokens ship the dark theme (Erebos ground, Selene ink, the --night-* surface steps), opt-in via .dark on the root.

Fonts

The package contains no font binaries — every face loads from cdn.namche.ai automatically, nothing to install:

• Namche Shadow (--font-display, --font-mono, --font-pixel) — the brand suite's Latin subsets.
• Geist (--font-sans, all running text) — bundled on the CDN since the font suite's v0.4.0, byte-faithful to Vercel's geist npm package.

A Next.js app that prefers next/font self-hosting can still npm install geist and load GeistSans itself; the token stack names the family either way.

The type rule: Namche Shadow Sans is headlines only (--font-display, at weight 500 or 700); every piece of running text is Geist Sans (--font-sans / --font-ui) at weight 400.

License

UNLICENSED. See LICENSE.