Shop

Một chòm sao giao dịch nổi trên nền đá cẩm thạch trắng.

Cửa hàng trực tuyến hoạt động trên mô hình "bảng trắng", với các sản phẩm được hiển thị dưới dạng các thẻ hình ảnh lớn, cong mạnh thay vì dạng lưới hình thu nhỏ. Toàn bộ giao diện cực kỳ mượt mà: bán kính 20-28px xuyên suốt, các nút điều khiển hình viên thuốc và phần thân GT Standard nhỏ gọn 16px với khoảng cách âm chặt chẽ giúp văn bản sắc nét và nổi bật. Điểm nhấn nổi bật duy nhất của hệ thống là màu tím rực rỡ (#5433eb), xuất hiện trong logo, ô tìm kiếm hình tròn và dưới dạng bóng mờ trên cùng một nút. Phần còn lại của bảng màu là các tông màu trung tính ấm áp: bề mặt trắng, nền xám lạnh tinh tế, đường viền mờ và văn bản gần như đen. Mật độ vẫn nhỏ gọn với khoảng cách 12px, nhưng các dải tiêu đề và danh mục có khoảng cách thoáng nhờ nhịp điệu dọc rộng rãi 64-80px, khiến trải nghiệm mua sắm giống như đang duyệt web hơn là xem catalog.

Chiều rộng tối đa là 1200px, được căn giữa trên nền mờ #f2f4f5, với thanh bên rộng 64px cố định ở bên trái chỉ chứa các biểu tượng điều hướng. Phần tử chính là một dải toàn chiều rộng, với các thẻ sản phẩm được đặt phía trên logo "cửa hàng" màu tím ở giữa và thanh tìm kiếm hình viên thuốc ngay bên dưới. Các thẻ danh mục được sắp xếp thành một hàng duy nhất ở giữa bên dưới thanh tìm kiếm. Các phần nội dung (Nữ, Nam, Làm đẹp, Nhà cửa, Trẻ em & Em bé) được sắp xếp thành các dải riêng biệt, mỗi dải chứa một lưới 4 cột với hình ảnh sản phẩm hoặc bố cục 2 cột "phần tử chính và lưới". Khoảng cách dọc khá rộng rãi: 64–80px giữa các phần chính. Chân trang là một dải tối màu ở cuối trang với các nhóm liên kết hình cột. Các mũi tên carousel ở phía bên phải của các bảng sản phẩm ngang cho biết nội dung có thể cuộn mà không có điểm phân trang.

Hình ảnh là yếu tố trực quan chủ đạo: ảnh sản phẩm toàn màn hình trên nền trắng, ảnh cắt xén tỷ lệ 1:1, và hình ảnh phong cách sống với tông màu đất ấm áp (màu be, đất nung, xanh lá cây nhạt, trắng ngà). Hình ảnh sản phẩm có màu sắc riêng – giao diện người dùng vẫn giữ nguyên màu sắc, cho phép các sắc thái sản phẩm tạo nên sự đa dạng về mặt thị giác. Logo thương hiệu xuất hiện dưới dạng văn bản phủ lên hình ảnh chính tối hoặc sáng, thay vì là các biểu tượng riêng lẻ. Trong bố cục chính, các thẻ sản phẩm được đặt như một chòm sao nổi, hơi chồng lên nhau phía trên tên thương hiệu. Các biểu tượng được thiết kế tối giản và đơn sắc (viền đen), ngoại trừ các biểu tượng danh mục sử dụng một màu duy nhất của thương hiệu. Không có hình minh họa, hiệu ứng 3D hoặc hiệu ứng chuyển màu trong hình ảnh sản phẩm.

Cửa hàng trực tuyến Chủ nghĩa tối giản

https://shop.app

Bảng màu

Thương hiệu

Shop Violet #5433eb — Nút gửi, dấu chấm trên văn bản và logo thương hiệu là những điểm nhấn duy nhất làm nổi bật hành động và cá tính riêng trên nền trắng.
Violet Wash #c0b5f3 — Một quầng sáng mờ phía sau nút gửi màu tím, giữ nguyên độ sáng mà không thay đổi màu sắc.

Trung lập

Canvas Mist #f2f4f5 — Hình nền trang và các xử lý bề mặt bổ sung phía sau các thẻ nổi.
Pure White #ffffff — Bề mặt chính dành cho thẻ, trường nhập liệu, biển báo nổi và các nút hình viên thuốc.
Ink Black #000000 — Văn bản chính, tiêu đề, biểu tượng, ký hiệu điều hướng và thẻ sản phẩm hiển thị ở chế độ tối.
Faint Border #ebebeb — Các đường phân chia mỏng trên thẻ, đường viền trường nhập liệu và khung nút hình viên thuốc.
Muted Gray #787574 — Văn bản phụ, nhãn điều hướng, đường viền biểu tượng khi không hoạt động
Cool Stone #cccccc — Các hình ảnh giữ chỗ, trạng thái bị vô hiệu hóa và nền biểu tượng không hoạt động

Kiểu chữ

Từ 11 đến 16px · 4 bước

GT Standard — thay thế: Inter · phác thảo 400 · Phông chữ chính được sử dụng cho mọi kích cỡ—cho cả văn bản chính và tiêu đề. GTStandard-MRegular ở kích thước 16px/-0.031em là phông chữ chính cho văn bản chính, nút bấm và nhãn. GTStandard-MSemibold ở kích thước 20px/-0.05em được sử dụng cho một số tiêu đề lớn; GTStandard-MMedium ở kích thước 11–12px được sử dụng cho chú thích siêu nhỏ. Mỗi biến thể phông chữ được hiển thị với độ đậm quang học là 400—thứ tự ưu tiên của phông chữ đạt được thông qua các sắc độ chuyển màu tinh tế và khoảng cách chữ âm dày đặc, thay vì độ tương phản đậm. Đây là phong cách đặc trưng: Shop không sử dụng phông chữ đậm để gây ấn tượng, mà thay vào đó định hình văn bản thông qua khoảng cách chữ.
Shopify Sans — thay thế: Inter · phác thảo 400, 700 · Chỉ dành cho các thông báo cấp hệ thống, chẳng hạn như biểu ngữ tải ứng dụng và văn bản chấp thuận cookie.

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ẻ	28px
Bóng tối	bóng mềm
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 Shop 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ự

Apple iPhone Duo — Một thiết bị có thể gập lại được trưng bày trong không gian trắng. Hình ảnh minh họa sản phẩm nằm ở trung tâm, trong khi kiểu chữ và các nút điều khiển màu xanh lam được thiết kế khá nhẹ nhàng.
AYOCIN — Một biểu tượng năng lượng mặt trời tượng trưng cho sức khỏe. Tạo ra những màn hình gợi nhớ đến những bức ảnh nội thất ấm áp: kiểu chữ hoành tráng, bóng kiến trúc mờ ảo và một vật thể được chiếu sáng duy nhất đặt trong không gian êm dịu, mịn màng.
Apple AirPods 5 — Apple — điện ảnh trên nền trắng. Một không gian trắng rộng lớn dành cho việc dựng phim nhường chỗ cho các đoạn quảng cáo dài, nơi hình bóng của các vật thể chuyển động và ánh sáng bão hòa tạo nên hiệu ứng thị giác ấn tượng.
Hopper — Khung cảnh Santorini lúc hoàng hôn được bao phủ bởi một bức ảnh mờ ảo. Hình ảnh điểm đến được lồng ghép khéo léo, tạo nên một lớp phủ đầy không khí, phía trên là các nút điều hướng và đặt chỗ nhỏ gọn màu trắng.
Bose — Một phim trường trên bờ biển. Một hình ảnh quảng cáo bị gió thổi tung lấp đầy khung hình, trong khi các hình ảnh điều khiển chiến dịch đen trắng sắc nét được sắp xếp xung quanh như những chi tiết chính xác.
Bauhaus Clock — Những chiếc đồng hồ lấy cảm hứng từ trường phái Bauhaus – ánh sáng cơ học màu ngọc lam. Kết hợp những bề mặt sáng, tĩnh lặng với hình ảnh chiếc đồng hồ tối màu, đậm chất điện ảnh và sử dụng màu ngọc lam như một điểm nhấn phát sáng độc đáo.
Cursor — Một xưởng làm giấy da ấm cúng, được thắp sáng bởi những than hồng đang cháy âm ỉ.
Slush — Thế giới bơm hơi của các hình dán trên giấy màu pastel
MindMarket — Một cuốn sách truyện cổ tích ấm áp trên giấy màu kem - một bề mặt biên tập thân thiện, nơi những tiêu đề lớn của Inter và các nhân vật cắt giấy cùng tồn tại trên một bề mặt mềm mại, ngập tràn ánh nắng.
Airbnb — Một bức tường trưng bày màu trắng tĩnh lặng với một chiếc bookmark màu đỏ san hô duy nhất.
Superr — Một cuốn vở học sinh ấm áp dưới ánh nắng chiều dịu nhẹ. Một trang giấy màu kem, một cây bút dạ màu cam không có nắp, và một chồng nhãn dán tên được ép plastic đang chờ được bóc ra.
Apple (España) — Dưới ánh sáng ban ngày dịu nhẹ, phòng trưng bày của bảo tàng là một không gian trắng tinh khôi, quyến rũ và nhẹ nhàng, mỗi hiện vật được chiếu sáng bằng đèn spotlight trên nền tường được phủ một lớp màu nhạt.