@jetzeroaero/design-system

The JetZero design system as an installable package — tokens, fonts, logos, and a starter set of React components based on Brandbook 2026 V1.0.

Install

npm install @jetzeroaero/design-system
# peer deps (skip if already installed):
npm install react react-dom

Use

1. Load tokens + fonts (once, at app root)

import '@jetzeroaero/design-system/tokens.css';

This brings in every CSS custom property (--jz-fire, --page-bg, --fs-h1, --dv-cat-1, …) plus the Titillium Web and Martian Mono webfonts. Toggle light mode by setting data-theme="light" on <html> or any ancestor.

2. Use tokens from JS

import { palette, onPalette, categoricalSeries, fonts } from '@jetzeroaero/design-system/tokens';

<button style={{ background: palette.fire, color: onPalette.fire }}>…</button>
<svg>
  <path stroke={categoricalSeries[0]} />
</svg>

⚠️ Contrast rule. Every background token has a paired on* foreground. Whenever you set background: palette.X (or any color token), you MUST set color: onPalette.X (or the matching --on-X CSS variable). Never pick text colors by hand — paired tokens are the only way contrast survives theme flips and refactors.

⚠️ Brand rule. palette.fire (#FF5500) is an accent and must stay ≤5% of any composition. Never use it for headings or chart series — categoricalSeries already excludes it. For a one-series chart, prefer palette.night.

3. Use components

import {
  AppShell, AnnouncementCard, KPIGrid, TelemetryCard, Timeline, DocumentList,
} from '@jetzeroaero/design-system';

export default function InvestorPortal() {
  return (
    <AppShell active="Overview">
      <AnnouncementCard
        eyebrow="Board update · 04/19/26"
        title="Series D closed — $475M led by Breakthrough Energy."
        description="Full investor letter and cap-table update available in the Documents tab."
        ctaLabel="Read letter →"
      />
      <KPIGrid items={[
        { label: 'Cumulative flight hours', value: '2,847', foot: 'AS OF 04/20/26' },
        { label: 'Fuel burn improvement',    value: '−48.2%', foot: 'MODELED · TROUGH TARGET −50%' },
        { label: 'Program runway',           value: '37',     foot: 'MONTHS REMAINING' },
        { label: 'Orders & LOIs',            value: '184',    foot: 'AIRFRAMES' },
      ]} />
      <Timeline milestones={[
        { year: '2023', label: 'Program launch',                done: true },
        { year: '2024', label: 'USAF contract award',           done: true },
        { year: '2025', label: 'Demonstrator design freeze',    done: true },
        { year: '2026', label: 'Assembly start',                done: true, current: true },
        { year: '2027', label: 'First flight · demonstrator' },
        { year: '2030', label: 'Type certification · commercial' },
      ]} />
      <TelemetryCard
        eyebrow="Flight-Test Telemetry · SN-003"
        title="Cruise fuel efficiency, last 60 min"
        points={[32, 38, 44, 41, 48, 52, 56, 54, 61, 65, 68, 64, 70, 74, 78, 76, 82]}
        xLabels={['-60 MIN', '-45', '-30', '-15', 'NOW']}
      />
      <DocumentList documents={[/* … */]} />
    </AppShell>
  );
}

Logo background rules

The wrong wordmark on the wrong background is the most-violated brand rule. Use the helpers to enforce it:

import { logoForBackground, assertValidLogoBackground } from '@jetzeroaero/design-system';

const variant = logoForBackground('night'); // 'fire-white'
assertValidLogoBackground('fire-night', 'night'); // throws in dev

| Wordmark | Allowed backgrounds | | ------------- | ------------------- | | fire-white | Night, Dusk, Rain | | white-night | Dusk, Rain | | fire-night | Fog, Haze, White |

fire-white and white-night must never sit on a background lighter than Rain. white-night and fire-night must never sit on a background darker than Dusk. Nothing sits on a background of its own ink color.

Logos

SVG wordmarks ship in dist/logos/ and are reachable via the ./logos/* export:

import wordmarkUrl from '@jetzeroaero/design-system/logos/JZ-wordmk-fire-night.svg';

Available files:

• JZ-wordmk-fire-night.svg, JZ-wordmk-fire-white.svg, JZ-wordmk-white-night.svg — current marks
• JZ-wordmk-LEGACY-*.svg — legacy marks for migration

Build

npm install
npm run build

Outputs to dist/:

• index.{js,cjs,d.ts} — main entry (components + tokens)
• tokens.{js,cjs,d.ts} — tokens-only (no React)
• tokens.css, fonts.css — stylesheets
• fonts/ — TTFs
• logos/ — SVGs

Publish

npm publish --access public
# or, just a tarball:
npm pack

License

UNLICENSED — internal JetZero use only. Contact [email protected] before redistributing.