Neobrutalisme vs brutalisme: 7 perbedaan utama (dengan contoh)

Ini percakapan yang sudah terjadi lebih sering daripada yang bisa saya hitung:

Klien: «Kami ingin situs brutalis.»

Saya: «Bagus. Lalu, apa arti brutalis menurut Anda?»

Klien: «Anda tahu, garis tepi tebal, warna cerah, nuansa yang berani itu.»

Saya: «Itu neobrutalisme, bukan brutalisme.»

Klien: «…memang ada bedanya?»

Ya. Perbedaannya besar. Dan jika Anda hendak mendesain sesuatu yang «brutal» pada 2026, Anda perlu tahu persis apa yang sedang Anda bangun.

Brutalisme dan neobrutalisme berbagi DNA, tetapi keduanya bukan saudara kandung: mereka sepupu jauh yang menempuh arah yang sepenuhnya berbeda. Yang satu lahir dari arsitektur pascaperang. Yang lain dari para desainer web pemberontak yang muak dengan sudut membulat.

Mari kita bedah 7 perbedaan utama yang memisahkan kedua gerakan desain yang berani ini.

Sedikit pelajaran sejarah (percayalah, ini relevan)

Sebelum menyelam ke perbedaannya, mari kita tata dulu latarnya.

Brutalisme: arsitektur era 1950-an bertemu web

Brutalisme lahir pada 1950-an sebagai gerakan arsitektur. Namanya berasal dari béton brut, «beton mentah» dalam bahasa Prancis, yang menggambarkan dengan sempurna wujud bangunan brutalis.

Bayangkan struktur beton yang masif, material yang terpapar, bentuk geometris, dan nol dekorasi. Bangunan-bangunan itu tidak berusaha tampak indah. Mereka fungsional, jujur, dan mentah tanpa sungkan.

Contoh terkenal:

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

Melompat ke awal 2000-an: para desainer web mulai meminjam prinsip brutalis, HTML mentah, CSS minimal, tata letak yang sengaja dibuat «jelek». Mereka menolak situs yang berlebihan dan sarat Flash pada masa itu.

Brutalisme web menjadi antidesain yang disengaja. Fungsi mendahului bentuk. Konten mendahului pemolesan. Kejujuran mendahului kilau.

Neobrutalisme: pemberontakan yang lahir di ranah digital

Neobrutalisme muncul sekitar 2015-2018 sebagai jawaban atas desain web yang kian seragam. Jika brutalisme mengurangi, neobrutalisme mengambil jalan sebaliknya: mendorong semuanya ke tingkat maksimal.

Garis tepi hitam tebal. Bayangan yang tegas. Warna berkontras tinggi. Grid asimetris. Ia mempertahankan keberanian brutalisme, tetapi menambahkan permainan, warna, dan keputusan desain yang disengaja.

Neobrutalisme bukan antidesain: ia desain yang berani. Ia menolak estetika lembut, membulat, dan serba pastel yang mendominasi era 2010-an.

Merek seperti Gumroad, Balenciaga, dan Spotify mengadopsinya. Para desainer di Dribbble dan Behance menjadikannya tren. Dan kini? Ia salah satu bahasa desain paling mudah dikenali yang bisa Anda gunakan.

7 perbedaan utama

Setelah menuntaskan sejarahnya, mari kita lihat apa yang benar-benar memisahkan kedua gaya ini.

1. Tujuan dan filosofi

Brutalisme: fungsi di atas segalanya

Desain brutalis berakar pada minimalisme dan kejujuran. Filosofinya sederhana: tunjukkan strukturnya. Jangan sembunyikan rangkanya. Jangan menambahkan dekorasi demi dekorasi semata.

Dalam desain web, ini berarti:

• CSS minimal
• Struktur HTML yang terpapar
• Tipografi dasar
• Tanpa animasi atau hiasan
• Konten adalah raja

Contoh: blog brutalis kemungkinan memakai font sistem bawaan, tanpa warna selain hitam dan putih, serta daftar <ul> sederhana untuk navigasi. Situsnya mudah dibaca, fungsional, dan tanpa sedikit pun upaya untuk tampak cantik.

