
designertom.io
description
notes
arrow_drop_down
Rise of a visual design trend: retro-minimalism
December 11, 2024 at 12:00 AM

Welcome back. If you've been following top design engineers lately, you've probably noticed a rising wave of what I'm calling "retro minimalism" - an intoxicating mashup of dithering, monospace typefaces, and brutalist design principles that's creating some dope visual styles.
Let's dive into why I think this is more than a trend and how you can start playing with it in your work.
—Tommy (@DesignerTom)
The Wireframe:
Why retro minimalism matters
Examples of retro minimalism
How to implement it in your work
The Rise of Retro Minimalism
video preview
We all know how visual trends usually catch fire:
They look different enough to stand out
They're championed by people who do great work
They tap into something deeper than aesthetics
But what's happening with retro minimalism feels different. This isn't your typical Dribbble-bait gradient with rounded corners.
This is a love letter to the intersection of design and code, pushed forward by some of the heaviest hitters in product design right now (e.g. EvilRabbit at Vercel and Jordan Singer at Mainframe) - people who aren't just designing interfaces but building the tools that shape our industry.
When these folks start playing with dithering and monospace, others pay attention.
Why This Matters
Produced by Raycast
This movement is a middle finger to the notion that designers and developers are separate species. It's about the makers who:
Live in both Figma and VS Code
Let their execution speak louder than their words
Understand that constraints breed creativity
The Building Blocks
Let's break down what makes retro minimalism work:
1. Monospaced Typography
Personal Site by Evil Rabbit
Creates rhythm through rigid structure
Forces intentional hierarchy
Signals technical authenticity
2. High Contrast
video preview
Improves readability
Creates dramatic visual impact
Simplifies decision-making
3. Dithered Renderings
video preview
Adds texture without complexity
Creates depth through constraint
Callbacks to early pixel art and CRTs
Examples of Doing it Right
Here's who's doing it right:
Unit Software is a masterclass in high-contrast brutalism
Mainfra.me by Jordan Singer is a great storytelling example
Sam Peitz receipt experiment
Tom Johnson demonstrates some incredible examples of product use cases in Basedash
Tina Mai's portfolio is brutalist principles done right
Another shoutout to Tom Johnson's dithered portraits
Personal Site by Paul Macgregor
Mono portfolios by Evil Rabbit and Jose Rago
Together with Dovetail
Unlock the Future of Customer Insights Now
Struggling to keep up with customer needs? The old ways—manual data analysis, repetitive research—are out. It’s time to upgrade your process.
Dovetail’s new Customer Insights Hub helps you:
Connect directly with real customer insights
Streamline research with a single source of truth
Leverage AI to uncover what matters, fast
Ready to build products that truly resonate with your customers? Start now.
The Tools of the Trade
Monospace Typography: The Foundation
Monospace typefaces, where each character occupies the same width, are deeply rooted in technical history.
Originally designed for typewriters and early computers, they create a distinct rhythm and immediate technical authenticity.
In interfaces, they work brilliantly for code blocks, technical information, and creating visual hierarchy through their rigid structure. They fall flat when overused in body copy or when you need to maximize space efficiency.
Some monospace typefaces you can use:
Berkeley Mono by USGraphics
T.26 Carbon by Anuthin Wongsunkakon
OCR A by American Type Founders
VCR OSD Mono by Riciery Leal
Geist Mono by Vercel
Implementing Dithering & Retro Effects
Dithering, the art of using controlled noise to create the illusion of additional colors or shades, is having a moment. You can introduce these effects into your work through two main approaches:
Standard Design Tools:
Framer plugins like Depth Grid and Dither
Figma plugins like Dither
Dither Brushes for Adobe Photoshop
Asperite’s native gradient dither
Unicorn.Studio's native Dither effects
Code Implementation:
React and post processing effects
SVG Filters in Javascript
WebGL shaders and effects
The Bottom Line
Retro minimalism is a callback to the nostalgia of 8-bit pixel games, CRT monitors, and an era when anyone creating digital work was at least an accidental pioneer of ideas.
As we head into 2025, expect to see more of this aesthetic, not because it's trendy, but because it represents something real: a return to intentional constraints and technical authenticity in an era when the barrier to shipping your own ideas is lower than ever.
"The computer can't tell you the emotional story. It can give you the exact mathematical design, but what's missing is the eyebrows." - Frank Zappa, 1979
See you next week,
Tommy
Thanks for reading! What's your favorite visual style? Hit reply and let me know.
Enjoying this newsletter? Let us know here.
If you enjoy the newsletter, it'd be amazing if you forwarded it to a friend! New people can join the fun here :)
You're receiving this email because you signed up for the UX Tools by DesignerTom mailing list or purchased one of our products.
To advertise with UX Tools, go here.
Hit reply if you have any questions!
Unsubscribe | 113 Cherry St #92768, Seattle, WA 98104-2205