# IndustryOS — complete brand pack for AI agents

**How to use this file.** Load it into any assistant (Claude, ChatGPT, Gemini, Copilot, or an
agent framework) as a project file, custom instruction, or knowledge-base document. It is a
single self-contained specification: brand architecture, voice, colour, type, spacing, motion,
logo artwork as inline SVG, a component library with props contracts, and build specifications
for every material IndustryOS produces. An agent holding this file can produce on-brand
IndustryOS work without any other source.

**Non-negotiables, in priority order.**
1. Text on any warm fill (Minefox red, Safewall orange, Safecrete yellow) is navy `#17263c`,
   never white.
2. Status is never colour alone — always an icon *and* a text label.
3. Cyan `#2fb8e3` is the only interactive accent on platform surfaces; one accent per surface.
   On a product surface, that product's colour replaces cyan.
4. Warm colours are for fills, logos, badges and large headings — never fine print, never a
   full-bleed background.
5. The mark is always the brand colour; the wordmark is white on dark grounds, navy on light.
6. Never add a phone number or email address to any template. Both are omitted deliberately.
7. Spacing uses only 4, 8, 12, 16, 24, 32, 48, 64. Radius only 4, 8, 12, 999.
8. No emoji in operational contexts. No exclamation marks in product UI.

Version 1.0.

---


The design system for **IndustryOS** — the parent platform — and its three product brands:
**Minefox**, **Safewall** and **Safecrete**. Everything here is the ground truth for on-brand
work: tokens, logo artwork, reusable components, full screen recreations, and the thirteen
human-readable brand sheets that this system was distilled from.

Tagline: **Trusted partner in industrial technology.**

## The company

IndustryOS builds industrial IoT, industrial operations software, and managed industrial data
platforms for mining and tunnelling. The group is the platform; each product is a distinct
business with its own customers, its own domain, and its own colour.

| Product | What it is | Colour |
| --- | --- | --- |
| **Minefox** | Mine planning, operations and KPI metrics — manages the whole mining operation on site. | `#ff3f1a` |
| **Safewall** | Wireless sensors in paste barricades: optimise pour schedules, manage hydrostatic pressure risk, confirm the wall can withstand the load. | `#f4700a` |
| **Safecrete** | Wireless sensors monitoring sprayed shotcrete cure in real time for safe, early re-entry into tunnel linings and underground headings. | `#ffcc00` |

**Domains.** `industryos.com.au` serves the group audience — investors and platform buyers.
`minefox.com.au`, `safewall.com.au` and `safecrete.com.au` each 301 to `industryos.com.au/<product>`,
a page branded entirely as that product. Many customers know one product and have never heard
of the group; product pages reference IndustryOS only in the footer.

**Company details.** IndustryOS · industryos.com.au · Suite 1401, Level 14, 203 Robina Town Centre
Drive, Robina QLD 4226, Australia. Default legal entity on correspondence: Safecrete Technology
(Operations) Pty Limited, ABN 32 683 968 014. Group also includes Holdings (ABN 78 683 967 464)
and IP (ABN 89 686 527 097). **Phone and email are intentionally omitted from every template** —
never add them.

## Sources

- `uploads/IndustryOS-Brand-Kit/` — the original brand kit: `brand-guidelines.md`,
  `design-tokens.css`/`.json`, `webapp-patterns.md`, `webapp-shell.html`, `style-guide.html`,
  `brand-config.js`, `templates/letterhead.html`, `templates/slide-template.html`.
- The supplied IndustryOS mark, from which all lockups were derived, is kept as
  `logos/source-industryos-dark.svg`.

No Figma file and no code repository were provided. (The earlier brochure source imagery,
used to derive the brochure structure, has been removed; the Brochure Template ships with
striped image placeholders instead.)

---

## Content fundamentals

Professional, technical, safety-first. The reader is an engineer or a manager accountable for a
site; write as if the number matters more than the sentence around it.

- **State the fact, the number, the status.** "Barricade B-14 reached 1.2 MPa at 04:12. Pour may
  resume." Not "Great news! Your barricade is looking good and should be ready soon!"
- **Active and direct.** "Safecrete clears re-entry on measured strength." Not "Re-entry can be
  cleared by Safecrete when strength has been measured."
- **Precise, not padded.** Cut every word that carries no information. No "leverage", "seamless",
  "revolutionary", "game-changing".
- **No hedging.** If a threshold was met, say it was met. If data is missing, say what is missing.
- **No exclamation marks in product UI. No emoji in operational contexts, ever.**
- **Second person for instructions** ("Set the re-entry threshold"), third person for status
  ("Cycle C-4472 is 2 h 40 m from threshold"). Never first person plural in the product.
- **Sentence case** for headings, buttons and labels — except the uppercase Label style
  (11px/600/0.08em), which is a typographic device for section markers and table headers.
- **Units always accompany figures**, set in mono, separated by a space: `1.84 MPa`, `18.7 m`,
  `9.4 h`. Timestamps are 24-hour: `04:12`.
- **Product names are capitalised** and never abbreviated: Minefox, Safewall, Safecrete,
  IndustryOS.

Marketing copy is allowed one degree more warmth than product UI, but the same discipline:
lead with what the product measures and what decision it enables.

---

## Visual foundations

**Overall.** Cool, calm, structural. The platform is navy and cyan; the products bring one warm
colour each. Nothing decorative earns its place — no gradients as backgrounds, no illustration
for its own sake, no rounded-card-with-coloured-left-border patterns.

**Colour.** Navy `#17263c` is the anchor: dark surfaces, sidebars, ink. Paper `#eeeeee` and the
cool neutral ramp (`#f6f8fb` page ground, `#dfe4ec` borders) carry everything else. Cyan
`#2fb8e3` is the only interactive accent on platform surfaces — one accent per surface.
Warm product colours are for fills, logos, badges, accents and large headings; **never for fine
print**, and **never as a full-bleed background** — a saturated red or orange field is hard to
read and hard to look at. Two hard rules: **text on any warm fill is navy, never white**, and
**status is never colour alone — always icon plus text label**.

**Type.** Inter for everything read as language; JetBrains Mono for everything a machine produced
— figures, IDs, timestamps, table numerals. Display 40/44 700 at -0.02em; H1 30/36 700; H2 24/30
600; H3 19/26 600; body 15/23; small 13/19; Label 11/14 600 at 0.08em uppercase. Data numerals
14-28px at 500, tabular. Inter 800 appears only inside logo artwork, never as body weight.

**Spacing.** A 4px base with eight permitted values: 4, 8, 12, 16, 24, 32, 48, 64. Page padding
24px in apps, 24-64px on marketing sections. Content max width 1176px.

**Corners.** 4px inputs, 8px buttons, 12px cards, 999px pills. Nothing else.

**Borders and elevation.** The default separator is 1px `#dfe4ec`. Two shadows exist: card
`0 1px 2px rgba(20,30,50,.06)` and raised `0 6px 20px rgba(20,30,50,.10)`. Cards are
white, 12px radius, 1px border, card shadow — not shadow-only, not border-only.

**Backgrounds.** Flat colour. Navy for dark sections, `#f6f8fb` for app page ground, white for
cards and marketing sections. No image backgrounds behind text, no gradients, no textures. The
one permitted pattern is the 135° 10px stripe used for image placeholders.

**Imagery.** None supplied. Until real photography exists, use a striped placeholder with a
monospace caption naming exactly what belongs there ("Product photography — sensor in situ,
16:10"). Never generate or draw substitute imagery. When photography arrives it should be
documentary: real sites, real equipment, cool-toned, no stock-photo staging.

**Transparency and blur.** Effectively unused. No frosted panels, no scrims over imagery. The
only overlay is a solid navy at 60% behind modals.

**Animation.** Calm and mechanical — nothing bounces or overshoots. One easing curve,
`cubic-bezier(.2, 0, 0, 1)`. 120ms for hover, focus and colour change; 180ms for toggles,
dropdowns and tab changes; 240ms for panels, drawers and page transitions. Motion is honoured
against `prefers-reduced-motion`.

**Hover.** Colour change only — fills darken to their -600 step (cyan `#2fb8e3` → `#1f97bd`),
ghost buttons take a `#f6f8fb` ground, nav items lighten toward white. Never scale, never lift,
never shadow-on-hover.

**Press.** The same darkened fill, no shrink transform.

**Focus.** A 2px cyan ring at 2px offset, on every interactive element. Never removed.

**Layout.** Apps: fixed 232px navy sidebar, fixed 56px white topbar with a 1px bottom border,
scrolling main. Page rhythm inside main is invariable — page head (title + actions), then an
optional banner, then a KPI row of 3-5 tiles, then card grids in three equal / two-thirds +
third / halves. Tables have ≥44px rows, right-aligned mono numbers, optional `#f6f8fb` zebra.

**Buttons.** Primary = accent fill + navy text. Dark = navy fill + white text. Ghost = 1px
border, transparent. 8px radius, 600 weight, 40px tall by default.

---

## Iconography

**Lucide is the icon standard** — settled, not tentative. Its plain structural line matches the
brand's voice; it is ISC-licensed. The Unicode geometric glyphs that once stood in (`▦ ◈ ▤ ◷ ◉ ▧ ⚙`
for navigation, `▲ ● ✓ ○` for status) have been replaced everywhere. In this system Lucide is
bundled locally (`vendor/lucide.js`) and loaded once per page before the bundle; the `Icon`
component (`components/core/Icon`) reads path data from that global — nothing is redrawn by hand.

**Sizes.** 18px in navigation, buttons and table cells; 20px in page heads; 16px in small buttons;
13px inside a status pill. **Stroke** is 1.75 to match Inter's weight, never below 1.5. **Colour**
is always `currentColor` — an icon inherits the status ink or button foreground it sits in; never
set an icon colour directly.

**Status icons are functional, not decorative** — they are what makes status readable without
colour, so they must never be stripped from `StatusPill` or `StatusDot`.

Never mix icon families, never fill an icon, never use emoji or Unicode geometry as an icon.
Emoji are never used anywhere. Logos are the only illustrative artwork in the system.

---

## Logo

The mark is always the brand colour. The wordmark is white on dark grounds and navy on light
ones — so `<brand>-lockup-navy.svg` and `-lockup-reversed.svg` are the everyday pair. Mono
variants exist only for one-colour reproduction (print, embroidery, etching) and for busy
photographic grounds; navy mono is also the one correct choice on a warm field, where a coloured
mark cannot read. A product mark never sits on its own colour.

The three **product** wordmarks are set identically — Inter 800, outlined, -0.03em — on one
105-unit artboard: mark fitted to an 82-unit box, wordmark cap height 50, gap 28. The
**IndustryOS** lockup is drawn artwork on the same 105-unit artboard to its own numbers
(84 · 51 · 28) — its wordmark letterforms are the drawn originals, not the Inter construction
used for the three products. The gap between mark and wordmark is 28 units on all four. Clear
space is 0.5 × mark height. Minimum lockup width 112px / 30mm; minimum mark width 16px / 6mm.

28 files in `assets/logos/` — 7 per brand: two everyday lockups, two mono lockups, one mark,
two wordmarks. Full rules in `Logo.dc.html`.

---

## Index

**Foundations**
- `styles.css` — the entry point consumers link. Import-only.
- `tokens/` — `colors.css`, `typography.css`, `type-roles.css`, `spacing.css`, `elevation.css`,
  `motion.css`, `fonts.css`, `base.css`, `components.css`. Two layers: raw ramps + semantic
  roles (see Design tokens). Fonts are self-hosted woff2 — no CDN.
- `guidelines/` — 22 specimen cards (Colours, Type, Spacing, Brand, plus theming and icons).
- `assets/logos/` — 28 brand SVGs.

**Components** (`components/`)
| Group | Components |
| --- | --- |
| `core/` | Button, IconButton, Icon, Card, Badge |
| `forms/` | Input, Select, Checkbox, Switch |
| `data/` | KpiTile, DataTable, FilterBar |
| `feedback/` | StatusPill, StatusDot, Banner, Toast, EmptyState, Skeleton |
| `navigation/` | Sidebar, Topbar, Tabs, PageHead |
| `brand/` | Logo |

Each has a `.d.ts` props contract and a `.prompt.md` usage note. Set `data-brand="minefox"`
(or `safewall`/`safecrete`) on any ancestor and `--ios-accent` switches to that product's
colour; navy and the neutral ramp never change. Set `data-theme="dark"` on any container for
the dark theme — only the semantic token layer moves.

**UI kits** (`ui_kits/`)
- `platform-app/` — the IndustryOS web app: overview, barricade monitoring, cure cycles.
- `website/` — platform landing plus the three product-branded pages.

**Brand sheets** (project root, human-readable, print-ready)
`Brand Pack.dc.html` is the hub. `Logo` · `Webapp Design System` · `Website CSS` ·
`Slide Templates` · `Letterhead` · `Brochure Template` · `Business Forms` ·
`Proposal Template` · `Technical Document` · `Identity Applications` ·
`Apparel and Merch` · `Large Format` · `Video Intro Outro`.

**Word templates** (`templates/word/`)
`IndustryOS-Letterhead.docx` · `IndustryOS-Proposal.docx` · `IndustryOS-Technical-Document.docx`
— real `.docx` generated from the document sheets above, with the brand's named styles, A4 page
setup, headers, footers and page numbering.

**Intentional additions.** No component inventory was supplied (the kit is brand guidelines
plus a static shell), so the component set above was authored from the patterns the kit
describes. `Logo`, `KpiTile`, `StatusPill` and `PageHead` exist because the brand rules
depend on them: brand-correct artwork selection, the KPI row, status-with-icon, and the fixed
page rhythm respectively. `Icon` wraps the Lucide glyph set so no component hardcodes path data;
`StatusDot`, `EmptyState` and `Skeleton` were added from the web-app system review for one
consolidated status treatment plus real empty and loading states.


---

## Design tokens

Link `styles.css`, which imports the files below in this order.