Neobrutalisme: ekspresi berani, tetapi dengan maksud

Neobrutalisme mempertahankan kesan mentah, tetapi menambahkan kepribadian. Ini bukan antidesain: ini desain yang percaya diri. Filosofinya: menonjol, membekas di ingatan, tanpa pernah mengorbankan kegunaan.

Dalam desain web, ini berarti:

• Palet warna yang dipertimbangkan (hitam/putih + aksen cerah)
• Tipografi sebagai pernyataan (font tebal, geometris)
• Hierarki visual lewat kontras dan ukuran
• Mikrointeraksi yang memperkaya UX
• Desain yang terasa «dibuat dengan tangan»

Contoh: halaman landing neobrutalis memakai Archivo Black untuk judul, garis tepi tebal 4px pada tiap elemen, bayangan tegas yang bergeser 6px, dan tombol CTA kuning cerah. Berani, tetapi setiap pilihan disengaja.

Perbedaannya: Brutalisme bertanya: «Apakah kita benar-benar membutuhkan ini?» Neobrutalisme bertanya: «Bagaimana caranya membuat ini mustahil diabaikan?»

2. Penggunaan warna

Brutalisme: monokrom, atau tidak sama sekali

Desain brutalis berpegang pada hitam, putih, dan gradasi abu-abu. Kalaupun warna muncul, biasanya tak sengaja (tautan biru) atau murni fungsional (merah untuk galat).

Alasannya? Warna adalah dekorasi, dan brutalisme menolak dekorasi.

Contoh palet:

Salin:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

Sekian. Tiga warna. Empat, kalau Anda sedang merasa nekat.

Neobrutalisme: blok warna berkontras tinggi

Neobrutalisme MENYUKAI warna, tetapi bukan pastel yang lembut. Kita bicara tentang rona yang berani, pekat, tanpa sungkan. Hitam dan putih menjadi dasar, lalu Anda menambahkan satu atau dua warna aksen yang mencolok.

Palet neobrutalis yang populer:

