From 51c75546fbaa322a2606f20af793a2b8ccd68bce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kusutori=E3=82=AF=E3=82=B9=E3=81=A8=E3=82=8A?=
 <100983934+kusutori@users.noreply.github.com>
Date: Wed, 14 Oct 2026 21:36:11 +0800
Subject: [PATCH 1/3] Add typed ResourceBuilder overloads for native styling
 values

---
 docs/_pipeline/templates/styling.md.dt        |  13 ++-
 docs/guide/styling.md                         |  13 ++-
 .../reactor-dsl/references/reactor.api.txt    |   6 +
 skills/reactor.api.txt                        |   6 +
 src/Reactor/Elements/ResourceBuilder.cs       |  51 ++++++++-
 .../Fixtures/TypedResourceOverrideFixtures.cs | 105 ++++++++++++++++++
 .../SelfTest/SelfTestFixtureRegistry.cs       |   4 +
 .../Reactor.Tests/LightweightStylingTests.cs  |  95 ++++++++++++++++
 8 files changed, 285 insertions(+), 8 deletions(-)
 create mode 100644 tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs

diff --git a/docs/_pipeline/templates/styling.md.dt b/docs/_pipeline/templates/styling.md.dt
index 4ad626662..7ce27fabb 100644
--- a/docs/_pipeline/templates/styling.md.dt
+++ b/docs/_pipeline/templates/styling.md.dt
@@ -206,9 +206,16 @@ pressed, disabled) automatically respect your overrides:
 
 ![Lightweight styling](screenshot://styling/lightweight-styling)
 
-`ResourceBuilder` supports `.Set(key, ThemeRef)` for theme-reactive
-overrides, `.Set(key, string)` for hex colors, `.Set(key, double)` for
-numeric values, and `.Set(key, CornerRadius)` for corner radius.
+`ResourceBuilder.Set` has explicit overloads for `ThemeRef`, `Brush`,
+color strings, `double`, `CornerRadius`, `Thickness`, `FontWeight`,
+`FontFamily`, `bool`, `Color`, and `GridLength`. Use `Thickness` for padding
+or border thickness, and `FontWeight` / `FontFamily` for typography resources.
+Literal values retain their types; `ThemeRef` overrides re-resolve on theme changes.
+
+The `Color` overload stores a color value, not a brush. The string overload
+still parses a hex or named color into a brush; it does not store arbitrary
+text. Integer literals continue to select the `double` overload, so pass the
+value type expected by the WinUI resource key rather than relying on conversion.
 Overrides cascade to child elements through WinUI's resource dictionary
 hierarchy.
 
diff --git a/docs/guide/styling.md b/docs/guide/styling.md
index fa5bf8f82..3160d1fea 100644
--- a/docs/guide/styling.md
+++ b/docs/guide/styling.md
@@ -353,9 +353,16 @@ class LightweightStylingExample : Component
 
 ![Lightweight styling](images/styling/lightweight-styling.png)
 
-`ResourceBuilder` supports `.Set(key, ThemeRef)` for theme-reactive
-overrides, `.Set(key, string)` for hex colors, `.Set(key, double)` for
-numeric values, and `.Set(key, CornerRadius)` for corner radius.
+`ResourceBuilder.Set` has explicit overloads for `ThemeRef`, `Brush`,
+color strings, `double`, `CornerRadius`, `Thickness`, `FontWeight`,
+`FontFamily`, `bool`, `Color`, and `GridLength`. Use `Thickness` for padding
+or border thickness, and `FontWeight` / `FontFamily` for typography resources.
+Literal values retain their types; `ThemeRef` overrides re-resolve on theme changes.
+
+The `Color` overload stores a color value, not a brush. The string overload
+still parses a hex or named color into a brush; it does not store arbitrary
+text. Integer literals continue to select the `double` overload, so pass the
+value type expected by the WinUI resource key rather than relying on conversion.
 Overrides cascade to child elements through WinUI's resource dictionary
 hierarchy.
 
diff --git a/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt b/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
index fbf6b92ce..fb3c99790 100644
--- a/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
+++ b/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
@@ -4901,8 +4901,14 @@ ToString() → string
 ### class ResourceBuilder
 new()
 Set(string key, Brush brush) → ResourceBuilder
+Set(string key, Color value) → ResourceBuilder
 Set(string key, CornerRadius value) → ResourceBuilder
+Set(string key, FontFamily value) → ResourceBuilder
+Set(string key, FontWeight value) → ResourceBuilder
+Set(string key, GridLength value) → ResourceBuilder
 Set(string key, ThemeRef themeRef) → ResourceBuilder
+Set(string key, Thickness value) → ResourceBuilder
+Set(string key, bool value) → ResourceBuilder
 Set(string key, double value) → ResourceBuilder
 Set(string key, string color) → ResourceBuilder
 
diff --git a/skills/reactor.api.txt b/skills/reactor.api.txt
index fbf6b92ce..fb3c99790 100644
--- a/skills/reactor.api.txt
+++ b/skills/reactor.api.txt
@@ -4901,8 +4901,14 @@ ToString() → string
 ### class ResourceBuilder
 new()
 Set(string key, Brush brush) → ResourceBuilder
+Set(string key, Color value) → ResourceBuilder
 Set(string key, CornerRadius value) → ResourceBuilder
+Set(string key, FontFamily value) → ResourceBuilder
+Set(string key, FontWeight value) → ResourceBuilder
+Set(string key, GridLength value) → ResourceBuilder
 Set(string key, ThemeRef themeRef) → ResourceBuilder
+Set(string key, Thickness value) → ResourceBuilder
+Set(string key, bool value) → ResourceBuilder
 Set(string key, double value) → ResourceBuilder
 Set(string key, string color) → ResourceBuilder
 
diff --git a/src/Reactor/Elements/ResourceBuilder.cs b/src/Reactor/Elements/ResourceBuilder.cs
index c45a049db..1477be76f 100644
--- a/src/Reactor/Elements/ResourceBuilder.cs
+++ b/src/Reactor/Elements/ResourceBuilder.cs
@@ -1,12 +1,14 @@
 using Microsoft.UI.Reactor.Core;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Media;
+using Windows.UI;
+using Windows.UI.Text;
 
 namespace Microsoft.UI.Reactor.Elements;
 
 /// <summary>
 /// Immutable snapshot of per-control resource overrides built by <see cref="ResourceBuilder"/>.
-/// Contains both literal values (colors, doubles, corner radii) and theme-reactive
+/// Contains both literal resource values and theme-reactive
 /// <see cref="ThemeRef"/> entries that are re-resolved on theme change.
 /// </summary>
 public sealed record ResourceOverrides(
@@ -64,7 +66,7 @@ public ResourceBuilder Set(string key, ThemeRef themeRef)
         return this;
     }
 
-    /// <summary>Sets a numeric resource override (e.g., <c>ButtonBorderThemeThickness</c>).</summary>
+    /// <summary>Sets a numeric resource override (e.g., <c>BreadcrumbBarItemThemeFontSize</c>).</summary>
     public ResourceBuilder Set(string key, double value)
     {
         _literals[key] = value;
@@ -78,6 +80,51 @@ public ResourceBuilder Set(string key, CornerRadius value)
         return this;
     }
 
+    /// <summary>Sets a thickness resource override (e.g., <c>BreadcrumbBarChevronPadding</c>).</summary>
+    public ResourceBuilder Set(string key, Thickness value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
+    /// <summary>Sets a font weight resource override (e.g., <c>BreadcrumbBarItemFontWeight</c>).</summary>
+    public ResourceBuilder Set(string key, FontWeight value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
+    /// <summary>Sets a font family resource override (e.g., <c>ContentControlThemeFontFamily</c>).</summary>
+    public ResourceBuilder Set(string key, FontFamily value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
+    /// <summary>Sets a Boolean resource override (e.g., <c>GridViewItemSelectionCheckMarkVisualEnabled</c>).</summary>
+    public ResourceBuilder Set(string key, bool value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
+    /// <summary>
+    /// Sets a literal color resource override, not a brush. Use the string or
+    /// <see cref="Brush"/> overload for resources that expect a brush.
+    /// </summary>
+    public ResourceBuilder Set(string key, Color value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
+    /// <summary>Sets a grid length resource override (e.g., <c>ContentDialogButtonSpacing</c>).</summary>
+    public ResourceBuilder Set(string key, GridLength value)
+    {
+        _literals[key] = value;
+        return this;
+    }
+
     /// <summary>Builds an immutable <see cref="ResourceOverrides"/> snapshot.</summary>
     internal ResourceOverrides Build()
     {
diff --git a/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs b/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs
new file mode 100644
index 000000000..857948ed3
--- /dev/null
+++ b/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs
@@ -0,0 +1,105 @@
+using Microsoft.UI.Reactor.Core;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using static Microsoft.UI.Reactor.Factories;
+
+namespace Microsoft.UI.Reactor.AppTests.Host.SelfTest.Fixtures;
+
+internal static class TypedResourceOverrideFixtures
+{
+    internal sealed class MountUpdateAndRemoval(Harness h) : SelfTestFixtureBase(h)
+    {
+        public override async Task RunAsync()
+        {
+            var family = new FontFamily("Consolas");
+            var updatedFamily = new FontFamily("Segoe UI");
+            Action<int>? setPhase = null;
+            var host = H.CreateHost();
+            host.Mount(ctx =>
+            {
+                var (phase, update) = ctx.UseState(0);
+                setPhase = update;
+                var element = Button("typed resource overrides");
+                if (phase < 2)
+                    element = element.Resources(r => r
+                        .Set("TypedPadding", Padding(phase))
+                        .Set("TypedWeight", new global::Windows.UI.Text.FontWeight((ushort)(phase == 0 ? 700 : 400)))
+                        .Set("TypedFont", phase == 0 ? family : updatedFamily)
+                        .Set("TypedBoolean", phase == 0)
+                        .Set("TypedColor", Color(phase))
+                        .Set("TypedGridLength", Length(phase))
+                        .Set("TypedBrush", "#123456"));
+                return element;
+            });
+
+            await Harness.Render();
+            var control = H.FindControl<Button>(b => b.Content is "typed resource overrides")
+                ?? throw new InvalidOperationException("Typed resource test button was not mounted.");
+            CheckValues(control, 0, family);
+            H.Check("TypedResource_StringStillCreatesBrush", control.Resources["TypedBrush"] is
+                SolidColorBrush { Color: var color } && color == global::Windows.UI.Color.FromArgb(255, 18, 52, 86));
+            control.Resources["UnmanagedResource"] = 17d;
+
+            setPhase!(1);
+            await Harness.Render();
+            var updated = H.FindControl<Button>(b => b.Content is "typed resource overrides")
+                ?? throw new InvalidOperationException("Typed resource test button disappeared on update.");
+            H.Check("TypedResource_ControlReused", ReferenceEquals(control, updated));
+            CheckValues(updated, 1, updatedFamily);
+
+            setPhase(2);
+            await Harness.Render();
+            var cleared = H.FindControl<Button>(b => b.Content is "typed resource overrides")
+                ?? throw new InvalidOperationException("Typed resource test button disappeared on removal.");
+            H.Check("TypedResource_ControlReusedAfterRemoval", ReferenceEquals(updated, cleared));
+            foreach (var key in new[] { "TypedPadding", "TypedWeight", "TypedFont", "TypedBoolean", "TypedColor", "TypedGridLength", "TypedBrush" })
+                H.Check($"TypedResource_Removed_{key}", !cleared.Resources.ContainsKey(key));
+            H.Check("TypedResource_UnmanagedPreserved", cleared.Resources["UnmanagedResource"] is double value && value == 17d);
+        }
+
+        private void CheckValues(Button control, int phase, FontFamily family)
+        {
+            H.Check($"TypedResource_Padding_{phase}", control.Resources["TypedPadding"] is Thickness padding && padding == Padding(phase));
+            H.Check($"TypedResource_Weight_{phase}", control.Resources["TypedWeight"] is global::Windows.UI.Text.FontWeight weight
+                && weight.Weight == (phase == 0 ? 700 : 400));
+            H.Check($"TypedResource_Font_{phase}", control.Resources["TypedFont"] is FontFamily actualFamily
+                && actualFamily.Source == family.Source);
+            H.Check($"TypedResource_Boolean_{phase}", control.Resources["TypedBoolean"] is bool boolean && boolean == (phase == 0));
+            H.Check($"TypedResource_Color_{phase}", control.Resources["TypedColor"] is global::Windows.UI.Color color && color == Color(phase));
+            H.Check($"TypedResource_GridLength_{phase}", control.Resources["TypedGridLength"] is GridLength length && length == Length(phase));
+        }
+
+        private static Thickness Padding(int phase) => phase == 0 ? new(8, 4, 6, 2) : new(1, 3, 5, 7);
+        private static global::Windows.UI.Color Color(int phase) => phase == 0
+            ? global::Windows.UI.Color.FromArgb(127, 12, 34, 56)
+            : global::Windows.UI.Color.FromArgb(255, 65, 43, 21);
+        private static GridLength Length(int phase) => phase == 0 ? new(2, GridUnitType.Star) : new(12, GridUnitType.Pixel);
+    }
+
+    internal sealed class BreadcrumbResources(Harness h) : SelfTestFixtureBase(h)
+    {
+        public override async Task RunAsync()
+        {
+            var padding = new Thickness(8, 4, 8, 0);
+            var weight = new global::Windows.UI.Text.FontWeight(700);
+            var host = H.CreateHost();
+            host.Mount(ctx => BreadcrumbBar([Breadcrumb("Receive"), Breadcrumb("History")], _ => { })
+                .Resources(r => r
+                    .Set("BreadcrumbBarItemThemeFontSize", 28)
+                    .Set("BreadcrumbBarChevronFontSize", 16d)
+                    .Set("BreadcrumbBarItemFontWeight", weight)
+                    .Set("BreadcrumbBarChevronPadding", padding)));
+            await Harness.Render();
+            var breadcrumb = H.FindControl<BreadcrumbBar>(_ => true)
+                ?? throw new InvalidOperationException("BreadcrumbBar was not mounted.");
+            H.Check("TypedResource_BreadcrumbPadding", breadcrumb.Resources["BreadcrumbBarChevronPadding"] is Thickness actualPadding
+                && actualPadding == padding);
+            H.Check("TypedResource_BreadcrumbWeight", breadcrumb.Resources["BreadcrumbBarItemFontWeight"] is global::Windows.UI.Text.FontWeight actualWeight
+                && actualWeight.Weight == 700);
+            H.Check("TypedResource_BreadcrumbIntegerStillDouble", breadcrumb.Resources["BreadcrumbBarItemThemeFontSize"] is double size && size == 28d);
+            H.Check("TypedResource_BreadcrumbItems", breadcrumb.ItemsSource is global::System.Collections.IEnumerable items
+                && items.Cast<object>().SequenceEqual(new object[] { "Receive", "History" }));
+        }
+    }
+}
diff --git a/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs b/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
index 689904857..a5ebc1985 100644
--- a/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
+++ b/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
@@ -850,6 +850,8 @@ internal static class SelfTestFixtureRegistry
         "WinUI_TypographyModifiersMerge",
         "WinUI_BorderFluentBrush",
         "WinUI_ResourceBuilderStringBrush",
+        "TypedResource_MountUpdateAndRemoval",
+        "TypedResource_BreadcrumbResources",
         "WinUI_ResourceBuilderFluentChaining",
         "WinUI_ResourceExtensionSetsOverrides",
         "WinUI_ResourceExtensionPreservesProps",
@@ -2915,6 +2917,8 @@ internal static string[] StaleTierDeclarations() =>
         "WinUI_TypographyModifiersMerge" => new WinUIActivationFixtures.TypographyModifiersMerge(harness),
         "WinUI_BorderFluentBrush" => new WinUIActivationFixtures.BorderFluentBrush(harness),
         "WinUI_ResourceBuilderStringBrush" => new WinUIActivationFixtures.ResourceBuilderStringBrush(harness),
+        "TypedResource_MountUpdateAndRemoval" => new TypedResourceOverrideFixtures.MountUpdateAndRemoval(harness),
+        "TypedResource_BreadcrumbResources" => new TypedResourceOverrideFixtures.BreadcrumbResources(harness),
         "WinUI_ResourceBuilderFluentChaining" => new WinUIActivationFixtures.ResourceBuilderFluentChaining(harness),
         "WinUI_ResourceExtensionSetsOverrides" => new WinUIActivationFixtures.ResourceExtensionSetsOverrides(harness),
         "WinUI_ResourceExtensionPreservesProps" => new WinUIActivationFixtures.ResourceExtensionPreservesProps(harness),
diff --git a/tests/Reactor.Tests/LightweightStylingTests.cs b/tests/Reactor.Tests/LightweightStylingTests.cs
index 9d81b6dc3..e95b63c10 100644
--- a/tests/Reactor.Tests/LightweightStylingTests.cs
+++ b/tests/Reactor.Tests/LightweightStylingTests.cs
@@ -55,6 +55,101 @@ public void ResourceBuilder_Set_CornerRadius_Creates_Literal()
 
     // ResourceBuilder_Fluent_Chaining_Works moved to selfhost fixtures (WinUIActivationFixtures).
 
+    [Fact]
+    public void ResourceBuilder_Set_Thickness_Preserves_All_Four_Sides()
+    {
+        var value = new Thickness(8, 4, 6, 2);
+        var builder = new ResourceBuilder();
+        Assert.Same(builder, builder.Set("BreadcrumbBarChevronPadding", value));
+
+        var overrides = builder.Build();
+        Assert.Equal(value, Assert.IsType<Thickness>(overrides.Literals["BreadcrumbBarChevronPadding"]));
+        Assert.Single(overrides.Literals);
+        Assert.Empty(overrides.ThemeRefs);
+    }
+
+    [Fact]
+    public void ResourceBuilder_Set_FontWeight_Preserves_Weight()
+    {
+        var value = new global::Windows.UI.Text.FontWeight(700);
+        var builder = new ResourceBuilder();
+        Assert.Same(builder, builder.Set("BreadcrumbBarItemFontWeight", value));
+        Assert.Equal(value, Assert.IsType<global::Windows.UI.Text.FontWeight>(
+            builder.Build().Literals["BreadcrumbBarItemFontWeight"]));
+    }
+
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    public void ResourceBuilder_Set_Boolean_Preserves_Value(bool value)
+    {
+        var builder = new ResourceBuilder();
+        Assert.Same(builder, builder.Set("GridViewItemSelectionCheckMarkVisualEnabled", value));
+        Assert.Equal(value, Assert.IsType<bool>(builder.Build().Literals["GridViewItemSelectionCheckMarkVisualEnabled"]));
+    }
+
+    [Fact]
+    public void ResourceBuilder_Set_Color_Preserves_Channels_Without_Brush_Conversion()
+    {
+        var value = global::Windows.UI.Color.FromArgb(127, 12, 34, 56);
+        var builder = new ResourceBuilder();
+        Assert.Same(builder, builder.Set("AccentFillColorDisabled", value));
+        Assert.Equal(value, Assert.IsType<global::Windows.UI.Color>(builder.Build().Literals["AccentFillColorDisabled"]));
+    }
+
+    [Theory]
+    [InlineData(GridUnitType.Auto, 1)]
+    [InlineData(GridUnitType.Pixel, 12)]
+    [InlineData(GridUnitType.Star, 2)]
+    public void ResourceBuilder_Set_GridLength_Preserves_Unit_And_Value(GridUnitType unit, double size)
+    {
+        var value = new GridLength(size, unit);
+        var builder = new ResourceBuilder();
+        Assert.Same(builder, builder.Set("ContentDialogButtonSpacing", value));
+        Assert.Equal(value, Assert.IsType<GridLength>(builder.Build().Literals["ContentDialogButtonSpacing"]));
+    }
+
+    [Fact]
+    public void ResourceBuilder_Set_Integer_Still_Uses_Double_Overload()
+    {
+        var builder = new ResourceBuilder();
+        builder.Set("BreadcrumbBarItemThemeFontSize", 28);
+        Assert.Equal(28d, Assert.IsType<double>(builder.Build().Literals["BreadcrumbBarItemThemeFontSize"]));
+    }
+
+    [Fact]
+    public void ResourceBuilder_Replacing_Typed_Value_Does_Not_Mutate_Earlier_Snapshot()
+    {
+        var builder = new ResourceBuilder();
+        var first = new Thickness(1, 2, 3, 4);
+        var second = new Thickness(8, 4, 8, 0);
+        builder.Set("BreadcrumbBarChevronPadding", first);
+        var before = builder.Build();
+        builder.Set("BreadcrumbBarChevronPadding", second);
+        var after = builder.Build();
+
+        Assert.Equal(first, Assert.IsType<Thickness>(before.Literals["BreadcrumbBarChevronPadding"]));
+        Assert.Equal(second, Assert.IsType<Thickness>(after.Literals["BreadcrumbBarChevronPadding"]));
+        Assert.Single(after.Literals);
+    }
+
+    [Fact]
+    public void Resources_Extension_Chains_Typed_Values_And_ThemeRef()
+    {
+        var padding = new Thickness(8, 4, 8, 0);
+        var weight = new global::Windows.UI.Text.FontWeight(700);
+        var el = Button("Go").Resources(r => r
+            .Set("BreadcrumbBarChevronPadding", padding)
+            .Set("BreadcrumbBarItemFontWeight", weight)
+            .Set("ButtonBackground", Theme.Accent));
+
+        Assert.Equal(padding, Assert.IsType<Thickness>(el.ResourceOverrides!.Literals["BreadcrumbBarChevronPadding"]));
+        Assert.Equal(weight, Assert.IsType<global::Windows.UI.Text.FontWeight>(el.ResourceOverrides.Literals["BreadcrumbBarItemFontWeight"]));
+        Assert.Equal(2, el.ResourceOverrides.Literals.Count);
+        Assert.Single(el.ResourceOverrides.ThemeRefs);
+        Assert.Equal(Theme.Accent, el.ResourceOverrides.ThemeRefs["ButtonBackground"]);
+    }
+
     [Fact]
     public void ResourceBuilder_Build_Returns_Immutable_Snapshot()
     {

From 51dfc4f256a0e1f97eafe863bbddf02b58de86c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kusutori=E3=82=AF=E3=82=B9=E3=81=A8=E3=82=8A?=
 <100983934+kusutori@users.noreply.github.com>
Date: Thu, 15 Oct 2026 19:37:26 +0800
Subject: [PATCH 2/3] Address typed resource review with semantic equality and
 native template probes

---
 docs/_pipeline/templates/styling.md.dt        | 15 ++++-
 docs/guide/styling.md                         | 15 ++++-
 docs/specs/002-winui3-gap-analysis.md         |  2 +-
 docs/specs/015-styling-design.md              |  9 +++
 docs/specs/tasks/styling-implementation.md    |  6 ++
 .../reactor-dsl/references/reactor.api.txt    |  2 +-
 skills/reactor.api.txt                        |  2 +-
 src/Reactor/Core/Element.cs                   |  6 +-
 src/Reactor/Elements/ResourceBuilder.cs       |  2 +-
 .../Fixtures/TypedResourceOverrideFixtures.cs | 58 +++++++++++++++----
 .../SelfTest/SelfTestFixtureRegistry.cs       |  2 +
 .../Reactor.Tests/LightweightStylingTests.cs  | 20 ++++++-
 12 files changed, 116 insertions(+), 23 deletions(-)

diff --git a/docs/_pipeline/templates/styling.md.dt b/docs/_pipeline/templates/styling.md.dt
index 7ce27fabb..abcc89784 100644
--- a/docs/_pipeline/templates/styling.md.dt
+++ b/docs/_pipeline/templates/styling.md.dt
@@ -208,17 +208,28 @@ pressed, disabled) automatically respect your overrides:
 
 `ResourceBuilder.Set` has explicit overloads for `ThemeRef`, `Brush`,
 color strings, `double`, `CornerRadius`, `Thickness`, `FontWeight`,
-`FontFamily`, `bool`, `Color`, and `GridLength`. Use `Thickness` for padding
+`FontFamily`, `bool`, and `GridLength`. Use `Thickness` for padding
 or border thickness, and `FontWeight` / `FontFamily` for typography resources.
 Literal values retain their types; `ThemeRef` overrides re-resolve on theme changes.
 
-The `Color` overload stores a color value, not a brush. The string overload
+`ResourceBuilder.SetColor(key, color)` stores a literal `Color`, not a brush.
+Use it only for Color-typed resources; brush-typed keys such as `ButtonBackground`
+need the string or `Brush` overload of `Set`. The string overload
 still parses a hex or named color into a brush; it does not store arbitrary
 text. Integer literals continue to select the `double` overload, so pass the
 value type expected by the WinUI resource key rather than relying on conversion.
 Overrides cascade to child elements through WinUI's resource dictionary
 hierarchy.
 
+Font-family resource keys require a `FontFamily` object, not a string:
+
+```csharp
+TextBlock("Code").Resources(r => r
+    .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+```
+
+Calling `Set(key, "Consolas")` would select the color-string overload instead.
+
 ## Custom resource access
 
 For brushes Reactor hasn't surfaced as a typed property, `Theme.Ref()`
diff --git a/docs/guide/styling.md b/docs/guide/styling.md
index 3160d1fea..cfcf28772 100644
--- a/docs/guide/styling.md
+++ b/docs/guide/styling.md
@@ -355,17 +355,28 @@ class LightweightStylingExample : Component
 
 `ResourceBuilder.Set` has explicit overloads for `ThemeRef`, `Brush`,
 color strings, `double`, `CornerRadius`, `Thickness`, `FontWeight`,
-`FontFamily`, `bool`, `Color`, and `GridLength`. Use `Thickness` for padding
+`FontFamily`, `bool`, and `GridLength`. Use `Thickness` for padding
 or border thickness, and `FontWeight` / `FontFamily` for typography resources.
 Literal values retain their types; `ThemeRef` overrides re-resolve on theme changes.
 
-The `Color` overload stores a color value, not a brush. The string overload
+`ResourceBuilder.SetColor(key, color)` stores a literal `Color`, not a brush.
+Use it only for Color-typed resources; brush-typed keys such as `ButtonBackground`
+need the string or `Brush` overload of `Set`. The string overload
 still parses a hex or named color into a brush; it does not store arbitrary
 text. Integer literals continue to select the `double` overload, so pass the
 value type expected by the WinUI resource key rather than relying on conversion.
 Overrides cascade to child elements through WinUI's resource dictionary
 hierarchy.
 
+Font-family resource keys require a `FontFamily` object, not a string:
+
+```csharp
+TextBlock("Code").Resources(r => r
+    .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+```
+
+Calling `Set(key, "Consolas")` would select the color-string overload instead.
+
 ## Custom resource access
 
 For brushes Reactor hasn't surfaced as a typed property, `Theme.Ref()`
diff --git a/docs/specs/002-winui3-gap-analysis.md b/docs/specs/002-winui3-gap-analysis.md
index 2b0bf7468..8668c58dc 100644
--- a/docs/specs/002-winui3-gap-analysis.md
+++ b/docs/specs/002-winui3-gap-analysis.md
@@ -471,7 +471,7 @@ by conditional rendering — elements not returned from render are never created
 | WinUI Feature | Status | Notes |
 |---|---|---|
 | **ResourceDictionary (app-level)** | Passthrough | ReactorApp loads XamlControlsResources; no DSL for authoring app-level dictionaries |
-| **ResourceDictionary (per-element)** | Exposed | `.Resources(r => r.Set(key, value))` writes into that element's own `FrameworkElement.Resources`; `ResourceBuilder.Set` overloads accept a hex/named color string, a `Brush`, a `ThemeRef`, a `double`, or a `CornerRadius` |
+| **ResourceDictionary (per-element)** | Exposed | `.Resources(r => r.Set(key, value))` writes into that element's own `FrameworkElement.Resources`; `Set` accepts color strings, `Brush`, `ThemeRef`, `double`, `CornerRadius`, `Thickness`, `FontWeight`, `FontFamily`, `bool`, and `GridLength`. `SetColor` stores raw `Color` values, not brushes |
 | **Resource lookup chain** | Passthrough | WinUI's chain works on underlying controls; a per-element override participates in it normally |
 | **Merged dictionaries** | Passthrough | Can merge via `.Set()` on Application.Resources |
 | **Theme dictionaries** | Passthrough | WinUI's theme dictionaries work natively; `ThemeRef` resolution reads through them |
diff --git a/docs/specs/015-styling-design.md b/docs/specs/015-styling-design.md
index 8e3e1828c..e6b4a94d0 100644
--- a/docs/specs/015-styling-design.md
+++ b/docs/specs/015-styling-design.md
@@ -271,6 +271,15 @@ public class ResourceBuilder
         return this;
     }
 
+    public ResourceBuilder Set(string key, Thickness value) { _resources[key] = value; return this; }
+    public ResourceBuilder Set(string key, FontWeight value) { _resources[key] = value; return this; }
+    public ResourceBuilder Set(string key, FontFamily value) { _resources[key] = value; return this; }
+    public ResourceBuilder Set(string key, bool value) { _resources[key] = value; return this; }
+    public ResourceBuilder Set(string key, GridLength value) { _resources[key] = value; return this; }
+
+    // Literal Color resources only. Brush-typed resources use Set(string/Brush/ThemeRef).
+    public ResourceBuilder SetColor(string key, Color value) { _resources[key] = value; return this; }
+
     internal ResourceOverrides Build() => new(_resources, _themeResources);
 }
 
diff --git a/docs/specs/tasks/styling-implementation.md b/docs/specs/tasks/styling-implementation.md
index 851a569d9..88a7f5e1c 100644
--- a/docs/specs/tasks/styling-implementation.md
+++ b/docs/specs/tasks/styling-implementation.md
@@ -156,6 +156,12 @@ competitive advantage — no other C# declarative framework surfaces this.
   - [x] `Set(string key, ThemeRef themeRef)` — stores for reactive resolution
   - [x] `Set(string key, double value)` — for numeric resource keys
   - [x] `Set(string key, CornerRadius value)` — for corner radius keys
+  - [x] `Set(string key, Thickness value)` — padding and border thickness
+  - [x] `Set(string key, FontWeight value)` — font weight
+  - [x] `Set(string key, FontFamily value)` — font family, compared by Source
+  - [x] `Set(string key, bool value)` — Boolean resources
+  - [x] `Set(string key, GridLength value)` — grid length resources
+  - [x] `SetColor(string key, Color value)` — raw Color only, not a Brush
   - [x] `internal ResourceOverrides Build()` — returns immutable snapshot
 
 ### 4.2 — ResourceOverrides record
diff --git a/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt b/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
index fb3c99790..727191aee 100644
--- a/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
+++ b/plugins/reactor/skills/reactor-dsl/references/reactor.api.txt
@@ -4901,7 +4901,6 @@ ToString() → string
 ### class ResourceBuilder
 new()
 Set(string key, Brush brush) → ResourceBuilder
-Set(string key, Color value) → ResourceBuilder
 Set(string key, CornerRadius value) → ResourceBuilder
 Set(string key, FontFamily value) → ResourceBuilder
 Set(string key, FontWeight value) → ResourceBuilder
@@ -4911,6 +4910,7 @@ Set(string key, Thickness value) → ResourceBuilder
 Set(string key, bool value) → ResourceBuilder
 Set(string key, double value) → ResourceBuilder
 Set(string key, string color) → ResourceBuilder
+SetColor(string key, Color value) → ResourceBuilder
 
 ### record ResourceOptions
 new(TimeSpan? StaleTime = null, TimeSpan? CacheTime = null, int RetryCount = 0, bool RefetchOnMount = true, string CacheKey = null, bool RefetchOnWindowFocus = false)
diff --git a/skills/reactor.api.txt b/skills/reactor.api.txt
index fb3c99790..727191aee 100644
--- a/skills/reactor.api.txt
+++ b/skills/reactor.api.txt
@@ -4901,7 +4901,6 @@ ToString() → string
 ### class ResourceBuilder
 new()
 Set(string key, Brush brush) → ResourceBuilder
-Set(string key, Color value) → ResourceBuilder
 Set(string key, CornerRadius value) → ResourceBuilder
 Set(string key, FontFamily value) → ResourceBuilder
 Set(string key, FontWeight value) → ResourceBuilder
@@ -4911,6 +4910,7 @@ Set(string key, Thickness value) → ResourceBuilder
 Set(string key, bool value) → ResourceBuilder
 Set(string key, double value) → ResourceBuilder
 Set(string key, string color) → ResourceBuilder
+SetColor(string key, Color value) → ResourceBuilder
 
 ### record ResourceOptions
 new(TimeSpan? StaleTime = null, TimeSpan? CacheTime = null, int RetryCount = 0, bool RefetchOnMount = true, string CacheKey = null, bool RefetchOnWindowFocus = false)
diff --git a/src/Reactor/Core/Element.cs b/src/Reactor/Core/Element.cs
index c3a046ed9..4bb7dd447 100644
--- a/src/Reactor/Core/Element.cs
+++ b/src/Reactor/Core/Element.cs
@@ -1498,8 +1498,8 @@ internal static bool ResourceOverridesEqual(
 
         // Literals: compare by VALUE. Brushes are re-parsed to fresh instances each render
         // (e.g. .Set("X", "#0078D4")), so reference compare would false-decline the skip for
-        // an UNCHANGED literal-override cell — use BrushesEqual; other literal kinds (double,
-        // CornerRadius) are value types whose Equals is correct.
+        // an UNCHANGED literal-override cell. FontFamily also compares by value (Source),
+        // not WinRT wrapper identity. The remaining literal kinds are value types.
         var la = a.Literals;
         var lb = b.Literals;
         if (la.Count != lb.Count) return false;
@@ -1526,6 +1526,8 @@ private static bool ResourceLiteralEqual(object? a, object? b)
         if (ReferenceEquals(a, b)) return true;
         if (a is null || b is null) return false;
         if (a is Brush ba && b is Brush bb) return BrushesEqual(ba, bb);
+        if (a is Microsoft.UI.Xaml.Media.FontFamily fa && b is Microsoft.UI.Xaml.Media.FontFamily fb)
+            return FontFamiliesEqual(fa, fb);
         return a.Equals(b);
     }
 }
diff --git a/src/Reactor/Elements/ResourceBuilder.cs b/src/Reactor/Elements/ResourceBuilder.cs
index 1477be76f..4aecea649 100644
--- a/src/Reactor/Elements/ResourceBuilder.cs
+++ b/src/Reactor/Elements/ResourceBuilder.cs
@@ -112,7 +112,7 @@ public ResourceBuilder Set(string key, bool value)
     /// Sets a literal color resource override, not a brush. Use the string or
     /// <see cref="Brush"/> overload for resources that expect a brush.
     /// </summary>
-    public ResourceBuilder Set(string key, Color value)
+    public ResourceBuilder SetColor(string key, Color value)
     {
         _literals[key] = value;
         return this;
diff --git a/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs b/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs
index 857948ed3..75673bb3e 100644
--- a/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs
+++ b/tests/Reactor.AppTests.Host/SelfTest/Fixtures/TypedResourceOverrideFixtures.cs
@@ -1,6 +1,7 @@
 using Microsoft.UI.Reactor.Core;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Automation;
 using Microsoft.UI.Xaml.Media;
 using static Microsoft.UI.Reactor.Factories;
 
@@ -27,7 +28,7 @@ public override async Task RunAsync()
                         .Set("TypedWeight", new global::Windows.UI.Text.FontWeight((ushort)(phase == 0 ? 700 : 400)))
                         .Set("TypedFont", phase == 0 ? family : updatedFamily)
                         .Set("TypedBoolean", phase == 0)
-                        .Set("TypedColor", Color(phase))
+                        .SetColor("TypedColor", Color(phase))
                         .Set("TypedGridLength", Length(phase))
                         .Set("TypedBrush", "#123456"));
                 return element;
@@ -84,22 +85,55 @@ public override async Task RunAsync()
             var padding = new Thickness(8, 4, 8, 0);
             var weight = new global::Windows.UI.Text.FontWeight(700);
             var host = H.CreateHost();
-            host.Mount(ctx => BreadcrumbBar([Breadcrumb("Receive"), Breadcrumb("History")], _ => { })
+            host.Mount(ctx => VStack(
+                BreadcrumbBar([Breadcrumb("Receive"), Breadcrumb("History")], _ => { }).Width(600).AutomationId("baseline-breadcrumb"),
+                BreadcrumbBar([Breadcrumb("Receive"), Breadcrumb("History")], _ => { }).Width(600).AutomationId("styled-breadcrumb")
                 .Resources(r => r
                     .Set("BreadcrumbBarItemThemeFontSize", 28)
                     .Set("BreadcrumbBarChevronFontSize", 16d)
                     .Set("BreadcrumbBarItemFontWeight", weight)
-                    .Set("BreadcrumbBarChevronPadding", padding)));
+                    .Set("BreadcrumbBarChevronPadding", padding))));
             await Harness.Render();
-            var breadcrumb = H.FindControl<BreadcrumbBar>(_ => true)
-                ?? throw new InvalidOperationException("BreadcrumbBar was not mounted.");
-            H.Check("TypedResource_BreadcrumbPadding", breadcrumb.Resources["BreadcrumbBarChevronPadding"] is Thickness actualPadding
-                && actualPadding == padding);
-            H.Check("TypedResource_BreadcrumbWeight", breadcrumb.Resources["BreadcrumbBarItemFontWeight"] is global::Windows.UI.Text.FontWeight actualWeight
-                && actualWeight.Weight == 700);
-            H.Check("TypedResource_BreadcrumbIntegerStillDouble", breadcrumb.Resources["BreadcrumbBarItemThemeFontSize"] is double size && size == 28d);
-            H.Check("TypedResource_BreadcrumbItems", breadcrumb.ItemsSource is global::System.Collections.IEnumerable items
-                && items.Cast<object>().SequenceEqual(new object[] { "Receive", "History" }));
+            var styled = H.FindControl<BreadcrumbBar>(b => AutomationProperties.GetAutomationId(b) == "styled-breadcrumb")!;
+            var baseline = H.FindControl<BreadcrumbBar>(b => AutomationProperties.GetAutomationId(b) == "baseline-breadcrumb")!;
+            await Harness.WaitFor(() => Probe(styled) is { Text: not null, Chevron: not null }
+                && Probe(baseline) is { Text: not null, Chevron: not null });
+            var plain = Probe(baseline);
+            var actual = Probe(styled);
+            H.Check("TypedResource_BreadcrumbBaseline", plain.Text is not null && plain.Chevron is not null
+                && plain.Text.FontWeight.Weight != weight.Weight && plain.Chevron.Padding != padding);
+            H.Check("TypedResource_BreadcrumbRenderedWeight", actual.Text?.FontWeight.Weight == weight.Weight);
+            H.Check("TypedResource_BreadcrumbRenderedPadding", actual.Chevron?.Padding == padding);
+            H.Check("TypedResource_BreadcrumbRenderedSize", actual.Text?.FontSize == 28d);
+        }
+
+        private static (TextBlock? Text, TextBlock? Chevron) Probe(BreadcrumbBar bar)
+        {
+            var text = Descendants(bar).OfType<TextBlock>().ToArray();
+            return (text.FirstOrDefault(t => t.Text == "Receive"),
+                text.FirstOrDefault(t => t.Name == "PART_ChevronTextBlock"));
+        }
+
+        private static IEnumerable<DependencyObject> Descendants(DependencyObject root)
+        {
+            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++)
+            {
+                var child = VisualTreeHelper.GetChild(root, i);
+                yield return child;
+                foreach (var descendant in Descendants(child)) yield return descendant;
+            }
+        }
+    }
+
+    internal sealed class FontFamilyEquality(Harness h) : SelfTestFixtureBase(h)
+    {
+        public override Task RunAsync()
+        {
+            static Element Font(string source) => TextBlock("font")
+                .Resources(r => r.Set("ContentControlThemeFontFamily", new FontFamily(source)));
+            H.Check("TypedResource_FreshFontFamiliesEqual", Element.ShallowEquals(Font("Consolas"), Font("Consolas")));
+            H.Check("TypedResource_DifferentFontFamiliesDiffer", !Element.ShallowEquals(Font("Consolas"), Font("Segoe UI")));
+            return Task.CompletedTask;
         }
     }
 }
