Authkit
Katedra ze szkła matowego o północy
AuthKit tworzy estetykę nocnych prezentacji produktów: niemal czarne płótno z matowymi szklanymi powierzchniami, siatką ledwo widocznych linii i świecącym tekstem, który wydaje się być podświetlony przez szklaną warstwę. Czcionka jest niemal całkowicie biała na ciemnym tle, z pojedynczym, jasnofioletowym akcentem jako jedynym elementem funkcjonalnym – każda interaktywna powierzchnia ma miękką, cienką linię chłodnego, niebiesko-białego koloru zamiast sztywnej ramki. Komponenty są ułożone na półprzezroczystych warstwach, nałożonych na rozświetlenie, a karty wyglądają jak szklane płytki podświetlane od dołu, a nie jak papierowe panele. Odstępy są duże i rytmiczne; głównym elementem jest pojedyncze, podświetlone logo rozciągające się na całą szerokość strony, otoczone unoszącymi się szklanymi kartami, zamiast tradycyjnego układu podzielonego ekranu.
Ciemne płótno o pełnej szerokości z wyśrodkowanym kontenerem treści o maksymalnej szerokości 1200 px. Głównym elementem jest pojedyncze, wyśrodkowane, podświetlone logo („AuthKit” w gradiencie) pod małym tekstem w kształcie brwi, za którym/pod którym znajdują się trzy unoszące się, szklane karty z formularzem logowania (lewa karta pochylona w lewo, środkowa karta zmaksymalizowana, prawa karta pochylona w prawo). Przełącznik jasnego/ciemnego motywu znajduje się pod głównym elementem. Wiersz funkcji to pozioma oś czasu z 6 ikonami połączonymi cienkimi liniami. Rytm sekcji: każda sekcja zaczyna się od wyśrodkowanego tekstu w kształcie brwi, obramowanego zanikającymi poziomymi liniami, po którym następuje duży, wyśrodkowany tytuł (44-48 px), a następnie pojedyncza linia stonowanego tekstu głównego (16-18 px), o maksymalnej szerokości ~640 px. Sekcja Dostosuj wyświetla makietę okna przeglądarki z centralnie umieszczoną kartą logowania otoczoną pływającymi panelami inspektora interfejsu użytkownika (palety kolorów, suwaki promienia, selektor ikony logo, pole tekstowe przycisku, pole tła strony) umieszczonymi w rogach płótna, podobnie jak obszar roboczy narzędzi projektowych.
W projekcie wizualnym dominują makiety formularzy logowania, wykonane w stylu „szklanej morfologii” (pola wprowadzania adresu e-mail/hasła, przyciski logowania do mediów społecznościowych, wprowadzanie kodów bez hasła), przedstawione jako unoszące się, półprzezroczyste karty na tle płótna o północy. Ikony to monochromatyczne, liniowe glify w formacie #d1e4fa umieszczone na okrągłych, matowych kafelkach. Subtelna siatka (linie o grubości 1 piksela w rgba (186,215,247,0.06)) pokrywa całą stronę, tworząc atmosferę, a stożkowaty gradient reflektora lśni u góry głównego elementu. Żadnych zdjęć, obrazów lifestylowych ani zrzutów ekranu produktów – sam produkt jest elementem wizualnym: pola logowania ułożone jak szklane prototypy w ciemnym studiu.
Paleta
Marka
- Void Violet
#663af3— Podstawowy kolor przycisku wezwania do działania (CTA) jest jedynym kolorem akcentowym używanym wyłącznie w przycisku „Kontynuuj/Wyślij” w formularzach logowania; intensywny fiolet na prawie czarnym tle tworzy poczucie pilności, nie zakłócając jednocześnie monochromatycznej palety barw.
Neutralny
- Midnight Canvas
#05060f— Tło strony, najgłębsza powierzchnia karty, wypełnienie odznaki — niemal czarna baza, na której wszystko inne unosi się. - Steel Plate
#2f343e— Podniesiona powierzchnia, przyciski akcji pobocznej/fantomowej, dyskretne tło panelu. - Fog Veil
#9da7ba— Główny tekst, tekst na karcie, jest czytelny, lecz w porównaniu z nagłówkami jest on zepchnięty na dalszy plan. - Moon Mist
#c7d3ea— Tekst główny, etykiety dodatkowe, wyciszony tekst pomocniczy - Frost Glow
#d1e4fa— Podstawowym kolorem wypełnienia tekstu treści i linków, tekstu ikon oraz wypełnienia ikon jest domyślny świecący pierwszy plan. - Ice Highlight
#d8ecf8— Jasny tekst na ciemnych powierzchniach, odwrócone etykiety i nagłówki o wysokim kontraście. Nie używaj go jako koloru podstawowego w wezwaniach do działania; w logo AuthKit i najważniejszych nagłówkach zastosowano gradient nagłówka – płynne przejście od jasnoniebieskiego do stonowanego niebieskiego od góry do dołu.
Typografia
od 12 do 48px · 8 kroków
- Untitled Sans — wymiana: Inter · wytyczne 400, 500, 600, 700 · Tekst główny, interfejs użytkownika, przyciski, pola wprowadzania danych, ikony, małe nagłówki — uniwersalna czcionka do wszystkiego, co funkcjonalne.
- aeonikPro — wymiana: Space Grotesk · wytyczne 400, 500 · Wyświetlając tylko nagłówki — markę AuthKit, nagłówki sekcji i tekst główny — czcionka o grubości 500 punktów i wysokości 44–48 px nadaje marce szeroki, stonowany wygląd, a nie krzykliwy akcent.
- dotDigital — wymiana: JetBrains Mono · wytyczne 400 · Tekst pisany wielkimi literami („Przedstawiamy”, „Rozwijany projekt”, „Rozświetl się”) — tekst pisany wielkimi literami o stałej szerokości i odstępie 0,10 em, który dyskretnie oddziela tekst główny od nagłówka.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 16px |
| Promień przycisku | 999px |
| Promień karty | 16px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 120px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Authkit 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
- Resend — czarny aksamit z fioletowym neonowym kolorem
- Gsap — Animowana tablica w studiu projektowym. Prawie czarna ściana, kreda w ciepłym kremowym kolorze i pięć kolorowych markerów – po jednym dla każdej dyscypliny animacji.
- 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
- Reflect Notes — Gwiaździsta fioletowa przestrzeń to ciemne obserwatorium, w którym nuty unoszą się niczym konstelacje na tle niemal czarnej, indygowej pustki.
- LaunchDarkly — Neonowa sala sterowania to ciemna kabina, w której fioletowe sygnały pulsują przez czarne jak smoła panele.
- Ameba — Sala kontrolna o północy – elektryzujący, błękitny impuls wewnątrz matowych szklanych paneli
- AgentQL — Zorza polarna nad terminalem nocą
- Neon — Serwerownia po zmroku. Całkowita ciemność, gdzie jedynym światłem są dane i interakcje użytkowników.
- N8n — Workflow Engine at Midnight – wrażenie pracy w czasie rzeczywistym na płótnie automatyzacji w ciemnej serwerowni, oświetlonej wskaźnikami stanu i strumieniami danych