Product Layer

Product-Specific — Brand & Domain Tokens

Each product layers its own tokens on top of the foundation. --product-accent gives the product visual identity; domain palettes (mining materials, grade gradient, runtime statuses) and a categorical chart palette cover what the foundation can't predict.

Product accent

Mining materials

Grade gradient (low → high)

Runtime statuses

Chart palette

Icons

The foundation references <i class="home-alt">-style markup but ships no icon styles. The product layer provides a glyph fallback that products can swap for an SVG sprite or icon font without changing any markup.

Breadcrumbs (using product icons)

Display Chrome — Badges, Chips, Avatars, Kbd

Badges

Chips

Avatars

Avatar group

Keyboard shortcuts

Save with Ctrl + S. Open command palette with Ctrl + K.

Transient Feedback

Toasts

Spinners

Skeleton loaders

Progress bars

Empty state

Interactive Structure

Search input

Pagination

Accordion

Modal (inline preview)

In-Flight Field Validation

Extends NOVA's validation framework: Incomplete / Info / Warning / Error / OK. The foundation ships the colour tokens; the product layer wires them into field state classes.

Domain Components

Toolbar

A floating panel of transparent buttons that hovers over the viewport, centred at the bottom with a --size-7 gap from the edge. Groups tools by function — selection/navigation, object operations, history — with .divider elements separating each group. Add .floating to .toolbar to position it inside the viewport.

Properties panel

A contextual side panel that surfaces the attributes of whatever is selected in the layer tree or viewport. Minimum width 280 px, user-resizable. Content is driven by the selection — empty state when nothing is selected, field-by-field when one object is selected, aggregated summary when multiple are selected.

Ribbon

A tabbed command bar that organises the full tool set into named groups. Tabs live in a muted strip above the content; the active tab visually connects to the content strip below. Groups are separated by .ribbon-separator dividers, and each group has a centred label beneath its buttons.

Combined

How all domain components sit together in a typical model-space page. The ribbon spans the full width at the top; the layer tree, viewport (with floating toolbar), and properties panel fill the body below.

Tablet

Users inside a site will typically be equipped with PPE, which includes gloves. As such, when using a tablet device within a mine pit or when in underground tunnels; buttons, fonts and interactive components will need to be at least 40% larger to accomodate for the reduced dexterity and potential for glove use.

File & Activity UI

File list

• Pit West — Schedule v3.dws

  Edited 12 min ago by Jane Smith
  Syncing
• Block model — Q2 2026.bm

  Edited yesterday by Marcus Khan
  Shared
• Reconciliation report.xlsx

  Created last week
  Unsaved

Activity feed

• JS
  Jane Smith published Schedule v3.
  12 min ago
• MK
  Marcus Khan updated the block model for Q2.
  3 h ago
• PD
  Priya Desai commented on BX-021.
  Yesterday

Density & Utilities

Density variants

Tabular numbers

Truncation

Charts and Graphs

Charts use the categorical --chart-1 … --chart-8 palette defined in the brand tokens. Assign series in index order so the same series always maps to the same colour across the product. SVG charts reference these tokens via stroke / fill; CSS charts use them as background.

Column chart — multi-series