@merittdev/avion

Avion's shared libraries — a single npm package with namespaced subpaths. Today it ships brand; utils and others can be added later under the same package.

The brand is a type-led identity: the avion wordmark in Space Grotesk with the v set in vermilion as the wing. Labels and the .sh tag use JetBrains Mono.

@merittdev/avion
└── brand/                          → import '@merittdev/avion/brand'
    ├── (colors, fonts — runtime exports)
    ├── svg/   avion-{light|dark|black|white}.svg + avion-sh-*.svg
    ├── png/   same set, ~360px cap height, transparent where noted
    ├── favicon/  favicon.svg + favicon-{16|32|180|512}.png
    └── lottie/
        ├── avion-loader.json   # ✅ looping pulse — loading & progress
        ├── avion-mark.json     # ✅ one-shot — the brand square assembles
        └── avion-splash.json   # ✅ one-shot — wordmark reveal on ink

On disk these live under assets/brand/… and src/brand/…; the package exports map projects them onto the @merittdev/avion/brand/* subpath.

Logo assets

Every logo ships as SVG (scalable, for web & design tools) and PNG (self-contained raster) in four variants:

| Variant | Meaning | |---|---| | light | On the paper background (#F3F0E8) | | dark | On the ink background (#15140F) | | black | Ink glyphs on transparent → place on light/photo surfaces | | white | Paper glyphs on transparent → place on dark/photo surfaces |

avion-* is the wordmark only; avion-sh-* adds the .sh domain tag.

SVG vs PNG: the SVGs reference the Space Grotesk / JetBrains Mono webfonts by family name, so they render with the brand type only where those fonts are loaded (browsers, design tools). For <img> tags and email, prefer the PNGs.

The three approved animations

| Variant | Meaning | Where it belongs | |---|---|---| | loader | Looping pulse | Data/sync/processing waits, progress, empty states. Seamless loop. | | mark | The brand square assembles | App open, icon reveal. Plays once, freezes. | | splash | Wordmark reveal on ink | First app load, mobile startup, marketing intros. Plays once, freezes. |

Where NOT to animate: sidebar/header lockups, pricing, docs, legal, repeated SEO pages — use a static SVG/PNG logo.

Color

| Token | Hex | Use | |---|---|---| | paper | #F3F0E8 | Primary background | | ink | #15140F | Primary text / dark surface | | vermilion | #FF4A1C | Accent — the wing of the v. One use per view. | | muted | #726D62 | Secondary text, the .sh tag |

Type

• Space Grotesk — Bold 700 for the wordmark & display.
• JetBrains Mono — Medium 500 for labels, tags, code.

Usage rules

• Keep clearspace around the logo equal to the height of the a.
• Minimum wordmark width ≈ 80px; the favicon works down to 16px.
• Keep the v vermilion — never recolor it. No stretching, shadows, or gradients.

Consuming it

npm install @merittdev/avion

// colors + fonts (compiled runtime exports)
import { colors, fonts } from '@merittdev/avion/brand'
// colors.vermilion === '#FF4A1C'
// fonts.display.family === 'Space Grotesk'

// asset import specifiers (resolve to the package subpaths)
import { assets } from '@merittdev/avion/brand'
// assets.wordmark.svg.dark, assets.favicon.png512, assets.lottie.loader, …

// Lottie JSON (imported straight from the package)
import loader from '@merittdev/avion/brand/lottie/avion-loader.json'
import splash from '@merittdev/avion/brand/lottie/avion-splash.json'

The raw logos are the assets apps serve from a static URL path rather than importing, so npm run sync copies them into each app (Next public/, Expo assets/). Everything else comes through npm.

Preview

npm run preview   # serves index.html — the full brand sheet incl. motion

Maintaining

npm run build     # compile dist/
npm run release   # build + sync the logos into consuming repos

The Lottie files are authored brand assets — edit them in your motion tool of choice and drop the exported JSON into assets/brand/lottie/. Pushing to master runs CI and publishes to npm.

Adding a new namespace (e.g. utils)

Add src/utils/ + assets/utils/, then two exports entries: "./utils" → dist/utils/index.js and "./utils/*" → assets/utils/*.