Novus Technologies Novus Technologies design kit v0.2.0
Menu
Overview

General

ButtonBadgeAvatarBrand lockup

Layout

ContainerGrid & RowSurface & text utilitiesApp shell

Data Display

CardTableStatsBulletsLeadersLogo wallCollapse & DisclosureValue chain

Feedback

AlertModal

Forms

Field & InputLead form & CTA row

Navigation

Nav

Theming

Product themes

Theming

Product themes

Scope classes that re-skin the accent role to a product identity, one accent per view.

.theme-novus · .theme-novapay · .theme-novabank · .theme-novastore · .theme-novatrust · .theme-novaboost · .theme-novaai

novapay
novabank
novastore
novatrust
novaboost
novaai
Default
One scope class re-skins the accent role
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)">
  <div class="theme-novapay card"><span class="wm"><span class="nm">nova</span><span class="sf">pay</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novabank card"><span class="wm"><span class="nm">nova</span><span class="sf">bank</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novastore card"><span class="wm"><span class="nm">nova</span><span class="sf">store</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novatrust card"><span class="wm"><span class="nm">nova</span><span class="sf">trust</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novaboost card"><span class="wm"><span class="nm">nova</span><span class="sf">boost</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novaai card"><span class="wm"><span class="nm">nova</span><span class="sf">ai</span></span><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
  <div class="theme-novus card"><b>Default</b><div class="row" style="margin-top:var(--space-3)"><button class="btn btn--primary btn--sm">Action</button></div></div>
</div>

Usage

  • Apply the theme class to any scope, it re-skins only the accent role; everything else stays the shared Novus core.
  • One accent per view: a novabank screen is green-accented throughout, never mixed.
  • In dark mode every lockup drops its identity colour and renders in the two light blues, automatic, don't fight it.
  • Green remains success/status only outside the novabank theme; never a page or panel ground.