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ự
- Mollie — Quầy cashmere, sổ sách kế toán màu tối. Để lại khoảng trắng rộng rãi cho thiết kế biên tập xung quanh văn bản màu đen, sau đó nhấn mạnh các điểm liên quan đến sản phẩm bằng các gam màu kem ấm áp, nâu cà phê espresso và hình ảnh thực tế về các phương thức thanh toán.
- Kagi — Một phòng đọc riêng biệt. Tạo một không gian trắng thoáng đãng xung quanh những dòng chữ in đậm bằng than chì, sử dụng những điểm nhấn màu tím nhẹ nhàng và các bề mặt màu pastel ấm áp để phá vỡ sự tĩnh lặng.
- Milanote — Milanote là một studio sáng tạo chuyên nghiệp. Chúng tôi tạo ra các trang theo phong cách trưng bày ảnh bằng cách sử dụng bảng hình ảnh nổi: tường khung tối màu, không gian hiển thị màu trắng và ảnh chụp màn hình trông giống như vật thể thật với chiều sâu mềm mại.
- Co2 — Một tập bản đồ khí hậu dưới ánh sáng mùa đông. Tạo các trang giống như một tài liệu phong cảnh nhìn từ trên cao, nơi các tiêu đề có chân chữ, dữ liệu được mã hóa theo danh mục và hình ảnh băng giá làm nổi bật các lề trắng rộng.
- GitButler — Màu ngọc lam ở cuối văn bản. Sự kết hợp giữa các tiêu đề có chân chữ độ tương phản cao với các đường kẻ lưới kỹ thuật tinh tế, bề mặt màu than chì ấm áp và điểm nhấn màu ngọc lam kín đáo.
- 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.