FRANKY'S
Isang retro gaming kiosk sa counter ng isang skate shop
Ang visual language ni Franky ay kombinasyon ng retro arcade at skateboard shop: isang mainit na cream canvas (#f3e5df) na naka-frame sa pamamagitan ng matibay na pixel borders, isang black-and-white checkerboard na nasa lahat ng dako, at isang pixel font, ang Arcade, na ginagamit para sa bawat salita sa website. Sinadyang kakaunti ang palette—dalawang chromatic color na lang ang natitira (signal orange #faa21f para sa karatula at rich green #128e44 para sa buy button), kung saan ang buong hierarchy ay ipinapahayag sa pamamagitan ng pagpapataas ng Arcade font weight mula 400 patungong 700 at sa pamamagitan ng paggamit ng itim laban sa cream background. Nananatiling patag at monolitiko ang mga ibabaw; nakakamit lamang ang lalim sa pamamagitan ng ipinasok na 1px cream line sa mga button at sa tonal play ng checkerboard. Ang mga bahagi ay nakapagpapaalaala sa mga storefront sprite noong dekada 1990: makakapal na itim na borders, masikip na 6-12px border radii, compact na 4-8px padding, at mga 3D/AR toggle na mukhang pixelated icons sa halip na chrome elements. Ang mga bagong pahina ay nilayong mapanatili ang mala-arcade na kapaligiran: walang mga gradient maliban sa isang orange na nag-iiskrol na teksto, walang malalambot na anino, walang pandekorasyon na tipograpiya—kulay krema lamang na papel, mga itim na pixelated na linya, at isang mainit na kulay kahel.
Sa desktop, ang pahina ng produkto ay nagpapakita ng isang full-width, centered layout na may maximum na lapad na 1200px. Ang ritmo mula itaas hanggang ibaba ay: orange scrolling text → cream-colored header na may itim na linya → two-column split (55% checkerboard sa homepage / 45% two-column grid ng mga product card) → cream-colored stripe sa footer. Sa mobile, ang homepage ay nagko-collapse sa isang full-width checkerboard, at ang grid ay nagiging isang single-column layout. Ang mga card ay pantay na ipinamamahagi sa isang two-column grid na may gray Pixel (#e5e7eb) divider sa pagitan ng mga ito. Minimal ang pagitan sa pagitan ng mga seksyon (43–61px), at ang interface ay hindi kailanman gumagamit ng maitim na guhit na sumasaklaw sa buong lapad ng pahina—ang cream canvas ay ipinapakita nang walang pagkaantala.
Isang litrato ng mga sumbrero laban sa malinis at kremang background, nakasentro at mahigpit na naka-crop, na may malambot at itim na anino sa ilalim. Walang istilo ng pamumuhay, walang modelo, walang konteksto—ang sumbrero ang bida. Isang checkerboard pattern sa likod ng pangunahing elemento ang nagsisilbing graphic surface. Walang mga ilustrasyon, walang 3D renders maliban sa augmented reality toggle, walang mga pandekorasyon na icon maliban sa pixelated cross sa logo.
Paleta
Tatak
- Marquee Orange
#faa21f— Notification bar sa itaas ng screen, mga elemento ng accent, branding. - Buy Green
#128e44— Napunan na ang button na "ADD TO CART" - ang tanging aksyon sa pagbili na minarkahan ng berde.
Neutral
- Arcade Cream
#f3e5df— Background ng pahina, mga ibabaw ng product card, mga insert ng button. - Ink Black
#000000— Pangunahing teksto, layout ng checkerboard, lahat ng border ng UI, mga balangkas ng card, mga border ng icon. - Pixel Gray
#e5e7eb— Manipis na mga border, mga card divider, mga tuntunin sa istruktura sa pagitan ng mga grid cell. - Charcoal
#333333— Pangalawang tono ng ibabaw, mga parisukat na anino ng checkerboard, kulay ng anino - Carbon
#151515— Matingkad na neutral na kulay para sa mga ilustrasyon na nagpapaganda at sa pinakamakapal na mga tile ng checkerboard. - Muted Gray
#737373— Hindi pinagana/naka-mute na teksto sa mga button at sa body text
Tipograpiya
mula 10 hanggang 18px · 4 na hakbang
- Arcade — kapalit: VT323 · mga balangkas 400, 700 · Iisang font lang ang ginagamit sa buong interface—lahat ng heading, label, presyo, button, body text, at icon ay nasa Arcade. Ang paglipat mula 400 patungong 700 ang tanging tool para sa paglikha ng hierarchy; ang paggamit ng pangalawang font ay sisira sa ilusyon ng kiosk.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 4-8px |
| Radius ng buton | 6px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 43-61px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong FRANKY'S at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- 099 SUPPLY — Isang gallery wall na puno ng mga itim at puting bagay
- teenage engineering — Katalogo ng industriya sa pag-iilaw ng studio - ang produkto ang tanging mahalagang bagay sa pahina, at lahat ng iba pa ay tinatalakay sa paligid nito
- Custo — Isang gallery na kulay gunmetal na may monolitikong font. Isang showroom sa mahinang kulay abo-berde, kung saan ang isang madilim na bagay at 57px na font ay nagsasalita para sa kanilang sarili.
- Walden — Ang katahimikan ng sahig ng kagubatan - bawat produkto ay isang bato, bawat pixel ay lumot at katahimikan
- Fiverr — Ang sentro ng digital bazaar ay isang matingkad na berdeng pulso laban sa madilim na mga entablado ng teatro. Isang neon green na tuldok ang nagsisilbing angkla para sa logo; ang natitira ay monochrome, na idinisenyo upang itampok ang kaakit-akit ng mga serbisyong inaalok.
- Peloton — Isang pulang parola sa isang madilim na runway. Isang fitness showroom kung saan ang isang matingkad na pulang karatula ng CTA ay tumatagos sa malawak at madilim na espasyo ng eksibisyon at patungo sa malilinis at puting mga silid ng produkto.
- HOUSEPLANT — isang bookstore na may mga mani sa linen paper
- Adam Lippes — Isang monochrome editorial studio sa kremang papel – isang Vogue spread kung saan ang tanging palamuti ay ang layout grid, hindi ang color palette.
- Elektron — Ang control panel ng kagamitan sa hatinggabi ay parang halos itim na canvas, kung saan kumikinang ang mga larawan ng produkto habang ang interface ay halos hindi nakikita.
- Sigmaphoto — Ang Monochrome Gallery of Precision Instruments ay isang tahimik na puting silid kung saan ang tanging kulay na mahalaga ay ang tumatawag sa iyo para kumilos.
- Channel Studio — Isang studio photo lab na may isang coral lampshade
- Specht Studio — Isang gallery wall na puno ng palihim na kuryosidad. Ang chrome finish ng studio ay puting ibabaw at itim na letra; ang mga visual na paputok ay ganap na nakatuon sa tilework ng proyekto.