Avian Network — Brand Guidelines Site

A zero-dependency static site (plain HTML/CSS/JS) documenting the Avian Network brand: logo variants, clear-space rules, color palette, typography, usage do's/don'ts, and downloadable assets.

Run it

No build step. Open index.html directly in a browser, or serve the folder:

npx serve .

Note: the click-to-copy hex feature requires a secure context, so it works when served over http://localhost or HTTPS but may be inert when opened via file://.

Brand assets

Colors and logos are the official Avian Network assets:

• Colors: Mainnet teal/mint, Testnet purple, and the 8 approved gradient pairings from the 2021 Brand Gradients sheet.

• Logos in assets/: the eagle logomark (logomark-{gradient,white,black}.svg, sourced from AVN.svg and the Logomark Exports), the blue testnet logomark (logomark-testnet.{svg,png}) for testnet tools/environments, and the AVIAN NETWORK wordmark (wordmark-{gradient,slate,white,black}.svg, from the Logo Type Exports). logomark-gradient.svg doubles as the favicon.

• Typefaces: Inter (headings/body) and Roboto Mono (addresses/code), both open-licensed (SIL OFL) and self-hosted as variable WOFF2 files in assets/fonts/ via @font-face rules at the top of css/styles.css. Konnect is legacy — it remains on the main Avian Network website only; its license was purchased by a former marketing team and is not available for new properties, so do not embed it in new sites.

Color definitions live as CSS custom properties at the top of css/styles.css (--avn-* for brand colors, with UI roles mapped below them). The swatches on the page are generated from these variables at load time by js/main.js; gradient pairings live in the GRADIENTS array there.

Regenerating derived assets

Two kinds of files in assets/ are generated, not sourced:

• PNG exports (*-256.png, *-512.png, wordmark-gradient-1200.png) — rendered from the SVGs via headless Edge with a transparent background.

• avian-brand-assets.zip — the one-click bundle behind the hero and Downloads buttons. Rebuild it whenever a logo file changes:

  $files = Get-ChildItem assets -File |
    Where-Object { $_.Extension -in ".svg",".png" -and $_.Name -notin "og-image.png","avian-brand-assets.zip" }
  Compress-Archive -Path $files.FullName -DestinationPath assets\avian-brand-assets.zip -Force

After deploying, replace the relative og:image URL in index.html with the absolute production URL so social embeds work.

Deploying

The site is fully static — host the folder as-is on GitHub Pages, Netlify, Cloudflare Pages, or IPFS.