CINXE.COM

<!DOCTYPE html><html xmlns:cc="http://creativecommons.org/ns#"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# medium-com: http://ogp.me/ns/fb/medium-com#"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain"><title>Design Systems – Wix UX</title><link rel="canonical" href="https://wix-ux.com/tagged/design-systems"><link id="feedLink" rel="alternate" type="application/rss+xml" title="RSS" href="https://medium.com/feed/wix-ux/tagged/design-systems"><meta name="robots" content="index,follow"><meta name="title" content="Design Systems – Wix UX"><meta name="referrer" content="unsafe-url"><meta name="description" content="Read writing about Design Systems in Wix UX. The Wix way of doing UX."><meta name="theme-color" content="#000000"><meta property="og:title" content="Design Systems – Wix UX"><meta property="twitter:title" content="Design Systems – Wix UX"><meta property="og:url" content="https://wix-ux.com/tagged/design-systems"><meta property="fb:app_id" content="542599432471018"><meta property="og:description" content="Read writing about Design Systems in Wix UX. The Wix way of doing UX."><meta name="twitter:description" content="Read writing about Design Systems in Wix UX. The Wix way of doing UX."><meta name="twitter:image:src" content=""><meta property="og:type" content="medium-com:collection"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@Medium"><meta property="og:site_name" content="Wix UX"><meta name="twitter:app:name:iphone" content="Medium"><meta name="twitter:app:id:iphone" content="828256236"><meta property="al:ios:app_name" content="Medium"><meta property="al:ios:app_store_id" content="828256236"><meta property="al:android:package" content="com.medium.reader"><meta property="al:android:app_name" content="Medium"><meta property="al:web:url" content="https://wix-ux.com/tagged/design-systems"><link rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml" /><link rel="alternate" href="android-app://com.medium.reader/https/medium.com" /><link rel="stylesheet" href="https://cdn-static-1.medium.com/_/fp/css/main-branding-base.W9J-2zkF03j8TkriAGn1Tg.12.css"><script>!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script><script>document.domain = document.domain;</script><script>if (window.top !== window.self) window.location = 'about:blank';var OB_startTime = new Date().getTime(); var OB_loadErrors = []; function _onerror(e) { OB_loadErrors.push(e) }; if (document.addEventListener) document.addEventListener("error", _onerror, true); else if (document.attachEvent) document.attachEvent("onerror", _onerror); function _asyncScript(u) {var d = document, f = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = u; f.parentNode.insertBefore(s, f);}function _asyncStyles(u) {var d = document, f = d.getElementsByTagName("script")[0], s = d.createElement("link"); s.rel = "stylesheet"; s.href = u; f.parentNode.insertBefore(s, f); return s}(new Image()).src = "/_/stat?event=pixel.load&origin=" + encodeURIComponent(location.origin);</script><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga("create", "G-7JY7T788PK", "auto", {"allowLinker": true, "legacyCookieDomain": window.location.hostname});ga("send", "pageview");</script><script async src="https://www.google-analytics.com/analytics.js"></script><script>(function () {var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; document.write("<style>section.section-image--fullBleed.is-backgrounded {padding-top: " + Math.round(1.1 * height) + "px;}section.section-image--fullScreen.is-backgrounded, section.section-image--coverFade.is-backgrounded {min-height: " + height + "px; padding-top: " + Math.round(0.5 * height) + "px;}.u-height100vh {height: " + height + "px !important;}.u-height110vh {height: " + Math.round(1.1 * height) + "px !important;}.u-minHeight100vh {min-height: " + height + "px !important;}.u-maxHeight100vh {max-height: " + height + "px !important;}section.section-image--coverFade {height: " + height + "px;}.section-aspectRatioViewportPlaceholder, .section-aspectRatioViewportCropPlaceholder {max-height: " + height + "px;}.section-aspectRatioViewportBottomSpacer, .section-aspectRatioViewportBottomPlaceholder {max-height: " + Math.round(0.5 * height) + "px;}.zoomable:before {top: " + (-1 * height) + "px; left: " + (-1 * width) + "px; padding: " + height + "px " + width + "px;}</style>");})()</script><link rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19" class="js-favicon"><link rel="apple-touch-icon" sizes="152x152" href="https://cdn-images-1.medium.com/fit/c/304/304/1*u86cGgAv5zBUqy65gVtpuQ.png"><link rel="apple-touch-icon" sizes="120x120" href="https://cdn-images-1.medium.com/fit/c/240/240/1*u86cGgAv5zBUqy65gVtpuQ.png"><link rel="apple-touch-icon" sizes="76x76" href="https://cdn-images-1.medium.com/fit/c/152/152/1*u86cGgAv5zBUqy65gVtpuQ.png"><link rel="apple-touch-icon" sizes="60x60" href="https://cdn-images-1.medium.com/fit/c/120/120/1*u86cGgAv5zBUqy65gVtpuQ.png"><link rel="mask-icon" href="https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.12.svg" color="#171717"></head><body itemscope class=" browser-ie os-windows v-unbound v-glyph v-glyph--m2-unbound-source-serif-pro is-noJs"><script>document.body.className = document.body.className.replace(/(^|\s)is-noJs(\s|$)/, "$1is-js$2")</script><div class="site-main" id="container"><div class="butterBar butterBar--error"></div><div class="surface"><div id="prerendered" class="screenContent"><div class="metabar u-clearfix u-boxShadow4px12pxBlackLightest js-metabar"><div class="branch-journeys-top"></div><div class="js-metabarMiddle metabar-inner u-marginAuto u-maxWidth1032 u-flexCenter u-justifyContentSpaceBetween u-height65 u-xs-height56 u-paddingHorizontal20"><div class="metabar-block u-flex1 u-flexCenter"><div class="js-metabarLogoLeft"><a href="https://medium.com/" data-log-event="home" class="siteNav-logo u-fillBlack u-flex0 u-flexCenter u-paddingTop0"><span class="svgIcon svgIcon--wordmarkMedium svgIcon--120x26px u-flex"><svg class="svgIcon-use" width="120" height="26" ><path d="M29.57 1.404l.036-.008V1.12h-7.27l-6.75 15.979-6.75-15.98H1.003v.278l.035.008c1.327.302 2 .752 2 2.374v18.993c0 1.623-.676 2.073-2.003 2.374L1 25.153v.279h5.315v-.278l-.035-.008c-1.327-.302-2-.751-2-2.374V4.88l8.67 20.552h.492l8.924-21.125V23.24c-.114 1.282-.782 1.677-1.983 1.95l-.036.009v.275h9.259V25.2l-.036-.008c-1.203-.274-1.886-.67-2-1.95l-.006-19.464h.006c0-1.622.674-2.072 2-2.374zm4.23 12.582c.15-3.412 1.367-5.875 3.41-5.918.629.01 1.157.219 1.568.62.872.852 1.282 2.634 1.219 5.298h-6.198zm-.092.962h10.85v-.046c-.03-2.61-.78-4.64-2.228-6.033-1.25-1.204-3.103-1.867-5.048-1.867h-.043c-1.01 0-2.248.246-3.13.693a7.316 7.316 0 00-2.623 2.086c-1.185 1.479-1.903 3.477-2.078 5.724a13.717 13.717 0 00-.04.755c-.004.195-.005.39-.001.587.117 5.087 2.846 9.153 7.692 9.153 4.254 0 6.73-3.132 7.348-7.336l-.312-.11c-1.085 2.259-3.034 3.628-5.252 3.461-3.028-.228-5.347-3.32-5.137-7.066m23.122 6.893c-.356.85-1.099 1.319-2.094 1.319-.995 0-1.905-.689-2.552-1.939-.694-1.342-1.06-3.24-1.06-5.487 0-4.678 1.445-7.704 3.68-7.704.937 0 1.674.468 2.026 1.284v12.527zm7.198 3.335c-1.327-.316-2-.787-2-2.492V0l-8.062 2.392v.293l.05-.004c1.111-.09 1.866.064 2.304.472.343.32.51.809.51 1.498v3.11C56.033 7.25 55.088 7 53.94 7c-2.326 0-4.453.987-5.986 2.779-1.599 1.867-2.444 4.42-2.444 7.38 0 5.287 2.584 8.84 6.43 8.84 2.25 0 4.06-1.242 4.888-3.336v2.811h7.233v-.29l-.035-.008zM70.94 3.085c0-1.65-1.236-2.896-2.875-2.896-1.632 0-2.908 1.272-2.908 2.896 0 1.624 1.278 2.896 2.908 2.896 1.64 0 2.875-1.245 2.875-2.896zm1.903 22.092c-1.327-.316-2-.787-2-2.492h-.006V7.055l-7.234 2.092v.284l.043.004c1.566.14 1.994.683 1.994 2.525v13.515h7.24v-.29l-.037-.008zm18.536 0c-1.327-.316-2-.787-2-2.492V7.055L82.49 9.078v.285l.04.004c1.28.136 1.65.71 1.65 2.56v9.88c-.426.85-1.227 1.356-2.196 1.39-1.573 0-2.439-1.07-2.439-3.012V7.055l-7.234 2.092v.284l.044.004c1.565.14 1.994.683 1.994 2.525v8.362a9.443 9.443 0 00.15 1.741l.13.57C75.243 24.845 76.848 26 79.362 26c2.129 0 3.996-1.328 4.818-3.405v2.885h7.233v-.291l-.034-.012zm28.102.298v-.291l-.035-.009c-1.44-.334-2.001-.964-2.001-2.248V12.295C117.445 8.98 115.597 7 112.5 7c-2.257 0-4.16 1.314-4.893 3.36-.582-2.168-2.257-3.36-4.734-3.36-2.175 0-3.88 1.156-4.612 3.11V7.056l-7.233 2.006v.286l.043.004c1.547.138 1.994.697 1.994 2.492v13.631h6.75v-.29l-.037-.01c-1.148-.271-1.519-.767-1.519-2.04V10.95c.304-.715.917-1.562 2.127-1.562 1.504 0 2.266 1.05 2.266 3.116v12.972h6.751v-.29l-.035-.01c-1.149-.271-1.52-.767-1.52-2.04V12.294a7.107 7.107 0 00-.095-1.21c.322-.777.97-1.696 2.23-1.696 1.524 0 2.265 1.02 2.265 3.116v12.972h7.233z"/></svg></span><span class="u-textScreenReader">Homepage</span></a></div><div class="u-paddingLeft10 u-sm-show r-paddingRight10"><a href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com/wix-ux%3F~feature=LoMobileNavBar&~channel=ShowCollectionHome&~stage=m2">Open in app</a></div></div><div class="metabar-block u-flex0 u-flexCenter"><div class="u-flexCenter u-height65 u-xs-height56"><div class="buttonSet buttonSet--wide u-lineHeightInherit"><a class="button button--primary button--chromeless u-accentColor--buttonNormal is-inSiteNavBar u-xs-hide js-signInButton" href="https://medium.com/m/signin?redirect=https%3A%2F%2Fwix-ux.com%2Ftagged%2Fdesign-systems&source=--------------------------nav_reg&operation=login" data-action="sign-in-prompt" data-redirect="https://wix-ux.com/tagged/design-systems" data-action-source="--------------------------nav_reg">Sign in</a><a class="button button--primary button--withChrome u-accentColor--buttonNormal is-inSiteNavBar js-signUpButton" href="https://medium.com/m/signin?redirect=https%3A%2F%2Fwix-ux.com%2Ftagged%2Fdesign-systems&source=--------------------------nav_reg&operation=register" data-action="sign-up-prompt" data-redirect="https://wix-ux.com/tagged/design-systems" data-action-source="--------------------------nav_reg">Get started</a></div></div></div></div><div class="u-borderTopLighter " ><div class="metabar-inner u-marginAuto u-maxWidth1032 u-paddingHorizontal20 js-metabarBottom"><nav role="navigation" class="metabar-block metabar-block--below u-flexCenter u-overflowHidden u-height54"><div class="u-flexCenter u-overflowHidden"><div class="u-marginRight40"><a href="https://wix-ux.com?source=logo-lo_c7e666b742c7---5c12f12b4121" class="u-flexCenter js-collectionLogoOrName"><span class="u-noWrapWithEllipsis u-maxWidth1032 u-uiTextBold u-fontSize20 u-textColorDarker">Wix UX</span></a></div><div class="u-overflowHidden u-xs-hide"><ul class="u-textAlignLeft u-noWrap u-overflowX u-height80 u-marginTop40 js-collectionNavItems"><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/about">About</a></li><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/tagged/case-study">Case study</a></li><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/tagged/research">UX research</a></li><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/tagged/ux-writing">UX writing</a></li><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/tagged/design-systems">Design system</a></li><li class="metabar-navItem js-collectionNavItem u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darken u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://wix-ux.com/archive">All stories</a></li><span class="u-borderLeft1 u-baseColor--borderLight"></span><li class="metabar-navItem js-collectionNavItem is-external u-inlineBlock u-fontSize13 u-textUppercase u-letterSpacing1px u-textColorNormal u-xs-paddingRight12 u-xs-marginRight0 u-xs-paddingTop10"><a class="link link--darkenOnHover u-accentColor--textDarken link--noUnderline u-baseColor--link js-navItemLink" href="https://www.wix.com/jobs/teams/product-design-ux-ui" rel="nofollow noopener" target="_blank">Careers</a></li></ul></div></div></nav></div></div></div><div class="metabar metabar--spacer js-metabarSpacer u-height119 u-xs-height110"></div><div class="container u-foreground u-maxWidth1032 u-paddingTop40"><div class="row u-relative"><div class="col u-size12of12"><div class="row"><div class="col u-size4of12 js-aboutCollectionBox"><header class="heading heading--page u-marginTop0 u-xs-marginTop20 u-sm-marginBottom5" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><div class="heading-prefix">Tagged in</div><h1 class="heading-title heading-title--bold u-marginTop0 u-xs-marginTop20 u-sm-marginBottom5">Design Systems</h1></div></div></header><div class="u-sm-hide"><div class="u-tableCell"><a class="link u-baseColor--link avatar avatar--roundedRectangle" href="https://wix-ux.com" title="Go to Wix UX" aria-label="Go to Wix UX" data-collection-slug="wix-ux"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*u86cGgAv5zBUqy65gVtpuQ.png" class="avatar-image u-size36x36 u-xs-size32x32" alt="Wix UX"></a></div><div class="u-tableCell u-verticalAlignMiddle u-textColorNormal u-fontSize16 u-breakWord u-paddingLeft10">Wix UX</div><div class="u-fontSize14 u-lineHeightBaseSans u-textColorDark u-paddingTop15 u-paddingBottom15"><div class="u-marginBottom15 u-breakWord">The Wix way of doing UX</div><a class=" link--darken u-accentColor--textDarken link--accent u-accentColor--textNormal" href="https://wix-ux.com/about">More information</a></div><div class="u-fontSize14 u-lineHeightBaseSans u-textColorDark u-paddingBottom15"><header class="heading heading--allCaps heading--light" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Followers</span></div></div></header>756 </div><div class="u-fontSize14 u-lineHeightBaseSans u-marginBottom4 u-paddingBottom15"><header class="heading heading--allCaps heading--light" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Elsewhere</span></div></div></header><div class="linkSet"><a class="button button--dark button--chromeless is-touchIconBlackPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--dark button--chromeless" href="mailto:urip@wix.com" title="Email" aria-label="Email"><span class="button-defaultState"><span class="svgIcon svgIcon--email svgIcon--21px"><svg class="svgIcon-use" width="21" height="21" ><path d="M4.508 4A2.504 2.504 0 002 6.508v.277l8.054 4.1c.225.115.667.115.892 0L19 6.785v-.277A2.503 2.503 0 0016.492 4H4.508zm4.995 8.133L2 8.313v6.323a2.502 2.502 0 002.508 2.507h11.984A2.505 2.505 0 0019 14.636V8.313l-7.503 3.82c-.285.145-.64.217-.997.217-.356 0-.712-.072-.997-.217z"/></svg></span></span></a><a class="button button--dark button--chromeless is-touchIconBlackPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--dark button--chromeless" href="//facebook.com/freshmeetups" title="Facebook page" aria-label="Facebook page" target="_blank"><span class="button-defaultState"><span class="svgIcon svgIcon--facebookFilled svgIcon--21px"><svg class="svgIcon-use" width="21" height="21" ><path d="M18.26 10.55c0-4.302-3.47-7.79-7.75-7.79-4.28 0-7.75 3.488-7.75 7.79a7.773 7.773 0 006.535 7.684v-5.49h-1.89v-2.2h1.89v-1.62c0-1.882 1.144-2.907 2.814-2.907.8 0 1.48.06 1.68.087V8.07h-1.15c-.91 0-1.09.435-1.09 1.07v1.405h2.16l-.28 2.2h-1.88v5.515c3.78-.514 6.7-3.766 6.7-7.71"/></svg></span></span></a></div></div><div class="u-fontSize14 u-lineHeightBaseSans u-textColorDark u-paddingBottom15"><header class="heading heading--allCaps heading--light u-marginBottom10" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title u-marginBottom10">More, on Medium</span></div></div></header><ul class="tags tags--postTags tags--light"><li><a class="link u-baseColor--link" href="https://medium.com/tag/design-systems">Design Systems</a></li></ul></div></div></div><div class="col u-size8of12 u-sm-size12of12"><div class="u-marginBottom40 u-sm-marginBottom20"><div class="u-height65 u-sm-hide"></div></div><div class="js-tagStream"><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="e77ec1f32ee5" data-source="---------0-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://wix-ux.com/@domasmark" data-action="show-user-card" data-action-value="646be93b568e" data-action-type="hover" data-user-id="646be93b568e" data-collection-slug="wix-ux" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*rDKrSKDRhrZeKR8f0_G7KQ.png" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Domas Markevičius"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://wix-ux.com/@domasmark?source=---------0-----------------------" data-action="show-user-card" data-action-source="---------0-----------------------" data-action-value="646be93b568e" data-action-type="hover" data-user-id="646be93b568e" data-collection-slug="wix-ux" dir="auto">Domas Markevičius</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://wix-ux.com?source=---------0-----------------------" data-action="show-collection-card" data-action-source="---------0-----------------------" data-action-value="wix-ux" data-action-type="hover" data-collection-slug="wix-ux">Wix UX</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------" data-action="open-post" data-action-value="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------" data-action-source="preview-listing" ><time datetime="2022-06-13T13:26:58.512Z">Jun 13, 2022</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="7 min read"></span></div></div></div></div></div><div><a class="" href="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------" data-action-source="---------0-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*Jb5JszpcYpCmuwO3Z9Z2kg.png" data-width="813" data-height="444" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*Jb5JszpcYpCmuwO3Z9Z2kg.png"></div></figure><h3 name="a210" id="a210" class="graf graf--h3 graf-after--figure graf--title">Designing the perfect button</h3><h4 name="de6d" id="de6d" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">Everything you need to know about what makes a button great.</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------" data-action="open-post" data-action-source="---------0-----------------------" data-action-value="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------" data-post-id="e77ec1f32ee5">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="e77ec1f32ee5" data-is-flush-left="true" data-source="listing-----e77ec1f32ee5---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/e77ec1f32ee5" data-action-source="listing-----e77ec1f32ee5---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="e77ec1f32ee5">2.1K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5?source=---------0-----------------------#--responses" data-action-source="---------0-----------------------">15 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="e77ec1f32ee5"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="de87ef3547cb" data-source="---------1-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://wix-ux.com/@moria.cohen.m" data-action="show-user-card" data-action-value="45a89869deb9" data-action-type="hover" data-user-id="45a89869deb9" data-collection-slug="wix-ux" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*6ikjVNiI9bl4UUFVEpmXdg.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Moria Cohen"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://wix-ux.com/@moria.cohen.m?source=---------1-----------------------" data-action="show-user-card" data-action-source="---------1-----------------------" data-action-value="45a89869deb9" data-action-type="hover" data-user-id="45a89869deb9" data-collection-slug="wix-ux" dir="auto">Moria Cohen</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://wix-ux.com?source=---------1-----------------------" data-action="show-collection-card" data-action-source="---------1-----------------------" data-action-value="wix-ux" data-action-type="hover" data-collection-slug="wix-ux">Wix UX</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------" data-action="open-post" data-action-value="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------" data-action-source="preview-listing" ><time datetime="2022-05-16T06:11:49.492Z">May 15, 2022</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="7 min read"></span></div></div></div></div></div><div><a class="" href="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------" data-action-source="---------1-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*fKmapA3k0r5WFUhUgXXg1w.png" data-width="813" data-height="444" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*fKmapA3k0r5WFUhUgXXg1w.png"></div></figure><h3 name="5ed3" id="5ed3" class="graf graf--h3 graf-after--figure graf--title">Color alignment for multiple design systems</h3><h4 name="15ac" id="15ac" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">How to deal with color alignment challenges in a single…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------" data-action="open-post" data-action-source="---------1-----------------------" data-action-value="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------" data-post-id="de87ef3547cb">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="de87ef3547cb" data-is-flush-left="true" data-source="listing-----de87ef3547cb---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/de87ef3547cb" data-action-source="listing-----de87ef3547cb---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="de87ef3547cb">298</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb?source=---------1-----------------------#--responses" data-action-source="---------1-----------------------">1 response</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="de87ef3547cb"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div></div></div></div></div></div></div><style class="js-collectionStyle"> .u-accentColor--borderLight {border-color: #1A8917 !important;} .u-accentColor--borderNormal {border-color: #1A8917 !important;} .u-accentColor--borderDark {border-color: #0F730C !important;} .u-accentColor--iconLight .svgIcon,.u-accentColor--iconLight.svgIcon {fill: #1A8917 !important;} .u-accentColor--iconNormal .svgIcon,.u-accentColor--iconNormal.svgIcon {fill: #1A8917 !important;} .u-accentColor--iconDark .svgIcon,.u-accentColor--iconDark.svgIcon {fill: #0F730C !important;} .u-accentColor--textNormal {color: #0F730C !important;} .u-accentColor--hoverTextNormal:hover {color: #0F730C !important;} .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: #0F730C !important;} .u-accentColor--textDark {color: #0F730C !important;} .u-accentColor--backgroundLight {background-color: #1A8917 !important;} .u-accentColor--backgroundNormal {background-color: #1A8917 !important;} .u-accentColor--backgroundDark {background-color: #0F730C !important;} .u-accentColor--buttonDark {border-color: #0F730C !important; color: #0F730C !important;} .u-accentColor--buttonDark:hover {border-color: #0F730C !important;} .u-accentColor--buttonDark .icon:before,.u-accentColor--buttonDark .svgIcon{color: #0F730C !important; fill: #0F730C !important;} .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: #1A8917 !important; color: #0F730C !important;} .u-accentColor--buttonNormal:hover {border-color: #0F730C !important;} .u-accentColor--buttonNormal .icon:before,.u-accentColor--buttonNormal .svgIcon{color: #1A8917 !important; fill: #1A8917 !important;} .u-accentColor--buttonNormal.button--filled .icon:before,.u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-accentColor--buttonDark.button--filled,.u-accentColor--buttonDark.button--withChrome.is-active,.u-accentColor--fillWhenActive.is-active {background-color: #0F730C !important; border-color: #0F730C !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: #1A8917 !important; border-color: #1A8917 !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .postArticle.is-withAccentColors .markup--user,.postArticle.is-withAccentColors .markup--query {color: #0F730C !important;} .u-accentColor--highlightFaint {background-color: rgba(232, 243, 232, 1) !important;} .u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(163, 208, 162, 1) !important;} .postArticle.is-withAccentColors .markup--quote.is-other {background-color: rgba(232, 243, 232, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(232, 243, 232, 1), rgba(232, 243, 232, 1));} .postArticle.is-withAccentColors .markup--quote.is-me {background-color: rgba(209, 231, 209, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(209, 231, 209, 1), rgba(209, 231, 209, 1));} .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: rgba(163, 208, 162, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(163, 208, 162, 1), rgba(163, 208, 162, 1));} .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: rgba(163, 208, 162, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(163, 208, 162, 1), rgba(163, 208, 162, 1));} .postArticle.is-withAccentColors .markup--highlight {background-color: rgba(163, 208, 162, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(163, 208, 162, 1), rgba(163, 208, 162, 1));}</style><style class="js-collectionStyleConstant">.u-imageBgColor {background-color: rgba(0, 0, 0, 0.24705882352941178);} .u-imageSpectrum .u-baseColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-baseColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-baseColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--iconLight .svgIcon,.u-imageSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--iconNormal .svgIcon,.u-imageSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--iconDark .svgIcon,.u-imageSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textDark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textDarker {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-baseColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important; color: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-baseColor--buttonLight .icon:before,.u-imageSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonDark .icon:before,.u-imageSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonNormal .icon:before,.u-imageSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonDark.button--filled,.u-imageSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-baseColor--buttonNormal.button--filled,.u-imageSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-baseColor--link {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--darken:active {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--dark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--darker {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .ui-h1,.u-imageSpectrum .ui-h2,.u-imageSpectrum .ui-h3,.u-imageSpectrum .ui-h4,.u-imageSpectrum .ui-brand1,.u-imageSpectrum .ui-brand2,.u-imageSpectrum .ui-captionStrong {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .ui-body,.u-imageSpectrum .ui-caps {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .ui-summary,.u-imageSpectrum .ui-caption {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-accentColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-accentColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-accentColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--iconLight .svgIcon,.u-imageSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-accentColor--iconNormal .svgIcon,.u-imageSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--iconDark .svgIcon,.u-imageSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--textDark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-accentColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark .icon:before,.u-imageSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-accentColor--buttonDark.button--filled,.u-imageSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-imageSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-imageSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .postArticle.is-withAccentColors .markup--user,.u-imageSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--highlightFaint {background-color: rgba(255, 255, 255, 0.2) !important;} .u-imageSpectrum .u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(255, 255, 255, 0.6) !important;} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: rgba(255, 255, 255, 0.2) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: rgba(255, 255, 255, 0.4) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));}.u-resetSpectrum .u-tintBgColor {background-color: rgba(255, 255, 255, 1) !important;}.u-resetSpectrum .u-tintBgColor .u-fadeLeft:before {background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;}.u-resetSpectrum .u-tintBgColor .u-fadeRight:after {background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) !important;} .u-resetSpectrum .u-baseColor--borderLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--borderNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--borderDark {border-color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--iconLight .svgIcon,.u-resetSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--iconNormal .svgIcon,.u-resetSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--iconDark .svgIcon,.u-resetSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textNormal {color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textDark {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textDarker {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--backgroundLight {background-color: rgba(0, 0, 0, 0.09803921568627451) !important;} .u-resetSpectrum .u-baseColor--backgroundNormal {background-color: rgba(0, 0, 0, 0.2) !important;} .u-resetSpectrum .u-baseColor--backgroundDark {background-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight .icon:before,.u-resetSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonDark {border-color: rgba(0, 0, 0, 0.6) !important; color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--buttonDark .icon:before,.u-resetSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important; color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonNormal .icon:before,.u-resetSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(0, 0, 0, 0.4980392156862745) !important; fill: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonDark.button--filled,.u-resetSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2980392156862745) !important; border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-baseColor--buttonNormal.button--filled,.u-resetSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2) !important; border-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-baseColor--link {color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--darken:active {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--dark {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--link.link--darker {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .ui-h1,.u-resetSpectrum .ui-h2,.u-resetSpectrum .ui-h3,.u-resetSpectrum .ui-h4,.u-resetSpectrum .ui-brand1,.u-resetSpectrum .ui-brand2,.u-resetSpectrum .ui-captionStrong {color: rgba(0, 0, 0, 0.8) !important; fill: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .ui-body,.u-resetSpectrum .ui-caps {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .ui-summary,.u-resetSpectrum .ui-caption {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-accentColor--borderLight {border-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--borderNormal {border-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--borderDark {border-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--iconLight .svgIcon,.u-resetSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--iconNormal .svgIcon,.u-resetSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--iconDark .svgIcon,.u-resetSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--textNormal {color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--textDark {color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundLight {background-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundNormal {background-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundDark {background-color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark {border-color: rgba(17, 128, 14, 1) !important; color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark .icon:before,.u-resetSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(15, 115, 12, 1) !important; fill: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(26, 137, 23, 1) !important; color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(17, 128, 14, 1) !important; fill: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark.button--filled,.u-resetSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-resetSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(15, 115, 12, 1) !important; border-color: rgba(15, 115, 12, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-resetSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(17, 128, 14, 1) !important; border-color: rgba(17, 128, 14, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .postArticle.is-withAccentColors .markup--user,.u-resetSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(17, 128, 14, 1) !important;}</style></div></div></div><div class="loadingBar"></div><script>// <![CDATA[ window["obvInit"] = function (opt_embedded) {window["obvInit"]["embedded"] = opt_embedded; window["obvInit"]["ready"] = true;} // ]]></script><script>// <![CDATA[ var GLOBALS = {"audioUrl":"https://d1fcbxp97j4nb2.cloudfront.net","baseUrl":"https://wix-ux.com","buildLabel":"20241122-2326-root","currentUser":{"userId":"lo_c7e666b742c7","isVerified":false,"subscriberEmail":"","hasPastMemberships":false,"isEnrolledInHightower":false,"isEligibleForHightower":true,"hightowerLastLockedAt":0,"isWriterProgramEnrolled":true,"isWriterProgramInvited":false,"isWriterProgramOptedOut":false,"writerProgramVersion":0,"writerProgramEnrolledAt":0,"friendLinkOnboarding":0,"hasAdditionalUnlocks":false,"hasApiAccess":false,"writerProgramDistributionSettingOptedIn":false,"isSuspended":false,"collectionOnboardingSeen":0,"atsQualifiedAt":0},"currentUserHasUnverifiedEmail":false,"isAuthenticated":false,"isCurrentUserVerified":false,"miroUrl":"https://cdn-images-1.medium.com","moduleUrls":{"base":"https://cdn-static-1.medium.com/_/fp/gen-js/main-base.bundle.jgL7zdhxfcJMjkJjEjB6xg.12.js","common-async":"https://cdn-static-1.medium.com/_/fp/gen-js/main-common-async.bundle.fULbttUzdHyewyAazMUYXw.12.js","hightower":"https://cdn-static-1.medium.com/_/fp/gen-js/main-hightower.bundle.NQoDXJuDHPBqR63_AdMDaA.12.js","home-screens":"https://cdn-static-1.medium.com/_/fp/gen-js/main-home-screens.bundle.m76-07Q1DcEMKgEwzJjhDA.12.js","misc-screens":"https://cdn-static-1.medium.com/_/fp/gen-js/main-misc-screens.bundle.2CLT5j6rDReEhG2bjr3NdA.12.js","notes":"https://cdn-static-1.medium.com/_/fp/gen-js/main-notes.bundle.yrGWoeoBrJB7GBGv--gr1g.12.js","payments":"https://cdn-static-1.medium.com/_/fp/gen-js/main-payments.bundle.Cc_nfCICljMx7aW6-Pr_9w.12.js","posters":"https://cdn-static-1.medium.com/_/fp/gen-js/main-posters.bundle.QCX6B3q-KqcSv8hiUNsQ9Q.12.js","power-readers":"https://cdn-static-1.medium.com/_/fp/gen-js/main-power-readers.bundle.nxgYPC9-BrhdicIoMMuzoA.12.js","pubs":"https://cdn-static-1.medium.com/_/fp/gen-js/main-pubs.bundle.SOwTEi0SkdYAS9MQpioQXw.12.js","stats":"https://cdn-static-1.medium.com/_/fp/gen-js/main-stats.bundle.hA1c7rerc_dk3N05UG54qQ.12.js"},"previewConfig":{"weightThreshold":1,"weightImageParagraph":0.51,"weightIframeParagraph":0.8,"weightTextParagraph":0.08,"weightEmptyParagraph":0,"weightP":0.003,"weightH":0.005,"weightBq":0.003,"minPTextLength":60,"truncateBoundaryChars":20,"detectTitle":true,"detectTitleLevThreshold":0.15},"productName":"Medium","supportsEdit":false,"termsUrl":"//policy.medium.com/medium-terms-of-service-9db0094a1e0f","textshotHost":"textshot.textshot-production.svc.cluster.local","transactionId":"1732435333902:37ee50ea9acb","useragent":{"browser":"ie","family":"ie","os":"windows","version":7,"supportsDesktopEdit":false,"supportsInteract":false,"supportsView":true,"isMobile":false,"isTablet":false,"isNative":false,"supportsFileAPI":false,"isTier1":false,"clientVersion":"","clientChannel":"","supportsRealScrollEvents":false,"supportsVhUnits":false,"ruinsViewportSections":false,"supportsHtml5Video":false,"supportsMagicUnderlines":false,"isWebView":false,"isFacebookWebView":false,"supportsProgressiveMedia":false,"supportsPromotedPosts":true,"isBot":false,"isNativeIphone":false,"supportsCssVariables":false,"supportsVideoSections":true,"emojiSupportLevel":1,"isSearchBot":false,"isSyndicationBot":false,"isNativeAndroid":false,"isNativeIos":false,"isSeoAuditBot":false,"isInternalApp":false,"supportsApplePay":false,"supportsScrollableMetabar":false},"variants":{"allow_access":true,"allow_signup":true,"allow_test_auth":"disallow","android_enable_editor_new_publishing_flow":true,"android_enable_friend_links_creation":true,"android_enable_friend_links_postpage_banners":true,"android_enable_image_sharer":true,"android_enable_lists_v2":true,"android_enable_syntax_highlight":true,"android_enable_topic_portals":true,"android_rating_prompt_stories_read_threshold":2,"android_two_hour_refresh":true,"available_annual_plan":"2c754bcc2995","available_annual_premium_plan":"4a442ace1476","available_monthly_plan":"60e220181034","available_monthly_premium_plan":"12a660186432","browsable_stream_config_bucket":"curated-topics","can_receive_tips_v0":true,"can_send_tips_v0":true,"coronavirus_topic_recirc":true,"disable_partner_program_enrollment":true,"enable_abandoned_cart_promotion_email":true,"enable_android_dynamic_aspirational_paywall":true,"enable_android_dynamic_programming_paywall":true,"enable_android_miro_v2":true,"enable_android_offline_reading":true,"enable_android_verified_author":true,"enable_app_flirty_thirty":true,"enable_apple_sign_in":true,"enable_apple_webhook":true,"enable_aurora_pub_follower_page":true,"enable_author_cards":true,"enable_author_cards_byline":true,"enable_auto_follow_on_subscribe":true,"enable_automod":true,"enable_bayesian_average_pub_search":true,"enable_bg_post_post":true,"enable_billing_frequency_on_step2":"group_1","enable_boost_nia_v01":true,"enable_braintree_apple_pay":true,"enable_braintree_client":true,"enable_braintree_google_pay":true,"enable_braintree_integration":true,"enable_braintree_paypal":true,"enable_braintree_trial_membership":true,"enable_braintree_webhook":true,"enable_branch_io":true,"enable_cache_less_following_feed":true,"enable_configure_pronouns":true,"enable_conversion_model_v2":"group_2","enable_conversion_ranker_v2":"control","enable_creator_welcome_email":true,"enable_deprecate_legacy_providers_v3":true,"enable_diversification_rex":true,"enable_entities_to_follow_v2":true,"enable_eventstats_event_processing":true,"enable_explicit_signals":true,"enable_explicit_signals_updated_post_previews":true,"enable_footer_app_buttons":true,"enable_google_one_tap":true,"enable_google_webhook":true,"enable_group_gifting":true,"enable_iceland_forced_android":true,"enable_import":true,"enable_intrinsic_automatic_actions":true,"enable_ios_autorefresh":true,"enable_ios_dynamic_paywall_aspiriational":true,"enable_ios_dynamic_paywall_programming":true,"enable_ios_easy_resubscribe":true,"enable_ios_offline_reading":true,"enable_legacy_feed_in_iceland":true,"enable_lite_archive_page":true,"enable_lite_continue_this_thread":true,"enable_lite_homepage":true,"enable_lite_response_markup":true,"enable_lite_server_upstream_deadlines":true,"enable_lo_homepage":"control","enable_maim_the_meter":true,"enable_marketing_emails":true,"enable_mastodon_avatar_upload":true,"enable_mastodon_for_members":true,"enable_mastodon_for_members_username_selection":true,"enable_medium2_kbfd":true,"enable_members_only_audio":true,"enable_ml_rank_rex_anno":true,"enable_moc_load_processor_all_recs_surfaces":true,"enable_moc_load_processor_c":true,"enable_moc_load_processor_first_story":true,"enable_new_manage_membership_flow":true,"enable_new_stripe_customers":true,"enable_newsletter_lo_flow_custom_domains":true,"enable_pill_based_home_feed":true,"enable_pp_country_expansion":true,"enable_pp_v4":true,"enable_pre_pp_v4":true,"enable_premium_tier":true,"enable_premium_tier_badge":true,"enable_publication_hierarchy_web":true,"enable_ranker_v10":"control","enable_recaptcha_enterprise":true,"enable_recirc_model":true,"enable_recommended_publishers_query":true,"enable_rex_aggregator_v2":true,"enable_rex_new_push_notification_endpoint":true,"enable_rex_reading_history":true,"enable_rito_upstream_deadlines":true,"enable_seamless_social_sharing":true,"enable_see_pronouns":true,"enable_sharer_create_post_share_key":true,"enable_sharer_validate_post_share_key":true,"enable_simplified_digest_v2_b":true,"enable_speechify_ios":true,"enable_speechify_widget":true,"enable_sprig":true,"enable_starspace":true,"enable_susi_redesign_android":true,"enable_susi_redesign_ios":true,"enable_switch_plan_premium_tier":true,"enable_tag_recs":true,"enable_tick_landing_page":true,"enable_tipping_v0_android":true,"enable_tipping_v0_ios":true,"enable_tribute_landing_page":true,"enable_update_explore_wtf":true,"enable_update_topic_portals_wtf":true,"enable_updated_pub_recs_ui":true,"enable_verifications_service":true,"glyph_font_set":"m2-unbound-source-serif-pro","goliath_externalsearch_enable_comment_deindexation":true,"ios_display_paywall_after_onboarding":true,"ios_enable_friend_links_creation":true,"ios_enable_friend_links_postpage_banners":true,"ios_enable_home_post_menu":true,"ios_enable_lock_responses":true,"ios_enable_verified_book_author":true,"ios_iceland_nux":true,"ios_in_app_free_trial":true,"ios_remove_twitter_onboarding_step":true,"ios_social_share_sheet":true,"limit_post_referrers":true,"limit_user_follows":true,"mobile_custom_app_icon":true,"num_post_bottom_responses_to_show":1,"onboarding_tags_from_top_views":true,"reader_fair_distribution_non_qp":true,"redefined_top_posts":true,"reengagement_notification_duration":3,"rex_generator_max_candidates":1000,"signin_services":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple","signup_services":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple","skip_fs_cache_user_vals":true},"xsrfToken":"","iosAppId":"828256236","supportEmail":"yourfriends@medium.com","fp":{"/icons/monogram-mask.svg":"https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.12.svg","/icons/favicon-medium-editor.ico":"https://cdn-static-1.medium.com/_/fp/icons/favicon-medium-editor.PiakrZWB7Yb80quUVQWM6g.12.ico"},"authBaseUrl":"https://medium.com","imageUploadSizeMb":25,"isAuthDomainRequest":false,"domainCollectionSlug":"wix-ux","algoliaApiEndpoint":"https://MQ57UUUQZ2-dsn.algolia.net","algoliaAppId":"MQ57UUUQZ2","algoliaSearchOnlyApiKey":"394474ced050e3911ae2249ecc774921","iosAppStoreUrl":"https://itunes.apple.com/app/medium-everyones-stories/id828256236?pt=698524&mt=8","iosAppLinkBaseUrl":"medium:","algoliaIndexPrefix":"medium_","androidPlayStoreUrl":"https://play.google.com/store/apps/details?id=com.medium.reader","googleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","androidPackage":"com.medium.reader","androidPlayStoreMarketScheme":"market://details?id=com.medium.reader","googleAuthUri":"https://accounts.google.com/o/oauth2/auth","androidScheme":"medium","layoutData":{"useDynamicScripts":false,"googleAnalyticsTrackingCode":"G-7JY7T788PK","jsShivUrl":"https://cdn-static-1.medium.com/_/fp/js/shiv.RI2ePTZ5gFmMgLzG5bEVAA.12.js","useDynamicCss":false,"faviconUrl":"https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19","faviconImageId":"5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19","fontSets":[{"id":8,"url":"https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m2-unbound-source-serif-pro.css"},{"id":11,"url":"https://glyph.medium.com/css/m2-unbound-source-serif-pro.css"},{"id":9,"url":"https://glyph.medium.com/css/mkt.css"}],"glyphUrl":"https://glyph.medium.com"},"authBaseUrlRev":"moc.muidem//:sptth","stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","archiveUploadSizeMb":100,"previewConfig2":{"weightThreshold":1,"weightImageParagraph":0.05,"raiseImage":true,"enforceHeaderHierarchy":true,"isImageInsetRight":true},"isAmp":false,"iosScheme":"medium","facebook":{"key":"542599432471018","namespace":"medium-com","scope":{"default":["public_profile","email"],"connect":["public_profile","email"],"login":["public_profile","email"],"share":["public_profile","email"]}},"memberContentTopicId":"13d7efd82fb2","audioContentTopicId":"3792abbd134","isDoNotAuth":false,"buggle":{"videoUrl":"https://cdn-videos-1.medium.com","audioUrl":"https://cdn-audio-1.medium.com"},"referrerType":5,"partnerProgramEmail":"partnerprogram@medium.com","recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","countryCode":"SG","bypassMeter":false,"branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","paypal":{"clientMode":"production","oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com/redeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"}},"collectionConfig":{"mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"]},"bypassMeterWithShareKey":false,"recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","cdcMessaging":[{"text":"For more information on the novel coronavirus and Covid-19, visit ","href":"","type":"text","start":0,"end":0},{"text":"cdc.gov","href":"https://www.cdc.gov/coronavirus/2019-nCoV","type":"link","start":66,"end":73},{"text":".","href":"","type":"text","start":0,"end":0}],"braintree":{"merchantId":"m56f8fqpf7ngnrd4"},"diagnostics":{},"domain":"medium.com"} // ]]></script><script charset="UTF-8" src="https://cdn-static-1.medium.com/_/fp/gen-js/main-base.bundle.jgL7zdhxfcJMjkJjEjB6xg.12.js" async></script><script>// <![CDATA[ window["obvInit"]({"references":{"Collection":{"5c12f12b4121":{"id":"5c12f12b4121","name":"Wix UX","slug":"wix-ux","tags":[],"creatorId":"d67224f4d961","description":"The Wix way of doing UX","shortDescription":"The Wix way of doing UX","image":{"imageId":"1*u86cGgAv5zBUqy65gVtpuQ.png","filter":"","backgroundSize":"","originalWidth":584,"originalHeight":584,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":756,"activeAt":1719405739968},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false,"canLockOwnPostsForMediumMembers":false,"canViewNewsletterV2Stats":false,"canCreateNewsletterV3":false},"isSubscribed":false,"isEnrolledInHightower":false,"isEligibleForHightower":false,"isSubscribedToCollectionEmails":false,"isMuted":false,"canToggleEmail":false,"isWriter":false},"logo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"facebookPageName":"freshmeetups","publicEmail":"urip@wix.com","collectionMastheadId":"e0b3c7d09cd5","domain":"wix-ux.com","sections":[{"type":2,"collectionHeaderMetadata":{"backgroundImage":{"id":"1*VipUItey7zskNx_spY7jJQ.gif","originalWidth":1500,"originalHeight":750},"logoImage":{"id":"1*F-xTmb1C2yZESjs8ecy_YA@2x.png","originalWidth":1526,"originalHeight":1526,"alt":"Wix UX"},"alignment":2,"layout":6}},{"type":1,"postListMetadata":{"source":1,"layout":4,"number":7,"postIds":[]}}],"favicon":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":[{"color":"#FF1A8917","point":0},{"color":"#FF11800E","point":0.1},{"color":"#FF0F730C","point":0.2},{"color":"#FF095407","point":1}],"backgroundColor":"#FFFFFFFF"},"highlightSpectrum":{"colorPoints":[{"color":"#FFFFFFFF","point":0},{"color":"#FFE8F3E8","point":0.1},{"color":"#FFE8F3E8","point":0.2},{"color":"#FFD1E7D1","point":0.6},{"color":"#FFA3D0A2","point":1}],"backgroundColor":"#FFFFFFFF"},"darkBackgroundSpectrum":{"colorPoints":[{"color":"#FF095407","point":0},{"color":"#FF0F730C","point":0.1},{"color":"#FF11800E","point":0.2},{"color":"#FF1A8917","point":1}],"backgroundColor":"#FF000000"}},"navItems":[{"type":6,"title":"About","url":"https://wix-ux.com/about"},{"type":1,"title":"Case study","tagSlug":"case-study","url":"https://wix-ux.com/tagged/case-study","source":"tagSlug"},{"type":1,"title":"UX research","tagSlug":"research","url":"https://wix-ux.com/tagged/research","source":"tagSlug"},{"type":1,"title":"UX writing","tagSlug":"ux-writing","url":"https://wix-ux.com/tagged/ux-writing","source":"tagSlug"},{"type":1,"title":"Design system","tagSlug":"design-systems","url":"https://wix-ux.com/tagged/design-systems","source":"tagSlug"},{"type":5,"title":"All stories","url":"https://wix-ux.com/archive"},{"type":3,"title":"Careers","url":"https://www.wix.com/jobs/teams/product-design-ux-ui"}],"colorBehavior":1,"ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"backgroundImage":{"id":"1*VipUItey7zskNx_spY7jJQ.gif","originalWidth":1500,"originalHeight":750},"logoImage":{"id":"1*F-xTmb1C2yZESjs8ecy_YA@2x.png","originalWidth":1526,"originalHeight":1526,"alt":"Wix UX"},"alignment":2,"layout":6},"subscriberCount":756,"tagline":"The Wix way of doing UX","isOptedIntoAurora":false,"isCurationAllowedByDefault":false,"polarisCoverImage":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"ptsQualifiedAt":1654099438848,"type":"Collection"}},"User":{"646be93b568e":{"userId":"646be93b568e","name":"Domas Markevičius","username":"domasmark","createdAt":1488984250242,"imageId":"1*rDKrSKDRhrZeKR8f0_G7KQ.png","backgroundImageId":"","bio":"Currently, I'm reimagining the MDX documentation editing experience at Dhub.dev. Previously, I led design at ZealiD and led a design system team at Wix.com.","twitterScreenName":"domasmark","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"firstOpenedIosApp":1685458122466,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[32,29,12,8,21,36,3,2,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"45a89869deb9":{"userId":"45a89869deb9","name":"Moria Cohen","username":"moria.cohen.m","createdAt":1610709286646,"imageId":"1*6ikjVNiI9bl4UUFVEpmXdg.jpeg","backgroundImageId":"","bio":"Product Designer at Wix.com","twitterScreenName":"","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[32,29,12,2],"hasSeenIcelandOnboarding":false,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"he-il","type":"User"}},"Post":{"e77ec1f32ee5":{"id":"e77ec1f32ee5","versionId":"7a99d8a0c0b9","creatorId":"646be93b568e","homeCollectionId":"5c12f12b4121","title":"Designing the perfect button","detectedLanguage":"en","latestVersion":"7a99d8a0c0b9","latestPublishedVersion":"7a99d8a0c0b9","hasUnpublishedEdits":false,"latestRev":1348,"createdAt":1647851030218,"updatedAt":1663912721579,"acceptedAt":0,"firstPublishedAt":1655126818512,"latestPublishedAt":1663912712585,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"Everything you need to know about what makes a button great.","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*Jb5JszpcYpCmuwO3Z9Z2kg.png","filter":"","backgroundSize":"","originalWidth":813,"originalHeight":444,"strategy":"resample","height":0,"width":0},"wordCount":1258,"imageCount":22,"readingTime":6.5971698113207555,"subtitle":"Everything you need to know about what makes a button great.","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":400,"isBookmarked":false,"tags":[{"slug":"ux-design","name":"UX Design","postCount":112735,"metadata":{"postCount":112735,"coverImage":{"id":"1*Mp-mhVUhZBJqzzBdtYvuxw.jpeg","originalWidth":720,"originalHeight":1280}},"type":"Tag"},{"slug":"ux-writing","name":"Ux Writing","postCount":12129,"metadata":{"postCount":12129,"coverImage":{"id":"1*_wqzqby8TkJnpMQMvLRp1g.png","originalWidth":4224,"originalHeight":2640,"isFeatured":true}},"type":"Tag"},{"slug":"ui-design","name":"UI Design","postCount":45195,"metadata":{"postCount":45195,"coverImage":{"id":"1*imNc4tVap8WX-lHcWPkYsw.png","originalWidth":1200,"originalHeight":675,"isFeatured":true}},"type":"Tag"},{"slug":"design-systems","name":"Design Systems","postCount":9201,"metadata":{"postCount":9201,"coverImage":{"id":"1*CtlNPhgJx2QqxiDGQ8kNNg.png","originalWidth":1920,"originalHeight":1080,"isFeatured":true}},"type":"Tag"},{"slug":"case-study","name":"Case Study","postCount":32865,"metadata":{"postCount":32865,"coverImage":{"id":"0*oKu5hnrXeTfxnhdn","originalWidth":1024,"originalHeight":683,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":15,"links":{"entries":[{"url":"https://webaim.org/articles/contrast/#ratio","alts":[],"httpStatus":200},{"url":"https://www.nngroup.com/articles/icon-usability/","alts":[],"httpStatus":200},{"url":"https://lawsofux.com/serial-position-effect","alts":[],"httpStatus":200},{"url":"https://material.io/components/buttons#usage","alts":[],"httpStatus":200},{"url":"https://forms.wix.com/c1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b","alts":[],"httpStatus":200},{"url":"https://community.wix.com/partners/forum/partner-announcements/exclusive-feature-access-sell-tickets-with-assigned-seats-in-wix-events","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1663912717257},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":2162,"sectionCount":3,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"designing-the-perfect-button","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"designing-the-perfect-button-e77ec1f32ee5","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*Jb5JszpcYpCmuwO3Z9Z2kg.png","originalWidth":813,"originalHeight":444,"isFeatured":true}},{"name":"a210","type":3,"text":"Designing the perfect button","markups":[],"alignment":1},{"name":"de6d","type":13,"text":"Everything you need to know about what makes a button great.","markups":[],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"Everything you need to know about what makes a button great."},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"5c12f12b4121","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"primaryTopicId":"22d054b693da","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"97e5","type":4,"text":"","markups":[],"layout":1,"metadata":{"id":"1*Jb5JszpcYpCmuwO3Z9Z2kg.png","originalWidth":813,"originalHeight":444,"isFeatured":true}},{"name":"a210","type":3,"text":"Designing the perfect button","markups":[]},{"name":"de6d","type":13,"text":"Everything you need to know about what makes a button great.","markups":[]},{"name":"94ed","type":1,"text":"Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it’s crucial to communicate to the user how a button works and where it’ll lead…","markups":[]}],"sections":[{"name":"99aa","startIndex":0}]},"isFullContent":false,"subtitle":"Everything you need to know about what makes a button great."},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"de87ef3547cb":{"id":"de87ef3547cb","versionId":"1123e212edd5","creatorId":"45a89869deb9","homeCollectionId":"5c12f12b4121","title":"Color alignment for multiple design systems","detectedLanguage":"en","latestVersion":"1123e212edd5","latestPublishedVersion":"1123e212edd5","hasUnpublishedEdits":false,"latestRev":849,"createdAt":1649141953639,"updatedAt":1663912777416,"acceptedAt":0,"firstPublishedAt":1652681509492,"latestPublishedAt":1663912770552,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"How to deal with color alignment challenges in a single product","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*fKmapA3k0r5WFUhUgXXg1w.png","filter":"","backgroundSize":"","originalWidth":813,"originalHeight":444,"strategy":"resample","height":0,"width":0},"wordCount":1295,"imageCount":13,"readingTime":6.286792452830188,"subtitle":"How to deal with color alignment challenges in a single product","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":29,"isBookmarked":false,"tags":[{"slug":"ux","name":"UX","postCount":210082,"metadata":{"postCount":210082,"coverImage":{"id":"1*85QqogUEXFsAM3xOBwV-hA.png","originalWidth":4306,"originalHeight":2423,"isFeatured":true,"alt":"The HEART framework revolutionised UX design by focusing on happiness and engagement, but it’s time for an upgrade. With a small tweak, we can use the EARTH framework, which introduces sustainability and tangible returns, urging designers to rethink priorities and metrics. By embracing this change, we can design for a better future-both for users and the planet. (image source: Yeo, 2024)"}},"type":"Tag"},{"slug":"wix","name":"Wix","postCount":2754,"metadata":{"postCount":2754,"coverImage":{"id":"1*uGrXihbGTT6as7vIdgBMeQ.jpeg","originalWidth":1280,"originalHeight":720,"isFeatured":true}},"type":"Tag"},{"slug":"design-systems","name":"Design Systems","postCount":9201,"metadata":{"postCount":9201,"coverImage":{"id":"1*CtlNPhgJx2QqxiDGQ8kNNg.png","originalWidth":1920,"originalHeight":1080,"isFeatured":true}},"type":"Tag"},{"slug":"colors","name":"Colors","postCount":14672,"metadata":{"postCount":14672,"coverImage":{"id":"0*j8bp8rmaXgO_pz2K","originalWidth":2688,"originalHeight":1520,"isFeatured":true,"unsplashPhotoId":"dQrWTGi_atM"}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":1,"links":{"entries":[{"url":"https://medium.com/@lalaura1089","alts":[{"type":2,"url":"medium://@lalaura1089"},{"type":3,"url":"medium://@lalaura1089"}],"httpStatus":200},{"url":"https://forms.wix.com/c1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1663912771321},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":298,"sectionCount":3,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"color-alignment-for-multiple-design-systems","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"color-alignment-for-multiple-design-systems-de87ef3547cb","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*fKmapA3k0r5WFUhUgXXg1w.png","originalWidth":813,"originalHeight":444,"isFeatured":true}},{"name":"5ed3","type":3,"text":"Color alignment for multiple design systems","markups":[],"alignment":1},{"name":"15ac","type":13,"text":"How to deal with color alignment challenges in a single…","markups":[],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"How to deal with color alignment challenges in a single product"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"5c12f12b4121","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":0,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"7741","type":4,"text":"","markups":[],"layout":1,"metadata":{"id":"1*fKmapA3k0r5WFUhUgXXg1w.png","originalWidth":813,"originalHeight":444,"isFeatured":true}},{"name":"5ed3","type":3,"text":"Color alignment for multiple design systems","markups":[]},{"name":"15ac","type":13,"text":"How to deal with color alignment challenges in a single product","markups":[]},{"name":"b502","type":3,"text":"The challenge","markups":[]},{"name":"f6bc","type":1,"text":"Over the past few years, the product offerings at Wix have evolved extensively. As a result of this massive growth, several design systems have been created.","markups":[]},{"name":"7b9a","type":1,"text":"These systems have grown and evolved over time. Gaps between the systems have narrowed and as a result, their color palettes have become more…","markups":[]}],"sections":[{"name":"339c","startIndex":0}]},"isFullContent":false,"subtitle":"How to deal with color alignment challenges in a single product"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"}}},"paging":{},"collection":{"id":"5c12f12b4121","name":"Wix UX","slug":"wix-ux","tags":[],"creatorId":"d67224f4d961","description":"The Wix way of doing UX","shortDescription":"The Wix way of doing UX","image":{"imageId":"1*u86cGgAv5zBUqy65gVtpuQ.png","filter":"","backgroundSize":"","originalWidth":584,"originalHeight":584,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":756,"activeAt":1719405739968},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false,"canLockOwnPostsForMediumMembers":false,"canViewNewsletterV2Stats":false,"canCreateNewsletterV3":false},"isSubscribed":false,"isEnrolledInHightower":false,"isEligibleForHightower":false,"isSubscribedToCollectionEmails":false,"isMuted":false,"canToggleEmail":false,"isWriter":false},"logo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"facebookPageName":"freshmeetups","publicEmail":"urip@wix.com","collectionMastheadId":"e0b3c7d09cd5","domain":"wix-ux.com","sections":[{"type":2,"collectionHeaderMetadata":{"backgroundImage":{"id":"1*VipUItey7zskNx_spY7jJQ.gif","originalWidth":1500,"originalHeight":750},"logoImage":{"id":"1*F-xTmb1C2yZESjs8ecy_YA@2x.png","originalWidth":1526,"originalHeight":1526,"alt":"Wix UX"},"alignment":2,"layout":6}},{"type":1,"postListMetadata":{"source":1,"layout":4,"number":7,"postIds":[]}}],"favicon":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":[{"color":"#FF1A8917","point":0},{"color":"#FF11800E","point":0.1},{"color":"#FF0F730C","point":0.2},{"color":"#FF095407","point":1}],"backgroundColor":"#FFFFFFFF"},"highlightSpectrum":{"colorPoints":[{"color":"#FFFFFFFF","point":0},{"color":"#FFE8F3E8","point":0.1},{"color":"#FFE8F3E8","point":0.2},{"color":"#FFD1E7D1","point":0.6},{"color":"#FFA3D0A2","point":1}],"backgroundColor":"#FFFFFFFF"},"darkBackgroundSpectrum":{"colorPoints":[{"color":"#FF095407","point":0},{"color":"#FF0F730C","point":0.1},{"color":"#FF11800E","point":0.2},{"color":"#FF1A8917","point":1}],"backgroundColor":"#FF000000"}},"navItems":[{"type":6,"title":"About","url":"https://wix-ux.com/about"},{"type":1,"title":"Case study","tagSlug":"case-study","url":"https://wix-ux.com/tagged/case-study","source":"tagSlug"},{"type":1,"title":"UX research","tagSlug":"research","url":"https://wix-ux.com/tagged/research","source":"tagSlug"},{"type":1,"title":"UX writing","tagSlug":"ux-writing","url":"https://wix-ux.com/tagged/ux-writing","source":"tagSlug"},{"type":1,"title":"Design system","tagSlug":"design-systems","url":"https://wix-ux.com/tagged/design-systems","source":"tagSlug"},{"type":5,"title":"All stories","url":"https://wix-ux.com/archive"},{"type":3,"title":"Careers","url":"https://www.wix.com/jobs/teams/product-design-ux-ui"}],"colorBehavior":1,"ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"backgroundImage":{"id":"1*VipUItey7zskNx_spY7jJQ.gif","originalWidth":1500,"originalHeight":750},"logoImage":{"id":"1*F-xTmb1C2yZESjs8ecy_YA@2x.png","originalWidth":1526,"originalHeight":1526,"alt":"Wix UX"},"alignment":2,"layout":6},"subscriberCount":756,"tagline":"The Wix way of doing UX","isOptedIntoAurora":false,"isCurationAllowedByDefault":false,"polarisCoverImage":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"ptsQualifiedAt":1654099438848,"type":"Collection"},"tag":{"slug":"design-systems","name":"Design Systems","postCount":9201,"metadata":{"postCount":9201,"coverImage":{"id":"1*CtlNPhgJx2QqxiDGQ8kNNg.png","originalWidth":1920,"originalHeight":1080,"isFeatured":true}},"type":"Tag"},"streamItems":[{"createdAt":1732435333986,"postPreview":{"postId":"e77ec1f32ee5"},"randomId":"e0d4509e387b","itemType":"postPreview","type":"StreamItem"},{"createdAt":1732435333986,"postPreview":{"postId":"de87ef3547cb"},"randomId":"ff716dd46a3a","itemType":"postPreview","type":"StreamItem"}],"showCdcBanner":false}) // ]]></script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e77e023bc1044a3',t:'MTczMjQzNTMzNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>