Auros
Terminal otchłanny z bioluminescencyjnymi kulami danych
Auros funkcjonuje jak terminal fintechowy ukryty w otchłani: niemal czarne turkusowe płótno z bioluminescencyjnymi kulami danych i lekkimi gradientami od turkusu do różu, tworząc wrażenie głębi, płynności i płynności. Interfejs jest minimalistyczny i kinowy, opiera się na pojedynczym wyświetlaczu użytkownika (Matter) o średniej grubości z agresywnym negatywowym śledzeniem, aby stworzyć skalę bez nadmiernej krzykliwości. Kolory są równomiernie rozłożone – achromatyczne biele i srebra są używane w niemal całej treści, podczas gdy paleta chromatyczna jest zarezerwowana dla gradientów atmosferycznych, wyróżniających się powierzchni kart i pojedynczego, charakterystycznego przycisku w kształcie pigułki, który zmienia kolor z turkusowo-niebieskiego na lawendowo-różowy. Karty unoszą się na subtelnych turkusowych grzbietach powierzchni (promień 16 pikseli, brak cieni), a nie na wysokości, więc hierarchia jest postrzegana jako głębokość wody, a nie cień na papierze. Komponenty wyglądają przemyślanie i instrumentalnie: wielkie znaki śledzenia, cienkie geometryczne ikony strzałek, duże odczyty numeryczne w kolorze bladoróżowym.
Ciemne płótno o pełnej szerokości i maksymalnej szerokości 1440 px. Głównym elementem jest wyśrodkowany blok tekstowy (nagłówek → podtekst → wezwanie do działania) rozciągający się na całą wysokość okna podglądu, z cząsteczką jako elementem tła. Sekcje to paski o pełnej szerokości, oddzielone dużymi pionowymi przestrzeniami o szerokości ponad 68 px, naprzemiennie rozmieszczone na płótnie i lekko zagłębionych powierzchniach. Sekcja „Eksploruj” wykorzystuje asymetryczny układ dwukolumnowy: lewa kolumna zawiera ułożone w stos karty funkcji, a prawa – geometryczną ilustrację molekularną. Treść jest wyśrodkowana w wąskich kolumnach (maksymalnie ~600 px), co ułatwia czytanie, a nie rozciąga się od krawędzi do krawędzi. Stopka to zagłębienie (#011d1c) z pionowym marginesem o szerokości 120 px, tworzące efekt głębokiego basenu. Nawigacja to cienki, przezroczysty panel z elementami rozmieszczonymi w odstępach 16–24 px. Ogólny rytm jest kinowy i przestrzenny — każda sekcja oddycha, a głęboka, przypominająca wodę paleta barw tworzy wrażenie coraz głębszego wpadania w ucho z każdym fragmentem.
Styl wizualny jest minimalistyczny i nastrojowy. Strona główna prezentuje trójwymiarową kulę cząsteczek – tysiące drobnych turkusowo-niebieskich i białych kropek tworzy obracającą się kulę, nawiązującą do płótna, a lawendowo-różowe akcenty na krawędziach tworzą efekt bioluminescencyjny, przypominający obiekt informacyjny. Płaskie, geometryczne diagramy molekularne (białe okręgi i cienkie linie łączące na ciemnym płótnie) stanowią elementy dekoracyjne w prawej kolumnie. Brak zdjęć, zdjęć lifestylowych, postaci – język wizualny opiera się na przejrzystej grafice danych i abstrakcyjnych formach. Kula cząsteczek jest definiującym elementem wizualnym identyfikacji marki; musi pojawić się co najmniej raz na każdej ważnej stronie, aby wzmocnić metaforę głębin morskich.
Paleta
Marka
- Liquid Abyss
#012624— Główne tło stanowi podstawę strony, nagłówek, główny element i dominujące ciemnoturkusowe pole. Tworzy ono atmosferę głębin morskich. - Liquid Deep
#011d1c— Wgłębienie w powierzchni stanowi tło stopki i głębsze panele tekturowe. Jest postrzegane jako o pół tonu ciemniejsze niż płótno, co tworzy subtelny gradient głębi w dół. - Liquid Kelp
#003734— Podniesiona powierzchnia karty i wypełnienie przycisku – podniesiona powierzchnia umieszczona o jeden stopień nad szczeliną. Stosowana w przypadku kart funkcji, paneli treści i punktu początkowego przycisku gradientowego.
Neutralny
- Liquid Mist
#edfffe— Chłodny odcień bieli podkreśla treść, nagłówki sekcji i ciepłą, jasną typografię. Subtelny niebieski odcień wpisuje się w turkusową kolorystykę. - Platinum
#ffffff— Czysta biel jest używana w nagłówkach, elementach nawigacyjnych, konturach ikon i tekście o wysokim kontraście. Jest to podstawowy kolor tekstu na wszystkich poziomach nagłówków i w głównej nawigacji. - Silver Mist
#bbc7c6— Tekst pomocniczy, wyciszone opisy i kolor linku w oryginalnym stanie. Mają one delikatny zielonkawy odcień, uzupełniający turkusowe tło. - Ash
#f2f2f2— Dodatkowy tekst do cytatów i recenzji. Neutralny, chłodny odcień szarości, idealny, gdy turkusowy odcień Silver Mist wydaje się zbyt jaskrawy. - Slate Deep
#707777— Subtelny odcień powierzchni do tła nieaktywnego lub słabo widocznego. Umieszczany między płótnem a tekturą, zapewnia bardzo subtelną różnicę wysokości. - Lavender Phosphor
#fde9ff— Kolor podświetlenia dla dużych statystyk, liczb i ważnych wskaźników. Różowy odcień w charakterystycznym gradiencie jest używany oszczędnie jako świetlisty akcent na ciemnych powierzchniach.
Typografia
od 10 do 96px · 6 kroków
- Matter — wymiana: Inter · wytyczne 400, 500 · Podstawowy krój czcionki w nagłówkach i treści jest używany z grubością 500 dla wszystkich nagłówków (H1–H3) i dużego tekstu kinetycznego (86–295 px). Grubość 400 jest używana w treści i tekście interfejsu użytkownika. Charakteryzuje się on agresywnym, ujemnym odstępem między literami przy dużych rozmiarach (-0,04 em przy 61 px, -0,046 em przy 86 px) oraz szerokim, dodatnim odstępem między literami w wielkich literach (0,08 em przy 20 px, 0,12 em przy 12 px, 0,15 em przy 10 px). Strategia stosowania wyłącznie średniej grubości w nagłówkach jest cechą charakterystyczną – brak pogrubienia lub lekkiego kroju czcionki – co nadaje czcionce jednolity, mechaniczny wygląd.
- Arial — wymiana: system-ui · wytyczne 400 · Dodatkowa opcja awaryjna dla interaktywnych elementów interfejsu użytkownika (nawigacja, przyciski, mikrotekst nagłówka, stopka). Pojawia się tylko w 14 pikselach – używana jako bezpieczna, uniwersalna opcja awaryjna, gdy Matter nie jest załadowany, i obejmuje etykiety formularzy, tekst przycisków oraz krótki tekst pomocniczy.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 20px |
| Promień przycisku | 6px |
| Promień karty | 16px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 68px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Auros 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
- Design Full-Time — kino studyjne z jednym ciepłym reflektorem
- Air — rzeźba „Północne niebo przez szkło”
- Slash — Skarbiec północny ze złoconymi księgami
- Raycast — Centrum dowodzenia Midnight, Coral Neon
- Dimension — stanowisko pracy oświetlone światłem dziennym, z panelami ze szkła matowego
- Modal — Terminal fosforyzujący w zaciemnionej serwerowni – jedynym źródłem światła jest jasnozielony kolor
- Giga — Północny horyzont nad zmrożonym obsydianem
- 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
- AgentQL — Zorza polarna nad terminalem nocą
- Frame — Kino do nocnych seansów filmowych. Ciemne pomieszczenie, w którym pojedynczy niebieski reflektor wykonuje całą pracę, a interfejs użytkownika znika w tle, umożliwiając wyświetlanie kreatywnych treści.
- Harness — Centrum kontroli misji o północy z fosforyzującymi zielonymi akcentami