### colors.css
```css
:root {
  /* ---- Platform core ---- */
  --ios-navy:      #17263c;
  --ios-paper:     #eeeeee;
  --ios-cyan:      #2fb8e3;
  --ios-cyan-600:  #1f97bd;

  /* ---- Status scale (worst -> best). Never colour alone: always icon + label. ---- */
  --ios-danger:    #ff3f1a;
  --ios-warning:   #f4700a;
  --ios-caution:   #ffcc00;
  --ios-healthy:   #48e587;

  /* ---- Ink variants: coloured text on white ---- */
  --ios-danger-ink:  #d8331a;
  --ios-warning-ink: #c85a08;
  --ios-healthy-ink: #1c9b52;
  --ios-accent-ink:  #1f97bd;

  /* ---- Product brand (one colour each) ---- */
  --brand-minefox:   #ff3f1a;
  --brand-safewall:  #f4700a;
  --brand-safecrete: #ffcc00;

  /* ---- Neutrals (cool grey ramp) ---- */
  --ios-neutral-900: #17263c;
  --ios-neutral-700: #33465e;
  --ios-neutral-500: #5a6b82;
  --ios-neutral-300: #a9b5c5;
  --ios-neutral-200: #dfe4ec;
  --ios-neutral-100: #eef2f7;
  --ios-neutral-50:  #f6f8fb;
  --ios-white:       #ffffff;

  /* ---- Navy surface ramp (sidebars, dark sections) ---- */
  --ios-navy-raised: #153a5c;
  --ios-navy-border: #243f5e;
  --ios-navy-text:   #c4d2e0;
  --ios-navy-muted:  #8aa0b8;

  /* ---- Semantic aliases ---- */
  --ios-text:          var(--ios-neutral-900);
  --ios-text-muted:    var(--ios-neutral-500);
  --ios-text-subtle:   var(--ios-neutral-300);
  --ios-bg:            var(--ios-paper);
  --ios-surface:       var(--ios-white);
  --ios-surface-sunken:var(--ios-neutral-100);
  --ios-surface-dark:  var(--ios-navy);
  --ios-border:        var(--ios-neutral-200);
  --ios-link:          var(--ios-cyan);
  --ios-link-hover:    var(--ios-cyan-600);

  /* Text colour on ANY warm fill is navy, never white. */
  --ios-on-warm:   var(--ios-navy);
  --ios-on-accent: var(--ios-navy);
  --ios-on-dark:   var(--ios-white);

  /* Accent, overridable per product surface. Cyan is the platform default;
     a product page sets --ios-accent to its own brand colour. */
  --ios-accent:       var(--ios-cyan);
  --ios-accent-hover: var(--ios-cyan-600);
}

[data-brand="minefox"]   { --ios-accent: var(--brand-minefox);   --ios-accent-hover: #d8331a; }
[data-brand="safewall"]  { --ios-accent: var(--brand-safewall);  --ios-accent-hover: #c85a08; }
[data-brand="safecrete"] { --ios-accent: var(--brand-safecrete); --ios-accent-hover: #d9ad00; }
```

### typography.css
```css
:root {
  --ios-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ios-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ios-fw-regular:  400;
  --ios-fw-medium:   500;
  --ios-fw-semibold: 600;
  --ios-fw-bold:     700;
  --ios-fw-wordmark: 800; /* wordmark artwork only — never body copy */

  /* size / line-height pairs */
  --ios-display:  2.5rem;    --ios-display-lh:  2.75rem;   /* 40/44 700 -0.02em */
  --ios-h1:       1.875rem;  --ios-h1-lh:       2.25rem;   /* 30/36 700 */
  --ios-h2:       1.5rem;    --ios-h2-lh:       1.875rem;  /* 24/30 600 */
  --ios-h3:       1.1875rem; --ios-h3-lh:       1.625rem;  /* 19/26 600 */
  --ios-body-lg:  1.0625rem; --ios-body-lg-lh:  1.6875rem; /* 17/27 400 */
  --ios-body:     0.9375rem; --ios-body-lh:     1.4375rem; /* 15/23 400 */
  --ios-small:    0.8125rem; --ios-small-lh:    1.1875rem; /* 13/19 400 */
  --ios-label:    0.6875rem; --ios-label-lh:    0.875rem;  /* 11/14 600 uppercase */

  --ios-display-tracking: -0.02em;
  --ios-label-tracking:    0.08em;

  /* Data numerals — JetBrains Mono 500, 14-28px */
  --ios-data-sm: 0.875rem;
  --ios-data-md: 1.25rem;
  --ios-data-lg: 1.75rem;

  --ios-text-body:    var(--ios-body);
  --ios-text-heading: var(--ios-h2);
}
```

### spacing.css
```css
:root {
  /* 4px base — use these eight values only */
  --ios-space-1:  4px;
  --ios-space-2:  8px;
  --ios-space-3:  12px;
  --ios-space-4:  16px;
  --ios-space-6:  24px;
  --ios-space-8:  32px;
  --ios-space-12: 48px;
  --ios-space-16: 64px;

  --ios-radius-sm:   4px;   /* inputs */
  --ios-radius-md:   8px;   /* buttons */
  --ios-radius-lg:   12px;  /* cards */
  --ios-radius-pill: 999px; /* pills, badges */

  --ios-border-width: 1px;
  --ios-row-height:   44px; /* minimum table row / hit target */
  --ios-content-max:  1176px;
}
```

### elevation.css
```css
:root {
  --ios-shadow-card:   0 1px 2px rgba(20, 30, 50, .06);
  --ios-shadow-raised: 0 6px 20px rgba(20, 30, 50, .10);
  --ios-shadow-none:   none;

  /* Focus ring — cyan, 2px offset, never removed */
  --ios-focus-ring: 0 0 0 2px var(--ios-white), 0 0 0 4px var(--ios-cyan);
}
```

### motion.css
```css
:root {
  /* Calm and mechanical. Nothing bounces, nothing overshoots. */
  --ios-ease:      cubic-bezier(.2, 0, 0, 1);
  --ios-ease-out:  cubic-bezier(0, 0, .2, 1);
  --ios-dur-fast:  120ms; /* hover, focus, colour change */
  --ios-dur-base:  180ms; /* toggles, dropdowns, tab change */
  --ios-dur-slow:  240ms; /* panels, drawers, page transitions */

  --ios-transition-color: color var(--ios-dur-fast) var(--ios-ease),
                          background-color var(--ios-dur-fast) var(--ios-ease),
                          border-color var(--ios-dur-fast) var(--ios-ease);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ios-dur-fast: 0ms; --ios-dur-base: 0ms; --ios-dur-slow: 0ms; }
}
```

### fonts.css
```css
/* Inter + JetBrains Mono, self-hosted as woff2 (no CDN).
   Inter: UI, body, headings (400/500/600/700/800 — 800 is wordmark-only).
   JetBrains Mono: numbers, tables, IDs, timestamps (400/500). */

@import url("assets/fonts/fonts.css");   /* @font-face rules point at local woff2 */
```

### base.css
```css
/* Minimal element defaults. Opt-in: nothing here fights a host app. */

.ios-root,
body.ios-root {
  font-family: var(--ios-font-sans);
  font-size: var(--ios-body);
  line-height: var(--ios-body-lh);
  color: var(--ios-text);
  background: var(--ios-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.ios-root a { color: var(--ios-link); text-decoration: none; }
.ios-root a:hover { color: var(--ios-link-hover); text-decoration: underline; }

.ios-root :focus-visible { outline: none; box-shadow: var(--ios-focus-ring); }

.ios-num { font-family: var(--ios-font-mono); font-weight: var(--ios-fw-medium); font-variant-numeric: tabular-nums; }
.ios-label { font-size: var(--ios-label); line-height: var(--ios-label-lh); font-weight: var(--ios-fw-semibold); letter-spacing: var(--ios-label-tracking); text-transform: uppercase; color: var(--ios-text-muted); }
```

### type-roles.css
Named type roles — each bundles size + weight + line-height so nothing hardcodes `font-size` inline.
```css
.ios-display { font-size: var(--ios-display); line-height: var(--ios-display-lh); font-weight: var(--ios-fw-bold); letter-spacing: var(--ios-display-tracking); }
.ios-h1      { font-size: var(--ios-h1); line-height: var(--ios-h1-lh); font-weight: var(--ios-fw-bold); letter-spacing: -0.02em; }
.ios-h2      { font-size: var(--ios-h2); line-height: var(--ios-h2-lh); font-weight: var(--ios-fw-semibold); letter-spacing: -0.01em; }
.ios-h3      { font-size: var(--ios-h3); line-height: var(--ios-h3-lh); font-weight: var(--ios-fw-semibold); }
.ios-body-lg { font-size: var(--ios-body-lg); line-height: var(--ios-body-lg-lh); font-weight: var(--ios-fw-regular); }
.ios-body    { font-size: var(--ios-body); line-height: var(--ios-body-lh); font-weight: var(--ios-fw-regular); }
.ios-small   { font-size: var(--ios-small); line-height: var(--ios-small-lh); font-weight: var(--ios-fw-regular); }
/* Machine-produced values: mono, medium, tabular. Right-align in tables. */
.ios-data    { font-family: var(--ios-font-mono); font-size: var(--ios-data-sm); font-weight: var(--ios-fw-medium); font-variant-numeric: tabular-nums; }
.ios-data-md { font-family: var(--ios-font-mono); font-size: var(--ios-data-md); font-weight: var(--ios-fw-medium); font-variant-numeric: tabular-nums; }
.ios-kpi     { font-family: var(--ios-font-mono); font-size: var(--ios-data-lg); font-weight: var(--ios-fw-medium); font-variant-numeric: tabular-nums; }
```

### components.css — Layer 2 (semantic roles) + dark theme
**This is the layer a component or app reads — never raw hex, never a raw ramp directly.** Roles are
named for what they *do*; `[data-theme="dark"]` repoints this layer only (raw ramps never change);
`[data-brand="…"]` repoints the accent role only.
```css
:root {
  /* Surfaces */
  --ios-app-bg: var(--ios-paper); --ios-card-bg: var(--ios-white);
  --ios-card-border: var(--ios-neutral-200); --ios-card-shadow: var(--ios-shadow-card);
  --ios-panel-bg: var(--ios-neutral-100);
  --ios-masthead-bg: var(--ios-navy); --ios-masthead-fg: var(--ios-white);
  --ios-masthead-muted: var(--ios-neutral-300); --ios-masthead-border: var(--ios-neutral-700);
  /* Buttons */
  --ios-button-primary-bg: var(--ios-cyan); --ios-button-primary-fg: var(--ios-navy);
  --ios-button-primary-bg-hover: var(--ios-cyan-600);
  --ios-button-dark-bg: var(--ios-navy); --ios-button-dark-fg: var(--ios-white);
  --ios-button-ghost-fg: var(--ios-text); --ios-button-ghost-border: var(--ios-border);
  --ios-button-ghost-bg-hover: var(--ios-neutral-100);
  --ios-button-danger-bg: var(--ios-danger); --ios-button-danger-fg: var(--ios-navy);
  /* Accent chrome */
  --ios-accent-tint: rgba(47,184,227,.12); --ios-accent-soft: #e4f4fb;
  /* Status — solid fill (large badges), tint + ink (small pills). offline is the 5th level. */
  --ios-status-danger: var(--ios-danger);  --ios-status-danger-tint: #ffe9e4;  --ios-status-danger-ink: var(--ios-danger-ink);
  --ios-status-warning: var(--ios-warning); --ios-status-warning-tint: #fdeddc; --ios-status-warning-ink: var(--ios-warning-ink);
  --ios-status-caution: var(--ios-caution); --ios-status-caution-tint: #fff6d6; --ios-status-caution-ink: #8a6d00;
  --ios-status-healthy: var(--ios-healthy); --ios-status-healthy-tint: #e2f8ec; --ios-status-healthy-ink: var(--ios-healthy-ink);
  --ios-status-offline: var(--ios-neutral-300); --ios-status-offline-tint: var(--ios-neutral-100); --ios-status-offline-ink: var(--ios-neutral-500);
  /* Form controls */
  --ios-field-bg: var(--ios-white); --ios-field-border: var(--ios-neutral-200);
  --ios-field-border-focus: var(--ios-cyan); --ios-field-fg: var(--ios-text); --ios-field-placeholder: var(--ios-neutral-300);
  /* Data surfaces */
  --ios-table-head-fg: var(--ios-text-muted); --ios-table-row-border: var(--ios-neutral-200); --ios-table-row-hover: var(--ios-neutral-50);
  --ios-skeleton-base: var(--ios-neutral-100); --ios-skeleton-sheen: var(--ios-neutral-200);
}

/* Dark theme — opt-in via data-theme="dark" on <html> or any container.
   Only the semantic layer moves; status hues hold, tints darken so ink stays legible. */
[data-theme="dark"] {
  color-scheme: dark;
  --ios-app-bg: #0f1926; --ios-card-bg: #17263c; --ios-card-border: #2c3e57; --ios-panel-bg: #1e3049;
  --ios-masthead-bg: #1d3049; --ios-masthead-border: #34496a;
  --ios-text: #eef2f7; --ios-text-muted: #a9b5c5; --ios-text-subtle: #7d8ba0;
  --ios-bg: #0f1926; --ios-surface: #17263c; --ios-surface-sunken: #1e3049; --ios-border: #2c3e57;
  --ios-accent: #45c3ea; --ios-accent-hover: #7fd3d9; --ios-accent-ink: #45c3ea; --ios-link: #45c3ea;
  --ios-button-primary-bg: #45c3ea; --ios-button-primary-fg: #0f1926;
  --ios-status-danger-tint: #3a1a14; --ios-status-danger-ink: #ff8a70;
  --ios-status-warning-tint: #3a2410; --ios-status-warning-ink: #f9a765;
  --ios-status-caution-tint: #3a3410; --ios-status-caution-ink: #ffd84d;
  --ios-status-healthy-tint: #10301f; --ios-status-healthy-ink: #6fe6a3;
  --ios-field-bg: #1e3049; --ios-field-border: #2c3e57;
  --ios-shadow-card: 0 1px 2px rgba(0,0,0,.35); --ios-shadow-raised: 0 10px 30px rgba(0,0,0,.5);
  --ios-focus-ring: 0 0 0 2px #0f1926, 0 0 0 4px #45c3ea;
}
```

