Calendly
Tummansininen muste kylmällä marmorilla
Calendly tuntuu rauhalliselta ja itsevarmalta suunnittelutyötilalta: lähes valkoinen kangas, jossa on runsaasti tilaa hengittää, raikkaat valkoiset tuotekortit kelluvat viileää harmaata taustaa vasten ja kaikki typografia on renderöity tummansinisellä musteella puhtaan mustan sijaan. Määrittelevä elementti on tummansininen väri (#0b3558), jota käytetään kaikkialla tekstissä – otsikoissa, painikkeissa, kuvakkeissa, linkeissä – mikä pehmentää koko käyttöliittymää tehden siitä lämpimämmän ja tyylikkäämmän kuin tyypillinen SaaS-aloitussivu. Yhtä kirkkaan sinistä (#006bff) käytetään kaikissa ensisijaisissa toiminnoissa, ja tuoteasettelujen ulkopuolelle ulottuvat koristeelliset vaaleanpunaiset ja siniset roiskeet lisäävät lämpöä luomatta sotkua. Komponentit pidetään hillityinä: ohuet 1 pikselin reunat, hienovaraiset sinisävyiset varjot, suuret 24 pikselin korttisäteet ja 8 pikselin painikkeiden kulmat tuntuvat tarkoituksellisilta eivätkä mitäänsanomattomilta.
Suurin leveys 1200 pikseliä, keskitettynä, leveillä marginaaleilla työpöytäversiossa. Päänäyttö on jaettu kahteen sarakkeeseen: vasemmassa sarakkeessa on 80 pikselin otsikko + leipäteksti + pinotut kirjautumispainikkeet, kun taas oikeassa sarakkeessa on varauswidget-kortti, jonka taustalla on koriste-elementtejä. Päänäytön alapuolella on yksi täysleveä raita, jossa on Trust-logo. Seuraavat osiot vuorottelevat keskitettyjen otsikkolohkojen (H2 + alateksti + valinnainen toimintakehotus) ja niiden jälkeen kahden sarakkeen lohkot, jotka kuvaavat ominaisuuksia (teksti vasemmalla/tuote oikealla tai tuote vasemmalla/teksti oikealla) ja joiden takana on koristeellisia korostuselementtejä. Korttiruudukoita käytetään harvoin – asettelu suosii paritettujen osioiden sijoittamista vierekkäin monisarakkeisten ruudukoiden sijaan. Osioiden välinen etäisyys vaihtelee 48–64 pikselin välillä. Navigointi on 64 pikselin kiinteä yläpalkki, jossa logo on vasemmalla, keskitetty valikko ja ryhmä toimintakehotuksia oikealla.
Tärkein visuaalinen elementti on tuotekuvakaappaukset – yksinkertaisia mallikuvia varauskalenterin käyttöliittymästä, jotka on renderöity teräville valkoisille korteille, joissa on leveät, pyöristetyt kulmat. Koristeellinen muotoilu: jokaista tuotekorttia ympäröi korallinpunainen (#e55cff) tai azuurinsininen (#0099ff) pehmeä piste, joka on hieman epätarkka ja sumennettu, luoden kollaasiefektin pikemminkin kuin tasaisen kuvakaappauksen. Ei valokuvia, ei lifestyle-kuvia – kaikki visuaaliset elementit edustavat tuotteen käyttöliittymää, abstrakteja korostusmuotoja tai yksivärisiä kumppaneiden logoja luotettavuuspalkissa. Kuvakkeet ovat lineaarisia, viivanleveydellä 1,5–2 pikseliä, yksivärisiä, tummansinisiä (Ink Navy) tai sinisiä (Signal Blue).
Paletti
Merkki
- Ink Navy
#0b3558— Pääteksti, otsikot, kuvakkeet, tumma tausta toimintakehotuksille, navigointilinkit. - Signal Blue
#006bff— Ensisijainen toimintakehotus (CTA), aktiivinen navigointi, linkin korostus, valitut tilat
Neutraali
- Carbon
#0a0a0a— Teksti puhtaana mustana (varavaihtoehto), logokuvio, kuvakkeiden täyttö. - Slate Gray
#476788— Lisäpääteksti, tukiteksti, mykistetyt otsikot. - Mist Gray
#a6bbd1— Käytöstä poistettu teksti, passiivisten toimintojen otsikot, valokuvakkeiden ääriviivat - Cloud
#f8f9fb— Sivupohja, alatunnisteen tausta, lisäpinta - Paper
#ffffff— Korttipinnat, kohopaneelit, painiketeksti tummalla taustalla. - Pebble
#f0f3f8— Kuvakkeiden taustakuvat, syöttökentän varjostus, hienovaraiset erottimet, osoittimen tehosteet.
Typografia
12:sta 80 pikseliin · 10 askelta
- Gilroy — korvaava: Manrope · ääriviivat 400, 500, 600, 700 · Kaikki käyttöliittymäteksti. Gilroy on geometrinen humanistinen sans-serif-tyylikirjasto, jossa on leveät aukot ja tasainen viivan kontrasti; sen lihavoinnin paksuuksia (700) käytetään otsikoissa ja 500–600 painikkeissa ja alaotsikoissa. Korvaa Manropella tai Interillä.
- Gilroy — korvaava: Inter · ääriviivat 400 · Leipäteksti ja yleiskäyttöiset käyttöliittymätarrat – 400 pisteen fonttipaino varmistaa, että pitkät tekstit ovat luettavia tuntumatta raskailta.
- Gilroy — korvaava: Inter · ääriviivat 500 · Toissijaiset otsikot ja korostettu leipäteksti - 14/500-fontti on ensisijainen työkalu korttien otsikoille ja tekstiin upotetuille otsikoille.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 8-16px |
| Painikkeen säde | 8px |
| Kortin säde | 24px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 48-64px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Calendly -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Dub — Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
- Seline Analytics — Hiljainen analyyttinen pöytä lämpimällä paperilla
- Notion — Lämmin paperinen muistikirja keskipäivän auringossa
- Anthropic — Tieteellinen kenttälehti lämpimällä pergamentilla – rauhallisilla norsunluunvärisillä pinnoilla, serifioiduilla otsikoilla ja yhdellä savesta tehdyllä aksentilla, joka ilmestyy vain silloin, kun toimintaa tarvitaan.
- Augen Pro — Applen valkoisessa esitystavassa on kliininen, painoton, sähkönsininen ainoana aksenttina yksivärisessä tilassa.
- Antimetal — Pääkirjoituskronikka kermanvärisellä paperilla – hiljainen aamu tieteellisessä aikakauslehdessä, jossa hillitty tyyli välittää itsevarmuutta ja serifit tekevät raskaan työn.
- Perk — Sähkölime lämpimällä pergamenttipaperilla
- Ditto — Auringon valaisema työpaja, jossa luodaan luonnonkukkien näytteitä. Lämpimän kermanväriset pinnat, eloisan keltainen pohjaväri, syvän tummansiniset musteet, orgaaniset värimuodot kukkivat teoksen takana.
- Officevibe — Lämpimän kermanvärisellä paperilla painettu toimituksellinen aikakauslehti. Kuvittele harkittu essee henkilöstöhallinnosta, joka esitetään tuotteena – kursiivilla ja serif-fontilla kuiskaten modernin sinisen käyttöliittymän läpi.