Brand
Logos, fontes e regras de uso. Tudo o que precisas para aplicar a marca Request com consistência, em qualquer suporte.
Logos
Descarregar pack (ZIP)Logo principal. Usar em headers, cartões, apresentações.
Para fundos escuros (headers com brand-dark, imagens de capa).
Preto e branco. Para impressão, fax, stamps.
Avatar, social, favicons grandes.
Avatar sobre fundos escuros.
Preto e branco.
Só a marca gráfica. Favicons pequenos, app icons.
Tipografia
Para títulos, headlines, cabeçalhos. Variable font (100-900).
Para corpo de texto, UI, labels. Legibilidade em tamanhos pequenos.
As fontes são auto-hospedadas em @request-labs/brand (Hanken Grotesk variable woff2) e carregadas via @import "@request-labs/brand/fonts.css". Inter vem do Google Fonts pela ubiquidade e caching cross-site.
Cores da marca
Primária. Acções, links, destaques.
Headers, footers. Preto da marca.
Fundo de página. Neutro base.
Usar assim
- Manter a área de respiro em volta do logo (pelo menos a altura da letra "R")
- Usar as variações correctas: branco em fundo escuro, cor em fundo claro
- Preservar as proporções — bloquear escala uniforme em qualquer ferramenta
- Usar os SVGs (vector) sempre que possível
Não fazer
- Não esticar, inclinar ou distorcer
- Não alterar as cores — rose e preto estão definidos
- Não aplicar sombras, outlines, glow ou outros efeitos
- Não colocar o logo sobre imagens com ruído visual sem área sólida por trás
- Não usar o logo colorido sobre fundos coloridos que entrem em conflito
Favicons
Conjunto pronto para Web + iOS + Android + PWA. Já vem com @request-labs/brand em /favicon, ou descarrega do pack ZIP acima.
Fallback legacy. Browsers antigos.
Tab do browser (desktop).
Atalhos, shortcuts Windows.
Android home screen.
iOS home screen.
PWA manifest (name, theme_color, icons).
Snippet para o <head>
Copia os ficheiros para public/ da tua app e cola:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1d1d1b" /> 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 Placeholders
Padrões decorativos para empty states, cards sem imagem, hero backgrounds. SVG para web (escala sem perder qualidade) e PNG @1x/@2x/@3x para raster (social cards, emails). Os PNG @3x também têm resolução suficiente para impressão de stickers e merch.
Padrão decorativo em rose. Hero backgrounds, cards em destaque, empty states com personalidade.
Padrão neutro. Empty states, cards sem imagem, skeletons com textura.
Consumir via @request-labs/brand
import { placeholders } from '@request-labs/brand';
placeholders.red.svg; // path para placeholder-red.svg
placeholders.red.png2x; // placeholder-red@2x.png (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/placeholder-gray@2x.png 2x,
/placeholders/placeholder-gray@3x.png 3x"
alt=""
/> Assinatura de email
Assinatura oficial em imagem PNG (800×130, retina-ready). Duas versões: dark para clientes de mail em tema claro e light para tema escuro. Cola como imagem e adiciona um link mailto: ou o URL do site.
Para fundos claros (Gmail / Outlook default).
Para fundos escuros (dark mode mail).
Como aplicar
- Gmail
- Settings → General → Signature → Create new → cola a imagem (drag & drop) → selecciona a imagem → botão de link →
https://request.pt - Outlook (web)
- Settings → Mail → Compose and reply → Email signature → ícone de imagem → upload PNG → "Automatically include" ON
- Apple Mail
- Settings → Signatures → + → arrasta PNG para o campo → liga account → "Always match my default message font" OFF
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.
Como usar no código
pnpm add @request-labs/brand
// CSS (fontes self-hosted)
@import "@request-labs/brand/fonts.css";
// JS (paths para todos os assets)
import { logos, favicon, placeholders, emailSignature } from '@request-labs/brand';
logos.horizontal; // logo-horizontal.svg
logos.squareWhite; // logo-square-white.svg
favicon.ico; // favicon.ico
placeholders.red.svg; // placeholder-red.svg
placeholders.gray.png2x; // placeholder-gray@2x.png
emailSignature.dark; // signature-dark.png
emailSignature.light; // signature-light.png