![How can I design in the Neo-Brutalism- neubrutalism-neobrutalism style- Sepideh Yazdi - @sepidy](https://mir-s3-cdn-cf.behance.net/project_modules/1400/9374fd164728311.63fbfa8f4ff82.png)
TL;DR:
There is a cheat sheet at the end!
So I’ve been seeing Neo - Brutalism designs everywhere for a while, I read a couple of articles and saw multiple examples, and videos to learn some basics. This is a summary of what I’ve learned during this process. You can find the complete article here. Hope you find it useful!
I also did a live training on this topic:
We have a challenge to practice this style together you can join it with this invitation link only.
What is the difference between Neo-Brutalism, Brutalism, and Minimalism?
![What is the difference between Neo-Brutalism, Brutalism, and Minimalism- Sepideh Yazdi - @sepidy](https://mir-s3-cdn-cf.behance.net/project_modules/1400/58f8ef164728311.63fbfa8f53b0b.png)
Color
Black: In Neo-brutalism, we use pitch black with no fear! The two most important use cases of black are strokes and dark shadows.
Background color: In Neubrutalism, we can use multiple colors (other than white and light gray on light mode and dark colors on the dark theme) for the background color! We can use very vibrant colors, and vintage and muted colors.
Vibrant colors: You can use colors with high saturation.
Vintage and muted colors: You can imagine you are designing an old magazine or poster and you can use all those colors too.
No gradient: As far as I saw there are no examples of using gradient in this style. Colors are distinct and don’t have different tones and gradients.
![Vibrent colors - neo brutalism - Sepideh Yazdi - @sepidy - sepidy.com - UX - UI - UX Design - UX des](https://mir-s3-cdn-cf.behance.net/project_modules/1400/061268164728311.63fbfa8f54f36.png)
![Vintage and muted colors- neo brutalism - Sepideh Yazdi - @sepidy - sepidy.com - UX - UI - UX Design](https://mir-s3-cdn-cf.behance.net/project_modules/1400/c139be164728311.63fbfa8f5157c.png)
Components
Raw, unrefined shapes like circles, rectangles, stars, and polygons with strokes. (Basically, these are shapes from Microsoft Paint!)
![Components in neo brutalism- Sepideh Yazdi - @sepidy - sepidy.com - UX - UI - UX Design - UX design](https://mir-s3-cdn-cf.behance.net/project_modules/1400/993731164728311.63fbfa8f4eae0.png)
- Spaces are defined with lines and cards and cards have strokes and black shadows.
- Drop shadows have both X and Y, no blur, and the color is black with 100% opacity.
- Decorative components like moving banners, images with background and stroke, and illustrations.
Typography
- Sans-serif is still more popular in this style.
- Large font sizes for headings.
- Experiment with line height and letter spacing.
- Typography is a decorative element, especially on websites
- Here are some example fonts: Lexend Mega, Public Sans, Mabry Pro, Archivo Black, Bebas Kai
![Neobrutalism fonts - Sepideh Yazdi - @sepidy - sepidy.com - UX - UI - UX Design - UX designer - UI](https://mir-s3-cdn-cf.behance.net/project_modules/1400/b83aef164728311.63fbfa8f5627a.png)
Cheat sheet
![Neo-Brutalism Trend Cheat Sheet- Sepideh Yazdi - @sepidy - sepidy.com - UX - UI - UX Design - UX des](https://mir-s3-cdn-cf.behance.net/project_modules/1400/4351ac164728311.63fbfa8f526cd.png)
You can find the complete article here.
Example
FigChallenge is a web app that designers can join or create design challenges there.
It was one of my designs that many designers told me to build it and now it is launched. It is a new product and I chose this style to better elaborate this newness! You can read more about it here.
Update
Right now we have a neo brutalism challenge on FigChallenge You can join it here
![FigChallenge - Neo brutalism design by Sepidy - Sepideh Yazdi](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/92f9b4164728311.642316478f538.png)
![FigChallenge - Neo brutalism design by Sepidy - Sepideh Yazdi](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/bea1ac164728311.6423177996aee.png)
![brutal Brutalism Brutalist brutalist design how to neobrutalism neubrutalism Sepideh Yazdi ui design UX Designer](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/bb5dfb164728311.642c16c27fd1b.png)
These are the actual screenshots of the app; we are currently having a
Join a community of supportive designers and challenge yourself to design every day!