FRANKY'S
Un quiosco de xogos retro no mostrador dunha tenda de skate
A linguaxe visual de Franky é unha combinación de arcade retro e tenda de skateboard: unha lona crema cálida (#f3e5df) enmarcada por bordos ríxidos de píxeles, un omnipresente taboleiro de xadrez branco e negro e unha fonte dun só píxel, Arcade, usada para cada palabra do sitio web. A paleta é intencionadamente escasa: só se conservan dúas cores cromáticas (laranxa de sinalización #faa21f para o cartel e verde intenso #128e44 para o botón de compra), coa xerarquía completa expresada aumentando o peso da fonte Arcade de 400 a 700 e usando o negro sobre o fondo crema. As superficies permanecen planas e monolíticas; a profundidade conséguese só mediante a liña crema de 1 px inserida nos botóns e o xogo tonal do taboleiro de xadrez. Os compoñentes lembran os sprites dos escaparates dos anos 90: bordos negros grosos, radios de bordo axustados de 6-12 px, recheo compacto de 4-8 px e interruptores 3D/AR que parecen iconas pixeladas en lugar de elementos cromados. As novas páxinas pretenden manter a atmosfera arcade: sen degradados agás un texto laranxa que se despraza, sen sombras suaves, sen tipografía decorativa, só papel de cor crema, liñas negras pixeladas e unha única cor laranxa cálida.
No escritorio, a páxina do produto móstrase cun deseño centrado a ancho completo cun ancho máximo de 1200 px. O ritmo de arriba a abaixo é: texto de desprazamento laranxa → cabeceira cor crema cunha liña negra → división en dúas columnas (55 % de damero na páxina de inicio / 45 % de grella de dúas columnas de tarxetas de produto) → raia de cor crema no pé de páxina. En móbiles, a páxina de inicio colápsase nun damero de ancho completo e a grella convértese nun deseño de columna única. As tarxetas distribúense uniformemente nunha grella de dúas columnas con divisores grises de píxeles (#e5e7eb) entre elas. O espazado entre as seccións é mínimo (43–61 px) e a interface nunca usa raias escuras que abarquen todo o ancho da páxina: o lenzo cor crema móstrase sen interrupcións.
Unha fotografía de gorras sobre un fondo crema limpo, centrada e recortada, cunha sombra suave de cor negra carbón debaixo. Sen estilo de vida, sen modelos, sen contexto: a gorra é a estrela. Un patrón de damas detrás do elemento principal serve como superficie gráfica. Sen ilustracións, sen renderizacións en 3D agás o interruptor de realidade aumentada, sen iconas decorativas agás a cruz pixelada do logotipo.
Paleta
Marca
- Marquee Orange
#faa21f— Barra de notificacións na parte superior da pantalla, elementos de realce, imaxe de marca. - Buy Green
#128e44— O botón "ENGADIR AO CARRO" está cheo; a única acción de compra está marcada en verde.
Neutro
- Arcade Cream
#f3e5df— Fondo da páxina, superficies da tarxeta de produto, insercións de botóns. - Ink Black
#000000— Texto principal, deseño de damero, todos os bordos da IU, contornos das cartas, bordos das iconas. - Pixel Gray
#e5e7eb— Bordes finos, divisores de tarxetas, regras estruturais entre celas da cuadrícula. - Charcoal
#333333— Ton superficial secundario, cadrados de sombra en damero, cor de sombra - Carbon
#151515— Tons neutros ricos para rechear ilustracións e as teselas de damero máis densas. - Muted Gray
#737373— Texto desactivado/silenciado nos botóns e no corpo do texto
Tipografía
de 10 a 18 px · 4 pasos
- Arcade — substitución: VT323 · contornos 400, 700 · Emprégase unha única fonte en toda a interface: todos os títulos, etiquetas, prezos, botóns, corpo do texto e iconas están en Arcade. A transición de 400 a 700 é a única ferramenta para crear xerarquía; usar unha segunda fonte arruinaría a ilusión do quiosco.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 4-8px |
| Radio do botón | 6px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 43-61px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de FRANKY'S e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- 099 SUPPLY — Unha parede de galería chea de obxectos en branco e negro
- teenage engineering — Catálogo industrial en iluminación de estudio: o produto é o único obxecto significativo da páxina e todo o demais se discute ao seu redor
- Custo — Unha galería cor bronce e unha fonte monolítica. Unha sala de exposicións en tons grises verdosos apagados, onde un único obxecto escuro e unha fonte de 57 px falan por si mesmos.
- Walden — O silencio do chan do bosque: cada produto é unha pedra, cada píxel é musgo e silencio.
- Fiverr — O punto focal do bazar dixital é un vibrante pulso verde contra escenarios escuros de teatro. Un único punto verde neón serve como áncora para o logotipo; o resto é monocromo, deseñado para destacar o atractivo dos servizos ofrecidos.
- Peloton — Un faro vermello nunha pasarela negra coma o azabache. Unha sala de exposicións de fitness onde un único sinal vermello brillante de chamada á acción atravesa o vasto e escuro espazo de exposición e leva a salas brancas e limpas cheas de produtos.
- HOUSEPLANT — unha libraría con froitos secos en papel de liño
- Adam Lippes — Un estudo editorial monocromo sobre papel crema: unha tirada de Vogue onde a única decoración é a cuadrícula de deseño, non a paleta de cores.
- Elektron — O panel de control do equipo á medianoite é unha lona case negra, onde as fotos do produto brillan mentres a interface permanece practicamente invisible.
- Sigmaphoto — A Galería Monocroma de Instrumentos de Precisión é unha sala branca e tranquila onde a única cor que importa é a que te chama á acción.
- Channel Studio — Un laboratorio fotográfico de estudio cunha pantalla de lámpada de coral
- Specht Studio — Unha parede de galería chea de discreta curiosidade. O acabado cromado propio do estudo é unha superficie branca e letras negras; os fogos artificiais visuais concéntranse por completo nos azulexos do proxecto.