Huly
Zorza polarna w obserwatorium północy – bohaterem jest pionowy promień fioletu przechodzący w koral, a każda cicha sekcja poniżej zapożycza tę samą dwubarwną historię opowiedzianą w bardziej stonowanym tonie
Huly przywołuje atmosferę kosmicznego miejsca pracy: niemal czarne płótno z pojedynczą fioletowo-bursztynową poświatą przecinającą główny element, a pod nim bardziej stonowaną siatkę, zwiększającą produktywność. System działa w wąskiej gamie kolorów – jeden jasnoniebieski i jeden koralowy tworzą całą oprawę marki na tle warstwowych grafitowych powierzchni, dzięki czemu tryb ciemny nigdy nie wydaje się neutralny. Typografia jest oparta na stylu inter-style dla wszystkiego, co funkcjonalne, z niestandardową czcionką (Esbuild) zarezerwowaną dla kluczowych punktów, o rozstawie 80–84 px i agresywnym, ujemnym odstępie między literami. Komponenty mają kształt kapsułek: promień 9999 px na elementach sterujących, 12 px na kartach, minimalny cień i świecące linie gradientowe stanowią główną ozdobę. Strona naprzemiennie obejmuje ciemne obszary o pełnej szerokości strony i spokojne, jasne sekcje, dlatego każdy nowy ekran powinien zdecydować o trybie przed wyborem kolorów.
Pełnowymiarowa strona główna prezentuje pionowy promień zorzy polarnej i nagłówek wyrównany do lewej strony, a także zrzut ekranu produktu umieszczony w prawym dolnym rogu. Poniżej strony głównej znajduje się obszar treści o maksymalnej szerokości 1200 pikseli, z naprzemiennie ułożonymi ciemnymi i jasnymi paskami. Każda sekcja to pojedynczy pionowy blok: nagłówek oraz 3- lub 4-kolumnowa siatka kart oddzielonych odstępami 96 pikseli. Sekcja „MetaBrain” przerywa siatkę wyśrodkowanym nagłówkiem i mozaiką kart o różnych rozmiarach (duża karta główna i mniejsze karty pomocnicze). Strona jest przeładowana treścią, zgodna ze standardami SaaS, ale wykorzystuje naprzemiennie ułożone ciemne i jasne paski, aby zapewnić każdej sekcji przestrzeń do oddychania. Nawigacja to pojedynczy, przezroczysty górny pasek, który stopniowo staje się nieprzezroczysty podczas przewijania.
Głównym elementem jest czysty gradient zorzy polarnej, bez zdjęć. Wszystkie ilustracje to rzeczywiste zrzuty ekranu interfejsu użytkownika produktu (Kanban w trybie ciemnym, skrzynka odbiorcza, kalendarz), oprawione w ramki kart, które służą zarówno jako dowód, jak i dekoracja. Żadnych zdjęć lifestylowych, zdjęć stockowych ani renderów 3D. Jedynym elementem wizualnym niezwiązanym z interfejsem użytkownika jest ciepła, promienista poświata u podstawy zorzy polarnej, renderowana jako gradient CSS. Ikony to monochromatyczne ikony liniowe w kolorze #95979 lub białym, nigdy wielokolorowe. System traktuje swój własny ciemny interfejs użytkownika jako główny element — produktem są zdjęcia.
Paleta
Marka
- Electric Iris
#5683da— Główne tło, aktywny wskaźnik nawigacyjny i wyrazisty akcent zorzy polarnej — żywy fioletowo-niebieski kolor na czarnym tle — stwarzają wrażenie zaangażowania, a nie aktywności korporacyjnej. - Ember Pulse
#ff8964— Drugorzędny akcent, ciepła strefa zorzy polarnej, punkt powiadomień i ilustracyjny akcent — bursztynowy odcień, który przełamuje stonowaną barwę błękitu i dodaje ciepła do wiązki światła.
Neutralny
- Obsidian Canvas
#303236— Tło strony, czyli jej dominująca powierzchnia, ma kolor niemal czarny z lekką nutą ciepła – jest to standardowe środowisko dla wszelkich treści. - Void
#090a0c— Najgłębsza warstwa powierzchniowa dla gradientów na ekranie głównym, teł modalnych i ramek, które powinny wtapiać się w płótno. - Charcoal Card
#111111— Podniesione powierzchnie wykonane z tektury i paneli, umieszczone o stopień nad płótnem. - Slate Edge
#4a4b50— Subtelne obramowania i podziały na ciemnych powierzchniach - Iron Veil
#6b6c6d— Przyciemnione tło dla tagów, wypełnień elementów listy i wyłączonych wypełnień. - Smoke
#95979e— Podstawowymi elementami roboczymi w kolorze średnioszarym są kontury ikon, dodatkowy tekst i nieaktywne kontrolki.
Typografia
od 11 do 80px · 8 kroków
- Inter — wymiana: DM Sans · wytyczne 300, 400, 500, 600, 700 · Cały tekst funkcjonalny w interfejsie użytkownika — tekst główny, elementy nawigacji, przyciski, elementy listy, etykiety i małe nagłówki — jest używany z grubością czcionki 500–600 dla podkreślenia, 400 dla tekstu głównego i 300 oszczędnie dla dyskretnych metadanych.
- Esbuild — wymiana: Sora · wytyczne 400, 500, 600 · Tylko do wyświetlania: tytuły powitalne, nagłówki sekcji i tytuły artykułów w MetaBrain. Skondensowana geometria i małe odstępy między literami sprawiają wrażenie, że 84 px jest bardziej odpowiednie do prac redakcyjnych niż projektów SaaS. Nigdy nie używaj rozdzielczości poniżej 28 px.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 12px |
| Promień przycisku | 9999px |
| Promień karty | 12px |
| Cienie | miękkie cienie |
| Między sekcjami | 96px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Huly 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
- monday — Biały warsztat z naklejkami pastelowymi
- Slack — Scena ma barwę bakłażana, z białymi reflektorami. Głęboki śliwkowy odcień dominuje w ciemnych partiach, a kremowobiałe płótno pozwala swobodnie oddychać dużym, awangardowym napisom.
- Base44 — Słoneczny notatnik z markerem wapiennym
- Supahub — Miękkie światło dzienne na fioletowym grzbiecie. Przeważnie białe, zwiewne płótno oświetlone pojedynczym, jasnym, fioletowym słońcem, z dekoracyjnymi, gradientowymi kulami rozlewającymi kolor w pustej przestrzeni i hojną, zaokrągloną geometrią nadającą każdej powierzchni przyjemną, namacalną ciężkość.
- Raycast — Centrum dowodzenia Midnight, Coral Neon
- Dimension — stanowisko pracy oświetlone światłem dziennym, z panelami ze szkła matowego
- Wiza — Obserwatorium poszukiwań złóż minerałów o zmierzchu, spowite lawendową mgłą.
- Paste — Bursztynowa latarnia na białym marmurze — ciepłe, gradientowe logo marki — unosi się w ogromnej białej przestrzeni, niczym jedyne oświetlone okno w pokrytym śniegiem budynku.
- Reworkd — Jedynym kolorem, który mówi sam za siebie, jest miękkie światło dzienne na diagramie produktu, podobnie jak przycisk akcji i gradientowy nagłówek nad nim.
- Reflect Notes — Gwiaździsta fioletowa przestrzeń to ciemne obserwatorium, w którym nuty unoszą się niczym konstelacje na tle niemal czarnej, indygowej pustki.
- Ameba — Sala kontrolna o północy – elektryzujący, błękitny impuls wewnątrz matowych szklanych paneli
- Todoist — Słoneczne miejsce pracy z papierowym dziennikiem – ciepłe kremowe biurko, notatki atramentowe, jeden czerwony długopis