# Brand Resources from the Logo

**SHOULD** · **ID:** `content-brand-resources` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-brand-resources

> SHOULD: Right-clicking the nav logo surfaces brand assets

Surface brand assets from a right-click on the nav logo

People who need your logo — press, partners, conference organizers, someone building an integration — reach for it at the moment they see it, in the nav. If a right-click offers nothing, they screenshot the mark and ship a blurry, recolored, wrongly-cropped version of your brand. Intercepting the context menu on the logo to offer "copy as SVG", "download assets", and a link to the guidelines puts the correct file in their hands exactly when they want it, instead of behind a Footer → About → Press Kit hunt.

## Bad — do not do this

`content-brand-resources-bad`

```tsx
import { Triangle } from 'lucide-react';

export function BrandResourcesBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <nav className="flex items-center gap-3 bg-card border border-border rounded-lg px-4 py-3">
        {/* Right-clicking gets the plain browser menu — the logo offers nothing. */}
        <Triangle className="w-5 h-5 fill-current text-foreground" />
        <span className="text-sm font-semibold text-foreground">Acme</span>
        <span className="ml-auto text-xs text-muted-foreground">Docs</span>
      </nav>

      <div className="bg-muted border border-border rounded-lg p-3">
        <p className="text-xs font-medium text-foreground mb-1">
          Where a journalist has to go for the logo
        </p>
        <p className="text-xs text-muted-foreground font-mono leading-relaxed">
          Footer → About → Newsroom → Press Kit → &quot;assets-final-v3.zip&quot;
        </p>
      </div>

      <p className="text-xs text-error">
        Right-clicking the logo does nothing, so anyone who needs the mark
        screenshots it — and ships a blurry, wrong-colored logo.
      </p>
    </div>
  );
}
```

## Good — do this

`content-brand-resources-good`

```tsx
import { useEffect, useRef, useState } from 'react';
import { Triangle, Copy, Download, BookOpen } from 'lucide-react';

export function BrandResourcesGood() {
  const [open, setOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
    const onClick = (e: MouseEvent) => {
      if (!menuRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('keydown', onKey);
    document.addEventListener('click', onClick);
    return () => {
      document.removeEventListener('keydown', onKey);
      document.removeEventListener('click', onClick);
    };
  }, [open]);

  return (
    <div className="w-full max-w-sm space-y-4">
      <nav className="relative flex items-center gap-3 bg-card border border-border rounded-lg px-4 py-3">
        <button
          onContextMenu={(e) => {
            e.preventDefault();
            setOpen(true);
          }}
          className="flex items-center gap-3 rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Triangle className="w-5 h-5 fill-current text-foreground" />
          <span className="text-sm font-semibold text-foreground">Acme</span>
        </button>
        <span className="ml-auto text-xs text-muted-foreground">Docs</span>

        {open && (
          <div
            ref={menuRef}
            role="menu"
            className="absolute left-4 top-full mt-1 z-10 w-52 bg-card border border-border rounded-lg shadow-md p-1"
          >
            {[
              { icon: Copy, label: 'Copy logo as SVG' },
              { icon: Download, label: 'Download brand assets' },
              { icon: BookOpen, label: 'Brand guidelines' },
            ].map(({ icon: Icon, label }) => (
              <button
                key={label}
                role="menuitem"
                onClick={() => setOpen(false)}
                className="flex w-full items-center gap-2 px-2 py-1.5 text-xs text-foreground rounded-md hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
              >
                <Icon className="w-3.5 h-3.5" aria-hidden="true" />
                {label}
              </button>
            ))}
          </div>
        )}
      </nav>

      <p className="text-xs text-success">
        Right-click the logo — the mark hands out its own assets, at the exact
        moment someone is trying to take it.
      </p>
    </div>
  );
}
```

## References

- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- [MDN: contextmenu event](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event)