Neo-brutalism vs. brutalism: 7 khác biệt then chốt (kèm ví dụ)

Đây là một cuộc trò chuyện tôi đã trải qua nhiều lần không đếm xuể:

Khách hàng: «Chúng tôi muốn một website brutalism.»

Tôi: «Tuyệt. Vậy brutalism nghĩa là gì với anh?»

Khách hàng: «Anh biết đấy, viền dày, màu rực rỡ, cái chất táo bạo ấy.»

Tôi: «Đó là neo-brutalism, không phải brutalism.»

Khách hàng: «…có khác nhau à?»

Có. Khác rất nhiều. Và nếu bạn định thiết kế bất cứ thứ gì «brutal» vào năm 2026, bạn cần biết chính xác mình đang xây dựng cái gì.

Brutalism và neo-brutalism cùng chung một DNA, nhưng chúng không phải anh em ruột: chúng là những người anh em họ xa đã rẽ theo hai hướng hoàn toàn khác nhau. Một bên sinh ra từ kiến trúc thời hậu chiến. Bên kia sinh ra từ những nhà thiết kế web nổi loạn đã chán ngán các góc bo tròn.

Hãy cùng mổ xẻ 7 khác biệt then chốt phân tách hai trào lưu thiết kế táo bạo này.

Một bài học lịch sử ngắn (tin tôi đi, nó có liên quan)

Trước khi lao vào những khác biệt, hãy dựng bối cảnh đã.

Brutalism: kiến trúc thập niên 1950 gặp gỡ web

Brutalism ra đời vào thập niên 1950 như một trào lưu kiến trúc. Cái tên bắt nguồn từ béton brut, tiếng Pháp nghĩa là «bê tông thô», một cụm từ mô tả hoàn hảo diện mạo của các công trình brutalism.

Hãy hình dung những khối bê tông đồ sộ, vật liệu phơi bày, hình khối hình học và không một chút trang trí. Những công trình ấy không cố tỏ ra đẹp. Chúng thực dụng, chân thật và thô ráp không ngại ngần.

Những ví dụ nổi tiếng:

• Barbican Centre ở London
• Boston City Hall
• Habitat 67 ở Montreal

Tua nhanh đến đầu thập niên 2000: các nhà thiết kế web bắt đầu mượn những nguyên tắc của brutalism, HTML thô, CSS tối thiểu, các bố cục cố ý «xấu». Họ chối bỏ những website nặng nề, ngập tràn Flash của thời đó.

Brutalism web trở thành một thứ phản thiết kế có chủ đích. Chức năng đứng trước hình thức. Nội dung đứng trước sự bóng bẩy. Sự chân thật đứng trước lớp hào nhoáng.

Neo-brutalism: một cuộc nổi loạn sinh ra trong thế giới số

Neo-brutalism xuất hiện vào khoảng 2015-2018 như một câu trả lời cho một thiết kế web ngày càng đồng dạng. Trong khi brutalism cắt gọt, neo-brutalism đi theo hướng ngược lại: đẩy mọi thứ lên hết cỡ.

Viền đen dày. Bóng đổ đanh. Màu tương phản cao. Lưới bất đối xứng. Nó giữ lại sự táo bạo của brutalism, nhưng thêm vào sự vui tươi, màu sắc và những quyết định thiết kế có chủ đích.

Neo-brutalism không phải phản thiết kế: nó là thiết kế táo bạo. Nó chối bỏ thứ thẩm mỹ mềm mại, bo tròn, pastel-khắp-mọi-nơi từng thống trị thập niên 2010.

Các thương hiệu như Gumroad, Balenciaga và Spotify đã đón nhận nó. Các nhà thiết kế trên Dribbble và Behance đã biến nó thành xu hướng. Còn bây giờ? Nó là một trong những ngôn ngữ thiết kế dễ nhận ra nhất mà bạn có thể dùng.

7 khác biệt then chốt

