CINXE.COM

<!DOCTYPE html><html data-wf-domain="www.abstract.com" data-wf-page="643d81ef999b1cff3272acf5" data-wf-site="5ff3926f03b3ba26b7d639cb" lang="en" data-wf-collection="643d81ef999b1c0f7a72acb0" data-wf-item-slug="salesforce-lightning-design-system"><head><meta charset="utf-8"/><title>How Abstract helps Salesforce create Lightning Design System's striking experience</title><meta content="Designers at the world's largest cloud CRM platform say they keep their cool thanks to "trust, teamwork, and tools like Abstract."" name="description"/><meta content="How Abstract helps Salesforce create Lightning Design System's striking experience" property="og:title"/><meta content="Designers at the world's largest cloud CRM platform say they keep their cool thanks to "trust, teamwork, and tools like Abstract."" property="og:description"/><meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce.jpeg" property="og:image"/><meta content="How Abstract helps Salesforce create Lightning Design System's striking experience" property="twitter:title"/><meta content="Designers at the world's largest cloud CRM platform say they keep their cool thanks to "trust, teamwork, and tools like Abstract."" property="twitter:description"/><meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce.jpeg" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/css/fs-abstract-v2.5667a4efe.css" rel="stylesheet" type="text/css"/><style>@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0"] {display:none;opacity:0;}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0"] {display:none;opacity:0;}}</style><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/5ff3926f03b3bac721d639f4_favicon-small.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/5ff3926f03b3baa809d639fc_favicon.png" rel="apple-touch-icon"/><link href="rss.xml" rel="alternate" title="RSS Feed" type="application/rss+xml"/><script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script> <script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = {"consentOnScroll":false,"whitelabel":false,"lang":"en","siteId":1889649,"cookiePolicyId":91605901,"cookiePolicyUrl":"https://www.abstract.com/legal/cookie-policy/", "banner":{ "acceptButtonDisplay":true,"acceptButtonColor":"#ffffff","acceptButtonCaptionColor":"#191a1b","rejectButtonColor":"#0073CE","rejectButtonCaptionColor":"white","position":"float-bottom-left","textColor":"white","backgroundColor":"#242424","content":"We use cookies to collect and analyze information on site performance and usage, and to enhance and customize content and advertisements. To find out more or to change your cookie settings, please visit our <a href=\"https://www.abstract.com/legal/cookie-policy/\">Cookie Policy</a>." }}; </script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> <script> !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.13.1"; analytics.load("Ro3i6wRonikkJnYwYzAGOAuFmaQQHQx4"); analytics.page(); }}(); </script>  <script type="text/javascript"> (function() { var t = document.createElement('script'), s = document.getElementsByTagName('script')[0]; t.async = true; t.id = 'cio-forms-handler'; t.setAttribute('data-site-id', '80a43a6f3aab248f9bec'); t.setAttribute('data-base-url', 'https://customerioforms.com'); t.src = 'https://customerioforms.com/assets/forms.js'; s.parentNode.insertBefore(t, s); })(); </script> <style> /* Remove tap highlight on mobile */ input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } /*smoother text*/ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /*make inputs unstyled in safari*/ textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], { -webkit-appearance: none; } /* Get rid of textarea resizer */ textarea { resize: none } </style><meta content="How Abstract helps Salesforce create Lightning Design System's striking experience" property="twitter:title"> <meta content="Designers at the world's largest cloud CRM platform say they keep their cool thanks to "trust, teamwork, and tools like Abstract."" property="twitter:description"> <meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce.jpeg" property="twitter:image"> <meta property="og:type" content="website"> <meta content="summary_large_image" name="twitter:card"> <meta property="og:image:alt" content="How Abstract helps Salesforce create Lightning Design System's striking experience" /></head><body><div class="custom-styles w-embed"><style> /*set default font*/ html { font-size:16px; } html, body{ height: 100%; } /* Blending modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /*colorize text selection */ ::-moz-selection { /* Firefox */ background: #C9D5D3; } ::selection { background: #C9D5D3; } /*add no events class*/ .no-pointer-events { pointer-events: none; } /*add no select class*/ .no-select { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ } /*make sure the upper headings in rich text blocks are without top margin*/ .rich-text h1:first-child { margin-top: 0; } .rich-text-designis h2:first-child { margin-top: 0; } .rich-text h2:first-child { margin-top: 0; } .rich-text h3:first-child { margin-top: 0; } .rich-text h4:first-child { margin-top: 0; } .rich-text h5:first-child { margin-top: 0; } .rich-text h6:first-child { margin-top: 0; } .rich-text figure:first-child { margin-top: 0; } /*make last elements in rich text to be marginless*/ .rich-text p:last-child { margin-bottom: 0; } .rich-text-designis p:last-child { margin-bottom: 0; } .rich-text blockquote:last-child { margin-bottom: 0; } .rich-text ol:last-child { margin-bottom: 0; } .rich-text ul:last-child { margin-bottom: 0; } .rich-text ol li:last-child { margin-bottom: 0; } .rich-text ul li:last-child { margin-bottom: 0; } .rich-text blockquote:before { content: '\201C'; position: absolute; top: 0; left: -0.4em; text-align: right; } .rich-text blockquote:after { content: '\201D'; } /*reset selects, buttons, and links*/ .w-input, .w-select, a { color: inherit; text-decoration: inherit; font-size: inherit; } .text-highlight a { color: inherit; text-decoration: none; cursor: inherit; } .text-highlight a:hover { color: inherit; text-decoration: none; } .w-select { /* resetting default form style for custom icon*/ -moz-appearance: none; -webkit-appearance: none; appearance: none; background-position: right 0.5rem center !important; } .block-quote:before { content: '\201C'; position: absolute; top: 0; left: -0.4em; text-align: right; } .text-gtsuper { font-variant-numeric: lining-nums; } .break-text { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } ol.decimal li:before { counter-increment: item; content: counters(item, ".") " "; display: inline-block; margin-right: 1rem; font-weight: 700; } ol.decimal li:first-child { counter-reset: item; } ol.lower-latin>li, ol.lower-latin>li>ol>li { list-style: lower-latin; list-style-position: inside; } ol.lower-latin>li:before, ol.lower-latin>li>ol>li:before { display: none; content: ""; margin: 0; } ol.decimal ol.lower-latin li { list-style: lower-latin; list-style-position: inside; } ol.decimal ul>li:before { display: none; } ol.lower-latin ol.lower-roman li { list-style: lower-roman; list-style-position: inside; } .r-item-info, .r-main-item-img, .r-grid-hover { transition: transform 700ms cubic-bezier(0.8,0,0.2,1) 0ms; } .r-grid-blocks-list .r-grid-block:nth-child(7n-13), .r-grid-blocks-list .r-grid-block:nth-last-child(1):nth-child(odd){ width: 100%; padding-top: 50%; } .cs-form-wrapper { transition: opacity 350ms linear 0ms; } .cs-form-close, .cs-form-open { cursor: pointer; } .cs-form-wrapper.active { display: flex; opacity: 1; transition: opacity 350ms linear 0ms; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } .cs-form-group label { transition: all 200ms ease-in-out 0ms; } .cs-form-group label.active { font-size: 12px; top: 10px; } .cs-form-group label.focused { color: #4C5FD5; } .cs-form-highlight.active { transition: width 100ms cubic-bezier(.7,0,.3,1) 0ms; } .cs-form-highlight.active { width: 100%; transition: width 300ms cubic-bezier(.7,0,.3,1) 0ms; } .cs-form-text-area { resize: vertical; height: 48px; } .cs-form-field { font-size: 16px } .cs-form-label { user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; pointer-events:none; } .r-marquee-link-block { position: relative; overflow: hidden; } .r-marquee-item-block { width: auto; display: flex; position: relative; --offset: 100%; --move-initial: 0; --move-final: calc(-200% + var(--offset)); transform: translate3d(0,0,0); transform: translate3d(var(--move-initial), 0, 0); animation: marquee 10s linear infinite; animation-play-state: running; } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } </style></div><a id="skip-link" href="#" class="skip-link no-anchor">skip to content<br/></a><section class="cs-form-wrapper"><div class="cs-form-click-away cs-form-close"></div><div class="cs-form-modal"><div class="cs-form w-form"><div class="cs-form-header"><div class="cs-form-title">Contact Sales</div><div class="cs-form-exit cs-form-close"><div class="cs-exit-bar cs-exit-bar-1"></div><div class="cs-exit-bar cs-exit-bar-2"></div></div></div><form id="wf-form-contactSales" name="wf-form-contactSales" data-name="contactSales" method="get" class="cs-form" data-wf-page-id="643d81ef999b1cff3272acf5" data-wf-element-id="2f26523a-676b-0736-1758-07b13c5a20e2"><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="email" data-name="email" placeholder="" type="email" id="email-11" required=""/><label for="Email-11" class="cs-form-label">Email</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="firstName" data-name="firstName" placeholder="" type="text" id="firstName-8" required=""/><label for="First-Name" class="cs-form-label">First name</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="lastName" data-name="lastName" placeholder="" type="text" id="lastName-8" required=""/><label for="Last-Name" class="cs-form-label">Last name</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="company" data-name="company" placeholder="" type="text" id="company-9" required=""/><label for="Email-11" class="cs-form-label">Company</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><select id="Estimated-Design-Users" name="Est.-Design-Users" data-name="Est. Design Users" required="" class="cs-form-field w-select"><option value="">Select one...</option><option value="100+ contributors">100+ contributors</option><option value="50-99 contributors">50-99 contributors</option><option value="25-49 contributors">25-49 contributors</option><option value="10-24 contributors">10-24 contributors</option></select><label for="" class="cs-form-label">Estimated Contributor Seats</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><textarea id="comments-7" name="comments" maxlength="5000" data-name="comments" placeholder="" class="cs-form-field cs-form-text-area w-input"></textarea><label for="Email-12" class="cs-form-label">Comments (optional)</label><div class="cs-form-highlight"></div></div><div class="cs-form-section-title">I’d like to learn more about:</div><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="organizingDesigns" type="checkbox" name="organizingDesigns" data-name="organizingDesigns" style="opacity:0;position:absolute;z-index:-1"/><span for="organizingDesigns" class="cs-form-radio-text w-form-label">Organizing designs into projects</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="streamliningReviews" type="checkbox" name="streamliningReviews" data-name="streamliningReviews" style="opacity:0;position:absolute;z-index:-1"/><span for="streamliningReviews" class="cs-form-radio-text w-form-label">Streamlining the review process</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="sharingEvolution" type="checkbox" name="sharingEvolution" data-name="sharingEvolution" style="opacity:0;position:absolute;z-index:-1"/><span for="sharingEvolution" class="cs-form-radio-text w-form-label">Sharing the evolution of designs</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="versionControl" type="checkbox" name="versionControl" data-name="versionControl" style="opacity:0;position:absolute;z-index:-1"/><span for="versionControl" class="cs-form-radio-text w-form-label">Version control for Sketch files</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="other" type="checkbox" name="other" data-name="other" style="opacity:0;position:absolute;z-index:-1"/><span for="other" class="cs-form-radio-text w-form-label">Other</span></label><div data-sitekey="6LcaaBcqAAAAAHGxbhANyJehugFxM3XEhAlSrzNU" class="w-form-formrecaptcha g-recaptcha g-recaptcha-error g-recaptcha-disabled"></div><input type="submit" data-wait="Please wait..." class="cs-form-submit-btn w-button" value="Submit"/></form><div class="cs-success w-form-done"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/6100656f4aa5c63a91736881_check.svg" loading="lazy" alt="Checkmark Illustration" class="cs-success-img"/><div class="cs-success-headline">Thank you!</div><div class="cs-success-copy">You'll hear back from our team shortly.</div><div class="button button-small cs-success-btn cs-form-close">Close Form</div></div><div class="cs-error w-form-fail"><div class="cs-error-message">Oops! Something didn't work. Please try again.</div></div></div></div></section><div class="page"><div class="topbar-wrapper"><div class="w-dyn-list"><div class="collection-empty w-dyn-empty"><div>No items found.</div></div></div></div><div class="nav-outer-wrapper"><div class="c-header"><div class="c-section c-section-header"><div class="c-grid c-grid-header"><div id="w-node-d2797371-cb25-451d-99b8-1de0a99b68da-a99b68d7" class="header-logo-container"><a href="/" class="header-logo-link w-inline-block"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/60c388bf3c3ae4d1d10653e7_Abstract_Wordmark-White.svg" loading="lazy" alt="" class="header-logo"/></a></div><div data-w-id="d2797371-cb25-451d-99b8-1de0a99b68f2" class="header-menu-icon"><div class="header-menu-bar header-menu-bar-1"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div><div class="header-menu-bar header-menu-bar-2"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div><div class="header-menu-bar header-menu-bar-3"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div></div><div id="w-node-d2797371-cb25-451d-99b8-1de0a99b68ed-a99b68d7" class="header-cta-container"><a href="https://app.abstract.com/signin" class="c-link c-link-text c-link-text-reverse">Sign in</a></div></div></div><div data-w-id="d2797371-cb25-451d-99b8-1de0a99b68f9" class="c-section c-section-mobile-menu"><div class="c-grid c-grid-header-mobile-nav"><div class="header-mobile-nav"><a href="#" class="header-mobile-nav-link w-inline-block"><div>Notebooks</div></a><a href="/" class="header-mobile-nav-link w-inline-block"><div>Branches</div></a><a href="/pricing" class="header-mobile-nav-link w-inline-block"><div>Pricing</div></a></div><div class="header-mobile-ctas"><a href="https://app.abstract.com/signup" class="c-link c-link-btn c-link-btn-white">Try Notebooks</a><a href="https://app.abstract.com/signin" class="header-mobile-sign-in">Sign in</a></div></div></div></div></div><nav class="blog-navigation"><div class="blog-navigation-main"><div class="section"><div class="container-max"><div class="flex-h-ac-jsb"><div class="heading-blog-nav heading-m"><a href="/blog">Blog</a></div><div class="blog-navigation-right-part"><a href="https://www.abstract.com/category/product" class="blog-nav-category-link bncl-featured w-button">Product</a><a href="/category/inspiration" class="blog-nav-category-link bncl-featured w-button">Inspiration</a><a href="/category/inside-abstract" class="blog-nav-category-link bncl-featured w-button">Inside Abstract</a><a href="/category/customer-stories" class="blog-nav-category-link bncl-featured w-button">Customer Stories</a><div data-hover="false" data-delay="100" data-w-id="7b7e8081-2634-cee2-9ec4-65df3c9426ca" class="blog-nav-category-link bncl-ellipses w-dropdown"><div class="blog-nav-ellipses w-dropdown-toggle"><div class="blog-more-toggle"><div class="more-toggle-dot dot-1"></div><div class="more-toggle-dot dot-2"></div><div class="more-toggle-dot dot-3"></div></div></div><nav class="blog-nav-dropdown w-dropdown-list"><div class="section"><div class="container-max"><div class="w-layout-grid grid-grid g-blog-nav"><div><h1 class="heading-s">Categories</h1><div class="blog-nav-dropdown-list"><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/category/customer-stories" class="text-link tl-blog-dropdown">Customer Stories</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/inside-abstract" class="text-link tl-blog-dropdown">Inside Abstract</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/inspiration" class="text-link tl-blog-dropdown">Inspiration</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/product" class="text-link tl-blog-dropdown">Product</a></div></div></div></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426e0-3c9426bc"><h1 class="heading-s">Tags</h1><div class="blog-nav-dropdown-list"><div class="blog-nav-dropdown-gradient-top"><div class="blog-nav-dropdown-gradient bndg-top no-pointer-events"></div></div><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/tag/branches" class="text-link tl-blog-dropdown">Abstract Branches</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/announcements" class="text-link tl-blog-dropdown">Announcements</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/brand" class="text-link tl-blog-dropdown">Brand</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/career-development" class="text-link tl-blog-dropdown">Career Development</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/champions-toolkit" class="text-link tl-blog-dropdown">Champion's Toolkit</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/change-management" class="text-link tl-blog-dropdown">Change Management</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/collaboration" class="text-link tl-blog-dropdown">Collaboration</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/community" class="text-link tl-blog-dropdown">Community</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-leadership" class="text-link tl-blog-dropdown">Design Leadership</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-process" class="text-link tl-blog-dropdown">Design Process</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-reviews" class="text-link tl-blog-dropdown">Design Reviews</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-systems" class="text-link tl-blog-dropdown">Design Systems</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-workflow" class="text-link tl-blog-dropdown">Design Workflow</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/designops" class="text-link tl-blog-dropdown">DesignOps</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/developer-handoff" class="text-link tl-blog-dropdown">Developer Handoff</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/enterprise" class="text-link tl-blog-dropdown">Enterprise</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/events" class="text-link tl-blog-dropdown">Events</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/inclusion" class="text-link tl-blog-dropdown">Inclusion</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/libraries" class="text-link tl-blog-dropdown">Libraries</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/linked-libraries" class="text-link tl-blog-dropdown">Linked Libraries</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/open-design" class="text-link tl-blog-dropdown">Open Design</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/overheard" class="text-link tl-blog-dropdown">Overheard</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/by-design" class="text-link tl-blog-dropdown">Podcast</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/projects" class="text-link tl-blog-dropdown">Projects</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/research-ops" class="text-link tl-blog-dropdown">Research Ops</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/sketch" class="text-link tl-blog-dropdown">Sketch</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/tips" class="text-link tl-blog-dropdown">Tips</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/version-control" class="text-link tl-blog-dropdown">Version Control</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/video" class="text-link tl-blog-dropdown">Video</a></div></div></div></div><div class="blog-nav-dropdown-gradient no-pointer-events"></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426ef-3c9426bc"><h1 class="heading-s">Authors</h1><div class="blog-nav-dropdown-list"><div class="blog-nav-dropdown-gradient-top"><div class="blog-nav-dropdown-gradient bndg-top no-pointer-events"></div></div><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/author/alden-spence" class="text-link tl-blog-dropdown">Alden Spence</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/alison-harshbarger" class="text-link tl-blog-dropdown">Alison Harshbarger</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/alyshia-olsen" class="text-link tl-blog-dropdown">Alyshia Olsen</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/amy-schroeder" class="text-link tl-blog-dropdown">Amy Schroeder</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/andrea-burton" class="text-link tl-blog-dropdown">Andrea Burton</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/andrew-mccloud" class="text-link tl-blog-dropdown">Andrew McCloud</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/ben-erez" class="text-link tl-blog-dropdown">Ben Erez</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/daina-lightfoot" class="text-link tl-blog-dropdown">Daina Lightfoot</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/david-xie" class="text-link tl-blog-dropdown">David Xie</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/deana-tucker" class="text-link tl-blog-dropdown">Deana Tucker</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/edgardo-perez" class="text-link tl-blog-dropdown">Edgardo Perez</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/hannah-shadrick" class="text-link tl-blog-dropdown">Hannah Shadrick</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/heather-phillips" class="text-link tl-blog-dropdown">Heather Phillips</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jabu-dayton" class="text-link tl-blog-dropdown">Jabu Dayton</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jonathan-snook" class="text-link tl-blog-dropdown">Jonathan Snook</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jordan-staniscia" class="text-link tl-blog-dropdown">Jordan Staniscia</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/josh-brewer" class="text-link tl-blog-dropdown">Josh Brewer</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/josh-taylor" class="text-link tl-blog-dropdown">Josh Taylor</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kasey-fleisher-hickey" class="text-link tl-blog-dropdown">Kasey Fleisher Hickey</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kelly-watkins" class="text-link tl-blog-dropdown">Kelly Watkins</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kevin-smith" class="text-link tl-blog-dropdown">Kevin Smith</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lashaun-williams" class="text-link tl-blog-dropdown">LaShaun Williams</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lesley-alegria" class="text-link tl-blog-dropdown">Lesley Alegría</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lindsay-brechler" class="text-link tl-blog-dropdown">Lindsay Brechler</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/matt-colyer" class="text-link tl-blog-dropdown">Matt Colyer</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/mia-blume" class="text-link tl-blog-dropdown">Mia Blume</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/payam-rajabi" class="text-link tl-blog-dropdown">Payam Rajabi</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/rukmini-reddy" class="text-link tl-blog-dropdown">Rukmini Reddy</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sara-howshar" class="text-link tl-blog-dropdown">Sara Howshar</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sara-zhang" class="text-link tl-blog-dropdown">Sara Zhang</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sarah-mcilwain" class="text-link tl-blog-dropdown">Sarah McIlwain</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/scott-welliver" class="text-link tl-blog-dropdown">Scott Welliver</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sean-catangui" class="text-link tl-blog-dropdown">Sean Catangui</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/tim-van-damme" class="text-link tl-blog-dropdown">Tim Van Damme</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/vince-joy" class="text-link tl-blog-dropdown">Vince Joy</a></div></div></div></div><div class="blog-nav-dropdown-gradient no-pointer-events"></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426fe-3c9426bc"><h1 class="heading-s">Sharing</h1><div><div class="space-top-m"><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path d="M10.488 18V12.372H9V10.344H10.488C10.488 10.344 10.488 9.516 10.488 8.616C10.488 7.248 11.364 6 13.392 6C14.208 6 14.82 6.084 14.82 6.084L14.772 7.98C14.772 7.98 14.148 7.98 13.476 7.98C12.744 7.98 12.624 8.316 12.624 8.88C12.624 9.324 12.624 7.944 12.624 10.356H14.82L14.724 12.384H12.636V18H10.488Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Facebook</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a></div></div><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path d="M9.33195 17.6991C14.5292 17.6991 17.3731 13.3892 17.3731 9.65802C17.3731 9.53677 17.3731 9.41552 17.3675 9.29427C17.9187 8.89745 18.3982 8.39592 18.7785 7.82824C18.2714 8.05421 17.7258 8.20302 17.1526 8.27467C17.7368 7.92745 18.1832 7.3708 18.3982 6.70943C17.8526 7.0346 17.2463 7.26608 16.6015 7.39284C16.0889 6.84171 15.3504 6.5 14.5402 6.5C12.9805 6.5 11.7129 7.76762 11.7129 9.32734C11.7129 9.5478 11.7404 9.76274 11.7845 9.97217C9.43667 9.85092 7.35336 8.7266 5.95898 7.01807C5.71648 7.43694 5.5787 7.92194 5.5787 8.44001C5.5787 9.42103 6.08023 10.2863 6.83529 10.7934C6.37233 10.7768 5.93694 10.6501 5.55114 10.4406C5.55114 10.4517 5.55114 10.4627 5.55114 10.4792C5.55114 11.846 6.52665 12.9924 7.81632 13.2514C7.57933 13.3176 7.33132 13.3507 7.07228 13.3507C6.89041 13.3507 6.71404 13.3341 6.54319 13.3011C6.90143 14.4254 7.94859 15.2411 9.18314 15.2631C8.21314 16.0237 6.99512 16.4756 5.67239 16.4756C5.44642 16.4756 5.22046 16.4646 5 16.437C6.25108 17.2307 7.73916 17.6991 9.33195 17.6991Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Twitter</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a></div></div><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72437 17.2996V9.55997H6.15648V17.2996H8.72437ZM7.44043 8.50401C8.34039 8.50401 8.89237 7.90404 8.89237 7.17207C8.88037 6.4041 8.34039 5.82812 7.45243 5.82812C6.57646 5.82812 6.00049 6.4041 6.00049 7.17207C6.00049 7.91604 6.55247 8.50401 7.41643 8.50401H7.44043Z" fill="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1525 17.2996H12.7204V12.9798C12.7204 12.7518 12.7324 12.5118 12.8044 12.3559C12.9844 11.8879 13.4164 11.4199 14.1243 11.4199C15.0603 11.4199 15.4323 12.1279 15.4323 13.1718V17.3116H18.0002V12.8718C18.0002 10.4959 16.7282 9.39198 15.0363 9.39198C13.6444 9.39198 13.0444 10.1719 12.6964 10.6999H12.7204V9.57197H10.1525C10.1765 10.2799 10.1525 17.2996 10.1525 17.2996Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">LinkedIn</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></div></div><a href="#" class="blog-social-link link-copy w-inline-block"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49632 11.9997C7.80726 11.6888 8.31139 11.6888 8.62233 11.9997C8.93327 12.3106 8.93327 12.8148 8.62233 13.1257L8.05932 13.6887C7.43744 14.3106 7.43744 15.3189 8.05932 15.9407C8.6812 16.5626 9.68947 16.5626 10.3113 15.9407L12.5634 13.6887C13.1853 13.0668 13.1853 12.0586 12.5634 11.4367C12.2524 11.1258 12.2524 10.6216 12.5634 10.3107C12.8743 9.99974 13.3784 9.99974 13.6894 10.3107C14.9332 11.5544 14.9332 13.571 13.6894 14.8147L11.4374 17.0668C10.1936 18.3105 8.17707 18.3105 6.93331 17.0668C5.68955 15.823 5.68955 13.8065 6.93331 12.5627L7.49632 11.9997ZM16.5043 11.9999C16.1934 12.3108 15.6892 12.3108 15.3783 11.9999C15.0674 11.6889 15.0674 11.1848 15.3783 10.8739L15.9413 10.3109C16.5632 9.68898 16.5632 8.68071 15.9413 8.05883C15.3194 7.43695 14.3112 7.43695 13.6893 8.05883L11.4373 10.3109C10.8154 10.9327 10.8154 11.941 11.4373 12.5629C11.7482 12.8738 11.7482 13.378 11.4373 13.6889C11.1263 13.9998 10.6222 13.9998 10.3112 13.6889C9.06749 12.4451 9.06749 10.4286 10.3112 9.18485L12.5633 6.93282C13.807 5.68906 15.8236 5.68906 17.0673 6.93282C18.3111 8.17658 18.3111 10.1931 17.0673 11.4369L16.5043 11.9999Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Copy link</div></a></div></div></div></div></div></div></nav></div></div></div></div></div></div><div><div data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0" class="blog-navigation-post"><div class="section"><div class="container-max"><div class="flex-h-ac-jsb"><div class="blog-post-navbar-title"><div class="heading-s blog-post-title">How Abstract helps Salesforce create Lightning Design System's striking experience</div><div class="blog-post-nav-title-gradient"></div></div><div class="blog-navigation-right-part"><div class="blog-post-share-links-wrapper"><div class="blog-post-share-links"><div class="space-right-s">Share:</div><div class="blog-social-link bsl-navbar"><div>Facebook</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a></div></div><div class="blog-social-link bsl-navbar"><div>Twitter</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a></div></div><div class="blog-social-link bsl-navbar"><div>LinkedIn</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></div></div><a href="#" class="blog-social-link bsl-navbar link-copy w-inline-block"><div>Copy Link</div></a></div></div><div class="blog-nav-category-link bncl-ellipses no-pointer-events"><div class="blog-nav-ellipses"><div class="blog-more-toggle"></div></div></div></div></div></div><div class="blog-post-progress"></div></div></div></div></nav><div id="content" class="main"><div><header class="section s-default"><div class="container-max"><div class="flex-grid"><div class="col-wrapper"><div class="col col-8-d col-12-t"><h1 class="heading-xl space-bottom-m">How Abstract helps Salesforce create Lightning Design System's striking experience</h1><div class="text-xl space-bottom-m text-black">Designers at the world's largest cloud CRM platform say they keep their cool thanks to "trust, teamwork, and tools like Abstract."</div></div><div class="col col-4-d col-12-t"><div class="blog-meta bm-post"><div class="flex-h-as-js"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/customer-stories" class="text-nowrap text-link space-right-sentence">Customer Stories</a></div><div class="flex-h-as-js"><div class="space-right-sentence">by</div><a href="/author/amy-schroeder" class="text-nowrap text-link space-right-sentence">Amy Schroeder</a></div></div></div></div></div></div></header><article class="section space-inner-0"><div class="img-wrapper"><img loading="lazy" alt="How Abstract helps Salesforce create Lightning Design System's striking experience" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce.jpeg" sizes="(max-width: 1439px) 100vw, (max-width: 1919px) 92vw, 98vw" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-500.jpeg 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-800.jpeg 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-1600.jpeg 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-2000.jpeg 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-2600.jpeg 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce-p-3200.jpeg 3200w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c864267b53eec0da8b1_5eeaad8614922ffef61df281_salesforce.jpeg 3200w" class="img-100"/></div></article><section data-w-id="2f9c3f5e-af02-d346-04ae-5337f816ae0b" class="section s-default s-last"><div class="container-wide"><article data-w-id="1bbf3479-e601-da8b-1220-f904ea0fff26" class="flex-grid space-bottom-l"><div class="col-wrapper flex-h-as-js"><div class="col col-8-d col-12-t"><div class="rich-text text-l w-richtext"><p>‍</p><p>Running the world’s largest cloud-based CRM platform is not for the faint of heart, but the growing team at <a href="https://www.salesforce.com/" target="_blank">Salesforce</a> is up for the challenge. In 2015, Salesforce created <a href="https://lightningdesignsystem.com/" target="_blank">Lightning</a>, an innovative design system that enables the company and its customer organizations to scale rapidly. Although Salesforce is comprised of many parts and features, the design team wants customers to feel they are using one piece of software — not relearning systems.</p><p>“There’s a huge community of people that build on the Salesforce platform: customers, engineers, and designers. They all need access to the right patterns, documentation, and code. There are only a handful of design systems that are distributed so broadly. Ours is one of them,” says Alan Weibel, Principal Product Designer on the Lightning Design System.</p><p>The Salesforce product design team has quadrupled in recent years to keep up with customer demand. They use Abstract to collaborate with multiple stakeholders and keep Lightning in sync with each and every release, user interface update, and new pattern submission. After finishing the design portion of a sprint, designers use Abstract to share their work with developers.</p><p>How does the Salesforce team keep its cool under the pressure that comes with fast-moving sprints?</p><blockquote>Trust, teamwork, and scale are my key values in this role.</blockquote><p><strong>Alan Weibel</strong> | Principal Product Designer, Salesforce</p><p>“Trust, teamwork, and scale are my key values in this role,” Alan says of partnering with Salesforce UX designers across multiple products. The company also swears by <a href="https://medium.com/salesforce-ux/how-we-designed-the-new-salesforce-at-scale-6d3607fd92e5" target="_blank">clarity, efficiency, consistency, and beauty</a> — their core design components.</p><h2>Seamless onboarding makes the dream work</h2><p>“Where can I get this file?” is a common question you’ll hear from the mouths of new designers joining just about any team. Alan says a successful onboarding process requires documentation and resources, and Abstract saves time by serving as a single source of truth for complex design systems.</p><p>“One of the biggest challenges we’ve worked through is creating a centralized place to find design files,” Alan says. “Which is also one of the reasons we rolled out Abstract — our team can now go to one place to find what they need. They don’t need multiple applications.”</p><p>Laura Cruickshanks, Senior Product Designer for Sales Cloud UX, was one of those “newbies” who had to get up to speed as quickly as possible. She has eight years of experience working for Salesforce, but just recently joined the UX team after transferring from the product marketing team. “Coming from a different part of the company that has a lot of moving parts, we had different needs.”</p><p>Before Abstract, Laura says she was able to help with designing a small portion of the Salesforce interface, but she wasn’t able to share her work with primary leaders across the company. “I didn’t know what was going on in the main picture.”</p><p>“Onboarding is really important to understand how everything works,” she adds. “Having a design system and tools like Abstract to collaborate make all the difference.”</p><blockquote>Having <a href="https://www.abstract.com/blog/building-your-design-system/">a design system</a> and tools like Abstract to collaborate make all the difference.</blockquote><p><strong>Laura Cruickshanks</strong> | Senior Product Designer, Salesforce</p><p>Alan paints a similar picture, pre-Abstract. His team’s design workflow used to be like a scavenger hunt for design elements that lived on guess-who’s-computer or in who-knows-which folder.</p><p>“You’d search for so long, you’d end up recreating the element yourself. This takes time away from more important things like research or validating solutions. Getting started on new projects quickly is optimal for success,” he says. “I want to make sure there’s a cohesive experience in the product.”</p><h2>Seeing the light in a streamlined design workflow</h2><p>Before Salesforce used Abstract and before Lightning was fully adopted, there was a lull in communication between the design and development periods. “Designers were not involved post-handoff, so I’d cross my fingers and hope that the end result would look like what I designed,” Laura explains. “Sometimes engineers would go into our files before they were completely ready to extract buttons and export elements.” Not unlike other large organizations, they tended to work in silos.</p><p>“We are completely different now that we use Abstract,” Laura says. “We’re collaborative, and we’re able to concentrate on more important things like research and releasing new features. And we’re able to jump in and out of projects with more context, and fewer questions.”</p><p>“Even at the introductory level, Abstract is extremely effective at getting everyone on the same page,” adds Alan. “With the <a href="https://help.abstract.com/hc/en-us/articles/360049925372-Libraries-overview">libraries</a> feature, as soon as something is up to date, everyone sees the update across all of their files.”</p><p>By democratizing contributions to the design system, and streamlining distribution, Alan adds that he now has more time to focus on problem-solving and validating solutions.</p><p>“And going on a date with my wife once in a while,” he says. “Now that I’m no longer spending every night and weekend updating the master Sketch file, and feeling like a bottleneck.”</p></div></div><div class="col col-4-d blog-post-sticky-meta"><div class="blog-post-meta-wrapper"><div id="w-node-_9c75e5de-7378-a930-4d41-aa1ad7bc2f08-3272acf5" class="blog-post-meta bpm-date"><div class="text-nowrap space-right-sentence">Published on</div><div>August 6, 2019</div></div><div class="blog-post-meta"><div class="text-nowrap space-right-sentence">Illustration by</div><div><a href="https://twitter.com/morganrkeys" class="text-link">Morgan Keys</a></div><div><a href="#" class="text-link w-dyn-bind-empty"></a></div></div><div class="blog-post-meta"><div class="text-nowrap space-right-sentence">Written by</div><div><a href="/author/amy-schroeder" class="text-link">Amy Schroeder</a></div></div><div id="w-node-_173f9653-ef08-e614-6575-c8381295a437-3272acf5" class="blog-post-meta"><div class="flex-grid"><div class="col-wrapper"><div class="col col-12-t"><div class="heading-s">Tags<br/></div></div><div class="col col-12-t"><div class="w-dyn-list"><div role="list" class="badge-tag-wrapper w-dyn-items"><div role="listitem" class="w-dyn-item"><a href="/tag/design-process" class="tag">Design Process</a></div><div role="listitem" class="w-dyn-item"><a href="/tag/branches" class="tag">Abstract Branches</a></div></div></div></div></div></div></div></div></div></div></article><div><h2 class="heading-m space-bottom-m">Related Articles</h2><div class="flex-grid w-dyn-list"><div role="list" class="col-wrapper w-dyn-items"><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/messagebird-productivity" class="blog-post-link space-bottom-xs w-inline-block"><div class="img-wrapper"><img loading="lazy" alt="How MessageBird’s design team used Abstract to make productivity soar" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1).jpeg" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-500.jpeg 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-800.jpeg 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-1600.jpeg 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-2000.jpeg 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-2600.jpeg 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1)-p-3200.jpeg 3200w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c374e3f20ccdc29efdc_5f908bca2dd4f7740a8e966e_messagebird-story%2520(1).jpeg 3200w" class="img-100"/><div class="blog-read-time w-condition-invisible"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence w-dyn-bind-empty"></div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/customer-stories" class="text-nowrap text-link space-right-sentence">Customer Stories</a><div class="space-right-sentence">by</div><a href="/author/alison-harshbarger" class="text-nowrap text-link space-right-sentence">Alison Harshbarger</a></div><a href="/blog/messagebird-productivity" class="blog-post-link w-inline-block"><h2 class="heading-s space-bottom-s">How MessageBird’s design team used Abstract to make productivity soar</h2><div class="post-lede"><div class="text-l">Streamlining process means more time for design</div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/banner-health-navigate-future" class="blog-post-link space-bottom-xs w-inline-block"><div class="img-wrapper"><img loading="lazy" alt="How Abstract helped Banner Health navigate a future no one planned for" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small.jpeg" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-500.jpeg 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-800.jpeg 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-1600.jpeg 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-2000.jpeg 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-2600.jpeg 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small-p-3200.jpeg 3200w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c43e425743292b7e2cc_5f209e301b4ba34f1f806666_banner-heath-header-01-small.jpeg 3200w" class="img-100"/><div class="blog-read-time w-condition-invisible"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence w-dyn-bind-empty"></div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/customer-stories" class="text-nowrap text-link space-right-sentence">Customer Stories</a><div class="space-right-sentence">by</div><a href="/author/kasey-fleisher-hickey" class="text-nowrap text-link space-right-sentence">Kasey Fleisher Hickey</a></div><a href="/blog/banner-health-navigate-future" class="blog-post-link w-inline-block"><h2 class="heading-s space-bottom-s">How Abstract helped Banner Health navigate a future no one planned for</h2><div class="post-lede"><div class="text-l">Tripling outputs while working remotely</div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/fifth-beat-project-ramp-times" class="blog-post-link space-bottom-xs w-inline-block"><div class="img-wrapper"><img loading="lazy" alt="How Abstract helped Fifth Beat accelerate new project ramp times by 20%" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01.jpeg" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-500.jpeg 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-800.jpeg 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-2000.jpeg 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-2600.jpeg 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01-p-3200.jpeg 3200w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/601f3c47f2c09f04d549f7ab_5f0f2dd8577582024c679242_Fifth-beat-01.jpeg 3200w" class="img-100"/><div class="blog-read-time w-condition-invisible"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence w-dyn-bind-empty"></div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/customer-stories" class="text-nowrap text-link space-right-sentence">Customer Stories</a><div class="space-right-sentence">by</div><a href="/author/kasey-fleisher-hickey" class="text-nowrap text-link space-right-sentence">Kasey Fleisher Hickey</a></div><a href="/blog/fifth-beat-project-ramp-times" class="blog-post-link w-inline-block"><h2 class="heading-s space-bottom-s">How Abstract helped Fifth Beat accelerate new project ramp times by 20%</h2><div class="post-lede"><div class="text-l">Head of Design Francesco Vetica shares how Abstract helps the Fifth Beat team reduce costs, refine workflows, and mentor clients.</div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div></div></div></div></div></section></div><footer class="c-footer-container"><div class="c-section c-section_footer"><div class="c-grid c-grid_footer"><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb027-2c2bb025" class="c-footer_col c-footer_col1"><a href="/" class="c-footer_logolink w-inline-block"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/60c388bf3c3ae4d1d10653e7_Abstract_Wordmark-White.svg" loading="lazy" alt="Abstract logo" class="c-footer_logo"/></a><div class="c-footer_copyright">© Copyright 2024<br/>Abstract Studio Design, Inc.<br/>‍All rights reserved</div></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb030-2c2bb025" class="c-footer_col test001"><h6 class="c-footer_columntitle">Products</h6><a href="#" class="c-footer_link">Notebooks</a><a href="/" class="c-footer_link">Branches</a><h6 class="c-footer_columntitle c-footer_columntitle-stacked">Use Cases</h6><a href="/it-abstract-com/use-cases/kickoff" class="c-footer_link">Kick Off</a><a href="/it-abstract-com/use-cases/present-designs" class="c-footer_link">Present</a><a href="/it-abstract-com/use-cases/evolve-designs" class="c-footer_link">Evolve</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb03f-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Resources</h6><a href="/blog" class="c-footer_link">Blog</a><a href="https://help.abstract.com/" target="_blank" class="c-footer_link">Help Center</a><a href="https://help.abstract.com/hc/en-us/articles/360050382291-Contact-Support" target="_blank" class="c-footer_link">Contact Support</a><a href="#" class="c-footer_link cs-form-open">Contact Sales</a><a href="/release-notes" class="c-footer_link">Release Notes</a><a href="https://status.goabstract.com/" target="_blank" class="c-footer_link">Status</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb052-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Company</h6><a href="/about" class="c-footer_link">About Us</a><a href="/careers" class="c-footer_link">Careers</a><a href="/legal" class="c-footer_link">Legal</a><a href="/privacy" class="c-footer_link">Privacy</a><a href="/legal/website-terms-of-use" class="c-footer_link">Website Terms of Use</a><h6 class="c-footer_columntitle c-footer_columntitle-stacked">Contact Us</h6><a href="mailto:info@abstract.com" class="c-footer_link">info@abstract.com</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb065-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Social</h6><a href="https://twitter.com/goabstract" target="_blank" class="c-footer_link">Twitter</a><a href="https://www.linkedin.com/company/17950473/" target="_blank" class="c-footer_link">LinkedIn</a><a href="https://facebook.com/Abstract/" target="_blank" class="c-footer_link">Facebook</a><a href="https://dribbble.com/abstract" target="_blank" class="c-footer_link">Dribbble</a></div><div class="c-footer_copyright c-footer_copyright_mobile">© Copyright 2022<br/>Abstract Studio Design, Inc.<br/>All rights reserved</div></div></div></footer></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5ff3926f03b3ba26b7d639cb" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/js/fs-abstract-v2.720a7e85a.js" type="text/javascript"></script> <script> !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js', a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init','nzf0p'); twq('track','PageView'); </script>  <script> const formElemList = document.querySelectorAll("form"); formElemList.forEach((form) => { form.addEventListener("submit", (e) => { // on form submission, prevent default e.preventDefault(); // construct a FormData object, which fires the formdata event new FormData(form); }); form.addEventListener("formdata", (e) => { // Get the form data from the event object let data = e.formData; let obj = {}; const entries = [...data.entries()]; entries.forEach((entry) => (obj[entry[0]] = entry[1])); analytics.track(form.attributes[2].nodeValue, obj); }); }); </script>  <script> var csForm = document.querySelector('.cs-form-wrapper'); var csFormOpen = document.querySelectorAll('.cs-form-open'); var csFormExit = document.querySelectorAll('.cs-form-close'); csFormOpen.forEach(function(btn) { btn.addEventListener(`click`, function() { if(csForm.classList.contains(`active`)) { csForm.classList.add(`active`) } else { csForm.classList.add(`active`) } }); }); csFormExit.forEach(function(btn) { btn.addEventListener(`click`, function() { if(csForm.classList.contains(`active`)) { csForm.classList.remove(`active`) } else { csForm.classList.remove(`active`) } }); }); const csFormFields = document.querySelectorAll('.cs-form-field') const checkFormState = function (event) { csFormFields.forEach(function (field) { const label = field.nextElementSibling const highlight = label.nextElementSibling if (field === document.activeElement) { label.classList.add('active') label.classList.add('focused') highlight.classList.add('active') } else if (field.value.length > 0) { label.classList.add('active') highlight.classList.remove('active') label.classList.remove('focused') } else { label.classList.remove('active') highlight.classList.remove('active') label.classList.remove('focused') } }) } window.addEventListener('click', checkFormState, false); window.addEventListener('keyup', checkFormState, false); </script>  <script> 'use strict'; document.addEventListener('DOMContentLoaded', () => { const targetElements = document.querySelectorAll('[data-analytics]'); targetElements.forEach((element) => { element.addEventListener('click', () => { var _a; const event = element.dataset.analytics; if (!event) return; const properties = { text: (_a = element.textContent) !== null && _a !== void 0 ? _a : '', pageUrl: window.location.href, destination: element instanceof HTMLAnchorElement ? element.href : '', }; for (const { name, value } of element.attributes) { const property = name.split('data-property-')[1]; if (!property) continue; properties[property] = value; } window.analytics.track(event, properties); }); }); }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('[data-analytics]'); elements.forEach((element) => element.addEventListener('click', () => { const event = element.dataset.analytics; const properties = { text: element.textContent || undefined, pageUrl: window.location.href, destination: element instanceof HTMLAnchorElement ? element.href : undefined, }; for (const { name, value } of element.attributes) { const property = name.split('data-property-')[1]; if (!property) continue; properties[property] = value; } window.analytics.track(event, properties); }) ); }); </script> <script> $topBar = $('#topbar'); // hide $topBar if its link links to this page if($topBar.find('a[href]').attr('href')){ if(window.location.href === $topBar.find('a[href]').attr('href').split(/[?#]/)[0]){ $topBar.hide(); } } </script>  <script> $(document).ready(function() { const listItems = $('li'); listItems.each(function(index, item){ if($(item).text().startsWith('~~')){ indentText(this, 'sub-sub-bullet'); } else if($(item).text().startsWith('~')){ indentText(this, 'sub-bullet'); } }); // indentText function function indentText(li, className){ $(li).addClass(className); const reformatedText = $(li).html().replace(/~+/g,''); $(li).html(reformatedText); } }); </script>  <script src="https://cdn.finsweet.com/files/sweet-text/richtext-stylesystem2-v1.0.min.js"></script>  <script> document.addEventListener('DOMContentLoaded', () => { var $body = $(document.body); var scrollPosition = 0; $('[scroll="disable"]').on('click', function () { var oldWidth = $body.innerWidth(); scrollPosition = window.pageYOffset; $body.css('overflow', 'hidden'); $body.css('position', 'fixed'); $body.css('top', `-${scrollPosition}px`); $body.width(oldWidth); }); $('[scroll="enable"]').on('click', function () { if ($body.css('overflow') != 'hidden') { scrollPosition = window.pageYOffset; } $body.css('overflow', ''); $body.css('position', ''); $body.css('top', ''); $body.width(''); $(window).scrollTop(scrollPosition); }); $('[scroll="both"]').on('click', function () { if ($body.css('overflow') != 'hidden') { var oldWidth = $body.innerWidth(); scrollPosition = window.pageYOffset; $body.css('overflow', 'hidden'); $body.css('position', 'fixed'); $body.css('top', `-${scrollPosition}px`); $body.width(oldWidth); } else { $body.css('overflow', ''); $body.css('position', ''); $body.css('top', ''); $body.width(''); $(window).scrollTop(scrollPosition); } }); }); </script>  <script> document.querySelector('.footer-year').textContent = new Date().getFullYear(); </script>  <script> document.getElementById('skip-link').addEventListener('click', function(e) { e.preventDefault(); var target = document.getElementById('content'); target.setAttribute('tabindex', '-1'); target.focus(); }); </script>  <script> // when the DOM is ready $(document).ready(function() { // get the anchor link buttons const menuBtn = $('.no-anchor'); // when each button is clicked menuBtn.click(()=>{ // set a short timeout before taking action // so as to allow hash to be set setTimeout(()=>{ // call removeHash function after set timeout removeHash(); }, 5); // 5 millisecond timeout in this case }); // removeHash function // uses HTML5 history API to manipulate the location bar function removeHash(){ history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search); } }); </script>  <script> (() => { const getCookie = (key) => { if(- 1 === document.cookie.indexOf(key)) return null; const cookieVal = (document.cookie || '').match(RegExp(`${key}=([^;]+)`)) || []; return (cookieVal)[1] || null; }; const setCookie = (key, value, exp) => document.cookie = `${key}=${value};expires=${exp};`; if(getCookie('topbarClose')) $('.topbar-wrapper').hide(); const handleTopbarClick = () => { if(!getCookie('topbarClose')){ setCookie('topbarClose', '1', new Date(new Date().setDate(new Date().getDate() + 2))); } }; $('.topbar-wrapper .topbar-close').click(handleTopbarClick); })(); </script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script> <script> //url queries const urlParams = new URLSearchParams(window.location.search); Cookies.set('utmMedium', urlParams.get('utm_medium')); Cookies.set('utmSource', urlParams.get('utm_source')); Cookies.set('utmTerm', urlParams.get('utm_term')); Cookies.set('utmContent', urlParams.get('utm_content')); Cookies.set('utmCampaign', urlParams.get('utm_campaign')); </script> <script> $('[name="utm_medium"]').val(Cookies.get('utmMedium')); $('[name="utm_source"]').val(Cookies.get('utmSource')); $('[name="utm_campaign"]').val(Cookies.get('utmCampaign')); $('[name="utm_content"]').val(Cookies.get('utmContent')); $('[name="utm_term"]').val(Cookies.get('utmTerm')); </script> <script> //get the address and copy to clipboard $(".link-copy").on("click", () => copyTextToClipboard(window.location.href)); function copyTextToClipboard(text) { let textArea = document.createElement("textarea"); textArea.style.position = "fixed"; textArea.style.top = 0; textArea.style.left = 0; textArea.style.width = "2em"; textArea.style.height = "2em"; textArea.style.padding = 0; textArea.style.border = "none"; textArea.style.outline = "none"; textArea.style.boxShadow = "none"; textArea.style.background = "transparent"; textArea.value = text; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand("copy"); } catch (err) { //console.log('failed!'); } document.body.removeChild(textArea); } </script></body></html>