# VEYQON brand assets

## What is here

| File | Background | Use |
|---|---|---|
| `veyqon-mark.svg` | White · Light Primary `#F4F7FF` | Navy frame, Electric Blue cap |
| `veyqon-mark-on-navy.svg` | Deep Infrastructure Navy `#071B4A` | White frame, Electric Blue cap |
| `veyqon-mark-on-blue.svg` | Electric Operational Blue `#0E6BFF` | Single-colour white |

These are standalone files for contexts that cannot use React — email
signatures, PDFs, third-party profiles. **In the app, use the component**
at `src/components/ui/Logo.tsx`, which renders the same geometry inline
and takes a `tone` of `light` / `navy` / `blue`.

## Where each lockup appears

| Context | Component | Tone |
|---|---|---|
| Header | `<Logo />` horizontal, no tagline | `navy` |
| Footer brand column | `<Logo />` horizontal, no tagline | `navy` |
| Footer nameplate | Full-width wordmark + tagline | `navy` |
| Favicon | `src/app/icon.svg` — icon-only on navy | — |
| iOS home screen | `src/app/apple-icon.png` — 180×180 | — |
| Social share | `src/app/opengraph-image.png` — 1200×630 | — |

The tagline is set `whitespace-nowrap` in the component so the lockup can
never break across lines. It is omitted below roughly 200px of width,
which is what the minimum-size rule in §C exists to prevent.

## Replacing with official artwork

The mark geometry here was traced from the artwork in Brand Guidelines
v2.1 and is faithful, but it is a reconstruction. The wordmark is set in
Inter Bold at `0.19em` tracking with an Electric Blue Q — close to the
official lettering, not identical to it.

To swap in the official files:

1. Drop the official SVGs into this directory, keeping the filenames above.
2. In `src/components/ui/Logo.tsx`, replace the `CAP` and `FRAME` path
   constants with the paths from the official mark, keeping the `0 0 64 64`
   viewBox (or update the `viewBox` and the `translate` to match).
3. If the official wordmark is supplied as artwork rather than a font,
   replace the `<span>` lettering in `Logo` and `LogoStacked` with an
   inline SVG so it stays sharp and themeable.
4. Regenerate the favicon, app icon, and share image:
   `node scripts/gen-images.mjs <dir-with-og.html-and-apple.html>`

## Rules that are enforced in code

- The cap is always Electric Blue, except on an Electric Blue background
  where the whole lockup is white.
- Only White, Navy, and Electric Blue backgrounds are used.
- No drop shadows, glows, outlines, or filters are applied to the mark.
- The mark is never stretched: it is always rendered from a fixed viewBox.