Many years have passed since the launch of the Material Design system created by Google to set new standards for web design. It defined every aspect of a user-centered, clear, and simple design both in apps and websites, leading to a modern minimal style. This approach has dominated web design trends for quite a long time, and many claim that it has started to become boring and overused. The need to find new alternatives led to neumorphism, glassmorphism, and skeuomorphism, which tried to break out but didn’t become real trends.

Table of Contents:

  1. What is brutalist design?
  2. What is (neu)brutalism in web design?
  3. What are the main characteristics of neubrutalism?
  4. Examples to neubrutalism in website design

As Y2K mania has taken over pop culture, its influence started to show in web design aesthetics as well. The design community still has mixed feelings about those messy web graphics, sharp contrasts, and hard-to-implement designs, but this new wave has undoubtedly brought something new and exciting to the table. Namely, neubrutalism. This style seems to deliberately violate all the safe and clean layout rules and standards of modern minimal web design. Read on to dive deeper into the origins of this new trend and learn more about its characteristics.

What is brutalist design?

View of Marcel Breuer’s Pirelli building as an example of brutalist design
Marcel Breuer’s Pirelli building, Connecticut, CC BY-SA 3.0, via Wikimedia Commons

Brutalism has its roots in the 1950’s architectural style, which prioritizes function over form. It uses massive structures and showcases the bare building materials instead of any decorative design. Brutalist buildings are commonly known to be unpainted and made of concrete and steel elements.

Its name comes from the French term béton brut, which literally means “raw concrete,” and it was used mainly for institutional buildings.

What is (neu)brutalism in web design?

Examples of various neubrutalism websites from

Neubrutalism in web design is a new system of design thought. It keeps its extremely simplistic approach by using the raw building blocks of the web, relying more on HTML instead of CSS and JavaScript. It operates on the principles of strong impression and pure functionality, lacking any concern for comfort and completely ignoring traditional design layouts. Its name is an unofficial term to the design style characterized by high contrasts, powerful colors, huge fonts, and strongly defined shapes. Neubrutalism is considered a true visual anarchy compared to minimalist design.

An early version of brutalist website design existed back in the 90’s, inspired by poster design trends of that era. Neubrutalism, however, merges this regular brutalism with modern illustration, animation effects, and typography.

Brutalism in website design seems to have influence on web engineering as well, leading to lightweight websites compatible across all devices. These websites tend to have minimal styling and reject tools such as TypeScript or SASS. Due to less CPU usage, neubrutalism can be considered quite an environmentally friendly design trend.

What are the main characteristics of neubrutalism?

We might say that there are two types of designers: those who claim that stunning illustrations and other decorative elements are a must, and those who believe in the brute force of basic design elements and minimalistic approach. Neubrutalism evidently belongs to the second category. Below you will find a few characteristics of this attention-grabbing and effective design trend.


Example of Colors in Neubrutalism
Neubrutalist Colors - Made by SVGator

Neubrutalism just couldn’t care less if your eyes are bleeding from a clashing color combination of red and blue or red and green. It winds up all the principles of the user-friendly interface design with aesthetically pleasing, web-safe colors, that has graced our screens for many years now. However, these colors are desaturated in most of the cases, so they rarely exceed 80% saturation. There is always a main color dominating the website or interface, accompanied by a set of secondary colors that accentuate certain ideas. The page or app is often structured into color-coded categories.


Example of Contrasts in Neubrutalism
Neubrutalist Contrasts - Made by SVGator

