General

Brand lockup

Placed master logo with automatic dark-mode swap, and the two-tone product wordmark.

.brandlock · .brandlogo--light · .brandlogo--dark · .vlogo · .wm

app name

Master lockup with dark-mode swap

<div class="brandlock">
  <img class="brandlogo--light" src="../logos/Novus_Logo_Colour_transparent.png" alt="Novus Technologies">
  <img class="brandlogo--dark" src="../logos/Novus_Logo_White_transparent.png" alt="Novus Technologies">
  <span class="appname">app name</span>
</div>

Product lockup (placed asset)

<img src="../logos/lockups/novapay.png" alt="novapay" style="height:var(--space-6);width:auto">

<span class="theme-novabank wm"><span class="nm">nova</span><span class="sf">bank</span></span>

Usage

• The logo is a placed asset, never typed, never CSS-drawn. Colour lockup in light, white in dark, swapped by the .brandlogo--light/--dark pair. No inline display on the images.
• Header lockup height is --logo-height (26px), one step smaller than the app name, the app name is the primary identifier.
• Product names are lowercase and solid-set: novapay, never "nova pay" or "NovaPay". The two-tone split alone separates "nova" from the suffix.
• In dark mode every product lockup drops its identity colour and renders in the two light blues, the kit's CSS does this automatically.
• In your app, reference assets as novus-design-kit/logos/….