Brutalism Web Design 2026: Untouched HTML và unconventional colors - xu hướng chống "sameness" đang hot tại Việt Nam

5 tháng trước · 10 phút đọc

Tại sao web năm 2026 trông giống nhau đến vậy?

Mở 10 landing page bất kỳ trên Behance hoặc Dribbble. Đếm xem bao nhiêu cái có: hero section gradient pastel, card bo góc 12px, font Inter hoặc Poppins, màu chủ đạo là xanh dương hoặc tím lavender. Kết quả? Gần như tất cả.

Đây không phải trùng hợp. Đây là hậu quả của "AI-gen sameness" - hiện tượng khi 23.6% of website builder market share in 2024 (up from 11% in 2022) (Custom Market Insights - Global AI-Powered Website Builder Market Size 2026-2035) website được tạo ra với sự hỗ trợ của AI tools đang hội tụ về cùng một aesthetic. Các công cụ như Midjourney, Figma AI, hay các UI kit template đang "học" từ cùng một tập dữ liệu, ra cùng một output.

Brutalism web design xuất hiện như một phản ứng chủ động. Không phải vì nó xấu - mà vì nó khác. Và trong thế giới mà mọi thứ trông giống nhau, "khác" chính là lợi thế cạnh tranh.

343408 "Sameness" từ AI tools đang làm web mất đi cá tính - brutalism là phản ứng tự nhiên

Với cộng đồng creative Việt Nam - từ designer freelance đến indie studio - brutalism đang mở ra một hướng đi không cần budget lớn, không cần framework phức tạp, nhưng vẫn tạo được dấu ấn.

Brutalism web thực ra là gì - và không phải là gì

Nhiều người nghe "brutalism" là nghĩ ngay đến kiến trúc bê tông thô, hoặc nhầm với "dark design" hay "gothic UI". Không phải vậy.

Brutalism web design có các đặc trưng:

Default browser styles: dùng hoặc ít override các style mặc định của trình duyệt (link màu xanh có gạch chân, form input không bo góc, heading <h1> to mặc định)
Exposed structure: không giấu skeleton HTML, layout lộ rõ cấu trúc thật
Intentional friction: bố cục "sai" về nguyên tắc design truyền thống nhưng có chủ đích
Unconventional color palettes: màu sắc mà không ai dám dùng - chartreuse, hot pink, electric lime, neon orange
Typography làm việc nặng: font size cực lớn, tracking rộng, line-height bất thường

343409 Default browser styles không cần xấu hổ - chúng là tuyên ngôn thiết kế khi dùng có chủ đích

Brutalism không phải là lười biếng không style. Nó đòi hỏi khá nhiều quyết định có chủ ý. Nhìn vào site của The New York Times’ opinion section (aaks.ca) hay các indie studio trên Are.na - phía sau sự "thô" đó là một hệ thống visual rất nhất quán.

Một cách đơn giản để hiểu: brutalism là khi bạn thấy code và design là một, không có lớp abstraction nào ngăn cách.

Unconventional color palettes: palette nào phá được sameness

Màu sắc là vũ khí mạnh nhất trong brutalism. Nhưng "unconventional" không có nghĩa là random.

Mình chia thành 3 nhóm palette đang được dùng hiệu quả nhất:

Acid / Neon:

:root {
  --acid-green: #CCFF00;   /* chartreuse - màu không ai dám dùng */
  --hot-pink:   #FF2D6B;
  --off-black:  #0D0D0D;
  --paper:      #F5F0E8;   /* không phải trắng thuần */
}

Anti-pastel (màu "sai" tonal):

:root {
  --wrong-blue:   #2B4EFF;  /* xanh quá bão hòa */
  --wrong-yellow: #FFE600;  /* vàng cảnh báo */
  --concrete:     #B8B8B8;
  --ink:          #1A1A1A;
}

Vintage terminal:

:root {
  --terminal-green: #00FF41;
  --amber:          #FFB000;
  --crt-black:      #0A0A0A;
  --phosphor:       #33FF33;
}

343410 Acid green + hot pink: combo không ai nghĩ tới nhưng khó quên

