[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"sanity-LevEgKvCUg3Ul3GKyhTsfZIfaGswLQ-qsmdjo9-lWe4":3,"sanity-1Ss6p68RzkOE4CJBuuEeON55aMAHo_WxkdDpNHpLsNM":42},{"data":4},{"_createdAt":5,"_id":6,"_rev":7,"_type":6,"_updatedAt":8,"acceptAllLink":9,"acceptNecessaryLink":18,"bannerColorSource":23,"bannerDescription":24,"bannerTitle":25,"categories":26,"declineAllLink":27,"managePreferencesLink":31,"modalColorSource":23,"modalTitle":35,"preferencesIconColorSource":23,"provider":36,"savePreferencesLink":37,"thirdPartyEmbedCode":26,"title":41},"2026-08-29T18:46:18Z","cookieSettings","C1Syut0iGaGX58H2hZvChS","2026-08-29T18:46:23Z",{"_type":10,"style":11,"title":16,"type":17},"link",{"_type":12,"stylePreset":13},"link.style",{"_ref":14,"_type":15},"link-style-primary","reference","Accept all","button",{"_type":10,"style":19,"title":22,"type":17},{"_type":12,"stylePreset":20},{"_ref":21,"_type":15},"link-style-tertiary-outline","Accept necessary","inherit","We use cookies to enhance your browsing experience and analyse our traffic. Please choose your cookie preferences below.","We use cookies",null,{"_type":10,"style":28,"title":30,"type":17},{"_type":12,"stylePreset":29},{"_ref":21,"_type":15},"Decline all",{"_type":10,"style":32,"title":34,"type":17},{"_type":12,"stylePreset":33},{"_ref":21,"_type":15},"Manage preferences","Cookie Preferences","custom",{"_type":10,"style":38,"title":40,"type":17},{"_type":12,"stylePreset":39},{"_ref":14,"_type":15},"Save preferences","Cookie Settings",{"data":43,"sourceMap":-1},[44],{"_createdAt":5,"_id":45,"_rev":7,"_type":46,"_updatedAt":8,"authorProfile":47,"authorRef":59,"body":61,"categories":169,"excerpt":180,"footer":26,"layout":181,"mainImage":185,"navigation":26,"publishedAt":189,"readTime":190,"relatedPosts":191,"routeOptions":248,"seo":26,"showOnWebsite":250,"slug":253,"tags":254,"title":257},"post-type-scale","post",{"avatar":48,"bio":53,"name":54,"role":55,"sameAs":56},{"_type":49,"alt":50,"asset":51},"image","Portrait of Priya Raman",{"_ref":52,"_type":15},"image-cfc7cc28fea565890fb3a5986f7d299c7704a12a-512x512-jpg","Priya works on the seam between design tokens and the components that consume them, and is unreasonably interested in how colour behaves when someone else picks it.","Priya Raman","Design Systems Engineer",[57,58],"https:\u002F\u002Fexample.com\u002Fpriya-raman","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fexample-priya-raman",{"_ref":60,"_type":15},"author-priya-raman",[62,73,82,99,108,116,121,129,153,161],{"_key":63,"_type":64,"children":65,"markDefs":71,"style":72},"b0132","block",[66],{"_key":67,"_type":68,"marks":69,"text":70},"s0133","span",[],"Type scales are designed against sample text and then handed to people with something specific to say. The heading that read beautifully at three words wraps to four lines the first time somebody writes a real one.",[],"normal",{"_key":74,"_type":64,"children":75,"markDefs":80,"style":81},"b0134",[76],{"_key":77,"_type":68,"marks":78,"text":79},"s0135",[],"Spacing belongs to the rhythm, not the heading",[],"h2",{"_key":83,"_type":64,"children":84,"markDefs":98,"style":72},"b0139",[85,89,94],{"_key":86,"_type":68,"marks":87,"text":88},"s0136",[],"Headings in this starter carry no vertical margin of their own. The spacing lives on the flow, in ",{"_key":90,"_type":68,"marks":91,"text":93},"s0137",[92],"code","em",{"_key":95,"_type":68,"marks":96,"text":97},"s0138",[]," units, so every level separates in proportion to its own size and the first block in a field never gets a stray top margin.",[],{"_key":100,"_type":64,"children":101,"markDefs":106,"style":107},"b0140",[102],{"_key":103,"_type":68,"marks":104,"text":105},"s0141",[],"Steps down, not just up",[],"h3",{"_key":109,"_type":64,"children":110,"markDefs":115,"style":72},"b0142",[111],{"_key":112,"_type":68,"marks":113,"text":114},"s0143",[],"The same scale cannot serve a marketing hero and a 2,000-word article. On a post the whole scale steps down together — a 48px display heading is right above a landing page and wrong above a paragraph somebody is trying to read.",[],{"_key":117,"_type":49,"alt":118,"asset":119,"markDefs":26},"img0144","A heading scale shown at display and long-form sizes side by side",{"_ref":120,"_type":15},"image-d3b6be96f5629de73c4fed955759d53c2fe53364-1200x675-jpg",{"_key":122,"_type":64,"children":123,"markDefs":128,"style":107},"b0145",[124],{"_key":125,"_type":68,"marks":126,"text":127},"s0146",[],"Balance and pretty are free",[],{"_key":130,"_type":64,"children":131,"markDefs":152,"style":72},"b0152",[132,136,140,144,148],{"_key":133,"_type":68,"marks":134,"text":135},"s0147",[],"Two lines of CSS — ",{"_key":137,"_type":68,"marks":138,"text":139},"s0148",[92],"text-balance",{"_key":141,"_type":68,"marks":142,"text":143},"s0149",[]," on headings, ",{"_key":145,"_type":68,"marks":146,"text":147},"s0150",[92],"text-pretty",{"_key":149,"_type":68,"marks":150,"text":151},"s0151",[]," on body copy — fix most of what makes editor-written text look ragged, and cost nothing when unsupported.",[],{"_key":154,"_type":64,"children":155,"markDefs":160,"style":81},"b0153",[156],{"_key":157,"_type":68,"marks":158,"text":159},"s0154",[],"Test it with the worst case you have",[],{"_key":162,"_type":64,"children":163,"markDefs":168,"style":72},"b0155",[164],{"_key":165,"_type":68,"marks":166,"text":167},"s0156",[],"Take the longest title in the dataset, the one with a compound word in it, and put it on a 320px viewport. That is the design. The three-word version was never going to break.",[],[170,176],{"_createdAt":5,"_id":171,"_rev":172,"_type":173,"_updatedAt":5,"slug":174,"title":175},"category-design-systems","2d20vp0kUSy7uZjqDieLmb","category","design-systems","Design Systems",{"_createdAt":5,"_id":177,"_rev":172,"_type":173,"_updatedAt":5,"slug":178,"title":179},"category-content-modelling","content-modelling","Content Modelling","Every scale looks balanced against three words of placeholder. The test is a heading an editor actually wrote, on a phone, in two languages.",{"_type":182,"layout":183,"pageDesign":184},"post.layout.options","default","design1",{"_type":49,"alt":186,"asset":187},"Abstract amber gradient suggesting stepped type sizes",{"_ref":188,"_type":15},"image-aa3a1dd55ed9709d36bafe8f5715c90b8906166f-1600x900-jpg","2026-02-24T09:00:00.000Z",1,[192,210,230],{"_id":193,"authorProfile":194,"categories":197,"excerpt":202,"mainImage":203,"publishedAt":207,"readTime":190,"slug":208,"title":209},"post-dark-mode-axis",{"avatar":195,"name":54,"role":55},{"_type":49,"alt":50,"asset":196},{"_ref":52,"_type":15},[198,199],{"slug":174,"title":175},{"slug":200,"title":201},"performance","Performance","The server cannot know which colour scheme a visitor prefers. Anything you render that depends on it will hydrate differently than it painted.",{"_type":49,"alt":204,"asset":205},"Abstract indigo gradient split between light and dark",{"_ref":206,"_type":15},"image-96db9eded5277118c54a29e63593a6d24a382797-1600x900-jpg","2026-07-09T09:00:00.000Z","dark-mode-is-a-second-axis","Dark mode is a second axis, not a second stylesheet",{"_id":211,"authorProfile":212,"categories":219,"excerpt":222,"mainImage":223,"publishedAt":227,"readTime":190,"slug":228,"title":229},"post-design-tokens",{"avatar":213,"name":217,"role":218},{"_type":49,"alt":214,"asset":215},"Portrait of Avery Lin",{"_ref":216,"_type":15},"image-7d9d32f0d8cbaa44274ac31144c4acd3b6256c53-512x512-jpg","Avery Lin","Content Architect",[220,221],{"slug":174,"title":175},{"slug":178,"title":179},"When an editor picks a brand colour, half a dozen derived values have to stay legible. Here is how to derive them once instead of hard-coding them everywhere.",{"_type":49,"alt":224,"asset":225},"Abstract magenta gradient representing a derived colour palette",{"_ref":226,"_type":15},"image-c96efd6b55a465dcb615ad80af90714207b25dbc-1600x900-jpg","2026-06-21T09:00:00.000Z","theme-colours-belong-to-the-content","Theme colours belong to the content, not the stylesheet",{"_id":231,"authorProfile":232,"categories":235,"excerpt":240,"mainImage":241,"publishedAt":245,"readTime":190,"slug":246,"title":247},"post-scaffolding",{"avatar":233,"name":54,"role":55},{"_type":49,"alt":50,"asset":234},{"_ref":52,"_type":15},[236,239],{"slug":237,"title":238},"developer-experience","Developer Experience",{"slug":174,"title":175},"Any component that needs six files in five directories will be built wrong by hand eventually. Generating it is cheaper than writing the guide twice.",{"_type":49,"alt":242,"asset":243},"Abstract green gradient suggesting generated structure",{"_ref":244,"_type":15},"image-d52abf1b9836ea87c4978039efb609149c6c90de-1600x900-jpg","2026-04-08T09:00:00.000Z","a-scaffolder-is-documentation-that-runs","A scaffolder is documentation that runs",{"_type":249,"includeInSitemap":250,"slug":251},"page.routing.options",true,{"_type":252,"current":253},"slug","a-type-scale-has-to-survive-real-content",[175,255,256],"Typography","Accessibility","A type scale has to survive real content",1788029823064]