Telegram, WhatsApp  +380637610482
Valery Danyuk
Valery DanyukEntwicklerEntwicklung von KI-Tools für Unternehmen. Hohe Qualität. Erschwinglich.In Telegram schreiben
Ciridae — eine Vorschau einer Website in diesem Stil

Ciridae

Ein leerer Raum, in dem das Pulsieren glimmender Glut erklingt – eine fast schwarze Kathedrale, in der der einzige warme Klang eine dünne Rostlinie ist und jede Oberfläche eher von feinen Linien als von Schatten definiert wird.

Ciridae arbeitet in einem Vakuum: eine Leinwand in #0b0b0b, pillenförmige Bedienelemente mit kaum wahrnehmbaren Konturen und eine Typografie, die auf Großbuchstaben in Pragmatica Cond mit Schriftstärke 400 beschränkt ist – keine Fettdrucke, keine gemischten Groß- und Kleinbuchstaben, keine dekorativen Elemente. Der einzige Farbton ist #cc6437, ein warmer, rauchiger Rostton, der für die dünnsten Striche und kleine Akzentzeichen verwendet wird, niemals als Füllung. Karten schweben auf #272a2a mit einem Radius von 10 Pixeln und ohne Schatten; das System verzichtet auf Höhenangaben und definiert Oberflächen durch Tonwertkontraste und feinste 1-Pixel-Ränder. Fotografien sind stark verschwommen und atmosphärisch – flüssiger Marmor, Rauch, Feuer – und werden im Vollbildmodus hinter dem Text platziert, sodass die Bildsprache eher atmosphärisch als illustrativ wirkt.

Das Seitenlayout ist vollflächig, wobei der Inhalt innerhalb einer maximalen Breite von ca. 1400 Pixeln zentriert ist. Der Hero-Bereich ist eine dunkle, vollflächige Komposition mit einem zentrierten Sternbild-Logo, flankiert von Mikrolabels links und rechts. Die Abschnitte wechseln sich ab: dunkler Hero-Bereich → heller Streifen mit Untermalung (Knochenweiß) → dunkler Transformationstext → dunkles Raster der Systemkarten → dunkle Fußzeile. Der einzelne helle Abschnitt erzeugt einen klaren, scharfen Farbübergang. Das Kartenraster ist vierspaltig, wobei die erste Karte etwa doppelt so breit ist wie die anderen drei. Dadurch entsteht ein asymmetrisches Layout mit Fokus auf den Inhalt. Der vertikale Abstand zwischen den Abschnitten ist großzügig (über 80 Pixel). Die Navigation ist minimalistisch: eine News-Leiste oben sowie ein linksbündiger „Jetzt starten“-Button und ein rechtsbündiger „Menü“-Button in der oberen Leiste. Keine Seitenleiste, kein Mega-Menü.

Atmosphärische Fotografien, die die gesamte Seitenfläche einnehmen, dominieren den Startbildschirm und die Karten. Die Bilder sind stark verschwommen (Hintergrundunschärfe von 50 px und 40 px wurde gemessen) und kontrastreich. Sie zeigen flüssigen Marmor mit blau-roten Wirbeln, Rauch, dunkle Landschaftssilhouetten und Feuer-/Gluttexturen. Die Fotografien sind düster und melancholisch, nicht lebendig – sie passen farblich zum leeren Hintergrund, anstatt sich von ihm abzuheben. Es gibt keine Produktfotos, keine Personen, keine Screenshots der Benutzeroberfläche. Die Bilder erzeugen Atmosphäre, anstatt als Illustrationen zu dienen. Das Kartenraster ordnet jedes System einer anderen atmosphärischen Szene zu, wodurch die Fotografien als abstrakte visuelle Identifikatoren und nicht als konkrete Produktabbildungen fungieren.

Palette

Marke

  • Ember Rust #cc6437 — Akzentstriche, Symbollinien und kleine Texthervorhebungen sind die einzigen chromatischen Farben in einem monochromen System und erscheinen eher als ein kaum wahrnehmbarer pulsierender Punkt denn als Füllung.

