Superhuman
gyllene timmen redaktionell panel
Superhuman befinner sig i skärningspunkten mellan redaktionell fotografering och mjukvarugränssnitt – en varm, pergamentliknande duk (aldrig helt vit) ramar in rödbruna varumärkeselement och livfulla lila accenter. Rubriker, i teckensnitt 460, viskar snarare än skriker, vilket gör att helsidesfilmfotografering kan göra det tunga lyftet, medan genomskinliga produktgränssnittskort svävar som glas ovanför bilderna. Paletten förblir lugn och redaktionell för det mesta: krämfärgade ytor, kolfärgad text, subtila varmgrå kanter och generöst avstånd mellan elementen, med färg reserverad för avsiktlig varumärkesinterpunktion – en enda rödbrun uppmaning till handling, lila länkar, en ljuslila tilläggsknapp. Systemet undviker medvetet starka skuggor och gradienter på användargränssnittsytor. Djupet uppnås genom lagerfotografering och subtil bakgrundsoskärpa i titeln, snarare än genom en staplingseffekt.
Huvudelementet är ett fotografi i full bredd med en centrerad rubrik (48–64 pixlar/460) och en enda uppmaning till handling fylld med en bild av vin, med flytande genomskinliga produktgränssnittskort överlagrade på vänster och höger kant. Under huvudelementet finns en vitrandig logotypremsa (6 celler per rad, maximal bredd begränsad), sedan en fliksektion med vita kortytor på pergamentduk. En mörk turkos rand bryter rytmen ungefär två tredjedelar av sidan – full bredd, två kolumner (bild till vänster, text till höger) – vilket skapar den enda tonala kontrasten när du scrollar. En tonad atmosfärisk rand följer. Det vertikala avståndet mellan sektionerna är 64–96 pixlar. Den maximala innehållsbredden är ~1200 pixlar centrerad, med huvudelementet och den mörka randen som sträcker sig över hela visningsportens bredd. Navigeringen är en enda fast rubrik med en suddig bakgrund; ingen sidofält, ingen megameny. Sidfoten är en vinröd sida i full bredd med en layout med flera kolumner av länkar. Den övergripande rytmen är: huvudbild → lugnt vitt/krämfärgat innehåll → mörk rand med huvudbilden → atmosfärisk gradient → vinröd sidfot, alternerande ljusa och mörka ränder för att skapa ett redaktionellt tempo.
Det primära visuella elementet är filmfotografi: ett porträtt i full bredd mot en öppen himmel fungerar som fokuspunkt, med en andra atmosfärisk rand placerad längre ner på sidan. Bilden är varmt tonad, subtilt dämpad och tagen i profil, vilket påminner om en gyllene timme, vilket skapar en mer redaktionell än företagskänsla. En mörk rand med genomskinliga geometriska rektanglar och handskrivna inskriptioner läggs ovanpå ett fotografi av en man försjunken i tankar – ett collage av ytor snarare än en enda bild. Användargränssnittet presenteras som flytande glaskort ovanpå fotografiet, snarare än som separata skärmdumpar. Det finns inga stockillustrationer, inga 3D-renderingar och inga abstrakta dekorativa former, förutom den gradienta atmosfäriska randen. Ikonerna är minimalistiska monokroma linjeikoner, ~16-20px breda, med en enda bredd som motsvarar textvikten på 460 punkter.
Palett
Stämpla
- Midnight Wine
#421d24— De viktigaste åtgärdsknapparna, annonsbannern och sidfoten är i en varm, nästan svart vinröd färg som känns mer som bläck än rött, vilket förankrar färgpaletten utan att vara överväldigande. - Royal Violet
#714cb6— Lila används för att markera länkar, taggar och korta fraser. Den bör inte användas som primärfärg för uppmaningar till handling.
Neutral
- Lilac Mist
#d4c7ff— Den sekundära ytfyllningen, ljusikonerna och bakgrunderna med spökknappar har alla en dämpad lila färg som antyder varumärkets stil utan att dra till sig onödig uppmärksamhet. - Deep Lagoon
#0c4243— Den mörka bakgrunden för remsan, som används som det huvudsakliga berättande elementet, är den enda mörka ytan i systemet, kombinerad med ett överlagrat geometriskt mönster. - Warm Parchment
#f2f0eb— Sidans arbetsyta är det dominerande elementet; en varm krämfärg ersätter vit som bas, vilket ger hela systemet en redaktionell värme. - Soft Mist
#e3e3e2— Fina kanter, kortkonturer, skiljelinjer – en varm, ljusgrå nyans som smälter samman med pergamentet men tydligt definierar kanterna. - Ink Charcoal
#292827— Brödtext, rubriker, ikonkonturer - en varm, nästan svart färg med tillräckligt brunt för att kännas som bläck på papper, aldrig kallt #000 - Stone Gray
#666666— Sekundär brödtext, stödtexter, diskreta beskrivningar – en enda mellangrå färg, använd sparsamt för att aldrig konkurrera med huvudtexten.
Typografi
från 12 till 64px · 8 steg
- Super Sans VF — ersättning: Inter (closest open equivalent for variable weight range) · konturer 460, 500, 540, 600, 700 · Ett enda teckensnitt i hela systemet. Axelvariabler sträcker sig från 460 (ett signaturteckensnitt med lätt beskuret text för all stor rubriktext) till 540 (betona brödtexter) och 700 (små, fetstilta bildtexter). En specialdesignad visuell kurva gör att rubriker med vikten 460 verkar mer avsiktliga än slumpmässiga – vid 48–64 pixlar med snävt bokstavsavstånd uppfattas den "lätt beskurna" effekten som självsäker snarare än tunn.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 8px |
| Knappradie | 16px |
| Kortradie | 16px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 64-96px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Superhuman -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
- AI for Business — Brutalistiskt redaktionellt showroom i varma gråtoner
- Jeton — Ledare om fintech på varm marmor
- Airtable — Ett mysigt seminarium med kapitel markerade i olika färger
- Osmo — Utvecklarmuseet på grå betong
- Linktr — Redaktionella affischer är staplade som godis. Webbplatsen är designad i färgblock, med ljusgröna rubriker mot koboltblå väggar och vita pillerformade navigeringselement som svävar över vinröda fält.
- Outsource Consultants — Ett storformatsark på benpapper. En monografisk estetik, där en enda ljus fläck av indigo avbryter det annars varma, typografiskt maximalistiska rutnätet.
- Streamtime — Taktil kreativ moodboard - Designer scrapbookingbord
- Switch-Lit — Redaktionellt rutnät tryckt med bläck på krämfärgat papper
- HubSpot — En varm krämfärgad pappersfärg med en enda orange accent. HubSpot liknar en designtidning tryckt på kraftigt papper – rubriker med serifmönster, sidor i varmt krämfärgat mönster och en enda eldig orange accent som framhäver bara de viktigaste punkterna.
- Granola — Fältanteckningar på varmt vellum – Granola läses som en sliten Moleskine-anteckningsbok öppnad på ett solbelyst skrivbord: serif-rubriker ger en känsla av soliditet, organiska gröna accenter som växtbaserat bläck och fina linjer i kortens marginaler som liknar handskrivna anteckningar.
- Secure — Ett samtal på ett europeiskt kafé i mjukt dagsljus är en varm och elegant tolkning av videosamtal, där rubriker med serif-motiv läses som en tankeväckande tidningsartikel snarare än en sida om en teknisk produkt.
- Mockups made easy — Redaktionell designstudio på vitt papper