diff --git a/app/assets/stylesheets/alchemy/_custom-properties.scss b/app/assets/stylesheets/alchemy/_custom-properties.scss
new file mode 100644
index 0000000000..8fd926086c
--- /dev/null
+++ b/app/assets/stylesheets/alchemy/_custom-properties.scss
@@ -0,0 +1,61 @@
+:root {
+  // Sizes
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+
+  // Font Families
+  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+    Terminal, monospace;
+  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+    "Lucida Sans", Verdana, Tahoma, sans-serif;
+
+  // Font Size - at the moment only in Pixel, because the base font size is 12px
+  --font-size_small: 12px; // 0.875rem
+  --font-size_medium: 14px; // 1rem
+  --font-size_large: 16px; // 1.25 rem
+
+  // border-radius
+  --border-radius_medium: 3px;
+
+  // Colors
+  --color-blue_very_light: hsl(203deg, 32%, 85%);
+  --color-blue_light: hsl(212deg, 51%, 50%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 51%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60, 81%, 92%);
+  --color-yellow_medium: hsl(56, 68%, 85%);
+  --color-yellow_dark: hsl(56, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(360deg, 47%, 88%);
+  --color-red_light: hsl(360deg, 25%, 69%);
+  --color-red_medium: hsl(360deg, 51%, 42%);
+  --color-red_dark: hsl(360deg, 51%, 25%);
+
+  --color-grey-blue_light: hsl(224deg, 23%, 60%);
+  --color-grey-blue_medium: hsl(224deg, 23%, 40%);
+  --color-grey-blue_dark: hsl(224deg, 23%, 26%);
+
+  --color-grey_light: hsl(0deg, 0%, 97%);
+  --color-grey_medium: hsl(0deg, 0%, 94%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+}
+
+.alchemy-light {
+  --outline-color: var(--color-orange_dark);
+
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_medium);
+}
diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss
index 6538a4c136..c970955f5e 100644
--- a/app/assets/stylesheets/alchemy/admin.scss
+++ b/app/assets/stylesheets/alchemy/admin.scss
@@ -6,6 +6,7 @@
 @import "fontawesome/fontawesome";
 @import "fontawesome/regular";
 @import "fontawesome/solid";
+@import "alchemy/custom-properties";
 @import "alchemy/defaults";
 @import "alchemy/archive";
 @import "alchemy/navigation";
diff --git a/app/assets/stylesheets/alchemy/shoelace.scss b/app/assets/stylesheets/alchemy/shoelace.scss
index 92b15bcade..4c84a24104 100644
--- a/app/assets/stylesheets/alchemy/shoelace.scss
+++ b/app/assets/stylesheets/alchemy/shoelace.scss
@@ -1,22 +1,327 @@
 :root,
 :host,
-.sl-theme-light {
-  --sl-font-size-small: #{$base-font-size};
-  --sl-color-primary-600: #{$dark-blue};
-  --sl-color-neutral-600: #{$text-color};
-  --sl-focus-ring-color: #{$focus-color};
+.alchemy-light {
+  color-scheme: light;
+
+  /*
+   * Theme Tokens
+   */
+
+  /* Primary */
+  --sl-color-primary-50: var(--color-blue_very_light);
+  --sl-color-primary-100: var(--color-blue_very_light);
+  --sl-color-primary-200: var(--color-blue_light);
+  --sl-color-primary-300: var(--color-blue_light);
+  --sl-color-primary-400: var(--color-blue_medium);
+  --sl-color-primary-500: var(--color-blue_medium);
+  --sl-color-primary-600: var(--color-blue_dark);
+  --sl-color-primary-700: var(--color-blue_dark);
+  --sl-color-primary-800: var(--color-blue_dark);
+  --sl-color-primary-900: var(--color-blue_dark);
+  --sl-color-primary-950: var(--color-blue_dark);
+
+  /* Success */
+  --sl-color-success-50: var(--color-green_very_light);
+  --sl-color-success-100: var(--color-green_very_light);
+  --sl-color-success-200: var(--color-green_light);
+  --sl-color-success-300: var(--color-green_light);
+  --sl-color-success-400: var(--color-green_medium);
+  --sl-color-success-500: var(--color-green_medium);
+  --sl-color-success-600: var(--color-green_medium);
+  --sl-color-success-700: var(--color-green_medium);
+  --sl-color-success-800: var(--color-green_dark);
+  --sl-color-success-900: var(--color-green_dark);
+  --sl-color-success-950: var(--color-green_dark);
+
+  /* Warning */
+  --sl-color-warning-50: var(--color-orange_medium);
+  --sl-color-warning-100: var(--color-orange_medium);
+  --sl-color-warning-200: var(--color-orange_medium);
+  --sl-color-warning-300: var(--color-orange_medium);
+  --sl-color-warning-400: var(--color-orange_medium);
+  --sl-color-warning-500: var(--color-orange_dark);
+  --sl-color-warning-600: var(--color-orange_dark);
+  --sl-color-warning-700: var(--color-orange_dark);
+  --sl-color-warning-800: var(--color-orange_very_dark);
+  --sl-color-warning-900: var(--color-orange_very_dark);
+  --sl-color-warning-950: var(--color-orange_very_dark);
+
+  /* Danger */
+  --sl-color-danger-50: var(--color-red_very_light);
+  --sl-color-danger-100: var(--color-red_very_light);
+  --sl-color-danger-200: var(--color-red_light);
+  --sl-color-danger-300: var(--color-red_light);
+  --sl-color-danger-400: var(--color-red_medium);
+  --sl-color-danger-500: var(--color-red_medium);
+  --sl-color-danger-600: var(--color-red_medium);
+  --sl-color-danger-700: var(--color-red_medium);
+  --sl-color-danger-800: var(--color-red_dark);
+  --sl-color-danger-900: var(--color-red_dark);
+  --sl-color-danger-950: var(--color-red_dark);
+
+  /* Neutral */
+  --sl-color-neutral-50: var(--color-grey-blue_light);
+  --sl-color-neutral-100: var(--color-grey-blue_light);
+  --sl-color-neutral-200: var(--color-grey-blue_light);
+  --sl-color-neutral-300: var(--color-grey-blue_light);
+  --sl-color-neutral-400: var(--color-grey-blue_medium);
+  --sl-color-neutral-500: var(--color-grey-blue_medium);
+  --sl-color-neutral-600: var(--color-grey-blue_dark);
+  --sl-color-neutral-700: var(--color-grey-blue_dark);
+  --sl-color-neutral-800: var(--color-grey-blue_dark);
+  --sl-color-neutral-900: var(--color-grey-blue_dark);
+  --sl-color-neutral-950: var(--color-grey-blue_dark);
+
+  /* Neutral one-offs */
+  --sl-color-neutral-0: hsl(0, 0%, 100%);
+  --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+  /*
+   * Border radii
+   */
+
+  --sl-border-radius-small: 0.1875rem; /* 3px */
+  --sl-border-radius-medium: var(--border-radius_medium);
+  --sl-border-radius-large: 0.5rem; /* 8px */
+  --sl-border-radius-x-large: 1rem; /* 16px */
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  /*
+   * Elevations
+   */
+
+  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+
+  /*
+   * Spacings
+   */
+
+  --sl-spacing-3x-small: 0.125rem; /* 2px */
+  --sl-spacing-2x-small: var(--spacing-1); /* 4px */
+  --sl-spacing-x-small: var(--spacing-2); /* 8px */
+  --sl-spacing-small: var(--spacing-3); /* 12px */
+  --sl-spacing-medium: var(--spacing-4); /* 16px */
+  --sl-spacing-large: 1.25rem; /* 20px */
+  --sl-spacing-x-large: 1.75rem; /* 28px */
+  --sl-spacing-2x-large: 2.25rem; /* 36px */
+  --sl-spacing-3x-large: 3rem; /* 48px */
+  --sl-spacing-4x-large: 4.5rem; /* 72px */
+
+  /*
+   * Transitions
+   */
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  /*
+   * Typography
+   */
+
+  /* Fonts */
+  --sl-font-mono: var(--font-mono);
+  --sl-font-sans: var(--font-sans);
+  --sl-font-serif: Georgia, "Times New Roman", serif;
+
+  /* Font sizes */
+  --sl-font-size-2x-small: 0.625rem; /* 10px */
+  --sl-font-size-x-small: 0.75rem; /* 12px */
+  --sl-font-size-small: var(--font-size_small); /* 14px */
+  --sl-font-size-medium: var(--font-size_medium); /* 16px */
+  --sl-font-size-large: var(--font-size_large); /* 20px */
+  --sl-font-size-x-large: 1.5rem; /* 24px */
+  --sl-font-size-2x-large: 2.25rem; /* 36px */
+  --sl-font-size-3x-large: 3rem; /* 48px */
+  --sl-font-size-4x-large: 4.5rem; /* 72px */
+
+  /* Font weights */
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --sl-line-height-denser: 1;
+  --sl-line-height-dense: 1.4;
+  --sl-line-height-normal: 1.8;
+  --sl-line-height-loose: 2.2;
+  --sl-line-height-looser: 2.6;
+
+  /* Focus rings */
+  --sl-focus-ring-color: var(--outline-color, --sl-color-primary-600);
+  --sl-focus-ring-style: solid;
   --sl-focus-ring-width: 2px;
+  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
+    var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  /*
+   * Forms
+   */
+
+  /* Buttons */
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  /* Inputs */
+  --sl-input-height-small: 1.875rem; /* 30px */
+  --sl-input-height-medium: 2.5rem; /* 40px */
+  --sl-input-height-large: 3.125rem; /* 50px */
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: "*";
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-500);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
+  --sl-input-placeholder-color: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  /* Labels */
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  /* Help text */
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  /* Toggles (checkboxes, radios, switches) */
+  --sl-toggle-size-small: 0.875rem; /* 14px */
+  --sl-toggle-size-medium: 1.125rem; /* 18px */
+  --sl-toggle-size-large: 1.375rem; /* 22px */
+
+  /*
+   * Overlays
+   */
+
+  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+
+  /*
+   * Panels
+   */
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-200);
+  --sl-panel-border-width: 1px;
+
+  /*
+   * Tooltips
+   */
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-neutral-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  /*
+   * Z-indexes
+   */
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+}
+
+// Shoelace Utility classes
+.sl-scroll-lock {
+  padding-right: var(--sl-scroll-lock-size) !important;
+  overflow: hidden !important;
+}
+
+.sl-toast-stack {
+  position: fixed;
+  top: 0;
+  inset-inline-end: 0;
+  z-index: var(--sl-z-index-toast);
+  width: 400px;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
 }
 