• Hitam + putih + kuning neon (#FFDB33)
• Hitam + putih + merah muda menyala (#FF006E)
• Hitam + putih + biru siber (#00F0FF)

Contoh palet:

Salin:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

Warna bukan sekadar aksen: ia melayani penekanan, hierarki, dan energi.

Contoh: Gumroad memakai CTA kuning cerah di atas latar hitam. Feastables bermain dengan hijau dan ungu neon. Ini bukan kebetulan: ini adalah inti identitas merek.

Perbedaannya: Brutalisme memakai warna dengan sangat hemat, atau tidak sama sekali. Neobrutalisme memakainya secara strategis dan berani.

3. Tipografi

Brutalisme: font sistem dan nilai bawaan

Desain brutalis kerap memakai apa pun yang datang bersama peramban:

• Arial
• Times New Roman
• Tumpukan font sistem

Mengapa? Font kustom dipandang sebagai dekorasi yang tak perlu. Teks harus mudah dibaca, bukan indah.

Contoh:

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

Judul mungkin sedikit lebih besar, tetapi tidak ada hierarki lewat ketebalan atau gaya. Ini teks polos, dan itu memang disengaja.

Neobrutalisme: font display yang tebal dan geometris

Neobrutalisme memperlakukan tipografi sebagai elemen utama. Judulnya BESAR, tebal, dan sering bertumpu pada font geometris yang tegas seperti:

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

Contoh:

Salinh1 {
  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;
}

Tipografi membangun hierarki visual. Teks isi tetap mudah dibaca, tetapi judulnya menuntut perhatian.

Contoh nyata: tengok situs Balenciaga. Tipografinya masif, tebal, mustahil terlewat. Itulah neobrutalisme.

Perbedaannya: Brutalisme memakai font bawaan sebagai anti-dekorasi. Neobrutalisme menjadikan tipografi tebal sebagai elemen desain yang utuh.

4. Tata letak dan struktur

Brutalisme: grid terpapar, HTML mentah

Tata letak brutalis merangkul alur bawaan HTML. Anda akan melihat:

• Tata letak satu kolom
• Daftar tanpa gaya
• Tabel yang terlihat seperti tabel
• Tanpa grid canggih atau trik flexbox

Tata letaknya fungsional, sering meniru web era awal (bayangkan GeoCities atau Craigslist).

Contoh: portofolio brutalis akan menampilkan proyek dalam <ul> sederhana berikut tanggal. Tanpa kartu, tanpa efek saat kursor melintas, tanpa jarak selain nilai bawaan peramban.

Salin<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

Sederhana. Mentah. Tanpa CSS, kecuali mungkin sedikit penyesuaian margin.

Neobrutalisme: grid asimetris dan penumpukan

Tata letak neobrutalis mematahkan grid, dengan sengaja. Anda akan melihat:

• Penempatan elemen yang asimetris
• Bagian yang saling bertumpang tindih
• Elemen yang «mengambang» atau tergeser
• Pemakaian intensif CSS Grid dan Flexbox untuk komposisi kreatif

Semuanya tetap fungsional, tetapi tata letaknya membangkitkan minat visual.

Contoh: bagian hero neobrutalis bisa memuat:

• Judul besar yang tergeser ke kiri
• Gambar dengan garis tepi tebal yang menumpang judul
• Tombol CTA yang ditempatkan secara asimetris
• Bayangan tegas yang menciptakan kedalaman

Salin<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>

Perbedaannya: Brutalisme menampilkan struktur apa adanya. Neobrutalisme menata struktur demi dampak.

5. Garis tepi dan bayangan

Brutalisme: nihil atau minimal

Desain brutalis jarang memakai garis tepi atau bayangan. Kalaupun muncul, keduanya samar: garis 1px untuk memisahkan bagian, paling banter.

Alasannya? Bayangan dan garis tepi bersifat dekoratif. Keduanya menambah bobot visual yang dihindari brutalisme.

Contoh:

Salin.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

Kira-kira segitulah batas dekorasi yang diizinkan brutalisme.

Neobrutalisme: garis tepi tebal, bayangan tegas

Neobrutalisme SEPENUHNYA soal garis tepi dan bayangan. Garis tepi tebal (3-6px) dan bayangan tegas adalah ciri khas visualnya.

Setiap kartu, tombol, input, dan gambar memperoleh:

• Garis tepi hitam tebal (biasanya 3-4px)
• Bayangan tegas yang tergeser (tanpa blur, hanya blok warna solid yang bergeser)

Contoh:

Salin.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;
}

Efeknya tak mungkin keliru: elemen tampak «dicap» ke atas halaman.

Contoh nyata: semua komponen Neobrutalism memakai gaya bayangan ini. Kartu Gumroad. Ubin produk Feastables. Inilah kartu nama neobrutalisme.

Perbedaannya: Brutalisme menghindari kedalaman visual. Neobrutalisme merangkulnya lewat bayangan tegas dan garis tepi tebal.

6. Interaktivitas dan animasi

Brutalisme: statis sesuai prinsip

Situs brutalis kerap bersifat statis. Efek saat kursor melintas? Minim, atau tidak ada. Animasi? Buat apa. Desainnya soal konten, bukan interaksi.

Kalaupun ada elemen interaktif, perilakunya persis seperti HTML bawaan:

• Tautan berwarna biru dan bergaris bawah
• Tombol tampak seperti elemen <button>
• Formulir berupa kolom <input> tanpa gaya

Contoh:

Salin<a href="/about">About</a>

Tautan itu tetap biru. Bergaris bawah saat kursor melintas. Hanya itu.

Neobrutalisme: mikrointeraksi yang halus tetapi disengaja

Neobrutalisme memakai mikrointeraksi untuk memperkaya UX tanpa berlebihan. Misalnya:

• Tombol yang sedikit bergeser saat kursor melintas (seolah bayangannya bergerak)
• Tautan yang berganti warna atau memperoleh garis bawah tebal
• Kartu yang membesar atau terangkat saat berinteraksi
• Transisi halaman yang mulus

Animasinya cepat (100-300ms) dan disengaja, tidak pernah mengganggu.

Contoh:

Salin// 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>

Tombolnya «tertekan» saat diklik, memberi umpan balik taktil. Menyenangkan, tetapi tanpa berlebihan.

Perbedaannya: Brutalisme statis dan mentah. Neobrutalisme menambahkan interaksi menyenangkan yang memperkuat kegunaan.

7. Tujuan estetika

Brutalisme: anti-estetika

Brutalisme menolak keindahan tradisional. Ia tidak berusaha tampak bagus dalam pengertian konvensional: ia berusaha jujur, fungsional, dan terkadang menantang.

Tujuan estetikanya adalah menanggalkan segala kepura-puraan untuk menampilkan struktur mentah di baliknya. Jika pengguna merasa itu jelek, tidak apa-apa, mungkin justru itulah intinya.

Contoh:

• Craigslist (brutalis tanpa sengaja)
• The Outline (jurnalisme brutalis yang disengaja)
• Desain ulang awal Bloomberg (konten dulu, nol dekorasi)

Neobrutalisme: estetika yang berani

Neobrutalisme ingin diperhatikan. Ia berani, percaya diri, dan membekas. Tujuan estetikanya adalah menonjol sambil tetap fungsional.

Ia bukan anti-keindahan: ia bentuk keindahan yang lain. Mentah, geometris, menyenangkan, dan tanpa sungkan.

Contoh:

• Halaman produk Gumroad (berani, langsung, penuh warna)
• Situs Feastables (menyenangkan, energetik, berkontras tinggi)
• Halaman kampanye Spotify (eksperimental, asimetris, semarak)

Perbedaannya: Brutalisme berkata: «Beginilah adanya, terima atau tinggalkan.» Neobrutalisme berkata: «Lihat ini: saya berani bertaruh Anda belum pernah melihat yang seperti ini.»

Perbandingan berdampingan

Mari kita tuangkan semuanya ke dalam tabel visual:

Contoh nyata yang diperbandingkan

Mari kita tengok situs sungguhan untuk melihat perbedaan ini dalam praktik.

Contoh brutalis: The Outline

Apa yang membuatnya brutalis:

• Teks hitam di atas latar putih, nol warna
• Font sistem di mana-mana
• CSS minimal, tata letak yang mengutamakan konten
• Tanpa garis tepi, tanpa bayangan, tanpa dekorasi
• Statis, fungsional, mentah

Pilihan desain:

• Tata letak artikel satu kolom
• Judul besar, tetapi tanpa penggayaan
• Gambar mematahkan grid secara alami
• Navigasi berupa daftar sederhana

Situsnya mudah dibaca, fungsional, dan tanpa sedikit pun upaya mengikuti tren. Itulah brutalisme.

Contoh neobrutalis: Gumroad

Apa yang membuatnya neobrutalis:

• Palet hitam, putih, dan kuning cerah
• Tipografi tebal dan berbobot
• Garis tepi tebal pada tiap kartu dan tombol
• Bayangan tegas yang menciptakan kedalaman
• Tata letak asimetris dengan jarak yang dipertimbangkan

Pilihan desain:

• Bagian hero dengan judul raksasa dan CTA kuning
• Kartu produk dengan garis tepi 4px dan bayangan 6px
• Tombol yang bergeser saat kursor melintas
• Kontras tinggi, mustahil diabaikan

Berani, menyenangkan, dan dirancang untuk menonjol. Itulah neobrutalisme.

Kapan memakai brutalisme dan kapan neobrutalisme

Jadi, mana yang harus Anda pilih? Tergantung tujuan Anda.

Pakai brutalisme ketika:

1. Konten adalah segalanya

Blog, situs berita, dokumentasi: jika konten adalah seluruh alasannya, brutalisme menjaga fokus tetap di sana.

2. Anda menginginkan aksesibilitas maksimal

HTML bawaan sangat aksesibel. CSS minimal pada brutalisme berarti lebih sedikit hal yang bisa rusak bagi pembaca layar.

3. Anda menyampaikan sikap

Brutalisme itu menantang. Jika merek Anda antikemapanan, DIY, atau sengaja kasar, brutalisme cocok.

4. Performa sangat penting

CSS minimal = waktu muat cepat. Situs brutalis kerap berbobot di bawah 100KB.

Pakai neobrutalisme ketika:

1. Anda ingin menonjol

Startup, agensi, portofolio kreatif: jika Anda perlu membekas, neobrutalisme memenuhinya.

2. Merek Anda punya kepribadian

Neobrutalisme cocok untuk merek yang berani, menyenangkan, percaya diri, atau pemberontak.

3. Anda sedang membangun produk

Dasbor SaaS, halaman landing, e-commerce: neobrutalisme menciptakan hierarki visual sambil tetap unik.

4. Anda menginginkan estetika modern

Neobrutalisme terasa kekinian. Jika ia jadi tren pada 2026, tentu ada alasannya.

Bisakah keduanya dicampur?

Tentu. Sebagian desain terbaik meminjam dari keduanya.

Contoh pendekatan hibrida:

• Adopsi filosofi brutalis yang mengutamakan konten
• Tambahkan tipografi dan warna berani dari neobrutalisme
• Jaga tata letak tetap sederhana (brutalis) tetapi tambahkan garis tepi/bayangan yang strategis (neobrutalis)
• Tetap hemat pada animasi (brutalis) tetapi tambahkan status hover (neobrutalis)

Kuncinya adalah niat. Pahami MENGAPA Anda memilih tiap elemen, bukan sekadar menyalin tren.

Kesalahan umum

Kesalahan No. 1: menyebut semuanya «brutalis»

Jika desain Anda punya garis tepi tebal dan warna cerah, itu neobrutalis. Brutalisme lebih mentah dan tak seberapa didekorasi.

Kesalahan No. 2: membuat neobrutalisme «jelek dengan sengaja»

Neobrutalisme itu berani, bukan rusak. Ia tetap harus punya hierarki, keterbacaan, dan kegunaan.

Kesalahan No. 3: berlebihan dengan brutalisme

Brutalisme sejati bisa terasa kasar. Jika pengguna tak bisa menavigasi situs Anda atau membaca konten Anda, Anda sudah kelewatan.

Kesalahan No. 4: setengah hati dengan neobrutalisme

Menambahkan satu garis tepi lalu menyebutnya neobrutalisme tidak akan berhasil. Berkomitmenlah pada estetikanya: garis tepi tebal, warna cerah, bayangan tegas.

Renungan akhir

Brutalisme dan neobrutalisme tidaklah sama. Keduanya berbagi semangat pemberontak, tetapi eksekusinya berjauhan bagai dua kutub.

Brutalisme menanggalkan segalanya. Ia mentah, jujur, dan fungsional sampai batas ekstrem. Ia menolak dekorasi sepenuhnya.

Neobrutalisme mendorong segalanya ke maksimal. Ia berani, penuh warna, dan percaya diri. Ia merangkul dekorasi, sepanjang itu disengaja.

Keduanya punya tempatnya masing-masing. Brutalisme sempurna untuk proyek yang berpusat pada konten dan menuntut kejelasan serta performa. Neobrutalisme ideal untuk merek yang perlu menonjol dan meninggalkan kesan.

Hal terburuk yang bisa Anda lakukan? Mengacaukan keduanya atau berkomitmen setengah hati pada salah satunya. Jika memilih brutalis, kejarlah kesan mentah. Jika memilih neobrutalis, kejarlah keberanian.

Kini Anda tahu perbedaannya. Gunakan dengan bijak. 🚀

Ingin membangun antarmuka neobrutalis? Tengok Neobrutalism: pustaka UI lengkap yang dibangun untuk desain yang berani dan membekas. Komponen, blok, dan template yang merangkul estetika neobrutalis tanpa mengorbankan kegunaan.