User-friendly solutions delivered by user-friendly people. Discover opportunities, find your focus, see results.
Schedule a call
← Back to work

Our Tailwind UI based Design System aligns Designers & Developers

Tailwind UI is an HTML-only component library. Making it as universal as possible. No matter if your development team used Vue, React or Angular. The Design System we created, allows designers to easily speak the same language as developers. Making it easier to translate designs to code.

Client

BTNG
The Challenge

Create an easy-to-use Tailwind UI based Design System to design beautiful applications

In our Ultimate Guide to Design Systems, we talked about what a Design System is and why you need one. But you're here because you want to smell what The Rock is cooking! Practice what you preach, right? As a partner of Development Agencies, we not only tackle strategy & concept but also: Design. Since most of our partners are currently working with (or adopting) Tailwind UI, it was time for us to work smart and effectively...

Ready to go Application Shells

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#1 Ready to go Application Shells
TALK ABOUT A TIME-SAVER!

Ready to go Application Shells

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
TALK ABOUT A TIME-SAVER!

Ready to go Application Shells

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#1 Ready to go Application Shells
TALK ABOUT A TIME-SAVER!

Ready to go Application Shells

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#1 Ready to go Application Shells

Complex Input Groups

One of the bigger challenges was to create an easy-to-update input group, flexible enough to customize but extensive enough to facilite all the potential options. By creating a seperate leading and trailing variant in Figma, we’re able to select options from two variants.
#2 Input Groups
Flexible & Customizable

Complex Input Groups

One of the bigger challenges was to create an easy-to-update input group, flexible enough to customize but extensive enough to facilite all the potential options. By creating a seperate leading and trailing variant in Figma, we’re able to select options from two variants.
Flexible & Customizable

Complex Input Groups

One of the bigger challenges was to create an easy-to-update input group, flexible enough to customize but extensive enough to facilite all the potential options. By creating a seperate leading and trailing variant in Figma, we’re able to select options from two variants.
#2 Input Groups
Flexible & Customizable

Complex Input Groups

One of the bigger challenges was to create an easy-to-update input group, flexible enough to customize but extensive enough to facilite all the potential options. By creating a seperate leading and trailing variant in Figma, we’re able to select options from two variants.
#2 Input Groups

Predefined Colors & Shapes

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#3 Predefined Colors & Shapes
Starting Small

Predefined Colors & Shapes

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
Starting Small

Predefined Colors & Shapes

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#3 Predefined Colors & Shapes
Starting Small

Predefined Colors & Shapes

Having uniformity and consistency, even in the smallest web elements, make a significant impact on usability. The design system covers typography, buttons, colors, form fields, components such as headers and footers and much more!
#3 Predefined Colors & Shapes

Consistent but flexible components

We customize these ready-to-go components with the brand identity of our clients. Making sure we have a perfect fit in branding and functionality.
#4 Consistent but flexible components
Building a Library

Consistent but flexible components

We customize these ready-to-go components with the brand identity of our clients. Making sure we have a perfect fit in branding and functionality.
Building a Library

Consistent but flexible components

We customize these ready-to-go components with the brand identity of our clients. Making sure we have a perfect fit in branding and functionality.
#4 Consistent but flexible components
Building a Library

Consistent but flexible components

We customize these ready-to-go components with the brand identity of our clients. Making sure we have a perfect fit in branding and functionality.
#4 Consistent but flexible components
Impact

+500% ROI? No problem!

As we've invested +200 hours in our Design System, this will easily make for a great ROI. Yes, this will serve as the base for our design work in the future. No, this will not make for a lot of copy-paste work. These are the tools we need to create amazing experiences for our Tailwind UI based applications!

Our mission is to make your user’s experience the
cornerstone of your success.