ODC #000019 - UX > IMPLEMENT
Design System for a recipies website using Lightning
Scenario
You work at an agency that was hired by a Culinary Design company (competitors are Allrecipes and Yummly) to redesign their web portal that enable aloe to share recipes and get rewarded with bitcoin.
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.
Guides
If you need help with this challenge, check out our hand-picked tutorial recommendations.
-
Design Systems 101 on https://www.nngroup.com/articles/design-systems-101/
-
List of analyzed design systems on open-ui.org
-
Starting a Design System in a Start-up on uxdesign.cc
-
Design Systems Handbook on https://www.designbetter.co/design-systems-handbook
-
Design Systems: What are They and How to Get Started on piped.video
Tools
Not sure which tools to use? Try something new, go 💯% FOSS!
For youPenPot by kaleidos
Bootstrap
 by twitter

Catalog.Style by Interactive Things
StoryBook by chromatic
VueDS by Ariel Salminen
For professional gurusSupernova (freemium) by https://www.supernova.io/
ZeroHeight (freemium) by zeroheight.com
Share Your Results
When you finish the challenge, post your work including anonymized collected data and results on this thread! If you also share it on
nostr, be sure to use the hashtag #opendesigner and tag Design_r@iris.to or @Design__r on X! We'll keep an eye out and repost good examples on a regular basis.Check our previous ODC and support this community for creative minds, where you'll be able to get open and constructive feedback on your PoW. Ask anything in the ~Design territory and get some âš¡sats for the value you provide!
#Bitcoin #Design #BitcoinDesign #NostrDesign #Nostr #OpenDesign #DesignChallenge #OpenDesignChallenge