Brutalism web design isn’t afraid of high contrasts and pure black (#fff) or white (#000), which are often avoided in order to avoid eye strain. The mixing of black with contrasting colors is an especially widely used practice in brutalist UI design.

Strongly defined shapes and lines

Example of Strognly Defined Shapes and Lines in Neubrutalism
Neubrutalist Shapes and Lines - Made by SVGator

In contrast to minimalist design trends, neubrutalism uses purposefully inconsistent and strongly defined shapes. Stripped down to the bare essentials, it is inspired by early HTML1 web designs, like computer window patterns.

Additionally, high-contrast and thick outlines are used with inconsistent thickness. There seems to be no consistency rules; some lines are thicker, others thinner or dotted.


Example of Typography in Neubrutalism
Neubrutalist Typography - Made by SVGator

Typography plays a very important role in neubrutalism. It behaves in a much more conservative way than in previous brutalist design styles, following the well-used typographic practices.

It has an excellent use of whitespace, often complimented by huge and bold fonts, pushing for maximum readability and moving away from minimalism’s softer approach. It is characterized by simple and unique fonts, and the text overflows other containers.

Accented shadows

Example of Accented shadows in Neubrutalism
Neubrutalist Accented Shadows - Made by SVGator

Neubrutalist shadows are sharp and black instead of having blur on them. Buttons seem to have another pure black rectangle underneath, providing that “in your face” contrast instead of a barely visible border.  It is also noticeable that most shadow or fake 3D objects use isometric views that are in a 45° angle.

The challenges of creating neubrutalist website design

From a design perspective, neubrutalism seems approachable to beginners due to its simplicity and basic forms, but finding the sweet spot in visual hierarchy might be a challenge even for seasoned professionals. If it is done incorrectly, it may lead to a chaotic, disturbing, and frustrating user experience.

The unconventional design solutions can cause difficulty to those visitors who are not tech-savvy, because CTA buttons and navigation aren’t always in the obvious place.

The questionable color choices and bold shadows require a bit of work for their brains to process.

Neubrutalism is great for those brands who would like to stand out of the crowd and entertain their users. It’s ideal for an audience interested in design, arts, and fashion, but it’s a bad choice for fields like finance, healthcare or banking, where clear navigation and structure are important.

Examples to neubrutalism in website design

We’ve put together this list of examples of neubrutalism in order to show you the many different approaches, styles, and layouts associated with this trend.

Pattern Brutalist

Brutalist Architecture-Inspired Design made by

If you would like to learn more about the roots of the neubrutalist trend, check out this illustrated magazine inspired by brutalist architecture. Designer Sergey Lisovskiy created the illustrations of four Brutalist buildings from Russia, Germany, and Serbia, using animated GIFs, old photographs, and amazing graphic art.


Black and White Neubrutalist Design made by AllCaps

Allcaps is an international typeface publishing collective. Their website uses black and white neubrutalist style and huge text blocks, which offers the perfect opportunity to have the typefaces in full spotlight without any distracting elements.

Budapest Park

Red and Blue Neubrutalist Style made by Budapest Park
Budapest Park

The Hungarian capital’s most famous concert venue has a really cool brutalist website with clashing red and blue sections and basic geometric shapes. Dropdown sections have thick black borders and hard shadows, creating that infallible layout.


Example from Allias of using Pure Black Buttons and Huge Fonts Inspired by the Neubrutalist Trend

The French concert producer’s website was inspired by the neubrutalist trend, using pure black buttons and huge fonts to be in line with the brand’s awesome urban look. The colorful hover animations add an extra dynamism to the user experience.


Urbanc-chic allure neubrutalist design made by Cromier

The Italian sneakers brand describes its products as a “mix & match of colours and materials for a result that shouts urban-chic allure.” This is also reflected in their website design: glitch animation effects combined with asymmetrical and layout perfectly capture that laid-back attitude.


Minimalist web design made by Megafauna

The digital agency is a sub-brand of Lattimore and Friends. It offers SEO, digital campaigns, hosting, and maintenance services. The minimalist design together with the catchy headline and short creative copy are doing a really good job at presenting the company’s vision and unique approach.

Sita Abellan

Unique Design Inspired by the 90's Windows Layout & Games made by Sita Abellanm

The Spanish model, DJ, and designer is an eccentric Instagram sensation with an eclectic style and colorful outfits. Her unique apparel is reflected by her brutalist website inspired by 90’s Windows layout and games, where every page has its own unique style and interactions. The annoying cursor, the clashing colors and eyestraining elements take the viewer on a challenging journey full of surprises. Open at your own risk!

The Great Lake Michigan

Engaging and Colorful Neubrutalist Website for The Great Lake Michigan
The Great Lake Michigan

This nice neubrutalist website was created to share fun facts about Lake Michigan. The animated and color-coded sections appear on scroll into view and do a really good job of keeping the viewers engaged. The stunning design elements, interesting photos, and huge fonts are continuously teasing you to go on till the end.


Unique Brutalist Style used by Gumroad on their Website

When it comes to brutalism in web design, Gumroad is the first website that you might think of. Its interesting approach and unique style has become an example for those who would like to explore and try brutalist website design. Muted, clashing colors, thick black outlines, modern typography, and mixing various illustration styles all contribute to Gumroad’s successful design.


Blue and Red Dominated Web Design made by Plus

This special product calls for an outstanding website. The dissolvable body wash sheets are presented on a blue and red dominated page with nice animated elements. Similar to Gumroad, it merges different illustration styles, videos, and photos in order to achieve a powerful impression and entertain the visitors.


Ugly on Purpose Neubrutalist Design made by Badass35

This website is a good example of the “ugly on purpose” idea embraced by brutalist UI design. The disturbing yellow background and the oversize fonts are spiced with scroll animations and artistic photos. The website’s neubrutalist design is in accordance with the wedding photographer’s mission to capture what is “really happening instead of imposing any narrative.”


All in all, normalizing the ugly seems an interesting idea to explore and embrace. Even though neubrutalism fits only a couple brands, you can still integrate some elements of it into your project and merge them together with other styles.

Are you ready to try this relatively new aesthetic? Tell us more on Facebook, Twitter, Instagram, or Reddit!