Design system

Purpose and package boundary

@apiops/design-system owns visual tokens, assets, styles, and method-agnostic components. The canvas application and design-system mapping assigns grid, notes, metadata controls, modes, focus treatments, and print presentation to the package, while the consuming application owns state and domain decisions.

Method catalogs, station IDs, route data, localized method content, and persistence do not belong in this package. Applications supply those concerns to reusable visual primitives.

Design tokens

This inventory is rendered directly from @apiops/design-system/tokens.json; values are not copied into this page. Token names are shown in their CSS custom property form for direct use with var(--token-name); the smaller label preserves the matching DTCG source path. The contract can cover color, typography, spacing, radius, shadow, focus, control, canvas, metro groups as they are published. This release declares color, canvas, font tokens.

Brand and supporting assets

The package asset metadata manifest is the source of this inventory. Download a standalone SVG, copy the supported package import, or use the public path example.

cycles logo dark

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-cycles-logo-dark.svg/design-system/brand/apiops-cycles-logo-dark.svgDownload SVG

cycles logo white

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-cycles-logo-white.svg/design-system/brand/apiops-cycles-logo-white.svgDownload SVG

cycles logo

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-cycles-logo.svg/design-system/brand/apiops-cycles-logo.svgDownload SVG

favicon

favicon — Reference from document metadata; its neighboring page title supplies the accessible name.

@apiops/design-system/assets/favicons/favicon.svg/design-system/favicons/favicon.svgDownload SVG

check mark

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-check-mark.svg/design-system/glyphs/apiops-check-mark.svgDownload SVG

flow en text

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-flow-en-text.svg/design-system/glyphs/apiops-flow-en-text.svgDownload SVG

flow

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-flow.svg/design-system/glyphs/apiops-flow.svgDownload SVG

iconset

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-iconset.svg/design-system/glyphs/apiops-iconset.svgDownload SVG

logo

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-logo.svg/design-system/brand/apiops-logo.svgDownload SVG

mark white

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-mark-white.svg/design-system/brand/apiops-mark-white.svgDownload SVG

mark

brand — Use the appropriate contrast variant and meaningful alt text when the logo conveys identity.

@apiops/design-system/assets/brand/apiops-mark.svg/design-system/brand/apiops-mark.svgDownload SVG

metro icons

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-metro-icons.svg/design-system/glyphs/apiops-metro-icons.svgDownload SVG

station circle blue

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-station-circle-blue.svg/design-system/glyphs/apiops-station-circle-blue.svgDownload SVG

station circle

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-station-circle.svg/design-system/glyphs/apiops-station-circle.svgDownload SVG

stick figures poses

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-stick-figures-poses.svg/design-system/glyphs/apiops-stick-figures-poses.svgDownload SVG

stick figures stories

glyph — Treat decorative glyphs as hidden; label an action when a glyph is its only visible content.

@apiops/design-system/assets/glyphs/apiops-stick-figures-stories.svg/design-system/glyphs/apiops-stick-figures-stories.svgDownload SVG

Individual SVG symbols

SVG sheets contain individually addressable symbols. Download a symbol as its own SVG, or reference it through an accessible inline SVG: give the SVG a name when it conveys meaning, or add aria-hidden="true" when decorative.

General React components and controls

These hydrated, method-neutral fixtures demonstrate CompactSection, interactive PillList buttons, ResourceSelector cards, PartnerCard with a logo, AnnouncementToast, StakeholderRoleSelector, buttons, and a drop-down menu.

Review checklist

▾

Confirm the outcome, audience, and next decision.

PillList buttons

ClarityEvidenceAlignment

Selected: clarity

ResourceSelector

TemplateDecision briefCapture a method-neutral decision.GuideReview guidePrepare a collaborative review.

PartnerCard

APIOps Cycles

A card with an informative partner logo and accessible alternative text.

StakeholderRoleSelector

Workshop roleChoose a roleFacilitatorReviewerLeadCoreConsulted

AnnouncementToast

Button and menu states

Native controls inherit the package typography and focus treatment; component-specific buttons add selected, pressed, and disabled semantics.

Primary actionPressed actionDisabled actionExample menu ExploreReview

React export inventory

The public React entry point also exposes the lower-level canvas and metro composition primitives:

• CompactSection
• PillList
• ResourceSelector
• JourneyCriteria
• PartnerCard
• AnnouncementToast
• StakeholderRoleSelector
• MetroMapShell
• MetroLinePath
• MetroSelectionRing
• MetroStationButton
• MetroStationMarker
• MetroLegend
• CanvasSystemShell
• CanvasSystemGrid
• CanvasSystemZone
• CanvasSystemNoteView
• CanvasSystemMetadataEditor
• CanvasSystemMetadataReadOnly
• CanvasSystemFixture

Metro components

This example composes MetroMapShell, MetroLinePath, MetroStationButton, MetroStationMarker, MetroSelectionRing, and MetroLegend without importing the generated method catalog. It includes keyboard operation and selected-state behavior; route and station data remain application-owned.

Canvas components and states

The hydrated CanvasSystemFixture documents interactive, presentation, and print modes together with active-section and focus-only behavior. Its metadata editor and read-only metadata, populated and empty note areas, anchor highlight, and journey treatment exercise the complete visual contract.

• Interactive: focus, activate sections, edit metadata, and operate notes.
• Presentation: readable content without editing controls.
• Print: ink-safe structure and writable space.
• State coverage: active section, focus-only layout, metadata, note, anchor, and journey states.

Installation and usage

Import the application stylesheet once in the application layout, then import components and data only where needed.

import { CanvasSystemFixture } from "@apiops/design-system";
import { MetroMapShell } from "@apiops/design-system/react";
import "@apiops/design-system/styles.css"; // once, in the application layout
import tokens from "@apiops/design-system/tokens.json";
import { designSystemAssets } from "@apiops/design-system/assets";
import assetManifest from "@apiops/design-system/metadata/assets.json";

The supported public boundaries are @apiops/design-system, /react, /styles.css, /tokens.json, /assets, and /metadata/*.