Surface Adaptation

This reference explains how to keep AutoVault recognizable across media with different rendering constraints.

Web SVG

• Use assets/brand-mark.svg for small static UI marks.
• Use assets/brand-mark-animated.svg for hero, loading, or showcase moments.
• Keep SVG self-contained: inline styles, no external fonts, no remote images.
• Preserve the rounded vault body, bottom stubs, and dial.
• Include a <title> and <desc> when embedding the SVG directly.
• Use prefers-reduced-motion inside the SVG when animation is shipped.

Web CSS

• Start from assets/autovault-brand.css.
• Apply token classes rather than hardcoding mint across every element.
• Use .av-state-scan, .av-state-admit, .av-state-open, and .av-state-held as semantic state hooks.
• Keep icon buttons and fixed-format controls dimensionally stable.

Terminal And ASCII

• Use only ASCII for broad terminal support unless the project already uses Unicode box drawing.
• Prefer the vault silhouette over facial detail.
• Show state through frame progression, labels, and single-character changes.
• Pair colorized output with text labels such as SCAN, ADMIT, LOCKED, or HELD so monochrome terminals still work.

TUI

• The mark should fit in a fixed-width area so status changes do not resize the layout.
• Use JetBrains Mono or the terminal default mono.
• Keep animations to low-frequency frame changes; do not flood terminal output.
• Use mint for active/admitted rows, warning for pending review, and red for blocked states.

Mascot, Raster, And Friendly Marketing

• The mascot may add a face, small arms, side handle, and soft dimensional shading, but the body must still read as the AutoVault mark.
• Keep charcoal and mint as the main brand relationship.
• Do not rely on generated text inside the image. Add type in layout tools.
• Use assets/mascot-prompt.md as art direction. The checkout mascot draft is only reference material and should not become the canonical logo.

Social And Docs Images

• Make the vault mark a first-viewport signal.
• Use real UI, product state, or generated bitmap texture as the visual anchor rather than abstract gradients.
• Keep title text outside the mark.
• Export at the target size and inspect small-text legibility.

Video

• Use the scan, admit, settle rhythm from references/motion.md.
• Let glow and scan lines carry movement; keep camera moves restrained.
• When showing a mascot, treat it as host or guide, not a replacement logo.
• Avoid frame-by-frame dependency on tiny text or fine SVG strokes.

Hosted Checkout

Hosted checkout remains raster constrained. Use raster PNG output for that surface and keep SVG brand assets as source inspiration only. Do not assume the checkout host will animate or load the SVG mark.