Telegram, WhatsApp+380637610482
Valery Danyuk
Valery Danyuknhà phát triểnPhát triển các công cụ trí tuệ nhân tạo cho doanh nghiệp. Chất lượng cao. Giá cả phải chăng.Nhắn tin qua Telegram
Calendly — bản xem trước của một trang web theo phong cách này

Calendly

Mực xanh đậm trên nền đá cẩm thạch lạnh.

Calendly mang đến cảm giác như một không gian làm việc lập kế hoạch điềm tĩnh và tự tin: một nền gần như trắng với nhiều khoảng trống, các thẻ sản phẩm màu trắng sắc nét nổi bật trên nền xám mát mẻ, và tất cả kiểu chữ đều được in bằng mực xanh đậm thay vì đen tuyền. Yếu tố nổi bật chính là màu xanh đậm (#0b3558), được sử dụng ở mọi nơi xuất hiện văn bản—tiêu đề, nút bấm, biểu tượng, liên kết—làm mềm toàn bộ giao diện, khiến nó trở nên ấm áp và phong cách hơn so với trang đích SaaS thông thường. Một màu xanh dương tươi sáng (#006bff) được sử dụng cho tất cả các hành động chính, và các điểm nhấn màu hồng và xanh dương trang trí trải rộng ra ngoài bố cục sản phẩm tạo thêm sự ấm áp mà không gây rối mắt. Các thành phần được giữ ở mức tối giản: đường viền mỏng 1px, bóng đổ màu xanh lam tinh tế, bán kính thẻ lớn 24px và góc nút 8px tạo cảm giác có chủ ý chứ không hề đơn điệu.

Chiều rộng tối đa 1200px, căn giữa, với lề rộng trên máy tính để bàn. Màn hình chính được chia thành hai cột: cột bên trái chứa tiêu đề 80px + văn bản chính + các nút đăng nhập xếp chồng lên nhau, trong khi cột bên phải chứa thẻ tiện ích đặt chỗ với các yếu tố trang trí ở nền. Bên dưới màn hình chính là một dải rộng toàn màn hình với logo của Trust. Các phần tiếp theo xen kẽ giữa các khối tiêu đề căn giữa (H2 + văn bản phụ + lời kêu gọi hành động tùy chọn), tiếp theo là các khối hai cột mô tả các tính năng (văn bản bên trái/sản phẩm bên phải hoặc sản phẩm bên trái/văn bản bên phải) với các yếu tố trang trí phía sau mỗi hình ảnh sản phẩm. Lưới thẻ hiếm khi được sử dụng — bố cục ưu tiên các phần được ghép đôi đặt cạnh nhau hơn là lưới nhiều cột. Khoảng cách giữa các phần dao động từ 48 đến 64px. Thanh điều hướng là một thanh trên cùng cố định 64px với logo ở bên trái, menu căn giữa và một nhóm lời kêu gọi hành động ở bên phải.

Yếu tố hình ảnh chính là ảnh chụp màn hình sản phẩm—các bản mô phỏng đơn giản giao diện người dùng lịch đặt chỗ, được hiển thị trên các thẻ trắng sắc nét với các góc rộng, bo tròn. Thiết kế trang trí: mỗi thẻ sản phẩm được bao quanh bởi một điểm nhấn màu tím san hô (#e55cff) hoặc xanh lam nhạt (#0099ff), hơi lệch và mờ, tạo hiệu ứng ghép ảnh thay vì ảnh chụp màn hình phẳng. Không có ảnh chụp, không có hình ảnh đời sống—tất cả các yếu tố hình ảnh đều thể hiện giao diện người dùng sản phẩm, các hình dạng nhấn nhá trừu tượng hoặc logo đối tác đơn sắc trên thanh xác thực. Các biểu tượng có dạng đường thẳng với độ rộng đường kẻ 1,5–2px, đơn sắc, màu xanh đậm (Ink Navy) hoặc xanh lam (Signal Blue).

Bảng màu

Thương hiệu

  • Ink Navy #0b3558 — Văn bản chính, tiêu đề, biểu tượng, nền tối cho các lời kêu gọi hành động, liên kết điều hướng.
  • Signal Blue #006bff — Lời kêu gọi hành động chính (CTA), điều hướng chủ động, nhấn mạnh liên kết, các trạng thái được chọn

Trung lập

  • Carbon #0a0a0a — Chữ màu đen tuyền (màu dự phòng), biểu tượng logo, tô màu biểu tượng.
  • Slate Gray #476788 — Văn bản chính bổ sung, văn bản hỗ trợ, nhãn mờ.
  • Mist Gray #a6bbd1 — Văn bản bị vô hiệu hóa, nhãn chức năng không hoạt động, đường viền biểu tượng mờ.
  • Cloud #f8f9fb — Khung trang, nền chân trang, bề mặt bổ sung
  • Paper #ffffff — Các bề mặt thẻ, các tấm nổi, chữ nút trên nền tối.
  • Pebble #f0f3f8 — Hình nền cho biểu tượng, tô bóng trường nhập liệu, đường phân cách tinh tế, hiệu ứng khi rê chuột.

Kiểu chữ

Từ 12 đến 80px · 10 bước

  • Gilroy — thay thế: Manrope · phác thảo 400, 500, 600, 700 · Tất cả văn bản giao diện. Gilroy là một phông chữ sans-serif hình học nhân văn với khoảng cách giữa các nét rộng và độ tương phản nét đồng đều; các kiểu chữ đậm (700) được sử dụng cho tiêu đề, trong khi các kiểu chữ 500–600 được sử dụng cho các nút và tiêu đề phụ. Thay thế bằng Manrope hoặc Inter.
  • Gilroy — thay thế: Inter · phác thảo 400 · Văn bản chính và nhãn giao diện người dùng đa năng - cỡ chữ 400 point đảm bảo văn bản dài vẫn dễ đọc mà không gây cảm giác nặng nề.
  • Gilroy — thay thế: Inter · phác thảo 500 · Tiêu đề phụ và văn bản chính được tô sáng - cỡ chữ 14/500 là công cụ chính cho tiêu đề thẻ và nhãn nội tuyến.

Khoảng cách và hình thức

Mục đíchNghĩa
Tỉ trọngdày đặc
Bước cơ bản8-16px
Bán kính nút8px
Bán kính thẻ24px
Bóng tốikhông - viền thay vì bóng
Giữa các phần48-64px
Chiều rộng trang1200px

AI sẽ xây dựng trang web của bạn theo phong cách Calendly và điền đầy đủ thông tin vào đó.

  • Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
  • Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
  • Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
  • Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.

Phong cách tương tự

  • ElevenLabs — Một bộ ảnh minh họa với tông màu kem ấm áp và tiêu đề tinh tế. Một cuốn sổ tay theo phong cách Bauhaus – giấy màu trắng ngà, mực đen và điểm nhấn màu tím và cam duy nhất để trưng bày sản phẩm.
  • Awesomic — Phông chữ in hoa bằng lưới kẽm với các dấu chấm câu màu cam gợi nhớ đến những mảnh giấy vụn.
  • Monad — Tạp chí kỹ thuật biên tập về giấy da ấm
  • Dub — Bảng điều khiển bằng giấy gạo mờ của Link
  • Seline Analytics — Một chiếc bàn phân tích yên tĩnh trên nền giấy ấm áp.
  • Notion — Một cuốn sổ tay bằng giấy ấm áp dưới ánh nắng mặt trời giữa trưa.
  • Anthropic — Một cuốn nhật ký khoa học thực địa trên giấy da ấm áp—bề mặt màu ngà dịu nhẹ, tiêu đề biên tập có chân chữ và một điểm nhấn bằng đất sét duy nhất chỉ xuất hiện khi cần hành động.
  • Augen Pro — Cách bài trí màu trắng của Apple nổi bật với gam màu xanh điện nhẹ nhàng, tinh tế trong không gian đơn sắc.
  • Antimetal — Một bản ghi chép biên tập trên giấy màu kem—một buổi sáng yên tĩnh tại một tạp chí khoa học, nơi sự tiết chế thể hiện sự tự tin và các nét chữ đảm nhiệm phần việc chính.
  • Perk — Vôi điện trên giấy nướng ấm
  • Ditto — Một xưởng vẽ ngập tràn ánh nắng tạo ra các mẫu hoa dại. Bề mặt màu kem ấm áp, màu vàng rực rỡ làm nền, mực màu xanh hải quân đậm, những hình dạng màu sắc tự nhiên nở rộ phía sau tác phẩm.
  • Officevibe — Một tạp chí biên tập trên giấy màu kem ấm áp. Hãy tưởng tượng một bài luận sâu sắc về quản lý nhân sự, được trình bày như một sản phẩm—một kiểu chữ serif uốn lượn nhẹ nhàng trên giao diện màu xanh hiện đại.