Apple
Isang puting silid na may iisang asul na switch
Ang disenyo ng Apple ay isang modelo ng pagpipigil: isang halos puting canvas, malawak na puting espasyo, at isang matingkad na asul na accent na nagpaparamdam na sinadya ang bawat kilos. Ang pangunahing pokus ay ang tipograpiya—ang SF Pro, na may negatibong espasyo ng mga letra na lumiliit kasabay ng pagtaas ng laki, na nagbibigay sa mga headline ng kalinawan ng arkitektura nang hindi masyadong mabigat. Ang produkto AY ang disenyo: nangingibabaw ang malalaking larawan ng produkto at mga imahe ng pamumuhay, habang ang mga elemento ng chrome ay nauurong sa manipis na mga frame, translucent navigation, at mga banayad na linya. Ang mga seksyon ay nagpapalitan laban sa isang mapusyaw na kulay abong background na may mga full-color block para sa mga promotional material, na lumilikha ng ritmo sa pamamagitan ng mga pagbabago sa iskala sa halip na mga pandekorasyon na elemento.
Ang layout ng pahina ay isang pahinang may buong lapad na walang takdang maximum na lapad ng container—ang mga seksyon ay umaabot mula gilid hanggang gilid, na may mga bloke ng teksto na nakasentro sa loob ng humigit-kumulang 980px. Ang nabigasyon ay isang iisang nakapirming global bar na may karagdagang subfolder para sa bawat produktong lumalabas sa scroll. Ang pangunahing layout ay palaging nakasentro: isang malaking pangalan ng produkto, isang tagline na may iisang linya, dalawang pill button, pagkatapos ay isang larawan ng produkto na pumupuno sa natitirang viewport. Ang mga seksyon ay nakasalansan nang patayo na may malawak na patayong ritmo (64px+ sa pagitan ng mga seksyon), na nagpapalitan ng #f5f5f7 at may kulay na mga background. Ang ibabang pahina ay isang pahalang na hanay ng mga full-width service card (Apple TV+, Fitness+, Music, Arcade), bawat isa ay isang photo block na may overlay na teksto at isang pill button. Walang mga sidebar, walang mga layout ng nilalaman na may maraming column, walang mga asymmetrical na komposisyon—lahat ay nakasentro, nakasalansan, at simetriko.
Ang potograpiya ang nangingibabaw na biswal na wika. Ang mga larawan ng produkto ay kinukuha laban sa purong puti o malambot na kulay abong background, nang walang anumang konteksto—ang aparato AY ang bituin, nakahiwalay at may ilaw. Ang mga larawan ng pamumuhay ay ipinapakita sa mga full-width banner, kadalasan ay may mga bagay na naka-crop nang mahigpit. Ang mga gradient ng kulay (pastel blue, pink, green) ay nagsisilbing backdrop para sa mga seksyon ng produkto, hindi bilang dekorasyon. Ang iconography ay minimalist at nakabatay sa linya, 1-2px ang kapal, sa parehong grayscale ng teksto. Walang mga ilustrasyon, walang abstract graphics, walang 3D renderings, maliban sa mga larawan ng produkto mismo.
Paleta
Tatak
- Apple Blue
#0071e3— Mga napunong action button, mga piling estado - ang tanging interactive na kulay kromatiko na ginamit nang matipid upang gawing makabuluhan ang bawat anyo. - Link Blue
#0066cc— Mga naka-highlight na action border, mga naka-embed na link - isang mas puspos na kulay kaysa sa Apple Blue ang ginagamit kung saan ang isang puno na tablet ay magiging masyadong magarbo. - Signal Blue
#2997ff— Mga pandekorasyon na frame, mga balangkas ng imahe, mga hangganan ng icon - ang pinakamaliwanag na asul na kulay sa sistema, ginagamit para sa kapaligiran sa halip na para sa pakikipag-ugnayan ng gumagamit.
Neutral
- Carbon
#1d1d1f— Ang pangunahing teksto, mga hangganan ng heading, mga linya ng nabigasyon, mga hangganan ng card - ang nangingibabaw na kulay ng tinta ay halos itim na may kaunting pahiwatig ng init. - Frost
#f5f5f7— Ang canvas ng pahina, pangunahing background ng teksto, at ibabaw ng footer ay ang signature light gray ng Apple, medyo mas malamig kaysa sa purong puti. - Ice
#f4f8fb— Mga makahulugang pagpuno sa ibabaw, mga banayad na kulay, teksto ng mga butones sa isang madilim na background—isang banayad na asul na kulay na nagbibigay-buhay sa seksyon nang hindi ito ginagawang kapansin-pansin. - Smoke
#333333— Pangalawang teksto, pagpuno ng nabigasyon, mga hangganan ng buton - Isang maraming gamit na neutral na kulay para sa mga hangganan at mga icon na nangangailangan ng mas maraming lambot kaysa sa katamtamang kulay abo. - Graphite
#474747— Teksto ng nabigasyon, mga hangganan ng nabigasyon, mga hangganan ng link - sumasakop sa isang pansamantalang posisyon sa pagitan ng Carbon at Usok sa hirarkiya ng elemento. - Ash
#707070— Teksto ng footer, mga hangganan ng listahan, mga hangganan ng nabigasyon, naka-mute na teksto ng katawan - Isang katamtamang kulay abo para sa nilalamang kailangang naroroon ngunit hindi kitang-kita.
Tipograpiya
mula 12 hanggang 56px · 8 hakbang
- SF Pro Display — kapalit: Inter · mga balangkas 400, 600, 700 · Mga headline at malalaking teksto—ang mga laki na 40px+ ay gumagamit ng format ng display para sa mas makitid na aperture at mas malakas na negative tracking; ang 700 ay nakalaan para sa mga layout ng advertising, at ang 400 ay para sa mga pangalan ng produkto sa nilalamang editoryal.
- SF Pro Text — kapalit: Inter · mga balangkas 300, 400, 600 · Body text, nabigasyon, mga buton, mga subheading — gumaganang font; 400 para sa body text, 300 para sa mga subheading at mga kwalipikadong label, 600 para sa mga elemento ng nabigasyon at buton; ang pagitan ng mga negatibong letra ay bumababa nang proporsyonal sa laki (mula -0.022em hanggang 12px hanggang -0.01em hanggang 44px).
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 12px |
| Radius ng buton | 980px |
| Radius ng card | 8px |
| 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 Apple 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
- Ui — klinikal na plano sa matte na papel
- ElevenLabs — Isang photo essay sa maayang kulay krema na may banayad na mga headline. Isang notebook na istilong Bauhaus—papel na kulay itlog, itim na tinta, at isang lila at orange na accent para sa display ng produkto.
- monopo saigon — Isang likido at matingkad na liwanag sa likod ng katahimikan ng editoryal—isang monochrome editorial gallery na lumulutang sa tinunaw na liwanag
- Awesomic — Editoryal na zinc mesh na may orange na bantas na nakapagpapaalala ng confetti
- Monad — teknikal na dyornal ng editoryal tungkol sa mainit na pergamino
- Dub — Control panel ng Link na gawa sa matte rice paper
- Seline Analytics — Isang tahimik na analytical table sa mainit na papel
- Ventriloc — Isang obserbatoryo ng editoryal ng datos sa mainit na papel - isang nag-iisang kulay kahel na baga na nagbibigay-diin sa katumpakan ng monochrome
- Duolingo — Mapaglarong maskot ng klase sa puting papel
- Stripe — Isang aklat ng talaan na nakasulat sa tinta ng indigo sa nagyelong salamin
- Notion — Isang mainit na kuwaderno na papel sa ilalim ng araw ng tanghali
- Hyer Aviation — Takipsilim sa cockpit sa ibabaw ng pergamino. Ang maputlang kalangitan ng bukang-liwayway ay nagtatagpo sa logo na kasinglaki ng fuselage na may serif, at isang mainit na accent na luwad ang pumuputol sa monochrome na pagpipigil.