FRANKY'S
Un quiosco de videojuegos retro en el mostrador de una tienda de patines.
El lenguaje visual de Franky es una combinación de arcade retro y tienda de skate: un lienzo de color crema cálido (#f3e5df) enmarcado por bordes de píxeles rígidos, un tablero de ajedrez blanco y negro omnipresente y una fuente de un solo píxel, Arcade, utilizada para cada palabra en el sitio web. La paleta es intencionalmente escasa: solo quedan dos colores cromáticos (naranja señal #faa21f para el letrero y verde intenso #128e44 para el botón de compra), y toda la jerarquía se expresa aumentando el grosor de la fuente Arcade de 400 a 700 y usando el negro sobre el fondo crema. Las superficies permanecen planas y monolíticas; la profundidad se logra solo a través de la línea crema de 1 píxel insertada en los botones y el juego tonal del tablero de ajedrez. Los componentes recuerdan a los sprites de escaparates de los años 90: bordes negros gruesos, radios de borde ajustados de 6 a 12 píxeles, relleno compacto de 4 a 8 píxeles y botones 3D/AR que parecen iconos pixelados en lugar de elementos cromados. Las nuevas páginas pretenden mantener la atmósfera de las salas de juegos: sin degradados, salvo un texto naranja que se desplaza, sin sombras suaves, sin tipografía decorativa; solo papel color crema, líneas negras pixeladas y un único color naranja cálido.
En la versión de escritorio, la página del producto muestra un diseño centrado de ancho completo con un ancho máximo de 1200 px. El ritmo de arriba a abajo es: texto naranja desplazable → encabezado color crema con una línea negra → división en dos columnas (55 % tablero de ajedrez en la página de inicio / 45 % cuadrícula de dos columnas de tarjetas de producto) → franja color crema en el pie de página. En la versión móvil, la página de inicio se reduce a un tablero de ajedrez de ancho completo y la cuadrícula se convierte en un diseño de una sola columna. Las tarjetas se distribuyen uniformemente en una cuadrícula de dos columnas con divisores Pixel grises (#e5e7eb) entre ellas. El espaciado entre secciones es mínimo (43–61 px) y la interfaz nunca utiliza franjas oscuras que abarquen todo el ancho de la página; el lienzo color crema se muestra sin interrupciones.
Fotografía de gorras sobre un fondo crema limpio, centrada y encuadrada con precisión, con una suave sombra negra carbón debajo. Sin estilo de vida, sin modelos, sin contexto: la gorra es la protagonista. Un patrón de tablero de ajedrez detrás del elemento principal sirve como superficie gráfica. Sin ilustraciones, sin renders 3D salvo el interruptor de realidad aumentada, sin iconos decorativos salvo la cruz pixelada del logotipo.
Paleta
Marca
- Marquee Orange
#faa21f— Barra de notificaciones en la parte superior de la pantalla, elementos decorativos, identidad de marca. - Buy Green
#128e44— El botón "AÑADIR AL CARRITO" está marcado; es la única acción de compra que aparece en verde.
Neutral
- Arcade Cream
#f3e5df— Fondo de página, superficies de tarjetas de producto, inserciones de botones. - Ink Black
#000000— Texto principal, diseño de tablero de ajedrez, todos los bordes de la interfaz de usuario, contornos de las tarjetas, bordes de los iconos. - Pixel Gray
#e5e7eb— Bordes finos, separadores de tarjetas, reglas estructurales entre las celdas de la cuadrícula. - Charcoal
#333333— Tono de superficie secundario, cuadrados de sombra de tablero de ajedrez, color de sombra - Carbon
#151515— Tonos neutros intensos para rellenar ilustraciones y las baldosas de tablero de ajedrez más densas. - Muted Gray
#737373— Texto deshabilitado/silenciado en botones y en el cuerpo del texto
Tipografía
De 10 a 18 píxeles · 4 pasos
- Arcade — reemplazo: VT323 · esquemas 400, 700 · Se utiliza una única fuente en toda la interfaz: todos los títulos, etiquetas, precios, botones, texto y iconos están en Arcade. La transición de 400 a 700 es la única herramienta para crear jerarquía; usar una segunda fuente arruinaría la ilusión de quiosco.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 4-8px |
| Radio del botón | 6px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 43-61px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de FRANKY'S y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- 099 SUPPLY — Una pared de galería llena de objetos en blanco y negro.
- teenage engineering — Catálogo industrial de iluminación de estudio: el producto es el único elemento significativo de la página, y todo lo demás se discute a su alrededor.
- Custo — Una galería color gris plomo con una tipografía monolítica. Una sala de exposiciones en tonos gris verdosos apagados, donde un único objeto oscuro y una tipografía de 57 píxeles hablan por sí solos.
- Walden — El silencio del suelo del bosque: cada producto es una piedra, cada píxel es musgo y silencio.
- Fiverr — El elemento central del bazar digital es un vibrante pulso verde sobre un fondo oscuro de escenarios teatrales. Un único punto verde neón sirve de ancla para el logotipo; el resto es monocromático, diseñado para resaltar el atractivo de los servicios ofrecidos.
- Peloton — Un faro rojo sobre una pista de aterrizaje de un negro intenso. Una sala de exposición de artículos deportivos donde un único letrero rojo brillante con la llamada a la acción (CTA) atraviesa el vasto y oscuro espacio de exhibición y conduce a salas de productos blancas e impolutas.
- HOUSEPLANT — una librería con nueces en papel de lino
- Adam Lippes — Un estudio editorial monocromático sobre papel color crema: una página de Vogue donde la única decoración es la cuadrícula de diseño, no la paleta de colores.
- Elektron — A medianoche, el panel de control del equipo es un lienzo casi negro, donde destacan las fotos de los productos mientras que la interfaz permanece prácticamente invisible.
- Sigmaphoto — La Galería Monocromática de Instrumentos de Precisión es una tranquila sala blanca donde el único color que importa es el que te incita a la acción.
- Channel Studio — Un laboratorio fotográfico de estudio con una lámpara de pantalla color coral.
- Specht Studio — Una pared de galería repleta de sutil curiosidad. El acabado cromado propio del estudio presenta una superficie blanca con letras negras; el impacto visual se concentra por completo en los azulejos del proyecto.