Install

The package installs from public npm with no registry setup and no token. Third-party marks (client and card-scheme logos) are not in the npm artifact; they live in the repository for approved proof-wall use. The bundled Novus logos and photography remain proprietary: don't republish them.

1. Install

npm install novus-design-kit
# or
yarn add novus-design-kit

2. Wire it in

Plain HTML, served over http(s):

<link rel="stylesheet" href="/node_modules/novus-design-kit/tokens.css">
<script src="/node_modules/novus-design-kit/js/novus-theme.js"></script>

Bundler (Vite / webpack / Next.js), once at the app root:

import "novus-design-kit/tokens.css";
import "novus-design-kit/js/novus-theme.js";

Carlito is self-hosted by the stylesheet via relative URLs, no font setup. Keep the theme script in <head> so a persisted dark-mode choice applies before first paint.

3. Build with tokens and components

First component

<button class="btn btn--primary">Talk to us</button>

Never hardcode a value the tokens define, if you're about to type a hex colour or a pixel size, there's a var(--…) for it. Start with the principles and the component catalog.

Overriding tokens

Layer your app's overrides after the import, never edit kit files. Anything you don't override keeps tracking the kit across upgrades:

/* after tokens.css */
:root { --container: 1400px; }

Upgrading

Releases are semantically versioned with a maintained changelog; breaking changes (removed class, custom property, import path, or asset file) ship only in a MAJOR with a migration note.