UX Challenges

Design System

Design System Design System

Scenario

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.

Task

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.

Elements:

  • 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.

Tutorials

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

Design Systems 101

nngroup.com

Starting a Design System in a Start-up

uxdesign.cc

Design Systems Handbook

designbetter.co

Design Systems: What are They and How to Get Started

youtube.com

Tools

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

Figma

figma.com

zeroheight

zeroheight.com

HTML / CSS

developer.mozilla.org

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