2020–idag
Neomorphism
Mjuka maskiner. Gränssnitt du vill röra vid.
Principer
Extruderat, inte platt
Varje element är tryckt ut ur bakgrunden eller pressat in i den. Det finns ingen platt yta — bara upphöjda knappar och nedsänkta inmatningsfält. Gränssnittet har fysiskt djup.
Det här uppnås helt genom skugga: en ljus skugga på ena sidan, en mörk skugga på den andra. Bakgrundsfärgen är densamma överallt — bara ljus avslöjar formen.
Monokromatisk yta
Bakgrund och förgrund delar samma färg. Det finns inget 'kort' med en annan bakgrund — bara samma yta, skulpterad av ljus och skugga till olika elevationer.
Denna begränsning är radikal: färg kan inte skapa hierarki. Bara skugga kan.
Taktil interaktion
Knappar ser tryckbara ut. Vid klick bör de tyckas sjunka in i ytan. Det upphöjda tillståndet blir ett intryckt tillstånd — skuggor inverteras.
Det här skapar en fysisk metafor starkare än någon annan digital stil: du klickar inte på pixlar, du trycker på mjukt material.
Minimal färg
Färg används enbart som accent — en enda nyans som markerar interaktiva eller viktiga element. Allt annat är grått, skulpterat av ljus.
Varför denna stil finns
Neomorphism (ett teleskopord av 'new' och 'skeuomorphism') framträdde i slutet av 2019 när designern Alexander Plyuto postade ett koncept på Dribbble som blev viralt. Det föreslog en mellanväg mellan flat design och skeuomorfism.
Stilen frågar: tänk om vi behöll flat designs enkelhet men tog tillbaka fysiskt djup? Inte genom realistiska texturer (gammal skeuomorfism) utan genom rent ljus och skugga.
Where it appeared
- Dribbble-koncept (2019–2020) — stilen exploderade som designövning
- Smart home-gränssnitt — fysiska kontroller renderade som mjuka, tryckbara ytor
- Dashboard-gränssnitt — datavisualisering med taktila, upphöjda kort
Legacy
Neomorphism visade sig kontroversiellt — vackert i mockups, problematiskt i produktion (tillgänglighetsproblem med lågkontrastramar). Men det utvidgade det digitala djupets vokabulär.
Dess inflytande lever vidare på subtila sätt: mjuka skuggor, monokromatiska ytor och idén att gränssnitt kan kännas taktila utan att vara skeuomorfa.
Typografi
Neomorphism-typografi är ren och geometrisk. Typsnittet får inte konkurrera med skuggeffekterna — det bör kännas inbäddat i ytan, som en del av samma material.
- Geometrisk sans-serif — ren, modern och diskret.
- Medelvikter — inte för fett (skulle kännas tungt), inte för tunt (skulle kännas frikopplat från den taktila ytan).
- Subtil färgskillnad — text är mörkare än ytan men inte svart. Den känns tryckt på materialet.
Färg
Neomorphism-färg är nästan ingen färg. Hela gränssnittet är en enda nyans vid olika skuggnivåer. Accentfärgen är det enda undantaget — och den måste användas sparsamt.
- En enda bakgrundsnyans — allt är samma färg. Djup uppstår genom skugga, inte genom färgskillnad.
- Ljusa och mörka skuggor — vit skugga på ena sidan, mörk skugga på den andra. Det här skapar 3D-illusionen.
- En accent — en enda mättad färg för interaktiva element.
Former
Neomorphism-former definieras helt av skugga, inte av ram. Det finns inga synliga ramar — bara samspelet mellan ljusa och mörka skuggor som får element att framstå som upphöjda eller nedsänkta.
Border-radius är generös (matchande den mjuka skuggestetiken) och konsekvent över alla element.
- Inga ramar — ramar ersätts av skuggpar. Kanten är antydd, inte ritad.
- Konsekvent radie — 12px till 20px överallt. Enhetlighet förstärker illusionen av 'ett enda material'.
- Dubbla skuggor — varje upphöjt element har en ljus skugga (uppe-vänster) och en mörk skugga (nere-höger).
- Inset för intryckta tillstånd — interaktiva element använder inset-skuggor när de är aktiva.
Kontrast
Neomorphism-kontrast är skuggbaserad. Inte färgkontrast (som Memphis), inte värdekontrast (som Dark Luxury). Här är den enda kontrasten mellan upphöjt och nedsänkt — mellan ljus skugga och mörk skugga.
Ljus skugga och mörk skugga
Det fundamentala paret. En vit skugga på ena sidan, en mörk skugga på den andra. Tillsammans skapar de illusionen av en yta som tryckts ut ur (eller pressats in i) bakgrunden. Det här är den enda kontrastmekanismen.
Upphöjt och intryckt
En knapp i sitt standardtillstånd är upphöjd (yttre skuggor). Vid klick blir den intryckt (inre skuggor). Kontrasten mellan dessa två tillstånd är hela interaktionsspråket.
Yta och accent
Den monokroma ytan mot en enda mättad accentfärg. Accenten är den enda 'verkliga' färgen — allt annat är grått skulpterat av ljus. Det här gör accenten extraordinärt kraftfull.
Rytm
Neomorphism-rytm är enhetlig och lugn. Varje element har samma skuggbehandling. Varje kort har samma radie. Rytmen uppstår genom upprepning av identiska former — som plattor på en vägg.
Platterutnätet
Element upprepas vid regelbundna intervall med identiska proportioner. Rytmen är arkitektonisk — som tegelstenar, som kakel, som en reliefskulptur. Varje element har samma form, samma storlek och samma skugga.
Skuggkonsekvens
Varje upphöjt element har samma skuggoffset, samma oskärpa och samma färger. Denna absoluta konsekvens är vad som skapar illusionen av 'ett enda material'. En enda inkonsekvent skugga förstör allt.
Generösa mellanrum
Element behöver utrymme mellan sig — inte för andning (som Nordic) utan för skuggutrymme. Skuggor behöver plats att renderas. Tät placering orsakar skuggkollisioner som förstör 3D-illusionen.
Hierarki
Neomorphism-hierarki är den mest begränsade på denna sajt. Utan färgvariation och utan ramvariation måste hierarki uppstå från enbart skuggdjup och storlek.
Skuggdjup
Större skuggor = mer upphöjt = viktigare. Ett kort med 8px skuggoffset är 'högre' än ett med 4px. Hierarkin är bokstavligen fysisk — närmare betraktaren betyder viktigare.
Storlek
Större element är viktigare. Det här är den enklast möjliga hierarkin — och i neomorphism är enkelhet obligatorisk. Stilen kan inte stödja komplexa hierarkiska system.
Accentfärgen
Den enda accentfärgen markerar det viktigaste interaktiva elementet. Eftersom den är den enda färgen, bär den enorm tyngd. Använd den en gång per vy — aldrig två gånger.
Signaturegenskaper
Neomorphism identifieras av sin materialillusion — känslan av att gränssnittet är hugget ur ett enda stycke mjukt material.
Den dubbla skuggan
Ljus skugga (uppe-vänster) + mörk skugga (nere-höger). Detta par är hela det visuella systemet. Utan det existerar inte neomorphism. Med det blir platta rektanglar tredimensionella objekt.
Monokrom yta
Bakgrund och förgrund har samma färg. Det här är den radikala begränsningen. Inget kort har en annan bakgrund. Ingen panel är ljusare eller mörkare. Djup uppstår enbart genom skugga, aldrig genom färg.
En enda ljuskälla
Alla skuggor pekar åt samma håll — antydande en enda ljuskälla (typiskt uppe-vänster). Ändra riktningen på ett element och den fysiska metaforen kollapsar. Konsekvens är icke-förhandlingsbar.
Tillgänglighetsproblemet
Neomorphisms största svaghet är också dess signatur: låg kontrast. Sammanfärgade ytor med bara skugga som separation kan vara svåra att uppfatta för användare med synnedsättning. Det här är inte en brist att dölja — det är en begränsning att erkänna. Stilen är vacker men inte universellt tillgänglig.
Rymd
Rymd i neomorphism måste vara generös — skuggorna behöver rum att andas. Element för nära varandra skapar skuggkollisioner som bryter 3D-illusionen. Varje upphöjt element behöver tydlig luft runt sig.
Ljus
Ljus i neomorphism kommer från en konsekvent riktning — typiskt uppe-vänster. Denna enda ljuskälla skapar de skuggpar som definierar varje element. Ändra ljusriktningen och hela gränssnittet måste ändras med den.
Hur denna stil går sönder
Neomorphism är den sköraste stilen i denna samling. Små misstag förstör illusionen fullständigt.
Olika bakgrundsfärger för kort
I det ögonblick ett kort har en annan bakgrund än sin behållare, bryts illusionen av 'ett enda material'. Allt måste vara samma färg — bara skugga skapar separation.
Synliga ramar
En ram säger 'det här är ett separat element.' Neomorphism säger 'det här är samma yta, upphöjd.' Dessa är motstridiga budskap.
Inkonsekvent ljusriktning
Om ett element har ljus uppifrån-vänster och ett annat nerifrån-höger, kollapsar den fysiska metaforen. En ljuskälla, alltid.
Lågkontrasttext
Det största tillgänglighetsproblemet. Text på en sammanfärgad bakgrund med bara skugga som separation kan vara svår att läsa. Säkerställ tillräckliga kontrastförhållanden.