Glossier

Buổi chụp ảnh dưới ánh nắng mặt trời - giấy trắng, mực đen, một điểm nhấn màu vàng tươi sáng.

Glossier hoạt động như một tạp chí làm đẹp kỹ thuật số: một bố cục gần như đơn sắc trắng đen, điểm xuyết bởi một màu vàng rực rỡ duy nhất, vừa là logo thương hiệu vừa là lời kêu gọi hành động duy nhất. Hệ thống được thiết kế tiết chế – tiêu đề Apercu cỡ lớn, không gian văn bản rộng rãi, hình ảnh phong cách sống toàn trang mang phần lớn cảm xúc – và thực dụng trong khâu thực hiện: thẻ sản phẩm phẳng, viền mỏng và hoàn toàn không có trang trí cầu kỳ. Màu vàng không phải là màu phụ của thương hiệu; nó CHÍNH LÀ thương hiệu, được sử dụng một cách tiết kiệm, để mỗi lần xuất hiện đều như được chiếu sáng bởi đèn flash máy ảnh. Mọi thứ khác đều được thiết kế để hòa vào nền: màu trung tính là màu xám ấm với sắc hồng nhẹ, viền mỏng và kiểu chữ dày đặc, cô đọng. Kết quả là một cửa hàng trực tuyến toát lên sự tự tin, tinh tế và hiện đại không khoan nhượng.

Trang này có bố cục dọc gồm các phần toàn màn hình, mỗi phần được thiết kế như một trang biên tập độc lập. Phần chính là một bức ảnh toàn chiều rộng với lớp phủ trắng nổi (góc trên bên trái) và một logo màu vàng khổng lồ chiếm toàn bộ phần dưới cùng của trang. Bên dưới phần chính, các phần xen kẽ giữa hình ảnh toàn màn hình và lưới các thẻ riêng lẻ. Việc phân chia các danh mục (chăm sóc da/trang điểm) thành hai cột với tỷ lệ hình ảnh bằng nhau (50/50) diễn ra mà không có đường viền rõ ràng—chỉ có một đường nối các hình ảnh phân tách chúng. Danh mục sản phẩm sử dụng lưới bốn cột gồm các thẻ vuông trên nền #f7f7f7. Thanh điều hướng là một thanh trên cùng tối giản với một dải quảng cáo phụ phía trên. Khoảng cách giữa các phần khá lớn (64px), nhưng sự chuyển tiếp giữa các phần rất mượt mà—không có đường phân cách hoặc màu nền xen kẽ, ngoại trừ phần chân trang ấm áp. Nhịp điệu tổng thể là: ảnh, văn bản, ảnh, lưới, ảnh – giống như lật giở một tạp chí thời trang.

Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo. Toàn bộ khu vực xem được lấp đầy bằng hình ảnh về lối sống và chân dung – ánh sáng vàng ấm áp của giờ vàng, cận cảnh làn da mềm mại, bàn tay cầm chai sản phẩm trên nền ánh nắng chói chang. Bảng màu trong các bức ảnh ấm áp và giảm độ bão hòa: bầu trời màu đào, tông màu da đất nung, màu xanh biển sâu. Hình ảnh luôn chiếm toàn bộ bề mặt trang, không có góc bo tròn, khung hoặc lớp phủ, ngoại trừ các thẻ văn bản màu trắng hoặc logo màu vàng. Ảnh sản phẩm trên thẻ catalog được chụp trên nền trắng tinh khiết liền mạch với ánh sáng phẳng, đều. Tỷ lệ hình ảnh so với văn bản xấp xỉ 70/30 – hình ảnh truyền tải cảm xúc, văn bản truyền tải chức năng. Không có hình minh họa, không có đồ họa trừu tượng, không có hình ảnh 3D.

Cửa hàng trực tuyến Chủ nghĩa tối giản Bài xã luận Đơn sắc

https://glossier.com

Bảng màu

Thương hiệu

Glossier Yellow #fff116 — Màu vàng được sử dụng như một điểm nhấn phụ cho các chi tiết trang trí và để làm nổi bật các truy vấn tìm kiếm ít được sử dụng hơn. Không nên sử dụng màu vàng làm màu chủ đạo cho lời kêu gọi hành động.

Trung lập

Ink #000000 — Văn bản chính, liên kết điều hướng, văn bản chủ đạo, văn bản chân trang, đường viền biểu tượng, đường viền mỏng; màu sắc chủ đạo về kiểu chữ và cấu trúc.
Paper #ffffff — Bề mặt thẻ sản phẩm, vùng tô màu, các mảng nổi; lớp bề mặt sáng nhất trong chồng thẻ.
Fog #f7f7f7 — Khung trang, hình nền các phần, hiệu ứng chuyển tiếp giữa các hình ảnh trên trang; bề mặt cơ bản mà toàn bộ trang web được xây dựng trên đó.
Blush #faf2f4 — Hình nền chân trang, các đường phân chia phần mềm mại, ấm áp; sắc hồng trắng nhẹ nhàng tạo thêm sự ấm áp cho phần dưới của các trang.
Mist #f0f0f0 — Một bề mặt sáng màu dùng để tạo phông nền không gây chú ý và phân tách các phần. Không nên sử dụng nó làm màu chủ đạo cho lời kêu gọi hành động.
Ash #e8e8e8 — Viền trường nhập liệu, nền biểu tượng, đường phân cách mỏng; màu viền cấu trúc cho thẻ và các phần tử biểu mẫu.

