Novus Technologies Novus Technologies design kit v0.9.0

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.

Building a portal? Add the console layer

The kit ships the console patterns as a second stylesheet. Import it after the tokens and you inherit the sign-in page, the console shell, side navigation, page header, filter bar, list footer, settings layout, chart styling and the content-fit rules, with no files copied out of the repository.

import "novus-design-kit/js/novus-theme.js";   // pre-paint theme, light by default
import "novus-design-kit/tokens.css";          // tokens and components
import "novus-design-kit/console.css";         // console patterns
import "novus-design-kit/js/novus-console.js"; // menus, drawer, password toggle

Plain HTML, served over http(s):

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