Telegram, WhatsApp  +380637610482
Walery Danyuk
Walery DanyukwywoływaczTworzymy narzędzia AI dla firm. Wysoka jakość. Przystępna cena.Napisz na Telegram
Ciridae — podgląd witryny w tym stylu

Ciridae

Pusty pokój, w którym pulsują tlące się węgle - niemal czarna katedra, w której jedynym ciepłym dźwiękiem jest cienka linia rdzy, a każda powierzchnia jest zdefiniowana przez cienkie linie, a nie cień.

Ciridae działa w próżni: płótno #0b0b0b, kontrolki w kształcie pigułki z ledwo zauważalnymi konturami i typografia zamknięta w wielkich literach Pragmatica Cond o grubości 400 – bez pogrubień, mieszanych wielkich i małych, ani elementów dekoracyjnych. Jedynym akcentem chromatycznym jest #cc6437, ciepły, tlący się odcień rdzy, używany jako najcieńsze kreski i drobne akcenty interpunkcyjne, nigdy jako wypełnienie. Mapy unoszą się na #272a2a o promieniu 10 pikseli i bez cieni; system unika wzniesień, definiując powierzchnie poprzez kontrast tonalny i najdelikatniejsze obramowania o grubości 1 piksela. Fotografie są mocno rozmyte i nastrojowe – płynny marmur, dym, ogień – umieszczone za tekstem w trybie pełnoekranowym, przez co obrazowanie wizualne wydaje się bardziej nastrojowe niż ilustracyjne.

Układ strony jest na całej szerokości, z treścią wyśrodkowaną w granicach ~1400 px. Bohater to ciemna kompozycja o pełnej szerokości z wyśrodkowanym logo konstelacji, flankowanym mikroetykietami po lewej i prawej stronie. Sekcje układają się naprzemiennie: ciemny bohater → jasny pasek z podkładami (Kość) → ciemny tekst transformacji → ciemna siatka kart systemowych → ciemna stopka. Pojedyncza jasna sekcja tworzy pojedyncze, ostre przejście tonalne. Siatka kart składa się z 4 kolumn, przy czym pierwsza karta jest około dwa razy szersza niż pozostałe trzy, co tworzy asymetryczny układ z naciskiem na treść. Pionowa przestrzeń między sekcjami jest duża (ponad 80 px). Nawigacja jest minimalna: górny pasek wiadomości + jeden przycisk „Rozpocznij teraz” wyrównany do lewej i „Menu” wyrównany do prawej na górnym pasku. Brak paska bocznego, brak megamenu.

Nastrojowe fotografie, zajmujące całą powierzchnię strony, dominują na ekranie głównym i kartach. Obrazy są mocno rozmyte (wykryto wartości rozmycia tła na poziomie 50 i 40 pikseli) i charakteryzują się wysokim kontrastem, przedstawiając płynny marmur z niebiesko-czerwonymi zawijasami, dym, ciemne sylwetki krajobrazów oraz tekstury ognia/żaru. Fotografie są nastrojowe i ciemne, a nie żywe – mają tę samą gamę tonalną co puste płótno, zamiast się na nim wyróżniać. Nie ma zdjęć produktów, osób ani zrzutów ekranu interfejsu. Zdjęcia tworzą atmosferę, a nie służą jako treść ilustracyjna. Siatka kart odwzorowuje każdy system na inną scenę atmosferyczną, dzięki czemu fotografie pełnią funkcję abstrakcyjnych identyfikatorów wizualnych, a nie dosłownych obrazów produktów.

Paleta

Marka

  • Ember Rust #cc6437 — W systemie monochromatycznym jedynym kolorem chromatycznym są akcenty, linie ikon i niewielkie wyróżnienia tekstu, które wyglądają raczej jak ledwo zauważalne pulsujące punkty niż jako wypełnienie.

