NES UI is a retro 8-bit design system for Flutter, built by Erick Zanardo for his own games and open sourced for the wider Flutter community. In this episode of Very Good Engineering, host Jorge Coca talks with Erick about pixel-art widgets, the side project he built to embed icons in Dart code, and why a design system is really the same problem as organizing your code.
About Erick Zanardo
Erick is a Technical Delivery Lead at Very Good Ventures and a Google Developer Expert in Flutter and Dart. He’s one of the engineers behind Flame, the open source game engine with more than 10,000 GitHub stars, and contributed to Google’s I/O Pinball alongside other VGV activation demos. Outside of Flame, he ships his own games under Cherry Bit Studios.
A Design System Is a Rule Set
Erick’s definition is refreshingly direct. “It is when you duplicate rules and organize how a design should work. It’s not much different from how developers organize their code.” Color tokens with meaning, predictable spacing, components that look the same wherever they appear. The point of all those rules is the user. Familiar screens feel comfortable, and mismatched ones drive people away.
The Origin of NES UI
Erick came to Flutter through game development, and he wanted his games to look vintage. He also didn’t want to keep rewriting buttons and cards every time he started a new project. So he built NES UI for himself, studying screenshots from games like Final Fantasy 6 and CSS libraries that brought 8-bit styling to the web. Then he open sourced it.
“I felt because I was already in the Flame community and I was seeing this community growing, that making this open source could help other devs. And happily, I was right.”
Material as a Foundation
NES UI is built on top of Material. People hear “Material” and picture the default Android look, but Flutter’s Material is flexible enough to reskin into almost anything. Erick reuses Material’s structure for buttons, cards, and containers, then customizes the rendering so each widget reads as pixel art. The result is an 8-bit aesthetic that still feels familiar to any Flutter developer who has read the Material docs.
Mini Sprite: Icons as Strings
A big part of NES UI is its icon set, each one hand-drawn pixel art. The catch: Dart packages can’t ship binary assets. So Erick built a small image format called Mini Sprite that encodes pixel art as a compressed string. Icons live directly in the package code, and Erick built an editor so he can draw a new icon, copy the encoded string, and paste it into his widget tree.
Cherry Bit Studios and Fair Pricing
Cherry Bit is the umbrella for Erick’s own games, including Pixelado and Mine Cat Digger. Both are built with NES UI and Flutter, with small Flame components mixed in where animation calls for it. Both are free with ads, and a single in-app purchase removes the ads for good.
“I didn’t want to be that,” Erick says of the aggressive monetization common in mobile games. “I try to come up with a way that I think is fair, and I still might be able to get some revenue from that.”
Advice for Engineers Building a Design System
Two pieces of advice from Erick for anyone tackling their first design system:
- Learn atomic design. It is not a silver bullet, but it gives you the vocabulary of atoms, molecules, and organisms, and it will save you from reinventing concepts that already have names.
- Don’t over-engineer. “I start to create a new widget and then for some reason I decided everything would be customizable. And then I ended up with 200 lines of a theme data class. Then I realized it was not worth it. Maybe I should have different widgets.” Two focused widgets often beat one infinitely configurable one.
A tool like Widgetbook helps here. Hot reload on a widget in isolation makes it easier to spot over-engineering before it ships.
Building in the Open
For Erick, open source is the whole point. “If my thing is not open, it’s not useful for other people, just to me.” Watching other developers use NES UI is the motivation that keeps him coming back to it on weekends. Contributors have added widgets he never prioritized, growing the library faster than he could have alone.
What’s next? Erick is sketching out a fully hand-drawn game, scanning the art directly into Flutter to see how it lands. A long way from pixel art, but the same instinct for craft.
