Substack
pomarańczowy tusz na biurku w redakcji
Substack wygląda jak wysłużony panel informacyjny redakcji – białe płótno, ciepły, niemal czarny tekst i pojedynczy, jaskrawopomarańczowy akcent oznaczający każdy etap tworzenia treści. Hierarchia wizualna opiera się na gęstości, a nie na ozdobnikach: cienkie szare linie oddzielają elementy kanału, awatary są małe, metadane wyciszone, a wzrok czytelnika jest wyćwiczony do skupiania się na pomarańczowym wezwaniu do działania, pomarańczowym logo, pomarańczowym linku „Subskrybuj” i pomarańczowym przycisku „Utwórz”. Powierzchnie są płaskie i swobodne – brak cieni kart i chromowanych elementów panelu – dzięki czemu typografia (kompaktowy chromowany element interfejsu użytkownika w połączeniu z niestandardową szeryfową czcionką nagłówka) przejmuje ciężar redakcyjny. Charakterystyczny styl to stonowane chromowane elementy i żywe, jednokolorowe akcenty: aplikacja do czytania, która sprawia wrażenie narzędzia do publikacji.
Trzykolumnowy układ pulpitu: stały lewy pasek boczny (~200 px, nawigacja z ikonami i etykietami, przyklejony), kanał centralny (maks. szerokość ~600 px, lista postów przewijana pionowo) oraz stały prawy pasek boczny (~300 px, wyszukiwanie + rekomendacje + rejestracja). Kanał centralny to rdzeń redakcyjny — brak kart, tylko posty ułożone jeden na drugim z cienkimi przekładkami i 32 px odstępami między sekcjami. Główny baner znajduje się na górze kanału jako pojedyncza karta o pełnej szerokości. Lewy pasek boczny zawiera logo marki (pomarańczowy znak z nakładającymi się liniami), sześć elementów nawigacyjnych i pomarańczowy przycisk „Utwórz” o pełnej szerokości u dołu. Prawy pasek boczny zawiera pole wyszukiwania, kartę rejestracyjną i listę „Następne” do przeczytania. Nawigacja jest minimalna — brak górnego paska, brak ścieżek nawigacyjnych; pasek boczny JEST nawigacją. Gęstość treści jest wysoka: posty korzystają z metadanych o rozmiarze 12–13 px i tekstu głównego o rozmiarze 15–19 px, co tworzy rytm przypominający gazetę, a nie wrażenie siatki kart na targu.
Zdjęcia to treści generowane przez użytkowników (awatary autorów, miniatury postów, obrazy postów) – Substack nie udostępnia własnych zdjęć dekoracyjnych. Główna karta wykorzystuje gradient od turkusu do zieleni z abstrakcyjnymi elementami ilustracyjnymi (kształty geometryczne, stylizowane obiekty, takie jak długopisy i notatki) jako tło. Miniatury postów na prawym pasku bocznym są małe (64 piksele), zamknięte w promieniu 8 pikseli i pełnią funkcję podglądu listy lektur. Ogólny język wizualny opiera się na tekście: interfejs jest płótnem do czytania, a obrazy pełnią funkcję małych punktów odniesienia, a nie tworzą atmosfery.
Paleta
Marka
- Signal Orange
#ff6719— 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
- Ink
#363737— Tekst główny — tekst główny, nagłówki, tytuły wpisów, znaczniki czasu i nazwiska autorów; ciepły, prawie czarny kolor zamiast czystego #000, aby ułatwić czytanie. - Paper
#ffffff— Większość interfejsu zajmują elementy takie jak płótno strony, powierzchnie kart, pola wprowadzania danych i tło nawigacji. - Charcoal
#232525— Stan najechania kursorem myszy na dodatkowy tekst i łącza z wysokim poziomem zaznaczenia; głębszy niż w trybie atramentowym dla bloków kodu i bloków zaznaczenia. - Stone
#777777— 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. - Ash
#b6b6b6— Cienkie linie obramowania, kontury przycisków, kontury ikon, obramowania wyłączonych elementów sterujących. - Mist
#c8c8c8— Linie podziału, dyskretne tło dla ikon, wypełnianie pustych komórek w formie szkieletu.
Typografia
od 12 do 32px · 5 kroków
- system-ui — wymiana: -apple-system · wytyczne 400, 500, 600 · Główna czcionka interfejsu użytkownika i tekstu głównego jest używana w etykietach nawigacyjnych, przyciskach, treści wiadomości, metadanych, polach wprowadzania danych i wszystkich elementach interfejsu. Kompaktowe rozmiary 12-13 px dla metadanych i 15-19 px dla tekstu głównego tworzą wrażenie gęstego kanału informacyjnego. Grubość czcionki wynosi 400 px dla tekstu głównego, 500 px dla elementów nawigacyjnych i etykiet przycisków oraz 600 px dla wyróżnionych tytułów wiadomości i nagłówków sekcji.
- Cahuenga — wymiana: Charter · wytyczne 500 · Charakterystyczny, ozdobny krój szeryfowy do nagłówków produktów (nagłówki w paskach bocznych, nagłówki kart rejestracyjnych, tekst główny). Średnia grubość i niewielka wysokość linii nadają mu elegancki wygląd bez wrażenia masywności; to jedyny krój, który oprócz pomarańczowego koloru sygnalizuje tożsamość Substack.
- Spectral — wymiana: Charter · wytyczne 400 · Czcionka szeryfowa do długich wpisów – stosowana w czytelniach i w kanałach informacyjnych, aby poprawić czytelność materiałów redakcyjnych. Nieco węższy odstęp między wierszami (1,20) zapewnia komfort czytania akapitów, zachowując jednocześnie zwartą formę typową dla redakcji.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8px |
| Promień przycisku | 9999px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 32px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Substack 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
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- Dub — Panel sterowania z matowego papieru ryżowego firmy Link
- Seline Analytics — Cichy analityczny stół na ciepłym papierze
- Notion — Ciepły papierowy notatnik w południowym słońcu
- Anthropic — Naukowy dziennik terenowy na ciepłym pergaminie — spokojne, kości słoniowe powierzchnie, szeryfowe nagłówki redakcyjne i pojedynczy gliniany akcent, który pojawia się tylko wtedy, gdy zachodzi potrzeba działania.
- Calendly — Ciemnoniebieski tusz na zimnym marmurze
- Augen Pro — Biała prezentacja Apple charakteryzuje się klinicznym, lekkim, elektryzującym błękitem jako jedynym akcentem w monochromatycznej przestrzeni.
- Antimetal — Kronika redakcyjna na kremowym papierze – spokojny poranek w czasopiśmie naukowym, gdzie powściągliwość wyraża pewność siebie, a szeryfy wykonują ciężką pracę
- Perk — Elektryczna limonka na ciepłym papierze pergaminowym
- Ditto — Rozświetlony słońcem warsztat, w którym powstają próbki dzikich kwiatów. Ciepłe, kremowe powierzchnie, żywa żółta baza, głęboki granatowy kolor, organiczne formy kolorystyczne rozkwitające za dziełem.