Foodnoms
Maaraw na pamilihan ng prutas sa puting porselana - mainit na dalandan, sariwang gulay at malalaking bilog na hugis
Nagtatampok ang Foodnoms ng isang magaan at masayang lengguwahe sa marketing para sa pagsubaybay sa nutrisyon: isang malinis na puting canvas, malalaking mockup ng telepono bilang mga visual anchor, at isang mapaglarong bokabularyo ng kulay kung saan ang mga kulay ay kumakatawan sa mga sustansya at pag-unlad. Ang isang two-color header scheme (isang kulay para sa keyword, dark graphite para sa iba) ay nagbibigay-daan para sa mabilis na pagtatasa ng value proposition. Ang system ay umaasa sa isang single user display (Aquawax Pro) na may natatanging bilugan at geometric na mga feature na nagpapalambot sa mga screen ng app na maraming data. Karamihan sa mga ibabaw ay patag at walang anino; ang pare-parehong radius ng sulok ay nagbibigay sa mga button, card, at label ng isang palakaibigan at malambot na pakiramdam, na ginagawang mas madaling ma-access ang pagsubaybay sa kalusugan kaysa sa klinikal.
Ang pahina ay nagtatampok ng isang hanay, nakasentro, at full-width na layout (~1200px) na may malawak na patayong ritmo. Ang header ay isang manipis na top bar na may logo sa kaliwa, nakasentro sa nabigasyon, at isang orange na action button na puno sa kanan. Ang seksyon ng hero ay isang nakasentrong stack: isang two-color na pamagat, isang single-line na subheader, isang App Store icon, at pagkatapos ay isang hilera ng 3-5 phone mockup na nakakalat sa lapad. Sa ibaba ng seksyon ng hero ay isang nakasentrong seksyon ng press logo na "As Recommended" sa isang 2x3 grid. Ang mga feature section ay sumusunod sa isang paulit-ulit na pattern: two-column na teksto + phone mockup, salitan ang mga gilid, na may mga accent section heading na kulay orange/green. Ang huling elemento bago ang footer ay isang full-width na nada-download na CTA card. Ang mga gutter sa pagitan ng mga seksyon ay malawak (96px), na lumilikha ng isang maluwang at parang gallery na pakiramdam. Ang nabigasyon ay isang minimalist na top bar - walang sidebar o mega menu.
Ang biswal na wika ng app ay pinangungunahan ng mga de-kalidad na mockup ng iPhone frame na nagpapakita ng gumaganang interface ng app—ito ang mga pangunahing elemento, hindi mga stock na larawan. Ang mga mockup ay ipinapakita nang may halos kabuuang transparency, kumakalat nang may bahagyang pagsasanib at maayos na pag-ikot, at direktang nakaposisyon sa isang puting background. Sa loob ng mga mockup, ang biswal na bahagi ay ibinibigay ng sariling interface ng app: impormasyon sa nutrisyon, mga larawan ng produkto, mga macro ring, at mga makukulay na tag ng kategorya. Ang tanging nilalamang potograpiya ay mga larawan ng pagkain na isinumite ng user na makikita sa screen ng camera ng Scan Your Food app. Walang mga larawan sa pamumuhay, walang mga abstract na ilustrasyon, walang mga pandekorasyon na graphics. Ang branding ay ganap na tinukoy ng custom na font, ang orange/green/dark na scheme ng kulay, at ang sariling interface ng app.
Paleta
Tatak
- Ember Orange
#ff5406— Ginagamit ang kulay kahel bilang pangalawang kulay para sa mga detalyeng pandekorasyon at upang i-highlight ang mga bihirang pahiwatig. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Graphite
#2f2f2f— Pangunahing teksto, madilim na mga buton (icon ng App Store), at mga balangkas ng icon. Isang nangingibabaw na kulay na hindi puti sa mga heading at body text. - Verdant Green
#00b33f— Ang berdeng kulay ay nagsisilbing karagdagang tuldik para sa mga detalyeng pandekorasyon at upang bigyang-diin ang mababang frequency. - Signal Red-Orange
#ff3400— Isang pangalawang mainit na accent, na makikita sa mga elemento ng UI ng screen ng app at mga kaugnay na branding. Isang tono na mas mainit kaysa sa Ember Orange, binibigyang-diin nito ang mga pili o aktibong estado ng app. - Sky Blue
#00a9dd— Isang kaaya-ayang contrast para sa mga panloob na kategorya ng data ng app (carbohydrates/proteins/iba pang mga grupo ng sustansya). Binabalanse ang mainit at dominanteng paleta ng kulay sa mga layout ng telepono. - Mist Blue
#72a2c5— Muted Cool Accent - Pinapalambot ang kulay Sky blue para sa karagdagang mga label ng data at mga background ng chart sa loob ng app. - Sunset Orange
#ff6d00— Isang mainit na diin para sa mga pangalawang pamagat at naka-highlight na teksto sa mga pahina ng marketing.
Tipograpiya
mula 12 hanggang 60px · 7 hakbang
- Aquawax Pro Medium — kapalit: Inter · mga balangkas 500 · Aquawax Pro Medium - Natagpuan sa nakuha na datos ngunit hindi inilarawan ng AI.
- Aquawax Pro — kapalit: Nunito Sans · mga balangkas 700, 500, 600 · Ang pangunahing font ng tatak na ginagamit sa lahat ng konteksto, kabilang ang mga heading at body copy. Ang custom-designed na font na ito ay nagtatampok ng malalapad na taas ng letra, bilugan na mga geometric na hugis, at komportableng proporsyon. Ang bold (700) ay ginagamit para sa mga heading at seksyon—ang mga typographic landmark ng system. Ang semibold (600) ay ginagamit para sa mga subheading at button label na may sukat na 14–1.8 mm. Ang medium (500) ay ginagamit para sa body copy na may sukat na 17–1.8 mm, na may sapat na line spacing na 1.6–1.8 mm para sa komportableng pagbabasa.
- System sans-serif — kapalit: Inter · mga balangkas 400, 700 · Ginagamit ang opsyong fallback para sa napakaliit na teksto at teksto ng icon sa user interface. Hindi ginagamit ang Aquawax Pro sa maliliit na laki; ang font ng system ang humahawak sa mga ito upang mabawasan ang bigat ng rendering.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | maluwang |
| Pangunahing hakbang | 20px |
| Radius ng buton | 26px |
| Radius ng card | 26px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 96px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Foodnoms 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
- Slite — Isang mainit na kuwaderno na gawa sa pergamino na may hawakang terakota—bawat ibabaw ay kremang papel, bawat diin ay may banayad na bahid ng kulay kahel.
- Adora — Ang Museo ng Impresyonismo sa likod ng nagyelong salamin
- Bento — Isang bento lunchbox sa naliliwanagan ng araw na linoleum. Isang grid ng mga bilugan at parang sticker na kard na gawa sa dayap, lavender, cobalt, at burgundy, na bawat isa ay nakabalangkas sa makapal na itim na tinta, ay nakapatong sa isang mainit at kremang linen sa ilalim ng isang matingkad at heometrikong pamagat.
- Payments — Isang matingkad na kulay citrus laban sa isang maharlikang lilang likuran. Ang malalim na electric purple ay nagpapaalala sa kalangitan sa gabi, habang ang mga dilaw na lemon ay kumikinang na parang sariwang citrus zest laban sa isang malinis at puting ibabaw.
- Textla — Maaraw na Retro Botanical Almanac - Krema na dilaw na pahina na nakalimbag sa maitim na berde na may mga ilustrasyon ng cacti na ipinakita sa matutulis at nakahiwalay na mga anino
- AI for Business — Brutalist na palabas ng editoryal sa mainit na kulay abo
- Superhuman — panel ng editoryal ng ginintuang oras
- Visitors — puting pagguhit ng inhinyero
- Vercel — Terminal na nakalimbag sa puting papel
- Jeton — Isang editoryal tungkol sa fintech sa mainit na marmol
- Say Briefly — Sketchbook ng creative agency sa kremang papel
- ClickUp — Isang makapangyarihang dashboard sa puting marmol. Ang pahina ay isang brochure ng produkto para sa isang tool sa produktibidad, kaya ang visual na wika ay hiniram mula sa produkto mismo: siksik na listahan, mga tagapagpahiwatig ng katayuan, mga grupo ng mga avatar, at mga matatapang na pahayag na tipograpiko na mukhang isang detalye ng produkto na ipinapakita.