diff --git a/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs b/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
index a5ebc1985..2aebfc5f0 100644
--- a/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
+++ b/tests/Reactor.AppTests.Host/SelfTest/SelfTestFixtureRegistry.cs
@@ -852,6 +852,7 @@ internal static class SelfTestFixtureRegistry
         "WinUI_ResourceBuilderStringBrush",
         "TypedResource_MountUpdateAndRemoval",
         "TypedResource_BreadcrumbResources",
+        "TypedResource_FontFamilyEquality",
         "WinUI_ResourceBuilderFluentChaining",
         "WinUI_ResourceExtensionSetsOverrides",
         "WinUI_ResourceExtensionPreservesProps",
@@ -2919,6 +2920,7 @@ internal static string[] StaleTierDeclarations() =>
         "WinUI_ResourceBuilderStringBrush" => new WinUIActivationFixtures.ResourceBuilderStringBrush(harness),
         "TypedResource_MountUpdateAndRemoval" => new TypedResourceOverrideFixtures.MountUpdateAndRemoval(harness),
         "TypedResource_BreadcrumbResources" => new TypedResourceOverrideFixtures.BreadcrumbResources(harness),
+        "TypedResource_FontFamilyEquality" => new TypedResourceOverrideFixtures.FontFamilyEquality(harness),
         "WinUI_ResourceBuilderFluentChaining" => new WinUIActivationFixtures.ResourceBuilderFluentChaining(harness),
         "WinUI_ResourceExtensionSetsOverrides" => new WinUIActivationFixtures.ResourceExtensionSetsOverrides(harness),
         "WinUI_ResourceExtensionPreservesProps" => new WinUIActivationFixtures.ResourceExtensionPreservesProps(harness),
