Brutalism là gì: từ kiến trúc bê tông thô đến neo-brutalism trong UI, web và poster

Brutalism là gì: gốc kiến trúc bê tông thô (béton brut, Smithson, Reyner Banham), brutalist web design và neo-brutalism trong UI với viền đen dày, bóng cứng, bảng màu HEX, font, mẫu component, landing page, poster và lưu ý tương phản WCAG.

Brutalism là gì? Brutalism (tiếng Việt thường gọi là chủ nghĩa thô mộc) ban đầu là một trường phái kiến trúc ra đời ở Anh thập niên 1950: công trình để lộ bê tông, gạch và kết cấu, gần như không trang trí. Sang thiết kế số, chữ này có hai nghĩa: brutalist web design là website trông như HTML thô, còn neo-brutalism (neubrutalism) là phong cách UI dùng viền đen dày, bóng đổ cứng, màu phẳng rực và chữ to đậm.

Bài này đi từ gốc kiến trúc sang phần designer cần: dấu hiệu nhận ra, bảng màu HEX, font, mẫu component, landing page, poster và lưu ý tương phản. Nếu muốn lấy bảng màu từ một tấm ảnh công trình bê tông, bạn có thể dùng ngay công cụ Tạo bảng màu từ ảnh của ColorME (phần 6 có kết quả chạy thật).

Cùng một nội dung, hai cách "thô": brutalist web (trái) và neo-brutalism (phải). Thương hiệu "Sóng Chậm" là mẫu giả định. Bảng: ColorME.

1. Brutalism trong kiến trúc: từ "béton brut" đến bài luận năm 1955

Theo Wikipedia tiếng Anh (mục Brutalist architecture) và bản tiếng Việt (Chủ nghĩa thô mộc), brutalism xuất hiện ở Vương quốc Anh vào thập niên 1950, giữa các dự án tái thiết sau chiến tranh. Công trình brutalism phô bày vật liệu và kết cấu thay vì trang trí: bê tông hoặc gạch để trần, không sơn, hình khối góc cạnh và bảng màu gần như đơn sắc.

• Tên gọi: cụm "new brutalism" bắt nguồn từ chữ tiếng Thụy Điển "nybrutalism". Hai kiến trúc sư người Anh Alison và Peter Smithson là những người đầu tiên dùng nó cho cách thiết kế của họ; trường Hunstanton (1954) của họ là công trình đầu tiên được chính các tác giả gọi là "new brutalist".
• Reyner Banham: nhà sử học kiến trúc này phổ biến thuật ngữ qua bài luận The New Brutalism năm 1955, và gắn nó với hai cụm tiếng Pháp béton brut ("bê tông thô") và art brut ("nghệ thuật thô").
• Le Corbusier: Wikipedia gọi các công trình bê tông của ông là "proto-brutalist" (tiền brutalism), nổi tiếng nhất là khối nhà ở Unité d'habitation ở Marseille (1952). Trong cuốn sách năm 1966, Banham viết rằng việc chính Le Corbusier gọi bê tông của ông là "béton-brut" đã giúp khái niệm brutalism được chấp nhận rộng rãi.

Nói ngắn: "brutal" ở đây không phải "tàn bạo" mà đến từ "brut", tức "thô, để nguyên". Đó cũng là điểm nối sang thiết kế số: để lộ cấu trúc, không che bằng trang trí.

Barbican Estate, khu nhà ở ở London do hãng Chamberlin, Powell and Bon thiết kế; Wikipedia gọi khu Barbican là một ví dụ tiêu biểu của brutalism Anh. Bê tông đẽo nhám, cột tròn, khối lặp lại. Ảnh: Julian Herzog, Wikimedia Commons, giấy phép CC BY 4.0, chụp 18/01/2026 (trang ảnh gốc).

Wikipedia ghi brutalism được dùng nhiều nhất cho công trình công cộng như trường đại học, thư viện; độ phổ biến giảm từ cuối thập niên 1970. Hai ví dụ dưới đây là một thư viện đại học và một khu nhà ở; trang Wikipedia của cả hai đều xếp chúng vào phong cách brutalism.

Thư viện Geisel, Đại học California San Diego (William Pereira, 1969–1970), theo Wikipedia là một trong những công trình brutalism nổi tiếng nhất nước Mỹ. Ảnh: Gankbank789, Wikimedia Commons, CC0, chụp 06/12/2025, ColorME cắt bớt (trang ảnh gốc).

