diff --git a/packages/pagetop-bootsier/src/lib.rs b/packages/pagetop-bootsier/src/lib.rs
index a3e645ff..d08d1aac 100644
--- a/packages/pagetop-bootsier/src/lib.rs
+++ b/packages/pagetop-bootsier/src/lib.rs
@@ -105,10 +105,10 @@ impl ThemeTrait for Bootsier {
                         ClassesOp::Replace(b.style().to_string()),
                         match b.style() {
                             StyleBase::Default => "btn-primary",
-                            StyleBase::Success => "btn-success",
-                            StyleBase::Danger  => "btn-danger",
-                            StyleBase::Warning => "btn-warning",
                             StyleBase::Info    => "btn-info",
+                            StyleBase::Success => "btn-success",
+                            StyleBase::Warning => "btn-warning",
+                            StyleBase::Danger  => "btn-danger",
                             StyleBase::Light   => "btn-light",
                             StyleBase::Dark    => "btn-dark",
                             StyleBase::Link    => "btn-link",
diff --git a/packages/pagetop-bulmix/src/lib.rs b/packages/pagetop-bulmix/src/lib.rs
index dc9bddc4..6ce7c87d 100644
--- a/packages/pagetop-bulmix/src/lib.rs
+++ b/packages/pagetop-bulmix/src/lib.rs
@@ -57,10 +57,10 @@ impl ThemeTrait for Bulmix {
                         ClassesOp::Replace(b.style().to_string()),
                         match b.style() {
                             StyleBase::Default => "is-primary",
-                            StyleBase::Success => "is-success",
-                            StyleBase::Danger  => "is-danger",
-                            StyleBase::Warning => "is-warning",
                             StyleBase::Info    => "is-info",
+                            StyleBase::Success => "is-success",
+                            StyleBase::Warning => "is-warning",
+                            StyleBase::Danger  => "is-danger",
                             StyleBase::Light   => "is-light",
                             StyleBase::Dark    => "is-dark",
                             StyleBase::Link    => "is-text",
diff --git a/src/base/component.rs b/src/base/component.rs
index aff1a4f9..113f2f8f 100644
--- a/src/base/component.rs
+++ b/src/base/component.rs
@@ -15,7 +15,17 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
         StyleSheet::at("/base/css/root.css")
             .with_version("0.0.1")
             .with_weight(weight),
+    )).alter(ContextOp::AddStyleSheet(
+        StyleSheet::at("/base/css/looks.css")
+            .with_version("0.0.1")
+            .with_weight(weight),
+    ))
+    .alter(ContextOp::AddStyleSheet(
+        StyleSheet::at("/base/css/buttons.css")
+            .with_version("0.0.2")
+            .with_weight(weight),
     ));
+
     if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_ICONS) {
         cx.alter(ContextOp::AddStyleSheet(
             StyleSheet::at("/base/css/icons.min.css")
@@ -23,6 +33,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
                 .with_weight(weight),
         ));
     }
+
     if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS) {
         cx.alter(ContextOp::AddStyleSheet(
             StyleSheet::at("/base/css/flex.css")
@@ -30,6 +41,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
                 .with_weight(weight),
         ));
     }
+
     if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_MENU_ASSETS) {
         cx.alter(ContextOp::AddStyleSheet(
             StyleSheet::at("/base/css/menu.css")
@@ -42,16 +54,6 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
                 .with_weight(weight),
         ));
     }
-    cx.alter(ContextOp::AddStyleSheet(
-        StyleSheet::at("/base/css/looks.css")
-            .with_version("0.0.1")
-            .with_weight(weight),
-    ))
-    .alter(ContextOp::AddStyleSheet(
-        StyleSheet::at("/base/css/buttons.css")
-            .with_version("0.0.2")
-            .with_weight(weight),
-    ));
 }
 
 // *************************************************************************************************
