Calendly
Dunkelblaue Tinte auf kaltem Marmor
Calendly vermittelt das Gefühl eines ruhigen, souveränen Planungsarbeitsbereichs: eine nahezu weiße Oberfläche mit viel Freiraum, klare weiße Produktkarten vor einem kühlen grauen Hintergrund und die gesamte Typografie in einem dunklen Blau statt in reinem Schwarz. Das prägende Element ist die dunkelblaue Farbe (#0b3558), die überall dort verwendet wird, wo Text erscheint – Überschriften, Schaltflächen, Symbole, Links – und die die gesamte Benutzeroberfläche weicher, wärmer und stilvoller als die typische SaaS-Landingpage wirken lässt. Ein einziges helles Blau (#006bff) wird für alle Hauptaktionen verwendet, und dekorative rosa und blaue Farbtupfer, die sich über die Produktlayouts hinaus erstrecken, sorgen für zusätzliche Wärme, ohne überladen zu wirken. Die Komponenten sind dezent gehalten: Dünne 1-Pixel-Rahmen, subtile blaue Schatten, große 24-Pixel-Kartenradien und 8-Pixel-Schaltflächenecken wirken bewusst gestaltet und nicht langweilig.
Maximale Breite 1200px, zentriert, mit breiten Rändern auf Desktop-Computern. Der Hauptbildschirm ist zweispaltig: Die linke Spalte enthält eine 80px breite Überschrift, den Fließtext und die gestapelten Anmeldebuttons, die rechte Spalte eine Buchungs-Widget-Karte mit dekorativen Elementen im Hintergrund. Unterhalb des Hauptbildschirms befindet sich ein einzelner, vollflächiger Streifen mit dem Trust-Logo. Die folgenden Abschnitte wechseln sich ab zwischen zentrierten Überschriften (H2 + Untertext + optionaler Call-to-Action) und zweispaltigen Blöcken mit Produktbeschreibungen (Text links/Produkt rechts oder Produkt links/Text rechts) mit dekorativen Akzenten hinter den Produktbildern. Kartenraster werden selten verwendet – das Layout bevorzugt nebeneinander angeordnete Abschnittspaare anstelle von mehrspaltigen Rastern. Der Abstand zwischen den Abschnitten beträgt 48 bis 64px. Die Navigation besteht aus einer 64px breiten, fixierten oberen Leiste mit dem Logo links, einem zentrierten Menü und einer Gruppe von Call-to-Actions rechts.
Das zentrale visuelle Element sind Produkt-Screenshots – einfache Mockups der Benutzeroberfläche des Buchungskalenders, dargestellt auf klaren, weißen Karten mit breiten, abgerundeten Ecken. Dekoratives Design: Jede Produktkarte ist von einem sanften Fleck in Korallenviolett (#e55cff) oder Azurblau (#0099ff) umgeben, der leicht versetzt und verschwommen ist und so einen Collage-Effekt anstelle eines flachen Screenshots erzeugt. Keine Fotos, keine Lifestyle-Bilder – alle visuellen Elemente repräsentieren die Benutzeroberfläche des Produkts, abstrakte Akzentformen oder monochrome Partnerlogos in der Vertrauensleiste. Die Icons sind linear mit einer Linienstärke von 1,5–2 Pixeln, monochrom und in Dunkelblau (Ink Navy) oder Blau (Signal Blue) gehalten.
Palette
Marke
- Ink Navy
#0b3558— Haupttext, Überschriften, Symbole, dunkler Hintergrund für Handlungsaufforderungen, Navigationslinks. - Signal Blue
#006bff— Primärer Handlungsaufruf (CTA), aktive Navigation, Link-Hervorhebung, ausgewählte Staaten
Neutral
- Carbon
#0a0a0a— Text in reinem Schwarz (Fallback), Logo-Glyphe, Symbolfüllung. - Slate Gray
#476788— Zusätzlicher Haupttext, Begleittext, ausgeblendete Beschriftungen. - Mist Gray
#a6bbd1— Deaktivierter Text, Beschriftungen inaktiver Funktionen, helle Symbolumrisse - Cloud
#f8f9fb— Seitenhintergrund, Fußzeilenhintergrund, zusätzliche Oberfläche - Paper
#ffffff— Kartenoberflächen, erhabene Felder, Schaltflächentext auf dunklem Hintergrund. - Pebble
#f0f3f8— Hintergrundbilder für Symbole, Schattierungen für Eingabefelder, dezente Trennlinien, Hover-Effekte.
Typografie
von 12 auf 80px · 10 Schritte
- Gilroy — Ersatz: Manrope · Umrisse 400, 500, 600, 700 · Sämtlicher Benutzeroberflächentext. Gilroy ist eine geometrisch-humanistische serifenlose Schriftart mit großen Öffnungen und gleichmäßigem Strichkontrast; ihre Fettschnitte (700) werden für Überschriften verwendet, während 500–600 für Schaltflächen und Unterüberschriften zum Einsatz kommen. Ersetzen Sie sie durch Manrope oder Inter.
- Gilroy — Ersatz: Inter · Umrisse 400 · Fließtext und allgemeine UI-Beschriftungen – die Schriftstärke von 400 Punkt sorgt dafür, dass lange Texte gut lesbar sind, ohne sich schwerfällig anzufühlen.
- Gilroy — Ersatz: Inter · Umrisse 500 · Sekundäre Überschriften und hervorgehobener Fließtext - Die Schriftgröße 14/500 ist das primäre Werkzeug für Kartenüberschriften und Inline-Beschriftungen.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8-16px |
| Radius der Schaltfläche | 8px |
| Kartenradius | 24px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 48-64px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Calendly -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
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- Dub — Link's mattes Reispapier-Bedienfeld
- Seline Analytics — Ein ruhiger analytischer Tisch auf warmem Papier
- Notion — Ein warmes Notizbuch aus Papier in der Mittagssonne
- Anthropic — Ein wissenschaftliches Feldtagebuch auf warmem Pergament – ruhige elfenbeinfarbene Oberflächen, serifenbesetzte Überschriften und ein einzelner Akzent in Lehmfarbe, der nur dann erscheint, wenn Handlungsbedarf besteht.
- Augen Pro — Apples weiße Präsentation zeichnet sich durch ein klinisch-schwereloses, elektrisches Blau als einzigen Akzent in einem monochromen Raum aus.
- Antimetal — Ein redaktioneller Bericht auf cremefarbenem Papier – ein ruhiger Morgen in einer wissenschaftlichen Zeitschrift, wo Zurückhaltung Selbstvertrauen vermittelt und Serifen die Hauptarbeit leisten.
- Perk — Elektrisches Limettengrün auf warmem Pergamentpapier
- Ditto — Eine sonnendurchflutete Werkstatt, in der Wildblumenmuster entstehen. Warme cremefarbene Oberflächen, ein leuchtendes Gelb als Grundfarbe, tiefblaue Tinten, organische Farbformen, die hinter dem Werk erblühen.
- Officevibe — Ein redaktionelles Magazin auf warmem, cremefarbenem Papier. Stellen Sie sich einen tiefgründigen Essay über Personalmanagement vor, präsentiert wie ein Produkt – eine geschwungene Serifenschrift, die durch eine moderne blaue Benutzeroberfläche flüstert.