---

## Component library

All components are plain React, styled only through the CSS custom properties above. Each is a
named export from `components/<group>/<Name>.jsx`.

### Button  (`components/core/Button.jsx`)

Use `Button` for any action; `variant="primary"` for the single main action on a surface, `ghost` for secondary actions, `dark` on light marketing sections.

```jsx
<Button variant="primary" size="md" onClick={save}>Save changes</Button>
<Button variant="ghost">Cancel</Button>
```

Never place two primary buttons on the same surface. Text on the primary fill is navy, never white — the fill is a warm/bright colour and navy is the legible pair. `danger` is reserved for destructive confirmation, not for status display.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * Primary action control. Cyan fill with navy text is the platform default;
 * on a product surface --ios-accent carries that product's colour.
 * @startingPoint section="Core" subtitle="Buttons in every variant and size" viewport="700x220"
 */
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Visual weight. Default "primary". */
  variant?: 'primary' | 'dark' | 'ghost' | 'quiet' | 'danger';
  /** Default "md" (40px). "lg" is 48px for marketing surfaces. */
  size?: 'sm' | 'md' | 'lg';
  /** Leading glyph. */
  icon?: React.ReactNode;
  /** Trailing glyph, e.g. a chevron. */
  iconAfter?: React.ReactNode;
  fullWidth?: boolean;
  children?: React.ReactNode;
}
export declare function Button(props: ButtonProps): JSX.Element;
```
</details>

### IconButton  (`components/core/IconButton.jsx`)

A square icon-only button for toolbars and row actions. `label` is mandatory — it is the accessible name and the tooltip.

```jsx
<IconButton label="Export CSV">⤓</IconButton>
<IconButton label="Notifications" tone="onDark">◔</IconButton>
```

On touch targets pass `size={44}`.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Square, label-less action — toolbars, topbar clusters, table row actions. */
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Required accessible name; also used as the tooltip. */
  label: string;
  /** Square edge in px. Default 36. Never below 44 on touch surfaces. */
  size?: number;
  /** "onDark" for the navy sidebar/topbar; "filled" for a primary micro-action. */
  tone?: 'default' | 'onDark' | 'filled';
  children?: React.ReactNode;
}
export declare function IconButton(props: IconButtonProps): JSX.Element;
```
</details>

### Card  (`components/core/Card.jsx`)

The default surface for grouped content. Grids of cards use three equal, two-thirds + third, or halves.

```jsx
<Card title="Cure progress" meta="Updated 12s ago" actions={<Button variant="ghost" size="sm">Export</Button>}>
  …
</Card>
```

`tone="dark"` for a single emphasis card in a light grid; never more than one per view.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * The standard content container: 12px radius, 1px border, card shadow.
 * @startingPoint section="Core" subtitle="Card, badge and status pill" viewport="700x260"
 */
export interface CardProps extends React.HTMLAttributes<HTMLElement> {
  title?: React.ReactNode;
  /** Small line under the title — timestamp, site, count. */
  meta?: React.ReactNode;
  /** Right-aligned header controls. */
  actions?: React.ReactNode;
  /** Inner padding in px. Use 16, 24 or 32. Default 24. */
  padding?: number;
  tone?: 'default' | 'sunken' | 'dark';
  children?: React.ReactNode;
}
export declare function Card(props: CardProps): JSX.Element;
```
</details>

### Badge  (`components/core/Badge.jsx`)

Categorical label. Product tones fill with the brand colour and set navy text automatically.

```jsx
<Badge tone="safewall">Safewall</Badge>
<Badge tone="neutral">14 sites</Badge>
```

Do not use Badge to express operational status — that is `StatusPill`, which carries a required icon and label.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Small pill for counts, categories and product tags. For operational state use StatusPill. */
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  tone?: 'neutral' | 'accent' | 'danger' | 'warning' | 'caution' | 'healthy' | 'minefox' | 'safewall' | 'safecrete';
  children?: React.ReactNode;
}
export declare function Badge(props: BadgeProps): JSX.Element;
```
</details>

### Input  (`components/forms/Input.jsx`)

Standard text field. Use `mono` for anything a machine produced — sensor IDs, serials, coordinates.

```jsx
<Input label="Target strength" suffix="MPa" mono defaultValue="1.60" />
<Input label="Site" hint="Where the pour is scheduled" />
```

Units live in `suffix`, never inside the value.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * Single-line text field. 40px tall, 4px radius, uppercase label above.
 * @startingPoint section="Forms" subtitle="Inputs, select, checkbox, switch" viewport="700x300"
 */
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  /** Helper text below. Replaced by error when error is set. */
  hint?: string;
  /** Error message; also turns the border red. */
  error?: string;
  prefix?: React.ReactNode;
  /** Trailing unit, rendered in mono — "MPa", "m", "h". */
  suffix?: React.ReactNode;
  /** Set true for IDs, serials and numeric entry. */
  mono?: boolean;
}
export declare function Input(props: InputProps): JSX.Element;
```
</details>

### Select  (`components/forms/Select.jsx`)

Native select for 4+ options; below that use Radio or a segmented control.

```jsx
<Select label="Site" options={['Cadia North', 'Mount Isa', 'Olympic Dam']} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Native select, styled to match Input. */
export interface SelectOption { value: string; label: string; }
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  hint?: string;
  /** Plain strings or {value,label} pairs. */
  options?: (string | SelectOption)[];
}
export declare function Select(props: SelectProps): JSX.Element;
```
</details>

### Checkbox  (`components/forms/Checkbox.jsx`)

Independent on/off choices in a list or filter panel.

```jsx
<Checkbox label="Include offline sensors" hint="Last reading older than 6 hours" />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Multi-select option. Hit area covers the label. */
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: React.ReactNode;
  hint?: string;
}
export declare function Checkbox(props: CheckboxProps): JSX.Element;
```
</details>

### Switch  (`components/forms/Switch.jsx`)

A switch takes effect immediately. If the change needs a Save button, use Checkbox instead.

```jsx
<Switch label="Auto-suspend pour on breach" checked={on} onChange={() => setOn(!on)} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Immediate-effect toggle — applies on change, no Save step. */
export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: React.ReactNode;
  checked?: boolean;
}
export declare function Switch(props: SwitchProps): JSX.Element;
```
</details>

### KpiTile  (`components/data/KpiTile.jsx`)

The KPI row is the second element of every page: page head, then 3-5 tiles, then the card grid.

```jsx
<KpiTile label="Barricades monitored" value="142" footnote="all reporting" />
<KpiTile label="Mean cure time" value="9.4" unit="h" delta="-1.2 h vs plan" deltaTone="up" />
```

`deltaTone` is about whether the movement is good, not its sign.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * A single figure in the KPI row directly under the page head. Use 3-5 per row.
 * @startingPoint section="Data" subtitle="KPI row and data table" viewport="700x320"
 */
export interface KpiTileProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Inter 13px, muted. Plain words: "Sensors online". */
  label: string;
  /** The figure. Rendered in JetBrains Mono, tabular. */
  value: React.ReactNode;
  /** Unit, set smaller beside the figure — "MPa", "h", "%". */
  unit?: string;
  /** Change against the prior period, e.g. "+2 vs yesterday". */
  delta?: string;
  deltaTone?: 'up' | 'down' | 'neutral';
  footnote?: string;
}
export declare function KpiTile(props: KpiTileProps): JSX.Element;
```
</details>

### DataTable  (`components/data/DataTable.jsx`)

The workhorse of every operational view.

```jsx
<DataTable
  columns={[
    { key: 'id', header: 'Sensor', mono: true },
    { key: 'site', header: 'Site' },
    { key: 'mpa', header: 'Strength', align: 'right', mono: true },
    { key: 'status', header: 'Status', render: (r) => <StatusPill status={r.status} /> },
  ]}
  rows={rows}
/>
```

Right-align every numeric column and set `mono`, so digits line up down the column.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Operational table. Rows are 44px (36px dense); numbers right-aligned and mono. */
export interface DataColumn {
  key: string;
  header: React.ReactNode;
  /** Right-align numbers, always. */
  align?: 'left' | 'right' | 'center';
  /** Render this column in JetBrains Mono — figures, IDs, timestamps. */
  mono?: boolean;
  render?: (row: any) => React.ReactNode;
}
export interface DataTableProps extends React.HTMLAttributes<HTMLDivElement> {
  columns?: DataColumn[];
  rows?: any[];
  /** Zebra striping at #f6f8fb. Use only past ~8 rows. */
  zebra?: boolean;
  /** 36px rows. Never on touch surfaces. */
  dense?: boolean;
}
export declare function DataTable(props: DataTableProps): JSX.Element;
```
</details>

### FilterBar  (`components/data/FilterBar.jsx`)

Sits directly above a DataTable, inside the same card grid column.

```jsx
<FilterBar results={142} actions={<Button size="sm" variant="ghost">Export</Button>}>
  <Select options={['All sites', 'Cadia North']} />
</FilterBar>
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Row of filter controls above a table, with a result count on the right. */
export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Selects, search inputs, chips. */
  children?: React.ReactNode;
  /** Result count, rendered in mono. */
  results?: number | string;
  actions?: React.ReactNode;
}
export declare function FilterBar(props: FilterBarProps): JSX.Element;
```
</details>

### StatusPill  (`components/feedback/StatusPill.jsx`)

The only correct way to show operational state. The icon is not decorative — it is what makes the status readable without colour.

```jsx
<StatusPill status="critical" />
<StatusPill status="elevated" label="Pressure rising" />
```

Never strip the icon, and never use a bare coloured dot or a coloured row background as the sole status signal.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * Operational state. Always renders an icon AND a text label — status is never
 * communicated by colour alone.
 * @startingPoint section="Feedback" subtitle="Status pills and banners" viewport="700x240"
 */
export interface StatusPillProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Worst to best: critical, warning, elevated, nominal. Plus offline. */
  status?: 'critical' | 'warning' | 'elevated' | 'nominal' | 'offline';
  /** Override the default word, e.g. "Cure incomplete". The icon stays. */
  label?: string;
}
export declare function StatusPill(props: StatusPillProps): JSX.Element;
```
</details>

### Banner  (`components/feedback/Banner.jsx`)

A page-level notice, placed directly under the page head and above the KPI row.

```jsx
<Banner tone="critical" title="Barricade B-14 over pressure threshold"
  action={<Button size="sm" variant="ghost">Open site</Button>}>
  1.9 MPa against a 1.6 MPa limit. Pour suspended automatically.
</Banner>
```

Only one banner per view; if two conditions compete, show the worse one.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Page-level notice above the content. One at a time. */
export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
  tone?: 'info' | 'critical' | 'warning' | 'healthy';
  title?: React.ReactNode;
  /** Right-aligned control, usually a ghost Button. */
  action?: React.ReactNode;
  onDismiss?: () => void;
  children?: React.ReactNode;
}
export declare function Banner(props: BannerProps): JSX.Element;
```
</details>

### Toast  (`components/feedback/Toast.jsx`)

Confirms an action just taken. Never used for operational alarms — those are Banner or StatusPill, which persist.

```jsx
<Toast message="Report queued for export." onDismiss={close} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** Transient confirmation, bottom-right, auto-dismissing after ~5s. */
export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
  tone?: 'info' | 'critical' | 'healthy';
  message: React.ReactNode;
  action?: React.ReactNode;
  onDismiss?: () => void;
}
export declare function Toast(props: ToastProps): JSX.Element;
```
</details>

### Sidebar  (`components/navigation/Sidebar.jsx`)

The canonical navigation for every IndustryOS web app. Navy ground, grouped items, user footer.

```jsx
<Sidebar
  logo={<img src="assets/logos/industryos-lockup-reversed.svg" style={{height: 28}} />}
  onNew={create} newLabel="+ New plan"
  groups={[{ label: 'Operations', items: [{ id: 'sites', label: 'Sites', icon: '▦' }] }]}
  activeId="sites" onSelect={setView}
  user={{ initials: 'JA', name: 'J. Arundell', role: 'Site engineer' }}
/>
```

On a product surface set `data-brand="minefox"` on an ancestor and the accent (New button, active indicator) follows that product's colour.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * The navy app sidebar. Every IndustryOS app starts here.
 * Active item = raised navy plus a cyan (or product-accent) indicator bar.
 * @startingPoint section="Navigation" subtitle="App sidebar and topbar" viewport="700x420"
 */
export interface SidebarItem { id: string; label: string; icon?: React.ReactNode; badge?: number | string; }
export interface SidebarGroup { label: string; items: SidebarItem[]; }
export interface SidebarUser { initials: string; name: string; role: string; }
export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
  /** Reversed lockup, 26-28px tall. */
  logo?: React.ReactNode;
  newLabel?: string;
  /** Omit to hide the New button entirely. */
  onNew?: () => void;
  search?: boolean;
  groups?: SidebarGroup[];
  activeId?: string;
  onSelect?: (id: string) => void;
  user?: SidebarUser;
}
export declare function Sidebar(props: SidebarProps): JSX.Element;
```
</details>

### Topbar  (`components/navigation/Topbar.jsx`)

Pairs with Sidebar to form the app shell.

