FRANKY'S
Um quiosque de jogos retrô no balcão de uma loja de skate.
A linguagem visual de Franky é uma combinação de fliperama retrô e loja de skate: uma tela creme quente (#f3e5df) emoldurada por bordas rígidas de pixels, um onipresente padrão quadriculado em preto e branco e uma única fonte pixelada, Arcade, usada para todas as palavras do site. A paleta é intencionalmente esparsa — restam apenas duas cores cromáticas (laranja vibrante #faa21f para a placa e verde intenso #128e44 para o botão de compra), com toda a hierarquia expressa pelo aumento da espessura da fonte Arcade de 400 para 700 e pelo uso do preto sobre o fundo creme. As superfícies permanecem planas e monolíticas; a profundidade é alcançada apenas pela linha creme de 1px inserida nos botões e pelo jogo tonal do padrão quadriculado. Os componentes lembram os sprites de vitrines dos anos 1990: bordas pretas grossas, raios de borda estreitos de 6 a 12px, preenchimento compacto de 4 a 8px e botões de alternância 3D/AR que parecem ícones pixelados em vez de elementos cromados. As novas páginas visam manter a atmosfera de fliperama: sem gradientes além de um texto laranja em movimento, sem sombras suaves, sem tipografia decorativa — apenas papel cor creme, linhas pretas pixelizadas e uma única cor laranja quente.
Na versão para desktop, a página do produto exibe um layout centralizado em tela cheia, com largura máxima de 1200px. A sequência de cima para baixo é: texto laranja em rolagem → cabeçalho creme com linha preta → divisão em duas colunas (55% em formato de tabuleiro de xadrez na página inicial / 45% em grade de duas colunas com os cartões de produto) → faixa creme no rodapé. Na versão para dispositivos móveis, a página inicial se transforma em um tabuleiro de xadrez em tela cheia, e a grade passa a ter um layout de coluna única. Os cartões são distribuídos uniformemente em uma grade de duas colunas com divisores cinza Pixel (#e5e7eb) entre eles. O espaçamento entre as seções é mínimo (43–61px), e a interface nunca utiliza faixas escuras que ocupam toda a largura da página — o fundo creme é exibido sem interrupções.
Uma fotografia de bonés contra um fundo creme limpo, centralizada e com enquadramento preciso, com uma suave sombra preta carvão por baixo. Sem estilo de vida, sem modelos, sem contexto — o boné é a estrela. Um padrão quadriculado atrás do elemento principal serve como superfície gráfica. Sem ilustrações, sem renderizações 3D, exceto pelo botão de realidade aumentada, sem ícones decorativos, exceto pela cruz pixelizada no logotipo.
Paleta
Marca
- Marquee Orange
#faa21f— Barra de notificações na parte superior da tela, elementos de destaque, identidade visual da marca. - Buy Green
#128e44— O botão "ADICIONAR AO CARRINHO" está selecionado - a única ação de compra marcada em verde.
Neutro
- Arcade Cream
#f3e5df— Fundo da página, superfícies dos cartões de produto, inserções de botões. - Ink Black
#000000— Texto principal, layout em tabuleiro de xadrez, todas as bordas da interface do usuário, contornos dos cartões, bordas dos ícones. - Pixel Gray
#e5e7eb— Bordas finas, divisórias de cartão, regras estruturais entre as células da grade. - Charcoal
#333333— Tom de superfície secundário, quadrados de sombra quadriculados, cor da sombra - Carbon
#151515— Tons neutros ricos para preencher ilustrações e os ladrilhos quadriculados mais densos. - Muted Gray
#737373— Texto desativado/silenciado em botões e no corpo do texto.
Tipografia
de 10 a 18px · 4 etapas
- Arcade — substituição: VT323 · esboços 400, 700 · Uma única fonte é usada em toda a interface — todos os títulos, rótulos, preços, botões, texto corrido e ícones estão em Arcade. A transição de 400 para 700 é a única ferramenta para criar hierarquia; usar uma segunda fonte arruinaria a ilusão de quiosque.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 4-8px |
| Raio do botão | 6px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 43-61px |
| Largura da página | 1200px |
A IA criará seu site no estilo FRANKY'S 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
- 099 SUPPLY — Uma parede de galeria repleta de objetos em preto e branco.
- teenage engineering — Catálogo industrial de iluminação de estúdio - o produto é o único objeto significativo na página, e tudo o mais é discutido em torno dele.
- Custo — Uma galeria em tons de cinza-chumbo com uma fonte monolítica. Um showroom em tons suaves de cinza-esverdeado, onde um único objeto escuro e uma fonte de 57px falam por si.
- Walden — O silêncio do chão da floresta - cada produto é uma pedra, cada pixel é musgo e silêncio.
- Fiverr — O ponto focal do bazar digital é um pulso verde vibrante em contraste com os palcos escuros de um teatro. Um único ponto verde neon serve como âncora para o logotipo; o restante é monocromático, projetado para destacar o apelo dos serviços oferecidos.
- Peloton — Um farol vermelho em uma pista completamente preta. Um showroom de produtos fitness onde uma única placa vermelha brilhante de chamada para transporte público corta o vasto e escuro espaço de exposição, conduzindo a salas de produtos limpas e brancas.
- HOUSEPLANT — uma livraria com nozes em papel de linho
- Adam Lippes — Um estúdio editorial monocromático em papel creme – uma matéria da Vogue onde a única decoração é a grade de layout, não a paleta de cores.
- Elektron — À meia-noite, o painel de controle do equipamento é uma tela quase preta, onde as fotos dos produtos brilham enquanto a interface permanece praticamente invisível.
- Sigmaphoto — A Galeria Monocromática de Instrumentos de Precisão é uma sala branca e tranquila onde a única cor que importa é aquela que te inspira a agir.
- Channel Studio — Um estúdio fotográfico com um abajur coral.
- Specht Studio — Uma parede de galeria repleta de curiosidade discreta. O acabamento cromado exclusivo do estúdio apresenta uma superfície branca com letras pretas; o espetáculo visual está inteiramente concentrado nos azulejos do projeto.