Integration / 02

Getting started

Add the compiled CSS, choose a theme, reference the SVG sprite, and include the dependency-free helper only when interactive behavior is needed.

CSS: 1 file
JS: optional
Fonts: 4 roles

01 / LINK

Use the compiled build

The standard build imports Space Grotesk, Rajdhani, and IBM Plex Mono from Google Fonts. No font binaries are bundled.

HTML

<link rel="stylesheet" href="dist/cargo19.css">
<script src="dist/cargo19.js" defer></script>

<body class="c19-root" data-c19-theme="bridge">
  <button class="c19-button">Begin cycle</button>
</body>

No build step required

Copy the package to a web root and use relative paths. A source build script is included for token or component changes.

02 / FONT DELIVERY

Use the core build for private font hosting

The core build removes the remote font import. Supply your own licensed files or system fallbacks; do not redistribute font binaries from this package.

HTML + CSS

<link rel="stylesheet" href="dist/cargo19-core.css">

<style>
  :root {
    --c19-font-sans: system-ui, sans-serif;
    --c19-font-display: "Arial Black", sans-serif;
    --c19-font-label: "Arial Narrow", sans-serif;
    --c19-font-mono: ui-monospace, monospace;
  }
</style>

03 / THEME

Set one explicit surface contract

Bridge is the dark control-room theme, paper is the technical-manual theme, and auto follows the user’s color preference.

HTML

<html data-c19-theme="paper">
<html data-c19-theme="bridge">
<html data-c19-theme="auto">

<!-- A theme may also be scoped to a subtree. -->
<section class="c19-theme-bridge">…</section>

Bridge

Dark surfaces, white sign outlines, luminous interface colors.

Paper

Warm technical stock, dense black type, restrained shadows.

04 / ICONS

Choose the sprite delivery mode for the page

External references are compact for HTTP applications. Same-document references remain reliable when the package is opened directly from disk, including Safari.

HTML

<!-- Application served over HTTP -->
<svg class="c19-icon" role="img" aria-label="Airlock">
  <use href="icons/cargo19-icons.svg#c19-airlock"></use>
</svg>

<!-- Direct file browsing, including Safari -->
<!-- Embed cargo19-icons.svg once near the start of <body>, then: -->
<svg class="c19-icon" role="img" aria-label="Airlock">
  <use href="#c19-airlock"></use>
</svg>

The System Manual is self-contained

Generated manual and example pages embed the symbol definitions and reference local fragment IDs, so their icons do not depend on cross-file SVG loading.

05 / REBUILD

Generate deterministic assets

The source tree includes dependency-free Ruby builders for icons, documentation, and distribution CSS.

Shell

ruby tools/build_icons.rb
ruby tools/build.rb
ruby tools/build_docs.rb

Recommended order

Generate icons first, then compile CSS/JavaScript, then build documentation so catalog counts and examples stay synchronized.