```jsx
<Topbar breadcrumb={['Safewall', 'Cadia North', 'Barricade B-14']}
  actions={<><IconButton label="Notifications">◔</IconButton><IconButton label="Help">?</IconButton></>} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** White app topbar: breadcrumb left, search and icon cluster right, 1px bottom border. */
export interface TopbarProps extends React.HTMLAttributes<HTMLElement> {
  /** Path segments; the last is the current page and renders semibold. */
  breadcrumb?: React.ReactNode[];
  search?: React.ReactNode;
  /** IconButtons — notifications, help, settings. */
  actions?: React.ReactNode;
}
export declare function Topbar(props: TopbarProps): JSX.Element;
```
</details>

### Tabs  (`components/navigation/Tabs.jsx`)

Switches views within one page — not for navigation between pages, which belongs in the Sidebar.

```jsx
<Tabs tabs={[{id:'live',label:'Live'},{id:'history',label:'History',count:214}]} activeId={tab} onSelect={setTab} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** In-page view switch. Underline indicator in the surface accent. */
export interface TabItem { id: string; label: React.ReactNode; count?: number | string; }
export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
  tabs?: TabItem[];
  activeId?: string;
  onSelect?: (id: string) => void;
}
export declare function Tabs(props: TabsProps): JSX.Element;
```
</details>

### PageHead  (`components/navigation/PageHead.jsx`)

Opens every page, above the KPI row.

```jsx
<PageHead eyebrow="Safewall" title="Barricade monitoring"
  actions={<Button>New pour plan</Button>} />
```

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/** First element of every page body: title plus its actions. */
export interface PageHeadProps extends React.HTMLAttributes<HTMLElement> {
  /** Uppercase label above the title — the section or product. */
  eyebrow?: React.ReactNode;
  title: React.ReactNode;
  description?: React.ReactNode;
  actions?: React.ReactNode;
}
export declare function PageHead(props: PageHeadProps): JSX.Element;
```
</details>

### Logo  (`components/brand/Logo.jsx`)

Renders the correct SVG for a brand and ground.

```jsx
<Logo brand="safewall" variant="reversed" height={28} />   // on navy
<Logo brand="industryos" variant="navy" height={32} />     // on white or paper
<Logo brand="minefox" kind="mark" height={40} />
```

Mono variants are for one-colour reproduction only (print, embroidery, etching) and for busy photographic grounds. A product mark never sits on its own colour.

<details><summary>Props contract</summary>

```ts
import * as React from 'react';

/**
 * Brand artwork. The mark is always the brand colour; the wordmark is white on
 * dark grounds and navy on light ones — so "navy" and "reversed" are the everyday pair.
 * @startingPoint section="Brand" subtitle="All four brands, every colourway" viewport="700x260"
 */
export interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  brand?: 'industryos' | 'minefox' | 'safewall' | 'safecrete';
  /** "navy" on light, "reversed" on dark. Mono only for one-colour reproduction. */
  variant?: 'navy' | 'reversed' | 'mono-navy' | 'mono-white';
  kind?: 'lockup' | 'mark' | 'wordmark';
  /** Rendered height in px. Lockups never below 30px (112px wide); marks never below 16px. */
  height?: number;
  /** Path to the logo folder, relative to the consuming page. */
  basePath?: string;
}
export declare function Logo(props: LogoProps): JSX.Element;
```
</details>


---

## Logo artwork

28 SVGs ship in `assets/logos/`, seven per brand:
- `industryos-lockup-mono-navy.svg`
- `industryos-lockup-mono-white.svg`
- `industryos-lockup-navy.svg`
- `industryos-lockup-reversed.svg`
- `industryos-mark-cyan.svg`
- `industryos-wordmark-navy.svg`
- `industryos-wordmark-white.svg`
- `minefox-lockup-mono-navy.svg`
- `minefox-lockup-mono-white.svg`
- `minefox-lockup-navy.svg`
- `minefox-lockup-reversed.svg`
- `minefox-mark-brand.svg`
- `minefox-wordmark-navy.svg`
- `minefox-wordmark-white.svg`
- `safecrete-lockup-mono-navy.svg`
- `safecrete-lockup-mono-white.svg`
- `safecrete-lockup-navy.svg`
- `safecrete-lockup-reversed.svg`
- `safecrete-mark-brand.svg`
- `safecrete-wordmark-navy.svg`
- `safecrete-wordmark-white.svg`
- `safewall-lockup-mono-navy.svg`
- `safewall-lockup-mono-white.svg`
- `safewall-lockup-navy.svg`
- `safewall-lockup-reversed.svg`
- `safewall-mark-brand.svg`
- `safewall-wordmark-navy.svg`
- `safewall-wordmark-white.svg`

The nine primary files are reproduced inline below so this document is self-sufficient. The
remaining files are colour variants generated from the same geometry: `-lockup-reversed` is the
navy lockup with the wordmark set to `#ffffff`; `-lockup-mono-navy` and `-lockup-mono-white`
set both mark and wordmark to a single colour; `-wordmark-navy` / `-wordmark-white` are the
lockup with the mark removed.

Construction: one 105-unit artboard; mark fitted to an 82-unit box; wordmark set in Inter 800,
outlined, at -0.03em with a cap height of 50; gap between mark and wordmark 24 units.
Clear space 0.5 × mark height. Minimum lockup width 112px / 30mm; minimum mark width 16px / 6mm.

#### `industryos-lockup-navy.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 467.55 105" role="img" aria-label="IndustryOS">
  <title>IndustryOS — cyan mark, navy type</title>
  <g id="mark" transform="translate(-5.72 3.25) scale(0.94)">
    <path fill="#2fb8e3" d="M73.2,43.9l-9.6,24.3c-.5,1.3-1.8,2.1-3.3,2.1H22.6c-1.5,0-2.8.9-3.3,2.2l-7.7,19.4c-.8,2.1.8,4.4,3.2,4.4h36.1c.4,0,.8,0,1.3,0,21,0,38-14.1,38-31.4s-4.3-16.6-11.2-22.3c-1.9-1.5-4.9-.8-5.7,1.3Z"></path>
    <path fill="#2fb8e3" d="M36.9,35.2h36.6c1.5,0,2.8-.9,3.3-2.2l7.9-19.8c.8-2.1-.8-4.4-3.2-4.4h-36.1c-.4,0-.8,0-1.3,0-21,0-38,14.1-38,31.4s4.6,17.2,12.1,22.9c1.9,1.5,4.8.8,5.7-1.4l9.7-24.4c.5-1.3,1.8-2.1,3.3-2.1Z"></path>
  </g>
  <path id="wordmark" fill="#17263c" transform="translate(99.02 77.5)" d="M3.79-50.02L15.88-50.02L15.88 0L3.79 0L3.79-50.02ZM33.33-21.40L33.33-21.40L33.33 0L21.38 0L21.38-37.52L32.74-37.52L32.74-30.63L33.16-30.63Q34.40-34.07 37.41-36.04Q40.41-38.00 44.56-38.00L44.56-38.00Q48.52-38.00 51.44-36.23Q54.36-34.46 55.98-31.30Q57.61-28.14 57.58-23.91L57.58-23.91L57.58 0L45.64 0L45.64-21.57Q45.66-24.69 44.06-26.45Q42.46-28.21 39.63-28.21L39.63-28.21Q37.75-28.21 36.32-27.39Q34.89-26.57 34.12-25.06Q33.35-23.55 33.33-21.40ZM76.65 0.54L76.65 0.54Q72.49 0.54 69.10-1.61Q65.70-3.76 63.68-8.06Q61.65-12.36 61.65-18.73L61.65-18.73Q61.65-25.35 63.75-29.63Q65.85-33.90 69.26-35.95Q72.66-38.00 76.60-38.00L76.60-38.00Q79.55-38.00 81.65-36.99Q83.75-35.98 85.12-34.39Q86.49-32.80 87.20-31.09L87.20-31.09L87.44-31.09L87.44-50.02L99.39-50.02L99.39 0L87.56 0L87.56-6.08L87.20-6.08Q86.44-4.35 85.05-2.83Q83.66-1.32 81.57-0.39Q79.48 0.54 76.65 0.54ZM80.80-8.77L80.80-8.77Q82.97-8.77 84.51-10.00Q86.05-11.24 86.88-13.48Q87.71-15.73 87.71-18.76L87.71-18.76Q87.71-21.84 86.89-24.06Q86.07-26.28 84.52-27.48Q82.97-28.67 80.80-28.67L80.80-28.67Q78.58-28.67 77.04-27.45Q75.50-26.23 74.70-24.01Q73.91-21.79 73.91-18.76L73.91-18.76Q73.91-15.73 74.72-13.48Q75.52-11.24 77.05-10.00Q78.58-8.77 80.80-8.77ZM129.10-16.19L129.10-16.19L129.10-37.52L141.02-37.52L141.02 0L129.64 0L129.64-6.99L129.24-6.99Q128.00-3.54 125.01-1.53Q122.02 0.49 117.79 0.49L117.79 0.49Q113.95 0.49 111.05-1.27Q108.14-3.03 106.53-6.19Q104.92-9.35 104.89-13.60L104.89-13.60L104.89-37.52L116.84-37.52L116.84-15.95Q116.86-12.90 118.45-11.14Q120.04-9.38 122.77-9.38L122.77-9.38Q124.56-9.38 125.98-10.17Q127.41-10.97 128.26-12.49Q129.10-14.02 129.10-16.19ZM179.30-26.06L179.30-26.06L168.34-25.77Q168.17-26.94 167.41-27.86Q166.65-28.77 165.44-29.30Q164.23-29.82 162.65-29.82L162.65-29.82Q160.57-29.82 159.12-28.99Q157.66-28.16 157.69-26.75L157.69-26.75Q157.66-25.65 158.58-24.84Q159.50-24.03 161.86-23.55L161.86-23.55L169.09-22.18Q174.71-21.10 177.46-18.61Q180.21-16.12 180.23-12.02L180.23-12.02Q180.21-8.16 177.95-5.30Q175.69-2.44 171.78-0.87Q167.87 0.71 162.84 0.71L162.84 0.71Q154.81 0.71 150.18-2.60Q145.55-5.91 144.89-11.48L144.89-11.48L156.69-11.77Q157.08-9.72 158.71-8.65Q160.35-7.57 162.89-7.57L162.89-7.57Q165.19-7.57 166.63-8.43Q168.07-9.28 168.09-10.70L168.09-10.70Q168.07-11.97 166.97-12.74Q165.87-13.51 163.53-13.95L163.53-13.95L156.98-15.19Q151.34-16.22 148.58-18.99Q145.82-21.76 145.84-26.06L145.84-26.06Q145.82-29.82 147.84-32.50Q149.87-35.17 153.61-36.59Q157.35-38.00 162.43-38.00L162.43-38.00Q170.05-38.00 174.44-34.82Q178.84-31.63 179.30-26.06ZM181.54-37.52L205.21-37.52L205.21-28.72L181.54-28.72L181.54-37.52ZM186.50-10.48L186.50-46.50L198.44-46.50L198.44-11.80Q198.44-10.70 198.80-10.03Q199.15-9.35 199.83-9.07Q200.52-8.79 201.47-8.79L201.47-8.79Q202.15-8.79 202.92-8.93Q203.69-9.06 204.08-9.16L204.08-9.16L205.89-0.54Q205.04-0.29 203.48 0.07Q201.93 0.44 199.78 0.54L199.78 0.54Q195.58 0.73 192.59-0.45Q189.60-1.64 188.02-4.15Q186.45-6.67 186.50-10.48L186.50-10.48ZM221.19 0L209.25 0L209.25-37.52L220.85-37.52L220.85-30.68L221.24-30.68Q222.27-34.39 224.59-36.21Q226.91-38.03 229.99-38.03L229.99-38.03Q230.82-38.03 231.70-37.92Q232.58-37.81 233.33-37.59L233.33-37.59L233.33-27.21Q232.48-27.50 231.10-27.67Q229.72-27.84 228.64-27.84L228.64-27.84Q226.52-27.84 224.82-26.90Q223.12-25.96 222.16-24.29Q221.19-22.62 221.19-20.37L221.19-20.37L221.19 0ZM243.46 14.07L243.46 14.07Q241.31 14.07 239.40 13.74Q237.50 13.41 236.13 12.87L236.13 12.87L238.77 4.20Q240.53 4.79 241.95 4.88Q243.38 4.98 244.42 4.43Q245.46 3.88 246.02 2.49L246.02 2.49L246.49 1.37L233.15-37.52L245.65-37.52L252.57-10.75L252.96-10.75L259.97-37.52L272.55-37.52L258.40 3.59Q257.38 6.67 255.51 9.02Q253.64 11.38 250.70 12.73Q247.76 14.07 243.46 14.07ZM322.26-25.01L322.26-25.01Q322.26-16.76 319.09-11.02Q315.91-5.28 310.50-2.30Q305.09 0.68 298.38 0.68L298.38 0.68Q291.64 0.68 286.24-2.32Q280.84-5.32 277.68-11.05Q274.51-16.78 274.51-25.01L274.51-25.01Q274.51-33.27 277.68-39.01Q280.84-44.75 286.24-47.73Q291.64-50.71 298.38-50.71L298.38-50.71Q305.09-50.71 310.50-47.73Q315.91-44.75 319.09-39.01Q322.26-33.27 322.26-25.01ZM309.90-25.01L309.90-25.01Q309.90-29.90 308.52-33.27Q307.14-36.64 304.57-38.37Q301.99-40.11 298.38-40.11L298.38-40.11Q294.79-40.11 292.20-38.37Q289.61-36.64 288.23-33.27Q286.85-29.90 286.85-25.01L286.85-25.01Q286.85-20.13 288.23-16.76Q289.61-13.38 292.20-11.65Q294.79-9.92 298.38-9.92L298.38-9.92Q301.99-9.92 304.57-11.65Q307.14-13.38 308.52-16.76Q309.90-20.13 309.90-25.01ZM365.85-35.03L354.27-35.03Q354.03-37.71 352.11-39.21Q350.19-40.72 346.65-40.72L346.65-40.72Q344.31-40.72 342.74-40.11Q341.18-39.49 340.40-38.43Q339.62-37.37 339.59-36.00L339.59-36.00Q339.54-34.88 340.05-34.02Q340.55-33.17 341.51-32.52Q342.48-31.87 343.84-31.39Q345.21-30.90 346.92-30.53L346.92-30.53L351.22-29.55Q354.93-28.75 357.78-27.40Q360.62-26.06 362.56-24.20Q364.51-22.35 365.51-19.93Q366.51-17.51 366.53-14.51L366.53-14.51Q366.51-9.77 364.14-6.37Q361.77-2.98 357.34-1.17Q352.90 0.64 346.65 0.64L346.65 0.64Q340.38 0.64 335.71-1.25Q331.04-3.13 328.46-6.96Q325.87-10.80 325.79-16.66L325.79-16.66L337.37-16.66Q337.52-14.24 338.67-12.63Q339.81-11.02 341.83-10.19Q343.84-9.35 346.51-9.35L346.51-9.35Q348.95-9.35 350.67-10.01Q352.39-10.67 353.32-11.85Q354.25-13.02 354.27-14.53L354.27-14.53Q354.25-15.95 353.39-16.96Q352.54-17.98 350.77-18.72Q349.00-19.47 346.26-20.10L346.26-20.10L341.03-21.32Q334.54-22.81 330.80-26.15Q327.06-29.48 327.09-35.17L327.09-35.17Q327.06-39.81 329.58-43.31Q332.10-46.80 336.54-48.75Q340.99-50.71 346.68-50.71L346.68-50.71Q352.49-50.71 356.78-48.74Q361.06-46.77 363.43-43.23Q365.80-39.69 365.85-35.03L365.85-35.03Z"></path>
