{"id":784,"date":"2021-08-31T03:54:19","date_gmt":"2021-08-31T03:54:19","guid":{"rendered":"http:\/\/bethanylarsen.com\/?p=784"},"modified":"2021-08-31T03:56:04","modified_gmt":"2021-08-31T03:56:04","slug":"wavv-design-system","status":"publish","type":"post","link":"https:\/\/bethanylarsen.com\/index.php\/wavv-design-system\/","title":{"rendered":"WAVV Design System"},"content":{"rendered":"\n

Building and maintaining a comprehensive design system was the first item on my list when I started working at WAVV. It’s the one thing that if done well upfront, will save time and allow designers to focus on solving the tougher business problems.<\/p><\/blockquote>\n\n\n\n

Colors<\/h2>\n\n\n\n

The first step is to define colors because every element in a Design System uses color. Luckily we had a logo but the colors needed a little bit of an enhancement. I also thought the first color in the logo should be the primary color of the brand so I switched the order around. Once I presented the new colors to the team, I created all the other colors for both the light and dark theme based on those new colors.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Click image for full resolution.<\/figcaption><\/figure><\/div>\n\n\n\n

All components<\/h2>\n\n\n\n

The order I built the components was based on the projects that were being worked on at the time\u2014which happened to be the messenger product. That got me creating buttons, text styles, input fields, etc and as time went on and I worked on more projects, more and more components were added to the Design System to make it what it is today.<\/p>\n\n\n\n

\"\"<\/a>
Click image for full resolution.<\/figcaption><\/figure><\/div>\n\n\n\n

A few extras<\/h2>\n\n\n\n

Here are some additional items that aren’t included in the components above. <\/p>\n\n\n\n

\"\"<\/a>
Text Styles<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"<\/a>
Loading States<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

A comprehensive Design System for WAVV Communications.<\/p>\n","protected":false},"author":1,"featured_media":789,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/posts\/784"}],"collection":[{"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/comments?post=784"}],"version-history":[{"count":18,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/posts\/784\/revisions"}],"predecessor-version":[{"id":815,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/posts\/784\/revisions\/815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/media\/789"}],"wp:attachment":[{"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bethanylarsen.com\/index.php\/wp-json\/wp\/v2\/tags?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}