Superlist
En nattlig arbeidsplass med koraller – en stille aubergine-appflate hvor en enkelt varm oransje gnist signaliserer hver handling
Superlist bruker et produktivitetsspråk i midnattslilla toner: dyp aubergine, varm korall som eneste primærfarge og store sans-serif-overskrifter som fanger hele atmosfæren. Grensesnittet fremkaller følelsen av fokusert arbeid sent på kvelden – stille, lagdelt og selvsikkert, med farger kun brukt som funksjonell tegnsetting på handlingsfremmende oppfordringer, aktive tilstander og nøkkelpunkter. Overflatene er lagdelt i subtile mørke toner med en lilla undertone (#181824 → #26253b), og unngår ren svart for å sikre at dybden føles varm snarere enn steril. Komponentene har sjenerøse avrundede former (20 pikslers kort, pilleknapper), myke skygger og "puster" gjennom komfortable 10–16 pikslers mellomrom i stedet for tette rutenett. Overskriftens stemme er alt: en vekt på 600 poeng ved 70–88 piksler med tett bokstavavstand på -0,02 em behandler teksten som typografisk snarere enn brukergrensesnitt – det er nærmere redaksjonell tekst enn SaaS.
Mørke seksjoner strekker seg over hele sidens bredde, med sentrerte innholdsbeholdere med maksimal bredde. Hovedseksjonen er vertikalt sentrert og inneholder en overskrift, undertekst og en handlingsfremmende oppfordring (CTA), etterfulgt av et stort produktskjermbilde som overlapper neste seksjon. Etterfølgende seksjoner veksler mellom sentrerte tekstblokker og kortrutenett. Anmeldelsesseksjonen bruker et rutenett med tre kolonner med anmeldelseskort og 16 innfellingsmarginer. Navigasjonen er en enkelt topplinje med en logo til venstre, sentrerte lenker og påloggingshandlinger til høyre – ingen fast sidefelt eller megameny. Innfellingsmarginene mellom seksjonene er generøse (16 innfellingsmarginer), noe som skaper en romslig, redaksjonell rytme i stedet for et tett produktrutenett.
Det visuelle rommet domineres av produktskjermbilder – en stor ramme med avrundede hjørner, som viser frem det faktiske appgrensesnittet, fyller hoved- og sekundærdelen. Bildene er minimale og brukes kun som brukeravatarer eller forhåndsvisninger av media i appen (for eksempel konsertbildet i høyre panel av produktmodellen). Logoer på tillitslinjen er flate, dempede hvite tekstsymboler. Det er ingen dekorative illustrasjoner, ingen abstrakt grafikk, ingen 3D-gjengivelser. Den visuelle strategien er å vise frem produktet i stor skala, la typografien gjøre det emosjonelle arbeidet og bruke korall som eneste aksentfarge.
Palett
Merke
- Coral Ember
#ff4a36— Oransje brukes som en sekundær aksent for dekorative detaljer og for å fremheve sjeldne signaler. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordringer.
Nøytral
- Aubergine Canvas
#181824— Sidens bakgrunn, hovedlerretet, har en varm, mørk nyanse som erstatter ren svart, noe som gjør at brukergrensesnittet virker lagdelt i stedet for flatt. - Elevated Plum
#26253b— Kortflater, inndatafelt, navigasjonsbeholdere – ett trinn enklere enn lerret for å skape dybde uten en synlig grense. - Pure White
#ffffff— Hovedoverskrifter, knappetekst og ikonomriss – maksimal kontrast på et mørkt lerret. - Fog Text
#696f81— Hovedteksten, sekundære overskrifter og de dempede rammene har et kontrastforhold på 7:1 for komfortabel lesing mot en auberginefarget bakgrunn. - Ash Text
#8e8da0— En nøytral farge støttes for sekundære UI-elementer, skillevegger og dempede etiketter. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Mist Highlight
#a3a3a7— Subtile rammer, skillevegger og inaktive navigasjonselementer skaper en subtil nøytral tone som fortsatt skiller seg ut mot lerretet.
Typografi
fra 12 til 88 piksler · 9 trinn
- sans-serif — erstatning: Inter · omriss 400 · sans-serif – funnet i de utvunnede dataene, men ikke beskrevet av AI-en.
- Haffer XH SemiBold — erstatning: Inter Tight · omriss 400, 600 · Primærskrifttypen for visning og overskrifter. Den brukes i en størrelse på 70–88 piksler for hovedoverskrifter med en bokstavavstand på -0,02 em og en vekt på 600. Den smale bokstavavstanden og den store bokstavhøyden gir overskriftene en redaksjonell vekt, noe som gjør at det mørke grensesnittet ser mer ut som et magasinforside enn et dashbord. Erstatt med Inter Tight eller General Sans i fet skrift.
- Jersey 10 — erstatning: Anybody · omriss 400 · En stor, dekorativ skrifttype for aksenttall og uthevinger. Brukes sparsomt i svært store størrelser for å lage typografiske aksenter. Kan erstattes med Anybody eller Cabinet Grotesk.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 10-16px |
| Knapperadius | 100px |
| Kortradius | 20px |
| Skygger | myke skygger |
| Mellom seksjoner | 80px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Superlist -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- DNA — Midnattsobservatoriet sett gjennom en partikkellinse
- Abetterlou — Sparks on Saddle Leather – en varm, kremet skrift som gløder mot en dyp kaffesvart bakgrunn, med ravgule knapper som føles som varmt metall presset inn i siden.
- Galileo-ft — Et kommandodekk for dypt rom med elektriske blå signaler
- Decide AI — Observatorium ved midnatt - myntsignal
- Redis Agency — Redaksjonsverkstedet, åpent etter stengetid, er et bekmørkt sted hvor alt merkevarebyggingsarbeidet gjøres med serif-fonter og en enkelt rød reddik.
- Spellbook — En rettssal ved midnatt opplyst med korallblekk – en mørk redaksjonell overflate der den eneste lyden er det varme oransje pennestrøket
- AWE — Et robotobservatorium etter midnatt. Lag svarte, gallerilignende skjermer der blek redaksjonell skrift flyter over AI-drevne bilder og liten dashbordtekst.
- Graphite — Lysende endenett. Lag mørke, kantede produktflater rundt presise hvite typografiske markeringer og sporadiske glimt av spektrallys.
- Featurebase — En lilla opplyst konsoll. Se for deg hver side som en mørk, stille scene, med et lysende arbeidsområde for produktet som kommer ut fra den nederste kanten.
- BAM Photographers — En galleriprojeksjon etter midnatt. Det svarte lerretet, de forstørrede hvite bokstavene og de filmatiske bildeparene skaper følelsen av at nettstedet er mer en projeksjonsportefølje enn et typisk redaksjonelt rutenett.
- Nuxt — Terminalglød i det dype verdensrommet. Lag mørke, lukkede grensesnittplan der grønt fremstår som et strømdrevet signal mot blåsvarte overflater.
- Linear — midnattspresisjonsinstrument