Vercel
Thiết bị đầu cuối được in trên giấy trắng.
Hệ thống thiết kế Vercel là một bài tập về sự kỷ luật trong việc sử dụng màu đơn sắc: một nền gần như trắng (#fafafa), chữ đen, viền mỏng và hoàn toàn không có màu sắc trang trí. Ngôn ngữ hình ảnh gợi lên giao diện dòng lệnh của nhà phát triển được in ra – phông chữ Geist Sans hầu như không thể đọc được ở kích thước "heroic" với độ đậm 400-450 và khoảng cách chữ -0.06em, trong khi Geist Mono sử dụng nhãn, siêu dữ liệu và các mẫu mã với cỡ chữ in hoa 11-13px. Các nút có bán kính 6px sắc nét hoặc hình chữ nhật màu đen tuyền trên nền trắng hoặc trắng trên nền đen. Hệ thống này dựa vào độ tương phản và thứ bậc kiểu chữ hơn là màu sắc, chỉ sử dụng dấu tam giác (▲) và logo hai dòng làm các yếu tố thương hiệu duy nhất. Các bề mặt được xếp chồng lên nhau theo thứ tự #fafafa → #ebebeb → #171717, tạo chiều sâu thông qua việc thay đổi giá trị tông màu hơn là bóng hoặc màu sắc. Mỗi thành phần được xây dựng trên lưới 4px với mật độ nhỏ gọn, tạo nên giao diện gợi nhớ đến sổ tay của kỹ sư—chính xác, chức năng và không ngại sử dụng khoảng trắng.
Khung chứa có chiều rộng 1280px, căn giữa, với khoảng đệm ngang rộng rãi (24-48px). Khối chính sử dụng bố cục ba vùng không đối xứng: tiêu đề lớn ở bên trái, biểu tượng thương hiệu ở giữa và khối "lông mày" ở bên phải. Bên dưới khối chính, nội dung được sắp xếp theo các dải xen kẽ: một dải toàn chiều rộng với logo của khách hàng, tiếp theo là phần "Đại lý Sáng tạo" hai cột với tiêu đề ở bên trái và bố cục sản phẩm ở bên phải, tiếp theo là lưới ba thẻ với các tính năng. Các phần được phân tách bằng khoảng cách dọc 96-128px mà không có đường phân cách hoặc độ lệch nền. Thanh điều hướng là một bảng cố định 64px duy nhất với nền mờ. Lưới thẻ luôn sử dụng bố cục hai hoặc ba cột với khoảng cách 16-24px. Mật độ tổng thể khá nhỏ gọn - văn bản dễ đọc, có nhiều khoảng trắng, nhưng kích thước phông chữ và kích thước các thành phần khiến trang không có cảm giác thoáng đãng.
Các hình ảnh được sử dụng rất đơn giản và luôn mang tính chức năng. Yếu tố hình ảnh chính là hình tam giác màu đen (▲) — một biểu tượng thương hiệu hình học xuất hiện dưới dạng hình bóng lơ lửng ở kích thước "chữ in hoa". Logo của khách hàng trên dải chứng minh ý tưởng sử dụng chính thức tên thương hiệu ở dạng thang độ xám. Các bản mô phỏng sản phẩm (giao diện trò chuyện của Notion, đầu ra thiết bị đầu cuối CLI, thẻ hộ chiếu) được nhúng dưới dạng ảnh chụp màn hình ở chế độ sáng trong các thẻ được đóng khung. Không có ảnh chụp, hình minh họa hoặc yếu tố 3D — hệ thống chỉ đơn thuần là kiểu chữ và hình dạng hình học trên giấy trắng.
Bảng màu
Trung lập
- Obsidian
#171717— Các tiêu đề chính, viền điều hướng, nền nút tối và các dấu phân cách trong danh sách đều gần như đen, tránh sự thô cứng và độ bão hòa màu sắc chói mắt. - Paper White
#fafafa— Khung trang, bề mặt thẻ, ánh sáng phản chiếu từ các nút bấm—đây là phông nền tiêu chuẩn mà mọi thứ khác đều nằm trên đó. - Pure White
#ffffff— Các bề mặt thẻ nổi, các miếng chèn, các trường nhập liệu. - Hairline
#ebebeb— Viền 1px trên các nút, liên kết và thẻ sẽ hiển thị rõ ở mức độ phóng to cao, nhưng sẽ biến mất ở mức độ phóng to thấp. - Ash
#c9c9c9— Văn bản bị vô hiệu hóa, nhãn bị làm mờ, hình mờ tên thương hiệu trong logo của khách hàng. - Smoke
#a8a8a8— Văn bản phụ, văn bản giữ chỗ, tô màu biểu tượng tinh tế.
Kiểu chữ
Từ 11 đến 64px · 6 bước
- Geist Sans — thay thế: Inter · phác thảo 400, 450, 500 · Phông chữ chính cho giao diện và tiêu đề là phông chữ sans-serif hình học được thiết kế riêng từ Vercel với khoảng cách chữ hẹp ở kích thước lớn (-0.06em ở 56-64px, -0.05em ở 30px). Đối với các tiêu đề ở đầu trang, độ đậm 450 được chọn: dày hơn Light nhưng mỏng hơn Semi-Bold, tạo nên một giọng điệu tự tin nhưng không quá áp đặt.
- Geist Mono — thay thế: JetBrains Mono · phác thảo 400, 500, 600 · Một phông chữ phụ đơn cách dành cho chú thích, khối mã, bảng hiển thị kết quả CLI, siêu dữ liệu và văn bản viết hoa. Sự kết hợp 8px/600px/chữ viết hoa cho phép đặt chính xác các logo chữ nhỏ. Khoảng cách chữ rộng (0,071em) trong phiên bản đơn cách cung cấp đủ không gian cho văn bản viết hoa.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | dày đặc |
| Bước cơ bản | 12px |
| Bán kính nút | 6px |
| Bán kính thẻ | 6px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 96-128px |
| Chiều rộng trang | 1280px |
AI sẽ xây dựng trang web của bạn theo phong cách Vercel 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ự
- Headspace — Một góc thư giãn tràn ngập ánh nắng trên nền giấy ấm áp.
- WHOOP — Phòng thí nghiệm trình diễn lúc nửa đêm - những chiếc bàn thí nghiệm màu trắng tinh khôi dưới một khoảng không đen kịt đầy kịch tính, một xung điện màu tím duy nhất.
- Together AI — Bảng điều khiển nghiên cứu trên giấy băng hà
- v0 by Vercel — Bản vẽ tiện. Độ chính xác và tính năng là tối quan trọng, với mỗi yếu tố đều phục vụ một mục đích rõ ràng trên một bề mặt sạch sẽ, hoàn hảo về mặt kỹ thuật.
- 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.
- Glideapps — Bàn vẽ kỹ thuật đơn sắc với một điểm nhấn màu xanh ngọc lam điện lấp lánh.
- Timescale — Bản vẽ kỹ thuật trên giấy kẻ ô ấm.
- UGLYCASH — Một cuốn sổ tay dán đầy sticker trên giấy màu kem toát lên không khí của một công ty fintech táo bạo, theo chủ nghĩa tối đa, tự hào phô bày sự hỗn loạn của mình.
- Sprout Social — Một mầm xanh trên nền đá phiến đen. Một điểm nhấn tươi sáng trên nền đơn sắc nghiêm ngặt, màu sắc chỉ được sử dụng để tạo điểm nhấn, với phông chữ hình học tự tin đóng vai trò như những biển chỉ dẫn.
- Krea — phòng trưng bày đen tối lúc nửa đêm
- Evergreen — Nhà kính năng lượng mặt trời trên giấy lanh.
- Factory — Màn hình điều khiển "phòng tác chiến" lúc nửa đêm. "Nhà máy" là một bảng điều khiển màu đen tuyền, nơi một tấm thẻ trắng duy nhất đáp xuống như một thông điệp được chiếu sáng bằng đèn pin—vật thể duy nhất trong căn phòng là chính công việc đang được thực hiện.