diff --git a/tests/Reactor.Tests/LightweightStylingTests.cs b/tests/Reactor.Tests/LightweightStylingTests.cs
index e95b63c10..05e078b0e 100644
--- a/tests/Reactor.Tests/LightweightStylingTests.cs
+++ b/tests/Reactor.Tests/LightweightStylingTests.cs
@@ -93,7 +93,7 @@ public void ResourceBuilder_Set_Color_Preserves_Channels_Without_Brush_Conversio
     {
         var value = global::Windows.UI.Color.FromArgb(127, 12, 34, 56);
         var builder = new ResourceBuilder();
-        Assert.Same(builder, builder.Set("AccentFillColorDisabled", value));
+        Assert.Same(builder, builder.SetColor("AccentFillColorDisabled", value));
         Assert.Equal(value, Assert.IsType<global::Windows.UI.Color>(builder.Build().Literals["AccentFillColorDisabled"]));
     }
 
@@ -117,6 +117,24 @@ public void ResourceBuilder_Set_Integer_Still_Uses_Double_Overload()
         Assert.Equal(28d, Assert.IsType<double>(builder.Build().Literals["BreadcrumbBarItemThemeFontSize"]));
     }
 
+    [Fact]
+    public void Typed_Resource_Equality_Uses_Values_Not_Box_Identity()
+    {
+        Check(r => r.Set("x", new Thickness(1, 2, 3, 4)), r => r.Set("x", new Thickness(4, 3, 2, 1)));
+        Check(r => r.Set("x", new global::Windows.UI.Text.FontWeight(700)), r => r.Set("x", new global::Windows.UI.Text.FontWeight(400)));
+        Check(r => r.Set("x", true), r => r.Set("x", false));
+        Check(r => r.SetColor("x", global::Windows.UI.Color.FromArgb(127, 12, 34, 56)),
+            r => r.SetColor("x", global::Windows.UI.Color.FromArgb(255, 12, 34, 56)));
+        Check(r => r.Set("x", new GridLength(2, GridUnitType.Star)), r => r.Set("x", new GridLength(2, GridUnitType.Pixel)));
+
+        static void Check(Action<ResourceBuilder> same, Action<ResourceBuilder> different)
+        {
+            var first = TextBlock("value").Resources(same);
+            Assert.True(Element.ShallowEquals(first, TextBlock("value").Resources(same)));
+            Assert.False(Element.ShallowEquals(first, TextBlock("value").Resources(different)));
+        }
+    }
+
     [Fact]
     public void ResourceBuilder_Replacing_Typed_Value_Does_Not_Mutate_Earlier_Snapshot()
     {

From dee803a4c9763ee29f83fbbd31bd130e15652128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kusutori=E3=82=AF=E3=82=B9=E3=81=A8=E3=82=8A?=
 <100983934+kusutori@users.noreply.github.com>
Date: Fri, 16 Oct 2026 19:51:11 +0800
Subject: [PATCH 3/3] Compile the font-family resource example against a
 consuming Button

---
 docs/_pipeline/apps/styling/App.cs     | 9 +++++++++
 docs/_pipeline/templates/styling.md.dt | 4 +---
 docs/guide/styling.md                  | 8 ++++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/docs/_pipeline/apps/styling/App.cs b/docs/_pipeline/apps/styling/App.cs
index 9d4903797..304ab4ecd 100644
--- a/docs/_pipeline/apps/styling/App.cs
+++ b/docs/_pipeline/apps/styling/App.cs
@@ -168,6 +168,15 @@ public override Element Render()
 }
 // </snippet:lightweight-styling>
 
