Bpco
Um manifesto tipográfico feito de uma laje de concreto. Um press kit em preto e branco onde a fonte Helvetica em tamanho exagerado imita uma fotografia, e a única textura é uma única folha de papel amassada sob a tipografia principal.
O Bigpicture utiliza um sistema de edição monocromático que trata a página web como um press kit impresso, diagramado em papel cru. A interface é completamente desprovida de cores, baseando-se exclusivamente em tinta preta, espaços em branco, linhas finas e uma textura uniforme de papel amassado para criar atmosfera. A tipografia é o produto final: os títulos atingem 274px em Helvetica Neue 700 com espaçamento negativo acentuado entre as letras, tornando o texto a massa visual dominante em todas as telas. Legendas monoespaçadas ([01-N INTRODUÇÃO], CRIATIVO/AGÊNCIA) funcionam como assinaturas em estilo impresso, e ícones brilhantes de quatro pontas servem como a única decoração entre as seções. O layout é generoso e lembra a autopublicação — espaços de 72px entre as seções, margens horizontais de 144 a 250px e blocos de imagem em largura total com cantos de 288px permitem que a página respire como uma galeria de arte, em vez de um software.
A largura máxima é de aproximadamente 1440px, centralizada com um espaçamento horizontal de 40 a 144px, dependendo da densidade da seção. A imagem principal ocupa toda a largura da página, com texto sobreposto. Abaixo da imagem, o conteúdo alterna entre blocos de texto centralizados e tipografia de ponta a ponta. Os 60% inferiores da página consistem em um longo manifesto com rolagem, com letras grandes preenchendo toda a largura da área visível, linha por linha, separadas por linhas de divisórias brilhantes. A navegação é uma barra flutuante centralizada na parte superior da área visível, em vez de um painel de largura total. O rodapé é uma única faixa com uma borda fina.
A fotografia domina a tela principal — grandes imagens de arquitetura e publicidade exterior (outdoors, fachadas de edifícios, anúncios de rua) apresentadas em tamanho real com cantos arredondados. Uma textura de papel amassado é sobreposta nas seções inferiores da página, criando uma sensação tátil e conferindo à interface a aparência de uma revista impressa. Um pequeno ícone de globo terrestre, desenhado com linhas, é o único elemento ilustrativo. Sem efeitos 3D, sem gradientes abstratos, sem maquetes de produtos — as imagens são documentais, de natureza industrial e baseadas no portfólio de publicidade exterior da agência.
Paleta
Neutro
- Press Ink
#121212— O corpo do texto, as linhas finas, as bordas das seções, os contornos dos ícones e o texto do rodapé utilizam um único tom escuro que representa 95% de todas as informações em primeiro plano. - Paper White
#ffffff— Tela da página, superfícies de papelão, fundo da barra de navegação, superfícies com molduras de título. - Newsprint
#f1f1f1— Preenchimento delicado da superfície, bordas suaves, divisórias finas, tonalidade escondida sob a textura do papel amassado. - Foil Gray
#e1e1e1— Molduras leves, detalhes em forma de contornos de ícones, divisórias adicionais. - Mute Gray
#c5c5c5— Texto secundário, condição de deficiência, linhas de superfície de baixo contraste
Tipografia
de 13 a 274px · 6 etapas
- Helvetica Neue — substituição: Inter · esboços 400, 500, 700 · Uma ferramenta universal - texto principal em 17px/1,29, títulos de exibição em 75–274px com espaçamento entre letras de -0,04em nos tamanhos maiores, rótulos de navegação em 15px
- PPSupplyMono — substituição: JetBrains Mono · esboços 400 · As meta tags e os rótulos entre parênteses, como [01-N INTRODUÇÃO], bem como as tags de seção (PUBLICIDADE, CRIAÇÃO/AGÊNCIA, MARKETING OFFLINE), são os únicos acentos tipográficos que quebram a monotonia da Helvetica.
- PPSupplySans — substituição: Inter · esboços 400 · Navegação secundária e microtexto no rodapé onde for necessária uma fonte sem serifa diferente.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 50px |
| Raio do botão | 8px |
| Raio do cartão | 20px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 72px |
| Largura da página | 1440px |
A IA criará seu site no estilo Bpco e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Steep — Análise de fontes serifadas em papel de cor quente
- Newformcap — Jornal editorial no vestiário
- Claude — Um artefato impresso em pergaminho morno — tinta sobre papel de osso, argila como único sopro de cor.
- 11x– Digital workers — Um deserto editorial cinematográfico — fotografias panorâmicas da paisagem contrastando com manchetes monumentais em fonte serifada que parecem um editorial de revista de luxo.
- Revolut — Um trabalho editorial monocromático baseado em uma fotografia de nuvens — tinta branca, botões tipo pillbox, uma única faixa azul de cor em um mundo predominantemente cinza.
- Scheduling — Tinta editorial sobre papel creme
- Titan — arquivo monocromático em tons quentes
- Programa — Um estúdio de design suíço ao meio-dia. A parede branca da galeria é iluminada por um único abajur amarelo — tudo é em tons de cinza até que um botão, ícone ou detalhe chama a atenção, e então esse único detalhe amarelo define toda a sala.
- Sana Agents — Brilho de limão em fundo branco em editorial
- Visual — Editorial samizdat em tom ameno. Papel creme, pôsteres com serifa, anotações marginais monocromáticas, um marcador amarelo.
- Midday — Brochura editorial em papel vegetal - título serifado de 72px sobre fundo bege claro, corpo do texto em fonte sem serifa com espaçamento, controles em formato de pílula, sem sombras.
- Chat for impact — Uma clínica verde-floresta com salas em tons pastel.