Calendly
Ciemnoniebieski tusz na zimnym marmurze
Calendly sprawia wrażenie spokojnego, pewnego siebie miejsca do planowania: niemal białe płótno z dużą ilością przestrzeni, wyraźne białe karty produktów unoszące się na chłodnym szarym tle i cała typografia wykonana ciemnoniebieskim tuszem zamiast czystej czerni. Elementem definiującym jest ciemnoniebieski kolor (#0b3558), używany wszędzie tam, gdzie pojawia się tekst – nagłówki, przyciski, ikony, linki – który łagodzi cały interfejs, czyniąc go cieplejszym i bardziej stylowym niż typowa strona docelowa SaaS. Pojedynczy jasnoniebieski kolor (#006bff) jest używany do wszystkich głównych działań, a dekoracyjne różowe i niebieskie plamy, wystające poza układy produktów, dodają ciepła, nie tworząc bałaganu. Komponenty są stonowane: cienkie obramowania o szerokości 1 piksela, subtelne niebieskie cienie, duże promienie kart o szerokości 24 pikseli i rogi przycisków o szerokości 8 pikseli wydają się celowe, a nie nudne.
Maksymalna szerokość 1200 px, wyśrodkowane, z szerokimi marginesami na pulpicie. Główny ekran jest podzielony na dwie kolumny: lewa kolumna zawiera nagłówek 80 px + tekst główny + ułożone w stos przyciski logowania, podczas gdy prawa kolumna zawiera kartę widżetu rezerwacji z elementami dekoracyjnymi w tle. Poniżej głównego ekranu znajduje się pojedynczy pasek o pełnej szerokości z logo Trust. Kolejne sekcje naprzemiennie zawierają wyśrodkowane bloki nagłówka (H2 + podtekst + opcjonalne wezwanie do działania), a następnie dwukolumnowe bloki opisujące cechy (tekst po lewej/produkt po prawej lub produkt po lewej/tekst po prawej) z dekoracyjnymi elementami akcentowymi za każdym obrazem produktu. Siatki kart są rzadko używane — układ preferuje sparowane sekcje umieszczone obok siebie, a nie siatki wielokolumnowe. Odstępy między sekcjami wahają się od 48 do 64 px. Nawigacja to stały górny pasek o szerokości 64 px z logo po lewej stronie, wyśrodkowane menu i grupa wezwań do działania po prawej stronie.
Głównym elementem wizualnym są zrzuty ekranu produktów – proste makiety interfejsu użytkownika kalendarza rezerwacji, renderowane na czystych, białych kartach o szerokich, zaokrąglonych rogach. Dekoracyjny projekt: każda karta produktu otoczona jest delikatnym, koralowo-fioletowym (#e55cff) lub lazurowo-niebieskim (#0099ff), lekko przesuniętym i rozmytym, tworząc efekt kolażu, a nie płaskiego zrzutu ekranu. Brak zdjęć, brak obrazów lifestylowych – wszystkie elementy wizualne reprezentują interfejs użytkownika produktu, abstrakcyjne kształty akcentujące lub monochromatyczne logo partnerów na pasku zaufania. Ikony są liniowe, o szerokości linii 1,5–2 px, monochromatyczne, w kolorze ciemnoniebieskim (Ink Navy) lub niebieskim (Signal Blue).
Paleta
Marka
- Ink Navy
#0b3558— Tekst główny, nagłówki, ikony, ciemne tło dla wezwań do działania, linki nawigacyjne. - Signal Blue
#006bff— Główne wezwanie do działania (CTA), aktywna nawigacja, podkreślenie linków, wybrane stany
Neutralny
- Carbon
#0a0a0a— Tekst w czystej czerni (wersja awaryjna), glif logo, wypełnienie ikony. - Slate Gray
#476788— Dodatkowy tekst główny, tekst pomocniczy, wyciszone etykiety. - Mist Gray
#a6bbd1— Wyłączony tekst, nieaktywne etykiety funkcji, jasne kontury ikon - Cloud
#f8f9fb— Płótno strony, tło stopki, dodatkowa powierzchnia - Paper
#ffffff— Powierzchnie kart, wypukłe panele, tekst przycisków na ciemnym tle. - Pebble
#f0f3f8— Obrazy tła dla ikon, cieniowanie pól wprowadzania danych, delikatne separatory, efekty najechania kursorem.
Typografia
od 12 do 80px · 10 kroków
- Gilroy — wymiana: Manrope · wytyczne 400, 500, 600, 700 · Cały tekst interfejsu. Gilroy to geometryczny humanistyczny krój bezszeryfowy o szerokich aperturach i jednolitym kontraście linii; jego pogrubienia (700) są używane w nagłówkach, a 500–600 w przyciskach i podtytułach. Zastąp Manrope lub Inter.
- Gilroy — wymiana: Inter · wytyczne 400 · Tekst główny i etykiety interfejsu użytkownika ogólnego przeznaczenia — czcionka o grubości 400 punktów zapewnia czytelność długich tekstów, bez wrażenia ciężkości.
- Gilroy — wymiana: Inter · wytyczne 500 · Nagłówki drugorzędne i wyróżniony tekst główny - czcionka 14/500 jest podstawowym narzędziem w przypadku nagłówków kart i etykiet wbudowanych.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-16px |
| Promień przycisku | 8px |
| Promień karty | 24px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 48-64px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Calendly i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- Dub — Panel sterowania z matowego papieru ryżowego firmy Link
- Seline Analytics — Cichy analityczny stół na ciepłym papierze
- Notion — Ciepły papierowy notatnik w południowym słońcu
- Anthropic — Naukowy dziennik terenowy na ciepłym pergaminie — spokojne, kości słoniowe powierzchnie, szeryfowe nagłówki redakcyjne i pojedynczy gliniany akcent, który pojawia się tylko wtedy, gdy zachodzi potrzeba działania.
- Augen Pro — Biała prezentacja Apple charakteryzuje się klinicznym, lekkim, elektryzującym błękitem jako jedynym akcentem w monochromatycznej przestrzeni.
- Antimetal — Kronika redakcyjna na kremowym papierze – spokojny poranek w czasopiśmie naukowym, gdzie powściągliwość wyraża pewność siebie, a szeryfy wykonują ciężką pracę
- Perk — Elektryczna limonka na ciepłym papierze pergaminowym
- Ditto — Rozświetlony słońcem warsztat, w którym powstają próbki dzikich kwiatów. Ciepłe, kremowe powierzchnie, żywa żółta baza, głęboki granatowy kolor, organiczne formy kolorystyczne rozkwitające za dziełem.
- Officevibe — Magazyn redakcyjny na ciepłym, kremowym papierze. Wyobraź sobie przemyślany esej o zarządzaniu zasobami ludzkimi, zaprezentowany jako produkt – kursywny krój pisma szeryfowego, szepczący przez nowoczesny, niebieski interfejs.