Calendly
Mörkblått bläck på kall marmor
Calendly känns som en lugn och trygg planeringsarbetsplats: en nästan vit duk med gott om andrum, skarpa vita produktkort som svävar mot en sval grå bakgrund, och all typografi återges i mörkblått bläck snarare än rent svart. Det definierande elementet är den mörkblå färgen (#0b3558), som används överallt där text visas – rubriker, knappar, ikoner, länkar – vilket mjukar upp hela gränssnittet och gör det varmare och snyggare än en typisk SaaS-landningssida. En enda klarblå färg (#006bff) används för alla primära åtgärder, och dekorativa rosa och blå stänk som sträcker sig bortom produktlayouterna ger värme utan att skapa röra. Komponenterna hålls diskreta: tunna 1px-kanter, subtila blåtonade skuggor, stora 24px-kortradier och 8px-knapphörn känns avsiktliga snarare än intetsägande.
Maximal bredd 1200px, centrerad, med breda marginaler på skrivbordet. Huvudskärmen är uppdelad i två kolumner: den vänstra kolumnen innehåller en 80px sidhuvud + brödtext + staplade inloggningsknappar, medan den högra kolumnen innehåller ett bokningswidgetkort med dekorativa element i bakgrunden. Under huvudskärmen finns en enda rand i full bredd med Trust-logotypen. Efterföljande avsnitt växlar mellan centrerade sidhuvudblock (H2 + undertext + valfri uppmaning till handling), följt av block med två kolumner som beskriver funktioner (text vänster/produkt höger eller produkt vänster/text höger) med dekorativa accentelement bakom varje produktbild. Kortrutnät används sällan – layouten föredrar parade avsnitt placerade sida vid sida snarare än rutnät med flera kolumner. Avståndet mellan avsnitten varierar från 48 till 64px. Navigeringen är en 64px fast övre bar med logotypen till vänster, en centrerad meny och en grupp uppmaningar till höger.
Det huvudsakliga visuella elementet är produktskärmdumpar – enkla mockups av bokningskalenderns användargränssnitt, renderade på skarpa vita kort med breda, rundade hörn. Dekorativ design: varje produktkort är omgivet av en mjuk fläck i koralllila (#e55cff) eller azurblått (#0099ff), något förskjuten och suddig, vilket skapar en collageeffekt snarare än en platt skärmdump. Inga fotografier, inga livsstilsbilder – alla visuella element representerar produktens användargränssnitt, abstrakta accentformer eller monokroma partnerlogotyper i förtroendefältet. Ikonerna är linjära med en linjebredd på 1,5–2px, monokroma, i mörkblått (Ink Navy) eller blått (Signal Blue).
Palett
Stämpla
- Ink Navy
#0b3558— Huvudtext, rubriker, ikoner, mörk bakgrund för uppmaningar till handling, navigeringslänkar. - Signal Blue
#006bff— Primär uppmaning till handling (CTA), aktiv navigering, länkbetoning, valda tillstånd
Neutral
- Carbon
#0a0a0a— Text i rent svart (reserv), logotypglyf, ikonfyllning. - Slate Gray
#476788— Ytterligare huvudtext, stödtext, tystade etiketter. - Mist Gray
#a6bbd1— Inaktiverad text, etiketter för inaktiva funktioner, konturer för ljusikoner - Cloud
#f8f9fb— Sidduk, sidfotsbakgrund, extra yta - Paper
#ffffff— Kortytor, upphöjda paneler, knapptext mot mörk bakgrund. - Pebble
#f0f3f8— Bakgrundsbilder för ikoner, skuggning av inmatningsfält, subtila avgränsare, svävareffekter.
Typografi
från 12 till 80px · 10 steg
- Gilroy — ersättning: Manrope · konturer 400, 500, 600, 700 · All gränssnittstext. Gilroy är ett geometriskt humanistiskt sans-serif-tecken med breda bländare och enhetlig penseldragskontrast; dess fetstilta vikter (700) används för rubriker, medan 500–600 används för knappar och underrubriker. Ersätt med Manrope eller Inter.
- Gilroy — ersättning: Inter · konturer 400 · Brödtext och etiketter för allmänt bruk – teckensnittstjockleken 400 säkerställer att långa texter är läsbara utan att kännas tunga.
- Gilroy — ersättning: Inter · konturer 500 · Sekundära rubriker och markerad brödtext – teckensnittet 14/500 är det primära verktyget för kortrubriker och inbäddade etiketter.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 8-16px |
| Knappradie | 8px |
| Kortradie | 24px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 48-64px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Calendly -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- Dub — Links kontrollpanel för matt rispapper
- Seline Analytics — Ett tyst analysbord på varmt papper
- Notion — En varm pappersbok i middagssolen
- Anthropic — En vetenskaplig fälttidskrift på varmt vellum – lugna elfenbensfärgade ytor, serifferade redaktionella rubriker och en enda leraccent som bara dyker upp när handling behövs.
- Augen Pro — Apples vita presentation har en klinisk, viktlös, elektrisk blå nyans som enda accent i ett monokromt utrymme.
- Antimetal — En redaktionell krönika på krämfärgat papper – en lugn morgon i en vetenskaplig tidskrift, där återhållsamhet förmedlar självförtroende och seriffer gör det tunga arbetet.
- Perk — Elektrisk lime på varmt bakplåtspapper
- Ditto — En solbelyst workshop som skapar prover av vildblommor. Varma krämfärgade ytor, en livfull gul basfärg, djupt marinblått tryckfärg, organiska färgformer som blommar bakom verket.
- Officevibe — En redaktionell tidskrift på varmt krämfärgat papper. Föreställ dig en tankeväckande essä om HR-ledning, presenterad som en produkt – ett kursivt serif-typsnitt som viskar genom ett modernt blått gränssnitt.