[{"data":1,"prerenderedAt":592},["ShallowReactive",2],{"sanity-LevEgKvCUg3Ul3GKyhTsfZIfaGswLQ-qsmdjo9-lWe4":3,"sanity-XgyDl55PZudkRkPyDJfI0cmiRLfgRf66vQBcnKEx1tI":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-07-17T18:12:25Z","cookieSettings","MhSgHj8zuIn77CgynoP5Zv","2026-08-15T17:02:10Z",{"_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},{"_createdAt":44,"_id":45,"_rev":46,"_system":47,"_type":50,"_updatedAt":51,"components":52,"footer":26,"isPublished":166,"navigation":26,"path":585,"routeOptions":586,"seo":26,"showFooter":166,"showNav":166,"slug":590,"title":591},"2026-08-24T21:28:02Z","2ab1bf95-66b0-4720-9b60-1003dbe4f56c","Hw2JsYpwDTOfa4dCmD0rLe",{"base":48},{"id":45,"rev":49},"OS5Bclh3yKG9EoTMfE4zGl","page","2026-08-24T21:59:07Z",[53,163,171,302,309],{"_key":54,"_type":55,"alignment":56,"content":57,"options":155,"width":162},"tg-rhythm","text-block","mx-auto",[58,69,78,87,95,104,112,121,129,138,147],{"_key":59,"_type":60,"children":61,"markDefs":67,"style":68},"tg-b002","block",[62],{"_key":63,"_type":64,"marks":65,"text":66},"tg-s001","span",[],"3 Typography & portable text",[],"h1",{"_key":70,"_type":60,"children":71,"markDefs":76,"style":77},"tg-b004",[72],{"_key":73,"_type":64,"marks":74,"text":75},"tg-s003",[],"Everything below is authored in the Studio's portable-text editor and rendered through this project's serializers. It doubles as a visual regression check: if heading spacing or the type scale drifts, it shows up here first.",[],"normal",{"_key":79,"_type":60,"children":80,"markDefs":85,"style":86},"tg-b006",[81],{"_key":82,"_type":64,"marks":83,"text":84},"tg-s005",[],"The heading scale",[],"h2",{"_key":88,"_type":60,"children":89,"markDefs":94,"style":77},"tg-b008",[90],{"_key":91,"_type":64,"marks":92,"text":93},"tg-s007",[],"Headings carry no vertical margin of their own — spacing is owned by the .Nuxion-flow wrapper the renderer emits, using adjacent-sibling rules. The gap above a heading is roughly three times the gap below it, so each heading reads as belonging to the text that follows rather than floating between two paragraphs.",[],{"_key":96,"_type":60,"children":97,"markDefs":102,"style":103},"tg-b010",[98],{"_key":99,"_type":64,"marks":100,"text":101},"tg-s009",[],"A third-level heading",[],"h3",{"_key":105,"_type":60,"children":106,"markDefs":111,"style":77},"tg-b012",[107],{"_key":108,"_type":64,"marks":109,"text":110},"tg-s011",[],"Because those margins are em-based, every level separates in proportion to its own size: an h2 breaks a page more strongly than an h3 without either being hand-tuned.",[],{"_key":113,"_type":60,"children":114,"markDefs":119,"style":120},"tg-b014",[115],{"_key":116,"_type":64,"marks":117,"text":118},"tg-s013",[],"A fourth-level heading",[],"h4",{"_key":122,"_type":60,"children":123,"markDefs":128,"style":77},"tg-b016",[124],{"_key":125,"_type":64,"marks":126,"text":127},"tg-s015",[],"The first block in any portable-text field never receives a top margin, which is what lets heroes and CTA banners render their title through this same system without being pushed down the page.",[],{"_key":130,"_type":60,"children":131,"markDefs":136,"style":137},"tg-b018",[132],{"_key":133,"_type":64,"marks":134,"text":135},"tg-s017",[],"Fifth level",[],"h5",{"_key":139,"_type":60,"children":140,"markDefs":145,"style":146},"tg-b020",[141],{"_key":142,"_type":64,"marks":143,"text":144},"tg-s019",[],"Sixth level",[],"h6",{"_key":148,"_type":60,"children":149,"markDefs":154,"style":77},"tg-b022",[150],{"_key":151,"_type":64,"marks":152,"text":153},"tg-s021",[],"Note that on a blog post the whole scale steps down: 48px display headings suit a marketing section title, but sit far too large inside 18px body copy.",[],{"_type":156,"colorSource":23,"container":157,"padding":158},"section.options","contained",{"_type":159,"bottom":160,"top":161},"padding.options",24,80,"max-w-3xl",{"_key":164,"_type":165,"divider":166,"dividerColor":167,"dividerStyle":168,"height":161,"options":169,"title":170},"tg-sp1","spacer",true,"accent","beam",{"_type":156,"colorSource":23,"container":157},"Divider · Beam",{"_key":172,"_type":55,"alignment":56,"content":173,"options":301,"width":162},"tg-decorators",[174,182,190,275,283,292],{"_key":175,"_type":60,"children":176,"markDefs":181,"style":86},"tg-b024",[177],{"_key":178,"_type":64,"marks":179,"text":180},"tg-s023",[],"Decorators",[],{"_key":183,"_type":60,"children":184,"markDefs":189,"style":77},"tg-b026",[185],{"_key":186,"_type":64,"marks":187,"text":188},"tg-s025",[],"Decorators are toggles applied to a text range — no configuration, no markDefs entry.",[],{"_key":191,"_type":60,"children":192,"markDefs":274,"style":77},"tg-b047",[193,198,202,207,210,214,217,222,225,230,233,238,241,245,248,253,257,262,266,270],{"_key":194,"_type":64,"marks":195,"text":197},"tg-s027",[196],"strong","Bold",{"_key":199,"_type":64,"marks":200,"text":201},"tg-s028",[],", ",{"_key":203,"_type":64,"marks":204,"text":206},"tg-s029",[205],"em","emphasis",{"_key":208,"_type":64,"marks":209,"text":201},"tg-s030",[],{"_key":211,"_type":64,"marks":212,"text":213},"tg-s031",[213],"underline",{"_key":215,"_type":64,"marks":216,"text":201},"tg-s032",[],{"_key":218,"_type":64,"marks":219,"text":221},"tg-s033",[220],"strike-through","strikethrough",{"_key":223,"_type":64,"marks":224,"text":201},"tg-s034",[],{"_key":226,"_type":64,"marks":227,"text":229},"tg-s035",[228],"code","inline code",{"_key":231,"_type":64,"marks":232,"text":201},"tg-s036",[],{"_key":234,"_type":64,"marks":235,"text":237},"tg-s037",[236],"font-mono","monospace",{"_key":239,"_type":64,"marks":240,"text":201},"tg-s038",[],{"_key":242,"_type":64,"marks":243,"text":244},"tg-s039",[244],"uppercase",{"_key":246,"_type":64,"marks":247,"text":201},"tg-s040",[],{"_key":249,"_type":64,"marks":250,"text":252},"tg-s041",[251],"light","light weight",{"_key":254,"_type":64,"marks":255,"text":256},"tg-s042",[]," and ",{"_key":258,"_type":64,"marks":259,"text":261},"tg-s043",[260],"extrabold","extra bold",{"_key":263,"_type":64,"marks":264,"text":265},"tg-s044",[],". They compose, so text can be ",{"_key":267,"_type":64,"marks":268,"text":269},"tg-s045",[196,236],"bold and monospaced",{"_key":271,"_type":64,"marks":272,"text":273},"tg-s046",[]," at once.",[],{"_key":276,"_type":60,"children":277,"markDefs":282,"style":103},"tg-b049",[278],{"_key":279,"_type":64,"marks":280,"text":281},"tg-s048",[],"Alignment",[],{"_key":284,"_type":60,"children":285,"markDefs":291,"style":77},"tg-b051",[286],{"_key":287,"_type":64,"marks":288,"text":290},"tg-s050",[289],"align-center","Alignment is also a decorator. This line is centred.",[],{"_key":293,"_type":60,"children":294,"markDefs":300,"style":77},"tg-b053",[295],{"_key":296,"_type":64,"marks":297,"text":299},"tg-s052",[298],"align-right","And this one is aligned right.",[],{"_type":156,"colorSource":23,"container":157},{"_key":303,"_type":165,"divider":166,"dividerColor":304,"dividerStyle":305,"height":306,"options":307,"title":308},"tg-sp2","subtle","grid",88,{"_type":156,"colorSource":23,"container":157},"Divider · Dot matrix",{"_key":310,"_type":55,"alignment":56,"content":311,"options":583,"width":162},"tg-annotations",[312,320,328,336,355,363,383,403,411,432,488,509,522,530,539,549,557,566,574],{"_key":313,"_type":60,"children":314,"markDefs":319,"style":86},"tg-b065",[315],{"_key":316,"_type":64,"marks":317,"text":318},"tg-s064",[],"Annotations",[],{"_key":321,"_type":60,"children":322,"markDefs":327,"style":77},"tg-b067",[323],{"_key":324,"_type":64,"marks":325,"text":326},"tg-s066",[],"Annotations attach data to a range, so each one stores an entry in the block's markDefs and the span references it by key.",[],{"_key":329,"_type":60,"children":330,"markDefs":335,"style":103},"tg-b069",[331],{"_key":332,"_type":64,"marks":333,"text":334},"tg-s068",[],"Heading style",[],{"_key":337,"_type":60,"children":338,"markDefs":352,"style":77},"tg-b073",[339,343,348],{"_key":340,"_type":64,"marks":341,"text":342},"tg-s070",[],"The heading annotation renders ",{"_key":344,"_type":64,"marks":345,"text":347},"tg-s071",[346],"tg-ann054","an inline heading",{"_key":349,"_type":64,"marks":350,"text":351},"tg-s072",[]," inside a paragraph — a span, not a real h-tag. It picks up the heading type scale but not the vertical rhythm, because vertical margins don't apply to inline elements.",[353],{"_key":346,"_type":354,"level":103},"heading",{"_key":356,"_type":60,"children":357,"markDefs":362,"style":103},"tg-b075",[358],{"_key":359,"_type":64,"marks":360,"text":361},"tg-s074",[],"Font size and line height",[],{"_key":364,"_type":60,"children":365,"markDefs":379,"style":77},"tg-b079",[366,370,375],{"_key":367,"_type":64,"marks":368,"text":369},"tg-s076",[],"Font size is set per range: ",{"_key":371,"_type":64,"marks":372,"text":374},"tg-s077",[373],"tg-ann055","this text is larger",{"_key":376,"_type":64,"marks":377,"text":378},"tg-s078",[]," than its neighbours.",[380],{"_key":373,"_type":381,"sizeClass":382},"fontSize","text-xl sm:text-2xl",{"_key":384,"_type":60,"children":385,"markDefs":399,"style":77},"tg-b083",[386,390,395],{"_key":387,"_type":64,"marks":388,"text":389},"tg-s080",[],"Line height is also an annotation, so it can only ever be ",{"_key":391,"_type":64,"marks":392,"text":394},"tg-s081",[393],"tg-ann056","inline",{"_key":396,"_type":64,"marks":397,"text":398},"tg-s082",[],". A line box takes the greater of the paragraph's own line height and any inline box on it, so values below the paragraph's setting have no visible effect — only the loosest option changes anything in body copy.",[400],{"_key":393,"_type":401,"heightClass":402},"lineHeight","leading-8",{"_key":404,"_type":60,"children":405,"markDefs":410,"style":103},"tg-b085",[406],{"_key":407,"_type":64,"marks":408,"text":409},"tg-s084",[],"Colour and links",[],{"_key":412,"_type":60,"children":413,"markDefs":427,"style":77},"tg-b089",[414,418,423],{"_key":415,"_type":64,"marks":416,"text":417},"tg-s086",[],"Highlight recolours text from the ",{"_key":419,"_type":64,"marks":420,"text":422},"tg-s087",[421],"tg-ann057","site colour palette",{"_key":424,"_type":64,"marks":425,"text":426},"tg-s088",[],", so it re-themes with the rest of the site.",[428],{"_key":421,"_type":429,"color":430},"highlight",{"_ref":431,"_type":15},"color-primary",{"_key":433,"_type":60,"children":434,"markDefs":473,"style":77},"tg-b099",[435,439,444,447,452,456,461,464,469],{"_key":436,"_type":64,"marks":437,"text":438},"tg-s090",[],"Links come in four flavours: ",{"_key":440,"_type":64,"marks":441,"text":443},"tg-s091",[442],"tg-ann058","external",{"_key":445,"_type":64,"marks":446,"text":201},"tg-s092",[],{"_key":448,"_type":64,"marks":449,"text":451},"tg-s093",[450],"tg-ann061","internal",{"_key":453,"_type":64,"marks":454,"text":455},"tg-s094",[]," (resolved from the referenced page's slug, so it survives a rename), ",{"_key":457,"_type":64,"marks":458,"text":460},"tg-s095",[459],"tg-ann059","email",{"_key":462,"_type":64,"marks":463,"text":256},"tg-s096",[],{"_key":465,"_type":64,"marks":466,"text":468},"tg-s097",[467],"tg-ann060","telephone",{"_key":470,"_type":64,"marks":471,"text":472},"tg-s098",[],".",[474,476,482,485],{"_key":442,"_type":10,"blank":166,"href":475},"https:\u002F\u002Fwww.sanity.io\u002Fdocs\u002Fblock-content",{"_key":450,"_type":477,"blank":478,"reference":479},"link.internal",false,{"_id":480,"_type":50,"url":481},"page-home","home",{"_key":459,"_type":483,"email":484},"link.email","mailto:hello@example.com",{"_key":467,"_type":486,"phone":487},"link.telephone","tel:+441234567890",{"_key":489,"_type":60,"children":490,"markDefs":504,"style":77},"tg-b103",[491,495,500],{"_key":492,"_type":64,"marks":493,"text":494},"tg-s100",[],"Gradient text derives its colours from the active theme ",{"_key":496,"_type":64,"marks":497,"text":499},"tg-s101",[498],"tg-ann062","when set to inherit",{"_key":501,"_type":64,"marks":502,"text":503},"tg-s102",[],", so it recolours with the rest of the page.",[505],{"_key":498,"_type":506,"colorSource":23,"direction":507,"gradientType":508},"gradientText","to-r","linear",{"_key":510,"_type":60,"children":511,"markDefs":517,"style":77},"tg-b105",[512],{"_key":513,"_type":64,"marks":514,"text":516},"tg-s104",[515],"tg-ann063","Width and alignment constrains a range to a maximum width and aligns it — it renders a block-level span, so it reads as its own narrow column inside the wider text.",[518],{"_key":515,"_type":519,"alignment":520,"preset":521},"widthControl","center","sm",{"_key":523,"_type":60,"children":524,"markDefs":529,"style":103},"tg-b107",[525],{"_key":526,"_type":64,"marks":527,"text":528},"tg-s106",[],"Quotes and lists",[],{"_key":531,"_type":60,"children":532,"markDefs":537,"style":538},"tg-b109",[533],{"_key":534,"_type":64,"marks":535,"text":536},"tg-s108",[],"Content is only as portable as the fields that describe it — a quote block still means 'quote' when the design changes.",[],"blockquote",{"_key":540,"_type":60,"children":541,"level":546,"listItem":547,"markDefs":548,"style":77},"tg-li111",[542],{"_key":543,"_type":64,"marks":544,"text":545},"tg-s110",[],"Bulleted list item",1,"bullet",[],{"_key":550,"_type":60,"children":551,"level":546,"listItem":547,"markDefs":556,"style":77},"tg-li113",[552],{"_key":553,"_type":64,"marks":554,"text":555},"tg-s112",[],"A second bullet, to show item spacing",[],{"_key":558,"_type":60,"children":559,"level":546,"listItem":564,"markDefs":565,"style":77},"tg-li115",[560],{"_key":561,"_type":64,"marks":562,"text":563},"tg-s114",[],"Numbered list item","number",[],{"_key":567,"_type":60,"children":568,"level":546,"listItem":564,"markDefs":573,"style":77},"tg-li117",[569],{"_key":570,"_type":64,"marks":571,"text":572},"tg-s116",[],"A second numbered item",[],{"_key":575,"_type":60,"children":576,"level":546,"listItem":581,"markDefs":582,"style":77},"tg-li119",[577],{"_key":578,"_type":64,"marks":579,"text":580},"tg-s118",[],"Lower-alpha list item","alpha",[],{"_type":156,"colorSource":23,"container":157,"padding":584},{"_type":159,"bottom":161,"top":160},"\u002Ftypography-3",{"_type":587,"includeInSitemap":166,"slug":588},"page.routing.options",{"_type":589,"current":590},"slug","typography-3","Typography 3 & Portable Text",1787664061224]