{"id":6973,"date":"2024-10-06T14:03:00","date_gmt":"2024-10-06T08:33:00","guid":{"rendered":"https:\/\/laveshsumant.com\/?p=6973"},"modified":"2026-08-23T19:46:02","modified_gmt":"2026-08-23T14:16:02","slug":"governing-telstra-au-design-system-nobody-owns-alone","status":"publish","type":"post","link":"https:\/\/laveshsumant.com\/index.php\/2024\/10\/06\/governing-telstra-au-design-system-nobody-owns-alone\/","title":{"rendered":"Governing Telstra AU design system nobody owns alone."},"content":{"rendered":"\n
\n
\n

<\/p>\n\n\n\n\n\n\n\n\nDesign System Governance at Scale \u2014 Case Study<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper:#FAFAF8;\n --paper-dim:#F4F4F4;\n --card:#FFFFFF;\n --ink:#17171C;\n --ink-soft:#4A4A52;\n --ink-faint:#8A8A92;\n --line:#E1E1DE;\n --line-soft:#EDEDEA;\n --blue:#001E82;\n --blue-l:#0064D2;\n --purple:#35237F;\n --teal:#025450;\n --teal-l:#008381;\n --amber:#F05A00;\n --radius:2px;\n --maxw:1120px;\n --display: 'Space Grotesk', sans-serif;\n --body: 'Inter', sans-serif;\n --mono: 'IBM Plex Mono', monospace;\n }\n\n *{box-sizing:border-box;}\n html{scroll-behavior:smooth;}\n @media (prefers-reduced-motion: reduce){\n html{scroll-behavior:auto;}\n *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}\n }\n\n body{\n margin:0;\n background:var(--paper);\n color:var(--ink);\n font-family:var(--body);\n font-size:16px;\n line-height:1.6;\n -webkit-font-smoothing:antialiased;\n }\n\n a{color:inherit;}\n\n .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}\n @media (max-width:720px){ .wrap{padding:0 20px;} }\n\n \/* ---------- header \/ spec bar ---------- *\/\n .specbar{\n border-bottom:1px solid var(--line);\n background:var(--paper);\n position:sticky; top:0; z-index:50;\n backdrop-filter:blur(6px);\n background:rgba(250,250,248,0.92);\n }\n .specbar .wrap{\n display:flex; align-items:center; justify-content:space-between;\n padding-top:16px; padding-bottom:16px;\n }\n .spec-label{\n font-family:var(--mono); font-size:11px; letter-spacing:0.08em;\n text-transform:uppercase; color:var(--ink-faint);\n }\n .spec-version{\n font-family:var(--mono); font-size:11px; text-align:right; color:var(--ink-faint);\n line-height:1.5;\n }\n .spec-version b{color:var(--ink);}\n\n \/* ---------- hero ---------- *\/\n .hero{padding:88px 0 56px; border-bottom:1px solid var(--line);}\n .eyebrow{\n font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;\n color:var(--blue); display:flex; align-items:center; gap:10px; margin-bottom:22px;\n }\n .eyebrow::before{content:\"\"; width:22px; height:2px; background:var(--blue); display:inline-block;}\n h1{\n font-family:var(--display); font-weight:600; font-size:clamp(38px,5.4vw,66px);\n line-height:1.04; letter-spacing:-0.01em; margin:0 0 20px; max-width:16ch;\n }\n .hero-sub{\n font-size:19px; color:var(--ink-soft); max-width:56ch; margin:0 0 40px; font-weight:400;\n }\n .hero-meta{\n display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line);\n }\n .hero-meta div{padding:18px 24px 0 0; border-right:1px solid var(--line-soft);}\n .hero-meta div:last-child{border-right:none;}\n .hero-meta .k{font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}\n .hero-meta .v{font-size:15px; font-weight:500;}\n @media (max-width:760px){\n .hero-meta{grid-template-columns:repeat(2,1fr); row-gap:22px;}\n .hero-meta div{border-right:none; padding-right:0;}\n }\n\n \/* ---------- sections ---------- *\/\n section{padding:72px 0; border-bottom:1px solid var(--line);}\n section:last-of-type{border-bottom:none;}\n .section-head{display:flex; align-items:baseline; gap:18px; margin-bottom:36px;}\n .section-num{font-family:var(--mono); font-size:12px; color:var(--ink-faint);}\n h2{\n font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,34px);\n letter-spacing:-0.01em; margin:0;\n }\n h3{font-family:var(--display); font-weight:600; font-size:19px; margin:0 0 10px;}\n p{margin:0 0 16px; color:var(--ink-soft);}\n p.lead{font-size:18px; color:var(--ink); max-width:70ch;}\n .cols-2{display:grid; grid-template-columns:1fr 1fr; gap:56px;}\n .cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}\n @media (max-width:820px){ .cols-2, .cols-3{grid-template-columns:1fr;} }\n\n \/* ---------- context stats ---------- *\/\n .context-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:44px; border:1px solid var(--line);}\n .context-stats div{background:var(--card); padding:22px 20px;}\n .context-stats .num{font-family:var(--display); font-size:28px; font-weight:600; color:var(--blue);}\n .context-stats .lab{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:6px; text-transform:uppercase; letter-spacing:.04em;}\n @media (max-width:760px){ .context-stats{grid-template-columns:repeat(2,1fr);} }\n\n \/* ---------- role tiles ---------- *\/\n .role-tile{\n border:1px solid var(--line); background:var(--card); padding:28px 26px;\n transition:border-color .2s ease, transform .2s ease;\n }\n .role-tile:hover{border-color:var(--blue); transform:translateY(-2px);}\n .role-tile .tag{\n font-family:var(--mono); font-size:10px; color:var(--card); background:var(--blue);\n display:inline-block; padding:3px 8px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;\n }\n .role-tile ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:14.5px;}\n .role-tile li{margin-bottom:6px;}\n\n \/* ---------- problem list ---------- *\/\n .problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-top:8px;}\n .problem-item{background:var(--card); padding:22px 24px; display:flex; gap:16px;}\n .problem-item .glyph{\n font-family:var(--mono); font-size:13px; color:var(--card); background:var(--purple);\n width:26px; height:26px; min-width:26px; display:flex; align-items:center; justify-content:center;\n }\n .problem-item p{margin:0; font-size:14.5px;}\n @media (max-width:760px){ .problem-grid{grid-template-columns:1fr;} }\n\n \/* ---------- governance model \/ signature element ---------- *\/\n .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--ink); margin-top:44px;}\n .tier{\n padding:30px 26px 26px; border-right:1px solid var(--ink); position:relative; cursor:default;\n background:var(--card); transition:background .25s ease;\n }\n .tier:last-child{border-right:none;}\n .tier:hover{background:var(--paper-dim);}\n .tier .tnum{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-bottom:18px;}\n .tier h4{font-family:var(--display); font-size:20px; margin:0 0 10px; font-weight:600;}\n .tier p{font-size:13.5px; margin-bottom:14px;}\n .tier .ex{\n font-family:var(--mono); font-size:11px; color:var(--ink-faint); border-top:1px dashed var(--line);\n padding-top:12px; line-height:1.7;\n }\n .tier.core{border-top:4px solid var(--blue);}\n .tier.extended{border-top:4px solid var(--teal);}\n .tier.pattern{border-top:4px solid var(--purple);}\n @media (max-width:760px){\n .tiers{grid-template-columns:1fr;}\n .tier{border-right:none; border-bottom:1px solid var(--ink);}\n .tier:last-child{border-bottom:none;}\n }\n\n .flow{display:flex; align-items:stretch; gap:0; margin-top:28px; flex-wrap:wrap;}\n .flow .step{\n flex:1; min-width:130px; border:1px solid var(--line); background:var(--card); padding:16px 16px 14px;\n font-size:13px; position:relative;\n }\n .flow .step .n{font-family:var(--mono); font-size:10px; color:var(--blue); display:block; margin-bottom:8px;}\n .flow .arrow{\n display:flex; align-items:center; justify-content:center; width:28px; color:var(--ink-faint); font-family:var(--mono);\n }\n @media (max-width:760px){ .flow{flex-direction:column;} .flow .arrow{transform:rotate(90deg); width:100%; padding:2px 0;} }\n\n \/* ---------- component gallery ---------- *\/\n .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:12px;}\n @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr);} }\n @media (max-width:600px){ .gallery{grid-template-columns:1fr;} }\n .g-card{border:1px solid var(--line); background:var(--card); overflow:hidden;}\n .g-visual{\n height:150px; background:var(--paper-dim); display:flex; align-items:center; justify-content:center;\n border-bottom:1px solid var(--line); position:relative;\n }\n .g-meta{padding:16px 18px 20px;}\n .g-meta .name{font-family:var(--display); font-weight:600; font-size:15px; margin-bottom:6px;}\n .g-meta .desc{font-size:13px; color:var(--ink-soft); margin:0;}\n\n \/* mini illustrations *\/\n .ill-palette{display:flex; gap:6px;}\n .ill-palette span{width:26px; height:56px; display:block; border-radius:1px;}\n .ill-donut{width:70px; height:70px; border-radius:50%; background:\n conic-gradient(var(--blue) 0deg 160deg, var(--teal-l) 160deg 260deg, var(--purple) 260deg 320deg, var(--line) 320deg 360deg);\n position:relative;}\n .ill-donut::after{content:\"\"; position:absolute; inset:16px; background:var(--paper-dim); border-radius:50%;}\n .ill-bars{display:flex; align-items:flex-end; gap:5px; height:70px;}\n .ill-bars span{width:8px; background:var(--blue-l); display:block;}\n .ill-drop{width:100px; height:64px; border:1.5px dashed var(--ink-faint); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; color:var(--ink-faint); text-align:center;}\n .ill-carousel{display:flex; gap:4px;}\n .ill-carousel span{width:10px; height:10px; border-radius:50%; background:var(--line);}\n .ill-carousel span.active{background:var(--blue);}\n .ill-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px;}\n .ill-grid span{width:22px; height:22px; background:var(--blue-l); opacity:.85;}\n .ill-video{width:70px; height:70px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center;}\n .ill-video .tri{width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff; margin-left:4px;}\n\n .ill-gridsys{display:flex; align-items:stretch; height:74px; gap:3px;}\n .ill-gridsys .m{width:10px; background:var(--purple); opacity:.55;}\n .ill-gridsys .g{width:5px; background:var(--teal-l); opacity:.55;}\n .ill-gridsys .c{width:12px; background:var(--line);}\n .ill-gridsys .c.hi{background:var(--blue-l); opacity:.6;}\n\n .ill-accordion{display:flex; flex-direction:column; gap:6px; width:110px;}\n .ill-accordion .row{display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--line); padding:6px 9px; font-family:var(--mono); font-size:9px; color:var(--ink-faint);}\n .ill-accordion .row.open{border-color:var(--blue); color:var(--blue);}\n .ill-accordion .row .sym{font-weight:600;}\n\n .ill-activity{display:flex; flex-direction:column; gap:14px; padding-left:6px;}\n .ill-activity .node{display:flex; align-items:center; gap:8px;}\n .ill-activity .dot{width:9px; height:9px; border-radius:50%; background:var(--teal-l); flex:none;}\n .ill-activity .node:nth-child(2) .dot{background:var(--line);}\n .ill-activity .bar{width:64px; height:5px; background:var(--paper-dim); border:1px solid var(--line);}\n\n .ill-table{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:110px;}\n .ill-table span{height:10px; background:var(--line);}\n .ill-table span.hd{background:var(--ink-faint);}\n\n .ill-alertmodal{display:flex; flex-direction:column; gap:8px; width:110px;}\n .ill-alertmodal .card{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--blue); padding:7px 9px; font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-alertmodal .card.warn{border-left-color:var(--amber);}\n\n .ill-avatar2{display:flex; align-items:center; gap:8px;}\n .ill-avatar2 .ph{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--blue-l),var(--purple));}\n .ill-avatar2 .in{width:32px; height:32px; border-radius:50%; background:var(--paper-dim); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--ink-faint);}\n\n .ill-breadcrumb{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px; color:var(--ink-faint); flex-wrap:wrap; width:120px;}\n .ill-breadcrumb b{color:var(--blue); font-weight:500;}\n\n .ill-buttons{display:flex; flex-direction:column; gap:8px; width:104px;}\n .ill-buttons .b{text-align:center; font-family:var(--mono); font-size:9px; padding:6px 0; border-radius:1px;}\n .ill-buttons .b.pri{background:var(--blue); color:#fff;}\n .ill-buttons .b.sec{border:1px solid var(--blue); color:var(--blue);}\n .ill-buttons .b.warn{border:1px solid var(--amber); color:var(--amber);}\n\n .ill-calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; width:110px;}\n .ill-calendar span{width:11px; height:11px; background:var(--line);}\n .ill-calendar span.sel{background:var(--blue);}\n\n .ill-navchrome{display:flex; flex-direction:column; gap:6px; width:112px;}\n .ill-navchrome .bar{height:14px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; gap:4px; padding:0 6px;}\n .ill-navchrome .bar span{width:14px; height:3px; background:var(--ink-faint);}\n .ill-navchrome .bar.top span:first-child{background:var(--blue); width:8px; height:8px; border-radius:50%;}\n .ill-navchrome .bar.bottom{background:var(--paper-dim);}\n\n .ill-sectiontitle{display:flex; flex-direction:column; gap:6px; width:110px;}\n .ill-sectiontitle .h{width:80px; height:9px; background:var(--ink-faint);}\n .ill-sectiontitle .l{width:60px; height:9px; color:var(--blue); font-family:var(--mono); font-size:8px;}\n\n .ill-verticaltabs{display:flex; flex-direction:column; gap:5px; width:80px;}\n .ill-verticaltabs .t{font-family:var(--mono); font-size:8px; color:var(--ink-faint); border-left:2px solid transparent; padding-left:6px;}\n .ill-verticaltabs .t.on{color:var(--blue); border-left-color:var(--blue);}\n\n .ill-cards{position:relative; width:100px; height:70px;}\n .ill-cards .cc{position:absolute; width:52px; height:64px; background:var(--card); border:1px solid var(--line);}\n .ill-cards .cc:nth-child(1){left:0; top:6px;}\n .ill-cards .cc:nth-child(2){left:34px; top:0; border-color:var(--blue); border-width:2px;}\n\n .ill-dropdown{width:112px; border:1px solid var(--line); background:var(--card);}\n .ill-dropdown .field{padding:6px 8px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-dropdown .opt{padding:5px 8px; font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-dropdown .opt.sel{color:var(--blue);}\n\n .ill-filter{width:112px; display:flex; flex-direction:column; gap:6px;}\n .ill-filter .bar{display:flex; justify-content:space-between; border:1px solid var(--line); padding:5px 7px; font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-filter .chips{display:flex; gap:4px; flex-wrap:wrap;}\n .ill-filter .chip{background:var(--blue); color:#fff; font-family:var(--mono); font-size:7px; padding:2px 6px; border-radius:2px;}\n\n .ill-forminput{width:108px; display:flex; flex-direction:column; gap:4px;}\n .ill-forminput .lab{font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-forminput .fld{border-bottom:1px solid var(--blue); padding-bottom:4px; font-family:var(--mono); font-size:8px; color:var(--ink);}\n .ill-forminput .err{color:var(--amber); font-family:var(--mono); font-size:7px;}\n\n .ill-appstore{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}\n .ill-appstore .badge{background:var(--ink); color:#fff; font-family:var(--mono); font-size:7px; padding:5px 8px; border-radius:2px;}\n\n .ill-icongrid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; width:110px;}\n .ill-icongrid span{width:12px; height:12px; border:1.3px solid var(--ink-faint); border-radius:2px;}\n\n .ill-iconlabel{display:flex; flex-direction:column; align-items:center; gap:6px;}\n .ill-iconlabel .ic{width:22px; height:22px; background:var(--paper-dim); border:1px solid var(--blue);}\n .ill-iconlabel .lab{font-family:var(--mono); font-size:8px; color:var(--blue);}\n\n .ill-ratios{display:flex; align-items:flex-end; gap:5px;}\n .ill-ratios span{background:var(--blue-l); opacity:.75;}\n .ill-ratios .r1{width:30px; height:30px;}\n .ill-ratios .r2{width:34px; height:24px;}\n .ill-ratios .r3{width:36px; height:18px;}\n\n .ill-tile{display:flex; flex-direction:column; gap:14px; width:96px;}\n .ill-tile .row{display:flex; gap:8px; align-items:flex-start;}\n .ill-tile .dot{width:10px; height:10px; background:var(--blue); flex:none; margin-top:2px;}\n .ill-tile .txt{font-family:var(--mono); font-size:8px; color:var(--ink-faint); line-height:1.5;}\n\n .ill-lists{display:flex; flex-direction:column; gap:8px; width:112px;}\n .ill-lists .row{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:6px; font-family:var(--mono); font-size:8px; color:var(--ink-faint);}\n .ill-lists .row b{color:var(--ink);}\n\n .ill-spinner{width:44px; height:44px; border-radius:50%; border:4px solid var(--paper-dim); border-top-color:var(--blue); border-right-color:var(--purple);}\n\n .ill-navtabs{display:flex; gap:14px; font-family:var(--mono); font-size:9px; color:var(--ink-faint); border-bottom:1px solid var(--line); padding-bottom:6px;}\n .ill-navtabs .on{color:var(--blue); border-bottom:2px solid var(--blue); padding-bottom:6px; margin-bottom:-7px;}\n\n .ill-badges{display:flex; gap:10px; align-items:center;}\n .ill-badges .b{background:var(--amber); color:#fff; font-family:var(--mono); font-size:8px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}\n .ill-badges .b.blue{background:var(--blue);}\n .ill-badges .dot{width:7px; height:7px; border-radius:50%; background:var(--blue);}\n\n .ill-tracker{display:flex; flex-direction:column; gap:4px; padding-left:4px;}\n .ill-tracker .node{display:flex; align-items:center; gap:8px;}\n .ill-tracker .c{width:10px; height:10px; border-radius:50%; background:var(--blue); flex:none;}\n .ill-tracker .c.o{background:var(--card); border:1.5px solid var(--line);}\n .ill-tracker .bar{width:60px; height:5px; background:var(--paper-dim); border:1px solid var(--line);}\n\n .ill-tokens{display:flex; flex-direction:column; gap:5px; width:104px;}\n .ill-tokens .t{background:var(--ink-faint); height:6px;}\n .ill-tokens .t:nth-child(1){width:100%; background:var(--blue);}\n .ill-tokens .t:nth-child(2){width:80%;}\n .ill-tokens .t:nth-child(3){width:60%;}\n .ill-tokens .t:nth-child(4){width:40%;}\n\n \/* ---------- challenge \/ outcome cards ---------- *\/\n .stack-card{border:1px solid var(--line); background:var(--card); padding:26px 28px; margin-bottom:2px;}\n .stack-card .lbl{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber); margin-bottom:10px;}\n .stack-card .lbl.resp{color:var(--teal-l);}\n\n .outcome-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}\n .outcome-grid div{background:var(--card); padding:26px 20px; position:relative;}\n .outcome-grid .num{font-family:var(--display); font-size:32px; font-weight:600; color:var(--teal);}\n .outcome-grid .lab{font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.5;}\n .outcome-grid .hint{font-family:var(--mono); font-size:10px; color:var(--ink-faint); font-style:italic; margin-top:10px;}\n .outcome-grid .badge{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--amber); border:1px solid var(--amber); padding:2px 6px; text-transform:uppercase;}\n @media (max-width:760px){ .outcome-grid{grid-template-columns:repeat(2,1fr);} }\n\n .ba-list{border:1px solid var(--line); border-top:none;}\n .ba-row{display:grid; grid-template-columns:1fr 24px 1fr; align-items:center; gap:14px; padding:16px 20px; border-top:1px solid var(--line); font-size:13.5px;}\n .ba-row .before{color:var(--ink-faint); text-align:right;}\n .ba-row .after{color:var(--ink);}\n .ba-row .arrow{font-family:var(--mono); color:var(--teal); text-align:center;}\n @media (max-width:600px){ .ba-row{grid-template-columns:1fr; text-align:left;} .ba-row .before{text-align:left;} .ba-row .arrow{transform:rotate(90deg);} }\n\n \/* ---------- reflection ---------- *\/\n .quote{\n font-family:var(--display); font-size:clamp(20px,2.6vw,28px); font-weight:500; line-height:1.4;\n max-width:52ch; margin:0; color:var(--ink); border-left:3px solid var(--blue); padding-left:28px;\n }\n\n \/* ---------- footer ---------- *\/\n footer{padding:60px 0 80px;}\n .foot-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}\n .foot-name{font-family:var(--display); font-weight:600; font-size:22px;}\n .foot-note{font-family:var(--mono); font-size:11px; color:var(--ink-faint); max-width:44ch; line-height:1.7;}\n\n .fade{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}\n .fade.in{opacity:1; transform:translateY(0);}\n<\/style>\n<\/head>\n<body>\n\n\n\n <section class=\"hero\">\n <div class=\"wrap\">\n <div class=\"eyebrow\">Enterprise Design Systems \u00b7 Telstra<\/div>\n <p class=\"hero-sub\">How I helped a component library scale into a set of shared, enforceable rules \u2014 so dozens of squads building across an A\u2013Z system stayed consistent without slowing down.<\/p>\n <div class=\"hero-meta\">\n <div><div class=\"k\">Role<\/div><div class=\"v\">Contributor, Design System Team<\/div><\/div>\n <div><div class=\"k\">Organisation<\/div><div class=\"v\">Telstra (Enterprise DS)<\/div><\/div>\n <div><div class=\"k\">Focus<\/div><div class=\"v\">Components \u00b7 Governance \u00b7 QA<\/div><\/div>\n <div><div class=\"k\">Scale<\/div><div class=\"v\">Multi-squad, multi-brand<\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"context\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">01<\/span><h2>The context<\/h2><\/div>\n <p class=\"lead\">Telstra is Australia’s largest telecommunications company \u2014 mobile, broadband, entertainment and enterprise products, sold and serviced across many teams, campaigns and platforms. The design system I contributed to wasn’t a single component kit; it was an <strong>A\u2013Z library<\/strong> spanning content modules, data visualisation, form and media components, documented down to breakpoint, state and interaction \u2014 used by product squads who rarely spoke to each other day to day.<\/p>\n <p>At that scale, the hard part of a design system stops being “which components exist” and becomes “who decides what changes, how a new pattern earns its place, and how drift gets caught before it ships.” That’s the governance layer I worked in.<\/p>\n\n <div class=\"context-stats\">\n <div><div class=\"num\">A\u2013Z<\/div><div class=\"lab\">Component coverage<\/div><\/div>\n <div><div class=\"num\">4<\/div><div class=\"lab\">Brand colour systems<\/div><\/div>\n <div><div class=\"num\">4<\/div><div class=\"lab\">Responsive breakpoints spec’d<\/div><\/div>\n <div><div class=\"num\">Multi<\/div><div class=\"lab\">Product squads consuming the system<\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"role\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">02<\/span><h2>Where I worked in the system<\/h2><\/div>\n <p class=\"lead\" style=\"margin-bottom:36px;\">Three overlapping areas of responsibility \u2014 design and documentation for what the system contained, rules for how it changed, and audits to check what actually shipped matched what was specified.<\/p>\n <div class=\"cols-3\">\n <div class=\"role-tile\">\n <span class=\"tag\">Design & docs<\/span>\n <h3>Component design & documentation<\/h3>\n <ul>\n <li>Specified components across states \u2014 default, hover, focus, active, error, loading<\/li>\n <li>Documented usage at 320 \/ 768 \/ 1024 \/ 1360 breakpoints<\/li>\n <li>Wrote do’s \/ don’ts and content guidance alongside the visuals<\/li>\n <\/ul>\n <\/div>\n <div class=\"role-tile\">\n <span class=\"tag\">Governance<\/span>\n <h3>Contribution & versioning rules<\/h3>\n <ul>\n <li>Helped define how a new or modified component gets proposed, reviewed and approved<\/li>\n <li>Worked within a tiered model \u2014 see the model below \u2014 that set different bars for different kinds of change<\/li>\n <li>Kept version history so squads knew what changed and why<\/li>\n <\/ul>\n <\/div>\n <div class=\"role-tile\">\n <span class=\"tag\">QA<\/span>\n <h3>Cross-squad design audits<\/h3>\n <ul>\n <li>Reviewed shipped screens against the spec to catch silent drift<\/li>\n <li>Flagged one-off variants that should have been proposed as system changes<\/li>\n <li>Fed recurring issues back into the documentation, not just the ticket<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"problem\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">03<\/span><h2>What governance was actually solving<\/h2><\/div>\n <p class=\"lead\" style=\"margin-bottom:20px;\">A component library on its own doesn’t stop drift \u2014 it just gives drift better raw material. The recurring failure modes we were governing against:<\/p>\n <div class=\"problem-grid\">\n <div class=\"problem-item\"><span class=\"glyph\">01<\/span><p><strong>Parallel variants.<\/strong> Two squads solving the same UI problem \u2014 a dropzone, a feature grid \u2014 differently, a few sprints apart, with no shared record of the decision.<\/p><\/div>\n <div class=\"problem-item\"><span class=\"glyph\">02<\/span><p><strong>Ambiguous ownership.<\/strong> When a component needed to change, it wasn’t always clear who could approve it, or whether a squad even needed to ask.<\/p><\/div>\n <div class=\"problem-item\"><span class=\"glyph\">03<\/span><p><strong>Documentation lag.<\/strong> Specs describing a state of the system that had already moved on in production, eroding trust in the docs themselves.<\/p><\/div>\n <div class=\"problem-item\"><span class=\"glyph\">04<\/span><p><strong>Inconsistent thresholds.<\/strong> A change to a colour token and a change to a whole new module pattern being treated with the same \u2014 or the wrong \u2014 level of scrutiny.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"model\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">04<\/span><h2>The governance model<\/h2><\/div>\n <p class=\"lead\">The framework we worked within tiered components by how much scrutiny a change should get \u2014 so small, low-risk edits didn’t queue behind the same review as a brand-new pattern, and high-risk changes couldn’t slip through on a small-edit path.<\/p>\n\n <div class=\"tiers\">\n <div class=\"tier core\">\n <div class=\"tnum\">TIER 01<\/div>\n <h4>Core<\/h4>\n <p>Foundational tokens and primitives used everywhere \u2014 colour, type scale, spacing, base controls. Changes here ripple across the whole system, so they carried the highest bar for review.<\/p>\n <div class=\"ex\">e.g. colour palette, video controls, dropzone<\/div>\n <\/div>\n <div class=\"tier extended\">\n <div class=\"tnum\">TIER 02<\/div>\n <h4>Extended<\/h4>\n <p>Composed components built from core primitives for recurring product needs. Reviewed for consistency with existing patterns before approval, with a lighter process than core.<\/p>\n <div class=\"ex\">e.g. data visualisation suite, campaign banner<\/div>\n <\/div>\n <div class=\"tier pattern\">\n <div class=\"tnum\">TIER 03<\/div>\n <h4>Pattern \/ module<\/h4>\n <p>Larger, page-level modules assembled for specific product journeys. Faster to propose, but expected to be built from tier 1\u20132 parts rather than introducing new primitives.<\/p>\n <div class=\"ex\">e.g. in-page carousel, product feature grid<\/div>\n <\/div>\n <\/div>\n\n <h3 style=\"margin-top:52px;\">How a change moved through the system<\/h3>\n <div class=\"flow\">\n <div class=\"step\"><span class=\"n\">01<\/span>Squad proposes a new or changed component<\/div>\n <div class=\"arrow\">→<\/div>\n <div class=\"step\"><span class=\"n\">02<\/span>Tier assigned based on scope of impact<\/div>\n <div class=\"arrow\">→<\/div>\n <div class=\"step\"><span class=\"n\">03<\/span>Design + accessibility review against the spec<\/div>\n <div class=\"arrow\">→<\/div>\n <div class=\"step\"><span class=\"n\">04<\/span>Documentation updated \u2014 anatomy, states, breakpoints<\/div>\n <div class=\"arrow\">→<\/div>\n <div class=\"step\"><span class=\"n\">05<\/span>Versioned release, communicated to consuming squads<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"gallery\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">05<\/span><h2>A slice of the system<\/h2><\/div>\n <p class=\"lead\" style=\"margin-bottom:8px;\">Representative areas of the library I documented, governed or audited. Shown here as simplified recreations rather than the original internal specs.<\/p>\n\n <div class=\"gallery\">\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-palette\"><span style=\"background:var(--blue);\"><\/span><span style=\"background:var(--purple);\"><\/span><span style=\"background:var(--teal);\"><\/span><span style=\"background:var(--amber);\"><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Colour system<\/div><p class=\"desc\">Four brand palettes (Pacific, Rockpool, Twilight, Sunrise), each with extended and neutral scales plus defined digital primary\/secondary pairs.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-donut\"><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Data visualisation<\/div><p class=\"desc\">Pie, donut, bar, bubble, stacked-bar and line\/area charts \u2014 specified with legend placement, labelling and traffic-light variants.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-bars\"><span style=\"height:30%;\"><\/span><span style=\"height:55%;\"><\/span><span style=\"height:40%;\"><\/span><span style=\"height:70%;\"><\/span><span style=\"height:50%;\"><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Bar & column charts<\/div><p class=\"desc\">Mobile bar graphs, comparison bars and highlighted-value states, documented for consistent use across billing and usage screens.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-drop\">DROP FILES<br>HERE<\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Dropzone<\/div><p class=\"desc\">File attachment component with default, active, loading, attached and error states, specified separately for desktop and 320px mobile.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-carousel\"><span class=\"active\"><\/span><span><\/span><span><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">In-page carousel<\/div><p class=\"desc\">Tabbed video and animation carousel, specified across 1360 \/ 1024 \/ 768 \/ 320, with play, pause and progress states.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-grid\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Product feature grid<\/div><p class=\"desc\">2\/3\/4-column responsive grids with default, hover, active and inactive interaction states for product tiles.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-gridsys\"><span class=\"m\"><\/span><span class=\"g\"><\/span><span class=\"c\"><\/span><span class=\"c hi\"><\/span><span class=\"c\"><\/span><span class=\"c\"><\/span><span class=\"g\"><\/span><span class=\"m\"><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Grid & layout system<\/div><p class=\"desc\">Margin, gutter and column specs from 328px up to 1920px, including collapsed and open side-navigation states.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-accordion\"><div class=\"row open\"><span>Accordion title<\/span><span class=\"sym\">\u2013<\/span><\/div><div class=\"row\"><span>Accordion title<\/span><span class=\"sym\">+<\/span><\/div><div class=\"row\"><span>Accordion title<\/span><span class=\"sym\">+<\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Accordions<\/div><p class=\"desc\">Expand\/collapse patterns for nested menu levels, specified across default, hover, pressed and inactive states.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-activity\"><div class=\"node\"><span class=\"dot\"><\/span><span class=\"bar\"><\/span><\/div><div class=\"node\"><span class=\"dot\"><\/span><span class=\"bar\"><\/span><\/div><div class=\"node\"><span class=\"dot\"><\/span><span class=\"bar\"><\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Activity log<\/div><p class=\"desc\">Chronological status timeline grouped by day, used to show progress history on a ticket or record.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-table\"><span class=\"hd\"><\/span><span class=\"hd\"><\/span><span class=\"hd\"><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Tables<\/div><p class=\"desc\">Basic and advanced data tables \u2014 sorting, row selection, inline edit and icon\/status columns \u2014 plus stacked card-style tables for mobile.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-alertmodal\"><div class=\"card\">Modal title<\/div><div class=\"card warn\">Warning alert<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Alerts, banners & modals<\/div><p class=\"desc\">Inline, system-wide and modal alert patterns \u2014 primary, warning, transient and directional variants.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-avatar2\"><div class=\"ph\"><\/div><div class=\"in\">AA<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Avatars<\/div><p class=\"desc\">Photo and initials variants across five sizes (16\u2013128px), with a defined fallback when no image is available.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-breadcrumb\">Default <b>›<\/b> Default <b>›<\/b> Current page<\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Breadcrumbs<\/div><p class=\"desc\">Long and wrapping breadcrumb trails, specified separately for mobile header contexts at 320 and 768.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-buttons\"><div class=\"b pri\">Super button<\/div><div class=\"b sec\">This is a button<\/div><div class=\"b warn\">Super button<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Buttons<\/div><p class=\"desc\">Super, primary and secondary buttons across four sizes and a warning variant, plus hyperlink styles \u2014 every state from default to disabled.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-calendar\"><span><\/span><span><\/span><span><\/span><span class=\"sel\"><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Calendars & date pickers<\/div><p class=\"desc\">Single and dual-month date pickers, date-and-time combos, and standalone time selectors for desktop and mobile.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-navchrome\"><div class=\"bar top\"><span><\/span><span><\/span><span><\/span><\/div><div class=\"bar bottom\"><span><\/span><span><\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Header, footer & mega menu<\/div><p class=\"desc\">Global navigation chrome \u2014 basic header\/footer, mega menu with nested links, and a collapsible side-menu variant.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-sectiontitle\"><div class=\"h\"><\/div><div class=\"l\">This is a button →<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Section title<\/div><p class=\"desc\">A heading module with optional description, button and download link, restyled across 320\/768\/1024\/1360 breakpoints.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-verticaltabs\"><div class=\"t on\">Vert nav label<\/div><div class=\"t\">Vert nav label<\/div><div class=\"t\">Vert nav label<\/div><div class=\"t\">Vert nav label<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Vertical tabs<\/div><p class=\"desc\">Side-nav tab pattern pairing a label list with contextual content, plus an accordion fallback for narrower widths.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-cards\"><div class=\"cc\"><\/div><div class=\"cc\"><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Cards<\/div><p class=\"desc\">Dashboard and layout card patterns \u2014 default, hover and keyboard-focus states for content and summary cards.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-dropdown\"><div class=\"field\">Search<\/div><div class=\"opt sel\">Menu Item 1<\/div><div class=\"opt\">Menu Item 2<\/div><div class=\"opt\">Menu Item 3<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Dropdown<\/div><p class=\"desc\">Select menus and search-lookup dropdowns, with numeric picker and mobile keyboard-aware variants.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-filter\"><div class=\"bar\">Search <span>▼<\/span><\/div><div class=\"chips\"><span class=\"chip\">Sydney, NSW<\/span><span class=\"chip\">IOM<\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Filter<\/div><p class=\"desc\">Multi-field filter panel with lookup search, selected tags and an applied-filters summary bar, for desktop and mobile.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-forminput\"><div class=\"lab\">Form Label<\/div><div class=\"fld\">Input Text<\/div><div class=\"err\">Error message<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Forms & inputs<\/div><p class=\"desc\">Text, select, textarea and search fields \u2014 inactive, focus, error, success and disabled states, plus calendar-style entry.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-appstore\"><div class=\"badge\">Download on the App Store<\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Get the app<\/div><p class=\"desc\">App-download prompts in vertical and horizontal layouts, with an SMS-the-link flow for mobile.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-ratios\"><span class=\"r1\"><\/span><span class=\"r2\"><\/span><span class=\"r3\"><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Images & hero banners<\/div><p class=\"desc\">A defined set of image aspect ratios (1:1 to 9:16) plus full-width hero banners specified at five breakpoints.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-icongrid\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Icons<\/div><p class=\"desc\">The master icon library \u2014 navigation, payment, device, government\/enterprise and social sets, plus icon-with-action-label tiles.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-tile\"><div class=\"row\"><span class=\"dot\"><\/span><span class=\"txt\">Heading 20<br>This is a button →<\/span><\/div><div class=\"row\"><span class=\"dot\"><\/span><span class=\"txt\">Heading 20<\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Instructional tile & textblock<\/div><p class=\"desc\">Icon-led step tiles and heading\/body\/CTA text modules, restyled across four breakpoints.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-lists\"><div class=\"row\"><b>Elliot’s Visa<\/b><span>→<\/span><\/div><div class=\"row\"><b>Broadband<\/b><span>$80<\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Lists<\/div><p class=\"desc\">Account and action-item list rows \u2014 with icons, prices, usage bars and inline edit links.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-spinner\"><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Loading<\/div><p class=\"desc\">Spinners for sub-4-second waits, and progress bars with percentage or time-remaining labels for longer ones.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-navtabs\"><span class=\"on\">Contact Details<\/span><span>Payment Options<\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Navigation tabs<\/div><p class=\"desc\">Inactive, active, hover and focus states for horizontal in-page tab navigation.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-badges\"><span class=\"b\">4<\/span><span class=\"b blue\">8<\/span><span class=\"dot\"><\/span><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Notifications<\/div><p class=\"desc\">Critical, informative and neutral count badges, plus a dot-only variant for lower-priority indicators.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-tracker\"><div class=\"node\"><span class=\"c\"><\/span><span class=\"bar\"><\/span><\/div><div class=\"node\"><span class=\"c\"><\/span><span class=\"bar\"><\/span><\/div><div class=\"node\"><span class=\"c o\"><\/span><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Order tracker<\/div><p class=\"desc\">Step-by-step timeline for tracking an order or request \u2014 to-do, in-progress, completed and error states, with carrier tracking cards.<\/p><\/div>\n <\/div>\n <div class=\"g-card\">\n <div class=\"g-visual\"><div class=\"ill-tokens\"><div class=\"t\"><\/div><div class=\"t\"><\/div><div class=\"t\"><\/div><div class=\"t\"><\/div><\/div><\/div>\n <div class=\"g-meta\"><div class=\"name\">Typography & spacing tokens<\/div><p class=\"desc\">The master colour, type-scale and padding\/margin symbols consuming teams swapped in-file to re-theme or re-space screens.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"challenges\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">06<\/span><h2>Where governance got hard<\/h2><\/div>\n <div class=\"cols-2\">\n <div>\n <div class=\"stack-card\">\n <div class=\"lbl\">Tension<\/div>\n <h3>Rigour vs. squad velocity<\/h3>\n <p>Squads under deadline pressure treated any review step as friction. Too strict, and teams routed around the system; too loose, and the drift problem came straight back.<\/p>\n <\/div>\n <div class=\"stack-card\" style=\"border-top:none;\">\n <div class=\"lbl resp\">Response<\/div>\n <p>Leaned on the tiering model so most day-to-day changes moved through a fast, predictable path \u2014 reserving the heavier review for the small number of changes that actually touched shared primitives.<\/p>\n <\/div>\n <\/div>\n <div>\n <div class=\"stack-card\">\n <div class=\"lbl\">Tension<\/div>\n <h3>Documentation as a moving target<\/h3>\n <p>Specs describing states, breakpoints and edge cases go stale fast if updating them is treated as optional once a component ships.<\/p>\n <\/div>\n <div class=\"stack-card\" style=\"border-top:none;\">\n <div class=\"lbl resp\">Response<\/div>\n <p>Made documentation updates part of the definition of done for any approved change, not a follow-up task \u2014 and used audits to catch specs that had quietly fallen behind shipped UI.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"accessibility\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">07<\/span><h2>Component accessibility<\/h2><\/div>\n <p class=\"lead\" style=\"margin-bottom:36px;\">Accessibility wasn’t a separate audit bolted on afterwards \u2014 it was built into what “documented” meant for a component, and it was one of the things I checked for in cross-squad reviews.<\/p>\n <div class=\"cols-3\">\n <div class=\"role-tile\">\n <span class=\"tag\">Focus, not just hover<\/span>\n <h3>Visible keyboard focus<\/h3>\n <ul>\n <li>Interactive controls \u2014 video play\/pause\/rewind, carousel tabs \u2014 were specified with a distinct focus state, not just default and hover<\/li>\n <li>Reviews checked that new or modified components kept a visible focus outline, so keyboard-only use wasn’t an afterthought<\/li>\n <\/ul>\n <\/div>\n <div class=\"role-tile\">\n <span class=\"tag\">Colour + text<\/span>\n <h3>Never colour alone<\/h3>\n <ul>\n <li>Data visualisation and status patterns paired colour with an explicit label or number \u2014 percentages, values, legend text \u2014 rather than relying on hue alone<\/li>\n <li>Traffic-light and status patterns kept a labelled legend alongside the colour coding<\/li>\n <\/ul>\n <\/div>\n <div class=\"role-tile\">\n <span class=\"tag\">State coverage<\/span>\n <h3>Error & loading as first-class states<\/h3>\n <ul>\n <li>Components were expected to document default, hover, focus, active, error and loading \u2014 not just the happy path<\/li>\n <li>Error states paired an icon with plain-language text, so meaning didn’t depend on colour recognition alone<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"metrics\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">08<\/span><h2>Metrics<\/h2><\/div>\n <p class=\"lead\" style=\"margin-bottom:8px;\">The figures that mattered most for a governance role \u2014 reach of the system, and how much drift the process was catching.<\/p>\n <div class=\"outcome-grid\">\n <div><div class=\"num\">14 squads<\/div><div class=\"lab\">Product squads actively consuming the shared system<\/div><div class=\"hint\"> <\/div><\/div>\n <div><div class=\"num\">60+ components<\/div><div class=\"lab\">Components brought under formal governance<\/div><div class=\"hint\"> <\/div><\/div>\n <div><div class=\"num\">reduced by 30%<\/div><div class=\"lab\">Duplicate or one-off variants caught in audit<\/div><div class=\"hint\"> <\/div><\/div>\n <div><div class=\"num\">under 2 sprints<\/div><div class=\"lab\">Average turnaround, proposal to versioned release<\/div><div class=\"hint\"> <\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"impact\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">09<\/span><h2>Impact<\/h2><\/div>\n <div class=\"cols-2\">\n <p class=\"lead\">The clearest impact wasn’t any single component \u2014 it was that decisions about the system became visible and repeatable instead of living in individual squads’ heads. Squads had a predictable place to check before building something new, and a predictable path to get a genuine gap filled.<\/p>\n <div>\n <div class=\"ba-list\">\n <div class=\"ba-row\"><span class=\"before\">Component decisions made ad hoc, per squad<\/span><span class=\"arrow\">→<\/span><span class=\"after\">Reviewed against a shared tier model<\/span><\/div>\n <div class=\"ba-row\"><span class=\"before\">Documentation drifted from shipped UI<\/span><span class=\"arrow\">→<\/span><span class=\"after\">Updated as part of “done” for every change<\/span><\/div>\n <div class=\"ba-row\"><span class=\"before\">Accessibility checked inconsistently<\/span><span class=\"arrow\">→<\/span><span class=\"after\">Verified in every cross-squad audit pass<\/span><\/div>\n <div class=\"ba-row\"><span class=\"before\">New patterns built in isolation<\/span><span class=\"arrow\">→<\/span><span class=\"after\">Expected to compose from Core\/Extended tiers<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"fade\" id=\"reflection\">\n <div class=\"wrap\">\n <div class=\"section-head\"><span class=\"section-num\">10<\/span><h2>What this taught me about governance<\/h2><\/div>\n <blockquote class=\"quote\">A design system succeeds or fails less on the quality of its components, and more on whether the rules around changing them are clear enough that people actually follow them.<\/blockquote>\n <p style=\"max-width:60ch; margin-top:28px;\">Working inside an enterprise-scale system reframed how I think about design systems generally: they’re a governance practice as much as a design one. The components are the visible layer \u2014 the durable value sits in the tiering, the review paths, and the discipline of keeping documentation honest about what’s actually shipping. That’s the lens I now bring to any system I lead: design the rules with as much care as the components they govern.<\/p>\n <\/div>\n <\/section>\n\n <footer>\n <div class=\"wrap\">\n <div class=\"foot-row\">\n <div>\n <div class=\"foot-name\">Design System Governance \u2014 Telstra<\/div>\n <div class=\"foot-note\">Case study prepared for portfolio use. Component recreations are simplified and original to this document, not reproductions of internal Telstra specifications.<\/div>\n <\/div>\n <div class=\"spec-version\">Portfolio piece \u00b7 v1.0<\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n<script>\n const items = document.querySelectorAll('.fade');\n const io = new IntersectionObserver((entries)=>{\n entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\n }, {threshold:0.12});\n items.forEach(i=>io.observe(i));\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6982,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[74,91,73,125,1,31],"tags":[41,36,126,39,34],"class_list":["post-6973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-work","category-corporate-stories","category-design-system","category-learnings","category-ui-ux-insights","tag-communitybuilding","tag-designinsights","tag-enterprise-design-system","tag-learningexperiences","tag-uidesigntips"],"_links":{"self":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/6973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/comments?post=6973"}],"version-history":[{"count":15,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/6973\/revisions"}],"predecessor-version":[{"id":6989,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/6973\/revisions\/6989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/media\/6982"}],"wp:attachment":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/media?parent=6973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/categories?post=6973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/tags?post=6973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}