CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">A Brief History of Design Systems, Part 2 | by Jim Gulsen | Oct, 2024 | Medium</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="2024-11-04T15:27:03.790Z"/><meta data-rh="true" name="title" content="A Brief History of Design Systems, Part 2 | by Jim Gulsen | Oct, 2024 | Medium"/><meta data-rh="true" property="og:title" content="A Brief History of Design Systems, Part 2"/><meta data-rh="true" property="al:android:url" content="medium://p/fb00a7af7985"/><meta data-rh="true" property="al:ios:url" content="medium://p/fb00a7af7985"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic…"/><meta data-rh="true" property="og:description" content="From Atomic Design to AI-Driven Systems: Understanding the Evolution and Adoption Patterns of Modern UX Frameworks."/><meta data-rh="true" property="og:url" content="https://medium.com/@jgulsen_97727/a-brief-history-of-design-systems-part-2-fb00a7af7985"/><meta data-rh="true" property="al:web:url" content="https://medium.com/@jgulsen_97727/a-brief-history-of-design-systems-part-2-fb00a7af7985"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*3YWsm9ITdrsLVhYkGAQCFw.png"/><meta data-rh="true" property="og:image:alt" content="An abstract image of a person with digital artifacts"/><meta data-rh="true" property="article:author" content="https://medium.com/@jgulsen_97727"/><meta data-rh="true" name="author" content="Jim Gulsen"/><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="A Brief History of Design Systems, Part 2"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/fb00a7af7985"/><meta data-rh="true" property="twitter:description" content="From Atomic Design to AI-Driven Systems: Understanding the Evolution and Adoption Patterns of Modern UX Frameworks."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*3YWsm9ITdrsLVhYkGAQCFw.png"/><meta data-rh="true" name="twitter:image:alt" content="An abstract image of a person with digital artifacts"/><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="18 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" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><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/@jgulsen_97727"/><link data-rh="true" rel="canonical" href="https://medium.com/@jgulsen_97727/a-brief-history-of-design-systems-part-2-fb00a7af7985"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/fb00a7af7985"/><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*3YWsm9ITdrsLVhYkGAQCFw.png"],"url":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-brief-history-of-design-systems-part-2-fb00a7af7985","dateCreated":"2024-10-19T17:49:52.460Z","datePublished":"2024-10-19T17:49:52.460Z","dateModified":"2024-11-14T22:24:17.940Z","headline":"A Brief History of Design Systems, Part 2 - Jim Gulsen - Medium","name":"A Brief History of Design Systems, Part 2 - Jim Gulsen - Medium","description":"Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic…","identifier":"fb00a7af7985","author":{"@type":"Person","name":"Jim Gulsen","url":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727"},"creator":["Jim Gulsen"],"publisher":{"@type":"Organization","name":"Medium","url":"https:\u002F\u002Fmedium.com\u002F","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\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-brief-history-of-design-systems-part-2-fb00a7af7985"}</script><style type="text/css" data-fela-rehydration="565" 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="565" 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="565" 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:#1A8917}.es{border-color:#1A8917}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:#1A8917}.ez:disabled:hover{border-color:#1A8917}.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{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.hq{margin-bottom:-0.27em}.hr{line-height:1.394}.im{align-items:baseline}.in{width:48px}.io{height:48px}.ip{border:2px solid rgba(255, 255, 255, 1)}.iq{z-index:0}.ir{box-shadow:none}.is{border:1px solid rgba(0, 0, 0, 0.05)}.it{margin-bottom:2px}.iu{flex-wrap:nowrap}.iv{font-size:16px}.iw{line-height:24px}.iy{margin:0 8px}.iz{display:inline}.ja{color:#1A8917}.jb{fill:#1A8917}.je{flex:0 0 auto}.jh{flex-wrap:wrap}.ji{padding-left:8px}.jj{padding-right:8px}.kk> *{flex-shrink:0}.kl{overflow-x:scroll}.km::-webkit-scrollbar{display:none}.kn{scrollbar-width:none}.ko{-ms-overflow-style:none}.kp{width:74px}.kq{flex-direction:row}.kr{z-index:2}.ks{margin-right:4px}.kv{-webkit-user-select:none}.kw{border:0}.kx{fill:rgba(117, 117, 117, 1)}.la{outline:0}.lb{user-select:none}.lc> svg{pointer-events:none}.ll{cursor:progress}.lm{margin-left:4px}.ln{margin-top:0px}.lo{opacity:1}.lp{padding:4px 0}.ls{width:16px}.lu{display:inline-flex}.ma{max-width:100%}.mb{padding:8px 2px}.mc svg{color:#6B6B6B}.mt{margin-left:auto}.mu{margin-right:auto}.mv{max-width:1456px}.nb{clear:both}.nd{cursor:zoom-in}.ne{z-index:auto}.ng{height:auto}.nh{margin-top:10px}.ni{max-width:728px}.nl{line-height:1.58}.nm{letter-spacing:-0.004em}.nn{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.og{margin-bottom:-0.46em}.oh{text-decoration:underline}.oi{font-style:italic}.oo{max-width:2880px}.op{padding-top:5px}.oq{padding-bottom:5px}.or{line-height:1.18}.os{letter-spacing:-0.022em}.ot{font-weight:600}.pj{margin-bottom:-0.31em}.pp{box-shadow:inset 3px 0 0 0 #242424}.pq{padding-left:23px}.pr{margin-left:-20px}.ps{max-width:2784px}.pt{line-height:1.12}.qk{margin-bottom:-0.28em}.ql{max-width:3200px}.qm{list-style-type:decimal}.qn{margin-left:30px}.qo{padding-left:0px}.qu{margin-bottom:26px}.qv{margin-top:6px}.qw{margin-top:8px}.qx{margin-right:8px}.qy{padding:8px 16px}.qz{border-radius:100px}.ra{transition:background 300ms ease}.rc{white-space:nowrap}.rd{border-top:none}.re{margin-bottom:14px}.rf{height:52px}.rg{max-height:52px}.rh{box-sizing:content-box}.ri{position:static}.rj{z-index:1}.rl{max-width:155px}.rr{margin-right:20px}.rx{height:0px}.ry{margin-bottom:40px}.sn{height:64px}.so{width:64px}.sp{align-self:flex-end}.sq{color:rgba(255, 255, 255, 1)}.sr{fill:rgba(255, 255, 255, 1)}.ss{background:rgba(25, 25, 25, 1)}.st{border-color:rgba(25, 25, 25, 1)}.sw:disabled{opacity:0.1}.sx:disabled:hover{background:rgba(25, 25, 25, 1)}.sy:disabled:hover{border-color:rgba(25, 25, 25, 1)}.sz{flex:1 1 auto}.td{padding-right:4px}.te{font-weight:500}.tl{white-space:pre-wrap}.tm{margin-top:16px}.tv{gap:18px}.tw{fill:rgba(61, 61, 61, 1)}.ty{margin-top:32px}.tz{fill:#242424}.ua{background:0}.ub{border-color:#242424}.uc:disabled:hover{color:#242424}.ud:disabled:hover{fill:#242424}.ue:disabled:hover{border-color:#242424}.up{border-bottom:solid 1px #E5E5E5}.uq{margin-top:72px}.ur{padding:24px 0}.us{margin-bottom:0px}.ut{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:#156D12}.eu:hover{border-color:#156D12}.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)}.ix:hover{text-decoration:underline}.jc:hover:not(:disabled){color:#156D12}.jd:hover:not(:disabled){fill:#156D12}.kz:hover{fill:rgba(8, 8, 8, 1)}.lq:hover{fill:#000000}.lr:hover p{color:#000000}.lt:hover{color:#000000}.md:hover svg{color:#000000}.rb:hover{background-color:#F2F2F2}.sm:hover{background-color:none}.su:hover{background:#000000}.sv:hover{border-color:#242424}.tx:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.ky:focus{fill:rgba(8, 8, 8, 1)}.me:focus svg{color:#000000}.nf:focus{transform:scale(1.01)}.ld:active{border-style:none}</style><style type="text/css" data-fela-rehydration="565" 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:68px}.gc{max-width:680px}.hm{font-size:42px}.hn{margin-top:1.19em}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.ie{font-size:22px}.if{margin-top:0.92em}.ig{line-height:28px}.il{align-items:center}.jw{border-top:solid 1px #F2F2F2}.jx{border-bottom:solid 1px #F2F2F2}.jy{margin:32px 0 0}.jz{padding:3px 8px}.ki> *{margin-right:24px}.kj> :last-child{margin-right:0}.lk{margin-top:0px}.lz{margin:0}.na{margin-top:56px}.oc{font-size:20px}.od{margin-top:2.14em}.oe{line-height:32px}.of{letter-spacing:-0.003em}.on{max-width:1192px}.pg{margin-top:1.72em}.ph{line-height:24px}.pi{letter-spacing:0}.po{margin-top:0.94em}.qg{font-size:24px}.qh{margin-top:1.95em}.qi{line-height:30px}.qj{letter-spacing:-0.016em}.qt{margin-top:1.14em}.rq{display:inline-block}.rw{margin-bottom:104px}.rz{flex-direction:row}.sc{margin-bottom:0}.sd{margin-right:20px}.ta{max-width:500px}.tr{margin-bottom:88px}.tu{margin-bottom:72px}.uj{width:min-width}.uo{padding-top:72px}</style><style type="text/css" data-fela-rehydration="565" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lj{margin-top:0px}.nj{margin-left:auto}.nk{text-align:center}.rp{display:inline-block}</style><style type="text/css" data-fela-rehydration="565" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.li{margin-top:0px}.ro{display:inline-block}</style><style type="text/css" data-fela-rehydration="565" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lg{margin-top:0px}.lh{margin-right:0px}.rn{display:inline-block}</style><style type="text/css" data-fela-rehydration="565" 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:4px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hs{font-size:18px}.ht{margin-top:0.79em}.hu{line-height:24px}.ih{align-items:flex-start}.jf{flex-direction:column}.jk{margin:24px -24px 0}.jl{padding:0}.ka> *{margin-right:8px}.kb> :last-child{margin-right:24px}.kt{margin-left:0px}.le{margin-top:0px}.lf{margin-right:0px}.lv{margin:0}.mf{border:1px solid #F2F2F2}.mg{border-radius:99em}.mh{padding:0px 16px 0px 12px}.mi{height:38px}.mj{align-items:center}.ml svg{margin-right:8px}.mw{margin-top:40px}.no{margin-top:1.56em}.np{line-height:28px}.nq{letter-spacing:-0.003em}.oj{max-width:100%}.ou{font-size:16px}.ov{margin-top:1.23em}.ow{letter-spacing:0}.pk{margin-top:0.67em}.pu{font-size:20px}.pv{margin-top:1.2em}.qp{margin-top:1.34em}.rm{display:inline-block}.rs{margin-bottom:96px}.sk{margin-bottom:20px}.sl{margin-right:0}.tf{font-size:24px}.tg{line-height:30px}.th{letter-spacing:-0.016em}.tn{margin-bottom:64px}.uf{width:100%}.uk{padding-top:48px}.mk:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="565" 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:68px}.gb{max-width:680px}.hi{font-size:42px}.hj{margin-top:1.19em}.hk{line-height:52px}.hl{letter-spacing:-0.011em}.ib{font-size:22px}.ic{margin-top:0.92em}.id{line-height:28px}.ik{align-items:center}.js{border-top:solid 1px #F2F2F2}.jt{border-bottom:solid 1px #F2F2F2}.ju{margin:32px 0 0}.jv{padding:3px 8px}.kg> *{margin-right:24px}.kh> :last-child{margin-right:0}.ly{margin:0}.mz{margin-top:56px}.ny{font-size:20px}.nz{margin-top:2.14em}.oa{line-height:32px}.ob{letter-spacing:-0.003em}.om{max-width:1192px}.pd{margin-top:1.72em}.pe{line-height:24px}.pf{letter-spacing:0}.pn{margin-top:0.94em}.qc{font-size:24px}.qd{margin-top:1.95em}.qe{line-height:30px}.qf{letter-spacing:-0.016em}.qs{margin-top:1.14em}.rv{margin-bottom:104px}.sa{flex-direction:row}.se{margin-bottom:0}.sf{margin-right:20px}.tb{max-width:500px}.tq{margin-bottom:88px}.tt{margin-bottom:72px}.ui{width:min-width}.un{padding-top:72px}</style><style type="text/css" data-fela-rehydration="565" 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:68px}.ga{max-width:680px}.he{font-size:42px}.hf{margin-top:1.19em}.hg{line-height:52px}.hh{letter-spacing:-0.011em}.hy{font-size:22px}.hz{margin-top:0.92em}.ia{line-height:28px}.ij{align-items:center}.jo{border-top:solid 1px #F2F2F2}.jp{border-bottom:solid 1px #F2F2F2}.jq{margin:32px 0 0}.jr{padding:3px 8px}.ke> *{margin-right:24px}.kf> :last-child{margin-right:0}.lx{margin:0}.my{margin-top:56px}.nu{font-size:20px}.nv{margin-top:2.14em}.nw{line-height:32px}.nx{letter-spacing:-0.003em}.ol{max-width:100%}.pa{margin-top:1.72em}.pb{line-height:24px}.pc{letter-spacing:0}.pm{margin-top:0.94em}.py{font-size:24px}.pz{margin-top:1.95em}.qa{line-height:30px}.qb{letter-spacing:-0.016em}.qr{margin-top:1.14em}.ru{margin-bottom:104px}.sb{flex-direction:row}.sg{margin-bottom:0}.sh{margin-right:20px}.tc{max-width:500px}.tp{margin-bottom:88px}.ts{margin-bottom:72px}.uh{width:min-width}.um{padding-top:72px}</style><style type="text/css" data-fela-rehydration="565" 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:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{line-height:38px}.hd{letter-spacing:-0.014em}.hv{font-size:18px}.hw{margin-top:0.79em}.hx{line-height:24px}.ii{align-items:flex-start}.jg{flex-direction:column}.jm{margin:24px 0 0}.jn{padding:0}.kc> *{margin-right:8px}.kd> :last-child{margin-right:8px}.ku{margin-left:0px}.lw{margin:0}.mm{border:1px solid #F2F2F2}.mn{border-radius:99em}.mo{padding:0px 16px 0px 12px}.mp{height:38px}.mq{align-items:center}.ms svg{margin-right:8px}.mx{margin-top:40px}.nr{margin-top:1.56em}.ns{line-height:28px}.nt{letter-spacing:-0.003em}.ok{max-width:100%}.ox{font-size:16px}.oy{margin-top:1.23em}.oz{letter-spacing:0}.pl{margin-top:0.67em}.pw{font-size:20px}.px{margin-top:1.2em}.qq{margin-top:1.34em}.rt{margin-bottom:96px}.si{margin-bottom:20px}.sj{margin-right:0}.ti{font-size:24px}.tj{line-height:30px}.tk{letter-spacing:-0.016em}.to{margin-bottom:64px}.ug{width:100%}.ul{padding-top:48px}.mr:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="565" data-fela-type="RULE" media="print">.rk{display:none}</style><style type="text/css" data-fela-rehydration="565" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.nc{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</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%2Ffb00a7af7985&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderUser&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><button 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">Sign up</button></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" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">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" rel="noopener follow" href="/?source=---top_nav_layout_nav----------------------------------"><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" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------"><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" rel="noopener follow" href="/search?source=---top_nav_layout_nav----------------------------------"><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><button 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">Sign up</button></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" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">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"><div><h1 id="c43a" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq bk" data-testid="storyTitle">A Brief History of Design Systems, Part 2</h1></div><div><h2 id="770f" class="pw-subtitle-paragraph hr gt gu bf b hs ht hu hv hw hx hy hz ia ib ic id ie if ig cq du">From atomic design to AI-driven systems: Understanding the evolution and adoption patterns of modern UX frameworks.</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="ih ii ij ik il ab"><div><div class="ab im"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@jgulsen_97727?source=post_page---byline--fb00a7af7985--------------------------------"><div class="l in io by ip iq"><div class="l fj"><img alt="Jim Gulsen" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*YCrvNUfSKxt7-760BAnI4Q.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="ir by l dd de fs n is ft"></div></div></div></a></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="it ab q"><div class="ab q iu"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b iv iw bk"><a class="af ag ah ai aj ak al am an ao ap aq ar ix" data-testid="authorName" rel="noopener follow" href="/@jgulsen_97727?source=post_page---byline--fb00a7af7985--------------------------------">Jim Gulsen</a></p></div></div></div><span class="iy iz" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b iv iw du"><span><a class="ja jb ah ai aj ak al am an ao ap aq ar ex jc jd" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F9783fdfdbb51&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&user=Jim+Gulsen&userId=9783fdfdbb51&source=post_page-9783fdfdbb51--byline--fb00a7af7985---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l je"><span class="bf b bg z du"><div class="ab cn jf jg jh"><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">18 min read</span><div class="ji jj l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Oct 19, 2024</span></div></span></div></span></div></div></div><div class="ab cp jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz"><div class="h k w fg fh q"><div class="kp l"><div class="ab q kq kr"><div class="pw-multi-vote-icon fj ks kt ku kv"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Ffb00a7af7985&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&user=Jim+Gulsen&userId=9783fdfdbb51&source=---header_actions--fb00a7af7985---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="kw ao kx ky kz la am lb lc ld kv"><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 le lf lg lh li lj lk"><p class="bf b dv z du"><span class="ll">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao kw lo lp ab q fk lq lr" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="ln"><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 lm ln">3</span></p></button></div></div></div><div class="ab q ka kb kc kd ke kf kg kh ki kj kk kl km kn ko"><div class="ls 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" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Ffb00a7af7985&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&source=---header_actions--fb00a7af7985---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lt" 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 lu cn"><div class="l ae"><div class="ab cb"><div class="lv lw lx ly lz ma ci bh"><div class="ab"><div class="bm bh" 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 mb an ao ap ex mc md lr me mf mg mh mi s mj mk ml mm mn mo mp u mq mr ms"><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 mb an ao ap ex mc md lr me mf mg mh mi s mj mk ml mm mn mo mp u mq mr ms"><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><figure class="mw mx my mz na nb mt mu paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu mv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*3YWsm9ITdrsLVhYkGAQCFw.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*3YWsm9ITdrsLVhYkGAQCFw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*3YWsm9ITdrsLVhYkGAQCFw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*3YWsm9ITdrsLVhYkGAQCFw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*3YWsm9ITdrsLVhYkGAQCFw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*3YWsm9ITdrsLVhYkGAQCFw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*3YWsm9ITdrsLVhYkGAQCFw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*3YWsm9ITdrsLVhYkGAQCFw.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="An abstract image of a person with digital artifacts" class="bh ma ng c" width="700" height="393" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du">Cover image created by author in Midjourney</figcaption></figure><p id="f1e5" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic frameworks that allow businesses to manage design at scale, driving efficiency and consistency across digital platforms. In just a few short years, design systems have gone from niche tools to an essential part of digital transformation.</p><p id="6341" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">What makes this evolution significant is the growing convergence of design and development, now more interconnected than ever through data APIs and collaborative tools. This integration enables teams to work faster and more efficiently, ensuring that design decisions are executed quickly and with low risk across both front-end experiences and back-end systems.</p><p id="69d7" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">As companies push forward with digital innovation, understanding how design systems have developed—and how they are increasingly powered by AI and integrated platforms—can provide key insights into the future of UX and business operations. This article will explore those pivotal moments and emerging trends that are reshaping how we approach design today.</p><p id="c7f2" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The journey from rigid guidelines to flexible, living systems has paralleled the broader shifts in technology and business strategy, influencing not just how designers work, but how entire organizations approach problem-solving and innovation.</p><p id="5dd8" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">In the first part of this series, <a class="af oh" rel="noopener" href="/@jgulsen_97727/a-very-brief-history-of-design-systems-part-1-d661a7c70002"><em class="oi">A Brief History of Design Systems, Part 1</em></a>, we explored the early history of design systems, from ancient design principles to the digital revolution of the early 2000s, uncovering some basic tenets of the societal implications of technological advancement.</p><p id="0463" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Now, in Part 2, we will examine the pivotal moments in recent history that have shaped design systems, from the rise of collaborative tools and platforms to to the advent of Artificial Intelligence — and how these frameworks have become the foundation for modern UX and digital transformation — while providing a roadmap (hopefully) for what lies ahead.</p></div></div><div class="nb"><div class="ab cb"><div class="lv oj lw ok lx ol cf om cg on ci bh"><figure class="mw mx my mz na nb op oq paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu oo"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*yyYdK5-kDYUPIRccA_SNpA.png 2000w" 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, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*yyYdK5-kDYUPIRccA_SNpA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*yyYdK5-kDYUPIRccA_SNpA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*yyYdK5-kDYUPIRccA_SNpA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*yyYdK5-kDYUPIRccA_SNpA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*yyYdK5-kDYUPIRccA_SNpA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*yyYdK5-kDYUPIRccA_SNpA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*yyYdK5-kDYUPIRccA_SNpA.png 2000w" 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, 1000px"/><img alt="a timeline of milestones in technology adoption from 2016–2024" class="bh ma ng c" width="1000" height="473" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du">Infographic created by author</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h2 id="32d3" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Design Systems 1.0</h2><p id="5d70" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">By 2016, we experienced a key moment in the evolution of digital design systems. For the first time, the convergence of industry standards allowed the business community—from designers to tech professionals—to collaborate on design systems at large scale. This marks the unofficial beginning of what we can call <em class="oi">Design Systems 1.0</em>.</p><p id="9add" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The collaborative chemistry of designers and engineers was no longer just a talking point but a practical reality. With the advent of better software and standardized methodology, teams could now work together more efficiently, creating a cohesive system that bridges the gap between the two crafts.</p><p id="29e7" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The rise of <strong class="nn gv">Sketch</strong> in 2016 was a crucial turning point for UI design. After dominating the field for over two decades, Adobe Photoshop finally had a challenger—with Sketch instantly becoming the most popular tool for UI design. For visual designers, Sketch provided a huge boost in power and flexibility. Unlike Photoshop, which was originally created for photo editing, Sketch was built specifically for interface design, making it faster, more efficient, and more collaborative—just better in every way.</p><blockquote class="pp pq pr"><p id="a026" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: The launch of Sketch in 2016 revolutionized UI design, making it more efficient and collaborative while catalyzing the widespread adoption of design systems across businesses.</strong></p></blockquote><p id="cc37" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">With Sketch’s arrival, UI improvements led to automation in ways that hadn’t been seen before. Designers could now build and share massive design libraries at transformative speeds and with exceptional reliability, allowing for easier front-end engineering handoff.</p><p id="5606" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Yet, while Sketch made collaboration more accessible, it also came with limitations. Transferring these design libraries between teams still required some degree of manual intervention, and syncing them with engineering environments wasn’t inherently seamless. These early tools, although revolutionary, came with a learning curve and significant friction.</p><p id="6a09" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">At that time, I recall spending entire project cycles managing quality assurance (QA) issues, mainly due to misalignment between design and development. Our processes were still evolving and had significant pain points that begged for industry solutions yet to come.</p><h2 id="4ed5" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">A New Mindset: “The Platform is the Product”</h2><p id="b15b" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As Sketch gained momentum, businesses — especially small and medium-sized ones — began rethinking their digital strategies. The ability to maintain platform control and independence became increasingly within reach for smaller organizations and individuals. While platforms like <strong class="nn gv">WordPress</strong> and <strong class="nn gv">Squarespace</strong> had dominated for years, offering affordable, easy-to-use solutions, they came with limitations, particularly for brands looking to customize their digital experience.</p><p id="239c" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">However, having complete control over a platform with custom design and engineering was still prohibitively expensive for many. As a result, companies often made compromises. They would use platforms like WordPress for simple “brochureware” websites to showcase their brand while relying on other systems for more complex business operations.</p><blockquote class="pp pq pr"><p id="e6bc" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: As businesses grew more digitally mature, many realized that design systems weren’t just about efficiency — they were critical to maintaining brand value and ensuring a unified digital presence.</strong></p></blockquote></div></div><div class="nb"><div class="ab cb"><div class="lv oj lw ok lx ol cf om cg on ci bh"><figure class="mw mx my mz na nb op oq paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu ps"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*J5s8NbBVYGVWkjdrNQ4I9g.png 2000w" 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, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*J5s8NbBVYGVWkjdrNQ4I9g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*J5s8NbBVYGVWkjdrNQ4I9g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*J5s8NbBVYGVWkjdrNQ4I9g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*J5s8NbBVYGVWkjdrNQ4I9g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*J5s8NbBVYGVWkjdrNQ4I9g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*J5s8NbBVYGVWkjdrNQ4I9g.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*J5s8NbBVYGVWkjdrNQ4I9g.png 2000w" 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, 1000px"/><img alt="3-part chart explaining the benefit of alignment, simplicity and relevance" class="bh ma ng c" width="1000" height="406" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf ot">Design systemization offers more than just speed and efficiency; they enhance brand value by increasing customer satisfaction.</strong> Infographic by the author.</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h2 id="b960" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">The Emergence of Prototyping and Collaboration Tools</h2><p id="4571" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">By 2016, new tools and platforms for prototyping and collaboration began to gain prominence, radically transforming how teams worked together. Gone were the days of exchanging heavy design files that slowed down workflows and introduced countless QA issues. In their place, high-fidelity HTML prototypes, code repositories, and frameworks, bundled with productivity-boosting features, allowed projects to scale faster and better with fewer risks.</p><p id="28d6" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">InVision, when combined with Sketch, became the leading tool for design handoff by 2017, establishing itself as the source of truth for prototypes. However, even with these advances, the tools themselves were often susceptible to glitches from human error. While Sketch and InVision made handoffs more efficient, it didn’t fully resolve the age-old tension between design intent and development execution. Getting a project through review cycles faster was one thing — ensuring consistency between design and code was another challenge entirely.</p><blockquote class="pp pq pr"><p id="ed64" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Tools like InVision and Sketch significantly improved collaboration between design and development teams, but the challenge of seamless design-to-code execution remained.</strong></p></blockquote><h2 id="fb85" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Breaking Free from the Print Mindset: A New Digital Workflow</h2><p id="d54b" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Despite all these technological advancements, many designers were still stuck in a print mindset. For decades, documents were thought of as static pages, and screen technology was still evolving. Even in 2016, designers were printing out layouts and pinning them to walls for review. It wasn’t until platforms like <strong class="nn gv">Material Design</strong>, <strong class="nn gv">Storybook</strong>, and <strong class="nn gv">Zeroheight</strong> became widely adopted that product teams began to shift toward truly digital-first workflows.</p><p id="c20b" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Around this time, Brad Frost’s 2016 book “<em class="oi">Atomic Design</em>” played a key role in documenting and standardizing the practice of design systems 1.0. Frost outlined the approach that broke down complex interfaces into reusable components—atoms, molecules, and organisms—that could be systematically applied across projects. This standardization of practice was sorely needed at the time, when (to be brutally honest) design as a practice did not have much influence in many organizations—UI design was typically undervalued as a “cosmetic” aspect of product engineering.</p><p id="a5f9" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The fundamentals outlined in his book still serve as essential reading for anyone looking to understand the design systems of today. <em class="oi">Atomic Design</em> provided a framework that helped teams transition from static, page-based thinking to component-based systems, laying the groundwork for the design systems revolution.</p><blockquote class="pp pq pr"><p id="c60b" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Brad Frost’s <em class="gu">Atomic Design</em> provided the much-needed structure for design systems to evolve from static style guides to scalable, reusable components, helping organizations reach consensus on digital-first project workflows.</strong></p></blockquote><h1 id="141c" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">The rise of platforms</h1><p id="ce77" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As digital tools evolved, a seismic shift in how businesses—particularly small and medium-sized enterprises (SMBs)—approached their digital strategies began to take place. Central to this shift was the idea of platforms not merely as a support tool but as the core of the product offering itself, by managing content independently, commonly referred to as a content management system (CMS). Companies recognized that establishing direct control and autonomy over their digital ecosystems, rather than relying on third-party managed solutions, could give them a competitive edge in the marketplace.</p><h2 id="c8b8" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Low-code and no-code: expanding accessibility</h2><p id="033b" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">The rise of <strong class="nn gv">low-code</strong> and <strong class="nn gv">no-code</strong> platforms continued to change the landscape. Platforms like <strong class="nn gv">Wix</strong> and <strong class="nn gv">Shopify</strong> blurred the lines between ease of use and customization, offering more flexibility than WordPress and without requiring full-blown development skills. No-code platforms allow users to build websites, applications, and even complex workflows using visual interfaces, empowering non-developers to create what was once the domain of experienced engineers.</p><p id="7c41" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">For many SMBs, these low-code and no-code platforms presented a middle ground between fully custom solutions and traditional website builders. They allowed businesses to maintain a level of control and flexibility without the need to invest in expensive engineering teams. This opened up new opportunities for small-scale e-commerce ventures, personal branding sites, and community-driven platforms.</p><p id="fb93" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">However, as companies grew, many began realizing the benefits of having complete platform autonomy, especially for scalability and unique, brand-specific experiences. Having full technical control means maintaining independence over every interaction, design choice, and user journey. This capability, once exclusive to enterprises with extensive technical resources, became accessible to more businesses with the rise of developer-focused tools and frameworks.</p><blockquote class="pp pq pr"><p id="dd6a" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: While no-code solutions provide an entry point, fully custom, scalable digital ecosystems allow businesses to maintain complete platform independence and control.</strong></p></blockquote><h2 id="7646" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Conventional platforms for business and publishing</h2><p id="66af" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Despite the rise of low-code and no-code platforms, many enterprises still rely on traditional platforms like Drupal and Sitecore for large-scale projects. These content management systems (CMS) offer high customization but require more technical expertise. They are favored for projects needing advanced security, multi-language support, and complex user roles, especially for organizations with strong IT resources.</p><blockquote class="pp pq pr"><p id="440b" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Traditional CMS platforms remain essential for enterprises with complex needs, offering greater customization and security.</strong></p></blockquote><h2 id="7628" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Social Media: A platform within platforms</h2><p id="df2f" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Social media platforms like Facebook, Instagram, and LinkedIn allow businesses to engage massive audiences without their own website, offering built-in solutions for e-commerce and community engagement. However, these platforms limit control over content and data. Most businesses use a hybrid approach, leveraging social media’s reach while maintaining independence through their own self-managed digital platforms for a more consistent brand experience.</p><blockquote class="pp pq pr"><p id="0d54" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: A hybrid approach combines the reach of social media with the autonomy of maintaining a self-managed digital platform.</strong></p></blockquote><h2 id="5033" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Salesforce: Bridging low-code and conventional development</h2><p id="9e05" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Salesforce bridges the gap between low-code and conventional development. Its Lightning platform allows non-developers to create apps and automate processes, while its Apex programming language offers more advanced customization for businesses needing more control. Salesforce’s flexibility, combined with its AppExchange marketplace, makes it a powerful tool for businesses to scale while maintaining operational control.</p><blockquote class="pp pq pr"><p id="45c0" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Salesforce’s low-code solutions allow businesses to scale quickly while offering advanced customization options for future growth.</strong></p></blockquote><h2 id="41db" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Platforms as business enablers</h2><p id="ca5f" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Choosing the right platform has become one of the most important decisions for businesses in the digital age. Whether it’s a CMS for content publishing, an e-commerce platform for retail, or a no-code tool for custom workflows, the platform is now an enabler of business transformation. Companies that have direct governance over their platforms and are able to adapt to changing user demands will have a competitive advantage in a digital-first world.</p><h1 id="96a4" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">Figma: The game-changer in design platforms</h1><p id="4820" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">The rise of Figma as a game-changer in design systems has been well-documented. One of the core reasons for its success was its all-in-one platform approach. While Sketch and InVision had their strengths, their bifurcated system created gaps in the design-to-development handoff, leading to friction between teams. Figma resolved these issues by consolidating design, prototyping, and collaboration features into a single platform, offering real-time, multi-user interfaces that brought designers, engineers, and other stakeholders together in unprecedented ways.</p><p id="6ac1" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This shift was more than just an advancement in design technology; it was an industry-wide transformation. By enabling real-time collaboration across disciplines, Figma turned design into a “multiplayer game,” setting a new standard for speed, quality, and teamwork. It quickly displaced Sketch and InVision as the preferred tool for UI and UX design and became a serious rival to Adobe XD, which, despite being part of the larger Adobe Creative Cloud ecosystem, couldn’t keep pace with Figma’s user-friendly, cloud-native architecture.</p><blockquote class="pp pq pr"><p id="6748" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Figma’s rise marked a critical inflection point in design systems — moving from fragmented workflows to unified, collaborative platforms that meet the fast-paced demands of modern design teams.</strong></p></blockquote><h1 id="77d5" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">Adobe Experience Manager and the evolution of design platforms</h1><p id="f578" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">While Figma was disrupting the design world, <strong class="nn gv">Adobe Experience Manager</strong> (AEM) established itself as best-in-class for content management systems (CMS). Before AEM, SiteCore led the market in CMS platforms. But AEM’s game-changing product, with faster workflows and <strong class="nn gv">Dynamic Media</strong>, Adobe’s digital asset management system (DAM), set a new benchmark for power and efficiency.</p><p id="333f" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The deep integration with Adobe Creative Cloud gave design professionals an entirely holistic way to manage content and creative assets. However, Adobe’s digital design tool, <strong class="nn gv">Adobe XD,</strong> failed to achieve market dominance as Figma became the standard. This was further impacted by Adobe’s failed attempt to acquire Figma in 2023.</p><p id="2391" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Despite this setback, Adobe also introduced <strong class="nn gv">Adobe Workfront</strong>, a project management tool that fits right into Create Suite, allowing teams to plan projects, manage resources, and track progress within the Adobe ecosystem. When used with other Adobe tools, Workfront could become a serious competitor to other project management software, offering creative teams a transformative method of integrating and streamlining systems for design and development.</p><blockquote class="pp pq pr"><p id="bb96" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: AEM became the leader in CMS by integrating smoothly into Adobe’s ecosystem, but its UI design tool, Adobe XD, failed to achieve the same dominance in a design landscape shaped by Figma’s innovations.</strong></p></blockquote><h1 id="7704" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">The COVID-19 impact: digital platform adoption surges</h1><p id="1ed9" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">The COVID-19 pandemic was a pivotal moment for digital platform adoption. As businesses worldwide shifted to remote work, tools for real-time collaboration became essential. Platforms like <strong class="nn gv">Slack</strong>, <strong class="nn gv">Zoom</strong> and <strong class="nn gv">Microsoft Teams</strong> saw explosive growth, quickly becoming the go-to solutions for virtual meetings and team collaboration. <strong class="nn gv">Atlassian</strong>’s suite of tools also gained traction, facilitating teamwork across distributed teams, while creative collaboration platforms like <strong class="nn gv">Mural</strong> and <strong class="nn gv">Miro</strong> proliferated, offering virtual whiteboard capabilities that enabled remote brainstorming sessions.</p><p id="9a18" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Cloud adoption, which was already accelerating, surged as companies scrambled to ensure their systems could support a global workforce operating from home. The near-global work-from-home (WFH) experiment wasn’t just sustainable — it thrived. Businesses realized they could tap into a wider pool of talent, assembling teams not based on geography but on skill sets, and working even more effectively in a remote, multiplayer fashion.</p><blockquote class="pp pq pr"><p id="ec38" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: The pandemic accelerated the adoption of digital platforms and transformed remote work into a lasting model, enabling businesses to collaborate seamlessly in real time, regardless of physical location.</strong></p></blockquote><h1 id="e40d" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">Figma’s continuous innovation: from design to whiteboard</h1><p id="7b25" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Figma didn’t stop at revolutionizing UI design. In response to the growing demand for real-time, collaborative tools, Figma introduced FigJam, a whiteboard platform designed to make brainstorming and ideation accessible to all, not just designers. With its intuitive interface, FigJam democratized collaboration, allowing entire teams — from marketers to developers — to contribute to the design process.</p><p id="6b22" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Figma’s ease of adoption made it the de facto tool for not just design teams but entire organizations. It became a hub where research, insights, audits, analytics, and design could all live in one place, enhancing the efficiency and reusability of team assets. This elevated Figma’s position as the leading aggregator of design truth, consolidating its hold on the market and positioning itself as a rival to platforms like Mural and Miro.</p><blockquote class="pp pq pr"><p id="b48d" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Figma’s continuous innovation, including the introduction of FigJam, expanded its role from a UI design tool to a comprehensive platform for team collaboration, further entrenching its dominance in the design space.</strong></p></blockquote><h1 id="e52b" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">Platform maturity and the rise of developer kits</h1><p id="bb9b" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As design platforms matured, so did the need for seamless integration between design and development. Figma’s introduction of <strong class="nn gv">Variables</strong> in 2021, which replaced Styles, was a key innovation in this regard.</p><p id="d13c" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Variables allowed designers to tokenize brand attributes, making it easier to sync with developer kits such as <strong class="nn gv">Material Design</strong> or others, depending on the platform. Synchronizing design and developer kits empower Figma to manage dynamic content and themes, such as dark and light modes or multi-brand systems. This tokenization was a major productivity boost, enabling designers and developers to control the appearance of user interfaces in real time —<strong class="nn gv"><em class="oi"> directly syncing design files with develop API’s</em></strong>.</p><p id="952e" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Since the advent of desktop publishing for digital media, this has been the holy grail of design and dev integration. An style guide for a brand can be compressed into a single sheet of data managed efficiently by Figma, and hosted live. UI changes can be done in the background, completely detached from front end work.</p><p id="336a" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">What’s more, developer kits enable Figma to model higher level objects and components very precisely to the components used on CMS platforms, mimicking front end semantics and further strengthening Figma’s role as the source of truth for design.</p><blockquote class="pp pq pr"><p id="abb7" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Developer Kits and Design Kits have become essential for modern design systems, enabling frictionless collaboration between design and development teams, with Figma leading the charge in innovation and ease of use.</strong></p></blockquote></div></div><div class="nb"><div class="ab cb"><div class="lv oj lw ok lx ol cf om cg on ci bh"><figure class="mw mx my mz na nb op oq paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu ql"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*13KI9dw4Do_oevIkjiOJ4A.png 2000w" 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, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*13KI9dw4Do_oevIkjiOJ4A.png 640w, https://miro.medium.com/v2/resize:fit:720/1*13KI9dw4Do_oevIkjiOJ4A.png 720w, https://miro.medium.com/v2/resize:fit:750/1*13KI9dw4Do_oevIkjiOJ4A.png 750w, https://miro.medium.com/v2/resize:fit:786/1*13KI9dw4Do_oevIkjiOJ4A.png 786w, https://miro.medium.com/v2/resize:fit:828/1*13KI9dw4Do_oevIkjiOJ4A.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*13KI9dw4Do_oevIkjiOJ4A.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*13KI9dw4Do_oevIkjiOJ4A.png 2000w" 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, 1000px"/><img alt="a side-to side comparison of static and dynamic design systems" class="bh ma ng c" width="1000" height="549" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf ot">Dynamic design systems manage UI design as the managed base of an organization’s technology stack, enabling more extensibility for automated experiences. </strong>Infographic created by author</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="3198" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">Design Systems 2.0</h1><p id="6fe8" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">The recent advances in Figma have transformed how design patterns are built, moving away from static, disjointed structures to dynamic, <em class="oi">white-label</em> products that are highly customizable—ushering in what we can call Design Systems 2.0. Not to be confused with design <em class="oi">templates</em>, a dynamic design <em class="oi">system</em> is not locked into pre-set visuals or rigid components but rather, variables assigned to UX patterns. The only standardized element is the underlying code structure, allowing for endless flexibility in how the design itself evolves.</p><h2 id="51d7" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Opportunities for automation</h2><p id="8630" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">One of the greatest strengths of Design Systems 2.0 is the opportunity for automation. Dynamic systems can be integrated with code libraries and APIs to automate repetitive design tasks, such as updating UI elements across a platform in real time. For example, changes made to a button component in one part of the system can instantly propagate across every interface where that button is used. This not only reduces manual labor but also ensures consistency, speed, and accuracy in design updates across multiple touchpoints.</p><h2 id="4d0f" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Personalization at scale</h2><p id="370e" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">A dynamic design system also opens the door to advanced personalization, allowing brands to create custom experiences for individual users (or multiple brands). By integrating customer data, designers can programmatically adjust interface elements—such as color schemes, content layout, or product recommendations—based on a user’s accessibility requirements, preferences, or behavior. The standardized code structure ensures these personalized elements can be seamlessly integrated into the broader design framework without causing disruptions or inconsistencies.</p><h2 id="0b67" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">A/B testing made simple</h2><p id="d4c0" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">The flexibility of Design Systems 2.0 also makes A/B testing far more efficient. Because design elements are modular and standardized at the code level, designers can quickly test multiple variations of a design without the need to create entirely new templates or assets. Teams can experiment with different design patterns and content strategies, then gather performance data and implement changes quickly. This approach can revolutionize iteration cycles, allowing businesses to quickly optimize their interfaces based on real user feedback.</p><blockquote class="pp pq pr"><p id="2b21" class="nl nm oi nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gv">Key Takeaway: Design Systems 2.0 enable automation, personalization, and A/B testing at scale.</strong></p></blockquote><p id="aa0e" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">In summary, dynamic design systems not only allow for greater creativity and flexibility in how interfaces are crafted, but they also introduce new levels of efficiency and intelligence. As these systems continue to evolve, they will likely play a central role in how businesses create digital experiences that are more responsive, personalized, and data-driven than ever before.</p><h1 id="ccac" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk">A glimpse into the future of AI-driven design</h1><p id="f4ed" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As we stand at the threshold of a new era in design systems, AI has the potential to fundamentally change how we think about digital design and development. As static design systems of yesterday are evolving into dynamic ecosystems, many of the manual processes of today will need to adapt to tomorrow’s AI-assisted workflows.</p><h2 id="c56b" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">The Rise of Intelligent Design Operations</h2><p id="ec00" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">AI is set to make a big difference in the daily work of design teams. No longer will keeping designs consistent mean manual reviews and constant updates to documentation. AI will act as an active partner in the design process, both safeguarding and guiding—spotting inconsistencies and offering suggestions based on how components are used—and may even anticipate design needs before they come up.</p><p id="48ae" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This shift is particularly powerful in large organizations where design systems must scale across multiple products and teams. AI assistants are becoming sophisticated enough to understand context, making them great partners in maintaining design integrity. They can identify when a component deviation is intentional innovation versus an accidental inconsistency, helping teams govern the balance between system compliance and creative freedom.</p><h2 id="c5cb" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><strong class="al">Dynamic Adaptation and Personalization</strong></h2><p id="8a0d" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">Perhaps the most transformative aspect of AI in design systems is its ability to enable truly dynamic experiences. Traditional design systems offered consistency through standardization — every user saw the same components in the same way. AI-enhanced design systems, however, can adapt in real-time to user needs, preferences, and contexts while maintaining brand coherence.</p><p id="01a6" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This adaptation goes beyond simple responsive design. Perhaps one of the most exciting frontiers for dynamic design systems is the integration of agentive (autonomous) AI. AI-driven systems allow design elements to adjust on their own in real time, based on user needs or business goals. For example, AI can study how users interact with a website and make automatic design changes to improve ease of use or increase sales. Agentive AI could even generate entirely new design patterns based on predictive models, further automating the design process and unlocking new levels of personalization and performance optimization.</p><p id="dc2b" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Imagine components that automatically adjust their complexity based on user expertise or navigation systems that reorganize themselves based on usage patterns. Color schemes might subtly shift based on time of day or user behavior while maintaining accessibility standards. Typography could dynamically adjust for optimal readability based on viewing conditions and user characteristics.</p><h2 id="86e5" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><strong class="al">The Designer’s Evolution</strong></h2><p id="15ea" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">This technological leap is catalyzing a profound evolution in the role of designers. Rather than focusing solely on creating static components, designers are becoming system architects and AI collaborators. They’re developing skills in prompt engineering — the art of guiding AI to generate appropriate design variations. They’re learning to create not just components but component generation rules that AI can follow to maintain brand integrity across limitless variations.</p><p id="a6e3" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The relationship between designers and developers is also being redefined. AI is beginning to serve as a translator between design intent and technical implementation, suggesting optimal code patterns for design decisions and flagging potential implementation challenges before they arise. This is creating a more fluid, collaborative environment where the traditional handoff between design and development becomes a continuous conversation.</p><h2 id="7995" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk">Ethical Design at Scale</h2><p id="8793" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As AI becomes more integrated into design systems, new ethical issues arise. For instance, how do we ensure AI-driven personalization won’t create discriminatory experiences? How do we maintain transparency about which aspects of a user’s experience are AI-influenced? These questions should compel organizations to develop new frameworks for ethical AI design principles.</p><h2 id="73f2" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><strong class="al">The Future Design Canvas</strong></h2><p id="900b" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">We’re moving toward design systems that are less like static libraries and more like collaborative AI partners. They’ll not only manage and maintain design assets but actively participate in the creative process. They’ll analyze user interactions, suggest improvements, and even predict future design needs based on emerging trends and user behaviors.</p><p id="25fd" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Success will come not from having the most components or the strictest guidelines, but from creating the most intelligent and adaptable design systems. Teams will need to become comfortable with systems that learn and evolve while ensuring they remain anchored to core brand values and user needs.</p><p id="6c81" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Integrating AI into design systems brings incredible potential but also real challenges. Organizations will need to balance quality control, skill-building, and ethical concerns while keeping the human element that makes design meaningful. The goal isn’t to let AI replace human creativity but to use it as a tool to amplify it, supporting rather than fully automating design choices.</p><p id="e708" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Going forward, the most successful organizations will treat AI as a way to evolve traditional design systems, not replace them; these new workflows unlock a fresh level of creativity, allowing designers to focus on crafting experiences that feel personal and engaging. With AI managing routine tasks, designers can bring a new depth to the user experience, making it more dynamic, relevant, and genuinely human-centered.</p><h2 id="440e" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><strong class="al">Key Business Challenges</strong></h2><ol class=""><li id="6cdc" class="nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og qm qn qo bk"><strong class="nn gv">Legacy Systems</strong>: Many organizations still rely on outdated infrastructures that are not compatible with modern, dynamic design systems. Overcoming these technical barriers and replacing legacy systems with more modern frameworks will be critical for businesses aiming to innovate and stay competitive.</li><li id="41d5" class="nl nm gu nn b hs qp np nq hv qq ns nt nu qr nw nx ny qs oa ob oc qt oe of og qm qn qo bk"><strong class="nn gv">Internal Governance</strong>: As design systems become central to business operations, internal governance will of design will be a significant factor. Maintaining consistency across teams will ensure that dynamic systems function properly. Organizations must develop clear standards and processes to avoid fragmented design efforts and maintain quality at scale.</li><li id="c7b4" class="nl nm gu nn b hs qp np nq hv qq ns nt nu qr nw nx ny qs oa ob oc qt oe of og qm qn qo bk"><strong class="nn gv">Shifting Skill Sets</strong>: The rise of dynamic design systems will require shifts in skill sets across design and development teams. Designers will need to become more comfortable with data, automation, and real-time interfaces, while developers will need a deeper understanding of design workflows. Upskilling teams to navigate this evolving landscape will be a crucial factor for future success.</li></ol><h1 id="c1d5" class="pt os gu bf ot pu pv hu ow pw px hx oz py pz qa qb qc qd qe qf qg qh qi qj qk bk"><strong class="al">A New Publishing Mindset</strong></h1><p id="f6af" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As design systems evolve, so too does the mindset around publishing. Content is no longer seen as static or fixed; instead, it is becoming more fluid, dynamic, and responsive to changing contexts. Modern publishing will become increasingly situational and conversational, adapting to user interactions, environments, and real-time data. This shift requires organizations to think beyond traditional paradigms and embrace more flexible approaches that allow content and design to evolve together.</p><h2 id="9319" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><strong class="al">Looking Ahead</strong></h2><p id="1f50" class="pw-post-body-paragraph nl nm gu nn b hs pk np nq hv pl ns nt nu pm nw nx ny pn oa ob oc po oe of og gn bk">As organizations continue to push the boundaries of what design systems can achieve, the lessons learned from past innovations will be invaluable. Businesses that can embrace these new mindsets — where publishing is more dynamic, design is more integrated, and teams are more collaborative — will thrive in this evolving landscape.</p><p id="087b" class="pw-post-body-paragraph nl nm gu nn b hs no np nq hv nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Thank you for reading, and please let me know your thoughts in the comments below. And for more context, please refer to the first part of this series, which looks back at much earlier early design systems to reveal insights:</p><h2 id="a360" class="or os gu bf ot ou ov dy ow ox oy ea oz nu pa pb pc ny pd pe pf oc pg ph pi pj bk"><a class="af oh" rel="noopener" href="/@jgulsen_97727/a-very-brief-history-of-design-systems-part-1-d661a7c70002"><strong class="al">A Very Brief History of Design Systems, Part 1</strong></a></h2></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qu qv ab jh"><div class="qw ab"><a class="qx ay am ao" rel="noopener follow" href="/tag/design-systems?source=post_page-----fb00a7af7985--------------------------------"><div class="qy fj cx qz ge ra rb bf b bg z bk rc">Design Systems</div></a></div><div class="qw ab"><a class="qx ay am ao" rel="noopener follow" href="/tag/design-process?source=post_page-----fb00a7af7985--------------------------------"><div class="qy fj cx qz ge ra rb bf b bg z bk rc">Design Process</div></a></div><div class="qw ab"><a class="qx ay am ao" rel="noopener follow" href="/tag/design-evolution?source=post_page-----fb00a7af7985--------------------------------"><div class="qy fj cx qz ge ra rb bf b bg z bk rc">Design Evolution</div></a></div><div class="qw ab"><a class="qx ay am ao" rel="noopener follow" href="/tag/design-methodology?source=post_page-----fb00a7af7985--------------------------------"><div class="qy fj cx qz ge ra rb bf b bg z bk rc">Design Methodology</div></a></div><div class="qw ab"><a class="qx ay am ao" rel="noopener follow" href="/tag/history-of-technology?source=post_page-----fb00a7af7985--------------------------------"><div class="qy fj cx qz ge ra rb bf b bg z bk rc">History Of Technology</div></a></div></div></div></div><div class="l"></div><footer class="rd re rf rg rh ab q ri rj c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rk"><div class="ab q kq"><div class="rl l"><span class="l rm rn ro e d"><div class="ab q kq kr"><div class="pw-multi-vote-icon fj ks kt ku kv"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Ffb00a7af7985&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&user=Jim+Gulsen&userId=9783fdfdbb51&source=---footer_actions--fb00a7af7985---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="kw ao kx ky kz la am lb lc ld kv"><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 le lf lg lh li lj lk"><p class="bf b dv z du"><span class="ll">--</span></p></div></div></span><span class="l h g f rp rq"><div class="ab q kq kr"><div class="pw-multi-vote-icon fj ks kt ku kv"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Ffb00a7af7985&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&user=Jim+Gulsen&userId=9783fdfdbb51&source=---footer_actions--fb00a7af7985---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="kw ao kx ky kz la am lb lc ld kv"><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 le lf lg lh li lj lk"><p class="bf b dv z du"><span class="ll">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao kw lo lp ab q fk lq lr" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="ln"><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 lm ln">3</span></p></button></div></div></div></div><div class="ab q"><div class="rr l je"><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" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Ffb00a7af7985&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-brief-history-of-design-systems-part-2-fb00a7af7985&source=---footer_actions--fb00a7af7985---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lt" 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="rr l je"><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 mb an ao ap ex mc md lr me"><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="rs rt ru rv rw l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rx bh r ry"></div><div class="ab rz sa sb jg jf"><div class="sc sd se sf sg sh si sj sk sl ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@jgulsen_97727?source=post_page---post_author_info--fb00a7af7985--------------------------------"><div class="l fj"><img alt="Jim Gulsen" class="l fd by io in cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*YCrvNUfSKxt7-760BAnI4Q.png" width="48" height="48" loading="lazy"/><div class="fr by l io in fs n ay sm"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@jgulsen_97727?source=post_page---post_author_info--fb00a7af7985--------------------------------"><div class="l fj"><img alt="Jim Gulsen" class="l fd by sn so cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*YCrvNUfSKxt7-760BAnI4Q.png" width="64" height="64" loading="lazy"/><div class="fr by l sn so fs n ay sm"></div></div></a></div><div class="j i d sp je"><div class="ab"><span><button class="bf b bg z sq qy sr ss st su sv ev ew sw sx sy fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sz"><div class="ta tb tc ok oj l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@jgulsen_97727?source=post_page---post_author_info--fb00a7af7985--------------------------------"><h2 class="pw-author-name bf te tf tg th ti tj tk nu pb pc ny pe pf oc ph pi bk"><span class="gn td">Written by <!-- -->Jim Gulsen</span></h2></a><div class="qw ab im"><div class="l je"><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 ix" rel="noopener follow" href="/@jgulsen_97727/followers?source=post_page---post_author_info--fb00a7af7985--------------------------------">34 Followers</a></span></div><div class="bf b bg z du ab tl"><span class="iy 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 ix" rel="noopener follow" href="/@jgulsen_97727/following?source=post_page---post_author_info--fb00a7af7985--------------------------------">27 Following</a></div></div><div class="tm l"><p class="bf b bg z bk"><span class="gn">UX/UI Designer, Creative Director, Storyteller, Midjourney Maven</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z sq qy sr ss st su sv ev ew sw sx sy fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="tn to tp tq tr l"><div class="rx bh r tn to ts tt tu"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf te pu hu ow pw hx oz py qa qb qc qe qf qg qi qj bk">Responses (<!-- -->3<!-- -->)</h2><div class="ab tv"><div><div class="bm" aria-hidden="false"><a class="tw tx" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--fb00a7af7985--------------------------------" 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="ty l"><button class="bf b bg z bk qy tz ua ub lt lq sv ev ew ex uc ud ue fa uf ug uh ui uj fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="uk ul um un uo l bx"><div class="h k j"><div class="rx bh up uq"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ur ab kq jh"><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="us ut l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----fb00a7af7985--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="us ut l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----fb00a7af7985--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="us ut l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="us ut 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-----fb00a7af7985--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="us l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----fb00a7af7985--------------------------------"><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-20241126-181518-0cb59a020f"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-fb00a7af7985","user-9783fdfdbb51"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"b76b9f24-fe2e-41dd-bc55-5f544fb2ffcf","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-70103228957351e735bed4aa43b46707-a6be60c5cc12de4b-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-brief-history-of-design-systems-part-2-fb00a7af7985","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20241126-181518-0cb59a020f","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-20241126-181518-0cb59a020f","commit":"0cb59a020f4453d0900f671f1a6576feecc55e74"}},"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__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"medium.com\"})":null,"postResult({\"id\":\"fb00a7af7985\"})":{"__ref":"Post:fb00a7af7985"}},"LinkedAccounts:9783fdfdbb51":{"__typename":"LinkedAccounts","mastodon":null,"id":"9783fdfdbb51"},"UserViewerEdge:userId:9783fdfdbb51-viewerId:lo_e7ddf632ba49":{"__typename":"UserViewerEdge","id":"userId:9783fdfdbb51-viewerId:lo_e7ddf632ba49","isFollowing":false,"isUser":false,"isMuting":false},"Membership:eb5f9a4cd25e":{"__typename":"Membership","tier":"MEMBER","id":"eb5f9a4cd25e"},"User:9783fdfdbb51":{"__typename":"User","id":"9783fdfdbb51","linkedAccounts":{"__ref":"LinkedAccounts:9783fdfdbb51"},"isSuspended":false,"imageId":"1*YCrvNUfSKxt7-760BAnI4Q.png","mediumMemberAt":1708030583000,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"name":"Jim Gulsen","socialStats":{"__typename":"SocialStats","followerCount":34,"followingCount":25,"collectionFollowingCount":2},"username":"jgulsen_97727","customDomainState":null,"hasSubdomain":false,"bio":"UX\u002FUI Designer, Creative Director, Storyteller, Midjourney Maven","isPartnerProgramEnrolled":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:9783fdfdbb51-viewerId:lo_e7ddf632ba49"},"viewerIsUser":false,"newsletterV3":null,"postSubscribeMembershipUpsellShownAt":0,"membership":{"__ref":"Membership:eb5f9a4cd25e"},"allowNotes":true,"twitterScreenName":""},"Paragraph:1c3ba994f1cd_0":{"__typename":"Paragraph","id":"1c3ba994f1cd_0","name":"c43a","type":"H3","href":null,"layout":null,"metadata":null,"text":"A Brief History of Design Systems, Part 2","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_1":{"__typename":"Paragraph","id":"1c3ba994f1cd_1","name":"770f","type":"H4","href":null,"layout":null,"metadata":null,"text":"From atomic design to AI-driven systems: Understanding the evolution and adoption patterns of modern UX frameworks.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*3YWsm9ITdrsLVhYkGAQCFw.png":{"__typename":"ImageMetadata","id":"1*3YWsm9ITdrsLVhYkGAQCFw.png","originalHeight":816,"originalWidth":1456,"focusPercentX":null,"focusPercentY":null,"alt":"An abstract image of a person with digital artifacts"},"Paragraph:1c3ba994f1cd_2":{"__typename":"Paragraph","id":"1c3ba994f1cd_2","name":"26d4","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*3YWsm9ITdrsLVhYkGAQCFw.png"},"text":"Cover image created by author in Midjourney","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_3":{"__typename":"Paragraph","id":"1c3ba994f1cd_3","name":"f1e5","type":"P","href":null,"layout":null,"metadata":null,"text":"Design systems have rapidly emerged as a cornerstone of modern digital strategy, yet their development is still relatively recent. What started as design prototype handoffs has evolved into dynamic frameworks that allow businesses to manage design at scale, driving efficiency and consistency across digital platforms. In just a few short years, design systems have gone from niche tools to an essential part of digital transformation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_4":{"__typename":"Paragraph","id":"1c3ba994f1cd_4","name":"6341","type":"P","href":null,"layout":null,"metadata":null,"text":"What makes this evolution significant is the growing convergence of design and development, now more interconnected than ever through data APIs and collaborative tools. This integration enables teams to work faster and more efficiently, ensuring that design decisions are executed quickly and with low risk across both front-end experiences and back-end systems.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_5":{"__typename":"Paragraph","id":"1c3ba994f1cd_5","name":"69d7","type":"P","href":null,"layout":null,"metadata":null,"text":"As companies push forward with digital innovation, understanding how design systems have developed—and how they are increasingly powered by AI and integrated platforms—can provide key insights into the future of UX and business operations. This article will explore those pivotal moments and emerging trends that are reshaping how we approach design today.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_6":{"__typename":"Paragraph","id":"1c3ba994f1cd_6","name":"c7f2","type":"P","href":null,"layout":null,"metadata":null,"text":"The journey from rigid guidelines to flexible, living systems has paralleled the broader shifts in technology and business strategy, influencing not just how designers work, but how entire organizations approach problem-solving and innovation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_7":{"__typename":"Paragraph","id":"1c3ba994f1cd_7","name":"5dd8","type":"P","href":null,"layout":null,"metadata":null,"text":"In the first part of this series, A Brief History of Design Systems, Part 1, we explored the early history of design systems, from ancient design principles to the digital revolution of the early 2000s, uncovering some basic tenets of the societal implications of technological advancement.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":34,"end":75,"href":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-very-brief-history-of-design-systems-part-1-d661a7c70002","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":34,"end":75,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_8":{"__typename":"Paragraph","id":"1c3ba994f1cd_8","name":"0463","type":"P","href":null,"layout":null,"metadata":null,"text":"Now, in Part 2, we will examine the pivotal moments in recent history that have shaped design systems, from the rise of collaborative tools and platforms to to the advent of Artificial Intelligence — and how these frameworks have become the foundation for modern UX and digital transformation — while providing a roadmap (hopefully) for what lies ahead.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*yyYdK5-kDYUPIRccA_SNpA.png":{"__typename":"ImageMetadata","id":"1*yyYdK5-kDYUPIRccA_SNpA.png","originalHeight":1360,"originalWidth":2880,"focusPercentX":null,"focusPercentY":null,"alt":"a timeline of milestones in technology adoption from 2016–2024"},"Paragraph:1c3ba994f1cd_9":{"__typename":"Paragraph","id":"1c3ba994f1cd_9","name":"9d1e","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*yyYdK5-kDYUPIRccA_SNpA.png"},"text":"Infographic created by author","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_10":{"__typename":"Paragraph","id":"1c3ba994f1cd_10","name":"32d3","type":"H4","href":null,"layout":null,"metadata":null,"text":"Design Systems 1.0","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_11":{"__typename":"Paragraph","id":"1c3ba994f1cd_11","name":"5d70","type":"P","href":null,"layout":null,"metadata":null,"text":"By 2016, we experienced a key moment in the evolution of digital design systems. For the first time, the convergence of industry standards allowed the business community—from designers to tech professionals—to collaborate on design systems at large scale. This marks the unofficial beginning of what we can call Design Systems 1.0.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":312,"end":330,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_12":{"__typename":"Paragraph","id":"1c3ba994f1cd_12","name":"9add","type":"P","href":null,"layout":null,"metadata":null,"text":"The collaborative chemistry of designers and engineers was no longer just a talking point but a practical reality. With the advent of better software and standardized methodology, teams could now work together more efficiently, creating a cohesive system that bridges the gap between the two crafts.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_13":{"__typename":"Paragraph","id":"1c3ba994f1cd_13","name":"29e7","type":"P","href":null,"layout":null,"metadata":null,"text":"The rise of Sketch in 2016 was a crucial turning point for UI design. After dominating the field for over two decades, Adobe Photoshop finally had a challenger—with Sketch instantly becoming the most popular tool for UI design. For visual designers, Sketch provided a huge boost in power and flexibility. Unlike Photoshop, which was originally created for photo editing, Sketch was built specifically for interface design, making it faster, more efficient, and more collaborative—just better in every way.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":12,"end":18,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_14":{"__typename":"Paragraph","id":"1c3ba994f1cd_14","name":"a026","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: The launch of Sketch in 2016 revolutionized UI design, making it more efficient and collaborative while catalyzing the widespread adoption of design systems across businesses.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":189,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_15":{"__typename":"Paragraph","id":"1c3ba994f1cd_15","name":"cc37","type":"P","href":null,"layout":null,"metadata":null,"text":"With Sketch’s arrival, UI improvements led to automation in ways that hadn’t been seen before. Designers could now build and share massive design libraries at transformative speeds and with exceptional reliability, allowing for easier front-end engineering handoff.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_16":{"__typename":"Paragraph","id":"1c3ba994f1cd_16","name":"5606","type":"P","href":null,"layout":null,"metadata":null,"text":"Yet, while Sketch made collaboration more accessible, it also came with limitations. Transferring these design libraries between teams still required some degree of manual intervention, and syncing them with engineering environments wasn’t inherently seamless. These early tools, although revolutionary, came with a learning curve and significant friction.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_17":{"__typename":"Paragraph","id":"1c3ba994f1cd_17","name":"6a09","type":"P","href":null,"layout":null,"metadata":null,"text":"At that time, I recall spending entire project cycles managing quality assurance (QA) issues, mainly due to misalignment between design and development. Our processes were still evolving and had significant pain points that begged for industry solutions yet to come.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_18":{"__typename":"Paragraph","id":"1c3ba994f1cd_18","name":"4ed5","type":"H4","href":null,"layout":null,"metadata":null,"text":"A New Mindset: “The Platform is the Product”","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_19":{"__typename":"Paragraph","id":"1c3ba994f1cd_19","name":"b15b","type":"P","href":null,"layout":null,"metadata":null,"text":"As Sketch gained momentum, businesses — especially small and medium-sized ones — began rethinking their digital strategies. The ability to maintain platform control and independence became increasingly within reach for smaller organizations and individuals. While platforms like WordPress and Squarespace had dominated for years, offering affordable, easy-to-use solutions, they came with limitations, particularly for brands looking to customize their digital experience.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":279,"end":288,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":293,"end":304,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_20":{"__typename":"Paragraph","id":"1c3ba994f1cd_20","name":"239c","type":"P","href":null,"layout":null,"metadata":null,"text":"However, having complete control over a platform with custom design and engineering was still prohibitively expensive for many. As a result, companies often made compromises. They would use platforms like WordPress for simple “brochureware” websites to showcase their brand while relying on other systems for more complex business operations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_21":{"__typename":"Paragraph","id":"1c3ba994f1cd_21","name":"e6bc","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: As businesses grew more digitally mature, many realized that design systems weren’t just about efficiency — they were critical to maintaining brand value and ensuring a unified digital presence.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":208,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*J5s8NbBVYGVWkjdrNQ4I9g.png":{"__typename":"ImageMetadata","id":"1*J5s8NbBVYGVWkjdrNQ4I9g.png","originalHeight":1130,"originalWidth":2784,"focusPercentX":null,"focusPercentY":null,"alt":"3-part chart explaining the benefit of alignment, simplicity and relevance"},"Paragraph:1c3ba994f1cd_22":{"__typename":"Paragraph","id":"1c3ba994f1cd_22","name":"f8a6","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*J5s8NbBVYGVWkjdrNQ4I9g.png"},"text":"Design systemization offers more than just speed and efficiency; they enhance brand value by increasing customer satisfaction. Infographic by the author.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":126,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_23":{"__typename":"Paragraph","id":"1c3ba994f1cd_23","name":"b960","type":"H4","href":null,"layout":null,"metadata":null,"text":"The Emergence of Prototyping and Collaboration Tools","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_24":{"__typename":"Paragraph","id":"1c3ba994f1cd_24","name":"4571","type":"P","href":null,"layout":null,"metadata":null,"text":"By 2016, new tools and platforms for prototyping and collaboration began to gain prominence, radically transforming how teams worked together. Gone were the days of exchanging heavy design files that slowed down workflows and introduced countless QA issues. In their place, high-fidelity HTML prototypes, code repositories, and frameworks, bundled with productivity-boosting features, allowed projects to scale faster and better with fewer risks.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_25":{"__typename":"Paragraph","id":"1c3ba994f1cd_25","name":"28d6","type":"P","href":null,"layout":null,"metadata":null,"text":"InVision, when combined with Sketch, became the leading tool for design handoff by 2017, establishing itself as the source of truth for prototypes. However, even with these advances, the tools themselves were often susceptible to glitches from human error. While Sketch and InVision made handoffs more efficient, it didn’t fully resolve the age-old tension between design intent and development execution. Getting a project through review cycles faster was one thing — ensuring consistency between design and code was another challenge entirely.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_26":{"__typename":"Paragraph","id":"1c3ba994f1cd_26","name":"ed64","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Tools like InVision and Sketch significantly improved collaboration between design and development teams, but the challenge of seamless design-to-code execution remained.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":184,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_27":{"__typename":"Paragraph","id":"1c3ba994f1cd_27","name":"fb85","type":"H4","href":null,"layout":null,"metadata":null,"text":"Breaking Free from the Print Mindset: A New Digital Workflow","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_28":{"__typename":"Paragraph","id":"1c3ba994f1cd_28","name":"d54b","type":"P","href":null,"layout":null,"metadata":null,"text":"Despite all these technological advancements, many designers were still stuck in a print mindset. For decades, documents were thought of as static pages, and screen technology was still evolving. Even in 2016, designers were printing out layouts and pinning them to walls for review. It wasn’t until platforms like Material Design, Storybook, and Zeroheight became widely adopted that product teams began to shift toward truly digital-first workflows.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":315,"end":330,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":332,"end":341,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":347,"end":357,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_29":{"__typename":"Paragraph","id":"1c3ba994f1cd_29","name":"c20b","type":"P","href":null,"layout":null,"metadata":null,"text":"Around this time, Brad Frost’s 2016 book “Atomic Design” played a key role in documenting and standardizing the practice of design systems 1.0. Frost outlined the approach that broke down complex interfaces into reusable components—atoms, molecules, and organisms—that could be systematically applied across projects. This standardization of practice was sorely needed at the time, when (to be brutally honest) design as a practice did not have much influence in many organizations—UI design was typically undervalued as a “cosmetic” aspect of product engineering.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":42,"end":55,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_30":{"__typename":"Paragraph","id":"1c3ba994f1cd_30","name":"a5f9","type":"P","href":null,"layout":null,"metadata":null,"text":"The fundamentals outlined in his book still serve as essential reading for anyone looking to understand the design systems of today. Atomic Design provided a framework that helped teams transition from static, page-based thinking to component-based systems, laying the groundwork for the design systems revolution.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":133,"end":146,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_31":{"__typename":"Paragraph","id":"1c3ba994f1cd_31","name":"c60b","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Brad Frost’s Atomic Design provided the much-needed structure for design systems to evolve from static style guides to scalable, reusable components, helping organizations reach consensus on digital-first project workflows.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":237,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":27,"end":40,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_32":{"__typename":"Paragraph","id":"1c3ba994f1cd_32","name":"141c","type":"H3","href":null,"layout":null,"metadata":null,"text":"The rise of platforms","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_33":{"__typename":"Paragraph","id":"1c3ba994f1cd_33","name":"ce77","type":"P","href":null,"layout":null,"metadata":null,"text":"As digital tools evolved, a seismic shift in how businesses—particularly small and medium-sized enterprises (SMBs)—approached their digital strategies began to take place. Central to this shift was the idea of platforms not merely as a support tool but as the core of the product offering itself, by managing content independently, commonly referred to as a content management system (CMS). Companies recognized that establishing direct control and autonomy over their digital ecosystems, rather than relying on third-party managed solutions, could give them a competitive edge in the marketplace.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_34":{"__typename":"Paragraph","id":"1c3ba994f1cd_34","name":"c8b8","type":"H4","href":null,"layout":null,"metadata":null,"text":"Low-code and no-code: expanding accessibility","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_35":{"__typename":"Paragraph","id":"1c3ba994f1cd_35","name":"033b","type":"P","href":null,"layout":null,"metadata":null,"text":"The rise of low-code and no-code platforms continued to change the landscape. Platforms like Wix and Shopify blurred the lines between ease of use and customization, offering more flexibility than WordPress and without requiring full-blown development skills. No-code platforms allow users to build websites, applications, and even complex workflows using visual interfaces, empowering non-developers to create what was once the domain of experienced engineers.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":12,"end":20,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":25,"end":32,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":93,"end":96,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":101,"end":108,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_36":{"__typename":"Paragraph","id":"1c3ba994f1cd_36","name":"7c41","type":"P","href":null,"layout":null,"metadata":null,"text":"For many SMBs, these low-code and no-code platforms presented a middle ground between fully custom solutions and traditional website builders. They allowed businesses to maintain a level of control and flexibility without the need to invest in expensive engineering teams. This opened up new opportunities for small-scale e-commerce ventures, personal branding sites, and community-driven platforms.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_37":{"__typename":"Paragraph","id":"1c3ba994f1cd_37","name":"fb93","type":"P","href":null,"layout":null,"metadata":null,"text":"However, as companies grew, many began realizing the benefits of having complete platform autonomy, especially for scalability and unique, brand-specific experiences. Having full technical control means maintaining independence over every interaction, design choice, and user journey. This capability, once exclusive to enterprises with extensive technical resources, became accessible to more businesses with the rise of developer-focused tools and frameworks.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_38":{"__typename":"Paragraph","id":"1c3ba994f1cd_38","name":"dd6a","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: While no-code solutions provide an entry point, fully custom, scalable digital ecosystems allow businesses to maintain complete platform independence and control.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":176,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_39":{"__typename":"Paragraph","id":"1c3ba994f1cd_39","name":"7646","type":"H4","href":null,"layout":null,"metadata":null,"text":"Conventional platforms for business and publishing","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_40":{"__typename":"Paragraph","id":"1c3ba994f1cd_40","name":"66af","type":"P","href":null,"layout":null,"metadata":null,"text":"Despite the rise of low-code and no-code platforms, many enterprises still rely on traditional platforms like Drupal and Sitecore for large-scale projects. These content management systems (CMS) offer high customization but require more technical expertise. They are favored for projects needing advanced security, multi-language support, and complex user roles, especially for organizations with strong IT resources.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_41":{"__typename":"Paragraph","id":"1c3ba994f1cd_41","name":"440b","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Traditional CMS platforms remain essential for enterprises with complex needs, offering greater customization and security.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":137,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_42":{"__typename":"Paragraph","id":"1c3ba994f1cd_42","name":"7628","type":"H4","href":null,"layout":null,"metadata":null,"text":"Social Media: A platform within platforms","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_43":{"__typename":"Paragraph","id":"1c3ba994f1cd_43","name":"df2f","type":"P","href":null,"layout":null,"metadata":null,"text":"Social media platforms like Facebook, Instagram, and LinkedIn allow businesses to engage massive audiences without their own website, offering built-in solutions for e-commerce and community engagement. However, these platforms limit control over content and data. Most businesses use a hybrid approach, leveraging social media’s reach while maintaining independence through their own self-managed digital platforms for a more consistent brand experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_44":{"__typename":"Paragraph","id":"1c3ba994f1cd_44","name":"0d54","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: A hybrid approach combines the reach of social media with the autonomy of maintaining a self-managed digital platform.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":132,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_45":{"__typename":"Paragraph","id":"1c3ba994f1cd_45","name":"5033","type":"H4","href":null,"layout":null,"metadata":null,"text":"Salesforce: Bridging low-code and conventional development","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_46":{"__typename":"Paragraph","id":"1c3ba994f1cd_46","name":"9e05","type":"P","href":null,"layout":null,"metadata":null,"text":"Salesforce bridges the gap between low-code and conventional development. Its Lightning platform allows non-developers to create apps and automate processes, while its Apex programming language offers more advanced customization for businesses needing more control. Salesforce’s flexibility, combined with its AppExchange marketplace, makes it a powerful tool for businesses to scale while maintaining operational control.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_47":{"__typename":"Paragraph","id":"1c3ba994f1cd_47","name":"45c0","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Salesforce’s low-code solutions allow businesses to scale quickly while offering advanced customization options for future growth.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":144,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_48":{"__typename":"Paragraph","id":"1c3ba994f1cd_48","name":"41db","type":"H4","href":null,"layout":null,"metadata":null,"text":"Platforms as business enablers","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_49":{"__typename":"Paragraph","id":"1c3ba994f1cd_49","name":"ca5f","type":"P","href":null,"layout":null,"metadata":null,"text":"Choosing the right platform has become one of the most important decisions for businesses in the digital age. Whether it’s a CMS for content publishing, an e-commerce platform for retail, or a no-code tool for custom workflows, the platform is now an enabler of business transformation. Companies that have direct governance over their platforms and are able to adapt to changing user demands will have a competitive advantage in a digital-first world.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_50":{"__typename":"Paragraph","id":"1c3ba994f1cd_50","name":"96a4","type":"H3","href":null,"layout":null,"metadata":null,"text":"Figma: The game-changer in design platforms","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_51":{"__typename":"Paragraph","id":"1c3ba994f1cd_51","name":"4820","type":"P","href":null,"layout":null,"metadata":null,"text":"The rise of Figma as a game-changer in design systems has been well-documented. One of the core reasons for its success was its all-in-one platform approach. While Sketch and InVision had their strengths, their bifurcated system created gaps in the design-to-development handoff, leading to friction between teams. Figma resolved these issues by consolidating design, prototyping, and collaboration features into a single platform, offering real-time, multi-user interfaces that brought designers, engineers, and other stakeholders together in unprecedented ways.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_52":{"__typename":"Paragraph","id":"1c3ba994f1cd_52","name":"6ac1","type":"P","href":null,"layout":null,"metadata":null,"text":"This shift was more than just an advancement in design technology; it was an industry-wide transformation. By enabling real-time collaboration across disciplines, Figma turned design into a “multiplayer game,” setting a new standard for speed, quality, and teamwork. It quickly displaced Sketch and InVision as the preferred tool for UI and UX design and became a serious rival to Adobe XD, which, despite being part of the larger Adobe Creative Cloud ecosystem, couldn’t keep pace with Figma’s user-friendly, cloud-native architecture.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_53":{"__typename":"Paragraph","id":"1c3ba994f1cd_53","name":"6748","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Figma’s rise marked a critical inflection point in design systems — moving from fragmented workflows to unified, collaborative platforms that meet the fast-paced demands of modern design teams.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":207,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_54":{"__typename":"Paragraph","id":"1c3ba994f1cd_54","name":"77d5","type":"H3","href":null,"layout":null,"metadata":null,"text":"Adobe Experience Manager and the evolution of design platforms","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_55":{"__typename":"Paragraph","id":"1c3ba994f1cd_55","name":"f578","type":"P","href":null,"layout":null,"metadata":null,"text":"While Figma was disrupting the design world, Adobe Experience Manager (AEM) established itself as best-in-class for content management systems (CMS). Before AEM, SiteCore led the market in CMS platforms. But AEM’s game-changing product, with faster workflows and Dynamic Media, Adobe’s digital asset management system (DAM), set a new benchmark for power and efficiency.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":45,"end":69,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":263,"end":276,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_56":{"__typename":"Paragraph","id":"1c3ba994f1cd_56","name":"333f","type":"P","href":null,"layout":null,"metadata":null,"text":"The deep integration with Adobe Creative Cloud gave design professionals an entirely holistic way to manage content and creative assets. However, Adobe’s digital design tool, Adobe XD, failed to achieve market dominance as Figma became the standard. This was further impacted by Adobe’s failed attempt to acquire Figma in 2023.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":175,"end":184,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_57":{"__typename":"Paragraph","id":"1c3ba994f1cd_57","name":"2391","type":"P","href":null,"layout":null,"metadata":null,"text":"Despite this setback, Adobe also introduced Adobe Workfront, a project management tool that fits right into Create Suite, allowing teams to plan projects, manage resources, and track progress within the Adobe ecosystem. When used with other Adobe tools, Workfront could become a serious competitor to other project management software, offering creative teams a transformative method of integrating and streamlining systems for design and development.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":44,"end":59,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_58":{"__typename":"Paragraph","id":"1c3ba994f1cd_58","name":"bb96","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: AEM became the leader in CMS by integrating smoothly into Adobe’s ecosystem, but its UI design tool, Adobe XD, failed to achieve the same dominance in a design landscape shaped by Figma’s innovations.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":214,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_59":{"__typename":"Paragraph","id":"1c3ba994f1cd_59","name":"7704","type":"H3","href":null,"layout":null,"metadata":null,"text":"The COVID-19 impact: digital platform adoption surges","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_60":{"__typename":"Paragraph","id":"1c3ba994f1cd_60","name":"1ed9","type":"P","href":null,"layout":null,"metadata":null,"text":"The COVID-19 pandemic was a pivotal moment for digital platform adoption. As businesses worldwide shifted to remote work, tools for real-time collaboration became essential. Platforms like Slack, Zoom and Microsoft Teams saw explosive growth, quickly becoming the go-to solutions for virtual meetings and team collaboration. Atlassian’s suite of tools also gained traction, facilitating teamwork across distributed teams, while creative collaboration platforms like Mural and Miro proliferated, offering virtual whiteboard capabilities that enabled remote brainstorming sessions.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":189,"end":194,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":196,"end":200,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":205,"end":220,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":325,"end":334,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":466,"end":471,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":476,"end":480,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_61":{"__typename":"Paragraph","id":"1c3ba994f1cd_61","name":"9a18","type":"P","href":null,"layout":null,"metadata":null,"text":"Cloud adoption, which was already accelerating, surged as companies scrambled to ensure their systems could support a global workforce operating from home. The near-global work-from-home (WFH) experiment wasn’t just sustainable — it thrived. Businesses realized they could tap into a wider pool of talent, assembling teams not based on geography but on skill sets, and working even more effectively in a remote, multiplayer fashion.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_62":{"__typename":"Paragraph","id":"1c3ba994f1cd_62","name":"ec38","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: The pandemic accelerated the adoption of digital platforms and transformed remote work into a lasting model, enabling businesses to collaborate seamlessly in real time, regardless of physical location.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":215,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_63":{"__typename":"Paragraph","id":"1c3ba994f1cd_63","name":"e40d","type":"H3","href":null,"layout":null,"metadata":null,"text":"Figma’s continuous innovation: from design to whiteboard","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_64":{"__typename":"Paragraph","id":"1c3ba994f1cd_64","name":"7b25","type":"P","href":null,"layout":null,"metadata":null,"text":"Figma didn’t stop at revolutionizing UI design. In response to the growing demand for real-time, collaborative tools, Figma introduced FigJam, a whiteboard platform designed to make brainstorming and ideation accessible to all, not just designers. With its intuitive interface, FigJam democratized collaboration, allowing entire teams — from marketers to developers — to contribute to the design process.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_65":{"__typename":"Paragraph","id":"1c3ba994f1cd_65","name":"6b22","type":"P","href":null,"layout":null,"metadata":null,"text":"Figma’s ease of adoption made it the de facto tool for not just design teams but entire organizations. It became a hub where research, insights, audits, analytics, and design could all live in one place, enhancing the efficiency and reusability of team assets. This elevated Figma’s position as the leading aggregator of design truth, consolidating its hold on the market and positioning itself as a rival to platforms like Mural and Miro.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_66":{"__typename":"Paragraph","id":"1c3ba994f1cd_66","name":"b48d","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Figma’s continuous innovation, including the introduction of FigJam, expanded its role from a UI design tool to a comprehensive platform for team collaboration, further entrenching its dominance in the design space.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":229,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_67":{"__typename":"Paragraph","id":"1c3ba994f1cd_67","name":"e52b","type":"H3","href":null,"layout":null,"metadata":null,"text":"Platform maturity and the rise of developer kits","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_68":{"__typename":"Paragraph","id":"1c3ba994f1cd_68","name":"bb9b","type":"P","href":null,"layout":null,"metadata":null,"text":"As design platforms matured, so did the need for seamless integration between design and development. Figma’s introduction of Variables in 2021, which replaced Styles, was a key innovation in this regard.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":126,"end":135,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_69":{"__typename":"Paragraph","id":"1c3ba994f1cd_69","name":"d13c","type":"P","href":null,"layout":null,"metadata":null,"text":"Variables allowed designers to tokenize brand attributes, making it easier to sync with developer kits such as Material Design or others, depending on the platform. Synchronizing design and developer kits empower Figma to manage dynamic content and themes, such as dark and light modes or multi-brand systems. This tokenization was a major productivity boost, enabling designers and developers to control the appearance of user interfaces in real time — directly syncing design files with develop API’s.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":111,"end":126,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":453,"end":502,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":453,"end":502,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_70":{"__typename":"Paragraph","id":"1c3ba994f1cd_70","name":"952e","type":"P","href":null,"layout":null,"metadata":null,"text":"Since the advent of desktop publishing for digital media, this has been the holy grail of design and dev integration. An style guide for a brand can be compressed into a single sheet of data managed efficiently by Figma, and hosted live. UI changes can be done in the background, completely detached from front end work.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_71":{"__typename":"Paragraph","id":"1c3ba994f1cd_71","name":"336a","type":"P","href":null,"layout":null,"metadata":null,"text":"What’s more, developer kits enable Figma to model higher level objects and components very precisely to the components used on CMS platforms, mimicking front end semantics and further strengthening Figma’s role as the source of truth for design.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_72":{"__typename":"Paragraph","id":"1c3ba994f1cd_72","name":"abb7","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Developer Kits and Design Kits have become essential for modern design systems, enabling frictionless collaboration between design and development teams, with Figma leading the charge in innovation and ease of use.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":228,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*13KI9dw4Do_oevIkjiOJ4A.png":{"__typename":"ImageMetadata","id":"1*13KI9dw4Do_oevIkjiOJ4A.png","originalHeight":1756,"originalWidth":3200,"focusPercentX":null,"focusPercentY":null,"alt":"a side-to side comparison of static and dynamic design systems"},"Paragraph:1c3ba994f1cd_73":{"__typename":"Paragraph","id":"1c3ba994f1cd_73","name":"71ed","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*13KI9dw4Do_oevIkjiOJ4A.png"},"text":"Dynamic design systems manage UI design as the managed base of an organization’s technology stack, enabling more extensibility for automated experiences. Infographic created by author","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":154,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_74":{"__typename":"Paragraph","id":"1c3ba994f1cd_74","name":"3198","type":"H3","href":null,"layout":null,"metadata":null,"text":"Design Systems 2.0","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_75":{"__typename":"Paragraph","id":"1c3ba994f1cd_75","name":"6fe8","type":"P","href":null,"layout":null,"metadata":null,"text":"The recent advances in Figma have transformed how design patterns are built, moving away from static, disjointed structures to dynamic, white-label products that are highly customizable—ushering in what we can call Design Systems 2.0. Not to be confused with design templates, a dynamic design system is not locked into pre-set visuals or rigid components but rather, variables assigned to UX patterns. The only standardized element is the underlying code structure, allowing for endless flexibility in how the design itself evolves.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":136,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":266,"end":275,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":294,"end":300,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_76":{"__typename":"Paragraph","id":"1c3ba994f1cd_76","name":"51d7","type":"H4","href":null,"layout":null,"metadata":null,"text":"Opportunities for automation","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_77":{"__typename":"Paragraph","id":"1c3ba994f1cd_77","name":"8630","type":"P","href":null,"layout":null,"metadata":null,"text":"One of the greatest strengths of Design Systems 2.0 is the opportunity for automation. Dynamic systems can be integrated with code libraries and APIs to automate repetitive design tasks, such as updating UI elements across a platform in real time. For example, changes made to a button component in one part of the system can instantly propagate across every interface where that button is used. This not only reduces manual labor but also ensures consistency, speed, and accuracy in design updates across multiple touchpoints.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_78":{"__typename":"Paragraph","id":"1c3ba994f1cd_78","name":"4d0f","type":"H4","href":null,"layout":null,"metadata":null,"text":"Personalization at scale","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_79":{"__typename":"Paragraph","id":"1c3ba994f1cd_79","name":"370e","type":"P","href":null,"layout":null,"metadata":null,"text":"A dynamic design system also opens the door to advanced personalization, allowing brands to create custom experiences for individual users (or multiple brands). By integrating customer data, designers can programmatically adjust interface elements—such as color schemes, content layout, or product recommendations—based on a user’s accessibility requirements, preferences, or behavior. The standardized code structure ensures these personalized elements can be seamlessly integrated into the broader design framework without causing disruptions or inconsistencies.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_80":{"__typename":"Paragraph","id":"1c3ba994f1cd_80","name":"0b67","type":"H4","href":null,"layout":null,"metadata":null,"text":"A\u002FB testing made simple","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_81":{"__typename":"Paragraph","id":"1c3ba994f1cd_81","name":"d4c0","type":"P","href":null,"layout":null,"metadata":null,"text":"The flexibility of Design Systems 2.0 also makes A\u002FB testing far more efficient. Because design elements are modular and standardized at the code level, designers can quickly test multiple variations of a design without the need to create entirely new templates or assets. Teams can experiment with different design patterns and content strategies, then gather performance data and implement changes quickly. This approach can revolutionize iteration cycles, allowing businesses to quickly optimize their interfaces based on real user feedback.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_82":{"__typename":"Paragraph","id":"1c3ba994f1cd_82","name":"2b21","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Key Takeaway: Design Systems 2.0 enable automation, personalization, and A\u002FB testing at scale.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":94,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_83":{"__typename":"Paragraph","id":"1c3ba994f1cd_83","name":"aa0e","type":"P","href":null,"layout":null,"metadata":null,"text":"In summary, dynamic design systems not only allow for greater creativity and flexibility in how interfaces are crafted, but they also introduce new levels of efficiency and intelligence. As these systems continue to evolve, they will likely play a central role in how businesses create digital experiences that are more responsive, personalized, and data-driven than ever before.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_84":{"__typename":"Paragraph","id":"1c3ba994f1cd_84","name":"ccac","type":"H3","href":null,"layout":null,"metadata":null,"text":"A glimpse into the future of AI-driven design","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_85":{"__typename":"Paragraph","id":"1c3ba994f1cd_85","name":"f4ed","type":"P","href":null,"layout":null,"metadata":null,"text":"As we stand at the threshold of a new era in design systems, AI has the potential to fundamentally change how we think about digital design and development. As static design systems of yesterday are evolving into dynamic ecosystems, many of the manual processes of today will need to adapt to tomorrow’s AI-assisted workflows.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_86":{"__typename":"Paragraph","id":"1c3ba994f1cd_86","name":"c56b","type":"H4","href":null,"layout":null,"metadata":null,"text":"The Rise of Intelligent Design Operations","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_87":{"__typename":"Paragraph","id":"1c3ba994f1cd_87","name":"ec00","type":"P","href":null,"layout":null,"metadata":null,"text":"AI is set to make a big difference in the daily work of design teams. No longer will keeping designs consistent mean manual reviews and constant updates to documentation. AI will act as an active partner in the design process, both safeguarding and guiding—spotting inconsistencies and offering suggestions based on how components are used—and may even anticipate design needs before they come up.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_88":{"__typename":"Paragraph","id":"1c3ba994f1cd_88","name":"48ae","type":"P","href":null,"layout":null,"metadata":null,"text":"This shift is particularly powerful in large organizations where design systems must scale across multiple products and teams. AI assistants are becoming sophisticated enough to understand context, making them great partners in maintaining design integrity. They can identify when a component deviation is intentional innovation versus an accidental inconsistency, helping teams govern the balance between system compliance and creative freedom.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_89":{"__typename":"Paragraph","id":"1c3ba994f1cd_89","name":"c5cb","type":"H4","href":null,"layout":null,"metadata":null,"text":"Dynamic Adaptation and Personalization","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":38,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_90":{"__typename":"Paragraph","id":"1c3ba994f1cd_90","name":"8a0d","type":"P","href":null,"layout":null,"metadata":null,"text":"Perhaps the most transformative aspect of AI in design systems is its ability to enable truly dynamic experiences. Traditional design systems offered consistency through standardization — every user saw the same components in the same way. AI-enhanced design systems, however, can adapt in real-time to user needs, preferences, and contexts while maintaining brand coherence.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_91":{"__typename":"Paragraph","id":"1c3ba994f1cd_91","name":"01a6","type":"P","href":null,"layout":null,"metadata":null,"text":"This adaptation goes beyond simple responsive design. Perhaps one of the most exciting frontiers for dynamic design systems is the integration of agentive (autonomous) AI. AI-driven systems allow design elements to adjust on their own in real time, based on user needs or business goals. For example, AI can study how users interact with a website and make automatic design changes to improve ease of use or increase sales. Agentive AI could even generate entirely new design patterns based on predictive models, further automating the design process and unlocking new levels of personalization and performance optimization.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_92":{"__typename":"Paragraph","id":"1c3ba994f1cd_92","name":"dc2b","type":"P","href":null,"layout":null,"metadata":null,"text":"Imagine components that automatically adjust their complexity based on user expertise or navigation systems that reorganize themselves based on usage patterns. Color schemes might subtly shift based on time of day or user behavior while maintaining accessibility standards. Typography could dynamically adjust for optimal readability based on viewing conditions and user characteristics.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_93":{"__typename":"Paragraph","id":"1c3ba994f1cd_93","name":"86e5","type":"H4","href":null,"layout":null,"metadata":null,"text":"The Designer’s Evolution","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_94":{"__typename":"Paragraph","id":"1c3ba994f1cd_94","name":"15ea","type":"P","href":null,"layout":null,"metadata":null,"text":"This technological leap is catalyzing a profound evolution in the role of designers. Rather than focusing solely on creating static components, designers are becoming system architects and AI collaborators. They’re developing skills in prompt engineering — the art of guiding AI to generate appropriate design variations. They’re learning to create not just components but component generation rules that AI can follow to maintain brand integrity across limitless variations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_95":{"__typename":"Paragraph","id":"1c3ba994f1cd_95","name":"a6e3","type":"P","href":null,"layout":null,"metadata":null,"text":"The relationship between designers and developers is also being redefined. AI is beginning to serve as a translator between design intent and technical implementation, suggesting optimal code patterns for design decisions and flagging potential implementation challenges before they arise. This is creating a more fluid, collaborative environment where the traditional handoff between design and development becomes a continuous conversation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_96":{"__typename":"Paragraph","id":"1c3ba994f1cd_96","name":"7995","type":"H4","href":null,"layout":null,"metadata":null,"text":"Ethical Design at Scale","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_97":{"__typename":"Paragraph","id":"1c3ba994f1cd_97","name":"8793","type":"P","href":null,"layout":null,"metadata":null,"text":"As AI becomes more integrated into design systems, new ethical issues arise. For instance, how do we ensure AI-driven personalization won’t create discriminatory experiences? How do we maintain transparency about which aspects of a user’s experience are AI-influenced? These questions should compel organizations to develop new frameworks for ethical AI design principles.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_98":{"__typename":"Paragraph","id":"1c3ba994f1cd_98","name":"73f2","type":"H4","href":null,"layout":null,"metadata":null,"text":"The Future Design Canvas","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_99":{"__typename":"Paragraph","id":"1c3ba994f1cd_99","name":"900b","type":"P","href":null,"layout":null,"metadata":null,"text":"We’re moving toward design systems that are less like static libraries and more like collaborative AI partners. They’ll not only manage and maintain design assets but actively participate in the creative process. They’ll analyze user interactions, suggest improvements, and even predict future design needs based on emerging trends and user behaviors.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_100":{"__typename":"Paragraph","id":"1c3ba994f1cd_100","name":"25fd","type":"P","href":null,"layout":null,"metadata":null,"text":"Success will come not from having the most components or the strictest guidelines, but from creating the most intelligent and adaptable design systems. Teams will need to become comfortable with systems that learn and evolve while ensuring they remain anchored to core brand values and user needs.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_101":{"__typename":"Paragraph","id":"1c3ba994f1cd_101","name":"6c81","type":"P","href":null,"layout":null,"metadata":null,"text":"Integrating AI into design systems brings incredible potential but also real challenges. Organizations will need to balance quality control, skill-building, and ethical concerns while keeping the human element that makes design meaningful. The goal isn’t to let AI replace human creativity but to use it as a tool to amplify it, supporting rather than fully automating design choices.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_102":{"__typename":"Paragraph","id":"1c3ba994f1cd_102","name":"e708","type":"P","href":null,"layout":null,"metadata":null,"text":"Going forward, the most successful organizations will treat AI as a way to evolve traditional design systems, not replace them; these new workflows unlock a fresh level of creativity, allowing designers to focus on crafting experiences that feel personal and engaging. With AI managing routine tasks, designers can bring a new depth to the user experience, making it more dynamic, relevant, and genuinely human-centered.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_103":{"__typename":"Paragraph","id":"1c3ba994f1cd_103","name":"440e","type":"H4","href":null,"layout":null,"metadata":null,"text":"Key Business Challenges","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":23,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_104":{"__typename":"Paragraph","id":"1c3ba994f1cd_104","name":"6cdc","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Legacy Systems: Many organizations still rely on outdated infrastructures that are not compatible with modern, dynamic design systems. Overcoming these technical barriers and replacing legacy systems with more modern frameworks will be critical for businesses aiming to innovate and stay competitive.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":14,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_105":{"__typename":"Paragraph","id":"1c3ba994f1cd_105","name":"41d5","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Internal Governance: As design systems become central to business operations, internal governance will of design will be a significant factor. Maintaining consistency across teams will ensure that dynamic systems function properly. Organizations must develop clear standards and processes to avoid fragmented design efforts and maintain quality at scale.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":19,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_106":{"__typename":"Paragraph","id":"1c3ba994f1cd_106","name":"c7b4","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Shifting Skill Sets: The rise of dynamic design systems will require shifts in skill sets across design and development teams. Designers will need to become more comfortable with data, automation, and real-time interfaces, while developers will need a deeper understanding of design workflows. Upskilling teams to navigate this evolving landscape will be a crucial factor for future success.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":19,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_107":{"__typename":"Paragraph","id":"1c3ba994f1cd_107","name":"c1d5","type":"H3","href":null,"layout":null,"metadata":null,"text":"A New Publishing Mindset","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_108":{"__typename":"Paragraph","id":"1c3ba994f1cd_108","name":"f6af","type":"P","href":null,"layout":null,"metadata":null,"text":"As design systems evolve, so too does the mindset around publishing. Content is no longer seen as static or fixed; instead, it is becoming more fluid, dynamic, and responsive to changing contexts. Modern publishing will become increasingly situational and conversational, adapting to user interactions, environments, and real-time data. This shift requires organizations to think beyond traditional paradigms and embrace more flexible approaches that allow content and design to evolve together.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_109":{"__typename":"Paragraph","id":"1c3ba994f1cd_109","name":"9319","type":"H4","href":null,"layout":null,"metadata":null,"text":"Looking Ahead","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:1c3ba994f1cd_110":{"__typename":"Paragraph","id":"1c3ba994f1cd_110","name":"1f50","type":"P","href":null,"layout":null,"metadata":null,"text":"As organizations continue to push the boundaries of what design systems can achieve, the lessons learned from past innovations will be invaluable. Businesses that can embrace these new mindsets — where publishing is more dynamic, design is more integrated, and teams are more collaborative — will thrive in this evolving landscape.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_111":{"__typename":"Paragraph","id":"1c3ba994f1cd_111","name":"087b","type":"P","href":null,"layout":null,"metadata":null,"text":"Thank you for reading, and please let me know your thoughts in the comments below. And for more context, please refer to the first part of this series, which looks back at much earlier early design systems to reveal insights:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1c3ba994f1cd_112":{"__typename":"Paragraph","id":"1c3ba994f1cd_112","name":"a360","type":"H4","href":null,"layout":null,"metadata":null,"text":"A Very Brief History of Design Systems, Part 1","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":46,"href":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-very-brief-history-of-design-systems-part-1-d661a7c70002","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"PostViewerEdge:postId:fb00a7af7985-viewerId:lo_e7ddf632ba49":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:fb00a7af7985-viewerId:lo_e7ddf632ba49"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:design-process":{"__typename":"Tag","id":"design-process","displayTitle":"Design Process","normalizedTagSlug":"design-process"},"Tag:design-evolution":{"__typename":"Tag","id":"design-evolution","displayTitle":"Design Evolution","normalizedTagSlug":"design-evolution"},"Tag:design-methodology":{"__typename":"Tag","id":"design-methodology","displayTitle":"Design Methodology","normalizedTagSlug":"design-methodology"},"Tag:history-of-technology":{"__typename":"Tag","id":"history-of-technology","displayTitle":"History Of Technology","normalizedTagSlug":"history-of-technology"},"Post:fb00a7af7985":{"__typename":"Post","id":"fb00a7af7985","collection":null,"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"8d59","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:1c3ba994f1cd_0"},{"__ref":"Paragraph:1c3ba994f1cd_1"},{"__ref":"Paragraph:1c3ba994f1cd_2"},{"__ref":"Paragraph:1c3ba994f1cd_3"},{"__ref":"Paragraph:1c3ba994f1cd_4"},{"__ref":"Paragraph:1c3ba994f1cd_5"},{"__ref":"Paragraph:1c3ba994f1cd_6"},{"__ref":"Paragraph:1c3ba994f1cd_7"},{"__ref":"Paragraph:1c3ba994f1cd_8"},{"__ref":"Paragraph:1c3ba994f1cd_9"},{"__ref":"Paragraph:1c3ba994f1cd_10"},{"__ref":"Paragraph:1c3ba994f1cd_11"},{"__ref":"Paragraph:1c3ba994f1cd_12"},{"__ref":"Paragraph:1c3ba994f1cd_13"},{"__ref":"Paragraph:1c3ba994f1cd_14"},{"__ref":"Paragraph:1c3ba994f1cd_15"},{"__ref":"Paragraph:1c3ba994f1cd_16"},{"__ref":"Paragraph:1c3ba994f1cd_17"},{"__ref":"Paragraph:1c3ba994f1cd_18"},{"__ref":"Paragraph:1c3ba994f1cd_19"},{"__ref":"Paragraph:1c3ba994f1cd_20"},{"__ref":"Paragraph:1c3ba994f1cd_21"},{"__ref":"Paragraph:1c3ba994f1cd_22"},{"__ref":"Paragraph:1c3ba994f1cd_23"},{"__ref":"Paragraph:1c3ba994f1cd_24"},{"__ref":"Paragraph:1c3ba994f1cd_25"},{"__ref":"Paragraph:1c3ba994f1cd_26"},{"__ref":"Paragraph:1c3ba994f1cd_27"},{"__ref":"Paragraph:1c3ba994f1cd_28"},{"__ref":"Paragraph:1c3ba994f1cd_29"},{"__ref":"Paragraph:1c3ba994f1cd_30"},{"__ref":"Paragraph:1c3ba994f1cd_31"},{"__ref":"Paragraph:1c3ba994f1cd_32"},{"__ref":"Paragraph:1c3ba994f1cd_33"},{"__ref":"Paragraph:1c3ba994f1cd_34"},{"__ref":"Paragraph:1c3ba994f1cd_35"},{"__ref":"Paragraph:1c3ba994f1cd_36"},{"__ref":"Paragraph:1c3ba994f1cd_37"},{"__ref":"Paragraph:1c3ba994f1cd_38"},{"__ref":"Paragraph:1c3ba994f1cd_39"},{"__ref":"Paragraph:1c3ba994f1cd_40"},{"__ref":"Paragraph:1c3ba994f1cd_41"},{"__ref":"Paragraph:1c3ba994f1cd_42"},{"__ref":"Paragraph:1c3ba994f1cd_43"},{"__ref":"Paragraph:1c3ba994f1cd_44"},{"__ref":"Paragraph:1c3ba994f1cd_45"},{"__ref":"Paragraph:1c3ba994f1cd_46"},{"__ref":"Paragraph:1c3ba994f1cd_47"},{"__ref":"Paragraph:1c3ba994f1cd_48"},{"__ref":"Paragraph:1c3ba994f1cd_49"},{"__ref":"Paragraph:1c3ba994f1cd_50"},{"__ref":"Paragraph:1c3ba994f1cd_51"},{"__ref":"Paragraph:1c3ba994f1cd_52"},{"__ref":"Paragraph:1c3ba994f1cd_53"},{"__ref":"Paragraph:1c3ba994f1cd_54"},{"__ref":"Paragraph:1c3ba994f1cd_55"},{"__ref":"Paragraph:1c3ba994f1cd_56"},{"__ref":"Paragraph:1c3ba994f1cd_57"},{"__ref":"Paragraph:1c3ba994f1cd_58"},{"__ref":"Paragraph:1c3ba994f1cd_59"},{"__ref":"Paragraph:1c3ba994f1cd_60"},{"__ref":"Paragraph:1c3ba994f1cd_61"},{"__ref":"Paragraph:1c3ba994f1cd_62"},{"__ref":"Paragraph:1c3ba994f1cd_63"},{"__ref":"Paragraph:1c3ba994f1cd_64"},{"__ref":"Paragraph:1c3ba994f1cd_65"},{"__ref":"Paragraph:1c3ba994f1cd_66"},{"__ref":"Paragraph:1c3ba994f1cd_67"},{"__ref":"Paragraph:1c3ba994f1cd_68"},{"__ref":"Paragraph:1c3ba994f1cd_69"},{"__ref":"Paragraph:1c3ba994f1cd_70"},{"__ref":"Paragraph:1c3ba994f1cd_71"},{"__ref":"Paragraph:1c3ba994f1cd_72"},{"__ref":"Paragraph:1c3ba994f1cd_73"},{"__ref":"Paragraph:1c3ba994f1cd_74"},{"__ref":"Paragraph:1c3ba994f1cd_75"},{"__ref":"Paragraph:1c3ba994f1cd_76"},{"__ref":"Paragraph:1c3ba994f1cd_77"},{"__ref":"Paragraph:1c3ba994f1cd_78"},{"__ref":"Paragraph:1c3ba994f1cd_79"},{"__ref":"Paragraph:1c3ba994f1cd_80"},{"__ref":"Paragraph:1c3ba994f1cd_81"},{"__ref":"Paragraph:1c3ba994f1cd_82"},{"__ref":"Paragraph:1c3ba994f1cd_83"},{"__ref":"Paragraph:1c3ba994f1cd_84"},{"__ref":"Paragraph:1c3ba994f1cd_85"},{"__ref":"Paragraph:1c3ba994f1cd_86"},{"__ref":"Paragraph:1c3ba994f1cd_87"},{"__ref":"Paragraph:1c3ba994f1cd_88"},{"__ref":"Paragraph:1c3ba994f1cd_89"},{"__ref":"Paragraph:1c3ba994f1cd_90"},{"__ref":"Paragraph:1c3ba994f1cd_91"},{"__ref":"Paragraph:1c3ba994f1cd_92"},{"__ref":"Paragraph:1c3ba994f1cd_93"},{"__ref":"Paragraph:1c3ba994f1cd_94"},{"__ref":"Paragraph:1c3ba994f1cd_95"},{"__ref":"Paragraph:1c3ba994f1cd_96"},{"__ref":"Paragraph:1c3ba994f1cd_97"},{"__ref":"Paragraph:1c3ba994f1cd_98"},{"__ref":"Paragraph:1c3ba994f1cd_99"},{"__ref":"Paragraph:1c3ba994f1cd_100"},{"__ref":"Paragraph:1c3ba994f1cd_101"},{"__ref":"Paragraph:1c3ba994f1cd_102"},{"__ref":"Paragraph:1c3ba994f1cd_103"},{"__ref":"Paragraph:1c3ba994f1cd_104"},{"__ref":"Paragraph:1c3ba994f1cd_105"},{"__ref":"Paragraph:1c3ba994f1cd_106"},{"__ref":"Paragraph:1c3ba994f1cd_107"},{"__ref":"Paragraph:1c3ba994f1cd_108"},{"__ref":"Paragraph:1c3ba994f1cd_109"},{"__ref":"Paragraph:1c3ba994f1cd_110"},{"__ref":"Paragraph:1c3ba994f1cd_111"},{"__ref":"Paragraph:1c3ba994f1cd_112"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:9783fdfdbb51"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-brief-history-of-design-systems-part-2-fb00a7af7985","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"design"}],"isPublished":true,"latestPublishedVersion":"1c3ba994f1cd","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":3},"clapCount":135,"allowResponses":true,"isLimitedState":false,"title":"A Brief History of Design Systems, Part 2","isSeries":false,"sequence":null,"uniqueSlug":"a-brief-history-of-design-systems-part-2-fb00a7af7985","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1730734023790,"readingTime":17.466037735849056,"previewContent":{"__typename":"PreviewContent","subtitle":"From Atomic Design to AI-Driven Systems: Understanding the Evolution and Adoption Patterns of Modern UX Frameworks."},"previewImage":{"__ref":"ImageMetadata:1*3YWsm9ITdrsLVhYkGAQCFw.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1729360192460,"updatedAt":1731623057940,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:fb00a7af7985-viewerId:lo_e7ddf632ba49"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:design-systems"},{"__ref":"Tag:design-process"},{"__ref":"Tag:design-evolution"},{"__ref":"Tag:design-methodology"},{"__ref":"Tag:history-of-technology"}],"isNewsletter":false,"statusForCollection":null,"pendingCollection":null,"detectedLanguage":"en","wordCount":4443,"layerCake":6,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"MISS"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.aa9242f7.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.e556b4ac.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.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/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.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/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.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.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3104.c3413b66.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.8ad8a900.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.21ff89d3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.094844de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.1387c5dc.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.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.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.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:'8e8fff0b8f95ce7a',t:'MTczMjY4ODI1OC4wMDAwMDA='};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>