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

Auros

Trạm đầu cuối dưới đáy biển với các quả cầu dữ liệu phát quang sinh học.

Auros hoạt động như một thiết bị đầu cuối fintech nằm sâu trong lòng đất: một nền màu xanh ngọc gần như đen với các quả cầu dữ liệu phát quang sinh học và các dải màu chuyển từ xanh ngọc sang hồng, tạo cảm giác chiều sâu, sự uyển chuyển và dòng chảy. Giao diện tối giản và mang tính điện ảnh, dựa trên một màn hình người dùng duy nhất (Matter) có độ dày trung bình với khả năng căn chỉnh âm mạnh mẽ để tạo tỷ lệ mà không quá lòe loẹt. Màu sắc được phân bố đều – màu trắng và bạc không màu được sử dụng cho hầu hết nội dung, trong khi bảng màu được dành riêng cho các dải màu chuyển sắc, các bề mặt thẻ phân biệt và một nút hình viên thuốc đặc trưng duy nhất thay đổi màu từ xanh ngọc lam sang hồng tím. Các thẻ nổi trên các đường gờ màu xanh ngọc tinh tế (bán kính 16px, không có bóng) thay vì chiều cao, vì vậy thứ bậc được cảm nhận như độ sâu của nước hơn là bóng trên giấy. Các thành phần trông được thiết kế tỉ mỉ và giống như nhạc cụ: các dấu căn chỉnh chữ in hoa, các biểu tượng mũi tên hình học mỏng, các chỉ số số lớn màu hồng nhạt.