@@ -92,10 +94,10 @@ impl ToString for BreakPoint {
 pub enum StyleBase {
     #[default]
     Default,
-    Success,
-    Danger,
-    Warning,
     Info,
+    Success,
+    Warning,
+    Danger,
     Light,
     Dark,
     Link,
@@ -106,10 +108,10 @@ impl ToString for StyleBase {
     fn to_string(&self) -> String {
         String::from(match self {
             StyleBase::Default => "style__default",
-            StyleBase::Success => "style__success",
-            StyleBase::Danger  => "style__danger",
-            StyleBase::Warning => "style__warning",
             StyleBase::Info    => "style__info",
+            StyleBase::Success => "style__success",
+            StyleBase::Warning => "style__warning",
+            StyleBase::Danger  => "style__danger",
             StyleBase::Light   => "style__light",
             StyleBase::Dark    => "style__dark",
             StyleBase::Link    => "style__link",
diff --git a/src/base/component/block.rs b/src/base/component/block.rs
index 056a5cad..abfddc04 100644
--- a/src/base/component/block.rs
+++ b/src/base/component/block.rs
@@ -7,6 +7,7 @@ pub struct Block {
     weight    : Weight,
     renderable: Renderable,
     classes   : OptionClasses,
+    style     : StyleBase,
     title     : OptionTranslated,
     mixed     : MixedComponents,
 }
@@ -29,23 +30,29 @@ impl ComponentTrait for Block {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.alter_classes(ClassesOp::Prepend, "block__container");
+        self.alter_classes(
+            ClassesOp::Prepend,
+            [String::from("block__container"), self.style().to_string()].join(" "),
+        );
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let block_body = self.components().render(cx);
-        if !block_body.is_empty() {
-            let id = cx.required_id::<Block>(self.id());
-            return PrepareMarkup::With(html! {
-                div id=(id) class=[self.classes().get()] {
-                    @if let Some(title) = self.title().using(cx.langid()) {
-                        h2 class="block__title" { (title) }
-                    }
-                    div class="block__body" { (block_body) }
-                }
-            });
+
+        if block_body.is_empty() {
+            return PrepareMarkup::None;
         }
-        PrepareMarkup::None
+
+        let id = cx.required_id::<Block>(self.id());
+
+        PrepareMarkup::With(html! {
+            div id=(id) class=[self.classes().get()] {
+                @if let Some(title) = self.title().using(cx.langid()) {
+                    h2 class="block__title" { (title) }
+                }
+                div class="block__content" { (block_body) }
+            }
+        })
     }
 }
 
@@ -70,6 +77,12 @@ impl Block {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_style(&mut self, style: StyleBase) -> &mut Self {
+        self.style = style;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_title(&mut self, title: L10n) -> &mut Self {
         self.title.alter_value(title);
@@ -90,6 +103,10 @@ impl Block {
 
     // Block GETTERS.
 
+    pub fn style(&self) -> &StyleBase {
+        &self.style
+    }
+
     pub fn title(&self) -> &OptionTranslated {
         &self.title
     }
diff --git a/src/base/component/button.rs b/src/base/component/button.rs
index a04b3734..c1da749b 100644
--- a/src/base/component/button.rs
+++ b/src/base/component/button.rs
@@ -47,7 +47,7 @@ impl ComponentTrait for Button {
         self.alter_classes(
             ClassesOp::Prepend,
             [
-                "button__tap".to_string(),
+                String::from("button__tap"),
                 self.style().to_string(),
                 self.font_size().to_string(),
             ]
diff --git a/src/base/component/form/action_button.rs b/src/base/component/form/action_button.rs
index 0c5ba3a7..0f0632e3 100644
--- a/src/base/component/form/action_button.rs
+++ b/src/base/component/form/action_button.rs
@@ -51,7 +51,7 @@ impl ComponentTrait for ActionButton {
         self.alter_classes(
             ClassesOp::Prepend,
             [
-                "button__tap".to_string(),
+                String::from("button__tap"),
                 self.style().to_string(),
                 self.font_size().to_string(),
             ]
diff --git a/static/base/css/buttons.css b/static/base/css/buttons.css
index 326a4ac5..b53588d6 100644
--- a/static/base/css/buttons.css
+++ b/static/base/css/buttons.css
@@ -2,8 +2,6 @@
 	cursor: pointer;
 	text-align: center;
 	display: inline-block;
-	color: var(--val-color--white);
-	background-color: transparent;
 	text-decoration: none;
 	border: 1px solid transparent;
 	border-radius: var(--val-border-radius);
@@ -17,60 +15,19 @@
 }
 
 .button__tap.style__default {
-	background-color: var(--val-color--default);
+	color: var(--val-color--white);
+	background-color: var(--val-color--primary);
 }
 .button__tap.style__default:hover {
 	color: var(--val-color--white);
-	background-color: var(--val-color--default-dark);
+	background-color: var(--val-color--primary-dark);
 }
 .button__tap.style__default:active,
 .button__tap.style__default:disabled {
 	color: var(--val-color--white);
-	background-color: var(--val-color--default-light);
+	background-color: var(--val-color--primary-light);
 }
 
-.button__tap.style__success {
-	background-color: var(--val-color--success);
-}
-.button__tap.style__success:hover {
-	color: var(--val-color--white);
-	background-color: var(--val-color--success-dark);
-}
-.button__tap.style__success:active,
-.button__tap.style__success:disabled {
-	color: var(--val-color--white);
-	background-color: var(--val-color--success-light);
-}
-
-.button__tap.style__danger {
-	background-color: var(--val-color--danger);
-}
-.button__tap.style__danger:hover {
-	color: var(--val-color--white);
-	background-color: var(--val-color--danger-dark);
-}
-.button__tap.style__danger:active,
-.button__tap.style__danger:disabled {
-	color: var(--val-color--white);
-	background-color: var(--val-color--danger-light);
-}
-
-.button__tap.style__warning {
-	background-color: var(--val-color--warning);
-}
-.button__tap.style__warning:hover {
-	color: var(--val-color--white);
-	background-color: var(--val-color--warning-dark);
-}
-.button__tap.style__warning:active,
-.button__tap.style__warning:disabled {
-	color: var(--val-color--white);
-	background-color: var(--val-color--warning-light);
-}
-
-.button__tap.style__info {
-	background-color: var(--val-color--info);
-}
 .button__tap.style__info:hover {
 	color: var(--val-color--white);
 	background-color: var(--val-color--info-dark);
@@ -81,10 +38,36 @@
 	background-color: var(--val-color--info-light);
 }
 
-.button__tap.style__light {
-	color: var(--val-color--text);
-	background-color: var(--val-color--light);
+.button__tap.style__success:hover {
+	color: var(--val-color--white);
+	background-color: var(--val-color--success-dark);
 }
+.button__tap.style__success:active,
+.button__tap.style__success:disabled {
+	color: var(--val-color--white);
+	background-color: var(--val-color--success-light);
+}
+
+.button__tap.style__warning:hover {
+	color: var(--val-color--white);
+	background-color: var(--val-color--warning-dark);
+}
+.button__tap.style__warning:active,
+.button__tap.style__warning:disabled {
+	color: var(--val-color--white);
+	background-color: var(--val-color--warning-light);
+}
+
+.button__tap.style__danger:hover {
+	color: var(--val-color--white);
+	background-color: var(--val-color--danger-dark);
+}
+.button__tap.style__danger:active,
+.button__tap.style__danger:disabled {
+	color: var(--val-color--white);
+	background-color: var(--val-color--danger-light);
+}
+
 .button__tap.style__light:hover {
 	color: var(--val-color--text);
 	background-color: var(--val-color--light-dark);
@@ -95,9 +78,6 @@
 	background-color: var(--val-color--light-light);
 }
 
-.button__tap.style__dark {
-	background-color: var(--val-color--dark);
-}
 .button__tap.style__dark:hover {
 	color: var(--val-color--white);
 	background-color: var(--val-color--dark-dark);
@@ -108,10 +88,6 @@
 	background-color: var(--val-color--dark-light);
 }
 
-.button__tap.style__link {
-	color: var(--val-color--default);
-}
-
 /*
 .button strong {
 	color: inherit
diff --git a/static/base/css/inception.css b/static/base/css/inception.css
index 1535bf05..74d97fe4 100644
--- a/static/base/css/inception.css
+++ b/static/base/css/inception.css
@@ -57,19 +57,18 @@ h6 {
 }
 
 p {
-	margin-top: 0;
-	margin-bottom: var(--val-gap-0-75);
+	margin: var(--val-gap-0-75) 0;
 }
 
 a {
-	color: var(--val-color--default);
+	color: var(--val-color--primary-link);
 	transition: color .15s ease-in-out;
 }
 a:hover {
-	color: var(--val-color--default-dark);
+	color: var(--val-color--primary-link-hover);
 }
 a:active {
-	color: var(--val-color--default-light);
+	color: var(--val-color--primary-link-active);
 }
 
 /* LAYOUT */
diff --git a/static/base/css/looks.css b/static/base/css/looks.css
index cf3467cf..55db7205 100644
--- a/static/base/css/looks.css
+++ b/static/base/css/looks.css
@@ -23,6 +23,93 @@
 	transform: translateY(0%);
 }
 
+/* STYLES BASE */
+
+.style__info {
+	color: var(--val-color--white);
+	background-color: var(--val-color--info);
+}
+.style__info a {
+	color: var(--val-color--info-link);
+	font-weight: 700;
+}
+.style__info a:hover {
+	color: var(--val-color--info-link-hover);
+}
+.style__info a:active {
+	color: var(--val-color--info-link-active);
+}
+
+.style__success {
+	color: var(--val-color--white);
+	background-color: var(--val-color--success);
+}
+.style__success a {
+	color: var(--val-color--success-link);
+	font-weight: 700;
+}
+.style__success a:hover {
+	color: var(--val-color--success-link-hover);
+}
+.style__success a:active {
+	color: var(--val-color--success-link-active);
+}
+
+.style__warning {
+	color: var(--val-color--white);
+	background-color: var(--val-color--warning);
+}
+.style__warning a {
+	color: var(--val-color--warning-link);
+	font-weight: 700;
+}
+.style__warning a:hover {
+	color: var(--val-color--warning-link-hover);
+}
+.style__warning a:active {
+	color: var(--val-color--warning-link-active);
+}
+
+.style__danger {
+	color: var(--val-color--white);
+	background-color: var(--val-color--danger);
+}
+.style__danger a {
+	color: var(--val-color--danger-link);
+	font-weight: 700;
+}
+.style__danger a:hover {
+	color: var(--val-color--danger-link-hover);
+}
+.style__danger a:active {
+	color: var(--val-color--danger-link-active);
+}
+
+.style__light {
+	color: var(--val-color--text);
+	background-color: var(--val-color--light);
+}
+
+.style__dark {
+	color: var(--val-color--white);
+	background-color: var(--val-color--dark);
+}
+.style__dark a {
+	color: var(--val-color--dark-link);
+	font-weight: 700;
+}
+.style__dark a:hover {
+	color: var(--val-color--dark-link-hover);
+}
+.style__dark a:active {
+	color: var(--val-color--dark-link-active);
+}
+
+.style__link {
+	color: var(--val-color--primary);
+	background-color: transparent;
+}
+
 /* TYPOGRAPHY */
 
 .fs__x3l {
@@ -124,6 +211,50 @@
 	height: auto;
 }
 
+/* Block component */
+
+.block__title {
+	font-size: var(--val-fs--m);
+	background-color: var(--val-color--gray-90);
+	padding: var(--val-gap-0-35) var(--val-gap);
+	margin: 0
+}
+.block__container.style__info .block__title {
+	background-color: var(--val-color--info-dark);
+}
+.block__container.style__success .block__title {
+	background-color: var(--val-color--success-dark);
+}
+.block__container.style__warning .block__title {
+	background-color: var(--val-color--warning-dark);
+}
+.block__container.style__danger .block__title {
+	background-color: var(--val-color--danger-dark);
+}
+.block__container.style__dark .block__title {
+	color: var(--val-color--dark-dark);
+}
+
+.block__content {
+	padding: var(--val-gap-0-35) var(--val-gap);
+}
+.block__container.style__info .block__content {
+	border-left: var(--val-gap-0-5) solid var(--val-color--info-dark);
+}
+.block__container.style__success .block__content {
+	border-left: var(--val-gap-0-5) solid var(--val-color--success-dark);
+}
+.block__container.style__warning .block__content {
+	border-left: var(--val-gap-0-5) solid var(--val-color--warning-dark);
+}
+.block__container.style__danger .block__content {
+	border-left: var(--val-gap-0-5) solid var(--val-color--danger-dark);
+}
+
+.block__container > .block__title + .block__content {
+	border-left: 0;
+}
+
 /* Branding component */
 
 .branding__inner {
diff --git a/static/base/css/root.css b/static/base/css/root.css
index 8ed95a60..56a420c0 100644
--- a/static/base/css/root.css
+++ b/static/base/css/root.css
@@ -92,63 +92,81 @@
 	--val-gap-1-5: calc(1.5 * var(--val-gap));
 	--val-gap-2: calc(2 * var(--val-gap));
 
-	--val-color--default-hue: 216;
-	--val-color--default-sat: 60%;
-	--val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%);
-	--val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%);
-	--val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%);
+	--primary-hue: 216;
+	--primary-sat: 60%;
+	--val-color--primary: hsl(var(--primary-hue), var(--primary-sat), 50%);
+	--val-color--primary-light: hsl(var(--primary-hue), var(--primary-sat), 60%);
+	--val-color--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 40%);
+	--val-color--primary-link: hsl(var(--primary-hue), var(--primary-sat), 55%);
+	--val-color--primary-link-hover: hsl(var(--primary-hue), var(--primary-sat), 30%);
+	--val-color--primary-link-active: hsl(var(--primary-hue), var(--primary-sat), 70%);
 
-	--val-color--info-hue: 190;
-	--val-color--info-sat: 90%;
-	--val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%);
-	--val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%);
-	--val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%);
+	--info-hue: 190;
+	--info-sat: 90%;
+	--val-color--info: hsl(var(--info-hue), var(--info-sat), 54%);
+	--val-color--info-light: hsl(var(--info-hue), var(--info-sat), 70%);
+	--val-color--info-dark: hsl(var(--info-hue), var(--info-sat), 45%);
+	--val-color--info-link: hsl(var(--info-hue), var(--info-sat), 30%);
+	--val-color--info-link-hover: hsl(var(--info-hue), var(--info-sat), 20%);
+	--val-color--info-link-active: hsl(var(--info-hue), var(--info-sat), 40%);
 
-	--val-color--success-hue: 150;
-	--val-color--success-sat: 50%;
-	--val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%);
-	--val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%);
-	--val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%);
+	--success-hue: 150;
+	--success-sat: 50%;
+	--val-color--success: hsl(var(--success-hue), var(--success-sat), 50%);
+	--val-color--success-light: hsl(var(--success-hue), var(--success-sat), 68%);
+	--val-color--success-dark: hsl(var(--success-hue), var(--success-sat), 38%);
+	--val-color--success-link: hsl(var(--success-hue), var(--success-sat), 26%);
+	--val-color--success-link-hover: hsl(var(--success-hue), var(--success-sat), 18%);
+	--val-color--success-link-active: hsl(var(--success-hue), var(--success-sat), 36%);
 
-	--val-color--warning-hue: 44;
-	--val-color--warning-sat: 100%;
-	--val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%);
-	--val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%);
-	--val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%);
+	--warning-hue: 44;
+	--warning-sat: 100%;
+	--val-color--warning: hsl(var(--warning-hue), var(--warning-sat), 50%);
+	--val-color--warning-light: hsl(var(--warning-hue), var(--warning-sat), 60%);
+	--val-color--warning-dark: hsl(var(--warning-hue), var(--warning-sat), 40%);
+	--val-color--warning-link: hsl(var(--warning-hue), var(--warning-sat), 30%);
+	--val-color--warning-link-hover: hsl(var(--warning-hue), var(--warning-sat), 20%);
+	--val-color--warning-link-active: hsl(var(--warning-hue), var(--warning-sat), 38%);
 
-	--val-color--danger-hue: 348;
-	--val-color--danger-sat: 86%;
-	--val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%);
-	--val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%);
-	--val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%);
+	--danger-hue: 348;
+	--danger-sat: 86%;
+	--val-color--danger: hsl(var(--danger-hue), var(--danger-sat), 50%);
+	--val-color--danger-light: hsl(var(--danger-hue), var(--danger-sat), 60%);
+	--val-color--danger-dark: hsl(var(--danger-hue), var(--danger-sat), 35%);
+	--val-color--danger-link: hsl(var(--danger-hue), var(--danger-sat), 25%);
+	--val-color--danger-link-hover: hsl(var(--danger-hue), var(--danger-sat), 10%);
+	--val-color--danger-link-active: hsl(var(--danger-hue), var(--danger-sat), 30%);
 
