{"id":16225,"date":"2018-10-08T12:56:14","date_gmt":"2018-10-08T11:56:14","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16225"},"modified":"2020-12-21T11:34:44","modified_gmt":"2020-12-21T11:34:44","slug":"designing-styleguide-elements-building-compelling-products","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/","title":{"rendered":"Designing a Styleguide: Elements That Go Into Building Compelling Products"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script type=\"application\/ld+json\"> {\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"headline\": \"\n            Designing a Styleguide: Elements That Go Into Building Compelling Products | Marvel Blog - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"Blog\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Blog\"}, \n    {\"@type\": \"Thing\",\"name\": \"design\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Design\"}, \n    {\"@type\": \"Thing\",\"name\": \"product\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Product_(business)\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Person\",\"name\": \"Styleguide\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Style_guide\"}, \n    {\"@type\": \"Organization\",\"name\": \"Apple\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Apple_Inc.\"}, \n    {\"@type\": \"Thing\",\"name\": \"Dropbox\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Dropbox_(service)\"}, \n    {\"@type\": \"Organization\",\"name\": \"Google\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Google\"}, \n    {\"@type\": \"Thing\",\"name\": \"Twitter\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Twitter\"}, \n    {\"@type\": \"Thing\",\"name\": \"Human Interface Guidelines\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Human_interface_guidelines\"}, \n    {\"@type\": \"Thing\",\"name\": \"article\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Article_(publishing)\"}\n  ]\n}\n<\/script><br \/>\nIf you look at companies like Dropbox, Google, and Twitter you\u2019ll notice that they each have their own unique aesthetic. Across all their products, both mobile and web, there is a sense of consistency and uniformity in their design.The way that companies and products achieve <em>consistency<\/em> is through styleguides. A styleguide is a set of standards that aligns designs with a company\u2019s voice and mission.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Consistency is important because it creates trust. And design is all about creating relationships between products and users.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The goal of this article is to introduce you to some well-thought-out styleguides and branding guidelines. It also details some of the most important elements every styleguide should have.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hopefully, these elements and examples will serve as a source of inspiration and influence how you design sustainable products in the future.<\/strong><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Before we get\u00a0started\u2026<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here are a few suggestions for when you\u2019re designing styleguides.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1491px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1RU8Uez05S3uH9Z2Dem95Jw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1RU8Uez05S3uH9Z2Dem95Jw.png\" alt=\"\" width=\"1481\" height=\"941\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/styleguide\/design\/typography\">Styleguides help create consistency and uniformity in products.<\/a><\/p><\/div>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Design your product first and then create a styleguide. Don\u2019t start by creating a styleguide. First figure out what works and what doesn\u2019t work. Then standardize it.<\/li>\n<li>You\u2019ll never be fully happy with your styleguide. That\u2019s okay. Creating a universal design language is an iterative process.<\/li>\n<li>Have a strong understanding of the voice and message you want your product to convey before writing a styleguide.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Principles<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Styleguides should always have a page on design principles. Design principles are a set of guidelines that influence how designers approach and solve problems when building a product.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1476px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1_Mro6NEPE37bgCI4lAf9UQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1_Mro6NEPE37bgCI4lAf9UQ.png\" alt=\"\" width=\"1466\" height=\"926\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/\">Design principles from Apple\u2019s Human Interface Guidelines.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of the key characteristics of a good design principle is that it isn\u2019t obvious or too broad. A good design principle should be specific enough to help a designer make decisions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s take a look at Apple\u2019s <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/\">Human Interface Guidelines<\/a>, which has a section on design principles. One of their principles is <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">direct manipulation<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"The direct manipulation of onscreen content engages people and facilitates understanding\u2026 Through direct manipulation, they can see the immediate, visible results of their actions.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This description explains that direct manipulation is a principle that governs and mediates physical and digital interactions. It helps designers choose modes of interactions, such as swiping and rotating.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When coming up with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/design-principles-help-shape-best-user-experience\/\">design principles<\/a>, less is more. Start off with three guiding principles and iterate from there.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For more on design principles, check out Julie Zhuo\u2019s <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/the-year-of-the-looking-glass\/a-matter-of-principle-4f5e6ad076bb#.uwunhtmjq\">A Matter of Principle<\/a> article. It has hugely influenced how I think about design principles.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Typography<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Typography is key to achieving unity across multiple products and designs. Every styleguide should have a few sections detailing typography specifications.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s important to limit the number of typefaces and sizes you use in order to keep your designs simple. As a general rule of thumb, start with at most two fonts?\u2014?one for your headers, and one for your bodies. Most of the time, you won\u2019t need any more than that.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1550px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1a0mAayMeVdnS91fCmqzcHA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1a0mAayMeVdnS91fCmqzcHA.png\" alt=\"\" width=\"1540\" height=\"1156\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.google.com\/style\/typography.html\">Typography from Google\u2019s Material Design Guidelines<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Also, include example use cases of typography to help other designers and developers understand when to use things like bold or italics.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1241px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1uBpePqxw3lx1qbFuVqxAgA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1uBpePqxw3lx1qbFuVqxAgA.png\" alt=\"\" width=\"1231\" height=\"833\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.behance.net\/gallery\/7226653\/Medium-Brand-Development\">Examples of type in use help designers understand how to use the\u00a0font.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you have trouble picking fonts, check out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.typewolf.com\/\">Typewolf<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/fontpair.co\/\">FontPair<\/a>. For font sizing check out <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.modularscale.com\/\">Modular Scale<\/a> and its accompanying article <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/alistapart.com\/article\/more-meaningful-typography\">More Meaningful Typography<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Also keep in mind that fonts aren\u2019t set in stone. You can always change them later.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Imagery<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Show, don\u2019t tell. Imagery is a powerful tool in the hands of a designer. Images are dynamic. They convey meaning at first glance, and evoke emotions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you have have the assets, consider including a section that details what kinds of images other designers should use to convey your product\u2019s voice and identity.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1hl-cmHv67TqFa8CH3iOiQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1hl-cmHv67TqFa8CH3iOiQ.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Nike is a good example of a company that uses images to convey their brand. Their photos have a cinematic quality that inspires you to participate in their mission and brand.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Imagery isn\u2019t only limited to photographs. Companies like Dropbox rarely use photographs in their designs. Instead, they convey their personality through illustrations.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1491px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1VUHIPQWqpg3viiZqKVSP4A.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1VUHIPQWqpg3viiZqKVSP4A.png\" alt=\"\" width=\"1481\" height=\"941\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/search?q=dropbox\">Dropbox conveys their personality through illustrations.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here is an example of Hubspot\u2019s imagery styleguide.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/127mA2Zmzoy6Wgy_6vm_1Ew.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/127mA2Zmzoy6Wgy_6vm_1Ew.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Notice how they describe the tone and goal of the photography before providing examples.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With guidelines for what images to use, designers can better communicate meaning to users and ultimately immerse them into a cohesive experience.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Grids and\u00a0spacing<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Good design cares about whitespace as much as content. Styleguides should reflect this mentality and include a section on grids and spacing.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s important to establish a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\">grid system<\/a> that works for every use case. In the section on grids, include information like the number of columns and rows, margins, and example uses.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For reading on grids, see <a class=\"link link--blue fontWeight-4\"title=\"A guide to creating grid systems that are built around your content\" href=\"http:\/\/www.iamtomnewton.com\/blog\/grid-guide\/\">A guide to creating grid systems that are built around your content<\/a> as a primer. And follow it up with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/designshack.net\/articles\/layouts\/modular-design-the-complete-primer-for-beginners\/\">Modular Design For Grids<\/a>.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1491px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1pyqsEE_67yOrCE11zTIgfw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1pyqsEE_67yOrCE11zTIgfw.png\" alt=\"\" width=\"1481\" height=\"941\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ux.mailchimp.com\/patterns#grid-gutter\">Mailchimp\u2019s grid system consists of 8 flexible columns with 30px gutters between\u00a0columns.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1491px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1K_2-AAgbhI8umPIkW1BruQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1K_2-AAgbhI8umPIkW1BruQ.png\" alt=\"\" width=\"1481\" height=\"941\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/styleguide\/design\/layout\">Marvel codified their\u00a0spacing.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/sass-lang.com\/\">Sass<\/a> variables.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"language-css\">$space-smaller: 5px;\r\n$space-small: 10px;\r\n$space-medium: 20px;\r\n$space-large: 40px;\r\n$space-larger: 80px;\r\n$space-largest: 240px;\r\n<\/code><\/pre>\n<\/aside>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Color<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As Buffer puts it in their styleguide:<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">Using colors consistently brings a sense of familiarity and unity to a product. Buffer\u2019s color scheme aims to be clear, unobtrusive and friendly.<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1rykDfsBH4CLdSSL1SSRBeQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1rykDfsBH4CLdSSL1SSRBeQ.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/buffer.com\/style-guide\">Buffer\u2019s color styleguide is useful to both designers and developers.<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the example above, Buffer names each of their colors. This is particularly useful to developers because they can turn the colors into Sass variables:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"language-css\">$primaryColor: #168eea;\r\n$headingColor: #323b43;\r\n$bodyColor: #59626a;\r\n$borderColor: #ced7df;\r\n$lightBorderColor: #eff3f6;\r\n$fillColor: #f4f7f9;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Notice how Buffer uses <em>primaryColor<\/em> instead of a name like <em>brandBlue<\/em>. Choose names that describe the role of the color instead of the color itself. This approach makes it easier for both designers and engineers to adjust their color values without having to change the name.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you want to learn more about choosing color, check out the article I wrote on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/designing-in-color-abd358660a7b#.qfryvjkhq\">Designing in Color<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Components<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1oelOzqIHwp84GiA0qYb8vw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1oelOzqIHwp84GiA0qYb8vw.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/airbnb.design\/building-a-visual-language\/\">Sample components from Airbnb\u2019s blog post on their new design language.<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1HlnTaAOtCY2O8w2miiaigQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1HlnTaAOtCY2O8w2miiaigQ.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.behance.net\/gallery\/35378175\/Dashboard-UI-Kit-Mastering-Dashboard-Interfaces\">Components can be composed to create interfaces.<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While you\u2019ll often see components in UI and pattern libraries, it\u2019s also useful to include components in styleguides for other designers to reference.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1491px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1nl4FeP6UKtLQxZmZHKwVow.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1nl4FeP6UKtLQxZmZHKwVow.png\" alt=\"\" width=\"1481\" height=\"941\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.mapbox.com\/base\/styling\/forms\/\">Mapbox breaks their UI down into multiple components.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.mapbox.com\/base\/styling\/forms\/\">Mapbox<\/a> has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you want to learn more about components check Brad Frost\u2019s <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\">Atomic Web Design<\/a> article.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Principles, typography, imagery, grids and spacing, color, and components. This list isn\u2019t exhaustive, but these six topics form the basis of a good styleguide.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What are your thoughts on styleguides? What are some of the lessons that you\u2019ve learned in the process of creating styleguides? Leave a note below or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/JonathanZWhite\">tweet<\/a> at me.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you enjoyed this article, you might enjoy <em>Photos and stories from a designer.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"title=\"https:\/\/medium.com\/@JonathanZWhite\/photos-and-stories-from-a-designer-5ee97750ae5\" href=\"https:\/\/medium.com\/@JonathanZWhite\/photos-and-stories-from-a-designer-5ee97750ae5\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Photos and stories from a designer<\/strong><br \/>\n<em>Some of the best designers are also some of the best storytellers.<\/em>medium.com<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can find me on Medium where I publish every week. Or you can follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/JonathanZWhite\">Twitter<\/a>, where I post non-sensical ramblings about design, front-end development, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-vr-beginners-guide\/\">virtual reality<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/crash-course-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Crash Course in UI Design<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/need-ui-guidelines\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why You Need UI Guidelines?<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/can-master-design-must-first-master-fundamentals\/\" target=\"_blank\" rel=\"noopener noreferrer\">Before You Can Master Design, You Must First Master the Fundamentals<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stop Talking and Start Sketching: A Guide to Paper Prototyping<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/making-case-design-sprints\/\" target=\"_blank\" rel=\"noopener noreferrer\">Making the Case for Design Sprints<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>If you look at companies like Dropbox, Google, and Twitter you\u2019ll notice that they each have their own unique aesthetic. Across all their products, both mobile and web, there is a sense of consistency and uniformity in their design.The way that companies and products achieve consistency is through styleguides. A styleguide is a set of standards that aligns designs with&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":22,"featured_media":16253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-16225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"This article introduces you to some well-thought-out styleguides, branding guidelines and some of the most important elements every styleguide should have.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing a Styleguide: Elements That Go Into Building Compelling Products | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"This article introduces you to some well-thought-out styleguides, branding guidelines and some of the most important elements every styleguide should have.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-08T11:56:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-21T11:34:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/10\/styelguide.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/10\/styelguide.png\",\"width\":\"1600\",\"height\":\"700\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\",\"name\":\"Designing a Styleguide: Elements That Go Into Building Compelling Products | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#primaryimage\"},\"datePublished\":\"2018-10-08T11:56:14+00:00\",\"dateModified\":\"2020-12-21T11:34:44+00:00\",\"description\":\"This article introduces you to some well-thought-out styleguides, branding guidelines and some of the most important elements every styleguide should have.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\"},\"headline\":\"Designing a Styleguide: Elements That Go Into Building Compelling Products\",\"datePublished\":\"2018-10-08T11:56:14+00:00\",\"dateModified\":\"2020-12-21T11:34:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#primaryimage\"},\"articleSection\":\"Resources\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\",\"name\":\"Jonathan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d601181a5f57aac710c98e229d6a88d13ef8a8916903d5fb633c7283bbcc14b?s=96&d=mm&r=g\",\"caption\":\"Jonathan\"},\"description\":\"Bringing design thinking to engineering, closing the gap between the qualitative and quantitive. Follow me on Twitter or follow my writing on Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/16225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=16225"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/16225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/16253"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=16225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=16225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=16225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}