Superlist
Nocna przestrzeń robocza z koralowymi żarami – cicha powierzchnia aplikacji w kolorze bakłażana, gdzie pojedyncza ciepła, pomarańczowa iskra sygnalizuje każdą czynność
Superlist posługuje się językiem produktywności w odcieniach fioletu: głęboki bakłażan, ciepły koral jako jedyny kolor podstawowy i duże, bezszeryfowe nagłówki, które oddają całą atmosferę. Interfejs przywołuje wrażenie nocnej, skupionej pracy – cichej, wielowarstwowej i pewnej siebie, z kolorem używanym jedynie jako funkcjonalna interpunkcja w wezwaniach do działania, stanach aktywności i kluczowych punktach. Powierzchnie są warstwowane w subtelnych, ciemnych tonach z fioletowym odcieniem (#181824 → #26253b), unikając czystej czerni, aby zapewnić głębię ciepła, a nie sterylności. Komponenty charakteryzują się hojnymi, zaokrąglonymi kształtami (karty 20 px, przyciski pigułki), miękkimi cieniami i „oddychają” przez wygodne odstępy 10-16 px zamiast ciasnych siatek. Głos nagłówka jest wszystkim: grubość 600 punktów przy 70-88 px i ciasnym odstępie między literami -0,02 em sprawia, że tekst jest typograficzny, a nie interfejsem użytkownika – jest bliższy tekstowi redakcyjnemu niż SaaS.
Ciemne sekcje zajmują całą szerokość strony, z wyśrodkowanymi kontenerami treści o maksymalnej szerokości. Sekcja główna jest wyśrodkowana w pionie i zawiera nagłówek, podtekst oraz wezwanie do działania (CTA), a następnie duży zrzut ekranu produktu nakładający się na następną sekcję. W kolejnych sekcjach naprzemiennie znajdują się wyśrodkowane bloki tekstu i siatki kart. Sekcja recenzji wykorzystuje trzykolumnową siatkę z kartami recenzji i 16 rzędami. Nawigacja to pojedynczy górny pasek z logo po lewej stronie, wyśrodkowanymi linkami i akcjami logowania po prawej – bez stałego paska bocznego ani megamenu. Rzędy między sekcjami są obszerne (16 rzędów), tworząc przestrzenny, redakcyjny rytm zamiast gęstej siatki produktów.
Przestrzeń wizualną zdominowały zrzuty ekranu produktów – duża ramka z zaokrąglonymi rogami, prezentująca interfejs aplikacji, wypełnia sekcje główną i drugorzędne. Zdjęcia są minimalistyczne, służą jedynie jako awatary użytkowników lub podglądy multimediów w aplikacji (na przykład zdjęcie koncertu w prawym panelu makiety produktu). Loga na pasku zaufania to płaskie, stonowane, białe symbole tekstowe. Brakuje dekoracyjnych ilustracji, abstrakcyjnych grafik ani renderów 3D. Strategia wizualna polega na zaprezentowaniu produktu w dużej skali, pozwoleniu typografii na odegranie emocjonalnej roli i użyciu koralowego jako jedynego koloru akcentującego.
Paleta
Marka
- Coral Ember
#ff4a36— Pomarańczowy jest używany jako drugorzędny akcent w przypadku detali dekoracyjnych i do podkreślania nieregularnych sygnałów. Nie powinien być używany jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Aubergine Canvas
#181824— Tło strony, czyli główny element graficzny, ma ciepły, ciemny odcień, który zastępuje czystą czerń, przez co interfejs użytkownika wydaje się warstwowy, a nie płaski. - Elevated Plum
#26253b— Powierzchnie kart, pola wprowadzania danych, kontenery nawigacyjne — o krok łatwiejsze niż na płótnie tworzenie głębi bez widocznych granic. - Pure White
#ffffff— Główne nagłówki, tekst przycisków i kontury ikon — maksymalny kontrast na ciemnym płótnie. - Fog Text
#696f81— Tekst główny, nagłówki drugorzędne oraz stonowane obramowania charakteryzują się współczynnikiem kontrastu 7:1, co umożliwia komfortowe czytanie na tle w kolorze bakłażana. - Ash Text
#8e8da0— Kolor neutralny jest obsługiwany dla drugorzędnych elementów interfejsu użytkownika, separatorów i wyciszonych etykiet. Nie należy go używać jako koloru podstawowego w przypadku wezwań do działania. - Mist Highlight
#a3a3a7— Subtelne obramowania, podziały i nieaktywne elementy nawigacyjne tworzą subtelny, neutralny ton, który nadal wyróżnia się na płótnie.
Typografia
od 12 do 88px · 9 kroków
- sans-serif — wymiana: Inter · wytyczne 400 · bezszeryfowe - znalezione w wyodrębnionych danych, ale nieopisane przez sztuczną inteligencję.
- Haffer XH SemiBold — wymiana: Inter Tight · wytyczne 400, 600 · Podstawowy krój czcionki do wyświetlania i nagłówków. Używany w rozmiarze 70–88 px dla nagłówków głównych, z odstępem między literami -0,02 em i grubością 600. Wąskie odstępy między literami i duża wysokość liter nadają nagłówkom charakter redakcyjny, przez co ciemny interfejs przypomina bardziej okładkę magazynu niż pulpit. Zastąp go czcionką Inter Tight lub General Sans o pogrubionej grubości.
- Jersey 10 — wymiana: Anybody · wytyczne 400 · Duża, dekoracyjna czcionka do cyfr akcentowych i wyróżnień. Używana oszczędnie w bardzo dużych rozmiarach, aby tworzyć akcenty typograficzne. Można ją zastąpić czcionką Anybody lub Cabinet Grotesk.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 10-16px |
| Promień przycisku | 100px |
| Promień karty | 20px |
| Cienie | miękkie cienie |
| Między sekcjami | 80px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Superlist i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- DNA — Obserwatorium Północne widziane przez soczewkę cząsteczkową
- Abetterlou — Sparks on Saddle Leather – ciepła, kremowa czcionka, która lśni na głębokim, kawowo-czarnym tle, z bursztynowo-złotymi przyciskami, które sprawiają wrażenie, jakby gorący metal został wciśnięty w stronę.
- Galileo-ft — Głęboko kosmiczny pokład dowodzenia z elektrycznie niebieskimi sygnałami
- Decide AI — Obserwatorium o północy - sygnał idealny
- Redis Agency — Pracownia redakcyjna, otwarta po godzinach, to ciemne, smoliście czarne miejsce, w którym cała praca nad marką wykonywana jest za pomocą czcionek szeryfowych i pojedynczej czerwonej rzodkiewki.
- Spellbook — Północny sąd rozświetlony koralowym atramentem – ciemna powierzchnia redakcyjna, na której słychać jedynie ciepłe, pomarańczowe pociągnięcia piórem
- Linear — instrument o precyzji północy
- Origin Financial — Północnoniebieska galeria cichego przepychu. Ciche, niemal ciemne pomieszczenie, w którym duże czcionki szeryfowe i kilka podświetlonych, kolorowych paneli stwarza wrażenie, że finanse to starannie wyselekcjonowane dzieło sztuki.
- Hyperstudio — Wzór wyryto w obsydianie. Tekst i cienkie linie otaczają białą, czystą czerń, z okazjonalnymi złotymi znakami kompasu wskazującymi drogę.
- Air — rzeźba „Północne niebo przez szkło”
- Raycast — Centrum dowodzenia Midnight, Coral Neon
- dope.security — Terminal północny z fioletowymi sygnalizatorami