diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss
index 7268f0c969f9..9fc66454c4ba 100644
--- a/assets/scss/_registry.scss
+++ b/assets/scss/_registry.scss
@@ -1,138 +1,24 @@
-.registry {
-  display: block;
-
-  &__main {
-    min-width: 100%;
-    margin: $registry-vertical-margin 0;
+.badge {
+  @each $component, $color in $otel-component-colors {
+    &.badge-#{$component} {
+      color: white;
+      background-color: $color;
+    }
   }
 
-  &__search {
-    min-width: 100%;
-    margin: $registry-vertical-margin 0;
+  &.badge-elixir {
+    color: map-get($otel-component-colors, erlang);
+    background-color: inherit;
+    border: solid 1px;
   }
 
-  &__header {
-    background-color: $green;
+  &.badge-js {
+    color: inherit;
   }
-}
-
-.badge.badge-collector {
-  color: white;
-  background-color: $collector;
-}
-
-.badge.badge-core {
-  color: white;
-  background-color: $core;
-}
-
-.badge.badge-instrumentation {
-  color: white;
-  background-color: $instrumentation;
-}
-
-.badge.badge-exporter {
-  color: white;
-  background-color: $exporter;
-}
-
-.badge.badge-extension {
-  color: white;
-  background-color: $extension;
-}
-
-.badge.badge-receiver {
-  color: white;
-  background-color: $receiver;
-}
-
-.badge.badge-processor {
-  color: white;
-  background-color: $processor;
-}
-
-.badge.badge-utilities {
-  color: white;
-  background-color: $utilities;
-}
-
-.badge-tracer {
-  color: white;
-  background-color: $dark-blue;
-}
-
-.badge-instrumentation {
-  color: white;
-  background-color: $green;
-}
-
-.badge.badge-dotnet {
-  color: white;
-  background-color: $dotnet;
-}
 
-.badge.badge-cpp {
-  color: white;
-  background-color: $cpp;
-}
-
-.badge.badge-elixir {
-  color: $erlang;
-  background-color: inherit;
-  border: solid 1px;
-}
-.badge.badge-erlang {
-  color: white;
-  background-color: $erlang;
-}
-
-.badge.badge-go {
-  color: white;
-  background-color: $go;
-}
-
-.badge.badge-java {
-  color: white;
-  background-color: $java;
-}
-
-.badge.badge-js {
-  color: inherit;
-  background-color: $javascript;
-}
-
-.badge.badge-kotlin {
-  color: $java;
-  background-color: inherit;
-  border: solid 1px;
-}
-
-.badge.badge-lua {
-  color: white;
-  background-color: $lua;
-}
-
-.badge.badge-php {
-  color: white;
-  background-color: $php;
-}
-
-.badge.badge-python {
-  color: white;
-  background-color: $python;
-}
-
-.badge.badge-ruby {
-  color: white;
-  background-color: $ruby;
-}
-
-.badge.badge-rust {
-  color: white;
-  background-color: $rust;
-}
-
-.badge.badge-swift {
-  color: white;
-  background-color: $swift;
+  &.badge-kotlin {
+    color: map-get($otel-component-colors, java);
+    background-color: inherit;
+    border: solid 1px;
+  }
 }
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index ca3f36fd6f1a..28b6e56d0b5e 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -1,46 +1,37 @@
-/* docsy-delta full file override: we're not tracking changes to the docsy file of the same name. */
+/* Docsy-delta full file override: we're not tracking changes to the Docsy file of the same name. */
 
-$twitter-blue: #00aced;
-$gitter-magenta: #ec1363;
-$opentelemetry-orange: #f5a800;
-$opentelemetry-orange-light: #fff0ce;
-$opentelemetry-blue: #4f62ad;
-$opentelemetry-blue-light: #cee1ff;
-$opentelemetry-purple: #425cc7;
-$light-green: #c0f587;
+$otel-colors: (
+  'orange': #f5a800,
+  'orange-light': #fff0ce,
+  'blue': #4f62ad,
+  'blue-light': #cee1ff,
+  'purple': #425cc7,
+  'light-green': #c0f587,
+);
 
-$primary: $opentelemetry-blue;
-$secondary: $opentelemetry-orange;
-$td-enable-google-fonts: false;
-$google_font_name: 'Noto Sans';
-$google_font_family: 'Noto+Sans:300,400,600,700';
-
-$enable-gradients: false;
-$enable-rounded: true;
-$enable-shadows: false;
-
-$registry-vertical-margin: 1rem;
-$green: #26c53e;
-$dark-blue: #39a9da;
+$otel-component-colors: (
+  'collector': #070002,
+  'core': #2c3ed3,
+  'cpp': #f34b7d,
+  'dotnet': #178600,
+  'erlang': #b83998,
+  'exporter': #3ed32c,
+  'extension': #d3532c,
+  'go': #00add8,
+  'instrumentation': #d32c3e,
+  'java': #b07219,
+  'js': #f1e05a,
+  'lua': #03037b,
+  'php': #4f5d95,
+  'processor': #d32c42,
+  'python': #3572a5,
+  'receiver': #742cd3,
+  'ruby': #701516,
+  'rust': #dea584,
+  'swift': #de5d43,
+  'utilities': #2cd3b4,
+);
 
-$core: #2c3ed3;
-$instrumentation: #d32c3e;
-$exporter: #3ed32c;
-$extension: #d3532c;
-$utilities: #2cd3b4;
-$receiver: #742cd3;
-$processor: #d32c42;
-
-$collector: #070002;
-$dotnet: #178600;
-$cpp: #f34b7d;
-$erlang: #b83998;
-$go: #00add8;
-$java: #b07219;
-$javascript: #f1e05a;
-$lua: #03037b;
-$php: #4f5d95;
-$python: #3572a5;
-$ruby: #701516;
-$rust: #dea584;
-$swift: #de5d43;
+$primary: map-get($otel-colors, 'blue');
+$secondary: map-get($otel-colors, 'orange');
+$td-enable-google-fonts: false;