Table of Contents6 sections
Khi "Xấu" Lại Là Một Lựa Chọn Có Chủ Đích
Một ngày đẹp trời, bạn đang dạo chơi trên internet bỗng dưng đi lạc vào một trang web với viền đen dày cộp, bóng đổ như in dấu, một vài chỗ chữ to bất thường... và trong đầu bật ra câu hỏi "Sao mọi thứ nó vừa THÔ vừa BÉO vừa ĐEN thế này!"
Thật ra đấy có thể không phải là lỗi, đấy là tính năng. Rất có thể bạn vừa gặp neo brutalism web design. Và nó không phải là một kiểu design mới ra đời, nó có gốc gác, có tên gọi, và có cả một câu chuyện đằng sau.
1. Trước tiên, một trang web Neo-Brutalism trông như thế nào?
Hãy hình dung những đặc điểm sau xuất hiện cùng lúc trên một trang web:
Viền đen dày bao quanh mọi thứ (nút, card, khung ảnh...)
Phông chữ bất quy tắc, độ dày bất thường, đôi khi to đến mức chiếm gần hết màn hình
Màu sắc có độ bão hòa cao, kết hợp với nền thô hoặc tông pastel nhẹ để cân bằng
Nếu bạn từng thấy một trang web mà cảm giác đầu tiên là "Sao nhìn nó thô thế" hay "Sao cái gì cũng như đang nổi lên như 3D vậy", thì gần như chắc chắn đó là neo-brutalism.
2. Neo-brutalism trong thiết kế website đến từ đâu?
Khoảng 2016, Bloomberg Businessweek mở đầu xu hướng thiết kế thô, tối giản, tập trung vào nội dung. Đến 2020, Figma thổi thêm màu sắc và khối hình học vào phong cách này. Bước ngoặt thực sự đến năm 2021, khi Gumroad rebrand với viền đen dày, màu nổi bật, typography khổ lớn. Năm 2022, thuật ngữ "Neubrutalism" chính thức được đặt tên bởi Michał Malewicz trên UX Collective.
Về bản chất, neo-brutalism là phản ứng trước sự đồng nhất của các website tối giản, đặc biệt là các landing page SaaS vốn thường trông giống hệt nhau bằng cách ưu tiên cá tính thương hiệu, tương phản mạnh và trải nghiệm thị giác táo bạo.
3. Cấu trúc và đặc điểm nhận diện của Neo-Brutalism
Màu sắc tương phản cao: Bỏ qua các tông màu "an toàn", Neo-brutalism ưu tiên nền đen/trắng làm chủ đạo, kết hợp với một hoặc hai màu accent cực kỳ bão hòa (vàng chanh, hồng neon, xanh lime). Không dùng gradient, mọi thứ là màu phẳng, đặc.
Viền và bóng đổ: Thay vì bóng đổ mờ & mềm quen thuộc trong Material Design hay Neumorphism, neo-brutalism dùng bóng cứng, lệch hẳn một hướng, thường là offset-shadow kiểu 4px 4px 0px #000. Viền đen dày 1-5px bao quanh phần tử. Hiệu ứng tổng thể giống như một miếng sticker được dán lên nền, có độ dày vật lý thật sự.
Bố cục phá cách: Trong khi thiết kế hiện đại thường cố gắng làm mọi thứ trông "liền mạch", neo-brutalism làm điều ngược lại: đôi khi để lộ rõ cấu trúc lưới, đôi khi các khối cố tình lệch nhau, phá vỡ sự đối xứng một cách có tính toán.
4. Áp dụng vào dự án thực tế như thế nào?
Giữ một hệ thống spacing nhất quán. Dù trông "thô", neo-brutalism vẫn cần một grid system rõ ràng đứng sau (ví dụ hệ thống 8-point grid).
Nguồn: Nielsen Norman Group (Blog)
Chọn 2-3 màu accent, không hơn. Sự tương phản mạnh chỉ hiệu quả khi số lượng màu được giới hạn nghiêm ngặt. Thêm màu thứ tư, thứ năm sẽ biến "táo bạo" thành "rối mắt".
Test khả năng đọc trước, thẩm mỹ sau. Với các trang có nhiều nội dung (blog, dashboard, trang sản phẩm), luôn kiểm tra xem người dùng có thực sự tìm được thông tin họ cần hay không, trước khi quyết định giữ nguyên độ "gắt" của màu sắc và bố cục.
Ba cái tên sau là ví dụ tiêu biểu nhất cho phong cách này, mỗi trang lại khai thác neo-brutalism theo một cách riêng:
Gumroad — thường được xem là "gương mặt đại diện" của trào lưu này. Nền hồng/vàng rực rỡ, viền đen dày, bố cục như một cuốn zine kỹ thuật số thay vì một nền tảng SaaS thông thường.
Nguồn: Gumroad (Website)
Feastables — thương hiệu snack của MrBeast. Dùng neo-brutalism để nói chuyện với thế hệ Gen-Z: nút bấm to, bo tròn kiểu sticker, cảm giác vui nhộn, "chạm được".*
Nguồn: Feastables (Website)
neobrutalism dev — thư viện component dựa trên shadcn/ui, dùng để xem trực tiếp các pattern neo-brutalism.
Nguồn: NeobrutalismDEV (Website)
5. Tài nguyên Figma để tìm hiểu thêm
Nếu bạn muốn thực hành trực tiếp thay vì chỉ đọc lý thuyết:
UI kit neo-brutalism: miễn phí trên Figma Community, tìm với từ khóa "neobrutalism UI kit" hoặc "brutalist Figma template"
neobrutalism.dev: thư viện component dựa trên shadcn/ui, React + Tailwind, có cả code lẫn tài liệu thiết kế tham khảo
Case study từ chính Gumroad (bài "Introducing the new Gumroad" của Sahil Lavingia) và Figma brand refresh để phân tích cách họ tổ chức spacing và color role
6. Nguồn tham khảo
Nếu bạn đang cân nhắc đưa phong cách này vào một dự án thực tế, lời khuyên ngắn gọn nhất là: hãy để sự "thô" nằm ở bề mặt thị giác, còn hệ thống đứng sau nó thì phải chặt chẽ như bất kỳ design system nghiêm túc nào khác.