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)

  
  #F8FAFC
  #F1F5F9
  #E2E8F0
  #64748B
  #334155
  #0F172A
  #020617

  #3B82F6
  #2563EB
  #1D4ED8

  #EF4444
  #22C55E
  #F59E0B

Layer 2 — Semantic tokens (theme-variant aware)

Layer 3 — Component-specific (optional)

Rule: Views use Layer 2/3 only. Never reference Slate900 directly from a view.

---

Typography Scale

Choose ONE scale and stick to it. Modular scale 1.25 (Major Third) is a safe default.

  
  avares://MyApp/Assets/Fonts/Inter-Variable.ttf#Inter
  avares://MyApp/Assets/Fonts/JetBrainsMono-Variable.ttf#JetBrains Mono

  
  12
  13
  14   
  16
  18
  22
  28
  36
  48

  
  1.2
  1.5
  1.65

Type ramp Styles:

Usage: Dashboard

Variable fonts

Avalonia 11+ supports variable fonts (.ttf/.otf with axes). Inter and JetBrains Mono variable versions cover most needs at one file each.

---

Spacing Scale (4 / 8 rhythm)

0
4
8
12
16
20
24
32
40
48
64

For Margin/Padding use Thickness:

20
12
24,16

Padding="{StaticResource PaddingCard}".

---

Radius & Elevation

4
8
12
16
9999

0 1 2 0 #19000000
0 4 8 -2 #26000000, 0 2 4 -2 #1A000000
0 12 24 -8 #33000000, 0 4 8 -4 #1F000000

Apply to Border:

For dark mode, halve shadow opacity in the dark theme dictionary (or use a subtle 1px border instead).

---

Wire Everything Up

---

Theme Switching at Runtime

Application.Current!.RequestedThemeVariant =
    Application.Current.ActualThemeVariant == ThemeVariant.Dark
        ? ThemeVariant.Light
        : ThemeVariant.Dark;

Persist to settings; restore on launch in OnFrameworkInitializationCompleted.

---

Palette Selection by Product Type

| Product type | Accent suggestion | Tone | |---|---|---| | Productivity / SaaS dashboard | Blue 600 / Indigo 600 | Cool, professional | | Developer tool / IDE | Slate + accent (Cyan 500 or Violet 500) | Neutral, dark-mode first | | Finance / banking | Green 600 or Navy 800 | Trust, conservative | | Health / wellness | Teal 500 / Emerald 500 | Calm, fresh | | Creative / media | Bold gradient or Magenta 500 | Vibrant | | Gaming / entertainment | Purple 600 + Neon accent | Energetic | | Enterprise B2B | Slate + Brand color from logo | Restrained | | Education / kids | Saturated multi-color (Amber/Sky/Pink) | Friendly |

Always validate accent on white and the dark surface for ≥4.5:1 contrast on text overlays.

---

Common Mistakes

• Hex literals in views — kills theming. Always DynamicResource.
• Missing dark-mode variant — app looks broken if user's OS is dark.
• Using StaticResource for theme-variant brushes — won't switch at runtime.
• More than ~3 accent colors — visual noise; pick one accent + one optional secondary.
• Inventing one-off spacing values (Margin="13,7") — breaks rhythm.
• Body text below 13px on desktop — readability suffers.
• Pure black #000 text on pure white — too harsh; use Slate 900 / Slate 50.
• Same shadow opacity in dark mode — looks muddy. Reduce or replace with a 1px border.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: linuxdevel
• Source: linuxdevel/Avalonia-skills
• License: MIT

Install and usage instructions live in the source repository linked above.