Habitat 67, khu nhà ở ở Montreal, được Wikipedia xếp vào phong cách brutalism và metabolism: các khối hộp bê tông xếp lệch, cấu trúc lộ hẳn ra ngoài. Ảnh: Dllu, Wikimedia Commons, giấy phép CC BY-SA 4.0, chụp 19/05/2019 (trang ảnh gốc).

Designer "mượn" từ ba ảnh trên: khối lặp theo lưới, đường biên rõ, vật liệu để nguyên, bóng đổ đậm. Bản tóm tắt có ở trang thuật ngữ Brutalism trong thư viện ColorME.

2. Brutalist web design: website "thô" như HTML thời đầu

Bài Brutalism and Antidesign của Nielsen Norman Group (Kate Moran, 2017) mô tả brutalism trong thiết kế số là phong cách cố ý trông thô, ngẫu hứng hoặc không trang trí, gợi lại các website đầu thập niên 1990. Bài lấy Craigslist và Drudge Report làm ví dụ cho kiểu giao diện đã truyền cảm hứng cho trào lưu này, đôi khi chỉ là HTML trần với link xanh và chữ đơn cách (monospace).

Trang tuyển tập brutalistwebsites.com tự mô tả bằng một câu ngắn ngay đầu trang: brutalism có thể xem là phản ứng của một thế hệ trẻ trước sự nhẹ nhàng, lạc quan và phù phiếm của web design ngày nay. Chính trang đó cũng là một ví dụ: chữ mono, gạch ngang, một đường link xanh gạch chân.

Phần đầu trang chủ brutalistwebsites.com: font đơn cách, nền xám, link xanh mặc định. Ảnh chụp màn hình trang công khai ngày 04/11/2026, chỉ cắt phần chữ; bản quyền giao diện thuộc chủ trang.

Dấu hiệu nhận ra brutalist web design: font hệ thống hoặc đơn cách (Times, Courier, Arial); link xanh gạch chân và nút như HTML gốc; cấu trúc lộ ra bằng đường kẻ, bảng, danh sách; ít màu, đôi khi thêm một màu nền rất gắt.

NN/g tách riêng một nhánh gọi là antidesign: cố tình làm giao diện xấu, rối, không có thứ bậc, con trỏ lạ, chuyển động gây phân tâm. Lời khuyên của bài là giữ brutalism ở phần thị giác, không phá thứ bậc thông tin, điều hướng hay tương tác chỉ để cho mới lạ.

3. Neo-brutalism (neubrutalism) trong UI là gì?

Theo bài Neobrutalism: Definition and Best Practices của NN/g (Hayat Sheikh, 11/04/2025), neobrutalism (còn viết là neubrutalism) là bước phát triển từ brutalism truyền thống: một xu hướng thị giác có độ tương phản cao, bố cục dạng khối, màu đậm, viền dày và các chi tiết "chưa đánh bóng". Khác với brutalist web thuần, neo-brutalism kết hợp thêm chất đồ hoạ hoài cổ thập niên 90, nên thường nhiều màu và gọn gàng hơn.

Sáu dấu hiệu rút từ mô tả của NN/g, kèm bảng màu mẫu và cặp font có dấu tiếng Việt. Bảng: ColorME.

Sáu đặc điểm dễ nhận ra

1. Viền đen dày: NN/g gọi là "thick lines": đường bao dày, hình khối góc cạnh, đường kẻ đặc tạo cấu trúc mà không cần gradient.
2. Bóng đổ cứng: bóng một màu đặc, không làm mờ. NN/g lấy ví dụ một bóng đen lệch 4 px. Trong CSS là box-shadow: 4px 4px 0 #121212.
3. Màu tươi, tương phản cao: màu cơ bản, bão hoà, đặt sát nhau để làm nổi chức năng chính.
4. Chữ đậm: tiêu đề to, đậm, đôi khi hơi "lạ", được cân lại bằng nhiều khoảng trắng.
5. Bố cục khối: ô vuông vức, lưới lộ rõ, đường chia dày.
6. Chi tiết hoài cổ: nút kiểu Windows 98, cửa sổ trình duyệt cũ, font mono, pixel art.

Bảng màu HEX gợi ý

Đây là bảng màu mẫu do ColorME phối, không phải của thương hiệu nào. NN/g khuyên chỉ giữ 2–3 màu đậm, tương phản cao (cộng đen) để không làm người xem quá tải, nên mỗi màn hình bạn chọn 2 trong 4 màu nhấn trên là đủ.

