Auros
Abyssales Terminal mit biolumineszenten Datenkugeln
Auros fungiert als Fintech-Terminal, das in der Tiefe zu schweben scheint: Eine fast schwarze, türkisfarbene Leinwand mit biolumineszenten Datenkugeln und sanften Farbverläufen von Türkis zu Rosa erzeugt ein Gefühl von Tiefe, Fluidität und Dynamik. Die Benutzeroberfläche ist minimalistisch und filmisch gestaltet und basiert auf einem einzelnen, mittelstarken Display (Matter) mit aggressivem Negativ-Tracking, das für eine realistische Darstellung sorgt, ohne dabei aufdringlich zu wirken. Die Farben sind gleichmäßig verteilt – achromatische Weiß- und Silbertöne dominieren fast alle Inhalte, während die Farbpalette für atmosphärische Farbverläufe, die Unterscheidung von Kartenoberflächen und einen charakteristischen, pillenförmigen Button reserviert ist, der seine Farbe von Türkisblau zu Lavendelrosa ändert. Die Karten schweben auf dezenten, türkisfarbenen Oberflächenerhebungen (16px Radius, keine Schatten) anstatt auf der Höhe, sodass die Hierarchie eher wie die Tiefe des Wassers als wie ein Schatten auf Papier wahrgenommen wird. Die Komponenten wirken durchdacht und instrumentenähnlich: Tracking-Markierungen in Großbuchstaben, schlanke geometrische Pfeilsymbole und große, hellrosa Zahlenanzeigen.
Ein dunkles, vollflächiges Canvas mit Inhalten bis maximal 1440 Pixel Breite. Das Hauptelement ist ein zentrierter Textblock (Haupttext → Überschrift → Untertext → Handlungsaufforderung), der die gesamte Höhe des Viewports einnimmt und im Hintergrund ein Partikel darstellt. Die Abschnitte sind als vollflächige Streifen mit großzügigen vertikalen Abständen von mindestens 68 Pixeln angeordnet und wechseln zwischen Canvas und leicht vertieften Flächen. Der Abschnitt „Entdecken“ verwendet ein asymmetrisches zweispaltiges Layout: Die linke Spalte enthält gestapelte Feature-Karten, während die rechte Spalte eine geometrische Molekülillustration zeigt. Die Inhalte sind in schmalen Spalten (maximal ca. 600 Pixel) zentriert, um eine gute Lesbarkeit zu gewährleisten, anstatt sich über die gesamte Breite zu erstrecken. Die Fußzeile ist eine vertiefte Vertiefung (#011d1c) mit einem vertikalen Rand von 120 Pixeln, die den Eindruck eines tiefen Beckens erweckt. Die Navigation ist ein schmales, transparentes Panel mit Elementen im Abstand von 16–24 Pixeln. Der Gesamtrhythmus ist filmisch und weitläufig – jeder Abschnitt atmet, und die tiefe, wasserähnliche Farbgebung erzeugt das Gefühl, mit jedem Abschnitt tiefer zu fallen.
Der visuelle Stil ist minimalistisch und atmosphärisch. Die Startseite präsentiert eine dreidimensionale Partikelkugel – Tausende winziger türkisblauer und weißer Punkte bilden eine rotierende Kugel, deren Form an die Leinwand und die lavendelrosa Akzente an den Rändern erinnert und so einen biolumineszenten Effekt erzeugt, der an ein Informationsobjekt denken lässt. Flache geometrische Moleküldiagramme (weiße Kreise und dünne Verbindungslinien auf dunklem Grund) dienen als dekorative Elemente in der rechten Spalte. Keine Fotos, keine Lifestyle-Bilder, keine Personen – die Bildsprache basiert auf klaren Datengrafiken und abstrakten Formen. Die Partikelkugel ist das prägende visuelle Element der Markenidentität; sie muss auf jeder wichtigen Seite mindestens einmal erscheinen, um die Tiefsee-Metapher zu verstärken.
Palette
Marke
- Liquid Abyss
#012624— Der Haupthintergrund besteht aus der Basis der Seite, dem Header, dem Hauptelement und dem dominanten dunkeltürkisen Feld. Er erzeugt eine Tiefsee-Atmosphäre. - Liquid Deep
#011d1c— Die vertiefte Oberfläche bildet den Hintergrund der Fußleiste und die tieferen Kartonplatten. Sie erscheint einen Halbton dunkler als die Leinwand und erzeugt so einen subtilen Tiefenverlauf nach unten. - Liquid Kelp
#003734— Erhöhte Kartenoberfläche und Schaltflächenfüllung – eine erhöhte Oberfläche, die eine Stufe über dem Abgrund positioniert ist. Wird für Feature-Karten, Inhaltsbereiche und den Startpunkt einer Farbverlaufsschaltfläche verwendet.
Neutral
- Liquid Mist
#edfffe— Ein kühler Weißton hebt den Fließtext, die Abschnittsüberschriften und die warme, helle Typografie hervor. Ein dezenter Blaustich verbindet den Fließtext mit dem türkisfarbenen Farbschema. - Platinum
#ffffff— Reinweiß wird für Überschriften, Navigationselemente, Symbolumrisse und kontrastreichen Text verwendet. Es ist die primäre Textfarbe in allen Überschriftenebenen und der primären Navigation. - Silver Mist
#bbc7c6— Sekundärtext, dezente Beschreibungen und Linkfarben sind im Originalzustand. Sie weisen einen leichten Grünstich auf, der den türkisfarbenen Hintergrund ergänzt. - Ash
#f2f2f2— Zusätzlicher Text für Zitate und Rezensionen. Ein neutraler, kühler Grauton, falls der türkisfarbene Unterton von Silver Mist zu grell wirkt. - Slate Deep
#707777— Eine dezente Oberflächentönung für inaktive oder schlecht sichtbare Hintergründe. Sie liegt zwischen Leinwand und Karton und erzeugt einen sehr subtilen Höhenunterschied. - Lavender Phosphor
#fde9ff— Die Hintergrundbeleuchtung hebt große Statistiken, Zählerstände und wichtige Kennzahlen hervor. Der Rosaton im charakteristischen Farbverlauf wird sparsam als leuchtender Akzent auf dunklen Oberflächen eingesetzt.
Typografie
von 10 bis 96 Pixel · 6 Schritte
- Matter — Ersatz: Inter · Umrisse 400, 500 · Die primäre Schriftart für Überschriften und Fließtext hat eine Stärke von 500 für alle Überschriften (H1–H3) und große dynamische Texte (86–295 px). Für Fließtext und UI-Texte kommt eine Stärke von 400 zum Einsatz. Sie zeichnet sich durch einen ausgeprägten negativen Buchstabenabstand bei großen Schriftgrößen aus (-0,04em bei 61 px, -0,046em bei 86 px) und einen großzügigen positiven Buchstabenabstand in den Titelbuchstaben (0,08em bei 20 px, 0,12em bei 12 px, 0,15em bei 10 px). Die Strategie, ausschließlich eine mittlere Stärke für Überschriften zu verwenden – keine Fett- oder Light-Schrift – verleiht der Schriftart eine einheitliche, professionelle Wirkung.
- Arial — Ersatz: system-ui · Umrisse 400 · Ein sekundärer Fallback für interaktive UI-Elemente (Navigation, Schaltflächen, Kopfzeilentext, Fußzeile). Wird nur bei einer Breite von 14 Pixeln angezeigt – dient als sicherer, universeller Fallback, wenn Matter nicht geladen ist, und umfasst Formularbeschriftungen, Schaltflächentexte und kurze Hilfetexte.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 20px |
| Radius der Schaltfläche | 6px |
| Kartenradius | 16px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 68px |
| Seitenbreite | 1440px |
KI erstellt Ihre Website im Auros -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
- Design Full-Time — ein Studiokino mit einem warmen Scheinwerfer
- Air — Skulptur „Mitternachtshimmel durch Glas“
- Slash — Mitternachtsgewölbe mit vergoldeten Büchern
- Raycast — Mitternachts-Kommandozentrale, Korallen-Neon
- Dimension — Ein dämmerungsbeleuchteter Arbeitsplatz mit Milchglaswänden
- Modal — Ein phosphoreszierendes Terminal in einem abgedunkelten Serverraum – die einzige Lichtquelle ist ein helles Grün.
- Giga — Mitternachtshorizont über bereiftem Obsidian
- Reflect Notes — Der sternenklare violette Raum ist eine dunkle Sternwarte, in der Noten wie Sternbilder vor einem Hintergrund fast schwarzer indigoblauer Leere schweben.
- Ameba — Der Kontrollraum um Mitternacht – ein elektrisch blauer Puls hinter Milchglasscheiben
- AgentQL — Nordlichter über dem Terminal bei Nacht
- Frame — Ein Kino für Filmvorführungen bis spät in die Nacht. Ein abgedunkelter Raum, in dem ein einzelner blauer Scheinwerfer die gesamte Arbeit übernimmt und die Benutzeroberfläche in den Hintergrund tritt, sodass kreative Inhalte nach vorne projiziert werden können.
- Harness — Missionskontrolle um Mitternacht mit phosphoreszierenden grünen Akzenten