Caldera

Palette

Marke

• Ember #fc5000 — Die primären Aktionsschaltflächen, Statuskarten und wichtigen visuellen Akzente sind die einzigen auffälligen Farbakzente; ihre Leuchtkraft im Kontrast zu den warmen Grautönen erzeugt ein Gefühl der Dringlichkeit, ohne dass zusätzliche dekorative Elemente erforderlich sind.
• Plasma Violet #524ae9 — Haupt-Halbton-Gradientenbasis, eine zusätzliche Kartenoberfläche - Wird fast ausschließlich im Hauptpunktmuster und auf einer dedizierten Karte verwendet; wird nie für Bedienelemente verwendet.

Neutral

• Sulfur #f5f28e — Der Hintergrund für die Tag- und Kategoriesymbole, kleine Hervorhebungen, ist ein sanftes Gelb, das zur Kennzeichnung von Blogbeitragskategorien und Programmankündigungen verwendet wird.
• Limestone #f7f6f2 — Die Oberflächen der Karten, die Hintergründe der Inhaltsblöcke und die zusätzlichen Schaltflächenfüllungen sind in einem helleren, wärmeren Weißton gehalten, wodurch sich die Elemente vom Seitenhintergrund abheben.
• Pumice #e2e2df — Der Haupthintergrund der Seite ist ein warmes Mittelgrau, das als Grundlage für jeden Abschnitt dient; es ist etwas dunkler als die Oberfläche des Kartons, wodurch eine subtile Trennung von Figur und Hintergrund ohne Schatten ermöglicht wird.
• Obsidian #070607 — Der Haupttext, die Überschriften, die Linktexte und die Schaltflächenrahmen sind fast schwarz mit einem kaum wahrnehmbaren warmen Farbton, der zu den warmen Farben der Leinwand passt.
• Chalk #ffffff — Text in dunklen Abschnitten, Eingabetext auf dunklem Hintergrund, kontrastreiche Überlagerungen – Reines Weiß wird nur dort verwendet, wo ein maximaler Kontrast zu dunklen Oberflächen erforderlich ist.

Typografie

von 12 bis 189px · 10 Schritte

• PP Neue Corp Compact — Ersatz: Bebas Neue · Umrisse 400 (Ultrabold cut) · Alle Überschriften und der gesamte Text werden in einer speziell entworfenen, schmalen und extrafetten Schriftart gestaltet, die den Überschriften eine industrielle, fast schildartige Wirkung verleiht. Die Schriftgröße von 189 Pixeln im Hauptblock spiegelt den charakteristischen Stil der Marke wider: schmal, fast strukturell statt typografisch. Die Einstellungen „ss06“ und „ss10“ aktivieren alternative Buchstabenformen und Abstände für einen dynamischeren, kompakteren Rhythmus. Der positive Buchstabenabstand (+0,02em) ist für Display-Schriftgrößen ungewöhnlich und verhindert, dass der Text bei 80–189 Pixeln gedrängt wirkt.
• DM Sans — Ersatz: Inter · Umrisse 500 (Medium only — never Regular or Bold) · Der Haupttext, die Navigationslinks, die Schaltflächenbeschriftungen und die Unterüberschriften sind bis zu 30 Pixel groß. Die mittlere Schriftstärke wurde bewusst gewählt – Regular würde neben der extrafetten Überschriftenschrift zu dünn wirken, und Bold würde mit ihr konkurrieren. DM Sans bildet einen humanistischen, leicht geometrischen Kontrast zur industriell anmutenden Überschriftenschrift.
• System sans-serif — Ersatz: Inter · Umrisse 400 · Bildunterschriften, Metadaten, Datumsangaben, Mikrotags. Werden nur in 12px verwendet, wo Gewicht und Markenwiedererkennung weniger wichtig sind als die Speicherplatzersparnis.

Intervalle und Form

Ähnliche Stile

• teenage engineering — Industriekatalog für Studiobeleuchtung – das Produkt ist das einzige wichtige Objekt auf der Seite, alles andere wird darum herum besprochen.
• basement — Eine leere Druckmaschine um 3 Uhr morgens – riesige, gequetschte Schriftarten, die sich über das pechschwarze Licht ausbreiten, ein einzelner orangefarbener Lichtschein auf der Navigationsleiste, alles andere weiß oder geisterhaft grau.
• amra — Eine irisierende Kugel auf weißem Hintergrund – der lavendelfarbene Akzent ist der einzige Farbtupfer auf einer fast vollkommen achromatischen Seite, und die einzelne Kugel mit Farbverlauf übernimmt die Funktion, die normalerweise die Hauptillustration erfüllt.
• Stink Studios — Ein Filmstudio um Mitternacht – der Projektor brummt, der Raum ist dunkel, nur der Film ist beleuchtet.
• Andrei Rybin — Ein monochromes Skizzenbuch ist ein Designer-Notizbuch, in dem Handybildschirme wie Kontaktabzüge an einer weißen Wand befestigt sind.
• Uniswap Cup — Die Übertragung des E-Sport-Wettbewerbs findet auf einer simulierten Website statt – ein rosa Stift umreißt ein Raster aus weißen Quadraten und dünnen Linien.
• Freytag Anderson — Der Kinovorhang hebt sich mit einem einzigen Wort. Ein riesiges bewegtes Bild füllt die gesamte Leinwand aus, der Markenname prangt wie ein Titel in der Ecke, und nichts anderes lenkt ab.
• Integrated Biosciences — Biolumineszenzlabor um Mitternacht
• Vercel — Terminal auf weißem Papier gedruckt
• Mintlify — Ein Wolkengarten über einem Glastisch. Der handgezeichnete Himmel und die dokumentarische Darstellung sind gemeinsam gerahmt – der einzige Ort, an dem Farbe und Konzept aufeinandertreffen, bevor die Seite in klösterliches Weiß übergeht.
• Gleap — Ein in warmen Cremetönen gehaltener Arbeitsbereich mit Graphit-Akzenten – ein Studio, in dem matte schwarze Tintenpunkte über der Leinenarchitektur zu schweben scheinen.
• ClickUp — Ein aussagekräftiges Dashboard auf weißem Marmor. Die Seite ist eine Produktbroschüre für ein Produktivitätstool, daher ist die visuelle Sprache vom Produkt selbst übernommen: dichte Listen, Statusanzeigen, Gruppen von Avataren und markante typografische Aussagen, die wie eine ausgestellte Produktspezifikation wirken.