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
- Ui — klinisk plan på matt papper
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- monopo saigon — En flytande, skimrande glöd bakom den redaktionella tystnaden – ett monokromt redaktionellt galleri som svävar på smält ljus
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- Dub — Links kontrollpanel för matt rispapper
- Seline Analytics — Ett tyst analysbord på varmt papper
- Ventriloc — Ett redaktionellt observatorium för data på varmt papper - en enda orange glöd som framhäver den monokroma precisionen
- Duolingo — Lekfull klassmaskot på vitt papper
- Stripe — En räkenskapsbok skriven med indigobläck på frostat glas
- Notion — En varm pappersbok i middagssolen
- Hyer Aviation — Skymning i cockpiten över pergament. Den bleka gryningshimlen möter den flygkroppsstora serif-logotypen, och en enda varm leraaccent bryter den monokroma återhållsamheten.