Framer
Neongalerie im Nichts
Framer arbeitet in nahezu völliger Dunkelheit – einer schwarzen Leinwand, auf der Inhalte wie ein Leuchtschild bei einer Vernissage zu schweben scheinen. Überschriften, gesetzt in GT Walsheim Medium mit engem Zeilenabstand von 0,8–1,1 und starkem negativem Buchstabenabstand (-0,04em bei 54px), ergeben eine kompakte, dekorative Schriftart, die eher hervortritt, als sich harmonisch auf der Seite einzufügen. Ein einziges elektrisches Blau (#0099ff) setzt alle funktionalen Akzente – Rahmen, Leuchteffekte, Symbole, aktive Zustände –, während die restliche Benutzeroberfläche farblos bleibt und durch subtile Graustufenübergänge (#111, #171717, #242424) Tiefe aus reinem Schwarz erzeugt. Die Komponenten wirken durchdacht und nicht dekorativ: abgerundete Radien von 8–25px, schmale 1px-Rahmen, minimale Schlagschatten und transparente Oberflächen, die den Raum durchscheinen lassen.
Die Abschnitte erstrecken sich über die gesamte Breite des schwarzen Hintergrunds hinaus. Der Inhalt ist auf eine maximale Breite von ca. 1200 Pixeln begrenzt und zentriert. Der Hauptbereich verfügt über eine linksbündige Überschrift und einen einzelnen Call-to-Action-Button (CTA). Die rechte Seite ist bewusst asymmetrisch und nicht zentriert freigelassen. Die Abschnitte wechseln zwischen reinen Textlayouts (große Überschrift + Untertext) und Produkt-Screenshots. Der Abschnitt „Comes with Framer“ verwendet eine Logowand in einem vierspaltigen Raster. Im Community-Bereich befindet sich ein Produkt-Screenshot in einem zentrierten, bildschirmfüllenden Container mit abgerundeten Ecken. Die Navigation ist minimalistisch: eine schmale obere Leiste mit dem Logo links und rechtsbündig ausgerichteten Links, ohne sichtbare Bedienelemente. Der Abschnittsrhythmus ist durch deutliche vertikale Abstände von 80 Pixeln gekennzeichnet, wodurch klar abgegrenzte Inhaltsinseln entstehen.
Screenshots der Benutzeroberfläche dominieren – eingerahmt von einem chromähnlichen Fenster mit Ampelpunkten, bilden eingebettete Screenshots der App das Hauptbild. Logos, die die Qualität belegen sollen, werden in weißer Schrift auf schwarzem Hintergrund mit großem Zeilenabstand präsentiert. Es werden keine Fotos, Illustrationen oder abstrakte Grafiken verwendet – die visuelle Sprache ist das Produkt selbst, dargestellt als lebendige Benutzeroberfläche. Der Icon-Stil ist minimalistisch, umrandet, monochrom und weiß in kleinen Größen. Die Textdichte ist überwiegend Text, mit gelegentlichen größeren Textfragmenten in Form von Produkt-Screenshots. Die visuelle Raumaufteilung bevorzugt eindeutig die Typografie gegenüber Bildern.
Palette
Marke
- Vivid Violet
#0066ff— Die primäre Aktionsschaltfläche ist die einzige Stelle in der Benutzeroberfläche, an der ein einfarbiger Schaltflächenhintergrund angezeigt wird.
Neutral
- Bone
#ffffff— Hauptüberschriften, Haupttext auf dunklem Hintergrund, der Hintergrund der Schaltflächen ist die einzige Lichtquelle. - Void
#000000— Die Seitenfläche, der Navigationshintergrund, die Kartenoberflächen, die Symbolfüllung – alles ist in einem endlosen Schwarz gehalten, das alle nicht wesentlichen Inhalte absorbiert. - Graphite
#111111— Erhabene Kartenoberflächen heben sich vom Nichts ab – große, funktionale Karten und modale Behälter. - Obsidian
#171717— Zwischenfläche für Schaltflächen, zusätzliche Karten, UI-Füllungen - trennt interaktive Elemente von der Arbeitsfläche. - Slate
#242424— Beim Überfahren mit der Maus erscheinen Eingabefelder und eingerückte Panels in einem hellsten neutralen Farbton, bevor sie in das Textformat wechseln. - Ash
#333333— Tiefenfüllung für inaktive Hintergrundbilder und Strukturelemente.
Typografie
von 12 auf 68 Pixel · 8 Schritte
- sans-serif — Ersatz: Inter · Umrisse 400 · sans-serif - in den extrahierten Daten gefunden, aber von der KI nicht beschrieben.
- GT Walsheim — Ersatz: Inter Tight · Umrisse 500 · Die Schriftart für Überschriften und Titel ist die Markenschrift. Sie ist stark kondensiert, mit einem Zeilenabstand von 0,8–1,1 und einem Buchstabenabstand von -0,04em bis -0,05em im Bereich von 44–68px. Sie ist kein rein dekoratives Element; die geometrische Wärme von GT Walsheim, kombiniert mit strengen Metriken, prägt die Systemsprache – selbstbewusst, kompakt und leicht futuristisch. Für einen ähnlichen geometrischen Ausdruck empfehlen wir Inter Tight oder Space Grotesk Bold.
- Inter Variable — Ersatz: Inter · Umrisse 400 · Haupttext, Navigation und Unterüberschriften bilden das Kernstück. Die variable Achse ermöglicht eine stufenlose Interpolation der Schriftstärken. Die Spurweite verringert sich mit zunehmender Schriftgröße: von -0,001em bis 18px und von -0,027em bis 22px. Die variable Version ermöglicht flüssige Mikroanimationen der Website. Alternative: Inter ( Google) – eine nahezu identische Ausweichlösung.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 10px |
| Radius der Schaltfläche | 9999px |
| Kartenradius | 20px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 80px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Framer -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
- Auros — Abyssales Terminal mit biolumineszenten Datenkugeln
- Origin Financial — Eine Mitternachtsgalerie stiller Opulenz. Ein ruhiger, fast dunkler Raum, in dem große Serifenschriften und einige beleuchtete Farbtafeln den Eindruck erwecken, dass die Finanzwelt ein sorgfältig kuratiertes Kunstwerk ist.
- Raycast — Mitternachts-Kommandozentrale, Korallen-Neon
- Dimension — Ein dämmerungsbeleuchteter Arbeitsplatz mit Milchglaswänden
- 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
- Branding — Schwarze Galeriewand, blutrote Akzente – Große weiße Schriftarten schweben auf einer dunklen Leinwand, die einer Leere ähnelt, unterbrochen von einem einzelnen leuchtend roten Akzent und auffälligen dekorativen Elementen, die eher an eine Galeriebeschilderung als an eine Weboberfläche erinnern.
- Harness — Missionskontrolle um Mitternacht mit phosphoreszierenden grünen Akzenten
- Koto — Die Obsidian Gallery um Mitternacht. Eine fast stockdunkle Bühne, auf der die einzige warme Lichtquelle ein einzelner gelber Marker ist und in der verdichtete Schrift wie Ausstellungsplakate im riesigen Negativraum schwebt.
- Ohzi — Ein leuchtender Würfel, der in einer dunklen Galerie schwebt
- Depot — Ein dunkles Serverterminal. Eine fast schwarze Entwicklerkonsole, bei der eine einzelne grüne LED den Arbeitsbeginn signalisiert, während der Rest der Benutzeroberfläche in Graphit dargestellt wird.
- Maciej Zadykowicz — Die Midnight Gallery mit ihrem kaleidoskopartigen Wandgemälde ist eine fast schwarze Studiowand, auf der ein lebendiges, farbenfrohes typografisches Kunstwerk die Aufmerksamkeit auf sich zieht, während alles andere ruhig und bedächtig bleibt.