diff --git a/.storybook/manager.js b/.storybook/manager.js
index a4ad153f..1bc8942b 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -11,6 +11,7 @@ const theme = create({
   fontBase: 'RubikVariable, sans-serif',
   fontCode:
     '"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace',
+  textColor: '#273142',
 });
 
 addons.setConfig({ theme });
diff --git a/docs/design-system/colors.stories.mdx b/docs/design-system/colors.stories.mdx
index 87057644..c0b9e1b7 100644
--- a/docs/design-system/colors.stories.mdx
+++ b/docs/design-system/colors.stories.mdx
@@ -1,4 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { html } from 'lit';
 
 <Meta title="Design System/Colors" />
 
@@ -10,53 +11,35 @@ Baklava uses a list of defined color with some default values.
   <ColorItem
     title="--bl-color-primary"
     subtitle="Primary Color"
-    colors={{ '': '#F27A1A', '--hover': '#EF6114', '--background': '#FEF2E8' }}
-  />
-  <ColorItem
-    title="--bl-color-secondary"
-    subtitle="Secondary Color"
-    colors={{ '': '#273142', '--hover': '#0F131A', '--background': '#F1F2F7' }}
-  />
-  <ColorItem
-    title="--bl-color-tertiary"
-    subtitle="Tertiary Color"
-    colors={{ '': '#f1f2f7', '--hover': '#d5d9e1', '--background': '#F7F7FA' }}
+    colors={{ '': 'var(--bl-color-primary)', '--highlight': 'var(--bl-color-primary-highlight)', '--contrast': 'var(--bl-color-primary-contrast)' }}
   />
   <ColorItem
     title="--bl-color-success"
     subtitle="Success Color"
-    colors={{ '': '#0bc15c', '--hover': '#09a44e', '--background': '#E7F9EF' }}
+    colors={{ '': 'var(--bl-color-success)', '--highlight': 'var(--bl-color-success-highlight)', '--contrast': 'var(--bl-color-success-contrast)' }}
   />
   <ColorItem
     title="--bl-color-danger"
     subtitle="Danger Color"
-    colors={{ '': '#ff5043', '--hover': '#ff3028', '--background': '#FFEEEC' }}
+    colors={{ '': 'var(--bl-color-danger)', '--highlight': 'var(--bl-color-danger-highlight)', '--contrast': 'var(--bl-color-danger-contrast)' }}
   />
   <ColorItem
     title="--bl-color-warning"
     subtitle="Warning Color"
-    colors={{ '': '#FFB600', '--hover': '#FF9800', '--background': '#FFF8E6' }}
-  />
-  <ColorItem
-    title="--bl-color-alternative"
-    subtitle="Alternative Color"
-    colors={{ '': '#5794FF', '--hover': '#3469FF', '--background': '#EEF4FF' }}
-  />
-  <ColorItem
-    title="--bl-color-featured"
-    subtitle="Featured Color"
-    colors={{ '': '#8C4EFF', '--hover': '#5E2EFF', '--background': '#F4EDFF' }}
+    colors={{ '': 'var(--bl-color-warning)', '--highlight': 'var(--bl-color-warning-highlight)', '--contrast': 'var(--bl-color-warning-contrast)' }}
   />
   <ColorItem
-    title="--bl-color-content"
-    subtitle="Content Colors"
+    title="--bl-color-neutral"
+    subtitle="Neutral Colors"
     colors={{
-        '--primary': '#273142',
-        '--secondary': '#6E7787',
-        '--tertiary': '#95A1B5',
-        '--passive': '#AFBBCA',
-        '--primary-contrast' : '#FFF',
-        '--hover' : '#F27A1A'
+        '--none': 'var(--bl-color-neutral-none)',
+        '--darkest': 'var(--bl-color-neutral-darkest)',
+        '--darker': 'var(--bl-color-neutral-darker)',
+        '--dark': 'var(--bl-color-neutral-dark)',
+        '--light' : 'var(--bl-color-neutral-light)',
+        '--lighter' : 'var(--bl-color-neutral-lighter)',
+        '--lightest' : 'var(--bl-color-neutral-lightest)',
+        '--full' : 'var(--bl-color-neutral-full)',
     }}
   />
 </ColorPalette>