</svg>
```

#### `industryos-lockup-reversed.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 467.55 105" role="img" aria-label="IndustryOS">
  <title>IndustryOS — cyan mark, white type</title>
  <g id="mark" transform="translate(-5.72 3.25) scale(0.94)">
    <path fill="#2fb8e3" d="M73.2,43.9l-9.6,24.3c-.5,1.3-1.8,2.1-3.3,2.1H22.6c-1.5,0-2.8.9-3.3,2.2l-7.7,19.4c-.8,2.1.8,4.4,3.2,4.4h36.1c.4,0,.8,0,1.3,0,21,0,38-14.1,38-31.4s-4.3-16.6-11.2-22.3c-1.9-1.5-4.9-.8-5.7,1.3Z"></path>
    <path fill="#2fb8e3" d="M36.9,35.2h36.6c1.5,0,2.8-.9,3.3-2.2l7.9-19.8c.8-2.1-.8-4.4-3.2-4.4h-36.1c-.4,0-.8,0-1.3,0-21,0-38,14.1-38,31.4s4.6,17.2,12.1,22.9c1.9,1.5,4.8.8,5.7-1.4l9.7-24.4c.5-1.3,1.8-2.1,3.3-2.1Z"></path>
  </g>
  <path id="wordmark" fill="#ffffff" transform="translate(99.02 77.5)" d="M3.79-50.02L15.88-50.02L15.88 0L3.79 0L3.79-50.02ZM33.33-21.40L33.33-21.40L33.33 0L21.38 0L21.38-37.52L32.74-37.52L32.74-30.63L33.16-30.63Q34.40-34.07 37.41-36.04Q40.41-38.00 44.56-38.00L44.56-38.00Q48.52-38.00 51.44-36.23Q54.36-34.46 55.98-31.30Q57.61-28.14 57.58-23.91L57.58-23.91L57.58 0L45.64 0L45.64-21.57Q45.66-24.69 44.06-26.45Q42.46-28.21 39.63-28.21L39.63-28.21Q37.75-28.21 36.32-27.39Q34.89-26.57 34.12-25.06Q33.35-23.55 33.33-21.40ZM76.65 0.54L76.65 0.54Q72.49 0.54 69.10-1.61Q65.70-3.76 63.68-8.06Q61.65-12.36 61.65-18.73L61.65-18.73Q61.65-25.35 63.75-29.63Q65.85-33.90 69.26-35.95Q72.66-38.00 76.60-38.00L76.60-38.00Q79.55-38.00 81.65-36.99Q83.75-35.98 85.12-34.39Q86.49-32.80 87.20-31.09L87.20-31.09L87.44-31.09L87.44-50.02L99.39-50.02L99.39 0L87.56 0L87.56-6.08L87.20-6.08Q86.44-4.35 85.05-2.83Q83.66-1.32 81.57-0.39Q79.48 0.54 76.65 0.54ZM80.80-8.77L80.80-8.77Q82.97-8.77 84.51-10.00Q86.05-11.24 86.88-13.48Q87.71-15.73 87.71-18.76L87.71-18.76Q87.71-21.84 86.89-24.06Q86.07-26.28 84.52-27.48Q82.97-28.67 80.80-28.67L80.80-28.67Q78.58-28.67 77.04-27.45Q75.50-26.23 74.70-24.01Q73.91-21.79 73.91-18.76L73.91-18.76Q73.91-15.73 74.72-13.48Q75.52-11.24 77.05-10.00Q78.58-8.77 80.80-8.77ZM129.10-16.19L129.10-16.19L129.10-37.52L141.02-37.52L141.02 0L129.64 0L129.64-6.99L129.24-6.99Q128.00-3.54 125.01-1.53Q122.02 0.49 117.79 0.49L117.79 0.49Q113.95 0.49 111.05-1.27Q108.14-3.03 106.53-6.19Q104.92-9.35 104.89-13.60L104.89-13.60L104.89-37.52L116.84-37.52L116.84-15.95Q116.86-12.90 118.45-11.14Q120.04-9.38 122.77-9.38L122.77-9.38Q124.56-9.38 125.98-10.17Q127.41-10.97 128.26-12.49Q129.10-14.02 129.10-16.19ZM179.30-26.06L179.30-26.06L168.34-25.77Q168.17-26.94 167.41-27.86Q166.65-28.77 165.44-29.30Q164.23-29.82 162.65-29.82L162.65-29.82Q160.57-29.82 159.12-28.99Q157.66-28.16 157.69-26.75L157.69-26.75Q157.66-25.65 158.58-24.84Q159.50-24.03 161.86-23.55L161.86-23.55L169.09-22.18Q174.71-21.10 177.46-18.61Q180.21-16.12 180.23-12.02L180.23-12.02Q180.21-8.16 177.95-5.30Q175.69-2.44 171.78-0.87Q167.87 0.71 162.84 0.71L162.84 0.71Q154.81 0.71 150.18-2.60Q145.55-5.91 144.89-11.48L144.89-11.48L156.69-11.77Q157.08-9.72 158.71-8.65Q160.35-7.57 162.89-7.57L162.89-7.57Q165.19-7.57 166.63-8.43Q168.07-9.28 168.09-10.70L168.09-10.70Q168.07-11.97 166.97-12.74Q165.87-13.51 163.53-13.95L163.53-13.95L156.98-15.19Q151.34-16.22 148.58-18.99Q145.82-21.76 145.84-26.06L145.84-26.06Q145.82-29.82 147.84-32.50Q149.87-35.17 153.61-36.59Q157.35-38.00 162.43-38.00L162.43-38.00Q170.05-38.00 174.44-34.82Q178.84-31.63 179.30-26.06ZM181.54-37.52L205.21-37.52L205.21-28.72L181.54-28.72L181.54-37.52ZM186.50-10.48L186.50-46.50L198.44-46.50L198.44-11.80Q198.44-10.70 198.80-10.03Q199.15-9.35 199.83-9.07Q200.52-8.79 201.47-8.79L201.47-8.79Q202.15-8.79 202.92-8.93Q203.69-9.06 204.08-9.16L204.08-9.16L205.89-0.54Q205.04-0.29 203.48 0.07Q201.93 0.44 199.78 0.54L199.78 0.54Q195.58 0.73 192.59-0.45Q189.60-1.64 188.02-4.15Q186.45-6.67 186.50-10.48L186.50-10.48ZM221.19 0L209.25 0L209.25-37.52L220.85-37.52L220.85-30.68L221.24-30.68Q222.27-34.39 224.59-36.21Q226.91-38.03 229.99-38.03L229.99-38.03Q230.82-38.03 231.70-37.92Q232.58-37.81 233.33-37.59L233.33-37.59L233.33-27.21Q232.48-27.50 231.10-27.67Q229.72-27.84 228.64-27.84L228.64-27.84Q226.52-27.84 224.82-26.90Q223.12-25.96 222.16-24.29Q221.19-22.62 221.19-20.37L221.19-20.37L221.19 0ZM243.46 14.07L243.46 14.07Q241.31 14.07 239.40 13.74Q237.50 13.41 236.13 12.87L236.13 12.87L238.77 4.20Q240.53 4.79 241.95 4.88Q243.38 4.98 244.42 4.43Q245.46 3.88 246.02 2.49L246.02 2.49L246.49 1.37L233.15-37.52L245.65-37.52L252.57-10.75L252.96-10.75L259.97-37.52L272.55-37.52L258.40 3.59Q257.38 6.67 255.51 9.02Q253.64 11.38 250.70 12.73Q247.76 14.07 243.46 14.07ZM322.26-25.01L322.26-25.01Q322.26-16.76 319.09-11.02Q315.91-5.28 310.50-2.30Q305.09 0.68 298.38 0.68L298.38 0.68Q291.64 0.68 286.24-2.32Q280.84-5.32 277.68-11.05Q274.51-16.78 274.51-25.01L274.51-25.01Q274.51-33.27 277.68-39.01Q280.84-44.75 286.24-47.73Q291.64-50.71 298.38-50.71L298.38-50.71Q305.09-50.71 310.50-47.73Q315.91-44.75 319.09-39.01Q322.26-33.27 322.26-25.01ZM309.90-25.01L309.90-25.01Q309.90-29.90 308.52-33.27Q307.14-36.64 304.57-38.37Q301.99-40.11 298.38-40.11L298.38-40.11Q294.79-40.11 292.20-38.37Q289.61-36.64 288.23-33.27Q286.85-29.90 286.85-25.01L286.85-25.01Q286.85-20.13 288.23-16.76Q289.61-13.38 292.20-11.65Q294.79-9.92 298.38-9.92L298.38-9.92Q301.99-9.92 304.57-11.65Q307.14-13.38 308.52-16.76Q309.90-20.13 309.90-25.01ZM365.85-35.03L354.27-35.03Q354.03-37.71 352.11-39.21Q350.19-40.72 346.65-40.72L346.65-40.72Q344.31-40.72 342.74-40.11Q341.18-39.49 340.40-38.43Q339.62-37.37 339.59-36.00L339.59-36.00Q339.54-34.88 340.05-34.02Q340.55-33.17 341.51-32.52Q342.48-31.87 343.84-31.39Q345.21-30.90 346.92-30.53L346.92-30.53L351.22-29.55Q354.93-28.75 357.78-27.40Q360.62-26.06 362.56-24.20Q364.51-22.35 365.51-19.93Q366.51-17.51 366.53-14.51L366.53-14.51Q366.51-9.77 364.14-6.37Q361.77-2.98 357.34-1.17Q352.90 0.64 346.65 0.64L346.65 0.64Q340.38 0.64 335.71-1.25Q331.04-3.13 328.46-6.96Q325.87-10.80 325.79-16.66L325.79-16.66L337.37-16.66Q337.52-14.24 338.67-12.63Q339.81-11.02 341.83-10.19Q343.84-9.35 346.51-9.35L346.51-9.35Q348.95-9.35 350.67-10.01Q352.39-10.67 353.32-11.85Q354.25-13.02 354.27-14.53L354.27-14.53Q354.25-15.95 353.39-16.96Q352.54-17.98 350.77-18.72Q349.00-19.47 346.26-20.10L346.26-20.10L341.03-21.32Q334.54-22.81 330.80-26.15Q327.06-29.48 327.09-35.17L327.09-35.17Q327.06-39.81 329.58-43.31Q332.10-46.80 336.54-48.75Q340.99-50.71 346.68-50.71L346.68-50.71Q352.49-50.71 356.78-48.74Q361.06-46.77 363.43-43.23Q365.80-39.69 365.85-35.03L365.85-35.03Z"></path>
</svg>
```

#### `industryos-mark-cyan.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 105 105" role="img" aria-label="IndustryOS">
  <title>IndustryOS mark — cyan</title>
  <path fill="#2fb8e3" d="M73.2,43.9l-9.6,24.3c-.5,1.3-1.8,2.1-3.3,2.1H22.6c-1.5,0-2.8.9-3.3,2.2l-7.7,19.4c-.8,2.1.8,4.4,3.2,4.4h36.1c.4,0,.8,0,1.3,0,21,0,38-14.1,38-31.4s-4.3-16.6-11.2-22.3c-1.9-1.5-4.9-.8-5.7,1.3Z"></path>
  <path fill="#2fb8e3" d="M36.9,35.2h36.6c1.5,0,2.8-.9,3.3-2.2l7.9-19.8c.8-2.1-.8-4.4-3.2-4.4h-36.1c-.4,0-.8,0-1.3,0-21,0-38,14.1-38,31.4s4.6,17.2,12.1,22.9c1.9,1.5,4.8.8,5.7-1.4l9.7-24.4c.5-1.3,1.8-2.1,3.3-2.1Z"></path>
