diff --git a/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch.png b/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch.png
index 61ec0f4d..981817a5 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch.png and b/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch.png differ
diff --git a/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch~dark.png b/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch~dark.png
index 61ec0f4d..981817a5 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch~dark.png and b/Sources/TUIkit/TUIkit.docc/Resources/keyboard-event-dispatch~dark.png differ
diff --git a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch.png b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch.png
index 33da0640..14971a5c 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch.png and b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch.png differ
diff --git a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch~dark.png b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch~dark.png
index 33da0640..14971a5c 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch~dark.png and b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-dispatch~dark.png differ
diff --git a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline.png b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline.png
index 0c7f7082..a2f191db 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline.png and b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline.png differ
diff --git a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline~dark.png b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline~dark.png
index 0c7f7082..a2f191db 100644
Binary files a/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline~dark.png and b/Sources/TUIkit/TUIkit.docc/Resources/render-cycle-pipeline~dark.png differ
diff --git a/scripts/diagrams/keyboard-event-dispatch.typ b/scripts/diagrams/keyboard-event-dispatch.typ
index 0c17d5b1..5bfa29f6 100644
--- a/scripts/diagrams/keyboard-event-dispatch.typ
+++ b/scripts/diagrams/keyboard-event-dispatch.typ
@@ -8,10 +8,8 @@
 #show: diagram-page
 
 #diagram(
