CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Color alignment for multiple design systems | by Moria Cohen | Wix UX</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2022-09-23T05:59:30.552Z"/><meta data-rh="true" name="title" content="Color alignment for multiple design systems | by Moria Cohen | Wix UX"/><meta data-rh="true" property="og:title" content="Color alignment for multiple design systems"/><meta data-rh="true" property="al:android:url" content="medium://p/de87ef3547cb"/><meta data-rh="true" property="al:ios:url" content="medium://p/de87ef3547cb"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="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. These systems have grown and evolved over…"/><meta data-rh="true" property="og:description" content="How to deal with color alignment challenges in a single product"/><meta data-rh="true" property="og:url" content="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb"/><meta data-rh="true" property="al:web:url" content="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:813/1*fKmapA3k0r5WFUhUgXXg1w.png"/><meta data-rh="true" property="article:author" content="https://medium.com/@moria.cohen.m"/><meta data-rh="true" name="author" content="Moria Cohen"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Color alignment for multiple design systems"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/de87ef3547cb"/><meta data-rh="true" property="twitter:description" content="How to deal with color alignment challenges in a single product"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:813/1*fKmapA3k0r5WFUhUgXXg1w.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="7 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@moria.cohen.m"/><link data-rh="true" rel="canonical" href="https://wix-ux.com/color-alignment-for-multiple-design-systems-de87ef3547cb"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/de87ef3547cb"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*fKmapA3k0r5WFUhUgXXg1w.png"],"url":"https:\u002F\u002Fwix-ux.com\u002Fcolor-alignment-for-multiple-design-systems-de87ef3547cb","dateCreated":"2022-05-16T06:11:49.492Z","datePublished":"2022-05-16T06:11:49.492Z","dateModified":"2022-09-23T05:59:37.416Z","headline":"Color alignment for multiple design systems - Wix UX","name":"Color alignment for multiple design systems - Wix UX","description":"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. These systems have grown and evolved over…","identifier":"de87ef3547cb","author":{"@type":"Person","name":"Moria Cohen","url":"https:\u002F\u002Fwix-ux.com\u002F@moria.cohen.m"},"creator":["Moria Cohen"],"publisher":{"@type":"Organization","name":"Wix UX","url":"wix-ux.com","logo":{"@type":"ImageObject","width":272,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:544\u002F7*V1_7XP4snlmqrc_0Njontw.png"}},"mainEntityOfPage":"https:\u002F\u002Fwix-ux.com\u002Fcolor-alignment-for-multiple-design-systems-de87ef3547cb"}</script><style type="text/css" data-fela-rehydration="603" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="603" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(26, 137, 23, 1)}.es{border-color:rgba(26, 137, 23, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(26, 137, 23, 1)}.ez:disabled:hover{border-color:rgba(26, 137, 23, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{margin-left:auto}.gt{margin-right:auto}.gu{max-width:813px}.ha{clear:both}.hc{cursor:zoom-in}.hd{z-index:auto}.hf{max-width:100%}.hg{height:auto}.hh{line-height:1.23}.hi{letter-spacing:0}.hj{font-style:normal}.hk{font-weight:700}.if{margin-bottom:-0.27em}.ig{line-height:1.394}.jb{align-items:baseline}.jc{width:48px}.jd{height:48px}.je{border:2px solid rgba(255, 255, 255, 1)}.jf{z-index:0}.jg{box-shadow:none}.jh{border:1px solid rgba(0, 0, 0, 0.05)}.ji{margin-left:-12px}.jj{width:28px}.jk{height:28px}.jl{z-index:1}.jm{width:24px}.jn{margin-bottom:2px}.jo{flex-wrap:nowrap}.jp{font-size:16px}.jq{line-height:24px}.js{margin:0 8px}.jt{display:inline}.ju{color:rgba(26, 137, 23, 1)}.jv{fill:rgba(26, 137, 23, 1)}.jy{flex:0 0 auto}.kb{flex-wrap:wrap}.kc{white-space:pre-wrap}.kd{margin-right:4px}.ke{overflow:hidden}.kf{max-height:20px}.kg{text-overflow:ellipsis}.kh{display:-webkit-box}.ki{-webkit-line-clamp:1}.kj{-webkit-box-orient:vertical}.kk{word-break:break-all}.km{padding-left:8px}.kn{padding-right:8px}.lo> *{flex-shrink:0}.lp{overflow-x:scroll}.lq::-webkit-scrollbar{display:none}.lr{scrollbar-width:none}.ls{-ms-overflow-style:none}.lt{width:74px}.lu{flex-direction:row}.lv{z-index:2}.ly{-webkit-user-select:none}.lz{border:0}.ma{fill:rgba(117, 117, 117, 1)}.md{outline:0}.me{user-select:none}.mf> svg{pointer-events:none}.mo{cursor:progress}.mp{margin-left:4px}.mq{margin-top:0px}.mr{opacity:1}.ms{padding:4px 0}.mv{width:16px}.mx{display:inline-flex}.nd{padding:8px 2px}.ne svg{color:#6B6B6B}.nv{line-height:1.12}.nw{letter-spacing:-0.022em}.nx{font-weight:600}.oq{margin-bottom:-0.28em}.or{line-height:1.58}.os{letter-spacing:-0.004em}.ot{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.pm{margin-bottom:-0.46em}.ps{padding-left:30px}.pt{line-height:40px}.pu{letter-spacing:-0.009em}.pv{font-weight:300}.pw{font-size:28px}.qh{max-width:1869px}.qn{margin-top:10px}.qo{max-width:728px}.qr{line-height:1.18}.rf{margin-bottom:-0.31em}.rg{max-width:2412px}.rh{max-width:1701px}.ri{list-style-type:decimal}.rj{margin-left:30px}.rk{padding-left:0px}.rq{font-style:italic}.rr{max-width:1043px}.rs{max-width:1023px}.rt{max-width:990px}.ru{max-width:2474px}.rv{max-width:2709px}.rw{max-width:1009px}.rx{max-width:1600px}.ry{margin-top:32px}.rz{margin-bottom:14px}.sa{padding-top:24px}.sb{padding-bottom:10px}.sc{background-color:#000000}.sd{height:3px}.se{width:3px}.sf{margin-right:20px}.sg{text-decoration:underline}.sh{margin-bottom:26px}.si{margin-top:6px}.sj{margin-top:8px}.sk{margin-right:8px}.sl{padding:8px 16px}.sm{border-radius:100px}.sn{transition:background 300ms ease}.sp{white-space:nowrap}.sq{border-top:none}.sr{margin-bottom:50px}.ss{height:52px}.st{max-height:52px}.su{box-sizing:content-box}.sv{position:static}.sx{max-width:155px}.td{margin-bottom:64px}.te{margin-bottom:48px}.ts{border-radius:2px}.tu{height:64px}.tv{width:64px}.tw{align-self:flex-end}.tx{color:rgba(255, 255, 255, 1)}.ty{fill:rgba(255, 255, 255, 1)}.tz{background:rgba(25, 25, 25, 1)}.ua{border-color:rgba(25, 25, 25, 1)}.ud:disabled{opacity:0.1}.ue:disabled:hover{background:rgba(25, 25, 25, 1)}.uf:disabled:hover{border-color:rgba(25, 25, 25, 1)}.ug{flex:1 1 auto}.um{padding-right:4px}.un{font-weight:500}.uu{margin-top:16px}.va{height:0px}.vb{gap:18px}.vc{fill:rgba(61, 61, 61, 1)}.ve{padding-bottom:6px}.vf{border-bottom:1px solid #F2F2F2}.vl{fill:#242424}.vm{background:0}.vn{border-color:#242424}.vo:disabled:hover{color:#242424}.vp:disabled:hover{fill:#242424}.vq:disabled:hover{border-color:#242424}.wb{border-bottom:solid 1px #E5E5E5}.wc{margin-top:72px}.wd{padding:24px 0}.we{margin-bottom:0px}.wf{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(15, 115, 12, 1)}.eu:hover{border-color:rgba(15, 115, 12, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jr:hover{text-decoration:underline}.jw:hover:not(:disabled){color:rgba(15, 115, 12, 1)}.jx:hover:not(:disabled){fill:rgba(15, 115, 12, 1)}.mc:hover{fill:rgba(8, 8, 8, 1)}.mt:hover{fill:#000000}.mu:hover p{color:#000000}.mw:hover{color:#000000}.nf:hover svg{color:#000000}.so:hover{background-color:#F2F2F2}.tt:hover{background-color:none}.ub:hover{background:#000000}.uc:hover{border-color:#242424}.vd:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.he:focus{transform:scale(1.01)}.mb:focus{fill:rgba(8, 8, 8, 1)}.ng:focus svg{color:#000000}.mg:active{border-style:none}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:50px}.gc{max-width:680px}.gz{margin-top:40px}.ib{font-size:42px}.ic{margin-top:1em}.id{line-height:52px}.ie{letter-spacing:-0.011em}.it{font-size:22px}.iu{margin-top:0.92em}.iv{line-height:28px}.ja{align-items:center}.la{border-top:solid 1px #F2F2F2}.lb{border-bottom:solid 1px #F2F2F2}.lc{margin:32px 0 0}.ld{padding:3px 8px}.lm> *{margin-right:24px}.ln> :last-child{margin-right:0}.mn{margin-top:0px}.nc{margin:0}.om{font-size:24px}.on{margin-top:1.95em}.oo{line-height:30px}.op{letter-spacing:-0.016em}.pi{font-size:20px}.pj{margin-top:0.94em}.pk{line-height:32px}.pl{letter-spacing:-0.003em}.pr{margin-top:2.14em}.qb{margin-top:1.75em}.qg{margin-top:2.64em}.qm{margin-top:56px}.rc{margin-top:1.72em}.rd{line-height:24px}.re{letter-spacing:0}.rp{margin-top:1.14em}.tc{display:inline-block}.tf{flex-direction:row}.ti{margin-bottom:0}.tj{margin-right:20px}.uh{max-width:500px}.uz{margin-bottom:88px}.vk{margin:40px 0 16px}.vv{width:min-width}.wa{padding-top:72px}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mm{margin-top:0px}.qp{margin-left:auto}.qq{text-align:center}.tb{display:inline-block}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.ml{margin-top:0px}.ta{display:inline-block}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mj{margin-top:0px}.mk{margin-right:0px}.sz{display:inline-block}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:2px}.gv{margin-top:32px}.hl{font-size:32px}.hm{margin-top:1.01em}.hn{line-height:38px}.ho{letter-spacing:-0.014em}.ih{font-size:18px}.ii{margin-top:0.79em}.ij{line-height:24px}.iw{align-items:flex-start}.jz{flex-direction:column}.ko{margin:24px -24px 0}.kp{padding:0}.le> *{margin-right:8px}.lf> :last-child{margin-right:24px}.lw{margin-left:0px}.mh{margin-top:0px}.mi{margin-right:0px}.my{margin:0}.nh{border:1px solid #F2F2F2}.ni{border-radius:99em}.nj{padding:0px 16px 0px 12px}.nk{height:38px}.nl{align-items:center}.nn svg{margin-right:8px}.ny{font-size:20px}.nz{margin-top:1.2em}.oa{letter-spacing:0}.ou{margin-top:0.67em}.ov{line-height:28px}.ow{letter-spacing:-0.003em}.pn{margin-top:1.56em}.px{margin-top:1.08em}.qc{margin-top:2em}.qi{margin-top:40px}.qs{font-size:16px}.qt{margin-top:1.23em}.rl{margin-top:1.34em}.sy{display:inline-block}.tq{margin-bottom:20px}.tr{margin-right:0}.ul{max-width:100%}.uo{font-size:24px}.up{line-height:30px}.uq{letter-spacing:-0.016em}.uv{margin-bottom:64px}.vg{margin:32px 0 16px}.vr{width:100%}.vw{padding-top:48px}.nm:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:50px}.gb{max-width:680px}.gy{margin-top:40px}.hx{font-size:42px}.hy{margin-top:1em}.hz{line-height:52px}.ia{letter-spacing:-0.011em}.iq{font-size:22px}.ir{margin-top:0.92em}.is{line-height:28px}.iz{align-items:center}.kw{border-top:solid 1px #F2F2F2}.kx{border-bottom:solid 1px #F2F2F2}.ky{margin:32px 0 0}.kz{padding:3px 8px}.lk> *{margin-right:24px}.ll> :last-child{margin-right:0}.nb{margin:0}.oi{font-size:24px}.oj{margin-top:1.95em}.ok{line-height:30px}.ol{letter-spacing:-0.016em}.pe{font-size:20px}.pf{margin-top:0.94em}.pg{line-height:32px}.ph{letter-spacing:-0.003em}.pq{margin-top:2.14em}.qa{margin-top:1.75em}.qf{margin-top:2.64em}.ql{margin-top:56px}.qz{margin-top:1.72em}.ra{line-height:24px}.rb{letter-spacing:0}.ro{margin-top:1.14em}.tg{flex-direction:row}.tk{margin-bottom:0}.tl{margin-right:20px}.ui{max-width:500px}.uy{margin-bottom:88px}.vj{margin:40px 0 16px}.vu{width:min-width}.vz{padding-top:72px}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:50px}.ga{max-width:680px}.gx{margin-top:40px}.ht{font-size:42px}.hu{margin-top:1em}.hv{line-height:52px}.hw{letter-spacing:-0.011em}.in{font-size:22px}.io{margin-top:0.92em}.ip{line-height:28px}.iy{align-items:center}.ks{border-top:solid 1px #F2F2F2}.kt{border-bottom:solid 1px #F2F2F2}.ku{margin:32px 0 0}.kv{padding:3px 8px}.li> *{margin-right:24px}.lj> :last-child{margin-right:0}.na{margin:0}.oe{font-size:24px}.of{margin-top:1.95em}.og{line-height:30px}.oh{letter-spacing:-0.016em}.pa{font-size:20px}.pb{margin-top:0.94em}.pc{line-height:32px}.pd{letter-spacing:-0.003em}.pp{margin-top:2.14em}.pz{margin-top:1.75em}.qe{margin-top:2.64em}.qk{margin-top:56px}.qw{margin-top:1.72em}.qx{line-height:24px}.qy{letter-spacing:0}.rn{margin-top:1.14em}.th{flex-direction:row}.tm{margin-bottom:0}.tn{margin-right:20px}.uj{max-width:500px}.ux{margin-bottom:88px}.vi{margin:40px 0 16px}.vt{width:min-width}.vy{padding-top:72px}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:2px}.gw{margin-top:32px}.hp{font-size:32px}.hq{margin-top:1.01em}.hr{line-height:38px}.hs{letter-spacing:-0.014em}.ik{font-size:18px}.il{margin-top:0.79em}.im{line-height:24px}.ix{align-items:flex-start}.ka{flex-direction:column}.kq{margin:24px 0 0}.kr{padding:0}.lg> *{margin-right:8px}.lh> :last-child{margin-right:8px}.lx{margin-left:0px}.mz{margin:0}.no{border:1px solid #F2F2F2}.np{border-radius:99em}.nq{padding:0px 16px 0px 12px}.nr{height:38px}.ns{align-items:center}.nu svg{margin-right:8px}.ob{font-size:20px}.oc{margin-top:1.2em}.od{letter-spacing:0}.ox{margin-top:0.67em}.oy{line-height:28px}.oz{letter-spacing:-0.003em}.po{margin-top:1.56em}.py{margin-top:1.08em}.qd{margin-top:2em}.qj{margin-top:40px}.qu{font-size:16px}.qv{margin-top:1.23em}.rm{margin-top:1.34em}.to{margin-bottom:20px}.tp{margin-right:0}.uk{max-width:100%}.ur{font-size:24px}.us{line-height:30px}.ut{letter-spacing:-0.016em}.uw{margin-bottom:64px}.vh{margin:32px 0 16px}.vs{width:100%}.vx{padding-top:48px}.nt:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="print">.sw{display:none}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hb{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style><style type="text/css" data-fela-rehydration="603" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kl{max-height:none}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fde87ef3547cb&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" href="https://medium.com/?source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" href="https://medium.com/search?source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><figure class="gv gw gx gy gz ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt gu"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*fKmapA3k0r5WFUhUgXXg1w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fKmapA3k0r5WFUhUgXXg1w.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fKmapA3k0r5WFUhUgXXg1w.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fKmapA3k0r5WFUhUgXXg1w.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fKmapA3k0r5WFUhUgXXg1w.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fKmapA3k0r5WFUhUgXXg1w.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fKmapA3k0r5WFUhUgXXg1w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*fKmapA3k0r5WFUhUgXXg1w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hf hg c" width="700" height="383" loading="eager" role="presentation"/></picture></div></div></figure><div><h1 id="5ed3" class="pw-post-title hh hi hj bf hk hl hm hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if bk" data-testid="storyTitle">Color alignment for multiple design systems</h1></div><div><h2 id="15ac" class="pw-subtitle-paragraph ig hi hj bf b ih ii ij ik il im in io ip iq ir is it iu iv cq du">How to deal with color alignment challenges in a single product</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="iw ix iy iz ja ab"><div><div class="ab jb"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/@moria.cohen.m?source=post_page---byline--de87ef3547cb---------------------------------------" rel="noopener follow"><div class="l jc jd by je jf"><div class="l fj"><img alt="Moria Cohen" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*6ikjVNiI9bl4UUFVEpmXdg.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="jg by l dd de fs n jh ft"></div></div></div></a></div></div><div class="ji ab fj"><div><div class="bm" aria-hidden="false"><a href="https://wix-ux.com/?source=post_page---byline--de87ef3547cb---------------------------------------" rel="noopener ugc nofollow"><div class="l jj jk by je jl"><div class="l fj"><img alt="Wix UX" class="l fd by br jm cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*u86cGgAv5zBUqy65gVtpuQ.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="jg by l br jm fs n jh ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="jn ab q"><div class="ab q jo"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b jp jq bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" data-testid="authorName" href="https://medium.com/@moria.cohen.m?source=post_page---byline--de87ef3547cb---------------------------------------" rel="noopener follow">Moria Cohen</a></p></div></div></div><span class="js jt" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b jp jq du"><span><a class="ju jv ah ai aj ak al am an ao ap aq ar ex jw jx" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F45a89869deb9&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=post_page-45a89869deb9--byline--de87ef3547cb---------------------post_header------------------" rel="noopener follow">Follow</a></span></p></div></div></span></div></div><div class="l jy"><span class="bf b bg z du"><div class="ab cn jz ka kb"><div class="fu fv ab"><div class="bf b bg z du ab kc"><span class="kd l jy">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jr ab q" data-testid="publicationName" href="https://wix-ux.com/?source=post_page---byline--de87ef3547cb---------------------------------------" rel="noopener ugc nofollow"><p class="bf b bg z ke kf kg kh ki kj kk kl bk">Wix UX</p></a></div></div></div><div class="h k"><span class="js jt" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">7 min read</span><div class="km kn l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">May 16, 2022</span></div></span></div></span></div></div></div><div class="ab cp ko kp kq kr ks kt ku kv kw kx ky kz la lb lc ld"><div class="h k w fg fh q"><div class="lt l"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj kd lw lx ly"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fde87ef3547cb&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=---header_actions--de87ef3547cb---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lz mr ms ab q fk mt mu" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mq"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count mp mq">1</span></p></button></div></div></div><div class="ab q le lf lg lh li lj lk ll lm ln lo lp lq lr ls"><div class="mv k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fde87ef3547cb&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=---header_actions--de87ef3547cb---------------------bookmark_footer------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mw" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mx cn"><div class="l ae"><div class="ab cb"><div class="my mz na nb nc hf ci bh"><div class="ab"><div class="bm" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al nd an ao ap ex ne nf mu ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al nd an ao ap ex ne nf mu ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><h1 id="b502" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">The challenge</h1><p id="f6bc" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">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.</p><p id="7b9a" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">These systems have grown and evolved over time. Gaps between the systems have narrowed and as a result, their color palettes have become more similar.</p><p id="2e09" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">After all, Wix is still a single brand, and as designers, we strive to give users a consistent experience.</p><p id="f816" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">With this goal in mind, I set out to align the color palettes used across all design systems. The main challenge here was figuring out a sensible way to make changes in a product that is already being used by many users.</p><h1 id="e434" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Research and process</h1><p id="b5a0" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">As part of the alignment process, I mapped out every single color used across several design systems.</p><p id="da33" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">First, I analyzed all existing colors in each system. I identified colors and removed any colors that weren’t being used.</p><p id="4497" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Next, we optimized colors for accessibility. Using the largest color palette available, we adjusted colors in order to make all CTAs in the system accessible.</p><p id="5ce1" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Once we were pleased with the new palette, I got started with the actual alignment process. I used a fixed color palette as a reference to cover all the hues for other palettes.</p><h1 id="d918" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Aligning colors according to intent</h1><blockquote class="ps"><p id="0176" class="pt pu hj bf pv pw px py pz qa qb pm du">When aligning colors across several design systems, it’s important to make sure that the intent of colors inside components is not affected before making a match (intent meaning the specific purpose of each color).</p></blockquote><p id="09d7" class="pw-post-body-paragraph or os hj ot b ih qc ov ow ik qd oy oz pa qe pc pd pe qf pg ph pi qg pk pl pm gn bk">Color matching only works when colors have the same intent. During the process, I found that main colors in different palettes usually have the same intent, which allowed me to align colors without affecting the intent.</p><p id="8aaf" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">I examined each main color separately, and then aligned each one according to the hue. Consider the example below:</p><p id="5cc5" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">I wanted to align <strong class="ot hk">Palette A </strong>to <strong class="ot hk">Palette B</strong>, which served as the reference in this case.</p><p id="b948" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">First, I placed <strong class="ot hk">Palette A</strong> directly above <strong class="ot hk">Palette B</strong> according to name and intent. Next, I arranged the colors in order to understand where color changes were necessary and matched them according to the reference.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qh"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*UWW3-MJUzV2JmPS9Is-DqA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*UWW3-MJUzV2JmPS9Is-DqA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*UWW3-MJUzV2JmPS9Is-DqA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*UWW3-MJUzV2JmPS9Is-DqA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*UWW3-MJUzV2JmPS9Is-DqA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*UWW3-MJUzV2JmPS9Is-DqA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*UWW3-MJUzV2JmPS9Is-DqA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*UWW3-MJUzV2JmPS9Is-DqA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Research and process example" class="bh hf hg c" width="700" height="180" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Example of color alignment</figcaption></figure><h1 id="a2e3" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Pain points</h1><h2 id="7af9" class="qr nw hj bf nx qs qt dy oa qu qv ea od pa qw qx qy pe qz ra rb pi rc rd re rf bk">Different intents</h2><p id="1dba" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">As mentioned earlier, the intent of each palette is usually the same. However, there was one specific case where gaps in intent were detected.</p><p id="d0da" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">In the example below, you’ll notice that <strong class="ot hk">Palette A</strong> uses color <strong class="ot hk">D35</strong> for placeholder text, while <strong class="ot hk">Palette B</strong> (the reference palette) uses color <strong class="ot hk">D40</strong> for placeholder text.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rg"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*RBtPM8zpEAlFrJh6LhAmXQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*RBtPM8zpEAlFrJh6LhAmXQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*RBtPM8zpEAlFrJh6LhAmXQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*RBtPM8zpEAlFrJh6LhAmXQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*RBtPM8zpEAlFrJh6LhAmXQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*RBtPM8zpEAlFrJh6LhAmXQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*RBtPM8zpEAlFrJh6LhAmXQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*RBtPM8zpEAlFrJh6LhAmXQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Different intents placeholder example" class="bh hf hg c" width="700" height="162" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Placeholder before color alignment</figcaption></figure><p id="7604" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">In this case, I was forced to choose between aligning according to intent, or according to hue.</p><p id="3b45" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">If I aligned by hue, system uniformity would have been compromised, which could result in confusion, since placeholders would have different colors across the same system.</p><p id="5c24" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Therefore, I decided to align according to intent and got rid of one of the original placeholder colors.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rh"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*kNPOpFHFYF6cjdOCNBAMIA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*kNPOpFHFYF6cjdOCNBAMIA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*kNPOpFHFYF6cjdOCNBAMIA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*kNPOpFHFYF6cjdOCNBAMIA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*kNPOpFHFYF6cjdOCNBAMIA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*kNPOpFHFYF6cjdOCNBAMIA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*kNPOpFHFYF6cjdOCNBAMIA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*kNPOpFHFYF6cjdOCNBAMIA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Alignment by intent example" class="bh hf hg c" width="700" height="198" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Alignment by intent</figcaption></figure><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rh"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*34KK0mQp7JfsNb0bhkinAg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*34KK0mQp7JfsNb0bhkinAg.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*34KK0mQp7JfsNb0bhkinAg.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*34KK0mQp7JfsNb0bhkinAg.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*34KK0mQp7JfsNb0bhkinAg.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*34KK0mQp7JfsNb0bhkinAg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*34KK0mQp7JfsNb0bhkinAg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*34KK0mQp7JfsNb0bhkinAg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Alignment by hue example" class="bh hf hg c" width="700" height="198" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Alignment by hue</figcaption></figure><h2 id="2d98" class="qr nw hj bf nx qs qt dy oa qu qv ea od pa qw qx qy pe qz ra rb pi rc rd re rf bk">How to align between different hues</h2><p id="1084" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">After improving accessibility in the reference palette, I noticed that the purple hues in the two pallets were pretty different from each other. Purple is sensitive at Wix, since it’s the color used to represent anything that’s premium, so I wanted to be careful with making any major changes there.</p><p id="f1f7" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Instead of choosing one of the existing purple palettes, I created a new one, which was a combination of the purple hues in <strong class="ot hk">Palette A</strong> and <strong class="ot hk">Palette B</strong>.</p><p id="0502" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Here’s how I came up with the new purple palette:</p><ol class=""><li id="bd3b" class="or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm ri rj rk bk">I added the missing hues to <strong class="ot hk">Palette A</strong>, (the top palette) which I found by creating an horizontal gradient between the adjacent hues.</li><li id="8afe" class="or os hj ot b ih rl ov ow ik rm oy oz pa rn pc pd pe ro pg ph pi rp pk pl pm ri rj rk bk">Once both palettes were aligned, I added an additional<em class="rq"> </em>palette right between <strong class="ot hk">Palette A </strong>and <strong class="ot hk">Palette B </strong>by creating a vertical gradient between the two palettes.</li></ol><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*pUGoJg6q_eEUSc1R8h8vvA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*pUGoJg6q_eEUSc1R8h8vvA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*pUGoJg6q_eEUSc1R8h8vvA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*pUGoJg6q_eEUSc1R8h8vvA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*pUGoJg6q_eEUSc1R8h8vvA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*pUGoJg6q_eEUSc1R8h8vvA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*pUGoJg6q_eEUSc1R8h8vvA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*pUGoJg6q_eEUSc1R8h8vvA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Solution to palette that doesn’t work well" class="bh hf hg c" width="700" height="323" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Created a new purple palette</figcaption></figure><h2 id="0e5c" class="qr nw hj bf nx qs qt dy oa qu qv ea od pa qw qx qy pe qz ra rb pi rc rd re rf bk">Being honest with relevant teams</h2><p id="0ae3" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">The Wix Editor team uses a saturated green hue to highlight icons on stage.</p><p id="9bf7" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Since it was replaced by a milder hue, the highlighting of the icon could have been compromised.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rs"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Qm_45f8GW3lMn9J6JWJMBA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Qm_45f8GW3lMn9J6JWJMBA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Qm_45f8GW3lMn9J6JWJMBA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Qm_45f8GW3lMn9J6JWJMBA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Qm_45f8GW3lMn9J6JWJMBA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Qm_45f8GW3lMn9J6JWJMBA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Qm_45f8GW3lMn9J6JWJMBA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Qm_45f8GW3lMn9J6JWJMBA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Green icon screen shot (before)" class="bh hf hg c" width="700" height="198" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Green icon before</figcaption></figure><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rs"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*cHCloYiZhZZI6kVVqrAxUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*cHCloYiZhZZI6kVVqrAxUA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*cHCloYiZhZZI6kVVqrAxUA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*cHCloYiZhZZI6kVVqrAxUA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*cHCloYiZhZZI6kVVqrAxUA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*cHCloYiZhZZI6kVVqrAxUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*cHCloYiZhZZI6kVVqrAxUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*cHCloYiZhZZI6kVVqrAxUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Green icon screen shot (after)" class="bh hf hg c" width="700" height="198" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Green icon after</figcaption></figure><p id="ec04" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">It doesn’t seem like a substantial change, and we will definitely run several tests before releasing the changes. Nevertheless, it’s important to be transparent with teams that could be affected by changes, even before running tests.</p><p id="0d58" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Your colleagues will appreciate the honesty, and this will only strengthen their confidence in the alignment process.</p><p id="066a" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">We met with the relevant team and presented the situation. They supported the change and agreed that it would not affect the icon’s prominence, so I continued with the process.</p><p id="8198" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">In cases in which a different color had been required,, a specific hue would be added to a separate category of colors called <strong class="ot hk">Extra Colors</strong>. This category is used for specific cases like avatars, graphs, bounding boxes and more.</p><p id="1b8c" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk"><strong class="ot hk">Extra Colors </strong>are kept separate and each library has its own collection of extra colors.</p><h2 id="8b21" class="qr nw hj bf nx qs qt dy oa qu qv ea od pa qw qx qy pe qz ra rb pi rc rd re rf bk">The importance of testing and what to do in case of a failed test</h2><p id="11d2" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">After aligning the dark palette, I tested changes on Figma components. I did not anticipate any issues, since the hues were pretty close. However, I detected a problem.<strong class="ot hk"> Color D5</strong> is used as a menu background. After the change, the text in the menu became less prominent.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rt"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*GcXinu44p5zY78fwDZfeog.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*GcXinu44p5zY78fwDZfeog.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*GcXinu44p5zY78fwDZfeog.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*GcXinu44p5zY78fwDZfeog.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*GcXinu44p5zY78fwDZfeog.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*GcXinu44p5zY78fwDZfeog.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*GcXinu44p5zY78fwDZfeog.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*GcXinu44p5zY78fwDZfeog.png 640w, https://miro.medium.com/v2/resize:fit:720/1*GcXinu44p5zY78fwDZfeog.png 720w, https://miro.medium.com/v2/resize:fit:750/1*GcXinu44p5zY78fwDZfeog.png 750w, https://miro.medium.com/v2/resize:fit:786/1*GcXinu44p5zY78fwDZfeog.png 786w, https://miro.medium.com/v2/resize:fit:828/1*GcXinu44p5zY78fwDZfeog.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*GcXinu44p5zY78fwDZfeog.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*GcXinu44p5zY78fwDZfeog.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Failed test example" class="bh hf hg c" width="700" height="516" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Failed test example</figcaption></figure><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ru"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*A9nmqVe1eg_gRs8iQtEQ3g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*A9nmqVe1eg_gRs8iQtEQ3g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*A9nmqVe1eg_gRs8iQtEQ3g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*A9nmqVe1eg_gRs8iQtEQ3g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*A9nmqVe1eg_gRs8iQtEQ3g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*A9nmqVe1eg_gRs8iQtEQ3g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*A9nmqVe1eg_gRs8iQtEQ3g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*A9nmqVe1eg_gRs8iQtEQ3g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Alignment process that failed in test" class="bh hf hg c" width="700" height="229" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Failed color alignment</figcaption></figure><p id="00e6" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">To solve it, I treated color<strong class="ot hk"> D5</strong> from <strong class="ot hk">Palette A</strong> like an additional color in the palette instead of merging it with color <strong class="ot hk">D70</strong> from<strong class="ot hk"> Palette B.</strong></p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*9WrymHVDGZsZgAcGdLUuoQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*9WrymHVDGZsZgAcGdLUuoQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*9WrymHVDGZsZgAcGdLUuoQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*9WrymHVDGZsZgAcGdLUuoQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*9WrymHVDGZsZgAcGdLUuoQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*9WrymHVDGZsZgAcGdLUuoQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*9WrymHVDGZsZgAcGdLUuoQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*9WrymHVDGZsZgAcGdLUuoQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Failed test solution" class="bh hf hg c" width="700" height="209" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Solution of failed test</figcaption></figure><h1 id="e14f" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Reducing close shades</h1><p id="2c51" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">A good example of how I significantly reduced close shades was by reducing disabled colors. Disabled colors were divided into <strong class="ot hk">Categories E, B and D.</strong></p><p id="5dbc" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">In the past, the method used was to take any color and turn it into grayscale in order to create a unique disabled color for each color. This meant that each color in the system had its own unique disabled color.</p><p id="63b3" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Because of the method used, I had several duplicates to eliminate.</p><p id="2e68" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">I started by sorting the colors in <strong class="ot hk">Categorie E</strong> by hue and then eliminated all the close colors. I did the same for each category separately and then finally for all categories at once.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rw"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*-pOJVEz7RXhzhUNxrztBSQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*-pOJVEz7RXhzhUNxrztBSQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*-pOJVEz7RXhzhUNxrztBSQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*-pOJVEz7RXhzhUNxrztBSQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*-pOJVEz7RXhzhUNxrztBSQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*-pOJVEz7RXhzhUNxrztBSQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*-pOJVEz7RXhzhUNxrztBSQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*-pOJVEz7RXhzhUNxrztBSQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Reduce close shades example" class="bh hf hg c" width="700" height="334" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Reducing disabled colors</figcaption></figure><p id="5bc0" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">I actually managed to go from 20 colors to just 5 colors without compromising on any hues! Today, these 5 colors cover the entire Wix ecosystem.</p><figure class="qi qj qk ql qm ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt rx"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*qPB_SO91zcSkJZQ_ 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*qPB_SO91zcSkJZQ_ 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*qPB_SO91zcSkJZQ_ 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*qPB_SO91zcSkJZQ_ 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*qPB_SO91zcSkJZQ_ 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*qPB_SO91zcSkJZQ_ 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*qPB_SO91zcSkJZQ_ 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*qPB_SO91zcSkJZQ_ 640w, https://miro.medium.com/v2/resize:fit:720/0*qPB_SO91zcSkJZQ_ 720w, https://miro.medium.com/v2/resize:fit:750/0*qPB_SO91zcSkJZQ_ 750w, https://miro.medium.com/v2/resize:fit:786/0*qPB_SO91zcSkJZQ_ 786w, https://miro.medium.com/v2/resize:fit:828/0*qPB_SO91zcSkJZQ_ 828w, https://miro.medium.com/v2/resize:fit:1100/0*qPB_SO91zcSkJZQ_ 1100w, https://miro.medium.com/v2/resize:fit:1400/0*qPB_SO91zcSkJZQ_ 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Reduce close shades conclusion" class="bh hf hg c" width="700" height="407" loading="lazy"/></picture></div></div><figcaption class="qn ff qo gs gt qp qq bf b bg z du">Reducing disabled colors conclusion</figcaption></figure><h1 id="c3b5" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Tests</h1><blockquote class="ps"><p id="e8e8" class="pt pu hj bf pv pw px py pz qa qb pm du">Tests are a very important part of the process, not only to ensure a smooth transition, but also to visualize changes that are about to happen.</p></blockquote><p id="f12a" class="pw-post-body-paragraph or os hj ot b ih qc ov ow ik qd oy oz pa qe pc pd pe qf pg ph pi qg pk pl pm gn bk">First, I went through all the components and models on the Figma library to make sure the updated colors were working well.</p><p id="2b21" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Next, I checked all the new colors on full screens on Figma and compared the screens before and after the changes to detect any small nuances that I may have missed in the first stage.</p><p id="2dd1" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">After checking the colors in Figma, the changes were developed in the system and finally, I tested them in production.</p><h1 id="ad12" class="nv nw hj bf nx ny nz ij oa ob oc im od oe of og oh oi oj ok ol om on oo op oq bk">Conclusion</h1><p id="4e21" class="pw-post-body-paragraph or os hj ot b ih ou ov ow ik ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm gn bk">Aligning colors across all design systems created a more cohesive and organized system. Additionally, color adjustments made the system more consistent, accessible and up to date.</p><p id="dd4e" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">We recognized the importance of staying true to intent, and learned how to deal with failed tests. We also learned that being transparent about our process helped increase confidence, both for us and for any teams affected by the changes.</p><p id="8c50" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk">Whether you’re trying to improve accessibility, combine several palettes or adapt colors to trends in the market, I hope my process will inspire you to make changes to colors in your product’s palette.</p></div></div></div><div class="ab cb ry rz sa sb" role="separator"><span class="sc by bm sd se sf"></span><span class="sc by bm sd se sf"></span><span class="sc by bm sd se"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="eba8" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk"><em class="rq">Many thanks to Ayelet Reuveni who guided me throughout the process, to Assaf Zinger who worked on improving the accessibility and creating the reference palette, and to </em><a class="af sg" href="https://medium.com/@lalaura1089" rel="noopener"><em class="rq">Laura Moreno Saraga</em></a><em class="rq"> who edited the article.</em></p></div></div></div><div class="ab cb ry rz sa sb" role="separator"><span class="sc by bm sd se sf"></span><span class="sc by bm sd se sf"></span><span class="sc by bm sd se"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="409e" class="pw-post-body-paragraph or os hj ot b ih pn ov ow ik po oy oz pa pp pc pd pe pq pg ph pi pr pk pl pm gn bk"><strong class="ot hk">Is there a topic you want to see covered by the Wix UX team? Let us know by filling out this </strong><a class="af sg" href="https://forms.wix.com/c1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b" rel="noopener ugc nofollow" target="_blank"><strong class="ot hk">form</strong></a><strong class="ot hk">.</strong></p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sh si ab kb"><div class="sj ab"><a class="sk ay am ao" href="https://medium.com/tag/ux?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><div class="sl fj cx sm ge sn so bf b bg z bk sp">UX</div></a></div><div class="sj ab"><a class="sk ay am ao" href="https://medium.com/tag/wix?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><div class="sl fj cx sm ge sn so bf b bg z bk sp">Wix</div></a></div><div class="sj ab"><a class="sk ay am ao" href="https://medium.com/tag/design-systems?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><div class="sl fj cx sm ge sn so bf b bg z bk sp">Design Systems</div></a></div><div class="sj ab"><a class="sk ay am ao" href="https://medium.com/tag/colors?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><div class="sl fj cx sm ge sn so bf b bg z bk sp">Colors</div></a></div></div></div></div><div class="l"></div><footer class="sq sr ss st su ab q sv jl c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp sw"><div class="ab q lu"><div class="sx l"><span class="l sy sz ta e d"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj kd lw lx ly"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fde87ef3547cb&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=---footer_actions--de87ef3547cb---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></span><span class="l h g f tb tc"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj kd lw lx ly"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fde87ef3547cb&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=---footer_actions--de87ef3547cb---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lz mr ms ab q fk mt mu" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mq"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count mp mq">1</span></p></button></div></div></div></div><div class="ab q"><div class="sf l jy"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fde87ef3547cb&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&source=---footer_actions--de87ef3547cb---------------------bookmark_footer------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mw" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="sf l jy"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al nd an ao ap ex ne nf mu ng"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="td l"><div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="te l"><div class="ab tf tg th ka jz"><div class="ti tj tk tl tm tn to tp tq tr ab cp"><div class="h k"><a href="https://wix-ux.com/?source=post_page---post_publication_info--de87ef3547cb---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Wix UX" class="ts jc jd cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*u86cGgAv5zBUqy65gVtpuQ.png" width="48" height="48" loading="lazy"/><div class="ts l jd jc fs n fr tt"></div></div></a></div><div class="j i d"><a href="https://wix-ux.com/?source=post_page---post_publication_info--de87ef3547cb---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Wix UX" class="ts tv tu cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*u86cGgAv5zBUqy65gVtpuQ.png" width="64" height="64" loading="lazy"/><div class="ts l tu tv fs n fr tt"></div></div></a></div><div class="j i d tw jy"><div class="ab"><span><a class="bf b bg z tx sl ty tz ua ub uc ev ew ud ue uf fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fwix-ux&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&collection=Wix+UX&collectionId=5c12f12b4121&source=post_page---post_publication_info--de87ef3547cb---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co ug"><div class="uh ui uj uk ul l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://wix-ux.com/?source=post_page---post_publication_info--de87ef3547cb---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf un uo up uq ur us ut pa qx qy pe ra rb pi rd re bk"><span class="gn um">Published in <!-- -->Wix UX</span></h2></a><div class="sj ab jb"><div class="l jy"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" rel="noopener follow" href="/followers?source=post_page---post_publication_info--de87ef3547cb---------------------------------------">779 Followers</a></span></div><div class="bf b bg z du ab kc"><span class="js l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jr" rel="noopener follow" href="/back-to-basics-how-fundamental-ux-principles-lead-to-big-results-b5e3e6c3bfb1?source=post_page---post_publication_info--de87ef3547cb---------------------------------------">Last published <span>Dec 24, 2024</span></a></div></div><div class="uu l"><p class="bf b bg z bk"><span class="gn">The Wix way of doing UX</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z tx sl ty tz ua ub uc ev ew ud ue uf fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fwix-ux&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&collection=Wix+UX&collectionId=5c12f12b4121&source=post_page---post_publication_info--de87ef3547cb---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div></div><div class="ab tf tg th ka jz"><div class="ti tj tk tl tm tn to tp tq tr ab cp"><div class="h k"><a tabindex="0" href="https://medium.com/@moria.cohen.m?source=post_page---post_author_info--de87ef3547cb---------------------------------------" rel="noopener follow"><div class="l fj"><img alt="Moria Cohen" class="l fd by jd jc cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*6ikjVNiI9bl4UUFVEpmXdg.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l jd jc fs n ay tt"></div></div></a></div><div class="j i d"><a tabindex="0" href="https://medium.com/@moria.cohen.m?source=post_page---post_author_info--de87ef3547cb---------------------------------------" rel="noopener follow"><div class="l fj"><img alt="Moria Cohen" class="l fd by tu tv cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*6ikjVNiI9bl4UUFVEpmXdg.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l tu tv fs n ay tt"></div></div></a></div><div class="j i d tw jy"><div class="ab"><span><a class="bf b bg z tx sl ty tz ua ub uc ev ew ud ue uf fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F45a89869deb9&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=post_page-45a89869deb9--post_author_info--de87ef3547cb---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co ug"><div class="uh ui uj uk ul l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/@moria.cohen.m?source=post_page---post_author_info--de87ef3547cb---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf un uo up uq ur us ut pa qx qy pe ra rb pi rd re bk"><span class="gn um">Written by <!-- -->Moria Cohen</span></h2></a><div class="sj ab jb"><div class="l jy"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" href="https://medium.com/@moria.cohen.m/followers?source=post_page---post_author_info--de87ef3547cb---------------------------------------" rel="noopener follow">36 Followers</a></span></div><div class="bf b bg z du ab kc"><span class="js l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jr" href="https://medium.com/@moria.cohen.m/following?source=post_page---post_author_info--de87ef3547cb---------------------------------------" rel="noopener follow">5 Following</a></div></div><div class="uu l"><p class="bf b bg z bk">Product Designer at <a class="af ag ah ai aj ak al am an ao ap aq ar sg go" href="http://Wix.com" rel="noopener ugc nofollow">Wix.com</a></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z tx sl ty tz ua ub uc ev ew ud ue uf fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F45a89869deb9&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fcolor-alignment-for-multiple-design-systems-de87ef3547cb&user=Moria+Cohen&userId=45a89869deb9&source=post_page-45a89869deb9--post_author_info--de87ef3547cb---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div></div></div></div></div><div class="uv uw ux uy uz l"><div class="va bh r td"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf un ny ij oa ob im od oe og oh oi ok ol om oo op bk">Responses (<!-- -->1<!-- -->)</h2><div class="ab vb"><div><div class="bm" aria-hidden="false"><a class="vc vd" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--de87ef3547cb---------------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="ve vf vg vh vi vj vk l"></div><div class="ry l"><button class="bf b bg z bk sl vl vm vn mw mt uc ev ew ex vo vp vq fa vr vs vt vu vv fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="vw vx vy vz wa l bx"><div class="h k j"><div class="va bh wb wc"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="wd ab lu kb"><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/about?autoplay=1&source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">About</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Careers</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="mailto:pressinquiries@medium.com" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="we wf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="we l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/business?source=post_page-----de87ef3547cb---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20250217-152844-ca206ec2ba"</script><script>window.__GRAPHQL_URI__ = "https://wix-ux.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"This request is not using the cache middleware worker","group":"disabled","tags":["group-edgeCachePosts","post-de87ef3547cb","user-45a89869deb9","collection-5c12f12b4121"],"serverVariantState":"","middlewareEnabled":false,"cacheStatus":"DYNAMIC","shouldUseCache":false,"vary":[],"pubFeaturingPostPageLabelEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"COLLECTION","id":"5c12f12b4121","explicit":true},"viewerIsBot":false},"debug":{"requestId":"1a8cdd4b-9dd0-4b80-a026-bc0180041d1f","requestTag":"","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-64353957b0d5d40564eb15b96dabe76c-356162337aa24235-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fwix-ux.com\u002Fcolor-alignment-for-multiple-design-systems-de87ef3547cb","host":"wix-ux.com","hostname":"wix-ux.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"?source=---------1-----------------------"},"config":{"nodeEnv":"production","version":"main-20250217-152844-ca206ec2ba","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20250217-152844-ca206ec2ba","commit":"ca206ec2ba708507b1bef4ec007a67163085196c"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","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"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"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\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ImageMetadata:":{"__typename":"ImageMetadata","id":"","originalWidth":0,"originalHeight":0},"Collection:5c12f12b4121":{"__typename":"Collection","id":"5c12f12b4121","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFFFFF","point":0},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.1},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.2},{"__typename":"ColorPoint","color":"#FFD1E7D1","point":0.6},{"__typename":"ColorPoint","color":"#FFA3D0A2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF1A8917","point":0},{"__typename":"ColorPoint","color":"#FF11800E","point":0.1},{"__typename":"ColorPoint","color":"#FF0F730C","point":0.2},{"__typename":"ColorPoint","color":"#FF095407","point":1}]},"tintBackgroundSpectrum":null},"domain":"wix-ux.com","slug":"wix-ux","googleAnalyticsId":null,"name":"Wix UX","avatar":{"__ref":"ImageMetadata:1*u86cGgAv5zBUqy65gVtpuQ.png"},"description":"The Wix way of doing UX","subscriberCount":779,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:b5e3e6c3bfb1"}]},"isAuroraVisible":false,"tintColor":null,"newsletterV3":null,"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:5c12f12b4121-viewerId:lo_d63a31a1cf19"},"twitterUsername":null,"facebookPageId":null,"logo":{"__ref":"ImageMetadata:"}},"ROOT_QUERY":{"__typename":"Query","collectionByDomainOrSlug({\"domainOrSlug\":\"wix-ux.com\"})":{"__ref":"Collection:5c12f12b4121"},"variantFlags":[{"__typename":"VariantFlag","name":"enable_footer_app_buttons","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_verified_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_custom_moc_preview_for_google_referrer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_intrinsic_automatic_actions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lo_homepage","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_tag_recs","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"num_post_bottom_responses_to_show","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"ios_remove_twitter_onboarding_step","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_plans_page_branding_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_update_explore_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_client","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"mobile_custom_app_icon","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_access","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_entities_to_follow_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_create_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ml_rank_rex_anno","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_publish_permission_check","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"browsable_stream_config_bucket","valueType":{"__typename":"VariantFlagString","value":"curated-topics"}},{"__typename":"VariantFlag","name":"enable_app_flirty_thirty","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_trial_membership","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_branch_io","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cancellation_discount_v1_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"coronavirus_topic_recirc","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_aspirational_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_switch_plan_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rito_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_monthly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_lite_response_markup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_user_follows","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_test_auth","valueType":{"__typename":"VariantFlagString","value":"disallow"}},{"__typename":"VariantFlag","name":"enable_susi_redesign_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signup_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"textshots_userid","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"android_two_hour_refresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_paywall_email_experiment","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_android_miro_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recirc_model","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tick_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_plan","valueType":{"__typename":"VariantFlagString","value":"2c754bcc2995"}},{"__typename":"VariantFlag","name":"enable_braintree_paypal","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_configure_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_hybrid_ranking_model","valueType":{"__typename":"VariantFlagString","value":"experiment"}},{"__typename":"VariantFlag","name":"android_enable_lists_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_eventstats_event_processing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_reading_history","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tribute_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_verified_book_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_group_gifting","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_validate_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_iceland_nux","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reader_fair_distribution_non_qp","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_programming","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_new_push_notification_endpoint","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_display_paywall_after_onboarding","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"onboarding_tags_from_top_views","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_cart_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_auto_follow_on_subscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_experiment","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_seamless_social_sharing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signin_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"enable_creator_welcome_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_in_app_free_trial","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_aurora_pub_follower_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_topic_portals_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_updated_pub_recs_ui","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"skip_fs_cache_user_vals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_syntax_highlight","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium_com_canonical_urls","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_post_referrers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_rating_prompt_stories_read_threshold","valueType":{"__typename":"VariantFlagNumber","value":2}},{"__typename":"VariantFlag","name":"enable_apple_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cleansweep_shadow_cache","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_homepage","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"rex_generator_max_candidates","valueType":{"__typename":"VariantFlagNumber","value":1000}},{"__typename":"VariantFlag","name":"android_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"disable_partner_program_enrollment","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_model_v2","valueType":{"__typename":"VariantFlagString","value":"group_2"}},{"__typename":"VariantFlag","name":"enable_rex_aggregator_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_starspace","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pill_based_home_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_google_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cache_less_following_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_simplified_digest_v2_b","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_diversification_rex","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_easy_resubscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pre_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_signup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_import","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_country_expansion","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_plan","valueType":{"__typename":"VariantFlagString","value":"60e220181034"}},{"__typename":"VariantFlag","name":"enable_boost_nia_v01","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_yearly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_android_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_engagement_service_publish_response","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_iceland_forced_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_all_recs_surfaces","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_programming_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_avatar_upload","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members_username_selection","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"redefined_top_posts","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_see_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_integration","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pub_featuring_stats","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_members_only_audio","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ranker_v10","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_conversion_ranker_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_lite_archive_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_manage_membership_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_premium_plan","valueType":{"__typename":"VariantFlagString","value":"4a442ace1476"}},{"__typename":"VariantFlag","name":"enable_braintree_apple_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reengagement_notification_duration","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"enable_maim_the_meter","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_legacy_feed_in_iceland","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_verifications_service","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_winback_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_image_sharer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_paywall_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards_byline","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_native","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium2_kbfd","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recaptcha_enterprise","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_stripe_customers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sprig","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_home_post_menu","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_lock_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bg_post_post","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_one_tap","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"glyph_font_set","valueType":{"__typename":"VariantFlagString","value":"m2-unbound-source-serif-pro"}},{"__typename":"VariantFlag","name":"enable_trust_service_recaptcha","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_automod","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_continue_this_thread","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recommended_publishers_query","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_widget","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_topic_portals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_newsletter_lo_flow_custom_domains","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"get_highlights_from_engagement","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_editor_new_publishing_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_c","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_autorefresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cancellation_discount_v1_1","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pub_featuring","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_premium_plan","valueType":{"__typename":"VariantFlagString","value":"12a660186432"}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_first_story","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier_badge","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_send_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_marketing_emails","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_input","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_deviant_get_variant_flag_from_medium2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_plans_page_payment_form","valueType":{"__typename":"VariantFlagString","value":"group_1"}},{"__typename":"VariantFlag","name":"enable_pub_featuring_post_page_label","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_track_user_interactions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_social_share_sheet","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_server_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_sign_in","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_receive_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_deprecate_legacy_providers_v3","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_aspiriational","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"goliath_externalsearch_enable_comment_deindexation","valueType":{"__typename":"VariantFlagBoolean","value":true}}],"viewer":null,"postResult({\"id\":\"de87ef3547cb\"})":{"__ref":"Post:de87ef3547cb"}},"ImageMetadata:1*u86cGgAv5zBUqy65gVtpuQ.png":{"__typename":"ImageMetadata","id":"1*u86cGgAv5zBUqy65gVtpuQ.png"},"User:f9007ce94638":{"__typename":"User","id":"f9007ce94638","customDomainState":null,"hasSubdomain":false,"username":"jonroei"},"Post:b5e3e6c3bfb1":{"__typename":"Post","id":"b5e3e6c3bfb1","firstPublishedAt":1735038534697,"creator":{"__ref":"User:f9007ce94638"},"collection":{"__ref":"Collection:5c12f12b4121"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fwix-ux.com\u002Fback-to-basics-how-fundamental-ux-principles-lead-to-big-results-b5e3e6c3bfb1","sequence":null,"uniqueSlug":"back-to-basics-how-fundamental-ux-principles-lead-to-big-results-b5e3e6c3bfb1"},"LinkedAccounts:45a89869deb9":{"__typename":"LinkedAccounts","mastodon":null,"id":"45a89869deb9"},"User:45a89869deb9":{"__typename":"User","id":"45a89869deb9","linkedAccounts":{"__ref":"LinkedAccounts:45a89869deb9"},"isSuspended":false,"name":"Moria Cohen","imageId":"1*6ikjVNiI9bl4UUFVEpmXdg.jpeg","customDomainState":null,"hasSubdomain":false,"username":"moria.cohen.m","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":36,"followingCount":5,"collectionFollowingCount":0},"bio":"Product Designer at Wix.com","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:45a89869deb9-viewerId:lo_d63a31a1cf19"},"twitterScreenName":""},"ImageMetadata:1*fKmapA3k0r5WFUhUgXXg1w.png":{"__typename":"ImageMetadata","id":"1*fKmapA3k0r5WFUhUgXXg1w.png","originalHeight":444,"originalWidth":813,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:1123e212edd5_0":{"__typename":"Paragraph","id":"1123e212edd5_0","name":"7741","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fKmapA3k0r5WFUhUgXXg1w.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_1":{"__typename":"Paragraph","id":"1123e212edd5_1","name":"5ed3","type":"H3","href":null,"layout":null,"metadata":null,"text":"Color alignment for multiple design systems","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_2":{"__typename":"Paragraph","id":"1123e212edd5_2","name":"15ac","type":"H4","href":null,"layout":null,"metadata":null,"text":"How to deal with color alignment challenges in a single product","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_3":{"__typename":"Paragraph","id":"1123e212edd5_3","name":"b502","type":"H3","href":null,"layout":null,"metadata":null,"text":"The challenge","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_4":{"__typename":"Paragraph","id":"1123e212edd5_4","name":"f6bc","type":"P","href":null,"layout":null,"metadata":null,"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_5":{"__typename":"Paragraph","id":"1123e212edd5_5","name":"7b9a","type":"P","href":null,"layout":null,"metadata":null,"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 similar.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_6":{"__typename":"Paragraph","id":"1123e212edd5_6","name":"2e09","type":"P","href":null,"layout":null,"metadata":null,"text":"After all, Wix is still a single brand, and as designers, we strive to give users a consistent experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_7":{"__typename":"Paragraph","id":"1123e212edd5_7","name":"f816","type":"P","href":null,"layout":null,"metadata":null,"text":"With this goal in mind, I set out to align the color palettes used across all design systems. The main challenge here was figuring out a sensible way to make changes in a product that is already being used by many users.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_8":{"__typename":"Paragraph","id":"1123e212edd5_8","name":"e434","type":"H3","href":null,"layout":null,"metadata":null,"text":"Research and process","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_9":{"__typename":"Paragraph","id":"1123e212edd5_9","name":"b5a0","type":"P","href":null,"layout":null,"metadata":null,"text":"As part of the alignment process, I mapped out every single color used across several design systems.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_10":{"__typename":"Paragraph","id":"1123e212edd5_10","name":"da33","type":"P","href":null,"layout":null,"metadata":null,"text":"First, I analyzed all existing colors in each system. I identified colors and removed any colors that weren’t being used.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_11":{"__typename":"Paragraph","id":"1123e212edd5_11","name":"4497","type":"P","href":null,"layout":null,"metadata":null,"text":"Next, we optimized colors for accessibility. Using the largest color palette available, we adjusted colors in order to make all CTAs in the system accessible.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_12":{"__typename":"Paragraph","id":"1123e212edd5_12","name":"5ce1","type":"P","href":null,"layout":null,"metadata":null,"text":"Once we were pleased with the new palette, I got started with the actual alignment process. I used a fixed color palette as a reference to cover all the hues for other palettes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_13":{"__typename":"Paragraph","id":"1123e212edd5_13","name":"d918","type":"H3","href":null,"layout":null,"metadata":null,"text":"Aligning colors according to intent","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_14":{"__typename":"Paragraph","id":"1123e212edd5_14","name":"0176","type":"PQ","href":null,"layout":null,"metadata":null,"text":"When aligning colors across several design systems, it’s important to make sure that the intent of colors inside components is not affected before making a match (intent meaning the specific purpose of each color).","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_15":{"__typename":"Paragraph","id":"1123e212edd5_15","name":"09d7","type":"P","href":null,"layout":null,"metadata":null,"text":"Color matching only works when colors have the same intent. During the process, I found that main colors in different palettes usually have the same intent, which allowed me to align colors without affecting the intent.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_16":{"__typename":"Paragraph","id":"1123e212edd5_16","name":"8aaf","type":"P","href":null,"layout":null,"metadata":null,"text":"I examined each main color separately, and then aligned each one according to the hue. Consider the example below:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_17":{"__typename":"Paragraph","id":"1123e212edd5_17","name":"5cc5","type":"P","href":null,"layout":null,"metadata":null,"text":"I wanted to align Palette A to Palette B, which served as the reference in this case.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":18,"end":28,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":31,"end":40,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_18":{"__typename":"Paragraph","id":"1123e212edd5_18","name":"b948","type":"P","href":null,"layout":null,"metadata":null,"text":"First, I placed Palette A directly above Palette B according to name and intent. Next, I arranged the colors in order to understand where color changes were necessary and matched them according to the reference.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":16,"end":25,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":41,"end":50,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*UWW3-MJUzV2JmPS9Is-DqA.gif":{"__typename":"ImageMetadata","id":"1*UWW3-MJUzV2JmPS9Is-DqA.gif","originalHeight":480,"originalWidth":1869,"focusPercentX":null,"focusPercentY":null,"alt":"Research and process example"},"Paragraph:1123e212edd5_19":{"__typename":"Paragraph","id":"1123e212edd5_19","name":"0c61","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*UWW3-MJUzV2JmPS9Is-DqA.gif"},"text":"Example of color alignment","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_20":{"__typename":"Paragraph","id":"1123e212edd5_20","name":"a2e3","type":"H3","href":null,"layout":null,"metadata":null,"text":"Pain points","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_21":{"__typename":"Paragraph","id":"1123e212edd5_21","name":"7af9","type":"H4","href":null,"layout":null,"metadata":null,"text":"Different intents","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_22":{"__typename":"Paragraph","id":"1123e212edd5_22","name":"1dba","type":"P","href":null,"layout":null,"metadata":null,"text":"As mentioned earlier, the intent of each palette is usually the same. However, there was one specific case where gaps in intent were detected.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_23":{"__typename":"Paragraph","id":"1123e212edd5_23","name":"d0da","type":"P","href":null,"layout":null,"metadata":null,"text":"In the example below, you’ll notice that Palette A uses color D35 for placeholder text, while Palette B (the reference palette) uses color D40 for placeholder text.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":41,"end":50,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":62,"end":65,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":94,"end":103,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":139,"end":142,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*RBtPM8zpEAlFrJh6LhAmXQ.png":{"__typename":"ImageMetadata","id":"1*RBtPM8zpEAlFrJh6LhAmXQ.png","originalHeight":557,"originalWidth":2412,"focusPercentX":null,"focusPercentY":null,"alt":"Different intents placeholder example"},"Paragraph:1123e212edd5_24":{"__typename":"Paragraph","id":"1123e212edd5_24","name":"6134","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*RBtPM8zpEAlFrJh6LhAmXQ.png"},"text":"Placeholder before color alignment","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_25":{"__typename":"Paragraph","id":"1123e212edd5_25","name":"7604","type":"P","href":null,"layout":null,"metadata":null,"text":"In this case, I was forced to choose between aligning according to intent, or according to hue.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_26":{"__typename":"Paragraph","id":"1123e212edd5_26","name":"3b45","type":"P","href":null,"layout":null,"metadata":null,"text":"If I aligned by hue, system uniformity would have been compromised, which could result in confusion, since placeholders would have different colors across the same system.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_27":{"__typename":"Paragraph","id":"1123e212edd5_27","name":"5c24","type":"P","href":null,"layout":null,"metadata":null,"text":"Therefore, I decided to align according to intent and got rid of one of the original placeholder colors.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*kNPOpFHFYF6cjdOCNBAMIA.gif":{"__typename":"ImageMetadata","id":"1*kNPOpFHFYF6cjdOCNBAMIA.gif","originalHeight":480,"originalWidth":1701,"focusPercentX":null,"focusPercentY":null,"alt":"Alignment by intent example"},"Paragraph:1123e212edd5_28":{"__typename":"Paragraph","id":"1123e212edd5_28","name":"6d59","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*kNPOpFHFYF6cjdOCNBAMIA.gif"},"text":"Alignment by intent","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*34KK0mQp7JfsNb0bhkinAg.gif":{"__typename":"ImageMetadata","id":"1*34KK0mQp7JfsNb0bhkinAg.gif","originalHeight":480,"originalWidth":1701,"focusPercentX":null,"focusPercentY":null,"alt":"Alignment by hue example"},"Paragraph:1123e212edd5_29":{"__typename":"Paragraph","id":"1123e212edd5_29","name":"15bb","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*34KK0mQp7JfsNb0bhkinAg.gif"},"text":"Alignment by hue","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_30":{"__typename":"Paragraph","id":"1123e212edd5_30","name":"2d98","type":"H4","href":null,"layout":null,"metadata":null,"text":"How to align between different hues","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_31":{"__typename":"Paragraph","id":"1123e212edd5_31","name":"1084","type":"P","href":null,"layout":null,"metadata":null,"text":"After improving accessibility in the reference palette, I noticed that the purple hues in the two pallets were pretty different from each other. Purple is sensitive at Wix, since it’s the color used to represent anything that’s premium, so I wanted to be careful with making any major changes there.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_32":{"__typename":"Paragraph","id":"1123e212edd5_32","name":"f1f7","type":"P","href":null,"layout":null,"metadata":null,"text":"Instead of choosing one of the existing purple palettes, I created a new one, which was a combination of the purple hues in Palette A and Palette B.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":124,"end":133,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":138,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_33":{"__typename":"Paragraph","id":"1123e212edd5_33","name":"0502","type":"P","href":null,"layout":null,"metadata":null,"text":"Here’s how I came up with the new purple palette:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_34":{"__typename":"Paragraph","id":"1123e212edd5_34","name":"bd3b","type":"OLI","href":null,"layout":null,"metadata":null,"text":"I added the missing hues to Palette A, (the top palette) which I found by creating an horizontal gradient between the adjacent hues.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":28,"end":37,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_35":{"__typename":"Paragraph","id":"1123e212edd5_35","name":"8afe","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Once both palettes were aligned, I added an additional palette right between Palette A and Palette B by creating a vertical gradient between the two palettes.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":77,"end":87,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":91,"end":101,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":54,"end":55,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*pUGoJg6q_eEUSc1R8h8vvA.gif":{"__typename":"ImageMetadata","id":"1*pUGoJg6q_eEUSc1R8h8vvA.gif","originalHeight":480,"originalWidth":1043,"focusPercentX":null,"focusPercentY":null,"alt":"Solution to palette that doesn’t work well"},"Paragraph:1123e212edd5_36":{"__typename":"Paragraph","id":"1123e212edd5_36","name":"dd56","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*pUGoJg6q_eEUSc1R8h8vvA.gif"},"text":"Created a new purple palette","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_37":{"__typename":"Paragraph","id":"1123e212edd5_37","name":"0e5c","type":"H4","href":null,"layout":null,"metadata":null,"text":"Being honest with relevant teams","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_38":{"__typename":"Paragraph","id":"1123e212edd5_38","name":"0ae3","type":"P","href":null,"layout":null,"metadata":null,"text":"The Wix Editor team uses a saturated green hue to highlight icons on stage.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_39":{"__typename":"Paragraph","id":"1123e212edd5_39","name":"9bf7","type":"P","href":null,"layout":null,"metadata":null,"text":"Since it was replaced by a milder hue, the highlighting of the icon could have been compromised.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Qm_45f8GW3lMn9J6JWJMBA.png":{"__typename":"ImageMetadata","id":"1*Qm_45f8GW3lMn9J6JWJMBA.png","originalHeight":289,"originalWidth":1023,"focusPercentX":null,"focusPercentY":null,"alt":"Green icon screen shot (before)"},"Paragraph:1123e212edd5_40":{"__typename":"Paragraph","id":"1123e212edd5_40","name":"6a82","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Qm_45f8GW3lMn9J6JWJMBA.png"},"text":"Green icon before","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*cHCloYiZhZZI6kVVqrAxUA.png":{"__typename":"ImageMetadata","id":"1*cHCloYiZhZZI6kVVqrAxUA.png","originalHeight":289,"originalWidth":1023,"focusPercentX":null,"focusPercentY":null,"alt":"Green icon screen shot (after)"},"Paragraph:1123e212edd5_41":{"__typename":"Paragraph","id":"1123e212edd5_41","name":"1709","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*cHCloYiZhZZI6kVVqrAxUA.png"},"text":"Green icon after","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_42":{"__typename":"Paragraph","id":"1123e212edd5_42","name":"ec04","type":"P","href":null,"layout":null,"metadata":null,"text":"It doesn’t seem like a substantial change, and we will definitely run several tests before releasing the changes. Nevertheless, it’s important to be transparent with teams that could be affected by changes, even before running tests.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_43":{"__typename":"Paragraph","id":"1123e212edd5_43","name":"0d58","type":"P","href":null,"layout":null,"metadata":null,"text":"Your colleagues will appreciate the honesty, and this will only strengthen their confidence in the alignment process.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_44":{"__typename":"Paragraph","id":"1123e212edd5_44","name":"066a","type":"P","href":null,"layout":null,"metadata":null,"text":"We met with the relevant team and presented the situation. They supported the change and agreed that it would not affect the icon’s prominence, so I continued with the process.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_45":{"__typename":"Paragraph","id":"1123e212edd5_45","name":"8198","type":"P","href":null,"layout":null,"metadata":null,"text":"In cases in which a different color had been required,, a specific hue would be added to a separate category of colors called Extra Colors. This category is used for specific cases like avatars, graphs, bounding boxes and more.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":126,"end":138,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_46":{"__typename":"Paragraph","id":"1123e212edd5_46","name":"1b8c","type":"P","href":null,"layout":null,"metadata":null,"text":"Extra Colors are kept separate and each library has its own collection of extra colors.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":13,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_47":{"__typename":"Paragraph","id":"1123e212edd5_47","name":"8b21","type":"H4","href":null,"layout":null,"metadata":null,"text":"The importance of testing and what to do in case of a failed test","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_48":{"__typename":"Paragraph","id":"1123e212edd5_48","name":"11d2","type":"P","href":null,"layout":null,"metadata":null,"text":"After aligning the dark palette, I tested changes on Figma components. I did not anticipate any issues, since the hues were pretty close. However, I detected a problem. Color D5 is used as a menu background. After the change, the text in the menu became less prominent.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":168,"end":177,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*GcXinu44p5zY78fwDZfeog.png":{"__typename":"ImageMetadata","id":"1*GcXinu44p5zY78fwDZfeog.png","originalHeight":729,"originalWidth":990,"focusPercentX":null,"focusPercentY":null,"alt":"Failed test example"},"Paragraph:1123e212edd5_49":{"__typename":"Paragraph","id":"1123e212edd5_49","name":"0e0f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*GcXinu44p5zY78fwDZfeog.png"},"text":"Failed test example","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*A9nmqVe1eg_gRs8iQtEQ3g.png":{"__typename":"ImageMetadata","id":"1*A9nmqVe1eg_gRs8iQtEQ3g.png","originalHeight":808,"originalWidth":2474,"focusPercentX":null,"focusPercentY":null,"alt":"Alignment process that failed in test"},"Paragraph:1123e212edd5_50":{"__typename":"Paragraph","id":"1123e212edd5_50","name":"8e0a","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*A9nmqVe1eg_gRs8iQtEQ3g.png"},"text":"Failed color alignment","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_51":{"__typename":"Paragraph","id":"1123e212edd5_51","name":"00e6","type":"P","href":null,"layout":null,"metadata":null,"text":"To solve it, I treated color D5 from Palette A like an additional color in the palette instead of merging it with color D70 from Palette B.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":28,"end":31,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":37,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":120,"end":123,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":128,"end":139,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*9WrymHVDGZsZgAcGdLUuoQ.png":{"__typename":"ImageMetadata","id":"1*9WrymHVDGZsZgAcGdLUuoQ.png","originalHeight":808,"originalWidth":2709,"focusPercentX":null,"focusPercentY":null,"alt":"Failed test solution"},"Paragraph:1123e212edd5_52":{"__typename":"Paragraph","id":"1123e212edd5_52","name":"86bb","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*9WrymHVDGZsZgAcGdLUuoQ.png"},"text":"Solution of failed test","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_53":{"__typename":"Paragraph","id":"1123e212edd5_53","name":"e14f","type":"H3","href":null,"layout":null,"metadata":null,"text":"Reducing close shades","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_54":{"__typename":"Paragraph","id":"1123e212edd5_54","name":"2c51","type":"P","href":null,"layout":null,"metadata":null,"text":"A good example of how I significantly reduced close shades was by reducing disabled colors. Disabled colors were divided into Categories E, B and D.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":126,"end":148,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_55":{"__typename":"Paragraph","id":"1123e212edd5_55","name":"5dbc","type":"P","href":null,"layout":null,"metadata":null,"text":"In the past, the method used was to take any color and turn it into grayscale in order to create a unique disabled color for each color. This meant that each color in the system had its own unique disabled color.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_56":{"__typename":"Paragraph","id":"1123e212edd5_56","name":"63b3","type":"P","href":null,"layout":null,"metadata":null,"text":"Because of the method used, I had several duplicates to eliminate.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_57":{"__typename":"Paragraph","id":"1123e212edd5_57","name":"2e68","type":"P","href":null,"layout":null,"metadata":null,"text":"I started by sorting the colors in Categorie E by hue and then eliminated all the close colors. I did the same for each category separately and then finally for all categories at once.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":35,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*-pOJVEz7RXhzhUNxrztBSQ.gif":{"__typename":"ImageMetadata","id":"1*-pOJVEz7RXhzhUNxrztBSQ.gif","originalHeight":480,"originalWidth":1009,"focusPercentX":null,"focusPercentY":null,"alt":"Reduce close shades example"},"Paragraph:1123e212edd5_58":{"__typename":"Paragraph","id":"1123e212edd5_58","name":"da2e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*-pOJVEz7RXhzhUNxrztBSQ.gif"},"text":"Reducing disabled colors","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_59":{"__typename":"Paragraph","id":"1123e212edd5_59","name":"5bc0","type":"P","href":null,"layout":null,"metadata":null,"text":"I actually managed to go from 20 colors to just 5 colors without compromising on any hues! Today, these 5 colors cover the entire Wix ecosystem.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*qPB_SO91zcSkJZQ_":{"__typename":"ImageMetadata","id":"0*qPB_SO91zcSkJZQ_","originalHeight":929,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"Reduce close shades conclusion"},"Paragraph:1123e212edd5_60":{"__typename":"Paragraph","id":"1123e212edd5_60","name":"f6da","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*qPB_SO91zcSkJZQ_"},"text":"Reducing disabled colors conclusion","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_61":{"__typename":"Paragraph","id":"1123e212edd5_61","name":"c3b5","type":"H3","href":null,"layout":null,"metadata":null,"text":"Tests","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_62":{"__typename":"Paragraph","id":"1123e212edd5_62","name":"e8e8","type":"PQ","href":null,"layout":null,"metadata":null,"text":"Tests are a very important part of the process, not only to ensure a smooth transition, but also to visualize changes that are about to happen.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_63":{"__typename":"Paragraph","id":"1123e212edd5_63","name":"f12a","type":"P","href":null,"layout":null,"metadata":null,"text":"First, I went through all the components and models on the Figma library to make sure the updated colors were working well.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_64":{"__typename":"Paragraph","id":"1123e212edd5_64","name":"2b21","type":"P","href":null,"layout":null,"metadata":null,"text":"Next, I checked all the new colors on full screens on Figma and compared the screens before and after the changes to detect any small nuances that I may have missed in the first stage.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_65":{"__typename":"Paragraph","id":"1123e212edd5_65","name":"2dd1","type":"P","href":null,"layout":null,"metadata":null,"text":"After checking the colors in Figma, the changes were developed in the system and finally, I tested them in production.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_66":{"__typename":"Paragraph","id":"1123e212edd5_66","name":"ad12","type":"H3","href":null,"layout":null,"metadata":null,"text":"Conclusion","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_67":{"__typename":"Paragraph","id":"1123e212edd5_67","name":"4e21","type":"P","href":null,"layout":null,"metadata":null,"text":"Aligning colors across all design systems created a more cohesive and organized system. Additionally, color adjustments made the system more consistent, accessible and up to date.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_68":{"__typename":"Paragraph","id":"1123e212edd5_68","name":"dd4e","type":"P","href":null,"layout":null,"metadata":null,"text":"We recognized the importance of staying true to intent, and learned how to deal with failed tests. We also learned that being transparent about our process helped increase confidence, both for us and for any teams affected by the changes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_69":{"__typename":"Paragraph","id":"1123e212edd5_69","name":"8c50","type":"P","href":null,"layout":null,"metadata":null,"text":"Whether you’re trying to improve accessibility, combine several palettes or adapt colors to trends in the market, I hope my process will inspire you to make changes to colors in your product’s palette.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_70":{"__typename":"Paragraph","id":"1123e212edd5_70","name":"eba8","type":"P","href":null,"layout":null,"metadata":null,"text":"Many thanks to Ayelet Reuveni who guided me throughout the process, to Assaf Zinger who worked on improving the accessibility and creating the reference palette, and to Laura Moreno Saraga who edited the article.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":169,"end":188,"href":"https:\u002F\u002Fmedium.com\u002F@lalaura1089","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":0,"end":212,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1123e212edd5_71":{"__typename":"Paragraph","id":"1123e212edd5_71","name":"409e","type":"P","href":null,"layout":null,"metadata":null,"text":"Is there a topic you want to see covered by the Wix UX team? Let us know by filling out this form.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":93,"end":97,"href":"https:\u002F\u002Fforms.wix.com\u002Fc1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":98,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:5c12f12b4121-viewerId:lo_d63a31a1cf19":{"__typename":"CollectionViewerEdge","id":"collectionId:5c12f12b4121-viewerId:lo_d63a31a1cf19","isEditor":false,"isMuting":false},"UserViewerEdge:userId:45a89869deb9-viewerId:lo_d63a31a1cf19":{"__typename":"UserViewerEdge","id":"userId:45a89869deb9-viewerId:lo_d63a31a1cf19","isMuting":false},"PostViewerEdge:postId:de87ef3547cb-viewerId:lo_d63a31a1cf19":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:de87ef3547cb-viewerId:lo_d63a31a1cf19"},"Tag:ux":{"__typename":"Tag","id":"ux","displayTitle":"UX","normalizedTagSlug":"ux"},"Tag:wix":{"__typename":"Tag","id":"wix","displayTitle":"Wix","normalizedTagSlug":"wix"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:colors":{"__typename":"Tag","id":"colors","displayTitle":"Colors","normalizedTagSlug":"colors"},"Post:de87ef3547cb":{"__typename":"Post","id":"de87ef3547cb","collection":{"__ref":"Collection:5c12f12b4121"},"content({\"postMeteringOptions\":{\"referrer\":\"\"}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"339c","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"9753","startIndex":70,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"c0aa","startIndex":71,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:1123e212edd5_0"},{"__ref":"Paragraph:1123e212edd5_1"},{"__ref":"Paragraph:1123e212edd5_2"},{"__ref":"Paragraph:1123e212edd5_3"},{"__ref":"Paragraph:1123e212edd5_4"},{"__ref":"Paragraph:1123e212edd5_5"},{"__ref":"Paragraph:1123e212edd5_6"},{"__ref":"Paragraph:1123e212edd5_7"},{"__ref":"Paragraph:1123e212edd5_8"},{"__ref":"Paragraph:1123e212edd5_9"},{"__ref":"Paragraph:1123e212edd5_10"},{"__ref":"Paragraph:1123e212edd5_11"},{"__ref":"Paragraph:1123e212edd5_12"},{"__ref":"Paragraph:1123e212edd5_13"},{"__ref":"Paragraph:1123e212edd5_14"},{"__ref":"Paragraph:1123e212edd5_15"},{"__ref":"Paragraph:1123e212edd5_16"},{"__ref":"Paragraph:1123e212edd5_17"},{"__ref":"Paragraph:1123e212edd5_18"},{"__ref":"Paragraph:1123e212edd5_19"},{"__ref":"Paragraph:1123e212edd5_20"},{"__ref":"Paragraph:1123e212edd5_21"},{"__ref":"Paragraph:1123e212edd5_22"},{"__ref":"Paragraph:1123e212edd5_23"},{"__ref":"Paragraph:1123e212edd5_24"},{"__ref":"Paragraph:1123e212edd5_25"},{"__ref":"Paragraph:1123e212edd5_26"},{"__ref":"Paragraph:1123e212edd5_27"},{"__ref":"Paragraph:1123e212edd5_28"},{"__ref":"Paragraph:1123e212edd5_29"},{"__ref":"Paragraph:1123e212edd5_30"},{"__ref":"Paragraph:1123e212edd5_31"},{"__ref":"Paragraph:1123e212edd5_32"},{"__ref":"Paragraph:1123e212edd5_33"},{"__ref":"Paragraph:1123e212edd5_34"},{"__ref":"Paragraph:1123e212edd5_35"},{"__ref":"Paragraph:1123e212edd5_36"},{"__ref":"Paragraph:1123e212edd5_37"},{"__ref":"Paragraph:1123e212edd5_38"},{"__ref":"Paragraph:1123e212edd5_39"},{"__ref":"Paragraph:1123e212edd5_40"},{"__ref":"Paragraph:1123e212edd5_41"},{"__ref":"Paragraph:1123e212edd5_42"},{"__ref":"Paragraph:1123e212edd5_43"},{"__ref":"Paragraph:1123e212edd5_44"},{"__ref":"Paragraph:1123e212edd5_45"},{"__ref":"Paragraph:1123e212edd5_46"},{"__ref":"Paragraph:1123e212edd5_47"},{"__ref":"Paragraph:1123e212edd5_48"},{"__ref":"Paragraph:1123e212edd5_49"},{"__ref":"Paragraph:1123e212edd5_50"},{"__ref":"Paragraph:1123e212edd5_51"},{"__ref":"Paragraph:1123e212edd5_52"},{"__ref":"Paragraph:1123e212edd5_53"},{"__ref":"Paragraph:1123e212edd5_54"},{"__ref":"Paragraph:1123e212edd5_55"},{"__ref":"Paragraph:1123e212edd5_56"},{"__ref":"Paragraph:1123e212edd5_57"},{"__ref":"Paragraph:1123e212edd5_58"},{"__ref":"Paragraph:1123e212edd5_59"},{"__ref":"Paragraph:1123e212edd5_60"},{"__ref":"Paragraph:1123e212edd5_61"},{"__ref":"Paragraph:1123e212edd5_62"},{"__ref":"Paragraph:1123e212edd5_63"},{"__ref":"Paragraph:1123e212edd5_64"},{"__ref":"Paragraph:1123e212edd5_65"},{"__ref":"Paragraph:1123e212edd5_66"},{"__ref":"Paragraph:1123e212edd5_67"},{"__ref":"Paragraph:1123e212edd5_68"},{"__ref":"Paragraph:1123e212edd5_69"},{"__ref":"Paragraph:1123e212edd5_70"},{"__ref":"Paragraph:1123e212edd5_71"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:45a89869deb9"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fwix-ux.com\u002Fcolor-alignment-for-multiple-design-systems-de87ef3547cb","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"design"}],"isLimitedState":false,"isPublished":true,"allowResponses":true,"latestPublishedVersion":"1123e212edd5","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":1},"responseDistribution":"NOT_DISTRIBUTED","clapCount":298,"title":"Color alignment for multiple design systems","isSeries":false,"sequence":null,"uniqueSlug":"color-alignment-for-multiple-design-systems-de87ef3547cb","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1663912770552,"readingTime":6.286792452830188,"previewContent":{"__typename":"PreviewContent","subtitle":"How to deal with color alignment challenges in a single product"},"previewImage":{"__ref":"ImageMetadata:1*fKmapA3k0r5WFUhUgXXg1w.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1652681509492,"updatedAt":1663912777416,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:de87ef3547cb-viewerId:lo_d63a31a1cf19"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:ux"},{"__ref":"Tag:wix"},{"__ref":"Tag:design-systems"},{"__ref":"Tag:colors"}],"isFeaturedInPublishedPublication":false,"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1295,"layerCake":0,"responsesLocked":false}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.4b5fe151.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.af7becea.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.5bef8967.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4505.6dfaf853.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9380.fb176dee.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.dc8dbee4.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.68bc318b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3045.1cc3d8cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.3329b100.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.a4ecfb83.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6428.7d30b23c.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6199.6da73f3b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.7d9f7f3d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.67eb283b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.8aa8d357.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4492.0c3e1a1d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2571.6814b962.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6128.f8800a13.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2135.2e8dc177.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/144.86429b48.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5240.6281357f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8819.c627c2bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.d0637ed0.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.a27c27dc.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.0d800846.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.18a8996d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.e1e580cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.e89462cb.chunk.js"></script><script>window.main();</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:'9137ecf40b8dffe4',t:'MTczOTgxNzgzNC4wMDAwMDA='};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>