</svg>
```

#### `minefox-lockup-navy.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 368.6 105" role="img" aria-label="Minefox">
  <title>Minefox — brand mark, navy type</title>
  <g id="mark" transform="translate(-6.04 7.14) scale(0.86)">
    <path fill="#ff3f1a" d="M94.2,5.7c-9.4,5.8-16.6,14.2-24,22.2h-31.4c-7.5-8-14.6-16.4-24-22.2.9,21.4-1.6,42.7-7.8,63.1,17.3,6.6,32.9,17.5,46.7,29.8l.8.8h0c0,0,0,0,0,0l.8-.8c13.8-12.3,29.3-23.2,46.7-29.8-6.2-20.4-8.7-41.7-7.8-63.1ZM33.8,65.4l-.5-.4-3.6-8.9,9.4,3.2,4.5,9-9.8-2.9ZM76.4,65.2l-10.2,3.2,4.5-9,9.4-3.2s0,0,0,0h0s0,0,0,0c-1,3.1-2.5,6-3.7,9Z"></path>
  </g>
  <path id="wordmark" fill="#17263c" transform="translate(102.21 77.5)" d="M3.79 0L3.79-50.02L18.76-50.02L31.46-19.05L32.05-19.05L44.75-50.02L59.72-50.02L59.72 0L47.95 0L47.95-30.73L47.53-30.73L35.51-0.32L27.99-0.32L15.97-30.90L15.56-30.90L15.56 0L3.79 0ZM77.17 0L65.23 0L65.23-37.52L77.17-37.52L77.17 0ZM71.21-41.89L71.21-41.89Q68.70-41.89 66.89-43.56Q65.08-45.23 65.08-47.60L65.08-47.60Q65.08-49.95 66.89-51.62Q68.70-53.29 71.21-53.29L71.21-53.29Q73.75-53.29 75.55-51.62Q77.34-49.95 77.34-47.60L77.34-47.60Q77.34-45.23 75.55-43.56Q73.75-41.89 71.21-41.89ZM94.62-21.40L94.62-21.40L94.62 0L82.68 0L82.68-37.52L94.04-37.52L94.04-30.63L94.45-30.63Q95.70-34.07 98.70-36.04Q101.71-38.00 105.86-38.00L105.86-38.00Q109.81-38.00 112.73-36.23Q115.65-34.46 117.28-31.30Q118.90-28.14 118.88-23.91L118.88-23.91L118.88 0L106.93 0L106.93-21.57Q106.96-24.69 105.36-26.45Q103.76-28.21 100.92-28.21L100.92-28.21Q99.04-28.21 97.61-27.39Q96.19-26.57 95.42-25.06Q94.65-23.55 94.62-21.40ZM141.77 0.71L141.77 0.71Q135.89 0.71 131.63-1.62Q127.36-3.96 125.08-8.29Q122.80-12.63 122.80-18.61L122.80-18.61Q122.80-24.42 125.09-28.78Q127.39-33.14 131.57-35.57Q135.74-38.00 141.41-38.00L141.41-38.00Q145.41-38.00 148.74-36.76Q152.06-35.51 154.48-33.07Q156.89-30.63 158.24-27.05Q159.58-23.47 159.58-18.86L159.58-18.86L159.58-15.88L126.97-15.88L126.97-22.81L148.47-22.81Q148.44-24.72 147.56-26.21Q146.68-27.70 145.16-28.54Q143.63-29.38 141.65-29.38L141.65-29.38Q139.65-29.38 138.06-28.49Q136.47-27.60 135.55-26.07Q134.62-24.55 134.57-22.62L134.57-22.62L134.57-15.56Q134.57-13.26 135.47-11.54Q136.38-9.82 138.04-8.87Q139.70-7.91 141.99-7.91L141.99-7.91Q143.58-7.91 144.88-8.35Q146.17-8.79 147.10-9.65Q148.03-10.50 148.49-11.75L148.49-11.75L159.46-11.43Q158.77-7.74 156.47-5.02Q154.16-2.30 150.42-0.79Q146.68 0.71 141.77 0.71ZM160.84-37.52L184.97-37.52L184.97-28.72L160.84-28.72L160.84-37.52ZM177.81 0L165.87 0L165.87-39.42Q165.87-43.77 167.51-46.64Q169.14-49.51 172.05-50.94Q174.96-52.37 178.77-52.37L178.77-52.37Q181.26-52.37 183.47-51.99Q185.68-51.61 186.75-51.32L186.75-51.32L184.85-42.57Q184.19-42.79 183.25-42.94Q182.31-43.09 181.48-43.09L181.48-43.09Q179.38-43.09 178.60-42.16Q177.81-41.23 177.81-39.62L177.81-39.62L177.81 0ZM206.18 0.71L206.18 0.71Q200.27 0.71 196.04-1.72Q191.80-4.15 189.51-8.51Q187.23-12.87 187.23-18.64L187.23-18.64Q187.23-24.42 189.51-28.78Q191.80-33.14 196.04-35.57Q200.27-38.00 206.18-38.00L206.18-38.00Q212.09-38.00 216.33-35.57Q220.57-33.14 222.85-28.78Q225.14-24.42 225.14-18.64L225.14-18.64Q225.14-12.87 222.85-8.51Q220.57-4.15 216.33-1.72Q212.09 0.71 206.18 0.71ZM206.26-8.30L206.26-8.30Q208.41-8.30 209.90-9.62Q211.39-10.94 212.18-13.29Q212.97-15.63 212.97-18.71L212.97-18.71Q212.97-21.84 212.18-24.18Q211.39-26.53 209.90-27.84Q208.41-29.16 206.26-29.16L206.26-29.16Q204.03-29.16 202.51-27.84Q200.98-26.53 200.19-24.18Q199.39-21.84 199.39-18.71L199.39-18.71Q199.39-15.63 200.19-13.29Q200.98-10.94 202.51-9.62Q204.03-8.30 206.26-8.30ZM227.25-37.52L239.37-37.52L245.54-25.16L251.94-37.52L263.99-37.52L253.51-18.76L264.38 0L252.43 0L245.54-12.46L238.83 0L226.71 0L237.61-18.76L227.25-37.52Z"></path>
</svg>
```

#### `minefox-mark-brand.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 1 105 104" role="img" aria-label="Minefox">
  <title>Minefox mark — brand colour</title>
  <path fill="#ff3f1a" d="M94.2,5.7c-9.4,5.8-16.6,14.2-24,22.2h-31.4c-7.5-8-14.6-16.4-24-22.2.9,21.4-1.6,42.7-7.8,63.1,17.3,6.6,32.9,17.5,46.7,29.8l.8.8h0c0,0,0,0,0,0l.8-.8c13.8-12.3,29.3-23.2,46.7-29.8-6.2-20.4-8.7-41.7-7.8-63.1ZM33.8,65.4l-.5-.4-3.6-8.9,9.4,3.2,4.5,9-9.8-2.9ZM76.4,65.2l-10.2,3.2,4.5-9,9.4-3.2s0,0,0,0h0s0,0,0,0c-1,3.1-2.5,6-3.7,9Z"></path>
</svg>
```

#### `safewall-lockup-navy.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380.3 105" role="img" aria-label="Safewall">
  <title>Safewall — brand mark, navy type</title>
  <g id="mark" transform="translate(-13.4 -7.97) scale(1.15)">
    <path fill="#f4700a" d="M11.7,17.4H83.3V88.2H65.3A53.6,53.6 0 0 0 11.7,34.6Z"></path>
    <path fill="#f4700a" d="M11.7,44.3A43.9,43.9 0 0 1 55.6,88.2H48.75A37.05,37.05 0 0 0 11.7,51.15Z"></path>
    <path fill="#f4700a" d="M11.7,60.85A27.35,27.35 0 0 1 39.05,88.2H32.2A20.5,20.5 0 0 0 11.7,67.7Z"></path>
    <path fill="#f4700a" d="M11.7,88.2V77.4A10.8,10.8 0 0 1 22.5,88.2Z"></path>
  </g>
  <path id="wordmark" fill="#17263c" transform="translate(103.66 77.5)" d="M42.40-35.03L30.82-35.03Q30.58-37.71 28.66-39.21Q26.75-40.72 23.20-40.72L23.20-40.72Q20.86-40.72 19.30-40.11Q17.73-39.49 16.95-38.43Q16.17-37.37 16.14-36.00L16.14-36.00Q16.10-34.88 16.60-34.02Q17.10-33.17 18.06-32.52Q19.03-31.87 20.39-31.39Q21.76-30.90 23.47-30.53L23.47-30.53L27.77-29.55Q31.48-28.75 34.33-27.40Q37.17-26.06 39.12-24.20Q41.06-22.35 42.06-19.93Q43.06-17.51 43.09-14.51L43.09-14.51Q43.06-9.77 40.69-6.37Q38.32-2.98 33.89-1.17Q29.46 0.64 23.20 0.64L23.20 0.64Q16.93 0.64 12.26-1.25Q7.60-3.13 5.01-6.96Q2.42-10.80 2.34-16.66L2.34-16.66L13.92-16.66Q14.07-14.24 15.22-12.63Q16.36-11.02 18.38-10.19Q20.39-9.35 23.06-9.35L23.06-9.35Q25.50-9.35 27.22-10.01Q28.94-10.67 29.87-11.85Q30.80-13.02 30.82-14.53L30.82-14.53Q30.80-15.95 29.94-16.96Q29.09-17.98 27.32-18.72Q25.55-19.47 22.81-20.10L22.81-20.10L17.59-21.32Q11.09-22.81 7.35-26.15Q3.61-29.48 3.64-35.17L3.64-35.17Q3.61-39.81 6.13-43.31Q8.65-46.80 13.09-48.75Q17.54-50.71 23.23-50.71L23.23-50.71Q29.04-50.71 33.33-48.74Q37.61-46.77 39.98-43.23Q42.35-39.69 42.40-35.03L42.40-35.03ZM57.73 0.64L57.73 0.64Q54.14 0.64 51.37-0.57Q48.59-1.78 46.99-4.24Q45.39-6.69 45.39-10.40L45.39-10.40Q45.39-13.53 46.49-15.68Q47.59-17.83 49.52-19.17Q51.45-20.52 53.97-21.21Q56.48-21.91 59.34-22.15L59.34-22.15Q62.54-22.45 64.49-22.78Q66.45-23.11 67.34-23.73Q68.23-24.35 68.23-25.50L68.23-25.50L68.23-25.62Q68.23-27.50 66.94-28.53Q65.64-29.55 63.44-29.55L63.44-29.55Q61.07-29.55 59.63-28.53Q58.19-27.50 57.80-25.69L57.80-25.69L46.79-26.09Q47.27-29.51 49.31-32.20Q51.35-34.90 54.93-36.45Q58.51-38.00 63.54-38.00L63.54-38.00Q67.13-38.00 70.16-37.16Q73.19-36.32 75.44-34.72Q77.68-33.12 78.92-30.80Q80.15-28.48 80.15-25.50L80.15-25.50L80.15 0L68.91 0L68.91-5.23L68.62-5.23Q67.62-3.32 66.07-2.00Q64.52-0.68 62.43-0.02Q60.34 0.64 57.73 0.64ZM61.42-7.18L61.42-7.18Q63.35-7.18 64.90-7.96Q66.45-8.74 67.38-10.12Q68.30-11.50 68.30-13.34L68.30-13.34L68.30-16.90Q67.79-16.63 67.07-16.41Q66.35-16.19 65.50-16.00Q64.64-15.80 63.74-15.66Q62.83-15.51 62.00-15.39L62.00-15.39Q60.32-15.12 59.13-14.56Q57.95-14.00 57.33-13.10Q56.70-12.21 56.70-10.99L56.70-10.99Q56.70-9.13 58.03-8.16Q59.36-7.18 61.42-7.18ZM82.56-37.52L106.69-37.52L106.69-28.72L82.56-28.72L82.56-37.52ZM99.53 0L87.59 0L87.59-39.42Q87.59-43.77 89.22-46.64Q90.86-49.51 93.77-50.94Q96.67-52.37 100.48-52.37L100.48-52.37Q102.98-52.37 105.19-51.99Q107.40-51.61 108.47-51.32L108.47-51.32L106.57-42.57Q105.91-42.79 104.97-42.94Q104.03-43.09 103.20-43.09L103.20-43.09Q101.09-43.09 100.31-42.16Q99.53-41.23 99.53-39.62L99.53-39.62L99.53 0ZM127.93 0.71L127.93 0.71Q122.04 0.71 117.78-1.62Q113.52-3.96 111.23-8.29Q108.95-12.63 108.95-18.61L108.95-18.61Q108.95-24.42 111.24-28.78Q113.54-33.14 117.72-35.57Q121.89-38.00 127.56-38.00L127.56-38.00Q131.57-38.00 134.89-36.76Q138.21-35.51 140.63-33.07Q143.04-30.63 144.39-27.05Q145.73-23.47 145.73-18.86L145.73-18.86L145.73-15.88L113.12-15.88L113.12-22.81L134.62-22.81Q134.59-24.72 133.71-26.21Q132.84-27.70 131.31-28.54Q129.78-29.38 127.80-29.38L127.80-29.38Q125.80-29.38 124.21-28.49Q122.63-27.60 121.70-26.07Q120.77-24.55 120.72-22.62L120.72-22.62L120.72-15.56Q120.72-13.26 121.62-11.54Q122.53-9.82 124.19-8.87Q125.85-7.91 128.15-7.91L128.15-7.91Q129.73-7.91 131.03-8.35Q132.32-8.79 133.25-9.65Q134.18-10.50 134.64-11.75L134.64-11.75L145.61-11.43Q144.93-7.74 142.62-5.02Q140.31-2.30 136.57-0.79Q132.84 0.71 127.93 0.71ZM169.61 0L156.81 0L147.04-37.52L159.03-37.52L164.09-13.48L164.40-13.48L169.83-37.52L181.53-37.52L187.10-13.65L187.41-13.65L192.32-37.52L204.31-37.52L194.52 0L181.75 0L175.88-21.86L175.47-21.86L169.61 0ZM217.64 0.64L217.64 0.64Q214.05 0.64 211.28-0.57Q208.50-1.78 206.90-4.24Q205.30-6.69 205.30-10.40L205.30-10.40Q205.30-13.53 206.40-15.68Q207.50-17.83 209.43-19.17Q211.36-20.52 213.88-21.21Q216.39-21.91 219.25-22.15L219.25-22.15Q222.45-22.45 224.40-22.78Q226.36-23.11 227.25-23.73Q228.14-24.35 228.14-25.50L228.14-25.50L228.14-25.62Q228.14-27.50 226.85-28.53Q225.55-29.55 223.35-29.55L223.35-29.55Q220.99-29.55 219.54-28.53Q218.10-27.50 217.71-25.69L217.71-25.69L206.70-26.09Q207.19-29.51 209.22-32.20Q211.26-34.90 214.84-36.45Q218.42-38.00 223.45-38.00L223.45-38.00Q227.04-38.00 230.07-37.16Q233.10-36.32 235.35-34.72Q237.59-33.12 238.83-30.80Q240.06-28.48 240.06-25.50L240.06-25.50L240.06 0L228.83 0L228.83-5.23L228.53-5.23Q227.53-3.32 225.98-2.00Q224.43-0.68 222.34-0.02Q220.25 0.64 217.64 0.64ZM221.33-7.18L221.33-7.18Q223.26-7.18 224.81-7.96Q226.36-8.74 227.29-10.12Q228.21-11.50 228.21-13.34L228.21-13.34L228.21-16.90Q227.70-16.63 226.98-16.41Q226.26-16.19 225.41-16.00Q224.55-15.80 223.65-15.66Q222.74-15.51 221.91-15.39L221.91-15.39Q220.23-15.12 219.04-14.56Q217.86-14.00 217.24-13.10Q216.61-12.21 216.61-10.99L216.61-10.99Q216.61-9.13 217.94-8.16Q219.28-7.18 221.33-7.18ZM245.28-50.02L257.22-50.02L257.22 0L245.28 0L245.28-50.02ZM262.73-50.02L274.67-50.02L274.67 0L262.73 0L262.73-50.02Z"></path>
