Apple
Ett vitt rum med en enda blå strömbrytare
Apples design är ett exempel på återhållsamhet: en nästan vit duk, gott om vitt utrymme och en enda, livfull blå accent som får varje handling att kännas avsiktlig. Det primära fokuset är typografi – SF Pro, med negativt bokstavsavstånd som minskar med ökande storlek, vilket ger rubrikerna en arkitektonisk klarhet utan att vara alltför tunga. Produkten ÄR designen: stora produktfoton och livsstilsbilder dominerar, medan kromade element drar sig tillbaka till tunna ramar, genomskinlig navigering och subtila linjer. Sektioner växlar mot en ljusgrå bakgrund med helfärgade block för reklammaterial, vilket skapar rytm genom skalförändringar snarare än dekorativa element.
Sidlayouten är en sida i full bredd utan någon fast maximal containerbredd – avsnitten sträcks ut kant i kant, med textblock centrerade inom cirka 980 pixlar. Navigeringen är en enda, fast global stapel med en extra undermapp för varje produkt som visas vid rullning. Huvudlayouten är alltid centrerad: ett stort produktnamn, en enradig slogan, två pillerknappar och sedan en produktbild som fyller den återstående visningsplatsen. Avsnitten är staplade vertikalt med en generös vertikal rytm (64 pixlar+ mellan avsnitten), alternerande #f5f5f7 och färgade bakgrunder. Den nedre sidan är en enda horisontell rad med servicekort i full bredd (Apple TV+, Fitness+, Musik, Arcade), vart och ett ett fotoblock med överläggstext och en pillerknapp. Inga sidofält, inga innehållslayouter med flera kolumner, inga asymmetriska kompositioner – allt är centrerat, staplat och symmetriskt.
Fotografi är det dominerande visuella språket. Produktfoton tas mot en ren vit eller mjukgrå bakgrund, utan kontext – enheten ÄR stjärnan, isolerad och upplyst. Livsstilsfoton visas i fullbreddsbanners, ofta med tätt beskurna objekt. Färggradienter (pastellblå, rosa, grön) fungerar som bakgrund för produktsektionerna, inte som dekoration. Ikonografin är minimalistisk och linjebaserad, 1–2 pixlar tjock, i samma gråskala som texten. Inga illustrationer, ingen abstrakt grafik, inga 3D-renderingar, förutom själva produktfotona.
Palett
Stämpla
- Apple Blue
#0071e3— Fyllda åtgärdsknappar, valda tillstånd – den enda interaktiva kromatiska färgen som används sparsamt för att göra varje utseende meningsfullt. - Link Blue
#0066cc— Markerade handlingsgränser, inbäddade länkar – en mer mättad färg än Apple Blue används där en fylld surfplatta skulle vara för prålig. - Signal Blue
#2997ff— Dekorativa ramar, bildkonturer, ikonkanter – den ljusaste blå färgen i systemet, används för atmosfär snarare än för användarinteraktion.
Neutral
- Carbon
#1d1d1f— Huvudtexten, rubrikramar, navigeringsrader, kortramar – den dominerande bläckfärgen är nästan svart med en lätt antydan till värme. - Frost
#f5f5f7— Sidans arbetsyta, huvudtextbakgrund och sidfotsyta är Apples signaturfärg ljusgrå, lite kallare än rent vitt. - Ice
#f4f8fb— Uttrycksfulla ytfyllningar, subtila nyanser, knapptext på en mörk bakgrund – en subtil blå nyans som livar upp sektionen utan att få den att sticka ut. - Smoke
#333333— Sekundärtext, navigeringsfyllning, knappkanter – En mångsidig neutral färg för kantlinjer och ikoner som behöver mer kraft än en mellangrå färg. - Graphite
#474747— Navigationstext, navigationsgränser, länkgränser - intar en mellanposition mellan Kol och Rök i elementhierarkin. - Ash
#707070— Sidfotstext, listkantlinjer, navigeringskantlinjer, dämpad brödtext – En mellangrå färg för innehåll som behöver finnas närvarande men inte framträdande.
Typografi
från 12 till 56px · 8 steg
- SF Pro Display — ersättning: Inter · konturer 400, 600, 700 · Rubriker och stor text – storlekar över 40 pixlar använder ett visningsformat för en smalare bländare och starkare negativ spårning; 700 är reserverat för reklamlayouter och 400 är för produktnamn i redaktionellt innehåll.
- SF Pro Text — ersättning: Inter · konturer 300, 400, 600 · Brödtext, navigering, knappar, underrubriker — fungerande teckensnitt; 400 för brödtext, 300 för underrubriker och kvalificerade etiketter, 600 för navigeringselement och knapptext; negativt bokstavsavstånd minskar proportionellt mot storleken (från -0,022 em till 12px till -0,01 em till 44px).
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 12px |
| Knappradie | 980px |
| Kortradie | 8px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 64px |
| Sidbredd | 1440px |
AI kommer att bygga din webbplats i Apple -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Studio — En gallerivägg i rörelse. Varje skärm representerar en tyst, grå utställningsyta där typografiska material och överlappande kreativa verk tävlar om uppmärksamhet.
- Mollie — En kashmirdisk, en mörk huvudbok. Lämna gott om vitt utrymme för redaktionell design runt den svarta texten och förstärk sedan produktrelaterade punkter med varma krämer, espressobrune och taktila foton av faktiska betalningsmetoder.
- Basis Theory — Betalterminaler i designstudion. Vitt tekniskt papper, överlappande genomskinliga transaktionslager och ett enda turkost kontrollelement definierar den visuella riktningen.
- CleanShot X — En studio med ett blåbelyst skrivbord. Skapa ett lugnt vitt utrymme runt kompakt svart text och låt sedan de fylliga blå kontrollerna och lager-på-lager-bilderna på Mac-produkter stå i centrum.
- Modern Treasury — En statskassabok på rutat papper. Skapa sidor som liknar ett tyst, vitt operativt register, där kassaflöden visas med fina linjer, märkta noder och exakta, dolda kontroller.
- Basha-Franklin — Ett gallerirutnät under en vit överstycke. Använd en varm #f4ede6-nyans, en subtil svart struktur och asymmetriska kolumner baserade på fotografier som ser ut som en tryckt arkitektonisk portfolio.
- Bajgart Office — Redaktionell tavelvägg. Använd ett stort vitt utrymme där diskreta serif-teckensnitt och portfoliofragment har mer visuell tyngd än förkromade gränssnittselement.
- Heptabase — Ett solbelyst skrivbord. Varma, pappersliknande ytor, kolfärgade kontroller och flytande fönster för forskning skapar känslan av en organiserad arbetsyta snarare än en mjukvarubaserad kontrollpanel.
- Bejamas — Pyjamas – sur kalk genom svart glas. Skapa lugna, ljusgrå redaktionella sidor avbrutna av fängslande svarta paneler där suddiga gröna ljusstrimmor skär ytan.
- Baba — Skötselanteckningar i rött solljus. Skapa breda röda berättande ränder runt intima vita, rosa och krämfärgade informationsytor, med fotografier av människor som det känslomässiga centrumet.
- Grafana Labs — Kontrollrummet på Sunrise Signal Station. En tyst gråvit arbetsyta kombineras med en bred fyrfärgad horisontgradient och precisa blå gränssnittssignaler.
- Kagi — Ett separat läsrum. Skapa ett öppet vitt utrymme runt fet grafitfärgad text, med hjälp av subtila lila accenter och varma pastellfärgade ytor för att bryta upp lugnet.