--- title: Building a Design Token System | Dev + AI | daily.dev description: 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... canonical: https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a Design Token System | Dev + AI | daily.dev og:description: 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... og:url: https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq og:image: https://api.daily.dev/og/posts/gqA7Wz0wq.png og:image:alt: Building a Design Token System | Dev + AI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a Design Token System | Dev + AI **[AngelSix](https://daily.dev/sources/angelsix)** · 53 min read · 0 upvotes · 0 comments ## Summary 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: 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 ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- [View this post on daily.dev](https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building a Design Token System | Dev + AI","url":"https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq"},"datePublished":"2026-10-04T13:04:35.117Z","dateModified":"2026-10-04T22:03:53.240Z","description":"The theme engine is live — now it needs a proper foundation. In this episode I work through \nthe design of a complete design token system: the minimal, compact...","image":"https://i.ytimg.com/vi/QMVdxRZqaU8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/QMVdxRZqaU8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AngelSix","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AngelSix","logo":"https://media.daily.dev/image/upload/s--h1ikmN_u--/f_auto,q_auto/v1791119063/logos/angelsix?_a=BAMAMicg0","url":"https://daily.dev/sources/angelsix"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-a-design-token-system-dev-ai-gqa7wz0wq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"","timeRequired":"PT53M","video":{"@type":"VideoObject","name":"Building a Design Token System | Dev + AI","description":"The theme engine is live — now it needs a proper foundation. In this episode I work through \nthe design of a complete design token system: the minimal, compact...","thumbnailUrl":"https://i.ytimg.com/vi/QMVdxRZqaU8/sddefault.jpg","uploadDate":"2026-10-04T13:04:35.117Z","duration":"PT53M","url":"https://api.daily.dev/r/gqA7Wz0wq","embedUrl":"https://www.youtube.com/embed/QMVdxRZqaU8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AngelSix","item":"https://daily.dev/sources/angelsix"},{"@type":"ListItem","position":3,"name":"Building a Design Token System | Dev + AI"}]} ```