</svg>
```

#### `safewall-mark-brand.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 12 83 82" role="img" aria-label="Safewall">
  <title>Safewall mark — brand colour</title>
  <path fill="#f4700a" d="M11.7,17.4H83.3V88.2H65.3A53.6,53.6 0 0 0 11.7,34.6Z"></path>
  <path fill="#f4700a" d="M11.7,44.3A43.9,43.9 0 0 1 55.6,88.2H48.75A37.05,37.05 0 0 0 11.7,51.15Z"></path>
  <path fill="#f4700a" d="M11.7,60.85A27.35,27.35 0 0 1 39.05,88.2H32.2A20.5,20.5 0 0 0 11.7,67.7Z"></path>
  <path fill="#f4700a" d="M11.7,88.2V77.4A10.8,10.8 0 0 1 22.5,88.2Z"></path>
</svg>
```

#### `safecrete-lockup-navy.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 421.3 105" role="img" aria-label="Safecrete">
  <title>Safecrete — brand mark, navy type</title>
  <g id="mark" transform="translate(-8.94 11.81) scale(0.77)">
    <path fill="#ffcc00" id="Imported_Path__x23_27" d="M91.4,46.8c9.1,9.2,12.7,21.8,10.5,33.6,0,0,0,0-.1,0-3.2-.6-3.2-.6-6.7-1.1,1.8-9.7-1.1-20.1-8.6-27.6-12.1-12.1-31.8-12.1-43.9,0-7.6,7.6-10.4,18-8.6,27.8-3.3.5-3.5.5-6.8,1.2,0,0-.1,0-.1,0-2.2-11.9,1.3-24.7,10.5-33.9h0c14.8-14.8,38.9-14.8,53.8,0h0"></path>
    <path fill="#ffcc00" id="Imported_Path__x23_26" d="M101.9,36.5c12.9,12.9,17.7,30.7,14.5,47.4-4.2-1.1-4.1-1.1-7.9-2,2.6-13.9-1.5-28.9-12.3-39.7h0c-17.4-17.4-45.6-17.4-63,0h0c-10.8,10.8-14.9,25.8-12.3,39.8-4,1-4.2,1-8.3,2.2-3.4-16.8,1.4-34.9,14.4-47.9,20.2-21.4,55.9-19.9,74.8.2Z"></path>
    <path fill="#ffcc00" id="Imported_Path__x23_23" d="M81.7,56.4h0c-9.5-9.5-24.9-9.5-34.5,0h0c-6,6-8.2,14.5-6.6,22.3,2.7-.3,2.8-.3,5.5-.6-1.5-6.2.1-13,5-17.8,7.3-7.3,19.3-7.3,26.6,0,4.8,4.8,6.5,11.5,5,17.6,2.9.3,2.8.3,5.6.5,1.6-7.7-.6-16.1-6.6-22.1"></path>
    <path fill="#ffcc00" id="Imported_Path__x23_20" d="M60.6,68.7h8.7c0,0,0,8.6,0,8.6h-8.7v-8.6Z"></path>
  </g>
  <path id="wordmark" fill="#17263c" transform="translate(103.66 77.5)" d="M42.40-35.03L30.82-35.03Q30.58-37.71 28.66-39.21Q26.75-40.72 23.20-40.72L23.20-40.72Q20.86-40.72 19.30-40.11Q17.73-39.49 16.95-38.43Q16.17-37.37 16.14-36.00L16.14-36.00Q16.10-34.88 16.60-34.02Q17.10-33.17 18.06-32.52Q19.03-31.87 20.39-31.39Q21.76-30.90 23.47-30.53L23.47-30.53L27.77-29.55Q31.48-28.75 34.33-27.40Q37.17-26.06 39.12-24.20Q41.06-22.35 42.06-19.93Q43.06-17.51 43.09-14.51L43.09-14.51Q43.06-9.77 40.69-6.37Q38.32-2.98 33.89-1.17Q29.46 0.64 23.20 0.64L23.20 0.64Q16.93 0.64 12.26-1.25Q7.60-3.13 5.01-6.96Q2.42-10.80 2.34-16.66L2.34-16.66L13.92-16.66Q14.07-14.24 15.22-12.63Q16.36-11.02 18.38-10.19Q20.39-9.35 23.06-9.35L23.06-9.35Q25.50-9.35 27.22-10.01Q28.94-10.67 29.87-11.85Q30.80-13.02 30.82-14.53L30.82-14.53Q30.80-15.95 29.94-16.96Q29.09-17.98 27.32-18.72Q25.55-19.47 22.81-20.10L22.81-20.10L17.59-21.32Q11.09-22.81 7.35-26.15Q3.61-29.48 3.64-35.17L3.64-35.17Q3.61-39.81 6.13-43.31Q8.65-46.80 13.09-48.75Q17.54-50.71 23.23-50.71L23.23-50.71Q29.04-50.71 33.33-48.74Q37.61-46.77 39.98-43.23Q42.35-39.69 42.40-35.03L42.40-35.03ZM57.73 0.64L57.73 0.64Q54.14 0.64 51.37-0.57Q48.59-1.78 46.99-4.24Q45.39-6.69 45.39-10.40L45.39-10.40Q45.39-13.53 46.49-15.68Q47.59-17.83 49.52-19.17Q51.45-20.52 53.97-21.21Q56.48-21.91 59.34-22.15L59.34-22.15Q62.54-22.45 64.49-22.78Q66.45-23.11 67.34-23.73Q68.23-24.35 68.23-25.50L68.23-25.50L68.23-25.62Q68.23-27.50 66.94-28.53Q65.64-29.55 63.44-29.55L63.44-29.55Q61.07-29.55 59.63-28.53Q58.19-27.50 57.80-25.69L57.80-25.69L46.79-26.09Q47.27-29.51 49.31-32.20Q51.35-34.90 54.93-36.45Q58.51-38.00 63.54-38.00L63.54-38.00Q67.13-38.00 70.16-37.16Q73.19-36.32 75.44-34.72Q77.68-33.12 78.92-30.80Q80.15-28.48 80.15-25.50L80.15-25.50L80.15 0L68.91 0L68.91-5.23L68.62-5.23Q67.62-3.32 66.07-2.00Q64.52-0.68 62.43-0.02Q60.34 0.64 57.73 0.64ZM61.42-7.18L61.42-7.18Q63.35-7.18 64.90-7.96Q66.45-8.74 67.38-10.12Q68.30-11.50 68.30-13.34L68.30-13.34L68.30-16.90Q67.79-16.63 67.07-16.41Q66.35-16.19 65.50-16.00Q64.64-15.80 63.74-15.66Q62.83-15.51 62.00-15.39L62.00-15.39Q60.32-15.12 59.13-14.56Q57.95-14.00 57.33-13.10Q56.70-12.21 56.70-10.99L56.70-10.99Q56.70-9.13 58.03-8.16Q59.36-7.18 61.42-7.18ZM82.56-37.52L106.69-37.52L106.69-28.72L82.56-28.72L82.56-37.52ZM99.53 0L87.59 0L87.59-39.42Q87.59-43.77 89.22-46.64Q90.86-49.51 93.77-50.94Q96.67-52.37 100.48-52.37L100.48-52.37Q102.98-52.37 105.19-51.99Q107.40-51.61 108.47-51.32L108.47-51.32L106.57-42.57Q105.91-42.79 104.97-42.94Q104.03-43.09 103.20-43.09L103.20-43.09Q101.09-43.09 100.31-42.16Q99.53-41.23 99.53-39.62L99.53-39.62L99.53 0ZM127.93 0.71L127.93 0.71Q122.04 0.71 117.78-1.62Q113.52-3.96 111.23-8.29Q108.95-12.63 108.95-18.61L108.95-18.61Q108.95-24.42 111.24-28.78Q113.54-33.14 117.72-35.57Q121.89-38.00 127.56-38.00L127.56-38.00Q131.57-38.00 134.89-36.76Q138.21-35.51 140.63-33.07Q143.04-30.63 144.39-27.05Q145.73-23.47 145.73-18.86L145.73-18.86L145.73-15.88L113.12-15.88L113.12-22.81L134.62-22.81Q134.59-24.72 133.71-26.21Q132.84-27.70 131.31-28.54Q129.78-29.38 127.80-29.38L127.80-29.38Q125.80-29.38 124.21-28.49Q122.63-27.60 121.70-26.07Q120.77-24.55 120.72-22.62L120.72-22.62L120.72-15.56Q120.72-13.26 121.62-11.54Q122.53-9.82 124.19-8.87Q125.85-7.91 128.15-7.91L128.15-7.91Q129.73-7.91 131.03-8.35Q132.32-8.79 133.25-9.65Q134.18-10.50 134.64-11.75L134.64-11.75L145.61-11.43Q144.93-7.74 142.62-5.02Q140.31-2.30 136.57-0.79Q132.84 0.71 127.93 0.71ZM167.31 0.71L167.31 0.71Q161.38 0.71 157.14-1.73Q152.90-4.18 150.63-8.54Q148.36-12.90 148.36-18.64L148.36-18.64Q148.36-24.40 150.64-28.76Q152.93-33.12 157.16-35.56Q161.40-38.00 167.29-38.00L167.29-38.00Q172.49-38.00 176.36-36.12Q180.23-34.24 182.42-30.81Q184.60-27.38 184.73-22.76L184.73-22.76L173.56-22.76Q173.22-25.65 171.62-27.28Q170.02-28.92 167.46-28.92L167.46-28.92Q165.38-28.92 163.82-27.76Q162.26-26.60 161.39-24.34Q160.52-22.08 160.52-18.76L160.52-18.76Q160.52-15.44 161.39-13.15Q162.26-10.87 163.82-9.71Q165.38-8.55 167.46-8.55L167.46-8.55Q169.12-8.55 170.40-9.26Q171.68-9.97 172.51-11.35Q173.34-12.73 173.56-14.70L173.56-14.70L184.73-14.70Q184.56-10.06 182.42-6.59Q180.28-3.13 176.43-1.21Q172.59 0.71 167.31 0.71ZM200.74 0L188.79 0L188.79-37.52L200.40-37.52L200.40-30.68L200.79-30.68Q201.81-34.39 204.13-36.21Q206.45-38.03 209.53-38.03L209.53-38.03Q210.36-38.03 211.24-37.92Q212.12-37.81 212.88-37.59L212.88-37.59L212.88-27.21Q212.02-27.50 210.64-27.67Q209.26-27.84 208.19-27.84L208.19-27.84Q206.06-27.84 204.36-26.90Q202.67-25.96 201.70-24.29Q200.74-22.62 200.74-20.37L200.74-20.37L200.74 0ZM233.23 0.71L233.23 0.71Q227.35 0.71 223.09-1.62Q218.82-3.96 216.54-8.29Q214.26-12.63 214.26-18.61L214.26-18.61Q214.26-24.42 216.55-28.78Q218.85-33.14 223.03-35.57Q227.20-38.00 232.87-38.00L232.87-38.00Q236.87-38.00 240.20-36.76Q243.52-35.51 245.94-33.07Q248.35-30.63 249.70-27.05Q251.04-23.47 251.04-18.86L251.04-18.86L251.04-15.88L218.43-15.88L218.43-22.81L239.93-22.81Q239.90-24.72 239.02-26.21Q238.14-27.70 236.62-28.54Q235.09-29.38 233.11-29.38L233.11-29.38Q231.11-29.38 229.52-28.49Q227.93-27.60 227.01-26.07Q226.08-24.55 226.03-22.62L226.03-22.62L226.03-15.56Q226.03-13.26 226.93-11.54Q227.84-9.82 229.50-8.87Q231.16-7.91 233.45-7.91L233.45-7.91Q235.04-7.91 236.34-8.35Q237.63-8.79 238.56-9.65Q239.49-10.50 239.95-11.75L239.95-11.75L250.92-11.43Q250.23-7.74 247.93-5.02Q245.62-2.30 241.88-0.79Q238.14 0.71 233.23 0.71ZM252.62-37.52L276.28-37.52L276.28-28.72L252.62-28.72L252.62-37.52ZM257.57-10.48L257.57-46.50L269.52-46.50L269.52-11.80Q269.52-10.70 269.87-10.03Q270.23-9.35 270.91-9.07Q271.59-8.79 272.55-8.79L272.55-8.79Q273.23-8.79 274.00-8.93Q274.77-9.06 275.16-9.16L275.16-9.16L276.97-0.54Q276.11-0.29 274.56 0.07Q273.01 0.44 270.86 0.54L270.86 0.54Q266.66 0.73 263.67-0.45Q260.68-1.64 259.10-4.15Q257.53-6.67 257.57-10.48L257.57-10.48ZM297.86 0.71L297.86 0.71Q291.98 0.71 287.71-1.62Q283.45-3.96 281.17-8.29Q278.89-12.63 278.89-18.61L278.89-18.61Q278.89-24.42 281.18-28.78Q283.48-33.14 287.65-35.57Q291.83-38.00 297.50-38.00L297.50-38.00Q301.50-38.00 304.82-36.76Q308.15-35.51 310.56-33.07Q312.98-30.63 314.33-27.05Q315.67-23.47 315.67-18.86L315.67-18.86L315.67-15.88L283.06-15.88L283.06-22.81L304.56-22.81Q304.53-24.72 303.65-26.21Q302.77-27.70 301.25-28.54Q299.72-29.38 297.74-29.38L297.74-29.38Q295.74-29.38 294.15-28.49Q292.56-27.60 291.64-26.07Q290.71-24.55 290.66-22.62L290.66-22.62L290.66-15.56Q290.66-13.26 291.56-11.54Q292.47-9.82 294.13-8.87Q295.79-7.91 298.08-7.91L298.08-7.91Q299.67-7.91 300.97-8.35Q302.26-8.79 303.19-9.65Q304.12-10.50 304.58-11.75L304.58-11.75L315.55-11.43Q314.86-7.74 312.55-5.02Q310.25-2.30 306.51-0.79Q302.77 0.71 297.86 0.71Z"></path>