Cặp font gợi ý (có dấu tiếng Việt)

Tiêu đề: Bricolage Grotesque 800 hoặc Space Grotesk 700. Đoạn văn: Inter 400–500 (NN/g gợi ý ghép tiêu đề "chunky" với font thân trung tính như Roboto hoặc Inter). Nhãn nhỏ: JetBrains Mono hoặc IBM Plex Mono, viết hoa.

4. Ví dụ neo-brutalism trên website thật

NN/g nhắc tới nhiều ví dụ, trong đó có Figma, Gumroad, byooooob.com và cyanbanister.com. Dưới đây là hai trang trong danh sách đó, chụp ngày 04/11/2026; giao diện có thể đã đổi khi bạn đọc.

byooooob.com: chữ cỡ lớn, sticker viền đen, hình khối màu phẳng trên nền lưới. NN/g dùng trang này làm ví dụ cho viền dày, hình khối vui mắt. Ảnh chụp màn hình, ColorME cắt phần tiêu đề; bản quyền thuộc chủ trang.

cyanbanister.com: pixel art và cửa sổ kiểu hệ điều hành cũ, ví dụ NN/g dùng cho nhánh "hoài cổ". Ảnh chụp màn hình; bản quyền thuộc chủ trang.

Hai trang khác nhau nhưng cùng "bộ xương": viền đen rõ, màu phẳng, chữ to, và vẫn có thứ bậc rõ ràng.

5. So sánh: brutalism, neo-brutalism, minimalism, glassmorphism

Neo-brutalism hay bị nhầm với tối giản vì cũng phẳng và ít chi tiết. Điểm khác nằm ở viền, bóng và độ gắt của màu.

Nếu muốn đọc thêm về hai phong cách đứng hai đầu so sánh, xem bài Minimalism là gì và trang thuật ngữ Glassmorphism. Board dưới đây đổi đúng một thẻ từ tối giản mềm sang neo-brutalism, giữ nguyên nội dung.

Trước và sau trên cùng một thẻ: chỉ đổi viền, bóng, màu và font tiêu đề. "Xưởng in Mực Gừng" là thương hiệu mẫu giả định. Bảng: ColorME.

Thay đổi chỉ gồm: góc bo 22 px thành góc vuông, bóng mờ thành bóng đặc lệch 10 px, chữ xám thành chữ đen đậm với tiêu đề grotesque nặng, hình minh hoạ có viền và màu phẳng, nút bo tròn thành nút vuông có bóng màu.

6. Lấy bảng màu từ ảnh công trình bê tông bằng công cụ ColorME

Nếu làm poster hay bộ nhận diện gần với kiến trúc brutalism gốc, một bảng màu "bê tông" lấy từ ảnh công trình là điểm bắt đầu tốt. Ảnh Barbican ở phần 1 đã được đưa vào Tạo bảng màu từ ảnh của ColorME, chạy khi chưa đăng nhập ngày 04/11/2026. Mục câu hỏi thường gặp trên trang công cụ ghi: "Có. Công cụ miễn phí, không cần đăng nhập và không giới hạn số ảnh."

Kết quả thật của Tạo bảng màu từ ảnh với ảnh Barbican (chưa đăng nhập, 04/11/2026): 6 màu kèm mã HEX, CMYK và tỉ lệ; công cụ tự đặt tên bảng là "Nâu cát & xám đá".

Kết quả mặc định là 6 màu: #6F6452 (25%), #463B2D (22%), #16120A (17%), #C0AA8D (14%), #E7EAEE (12%) và #2B261C (11%). Nút chỉnh số màu cho chọn 4, 6, 8 hoặc 10 màu; có nút sao chép mã HEX và nút xuất bảng màu. Cách dùng bảng này cho một poster neo-brutalism:

1. Lấy #16120A làm màu mực cho viền và bóng thay cho đen tuyền.
2. Lấy #E7EAEE hoặc #C0AA8D làm nền giấy.
3. Thêm đúng một màu nhấn gắt, ví dụ vàng #FFE14A, cho tiêu đề hoặc nút.

Phần chưa thử: chưa đối chiếu mã màu với một phần mềm đo màu khác, và chưa thử các định dạng xuất ngoài PNG.

7. Áp dụng neo-brutalism vào component: nút, thẻ, form