Một khung vẽ tối màu, trải rộng toàn màn hình với nội dung có chiều rộng tối đa 1440px. Yếu tố chính là một khối văn bản được căn giữa (dòng dưới → tiêu đề → văn bản phụ → lời kêu gọi hành động) trải dài toàn bộ chiều cao khung nhìn, với một hạt làm yếu tố nền. Các phần là các dải trải rộng toàn màn hình được phân tách bởi các khoảng trống dọc lớn hơn 68px, xen kẽ giữa khung vẽ và các bề mặt hơi lõm. Phần "Khám phá" sử dụng bố cục hai cột không đối xứng: cột bên trái chứa các thẻ tính năng xếp chồng lên nhau, trong khi cột bên phải có hình minh họa phân tử hình học. Nội dung được căn giữa trong các cột hẹp (tối đa ~600px) để dễ đọc, thay vì trải dài từ cạnh này sang cạnh kia. Chân trang là một hố lõm (#011d1c) với lề dọc 120px, tạo hiệu ứng như một hồ nước sâu. Thanh điều hướng là một bảng điều khiển mỏng, trong suốt với các phần tử cách nhau 16–24px. Nhịp điệu tổng thể mang tính điện ảnh và rộng rãi—mỗi phần đều có hơi thở riêng, và gam màu sâu lắng, tựa như nước, tạo cảm giác như đang chìm sâu hơn với mỗi đoạn nhạc.

Phong cách hình ảnh tối giản và giàu tính nghệ thuật. Trang chủ nổi bật với hình ảnh quả cầu hạt ba chiều – hàng ngàn chấm nhỏ màu xanh ngọc và trắng tạo thành một quả cầu xoay tròn, phản chiếu nền vải và các điểm nhấn màu hồng tím dọc theo các cạnh, tạo hiệu ứng phát quang sinh học gợi nhớ đến một vật thể thông tin. Các sơ đồ phân tử hình học phẳng (vòng tròn trắng và các đường nối mỏng trên nền tối) đóng vai trò là yếu tố trang trí ở cột bên phải. Không có ảnh chụp, không có hình ảnh đời sống, không có người – ngôn ngữ hình ảnh dựa trên đồ họa dữ liệu rõ ràng và các hình thức trừu tượng. Quả cầu hạt là yếu tố hình ảnh đặc trưng của thương hiệu; nó phải xuất hiện ít nhất một lần trên mỗi trang quan trọng để củng cố ẩn dụ về biển sâu.

Bảng màu

Thương hiệu

  • Liquid Abyss #012624 — Phông nền chính là phần nền của trang, bao gồm tiêu đề, yếu tố chính và nền màu xanh ngọc đậm nổi bật. Nó tạo nên một bầu không khí sâu thẳm của biển cả.
  • Liquid Deep #011d1c — Phần bề mặt lõm xuống là phần nền chân trang và các tấm bìa cứng sâu hơn. Nó được cảm nhận là tối hơn một nửa tông so với bề mặt tranh, tạo ra một hiệu ứng chuyển màu nhẹ nhàng xuống phía dưới.
  • Liquid Kelp #003734 — Bề mặt thẻ nổi và phần tô đầy nút—một bề mặt nổi được đặt cao hơn một bậc so với khoảng trống. Được sử dụng cho các thẻ tính năng, bảng nội dung và điểm bắt đầu của nút chuyển màu.

Trung lập

  • Liquid Mist #edfffe — Sắc trắng mát mẻ làm nổi bật nội dung chính, tiêu đề các phần và kiểu chữ nhẹ nhàng, ấm áp. Một chút sắc xanh lam tinh tế giúp kết nối nội dung chính với tông màu xanh ngọc chủ đạo.
  • Platinum #ffffff — Màu trắng tinh khiết được sử dụng cho tiêu đề, các yếu tố điều hướng, đường viền biểu tượng và văn bản có độ tương phản cao. Đây là màu văn bản chủ đạo ở tất cả các cấp tiêu đề và thanh điều hướng chính.
  • Silver Mist #bbc7c6 — Văn bản phụ, mô tả mờ và màu liên kết ở trạng thái ban đầu. Chúng có một chút sắc xanh lục, bổ sung cho nền màu ngọc lam.
  • Ash #f2f2f2 — Văn bản bổ sung cho các trích dẫn và đánh giá. Một sắc xám trung tính, mát mẻ, thích hợp khi tông màu xanh ngọc của Silver Mist có vẻ quá sáng.
  • Slate Deep #707777 — Một lớp phủ màu nhẹ nhàng cho bề mặt, thích hợp cho các phông nền tĩnh hoặc có độ hiển thị thấp. Lớp phủ này nằm giữa vải canvas và bìa cứng, tạo ra sự chênh lệch độ cao rất tinh tế.
  • Lavender Phosphor #fde9ff — Màu đèn nền được sử dụng cho các số liệu thống kê lớn, số đếm và các chỉ số quan trọng. Sắc hồng trong dải màu đặc trưng được sử dụng một cách tiết kiệm như một điểm nhấn sáng trên các bề mặt tối.

Kiểu chữ

Từ 10 đến 96px · 6 bước

  • Matter — thay thế: Inter · phác thảo 400, 500 · Phông chữ chính được sử dụng cho tiêu đề và nội dung chính là phông chữ có độ đậm 500 cho tất cả các tiêu đề (H1–H3) và văn bản động cỡ lớn (86–295px). Độ đậm 400 được sử dụng cho nội dung chính và văn bản giao diện người dùng. Phông chữ này có khoảng cách chữ âm mạnh ở kích thước lớn (-0.04em ở 61px, -0.046em ở 86px) và khoảng cách chữ dương rộng ở chữ in hoa tiêu đề (0.08em ở 20px, 0.12em ở 12px, 0.15em ở 10px). Chiến lược chỉ sử dụng độ đậm trung bình cho tiêu đề là một đặc điểm nổi bật—không sử dụng phông chữ đậm hoặc nhạt—điều này mang lại cho phông chữ sự đồng nhất và tự tin về mặt kỹ thuật.
  • Arial — thay thế: system-ui · phác thảo 400 · Một phương án dự phòng thứ cấp cho các phần tử giao diện người dùng tương tác (điều hướng, nút bấm, văn bản nhỏ ở đầu trang, chân trang). Chỉ hiển thị ở kích thước 14px – được sử dụng như một phương án dự phòng an toàn, phổ biến khi Matter không được tải và bao phủ các nhãn biểu mẫu, văn bản nút bấm và văn bản hỗ trợ nhỏ.

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

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

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

  • Design Full-Time — một rạp chiếu phim studio với một ánh đèn ấm áp.
  • 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
  • Raycast — Trung tâm chỉ huy nửa đêm, màu san hô neon
  • Dimension — một không gian làm việc ngập ánh sáng hoàng hôn với các tấm kính 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.
  • Reflect Notes — Không gian tím sao lấp lánh là một đài quan sát tối tăm, nơi những nốt nhạc trôi nổi như các chòm sao trên nền khoảng không màu chàm gần như đen kịt.
  • Ameba — Phòng điều khiển lúc nửa đêm – một luồng ánh sáng xanh điện bên trong các tấm kính mờ.
  • AgentQL — Cực quang trên bầu trời nhà ga vào ban đêm
  • Frame — Một rạp chiếu phim dành cho các buổi chiếu phim khuya. Một căn phòng tối nơi chỉ một đèn chiếu màu xanh lam làm tất cả công việc, và giao diện người dùng mờ dần vào nền, cho phép nội dung sáng tạo được trình chiếu về phía trước.
  • Harness — Trung tâm điều khiển nhiệm vụ lúc nửa đêm với điểm nhấn màu xanh lục phát quang.