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.
Tools
Not sure which tools to use? Try one of these.
Share your results
When you finish the challenge, post your work on X (Twitter)! 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 community for designers where you'll be able to get even more feedback. See more details.