Superlist
En nattlig arbetsyta med korallglöd – en tyst aubergine-appyta där en enda varm orange gnista signalerar varje handling
Superlist använder ett produktivitetsspråk i midnattslila toner: djup aubergine, varm korall som enda primärfärg och stora sans-serif-rubriker som fångar hela atmosfären. Gränssnittet framkallar känslan av fokuserat arbete sent på kvällen – tyst, lager på lager och självsäkert, med färg som endast används som funktionell interpunktion vid uppmaningar till handling, aktiva tillstånd och nyckelpunkter. Ytorna är lager på lager i subtila mörka toner med en lila underton (#181824 → #26253b), och ren svart undviks för att säkerställa att djupet känns varmt snarare än sterilt. Komponenterna har generösa rundade former (20px-kort, pillerknappar), mjuka skuggor och "andas" genom bekväma 10-16px-mellanrum snarare än snäva rutnät. Rubrikens röst är allt: en vikt på 600 punkter vid 70-88px med ett snävt bokstavsavstånd på -0,02em behandlar texten som typografisk snarare än användargränssnitt – det är närmare redaktionell text än SaaS.
Mörka avsnitt sträcker sig över hela sidans bredd, med centrerade innehållsbehållare med maximal bredd. Huvudavsnittet är vertikalt centrerat och innehåller en rubrik, undertext och uppmaning till handling (CTA), följt av en stor produktskärmdump som överlappar nästa avsnitt. Efterföljande avsnitt växlar mellan centrerade textblock och kortrutnät. Recensionsavsnittet använder ett rutnät med tre kolumner med recensionskort och 16 mellanrum. Navigeringen är en enda övre stapel med en logotyp till vänster, centrerade länkar och inloggningsåtgärder till höger – ingen fast sidofält eller megameny. Mellanrummen mellan avsnitten är generösa (16 mellanrum), vilket skapar en rymlig, redaktionell rytm snarare än ett tätt produktrutnät.
Det visuella utrymmet domineras av produktskärmdumpar – en stor ram med rundade hörn, som visar det faktiska appgränssnittet, fyller huvud- och sekundärsektionerna. Fotona är minimala och används endast som användaravatarer eller förhandsvisningar av media i appen (till exempel konsertbilden i den högra panelen av produktmockupen). Logotyperna i förtroendefältet är platta, dämpade vita textsymboler. Det finns inga dekorativa illustrationer, ingen abstrakt grafik, inga 3D-renderingar. Den visuella strategin är att visa upp produkten i stor skala, låta typografin göra det emotionella arbetet och använda korall som enda accentfärg.
Palett
Stämpla
- Coral Ember
#ff4a36— Orange används som en sekundär accentfärg för dekorativa detaljer och för att framhäva ovanliga signaler. Den bör inte användas som primärfärg för uppmaningar till handling.
Neutral
- Aubergine Canvas
#181824— Sidbakgrunden, den huvudsakliga arbetsytan, har en varm, mörk nyans som ersätter rent svart, vilket gör att användargränssnittet verkar lager på lager snarare än platt. - Elevated Plum
#26253b— Kortytor, inmatningsfält, navigeringsbehållare – ett steg enklare än med arbetsyta för att skapa djup utan en synlig gräns. - Pure White
#ffffff— Huvudrubriker, knapptext och ikonkonturer – maximal kontrast på en mörk arbetsyta. - Fog Text
#696f81— Huvudtexten, sekundära rubriker och dämpade ramar har alla ett kontrastförhållande på 7:1 för bekväm läsning mot en auberginefärgad bakgrund. - Ash Text
#8e8da0— En neutral färg stöds för sekundära UI-element, avdelare och dämpade etiketter. Den bör inte användas som primärfärg för uppmaningar till handling. - Mist Highlight
#a3a3a7— Subtila ramar, avdelare och inaktiva navigeringselement skapar en subtil neutral ton som fortfarande sticker ut mot arbetsytan.
Typografi
från 12 till 88px · 9 steg
- sans-serif — ersättning: Inter · konturer 400 · sans-serif - finns i den extraherade datan men beskrivs inte av AI:n.
- Haffer XH SemiBold — ersättning: Inter Tight · konturer 400, 600 · Det primära teckensnittet för visning och rubriker. Det används i storleken 70–88 pixlar för huvudrubriker med ett bokstavsavstånd på -0,02 em och en vikt på 600. Det smala bokstavsavståndet och den stora bokstavshöjden ger rubrikerna en redaktionell vikt, vilket gör att det mörka gränssnittet ser mer ut som ett tidningsomslag än en instrumentpanel. Ersätt med Inter Tight eller General Sans i fetstil.
- Jersey 10 — ersättning: Anybody · konturer 400 · Ett stort, dekorativt typsnitt för accentnummer och markeringar. Används sparsamt vid mycket stora storlekar för att skapa typografiska accenter. Kan ersättas med Anybody eller Cabinet Grotesk.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 10-16px |
| Knappradie | 100px |
| Kortradie | 20px |
| Skuggor | mjuka skuggor |
| Mellan sektioner | 80px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Superlist -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
- DNA — Midnattsobservatoriet sett genom en partikellins
- Abetterlou — Sparks on Saddle Leather – Ett varmt, krämigt typsnitt som glöder mot en djup kaffesvart bakgrund, med bärnstensfärgade guldfärgade knappar som känns som het metall tryckt in i sidan.
- Galileo-ft — Ett kommandodäck för djuprymden med elektriska blå signaler
- Decide AI — Observatorium vid midnatt - myntsignal
- Redis Agency — Redaktionsverkstaden, öppen efter stängning, är en becksvart plats där allt varumärkesarbete görs med serif-typsnitt och en enda röd rädisa.
- Spellbook — En rättssal vid midnatt upplyst med korallfärg – en mörk redaktionell yta där det enda ljudet är det varma orangea pennstrecket
- Linear — midnattsprecisionsinstrument
- Origin Financial — Ett midnattsgalleri av tyst överdådighet. Ett tyst, nästan mörkt rum där stora serif-typsnitt och några upplysta färgade paneler skapar känslan av att finans är ett noggrant utvalt konstverk.
- Hyperstudio — Mönstret är graverat i obsidian. Text och fina linjer ramar in ett vitt område av rent svart, med enstaka gyllene kompassmärken som visar vägen.
- Air — skulpturen "Midnattshimmel genom glas"
- Raycast — Midnattskommandocentralen, Coral Neon
- dope.security — Midnattsterminal med lila fyrbåkar