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

Layout

App shell

Full-bleed header and nav whose content aligns to the shared 1200px column.

.appbar · .appbar__inner · .appnav · .appnav__inner · .appmain · .appheader

Novus Technologies Novus Technologies console

Main content aligns to the same centered column as the bars above.

Header + nav + main (shared column)
<div style="border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden">
  <header class="appbar">
    <div class="appbar__inner">
      <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">console</span>
      </div>
      <button class="btn btn--ghost btn--sm">Sign out</button>
    </div>
  </header>
  <nav class="appnav">
    <div class="appnav__inner nav" style="border-bottom:0">
      <a href="#" aria-current="page">Dashboard</a>
      <a href="#">Reports</a>
      <a href="#">Settings</a>
    </div>
  </nav>
  <main class="appmain" style="padding-block:var(--space-4)">
    <p class="muted" style="margin:0">Main content aligns to the same centered column as the bars above.</p>
  </main>
</div>
novaplan
Live Novus Technologies Novus Technologies
Internal-tool header (two-mark rule)
<div class="appheader" style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)">
  <div class="appheader__left">
    <img src="../logos/lockups/novaplan.png" alt="novaplan" style="height:var(--space-6);width:auto">
  </div>
  <div class="appheader__right">
    <span class="badge badge--success"><span class="badge__dot"></span> Live</span>
    <span class="appheader__sep"></span>
    <span class="appheader__endorse">
      <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>
  </div>
</div>

Usage

  • The bars are full-bleed (background and hairline span the viewport) but their inner content aligns to the shared 1200px column, use the __inner wrappers.
  • External surfaces lead with the Novus master lockup on the left, prominent. Internal tools invert it: the app's own lockup leads far left, the Novus master lockup endorses far right, the two marks are never adjacent.
  • Below 520px the divider drops and the endorsement steps down to 20px, it never disappears.
  • Ship the persisted theme toggle in the header; apply it before paint (js/novus-theme.js).
‹ Surface & text utilities