diff --git a/color-module/src/schemes/q_style_2/baseline.rs b/color-module/src/schemes/q_style_2/baseline.rs
index 5ee2a89..b4c9d74 100644
--- a/color-module/src/schemes/q_style_2/baseline.rs
+++ b/color-module/src/schemes/q_style_2/baseline.rs
@@ -12,7 +12,10 @@ use crate::{
     errors,
     schemes::{
         q_style::{ColorExpand, NeutralSwatch, SchemeSetting},
-        q_style_2::{color_set::ColorSet, swatch::Swatch},
+        q_style_2::{
+            color_set::ColorSet,
+            swatch::{Swatch, generate_neutral_swatch_list},
+        },
     },
 };
 
@@ -301,6 +304,11 @@ impl Baseline {
         if let Some(accent) = &self.accent {
             css_variables.extend(accent.to_css_variables(scheme_mode, "accent"));
         }
+
+        css_variables.extend(self.danger.to_css_variables(scheme_mode, "danger"));
+        css_variables.extend(self.success.to_css_variables(scheme_mode, "success"));
+        css_variables.extend(self.warn.to_css_variables(scheme_mode, "warn"));
+        css_variables.extend(self.info.to_css_variables(scheme_mode, "info"));
         css_variables.extend(self.neutral.to_css_variables(scheme_mode, "neutral"));
         css_variables.extend(
             self.neutral_variant
@@ -311,10 +319,11 @@ impl Baseline {
             self.surface_variant
                 .to_css_variables(scheme_mode, "surface-variant"),
         );
-        css_variables.extend(self.danger.to_css_variables(scheme_mode, "danger"));
-        css_variables.extend(self.success.to_css_variables(scheme_mode, "success"));
-        css_variables.extend(self.warn.to_css_variables(scheme_mode, "warn"));
-        css_variables.extend(self.info.to_css_variables(scheme_mode, "info"));
+
+        let neutral_swatch = generate_neutral_swatch_list(&self.neutral_swatch);
+        for (n, c) in neutral_swatch {
+            css_variables.push(format!("--color-{scheme_mode}-swatch-neutral-{n}: #{c};"));
+        }
 
         css_variables.push(format!(
             "--color-{scheme_mode}-shadow: #{};",
@@ -354,6 +363,10 @@ impl Baseline {
         if let Some(accent) = &self.accent {
             css_variables.extend(accent.to_css_auto_scheme_collection("accent"));
         }
+        css_variables.extend(self.danger.to_css_auto_scheme_collection("danger"));
+        css_variables.extend(self.success.to_css_auto_scheme_collection("success"));
+        css_variables.extend(self.warn.to_css_auto_scheme_collection("warn"));
+        css_variables.extend(self.info.to_css_auto_scheme_collection("info"));
         css_variables.extend(self.neutral.to_css_auto_scheme_collection("neutral"));
         css_variables.extend(
             self.neutral_variant
@@ -365,6 +378,11 @@ impl Baseline {
                 .to_css_auto_scheme_collection("surface-variant"),
         );
 
+        let neutral_swatch = generate_neutral_swatch_list(&self.neutral_swatch);
+        for (n, c) in neutral_swatch {
+            css_variables.insert(format!("swatch-neutral-{n}"), c);
+        }
+
         css_variables.insert("shadow".to_string(), map_oklch_to_srgb_hex(&self.shadow));
         css_variables.insert("overlay".to_string(), map_oklch_to_srgb_hex(&self.overlay));
         css_variables.insert("outline".to_string(), map_oklch_to_srgb_hex(&self.outline));
@@ -395,6 +413,10 @@ impl Baseline {
         if let Some(accent) = &self.accent {
             scss_variables.extend(accent.to_scss_variables(scheme_mode, "accent"));
         }
+        scss_variables.extend(self.danger.to_scss_variables(scheme_mode, "danger"));
+        scss_variables.extend(self.success.to_scss_variables(scheme_mode, "success"));
+        scss_variables.extend(self.warn.to_scss_variables(scheme_mode, "warn"));
+        scss_variables.extend(self.info.to_scss_variables(scheme_mode, "info"));
 
         scss_variables.extend(self.neutral.to_scss_variables(scheme_mode, "neutral"));
         scss_variables.extend(
@@ -407,20 +429,25 @@ impl Baseline {
                 .to_scss_variables(scheme_mode, "surface-variant"),
         );
 
+        let neutral_swatch = generate_neutral_swatch_list(&self.neutral_swatch);
+        for (n, c) in neutral_swatch {
+            scss_variables.push(format!("$color-{scheme_mode}-swatch-neutral-{n}: #{c};"));
+        }
+
         scss_variables.push(format!(
-            "--color-{scheme_mode}-shadow: #{};",
+            "$color-{scheme_mode}-shadow: #{};",
             map_oklch_to_srgb_hex(&self.shadow)
         ));
         scss_variables.push(format!(
-            "--color-{scheme_mode}-overlay: #{};",
+            "$color-{scheme_mode}-overlay: #{};",
             map_oklch_to_srgb_hex(&self.overlay)
         ));
         scss_variables.push(format!(
-            "--color-{scheme_mode}-outlint: #{};",
+            "$color-{scheme_mode}-outlint: #{};",
             map_oklch_to_srgb_hex(&self.outline)
         ));
         scss_variables.push(format!(
-            "--color-{scheme_mode}-outline-variant: #{};",
+            "$color-{scheme_mode}-outline-variant: #{};",
             map_oklch_to_srgb_hex(&self.outline_variant)
         ));
 
@@ -470,6 +497,18 @@ impl Baseline {
             javascript_fields.push(format!("{indent}{line:4}"));
         }
 
+        for line in self.danger.to_javascript_fields("danger").iter() {
+            javascript_fields.push(format!("{indent}{line:4}"));
+        }
+        for line in self.success.to_javascript_fields("success").iter() {
+            javascript_fields.push(format!("{indent}{line:4}"));
+        }
+        for line in self.warn.to_javascript_fields("warn").iter() {
+            javascript_fields.push(format!("{indent}{line:4}"));
+        }
+        for line in self.info.to_javascript_fields("info").iter() {
+            javascript_fields.push(format!("{indent}{line:4}"));
+        }
         for line in self.neutral.to_javascript_fields("neutral").iter() {
             javascript_fields.push(format!("{indent}{line:4}"));
         }
@@ -491,6 +530,11 @@ impl Baseline {
             javascript_fields.push(format!("{indent}{line:4}"));
         }
 
+        let neurtal_swatch = generate_neutral_swatch_list(&self.neutral_swatch);
+        for (n, c) in neurtal_swatch {
+            javascript_fields.push(format!("{indent}neutralSwatch{n}: '#{c}',"));
+        }
+
         javascript_fields.push(format!(
             "{indent}shadow: '#{}',",
             map_oklch_to_srgb_hex(&self.shadow)
diff --git a/color-module/src/schemes/q_style_2/swatch.rs b/color-module/src/schemes/q_style_2/swatch.rs
index 6f78fa7..5cc1cde 100644
--- a/color-module/src/schemes/q_style_2/swatch.rs
+++ b/color-module/src/schemes/q_style_2/swatch.rs
@@ -98,6 +98,19 @@ impl Serialize for Swatch {
     }
 }
 
+pub fn generate_neutral_swatch_list(swatch: &Arc<NeutralSwatch>) -> LinkedHashMap<String, String> {
+    let swatch = swatch.clone();
+    let mut collection = LinkedHashMap::new();
+
+    for l in SWATCH_LIGHTINGS {
+        let color = swatch.get((l as f32) / 100.0);
+        let color = map_oklch_to_srgb_hex(&color);
+        collection.insert(format!("{l:02}"), color);
+    }
+
+    collection
+}
+
 pub fn serialize_neutral_swatch<S>(
     swatch: &Arc<NeutralSwatch>,
     serailizer: S,