Very Good Engineering

The Art of Retro UI: Building an 8-Bit Design System with NES UI in Flutter

EZ

Erick Zanardo

Technical Delivery Lead, Very Good Ventures

Erick Zanardo, Very Good Ventures: The Art of Retro UI, Building NES UI in Flutter

Jorge Coca talks with Erick Zanardo, a Technical Delivery Lead at Very Good Ventures and a Google Developer Expert in Flutter and Dart. Erick is one of the engineers behind the Flame game engine and contributed to Google’s I/O Pinball. The conversation centers on NES UI, the retro 8-bit design system he built for his own games and open sourced for the Flutter community. Erick offers a grounded definition of a design system as a set of rules for organizing how a design works, not so different from how developers organize code, with the end goal always being a comfortable, familiar experience for the user.

He explains how NES UI grew out of his own game development, studying screenshots from titles like Final Fantasy 6 and web CSS libraries so he could stop rewriting buttons and cards for every project. The library sits on top of Flutter’s Material, giving its structure a pixel-art skin. A highlight is Mini Sprite, a side project that encodes pixel-art icons as compressed strings, solving the problem that Dart packages can’t ship binary assets, complete with an editor for drawing and copying new icons directly into code.

Erick also talks about Cherry Bit Studios, where he ships games like Pixelado and Mine Cat Digger under a pricing model he considers fair, free with ads and a single purchase to remove them. He closes with practical advice for anyone building their first design system: learn atomic design for shared vocabulary, resist over-engineering one infinitely customizable widget, and lean on tools like Widgetbook. Building in the open, he says, is the whole point.

Frequently Asked Questions

What is NES UI?

An open source 8-bit retro design system for Flutter that Erick Zanardo built for his own games. It sits on top of Flutter's Material and gives its structure a pixel-art look.

What is Mini Sprite?

A side project that encodes pixel-art icons as compressed strings, working around the fact that Dart packages cannot ship binary assets, complete with an editor for drawing new icons and copying them into code.

Any advice for building a first design system?

Learn atomic design for a shared vocabulary, resist over-engineering one infinitely customizable widget, and lean on tools like Widgetbook. Building in the open is the whole point.