v1.2
Design System/Texturas
02.05 — Texturas

TEXTURA É O QUE SEPARA MATERIAL DE PIXEL.

Três camadas de textura. Cada uma com papel específico. Noise é permanente — sem exceção. Grain e vignette são contextuais. Saber diferenciar é saber usar.

NOISE ATIVO
PERMANENTE
Noise Overlay
Permanente — em 100% das peças

SVG com fractalNoise aplicado como pseudo-elemento sobre todas as superfícies. Cria a sensação de material físico, imperfeição intencional, profundidade. Sem noise, a peça parece digital demais — limpa, sem textura, sem peso.

Quando usar
Em absolutamente tudo: posts, reels, sites, PDFs, slides. Nunca omitir.
Como aplicar
Via CSS pseudo-elemento ::after com position: fixed e pointer-events: none. Já aplicado no layout root do portal.
FILM GRAIN
FOTOS
Film Grain
Para fotos e bastidores

Grain fotográfico emula filmes de 35mm e fotografia analógica. Diferente do noise (geométrico, sintético), o grain é aplicado sobre imagens para integrá-las à estética da marca. Fotos sem grain parecem estrangeiras na composição.

Quando usar
Sobre fotos, imagens de bastidores, mockups. Não usar em superfícies de cor sólida.
Como aplicar
Filter CSS com SVG turbulence, ou camada de grain no Canva/Photoshop por cima da foto. Opacidade: 15–25%.
VIGNETTE
FOTO + TEXTO
Vignette
Para fotos com overlay de texto

Radial-gradient preto nas bordas da imagem. Escurece as extremidades e mantém o centro visível. Garante contraste para texto branco sobre qualquer foto sem precisar de um retângulo sólido. Sutil — invisível mas presente.

Quando usar
Quando há texto sobre foto. Aplicar abaixo do texto, acima da foto. Intensidade proporcional ao contraste necessário.
Como aplicar
Pseudo-elemento com radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%) no container da imagem.
Regra de Ouro
NOISE É PERMANENTE. GRAIN É PARA FOTO. VIGNETTE É PARA FOTO + TEXTO.

Essa hierarquia não tem exceção. Superfície limpa sem noise não existe na Dark n' Black. Grain em superfície sólida não faz sentido. Vignette sem foto é desperdício.

Código de Implementação
Noise Overlay — layout root (já configurado)
/* Em globals.css ou no root layout */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
}
Film Grain — sobre imagem
/* Wrapper da imagem */
.foto-wrapper {
  position: relative;
  overflow: hidden;
}

.foto-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,
    <svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
      <filter id='g'>
        <feTurbulence type='turbulence'
          baseFrequency='0.75'
          numOctaves='4'
          stitchTiles='stitch'/>
      </filter>
      <rect width='100%' height='100%'
        filter='url(#g)' opacity='0.2'/>
    </svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}
Vignette — foto com texto
/* Container com foto de fundo */
.foto-com-texto {
  position: relative;
}

/* Camada de vignette — entre foto e texto */
.foto-com-texto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Texto fica acima do vignette */
.foto-com-texto .texto {
  position: relative;
  z-index: 2;
}
← AnteriorEspaçamentoPróximo →Grid e Composição