Lý do các palette này "phá" được sameness: chúng không có trong training data phổ biến của AI design tools. Khi bạn hỏi AI "generate một color palette đẹp", nó sẽ không bao giờ ra chartreuse + hot pink. Chính vì vậy, đây là vùng đất mà con người có lợi thế.

Với thị trường Việt Nam, palette "vintage terminal" đặc biệt phù hợp cho creative agency hoặc tech studio muốn truyền tải cảm giác "underground" và authentic.

Default browser styles + intentional override: code thực tế

Phần này mình sẽ build một layout brutalist hoàn chỉnh bằng HTML/CSS thuần - không React, không Tailwind, không gì cả.

Triết lý: override ít nhất có thể, chọn lọc những gì muốn thay đổi.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>STUDIO XYZ — Creative Agency</title>
  <style>
    /* Reset tối thiểu - giữ lại nhiều default nhất có thể */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    :root {
      --acid:   #CCFF00;
      --hot:    #FF2D6B;
      --ink:    #0D0D0D;
      --paper:  #F5F0E8;
      --border: 3px solid var(--ink);
    }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: monospace;         /* font mặc định browser, không import */
      font-size: 18px;
      line-height: 1.4;
      margin: 0;
      padding: 1rem;
    }

    /* Navigation thô - không navbar đẹp */
    nav {
      border-bottom: var(--border);
      padding: 1rem 0;
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    /* Giữ default link style (màu xanh + gạch chân) nhưng override màu */
    a {
      color: var(--hot);             /* override màu, GIỮ gạch chân */
      font-weight: bold;
      font-size: 1.1rem;
    }

    a:visited {
      color: var(--ink);             /* visited state rõ ràng */
    }

    /* Hero: typography làm việc chính */
    .hero {
      border: var(--border);
      padding: 2rem;
      margin: 2rem 0;
      background: var(--acid);       /* acid green block */
    }

    .hero h1 {
      font-size: clamp(3rem, 10vw, 8rem); /* fluid typography */
      line-height: 0.9;              /* line-height "sai" nhưng có chủ đích */
      margin: 0;
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 60ch;
      border-top: var(--border);
      margin-top: 1.5rem;
      padding-top: 1rem;
    }

    /* Grid bất đối xứng */
    .grid {
      display: grid;
      grid-template-columns: 2fr 1fr; /* không 50/50 */
      gap: 0;                         /* không gap */
      border: var(--border);
    }

    .grid-item {
      border: var(--border);
      padding: 1.5rem;
    }

    .grid-item--accent {
      background: var(--hot);
      color: var(--paper);
    }

    /* Form mặc định browser nhưng thêm border thô */
    input, textarea, button {
      font-family: monospace;
      font-size: 1rem;
      border: var(--border);
      padding: 0.5rem;
      background: transparent;       /* input trong suốt */
      width: 100%;
      margin-bottom: 1rem;
    }

    button {
      background: var(--ink);
      color: var(--acid);
      cursor: pointer;
      font-weight: bold;
      text-transform: uppercase;
      width: auto;
    }

    button:hover {
      background: var(--acid);
      color: var(--ink);             /* hover flip màu thô */
    }
  </style>
</head>
<body>

  <nav>
    <a href="#">STUDIO XYZ</a>
    <a href="#work">Dự án</a>
    <a href="#about">Về mình</a>
    <a href="#contact">Liên hệ</a>
  </nav>

  <section class="hero">
    <h1>Chúng mình<br>làm web<br>khác.</h1>
    <p>
      Không template. Không AI gen. Không giống ai.<br>
      Creative agency Hà Nội — làm việc từ 2019.
    </p>
  </section>

  <div class="grid">
    <div class="grid-item">
      <h2>Dự án gần nhất</h2>
      <p>Brand identity cho một nhà rang cà phê độc lập ở Đà Lạt.
         Visual language lấy cảm hứng từ bao bì giấy kraft thập niên 80.</p>
      <a href="#">Xem case study →</a>
    </div>
    <div class="grid-item grid-item--accent">
      <h3>07</h3>
      <p>Năm hoạt động</p>
    </div>
  </div>

</body>
</html>

343411 Kết quả render: thô nhưng có cá tính - đây là điểm mấu chốt của brutalism

Một vài điểm đáng chú ý trong đoạn code trên:

font-family: monospace dùng font hệ thống, không tải gì thêm - load time gần như 0
line-height: 0.9 trên heading là quyết định "sai" có chủ đích - tạo cảm giác chật, mạnh
Border 3px solid nhất quán xuyên suốt thay vì shadow hay bo góc
Form input background: transparent giữ nguyên appearance của browser, không cố style đẹp

Nếu bạn muốn nắm vững HTML/CSS trước khi đi sâu vào hướng này, khóa HTML CSS từ Zero đến Hero tại F8 cover chi tiết cách browser render các element mặc định - hiểu được phần đó sẽ giúp bạn biết cái gì nên giữ, cái gì nên override.

Áp dụng cho site cá nhân và creative agency Việt Nam

Brutalism không phải trend toàn cầu rồi Việt Nam mới theo. Dữ liệu từ các design community quốc tế cho thấy các creative studio độc lập tại Đông Nam Á đang là một trong những nhóm adopt nhanh nhất - một phần vì chi phí thấp, phần khác vì nó phù hợp với "underdog aesthetic" mà nhiều creative trẻ muốn thể hiện.

Brutalism phù hợp cho:

Portfolio cá nhân của developer/designer muốn thể hiện kỹ năng HTML/CSS thuần thay vì clone template. Khi recruiter mở link portfolio và thấy một trang khác hoàn toàn với 99% còn lại - đó là điểm cộng.

Creative agency nhỏ (2-10 người) tại Hà Nội, TP.HCM muốn differentiate khỏi các agency dùng template WordPress hay Wix. Brutalism nói lên "chúng tôi tự làm mọi thứ từ đầu."

Zine, blog cá nhân, newsletter site - nơi mà content là vua và visual chỉ cần phục vụ content, không cần át đi.

343412 Site cá nhân brutalist nói được điều mà một template đẹp không bao giờ nói được

Một số điểm cần cân nhắc:

Brutalism không phù hợp cho e-commerce hoặc SaaS product hướng đến mass market - friction trong UX sẽ hurt conversion rate. Nó cũng đòi hỏi copywriting tốt, vì khi không có visual đẹp che đỡ, text phải tự đứng.

Mình nghĩ 2026 là thời điểm tốt để thử hướng này tại thị trường Việt Nam - trước khi nó mainstream và lại trở thành... sameness.

Trade-off thật sự và khi nào nên dừng lại

Mình sẽ thẳng thắn: brutalism có trade-off rõ ràng và không phải ai cũng nên đi theo hướng này.

Accessibility là vấn đề số một. Default browser styles thực ra khá accessible - link có gạch chân giúp người dùng bị mù màu nhận biết, contrast cao giúp người khiếm thị. Nhưng khi bạn bắt đầu dùng hot pink trên nền chartreuse, WCAG contrast ratio sẽ fail. Test tại WebAIM Contrast Checker trước khi ship.

Performance thì tốt. Không font Google, không framework, không image hero nặng. Một trang brutalist đơn giản có thể đạt Lighthouse score 100/100 một cách tự nhiên - đây là điểm cộng thật sự.

Maintainability cần chú ý. CSS custom properties (variables) là bắt buộc nếu bạn muốn maintain lâu dài. Không dùng variable thì đổi màu palette sẽ là cực hình.

343413 Lighthouse 100 không phải mơ - HTML thuần không load gì thừa

Khi nào nên dừng?

Khi client có brand guideline cụ thể. Khi target audience là người dùng không tech-savvy và friction trong UX sẽ gây confuse. Khi bạn chỉ đang "theo trend" mà không có reason thực sự - người dùng sẽ cảm nhận được sự không nhất quán ngay.

Brutalism hiệu quả nhất khi design decision và content decision đến từ cùng một người. Nếu có sự phân tách giữa designer và copywriter, rất dễ bị lạc hướng.

Giờ bạn đã có đủ context để bắt đầu. Bước tiếp:

Fork đoạn HTML mình share ở trên, chạy trực tiếp trong browser
Chọn 1 trong 3 palette, thay thế vào :root
Build 1 trang portfolio với 3 section: hero, work, contact

Gặp vướng mắc hoặc muốn share kết quả, drop comment bên dưới.