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
- Mollie — Ein Kassenbereich aus Kaschmir, ein dunkles Kassenbuch. Lassen Sie um den schwarzen Text herum viel Weißraum für redaktionelle Gestaltung und heben Sie produktbezogene Punkte mit warmen Cremetönen, Espressobraun und haptischen Fotos von tatsächlichen Zahlungsmethoden hervor.
- Kagi — Ein separater Leseraum. Schaffen Sie einen offenen, weißen Raum um fettgedruckte Graphittexte herum und nutzen Sie dezente violette Akzente und warme Pastellfarben, um die Ruhe aufzulockern.
- Milanote — Milanote ist ein spezialisiertes Kreativstudio. Wir erstellen redaktionelle Galerie-Seiten mit schwebenden visuellen Tafeln: dunkle Rahmen, weiße Ausstellungsfläche und Screenshots, die wie reale Objekte mit sanfter Tiefenwirkung wirken.
- Co2 — Ein Klimaatlas im Winterlicht. Gestalten Sie Seiten wie eine Luftbilddokumentlandschaft, in der Serifenüberschriften, kategorisierte Daten und eisige Bilder breite weiße Ränder hervorheben.
- GitButler — Türkis am Ende des Textes. Eine Kombination aus kontrastreichen Serifenüberschriften mit dezenten technischen Rastern, warmen Graphitflächen und einem zurückhaltenden türkisfarbenen Akzent.
- 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.