Usage Examples

Web SVG Mark

Use the static mark in navigation, catalog cards, docs badges, or small toolbar spots:

<span class="av-brand-mark" aria-hidden="true">
  <!-- inline assets/brand-mark.svg here -->
</span>

Use the animated mark only when motion communicates state, such as scanning or admission:

<div class="av-panel av-state-scan">
  <!-- inline assets/brand-mark-animated.svg here -->
</div>

CSS State Hooks

<section class="av-surface">
  <div class="av-panel av-state-admit">
    <span class="av-micro-label">Admitted</span>
    <strong>autovault-brand-system</strong>
  </div>
</section>

Terminal Loader

Use a fixed-width area and replace frames in place when the terminal supports it. In simple logs, print only the final state and a text label:

[SCAN]  autovault-brand-system
[ADMIT] autovault-brand-system
[LOCKED] signed bundle ready

Mascot Or Social Prompt

Start from assets/mascot-prompt.md, then append the campaign context, crop, and output size. Keep generated text out of the image and add final copy in the layout tool.

Video Bumper

Use this timing:

0.0s-1.1s  scan sweep through vault interior
1.1s-1.5s  dial closes with lock easing
1.5s-2.4s  glow settles, title or UI appears beside the mark

For reduced-motion cuts, use the final locked frame with a static mint edge highlight.