-	--val-color--light-hue: 0;
-	--val-color--light-sat: 0%;
-	--val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%);
-	--val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%);
-	--val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%);
+	--light-hue: 0;
+	--light-sat: 0%;
+	--val-color--light: hsl(var(--light-hue), var(--light-sat), 96%);
+	--val-color--light-light: hsl(var(--light-hue), var(--light-sat), 98%);
+	--val-color--light-dark: hsl(var(--light-hue), var(--light-sat), 92%);
 
-	--val-color--dark-hue: 0;
-	--val-color--dark-sat: 0%;
-	--val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%);
-	--val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%);
-	--val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%);
+	--dark-hue: 0;
+	--dark-sat: 0%;
+	--val-color--dark: hsl(var(--dark-hue), var(--dark-sat), 25%);
+	--val-color--dark-light: hsl(var(--dark-hue), var(--dark-sat), 40%);
+	--val-color--dark-dark: hsl(var(--dark-hue), var(--dark-sat), 8%);
+	--val-color--dark-link: hsl(var(--dark-hue), var(--dark-sat), 90%);
+	--val-color--dark-link-hover: hsl(var(--dark-hue), var(--dark-sat), 100%);
+	--val-color--dark-link-active: hsl(var(--dark-hue), var(--dark-sat), 70%);
 
 
 
 
-	--val-color--gray-hue: 201;
-	--val-color--gray-sat: 15%;
-	--val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%);
-	--val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%);
-	--val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%);
-	--val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%);
-	--val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%);
-	--val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%);
-	--val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%);
-	--val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%);
-	--val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%);
-	--val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%);
+	--gray-hue: 201;
+	--gray-sat: 15%;
+	--val-color--gray-5: hsl(var(--gray-hue), var(--gray-sat), 5%);
+	--val-color--gray-10: hsl(var(--gray-hue), var(--gray-sat) ,11%);
+	--val-color--gray-20: hsl(var(--gray-hue), var(--gray-sat),20%);
+	--val-color--gray-45: hsl(var(--gray-hue), var(--gray-sat), 44%);
+	--val-color--gray-60: hsl(var(--gray-hue), var(--gray-sat), 57%);
+	--val-color--gray-65: hsl(var(--gray-hue), var(--gray-sat), 63%);
+	--val-color--gray-70: hsl(var(--gray-hue), var(--gray-sat), 72%);
+	--val-color--gray-90: hsl(var(--gray-hue), var(--gray-sat), 88%);
+	--val-color--gray-95: hsl(var(--gray-hue), var(--gray-sat), 93%);
+	--val-color--gray-100: hsl(var(--gray-hue), var(--gray-sat), 97%);
 
 
 
@@ -163,8 +181,8 @@
 	--color-text-neutral-soft: var(--color--gray-45);
 	--color-text-neutral-medium: var(--color--gray-20);
 	--color-text-neutral-loud: var(--color--gray-5);
-	--color-text-primary-medium: var(--val-color--default-40);
-	--color-text-primary-loud: var(--val-color--default-30);
+	--color-text-primary-medium: var(--val-color--primary-40);
+	--color-text-primary-loud: var(--val-color--primary-30);
 	--color--black: #000;
 */
 /*