{"id":13526,"date":"2017-11-16T15:04:34","date_gmt":"2017-11-16T15:04:34","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13526"},"modified":"2020-12-13T21:11:32","modified_gmt":"2020-12-13T21:11:32","slug":"harmonious-spacing-system-faster-design-dev-handoff","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/","title":{"rendered":"A harmonious spacing system for faster design-dev handoff"},"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            A harmonious spacing system for faster design-dev handoff | Marvel Blog - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"system\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Universe\"}, \n    {\"@type\": \"Thing\",\"name\": \"design\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Engineering\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Person\",\"name\": \"Robert Bringhurst\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Robert_Bringhurst\"}, \n    {\"@type\": \"Thing\",\"name\": \"Electronic Health Record\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Electronic_health_record\"}, \n    {\"@type\": \"Thing\",\"name\": \"The Elements of Typographic Style\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/The_Elements_of_Typographic_Style\"}, \n    {\"@type\": \"Thing\",\"name\": \"Practice Fusion\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Practice_Fusion\"}, \n    {\"@type\": \"Thing\",\"name\": \"Photoshop\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Adobe_Photoshop\"}, \n    {\"@type\": \"Thing\",\"name\": \"framework\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Software_development_kit\"}, \n    {\"@type\": \"Thing\",\"name\": \"product\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Product_(business)\"}\n  ]\n}\n<\/script><\/p>\n<div id=\"attachment_6580\" style=\"width: 5466px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ayuKnS4vuCa6RKDNQgboBw.png\" alt=\"Cheatsheet summarizing my\u00a0approach\" width=\"5456\" height=\"6672\" \/><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Cheatsheet summarizing my\u00a0approach<\/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\">I recently worked on defining the spacing system for <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/practicefusion.com\">Practice Fusion\u2019s<\/a> EHR (Electronic Health Record) product, to ensure improved readability and consistency across all pages. I came up with <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">3 spacing rules (hint: rule of 3 C\u2019s)<\/strong> and <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">4 spacing values, <\/strong>which worked harmoniously well with the new typographic system.<\/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;\">The problem<\/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\"><span class=\"long-quote\">\"When positioning elements vertically, the designer has to make decisions that never should be left to chance or be random. Too often, designers rely on vertical increments made possible in Photoshop by holding shift and arrows keys: \u201cI use 5 or 10px, it depends.\u201d This approach is acceptable horizontally, as columns are multiples of 10, but it doesn\u2019t conform to any typographic reality.\" - Robert Bringhurst (Author of \u201cThe Elements of Typographic Style\u201d)<\/span><\/p>\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>We were using 5px, 10px, 15px, 20px margins \/ paddings for spacing in Practice Fusion\u2019s EHR product. We were not following any strict guideline around when to use each of these spacing values.<\/li>\n<li>Margins \/ paddings are just one piece of the spacing puzzle. Line-heights of type add considerable space in the UI too. We had not established line-height values for any of our (old) type styles. So, the UI developers had to assume line-heights and supplement it with extra margin \/ padding values such that the overall space matched the design spec. Due to this approach, adhoc margin \/ padding values were getting added across product.<\/li>\n<li>Similar components and content looked quite different across product. That gave an overall inconsistent appearance to our EHR product and hampered a smooth reading experience due to data density issues.<\/li>\n<\/ul>\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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/18uDwBTQYZi7CuS_XaHCLYg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/18uDwBTQYZi7CuS_XaHCLYg.png\" alt=\"\" width=\"4996\" height=\"2032\" \/><\/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<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;\">The beginning<\/h2>\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\">\"Don\u2019t compose without a scale. Type should actually be the scale that defines almost everything else.\" \u2014 Robert Bringhurst<\/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\">Type (line-height) is the first piece of the spacing system puzzle.<\/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;\">Step 1: Determine body text line-height (&amp; baseline grid that works)<\/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\">I started with a hypothesis that the very popular 8-point baseline grid (ie multiples \/ factors of 8 spacing) was going to work. So, in my experiments, I paired my base body font-size of 13px with line-heights which are multiples of 8 \u2014 16px and then 24px to see if any of these values worked. Both of these values did not work \u2014 which meant that 8-point baseline grid was not going to work.<\/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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/191XD6iv2bXpiX6vq_UaEMA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/191XD6iv2bXpiX6vq_UaEMA.png\" alt=\"\" width=\"2056\" height=\"1400\" \/><\/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\">I then paired my base body font-size of 13px with even line-height values between 16px and 24px. At first, I paired it with 18px (a multiple of 6). If it had worked, it would have meant I was adopting a 6-point baseline grid aka multiples \/ factors of 6 spacing (aka spacing values like 2,3,6,12,18,24..). Then, I tried out 20px line-height. It worked perfectly well and that\u2019s how it was clear to me that I was adopting the 4-point baseline grid aka multiples \/ factors of 4 spacing (aka spacing values like 2,4,8,12,16,20..).<\/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\/2017\/11\/1_kgldiiBUAUQhLy7JAO4zQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1_kgldiiBUAUQhLy7JAO4zQ.png\" title=\"\" alt=\"\" \/><\/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;\">Step 2: Hick\u2019s law &amp; geometric progression to determine spacing values<\/h2>\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\">\u201cAs the number of choices increase, it becomes exponentially difficult to make a decision.\u201d \u2014 Hick\u2019s\u00a0law<\/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\">To come up with a predictable system that simplifies decision-making, keep number of values to the minimum required.<\/p>\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>Spacing values are factors or multiples of the baseline-grid number (4, as determined in step 1). So, my spacing values were going to be from this set (2,4,8,12,16,20,24,28,..).<\/li>\n<li>Typically up to 4\u20135 values seem to provide enough variance and still seem sufficient even for a complex enterprise product, but you can add more intervals if you really feel the need during explorations.<\/li>\n<li>I decided to select the first 4 values derived using geometric progression as it provides better <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">visually perceptible intervals (excellent for showing hierarchy). <\/strong>So, my spacing values were going to be (2,4,8,16).<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Refer to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/eightshapes-llc\/space-in-design-systems-188bcbae0d62\">Nathan Curtis\u2019s Spacing in Design systems<\/a> post for his analysis about picking values.<\/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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1NLtRd25tydbuMHfWzEnVzg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1NLtRd25tydbuMHfWzEnVzg.png\" alt=\"\" width=\"1084\" height=\"524\" \/><\/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;\">How do I apply these spacing values in a predictable way? Rule of 3 Cs comes to your\u00a0rescue.<\/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\">I was heavily influenced by the spacing vocabulary like <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Insets, Stacks &amp; Inline<\/strong> introduced in Nathan Curtis\u2019s above post. I decided to build an additional layer of vocabulary on top of it, to make it easier for my team to understand the context of use for each. I broke down all spacing rules into <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">3 C\u2019s: Containers, Content &amp; Components.<\/strong><\/p>\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>Rule for <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Containers<\/strong> uses the concept of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Square Inset<\/strong> <em>(uses 16px)<\/em><\/li>\n<li>Rule for <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Content<\/strong> uses the concept of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Stack <\/strong><em>(Header stack uses 2px and leaf-node stack uses 0,4,8,16px depending on content type)<\/em><\/li>\n<li>Rule for <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Components<\/strong> use the concept of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Inline <\/strong><em>(uses 8px for most cases, 4px for association relationships)<\/em><\/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;\">1st C: Rule for Containers<\/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\">Containers are frames in your UI which hold content in them. Typically these are pages, cards, modals, panes, etc. Since containers are at the highest level in hierarchy, I made sure all containers got the highest spacing value (16px in my case) all around (also defined as \u201csquare inset\u201d by Nathan). <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Tip:<\/strong> Never include border in any spacing calculations. (A good explanation is provided in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/builttoadapt.io\/8-point-grid-borders-and-layouts-e91eb97f5091\">Elliot Dahl\u2019s 8-point grid: Borders and Layouts<\/a> post.)<\/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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1lcLSiyCA-DRq8pa3f8OQpQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1lcLSiyCA-DRq8pa3f8OQpQ.png\" alt=\"\" width=\"2234\" height=\"1000\" \/><\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1z1_ymlKNcNQyV8NSqLCDwg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1z1_ymlKNcNQyV8NSqLCDwg.png\" title=\"\" alt=\"\" \/><\/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;\">2nd C: Rules for\u00a0Content<\/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\">Content lives inside the container. Content contains:<\/p>\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>headers (h1,h2,h3,h4,h5)<\/li>\n<li>interspersed with data in the form of paragraphs, lists, forms, tables (which appear at the end of the header hierarchy, and hence referred as <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cleaf-node\u201d <\/strong>going forward).<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All this content is stacked vertically using margins. But the type line-height adds extra spacing to the specified margins too. Nathan mentions in his article about solving these collisions with line-height using a mixin. I could not figure out how to do that in a consistent way, so I created my own way of handling stacks by taking in account the line-heights as well as margin spacing simultaneously. Here is my process:<\/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;\">A) Solve header stack\u00a0first<\/h2>\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>As you can see in the image below, I started with 2 options for line-heights for headers. For more details on how I got to this, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd\">read my typography system post.<\/a><\/li>\n<\/ul>\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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/121zUeFTFcI-qPt2OoCyLAA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/121zUeFTFcI-qPt2OoCyLAA.png\" alt=\"\" width=\"2112\" height=\"808\" \/><\/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<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>To simplify decision-making between the 2 options for each line-height, I calculated line-height ratio for each and decided to work with line-heights equal to 1.5, or more than that. I was still on the fence about few options. But, after doing visual explorations and reviewing the outcome within design team, we got to a place of clarity about which line-height option to adopt.<\/li>\n<\/ul>\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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1BCWRR1HRu2AXwOj2MTB0zA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1BCWRR1HRu2AXwOj2MTB0zA.png\" alt=\"\" width=\"1976\" height=\"530\" \/><\/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;\">Process of visual explorations<\/h2>\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>I started with h1 at the top of the header stack and experimented with different spacing options starting with flush (0px), 2px, 4px, 8px. Most spacing options with line-height 36px felt tight, but 4px spacing with line-height 40px felt just right!<\/li>\n<\/ul>\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:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1p_YwOJYEiIMeCmq1jgdVVw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1p_YwOJYEiIMeCmq1jgdVVw.png\" alt=\"\" width=\"1480\" height=\"872\" \/><\/a><\/p>\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>I tackled h2 next. In our product, h2 happens to be the first header in the white page container. So by the rule for containers, the topmost h2 got 16px at the top. I decided to give 16px spacing (maximum allowed spacing) on top of all h2s because that value made parent section hierarchy super clear.<\/li>\n<\/ul>\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\/2017\/11\/1PO663ZFBsFXBAs3KgvULLQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1PO663ZFBsFXBAs3KgvULLQ.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<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Next, I experimented with spacing values of 0px, 2px, 4px and 8px between all headers (h2,h3,h4,h5) and leaf-nodes (lists, paragraphs, table, forms). Spacing outcomes of 2px and 4px felt close enough, but 2px margins felt slightly better as we reviewed the outcomes internally within design team. <em>Try to stick with just 1 margin value as much as you can, as it simplifies design as well as development process.<\/em><\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 1850px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1s2PuHSNE59aoWs_AmmRv9Q.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\/2017\/11\/1s2PuHSNE59aoWs_AmmRv9Q.png\" alt=\"\" width=\"1840\" height=\"1744\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Header &amp; leaf node spacing experiments<\/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<div id=\"attachment_6580\" style=\"width: 3562px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1v3UoQw4egWJJYp8VUHyPzg.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\/2017\/11\/1v3UoQw4egWJJYp8VUHyPzg.png\" alt=\"\" width=\"3552\" height=\"3084\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Header stacks \u2014 spacing with 2px and\u00a04px<\/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<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;\">B) Solve leaf-node stacks\u00a0next<\/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\">Practice Fusion\u2019s EHR has <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">4 main types of leaf-nodes<\/strong>:<\/p>\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>Tables (almost 50% of the product)<\/li>\n<li>Lists (almost 30% of the product)<\/li>\n<li>Forms (probably 15% of the product)<\/li>\n<li>Paragraphs (probably 5% of the product)<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I started addressing spacing for the simplest content type first?\u2014?paragraph.<\/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;\">Spacing within each paragraph<\/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\">This was the simplest?\u2014?simply flush all lines of text in a paragraph such that there is 0px margin between 2 lines. Everything that did not look like a list (example, 2-line content in table row), got paragraph spacing too.<\/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\/2017\/11\/1PMSGPmF4jguuFWs9qKwNbQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1PMSGPmF4jguuFWs9qKwNbQ.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\">Typesetting paragraph in Sketch (Line height of 20px was derived by doing visual explorations and validated using the WCAG SC 1.4.8 which states \u201c<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Line spacing (leading) is at least space-and-a-half within paragraphs<\/strong>\u201d (20\/13 =\u00a01.538)<\/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;\">Spacing between 2 consecutive paragraphs<\/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\">My first impulse was to use spacing equal to line-height = 20px. But then, I came across WCAG SC 1.4.8 which states \u2014 <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cParagraph spacing is (<em>at least)<\/em> 1.5 times larger than the line spacing \u2014 by that we mean that the spacing from the top of the last line of 1 paragraph is 250% farther from the top of the first line of the next paragraph.*<\/strong>\u201d Assuming that the % values are calculated with respect to the base font-size of 13px, I calculated that the actual spacing between 2 paragraphs should be about (ps \u2014 ls) = 13px, which will be defined in CSS using margin-bottom: 13px. Now, 13px is not one of the spacing values we determined in step 2. So, I chose the closest spacing value more than 13px i.e. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">16px for my margin-bottom for paragraphs<\/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\"><em>* I found these 2 guidelines not aligning in values, but very close enough. I interpreted the first line as ps = 1.5 x ls = 1.5 x 1.5 x 13px = 2.25 x 13px. The second line interpretation: ps = 2.5 x 13px. If any of you are interpreting these guidelines in a different way, do let me know in comments.<\/em><\/p>\n<div id=\"attachment_6580\" style=\"width: 1547px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1k5v3IH1gi2oq_B5LiRFcBw.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\/2017\/11\/1k5v3IH1gi2oq_B5LiRFcBw.png\" alt=\"\" width=\"1537\" height=\"453\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Interpreting the paragraph spacing clause in WCAG SC\u00a01.4.8<\/p><\/div>\n<div id=\"attachment_6580\" style=\"width: 878px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ex3KZnRcWdD6AkI64tcjKw.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\/2017\/11\/1ex3KZnRcWdD6AkI64tcjKw.png\" alt=\"\" width=\"868\" height=\"235\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Typesetting multiple paragraphs in\u00a0Sketch<\/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\">When in doubt about calculations, I always cross-check with visual explorations. 16px spacing between paragraphs worked best as compared to other possible values. (I thought that 12px spacing worked even better. But, I did not want to add an additional value to the spacing system just for this use case, as our EHR product does not have many paragraphs and hardly any consecutive paragraphs.)<\/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\/2017\/11\/15mMtEdU6JDItLwxDrbUVOg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/15mMtEdU6JDItLwxDrbUVOg.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<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;\">Spacing within list items in a\u00a0list<\/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 list is a data structure made of multiple items of homogenous data. Since a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">list groups all these homogenous data items<\/strong>, it is important that the list items are not spaced apart like paragraphs (with 16px in between them), which typically hold heterogenous ideas. At the same time, the list items still need to be spaced apart a little bit \u2014 or they might end up looking like 1 paragraph. So, I experimented with spacing between 0px and 16px. I had just 3 values to experiment with \u2014 2,4 and 8. Total 4px spacing between list items looked the best for hierarchy.<\/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\/2017\/11\/18bnzzC70e0YSGFAgGAgW4g.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/18bnzzC70e0YSGFAgGAgW4g.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<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;\">Spacing between 2 consecutive input fields with\u00a0labels<\/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\">Forms have consecutive input fields stacked one below the other.<\/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\/2017\/11\/1PZzHFP33WLsol8uyZUPbJw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1PZzHFP33WLsol8uyZUPbJw.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<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;\">Spacing between 2 consecutive input fields without\u00a0labels<\/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\">Not having labels is not a good practice for accessibility. Yet, in certain situations, it seems like it is best to not display labels in UI (but continue to declare labels in implementation to ensure accessibility and hide them out of viewport using huge margins). These scenarios are:<\/p>\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>When multiple input fields together imply 1 object (example, in Address section below, \u201cAddress\u201d fieldset legend groups street address 1, street address 2, city, state, zip)<\/li>\n<li>When label is too obvious \/ repetitive to be spelled out (example, Search bar or Query builder)<\/li>\n<\/ul>\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 such situations, depending on whether you are using fieldset legend or not, different spacing works. Since fieldset legend groups fields to imply 1 object, it uses less spacing (8px). However, when you don\u2019t want to logically group input fields as 1 object, more spacing helps (16px) \u2014 just like consecutive paragraph 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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1US0OVfyznK_1yXvEkr2hJQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1US0OVfyznK_1yXvEkr2hJQ.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<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;\">Spacing inside\u00a0tables<\/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\">Tables are very useful for grouping data of similar type \u2014 just like lists. However, tables are used when data is much more dense and has many attributes. And so, spacing considerations for table are slightly more than list spacing. If the data is spaced too close, it can be difficult to read through an entire table row, without getting distracted by adjacent row data. By having 8px between table text and table row borders, we get a total of 16px spacing between text across 2 rows. This is again very similar to our consecutive paragraph spacing of 16px.<\/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\/2017\/11\/1UMhWlm3bo6qiayyK0gp5ow.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1UMhWlm3bo6qiayyK0gp5ow.png\" \/><\/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<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;\">3rd C: Rule for 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\">Components are buttons, input fields, icons, etc. These components are often placed next to each other horizontally (<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">inline<\/strong>). Also all components were <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">sized with dimensions as multiples of 4<\/strong> (also of 8). So buttons and input fields had an internal space of height 24px (and together with 1px top and 1 px bottom border, the overall height was 26px). <em>When individual components and type sit perfectly on baseline grid and is proportionately spaced, overall layout is perfectly aligned and harmonious.<\/em><\/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;\">Spacing 2 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\">I used a simple rule of applying 8px for spacing between any 2 adjacent components most of the times. For a few cases, I decided to use 4px to show a tighter relationship between 2 components (Gestalt\u2019s law of proximity).<\/p>\n<div id=\"attachment_6580\" style=\"width: 1617px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/11Rk3lA0hZn0J7wP9igbLSQ.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\/2017\/11\/11Rk3lA0hZn0J7wP9igbLSQ.png\" alt=\"\" width=\"1607\" height=\"410\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Inline spacing of 8px (pink) and 4px\u00a0(orange)<\/p><\/div>\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;\">Spacing inside 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\">I used 8px consistently for any left \/ right paddings inside components.<\/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\/2017\/11\/1HD9ye3dCm1J6sBhCEUqWQA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1HD9ye3dCm1J6sBhCEUqWQA.png\" \/><\/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;\">Design Spacing inside components with icons<\/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\">Once again \u2014 applying Gestalt\u2019s law of proximity, I grouped icons inside a component, by spacing them 4px apart \u2014 instead of the usual 8px.<\/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\/2017\/11\/1y6jQ6FM3ffD6sbvfQ0l4Aw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1y6jQ6FM3ffD6sbvfQ0l4Aw.png\" \/><\/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;\">Spacing components from outside\u00a0icons<\/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\">If an icon is associated with a component, it is spaced at 4px from the component to show association relationship (Gestalt\u2019s principle of proximity). However, if an icon is associated with a set of components, then it is spaced at 8px from the last component to clarify that it is not associated with just the last component, but the entire set.<\/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\/2017\/11\/1huRm0kTn7xYcdtet7vDpkA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1huRm0kTn7xYcdtet7vDpkA.png\" \/><\/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;\">In conclusion<\/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\">By following this process:<\/p>\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>You will come up with a design spacing system with limited values and limited application rules <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(Hick\u2019s law)<\/strong>\u2014 which are very easy and logical to remember <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(Gestalt\u2019s principles of proximity<\/strong>).<\/li>\n<li>You will be using design spacing in your UI such that it <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">respects information hierarchy<\/strong> and also adheres to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">accessibility guideline WCAG 1.4.8<\/strong>. This will allow people of different abilities to track and comprehend information more easily.<\/li>\n<li>I might sound like a broken record here, if you have read <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd\">my typography system post<\/a>. But, I will repeat it here \u2014 Design-dev handoffs will become faster as the developers will also know all the rules of application of design spacing system and be able to predict spacing in mocks delivered by designers.<\/li>\n<li>Designers may not need to redline everything. Developers will not need to spend time in inspecting mocks in other tools like Zeplin.<\/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;\">What\u2019s next?<\/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\">I will be diving into designing accessible color system next. Stay tuned (by following 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\">You can also follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/priyankagodbole\">Twitter<\/a>. Thank you for taking the time to read this far!<\/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;\">Useful articles for reference:<\/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\">Though there are plenty of articles touching on why white space is important in design, I did not find a lot of resources explaining a systematic practical approach to handle design spacing.<\/p>\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><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/eightshapes-llc\/space-in-design-systems-188bcbae0d62\">https:\/\/medium.com\/eightshapes-llc\/space-in-design-systems-188bcbae0d62<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/builttoadapt.io\/8-point-grid-borders-and-layouts-e91eb97f5091\">https:\/\/builttoadapt.io\/8-point-grid-borders-and-layouts-e91eb97f5091<\/a><\/li>\n<\/ul>\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>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/@priyanka_godbole\">Priyanka's Medium page<\/a>.<\/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:\/\/shopjessicabuckley.com\/blog\/what-is-design-strategy\/\" target=\"_blank\" rel=\"noopener noreferrer\">What is Design Strategy?<\/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:\/\/shopjessicabuckley.com\/blog\/make-design-decisions\/\" target=\"_blank\" rel=\"noopener noreferrer\">How Do You Make Design Decisions?<\/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:\/\/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:\/\/shopjessicabuckley.com\/blog\/defining-design-principles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Defining Design Principles<\/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:\/\/shopjessicabuckley.com\/blog\/scalable-design-foundation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Scalable Design Foundation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I recently worked on defining the spacing system for Practice Fusion\u2019s EHR (Electronic Health Record) product, to ensure improved readability and consistency across all pages. I came up with 3 spacing rules (hint: rule of 3 C\u2019s) and 4 spacing values, which worked harmoniously well with the new typographic system. The problem &#8220;When positioning elements vertically, the designer has to&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":186,"featured_media":13567,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[484],"tags":[],"class_list":["post-13526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-systems"],"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=\"A framework for enabling design &amp; development teams to use design spacing deliberately for improved readability and consistency in product.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A harmonious spacing system for faster design-dev handoff | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"A framework for enabling design &amp; development teams to use design spacing deliberately for improved readability and consistency in product.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/\" \/>\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=\"2017-11-16T15:04:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-13T21:11:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/Design-dev.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2672\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\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=\"10 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/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:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/Design-dev.png\",\"width\":2672,\"height\":1500},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/\",\"name\":\"A harmonious spacing system for faster design-dev handoff | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#primaryimage\"},\"datePublished\":\"2017-11-16T15:04:34+00:00\",\"dateModified\":\"2020-12-13T21:11:32+00:00\",\"description\":\"A framework for enabling design & development teams to use design spacing deliberately for improved readability and consistency in product.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/aa727197b1def964268bf527865aeb95\"},\"headline\":\"A harmonious spacing system for faster design-dev handoff\",\"datePublished\":\"2017-11-16T15:04:34+00:00\",\"dateModified\":\"2020-12-13T21:11:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#primaryimage\"},\"articleSection\":\"Design Systems\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/harmonious-spacing-system-faster-design-dev-handoff\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/aa727197b1def964268bf527865aeb95\",\"name\":\"Priyanka Godbole\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c8fb68194ff4577eab0500023bd31a72d4b5f35b34692419659e6a8a5a5f31e6?s=96&d=mm&r=g\",\"caption\":\"Priyanka Godbole\"},\"description\":\"Product designer @ Practice Fusion; Passionate about accessible design systems, Illustrations on https:\/\/dribbble.com\/priyankagodbole\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/186"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=13526"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/13567"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=13526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=13526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=13526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}