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

Ciridae

Một căn phòng trống trải với âm thanh rung động của những đốm than âm ỉ - một thánh đường gần như đen kịt, nơi âm thanh ấm áp duy nhất là tiếng rỉ sét mỏng manh, và mọi bề mặt đều được định hình bởi những đường nét tinh tế chứ không phải bóng tối.

Ciridae hoạt động trong một không gian trống rỗng: một nền màu #0b0b0b, các nút điều khiển hình viên thuốc với đường viền gần như không thể nhận thấy, và kiểu chữ được cố định ở dạng chữ in hoa của Pragmatica Cond với độ đậm 400—không in đậm, không chữ thường, không có yếu tố trang trí. Điểm nhấn màu sắc duy nhất là #cc6437, một sắc thái gỉ sét ấm áp, âm ỉ được sử dụng cho các nét vẽ mỏng nhất và các dấu chấm câu nhỏ, không bao giờ được dùng làm màu nền. Bản đồ nổi trên nền #272a2a với bán kính 10px và không có bóng; hệ thống này loại bỏ độ cao, xác định bề mặt thông qua độ tương phản tông màu và các đường viền mỏng nhất 1px. Ảnh chụp được làm mờ mạnh và mang tính khí quyển—vẽ bằng đá cẩm thạch lỏng, khói, lửa—được đặt phía sau văn bản ở chế độ toàn màn hình, do đó hình ảnh trực quan mang tính khí quyển hơn là minh họa.

Bố cục trang là toàn chiều rộng, nội dung được căn giữa trong phạm vi chiều rộng tối đa khoảng 1400px. Phần chính (hero) là một bố cục tối màu, trải rộng toàn chiều rộng với logo chòm sao ở giữa, được bao quanh bởi các nhãn nhỏ ở hai bên trái và phải. Các phần được sắp xếp xen kẽ: phần chính tối màu → dải sáng với lớp phủ (màu xương) → văn bản chuyển đổi tối màu → lưới thẻ hệ thống tối màu → chân trang tối màu. Phần sáng duy nhất tạo ra một sự chuyển đổi tông màu sắc nét. Lưới thẻ sử dụng 4 cột, với thẻ đầu tiên rộng gấp đôi ba thẻ còn lại, tạo ra bố cục bất đối xứng nhấn mạnh vào nội dung. Khoảng cách dọc giữa các phần khá rộng rãi (trên 80px). Thanh điều hướng tối giản: một thanh tin tức ở trên cùng + một nút "Bắt đầu ngay" căn lề trái và một nút "Menu" căn lề phải ở thanh trên cùng. Không có thanh bên, không có menu lớn.

Những bức ảnh mang tính chất gợi cảm xúc, chiếm toàn bộ bề mặt trang, chi phối màn hình chính và các thẻ. Các hình ảnh được làm mờ mạnh (giá trị làm mờ nền được phát hiện là 50px và 40px) và có độ tương phản cao, mô tả hiệu ứng đá cẩm thạch lỏng với những xoáy màu xanh đỏ, khói, hình bóng tối của phong cảnh và kết cấu lửa/than hồng. Các bức ảnh mang sắc thái u ám và tối tăm, không rực rỡ—chúng có cùng dải tông màu với nền trắng chứ không nổi bật lên trên đó. Không có ảnh sản phẩm, không có người, không có ảnh chụp màn hình giao diện người dùng. Các hình ảnh tạo ra bầu không khí hơn là đóng vai trò minh họa nội dung. Lưới thẻ ánh xạ mỗi hệ thống đến một khung cảnh mang tính chất gợi cảm xúc khác nhau, cho phép các bức ảnh hoạt động như những hình ảnh nhận diện trực quan trừu tượng hơn là hình ảnh sản phẩm theo nghĩa đen.

Bảng màu

Thương hiệu

  • Ember Rust #cc6437 — Các nét nhấn, đường viền biểu tượng và các điểm nhấn văn bản nhỏ là những màu sắc duy nhất trong hệ thống đơn sắc, xuất hiện giống như một đốm sáng nhấp nháy khó nhận thấy hơn là một lớp phủ toàn bộ.

