Glossier
Sunshine photoshoot - puting papel, itim na tinta, isang matingkad na dilaw na accent
Ang glossier ay gumagana tulad ng isang digital na magasin para sa kagandahan: isang halos monochrome na canvas ng puti at itim, na may bahid ng iisang matingkad na dilaw na accent na nagsisilbing logo ng brand at nag-iisang panawagan para sa aksyon. Ang sistema ay may limitadong editoryal na konsiderasyon—malalaking headline ng Apercu, malawak na espasyo sa teksto, buong pahinang lifestyle photography na siyang nagdadala ng malaking bahagi ng emosyonal na bigat—at praktikal sa pagpapatupad: mga patag na product card, manipis na mga border, at ganap na kawalan ng palamuti. Ang dilaw ay hindi pangalawang kulay ng brand; ito ang brand, na ginagamit nang matipid, kaya ang bawat hitsura ay parang flash ng camera. Ang lahat ng iba pa ay nilalayong maglaho sa background: ang mga neutral ay mainit na kulay abo na may banayad na blush undertone, ang mga border ay banayad, at ang tipo ay siksik at maigsi. Ang resulta ay isang storefront na may kumpiyansa, simple, at walang kompromisong moderno.
Tampok sa pahina ang isang patayong nakaayos na serye ng mga seksyong full-screen, bawat isa ay dinisenyo bilang isang standalone na editorial spread. Ang pangunahing seksyon ay isang full-width na larawan na may lumulutang na puting overlay (kaliwang itaas) at isang napakalaking dilaw na logo na sumasakop sa buong ibabang bahagi ng pahina. Sa ibaba ng pangunahing seksyon, ang mga seksyon ay nagpapalitan sa pagitan ng mga full-screen na larawan at mga grid ng mga indibidwal na card. Ang paghahati ng mga kategorya (pangangalaga sa balat/makeup) sa dalawang column na may pantay na ratio ng mga larawan (50/50) ay nangyayari nang walang nakikitang border—isang linya lamang na nagdurugtong sa mga larawan ang naghihiwalay sa kanila. Ang katalogo ng produkto ay gumagamit ng isang apat na column na grid ng mga parisukat na card sa isang #f7f7f7 canvas. Ang nabigasyon ay isang minimalist na top bar na may pangalawang ad strip sa itaas nito. Medyo malaki ang mga puwang sa pagitan ng mga seksyon (64px), ngunit ang mga transition sa pagitan ng mga seksyon ay maayos—walang mga divider o salitan na kulay ng background, maliban sa mainit na footer. Ang pangkalahatang ritmo ay: litrato, teksto, litrato, grid, litrato – parang pagbuklat sa isang fashion magazine.
Ang potograpiya ang nangingibabaw na lengguwaheng biswal. Ang buong lugar ng panonood ay puno ng mga larawan at retrato ng pamumuhay—mainit na ilaw sa ginintuang oras, malalambot na close-up ng balat, mga kamay na may hawak na mga bote ng produkto laban sa sinag ng araw. Ang paleta ng kulay sa mga litrato ay mainit at walang kulay: peach na kalangitan, mga tono ng balat na terracotta, malalim na asul ng karagatan. Ang mga imahe ay palaging sumasakop sa buong ibabaw ng pahina, nang walang mga bilugan na sulok, frame, o overlay, maliban sa mga puting text card o dilaw na logo. Ang mga larawan ng produkto sa mga catalog card ay kinunan laban sa isang purong puting walang tahi na background na may patag at pantay na ilaw. Ang ratio ng imahe-sa-teksto ay humigit-kumulang 70/30—ang mga imahe ay naghahatid ng emosyon, teksto, at function. Walang mga ilustrasyon, walang abstract graphics, walang 3D renderings.
Paleta
Tatak
- Glossier Yellow
#fff116— Ginagamit ang dilaw bilang pangalawang kulay para sa mga detalyeng pandekorasyon at upang i-highlight ang mga hindi gaanong madalas gamiting query sa paghahanap. Hindi ito dapat gamitin bilang pangunahing kulay para sa isang panawagan para sa aksyon.
Neutral
- Ink
#000000— Body text, mga link sa nabigasyon, pangunahing teksto, teksto sa footer, mga balangkas ng icon, manipis na mga hangganan; nangingibabaw na tipograpiya at kulay ng istruktura. - Paper
#ffffff— Mga ibabaw ng product card, mga fill area, mga nakataas na panel; ang pinakamaliwanag na antas ng ibabaw sa stack. - Fog
#f7f7f7— Kanbas ng pahina, mga background ng seksyon, mga transisyon sa pagitan ng mga imahe sa pahina; ang base surface kung saan matatagpuan ang buong website. - Blush
#faf2f4— Background sa footer, malambot at mainit na mga divider ng seksyon; banayad na kulay rosas-puting kulay ay nagdaragdag ng init sa ilalim ng mga pahina. - Mist
#f0f0f0— Isang magaan na sumusuportang ibabaw para sa paglikha ng hindi mahahalatang background at paghihiwalay ng mga seksyon. Hindi ito dapat gamitin bilang pangunahing kulay para sa panawagan para sa aksyon. - Ash
#e8e8e8— Mga hangganan ng input field, mga background ng icon, manipis na linya ng separator; kulay ng istrukturang border para sa mga card at mga elemento ng form.
Tipograpiya
mula 12 hanggang 32px · 5 hakbang
- Apercu — kapalit: Inter · mga balangkas 400, 500, 700 · Ang pangunahing tipo ng titik ay ginagamit sa buong user interface—body copy sa 16px/400, nabigasyon at mga caption sa 12–14px/500, mga subheading sa 20px/500, at mga headline ng editoryal sa 32px/700. Ang geometric at humanistic na disenyo ng Apercu ay nagbibigay sa brand ng isang maigsi at modernong istilo; ang halos sero na pagitan ng mga letra (0.002–0.003em) ay ginagawang siksik at parang magasin ang tipo ng titik, sa halip na maluwag o palakaibigan. Ang bigat na 700 ay nakalaan para sa mga elemento ng display sa mga editoryal, hindi para sa mga elemento ng UI.
- Apercu Mono — kapalit: JetBrains Mono or IBM Plex Mono · mga balangkas 400 · Micro-utilitaryan na tipograpiya para sa metadata ng order, mga tracking number, at mga label sa tabi ng code; ang monospaced na bersyon ay lumilikha ng teknikal na tekstura laban sa isang proporsyonal na uri ng katawan.
- GTStandard-M — kapalit: Inter · mga balangkas 400 · GTStandard-M - Natagpuan sa nakuha na datos ngunit hindi inilarawan ng AI.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 8px |
| Radius ng buton | 0px |
| Radius ng card | 0px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 64px |
| Lapad ng pahina | 1440px |
Gagawa ang AI ng website mo sa estilong Glossier 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
- Lightship — Isang sinematikong diorama ng malawak na kalsada. Mainit at kremang mga dingding ng gallery na pinalamutian ng malalaking litrato ng tanawin na nakakabit nang malapitan, manipis na itim na tipo na halos hindi makita sa mga frame, at isang matingkad na kulay kahel na accent na bumabasag sa monochrome na parang siga sa parang.
- Faire ES — pakyawan na katalogo ng mainit na cream
- Adanola — Isang editorial lookbook sa puting papel. Isang fashion shoot kung saan ang tipograpiya at potograpiya ay umiihip sa malinis at puting mga ibabaw, gamit ang itim na tinta para sa typeface at isang banayad na signature sans-serif font (Favorit), na sumasalamin sa pangkalahatang istilo ng brand.
- Oura Ring — Isang maginhawang workshop sa paggawa ng oatmeal, na naliligo sa banayad na liwanag ng araw
- Stykka — Isang Scandinavian workshop sa puting liwanag – isang tahimik at gawang-kamay na showroom kung saan ang tanging boses ay potograpiya
- DJI — Itim na canvas na pang-eroplano na may iisang electric blue na highlight
- Altitude Beverages — Kalat sa magasin na may kulay na monochrome. Isipin ang isang kalat sa magasin ng fashion na walang kulay maliban sa mga litrato—ang teksto at puting espasyo ang nagsasabi ng buong kwento.
- AATHER — Isang bukas na palad, isang nag-iisang apoy - isang tahimik na luho na nakapaloob sa katahimikan
- Cowboy — Isang galeriya ng bisikleta mula sa Belgium na may mala-niyebeng puting porselana. Isang showroom kung saan ang mga matte na ibabaw, malalaking font na ginamit sa mga materyales ng editoryal, at halos kawalan ng dekorasyon ay umaakit sa atensyon ng bisikleta at sa mga laman nito.
- Refero — Layout ng editoryal sa puting marmol - isang pahina ng produkto na nilikha ng isang typographer, kung saan ang serif headline ang calling card ng brand, at ang lahat ng iba pa ay hindi nakakaabala
- Face Formula — Isang larawang editoryal na Scandinavian. Isang kalmadong istilong magasin, kung saan ang tingin ng modelo at ang headline, na nakasulat sa isang pinaikling serif font, ay nagsasalita para sa kanilang sarili laban sa isang malamig at malabong backdrop.
- Shupatto — Kahon ng eksibit ng museo na gawa sa puting marmol