The Architect / A Design System for high-fidelity wireframing

Lately I've been working on a design system for one of the projects I'm leading right now, and an idea showed up. There are various systems you can use as a template to speed up the realization process of new ideas, even within Figma community. But there are none for wireframing. However, sometimes I personally like starting an idea, no matter really a creative one or not, from a wireframe. So I put two and two together and took my shot on creating an MVP of one, at least for my own convenience. Called it The Architect, since imo you're more of an architect yourself when wireframing a UI, design system or even a whole product, don't you think?

Colour Styles

There's not much you can work with, when the idea is to only use black and white shades. But it definitely has it's own charm to my liking.

Text Styles

Here we have necessary text styles for quite a simple landing page I'm working on to provide an example of the design system in action.

Coming Next

Controls, buttons, icons and more.