FRANKY'S
Une borne de jeux rétro sur le comptoir d'un magasin de skate.
L'esthétique de Franky mêle l'univers rétro des salles d'arcade et celui des boutiques de skate: un fond crème chaleureux (#f3e5df) encadré de bordures pixelisées rigides, un damier noir et blanc omniprésent et une police pixelisée unique, Arcade, utilisée pour chaque mot du site web. La palette est volontairement épurée: seules deux couleurs subsistent (orange vif #faa21f pour l'enseigne et vert profond #128e44 pour le bouton d'achat), la hiérarchie étant entièrement exprimée par l'augmentation de la graisse de la police Arcade de 400 à 700 et par l'utilisation du noir sur fond crème. Les surfaces restent plates et monolithiques; la profondeur est suggérée uniquement par le trait crème de 1 px inséré sur les boutons et par le jeu de nuances du damier. Les éléments graphiques rappellent les sprites des vitrines des années 1990: bordures noires épaisses, rayons de bordure serrés de 6 à 12 px, marges intérieures compactes de 4 à 8 px et des boutons 3D/RA qui ressemblent davantage à des icônes pixélisées qu'à des éléments chromés. Les nouvelles pages sont conçues pour conserver l'atmosphère de salle d'arcade: pas de dégradés autres qu'un texte orange défilant, pas d'ombres douces, pas de typographie décorative — seulement du papier couleur crème, des lignes noires pixélisées et une unique couleur orange chaude.
Sur ordinateur, la page produit s'affiche en pleine largeur, centrée, avec une largeur maximale de 1200 px. La mise en page se déroule comme suit: texte orange défilant → en-tête crème avec un liseré noir → deux colonnes (55 % damier sur la page d'accueil / 45 % grille de fiches produits sur deux colonnes) → bande crème en bas de page. Sur mobile, la page d'accueil se transforme en damier pleine largeur et la grille devient une mise en page à une seule colonne. Les fiches sont réparties uniformément dans une grille sur deux colonnes, séparées par des pixels gris (#e5e7eb). L'espacement entre les sections est minimal (43 à 61 px) et l'interface n'utilise jamais de bandes noires sur toute la largeur de la page: le fond crème s'affiche sans interruption.
Une photographie de casquettes sur fond crème épuré, centrée et cadrée serrée, avec une ombre douce noir anthracite en arrière-plan. Pas de mise en scène, pas de mannequins, pas de contexte: la casquette est l’élément central. Un motif à damier en arrière-plan sert de support graphique. Aucune illustration, aucun rendu 3D (à l’exception du bouton de réalité augmentée), aucune icône décorative (à l’exception de la croix pixélisée du logo).
Palette
Marque
- Marquee Orange
#faa21f— Barre de notification en haut de l'écran, éléments graphiques, identité visuelle. - Buy Green
#128e44— Le bouton « AJOUTER AU PANIER» est coché – seule l'action d'achat est marquée en vert.
Neutre
- Arcade Cream
#f3e5df— Fond de page, surfaces des fiches produits, inserts de boutons. - Ink Black
#000000— Texte principal, mise en page en damier, toutes les bordures de l'interface utilisateur, contours des cartes, bordures des icônes. - Pixel Gray
#e5e7eb— Bordures fines, séparateurs de cartes, règles structurelles entre les cellules de la grille. - Charcoal
#333333— Teinte de surface secondaire, carrés d'ombre en damier, couleur de l'ombre - Carbon
#151515— Des tons neutres riches pour remplir les illustrations et les carreaux à damier les plus denses. - Muted Gray
#737373— Texte désactivé/masqué sur les boutons et dans le corps du texte
Typographie
de 10 à 18 px · 4 étapes
- Arcade — remplacement: VT323 · grandes lignes 400, 700 · Une seule police est utilisée dans toute l'interface: titres, étiquettes, prix, boutons, texte courant et icônes sont en Arcade. La transition entre les polices 400 et 700 est le seul moyen de créer une hiérarchie; utiliser une autre police nuirait à l'illusion d'une borne interactive.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 4-8px |
| Rayon du bouton | 6px |
| Rayon de la carte | 12px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 43-61px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style FRANKY'S et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- 099 SUPPLY — Un mur de galerie rempli d'objets en noir et blanc
- teenage engineering — Catalogue industriel d'éclairage de studio: le produit est le seul élément important de la page, et tout le reste est abordé autour de lui.
- Custo — Une galerie couleur canon de fusil avec une police de caractères monolithique. Un showroom aux tons gris-vert feutrés, où un unique objet sombre et une police de 57 px se suffisent à eux-mêmes.
- Walden — Le silence du sol forestier – chaque produit est une pierre, chaque pixel est mousse et silence
- Fiverr — Le point central du bazar numérique est une pulsation verte éclatante qui se détache sur les scènes sombres d'un théâtre. Un simple point vert néon sert d'ancrage au logo; le reste est monochrome, conçu pour souligner l'attrait des services proposés.
- Peloton — Un phare rouge sur une piste d'atterrissage d'un noir d'encre. Un showroom de fitness où un unique panneau rouge vif signale l'accès à des salles de présentation de produits immaculées et blanches, traversant ainsi le vaste espace d'exposition plongé dans l'obscurité.
- HOUSEPLANT — une librairie avec des noix sur du papier lin
- Adam Lippes — Un studio éditorial monochrome sur papier crème – une double page de Vogue où la seule décoration est la grille de mise en page, et non la palette de couleurs.
- Elektron — À minuit, le panneau de commande de l'équipement est une toile presque noire, où les photos des produits ressortent tandis que l'interface reste pratiquement invisible.
- Sigmaphoto — La Galerie Monochrome des Instruments de Précision est une pièce blanche et silencieuse où la seule couleur qui compte est celle qui vous incite à agir.
- Channel Studio — Un laboratoire photo de studio avec un abat-jour corail.
- Specht Studio — Un mur de galerie empreint d'une curiosité discrète. La finition chromée propre au studio se compose d'une surface blanche et de lettres noires; le feu d'artifice visuel se concentre entièrement dans le carrelage du projet.