From 918231f5f265d48e1aa0039c19841efb3a11031c Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@local>
Date: Sat, 18 Apr 2026 16:42:54 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20style-guide=20polish=20=E2=80=94=20secti?=
 =?UTF-8?q?on=20labels,=20representative=20content,=20emphasis=20scope?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/style-guide.astro | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/style-guide.astro b/src/pages/style-guide.astro
index aff76a7..feeb3cc 100644
--- a/src/pages/style-guide.astro
+++ b/src/pages/style-guide.astro
@@ -264,6 +264,12 @@ const lucideIcons = [
             The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic.
             Everything before it stays in regular weight. Every headline ends with a period.
           </p>
+          <p class="body-sm sg-note">
+            Scope: applies to all display and headline scales — <code>display-xl</code>, <code>display-lg</code>,
+            <code>display-md</code>, <code>headline-lg</code>, <code>headline-md</code>, <code>headline-sm</code>.
+            Not applied to <code>title</code> (sans), <code>body</code>, <code>label</code>, or <code>lead</code>.
+            Never applied to user-generated content (contribution text, document titles, notes).
+          </p>
           <div class="emphasis-examples">
             <div class="display-md emphasis-headline">
               A quiet place to keep <em class="emphasis-keyword">what you are reading.</em>
@@ -411,11 +417,11 @@ const lucideIcons = [
           <div class="field">
             <label class="field-label" for="sg-org">Organisation</label>
             <input class="field-input" id="sg-org" type="text" value="Statens Serum Institut" />
-            <span class="field-hint">Auto-saved a moment ago.</span>
+            <span class="field-hint">e.g. Auto-saved a moment ago.</span>
           </div>
           <div class="field">
             <label class="field-label" for="sg-idea">Your idea</label>
-            <textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="A question, an inspiration, or an idea…"></textarea>
+            <textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="What if the wiki could auto-link to relevant meeting notes when I paste a concept?"></textarea>
           </div>
           <div class="field">
             <label class="field-label" for="sg-disabled">Read-only</label>
@@ -669,6 +675,12 @@ const lucideIcons = [
   .sg-section-label {
     display: block;
     margin-bottom: var(--space-7);
+    font-family: var(--font-sans);
+    font-weight: 500;
+    font-size: var(--text-label-md);
+    color: var(--on-surface-muted);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
   }
   .sg-sub {
     font-family: var(--font-sans);