Shopify
Nhà kính nửa đêm - Các nhãn hiệu nổi bật trên nền màu ngọc lam đậm, được chiếu sáng bởi một điểm nhấn màu bạc hà.
Hệ thống thiết kế của Shopify giống như một xưởng chế tác đêm khuya dành cho thương mại điện tử: một nền gần như đen được điểm xuyết bằng màu xanh ngọc lam đậm, một kiểu chữ sans-serif rộng và tự tin, cùng một điểm nhấn màu bạc hà rực rỡ duy nhất kích hoạt các khoảnh khắc tương tác. Giao diện giống như một phòng tối, nơi sản phẩm và thương hiệu là nguồn sáng – hình ảnh và cửa hàng trực tuyến tỏa sáng trên nền gần như đen, trong khi các yếu tố mạ crôm mờ dần. Các thành phần có hình học nhưng mềm mại: các thẻ có bán kính 12px với viền mỏng, các nút hình viên thuốc và kiểu chữ có độ dày 330 tạo cảm giác về quy mô một cách tinh tế chứ không phô trương. Một dấu chấm câu màu sắc duy nhất (#36f4a4) được sử dụng tiết kiệm trên các liên kết, thẻ và trạng thái được chọn, dành màu sắc cho những khoảnh khắc chức năng để đảm bảo câu chuyện của người bán vẫn là điểm nhấn trực quan.
Chiều rộng tối đa là khoảng 1280px, căn giữa, với các khối hình ảnh tràn viền mở rộng ra ngoài khung ảnh. Nhịp điệu trang xen kẽ: (1) một trang giới thiệu tối màu toàn chiều rộng với tiêu đề và nút kêu gọi hành động được phủ lên trên, (2) các phần tối màu dễ chịu với các khối văn bản và hình ảnh có chiều rộng tối đa trong 2 cột hoặc lưới hình ảnh trong 3 cột, (3) các bảng giới thiệu tương tác (thẻ sản phẩm, công cụ tính phí vận chuyển, bản đồ thế giới) được hiển thị dưới dạng thẻ nổi trên nền sâu hơn. Thanh điều hướng là một thanh trên cùng cố định với logo + 3 yếu tố điều hướng + các liên kết phụ + nút kêu gọi hành động chính, tất cả được căn chỉnh sang phải. Nhịp điệu dọc sử dụng khoảng cách 80px giữa các phần với sự chuyển tiếp mượt mà — không có đường phân cách giữa các phần tối màu, chỉ có sự thay đổi về tông màu bề mặt.
Thiết kế hình ảnh chủ yếu tập trung vào nhà bán lẻ: ảnh sản phẩm kích thước đầy đủ và ảnh từ các sự kiện thương hiệu chiếm phần lớn trọng tâm hình ảnh, thường ở dạng nền lớn với văn bản màu trắng được phủ lên. Hình ảnh được cắt xén sát, có độ tương phản cao và mang tính chất lễ hội (tiếng chuông Nasdaq, lời chào tập thể, cận cảnh sản phẩm cầm trên tay). Nền tối tạo ấn tượng rằng những bức ảnh này được chiếu sáng bởi đèn sân khấu. Hình minh họa theo phong cách tối giản—công việc giải thích chính được thực hiện bởi các hình ảnh sản phẩm được nhúng và ảnh chụp màn hình cửa hàng. Các biểu tượng đơn sắc, với độ rộng đường kẻ từ 1,5–2px, thường là màu trắng hoặc #36f4a4 cho trạng thái hoạt động.
Bảng màu
Thương hiệu
- Shopify Mint
#36f4a4— Các chỉ báo điều hướng đang hoạt động, vòng lấy nét, điểm nổi bật của thẻ và điểm nổi bật khi di chuột qua các liên kết là những điểm nhấn màu sắc duy nhất tạo cảm giác tương tác được kích hoạt trên nền tối.
Trung lập
- Midnight Forest
#02090a— Khung trang, hình nền tiêu đề, hình nền các phần - Deep Lichen
#061a1c— Các bề mặt chính của thẻ, các tấm nổi, các khối nội dung. - Shaded Fern
#072720— Bảng điều hướng, các thẻ bổ sung, phần bảng điều khiển được nâng lên một cách gần như không đáng kể. - Spruce Border
#1e2c31— Viền mỏng cho thẻ, đường phân chia, đường viền trường nhập liệu. - Abyss Indigo
#000a1e— Bề mặt bổ sung để trưng bày sản phẩm/mẫu thử, các bảng mô tả chức năng. - Pure White
#ffffff— Văn bản chính, màu nền nút, tiêu đề, logo.
Kiểu chữ
Từ 12 đến 70px · 8 bước
- Neue Haas Grotesk — thay thế: Inter · phác thảo 330, 400, 500, 550, 600 · Hệ thống kiểu chữ cốt lõi bao gồm tiêu đề với độ đậm phông chữ 70–96px (330–400), tạo cảm giác tinh tế chứ không quá nổi bật; nội dung chính với độ đậm phông chữ 16–18px (400–500); và thanh điều hướng cùng giao diện người dùng với độ đậm phông chữ 14–16px (500–550). Độ đậm phông chữ siêu nhẹ 330 ở kích thước màn hình lớn là một đặc điểm nổi bật: nó truyền tải sự tự tin thông qua sự tiết chế chứ không phải sự cồng kềnh.
- Inter Variable — thay thế: Inter · phác thảo 400, 420, 450, 550 · Đây là kiểu chữ phụ được sử dụng trong các yếu tố giao diện điều hướng, ghi chú nhỏ, điều khiển tab và văn bản siêu nhỏ ở chân trang. Các chữ cái viết thường lớn hơn một chút và khoảng cách chữ chuẩn hơn giúp chữ dễ đọc hơn ở kích thước nhỏ gọn. Nó cũng phù hợp cho những trường hợp cần kiểu chữ có độ dày 420 để lấp đầy khoảng trống giữa kiểu chữ thông thường và kiểu chữ cỡ trung bình.
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 | 12px |
| Bán kính nút | 9999px |
| Bán kính thẻ | 12px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 80px |
| Chiều rộng trang | 1280px |
AI sẽ xây dựng trang web của bạn theo phong cách Shopify 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ự
- Retool — Một xưởng làm việc bằng đá obsidian ấm áp - một bề mặt dành cho các công cụ chính xác, được thắp sáng bởi những đốm than hồng âm ỉ, nơi mọi thứ được tạo ra.
- Elektron — Bảng điều khiển thiết bị vào lúc nửa đêm gần như là một bức tranh đen kịt, nơi những bức ảnh sản phẩm tỏa sáng trong khi giao diện gần như vô hình.
- REKKI — Bảng điều khiển chuyến bay trong phòng thí nghiệm ảnh
- OFFFICE : — một phòng trưng bày đen tối chìm trong phông chữ nguyên khối
- Clyde — Phòng trưng bày, với chỉ một đèn chiếu sáng duy nhất, là một không gian gần như tối tăm, nơi màu sắc duy nhất trong phòng là một quả cầu có màu chuyển sắc ấm áp.
- Channel Studio — Một phòng lab ảnh studio với một chụp đèn màu san hô.
- Electronic Materials Office — Một đốm than hồng rực rỡ trong một phòng trưng bày được trang trí bằng than củi.
- ORYZO AI — Một bài luận ảnh về phòng tối. Một vật thể đơn độc lơ lửng trong bóng tối ấm áp, phông chữ màu kem là điểm nhấn duy nhất.
- 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.
- Hungry Tiger — Những dòng chữ graffiti màu nghệ tươi sáng trên bức tường của lò nướng tandoor. Một gam màu thống nhất gồm vàng và nâu gỉ, với cỡ chữ lớn đến nỗi trông giống biển hiệu chợ gia vị hơn là trang web.
- Bibliothèque — Một phòng trưng bày hình khối lập phương màu đen dưới ánh đèn sân khấu – một chiếc đĩa đơn độc được chiếu sáng trong một sảnh rộng lớn, tối tăm.
- Apple (España) — Nhà hát màu đen với các thiết bị chiếu sáng.