Neutral

  • Void Black #0b0b0b — Hintergrundbilder für die Hauptseite und die einzelnen Abschnitte; die Grundlage des gesamten Systems.
  • Charcoal Surface #272a2a — Hintergrundbilder aus Karton und Paneelen auf dunklen Bereichen sind einen Ton heller als die Leinwand, um eine Trennung der Flächen ohne Schatten zu erzeugen.
  • Bone #edebe7 — Die hellen Bereiche des Hintergrunds und der Oberfläche sind cremefarben; dort, wo das System von dunkel zu hell wechselt.
  • Bone Darker #dfddd9 — Ein zarter Farbton namens „Bone“ für mehrschichtige helle Oberflächen und Elemente in einer warmen, fast weißen Farbe.
  • Pure White #ffffff — Der gesamte Haupttext und die Überschriften, die Rahmen der Schaltflächen und die Navigationselemente sind in der Primärfarbe mit einem Kontrastverhältnis von 19,7:1 auf einem schwarzen Hintergrund gehalten.
  • Abyss #050505 — Erhöhter Hintergrund für den Nachrichtenstreifen (oberer Nachrichtenstreifen) – eine Nuance dunkler als die Hauptleinwand, um den Streifen hervorzuheben.

Typografie

von 11 auf 32 Pixel · 5 Schritte

  • Pragmatica Cond — Ersatz: Oswald · Umrisse 400 · Die primäre Schriftart für Anzeige und Benutzeroberfläche ist eine schmale, kondensierte Schrift mit 14 px für Fließtext, 20 px für Abschnittsüberschriften und 32 px für Haupttext. Eine extrem schmale Schriftart mit 14 px für Fließtext in Großbuchstaben ist die charakteristischste Lösung für das System: Der Fließtext liest sich eher wie das Flüstern einer Architekturschrift als wie gewöhnlicher Prosatext. Verwenden Sie stattdessen Oswald oder Barlow Condensed, falls Pragmatica Condensed nicht verfügbar ist.
  • Pragmatica — Ersatz: Inter · Umrisse 400 · Eine sekundäre, primäre Schriftart für längere Textpassagen (z. B. 24 px für die Kartenbeschreibung „KI-Betriebssystem“, 15 px für den Fließtext). Etwas breiter als Pragmatica Cond für bessere Lesbarkeit in größeren Textblöcken, aber dennoch in Schriftstärke 400 – niemals fett. Alternativ durch Inter oder Söhne ersetzen.
  • Roboto Mono — Ersatz: Roboto Mono (free · Umrisse 400 · Eine nichtproportionale Mikroschrift für einen Newsticker („NEWS • 15. JUNI 2026 • CRUCIBLE EARLY ACCESS JETZT GEÖFFNET“). Die nichtproportionale Schriftart wird nur hier verwendet, um eine klare funktionale Unterscheidung zu schaffen: Es handelt sich um Systemdaten, nicht um Branding.

Intervalle und Form

ZweckBedeutung
DichteDurchschnitt
Grundlegender Schritt16-20px
Radius der Schaltfläche1440px
Kartenradius10px
SchattenNein – Ränder statt Schatten
Zwischen den Abschnitten80px
Seitenbreite1400px

KI erstellt Ihre Website im Ciridae -Stil und füllt sie aus.

  • Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
  • Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
  • Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
  • Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.

Ähnliche Stile

  • Dala — ein Sternbild, das auf schwarzem Samt schwebt
  • Linear — Mitternachts-Präzisionsinstrument
  • Resend — schwarzer Samt mit violetter Neonfarbe
  • Dovetail — Ein Bauplan unter einem schwarzen Mond – kaum sichtbare Linien, weiße Schrift, ein violetter Funkel
  • Neon — Ein Serverraum nach Einbruch der Dunkelheit. Absolute Dunkelheit, in der das einzige Licht von Daten und Benutzerinteraktionen stammt.
  • Discord — Die Spielwelt ist hinter einem Pop-up-Chatfenster verborgen – jeder Abschnitt ist eine in sich abgeschlossene Umgebung mit eigener Beleuchtung und eigenen Charakteren.
  • Aaru — Teilchenfeldobservatorium um Mitternacht
  • Atlas Card — Das Mitternachtsgewölbe mit seinem einzelnen Saphirstrahl ist eine pechschwarze Weite, in der nur das tiefe elektrische Blau zählt.
  • Midjourney — Ein biolumineszentes Terminal in der Tiefsee. Eine Tiefseewelt, in der Intelligenz sich visuell in ASCII-Strängen selbst erzeugt und Bedienelemente als schwach leuchtende Muster erscheinen.
  • Checkly — Kontrollzentrum der Deep Orbit Mission
  • Krea — Galerie Noir um Mitternacht
  • Wope — Wope ist eine Benutzeroberfläche mit violettem Horizont. Stellen Sie sich einen dunklen Observatoriumstisch vor, aus dessen Glas ein violettes Licht strahlt.