← IndustryOS Design Pack

Website CSS

The public-web stylesheet: industryos-web.css, imported after design-tokens.css. Everything below is rendered from those rules — marketing pages are built by composing these classes, not by writing new CSS.

Open industryos-web.css design-tokens.css

2.1

Page composition

Rendered specimen · homepage

Platform Products Safety Company Request a demo

Trusted partner in industrial technology

Site conditions, reported plainly.

Mine planning and wireless shotcrete monitoring in one platform. Sensor data in, signed-off decisions out — with a status language your whole crew reads the same way.

Request a demo See the platform

product shot · dashboard on site laptop
16:9 or 4:3 · replace with real photography

142 sites monitored live

1.24M readings ingested daily

240ms median alert latency

98.6% fleet uptime this quarter

The suite

Three modules, one status language

Each module owns its domain and its colour. The platform holds them together, so a supervisor moving between planning and cure monitoring never relearns the interface.

Minefox

Mine planning, scheduling, and operational KPIs — the whole site's plan against actual, in one place.

Explore Minefox →

Safewall

Wireless monitoring of paste barricades: cure confirmed and hydrostatic pressure risk managed, so pours run to schedule.

Explore Safewall →

Safecrete

Wireless sensors track sprayed shotcrete curing in real time, for safe early re-entry into tunnels and headings.

Explore Safecrete →

Status language

Four states. Icon and label, always.

The same four states appear on a dashboard, a printed report, and a toolbox-talk slide. Nobody has to remember what a colour means, and colour-blind operators read them correctly.

✕ Danger ! Warning ▲ Caution ✓ Healthy

Newsletter · operations brief

Work email

Quarterly. Technical notes and release detail only.

Suite 1401, Level 14
203 Robina Town Centre Drive
Robina QLD 4226, Australia

Products MinefoxSafewallSafecrete

Platform OverviewIntegrationsSecurity

Company AboutCareersindustryos.com.au

2.2

Domains and product-branded pages

Most customers know a product, not the platform. Each product owns a domain that redirects to its page on the platform site, and that page is branded as the product — the IndustryOS name appears once, in the footer.

DomainResolves toAudience and branding

industryos.com.au / Investors, and customers buying the data platform or the whole suite. Navy + cyan throughout.

minefox.com.au 301 → /minefox Mine planners and operations managers. Minefox branded, red accent, platform named in the footer only.

safewall.com.au 301 → /safewall Underground paste fill and barricade crews. Safewall branded, orange accent.

safecrete.com.au 301 → /safecrete Tunnelling and underground development. Safecrete branded, yellow accent.

Never cross-sell across products A Minefox visitor is not a Safecrete prospect. A product page links to the platform and to its own content — never to a sibling product's page or logo.

Scoping Set data-brand="safecrete" on <body>. That re-points --brand-accent for the header underline, rules, and hero; nothing else changes.

Canonical and SEO 301 the product domain at the apex; canonical URL is always the industryos.com.au/<product> path, so ranking accrues to one host. Page title leads with the product name, not the platform.

Rule The product colour is never a full-bleed field. At hero scale the reds, oranges and yellows overwhelm the page and fight the photography, so heroes sit on navy or paper and the product colour appears as a rule, an eyebrow, a badge, or a card edge. Buttons, links, and focus rings stay cyan: the product colour marks the brand, it never signals interaction.

2.3

Product page specimen

safecrete.com.au → /safecrete · navy ground, yellow accent

Overview How it works Specifications Book a trial

Shotcrete cure monitoring

Re-enter early, on evidence — not on a clock.

Wireless sensors in the sprayed shotcrete report cure in real time, so tunnel linings and mine headings are cleared for re-entry as soon as the lining can take it.

Book a trial Download the brochure

product shot · sensor in a fresh pour
4:3 · replace with real photography

Built for tunnel linings and mine headings

Real-time cure

Sensors in the sprayed lining report maturity against the mix design, live, from the moment it goes on.

How it works →

Early re-entry

Clear a heading or lining section as soon as the shotcrete can take it, instead of holding to a fixed wait.

See the data model →

Sign-off underground

The engineer clears re-entry from the handheld. Four states, each with an icon and a written label.

Read the field guide →

Robina QLD 4226, Australia
safecrete.com.au

Safecrete OverviewHow it worksSpecifications

Support DocumentationField guidesContact

Safecrete is a module of IndustryOS

· Safecrete Technology (Operations) Pty Limited · ABN 32 683 968 014

The platform reference appears exactly once, in the footer, as a lockup plus the legal entity — enough for a procurement check, quiet enough that the page reads as a Safecrete page.

2.4

Class reference

Layout .wrap · .wrap--narrow
.section · .section--tight
.section--navy · .section--paper
.stack · .stack--sm · .stack--lg
.grid--2 · .grid--3 · .grid--4 · .grid--2-1

Type h1–h4 · .lead · .small · .muted
.label (eyebrow)
.mono · .data · .metric

Components .btn--primary · --dark · --ghost
.card · --link · --navy · --minefox…
.chip--minefox · .pill--danger…
.stats · table.data-table · .field
.media · .media--16x9 · .media__note
[data-brand] · .hero--product
.section-rule · .platform-note

Rules for site builders Sections alternate white → paper → navy; never two navy sections adjacent. One product colour per page as accent. Hero photography is required at 16:9 — until it exists, ship the striped .media placeholder with its caption, never a stock photo.

2.5

Starter markup

<link rel="stylesheet" href="design-tokens.css">
<link rel="stylesheet" href="industryos-web.css">

<header class="site-header">
  <div class="wrap">
    <span class="wordmark">IndustryOS</span>
    <nav class="site-nav">…<a class="btn btn--primary">Request a demo</a></nav>
  </div>
</header>

<section class="section section--navy">
  <div class="wrap stack">
    <p class="label">Trusted partner in industrial technology</p>
    <h1>Site conditions, reported plainly.</h1>
    <p class="lead">Mine planning and wireless shotcrete monitoring in one platform.</p>
  </div>
</section>

<section class="section">
  <div class="wrap grid grid--3">
    <a class="card card--link card--minefox"><span class="card__rule"></span><h3>Minefox</h3></a>
  </div>
</section>

<!-- product page: one attribute re-points the accent -->
<body data-brand="safecrete">
  <header class="site-header">…</header>
  <section class="section hero--product">   <!-- navy ground; add --light for paper -->
    <div class="wrap stack">
      <span class="hero-rule"></span>          <!-- product colour -->
      <p class="label">Pour quality monitoring</p>
      <h1>Every pour, measured.</h1>
    </div>
  </section>
  <footer class="site-footer">
    <div class="platform-note">Safecrete is a module of <img src="logos/industryos-lockup-reversed.svg"></div>
  </footer>
</body>