Brand

Via @request-labs/brand

Bash + postinstall para copiar os assets do node_modules para o public/:

# package.json
"scripts": {
  "postinstall": "cp -R node_modules/@request-labs/brand/favicon/. public/"
}

Ou em JS (ex.: Vite/Astro com import.meta):

import { favicon } from '@request-labs/brand';
favicon.ico;         // path absoluto para favicon.ico
favicon.png32;       // favicon-32.png
favicon.appleTouch;  // apple-touch-icon.png
favicon.manifest;    // manifest.json

Consumir via @request-labs/brand

import { placeholders } from '@request-labs/brand';

placeholders.red.svg;    // path para placeholder-red.svg
placeholders.red.png2x;  // [email protected] (retina)
placeholders.gray.svg;
placeholders.gray.png3x; // 3x para écrans de alta densidade

Como background-image em CSS:

.empty-card {
  background-image: url("@request-labs/brand/placeholders/placeholder-gray.svg");
  background-size: cover;
  background-position: center;
}

Em HTML com retina fallback:

<img
  src="/placeholders/placeholder-gray.png"
  srcset="/placeholders/[email protected] 2x,
          /placeholders/[email protected] 3x"
  alt=""
/>

Template HTML (para envio programático / SMTP)

Se precisas de assinatura inline (transactional emails, CRMs), usa tabelas — clientes como Outlook não respeitam flex.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Inter, Arial, sans-serif;">
  <tr>
    <td>
      <a href="https://request.pt" style="text-decoration: none;">
        <img
          src="https://design.request.pt/brand/signature-dark.png"
          alt="Request"
          width="400"
          height="65"
          style="display: block; border: 0;"
        />
      </a>
    </td>
  </tr>
</table>

width="400" renderiza a @2x para retina — a imagem fonte tem 800px.