Superhuman
panel redakcyjny złotej godziny
Superhuman łączy w sobie elementy fotografii redakcyjnej i interfejsu użytkownika oprogramowania – ciepłe, pergaminowe płótno (nigdy czysto białe) obramowuje bordowe elementy brandingu i żywe fioletowe akcenty. Nagłówki, zapisane czcionką 460, szepczą, a nie krzyczą, pozwalając filmowym fotografiom na całą stronę, podczas gdy przezroczyste karty interfejsu użytkownika produktów unoszą się niczym szkło nad obrazami. Paleta barw pozostaje stonowana i redakcyjna przez większość czasu: kremowe powierzchnie, grafitowy tekst, subtelne, ciepłe, szare obramowania i duże odstępy między elementami, z kolorem zarezerwowanym dla przemyślanej interpunkcji marki – pojedyncze bordowe wezwanie do działania, fioletowe linki i jasnoliliowy przycisk dodatku. System celowo unika mocnych cieni i gradientów na powierzchniach interfejsu; głębię uzyskuje się dzięki warstwowej fotografii i subtelnemu rozmyciu tła w tytule, a nie efektowi nakładania się.
Głównym elementem jest pełnoszeroka fotografia z wyśrodkowanym nagłówkiem (48-64px/460) i pojedynczym wezwaniem do działania wypełnionym obrazem wina, z pływającymi półprzezroczystymi kartami produktu UI nałożonymi na lewą i prawą krawędź. Poniżej głównego elementu znajduje się biały pasek z logo (6 komórek na wiersz, maksymalna szerokość ograniczona), a następnie sekcja zakładek z białymi powierzchniami kart na pergaminowym płótnie. Ciemnoturkusowy pasek przerywa rytm mniej więcej na dwóch trzecich strony — na całej szerokości, dwie kolumny (obraz po lewej, tekst po prawej) — tworząc jedyny kontrast tonalny podczas przewijania. Następnie następuje gradientowy pas atmosferyczny. Pionowe odstępy między sekcjami wynoszą 64-96px. Maksymalna szerokość treści wynosi ~1200px po wyśrodkowaniu, przy czym główny element i ciemny pasek rozciągają się na całą szerokość obszaru widoku. Nawigacja to pojedynczy stały nagłówek z rozmytym tłem; bez paska bocznego, bez mega menu. Stopka to strona w kolorze bordowym o pełnej szerokości z wielokolumnowym układem linków. Ogólny rytm jest następujący: ramka główna → spokojna, biało-kremowa treść → ciemny pasek z głównym obrazem → nastrojowy gradient → bordowa stopka, naprzemiennie jasne i ciemne paski, aby nadać tempo redakcyjne.
Głównym elementem wizualnym jest fotografia filmowa: portret na całej szerokości na tle otwartego nieba stanowi punkt centralny, a drugi, nastrojowy pas znajduje się niżej na stronie. Obraz jest utrzymany w ciepłej tonacji, subtelnie stonowany i sfotografowany z profilu, przywodząc na myśl złotą godzinę, co tworzy bardziej redakcyjny niż korporacyjny charakter. Ciemny pas z półprzezroczystymi geometrycznymi prostokątami i odręcznymi inskrypcjami nałożony jest na fotografię zamyślonego mężczyzny — kolaż powierzchni, a nie pojedynczy obraz. Interfejs użytkownika przedstawiono jako unoszące się szklane karty nałożone bezpośrednio na fotografię, a nie jako osobne zrzuty ekranu. Brakuje ilustracji stockowych, renderów 3D i abstrakcyjnych form dekoracyjnych, z wyjątkiem gradientowego, nastrojowego paska. Ikony to minimalistyczne, monochromatyczne ikony liniowe o szerokości ~16-20 pikseli, z pojedynczą szerokością odpowiadającą grubości tekstu 460 punktów.
Paleta
Marka
- Midnight Wine
#421d24— Główne przyciski akcji, baner reklamowy i stopka są w ciepłym, niemal czarnym kolorze bordowym, który w dotyku bardziej przypomina atrament niż czerwień, co stanowi podstawę palety barw, ale nie przytłacza. - Royal Violet
#714cb6— Fioletowy kolor służy do wyróżniania linków, tagów i krótkich fraz. Nie powinien być używany jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Lilac Mist
#d4c7ff— Wypełnienie powierzchni drugorzędnej, jasne ikony oraz tła przycisków typu ghost są utrzymane w stonowanym fioletowym kolorze, który nawiązuje do stylu marki, nie przyciągając przy tym nadmiernej uwagi. - Deep Lagoon
#0c4243— Ciemne tło paska, stanowiące główny element narracyjny, jest jedyną ciemną powierzchnią w systemie, połączoną z nałożonym wzorem geometrycznym. - Warm Parchment
#f2f0eb— Powierzchnia robocza strony stanowi element dominujący; ciepły, kremowy kolor zastępuje biel jako bazę, nadając całemu systemowi ciepło redakcyjne. - Soft Mist
#e3e3e2— Delikatne obramowania, kontury kart, linie podziału — ciepła, jasna szarość, która łączy się z pergaminem, ale wyraźnie definiuje krawędzie. - Ink Charcoal
#292827— Tekst główny, nagłówki, kontury ikon – ciepły, prawie czarny kolor z wystarczającą ilością brązu, by przypominać atrament na papierze, nigdy zimny #000 - Stone Gray
#666666— Tekst drugorzędny, teksty pomocnicze, dyskretne opisy - pojedyncza czcionka w kolorze średniej szarości, używana oszczędnie, aby nie konkurować z tekstem głównym.
Typografia
od 12 do 64 px · 8 kroków
- Super Sans VF — wymiana: Inter (closest open equivalent for variable weight range) · wytyczne 460, 500, 540, 600, 700 · Jedna czcionka w całym systemie. Zmienne Axis obejmują zakres od 460 (czcionka charakterystyczna, lekko przycięta dla całego dużego tekstu nagłówków) do 540 (wyróżniony tekst główny) i 700 (małe, pogrubione podpisy). Specjalnie zaprojektowany VF sprawia, że nagłówki o grubości 460 wydają się bardziej przemyślane niż chaotyczne – przy szerokości 48–64 pikseli i ciasnych odstępach między literami efekt „lekko przyciętego” tekstu jest odbierany jako pewny siebie, a nie cienki.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8px |
| Promień przycisku | 16px |
| Promień karty | 16px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64-96px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Superhuman 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
- AI for Business — Brutalny showroom redakcyjny w ciepłych odcieniach szarości
- Jeton — Artykuł redakcyjny o fintechu na ciepłym marmurze
- Airtable — Przytulne seminarium z rozdziałami oznaczonymi różnymi kolorami
- Osmo — Muzeum Deweloperów na Szarym Betonie
- Linktr — Plakaty redakcyjne układają się jak cukierki. Strona internetowa została zaprojektowana w blokach kolorystycznych, z jasnozielonymi nagłówkami na tle kobaltowo-niebieskich ścian i białymi elementami nawigacyjnymi w kształcie pigułek unoszącymi się nad bordowymi polami.
- Outsource Consultants — Wielkoformatowa, architektoniczna grafika na papierze kostnym. Monograficzna estetyka, w której pojedyncza, jasna plama indygo przerywa ciepłą, typograficznie maksymalistyczną siatkę.
- Streamtime — Dotykowa tablica inspiracji – designerski stół do scrapbookingu
- Switch-Lit — Siatka redakcyjna wydrukowana tuszem na kremowym papierze
- HubSpot — Ciepły kremowy kolor papieru z pojedynczym pomarańczowym akcentem. HubSpot przypomina designerski magazyn drukowany na grubym papierze – nagłówki szeryfowe, strony w ciepłym kremowym kolorze i pojedynczy, ognistopomarańczowy akcent podkreślający tylko najważniejsze punkty.
- Granola — Notatki terenowe na ciepłym pergaminie — „Granolę” czyta się jak wysłużony notes Moleskine otwarty na słonecznym biurku: szeryfowe nagłówki nadają wrażenie solidności, organiczne zielone akcenty przypominają atrament roślinny, a cienkie linie na marginesach kart przypominają odręczne notatki.
- Secure — Rozmowa w europejskiej kawiarni w delikatnym świetle dziennym to ciepła i stylowa wersja wideorozmowy, w której nagłówki z szeryfowymi literami przypominają raczej przemyślany artykuł w magazynie niż stronę produktu technologicznego.
- Mockups made easy — Studio projektowania wydawniczego na białym papierze