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
Mercury — bản xem trước của một trang web theo phong cách này

Mercury

Bờ núi Alps lúc hoàng hôn

Mercury hoạt động trong một môi trường ngân hàng mang phong cách vùng núi Alps: một nền gần như đen (#171721) tạo ra bầu không khí điện ảnh, giống như đài quan sát, nơi các bề mặt nội dung nổi lên như những tấm thẻ than chì hơi nhạt hơn. Giao diện chủ yếu là đơn sắc—văn bản màu ngà trên nền đen tuyền, với một yếu tố màu xanh coban rực rỡ (#5266eb) được sử dụng riêng cho thao tác cốt lõi "Mở tài khoản". Kiểu chữ mang tính biểu cảm chính: một phông chữ hiển thị tùy chỉnh cỡ 480 (không đậm cũng không nhạt) kết hợp với một phông chữ chính tinh tế cỡ 400 tạo nên một phong cách tự tin nhưng không bao giờ lòe loẹt. Các thành phần phẳng và không có khung, dựa vào bán kính thẻ than chì 12px và các điều khiển hình viên nang để xác định cấu trúc thay vì bóng đổ. Yếu tố hình ảnh chính, chiếm toàn bộ bề mặt trang—những ngọn núi mờ sương trước một chiếc bàn cô đơn—thiết lập tông màu trước khi giao diện người dùng hoạt động, và mọi yếu tố tiếp theo đều duy trì sự tĩnh lặng, tối màu cao cấp đó.

Toàn bộ nội dung được thiết kế theo phong cách tối màu, toàn chiều rộng. Màn hình chính là ảnh toàn chiều rộng 100px với tiêu đề chính ở giữa, văn bản phụ và khối biểu mẫu để thu thập thông tin liên hệ email (chiều rộng tối đa ~640px). Bên dưới màn hình chính, nội dung được sắp xếp thành các phần có chiều rộng tối đa 1200px với lề dọc 72px, xen kẽ giữa bố cục hai cột văn bản bên trái và hình ảnh bên phải, và các thẻ mô tả sản phẩm ba cột. Thanh điều hướng là một thanh trên cùng trong suốt được phủ lên màn hình chính, khi bạn cuộn xuống, nó sẽ chuyển sang màu tối đặc gợi nhớ đến kính mờ (làm mờ nền). Chân trang có màu tối với văn bản ghi chú. Nhịp điệu dọc khá rộng rãi - mật độ thoáng đãng với nhiều khoảng trống giữa các phần. Không có thanh điều hướng bên; tất cả điều hướng đều nằm ở thanh trên cùng.

Phần chính được chi phối bởi những bức ảnh điện ảnh toàn màn hình – những phong cảnh đầy cảm hứng (những ngọn núi mờ sương, không gian làm việc biệt lập giữa thiên nhiên) – thể hiện ngành ngân hàng như một trải nghiệm chiêm nghiệm, tuyệt vời. Các bức ảnh có chất lượng cao, hơi giảm độ bão hòa, với tông màu lạnh và lớp phủ tối tinh tế để giữ cho văn bản dễ đọc. Bên dưới phần chính, các hình ảnh xen kẽ với ảnh chụp màn hình giao diện người dùng của sản phẩm và các hình nền trừu tượng, đầy cảm xúc. Không có hình minh họa, không có biểu tượng nào giống tác phẩm nghệ thuật – các yếu tố trực quan đều là ảnh chụp hoặc hoàn toàn mang tính chức năng. Phong cách biểu tượng xuyên suốt giao diện người dùng là kiểu đường nét/ký tự tối giản, màu ngà được sử dụng trong điều hướng, nút bấm và các yếu tố biểu mẫu.

Bảng màu

Thương hiệu

  • Cobalt #5266eb — Màu tím được sử dụng cho các nút đã được tô màu, các trạng thái điều hướng được chọn và các khoảnh khắc chuyển đổi được kích hoạt bởi tiêu điểm.

Trung lập

  • Onyx Canvas #171721 — Hình nền trang chính, lớp phủ cơ bản cho màn hình chính, khung vẽ cho chân trang và các phần khác.
  • Graphite Card #1e1e2a — Các bề mặt nổi của bìa cứng và các phần được làm nhẹ hơn một chút so với vải bạt, tạo ra sự phân tách mượt mà.
  • Obsidian Button #272735 — Thêm các tùy chọn tô màu nút, hình nền biểu mẫu được nhúng, bề mặt tương tác kín đáo.
  • Slate Border #70707d — Vách ngăn có độ dày trung bình và ranh giới cấu trúc giữa các khối nội dung.
  • Mist Border #e2e3ed — Các đường viền mỏng, gần như không thể nhận thấy, đường viền nút bấm cũng mỏng, các cạnh của trường nhập liệu cũng mỏng - một đường viền sáng trên nền tối.
  • Ash Text #c3c3cc — Văn bản chính, văn bản phụ, nhãn bổ sung - cấu trúc phân cấp đơn giản mà vẫn đảm bảo tính dễ đọc.

Kiểu chữ

Từ 12 đến 65px · 9 bước

  • arcadia — thay thế: Inter · phác thảo 360, 400, 420, 480 · Giao diện chính và giao diện người dùng - Một phông chữ dành cho điều hướng, văn bản chính, nút bấm, trường nhập liệu, nhãn và văn bản phụ trợ, với độ đậm 400 cho văn bản chính và 480 cho văn bản nhấn mạnh. Thang độ đậm trung gian (360, 420, 480) thay vì thang độ đậm tiêu chuẩn (300/400/600) mang lại cho văn bản Mercury một vẻ ngoài cân đối đặc biệt—không quá đậm, không quá mỏng, luôn luôn vừa phải.
  • arcadiaDisplay — thay thế: Söhne Breit · phác thảo 360, 480, 530 · Phông chữ dùng cho tiêu đề và các yếu tố trang trí có độ đậm 480 cho tất cả các kích thước tiêu đề từ 28px đến 65px, trong khi độ đậm 530 được dành riêng cho các yếu tố trang trí lớn nhất. Chiều cao dòng thấp (1.1–1.2) và khoảng cách chữ dương (0.01–0.02em) tạo cho văn bản trang trí vẻ ngoài rộng rãi, mang tính kiến trúc, thay vì cấu trúc nén chặt thường thấy trong văn bản biên tập.

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

Mục đíchNghĩa
Tỉ trọngtrung bình
Bước cơ bản12px
Bán kính nút32px
Bán kính thẻ12px
Bóng tốikhông - viền thay vì bóng
Giữa các phần72px
Chiều rộng trang1200px

AI sẽ xây dựng trang web của bạn theo phong cách Mercury 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ự

  • Origin Financial — Một không gian tĩnh lặng, sang trọng giữa đêm khuya. Một căn phòng yên tĩnh, gần như tối tăm, nơi những phông chữ serif lớn và một vài tấm bảng màu được chiếu sáng tạo nên cảm giác rằng tài chính là một tác phẩm nghệ thuật được tuyển chọn kỹ lưỡng.
  • Air — Tác phẩm điêu khắc "Bầu trời đêm qua tấm kính"
  • Slash — Hầm chứa đồ lúc nửa đêm với sổ sách kế toán mạ vàng
  • dope.security — Nhà ga lúc nửa đêm với đèn hiệu màu tím
  • Modal — Một thiết bị đầu cuối phát quang trong phòng máy chủ tối om - nguồn sáng duy nhất là màu xanh lá cây sáng.
  • Giga — Đường chân trời lúc nửa đêm trên nền đá obsidian phủ sương.
  • Dovetail — Trung tâm điều khiển bản thiết kế lúc nửa đêm
  • Dovetail — Bản thiết kế dưới ánh trăng đen – những đường kẻ đồ thị mờ nhạt, chữ trắng, một đốm tím lấp lánh.
  • AgentQL — Cực quang trên bầu trời nhà ga vào ban đêm
  • Supabase — Một trình soạn thảo mã vào lúc nửa đêm với một chấm xanh phát quang - một xung màu duy nhất trên biển bụi than.
  • Changelog — Bảng điều khiển đài quan sát nằm phía sau lớp kính tối màu.
  • GitHub — Một bảng điều khiển không gian với các điểm điều khiển phát quang sinh học—một không gian làm việc tối tăm, huyền ảo, nơi một ánh sáng xanh duy nhất chỉ lối tiến về phía trước.