-sl-tab-group {
-  --indicator-color: #{$dark-orange};
-  --track-color: #{$medium-gray};
+.sl-toast-stack sl-alert {
+  margin: var(--sl-spacing-medium);
 
   &::part(base) {
-    background-color: #{$light-gray};
+    box-shadow: var(--sl-shadow-large);
   }
 }
 
-sl-tab-panel {
-  --padding: #{4 * $default-padding};
+.alchemy-light {
+  sl-tab-group {
+    --indicator-color: var(--tabs_indicator-color);
+    --track-color: var(--tabs_track-color);
+  }
+
+  sl-tab-panel {
+    --padding: var(--spacing-4);
+  }
 }
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index b836880973..b39ce976e0 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/app/views/layouts/alchemy/admin.html.erb
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= render_alchemy_title %></title>
     <link rel="shortcut icon" href="<%= asset_path('alchemy/favicon.ico') %>">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.9.0/cdn/themes/light.css" />
     <%= csrf_meta_tag %>
     <meta name="robots" content="noindex">
     <%= stylesheet_link_tag('alchemy/admin/all', media: 'screen', 'data-turbo-track' => true) %>
@@ -45,7 +44,7 @@
     <% end %>
     <%= yield :javascript_includes %>
   </head>
-  <%= content_tag :body, id: 'alchemy', class: alchemy_body_class do %>
+  <%= content_tag :body, id: 'alchemy', class: alchemy_body_class + ["alchemy-light"] do %>
     <noscript>
       <h1><%= Alchemy.t(:javascript_disabled_headline) %></h1>
       <p><%= Alchemy.t(:javascript_disabled_text) %></p>