Uploaded March 2025 | Updated September 2026, 3 weeks ago
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk




![Building a Design Token System | Dev + AI
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 YOULL 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] β AIs first proposed architecture: colours, sizing, radius
[14:16] β Pushing back β more accent colours, base size scaling, real zoom
[17:20] β AIs 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] β AIs 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: https://www.youtube.com/watch?v=rUKlQnjU0tc
βΆ Part 2 β Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
βΆ Part 3 β Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
βΆ Part 4 β Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
βΆ Part 5 β Checkbox Anatomy: https://www.youtube.com/watch?v=uIimnwjITT0
βΆ Part 6 β Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY
βΆ Part 7 β Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U
πΊ Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
πΎ Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
π AngelSix: https://www.angelsix.com
βββββββββββββββββββββββββββββββ
πΊ SERIES: Avalonia UI Theming β Hand Coded From Scratch
βββββββββββββββββββββββββββββββ
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Building a Design Token System | Dev + AI](https://i.ytimg.com/vi/QMVdxRZqaU8/mqdefault.jpg)