+// <snippet:font-family-resource>
+class FontFamilyResourceExample : Component
+{
+    public override Element Render() =>
+        Button("Code").Resources(r => r
+            .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+}
+// </snippet:font-family-resource>
+
 // <snippet:custom-resource>
 class CustomResourceExample : Component
 {
diff --git a/docs/_pipeline/templates/styling.md.dt b/docs/_pipeline/templates/styling.md.dt
index abcc89784..0e8dd2a0f 100644
--- a/docs/_pipeline/templates/styling.md.dt
+++ b/docs/_pipeline/templates/styling.md.dt
@@ -223,9 +223,7 @@ hierarchy.
 
 Font-family resource keys require a `FontFamily` object, not a string:
 
-```csharp
-TextBlock("Code").Resources(r => r
-    .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+```csharp snippet="styling/font-family-resource"
 ```
 
 Calling `Set(key, "Consolas")` would select the color-string overload instead.
diff --git a/docs/guide/styling.md b/docs/guide/styling.md
index cfcf28772..6ba14f1f1 100644
--- a/docs/guide/styling.md
+++ b/docs/guide/styling.md
@@ -371,8 +371,12 @@ hierarchy.
 Font-family resource keys require a `FontFamily` object, not a string:
 
 ```csharp
-TextBlock("Code").Resources(r => r
-    .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+class FontFamilyResourceExample : Component
+{
+    public override Element Render() =>
+        Button("Code").Resources(r => r
+            .Set("ContentControlThemeFontFamily", new Microsoft.UI.Xaml.Media.FontFamily("Consolas")));
+}
 ```
 
 Calling `Set(key, "Consolas")` would select the color-string overload instead.