Trung lập

  • Void Black #0b0b0b — Ảnh nền cho trang chính và các phần; là nền tảng của toàn bộ hệ thống.
  • Charcoal Surface #272a2a — Hình nền được làm từ bìa cứng và các tấm ván trên nền tối có màu sáng hơn một tông so với màu nền tranh để tạo sự phân tách bề mặt mà không gây bóng.
  • Bone #edebe7 — Các vùng sáng trên nền và bề mặt có màu kem, nơi hệ thống chuyển từ tối sang sáng.
  • Bone Darker #dfddd9 — Một sắc thái tinh tế có tên gọi “Xương” dành cho các bề mặt và yếu tố ánh sáng nhiều lớp, mang tông màu ấm áp, gần như trắng.
  • Pure White #ffffff — Tất cả văn bản chính và tiêu đề, viền nút mờ và các yếu tố điều hướng đều có màu chủ đạo với tỷ lệ tương phản 19,7:1 trên nền đen Void.
  • Abyss #050505 — Phần nền nổi cho dải tin tức (dải tin tức phía trên) - tối hơn một tông so với nền chính để làm nổi bật dải tin tức.

Kiểu chữ

Từ 11 đến 32px · 5 bước

  • Pragmatica Cond — thay thế: Oswald · phác thảo 400 · Phông chữ hiển thị chính và giao diện người dùng là một phông chữ hẹp, cô đọng với cỡ chữ in hoa 14px cho văn bản chính, 20px cho tiêu đề phần và 32px cho văn bản chính. Một phông chữ cực kỳ hẹp và cỡ chữ in hoa 14px cho văn bản chính là giải pháp đặc trưng nhất cho hệ thống: văn bản chính đọc giống như tiếng thì thầm của một kiểu chữ kiến trúc hơn là văn xuôi thông thường. Thay thế bằng Oswald hoặc Barlow Condensed nếu không có Pragmatica Condensed.
  • Pragmatica — thay thế: Inter · phác thảo 400 · Một phông chữ phụ, chính được sử dụng cho các đoạn văn xuôi dài hơn (ví dụ: phần mô tả thẻ "Hệ điều hành AI" có cỡ chữ 24px, văn bản đoạn văn là 15px). Rộng hơn một chút so với Pragmatica Cond để dễ đọc hơn trong các đoạn văn dài, nhưng vẫn giữ độ đậm 400—không bao giờ in đậm. Có thể thay thế bằng Inter hoặc Söhne.
  • Roboto Mono — thay thế: Roboto Mono (free · phác thảo 400 · Một phông chữ đơn cách cho dòng chữ chạy tin tức ("TIN TỨC • 15 THÁNG 6 NĂM 2026 • TRUY CẬP SỚM CRUCIBLE ĐÃ MỞ"). Phông chữ đơn cách chỉ được sử dụng ở đây, tạo ra sự khác biệt rõ ràng về chức năng: đây là dữ liệu hệ thống, không phải thương hiệu.

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

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

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

  • Dala — một chòm sao lơ lửng trên nền nhung đen
  • Linear — dụng cụ chính xác lúc nửa đêm
  • Resend — nhung đen với màu tím neon
  • 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.
  • Neon — Phòng máy chủ lúc màn đêm buông xuống. Bóng tối hoàn toàn, nơi ánh sáng duy nhất đến từ dữ liệu và tương tác của người dùng.
  • Discord — Thế giới game được ẩn sau cửa sổ trò chuyện bật lên - mỗi khu vực là một môi trường khép kín với ánh sáng và dàn nhân vật riêng.
  • Aaru — Đài quan sát trường hạt lúc nửa đêm
  • Atlas Card — Hầm Đêm Tối, với một tia sáng sapphire duy nhất, là một không gian đen kịt nơi thứ duy nhất quan trọng là màu xanh điện sâu thẳm.
  • Midjourney — Một thiết bị đầu cuối phát quang sinh học ở đáy đại dương sâu thẳm. Một thế giới dưới đáy biển nơi trí tuệ tự tạo ra bằng các luồng mã ASCII và các nút điều khiển xuất hiện dưới dạng các họa tiết phát sáng mờ ảo.
  • Checkly — Trung tâm điều khiển nhiệm vụ quỹ đạo sâu
  • Krea — phòng trưng bày đen tối lúc nửa đêm
  • Wope — Wope là một giao diện đường chân trời màu tím. Hãy tưởng tượng một chiếc bàn quan sát tối màu với ánh sáng tím chiếu ra từ bên dưới lớp kính.