Kiểu chữ

Từ 12 đến 32px · 5 bước

Apercu — thay thế: Inter · phác thảo 400, 500, 700 · Phông chữ chính được sử dụng xuyên suốt giao diện người dùng—văn bản chính ở cỡ 16px/400, điều hướng và chú thích ở cỡ 12–14px/500, tiêu đề phụ ở cỡ 20px/500 và tiêu đề bài viết ở cỡ 32px/700. Thiết kế hình học, mang tính nhân văn của Apercu mang đến cho thương hiệu một phong cách hiện đại, cô đọng; khoảng cách giữa các chữ cái gần bằng không (0.002–0.003em) làm cho phông chữ trở nên nhỏ gọn và giống như trong tạp chí, chứ không phải thoáng đãng hay thân thiện. Độ đậm 700 được dành riêng cho các yếu tố hiển thị trong bài viết, chứ không phải các yếu tố giao diện người dùng.
Apercu Mono — thay thế: JetBrains Mono or IBM Plex Mono · phác thảo 400 · Kiểu chữ siêu tiện ích dành cho siêu dữ liệu đơn hàng, số theo dõi và nhãn bên cạnh mã; phiên bản chữ đơn cách tạo nên kết cấu kỹ thuật trên nền kiểu chữ cân đối.
GTStandard-M — thay thế: Inter · phác thảo 400 · GTStandard-M - Được tìm thấy trong dữ liệu đã trích xuất nhưng không được AI mô tả.

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	0px
Bán kính thẻ	0px
Bóng tối	không - viền thay vì bóng
Giữa các phần	64px
Chiều rộng trang	1440px

AI sẽ xây dựng trang web của bạn theo phong cách Glossier 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ự

Lightship — Một bức tranh sống động về con đường rộng mở. Những bức tường màu kem ấm áp được trang trí bằng những bức ảnh phong cảnh khổ lớn được gắn sát nhau, chữ đen mảnh mai gần như không nhìn thấy trên khung ảnh, và một điểm nhấn màu cam tươi sáng phá vỡ gam màu đơn sắc như một đống lửa giữa đồng cỏ.
Faire ES — danh mục bán buôn kem ấm
Adanola — Một cuốn lookbook biên tập trên giấy trắng. Một buổi chụp ảnh thời trang nơi kiểu chữ và nhiếp ảnh hòa quyện trên bề mặt trắng tinh khiết, với mực đen cho kiểu chữ và một phông chữ sans-serif đặc trưng tinh tế (Favorit), phản ánh phong cách tổng thể của thương hiệu.
Oura Ring — Một xưởng làm yến mạch ấm cúng, ngập tràn ánh sáng ban ngày dịu nhẹ.
Stykka — Một xưởng chế tác kiểu Scandinavia ngập tràn ánh sáng trắng – một phòng trưng bày yên tĩnh, được làm thủ công, nơi chỉ có tiếng nói của nhiếp ảnh vang lên.
DJI — Vải canvas màu đen vũ trụ với điểm nhấn màu xanh điện duy nhất.
Altitude Beverages — Trang tạp chí đen trắng. Hãy tưởng tượng một trang tạp chí thời trang được loại bỏ hoàn toàn màu sắc ngoại trừ các bức ảnh tĩnh—văn bản và khoảng trắng sẽ kể toàn bộ câu chuyện.
AATHER — Lòng bàn tay mở, ngọn lửa đơn độc - một sự xa xỉ thầm lặng ẩn chứa trong sự tĩnh lặng.
Cowboy — Một phòng trưng bày xe đạp Bỉ trong không gian trắng tinh khôi với chất liệu sứ. Một showroom nơi các bề mặt mờ, phông chữ lớn thường dùng trong các ấn phẩm và gần như không có trang trí nào khác thu hút sự chú ý vào chiếc xe đạp và những vật dụng bên trong.
Refero — Bố cục biên tập trên nền đá cẩm thạch trắng - trang sản phẩm được thiết kế bởi một nhà thiết kế kiểu chữ, trong đó tiêu đề kiểu chữ serif là dấu ấn đặc trưng của thương hiệu, còn mọi thứ khác đều được tối giản một cách tinh tế.
Face Formula — Một bức chân dung theo phong cách biên tập Scandinavia. Một bố cục tĩnh lặng, theo kiểu tạp chí, nơi ánh mắt của người mẫu và tiêu đề, được viết bằng phông chữ serif cô đọng, tự nói lên tất cả trên nền sương mù mát mẻ.
Shupatto — Tủ trưng bày bảo tàng trên nền đá cẩm thạch trắng.