Dub
Bảng điều khiển bằng giấy gạo mờ của Link
Hệ thống hình ảnh của Dub có tính thẩm mỹ tiết chế, gần như mang phong cách biên tập của một phần mềm dịch vụ (SaaS): một nền gần như trắng được giữ lại bởi các đường viền mỏng thay vì các yếu tố nhô ra, với kiểu chữ đơn sắc dày đặc cung cấp cấu trúc hỗ trợ và một màu xanh lam tươi sáng duy nhất (#2563eb) tạo điểm nhấn. Thoạt nhìn, các bề mặt trông phẳng và không có khung, nhưng mỗi vùng chứa đều có lề 1px #e5e5e5, gợi cảm giác của một tài liệu in. Cá tính được tạo ra thông qua một bộ nhỏ các điểm nhấn hình "viên thuốc" màu sắc (cam, xanh lá cây, tím) nổi bật trên bảng màu trung tính, và các tiêu đề tạo cảm giác tự tin và hiện đại mà không quá phô trương. Các thành phần nhỏ gọn và dày đặc: khoảng cách giữa các ô là 8px, bán kính thẻ là 12px, nhãn hình viên thuốc ở khoảng cách 9999px và các nút điều khiển ẩn thay vì các nút nặng nề, đầy đặn.
Trang được xây dựng trên bố cục căn giữa với chiều rộng tối đa khoảng 1200px. Yếu tố chính là một khối văn bản căn giữa với ba yếu tố nổi (Chương trình liên kết, Phân tích chuyển đổi, Liên kết rút gọn) được đặt nằm ngang phía trên bố cục sản phẩm lớn. Các phần được sắp xếp theo chiều dọc với khoảng cách giữa các phần tử là 64px, xen kẽ giữa nền trắng và màu giấy mờ #f5f5f5 để tạo sự phân tách tông màu. Phần dưới cùng sử dụng bố cục hình chữ Z: văn bản biên tập được căn giữa ở phần giữa, và các thẻ giao diện người dùng nổi được neo vào lề trái và phải, tạo ra nhịp điệu bất đối xứng, giống như tạp chí. Đám mây logo là một lưới 5x2 đơn giản, được căn giữa trang. Thanh điều hướng là một thanh trên cùng tối giản — logo ở bên trái, thanh điều hướng ở giữa, một nhóm hai nút (nút "Đăng nhập" mờ + nút "Đăng ký" đầy đủ) ở bên phải — không có menu cố định hoặc menu lớn. Giao diện bảng điều khiển của cửa sổ chính hiển thị bố cục ứng dụng hai cột cổ điển: một thanh bên cố định (khoảng 240px) + một khu vực nội dung xác định mật độ thông tin sản phẩm cho khách truy cập trước khi họ bắt đầu cuộn xuống.
Hình ảnh tập trung vào sản phẩm, không phải phong cách sống. Màn hình chính hiển thị ảnh chụp màn hình bảng điều khiển lớn, thể hiện mô hình sản phẩm thực tế với thanh điều hướng bên, bảng dữ liệu và các yếu tố giao diện người dùng nổi, được bố trí như một bảng phẳng trên nền trắng. Logo của khách hàng được hiển thị trong lưới màu xám nhạt (beehiv, superpower, Chatbase, v.v.) để ghi nhận hiệu suất truyền thông xã hội của họ, được loại bỏ màu sắc để màu xanh lam chủ đạo của trang vẫn nổi bật. Các thẻ đối tác nổi (hồ sơ nhỏ và ô hiển thị dữ liệu doanh thu/thanh toán) di chuyển xung quanh các khối văn bản biên tập ở phía dưới, tạo cảm giác chiều sâu mà không cần sử dụng bóng đổ trên chính văn bản. Mẫu nền lưới chấm là một đặc điểm nổi bật: một hàng mỏng các chấm nhỏ với độ mờ rất thấp tạo ra kết cấu và cảm giác của một hệ thống thiết kế/bề mặt vẽ, nhấn mạnh vị trí của trang web là một "nền tảng phân bổ liên kết hiện đại". Biểu tượng được tối giản, với đường viền và tô màu, và sử dụng bảng màu nhấn (cam quýt, tím oải hương, xanh bạc hà) cho các thẻ tính năng. Sản phẩm không sử dụng ảnh chụp, hình minh họa hay mô hình 3D nào — giao diện người dùng chính là một ngôn ngữ trực quan.
Bảng màu
Thương hiệu
- Electric Blue
#2563eb— Màu sắc chủ đạo của thương hiệu—bao gồm logo, liên kết, chỉ số hiệu suất chính, trạng thái hoạt động và các điểm nhấn biểu tượng—được sử dụng. Màu xanh đậm trên nền trắng tạo nên điểm nhấn thị giác duy nhất của hệ thống. - Deep Sapphire
#1e40af— Màu nền chính của nút hành động, màu đậm của lời kêu gọi hành động—màu duy nhất biểu thị hành động—được sử dụng một cách tiết kiệm để thu hút sự chú ý.
Trung lập
- Canvas White
#ffffff— Hình nền trang, bề mặt thẻ, bảng bật lên là nền tảng tuyệt đối của mọi màn hình. - Paper Mist
#f5f5f5— Những thay đổi tinh tế về màu sắc bề mặt đối với các thẻ lồng nhau, các bảng bổ sung và hiệu ứng tô màu khi di chuột. - Ash
#e5e5e5— Các đường viền mỏng trên các bo mạch, đầu nối và vách ngăn chính là đường cấu trúc giữ cho hệ thống được gắn kết với nhau. - Smoke
#d4d4d4— Viền sắc nét hơn cho các vùng chứa được chọn và thêm đường viền cho các nút. - Pebble
#c8c8c8— Viền, đường bao điều khiển và các đường phân chia cấu trúc có độ tương phản trung bình. Màu này không nên được sử dụng làm màu chủ đạo cho các lời kêu gọi hành động. - Midnight Ink
#0a0a0a— Văn bản chính của các nút, các nút được tô sáng và văn bản điều hướng có màu gần như đen để đạt độ tương phản tối đa.
Kiểu chữ
Từ 11 đến 48px · 9 bước
- Satoshi — thay thế: Inter (weight 500 · phác thảo 500 · Tiêu đề hiển thị – chỉ được sử dụng trên các dòng có kích thước 36–48px cho tiêu đề và tên mục. Độ đậm phông chữ – 500 (trung bình, không đậm): Các tiêu đề trông tự tin và hiện đại, nhưng không bao giờ quá áp đảo. Tỷ lệ hình học của Satoshi mang lại cho kiểu chữ một cảm giác hơi hướng biên tập, hiện đại mà phần nội dung chính của Inter không thể tái tạo.
- Inter — thay thế: Inter (native) · phác thảo 400, 500, 600 · Văn bản chính, nhãn giao diện người dùng, điều hướng, tiêu đề phụ và tiêu đề nhỏ. Inter là công cụ chính, xử lý mọi thứ từ nhãn siêu nhỏ 11px đến tiêu đề phụ 30px. Độ dày 400 là mặc định cho văn bản chính, 500 cho các phần tử được tô sáng và nhãn nút, và 600 được dành riêng cho các nhãn giao diện người dùng quan trọng. Kích thước 16px với chiều cao dòng 1.5 là kích thước đơn bước được sử dụng thường xuyên nhất (1220 lần xuất hiện), xác nhận rằng 16px là kích thước chuẩn cho văn bản chính.
- Geist Mono — thay thế: JetBrains Mono or IBM Plex Mono · phác thảo 400, 500 · Các đoạn mã, siêu dữ liệu kỹ thuật và các mã thông báo đơn cách được nhúng được sử dụng trong các khối mã ở kích thước 12–14px và trong các phần tử hiển thị mã lớn ở kích thước 24px. Điều này đảm bảo tính đáng tin cậy của công cụ dành cho nhà phát triển, phù hợp với định vị sản phẩm của Dub.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | trung bình |
| Bước cơ bản | 8px |
| Bán kính nút | 8px |
| Bán kính thẻ | 12px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 64px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Dub 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
- 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.
- Calendly — Mực xanh đậm trên nền đá cẩm thạch lạnh.
- 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.