The 2021 Design Tools Survey is now open! Submit your tools

UX Challenges

Design System

Design System Design System


You work at an agency that was hired by a recipes company (competitors are Allrecipes and Yummly) to redesign their website.

One of the main tasks is to build out a new design system and you've been put in charge of starting that process.


Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.


  • Colors
  • Typography (headings, body, links)
  • Forms (text input, buttons, checkboxes, radios)
  • Icons
  • Grid
  • Recipe card

Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.


If you need help with this challenge, check out our hand-picked tutorial recommendations.

Design Systems 101

Starting a Design System in a Start-up

Design Systems Handbook

Design Systems: What are They and How to Get Started


Not sure which tools to use? Try one of these.




Share Your Results

When you finish the challenge, post your work on Twitter and we'll give you feedback! Be sure to use the hashtag #uxtoolschallenges and tag our account @uxtoolsco. We'll keep an eye out and repost good examples on a regular basis.

We're also building a new paid community for designers where you'll be able to get even more feedback. See more details.

More Challenges

Information Architecture
Competitive Analysis
User Persona

 All Challenges

Download hi-res versions of the cards

Join 12k+ other newsletter subscribers and get a PDF download of all the cards. You'll also stay up to date with our latest UX tutorials and launches.

    Email newsletter signup