Authkit

Nhà thờ kính mờ lúc nửa đêm

AuthKit tạo ra một phong cách trình bày sản phẩm về đêm: một nền gần như đen với các bề mặt kính mờ, một lưới các đường kẻ gần như vô hình và văn bản phát sáng như được chiếu sáng bởi một lớp kính. Phông chữ gần như hoàn toàn màu trắng trên nền tối, với một điểm nhấn màu tím sáng duy nhất là yếu tố chức năng – mỗi bề mặt tương tác đều có một đường kẻ mỏng, mềm mại màu xanh trắng mát mẻ thay vì một khung cứng nhắc. Các thành phần được sắp xếp trên các lớp trong suốt, phủ lên một ánh sáng dịu nhẹ, và các thẻ xuất hiện như những tấm kính được chiếu sáng từ bên dưới, chứ không phải là các tấm giấy. Khoảng cách rộng và có nhịp điệu; yếu tố chính là một logo phát sáng duy nhất trải rộng toàn bộ chiều rộng của trang, được bao quanh bởi các thẻ kính nổi, thay vì bố cục chia màn hình truyền thống.

Một khung vẽ tối màu, toàn chiều rộng với vùng chứa nội dung được căn giữa, chiều rộng tối đa 1200px. Yếu tố chính là một logo duy nhất, được chiếu sáng, nằm ở giữa ("AuthKit" với phông chữ chuyển sắc) bên dưới một đoạn văn bản nhỏ hình lông mày, phía sau/bên dưới đó là ba thẻ kính nổi với biểu mẫu đăng nhập trải rộng ra (thẻ bên trái nghiêng sang trái, thẻ ở giữa được phóng to, thẻ bên phải nghiêng sang phải). Một nút chuyển đổi chủ đề sáng/tối được căn giữa bên dưới yếu tố chính. Hàng tính năng là một dòng thời gian ngang gồm 6 biểu tượng với các đường nối mỏng giữa các biểu tượng hình tròn. Nhịp điệu của phần: mỗi phần bắt đầu bằng một đoạn văn bản hình lông mày được căn giữa, được đóng khung bởi các đường ngang mờ dần, tiếp theo là một tiêu đề lớn, được căn giữa (44-48px), tiếp theo là một dòng văn bản nội dung đơn giản (16-18px), chiều rộng tối đa ~640px. Phần Tùy chỉnh hiển thị mô phỏng cửa sổ trình duyệt với thẻ đăng nhập nằm ở vị trí trung tâm được bao quanh bởi các bảng kiểm tra giao diện người dùng nổi (bảng màu, thanh trượt bán kính, bộ chọn biểu tượng logo, trường văn bản nút, trường nền trang) được đặt ở các góc của khung vẽ, giống như không gian làm việc của công cụ thiết kế.

Thiết kế hình ảnh chủ yếu tập trung vào các mô hình biểu mẫu đăng nhập, được tạo ra theo phong cách "hình thái thủy tinh" (các trường nhập email/mật khẩu, nút đăng nhập mạng xã hội, nhập mã không cần mật khẩu), được trình bày dưới dạng các thẻ mờ, nổi trên nền đen. Các biểu tượng tính năng là các ký tự tuyến tính đơn sắc màu #d1e4fa nằm trong các ô tròn, mờ. Một lưới tinh tế (các đường 1px trong rgba(186,215,247,0.06)) bao phủ toàn bộ trang, tạo nên bầu không khí, trong khi một điểm nhấn gradient hình nón lấp lánh ở phía trên yếu tố chính. Không có ảnh chụp, không có hình ảnh về lối sống, không có ảnh chụp màn hình sản phẩm—chính sản phẩm là yếu tố hình ảnh: các trường đăng nhập được sắp xếp như các nguyên mẫu thủy tinh trong một studio tối.

Tối tăm Phần mềm dịch vụ thuần túy (PaaS)Độ dốc mềm mại

https://authkit.com