diff --git a/docs/how-to-customize-a-components-style.stories.mdx b/docs/how-to-customize-a-components-style.stories.mdx
index f1edb01a..35022c24 100644
--- a/docs/how-to-customize-a-components-style.stories.mdx
+++ b/docs/how-to-customize-a-components-style.stories.mdx
@@ -41,7 +41,7 @@ Let's take a badge component as an example:
 
 .badge {
     /* Variable definition start */
-  --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+  --bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
   --color: var(--bl-badge-color, var(--bl-color-primary));
   --font: var(--bl-font-title-4-medium);
   --padding-vertical: var(--bl-size-3xs);
@@ -68,7 +68,7 @@ By the __nature__ of this component, we let users to change background color and
 we define a default variables `--bl-badge-bg-color` and `--bl-badge-color` and fill it with our default definitions like this:
 
 ```css
---bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+--bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
 --color: var(--bl-badge-color, var(--bl-color-primary));
 ```
 
diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
index 6a2ab616..bb2a258d 100644
--- a/docs/using-baklava-in-react.stories.mdx
+++ b/docs/using-baklava-in-react.stories.mdx
@@ -130,7 +130,7 @@ import { BlButton } from "@trendyol/baklava/dist/baklava-react";
 function MyComponent() {
   const buttonStyle = {
     "--bl-color-primary": "purple",
-    "--bl-color-primary-hover": "rebeccapurple",
+    "--bl-color-primary-highlight": "rebeccapurple",
   }
 
   return (
diff --git a/src/components/alert/bl-alert.css b/src/components/alert/bl-alert.css
index 02df96c3..05ebfaf6 100644
--- a/src/components/alert/bl-alert.css
+++ b/src/components/alert/bl-alert.css
@@ -5,14 +5,14 @@
 .alert {
   --padding: var(--bl-size-m);
   --main-color: var(--bl-color-primary);
-  --main-bg-color: var(--bl-color-accent-primary-background);
+  --main-bg-color: var(--bl-color-primary-contrast);
 
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   background-color: var(--main-bg-color);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
   box-shadow: inset 0 0 0 1px var(--main-color);
   border-radius: var(--bl-border-radius-s);
   padding: calc(var(--padding) / 2) var(--padding);
@@ -50,19 +50,19 @@
 }
 
 .caption {
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
   font: var(--bl-font-title-3-medium);
 }
 
 .actions {
   display: none;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: var(--bl-size-m);
   padding: calc(var(--padding) / 2) 0;
 }
 
 .close {
-  --bl-color-secondary-background: transparent;
+  --bl-color-neutral-lightest: transparent;
 }
 
 .caption + .description {
@@ -75,15 +75,15 @@
 
 :host([variant='success']) .alert {
   --main-color: var(--bl-color-success);
-  --main-bg-color: var(--bl-color-success-background);
+  --main-bg-color: var(--bl-color-success-contrast);
 }
 
 :host([variant='warning']) .alert {
   --main-color: var(--bl-color-warning);
-  --main-bg-color: var(--bl-color-warning-background);
+  --main-bg-color: var(--bl-color-warning-contrast);
 }
 
 :host([variant='danger']) .alert {
   --main-color: var(--bl-color-danger);
-  --main-bg-color: var(--bl-color-danger-background);
+  --main-bg-color: var(--bl-color-danger-contrast);
 }
diff --git a/src/components/badge/bl-badge.css b/src/components/badge/bl-badge.css
index 20200025..fa9c3b2e 100644
--- a/src/components/badge/bl-badge.css
+++ b/src/components/badge/bl-badge.css
@@ -4,7 +4,7 @@
 }
 
 .badge {
-  --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+  --bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
   --color: var(--bl-badge-color, var(--bl-color-primary));
   --font: var(--bl-font-title-4-medium);
   --padding-vertical: var(--bl-size-4xs);
diff --git a/src/components/badge/bl-badge.stories.mdx b/src/components/badge/bl-badge.stories.mdx
index 3d90ae6d..d41924b9 100644
--- a/src/components/badge/bl-badge.stories.mdx
+++ b/src/components/badge/bl-badge.stories.mdx
@@ -26,20 +26,20 @@ style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
 
 export const VariantTemplate = (args) => html`
 ${BadgeTemplate({ content:'In Progress', styles: { '--bl-badge-bg-color' : 'rgb(254, 242, 232)', '--bl-badge-color': 'rgb(242, 122, 26)' },...args})}
-${BadgeTemplate({ content:'Approved', styles: { '--bl-badge-bg-color' : 'rgba(231, 249, 239, 1)', '--bl-badge-color': 'rgba(11, 193, 92, 1)' },...args})}
-${BadgeTemplate({ content:'Warning', styles: { '--bl-badge-bg-color' : '#FFF8E6', '--bl-badge-color': '#FFB600' },...args})}
-${BadgeTemplate({ content:'Denied', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-background)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
-${BadgeTemplate({ content:'Offer', styles: { '--bl-badge-bg-color' : 'var(--bl-color-alternative-background)', '--bl-badge-color': 'var(--bl-color-alternative)' },...args})}
-${BadgeTemplate({ content:'Winner', styles: { '--bl-badge-bg-color' : 'var(--bl-color-featured-background)', '--bl-badge-color': 'var(--bl-color-featured)' },...args})}
+${BadgeTemplate({ content:'Approved', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
+${BadgeTemplate({ content:'Warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
+${BadgeTemplate({ content:'Denied', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
+${BadgeTemplate({ content:'Offer', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
+${BadgeTemplate({ content:'Winner', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
 `;
 
 export const WithIconTemplate = (args) => html`
-${BadgeTemplate({ content:'In Progress', icon: 'waiting', styles: { '--bl-badge-bg-color' : 'var(--bl-color-accent-primary-background)', '--bl-badge-color': 'var(--bl-color-primary)' },...args})}
-${BadgeTemplate({ content:'Approved', icon: 'check_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-background)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
-${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-background)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
-${BadgeTemplate({ content:'Denied', icon: 'close_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-background)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
-${BadgeTemplate({ content:'Offer', icon: 'my_offers', styles: { '--bl-badge-bg-color' : 'var(--bl-color-alternative-background)', '--bl-badge-color': 'var(--bl-color-alternative)' },...args})}
-${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--bl-badge-bg-color' : 'var(--bl-color-featured-background)', '--bl-badge-color': 'var(--bl-color-featured)' },...args})}
+${BadgeTemplate({ content:'In Progress', icon: 'clock', styles: { '--bl-badge-bg-color' : 'var(--bl-color-primary-contrast)', '--bl-badge-color': 'var(--bl-color-primary)' },...args})}
+${BadgeTemplate({ content:'Approved', icon: 'check_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
+${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
+${BadgeTemplate({ content:'Denied', icon: 'close_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
+${BadgeTemplate({ content:'Offer', icon: 'offers', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
+${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
 `;
 
 export const SizeTemplate = (args) => html`
@@ -75,7 +75,7 @@ You can use the color model like this ways;
 * `hex`
 * `variables`
 
-Default background color is `--bl-color-accent-primary-background` and default color is `--bl-color-primary`.
+Default background color is `--bl-color-primary-contrast` and default color is `--bl-color-primary`.
 
 <Canvas>
 <Story name="Variants">
diff --git a/src/components/badge/bl-badge.ts b/src/components/badge/bl-badge.ts
index 056bc511..3442d6b3 100644
--- a/src/components/badge/bl-badge.ts
+++ b/src/components/badge/bl-badge.ts
@@ -9,7 +9,7 @@ export type BadgeSize = 'small' | 'medium' | 'large';
  * @tag bl-badge
  * @summary Baklava Badge component
  *
- * @cssproperty [--bl-badge-bg-color=--bl-color-accent-primary-background] Sets the background color of badge
+ * @cssproperty [--bl-badge-bg-color=--bl-color-primary-contrast] Sets the background color of badge
  * @cssproperty [--bl-badge-color=--bl-color-primary] Sets the color of badge
  */
 
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
index 053bb514..b58e1fb5 100644
--- a/src/components/button/bl-button.css
+++ b/src/components/button/bl-button.css
@@ -16,9 +16,9 @@
 
 .button {
   --main-color: var(--bl-color-primary);
-  --main-hover-color: var(--bl-color-primary-hover);
-  --text-hover-color: var(--bl-color-secondary-background);
-  --content-color: var(--bl-color-content-primary-contrast);
+  --main-hover-color: var(--bl-color-primary-highlight);
+  --text-hover-color: var(--bl-color-neutral-lightest);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-color);
   --border-color: var(--main-color);
   --padding-vertical: var(--bl-size-2xs);
@@ -121,18 +121,18 @@
 }
 
 :host([kind='neutral']) .button {
-  --main-color: var(--bl-color-secondary);
-  --main-hover-color: var(--bl-color-secondary-hover);
+  --main-color: var(--bl-color-neutral-darker);
+  --main-hover-color: var(--bl-color-neutral-darkest);
 }
 
 :host([kind='success']) .button {
   --main-color: var(--bl-color-success);
-  --main-hover-color: var(--bl-color-success-hover);
+  --main-hover-color: var(--bl-color-success-highlight);
 }
 
 :host([kind='danger']) .button {
   --main-color: var(--bl-color-danger);
-  --main-hover-color: var(--bl-color-danger-hover);
+  --main-hover-color: var(--bl-color-danger-highlight);
 }
 
 :host([disabled]) {
@@ -148,9 +148,9 @@
 }
 
 :host .button[aria-disabled='true'] {
-  --main-color: var(--bl-color-tertiary);
-  --main-hover-color: var(--bl-color-tertiary);
-  --content-color: var(--bl-color-content-passive);
+  --main-color: var(--bl-color-neutral-lightest);
+  --main-hover-color: var(--bl-color-neutral-lightest);
+  --content-color: var(--bl-color-neutral-lighter);
   --bg-color: var(--main-color);
 
   pointer-events: none;
@@ -162,7 +162,7 @@
 }
 
 :host([variant='secondary']:hover) .button[aria-disabled='false'] {
-  --content-color: var(--bl-color-content-primary-contrast);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-hover-color);
 }
 
@@ -189,12 +189,12 @@
 }
 
 :host([variant='secondary']) .active.button {
-  --content-color: var(--bl-color-content-primary-contrast);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-hover-color);
 }
 
 :host([variant='tertiary']) .active.button {
   --content-color: var(--main-color);
-  --bg-color: var(--bl-color-tertiary);
+  --bg-color: var(--bl-color-neutral-lightest);
   --border-color: transparent;
 }
diff --git a/src/components/checkbox-group/bl-checkbox-group.css b/src/components/checkbox-group/bl-checkbox-group.css
index 35d36740..c04f6093 100644
--- a/src/components/checkbox-group/bl-checkbox-group.css
+++ b/src/components/checkbox-group/bl-checkbox-group.css
@@ -10,7 +10,7 @@ fieldset {
 
 legend {
   font: var(--bl-font-title-3-medium);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .options {
diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.css b/src/components/checkbox-group/checkbox/bl-checkbox.css
index 72a4c9f0..296b1bda 100644
--- a/src/components/checkbox-group/checkbox/bl-checkbox.css
+++ b/src/components/checkbox-group/checkbox/bl-checkbox.css
@@ -10,7 +10,7 @@
 label {
   display: flex;
   gap: var(--bl-size-2xs);
-  color: var(--bl-color-secondary);
+  color: var(--bl-color-neutral-darker);
   font: var(--bl-font-title-3);
   cursor: pointer;
   user-select: none;
@@ -36,12 +36,11 @@ input {
   min-height: var(--bl-size-m);
   max-width: var(--bl-size-m);
   max-height: var(--bl-size-m);
-  border: 1px solid var(--bl-color-border);
+  border: 1px solid var(--bl-color-neutral-lighter);
   border-radius: var(--bl-border-radius-xs);
-  color: var(--bl-color-content-primary-contrast);
+  color: var(--bl-color-neutral-full);
   font-size: var(--bl-font-size-2xs);
-  line-height: 100%;
-  background-color: var(--bl-color-primary-background);
+  background-color: var(--bl-color-neutral-full);
 }
 
 :host([checked]) .label,
@@ -61,11 +60,11 @@ input {
 
 :host([disabled]) .check-mark,
 :host([disabled]) .label {
-  color: var(--bl-color-content-passive);
+  color: var(--bl-color-neutral-light);
 }
 
 :host([disabled]) .check-mark {
-  background-color: var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-lightest);
 }
 
 :host(:not([disabled])) input:focus-visible + .check-mark {
diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx b/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
index ee468a4b..d5de3a74 100644
--- a/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
+++ b/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
@@ -42,7 +42,7 @@ export const CheckboxLimitedWidthTemplate = (args) => html`<div style="max-width
   ${CheckboxTemplate(args)}
 </div>`;
 
-export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="padding: 20px; background-color: var(--bl-color-accent-primary-background);">
+export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="padding: 20px; background-color: var(--bl-color-primary-contrast);">
   ${CheckboxTemplate(args)}
 </div>`;
 
diff --git a/src/components/dialog/bl-dialog.css b/src/components/dialog/bl-dialog.css
index bde2a117..826ab022 100644
--- a/src/components/dialog/bl-dialog.css
+++ b/src/components/dialog/bl-dialog.css
@@ -1,5 +1,5 @@
 .container {
-  --background-color: var(--bl-color-primary-background);
+  --background-color: var(--bl-color-neutral-full);
 
   display: flex;
   flex-direction: column;
@@ -25,8 +25,7 @@
 }
 
 .dialog::backdrop {
-  background: #273142;
-  opacity: 0.7;
+  background-color: #273142b3;
 }
 
 .dialog-polyfill {
@@ -39,9 +38,7 @@
   align-items: center;
   justify-content: center;
   z-index: var(--bl-index-dialog);
-
-  /* FIXME: Use css variables for alpha colors */
-  background: #273142b3;
+  background-color: #273142b3;
 }
 
 :host([open]) .dialog-polyfill {
@@ -62,7 +59,7 @@ header bl-button {
 
 header h2 {
   font: var(--bl-font-title-1-medium);
-  color: var(--bl-color-secondary);
+  color: var(--bl-color-neutral-darker);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -83,6 +80,7 @@ footer {
 }
 
 footer.shadow {
+  /* FIXME: Use variables for sizes */
   box-shadow: 0 -4px 15px #27314226;
 }
 
diff --git a/src/components/dialog/bl-dialog.stories.mdx b/src/components/dialog/bl-dialog.stories.mdx
index 07529beb..6aff0b7d 100644
--- a/src/components/dialog/bl-dialog.stories.mdx
+++ b/src/components/dialog/bl-dialog.stories.mdx
@@ -29,7 +29,7 @@ export const dialogOpener = async (event, dialogId) => {
 }
 
 export const BasicTemplate = (args) => html`
-<bl-button @click="${(event) => dialogOpener(event, args.id)}" variant="secondary">Open Dialog</bl-button>
+<bl-button @bl-click="${(event) => dialogOpener(event, args.id)}" variant="secondary">Open Dialog</bl-button>
 <bl-dialog
   id=${args.id}
   class="${ifDefined(args.className)}"
@@ -139,9 +139,9 @@ To maintain usability level of dialog component:
 ## Basic Usage
 
 <Canvas>
-  <Story name="Basic Usage" play={(event) => dialogOpener(event, "basic-dialog")}
+  <Story name="Basic Usage" play={(event) => dialogOpener(event, "dl-basic")}
    args={{
-    id: 'basic-dialog',
+    id: 'dl-basic',
     caption: "Use location service?",
     content: 'Let us help determine location. This means sending anonymous location data to us.',
     primaryAction: 'Agree',
@@ -157,9 +157,9 @@ To maintain usability level of dialog component:
 For long content that does not fit on the page, the dialog action area remains sticky at the bottom of the dialog so that it appears on the page.
 
 <Canvas>
-  <Story name="Dialog With Sticky Footer" play={(event) => dialogOpener(event,"dialog-with-sticky-footer")}
+  <Story name="Dialog With Sticky Footer" play={(event) => dialogOpener(event,"dl-sticky-footer")}
    args={{
-    id: 'dialog-with-sticky-footer',
+    id: 'dl-sticky-footer',
     caption: "Terms And Conditions",
     primaryAction: 'Agree',
     secondaryAction: 'Disagree',
@@ -173,8 +173,8 @@ For long content that does not fit on the page, the dialog action area remains s
 The dialog doesn't have any size, it will be fluidly sized regarding its content. You can give your own width and height style to your content.
 
 <Canvas>
-  <Story name="Dialog Sizing" play={(event) => dialogOpener(event,"dialog-sizing")} args={{
-    id: 'dialog-sizing',
+  <Story name="Dialog Sizing" play={(event) => dialogOpener(event,"dl-sizing")} args={{
+    id: 'dl-sizing',
     primaryAction: 'Agree',
     secondaryAction: 'Disagree',
     tertiaryAction: 'Cancel'
@@ -189,9 +189,9 @@ By default, when you open a dialog, "close" button get focus automatically. But
 `autofocus` attribute of the `bl-button`.
 
 <Canvas>
-  <Story name="Dialog with focused action" play={(event) => dialogOpener(event, "dialog-with-focused-action")}
+  <Story name="Dialog with focused action" play={(event) => dialogOpener(event, "dl-focused-action")}
    args={{
-    id: 'dialog-with-focused-action',
+    id: 'dl-focused-action',
     caption: "Use location service?",
     content: 'Let us help determine location. This means sending anonymous location data to us.',
     primaryAction: 'Agree',
@@ -206,9 +206,9 @@ By default, when you open a dialog, "close" button get focus automatically. But
 You may also consider to autofocus user to an input inside the dialog.
 
 <Canvas>
-  <Story name="Dialog with focused input" play={(event) => dialogOpener(event, "dialog-with-focused-input")}
+  <Story name="Dialog with focused input" play={(event) => dialogOpener(event, "dl-focused-input")}
    args={{
-    id: 'dialog-with-focused-input',
+    id: 'dl-focused-input',
     caption: 'Name your file',
     content: '<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',
     primaryAction: 'OK',
@@ -232,18 +232,18 @@ bl-dialog.full-width-actions bl-button {
 In this case action button(s) will fill the row by sharing space equally if there are more than one actions.
 
 <Canvas>
-  <Story name="Dialog with full-width action" play={(event) => dialogOpener(event, "dialog-with-full-width-action")}
+  <Story name="Dialog with full-width action" play={(event) => dialogOpener(event, "dl-full-width-action")}
    args={{
-    id: 'dialog-with-full-width-action',
+    id: 'dl-full-width-action',
     caption: 'Action completed',
     content: '<p>Your process is done!</p>',
     primaryAction: 'OK'
   }}>
     {FullWidthActionsTemplate.bind({})}
   </Story>
-  <Story name="Dialog with full-width actions" play={(event) => dialogOpener(event, "dialog-with-full-width-actions")}
+  <Story name="Dialog with full-width actions" play={(event) => dialogOpener(event, "dl-full-width-actions")}
    args={{
-    id: 'dialog-with-full-width-actions',
+    id: 'dl-full-width-actions',
     caption: 'Are you sure to delete?',
     content: '<p>Do you want to really delete the file?</p>',
     primaryAction: 'Delete',
diff --git a/src/components/drawer/bl-drawer.css b/src/components/drawer/bl-drawer.css
index 3153e786..d00c100e 100644
--- a/src/components/drawer/bl-drawer.css
+++ b/src/components/drawer/bl-drawer.css
@@ -10,7 +10,7 @@
   padding-top: max(env(safe-area-inset-top), var(--bl-size-xl));
   padding-right: max(env(safe-area-inset-right), var(--bl-size-xl));
   padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
-  background: var(--bl-color-primary-background);
+  background: var(--bl-color-neutral-full);
   box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
   transition: right var(--bl-drawer-animation-duration, 0.25s);
   z-index: var(--bl-index-sticky);
@@ -31,6 +31,7 @@ iframe {
   flex-direction: column;
   gap: var(--bl-size-xl);
   flex: 1;
+  width: 100%;
 }
 
 header {
@@ -43,13 +44,13 @@ header {
 
 header .header-buttons {
   display: flex;
-  gap: 24px;
+  gap: var(--bl-size-xl);
   margin-left: auto;
 }
 
 header h2 {
   font: var(--bl-font-title-1-medium);
-  color: var(--bl-color-secondary);
+  color: var(--bl-color-neutral-darker);
   overflow: hidden;
   margin: 0;
   padding: 0;
diff --git a/src/components/drawer/bl-drawer.ts b/src/components/drawer/bl-drawer.ts
index c09f4a18..7677fe8b 100644
--- a/src/components/drawer/bl-drawer.ts
+++ b/src/components/drawer/bl-drawer.ts
@@ -9,6 +9,7 @@ import { PropertyValues } from 'lit';
  * @tag bl-drawer
  * @summary Baklava Drawer component
  *
+ * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration
  */
 
 @customElement('bl-drawer')
diff --git a/src/components/dropdown/bl-dropdown.css b/src/components/dropdown/bl-dropdown.css
index c46ae1ff..c363fdfb 100644
--- a/src/components/dropdown/bl-dropdown.css
+++ b/src/components/dropdown/bl-dropdown.css
@@ -4,7 +4,7 @@
 }
 
 :host([kind='neutral']) bl-popover {
-  --bl-popover-border-color: var(--bl-color-secondary);
+  --bl-popover-border-color: var(--bl-color-neutral-darker);
 }
 
 :host([kind='success']) bl-popover {
diff --git a/src/components/dropdown/group/bl-dropdown-group.css b/src/components/dropdown/group/bl-dropdown-group.css
index 178cd5f5..d5be0f65 100644
--- a/src/components/dropdown/group/bl-dropdown-group.css
+++ b/src/components/dropdown/group/bl-dropdown-group.css
@@ -14,15 +14,15 @@
   font-size: var(--bl-font-size-xs);
   font-weight: var(--bl-font-weight-medium);
   line-height: var(--bl-font-size-s);
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
 }
 
 :host(:not(:first-child)) {
-  border-top: 1px solid var(--bl-color-border);
+  border-top: 1px solid var(--bl-color-neutral-lighter);
 }
 
 :host(:not(:last-child)) {
-  border-bottom: 1px solid var(--bl-color-border);
+  border-bottom: 1px solid var(--bl-color-neutral-lighter);
 }
 
 :host(:not([caption])) ::slotted(:first-child) {
diff --git a/src/components/icon/bl-icon.stories.mdx b/src/components/icon/bl-icon.stories.mdx
index 38c8760a..0314082c 100644
--- a/src/components/icon/bl-icon.stories.mdx
+++ b/src/components/icon/bl-icon.stories.mdx
@@ -31,12 +31,12 @@ import icons from './icon-list';
         presetColors: [{
           color: 'var(--bl-color-primary)',
           title: 'Primary'
-        },{
-          color: 'var(--bl-color-secondary)',
-          title: 'Secondary'
         },{
           color: 'var(--bl-color-success)',
           title: 'Success'
+        },{
+          color: 'var(--bl-color-danger)',
+          title: 'Danger'
         }]
       }
     },
@@ -56,10 +56,10 @@ export const SizeVariations = (args) => html`
 `
 
 export const ColorVariations = (args) => html`
-<bl-icon name="${args.name}" style="color: var(--bl-color-content-primary)"></bl-icon>
-<bl-icon name="${args.name}" style="color: var(--bl-color-content-secondary)"></bl-icon>
-<bl-icon name="${args.name}" style="color: var(--bl-color-content-tertiary)"></bl-icon>
-<bl-icon name="${args.name}" style="color: var(--bl-color-content-passive)"></bl-icon>
+<bl-icon name="${args.name}" style="color: var(--bl-color-neutral-darker)"></bl-icon>
+<bl-icon name="${args.name}" style="color: var(--bl-color-neutral-dark)"></bl-icon>
+<bl-icon name="${args.name}" style="color: var(--bl-color-neutral-light)"></bl-icon>
+<bl-icon name="${args.name}" style="color: var(--bl-color-neutral-lighter)"></bl-icon>
 `
 
 export const AllIcons = (args) => html`<div
diff --git a/src/components/input/bl-input.css b/src/components/input/bl-input.css
index 8150f3f9..73fed083 100644
--- a/src/components/input/bl-input.css
+++ b/src/components/input/bl-input.css
@@ -5,9 +5,9 @@
 }
 
 .wrapper {
-  --border-color: var(--bl-color-border);
-  --icon-color: var(--bl-color-content-tertiary);
-  --text-color: var(--bl-color-content-primary);
+  --border-color: var(--bl-color-neutral-lighter);
+  --icon-color: var(--bl-color-neutral-light);
+  --text-color: var(--bl-color-neutral-darker);
   --height: var(--bl-size-2xl);
   --input-font: var(--bl-font-body-text-2);
   --line-height: var(--bl-font-body-text-2-line-height);
@@ -15,9 +15,9 @@
   --icon-gap: var(--bl-size-xs);
   --padding-vertical: calc((var(--height) - var(--line-height)) / 2);
   --padding-horizontal: var(--bl-size-xs);
+  --autofill-bg-color: var(--bl-color-primary-contrast);
   --label-padding: var(--bl-size-3xs);
-  --background-color: var(--bl-color-content-primary-contrast);
-  --autofill-bg-color: var(--bl-color-accent-primary-background);
+  --background-color: var(--bl-color-neutral-full);
 
   display: grid;
   position: relative;
@@ -69,8 +69,8 @@
 :host([disabled]) .wrapper {
   cursor: not-allowed;
 
-  --background-color: var(--bl-color-secondary-background);
-  --text-color: var(--bl-color-content-passive);
+  --background-color: var(--bl-color-neutral-lightest);
+  --text-color: var(--bl-color-neutral-light);
 }
 
 .wrapper:has(input:autofill) {
@@ -98,7 +98,7 @@ label {
   left: var(--padding-horizontal);
   right: var(--padding-horizontal);
   pointer-events: none;
-  color: var(--bl-color-content-tertiary);
+  color: var(--bl-color-neutral-light);
 }
 
 .has-icon label {
@@ -210,8 +210,8 @@ bl-icon[name='eye_on'] {
 }
 
 ::placeholder {
-  color: var(--bl-color-content-tertiary);
-  -webkit-text-fill-color: var(--bl-color-content-tertiary);
+  color: var(--bl-color-neutral-light);
+  -webkit-text-fill-color: var(--bl-color-neutral-light);
 }
 
 :host([label]) ::placeholder {
@@ -222,8 +222,8 @@ bl-icon[name='eye_on'] {
 
 :host([label-fixed]) ::placeholder,
 :host :focus-within ::placeholder {
-  color: var(--bl-color-content-tertiary);
-  -webkit-text-fill-color: var(--bl-color-content-tertiary);
+  color: var(--bl-color-neutral-light);
+  -webkit-text-fill-color: var(--bl-color-neutral-light);
 }
 
 :host([label-fixed]) label {
@@ -232,7 +232,7 @@ bl-icon[name='eye_on'] {
   transform: none;
   pointer-events: initial;
   font: var(--bl-font-caption);
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
   padding: 0;
 }
 
@@ -247,13 +247,13 @@ bl-icon[name='eye_on'] {
   right: calc(var(--padding-horizontal) - var(--label-padding));
   transform: translateY(-50%);
   font: var(--bl-font-caption);
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
   padding: 0 var(--label-padding);
   pointer-events: initial;
   z-index: var(--bl-index-base);
 }
 
-:host([label]) :where(:focus-within, .has-value) legend {
+:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend {
   max-width: 100%;
   font: var(--bl-font-caption);
   display: block;
@@ -271,7 +271,7 @@ bl-icon[name='eye_on'] {
 }
 
 .help-text {
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
 }
 
 :host([help-text]) .hint,
diff --git a/src/components/pagination/bl-pagination.css b/src/components/pagination/bl-pagination.css
index 8302d6b0..fa17746a 100644
--- a/src/components/pagination/bl-pagination.css
+++ b/src/components/pagination/bl-pagination.css
@@ -31,7 +31,7 @@
 
 .dots::before {
   content: ' \B7 \B7 \B7';
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .pagination-helpers {
@@ -40,7 +40,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--bl-size-m);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .jumper,
diff --git a/src/components/popover/bl-popover.css b/src/components/popover/bl-popover.css
index 932c0a77..d6754593 100644
--- a/src/components/popover/bl-popover.css
+++ b/src/components/popover/bl-popover.css
@@ -1,7 +1,7 @@
 .popover {
   --arrow-display: var(--bl-popover-arrow-display, none);
-  --background-color: var(--bl-popover-background-color, var(--bl-color-primary-background));
-  --border-color: var(--bl-popover-border-color, var(--bl-color-primary-hover));
+  --background-color: var(--bl-popover-background-color, var(--bl-color-neutral-full));
+  --border-color: var(--bl-popover-border-color, var(--bl-color-primary-highlight));
   --padding: var(--bl-popover-padding, var(--bl-size-m));
   --border-radius: var(--bl-popover-border-radius, var(--bl-size-3xs));
   --position: var(--bl-popover-position, fixed);
@@ -16,7 +16,7 @@
   hyphens: auto;
   background-color: var(--background-color);
   font: var(--bl-font-title-3-regular);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .popover:not(.visible) {
diff --git a/src/components/popover/bl-popover.stories.mdx b/src/components/popover/bl-popover.stories.mdx
index 3b4327e9..6a39774a 100644
--- a/src/components/popover/bl-popover.stories.mdx
+++ b/src/components/popover/bl-popover.stories.mdx
@@ -153,11 +153,11 @@ By default arrow is not visible. You can use options below:
 
 ## Background Color
 
-You can give `--bl-popover-background-color` for popover background. Default color is `--bl-color-primary-background`.
+You can give `--bl-popover-background-color` for popover background. Default color is `--bl-color-neutral-full`.
 
 <Canvas>
   <Story name="Background Color"
-         args={{  id:'4', style: '--bl-popover-background-color:var(--bl-color-featured-background); --bl-popover-arrow-display: block;',
+         args={{  id:'4', style: '--bl-popover-background-color: #f4edff; --bl-popover-arrow-display: block;',
          buttonText:'Custom Background'}}
          play={popoverOpener}>
     {StoryTemplate.bind({})}
@@ -167,7 +167,7 @@ You can give `--bl-popover-background-color` for popover background. Default col
 
 ## Border Color
 
-You can give `--bl-popover-border-color` for popover border color. Default color is `--bl-color-primary-hover`.
+You can give `--bl-popover-border-color` for popover border color. Default color is `--bl-color-primary-highlight`.
 
 <Canvas>
   <Story name="Border Color"
diff --git a/src/components/popover/bl-popover.ts b/src/components/popover/bl-popover.ts
index 029eeb87..9e7f7f61 100644
--- a/src/components/popover/bl-popover.ts
+++ b/src/components/popover/bl-popover.ts
@@ -35,8 +35,8 @@ export type Placement =
  * @summary Baklava Popover component
  *
  * @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.
- * @cssproperty [--bl-popover-background-color=--bl-color-primary-background] - Sets the background color of popover.
- * @cssproperty [--bl-popover-border-color=--bl-color-primary-hover] - Sets the border color of popover.
+ * @cssproperty [--bl-popover-background-color=--bl-color-neutral-full] - Sets the background color of popover.
+ * @cssproperty [--bl-popover-border-color=--bl-color-primary-highlight] - Sets the border color of popover.
  * @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.
  * @cssproperty [--bl-popover-border-radius=--bl-size-3xs] - Sets the border radius of popover.
  * @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.
diff --git a/src/components/progress-indicator/bl-progress-indicator.css b/src/components/progress-indicator/bl-progress-indicator.css
index b6080397..dc474aff 100644
--- a/src/components/progress-indicator/bl-progress-indicator.css
+++ b/src/components/progress-indicator/bl-progress-indicator.css
@@ -3,10 +3,10 @@
   --value: 0;
   --value-color: var(--bl-color-success);
   --height: var(--bl-size-2xs);
-  --radius: var(--bl-size-3xs);
+  --radius: var(--bl-border-radius-s);
 
   position: relative;
-  background-color: var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-lightest);
   height: var(--height);
   border-radius: var(--radius);
   width: 100%;
@@ -24,12 +24,12 @@
 
 :host([size='small']) .progress-indicator {
   --height: var(--bl-size-3xs);
-  --radius: var(--bl-size-4xs);
+  --radius: var(--bl-border-radius-xs);
 }
 
 :host([size='large']) .progress-indicator {
   --height: var(--bl-size-xs);
-  --radius: 6px;
+  --radius: var(--bl-border-radius-m);
 }
 
 :host([failed]) .progress-indicator {
diff --git a/src/components/progress-indicator/bl-progress-indicator.stories.mdx b/src/components/progress-indicator/bl-progress-indicator.stories.mdx
index 154023cf..bea687db 100644
--- a/src/components/progress-indicator/bl-progress-indicator.stories.mdx
+++ b/src/components/progress-indicator/bl-progress-indicator.stories.mdx
@@ -43,7 +43,7 @@ export const FailedTemplate = (args) => html`
 
 export const WithMaxTemplate = (args) => html`
 <div>
-<p style='color: var(--bl-color-content-secondary); margin: var(--bl-size-3xs); font: var(--bl-font-title-4-regular)'> Completed Tasks: <b style='color: var(--bl-color-success)'> 5/8 </b></p>${ProgressIndicatorTemplate({ max:'8', value: '5', ...args })}
+<p style='color: var(--bl-color-neutral-dark); margin: var(--bl-size-3xs); font: var(--bl-font-title-4-regular)'> Completed Tasks: <b style='color: var(--bl-color-success)'> 5/8 </b></p>${ProgressIndicatorTemplate({ max:'8', value: '5', ...args })}
 </div>`;
 
 # Progress Indicator
diff --git a/src/components/radio-group/bl-radio-group.css b/src/components/radio-group/bl-radio-group.css
index d84834d0..8595a4ef 100644
--- a/src/components/radio-group/bl-radio-group.css
+++ b/src/components/radio-group/bl-radio-group.css
@@ -10,12 +10,12 @@ fieldset {
 
 legend {
   font: var(--bl-font-title-3-medium);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .options {
   display: flex;
   flex-flow: var(--bl-radio-direction, column) wrap;
-  gap: 16px;
+  gap: var(--bl-size-m);
   margin-block: var(--bl-size-xs);
 }
diff --git a/src/components/radio-group/radio/bl-radio.css b/src/components/radio-group/radio/bl-radio.css
index 95e528f8..62302662 100644
--- a/src/components/radio-group/radio/bl-radio.css
+++ b/src/components/radio-group/radio/bl-radio.css
@@ -5,34 +5,36 @@
 }
 
 .wrapper {
+  --size: var(--bl-size-m);
+
   outline: none;
 }
 
 #label {
   display: flex;
   font: var(--bl-font-title-3-regular);
-  height: var(--bl-size-m);
+  height: var(--size);
   line-height: normal;
   vertical-align: middle;
   margin-block: 0;
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 #label::before {
   content: '';
   display: inline-block;
   box-sizing: border-box;
-  width: var(--bl-size-m);
-  height: var(--bl-size-m);
+  width: var(--size);
+  height: var(--size);
   background-color: white;
   border-radius: var(--bl-border-radius-circle);
-  border: solid 1px var(--bl-color-border);
+  border: solid 1px var(--bl-color-neutral-lighter);
   margin-right: var(--bl-size-2xs);
   vertical-align: middle;
 }
 
 .selected #label::before {
-  border-width: 4px;
+  border-width: var(--bl-size-3xs);
   border-color: var(--bl-color-primary);
 }
 
@@ -46,17 +48,24 @@
   pointer-events: none;
 }
 
+:host([disabled]) .wrapper {
+  --size: calc(var(--bl-size-m) - 2px);
+}
+
 :host([disabled]) #label {
-  color: var(--bl-color-content-passive);
+  color: var(--bl-color-neutral-light);
 }
 
 :host([disabled]) #label::before {
-  background-color: var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-lightest);
+  border-width: 0;
+  box-shadow: 0 0 0 1px var(--bl-color-neutral-lighter);
 }
 
 :host([disabled]) .selected #label::before {
-  background-color: var(--bl-color-content-passive);
-  border-color: var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-light);
+  border-color: var(--bl-color-neutral-lightest);
+  border-width: calc(var(--bl-size-3xs) - 1px);
 }
 
 .wrapper:focus-visible #label::before {
diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
index 95936925..35c22d2f 100644
--- a/src/components/select/bl-select.css
+++ b/src/components/select/bl-select.css
@@ -13,18 +13,18 @@
   --padding-horizontal: var(--bl-size-xs);
   --label-padding: var(--bl-size-3xs);
   --border-size: 1px;
-  --background-color: var(--bl-color-primary-background);
-  --border-color: var(--bl-color-border);
-  --border-focus-color: var(--bl-color-primary-hover);
-  --icon-color: var(--bl-color-content-tertiary);
-  --text-color: var(--bl-color-content-primary);
-  --label-color: var(--bl-color-content-secondary);
-  --placeholder-color: var(--bl-color-content-tertiary);
+  --background-color:  var(--bl-color-neutral-full);
+  --border-color: var(--bl-color-neutral-lighter);
+  --border-focus-color: var(--bl-color-primary-highlight);
+  --icon-color: var(--bl-color-neutral-light);
+  --text-color: var(--bl-color-neutral-darker);
+  --label-color: var(--bl-color-neutral-dark);
+  --placeholder-color: var(--bl-color-neutral-light);
   --height: var(--bl-size-2xl);
   --menu-padding: 0 var(--bl-size-m);
   --menu-margin-top: var(--bl-size-2xs);
   --font-size: var(--bl-font-size-m);
-  --disabled-color: var(--bl-color-tertiary);
+  --disabled-color: var(--bl-color-neutral-lightest);
   --menu-height: 250px;
   --popover-position: var(--bl-popover-position, fixed);
 }
@@ -43,12 +43,12 @@
 }
 
 :host([disabled]) .select-wrapper {
-  --placeholder-color: var(--bl-color-content-passive);
+  --placeholder-color: var(--bl-color-neutral-light);
 }
 
 .dirty.invalid {
   --border-color: var(--bl-color-danger);
-  --border-focus-color: var(--bl-color-danger-hover);
+  --border-focus-color: var(--bl-color-danger-highlight);
   --label-color: var(--bl-color-danger);
 }
 
@@ -98,7 +98,7 @@
   left: 1.5rem;
   bottom: 4px;
   height: 1rem;
-  border-left: 1px solid var(--bl-color-border);
+  border-left: 1px solid var(--bl-color-neutral-lighter);
 }
 
 .selected .remove-all {
@@ -127,11 +127,11 @@
 }
 
 .selected .dropdown-icon {
-  --icon-color: var(--bl-color-secondary);
+  --icon-color: var(--bl-color-neutral-darker);
 }
 
 :host([disabled]) .dropdown-icon {
-  --icon-color: var(--bl-color-content-passive);
+  --icon-color: var(--bl-color-neutral-light);
 }
 
 .select-open .select-input,
@@ -174,8 +174,9 @@
   display: none;
 }
 
-:host([disabled]) .selected-options li {
-  color: var(--bl-color-content-passive);
+:host([disabled]) .selected-options li
+{
+  color: var(--bl-color-neutral-light);
 }
 
 .select-input .actions {
@@ -305,7 +306,7 @@ legend span {
 }
 
 .help-text {
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
 }
 
 .select-open .help-text,
diff --git a/src/components/select/option/bl-select-option.css b/src/components/select/option/bl-select-option.css
index 5faf9be0..ece8727e 100644
--- a/src/components/select/option/bl-select-option.css
+++ b/src/components/select/option/bl-select-option.css
@@ -6,10 +6,10 @@
   --option-font: var(--bl-font-title-3-regular);
   --option-spacing: var(--bl-size-xs) 0;
   --option-selected-color: var(--bl-color-primary);
-  --option-hover-color: var(--bl-color-primary-hover);
-  --option-color: var(--bl-color-secondary);
-  --option-disabled-color: var(--bl-color-content-passive);
-  --option-separator: 1px solid var(--bl-color-border);
+  --option-hover-color: var(--bl-color-primary-highlight);
+  --option-color: var(--bl-color-neutral-darker);
+  --option-disabled-color: var(--bl-color-neutral-light);
+  --option-seperator: 1px solid var(--bl-color-neutral-lighter);
   --option-gap: var(--bl-size-2xs);
   --option-transition: color 120ms ease-out;
 }
diff --git a/src/components/switch/bl-switch.css b/src/components/switch/bl-switch.css
index f3bc1cd3..df53ed56 100644
--- a/src/components/switch/bl-switch.css
+++ b/src/components/switch/bl-switch.css
@@ -18,7 +18,7 @@ span {
   --animation-duration: var(--bl-switch-animation-duration, 300ms);
   --switch-color: var(--bl-switch-color, var(--bl-color-primary));
 
-  background-color: var(--bl-color-content-passive);
+  background-color: var(--bl-color-neutral-lighter);
   border-radius: var(--bl-border-radius-pill);
   height: var(--track-height);
   transition-property: background-color;
diff --git a/src/components/switch/bl-switch.stories.mdx b/src/components/switch/bl-switch.stories.mdx
index 1178ad43..37bb4889 100644
--- a/src/components/switch/bl-switch.stories.mdx
+++ b/src/components/switch/bl-switch.stories.mdx
@@ -25,7 +25,7 @@ export const SwitchTemplate = (args) => html`
 
 export const SwitchWithLabel = (args) => html`
 <div style="display: flex;align-items: center;gap: var(--bl-size-2xs)">
-  <label style="font: var(--bl-font-title-3);color: var(--bl-color-secondary)">${args.label}</label>
+  <label style="font: var(--bl-font-title-3);color: var(--bl-color-neutral-dark)">${args.label}</label>
   <bl-switch
     ?disabled=${args.disabled}
     ?checked=${args.checked}
diff --git a/src/components/switch/bl-switch.ts b/src/components/switch/bl-switch.ts
index 5bcdc288..2ab66e11 100644
--- a/src/components/switch/bl-switch.ts
+++ b/src/components/switch/bl-switch.ts
@@ -9,6 +9,9 @@ export const blSwitchTag = 'bl-switch';
 /**
  * @tag bl-switch
  * @summary Baklava Switch component
+ *
+ * @cssproperty [--bl-switch-color=--bl-color-primary] Set the accent color
+ * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle
  */
 @customElement(blSwitchTag)
 export default class BlSwitch extends LitElement {
diff --git a/src/components/tab-group/bl-tab-group.css b/src/components/tab-group/bl-tab-group.css
index f808f28e..35a85492 100644
--- a/src/components/tab-group/bl-tab-group.css
+++ b/src/components/tab-group/bl-tab-group.css
@@ -1,6 +1,6 @@
 .tabs {
-  background-color: var(--bl-color-primary-background);
-  border-bottom: var(--bl-size-4xs) solid var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-full);
+  border-bottom: var(--bl-size-4xs) solid var(--bl-color-neutral-lightest);
   display: flex;
   flex-direction: row;
 }
diff --git a/src/components/tab-group/tab-panel/bl-tab-panel.css b/src/components/tab-group/tab-panel/bl-tab-panel.css
index 324e1be6..89d1abe6 100644
--- a/src/components/tab-group/tab-panel/bl-tab-panel.css
+++ b/src/components/tab-group/tab-panel/bl-tab-panel.css
@@ -1,6 +1,6 @@
 div {
   padding: var(--bl-size-xl);
-  background-color: var(--bl-color-primary-background);
+  background-color: var(--bl-color-neutral-full);
   border-radius: 0 0 var(--bl-border-radius-m) var(--bl-border-radius-m);
 }
 
diff --git a/src/components/tab-group/tab/bl-tab.css b/src/components/tab-group/tab/bl-tab.css
index b7549b6f..d5e5703d 100644
--- a/src/components/tab-group/tab/bl-tab.css
+++ b/src/components/tab-group/tab/bl-tab.css
@@ -2,15 +2,15 @@
   position: relative;
   display: flex;
   align-items: center;
-  background-color: var(--bl-color-primary-background);
+  background-color: var(--bl-color-neutral-full);
 }
 
 .container {
   --title-padding-vertical: var(--bl-size-m);
   --title-padding-horizontal: var(--bl-size-xl);
-  --title-color: var(--bl-color-secondary);
-  --caption-color: var(--bl-color-secondary);
-  --icon-color: var(--bl-color-secondary);
+  --title-color: var(--bl-color-neutral-darker);
+  --caption-color: var(--bl-color-neutral-darker);
+  --icon-color: var(--bl-color-neutral-darker);
   --border-bottom-width: var(--bl-size-4xs);
   --border-left-space: var(--bl-size-xl);
   --font-title: var(--bl-font-title-3-medium);
@@ -35,7 +35,7 @@
   right: 0;
   top: var(--bl-size-m);
   height: calc(100% - var(--bl-size-2xl));
-  border-right: 1px solid var(--bl-color-tertiary-hover);
+  border-right: 1px solid var(--bl-color-neutral-lighter);
 }
 
 :host(:last-of-type) .container::after {
@@ -76,9 +76,9 @@
 :host([disabled]) .container {
   cursor: not-allowed;
 
-  --title-color: var(--bl-color-content-passive);
-  --caption-color: var(--bl-color-content-passive);
-  --icon-color: var(--bl-color-content-passive);
+  --title-color: var(--bl-color-neutral-lighter);
+  --caption-color: var(--bl-color-neutral-lighter);
+  --icon-color: var(--bl-color-neutral-lighter);
 }
 
 :host(:hover) :where(.title, .icon) {
diff --git a/src/components/textarea/bl-textarea.css b/src/components/textarea/bl-textarea.css
index b6848f14..70c54555 100644
--- a/src/components/textarea/bl-textarea.css
+++ b/src/components/textarea/bl-textarea.css
@@ -17,8 +17,8 @@
   --height: max(var(--scroll-height), var(--default-scroll-height));
   --input-font: var(--bl-font-body-text-2);
   --border-radius: var(--bl-size-3xs);
-  --border-color: var(--bl-color-border);
-  --background-color: var(--bl-color-content-primary-contrast);
+  --border-color: var(--bl-color-neutral-lighter);
+  --background-color: var(--bl-color-neutral-full);
 
   display: flex;
   flex-direction: column;
@@ -51,7 +51,7 @@ textarea {
   margin: 0 calc(-1 * var(--parent-padding));
   border: none;
   border-radius: var(--border-radius);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
   resize: vertical;
   background-color: transparent;
   display: block;
@@ -70,13 +70,13 @@ textarea {
 }
 
 textarea:disabled {
-  background-color: var(--bl-color-secondary-background);
-  color: var(--bl-color-content-tertiary);
+  background-color: var(--bl-color-neutral-lightest);
+  color: var(--bl-color-neutral-light);
   cursor: not-allowed;
 }
 
 :host([disabled]) .wrapper {
-  --background-color: var(--bl-color-secondary-background);
+  --background-color: var(--bl-color-neutral-lightest);
 }
 
 :host([expand]) textarea {
@@ -123,7 +123,7 @@ label {
   left: var(--padding-horizontal);
   right: var(--padding-horizontal);
   pointer-events: none;
-  color: var(--bl-color-content-tertiary);
+  color: var(--bl-color-neutral-light);
 }
 
 .input-wrapper legend {
@@ -144,7 +144,7 @@ label {
   left: var(--padding-horizontal);
   transform: translateY(-50%);
   font: var(--bl-font-caption);
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
   pointer-events: initial;
   z-index: var(--bl-index-base);
 }
@@ -157,7 +157,7 @@ label {
 
 :host ::placeholder,
 :host([label-fixed]) ::placeholder {
-  color: var(--bl-color-content-tertiary);
+  color: var(--bl-color-neutral-light);
 }
 
 :host([label-fixed]) label {
@@ -166,7 +166,7 @@ label {
   transform: none;
   pointer-events: initial;
   font: var(--bl-font-caption);
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
   background-color: initial;
   padding: 0;
 }
@@ -198,7 +198,7 @@ label {
 }
 
 .counter-text {
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
   margin-left: auto;
 }
 
@@ -216,7 +216,7 @@ label {
 }
 
 .help-text {
-  color: var(--bl-color-content-secondary);
+  color: var(--bl-color-neutral-dark);
 }
 
 :where(.dirty.max-len-invalid, .dirty.invalid) .hint > .invalid-text {
diff --git a/src/components/tooltip/bl-tooltip.css b/src/components/tooltip/bl-tooltip.css
index 44f62f1d..a16aa300 100644
--- a/src/components/tooltip/bl-tooltip.css
+++ b/src/components/tooltip/bl-tooltip.css
@@ -7,8 +7,8 @@
   position: fixed;
   box-sizing: border-box;
   border: none;
-  background-color: var(--bl-color-secondary);
-  color: var(--bl-color-content-primary-contrast);
+  background-color: var(--bl-color-neutral-darker);
+  color: var(--bl-color-neutral-full);
   border-radius: var(--bl-size-3xs);
   pointer-events: none;
   font: var(--bl-font-title-3-regular);
@@ -29,7 +29,7 @@
 
 .arrow {
   position: absolute;
-  background-color: var(--bl-color-secondary);
+  background-color: var(--bl-color-neutral-darker);
   width: var(--bl-size-2xs);
   height: var(--bl-size-2xs);
   transform: rotate(45deg);
diff --git a/src/themes/default.css b/src/themes/default.css
index 3980665e..bff9c86a 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -1,43 +1,35 @@
 @import '@fontsource/rubik/variable.css';
 
 :root {
-  /* Colors */
+  /* Primary Color */
   --bl-color-primary: #f27a1a;
-  --bl-color-primary-hover: #ef6114;
-  --bl-color-secondary: #273142;
-  --bl-color-secondary-hover: #0f131a;
-  --bl-color-tertiary: #f1f2f7;
-  --bl-color-tertiary-hover: #d5d9e1;
+  --bl-color-primary-highlight: #ef6114;
+  --bl-color-primary-contrast: #fef2e8;
+
+  /* Success Color */
   --bl-color-success: #0bc15c;
-  --bl-color-success-hover: #09a44e;
-  --bl-color-danger: #ff5043;
-  --bl-color-danger-hover: #ff3028;
-  --bl-color-warning: #ffb600;
-  --bl-color-warning-hover: #ff9800;
-  --bl-color-alternative: #5794ff;
-  --bl-color-alternative-hover: #457eff;
-  --bl-color-featured: #8c4eff;
-  --bl-color-featured-hover: #753eff;
+  --bl-color-success-highlight: #09a44e;
+  --bl-color-success-contrast: #e7f9ef;
 
-  /* Background Colors */
-  --bl-color-primary-background: #fff;
-  --bl-color-accent-primary-background: #fef2e8;
-  --bl-color-secondary-background: #f1f2f7;
-  --bl-color-tertiary-background: #f7f7fa;
-  --bl-color-success-background: #e7f9ef;
-  --bl-color-danger-background: #ffeeec;
-  --bl-color-warning-background: #fff8e6;
-  --bl-color-alternative-background: #eef4ff;
-  --bl-color-featured-background: #f4edff;
+  /* Danger Color */
+  --bl-color-danger: #ff5043;
+  --bl-color-danger-highlight: #ff3028;
+  --bl-color-danger-contrast: #ffeeec;
 
-  /* Content Colors */
-  --bl-color-content-primary: #273142;
-  --bl-color-content-secondary: #6e7787;
-  --bl-color-content-tertiary: #95a1b5;
-  --bl-color-content-passive: #afbbca;
-  --bl-color-content-primary-contrast: #fff;
-  --bl-color-content-hover: #f27a1a;
-  --bl-color-border: #d5d9e1;
+  /* Warning Color */
+  --bl-color-warning: #ffb600;
+  --bl-color-warning-highlight: #ff9800;
+  --bl-color-warning-contrast: #fff8e6;
+
+  /* Neutral Color */
+  --bl-color-neutral-none: #000;
+  --bl-color-neutral-darkest: #0f131a;
+  --bl-color-neutral-darker: #273142;
+  --bl-color-neutral-dark: #6e7787;
+  --bl-color-neutral-light: #95a1b5;
+  --bl-color-neutral-lighter: #afbbca;
+  --bl-color-neutral-lightest: #f1f2f7;
+  --bl-color-neutral-full: #fff;
 
   /* Size and Spacing */
   --bl-size-4xs: 0.125rem; /* 2px */
@@ -205,4 +197,44 @@
   --bl-font-caption-line-height: calc(var(--bl-font-caption-font-size) + var(--bl-size-4xs));
   --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);
   --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family);
+
+  /*
+  @DEPRECATED
+
+  Color names below is kept for backward compatibility,
+
+  Will be removed in V3
+  */
+  --bl-color-primary-hover: var(--bl-color-primary-highlight);
+  --bl-color-success-hover: var(--bl-color-success-highlight);
+  --bl-color-danger-hover: var(--bl-color-danger-highlight);
+  --bl-color-warning-hover: var(--bl-color-warning-highlight);
+  --bl-color-accent-primary-background: var(--bl-color-primary-contrast);
+  --bl-color-success-background: var(--bl-color-success-contrast);
+  --bl-color-danger-background: var(--bl-color-danger-contrast);
+  --bl-color-warning-background: var(--bl-color-warning-contrast);
+  --bl-color-primary-background: var(--bl-color-neutral-full);
+
+  /* Content Colors */
+  --bl-color-content-primary: var(--bl-color-neutral-darker);
+  --bl-color-content-secondary: var(--bl-color-neutral-dark);
+  --bl-color-content-tertiary: var(--bl-color-neutral-light);
+  --bl-color-content-passive: var(--bl-color-neutral-lighter);
+  --bl-color-content-primary-contrast: var(--bl-color-neutral-full);
+  --bl-color-content-hover: var(--bl-color-primary-highlight);
+  --bl-color-border: var(--bl-color-neutral-lighter);
+
+  /* Removed Colors */
+  --bl-color-secondary: #273142;
+  --bl-color-secondary-hover: #0f131a;
+  --bl-color-secondary-background: var(--bl-color-neutral-lightest);
+  --bl-color-tertiary: #f1f2f7;
+  --bl-color-tertiary-hover: #d5d9e1;
+  --bl-color-alternative: #5794ff;
+  --bl-color-alternative-hover: #457eff;
+  --bl-color-featured: #8c4eff;
+  --bl-color-featured-hover: #753eff;
+  --bl-color-tertiary-background: #f7f7fa;
+  --bl-color-alternative-background: #eef4ff;
+  --bl-color-featured-background: #f4edff;
 }