Bộ component mẫu cho tiệm đĩa than giả định "Sóng Chậm": 5 trạng thái nút, một thẻ sản phẩm và một form có trạng thái lỗi. Tên và email trong ảnh là mẫu. Bảng: ColorME.

Nút bấm

Công thức cơ bản: nền màu nhấn, viền 3–4 px màu mực, bóng đặc lệch 4–6 px, góc vuông hoặc bo 4–8 px. NN/g lưu ý phần tử tương tác phải dễ nhận ra và có phản hồi rõ khi bấm, ví dụ gạch chân khi di chuột hoặc đổi màu nhẹ.

• Di chuột: dịch nút lên trên và sang trái 2–4 px, tăng bóng, nút như "nổi lên".
• Nhấn: dịch nút đúng bằng độ lệch của bóng và bỏ bóng, nút như "lún xuống".
• Focus bàn phím: thêm một vòng màu tách khỏi viền (ví dụ outline: 4px solid #2F5BFF; outline-offset: 6px), vì viền đen đã có sẵn ở mọi trạng thái.
• Vô hiệu: nền xám nhạt, chữ xám, viền nét đứt, không có bóng.

Thẻ (card)

Một thẻ chỉ cần một viền, một bóng; phần ảnh tách khỏi phần chữ bằng một đường kẻ cùng độ dày với viền. Dùng tag mono nhỏ cho thể loại, tiêu đề grotesque đậm, đoạn mô tả Inter. Theo NN/g, nên chừa đệm rộng (khoảng 24–32 px) để khối dày không làm rối.

Form

Ô nhập liệu viền dày rất dễ thấy. Trạng thái lỗi nên đổi màu viền, màu bóng và có dòng chữ giải thích, đừng chỉ đổi màu.

8. Neo-brutalism cho landing page

Hero landing page mẫu, bản desktop và điện thoại. Thương hiệu và tên miền "songcham.example" là giả định. Bảng: ColorME.

Khung sườn một hero neo-brutalism hay gặp:

• Thanh menu có đường kẻ dày phía dưới, nút chính màu nhấn bên phải.
• Tiêu đề rất lớn, 2–3 dòng, cỡ chữ gấp vài lần đoạn văn. NN/g lấy ví dụ tiêu đề gấp đôi chữ thân để giữ thứ bậc.
• Một nút chính nền đen chữ màu nhấn, cạnh đó là sticker tròn hoặc hình khối phẳng.
• Dải chữ chạy (marquee) màu đen ở cuối hero, liệt kê danh mục hoặc lợi ích.
• Bản điện thoại: dồn về một cột, giữ viền và bóng, giảm số hình trang trí, nút trải gần hết chiều ngang.

Nên chốt cấu trúc (wireframe) trước, rồi mới thêm viền và bóng như một "lớp da". Bài UI/UX là gì có giải thích rõ hơn về sự khác nhau giữa cấu trúc (UX) và lớp giao diện (UI).

9. Neo-brutalism cho poster và bài đăng mạng xã hội

Một sự kiện, hai ấn phẩm: poster tỉ lệ A3 và bài đăng 4:5. "Chợ zine Gác Mái" là sự kiện mẫu giả định. Bảng: ColorME.

Poster: chia khổ giấy thành vài ô bằng đường kẻ dày, cho tiêu đề chiếm hơn nửa chiều cao, thông tin ngày giờ đặt trong các ô riêng như một bảng. Một hai hình khối phẳng (tròn, vuông nghiêng) đủ tạo chuyển động; không cần ảnh.

Bài đăng 4:5 (1080×1350): một tiêu đề, một câu mô tả, một sticker số liệu và một thẻ hành động ở đáy. Viền đen quanh thẻ giúp bài nổi trên bảng tin vốn nhiều ảnh. Nếu làm cả bộ carousel, giữ cùng độ dày viền và độ lệch bóng ở mọi slide, chỉ đổi màu nền.

Muốn thêm chất hoài cổ, xem bài phong cách Y2K; muốn mềm và dễ thương hơn, xem kawaii là gì; còn tổng quan các "vibe" thị giác có ở bài aesthetic là gì.

10. Khả năng tiếp cận: tương phản và focus

Màu gắt không tự động có nghĩa là dễ đọc. NN/g nhấn mạnh màu đậm vẫn phải đạt chuẩn tương phản chữ, và cảnh báo các cặp như vàng với cyan. Chuẩn WCAG 2.2 của W3C đặt ba mốc liên quan:

• 1.4.3 Contrast (Minimum): chữ thường tối thiểu 4,5:1, chữ lớn tối thiểu 3:1.
• 1.4.11 Non-text Contrast: thành phần giao diện và hình đồ hoạ cần thiết tối thiểu 3:1 so với màu bên cạnh.
• 2.4.7 Focus Visible: giao diện dùng được bằng bàn phím phải có chỉ báo focus nhìn thấy được.

Tỉ lệ tương phản của bảng màu mẫu, tính theo công thức độ chói tương đối của WCAG 2.2. Bảng: ColorME.

Với bảng màu ở phần 3, quy tắc rút ra: trên vàng, hồng và xanh ngọc dùng chữ đen; trên xanh dương #2F5BFF dùng chữ trắng. Chữ đen trên xanh dương chỉ đạt 3,62:1, đủ cho chữ lớn nhưng không đủ cho chữ thường. Viền đen #121212 trên các nền sáng này vượt xa mức 3:1 của 1.4.11, nên viền dày thật ra là một lợi thế.

Về focus: viền đen đã có sẵn ở mọi nút, nên đổi màu viền thường không đủ nổi. Thêm vòng outline màu khác có outline-offset, rồi thử bằng phím Tab.

11. Khi nào không nên dùng neo-brutalism

• Sản phẩm cần cảm giác tin cậy, yên tâm như ngân hàng, y tế, bảo hiểm: màu gắt và bóng cứng dễ tạo cảm giác "đùa".
• Thương hiệu sang trọng, cao cấp: phong cách tối giản, nhiều khoảng trắng thường hợp hơn.
• Màn hình dày dữ liệu (bảng điều khiển, bảng tính): viền dày ở mọi ô làm trang nặng và khó quét.
• Khi đội không có thời gian kiểm tra tương phản và trạng thái: NN/g cảnh báo neo-brutalism thiếu cân bằng dễ gây quá tải và khó dùng.
• Chỉ vì thấy chán: bài antidesign của NN/g khuyên tự hỏi đổi phong cách là vì người dùng hay vì designer thấy nhàm.

12. Nên và không nên

Muốn luyện cách đặt viền, bóng, màu và chữ thành một hệ thống giao diện hoàn chỉnh (từ wireframe đến bản UI), bạn có thể tham khảo khoá học thiết kế UI của ColorME.

Câu hỏi thường gặp về brutalism

Brutalism là gì?

Brutalism (chủ nghĩa thô mộc) là trường phái kiến trúc ra đời ở Anh thập niên 1950, để lộ bê tông, gạch và kết cấu thay vì trang trí. Trong thiết kế số, nó chỉ kiểu website thô như HTML thời đầu; neo-brutalism là phiên bản UI nhiều màu, viền đen dày, bóng cứng.

Vì sao gọi là "brutalism"?

Theo Wikipedia, cụm "new brutalism" đến từ chữ tiếng Thụy Điển "nybrutalism", được Alison và Peter Smithson dùng, rồi Reyner Banham phổ biến trong bài luận năm 1955 và gắn với cụm tiếng Pháp "béton brut" nghĩa là "bê tông thô". "Brut" ở đây là "thô, để nguyên", không phải "tàn bạo".

Neo-brutalism khác brutalism thế nào?

Theo NN/g, brutalist web design trông thô, thường chỉ có HTML cơ bản và ít màu. Neo-brutalism thêm chất đồ hoạ thập niên 90 nên nhiều màu và có trật tự hơn: viền dày, bóng đặc, màu phẳng, chữ to đậm.

Neubrutalism và neo-brutalism có giống nhau không?

Có. NN/g ghi rõ neobrutalism còn được viết là neubrutalism; cả hai cách viết cùng chỉ một phong cách UI.

Làm nút neo-brutalism bằng CSS thế nào?

Công thức cơ bản là nền màu nhấn, viền 3–4 px màu mực, bóng đặc không mờ, ví dụ border: 3px solid #121212; box-shadow: 4px 4px 0 #121212. Khi focus, thêm một vòng outline màu khác có khoảng cách.

Neo-brutalism có tốt cho khả năng tiếp cận không?

Viền đen dày giúp thành phần giao diện dễ thấy, nhưng màu gắt dễ làm hỏng tương phản chữ. Kiểm tra từng cặp chữ và nền theo mức 4,5:1 (WCAG 1.4.3) và luôn có chỉ báo focus.