Bảng màu

Thương hiệu

Void Violet #663af3 — Màu chủ đạo của nút kêu gọi hành động (CTA) là màu nhấn duy nhất được sử dụng riêng cho nút "Tiếp tục/Gửi" trong các biểu mẫu đăng nhập; màu tím rực rỡ trên nền gần như đen tạo cảm giác khẩn cấp mà không phá vỡ bố cục màu đơn sắc.

Trung lập

Midnight Canvas #05060f — Nền trang, bề mặt sâu nhất của tấm thẻ, phần tô điểm của huy hiệu—một nền gần như đen kịt mà trên đó mọi thứ khác nổi lên.
Steel Plate #2f343e — Bề mặt nổi, các nút chức năng phụ/ảo, mặt sau bảng điều khiển kín đáo.
Fog Veil #9da7ba — Văn bản chính, văn bản trên thẻ, dễ đọc nhưng lại bị lu mờ so với các tiêu đề.
Moon Mist #c7d3ea — Văn bản chính, nhãn bổ sung, văn bản phụ trợ tắt tiếng
Frost Glow #d1e4fa — Màu nền chính cho văn bản chính và liên kết, văn bản biểu tượng và màu nền biểu tượng là màu nền phát sáng mặc định.
Ice Highlight #d8ecf8 — Chữ sáng trên nền tối, nhãn đảo ngược và tiêu đề có độ tương phản cao. Không nên sử dụng nó làm màu chủ đạo cho các lời kêu gọi hành động; hiệu ứng chuyển màu gradient cho tiêu đề—sự chuyển tiếp mượt mà từ xanh nhạt sang xanh lam nhạt từ trên xuống dưới—được sử dụng trong logo AuthKit và các tiêu đề chính.

Kiểu chữ

Từ 12 đến 48px · 8 bước

Untitled Sans — thay thế: Inter · phác thảo 400, 500, 600, 700 · Văn bản chính, giao diện người dùng, nút bấm, trường nhập liệu, biểu tượng, tiêu đề nhỏ - một phông chữ chung cho mọi chức năng.
aeonikPro — thay thế: Space Grotesk · phác thảo 400, 500 · Chỉ hiển thị các tiêu đề—thương hiệu AuthKit, tiêu đề các phần và văn bản chính—với cỡ chữ 500 point và kích thước 44-48px, tạo cho thương hiệu một vẻ ngoài rộng rãi, tinh tế thay vì điểm nhấn hào nhoáng.
dotDigital — thay thế: JetBrains Mono · phác thảo 400 · Văn bản viết hoa toàn bộ ("Giới thiệu," "Thiết kế mở rộng," "Tỏa sáng rực rỡ") - văn bản viết hoa toàn bộ với khoảng cách dòng 0.10em đóng vai trò là dấu phân cách tinh tế giữa văn bản chính và tiêu đề.

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

Mục đích	Nghĩa
Tỉ trọng	rộng rãi
Bước cơ bản	16px
Bán kính nút	999px
Bán kính thẻ	16px
Bóng tối	không - viền thay vì bóng
Giữa các phần	120px
Chiều rộng trang	1200px

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

Tạo một trang web theo phong cách này

Phong cách tương tự

Resend — nhung đen với màu tím neon
Gsap — Một bảng trắng động trong studio thiết kế. Bức tường gần như đen, phấn màu kem ấm áp và năm bút dạ màu khác nhau—mỗi màu dành cho một lĩnh vực hoạt hì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.
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.
LaunchDarkly — Phòng điều khiển neon là một buồng lái tối tăm, nơi các tín hiệu màu tím nhấp nháy xuyên qua các tấm bảng đen tuyền.
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
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.
N8n — Công cụ quản lý quy trình lúc nửa đêm – cảm giác như đang xem một bức tranh tự động hóa thời gian thực trong phòng máy chủ tối tăm, được chiếu sáng bởi các chỉ báo trạng thái và luồng dữ liệu.