NAMCHE UI

NAMCHE UI

The functional component layer for NAMCHE products and tools.

NAMCHE UI is the component layer for interfaces where usability comes first — SaaS products, dashboards, internal tools. It is recognisably NAMCHE without the weight of the brand layer: identity comes from the design system's own decisions, not from decoration.

The stack

  • shadcn/ui conventions — components live in your repo, installed from the @namche registry. Base UI became shadcn's default primitive library in July 2026; this library follows it.
  • Base UI primitives — accessible behaviour from the people who built Radix, Material UI and Floating UI. Composition uses the render prop, not asChild.
  • Tailwind CSS v4 — styling through the semantic variables every shadcn component already reads.
  • @namche/design-tokens — colour, type, spacing, radius and motion, plus the light and dark themes.

What makes it NAMCHE

Read off the design system rather than invented:

  1. Ink on paper. The page is Selene (#f1efe8), a warm off-white; text and primary actions are Erebos (#262626). The brand's own Button paints a solid Erebos pill with Selene text — so the default action is ink, not Rhododendron. The role colours stay available for accents and charts.
  2. Two faces, one rule. Namche Shadow Sans sets headlines only, at Medium 500 or Bold 700 — never Regular. Every piece of running text is Geist Sans at 400. The two are metrics-identical, so the split is layout-safe.
  3. Mono labels. Buttons, eyebrows and meta text are Namche Shadow Mono, uppercase — the brand's own button treatment.
  4. One stroke, few shapes. A 0.5px hairline is the only rule weight. Controls sit at radius 10, cards at 12, buttons are pills.
  5. No elevation. The system defines no shadow. In dark mode surfaces lift by getting lighter, never by casting a shadow.

Day and night

Both themes are the design system's own. Night is canonical since @namche/[email protected]: Erebos ground, Selene ink (13.15:1), surfaces lifted toward Selene in five named steps (--night-*), the feedback set re-lifted for the dark ground with documented AA ratios. Tones are paint, not roles — GAIA, OKEANOS, HELIOS and the colour fields are identical day and night. Opt-in via .dark on the root; every component follows automatically.

Start with Installation.

On this page