Neutralny

  • Void Black #0b0b0b — Obrazy tła dla strony głównej i sekcji, podstawa całego systemu.
  • Charcoal Surface #272a2a — Tła wykonane z tektury i paneli na ciemnych obszarach są o jeden ton jaśniejsze od płótna, co pozwala na oddzielenie powierzchni bez cieni.
  • Bone #edebe7 — Jasne obszary tła i powierzchni mają kolor kremowy, w miejscach, gdzie układ przechodzi z ciemnego w jasny.
  • Bone Darker #dfddd9 — Delikatny odcień o nazwie „Bone” przeznaczony do wielowarstwowych jasnych powierzchni i elementów o ciepłej, niemal białej barwie.
  • Pure White #ffffff — Wszystkie główne teksty i nagłówki, obramowania przycisków i elementy nawigacyjne są w kolorze podstawowym ze współczynnikiem kontrastu 19,7:1 na czarnym tle Void.
  • Abyss #050505 — Podniesione tło paska informacyjnego (górny pasek informacyjny) - o jeden odcień ciemniejsze niż główne płótno, aby pasek się wyróżniał.

Typografia

od 11 do 32px · 5 kroków

  • Pragmatica Cond — wymiana: Oswald · wytyczne 400 · Podstawowym fontem wyświetlacza i interfejsu użytkownika jest wąska, skondensowana czcionka z 14 px wielkimi literami w tekście głównym, 20 px w nagłówkach sekcji i 32 px w tekście głównym. Niezwykle wąska czcionka i 14 px wielkimi literami w tekście głównym to najbardziej charakterystyczne rozwiązanie dla systemu: tekst główny czyta się jak szept czcionki architektonicznej, a nie jak zwykłą prozę. Jeśli Pragmatica Condensed jest niedostępna, należy zastąpić ją czcionką Oswald lub Barlow Condensed.
  • Pragmatica — wymiana: Inter · wytyczne 400 · Czcionka drugorzędna, podstawowa używana w dłuższych fragmentach prozy (np. opis karty „System operacyjny AI” ma szerokość 24 px, a tekst akapitu – 15 px). Nieco szersza niż Pragmatica Cond, dla łatwiejszego czytania w większych blokach, ale nadal o grubości 400 px – nigdy pogrubiona. Zastąp ją czcionką Inter lub Söhne.
  • Roboto Mono — wymiana: Roboto Mono (free · wytyczne 400 · Czcionka o stałej szerokości dla paska informacyjnego („WIADOMOŚCI • 15 CZERWCA 2026 • WCZESNY DOSTĘP DO CRUCIBLE JUŻ OTWARTY”). Czcionka o stałej szerokości jest używana tylko tutaj, co wyraźnie podkreśla funkcjonalność: to dane systemowe, a nie branding.

Interwały i forma

ZamiarOznaczający
Gęstośćprzeciętny
Podstawowy krok16-20px
Promień przycisku1440px
Promień karty10px
Cienienie - granice zamiast cieni
Między sekcjami80px
Szerokość strony1400px

Sztuczna inteligencja zbuduje Twoją witrynę w stylu Ciridae 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

  • Dala — konstelacja unosząca się na czarnym aksamicie
  • Linear — instrument o precyzji północy
  • Resend — czarny aksamit z fioletowym neonowym kolorem
  • Dovetail — Plan pod czarnym księżycem – ledwo widoczne linie wykresu, biała czcionka, jeden fioletowy błysk
  • Neon — Serwerownia po zmroku. Całkowita ciemność, gdzie jedynym światłem są dane i interakcje użytkowników.
  • Discord — Świat gry ukryty jest za wyskakującym okienkiem czatu – każda sekcja to samodzielne środowisko z własnym oświetleniem i zestawem postaci
  • Aaru — Obserwatorium Pola Cząstek o północy
  • Atlas Card — Krypta Północy, z pojedynczym promieniem szafiru, to czarna jak smoła przestrzeń, w której liczy się tylko głęboki, elektryczny błękit.
  • Midjourney — Bioluminescencyjny terminal w głębi oceanu. Głębinowy świat, w którym inteligencja generuje się wizualnie w strumieniach ASCII, a elementy sterujące pojawiają się jako delikatnie świecące wzory.
  • Checkly — Centrum Kontroli Misji Głębokiej Orbity
  • Krea — galeria noir o północy
  • Wope — Wope to interfejs fioletowego horyzontu. Wyobraź sobie ciemny stół obserwacyjny z fioletowym światłem padającym spod szkła.