Sistema de design inspirado no Pinterest

Category: Mídia e consumidor Descoberta visual. Acento vermelho, grade de alvenaria, imagem em primeiro lugar.

1. Tema visual e atmosfera

O site do Pinterest é uma tela quente e inspiradora que trata a descoberta visual como uma revista de estilo de vida. O design opera em um fundo branco suave e ligeiramente quente com o Vermelho Pinterest (#e60023) como o único acento de marca audacioso. Ao contrário dos azuis frios da maioria das plataformas de tecnologia, a escala de neutros do Pinterest tem um subtom claramente quente — os cinzas tendem para oliva/areia (#91918c, #62625b, #e5e5e0) em vez de aço frio, criando uma atmosfera aconchegante e artesanal que convida à navegação.

A tipografia usa Pin Sans — uma fonte proprietária personalizada com uma ampla pilha de fallback incluindo fontes japonesas, refletindo o alcance global do Pinterest. Na escala de display (70px, peso 600), Pin Sans cria títulos grandes e convidativos. Em tamanhos menores, o sistema é compacto: botões em 12px, legendas em 12–14px. O sistema de nomenclatura de variáveis CSS (--comp-*, --sema-*, --base-*) revela uma sofisticada arquitetura de tokens de design em três camadas: nível de componente, semântico e base.

O que distingue o Pinterest é seu generoso sistema de raio de borda (12px–40px, mais 50% para círculos) e fundos de botões com tonalidade quente. O botão secundário (#e5e5e0) tem um tom de areia claramente quente em vez de cinza frio. O botão vermelho primário usa raio de 16px — arredondado, mas não em forma de pílula. Combinado com fundos de emblemas quentes (hsla(60,20%,98%,.5) — um sutil lavado amarelo-quente) e layouts dominados por fotografia, o resultado é um design que parece artesanal e pessoal, não corporativo e estéril.

Características principais:

• Tela branca quente com neutros em tonalidade oliva/areia — aconchegante, não clínico
• Vermelho Pinterest (#e60023) como único acento audacioso — nunca sutil, sempre confiante
• Fonte personalizada Pin Sans com pilha de fallback global (incluindo CJK)
• Arquitetura de tokens em três camadas: --comp-* / --sema-* / --base-*
• Superfícies secundárias quentes: cinza areia (#e5e5e0), emblema quente (hsla(60,20%,98%,.5))
• Raio de borda generoso: 16px padrão, até 40px para contêineres grandes
• Conteúdo com fotografia em primeiro lugar — pins/imagens são o elemento visual principal
• Texto quase violeta escuro (#211922) — quente, com um toque de ameixa

2. Paleta de cores e funções

Marca principal

• Vermelho Pinterest (#e60023): CTA principal, acento de marca — vermelho audacioso e confiante
• Verde 700 (#103c25): --base-color-green-700, acento de sucesso/natureza
• Verde 700 Hover (#0b2819): --base-color-hover-green-700, verde pressionado

Texto

• Preto ameixa (#211922): Texto principal — quase preto quente com subtom ameixa
• Preto (#000000): Texto secundário, texto de botão
• Cinza oliva (#62625b): Descrições secundárias, texto discreto
• Prata quente (#91918c): --comp-button-color-text-transparent-disabled, texto desabilitado, bordas de entrada
• Branco (#ffffff): Texto em superfícies escuras/coloridas

Interativo

• Azul foco (#435ee5): --comp-button-color-border-focus-outer-transparent, anéis de foco
• Roxo desempenho (#6845ab): --sema-color-hover-icon-performance-plus, recursos de desempenho
• Roxo recomendação (#7e238b): --sema-color-hover-text-recommendation, recomendação de IA
• Azul link (#2b48d4): Cor do texto do link
• Azul Facebook (#0866ff): --facebook-background-color, login social
• Azul pressionado (#617bff): --base-color-pressed-blue-200, estado pressionado

Superfície e borda

• Cinza areia (#e5e5e0): Fundo do botão secundário — quente, artesanal
• Claro quente (#e0e0d9): Fundos de botões circulares, emblemas
• Lavado quente (hsla(60, 20%, 98%, 0.5)): --comp-badge-color-background-wash-light, fundo de emblema quente sutil
• Névoa (#f6f6f3): Superfície clara (a 50% de opacidade)
• Borda desabilitada (#c8c8c1): --sema-color-border-disabled, bordas desabilitadas
• Cinza hover (#bcbcb3): --base-color-hover-grayscale-150, borda ao passar o cursor
• Superfície escura (#33332e): Fundos de seções escuras

Semântico

• Vermelho erro (#9e0a0a): Estados de erro de caixa de seleção/formulário

3. Regras tipográficas

Família de fontes

• Principal: Pin Sans, fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

Hierarquia

Princípios

• Escala de tipo compacta: O intervalo é 12px–70px com um salto dramático — a maioria dos textos funcionais está em 12–16px, criando uma hierarquia de informação densa, semelhante a um aplicativo.
• Distribuição de peso quente: 600–700 para títulos, 400–500 para corpo. Sem pesos ultraleves — o tipo sempre parece substancial.
• Tracking negativo nos títulos: -1,2px nos títulos de 28px cria títulos de seção aconchegantes e íntimos.
• Família de fonte única: Pin Sans cuida de tudo — nenhuma fonte de display secundária ou monoespaçada detectada.

4. Estilos de componentes

Botões

Vermelho primário

• Fundo: #e60023 (Vermelho Pinterest)
• Texto: #000000 (preto — escolha incomum para contraste no vermelho)
• Padding: 6px 14px
• Raio: 16px (generosamente arredondado, não em pílula)
• Borda: 2px solid rgba(255, 255, 255, 0) (transparente)
• Foco: borda semântica + contorno via variáveis CSS

Areia secundário

• Fundo: #e5e5e0 (cinza areia quente)
• Texto: #000000
• Padding: 6px 14px
• Raio: 16px
• Foco: mesmo sistema de borda semântica

Ação circular

• Fundo: #e0e0d9 (claro quente)
• Texto: #211922 (preto ameixa)
• Raio: 50% (círculo)
• Uso: ações de pin, controles de navegação

Fantasma / Transparente

• Fundo: transparente
• Texto: #000000
• Sem borda
• Uso: ações terciárias

Cartões e contêineres

• Cartões de pin com fotografia em primeiro lugar e raio generoso (12px–20px)
• Sem sombra de caixa tradicional na maioria dos cartões
• Fundos brancos ou névoa quente
• Borda branca grossa de 8px em alguns contêineres de imagem

Entradas

• Entrada de e-mail: fundo branco, borda 1px solid #91918c, raio 16px, padding 11px 15px
• Foco: sistema de borda semântica + contorno via variáveis CSS

Navegação

• Cabeçalho limpo em fundo branco ou quente
• Logo Pinterest + barra de pesquisa centralizados
• Pin Sans 16px para links de navegação
• Acentos Vermelho Pinterest para estados ativos

Tratamento de imagens

• Grade de alvenaria estilo pin (layout característico do Pinterest)
• Cantos arredondados: 12px–20px nas imagens
• Fotografia como conteúdo principal — cada pin é uma imagem
• Bordas brancas grossas (8px) em contêineres de imagens em destaque

5. Princípios de layout

Sistema de espaçamento

• Unidade base: 8px
• Escala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
• Saltos grandes: 32px → 80px → 100px para espaçamento de seções

Grade e contêiner

• Grade de alvenaria para conteúdo de pins (layout característico)
• Seções de conteúdo centralizadas com largura máxima generosa
• Rodapé escuro com largura total
• Barra de pesquisa como elemento de navegação principal

Filosofia do espaço em branco

• Densidade de inspiração: A grade de alvenaria empacota os pins com força — a densidade do conteúdo É a proposta de valor. O espaço em branco existe entre as seções, não dentro da grade.
• Respira acima, densidade abaixo: As seções hero/em destaque recebem padding generoso; a grade de pins é compacta e imersiva.

Escala de raio de borda

• Padrão (12px): Cartões pequenos, links
• Botão (16px): Botões, entradas, cartões médios
• Confortável (20px): Cartões em destaque
• Grande (28px): Contêineres grandes
• Seção (32px): Elementos de aba, painéis grandes
• Hero (40px): Contêineres hero, blocos em destaque grandes
• Círculo (50%): Botões de ação, indicadores de aba

6. Profundidade e elevação

Filosofia de sombras: O Pinterest usa sombras mínimas. A grade de alvenaria depende do conteúdo (fotografia) para criar interesse visual em vez de efeitos de elevação. A profundidade vem do calor das cores de superfície e do arredondamento generoso dos contêineres.

7. O que fazer e o que não fazer

Fazer

• Usar neutros quentes (#e5e5e0, #e0e0d9, #91918c) — o tom quente oliva/areia é a identidade
• Aplicar Vermelho Pinterest (#e60023) apenas para CTAs principais — é audacioso e singular
• Usar Pin Sans exclusivamente — uma fonte para tudo
• Aplicar raio de borda generoso: 16px para botões/entradas, 20px+ para cartões
• Manter a grade de alvenaria densa — a densidade do conteúdo é o valor
• Usar fundos de emblema quentes (hsla(60,20%,98%,.5)) para lavados quentes sutis
• Usar #211922 (preto ameixa) para texto principal — mais quente que preto puro

Não fazer

• Não usar neutros cinza frios — sempre quente/tom oliva
• Não usar preto puro (#000000) como texto principal — usar preto ameixa (#211922)
• Não usar botões em forma de pílula — raio de 16px é arredondado, mas não é pílula
• Não adicionar sombras pesadas — o Pinterest é plano por design, a profundidade vem do conteúdo
• Não usar raio de borda pequeno (<12px) em cartões — o arredondamento generoso é essencial
• Não introduzir cores de marca adicionais — vermelho + neutros quentes é a paleta completa
• Não usar pesos de fonte finos — Pin Sans no mínimo 400

8. Comportamento responsivo

Pontos de quebra

Estratégia de colapso

• Grade de pins: 5+ colunas → 3 → 2 → 1
• Navegação: barra de pesquisa + ícones → nav mobile simplificada
• Seções em destaque: lado a lado → empilhado
• Hero: 70px → reduz proporcionalmente
• Rodapé: escuro multicoluna → empilhado

9. Guia de prompts para agentes

Referência rápida de cores

• Marca: Vermelho Pinterest (#e60023)
• Fundo: Branco (#ffffff)
• Texto: Preto ameixa (#211922)
• Texto secundário: Cinza oliva (#62625b)
• Superfície do botão: Cinza areia (#e5e5e0)
• Borda: Prata quente (#91918c)
• Foco: Azul foco (#435ee5)

Exemplos de prompts de componentes

• “Criar um hero: fundo branco. Título em 70px Pin Sans peso 600, preto ameixa (#211922). Botão CTA vermelho (#e60023, raio 16px, padding 6px 14px). Botão areia secundário (#e5e5e0, raio 16px).”
• “Criar um cartão pin: fundo branco, raio 16px, sem sombra. Fotografia preenche o topo, descrição 16px Pin Sans peso 400 abaixo em #62625b.”
• “Construir um botão de ação circular: fundo #e0e0d9, raio 50%, ícone #211922.”
• “Criar um campo de entrada: fundo branco, 1px solid #91918c, raio 16px, padding 11px 15px. Foco: contorno azul via tokens semânticos.”
• “Criar o rodapé escuro: fundo #33332e. Logo script Pinterest em branco. Links 12px Pin Sans em #91918c.”

Guia de iteração

1. Neutros quentes em todo lugar — cinzas oliva/areia, nunca aço frio
2. Vermelho Pinterest apenas para CTAs — audacioso e singular
3. Raio de 16px em botões/entradas, 20px+ em cartões — generoso mas não pílula
4. Pin Sans é a única fonte — compacto em 12px para interface, 70px para display
5. A fotografia carrega o design — a interface permanece quente e minimalista
6. Preto ameixa (#211922) para texto — mais quente que preto puro