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

Components

All 47 components the kit ships, by category. Each page carries live examples, a copyable snippet per example, and usage guidance.

Choose by function

Start from the job; each set links the components that do it.

Dashboards

KPI rows, signal cards, and dense tables over one accent.

StatsCardTableBadgeGrid & RowApp shell

Forms

Labelled fields with native pickers and one primary action.

Field & InputDropdownDate pickerButtonAlert

Data display

Tables, month views, and progressive disclosure for dense records.

TableCalendarStatsBulletsCollapse & Disclosure

Navigation

Shells, section menus, and staged flows.

NavStepperApp shellButton

Feedback and status

Judgement colors only where a judgement exists.

AlertModalBadge

Admin consoles

Sign-in, navigation, filters, and paged lists from the console reference.

Sign-in pageSide navigationPage headerFilter barPaginationUser menuSigned-out page

General

ButtonAction trigger in five variants and three sizes, with loading and disabled states.
BadgeStatus chip with semantic tints and an optional dot.
PillsActionable chips: labels with a remove button, filters toggled on aria-pressed, and counts inside.
AvatarRound headshot or monogram identity slot, small on cards and large in bio modals.
Brand lockupPlaced master logo with automatic dark-mode swap, and the two-tone product wordmark.

Layout

ContainerThe shared centered content column every app aligns to.
Grid & RowToken-gapped grid, and a wrapping flex line for button groups.
Surface & text utilitiesSurface ground and secondary-text helpers that stay correct in dark mode.
App shellFull-bleed header and nav whose content aligns to the shared 1200px column.
Page headerBreadcrumb, title, end-aligned actions, and one line of description at the top of every console screen; on a detail screen, Back in place of the breadcrumb.

Data Display

CardBordered surface; interactive cards lift on hover and take a stretched-link trigger.
TableData-dense table: single-line cells in a scroll container, right-aligned numerals, end-aligned actions.
ChartsToken-fed D3 charts: composition bars with a trajectory line, share donut, and the table that carries the same numbers.
CalendarMonth view composed from the table component; the highlighted day is the single accent.
StatsKPI cells that reflow instead of colliding, the canonical stat layout.
BulletsHanging-indent list, wrapped text aligns under the text, never the marker.
LeadersClickable people cards with round avatar, name, and role.
Logo wallClient and scheme proof walls, full-colour marks on white tiles, no hover.
Collapse & DisclosureProgressive disclosure behind a click toggle; native details works with JS off.
TimelineEvent feed on a border spine; dots take judgement colours only where a judgement exists.
Value chainLabelled steps joined by › arrows, informational, no hover.
DescriptionsKey-value record detail: muted terms, neutral values, judgements as chips.

Feedback

AlertInline banner in the four semantic tones; risk messages are always red.
ProgressToken-built progress bar: muted track, accent fill, judgement colour only when the bar judges.
ModalIn-page detail dialog, native dialog gives focus trap, Esc, and inert background.
Slide-overRight-edge panel for one record: native dialog gives focus trap and an inert page, the slide is a keyframe on open.
SkeletonCalm loading placeholder from neutral tokens: static blocks shaped like the content, no shimmer.
Empty stateThe default for any list, table, or search result with no rows: what is empty, when content appears, and the one action that fixes it.

Forms

Field & InputLabelled text input, select, and textarea with help and error states.
DropdownNative select with an inset chevron, and a details-based action menu that works with JavaScript off.
Lead form & CTA rowLead-capture form grid, and the one-row contact CTA.
Date pickerThe platform's own date control styled by the kit: calendar popup, locale, and mobile wheels for free.
Filter barSearch with a two-pane sub-filter sheet, removable active chips, and quick filter chips with live counts.
NavHorizontal link bar; the current page carries aria-current.
Side navigationTwo sidebars from one mechanism: grouped (NovaCard) with the appbar hamburger, flat (NovaPulse) with a chevron on its own edge. Both collapse to an icon rail on desktop and open as a drawer on phones, without JavaScript.
Top navigationThe second console shell: sections in a bar under the header, menus on click, native so it works without JavaScript, with the drawer taking over on phones.
App switcherThe Novus app switcher, first in every console header: search and a grid of the apps the viewer may open, read from the workspace launcher's catalog.
User menuHeader account menu on native details: identity, Profile, theme, and Sign out at its foot.
StepperNumbered progress steps from badge and row primitives, horizontal or vertical, with aria-current.
BreadcrumbLocation trail with a drawn slash separator; the current page is text, not a link.
PaginationList footer for data lists (range, previous and next, page label, rows per page), plus numbered pages for long documents.

Templates

Sign-in pageSplit sign-in with the ambient brand panel, the three-screen forgot-password flow, and both SSO shapes: optional under the divider, or the only way in.
Signed-out pageCentred signed-out card that confirms the session ended and offers to sign in again.

Theming

Browser tabWhat 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.
Product themesScope classes that re-skin the accent role to a product identity, one accent per view.