Giờ khi đã điểm qua lịch sử, hãy xem điều gì thực sự phân tách hai phong cách này.

1. Mục đích và triết lý

Brutalism: chức năng trên hết

Thiết kế brutalism bắt rễ từ sự tối giản và chân thật. Triết lý rất đơn giản: phô bày cấu trúc. Đừng giấu bộ khung. Đừng thêm trang trí chỉ vì trang trí.

Trong thiết kế web, điều này có nghĩa là:

• CSS tối thiểu
• Cấu trúc HTML phơi bày
• Kiểu chữ cơ bản
• Không hoạt ảnh hay hoa lá cành
• Nội dung là vua

Ví dụ: Một blog brutalism nhiều khả năng dùng các font hệ thống mặc định, không màu nào ngoài đen và trắng, và những danh sách <ul> đơn giản cho điều hướng. Nó dễ đọc, thực dụng, và không mảy may cố tỏ ra đẹp.

Neo-brutalism: biểu đạt táo bạo, nhưng có chủ ý

Neo-brutalism giữ lại sự thô ráp, nhưng thêm vào cá tính. Nó không phải phản thiết kế: nó là một thiết kế tự tin. Triết lý là: nổi bật, khắc sâu vào trí nhớ, nhưng đừng bao giờ hy sinh tính khả dụng.

Trong thiết kế web, điều này có nghĩa là:

• Bảng màu được tính toán (đen/trắng + các điểm nhấn rực rỡ)
• Kiểu chữ như một lời tuyên bố (font đậm, hình học)
• Phân cấp thị giác qua tương phản và kích thước
• Các vi tương tác làm giàu UX
• Một thiết kế trông như «làm thủ công»

Ví dụ: Một landing page neo-brutalism dùng Archivo Black cho tiêu đề, viền dày 4px trên mọi phần tử, bóng đổ đanh lệch 6px, và một nút CTA vàng rực. Táo bạo, nhưng mọi lựa chọn đều có chủ đích.

Khác biệt: Brutalism hỏi: «Chúng ta có thực sự cần cái này không?» Neo-brutalism hỏi: «Làm sao để điều này không thể bị phớt lờ?»

2. Cách dùng màu

Brutalism: đơn sắc, hoặc không gì cả

Thiết kế brutalism bám vào đen, trắng và các sắc xám. Nếu màu có xuất hiện, thường là tình cờ (những liên kết màu xanh) hoặc thuần túy chức năng (màu đỏ cho lỗi).

Lý do? Màu là trang trí, và brutalism chối bỏ trang trí.

Ví dụ bảng màu:

Sao chép:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

Chỉ vậy thôi. Ba màu. Bốn, nếu bạn thấy mình liều lĩnh.

Neo-brutalism: các khối màu tương phản cao

Neo-brutalism YÊU màu sắc, nhưng không phải những sắc pastel dịu. Ta đang nói về những tông táo bạo, bão hòa, không ngại ngần. Đen và trắng làm nền, rồi bạn thêm một hoặc hai màu nhấn bùng nổ.

Những bảng màu neo-brutalism phổ biến:

• Đen + trắng + vàng neon (#FFDB33)
• Đen + trắng + hồng chói (#FF006E)
• Đen + trắng + xanh cyber (#00F0FF)

Ví dụ bảng màu:

Sao chép:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

Màu không chỉ là điểm nhấn: chúng phục vụ sự nhấn mạnh, phân cấp và năng lượng.

Ví dụ: Gumroad dùng các CTA vàng rực trên nền đen. Feastables chơi với xanh lá và tím neon. Đây không phải tình cờ: chúng là cốt lõi của bản sắc thương hiệu.

Khác biệt: Brutalism dùng màu nhỏ giọt, hoặc không dùng chút nào. Neo-brutalism dùng màu một cách chiến lược và táo bạo.

3. Kiểu chữ

Brutalism: font hệ thống và các giá trị mặc định

Thiết kế brutalism thường dùng những gì trình duyệt mang sẵn:

• Arial
• Times New Roman
• Các ngăn xếp font hệ thống

Tại sao? Font tùy chỉnh bị xem là trang trí không cần thiết. Chữ phải dễ đọc, không phải đẹp.

Ví dụ:

Sao chépbody {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Tiêu đề có thể lớn hơn đôi chút, nhưng không có phân cấp qua độ đậm hay kiểu dáng. Đó là chữ thuần, một cách có chủ đích.

Neo-brutalism: font display đậm, hình học

Neo-brutalism đối xử với kiểu chữ như một nhân vật chính. Tiêu đề KHỔNG LỒ, đậm, và thường dựa vào các font hình học đặc trưng như:

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

Ví dụ:

Sao chéph1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Kiểu chữ dựng nên phân cấp thị giác. Phần thân chữ vẫn dễ đọc, nhưng tiêu đề đòi hỏi sự chú ý.

Ví dụ thực tế: Hãy ghé xem website của Balenciaga. Kiểu chữ của họ đồ sộ, đậm, không thể bỏ qua. Đó chính là neo-brutalism.

Khác biệt: Brutalism dùng font mặc định như một thứ phản trang trí. Neo-brutalism biến kiểu chữ đậm thành một phần tử thiết kế đúng nghĩa.

4. Bố cục và cấu trúc

Brutalism: lưới phơi bày, HTML thô

Bố cục brutalism ôm lấy dòng chảy mặc định của HTML. Bạn sẽ thấy:

• Bố cục một cột
• Danh sách không định kiểu
• Bảng trông y như bảng
• Không có lưới hoa mỹ hay mẹo flexbox

Bố cục mang tính thực dụng, thường mô phỏng web thời đầu (hãy nghĩ đến GeoCities hay Craigslist).

Ví dụ: Một portfolio brutalism sẽ liệt kê các dự án trong một <ul> đơn giản kèm ngày tháng. Không thẻ, không hiệu ứng khi rê chuột, không khoảng cách nào ngoài mặc định của trình duyệt.

Sao chép<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

Đơn giản. Thô. Không CSS, may ra chỉ vài chỉnh sửa lề.

Neo-brutalism: lưới bất đối xứng và xếp chồng

Bố cục neo-brutalism phá vỡ lưới, một cách có chủ đích. Bạn sẽ thấy:

• Các phần tử đặt bất đối xứng
• Những phần chồng lên nhau
• Các phần tử «trôi nổi» hoặc lệch đi
• Sử dụng dày đặc CSS Grid và Flexbox cho những bố cục sáng tạo

Mọi thứ vẫn thực dụng, nhưng bố cục tạo ra sự thú vị thị giác.

Ví dụ: Một phần hero neo-brutalism có thể có:

• Một tiêu đề lớn lệch sang trái
• Một hình ảnh viền dày chồng lên tiêu đề
• Một nút CTA đặt bất đối xứng
• Bóng đổ đanh tạo chiều sâu

Sao chép<section className="grid grid-cols-2 gap-8 relative">
  <div className="col-span-2 md:col-span-1 z-10">
    <h1 className="text-7xl font-bold uppercase">Your Product</h1>
    <p className="text-xl mt-4">Bold designs for bold brands.</p>
    <Button className="mt-6">Get Started</Button>
  </div>
  <div className="absolute right-0 top-10 w-1/2 border-4 border-black shadow-[8px_8px_0_0_#000]">
    <img src="/hero.png" alt="Hero" />
  </div>
</section>

Khác biệt: Brutalism phô bày cấu trúc y như nó vốn có. Neo-brutalism dàn dựng cấu trúc để tạo hiệu ứng.

5. Viền và bóng đổ

Brutalism: không có hoặc tối thiểu

Thiết kế brutalism hiếm khi dùng viền hay bóng. Nếu chúng xuất hiện, chúng kín đáo: một đường 1px để chia các phần, cùng lắm là vậy.

Lý do? Bóng và viền mang tính trang trí. Chúng thêm sức nặng thị giác mà brutalism né tránh.

Ví dụ:

Sao chép.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

Đó gần như là mức trang trí tối đa mà brutalism cho phép mình.

Neo-brutalism: viền dày, bóng đổ đanh

Neo-brutalism XOAY QUANH viền và bóng. Viền dày (3-6px) và bóng đổ đanh là chữ ký thị giác của nó.

Mỗi thẻ, nút, ô nhập và hình ảnh đều nhận được:

• Một viền đen dày (thường 3-4px)
• Một bóng đanh, lệch (không mờ, chỉ là một khối màu đặc lệch đi)

Ví dụ:

Sao chép.card {
  border: 4px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  padding: 2rem;
  background: #fff;
}
 
.button {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

Hiệu ứng không thể nhầm lẫn: các phần tử trông như được «đóng dấu» lên trang.

Ví dụ thực tế: Mọi thành phần của Neobrutalism đều dùng kiểu bóng này. Các thẻ của Gumroad. Các ô sản phẩm của Feastables. Đó là tấm danh thiếp của neo-brutalism.

Khác biệt: Brutalism né tránh mọi chiều sâu thị giác. Neo-brutalism ôm lấy nó bằng bóng đổ đanh và viền dày.

6. Tính tương tác và hoạt ảnh

Brutalism: tĩnh về nguyên tắc

Các website brutalism thường tĩnh. Hiệu ứng khi rê chuột? Tối thiểu, hoặc không có. Hoạt ảnh? Để làm gì. Thiết kế nói về nội dung, không phải tương tác.

Nếu có phần tử tương tác, chúng hành xử y hệt HTML mặc định:

• Liên kết màu xanh và gạch chân
• Nút trông như các phần tử <button>
• Biểu mẫu là các ô <input> không định kiểu

Ví dụ:

Sao chép<a href="/about">About</a>

Liên kết đó vẫn xanh. Nó gạch chân khi rê chuột. Chỉ vậy thôi.

Neo-brutalism: các vi tương tác kín đáo nhưng có chủ đích

Neo-brutalism dùng các vi tương tác để làm giàu UX mà không phô trương. Chẳng hạn:

• Nút hơi dịch đi khi rê chuột (như thể bóng đang chuyển động)
• Liên kết đổi màu hoặc được gạch chân dày
• Thẻ phóng to hoặc nâng lên khi tương tác
• Chuyển trang mượt mà

Hoạt ảnh nhanh (100-300ms) và có chủ đích, không bao giờ gây phiền.

Ví dụ:

Sao chép// Framer Motion button interaction
<motion.button
  whileHover={{
    x: 2,
    y: 2,
    boxShadow: "2px 2px 0 0 #000"
  }}
  whileTap={{
    x: 4,
    y: 4,
    boxShadow: "0px 0px 0 0 #000"
  }}
  transition={{ duration: 0.1 }}
  className="border-3 border-black shadow-[4px_4px_0_0_#000]"
>
  Click Me
</motion.button>

Nút «lún xuống» khi nhấn, mang lại phản hồi xúc giác. Vui tươi, nhưng không quá đà.

Khác biệt: Brutalism tĩnh và thô. Neo-brutalism thêm vào những tương tác dễ chịu giúp củng cố tính khả dụng.

7. Mục tiêu thẩm mỹ

Brutalism: phản thẩm mỹ

Brutalism chối bỏ cái đẹp truyền thống. Nó không cố tỏ ra đẹp theo nghĩa thông thường: nó cố tỏ ra chân thật, thực dụng, và đôi khi thẳng thừng.

Mục tiêu thẩm mỹ của nó là lột bỏ mọi sự làm màu để phô bày cấu trúc thô bên dưới. Nếu người dùng thấy xấu, cũng không sao, có lẽ đó chính là điểm mấu chốt.

Ví dụ:

• Craigslist (brutalism ngoài ý muốn)
• The Outline (báo chí brutalism có chủ đích)
• Những lần thiết kế lại ban đầu của Bloomberg (nội dung trước, không trang trí)

Neo-brutalism: một thẩm mỹ táo bạo

Neo-brutalism muốn được chú ý. Nó táo bạo, tự tin, khắc sâu vào trí nhớ. Mục tiêu thẩm mỹ của nó là nổi bật mà vẫn thực dụng.

Nó không phản đối cái đẹp: nó là một dạng đẹp khác. Thô, hình học, vui tươi và không ngại ngần.

Ví dụ:

• Các trang sản phẩm của Gumroad (táo bạo, trực diện, nhiều màu)
• Website của Feastables (vui tươi, tràn năng lượng, tương phản cao)
• Các trang chiến dịch của Spotify (thử nghiệm, bất đối xứng, rực rỡ)

Khác biệt: Brutalism nói: «Nó là vậy đó, chấp nhận hay bỏ qua.» Neo-brutalism nói: «Nhìn cái này đi, tôi cá bạn chưa từng thấy thứ nào như thế.»

So sánh cạnh nhau

Hãy đưa tất cả vào một bảng trực quan:

Các ví dụ thực tế được so sánh

Hãy nhìn vào những website thật để thấy các khác biệt này trong hành động.

Ví dụ brutalism: The Outline

Điều khiến nó mang tính brutalism:

• Chữ đen trên nền trắng, không màu
• Font hệ thống ở khắp nơi
• CSS tối thiểu, bố cục ưu tiên nội dung
• Không viền, không bóng, không trang trí
• Tĩnh, thực dụng, thô

Các lựa chọn thiết kế:

• Bố cục bài viết một cột
• Tiêu đề lớn, nhưng không cách điệu
• Hình ảnh phá lưới một cách tự nhiên
• Điều hướng là một danh sách đơn giản

Nó dễ đọc, thực dụng, và không mảy may cố chạy theo mốt. Đó chính là brutalism.

Ví dụ neo-brutalism: Gumroad

Điều khiến nó mang tính neo-brutalism:

• Một bảng màu đen, trắng và vàng rực
• Kiểu chữ đậm và nặng
• Viền dày trên mọi thẻ và nút
• Bóng đổ đanh tạo chiều sâu
• Bố cục bất đối xứng với khoảng cách được tính toán

Các lựa chọn thiết kế:

• Phần hero với một tiêu đề khổng lồ và một CTA vàng
• Thẻ sản phẩm với viền 4px và bóng 6px
• Nút dịch đi khi rê chuột
• Tương phản cao, không thể phớt lờ

Táo bạo, vui tươi và được thiết kế để nổi bật. Đó chính là neo-brutalism.

Khi nào dùng brutalism, khi nào dùng neo-brutalism

Vậy nên chọn cái nào? Điều đó tùy vào mục tiêu của bạn.

Dùng brutalism khi:

1. Nội dung là tất cả

Blog, trang tin, tài liệu: nếu nội dung là toàn bộ lý do tồn tại, brutalism giữ sự chú ý ở đúng chỗ đó.

2. Bạn muốn khả năng tiếp cận tối đa

HTML mặc định có khả năng tiếp cận cực kỳ tốt. CSS tối thiểu của brutalism nghĩa là ít thứ có thể hỏng hơn đối với trình đọc màn hình.

3. Bạn đang tuyên bố một lập trường

Brutalism thẳng thừng. Nếu thương hiệu của bạn chống lại khuôn phép, theo tinh thần DIY, hoặc cố ý gai góc, brutalism rất hợp.

4. Hiệu năng là yếu tố then chốt

CSS tối thiểu = thời gian tải nhanh. Các trang brutalism thường nhẹ dưới 100KB.

Dùng neo-brutalism khi:

1. Bạn muốn nổi bật

Startup, agency, portfolio sáng tạo: nếu bạn cần khắc sâu vào trí nhớ, neo-brutalism làm được.

2. Thương hiệu của bạn có cá tính

Neo-brutalism hợp với những thương hiệu táo bạo, vui tươi, tự tin hoặc nổi loạn.

3. Bạn đang xây dựng một sản phẩm

Dashboard SaaS, landing page, thương mại điện tử: neo-brutalism tạo phân cấp thị giác mà vẫn giữ được nét riêng.

4. Bạn muốn một thẩm mỹ hiện đại

Neo-brutalism mang lại cảm giác đương thời. Nếu nó là xu hướng của năm 2026, hẳn phải có lý do.

Có thể trộn lẫn chúng không?

Hoàn toàn có thể. Một số thiết kế xuất sắc nhất mượn từ cả hai.

Ví dụ về cách tiếp cận lai:

• Áp dụng triết lý nội dung-trước của brutalism
• Thêm kiểu chữ và màu sắc táo bạo của neo-brutalism
• Giữ bố cục đơn giản (brutalism) nhưng thêm viền/bóng có chiến lược (neo-brutalism)
• Tiết chế hoạt ảnh (brutalism) nhưng thêm trạng thái hover (neo-brutalism)

Chìa khóa là sự chủ đích. Hãy hiểu VÌ SAO bạn chọn mỗi phần tử, thay vì chỉ sao chép xu hướng.

Những lỗi thường gặp

Lỗi số 1: gọi mọi thứ là «brutalism»

Nếu thiết kế của bạn có viền dày và màu rực rỡ, nó là neo-brutalism. Brutalism thô hơn và ít trang trí hơn.

Lỗi số 2: làm neo-brutalism «xấu một cách cố ý»

Neo-brutalism táo bạo, không phải hỏng. Nó vẫn phải có phân cấp, tính dễ đọc và tính khả dụng.

Lỗi số 3: làm brutalism quá tay

Brutalism thực thụ có thể gai góc. Nếu người dùng không thể điều hướng trang của bạn hay đọc nội dung của bạn, bạn đã đi quá xa.

Lỗi số 4: làm neo-brutalism nửa vời

Thêm một cái viền rồi gọi đó là neo-brutalism sẽ không hiệu quả. Hãy cam kết với thẩm mỹ ấy: viền dày, màu rực rỡ, bóng đanh.

Suy nghĩ cuối

Brutalism và neo-brutalism không phải một. Chúng chung một tinh thần nổi loạn, nhưng cách thực thi cách nhau cả một trời một vực.

Brutalism lột bỏ mọi thứ. Nó thô, chân thật, và thực dụng đến mức cực đoan. Nó chối bỏ trang trí một cách dứt khoát.

Neo-brutalism đẩy mọi thứ lên hết cỡ. Nó táo bạo, nhiều màu và tự tin. Nó ôm lấy trang trí, miễn là có chủ đích.

Cả hai đều có chỗ đứng của mình. Brutalism hoàn hảo cho những dự án lấy nội dung làm trọng tâm, cần sự rõ ràng và hiệu năng. Neo-brutalism lý tưởng cho những thương hiệu cần nổi bật và để lại dấu ấn.

Điều tệ nhất bạn có thể làm? Nhầm lẫn hai cái, hoặc cam kết nửa vời với bất kỳ cái nào. Nếu đi theo brutalism, hãy đi đến tận cùng của sự thô. Nếu đi theo neo-brutalism, hãy đi đến tận cùng của sự táo bạo.

Giờ bạn đã biết sự khác biệt. Hãy dùng nó một cách khôn ngoan. 🚀

Muốn xây dựng các giao diện neo-brutalism? Hãy ghé xem Neobrutalism: một thư viện UI hoàn chỉnh được dựng cho những thiết kế táo bạo và khắc sâu. Các thành phần, khối và mẫu ôm lấy thẩm mỹ neo-brutalism mà không hy sinh tính khả dụng.