Request Request Design System

Brand

Logos, fontes e regras de uso. Tudo o que precisas para aplicar a marca Request com consistência, em qualquer suporte.

Horizontal
Horizontal
SVG

Logo principal. Usar em headers, cartões, apresentações.

Horizontal — branco
Horizontal — branco
SVG

Para fundos escuros (headers com brand-dark, imagens de capa).

Horizontal — mono
Horizontal — mono
SVG

Preto e branco. Para impressão, fax, stamps.

Quadrado
Quadrado
SVG

Avatar, social, favicons grandes.

Quadrado — branco
Quadrado — branco
SVG

Avatar sobre fundos escuros.

Quadrado — mono
Quadrado — mono
SVG

Preto e branco.

Ícone
Ícone
SVG

Só a marca gráfica. Favicons pequenos, app icons.

Tipografia

Display
Hanken Grotesk

Para títulos, headlines, cabeçalhos. Variable font (100-900).

Regular 400 Medium 500 Semibold 600 Bold 700
Body
Inter

Para corpo de texto, UI, labels. Legibilidade em tamanhos pequenos.

Regular 400 Medium 500 Semibold 600 Bold 700

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

Rose 500
#ff3457

Primária. Acções, links, destaques.

Brand Dark
#1d1d1b

Headers, footers. Preto da marca.

Slate 50
#f8fafc

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

Como usar no código

pnpm add @request-labs/brand

// CSS (fontes self-hosted)
@import "@request-labs/brand/fonts.css";

// JS (paths para logos e favicons)
import { logos, favicon } from '@request-labs/brand';
logos.horizontal;  // path para logo-horizontal.svg
logos.squareWhite; // path para logo-square-white.svg