-  spacing: (30pt, 16pt),
-  node-corner-radius: 7pt,
-  node-inset: 9pt,
-  edge-stroke: 1.1pt + colors.edge,
+  spacing: (32pt, 18pt),
+  ..diagram-defaults,
 
   node((0, 0), box-label(
     [Terminal raw bytes],
@@ -57,7 +55,7 @@
 
   node((0, 9), text(size: 8.5pt, style: "italic")[Event dropped], fill: colors.slate),
 
-  node((1.25, 4.5), box-label(
+  node((1.7, 4.5), box-label(
     [Event consumed],
   ), fill: colors.green-bright, name: <consumed>),
 
@@ -65,20 +63,20 @@
   edge((0, 1), (0, 2), "-|>"),
 
   edge(<gate0>, <layer0>, "-|>", label: elabel[yes], label-side: left),
-  edge(<gate0>, (0.62, 2), (0.62, 3.55), <layer1>, "-|>", label: elabel[no], label-pos: 0.08, label-side: right),
+  edge(<gate0>, (0.58, 2), (0.58, 3.5), <layer1>, "-|>", label: elabel[no], label-pos: 0.06, label-side: right),
 
   edge(<layer0>, <layer1>, "-|>", label: elabel[not consumed], label-side: left),
   edge(<layer1>, <layer2>, "-|>", label: elabel[not consumed], label-side: left),
   edge(<layer2>, <gate3>, "-|>", label: elabel[not consumed], label-side: left),
 
   edge(<gate3>, <layer3>, "-|>", label: elabel[no], label-side: left),
-  edge(<gate3>, (0.62, 6), (0.62, 7.55), <layer4>, "-|>", label: elabel[yes], label-pos: 0.08, label-side: right),
+  edge(<gate3>, (0.58, 6), (0.58, 7.5), <layer4>, "-|>", label: elabel[yes], label-pos: 0.06, label-side: right),
 
   edge(<layer3>, <layer4>, "-|>", label: elabel[not consumed], label-side: left),
   edge(<layer4>, (0, 9), "-|>", label: elabel[not consumed], label-side: left),
 
-  edge(<layer0>, <consumed>, "-|>", label: elabel[consumed], label-pos: 0.25, label-side: right),
-  edge(<layer1>, <consumed>, "-|>", label: elabel[consumed], label-pos: 0.35, label-side: right),
-  edge(<layer2>, <consumed>, "-|>", label: elabel[consumed], label-pos: 0.35, label-side: right),
-  edge(<layer3>, <consumed>, "-|>", label: elabel[consumed], label-pos: 0.25, label-side: right),
+  edge(<layer0>, (1.7, 3), <consumed>, "-|>", label: elabel[consumed], label-pos: 0.28, label-side: left),
+  edge(<layer1>, (1.7, 4), <consumed>, "-|>", label: elabel[consumed], label-pos: 0.3, label-side: left),
+  edge(<layer2>, (1.7, 5), <consumed>, "-|>", label: elabel[consumed], label-pos: 0.3, label-side: left),
+  edge(<layer3>, (1.7, 7), <consumed>, "-|>", label: elabel[consumed], label-pos: 0.28, label-side: left),
 )
diff --git a/scripts/diagrams/render-cycle-dispatch.typ b/scripts/diagrams/render-cycle-dispatch.typ
index 54d566d3..c26bb19e 100644
--- a/scripts/diagrams/render-cycle-dispatch.typ
+++ b/scripts/diagrams/render-cycle-dispatch.typ
@@ -3,15 +3,16 @@
 // renderToBuffer() checks Renderable conformance first, then recurses into
 // body (binding dynamic properties on the way), and falls back to an empty
 // buffer for Never-body views without Renderable.
+//
+// Layout: both decision diamonds share one row, the three outcome boxes share
+// the next row, and the example boxes sit in a clearly separated bottom row.
 #import "style.typ": *
 
 #show: diagram-page
 
 #diagram(
-  spacing: (34pt, 20pt),
-  node-corner-radius: 7pt,
-  node-inset: 9pt,
-  edge-stroke: 1.1pt + colors.edge,
+  spacing: (34pt, 26pt),
+  ..diagram-defaults,
 
   node((1, 0), box-label(
     [renderToBuffer(view, context)],
@@ -20,60 +21,60 @@
 
   decision((1, 1), [view is \ Renderable?], name: <d1>),
 
-  decision((1.7, 1.6), [Body ≠ \ Never?], name: <d2>),
+  decision((2, 1), [Body ≠ \ Never?], name: <d2>),
 
-  node((0, 2.4), box-label(
+  node((0, 2), box-label(
     [Renderable.renderToBuffer(context:)],
     [Direct rendering to FrameBuffer],
     [body is never called],
   ), fill: colors.green, name: <direct>),
 
-  node((1.15, 2.4), box-label(
+  node((1, 2), box-label(
     [renderToBuffer(view.body, context)],
     [Bind dynamic properties, then recurse],
     [until a Renderable leaf is reached],
   ), fill: colors.green, name: <body>),
 
-  node((2.3, 2.4), box-label(
+  node((3, 2), box-label(
     [FrameBuffer()],
     [Empty buffer – silent no-op],
   ), fill: colors.green, name: <empty>),
 
-  node((0, 3.5), box-label(
+  node((0, 3), box-label(
     [FrameBuffer],
     [Cell surface of styled graphemes],
   ), fill: colors.purple, name: <buffer>),
 
-  node((0.62, 3.5), box-label(
+  node((1, 3), box-label(
     [],
     [Text · VStack · HStack],
     [Button · Panel · Card],
     [ModifiedView · ContainerView],
   ), fill: colors.slate, name: <ex-direct>),
 
-  node((1.5, 3.5), box-label(
+  node((2, 3), box-label(
     [],
     [Box · User-defined views],
     [Any view composing],
     [other views in body],
   ), fill: colors.slate, name: <ex-body>),
 
-  node((2.3, 3.5), box-label(
+  node((3, 3), box-label(
     [],
     [Never-body views],
     [without Renderable],
   ), fill: colors.slate, name: <ex-empty>),
 
   edge(<entry>, <d1>, "-|>"),
+  edge(<d1>, <d2>, "-|>", label: elabel[no], label-side: left),
   edge(<d1>, <direct>, "-|>", label: elabel[yes], label-side: left),
-  edge(<d1>, <d2>, "-|>", label: elabel[no], label-side: right),
   edge(<d2>, <body>, "-|>", label: elabel[yes], label-side: left),
   edge(<d2>, <empty>, "-|>", label: elabel[no], label-side: right),
 
   edge(<direct>, <buffer>, "-|>"),
-  edge(<body>, <entry>, "--|>", bend: 40deg, label: elabel[recurse], label-side: right),
+  edge(<body>, (0.45, 1), <entry>, "--|>", label: elabel[recurse], label-pos: 0.3, label-side: left),
 
-  edge(<direct>, <ex-direct>, "..", stroke: 0.9pt + colors.edge),
-  edge(<body>, <ex-body>, "..", stroke: 0.9pt + colors.edge),
-  edge(<empty>, <ex-empty>, "..", stroke: 0.9pt + colors.edge),
+  edge(<direct>, <ex-direct>, "..", stroke: 0.7pt + colors.edge.transparentize(45%)),
+  edge(<body>, <ex-body>, "..", stroke: 0.7pt + colors.edge.transparentize(45%)),
+  edge(<empty>, <ex-empty>, "..", stroke: 0.7pt + colors.edge.transparentize(45%)),
 )
diff --git a/scripts/diagrams/render-cycle-pipeline.typ b/scripts/diagrams/render-cycle-pipeline.typ
index c5c9e7f0..eb975cb3 100644
--- a/scripts/diagrams/render-cycle-pipeline.typ
+++ b/scripts/diagrams/render-cycle-pipeline.typ
@@ -9,10 +9,8 @@
 #show: diagram-page
 
 #diagram(
-  spacing: (28pt, 14pt),
-  node-corner-radius: 7pt,
-  node-inset: 9pt,
-  edge-stroke: 1.1pt + colors.edge,
+  spacing: (30pt, 18pt),
+  ..diagram-defaults,
 
   node((0, 0), box-label(
     [1 · Clear Per-Frame State],
diff --git a/scripts/diagrams/style.typ b/scripts/diagrams/style.typ
index 606c7b03..d8b68eed 100644
--- a/scripts/diagrams/style.typ
+++ b/scripts/diagrams/style.typ
@@ -20,11 +20,23 @@
 
 // Applies page and text defaults for a diagram document.
 #let diagram-page(body) = {
-  set page(width: auto, height: auto, margin: 6pt, fill: none)
+  set page(width: auto, height: auto, margin: 10pt, fill: none)
   set text(font: ("SF Pro Text", "Helvetica Neue"), fill: white)
   body
 }
 
+// Shared diagram defaults: subtle, semi-transparent edges with small arrow
+// heads, and a node outset so arrows keep visible breathing room to every
+// node instead of touching its border. Spread into each diagram call via
+// `..diagram-defaults` and override spacing per diagram as needed.
+#let diagram-defaults = (
+  node-corner-radius: 7pt,
+  node-inset: 10pt,
+  node-outset: 5pt,
+  edge-stroke: 0.7pt + colors.edge.transparentize(25%),
+  mark-scale: 70%,
+)
+
 // A rounded box body: bold title line plus smaller detail lines.
 #let box-label(title, ..lines) = {
   set align(center)