Novus Technologies Novus Technologies design kit v0.9.0
Menu
Overview

General

ButtonBadgePillsAvatarBrand lockup

Layout

ContainerGrid & RowSurface & text utilitiesApp shellPage header

Data Display

CardTableChartsCalendarStatsBulletsLeadersLogo wallCollapse & DisclosureTimelineValue chainDescriptions

Feedback

AlertProgressModalSlide-overSkeletonEmpty state

Forms

Field & InputDropdownLead form & CTA rowDate pickerFilter bar

Navigation

NavSide navigationTop navigationApp switcherUser menuStepperTabsBreadcrumbPagination

Templates

Sign-in pageSigned-out pageSettings layout

Theming

Browser tabProduct themes

Theming

Browser tab

What the tab strip shows: the product name pinned as the title, and a favicon cut per slot size so a 16px tab never downloads a 3 kB master.

one icon file per slot · pinned <title>

Novus Design Kit
Novus Design Kit
The tab strip: title pinned, icons at the size they are used
<div style="display:flex;gap:.25rem;align-items:flex-end;padding:var(--space-3) var(--space-3) 0;background:var(--bg-subtle);border-radius:var(--radius-md) var(--radius-md) 0 0;">
  <div style="display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;min-width:13rem;max-width:15rem;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;font-size:var(--text-sm);color:var(--text);">
    <img src="../assets/favicon-16.png" alt="" width="16" height="16">
    <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Novus Design Kit</span>
    <span aria-hidden="true" style="margin-left:auto;color:var(--text-muted);">&times;</span>
  </div>
  <div style="display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;min-width:13rem;max-width:15rem;color:var(--text-secondary);font-size:var(--text-sm);">
    <img src="../assets/favicon-16.png" alt="" width="16" height="16">
    <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Novus Design Kit</span>
    <span aria-hidden="true" style="margin-left:auto;color:var(--text-muted);">&times;</span>
  </div>
</div>

16px
358 B

32px
506 B

180px
1.5 kB

512px
2.9 kB

The icon ladder: one file per slot, drawn at its slot size
<div class="row" style="align-items:flex-end;">
  <div style="text-align:center;"><img src="../assets/favicon-16.png" alt="" width="16" height="16"><p class="muted" style="margin:.5rem 0 0;font-size:var(--text-xs);">16px<br>358 B</p></div>
  <div style="text-align:center;"><img src="../assets/favicon-32.png" alt="" width="32" height="32"><p class="muted" style="margin:.5rem 0 0;font-size:var(--text-xs);">32px<br>506 B</p></div>
  <div style="text-align:center;"><img src="../assets/favicon-180.png" alt="" width="64" height="64"><p class="muted" style="margin:.5rem 0 0;font-size:var(--text-xs);">180px<br>1.5 kB</p></div>
  <div style="text-align:center;"><img src="../assets/novus-favicon.png" alt="" width="64" height="64"><p class="muted" style="margin:.5rem 0 0;font-size:var(--text-xs);">512px<br>2.9 kB</p></div>
</div>

Usage

  • Every icon slot gets its own file, cut from the 512 master at the size the slot draws: 16 and 32 for browser tabs, 180 for the apple-touch-icon, 512 for the manifest. A tab slot is 16px; handing it a 3 kB master makes the browser scale it and still look soft.
  • The tab title is the product name, Novus Design Kit, and nothing else. It does not follow the menu or the page, so a row of open pages stays one recognizable name.
  • The 512 master serves the manifest only — installed-app launchers are the one place a large icon is wanted. Head, verbatim:
<title>Novus Design Kit</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon-180.png">
Product themes ›