CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">A Brief History of Design Systems, Part 1 | 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-04T16:09:32.312Z"/><meta data-rh="true" name="title" content="A Brief History of Design Systems, Part 1 | by Jim Gulsen | Oct, 2024 | Medium"/><meta data-rh="true" property="og:title" content="A Brief History of Design Systems, Part 1"/><meta data-rh="true" property="al:android:url" content="medium://p/d661a7c70002"/><meta data-rh="true" property="al:ios:url" content="medium://p/d661a7c70002"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="In our modern digital era, the term design system is primarily associated with user interface (UI) development. It describes a structured set of components, guidelines, tools, etc. used to deliver…"/><meta data-rh="true" property="og:description" content="Looking back at early design systems can reveal timeless insights to inform today’s digital transformations"/><meta data-rh="true" property="og:url" content="https://medium.com/@jgulsen_97727/a-very-brief-history-of-design-systems-part-1-d661a7c70002"/><meta data-rh="true" property="al:web:url" content="https://medium.com/@jgulsen_97727/a-very-brief-history-of-design-systems-part-1-d661a7c70002"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*r14fAfrEC-qfvhcYZAUqGw.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 1"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/d661a7c70002"/><meta data-rh="true" property="twitter:description" content="Looking back at early design systems can reveal timeless insights to inform today’s digital transformations"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*r14fAfrEC-qfvhcYZAUqGw.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="16 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-very-brief-history-of-design-systems-part-1-d661a7c70002"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/d661a7c70002"/><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*r14fAfrEC-qfvhcYZAUqGw.png"],"url":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-very-brief-history-of-design-systems-part-1-d661a7c70002","dateCreated":"2024-10-17T19:11:09.364Z","datePublished":"2024-10-17T19:11:09.364Z","dateModified":"2024-11-15T00:03:06.874Z","headline":"A Brief History of Design Systems, Part 1 - Jim Gulsen - Medium","name":"A Brief History of Design Systems, Part 1 - Jim Gulsen - Medium","description":"In our modern digital era, the term design system is primarily associated with user interface (UI) development. It describes a structured set of components, guidelines, tools, etc. used to deliver…","identifier":"d661a7c70002","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-very-brief-history-of-design-systems-part-1-d661a7c70002"}</script><style type="text/css" data-fela-rehydration="560" 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="560" 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="560" 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.12}.nm{letter-spacing:-0.022em}.nn{font-weight:600}.og{margin-bottom:-0.28em}.oh{line-height:1.58}.oi{letter-spacing:-0.004em}.oj{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.pc{margin-bottom:-0.46em}.pd{font-style:italic}.pj{max-width:1600px}.pk{font-style:inherit}.pl{box-shadow:inset 3px 0 0 0 #242424}.pm{padding-left:23px}.pn{margin-left:-20px}.po{max-width:844px}.pp{max-width:1440px}.pv{max-width:2507px}.pw{padding-top:5px}.px{padding-bottom:5px}.py{max-width:2560px}.pz{line-height:1.18}.qn{margin-bottom:-0.31em}.qo{text-decoration:underline}.qp{margin-bottom:26px}.qq{margin-top:6px}.qr{margin-top:8px}.qs{margin-right:8px}.qt{padding:8px 16px}.qu{border-radius:100px}.qv{transition:background 300ms ease}.qx{white-space:nowrap}.qy{border-top:none}.qz{margin-bottom:14px}.ra{height:52px}.rb{max-height:52px}.rc{box-sizing:content-box}.rd{position:static}.re{z-index:1}.rg{max-width:155px}.rm{margin-right:20px}.rs{height:0px}.rt{margin-bottom:40px}.si{height:64px}.sj{width:64px}.sk{align-self:flex-end}.sl{color:rgba(255, 255, 255, 1)}.sm{fill:rgba(255, 255, 255, 1)}.sn{background:rgba(25, 25, 25, 1)}.so{border-color:rgba(25, 25, 25, 1)}.sr:disabled{opacity:0.1}.ss:disabled:hover{background:rgba(25, 25, 25, 1)}.st:disabled:hover{border-color:rgba(25, 25, 25, 1)}.su{flex:1 1 auto}.sy{padding-right:4px}.sz{font-weight:500}.tg{white-space:pre-wrap}.th{margin-top:16px}.tq{gap:18px}.tr{fill:rgba(61, 61, 61, 1)}.tt{margin-top:32px}.tu{fill:#242424}.tv{background:0}.tw{border-color:#242424}.tx:disabled:hover{color:#242424}.ty:disabled:hover{fill:#242424}.tz:disabled:hover{border-color:#242424}.uk{border-bottom:solid 1px #E5E5E5}.ul{margin-top:72px}.um{padding:24px 0}.un{margin-bottom:0px}.uo{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}.qw:hover{background-color:#F2F2F2}.sh:hover{background-color:none}.sp:hover{background:#000000}.sq:hover{border-color:#242424}.ts: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="560" 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:24px}.od{margin-top:1.95em}.oe{line-height:30px}.of{letter-spacing:-0.016em}.oy{font-size:20px}.oz{margin-top:0.94em}.pa{line-height:32px}.pb{letter-spacing:-0.003em}.pi{margin-top:2.14em}.pu{max-width:1192px}.qk{margin-top:1.72em}.ql{line-height:24px}.qm{letter-spacing:0}.rl{display:inline-block}.rr{margin-bottom:104px}.ru{flex-direction:row}.rx{margin-bottom:0}.ry{margin-right:20px}.sv{max-width:500px}.tm{margin-bottom:88px}.tp{margin-bottom:72px}.ue{width:min-width}.uj{padding-top:72px}</style><style type="text/css" data-fela-rehydration="560" 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}.rk{display:inline-block}</style><style type="text/css" data-fela-rehydration="560" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.li{margin-top:0px}.rj{display:inline-block}</style><style type="text/css" data-fela-rehydration="560" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lg{margin-top:0px}.lh{margin-right:0px}.ri{display:inline-block}</style><style type="text/css" data-fela-rehydration="560" 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{font-size:20px}.np{margin-top:1.2em}.nq{letter-spacing:0}.ok{margin-top:0.67em}.ol{line-height:28px}.om{letter-spacing:-0.003em}.pe{margin-top:1.56em}.pq{max-width:100%}.qa{font-size:16px}.qb{margin-top:1.23em}.rh{display:inline-block}.rn{margin-bottom:96px}.sf{margin-bottom:20px}.sg{margin-right:0}.ta{font-size:24px}.tb{line-height:30px}.tc{letter-spacing:-0.016em}.ti{margin-bottom:64px}.ua{width:100%}.uf{padding-top:48px}.mk:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="560" 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:24px}.nz{margin-top:1.95em}.oa{line-height:30px}.ob{letter-spacing:-0.016em}.ou{font-size:20px}.ov{margin-top:0.94em}.ow{line-height:32px}.ox{letter-spacing:-0.003em}.ph{margin-top:2.14em}.pt{max-width:1192px}.qh{margin-top:1.72em}.qi{line-height:24px}.qj{letter-spacing:0}.rq{margin-bottom:104px}.rv{flex-direction:row}.rz{margin-bottom:0}.sa{margin-right:20px}.sw{max-width:500px}.tl{margin-bottom:88px}.to{margin-bottom:72px}.ud{width:min-width}.ui{padding-top:72px}</style><style type="text/css" data-fela-rehydration="560" 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:24px}.nv{margin-top:1.95em}.nw{line-height:30px}.nx{letter-spacing:-0.016em}.oq{font-size:20px}.or{margin-top:0.94em}.os{line-height:32px}.ot{letter-spacing:-0.003em}.pg{margin-top:2.14em}.ps{max-width:100%}.qe{margin-top:1.72em}.qf{line-height:24px}.qg{letter-spacing:0}.rp{margin-bottom:104px}.rw{flex-direction:row}.sb{margin-bottom:0}.sc{margin-right:20px}.sx{max-width:500px}.tk{margin-bottom:88px}.tn{margin-bottom:72px}.uc{width:min-width}.uh{padding-top:72px}</style><style type="text/css" data-fela-rehydration="560" 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{font-size:20px}.ns{margin-top:1.2em}.nt{letter-spacing:0}.on{margin-top:0.67em}.oo{line-height:28px}.op{letter-spacing:-0.003em}.pf{margin-top:1.56em}.pr{max-width:100%}.qc{font-size:16px}.qd{margin-top:1.23em}.ro{margin-bottom:96px}.sd{margin-bottom:20px}.se{margin-right:0}.td{font-size:24px}.te{line-height:30px}.tf{letter-spacing:-0.016em}.tj{margin-bottom:64px}.ub{width:100%}.ug{padding-top:48px}.mr:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="560" data-fela-type="RULE" media="print">.rf{display:none}</style><style type="text/css" data-fela-rehydration="560" 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%2Fd661a7c70002&%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-very-brief-history-of-design-systems-part-1-d661a7c70002&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-very-brief-history-of-design-systems-part-1-d661a7c70002&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="d902" 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 1</h1></div><div><h2 id="6e80" 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">Looking back at early design systems can reveal timeless insights to inform today’s digital transformations</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--d661a7c70002--------------------------------"><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--d661a7c70002--------------------------------">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-very-brief-history-of-design-systems-part-1-d661a7c70002&user=Jim+Gulsen&userId=9783fdfdbb51&source=post_page-9783fdfdbb51--byline--d661a7c70002---------------------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">16 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 17, 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%2Fd661a7c70002&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-very-brief-history-of-design-systems-part-1-d661a7c70002&user=Jim+Gulsen&userId=9783fdfdbb51&source=---header_actions--d661a7c70002---------------------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">5</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%2Fd661a7c70002&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-very-brief-history-of-design-systems-part-1-d661a7c70002&source=---header_actions--d661a7c70002---------------------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*r14fAfrEC-qfvhcYZAUqGw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*r14fAfrEC-qfvhcYZAUqGw.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*r14fAfrEC-qfvhcYZAUqGw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*r14fAfrEC-qfvhcYZAUqGw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*r14fAfrEC-qfvhcYZAUqGw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*r14fAfrEC-qfvhcYZAUqGw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*r14fAfrEC-qfvhcYZAUqGw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*r14fAfrEC-qfvhcYZAUqGw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*r14fAfrEC-qfvhcYZAUqGw.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 generated by the author in Midjourney</figcaption></figure><h1 id="067d" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk"><strong class="al">The dawn of design systems</strong></h1><p id="173b" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">In our modern digital era, the term <em class="pd">design system</em> is primarily associated with user interface (UI) development. It describes a structured set of components, guidelines, tools, etc. used to deliver consistent digital experiences. But if we broaden the definition and apply it to history, “design systems," or <em class="pd">systematic design</em>—whether in architecture, publishing, or manufacturing—have been integral in driving human innovation since the dawn of time.</p><p id="293a" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">By looking at design systems through that broader historical perspective, we can literally draw upon centuries of data to better understand design’s influence on society—and draw parallels to today’s digital world.</p><p id="3708" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">One could argue that design systems date back to the Stone Age. From weaving baskets to crafting jewelry and textiles, prehistoric people mastered systematic thinking thousands of years ago, as evidenced by archaeological finds.</p><p id="ee9e" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Imagine what it was like, to produce textiles using ancient tools, by repeating patterns, using symmetry, balance, and proportion—principles that closely resemble early mathematics. Even without formal geometry, our ancestors applied structured thinking to their crafts, many years before civilization.</p><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 pj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*gFGQhTtspU3DJjega1w0Cg.jpeg 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*gFGQhTtspU3DJjega1w0Cg.jpeg 640w, https://miro.medium.com/v2/resize:fit:720/1*gFGQhTtspU3DJjega1w0Cg.jpeg 720w, https://miro.medium.com/v2/resize:fit:750/1*gFGQhTtspU3DJjega1w0Cg.jpeg 750w, https://miro.medium.com/v2/resize:fit:786/1*gFGQhTtspU3DJjega1w0Cg.jpeg 786w, https://miro.medium.com/v2/resize:fit:828/1*gFGQhTtspU3DJjega1w0Cg.jpeg 828w, https://miro.medium.com/v2/resize:fit:1100/1*gFGQhTtspU3DJjega1w0Cg.jpeg 1100w, https://miro.medium.com/v2/resize:fit:1400/1*gFGQhTtspU3DJjega1w0Cg.jpeg 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh ma ng c" width="700" height="513" loading="lazy" role="presentation"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf nn"><em class="pk">Women at a loom. From a tomb at Beni-Hassan, Egypt.</em></strong><em class="pk"> Source: </em>Georges Perrot, Creative Commons</figcaption></figure><p id="b214" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In many ways, these early designs were practical forms of problem-solving, blending art and logic to high levels of sophistication. Their processes, much like modern design systems, aimed to create consistency, order, and beauty, something we still strive to achieve today.</p><p id="7a53" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">I’ve come to realize that art often precedes science — because it involves solving problems in ways that aren’t immediately clear — or even fully understood — until the solution is found. It’s been said, “Art is solving problems that cannot be formulated before they have been solved. The shaping of the question is part of the answer.” (<em class="pd">Piet Hein</em>)</p><p id="057f" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The creative process itself is a form of problem-solving, where artists apply structure, proportion, and technique <em class="pd">using instincts</em> at first. Over time, this creative exploration often uncovers patterns, systems, and methods that later become formalized into scientific principles.</p><blockquote class="pl pm pn"><p id="4ee3" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeway #1 Art explores possibilities, and in doing so, it often discovers the very questions science later seeks to answer.</strong></p></blockquote><p id="fa25" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Even today, this is why the most successful creative teams have a clear separation (and balanced relationship) between discovery and engineering. Both need to be independent of each other, while each depends on the other for success.</p><p id="88a9" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">So let’s move on, and see what else history can tell us about where we’re heading.</p><h1 id="bd53" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Movable type and the printing revolution</h1><p id="2c3b" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">One of the earliest and most significant inventions of the modern era was printing. When I was in elementary school, history lessons often began with the invention of movable type in 1440, attributed to Johannes Gutenberg. But this narrative, while popular, is not entirely accurate. Movable type was already developing in Korea, albeit in a more limited, less systematic way.</p><p id="270b" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">It wasn’t until Gutenberg — a goldsmith by trade — perfected the metal alloys needed for mass production of precisely cast letters for movable type to become <em class="pd">viable at scale</em>.</p><p id="dc7c" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">We can see similar patterns of scaleability throughout history. A classic example often cited is Henry Ford. While he didn’t invent the automobile, he created the methodology of the assembly line. Ford’s innovation wasn’t just about the product, but about the efficient and scalable system that made the automobile viable as a product.</p><blockquote class="pl pm pn"><p id="5858" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #2: an invention is not a product until the method of production is made viable</strong></p></blockquote><p id="cc51" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">By looking closely at the history of technological innovations, we keep drawing more parallels to today’s breakthroughs. In this new era of both wonder and uncertainty, where transformative change seems imminent, the expression “past is prologue” continues to fascinate me.</p><p id="616b" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Just as Gutenberg’s press democratized information by making books more accessible, the rise of the internet and digital platforms has revolutionized how we access and share knowledge.</p><p id="0d6d" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In both cases, the initial breakthroughs — movable type in the printing world and the creation of the internet for digital communication—were just the beginning. What followed were incremental improvements that took time to mature until the next breakthroughs and game-changing paradigms arose.</p><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 po"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*xoZQRWWqffDrR7eAEB-FLg.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*xoZQRWWqffDrR7eAEB-FLg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*xoZQRWWqffDrR7eAEB-FLg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*xoZQRWWqffDrR7eAEB-FLg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*xoZQRWWqffDrR7eAEB-FLg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*xoZQRWWqffDrR7eAEB-FLg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*xoZQRWWqffDrR7eAEB-FLg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*xoZQRWWqffDrR7eAEB-FLg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh ma ng c" width="700" height="924" loading="lazy" role="presentation"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf nn">Detail from the painting <em class="pk">Gutenberg’s First Print</em> by Friedrich Reichert.</strong> Source: Creative Commons</figcaption></figure><h1 id="61b7" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Printing technology’s slow, steady evolution</h1><p id="2bf0" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">While Gutenberg’s press revolutionized printing, many aspects of the process remained fairly unchanged for centuries. Typesetting and the manual operation of presses were still the norm.</p><p id="9441" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The impact of the invention was undeniably profound—before printing, only a few thousand books were in existence in the whole world—the printing press brought that number into the millions. Yet, for centuries, only a tiny fraction of the people would have access to books. Why?</p><p id="663a" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The path to modern printing and the standardization of written language were not without challenges. It’s a long story, but it offers valuable insight into how systems evolve over time. It also shows how technological progress, even with the best intentions, can lead to major obstacles and glitches.</p><h1 id="aefd" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">The bumpy road to standard language</h1><p id="44cb" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">This story begins with <strong class="oj gv">William Caxton</strong>, the first to print books in the English language, who had an enormous impact on standardization (and some incredible mistakes in the process). Before Caxton’s time in the 15th century, most printed texts were in Latin, the scholarly and religious language of the day.</p><p id="09ec" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Caxton, took on the task of translating and printing works in English to make them more accessible. However, this task would prove to have extraordinary consequences for the future.</p><p id="0447" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">At this time, English was undergoing rapid transformation. The <strong class="oj gv">Great Vowel Shift</strong>, which changed the pronunciation of long vowels, was underway, complicating efforts to align written and spoken language.</p><p id="8e0c" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">English had lacked any standardized spelling, and regional dialects varied widely, so aligning which dialect or spelling conventions to use was difficult and arbitrary. On top of all that, the master typesetters Caxton recruited from Europe had limited knowledge of English, and looked to Dutch and German for answers.</p><p id="7ef4" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">This led to a “perfect storm,” in which printed English became riddled with inconsistencies and random changes. His works, though groundbreaking, contributed to the chaotic development of English spelling, which remains highly non-phonetic, irregular, and <em class="pd">irrational</em> to this day—making English one of the most difficult languages for non-natives to master.</p><blockquote class="pl pm pn"><p id="9599" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #3 The rapid adoption of a new system, without careful understanding of its broader implications, can have long-lasting negative effects.</strong></p></blockquote><p id="f8e0" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The rush to print in English, while democratizing literacy, inadvertently contributed to centuries of confusion over the language’s system of logic (and impact on current communications). This serves as a cautionary tale for modern systems, particularly in technology, where rapid adoption without proper safeguards can create long-term and irreversible complications, as we will see in the rest of this story.</p><h1 id="39ca" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk"><strong class="al">Challenges in early printing: slow adoption, incremental improvements</strong></h1><p id="9e80" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">For decades, printed books were an expensive luxury, not easily accessible to the general public. Early printing faced several key challenges, including high costs, low literacy rates, and the intense manual labor required to produce movable type—imagine setting every letter on a page with pieces of metal, backwards, on a tray, swabbing that all with ink and pressing a piece of paper over it, then hanging each page up to dry, one at a time. Even worse, you couldn’t save so many trays of letters; you would often need to start over and recycle the letters you have for making new pages.</p><p id="46d9" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">A printing press requires specialized knowledge and skilled labor to operate, making it primarily a craft. Typesetters were in short supply and expensive to hire. This pattern seems to repeat itself throughout history with each new technological leap. From telegraph operators in the mid-19th century to software engineers today, democratizing a system doesn’t mean it becomes accessible to everyone right away—it still requires specialized skills to operate within the system. Here in the digital age, only a tiny fraction of us can write code—by some estimates, less than 1% of the world’s population.</p><blockquote class="pl pm pn"><p id="939f" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #4 Emerging technologies often need special skills at first; over time, they evolve to become accessible to a broader audience.</strong></p></blockquote><p id="0a04" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Along with the high specialization of printing skills, low literacy rates and limited access to books created a feedback loop that slowed the spread of printed materials and literacy itself.</p><p id="2b1e" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In the 15th and 16th centuries, books were scarce and expensive, and literacy was primarily limited to the elite, clergy, and scholars. Since there were few readers, there was little incentive to print large quantities of books, which in turn kept literacy rates low, especially among the general population.</p><p id="1073" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">However, over time, as printing technology improved and books became more affordable, literacy rates gradually increased. This fueled greater demand for printed materials, creating a virtuous cycle that eventually broke the initial paradox.</p><p id="7b44" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Another significant barrier was the availability of materials. Paper, while increasingly common by the 15th century, was still an expensive commodity. It would take centuries for paper (and oil-based ink) to be more easily affordable.</p><blockquote class="pl pm pn"><p id="0a71" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #5 Scientific advancement, robust infrastructure, and societal readiness are the essential ingredients for transformative change</strong></p></blockquote><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 pp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*XTrjIlzQU_xJwbavALAYAg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*XTrjIlzQU_xJwbavALAYAg.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*XTrjIlzQU_xJwbavALAYAg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*XTrjIlzQU_xJwbavALAYAg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*XTrjIlzQU_xJwbavALAYAg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*XTrjIlzQU_xJwbavALAYAg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*XTrjIlzQU_xJwbavALAYAg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*XTrjIlzQU_xJwbavALAYAg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*XTrjIlzQU_xJwbavALAYAg.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="a chart showing how different fonts evolved through history" class="bh ma ng c" width="700" height="500" loading="lazy"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf nn">Fonts evolved for centuries before the digital age began.</strong> Infographic created by the author.</figcaption></figure><h1 id="266a" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Societal issues and advances of printing</h1><p id="1dc8" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">A major challenge was censorship and regulation. The Church and state, realizing the power of printed books to disseminate information widely, sought to control what could be printed. This stifled the flow of information and limited the growth of the industry in its early years.</p><p id="63a9" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Another challenge was skepticism toward the new technology of printing. Initially, some viewed printing as a lesser substitute for the artistry of hand-copied manuscripts. Important documents, like t<em class="pd">he Declaration of Independence</em>, were proudly handwritten to convey prestige and authenticity.</p><p id="698b" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">This pattern of resistance to new technology has quite often been repeated throughout history. For example, the introduction of the telegraph faced similar pushbacks, with many seeing it as unreliable compared to written letters.</p><p id="f63d" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The same was said about the first automobiles vs. horses. Further in time, self-driving cars are not widespread today. Why? The technology is there, but we’re just not ready for change?</p><p id="15d2" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In general, by the early 20th century, the rise of mechanical assembly lines, was slammed by traditional craftsmen, across industries, fearing the loss of quality in mass-produced products (and the loss of their crafts).</p><p id="4216" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Even today, we see this pattern with digital art and AI-generated content, which some argue doesn’t have the “soul” of human-made creations.</p><blockquote class="pl pm pn"><p id="9944" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #6 Skepticism of new technology gradually disappears as the technology evolves, proving its value and gaining acceptance.</strong></p></blockquote><h1 id="cad2" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Limitations of early printing practices</h1><p id="dedb" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">Early printed works were often religious texts, scholarly works, or legal documents, which had a narrow, educated, and often wealthy audience.</p><p id="de92" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Printing presses were typically located in cities—which had the infrastructure and money to support the business. However, at the time, most of the world's population was rural, so access to books and printed materials was well out of reach, for a long time.</p><p id="8d42" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The broader market for entertainment, news, or practical information had yet to be developed to a degree that would drive mass production of books, pamphlets, or any other sort of reading material.</p><p id="4f14" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Slowly, the development of better inks, more durable types, and more efficient presses gradually improved the speed and quality of printed materials.</p><blockquote class="pl pm pn"><p id="bd38" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #7: What is “good enough” stifles transformation. True disruption happens when market pressure forces outdated techniques to become obsolete.</strong></p></blockquote><h1 id="484d" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">The industrial vs. digital revolution</h1><p id="f6a1" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">Among the most significant innovations in printing was the steam-powered printing press, which emerged in the early 19th century.</p><p id="9bd3" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Industrialization ushered in a broad societal shift toward efficiency, and automation, and a new accessibility to products and services that were previously unheard of for most people. Printers could now produce thousands of copies daily, making printed materials common.</p><p id="fdf1" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The upshot of this was the birth of mass communication. As newspapers and books became more affordable, public literacy skyrocketed, and ideas spread across all social classes, not just the elite.</p><blockquote class="pl pm pn"><p id="b9f6" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #8: Efficiency and automation don’t just add value to products — they are the key to making those products accessible.</strong></p></blockquote><p id="94b5" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Just like in the early days of mass printing, the evolution of digital media was fraught with issues concerning quality versus convenience, and whether speed and accessibility came at the cost of depth and professionalism. Old traditions give way to new standards, sometimes with significant downgrades at first. Those who remember the World Wide Web in the 1990’s can attest to that.</p><blockquote class="pl pm pn"><p id="3801" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeway # 9 Technological advancements in communication present a tedious balance between innovation and tradition.</strong></p></blockquote><h1 id="1527" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">The dark side of mass communication</h1><p id="cda3" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">One of the less obvious but significant effects of the Industrial Revolution on printing was its influence on cultural language and stereotypes. As steam-powered presses increased production, they also made it easier to reproduce common phrases, imagery, and motifs — the building blocks of cultural clichés.</p><p id="2366" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The more frequently certain ideas or expressions appeared in print, the more they became engrained in the public consciousness. The rapid reproduction of content gave rise to the concept of “stereotyping” in both a literal and figurative sense–printing presses used metal “stereotype” plates (a single cast of a block of text, also known as a “cliché) for quick reprints, but this mechanized reproduction also fed into the overuse of familiar narratives, locking them into the public mindset.</p><p id="4ae4" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">This concept of “cliché” extends beyond just repetitive blocks of print; it not only became a vocabulary word, but a real danger to society.</p><p id="7753" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Standardization sounds great, but cementing patterns of thought, creating stereotypes, promoting misinformation, and weaponizing propaganda are all byproducts of technology gone wrong.</p><p id="35d5" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">If this sounds familiar, it should. This is not unlike today’s digital age, where repeated algorithms and automation threaten to make digital content increasingly formulaic, limiting creative expression, and creating feedback loops in the echo-chambers we all live in today.</p><blockquote class="pl pm pn"><p id="5ac5" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #10: Without proper guardrails, the power of mass communication can amplify misunderstandings and reinforce harmful beliefs.</strong></p></blockquote><p id="95cf" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Let’s consider how the terminology from the printing world has crept into our digital age. Words like “<em class="pd">font</em>,” “<em class="pd">typeface</em>,” “<em class="pd">leading</em>,” and “<em class="pd">kerning</em>” have their origins in the physical process of typesetting and printing and continue to dominate modern design language, even when they barely make sense, for instance, using the words “<em class="pd">page” or</em> “<em class="pd">canvas” </em>to describe<em class="pd"> </em>a digital experience.</p><p id="1816" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">These remnants of the printing era not only reflect the technical evolution of media but also hint at a deeper cultural impact. The persistence of this jargon shows how deeply rooted print culture was in shaping our understanding of communication and design, even as we transition to digital formats.</p><p id="18d6" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In this way, the legacy of printing has extended into our cultural framework, influencing how we approach new technologies. The rise of clichés in print paved the way for digital shorthand and memes, while the enduring jargon reminds us that every medium carries with it the weight of its history.</p><p id="382b" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">As we stand on the cusp of new revolutions in technology, the challenge is not just to innovate but to avoid falling into the traps of stereotyping—to ensure that we create something truly new rather than simply reproducing the past. Already with the rise of new technologies, clichés of the digital era are entering our new AI-driven future.</p><blockquote class="pl pm pn"><p id="505b" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #11: With every new leap in technology, vestiges of past concepts are slow to disappear from our common understanding of things</strong></p></blockquote><p id="0a3c" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Interestingly, the early forms of movable type were modeled after the calligraphic letterforms of medieval monks, a reflection of their cultural heritage. The bonds between craftsmanship and culture have always been strong, and it is likely that today’s standards will eventually become tomorrow’s legacies—vestiges trapped in our common memory.</p><h1 id="ed5b" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Echoes of the past: how language and culture shape our technology future</h1><p id="9660" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">What other phrases may become quaint, classic, or standard as we stand on the brink of the Gen AI era? Change is inevitable. We may not even refer to it as AI in a few years — just as we no longer talk about the “<em class="pd">information superhighway,</em>” a term that was quickly retired. Just as “<em class="pd">Cyber Monday</em>” makes little sense anymore — nearly everyone has a personal computer or smartphone now.</p><p id="dba0" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Emerging technologies don’t just grapple with legacy jargon; they compel the reshape of entire processes and workflows, forcing industries to adapt or risk facing consequences, or worse, obsolescence.</p><p id="7d66" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Case in point, the system of HTML, starts with a simple text prompt, much like the earliest forms of digital communication. Think about this: we launched the information age with a DOS prompt — a blinking cursor waiting for input — and it’s still part of the tech stack we use today. Ostensibly, it’s not so different from Ben Franklin, laboring in his Philadelphia print shop with a wooden tray and pieces of lead text, it’s just that our tools have gotten a lot fancier.</p><h1 id="e55f" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">A parallel universe, with a divergent internet</h1><p id="d9c5" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">Imagine, in a parallel universe, that the timing was different. What if Apple and Adobe had teamed up to develop a graphical web browser in 1990? In this scenario, everyone would have been browsing the internet with a slick, low-bandwidth experience in PDF instead of clunky HTML. Perhaps HTML would have faded into obscurity, and EPS dominated all the web standards.</p><p id="8187" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">What impact might that have had on software engineering and web design today? Would the internet be fundamentally different if it had started with a creative design system already in place? While the questions are hyperbolic, it underscores a broader truth: technology, adoption, and design standards often intersect in ways that shape our world in curious and unexpected ways.</p><p id="44c1" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">As technology advances at an ever-increasing pace, we must consider how cultural legacies might impact our progress. A great example: the QWERTY keyboard. Originally designed in the 19th century to prevent mechanical typewriter jams, this layout was intended to slow down typing speed.</p><p id="e7b7" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">Ironically, this cultural artifact has persisted, limiting typing efficiency for generations. This raises the question: how many other outdated cultural legacies might be inadvertently hindering technological progress in ways we’ve yet to recognize?</p><blockquote class="pl pm pn"><p id="d581" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #12: The adoption of a system has its own momentum and can ultimately determine the trajectory of a new technology.</strong></p></blockquote></div></div><div class="nb"><div class="ab cb"><div class="lv pq lw pr lx ps cf pt cg pu ci bh"><figure class="mw mx my mz na nb pw px paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu pv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*WNeXBEoAlrp89tLKrRLAKA.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*WNeXBEoAlrp89tLKrRLAKA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*WNeXBEoAlrp89tLKrRLAKA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*WNeXBEoAlrp89tLKrRLAKA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*WNeXBEoAlrp89tLKrRLAKA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*WNeXBEoAlrp89tLKrRLAKA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*WNeXBEoAlrp89tLKrRLAKA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*WNeXBEoAlrp89tLKrRLAKA.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 graphic showing the increasing speed of technology adoption in print, radio, television, Internet, social media and generative AI" class="bh ma ng c" width="1000" height="723" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du">Images generated by the author in Flux.1</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="4b48" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Digital revolution, slow evolution of design systems</h1><p id="035a" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">By the early 1990s, the rise of graphical browsers coincided with the growing power of personal computers and rapid advances in desktop publishing software. Programs like QuarkXPress, and later Adobe InDesign, enabled teams to maintain design systems by sharing reusable pattern libraries.</p><p id="62c1" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">While the internet rose very quickly, the widespread adoption of systematic design didn’t take hold until decades later. Why?</p><p id="f824" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">As a designer, I’ve pondered this for a long time. Could the limited reach of early design tools have hindered more collaborative workflows? Consider that desktop publishing software, while powerful and transformative, was primarily used only by designers. These designers were often focused on guiding front-end development rather than creating comprehensive, reusable systems for digital publishing.</p><p id="8477" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">During the Web 1.0 era, manual processes were the norm. Designers and developers worked in isolation, using different tools to create web pages. Engineering handoff typically consisted of a few static prototypes, information architecture blueprints, functional specs, and copy decks, all of which had to be manually input and interpreted by developers.</p><blockquote class="pl pm pn"><p id="eb86" class="oh oi pd oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #13: Early digital design systems were challenged by fragmented collaboration between designers and engineers, limiting cohesive solutions.</strong></p></blockquote><p id="863e" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">UX design was still maturing, with pioneers like the Nielsen Norman Group providing guidance and training. Despite the evolving design practice, the tools designers used — primarily Adobe Photoshop — remained stagnant for nearly two decades.</p><p id="892e" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In 2015, I worked on a project for a financial data portal. Our team quickly realized that the scope of the project was much too large for Photoshop, which struggled with managing hundreds of screens, dashboards, and data visualizations. Instead, we opted for Adobe InDesign, which allowed us to manage objects iteratively and effectively within an agile workflow.</p><p id="37fd" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">In hindsight, this decision was a success, but it was controversial at the time due to adoption patterns. InDesign was primarily used by print designers for its object-oriented approach, which allowed large image files to be managed separately from other objects. It was ideal for large-scale print projects but perceived as less suitable for digital projects.</p><h1 id="2f01" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">Why Adobe InDesign failed to dominate digital design systems</h1><p id="5bea" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">Several factors prevented InDesign from catching on with digital designers. First, the need for sophisticated design systems didn’t arise in typical Web 1.0 workflows. Second, InDesign’s complexity was considered overkill for fast-paced web design. Finally, its use of points (a printing measurement system) instead of pixels hindered its ability to produce pixel-perfect digital designs. By the time Adobe addressed this with InDesign Version 6 in 2012, it was too late for widespread adoption by digital designers.</p></div></div><div class="nb"><div class="ab cb"><div class="lv pq lw pr lx ps cf pt cg pu ci bh"><figure class="mw mx my mz na nb pw px paragraph-image"><div role="button" tabindex="0" class="nc nd fj ne bh nf"><div class="mt mu py"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*WG6kd20L_EPxIJmY0xgynw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*WG6kd20L_EPxIJmY0xgynw.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*WG6kd20L_EPxIJmY0xgynw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*WG6kd20L_EPxIJmY0xgynw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*WG6kd20L_EPxIJmY0xgynw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*WG6kd20L_EPxIJmY0xgynw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*WG6kd20L_EPxIJmY0xgynw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*WG6kd20L_EPxIJmY0xgynw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*WG6kd20L_EPxIJmY0xgynw.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 diagram showing the atomic pyramid structure of a static design system" class="bh ma ng c" width="1000" height="499" loading="eager"/></picture></div></div><figcaption class="nh ff ni mt mu nj nk bf b bg z du"><strong class="bf nn">Early design systems still contained legacy “Web 1.0” workflows, with significant gaps in processes. </strong>Infographic by the author.</figcaption></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="a273" class="nl nm gu bf nn no np hu nq nr ns hx nt nu nv nw nx ny nz oa ob oc od oe of og bk">How did the long winter of design systems end?</h1><p id="12b4" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">The slow evolution of design systems from the 1990s through the 2010s reflects the limitations of the tools available at the time and the separation between design and development processes.</p><p id="365e" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">As the demand for scalable, systematic design grew in digital media, new software, platforms, and subsequent workflows emerged to fill the gap, shaping how we think about design systems today.</p><p id="eb53" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk"><strong class="oj gv">Takeaway #14: Technology adoption isn’t just about the tool—it’s about the right solution meeting the evolving needs of industry—at the right time.</strong></p><p id="b2b8" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">By the early 2010s, everything began to change. Social media platforms democratized publishing, unleashing a tidal wave of creative output across the web. Businesses that once viewed the internet as a digital brochure started exploring new possibilities as server technology lowered the cost of ownership. This was called the beginning of “Web 2.0.”</p><p id="d8c4" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The slow burn of incremental change suddenly accelerated. With new tools and more widespread adoption, design systems became essential. UX practices evolved rapidly, and the convergence of design tools, technology, and adoption gave birth to the design systems we use today.</p><p id="3e75" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">As we look toward the future, the history of design systems continues to offer insights. We’re on the cusp of another technological revolution in AI. What will this mean for design? Just as the printing press transformed communication, AI may reshape the way we create things and interact with each other.</p><p id="435f" class="pw-post-body-paragraph oh oi gu oj b hs pe ol om hv pf oo op oq pg os ot ou ph ow ox oy pi pa pb pc gn bk">The only certainty is change. As we move forward, we can look to the past for guidance, learning from the lessons of history to make informed decisions about where to invest our time, energy, and creativity in the years to come. But before we get to that, let’s examine some more recent history, the period between<strong class="oj gv"> 2016–2024</strong>, where the practice of design systems has come to mature, and is directly shaping the conversation we need to have today, in the <strong class="oj gv">next article in this series</strong>.</p><h2 id="59cd" class="pz nm gu bf nn qa qb dy nq qc qd ea nt oq qe qf qg ou qh qi qj oy qk ql qm qn bk"><a class="af qo" rel="noopener" href="/@jgulsen_97727/a-brief-history-of-design-systems-part-2-fb00a7af7985">A Brief History of Design Systems, Part 2 (2016–2024)</a></h2><p id="2b9e" class="pw-post-body-paragraph oh oi gu oj b hs ok ol om hv on oo op oq or os ot ou ov ow ox oy oz pa pb pc gn bk">Thank you for reading. Please let me know your thoughts in the comments below.</p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qp qq ab jh"><div class="qr ab"><a class="qs ay am ao" rel="noopener follow" href="/tag/design-systems?source=post_page-----d661a7c70002--------------------------------"><div class="qt fj cx qu ge qv qw bf b bg z bk qx">Design Systems</div></a></div><div class="qr ab"><a class="qs ay am ao" rel="noopener follow" href="/tag/design-thinking?source=post_page-----d661a7c70002--------------------------------"><div class="qt fj cx qu ge qv qw bf b bg z bk qx">Design Thinking</div></a></div><div class="qr ab"><a class="qs ay am ao" rel="noopener follow" href="/tag/design-strategy?source=post_page-----d661a7c70002--------------------------------"><div class="qt fj cx qu ge qv qw bf b bg z bk qx">Design Strategy</div></a></div><div class="qr ab"><a class="qs ay am ao" rel="noopener follow" href="/tag/historical-analysis?source=post_page-----d661a7c70002--------------------------------"><div class="qt fj cx qu ge qv qw bf b bg z bk qx">Historical Analysis</div></a></div><div class="qr ab"><a class="qs ay am ao" rel="noopener follow" href="/tag/digital-transformation?source=post_page-----d661a7c70002--------------------------------"><div class="qt fj cx qu ge qv qw bf b bg z bk qx">Digital Transformation</div></a></div></div></div></div><div class="l"></div><footer class="qy qz ra rb rc ab q rd re c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rf"><div class="ab q kq"><div class="rg l"><span class="l rh ri rj 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%2Fd661a7c70002&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-very-brief-history-of-design-systems-part-1-d661a7c70002&user=Jim+Gulsen&userId=9783fdfdbb51&source=---footer_actions--d661a7c70002---------------------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 rk rl"><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%2Fd661a7c70002&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-very-brief-history-of-design-systems-part-1-d661a7c70002&user=Jim+Gulsen&userId=9783fdfdbb51&source=---footer_actions--d661a7c70002---------------------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">5</span></p></button></div></div></div></div><div class="ab q"><div class="rm 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%2Fd661a7c70002&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40jgulsen_97727%2Fa-very-brief-history-of-design-systems-part-1-d661a7c70002&source=---footer_actions--d661a7c70002---------------------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="rm 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="rn ro rp rq rr l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rs bh r rt"></div><div class="ab ru rv rw jg jf"><div class="rx ry rz sa sb sc sd se sf sg ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@jgulsen_97727?source=post_page---post_author_info--d661a7c70002--------------------------------"><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 sh"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@jgulsen_97727?source=post_page---post_author_info--d661a7c70002--------------------------------"><div class="l fj"><img alt="Jim Gulsen" class="l fd by si sj 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 si sj fs n ay sh"></div></div></a></div><div class="j i d sk je"><div class="ab"><span><button class="bf b bg z sl qt sm sn so sp sq ev ew sr ss st fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co su"><div class="sv sw sx pr pq 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--d661a7c70002--------------------------------"><h2 class="pw-author-name bf sz ta tb tc td te tf oq qf qg ou qi qj oy ql qm bk"><span class="gn sy">Written by <!-- -->Jim Gulsen</span></h2></a><div class="qr 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--d661a7c70002--------------------------------">34 Followers</a></span></div><div class="bf b bg z du ab tg"><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--d661a7c70002--------------------------------">25 Following</a></div></div><div class="th 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 sl qt sm sn so sp sq ev ew sr ss st fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="ti tj tk tl tm l"><div class="rs bh r ti tj tn to tp"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf sz no hu nq nr hx nt nu nw nx ny oa ob oc oe of bk">Responses (<!-- -->5<!-- -->)</h2><div class="ab tq"><div><div class="bm" aria-hidden="false"><a class="tr ts" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--d661a7c70002--------------------------------" 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="tt l"><button class="bf b bg z bk qt tu tv tw lt lq sq ev ew ex tx ty tz fa ua ub uc ud ue fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="uf ug uh ui uj l bx"><div class="h k j"><div class="rs bh uk ul"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="um ab kq jh"><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="un uo 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-----d661a7c70002--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="un 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-----d661a7c70002--------------------------------"><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-20241122-185319-7bcdc08639"</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-d661a7c70002","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":"c1ddbcbd-53be-4f07-96c8-9090d044dbef","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-c8c631b2ecf53c4a408d4aaecd5b4fe0-d754db169a38d71e-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-very-brief-history-of-design-systems-part-1-d661a7c70002","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-20241122-185319-7bcdc08639","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-20241122-185319-7bcdc08639","commit":"7bcdc08639c179dc5172558201a3fd3abc1b5db6"}},"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\":\"d661a7c70002\"})":{"__ref":"Post:d661a7c70002"}},"LinkedAccounts:9783fdfdbb51":{"__typename":"LinkedAccounts","mastodon":null,"id":"9783fdfdbb51"},"UserViewerEdge:userId:9783fdfdbb51-viewerId:lo_ffc1433050f6":{"__typename":"UserViewerEdge","id":"userId:9783fdfdbb51-viewerId:lo_ffc1433050f6","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":23,"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_ffc1433050f6"},"viewerIsUser":false,"newsletterV3":null,"postSubscribeMembershipUpsellShownAt":0,"membership":{"__ref":"Membership:eb5f9a4cd25e"},"allowNotes":true,"twitterScreenName":""},"Paragraph:b63ae440c23c_0":{"__typename":"Paragraph","id":"b63ae440c23c_0","name":"d902","type":"H3","href":null,"layout":null,"metadata":null,"text":"A Brief History of Design Systems, Part 1","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_1":{"__typename":"Paragraph","id":"b63ae440c23c_1","name":"6e80","type":"H4","href":null,"layout":null,"metadata":null,"text":"Looking back at early design systems can reveal timeless insights to inform today’s digital transformations","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*r14fAfrEC-qfvhcYZAUqGw.png":{"__typename":"ImageMetadata","id":"1*r14fAfrEC-qfvhcYZAUqGw.png","originalHeight":816,"originalWidth":1456,"focusPercentX":null,"focusPercentY":null,"alt":"An abstract image of a person with digital artifacts"},"Paragraph:b63ae440c23c_2":{"__typename":"Paragraph","id":"b63ae440c23c_2","name":"f167","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*r14fAfrEC-qfvhcYZAUqGw.png"},"text":"Cover image generated by the author in Midjourney","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_3":{"__typename":"Paragraph","id":"b63ae440c23c_3","name":"067d","type":"H3","href":null,"layout":null,"metadata":null,"text":"The dawn of design systems","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":26,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_4":{"__typename":"Paragraph","id":"b63ae440c23c_4","name":"173b","type":"P","href":null,"layout":null,"metadata":null,"text":"In our modern digital era, the term design system is primarily associated with user interface (UI) development. It describes a structured set of components, guidelines, tools, etc. used to deliver consistent digital experiences. But if we broaden the definition and apply it to history, “design systems,\" or systematic design—whether in architecture, publishing, or manufacturing—have been integral in driving human innovation since the dawn of time.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":36,"end":49,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":308,"end":325,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_5":{"__typename":"Paragraph","id":"b63ae440c23c_5","name":"293a","type":"P","href":null,"layout":null,"metadata":null,"text":"By looking at design systems through that broader historical perspective, we can literally draw upon centuries of data to better understand design’s influence on society—and draw parallels to today’s digital world.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_6":{"__typename":"Paragraph","id":"b63ae440c23c_6","name":"3708","type":"P","href":null,"layout":null,"metadata":null,"text":"One could argue that design systems date back to the Stone Age. From weaving baskets to crafting jewelry and textiles, prehistoric people mastered systematic thinking thousands of years ago, as evidenced by archaeological finds.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_7":{"__typename":"Paragraph","id":"b63ae440c23c_7","name":"ee9e","type":"P","href":null,"layout":null,"metadata":null,"text":"Imagine what it was like, to produce textiles using ancient tools, by repeating patterns, using symmetry, balance, and proportion—principles that closely resemble early mathematics. Even without formal geometry, our ancestors applied structured thinking to their crafts, many years before civilization.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*gFGQhTtspU3DJjega1w0Cg.jpeg":{"__typename":"ImageMetadata","id":"1*gFGQhTtspU3DJjega1w0Cg.jpeg","originalHeight":1172,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:b63ae440c23c_8":{"__typename":"Paragraph","id":"b63ae440c23c_8","name":"0bc2","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*gFGQhTtspU3DJjega1w0Cg.jpeg"},"text":"Women at a loom. From a tomb at Beni-Hassan, Egypt. Source: Georges Perrot, Creative Commons","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":51,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":0,"end":60,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_9":{"__typename":"Paragraph","id":"b63ae440c23c_9","name":"b214","type":"P","href":null,"layout":null,"metadata":null,"text":"In many ways, these early designs were practical forms of problem-solving, blending art and logic to high levels of sophistication. Their processes, much like modern design systems, aimed to create consistency, order, and beauty, something we still strive to achieve today.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_10":{"__typename":"Paragraph","id":"b63ae440c23c_10","name":"7a53","type":"P","href":null,"layout":null,"metadata":null,"text":"I’ve come to realize that art often precedes science — because it involves solving problems in ways that aren’t immediately clear — or even fully understood — until the solution is found. It’s been said, “Art is solving problems that cannot be formulated before they have been solved. The shaping of the question is part of the answer.” (Piet Hein)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":338,"end":347,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_11":{"__typename":"Paragraph","id":"b63ae440c23c_11","name":"057f","type":"P","href":null,"layout":null,"metadata":null,"text":"The creative process itself is a form of problem-solving, where artists apply structure, proportion, and technique using instincts at first. Over time, this creative exploration often uncovers patterns, systems, and methods that later become formalized into scientific principles.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":115,"end":130,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_12":{"__typename":"Paragraph","id":"b63ae440c23c_12","name":"4ee3","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeway #1 Art explores possibilities, and in doing so, it often discovers the very questions science later seeks to answer.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":124,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_13":{"__typename":"Paragraph","id":"b63ae440c23c_13","name":"fa25","type":"P","href":null,"layout":null,"metadata":null,"text":"Even today, this is why the most successful creative teams have a clear separation (and balanced relationship) between discovery and engineering. Both need to be independent of each other, while each depends on the other for success.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_14":{"__typename":"Paragraph","id":"b63ae440c23c_14","name":"88a9","type":"P","href":null,"layout":null,"metadata":null,"text":"So let’s move on, and see what else history can tell us about where we’re heading.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_15":{"__typename":"Paragraph","id":"b63ae440c23c_15","name":"bd53","type":"H3","href":null,"layout":null,"metadata":null,"text":"Movable type and the printing revolution","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_16":{"__typename":"Paragraph","id":"b63ae440c23c_16","name":"2c3b","type":"P","href":null,"layout":null,"metadata":null,"text":"One of the earliest and most significant inventions of the modern era was printing. When I was in elementary school, history lessons often began with the invention of movable type in 1440, attributed to Johannes Gutenberg. But this narrative, while popular, is not entirely accurate. Movable type was already developing in Korea, albeit in a more limited, less systematic way.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_17":{"__typename":"Paragraph","id":"b63ae440c23c_17","name":"270b","type":"P","href":null,"layout":null,"metadata":null,"text":"It wasn’t until Gutenberg — a goldsmith by trade — perfected the metal alloys needed for mass production of precisely cast letters for movable type to become viable at scale.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":158,"end":173,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_18":{"__typename":"Paragraph","id":"b63ae440c23c_18","name":"dc7c","type":"P","href":null,"layout":null,"metadata":null,"text":"We can see similar patterns of scaleability throughout history. A classic example often cited is Henry Ford. While he didn’t invent the automobile, he created the methodology of the assembly line. Ford’s innovation wasn’t just about the product, but about the efficient and scalable system that made the automobile viable as a product.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_19":{"__typename":"Paragraph","id":"b63ae440c23c_19","name":"5858","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #2: an invention is not a product until the method of production is made viable","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":88,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_20":{"__typename":"Paragraph","id":"b63ae440c23c_20","name":"cc51","type":"P","href":null,"layout":null,"metadata":null,"text":"By looking closely at the history of technological innovations, we keep drawing more parallels to today’s breakthroughs. In this new era of both wonder and uncertainty, where transformative change seems imminent, the expression “past is prologue” continues to fascinate me.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_21":{"__typename":"Paragraph","id":"b63ae440c23c_21","name":"616b","type":"P","href":null,"layout":null,"metadata":null,"text":"Just as Gutenberg’s press democratized information by making books more accessible, the rise of the internet and digital platforms has revolutionized how we access and share knowledge.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_22":{"__typename":"Paragraph","id":"b63ae440c23c_22","name":"0d6d","type":"P","href":null,"layout":null,"metadata":null,"text":"In both cases, the initial breakthroughs — movable type in the printing world and the creation of the internet for digital communication—were just the beginning. What followed were incremental improvements that took time to mature until the next breakthroughs and game-changing paradigms arose.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*xoZQRWWqffDrR7eAEB-FLg.png":{"__typename":"ImageMetadata","id":"1*xoZQRWWqffDrR7eAEB-FLg.png","originalHeight":1114,"originalWidth":844,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:b63ae440c23c_23":{"__typename":"Paragraph","id":"b63ae440c23c_23","name":"36ef","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*xoZQRWWqffDrR7eAEB-FLg.png"},"text":"Detail from the painting Gutenberg’s First Print by Friedrich Reichert. Source: Creative Commons","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":71,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":25,"end":48,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_24":{"__typename":"Paragraph","id":"b63ae440c23c_24","name":"61b7","type":"H3","href":null,"layout":null,"metadata":null,"text":"Printing technology’s slow, steady evolution","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_25":{"__typename":"Paragraph","id":"b63ae440c23c_25","name":"2bf0","type":"P","href":null,"layout":null,"metadata":null,"text":"While Gutenberg’s press revolutionized printing, many aspects of the process remained fairly unchanged for centuries. Typesetting and the manual operation of presses were still the norm.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_26":{"__typename":"Paragraph","id":"b63ae440c23c_26","name":"9441","type":"P","href":null,"layout":null,"metadata":null,"text":"The impact of the invention was undeniably profound—before printing, only a few thousand books were in existence in the whole world—the printing press brought that number into the millions. Yet, for centuries, only a tiny fraction of the people would have access to books. Why?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_27":{"__typename":"Paragraph","id":"b63ae440c23c_27","name":"663a","type":"P","href":null,"layout":null,"metadata":null,"text":"The path to modern printing and the standardization of written language were not without challenges. It’s a long story, but it offers valuable insight into how systems evolve over time. It also shows how technological progress, even with the best intentions, can lead to major obstacles and glitches.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_28":{"__typename":"Paragraph","id":"b63ae440c23c_28","name":"aefd","type":"H3","href":null,"layout":null,"metadata":null,"text":"The bumpy road to standard language","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_29":{"__typename":"Paragraph","id":"b63ae440c23c_29","name":"44cb","type":"P","href":null,"layout":null,"metadata":null,"text":"This story begins with William Caxton, the first to print books in the English language, who had an enormous impact on standardization (and some incredible mistakes in the process). Before Caxton’s time in the 15th century, most printed texts were in Latin, the scholarly and religious language of the day.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":23,"end":37,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_30":{"__typename":"Paragraph","id":"b63ae440c23c_30","name":"09ec","type":"P","href":null,"layout":null,"metadata":null,"text":"Caxton, took on the task of translating and printing works in English to make them more accessible. However, this task would prove to have extraordinary consequences for the future.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_31":{"__typename":"Paragraph","id":"b63ae440c23c_31","name":"0447","type":"P","href":null,"layout":null,"metadata":null,"text":"At this time, English was undergoing rapid transformation. The Great Vowel Shift, which changed the pronunciation of long vowels, was underway, complicating efforts to align written and spoken language.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":63,"end":80,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_32":{"__typename":"Paragraph","id":"b63ae440c23c_32","name":"8e0c","type":"P","href":null,"layout":null,"metadata":null,"text":"English had lacked any standardized spelling, and regional dialects varied widely, so aligning which dialect or spelling conventions to use was difficult and arbitrary. On top of all that, the master typesetters Caxton recruited from Europe had limited knowledge of English, and looked to Dutch and German for answers.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_33":{"__typename":"Paragraph","id":"b63ae440c23c_33","name":"7ef4","type":"P","href":null,"layout":null,"metadata":null,"text":"This led to a “perfect storm,” in which printed English became riddled with inconsistencies and random changes. His works, though groundbreaking, contributed to the chaotic development of English spelling, which remains highly non-phonetic, irregular, and irrational to this day—making English one of the most difficult languages for non-natives to master.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":256,"end":266,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_34":{"__typename":"Paragraph","id":"b63ae440c23c_34","name":"9599","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #3 The rapid adoption of a new system, without careful understanding of its broader implications, can have long-lasting negative effects.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":146,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_35":{"__typename":"Paragraph","id":"b63ae440c23c_35","name":"f8e0","type":"P","href":null,"layout":null,"metadata":null,"text":"The rush to print in English, while democratizing literacy, inadvertently contributed to centuries of confusion over the language’s system of logic (and impact on current communications). This serves as a cautionary tale for modern systems, particularly in technology, where rapid adoption without proper safeguards can create long-term and irreversible complications, as we will see in the rest of this story.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_36":{"__typename":"Paragraph","id":"b63ae440c23c_36","name":"39ca","type":"H3","href":null,"layout":null,"metadata":null,"text":"Challenges in early printing: slow adoption, incremental improvements","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":69,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_37":{"__typename":"Paragraph","id":"b63ae440c23c_37","name":"9e80","type":"P","href":null,"layout":null,"metadata":null,"text":"For decades, printed books were an expensive luxury, not easily accessible to the general public. Early printing faced several key challenges, including high costs, low literacy rates, and the intense manual labor required to produce movable type—imagine setting every letter on a page with pieces of metal, backwards, on a tray, swabbing that all with ink and pressing a piece of paper over it, then hanging each page up to dry, one at a time. Even worse, you couldn’t save so many trays of letters; you would often need to start over and recycle the letters you have for making new pages.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_38":{"__typename":"Paragraph","id":"b63ae440c23c_38","name":"46d9","type":"P","href":null,"layout":null,"metadata":null,"text":"A printing press requires specialized knowledge and skilled labor to operate, making it primarily a craft. Typesetters were in short supply and expensive to hire. This pattern seems to repeat itself throughout history with each new technological leap. From telegraph operators in the mid-19th century to software engineers today, democratizing a system doesn’t mean it becomes accessible to everyone right away—it still requires specialized skills to operate within the system. Here in the digital age, only a tiny fraction of us can write code—by some estimates, less than 1% of the world’s population.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_39":{"__typename":"Paragraph","id":"b63ae440c23c_39","name":"939f","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #4 Emerging technologies often need special skills at first; over time, they evolve to become accessible to a broader audience.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":136,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_40":{"__typename":"Paragraph","id":"b63ae440c23c_40","name":"0a04","type":"P","href":null,"layout":null,"metadata":null,"text":"Along with the high specialization of printing skills, low literacy rates and limited access to books created a feedback loop that slowed the spread of printed materials and literacy itself.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_41":{"__typename":"Paragraph","id":"b63ae440c23c_41","name":"2b1e","type":"P","href":null,"layout":null,"metadata":null,"text":"In the 15th and 16th centuries, books were scarce and expensive, and literacy was primarily limited to the elite, clergy, and scholars. Since there were few readers, there was little incentive to print large quantities of books, which in turn kept literacy rates low, especially among the general population.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_42":{"__typename":"Paragraph","id":"b63ae440c23c_42","name":"1073","type":"P","href":null,"layout":null,"metadata":null,"text":"However, over time, as printing technology improved and books became more affordable, literacy rates gradually increased. This fueled greater demand for printed materials, creating a virtuous cycle that eventually broke the initial paradox.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_43":{"__typename":"Paragraph","id":"b63ae440c23c_43","name":"7b44","type":"P","href":null,"layout":null,"metadata":null,"text":"Another significant barrier was the availability of materials. Paper, while increasingly common by the 15th century, was still an expensive commodity. It would take centuries for paper (and oil-based ink) to be more easily affordable.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_44":{"__typename":"Paragraph","id":"b63ae440c23c_44","name":"0a71","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #5 Scientific advancement, robust infrastructure, and societal readiness are the essential ingredients for transformative change","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},"ImageMetadata:1*XTrjIlzQU_xJwbavALAYAg.png":{"__typename":"ImageMetadata","id":"1*XTrjIlzQU_xJwbavALAYAg.png","originalHeight":1028,"originalWidth":1440,"focusPercentX":null,"focusPercentY":null,"alt":"a chart showing how different fonts evolved through history"},"Paragraph:b63ae440c23c_45":{"__typename":"Paragraph","id":"b63ae440c23c_45","name":"f0a1","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*XTrjIlzQU_xJwbavALAYAg.png"},"text":"Fonts evolved for centuries before the digital age began. Infographic created by the author.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":57,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_46":{"__typename":"Paragraph","id":"b63ae440c23c_46","name":"266a","type":"H3","href":null,"layout":null,"metadata":null,"text":"Societal issues and advances of printing","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_47":{"__typename":"Paragraph","id":"b63ae440c23c_47","name":"1dc8","type":"P","href":null,"layout":null,"metadata":null,"text":"A major challenge was censorship and regulation. The Church and state, realizing the power of printed books to disseminate information widely, sought to control what could be printed. This stifled the flow of information and limited the growth of the industry in its early years.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_48":{"__typename":"Paragraph","id":"b63ae440c23c_48","name":"63a9","type":"P","href":null,"layout":null,"metadata":null,"text":"Another challenge was skepticism toward the new technology of printing. Initially, some viewed printing as a lesser substitute for the artistry of hand-copied manuscripts. Important documents, like the Declaration of Independence, were proudly handwritten to convey prestige and authenticity.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":199,"end":229,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_49":{"__typename":"Paragraph","id":"b63ae440c23c_49","name":"698b","type":"P","href":null,"layout":null,"metadata":null,"text":"This pattern of resistance to new technology has quite often been repeated throughout history. For example, the introduction of the telegraph faced similar pushbacks, with many seeing it as unreliable compared to written letters.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_50":{"__typename":"Paragraph","id":"b63ae440c23c_50","name":"f63d","type":"P","href":null,"layout":null,"metadata":null,"text":"The same was said about the first automobiles vs. horses. Further in time, self-driving cars are not widespread today. Why? The technology is there, but we’re just not ready for change?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_51":{"__typename":"Paragraph","id":"b63ae440c23c_51","name":"15d2","type":"P","href":null,"layout":null,"metadata":null,"text":"In general, by the early 20th century, the rise of mechanical assembly lines, was slammed by traditional craftsmen, across industries, fearing the loss of quality in mass-produced products (and the loss of their crafts).","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_52":{"__typename":"Paragraph","id":"b63ae440c23c_52","name":"4216","type":"P","href":null,"layout":null,"metadata":null,"text":"Even today, we see this pattern with digital art and AI-generated content, which some argue doesn’t have the “soul” of human-made creations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_53":{"__typename":"Paragraph","id":"b63ae440c23c_53","name":"9944","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #6 Skepticism of new technology gradually disappears as the technology evolves, proving its value and gaining acceptance.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":130,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_54":{"__typename":"Paragraph","id":"b63ae440c23c_54","name":"cad2","type":"H3","href":null,"layout":null,"metadata":null,"text":"Limitations of early printing practices","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_55":{"__typename":"Paragraph","id":"b63ae440c23c_55","name":"dedb","type":"P","href":null,"layout":null,"metadata":null,"text":"Early printed works were often religious texts, scholarly works, or legal documents, which had a narrow, educated, and often wealthy audience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_56":{"__typename":"Paragraph","id":"b63ae440c23c_56","name":"de92","type":"P","href":null,"layout":null,"metadata":null,"text":"Printing presses were typically located in cities—which had the infrastructure and money to support the business. However, at the time, most of the world's population was rural, so access to books and printed materials was well out of reach, for a long time.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_57":{"__typename":"Paragraph","id":"b63ae440c23c_57","name":"8d42","type":"P","href":null,"layout":null,"metadata":null,"text":"The broader market for entertainment, news, or practical information had yet to be developed to a degree that would drive mass production of books, pamphlets, or any other sort of reading material.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_58":{"__typename":"Paragraph","id":"b63ae440c23c_58","name":"4f14","type":"P","href":null,"layout":null,"metadata":null,"text":"Slowly, the development of better inks, more durable types, and more efficient presses gradually improved the speed and quality of printed materials.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_59":{"__typename":"Paragraph","id":"b63ae440c23c_59","name":"bd38","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #7: What is “good enough” stifles transformation. True disruption happens when market pressure forces outdated techniques to become obsolete.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":150,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_60":{"__typename":"Paragraph","id":"b63ae440c23c_60","name":"484d","type":"H3","href":null,"layout":null,"metadata":null,"text":"The industrial vs. digital revolution","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_61":{"__typename":"Paragraph","id":"b63ae440c23c_61","name":"f6a1","type":"P","href":null,"layout":null,"metadata":null,"text":"Among the most significant innovations in printing was the steam-powered printing press, which emerged in the early 19th century.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_62":{"__typename":"Paragraph","id":"b63ae440c23c_62","name":"9bd3","type":"P","href":null,"layout":null,"metadata":null,"text":"Industrialization ushered in a broad societal shift toward efficiency, and automation, and a new accessibility to products and services that were previously unheard of for most people. Printers could now produce thousands of copies daily, making printed materials common.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_63":{"__typename":"Paragraph","id":"b63ae440c23c_63","name":"fdf1","type":"P","href":null,"layout":null,"metadata":null,"text":"The upshot of this was the birth of mass communication. As newspapers and books became more affordable, public literacy skyrocketed, and ideas spread across all social classes, not just the elite.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_64":{"__typename":"Paragraph","id":"b63ae440c23c_64","name":"b9f6","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #8: Efficiency and automation don’t just add value to products — they are the key to making those products accessible.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":127,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_65":{"__typename":"Paragraph","id":"b63ae440c23c_65","name":"94b5","type":"P","href":null,"layout":null,"metadata":null,"text":"Just like in the early days of mass printing, the evolution of digital media was fraught with issues concerning quality versus convenience, and whether speed and accessibility came at the cost of depth and professionalism. Old traditions give way to new standards, sometimes with significant downgrades at first. Those who remember the World Wide Web in the 1990’s can attest to that.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_66":{"__typename":"Paragraph","id":"b63ae440c23c_66","name":"3801","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeway # 9 Technological advancements in communication present a tedious balance between innovation and tradition.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":115,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_67":{"__typename":"Paragraph","id":"b63ae440c23c_67","name":"1527","type":"H3","href":null,"layout":null,"metadata":null,"text":"The dark side of mass communication","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_68":{"__typename":"Paragraph","id":"b63ae440c23c_68","name":"cda3","type":"P","href":null,"layout":null,"metadata":null,"text":"One of the less obvious but significant effects of the Industrial Revolution on printing was its influence on cultural language and stereotypes. As steam-powered presses increased production, they also made it easier to reproduce common phrases, imagery, and motifs — the building blocks of cultural clichés.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_69":{"__typename":"Paragraph","id":"b63ae440c23c_69","name":"2366","type":"P","href":null,"layout":null,"metadata":null,"text":"The more frequently certain ideas or expressions appeared in print, the more they became engrained in the public consciousness. The rapid reproduction of content gave rise to the concept of “stereotyping” in both a literal and figurative sense–printing presses used metal “stereotype” plates (a single cast of a block of text, also known as a “cliché) for quick reprints, but this mechanized reproduction also fed into the overuse of familiar narratives, locking them into the public mindset.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_70":{"__typename":"Paragraph","id":"b63ae440c23c_70","name":"4ae4","type":"P","href":null,"layout":null,"metadata":null,"text":"This concept of “cliché” extends beyond just repetitive blocks of print; it not only became a vocabulary word, but a real danger to society.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_71":{"__typename":"Paragraph","id":"b63ae440c23c_71","name":"7753","type":"P","href":null,"layout":null,"metadata":null,"text":"Standardization sounds great, but cementing patterns of thought, creating stereotypes, promoting misinformation, and weaponizing propaganda are all byproducts of technology gone wrong.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_72":{"__typename":"Paragraph","id":"b63ae440c23c_72","name":"35d5","type":"P","href":null,"layout":null,"metadata":null,"text":"If this sounds familiar, it should. This is not unlike today’s digital age, where repeated algorithms and automation threaten to make digital content increasingly formulaic, limiting creative expression, and creating feedback loops in the echo-chambers we all live in today.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_73":{"__typename":"Paragraph","id":"b63ae440c23c_73","name":"5ac5","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #10: Without proper guardrails, the power of mass communication can amplify misunderstandings and reinforce harmful beliefs.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":133,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_74":{"__typename":"Paragraph","id":"b63ae440c23c_74","name":"95cf","type":"P","href":null,"layout":null,"metadata":null,"text":"Let’s consider how the terminology from the printing world has crept into our digital age. Words like “font,” “typeface,” “leading,” and “kerning” have their origins in the physical process of typesetting and printing and continue to dominate modern design language, even when they barely make sense, for instance, using the words “page” or “canvas” to describe a digital experience.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":103,"end":107,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":111,"end":119,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":123,"end":130,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":138,"end":145,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":332,"end":340,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":342,"end":350,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":361,"end":362,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_75":{"__typename":"Paragraph","id":"b63ae440c23c_75","name":"1816","type":"P","href":null,"layout":null,"metadata":null,"text":"These remnants of the printing era not only reflect the technical evolution of media but also hint at a deeper cultural impact. The persistence of this jargon shows how deeply rooted print culture was in shaping our understanding of communication and design, even as we transition to digital formats.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_76":{"__typename":"Paragraph","id":"b63ae440c23c_76","name":"18d6","type":"P","href":null,"layout":null,"metadata":null,"text":"In this way, the legacy of printing has extended into our cultural framework, influencing how we approach new technologies. The rise of clichés in print paved the way for digital shorthand and memes, while the enduring jargon reminds us that every medium carries with it the weight of its history.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_77":{"__typename":"Paragraph","id":"b63ae440c23c_77","name":"382b","type":"P","href":null,"layout":null,"metadata":null,"text":"As we stand on the cusp of new revolutions in technology, the challenge is not just to innovate but to avoid falling into the traps of stereotyping—to ensure that we create something truly new rather than simply reproducing the past. Already with the rise of new technologies, clichés of the digital era are entering our new AI-driven future.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_78":{"__typename":"Paragraph","id":"b63ae440c23c_78","name":"505b","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #11: With every new leap in technology, vestiges of past concepts are slow to disappear from our common understanding of things","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":136,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_79":{"__typename":"Paragraph","id":"b63ae440c23c_79","name":"0a3c","type":"P","href":null,"layout":null,"metadata":null,"text":"Interestingly, the early forms of movable type were modeled after the calligraphic letterforms of medieval monks, a reflection of their cultural heritage. The bonds between craftsmanship and culture have always been strong, and it is likely that today’s standards will eventually become tomorrow’s legacies—vestiges trapped in our common memory.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_80":{"__typename":"Paragraph","id":"b63ae440c23c_80","name":"ed5b","type":"H3","href":null,"layout":null,"metadata":null,"text":"Echoes of the past: how language and culture shape our technology future","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_81":{"__typename":"Paragraph","id":"b63ae440c23c_81","name":"9660","type":"P","href":null,"layout":null,"metadata":null,"text":"What other phrases may become quaint, classic, or standard as we stand on the brink of the Gen AI era? Change is inevitable. We may not even refer to it as AI in a few years — just as we no longer talk about the “information superhighway,” a term that was quickly retired. Just as “Cyber Monday” makes little sense anymore — nearly everyone has a personal computer or smartphone now.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":213,"end":238,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":282,"end":294,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_82":{"__typename":"Paragraph","id":"b63ae440c23c_82","name":"dba0","type":"P","href":null,"layout":null,"metadata":null,"text":"Emerging technologies don’t just grapple with legacy jargon; they compel the reshape of entire processes and workflows, forcing industries to adapt or risk facing consequences, or worse, obsolescence.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_83":{"__typename":"Paragraph","id":"b63ae440c23c_83","name":"7d66","type":"P","href":null,"layout":null,"metadata":null,"text":"Case in point, the system of HTML, starts with a simple text prompt, much like the earliest forms of digital communication. Think about this: we launched the information age with a DOS prompt — a blinking cursor waiting for input — and it’s still part of the tech stack we use today. Ostensibly, it’s not so different from Ben Franklin, laboring in his Philadelphia print shop with a wooden tray and pieces of lead text, it’s just that our tools have gotten a lot fancier.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_84":{"__typename":"Paragraph","id":"b63ae440c23c_84","name":"e55f","type":"H3","href":null,"layout":null,"metadata":null,"text":"A parallel universe, with a divergent internet","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_85":{"__typename":"Paragraph","id":"b63ae440c23c_85","name":"d9c5","type":"P","href":null,"layout":null,"metadata":null,"text":"Imagine, in a parallel universe, that the timing was different. What if Apple and Adobe had teamed up to develop a graphical web browser in 1990? In this scenario, everyone would have been browsing the internet with a slick, low-bandwidth experience in PDF instead of clunky HTML. Perhaps HTML would have faded into obscurity, and EPS dominated all the web standards.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_86":{"__typename":"Paragraph","id":"b63ae440c23c_86","name":"8187","type":"P","href":null,"layout":null,"metadata":null,"text":"What impact might that have had on software engineering and web design today? Would the internet be fundamentally different if it had started with a creative design system already in place? While the questions are hyperbolic, it underscores a broader truth: technology, adoption, and design standards often intersect in ways that shape our world in curious and unexpected ways.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_87":{"__typename":"Paragraph","id":"b63ae440c23c_87","name":"44c1","type":"P","href":null,"layout":null,"metadata":null,"text":"As technology advances at an ever-increasing pace, we must consider how cultural legacies might impact our progress. A great example: the QWERTY keyboard. Originally designed in the 19th century to prevent mechanical typewriter jams, this layout was intended to slow down typing speed.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_88":{"__typename":"Paragraph","id":"b63ae440c23c_88","name":"e7b7","type":"P","href":null,"layout":null,"metadata":null,"text":"Ironically, this cultural artifact has persisted, limiting typing efficiency for generations. This raises the question: how many other outdated cultural legacies might be inadvertently hindering technological progress in ways we’ve yet to recognize?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_89":{"__typename":"Paragraph","id":"b63ae440c23c_89","name":"d581","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #12: The adoption of a system has its own momentum and can ultimately determine the trajectory of a new technology.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":124,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*WNeXBEoAlrp89tLKrRLAKA.png":{"__typename":"ImageMetadata","id":"1*WNeXBEoAlrp89tLKrRLAKA.png","originalHeight":1812,"originalWidth":2507,"focusPercentX":null,"focusPercentY":null,"alt":"A graphic showing the increasing speed of technology adoption in print, radio, television, Internet, social media and generative AI"},"Paragraph:b63ae440c23c_90":{"__typename":"Paragraph","id":"b63ae440c23c_90","name":"1d25","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*WNeXBEoAlrp89tLKrRLAKA.png"},"text":"Images generated by the author in Flux.1","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_91":{"__typename":"Paragraph","id":"b63ae440c23c_91","name":"4b48","type":"H3","href":null,"layout":null,"metadata":null,"text":"Digital revolution, slow evolution of design systems","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_92":{"__typename":"Paragraph","id":"b63ae440c23c_92","name":"035a","type":"P","href":null,"layout":null,"metadata":null,"text":"By the early 1990s, the rise of graphical browsers coincided with the growing power of personal computers and rapid advances in desktop publishing software. Programs like QuarkXPress, and later Adobe InDesign, enabled teams to maintain design systems by sharing reusable pattern libraries.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_93":{"__typename":"Paragraph","id":"b63ae440c23c_93","name":"62c1","type":"P","href":null,"layout":null,"metadata":null,"text":"While the internet rose very quickly, the widespread adoption of systematic design didn’t take hold until decades later. Why?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_94":{"__typename":"Paragraph","id":"b63ae440c23c_94","name":"f824","type":"P","href":null,"layout":null,"metadata":null,"text":"As a designer, I’ve pondered this for a long time. Could the limited reach of early design tools have hindered more collaborative workflows? Consider that desktop publishing software, while powerful and transformative, was primarily used only by designers. These designers were often focused on guiding front-end development rather than creating comprehensive, reusable systems for digital publishing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_95":{"__typename":"Paragraph","id":"b63ae440c23c_95","name":"8477","type":"P","href":null,"layout":null,"metadata":null,"text":"During the Web 1.0 era, manual processes were the norm. Designers and developers worked in isolation, using different tools to create web pages. Engineering handoff typically consisted of a few static prototypes, information architecture blueprints, functional specs, and copy decks, all of which had to be manually input and interpreted by developers.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_96":{"__typename":"Paragraph","id":"b63ae440c23c_96","name":"eb86","type":"BQ","href":null,"layout":null,"metadata":null,"text":"Takeaway #13: Early digital design systems were challenged by fragmented collaboration between designers and engineers, limiting cohesive solutions.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":148,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_97":{"__typename":"Paragraph","id":"b63ae440c23c_97","name":"863e","type":"P","href":null,"layout":null,"metadata":null,"text":"UX design was still maturing, with pioneers like the Nielsen Norman Group providing guidance and training. Despite the evolving design practice, the tools designers used — primarily Adobe Photoshop — remained stagnant for nearly two decades.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_98":{"__typename":"Paragraph","id":"b63ae440c23c_98","name":"892e","type":"P","href":null,"layout":null,"metadata":null,"text":"In 2015, I worked on a project for a financial data portal. Our team quickly realized that the scope of the project was much too large for Photoshop, which struggled with managing hundreds of screens, dashboards, and data visualizations. Instead, we opted for Adobe InDesign, which allowed us to manage objects iteratively and effectively within an agile workflow.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_99":{"__typename":"Paragraph","id":"b63ae440c23c_99","name":"37fd","type":"P","href":null,"layout":null,"metadata":null,"text":"In hindsight, this decision was a success, but it was controversial at the time due to adoption patterns. InDesign was primarily used by print designers for its object-oriented approach, which allowed large image files to be managed separately from other objects. It was ideal for large-scale print projects but perceived as less suitable for digital projects.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_100":{"__typename":"Paragraph","id":"b63ae440c23c_100","name":"2f01","type":"H3","href":null,"layout":null,"metadata":null,"text":"Why Adobe InDesign failed to dominate digital design systems","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_101":{"__typename":"Paragraph","id":"b63ae440c23c_101","name":"5bea","type":"P","href":null,"layout":null,"metadata":null,"text":"Several factors prevented InDesign from catching on with digital designers. First, the need for sophisticated design systems didn’t arise in typical Web 1.0 workflows. Second, InDesign’s complexity was considered overkill for fast-paced web design. Finally, its use of points (a printing measurement system) instead of pixels hindered its ability to produce pixel-perfect digital designs. By the time Adobe addressed this with InDesign Version 6 in 2012, it was too late for widespread adoption by digital designers.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*WG6kd20L_EPxIJmY0xgynw.png":{"__typename":"ImageMetadata","id":"1*WG6kd20L_EPxIJmY0xgynw.png","originalHeight":1276,"originalWidth":2560,"focusPercentX":null,"focusPercentY":null,"alt":"a diagram showing the atomic pyramid structure of a static design system"},"Paragraph:b63ae440c23c_102":{"__typename":"Paragraph","id":"b63ae440c23c_102","name":"2073","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*WG6kd20L_EPxIJmY0xgynw.png"},"text":"Early design systems still contained legacy “Web 1.0” workflows, with significant gaps in processes. Infographic by the author.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":101,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_103":{"__typename":"Paragraph","id":"b63ae440c23c_103","name":"a273","type":"H3","href":null,"layout":null,"metadata":null,"text":"How did the long winter of design systems end?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_104":{"__typename":"Paragraph","id":"b63ae440c23c_104","name":"12b4","type":"P","href":null,"layout":null,"metadata":null,"text":"The slow evolution of design systems from the 1990s through the 2010s reflects the limitations of the tools available at the time and the separation between design and development processes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_105":{"__typename":"Paragraph","id":"b63ae440c23c_105","name":"365e","type":"P","href":null,"layout":null,"metadata":null,"text":"As the demand for scalable, systematic design grew in digital media, new software, platforms, and subsequent workflows emerged to fill the gap, shaping how we think about design systems today.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_106":{"__typename":"Paragraph","id":"b63ae440c23c_106","name":"eb53","type":"P","href":null,"layout":null,"metadata":null,"text":"Takeaway #14: Technology adoption isn’t just about the tool—it’s about the right solution meeting the evolving needs of industry—at the right time.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_107":{"__typename":"Paragraph","id":"b63ae440c23c_107","name":"b2b8","type":"P","href":null,"layout":null,"metadata":null,"text":"By the early 2010s, everything began to change. Social media platforms democratized publishing, unleashing a tidal wave of creative output across the web. Businesses that once viewed the internet as a digital brochure started exploring new possibilities as server technology lowered the cost of ownership. This was called the beginning of “Web 2.0.”","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_108":{"__typename":"Paragraph","id":"b63ae440c23c_108","name":"d8c4","type":"P","href":null,"layout":null,"metadata":null,"text":"The slow burn of incremental change suddenly accelerated. With new tools and more widespread adoption, design systems became essential. UX practices evolved rapidly, and the convergence of design tools, technology, and adoption gave birth to the design systems we use today.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_109":{"__typename":"Paragraph","id":"b63ae440c23c_109","name":"3e75","type":"P","href":null,"layout":null,"metadata":null,"text":"As we look toward the future, the history of design systems continues to offer insights. We’re on the cusp of another technological revolution in AI. What will this mean for design? Just as the printing press transformed communication, AI may reshape the way we create things and interact with each other.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_110":{"__typename":"Paragraph","id":"b63ae440c23c_110","name":"435f","type":"P","href":null,"layout":null,"metadata":null,"text":"The only certainty is change. As we move forward, we can look to the past for guidance, learning from the lessons of history to make informed decisions about where to invest our time, energy, and creativity in the years to come. But before we get to that, let’s examine some more recent history, the period between 2016–2024, where the practice of design systems has come to mature, and is directly shaping the conversation we need to have today, in the next article in this series.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":314,"end":324,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":454,"end":481,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_111":{"__typename":"Paragraph","id":"b63ae440c23c_111","name":"59cd","type":"H4","href":null,"layout":null,"metadata":null,"text":"A Brief History of Design Systems, Part 2 (2016–2024)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":53,"href":"https:\u002F\u002Fmedium.com\u002F@jgulsen_97727\u002Fa-brief-history-of-design-systems-part-2-fb00a7af7985","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:b63ae440c23c_112":{"__typename":"Paragraph","id":"b63ae440c23c_112","name":"2b9e","type":"P","href":null,"layout":null,"metadata":null,"text":"Thank you for reading. Please let me know your thoughts in the comments below.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"PostViewerEdge:postId:d661a7c70002-viewerId:lo_ffc1433050f6":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:d661a7c70002-viewerId:lo_ffc1433050f6"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:design-thinking":{"__typename":"Tag","id":"design-thinking","displayTitle":"Design Thinking","normalizedTagSlug":"design-thinking"},"Tag:design-strategy":{"__typename":"Tag","id":"design-strategy","displayTitle":"Design Strategy","normalizedTagSlug":"design-strategy"},"Tag:historical-analysis":{"__typename":"Tag","id":"historical-analysis","displayTitle":"Historical Analysis","normalizedTagSlug":"historical-analysis"},"Tag:digital-transformation":{"__typename":"Tag","id":"digital-transformation","displayTitle":"Digital Transformation","normalizedTagSlug":"digital-transformation"},"Post:d661a7c70002":{"__typename":"Post","id":"d661a7c70002","collection":null,"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"c95a","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:b63ae440c23c_0"},{"__ref":"Paragraph:b63ae440c23c_1"},{"__ref":"Paragraph:b63ae440c23c_2"},{"__ref":"Paragraph:b63ae440c23c_3"},{"__ref":"Paragraph:b63ae440c23c_4"},{"__ref":"Paragraph:b63ae440c23c_5"},{"__ref":"Paragraph:b63ae440c23c_6"},{"__ref":"Paragraph:b63ae440c23c_7"},{"__ref":"Paragraph:b63ae440c23c_8"},{"__ref":"Paragraph:b63ae440c23c_9"},{"__ref":"Paragraph:b63ae440c23c_10"},{"__ref":"Paragraph:b63ae440c23c_11"},{"__ref":"Paragraph:b63ae440c23c_12"},{"__ref":"Paragraph:b63ae440c23c_13"},{"__ref":"Paragraph:b63ae440c23c_14"},{"__ref":"Paragraph:b63ae440c23c_15"},{"__ref":"Paragraph:b63ae440c23c_16"},{"__ref":"Paragraph:b63ae440c23c_17"},{"__ref":"Paragraph:b63ae440c23c_18"},{"__ref":"Paragraph:b63ae440c23c_19"},{"__ref":"Paragraph:b63ae440c23c_20"},{"__ref":"Paragraph:b63ae440c23c_21"},{"__ref":"Paragraph:b63ae440c23c_22"},{"__ref":"Paragraph:b63ae440c23c_23"},{"__ref":"Paragraph:b63ae440c23c_24"},{"__ref":"Paragraph:b63ae440c23c_25"},{"__ref":"Paragraph:b63ae440c23c_26"},{"__ref":"Paragraph:b63ae440c23c_27"},{"__ref":"Paragraph:b63ae440c23c_28"},{"__ref":"Paragraph:b63ae440c23c_29"},{"__ref":"Paragraph:b63ae440c23c_30"},{"__ref":"Paragraph:b63ae440c23c_31"},{"__ref":"Paragraph:b63ae440c23c_32"},{"__ref":"Paragraph:b63ae440c23c_33"},{"__ref":"Paragraph:b63ae440c23c_34"},{"__ref":"Paragraph:b63ae440c23c_35"},{"__ref":"Paragraph:b63ae440c23c_36"},{"__ref":"Paragraph:b63ae440c23c_37"},{"__ref":"Paragraph:b63ae440c23c_38"},{"__ref":"Paragraph:b63ae440c23c_39"},{"__ref":"Paragraph:b63ae440c23c_40"},{"__ref":"Paragraph:b63ae440c23c_41"},{"__ref":"Paragraph:b63ae440c23c_42"},{"__ref":"Paragraph:b63ae440c23c_43"},{"__ref":"Paragraph:b63ae440c23c_44"},{"__ref":"Paragraph:b63ae440c23c_45"},{"__ref":"Paragraph:b63ae440c23c_46"},{"__ref":"Paragraph:b63ae440c23c_47"},{"__ref":"Paragraph:b63ae440c23c_48"},{"__ref":"Paragraph:b63ae440c23c_49"},{"__ref":"Paragraph:b63ae440c23c_50"},{"__ref":"Paragraph:b63ae440c23c_51"},{"__ref":"Paragraph:b63ae440c23c_52"},{"__ref":"Paragraph:b63ae440c23c_53"},{"__ref":"Paragraph:b63ae440c23c_54"},{"__ref":"Paragraph:b63ae440c23c_55"},{"__ref":"Paragraph:b63ae440c23c_56"},{"__ref":"Paragraph:b63ae440c23c_57"},{"__ref":"Paragraph:b63ae440c23c_58"},{"__ref":"Paragraph:b63ae440c23c_59"},{"__ref":"Paragraph:b63ae440c23c_60"},{"__ref":"Paragraph:b63ae440c23c_61"},{"__ref":"Paragraph:b63ae440c23c_62"},{"__ref":"Paragraph:b63ae440c23c_63"},{"__ref":"Paragraph:b63ae440c23c_64"},{"__ref":"Paragraph:b63ae440c23c_65"},{"__ref":"Paragraph:b63ae440c23c_66"},{"__ref":"Paragraph:b63ae440c23c_67"},{"__ref":"Paragraph:b63ae440c23c_68"},{"__ref":"Paragraph:b63ae440c23c_69"},{"__ref":"Paragraph:b63ae440c23c_70"},{"__ref":"Paragraph:b63ae440c23c_71"},{"__ref":"Paragraph:b63ae440c23c_72"},{"__ref":"Paragraph:b63ae440c23c_73"},{"__ref":"Paragraph:b63ae440c23c_74"},{"__ref":"Paragraph:b63ae440c23c_75"},{"__ref":"Paragraph:b63ae440c23c_76"},{"__ref":"Paragraph:b63ae440c23c_77"},{"__ref":"Paragraph:b63ae440c23c_78"},{"__ref":"Paragraph:b63ae440c23c_79"},{"__ref":"Paragraph:b63ae440c23c_80"},{"__ref":"Paragraph:b63ae440c23c_81"},{"__ref":"Paragraph:b63ae440c23c_82"},{"__ref":"Paragraph:b63ae440c23c_83"},{"__ref":"Paragraph:b63ae440c23c_84"},{"__ref":"Paragraph:b63ae440c23c_85"},{"__ref":"Paragraph:b63ae440c23c_86"},{"__ref":"Paragraph:b63ae440c23c_87"},{"__ref":"Paragraph:b63ae440c23c_88"},{"__ref":"Paragraph:b63ae440c23c_89"},{"__ref":"Paragraph:b63ae440c23c_90"},{"__ref":"Paragraph:b63ae440c23c_91"},{"__ref":"Paragraph:b63ae440c23c_92"},{"__ref":"Paragraph:b63ae440c23c_93"},{"__ref":"Paragraph:b63ae440c23c_94"},{"__ref":"Paragraph:b63ae440c23c_95"},{"__ref":"Paragraph:b63ae440c23c_96"},{"__ref":"Paragraph:b63ae440c23c_97"},{"__ref":"Paragraph:b63ae440c23c_98"},{"__ref":"Paragraph:b63ae440c23c_99"},{"__ref":"Paragraph:b63ae440c23c_100"},{"__ref":"Paragraph:b63ae440c23c_101"},{"__ref":"Paragraph:b63ae440c23c_102"},{"__ref":"Paragraph:b63ae440c23c_103"},{"__ref":"Paragraph:b63ae440c23c_104"},{"__ref":"Paragraph:b63ae440c23c_105"},{"__ref":"Paragraph:b63ae440c23c_106"},{"__ref":"Paragraph:b63ae440c23c_107"},{"__ref":"Paragraph:b63ae440c23c_108"},{"__ref":"Paragraph:b63ae440c23c_109"},{"__ref":"Paragraph:b63ae440c23c_110"},{"__ref":"Paragraph:b63ae440c23c_111"},{"__ref":"Paragraph:b63ae440c23c_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-very-brief-history-of-design-systems-part-1-d661a7c70002","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"design"}],"isPublished":true,"latestPublishedVersion":"b63ae440c23c","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":5},"clapCount":397,"allowResponses":true,"isLimitedState":false,"title":"A Brief History of Design Systems, Part 1","isSeries":false,"sequence":null,"uniqueSlug":"a-very-brief-history-of-design-systems-part-1-d661a7c70002","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1730736572312,"readingTime":15.25566037735849,"previewContent":{"__typename":"PreviewContent","subtitle":"Looking back at early design systems can reveal timeless insights to inform today’s digital transformations"},"previewImage":{"__ref":"ImageMetadata:1*r14fAfrEC-qfvhcYZAUqGw.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1729192269364,"updatedAt":1731628986874,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:d661a7c70002-viewerId:lo_ffc1433050f6"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:design-systems"},{"__ref":"Tag:design-thinking"},{"__ref":"Tag:design-strategy"},{"__ref":"Tag:historical-analysis"},{"__ref":"Tag:digital-transformation"}],"isNewsletter":false,"statusForCollection":null,"pendingCollection":null,"detectedLanguage":"en","wordCount":3791,"layerCake":1,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"MISS"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.b2314f6d.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.24534aeb.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/6349.b071a958.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/7079.67349d50.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.a2d9f6a1.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.3d049572.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.c8a11795.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:'8e6f7a173deaa0aa',t:'MTczMjM0NzI2OC4wMDAwMDA='};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>