avalonia-pro-max/design-system

Design System for Avalonia

Goal

A design system in Avalonia is a set of named resources (colors, brushes, fonts, doubles, thicknesses) that:

1. Live in ResourceDictionary files merged into App.axaml.
2. Are referenced via {DynamicResource Name} in views — never hard-coded hex/numbers.
3. Are split by theme variant (Light/Dark) so the entire UI re-themes instantly.
4. Follow a 3-layer naming model: primitive → semantic → component.

---

3-Layer Token Model

Layer 1 — Primitives (raw values, never used in views)

<!-- Resources/Primitives.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <!-- Color ramp: 50..950 like Tailwind -->
  <Color x:Key="Slate50">#F8FAFC</Color>
  <Color x:Key="Slate100">#F1F5F9</Color>
  <Color x:Key="Slate200">#E2E8F0</Color>
  <Color x:Key="Slate500">#64748B</Color>
  <Color x:Key="Slate700">#334155</Color>
  <Color x:Key="Slate900">#0F172A</Color>
  <Color x:Key="Slate950">#020617</Color>

  <Color x:Key="Blue500">#3B82F6</Color>
  <Color x:Key="Blue600">#2563EB</Color>
  <Color x:Key="Blue700">#1D4ED8</Color>

  <Color x:Key="Red500">#EF4444</Color>
  <Color x:Key="Green500">#22C55E</Color>
  <Color x:Key="Amber500">#F59E0B</Color>
</ResourceDictionary>

Layer 2 — Semantic tokens (theme-variant aware)

<!-- Resources/Semantic.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceInclude Source="avares://MyApp/Resources/Primitives.axaml"/>
  </ResourceDictionary.MergedDictionaries>

  <ResourceDictionary.ThemeDictionaries>

    <ResourceDictionary x:Key="Light">
      <!-- Surfaces -->
      <SolidColorBrush x:Key="SurfaceBackgroundBrush" Color="{StaticResource Slate50}"/>
      <SolidColorBrush x:Key="SurfaceBrush"           Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SurfaceElevatedBrush"   Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SurfaceMutedBrush"      Color="{StaticResource Slate100}"/>

      <!-- Text -->
      <SolidColorBrush x:Key="TextPrimaryBrush"   Color="{StaticResource Slate900}"/>
      <SolidColorBrush x:Key="TextSecondaryBrush" Color="{StaticResource Slate700}"/>
      <SolidColorBrush x:Key="TextMutedBrush"     Color="{StaticResource Slate500}"/>
      <SolidColorBrush x:Key="TextOnAccentBrush"  Color="#FFFFFF"/>

      <!-- Borders / dividers -->
      <SolidColorBrush x:Key="BorderBrush"         Color="{StaticResource Slate200}"/>
      <SolidColorBrush x:Key="BorderStrongBrush"   Color="{StaticResource Slate500}"/>

      <!-- Brand / status -->
      <SolidColorBrush x:Key="AccentBrush"  Color="{StaticResource Blue600}"/>
      <SolidColorBrush x:Key="DangerBrush"  Color="{StaticResource Red500}"/>
      <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource Green500}"/>
      <SolidColorBrush x:Key="WarningBrush" Color="{StaticResource Amber500}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Dark">
      <SolidColorBrush x:Key="SurfaceBackgroundBrush" Color="{StaticResource Slate950}"/>
      <SolidColorBrush x:Key="SurfaceBrush"           Color="{StaticResource Slate900}"/>
      <SolidColorBrush x:Key="SurfaceElevatedBrush"   Color="#1E293B"/>
      <SolidColorBrush x:Key="SurfaceMutedBrush"      Color="#1E293B"/>

      <SolidColorBrush x:Key="TextPrimaryBrush"   Color="{StaticResource Slate50}"/>
      <SolidColorBrush x:Key="TextSecondaryBrush" Color="{StaticResource Slate200}"/>
      <SolidColorBrush x:Key="TextMutedBrush"     Color="{StaticResource Slate500}"/>
      <SolidColorBrush x:Key="TextOnAccentBrush"  Color="#FFFFFF"/>

      <SolidColorBrush x:Key="BorderBrush"       Color="#1E293B"/>
      <SolidColorBrush x:Key="BorderStrongBrush" Color="{StaticResource Slate700}"/>

      <SolidColorBrush x:Key="AccentBrush"  Color="{StaticResource Blue500}"/>
      <SolidColorBrush x:Key="DangerBrush"  Color="#F87171"/>
      <SolidColorBrush x:Key="SuccessBrush" Color="#4ADE80"/>
      <SolidColorBrush x:Key="WarningBrush" Color="#FBBF24"/>
    </ResourceDictionary>

  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>