Calendly
Салкын мәрмәрдә куе зәңгәр төстәге кара
Calendly тыныч, ышанычлы планлаштыру эш урыны кебек тоела: тын алу өчен җитәрлек урын булган ак төстәге холст, салкын соры фонда йөзеп торган ачык ак продукт карточкалары, һәм барлык типография саф кара төс белән түгел, ә куе зәңгәр кара белән эшләнгән. Төп элемент - куе зәңгәр төс (#0b3558), ул текст күренгән һәр җирдә кулланыла - башлыклар, төймәләр, иконалар, сылтамалар - бу бөтен интерфейсны йомшарта, аны гадәти SaaS төп битенә караганда җылырак һәм стильлерәк итә. Барлык төп гамәлләр өчен бер ачык зәңгәр төс (#006bff) кулланыла, һәм продукт макетларыннан читтә сузылган декоратив алсу һәм зәңгәр төстәге лампалар тәртипсезлек тудырмыйча җылылык өсти. Компонентлар тыйнак итеп саклана: нечкә 1 пиксель чикләр, нечкә зәңгәр төстәге күләгәләр, зур 24 пиксельле карточка радиуслары һәм 8 пиксельле төймә почмаклары йомшак түгел, ә махсус эшләнгән кебек тоела.
Максималь киңлеге 1200 пиксель, үзәктә урнашкан, эш өстәлендә киң кырлар белән. Төп экран ике баганага бүленгән: сул баганада 80 пиксельле башлык + төп текст + өемле керү төймәләре, ә уң баганада фонда бизәкле элементлары булган бронлау виджет картасы бар. Төп экран астында Ышаныч логотибы булган бер тулы киңлектәге полоса урнашкан. Аннан соңгы бүлекләр үзәктә урнашкан башлык блоклары арасында чиратлаша (H2 + аскы текст + өстәмә чакыру), аннары һәр продукт рәсеме артында бизәкле басым элементлары белән үзенчәлекләрне тасвирлаучы ике баганалы блоклар (сулдагы текст/продукт уңда яки продукттагы сулдагы/уңдагы текст) килә. Карта челтәрләре сирәк кулланыла - макет күп баганалы челтәрләр урынына янәшә урнаштырылган парлы бүлекләрне өстен күрә. Бүлекләр арасындагы ара 48 дән 64 пиксельгә кадәр. Навигация - сулда логотип, үзәктә урнашкан меню һәм уңда гамәл чакырулары төркеме булган 64 пиксельле фиксацияләнгән өске панель.
Төп визуаль элемент - продукт скриншотлары - бронь календаре кулланучы интерфейсының гади макетлары, киң, түгәрәк почмаклы ачык ак карточкаларда күрсәтелгән. Декоратив дизайн: һәр продукт картасы коралл-шәмәхә төстәге йомшак тап (#e55cff) яки зәңгәр зәңгәр (#0099ff) белән әйләндереп алынган, бераз тайпылган һәм тонык, яссы скриншот урынына коллаж эффекты тудыра. Фотосурәтләр юк, яшәү рәвеше рәсемнәре юк - барлык визуаль элементлар да продукт кулланучы интерфейсын, абстракт акцент формаларын яки ышаныч тактасындагы монохром партнер логотипларын чагылдыра. Иконалар сызыклы, сызык киңлеге 1,5–2 пиксель, монохром, куе зәңгәр (кара-көрән) яки зәңгәр (сигнал зәңгәре) төстә.
Палитра
Бренд
- Ink Navy
#0b3558— Төп текст, башлыклар, иконалар, эшкә чакырулар өчен караңгы фон, навигация сылтамалары. - Signal Blue
#006bff— Беренчел чакыру (CTA), актив навигация, сылтамага басым ясау, сайланган халәтләр
Нейтраль
- Carbon
#0a0a0a— Саф кара төстәге текст (запастагы резерв вариант), логотип глифы, иконалар тутыру. - Slate Gray
#476788— Өстәмә төп текст, ярдәмче текст, тавышсыз ярлыклар. - Mist Gray
#a6bbd1— Сүндерелгән текст, актив булмаган функция билгеләре, якты иконка контурлары - Cloud
#f8f9fb— Бит холсты, аскы колонтитул фоны, өстәмә өслек - Paper
#ffffff— Карточка өслекләре, күтәрелгән панельләр, караңгы фонда төймә тексты. - Pebble
#f0f3f8— Иконалар өчен фон рәсемнәре, кертү кырларын күләгәләү, нечкә аергычлар, һавада тоту эффектлары.
Типография
12 дән 80 пиксельгә кадәр · 10 адым
- Gilroy — алыштыру: Manrope · контурлар 400, 500, 600, 700 · Барлык интерфейс текстлары. Gilroy - киң диафрагмалар һәм тигез сызык контрасты булган геометрик гуманистик sans-serif; аның калын авырлыклары (700) башлыклар өчен, ә 500–600 төймәләр һәм өстәмә башлыклар өчен кулланыла. Manrope яки Inter белән алыштырыгыз.
- Gilroy — алыштыру: Inter · контурлар 400 · Төп текст һәм гомуми максатлы интерфейс билгеләре - 400 пунктлы шрифт калынлыгы озын текстларның авырлык сизмичә дә укылышлы булуын тәэмин итә.
- Gilroy — алыштыру: Inter · контурлар 500 · Икенчел башлыклар һәм билгеләнгән төп текст - 14/500 шрифты - карточка башлыклары һәм юл эчендәге ярлыклар өчен төп корал.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | тыгыз |
| Төп адым | 8-16px |
| Төймә радиусы | 8px |
| Карта радиусы | 24px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 48-64px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Calendly стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- ElevenLabs — Җылы каймак төсендәге фотоэссе, нечкә башлыклар белән. Баухаус стилендәге дәфтәр — йомырка кабыгы төсендәге кәгазь, кара буяу һәм продуктны күрсәтү өчен бер шәмәхә һәм кызгылт сары төстәге бизәк.
- Awesomic — Конфеттины хәтерләткән кызгылт сары тыныш билгеләре белән редакция цинк челтәре
- Monad — җылы пергаменттагы редакция техник журналы
- Dub — Link'ның мат дөге кәгазе белән идарә итү панеле
- Seline Analytics — Җылы кәгазьдә тыныч аналитик өстәл
- Notion — Көндезге кояш астында җылы кәгазь дәфтәр
- Anthropic — Җылы пергамент турында фәнни өлкә журналы - тыныч фил сөяге өслекләре, серифлы редакция рубрикалары һәм хәрәкәт кирәк булганда гына күренә торган бердәнбер балчык акценты.
- Augen Pro — Apple'ның ак төсе монохром киңлектә бердәнбер акцент буларак клиник, авырлыксыз, электр зәңгәрен үз эченә ала.
- Antimetal — Каймак кәгазьдәге редакция хроникасы — фәнни журналдагы тыныч иртә, анда тыйнаклык ышаныч бирә, ә серифлар авыр эшне башкара.
- Perk — җылы пергамент кәгазендә электр лаймы
- Ditto — Кояш нурлары астында кыргый чәчәк үрнәкләре ясау остаханәсе. Җылы каймак өслекләр, ачык сары төс, тирән күк зәңгәрсу буяулар, әсәр артында чәчәк аткан органик төс формалары.
- Officevibe — Җылы каймак төсле кәгазьдә басылган редакция журналы. Кадрлар белән идарә итү турында уйланылган иншаны күз алдыгызга китерегез, ул продукт буларак тәкъдим ителә - заманча зәңгәр интерфейс аша пышылдап язылган курсив-сериф шрифты.