Superpower
Centrum Zarządzania Zdrowiem Bioluminescencyjnym
Superpower ucieleśnia poważną kliniczną obietnicę w kinowym, nastrojowym interfejsie użytkownika: ciemne, pełnoekranowe zdjęcia płynnie przechodzą w ostre, białe powierzchnie treści, a pojedynczy, żywy, pomarańczowy akcent wschodzącego słońca pulsuje w całym systemie. Typografia reprezentuje markę – charakterystyczna, geometryczna czcionka bezszeryfowa z minimalnymi odstępami między literami, skalowana od 11 px dla metadanych do 66 px dla treści wyświetlanych, z interlinią kompresującą się wraz ze wzrostem rozmiaru (1,00 px dla treści wyświetlanych, 1,40–1,50 px dla treści). Nad obrazami unosi się unoszący się, ciemny pasek nawigacyjny w kształcie kapsułki, a wezwania do działania w kształcie kapsułek tworzą napięcie między kliniczną precyzją a ciepłą, życiodajną energią. Powierzchnie są w dużej mierze płaskie – system opiera się na dużej ilości białej przestrzeni, subtelnych, cynkowych podziałkach i pojedynczym, subtelnym wzorze cienia zamiast wyraźnego wyniesienia. Kolory są używane oszczędnie: prawie wszystko jest czarne, białe lub cynkowoszare, a pomarańczowy pojawia się jedynie jako funkcjonalne znaki interpunkcyjne w działaniach i brandingu.
Na głównym zdjęciu dominuje pełnoekranowa fotografia kinowa – sylwetka człowieka na tle głębokiego, turkusowo-błękitnego nieba; obraz jest celowo ciemny i nastrojowy, aby nadać mu emocjonalny ciężar i kontrast z obietnicą prozdrowotną. Zdjęcia drugoplanowe to wąskie, przejrzyste ujęcia produktowe (marmurkowa pomarańczowa karta członkowska, zrzuty ekranu aplikacji), a nie zdjęcia lifestylowe. Brak ilustracji, renderów 3D i abstrakcyjnych grafik – kontrast fotograficzny stanowi tożsamość wizualną. Karta członkowska zdobi organiczny wzór marmuru/lampa lawa w odcieniach wschodu słońca – jedyny dekoracyjny element wizualny. Ikony to linie o promieniu 7,5 piksela (miękko zaokrąglone kwadraty) z subtelnymi pociągnięciami czarnego włókna węglowego.
Paleta
Marka
- Sunrise Coral
#fc5f2b— 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. - Coral Glow
#ff8b64— Gradientowy punkt końcowy w połączeniu z kolorem Sunrise Coral tworzy dekoracyjny design kart członkowskich.
Neutralny
- Carbon Black
#18181b— Tekst główny, wypełnienie paska nawigacyjnego, nagłówki, kontury ikon. - Pure Black
#000000— Logo, znak tekstowy, ramki o głębokim kontraście - Zinc Gray
#71717a— Tekst główny, dodatkowe opisy, ukryte metadane, tekst pomocniczy. - Ash Gray
#a1a1aa— Tekst trzeciorzędny, nieaktywne granice, wyłączone stany - Mist Gray
#e4e4e7— Delikatne linie krawędziowe, kontury kart, linie podziału, ramki przycisków. - Fog Gray
#f4f4f5— Subtelne nierówności powierzchni, stonowane tło, obraz nałożony na siatkową bazę.
Typografia
od 11 do 66px · 8 kroków
- NB International Pro — wymiana: Inter Tight · wytyczne 400, 700 · Wszystko – projekt, nagłówki, treść, interfejs użytkownika i nawigacja – jest płynnie zintegrowane. Charakterystycznym rozwiązaniem jest agresywnie wąski, ujemny odstęp między literami, skalowalny w zależności od rozmiaru (od -0,025 em do 66 px w przypadku małych treści), w połączeniu z interlinią, która zmniejsza się wraz ze wzrostem rozmiaru, nadając nagłówkom monolityczną, plakatową gęstość, która wyróżnia Superpower na tle jego lekkich konkurentów w branży technologii medycznych.
- NB International Mono Pro — wymiana: JetBrains Mono · wytyczne 400 · Metadane tabelaryczne, adnotacje mikrotekstowe i etykiety techniczne są stosowane oszczędnie w sytuacjach wymagających podejścia klinicznego/instrumentalnego.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 11px |
| Promień przycisku | 9999px |
| Promień karty | 15px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 75px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Superpower 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
- Visitors — biały rysunek techniczny
- Dock — Papier kremowy Sunlit, puls kobaltu
- Flying Papers — Wyznanie w sobotni poranek – kreskówka
- Quizlet — Klasa jest udekorowana w różnych kolorach na białym tle - ciche biurko, za którym cztery pastelowe kartki stanowią jedyny jasny akcent na tle chłodnych szarych ścian i pojedynczego znaku wykonanego markerem w kolorze indygo.
- ON.energy — Żółty znak ostrzegawczy przed wysokim napięciem na stali o północy
- Navigate — Duży zestaw naklejek przymocowanych do tablicy: duża groteskowa czcionka, wszystkie w formie tabletek i pięć wielokolorowych ikon, powtarzających się jak logo
- Linear — instrument o precyzji północy
- Pop Site — Surowa galeria typograficzna – monumentalne czarne nagłówki unoszące się na białych ścianach, z pojedynczą niebieską kropką wyrażającą intencję
- Hyperstudio — Wzór wyryto w obsydianie. Tekst i cienkie linie otaczają białą, czystą czerń, z okazjonalnymi złotymi znakami kompasu wskazującymi drogę.
- Pa'lais — Botaniczny szkicownik, jakby nasączony miodem. Kremowy papier, niebieskie ilustracje w stylu toile de Jouy i ciepłe akcenty kolorystyczne przywodzą na myśl ręcznie robioną książkę kucharską, a wyrazista, zwarta czcionka i dużo białej przestrzeni nadają mu nowoczesny, redakcyjny charakter.
- Raus — Przytulny pamiętnik pisany na kremowym papierze — każda strona przypomina pocztówkę z lasu.
- Privy — Artykuł redakcyjny wykonany tuszem na marmurze. Białe marmurowe płótno, mocno ściśnięte czarne nagłówki szeryfowe, pojedynczy fioletowy baner przecinający górę – powściągliwość jako autorytet.