Typography

OPERATOR Sans carries interface text; OPERATOR Mono carries code and aligned data. See Typefaces for specimens, downloads, installation, and qualification status.

Scale

Scale tokens

Each step is a size, a line height, a tracking, and a weight. text-oprt-<step> sets all four and tracking-oprt-<step> sets the tracking alone, both through the tokens below, so a token override reaches every composed component. Steps are xs, sm, base, md, lg, xl, and 2xl.

Line heights stay on the 8px grid:

Tracking falls as size and weight rise. The two caps tokens are for uppercase controls and bind to a component's size variant, never to its base class:

Each step has a default weight: 500 for sm, lg, xl, and 2xl, and 400 for xs, base, and md. Add font-medium where a label at base needs 500:

The legacy --oprt-case-xs, --oprt-case-sm, --oprt-case-base, --oprt-case-md, --oprt-case-lg, --oprt-case-xl, and --oprt-case-2xl tokens remain for compatibility. No utility reads them: text size never chooses letter case.

Type stack

Both variable families include weights 300–700 and separate italics. Keep interface text upright and disable programming ligatures in code and data.

Package defaults

Import @operator-ds/tokens at the application root and register @operator-ds/tailwind. The stylesheet loads four variable WOFF2 files locally. --oprt-font-sans (Operator Sans Family) and --oprt-font-mono (Operator Mono Family) also supply Tailwind's font-sans and font-mono utilities.

For selective token imports, add @operator-ds/tokens/fonts once. Without the token package, use the standalone stylesheet.

These Geist-derived fonts remain development candidates. Review their validation status; retain the included SIL Open Font License and source notices when redistributing.

Rules

Detail hierarchy

Use EntityPreview for record details in a popover, inspector, or page. The entity name leads at 16px semibold. Descriptive labels use 9px medium, uppercase, and the dim text token; values use 11px and retain their supplied case. IDs, coordinates, exact measurements, and timestamps use Mono. Actions retain the 11px minimum.

For a smaller group of facts, use DescriptionList with layout="details". Labels occupy the left column and values align to the right edge. Long values wrap within their column. Keep equipment condition separate from report quality, and use text-only status badges inside these rows. Put contextual explanation below the related rows and actions after the details.

General rules

• Actionable labels: at least 11px (text-oprt-base) and weight 500. text-oprt-base is weight 400, so add font-medium. This applies to buttons, inputs, links, menus, tabs, and other controls. The xs and sm tokens are for non-actionable labels only. The design references MIL-STD-1472H §5.1.3.3 character height under degraded viewing; font qualification remains open. Selected text in plain text controls uses weight 600 + underline.
• Uppercase interface labels: section headings, actions, tabs, short navigation and menu labels, and status badges. Docs titles, navigation, and prose keep authored case.
• Preserve content case: body/help/error text, field labels and values, names, IDs, and code. This includes names or message subjects used as headings. Apply casing with CSS, never by rewriting data. Wrap case-sensitive names in normal-case tracking-normal; code and kbd preserve case automatically.
• Choose casing explicitly. text-oprt-* sets size, line height, weight, and tracking, not uppercase. Use uppercase for interface labels and normal-case for content.
• Tracking: tracking-oprt-caps for 11px uppercase controls, tracking-oprt-caps-lg for 13px controls, tracking-oprt-sm for non-actionable micro-labels, and the size scale's tracking for larger headings.
• Use Sans by default. Reserve Mono for character-position alignment: tabular numerals, code, prompt symbols, coordinates, IDs, timestamps, JSON, and stat-card values.