Uploaded May 2026 | Updated September 2026, 3 weeks ago
The theme engine is live — now it needs a proper foundation. In this episode I work through
the design of a complete design token system: the minimal, compact set of values that define
every visual property in a theme. Colours, spacing, radius, stroke, scaling — all architected
from first principles.
And yes, I used AI. Not to write the code — but as a collaborator in the design process.
The human makes every decision. The AI challenges, refines, and fills gaps. This is what
correct AI usage looks like: not vibe coding, not outsourcing — genuine engineering with a
powerful tool in your hands.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How the new source generator eliminates manual theme compilation — with full IntelliSense
• What a design token system actually is and why it matters for scalable UI theming
• Foundation tokens vs semantic tokens — and how the two layers interact
• Semantic colour naming: Surface, On-Surface, Accent, and why "background/foreground" falls short
• How a single BaseSize value scales every margin, padding, font and spacing proportionally
• Defining overlay layers for hover, pressed, and disabled states without hardcoding values
• How to use AI as a design collaborator — prompting, pushing back, and staying in control
• Why AI loses context over long sessions and how to manage it without losing your work
• The final locked design token plan — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & recap of the new theme engine
[0:40] – Installing the Angel6.ThemeEngine NuGet package
[1:19] – Defining a theme class with the [Theme] attribute
[1:49] – Injecting ThemeContext via dependency injection
[2:48] – Theme class properties in practice
[4:54] – Using theme: prefix in XAML with full IntelliSense
[6:10] – Source generator demo — instantaneous updates, no recompile
[7:55] – Why we need a design token system — entering AI collaboration
[9:28] – AI names it: "design token system" and confirms the concept
[11:56] – AI's first proposed architecture: colours, sizing, radius
[14:16] – Pushing back — more accent colours, base size scaling, real zoom
[17:20] – AI's revised plan: semantic colours, UI zoom, proportional scaling
[19:06] – AI creates the plan file using its planning skill
[22:10] – Brainstorming plan locked in the /plans folder
[25:06] – Closing questions: spacing levels, radius, overlays, accent derivation
[27:04] – AI's response — overlay layers, scale implementation, pastel accents
[30:00] – Further feedback: base size as derived properties, not render transform
[33:09] – Agreeing on scale implementation approach
[34:38] – Locking in the accent colour palette values
[36:27] – AI refines the plan with strong opinions acknowledged
[39:12] – Plan locked — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Part 5 – Checkbox Anatomy: youtube.com/watch?v=uIimnwjITT0
▶ Part 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Part 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
The theme engine is live — now it needs a proper foundation. In this episode I work through
the design of a complete design token system: the minimal, compact set of values that define
every visual property in a theme. Colours, spacing, radius, stroke, scaling — all architected
from first principles.
And yes, I used AI. Not to write the code — but as a collaborator in the design process.
The human makes every decision. The AI challenges, refines, and fills gaps. This is what
correct AI usage looks like: not vibe coding, not outsourcing — genuine engineering with a
powerful tool in your hands.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How the new source generator eliminates manual theme compilation — with full IntelliSense
• What a design token system actually is and why it matters for scalable UI theming
• Foundation tokens vs semantic tokens — and how the two layers interact
• Semantic colour naming: Surface, On-Surface, Accent, and why "background/foreground" falls short
• How a single BaseSize value scales every margin, padding, font and spacing proportionally
• Defining overlay layers for hover, pressed, and disabled states without hardcoding values
• How to use AI as a design collaborator — prompting, pushing back, and staying in control
• Why AI loses context over long sessions and how to manage it without losing your work
• The final locked design token plan — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & recap of the new theme engine
[0:40] – Installing the Angel6.ThemeEngine NuGet package
[1:19] – Defining a theme class with the [Theme] attribute
[1:49] – Injecting ThemeContext via dependency injection
[2:48] – Theme class properties in practice
[4:54] – Using theme: prefix in XAML with full IntelliSense
[6:10] – Source generator demo — instantaneous updates, no recompile
[7:55] – Why we need a design token system — entering AI collaboration
[9:28] – AI names it: "design token system" and confirms the concept
[11:56] – AI's first proposed architecture: colours, sizing, radius
[14:16] – Pushing back — more accent colours, base size scaling, real zoom
[17:20] – AI's revised plan: semantic colours, UI zoom, proportional scaling
[19:06] – AI creates the plan file using its planning skill
[22:10] – Brainstorming plan locked in the /plans folder
[25:06] – Closing questions: spacing levels, radius, overlays, accent derivation
[27:04] – AI's response — overlay layers, scale implementation, pastel accents
[30:00] – Further feedback: base size as derived properties, not render transform
[33:09] – Agreeing on scale implementation approach
[34:38] – Locking in the accent colour palette values
[36:27] – AI refines the plan with strong opinions acknowledged
[39:12] – Plan locked — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Part 5 – Checkbox Anatomy: youtube.com/watch?v=uIimnwjITT0
▶ Part 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Part 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