</svg>
```

#### `safecrete-mark-brand.svg`

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 15 116 74" role="img" aria-label="Safecrete">
  <title>Safecrete mark — brand colour</title>
  <path fill="#ffcc00" id="Imported_Path__x23_27" d="M91.4,46.8c9.1,9.2,12.7,21.8,10.5,33.6,0,0,0,0-.1,0-3.2-.6-3.2-.6-6.7-1.1,1.8-9.7-1.1-20.1-8.6-27.6-12.1-12.1-31.8-12.1-43.9,0-7.6,7.6-10.4,18-8.6,27.8-3.3.5-3.5.5-6.8,1.2,0,0-.1,0-.1,0-2.2-11.9,1.3-24.7,10.5-33.9h0c14.8-14.8,38.9-14.8,53.8,0h0"></path>
  <path fill="#ffcc00" id="Imported_Path__x23_26" d="M101.9,36.5c12.9,12.9,17.7,30.7,14.5,47.4-4.2-1.1-4.1-1.1-7.9-2,2.6-13.9-1.5-28.9-12.3-39.7h0c-17.4-17.4-45.6-17.4-63,0h0c-10.8,10.8-14.9,25.8-12.3,39.8-4,1-4.2,1-8.3,2.2-3.4-16.8,1.4-34.9,14.4-47.9,20.2-21.4,55.9-19.9,74.8.2Z"></path>
  <path fill="#ffcc00" id="Imported_Path__x23_23" d="M81.7,56.4h0c-9.5-9.5-24.9-9.5-34.5,0h0c-6,6-8.2,14.5-6.6,22.3,2.7-.3,2.8-.3,5.5-.6-1.5-6.2.1-13,5-17.8,7.3-7.3,19.3-7.3,26.6,0,4.8,4.8,6.5,11.5,5,17.6,2.9.3,2.8.3,5.6.5,1.6-7.7-.6-16.1-6.6-22.1"></path>
  <path fill="#ffcc00" id="Imported_Path__x23_20" d="M60.6,68.7h8.7c0,0,0,8.6,0,8.6h-8.7v-8.6Z"></path>
</svg>
```


## Artefact specifications

Everything below is enough to rebuild any IndustryOS material from scratch. Dimensions are exact.
All of it obeys the colour, type, spacing and voice rules above; only the deviations are noted.

### 1 · Web application
Shell: navy sidebar 232px (logo slot 56px tall, accent-filled "+ New" button with 12px above it,
search field on `#0f1c2e`, grouped nav, user footer) + main column with a 56px white topbar
(breadcrumb left, search and icon cluster right, 1px `#dfe4ec` bottom border), then a scrolling
main at 24px padding.
Sidebar text: `#c4d2e0` default, `#8aa0b8` muted/group labels, white active. Active item =
`#153a5c` ground + a 3px accent indicator bar inset 8px top and bottom, semibold.
Page rhythm, invariable: page head (H1 30/36 + actions) → optional banner → KPI row of 3-5 tiles
(mono numeral 24-40px, Inter 13px `#5a6b82` label) → card grids (three equal / two-thirds+third /
halves) → filter bars and tables.
Tables: ≥44px rows (36px dense), uppercase Label headers, right-aligned mono numbers, optional
`#f6f8fb` zebra past ~8 rows, 1px row separators, no vertical rules.
Product surfaces set `data-brand`; `--ios-accent` becomes that product's colour and the New
button, active indicator, tab underline and progress bars follow. Navy and neutrals never change.

### 2 · Website
Four pages from one section set. Sticky navy header, 72px, lockup left, nav centre, accent
"Request a demo" button right. Hero on navy: accent eyebrow (Label style), 44/50 700 -0.02em
headline, 17/27 lead at `#c4d2e0`, two buttons, an optional mono stat row, and a 16:10 image
placeholder. Feature grid on white, three cards. Product row (platform page only): three cards,
each with a 3px top rule in its brand colour and the product lockup. Navy footer: lockup,
one-line positioning, domain, two link columns, then a bottom bar with the Robina address and
"© IndustryOS".
**Product heroes sit on navy, never on a full-bleed brand colour.** The brand colour does the
accent work only.
Domains: `industryos.com.au` = group/investor/platform; `minefox.com.au`, `safewall.com.au`,
`safecrete.com.au` each 301 to `industryos.com.au/<product>`. Product pages reference
IndustryOS only in the footer ("A module of IndustryOS").

### 3 · Slides (1920 × 1080)
Deck built on a fixed 1920×1080 stage. Text never below 24px. Layout set:
- **Title** — navy full bleed, lockup top-left at 64px margins, display headline 96/100 700
  -0.02em, cyan rule 4px × 240px, subtitle 32px `#c4d2e0`, presenter line bottom-left in mono 20px.
- **Section divider** — navy or a single product colour as full bleed; if warm, all text navy.
  Number in mono 120px at 30% opacity, section title 72px.
- **Statement** — paper ground, one sentence at 64/72 600, max 20 words.
- **Content** — white, H2 48px title, 28px body, 64px margins, two- or three-column grid.
- **Data** — KPI row of 3-4 mono figures at 88px with 20px Inter labels, source line in mono 18px.
- **Table** — Label headers 20px, 32px rows, right-aligned mono figures.
- **Image** — full-bleed placeholder with a mono caption; text over image only inside a solid
  navy panel, never directly on the picture.
- **Closing** — navy, lockup centred, tagline 32px, domain in mono.
Slide numbers bottom-right in mono 18px `#8aa0b8`. Max two background colours across a deck.

### 4 · Letterhead (A4, 210 × 297mm)
Margins 20mm. Header: IndustryOS navy lockup 30mm wide, top-left; a 0.5pt `#dfe4ec` rule 12mm
below it. Body 11pt/1.6 Inter, navy ink. Footer, repeating on every page: entity name and ABN,
address, domain — 8pt `#5a6b82`, above a 0.5pt rule. Default entity: Safecrete Technology
(Operations) Pty Limited, ABN 32 683 968 014. **No phone, no email.**

### 5 · Brochure (A4, 8 pages)
Cover: navy or single-product full bleed, lockup top-left, display headline bottom-left,
image placeholder occupying the upper two-thirds. Contents page with mono page numbers.
Infographic spread: numbered steps on paper ground. Product spread: two-thirds copy,
one-third spec table in mono. Workflow page: numbered horizontal sequence. Spec page: full-width
table, Label headers, mono values. Commercial page: three-column offer cards. Back cover: navy,
lockup, tagline, domain, address block. Running footer carries the product name and page number
in mono — never an internal document number.

### 6 · Business forms — quote, invoice, purchase order (A4)
Navy header band 32mm deep, reversed lockup left, document type in 24pt 600 white right,
document number in mono beneath it. Party block: two columns, Label headers, 10pt bodies.
Line-item table: Label headers on `#f6f8fb`, 10pt rows at 7mm, description left, quantity/rate/
amount right-aligned mono. Totals block right-aligned, 40% width, subtotal/GST/total with total
in 14pt 600 on a `#eef2f7` band. Terms in 9pt `#5a6b82`. Footer: entity, ABN, address, domain.
Rendered in Xero from .docx branding themes — the HTML sheet is the design reference plus the
merge-field mapping, not the uploadable file.

### 7 · Proposal / RFP response (A4)
20mm margins, 11pt/1.75 body. Cover: navy, client name, proposal title, date, reference in mono.
Section openers: a ruled band with the section number in mono and the title in 16pt 600, with
generous air above. Body: single column, max 78 characters. Pricing tables as per business forms.
Assumptions and exclusions as numbered lists. Running header carries the proposal title only —
never an internal index number.

### 8 · Technical document (A4)
Same page geometry as the proposal. Navy title band with document title, version and date.
Numbered headings (1, 1.1, 1.1.1) in 600. Body 11pt/1.75. Code and identifiers in JetBrains Mono
10pt on `#f6f8fb` with 4px radius. Figures: placeholder with a mono "Figure n —" caption.
Tables as per business forms. Revision history table on page 2.

### 9 · Identity applications
**Business card 90 × 55mm.** Front: navy ground, reversed lockup top-left, name 11pt 600 white,
role 9pt `#8aa0b8`, domain in mono 8pt bottom-left. Back: a single flat colour — navy, or the
product colour at reduced coverage as a band rather than a full flood. **Never a fully saturated
warm bleed.**
**Email signature.** Inter/Arial fallback, 14px name 600 navy, 13px role `#5a6b82`, a 1px
`#dfe4ec` rule, lockup at 132px wide, domain link in cyan. No phone, no email line, no social
icons, no quotation, no image beyond the lockup.

### 10 · Apparel and merch
Embroidery and one-colour print use the mono lockups. Navy mono on light garments and warm
fields; white mono on navy garments. Mark-only for caps (25mm), sleeves and pens.
Polos and hi-vis: mark or lockup left chest at 70mm wide. Laptop sleeves, bags and mugs: lockup
at 40% of the face width, centred or top-left, on navy or a neutral — not on a warm flood.

### 11 · Large format
**Kakemono / pull-up banner 850 × 2000mm.** Navy ground. Lockup top, 300mm wide. Headline 200pt.
Three supporting lines at 90pt. Image placeholder in the lower half. Domain in mono at the base.
Safe area 100mm top and bottom.
**Poster A1 (594 × 841mm).** Same hierarchy at A1 scale; minimum body 18pt.
**Billboard 6000 × 3000mm.** Seven words maximum. Headline at 600pt+. Lockup no smaller than 8%
of the width. Navy ground with a single accent element. Viewing distance ≥ 30m: no body copy,
no fine print, no QR code.
Across all large format, avoid a saturated brand-colour flood — navy or paper ground, brand
colour as accent.

### 12 · Video intro / outro (1920 × 1080)
One 3.2s intro and one 3.4s outro per brand — four brands, eight frames.
Sequence: navy ground; the reversed lockup fades and rises 12px over 0.6s; a 2px underline in
the brand colour draws left-to-right across exactly the lockup width over 0.5s; the tagline
settles beneath it; the domain fades in last. Outro reverses the order and holds the domain.
Easing `cubic-bezier(.2, 0, 0, 1)` throughout — nothing bounces.
End frames carry the lockup, underline, tagline and domain only. Products add "A module of
IndustryOS". **No address, no entity name, no ABN on video.**
Each frame carries a production slate in the lower left — brand dot, "Brand · Intro", scene
counter — for editorial reference only; strip it for delivery.


---

## Quick reference

```
Navy/ink      #17263c    Paper       #eeeeee    Cyan       #2fb8e3   hover #1f97bd
Minefox       #ff3f1a    Safewall    #f4700a    Safecrete  #ffcc00
Danger        #ff3f1a    Warning     #f4700a    Caution    #ffcc00   Healthy #48e587
Ink on white  danger #d8331a  warning #c85a08  healthy #1c9b52  accent #1f97bd
Neutrals      900 #17263c  700 #33465e  500 #5a6b82  300 #a9b5c5
              200 #dfe4ec  100 #eef2f7   50 #f6f8fb  white #ffffff
Navy ramp     raised #153a5c  border #243f5e  text #c4d2e0  muted #8aa0b8

Inter          Display 40/44 700 -.02em · H1 30/36 700 · H2 24/30 600 · H3 19/26 600
               Body-lg 17/27 · Body 15/23 · Small 13/19 · Label 11/14 600 .08em UPPER
JetBrains Mono Data 14-28 500 tabular — numbers, IDs, timestamps, table figures

Spacing  4 8 12 16 24 32 48 64        Radius  4 input · 8 button · 12 card · 999 pill
Shadow   card 0 1px 2px rgba(20,30,50,.06) · raised 0 6px 20px rgba(20,30,50,.10)
Border   1px #dfe4ec                  Row height ≥44px      Content max 1176px
Motion   cubic-bezier(.2,0,0,1) · 120ms hover · 180ms toggle · 240ms panel

IndustryOS · Trusted partner in industrial technology · industryos.com.au
Suite 1401, Level 14, 203 Robina Town Centre Drive, Robina QLD 4226, Australia
Safecrete Technology (Operations) Pty Limited · ABN 32 683 968 014
Holdings ABN 78 683 967 464 · IP ABN 89 686 527 097
NEVER add phone or email.
```