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 — heading only

Toasts — heading and text

Toasts — with action

Spinners

Skeleton loaders

Progress bars

Empty state

Interactive Structure

Search input

Pagination

Accordion

Modal (inline preview)

Modal Stepper

Splits a long setup task across multiple pages inside one modal. Use when creating or editing a Data Source or a Scheduled Event (e.g. an Automated Workflow Schedule) — group related fields per step, validate as the user advances, surface progress in the header. The stepper bar sits between .modal-header and .modal-body; states are .done, .current, and unmodified (upcoming).

The final step must always be a Review / Summary step. Before the user can commit, they should see a read-only summary of every selection they made across all previous steps. This gives them one last chance to spot a mistake without having to cancel and start over. The primary button on the summary step should reflect completion — Create schedule, Add data source — not a generic Save.

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.

Dashboard

Landing pages, BI views, and crew shift summaries compose the design system's existing components — KPI tiles, charts, tables, chips, activity feeds — into a single read-only surface. Dashboards prioritise scanning over editing: the user is checking state, then drilling into the relevant page once something needs action.

Timeline view

A horizontal timeline answers "who is doing what, when?" at a glance. Resources run as rows, time runs as columns, and each booked block of activity renders as a coloured bar on its own lane. Drilling, blasting, loading, hauling and maintenance each carry their own colour from the chart palette so a foreman can scan the page and see whether a crew or piece of equipment has gaps, overlaps, or scheduled downtime.

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