diff --git a/apps/nt-headless-ui/stories/colors/brand/brand.mdx b/apps/nt-headless-ui/stories/colors/brand/brand.mdx
index e4e3224..b8d27fc 100644
--- a/apps/nt-headless-ui/stories/colors/brand/brand.mdx
+++ b/apps/nt-headless-ui/stories/colors/brand/brand.mdx
@@ -9,7 +9,7 @@ import {
 
 import colors from './colors.json'
 
-<Meta title="Color/Brand" />
+<Meta title="Colors/Brand" />
 
 <ColorPalette>
     {colors.map((color) => (
diff --git a/apps/nt-headless-ui/stories/colors/danger/colors.json b/apps/nt-headless-ui/stories/colors/danger/colors.json
new file mode 100644
index 0000000..88442e4
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/danger/colors.json
@@ -0,0 +1,18 @@
+[
+    {
+        "name": "bold",
+        "value": "#E51010"
+    },
+    {
+        "name": "regular (default)",
+        "value": "#FA5151"
+    },
+    {
+        "name": "light",
+        "value": "#F9BBBB"
+    },
+    {
+        "name": "thin",
+        "value": "#FFE9E9"
+    }
+]
diff --git a/apps/nt-headless-ui/stories/colors/danger/danger.mdx b/apps/nt-headless-ui/stories/colors/danger/danger.mdx
new file mode 100644
index 0000000..1ebba83
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/danger/danger.mdx
@@ -0,0 +1,22 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+import colors from './colors.json'
+
+<Meta title="Colors/Danger" />
+
+<ColorPalette>
+    {colors.map((color) => (
+        <ColorItem
+            key={color.title}
+            title={color.name}
+            colors={{ [color.name]: color.value }}
+        />
+    ))}
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/info/colors.json b/apps/nt-headless-ui/stories/colors/info/colors.json
new file mode 100644
index 0000000..deb0a2d
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/info/colors.json
@@ -0,0 +1,18 @@
+[
+    {
+        "name": "bold",
+        "value": "#0094D5"
+    },
+    {
+        "name": "regular (default)",
+        "value": "#33A9DD"
+    },
+    {
+        "name": "light",
+        "value": "#B3DFF2"
+    },
+    {
+        "name": "thin",
+        "value": "#E6F4FB"
+    }
+]
diff --git a/apps/nt-headless-ui/stories/colors/info/info.mdx b/apps/nt-headless-ui/stories/colors/info/info.mdx
new file mode 100644
index 0000000..18685de
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/info/info.mdx
@@ -0,0 +1,22 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+import colors from './colors.json'
+
+<Meta title="Colors/Info" />
+
+<ColorPalette>
+    {colors.map((color) => (
+        <ColorItem
+            key={color.title}
+            title={color.name}
+            colors={{ [color.name]: color.value }}
+        />
+    ))}
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shades-primary/shades-primary.mdx b/apps/nt-headless-ui/stories/colors/shades/primary.mdx
similarity index 78%
rename from apps/nt-headless-ui/stories/colors/shades-primary/shades-primary.mdx
rename to apps/nt-headless-ui/stories/colors/shades/primary.mdx
index df3490b..c64444c 100644
--- a/apps/nt-headless-ui/stories/colors/shades-primary/shades-primary.mdx
+++ b/apps/nt-headless-ui/stories/colors/shades/primary.mdx
@@ -7,12 +7,11 @@ import {
     Story,
 } from '@storybook/blocks'
 
-<Meta title="Color/Shades primary" />
+<Meta title="colors/Shades primary" />
 
 <ColorPalette>
     <ColorItem
-        title="Shades primary"
-        subtitle="Shades of primary color 190 to 100 default is 100"
+        title="190-100"
         colors={{
             190: '#150003',
             180: '#2B0006',
@@ -27,8 +26,7 @@ import {
         }}
     />
     <ColorItem
-        title="Shades primary"
-        subtitle="Shades of primary color 90 to 10"
+        title="90-10"
         colors={{
             90: '#DA1A33',
             80: '#DE3349',
diff --git a/apps/nt-headless-ui/stories/colors/shades/secondary-1.mdx b/apps/nt-headless-ui/stories/colors/shades/secondary-1.mdx
new file mode 100644
index 0000000..67b31e5
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shades/secondary-1.mdx
@@ -0,0 +1,42 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+<Meta title="Colors/Shades secondary 1" />
+
+<ColorPalette>
+    <ColorItem
+        title="190-100"
+        colors={{
+            190: '#0B030C',
+            180: '#150618',
+            170: '#200925',
+            160: '#2A0C31',
+            150: '#35103D',
+            140: '#401349',
+            130: '#4A1655',
+            120: '#551962',
+            110: '#5F1C6E',
+            100: '#6A1F7A',
+        }}
+    />
+    <ColorItem
+        title="90-10"
+        colors={{
+            90: '#793587',
+            80: '#884C95',
+            70: '#9762A2',
+            60: '#A679AF',
+            50: '#B58FBD',
+            40: '#C3A5CA',
+            30: '#D2BCD7',
+            20: '#E1D2E4',
+            10: '#F0E9F2',
+        }}
+    />
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shades/secondary-2.mdx b/apps/nt-headless-ui/stories/colors/shades/secondary-2.mdx
new file mode 100644
index 0000000..632963e
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shades/secondary-2.mdx
@@ -0,0 +1,29 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+<Meta title="Colors/Shades secondary 2" />
+
+<ColorPalette>
+    <ColorItem
+        title="100-9"
+        colors={{
+            100: '#0094D5',
+            90: '#1A9FD9',
+            80: '#33A9DD',
+            70: '#4DB4E2',
+            60: '#66BFE6',
+            50: '#80CAEA',
+            40: '#99D4EE',
+            30: '#B3DFF2',
+            20: '#CCEAF7',
+            10: '#E6F4FB',
+            9: '#F0F5FE',
+        }}
+    />
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shades/secondary-3.mdx b/apps/nt-headless-ui/stories/colors/shades/secondary-3.mdx
new file mode 100644
index 0000000..2a959bb
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shades/secondary-3.mdx
@@ -0,0 +1,28 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+<Meta title="Colors/Shades secondary 3" />
+
+<ColorPalette>
+    <ColorItem
+        title="100-10"
+        colors={{
+            100: '#E31C79',
+            90: '#E63386',
+            80: '#E94994',
+            70: '#EB60A1',
+            60: '#EE77AF',
+            50: '#F18EBC',
+            40: '#F4A4C9',
+            30: '#F7BBD7',
+            20: '#F9D2E4',
+            10: '#FCE8F2',
+        }}
+    />
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shades/secondary-4.mdx b/apps/nt-headless-ui/stories/colors/shades/secondary-4.mdx
new file mode 100644
index 0000000..465651c
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shades/secondary-4.mdx
@@ -0,0 +1,28 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+<Meta title="Colors/Shades secondary 4" />
+
+<ColorPalette>
+    <ColorItem
+        title="100-10"
+        colors={{
+            100: '#F4AD33',
+            90: '#F5B547',
+            80: '#F6BD5C',
+            70: '#F7C670',
+            60: '#F8CE85',
+            50: '#FAD699',
+            40: '#FBDEAD',
+            30: '#FCE6C2',
+            20: '#FDEFD6',
+            10: '#FEF7EB',
+        }}
+    />
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shades/shades-neutral.mdx b/apps/nt-headless-ui/stories/colors/shades/shades-neutral.mdx
new file mode 100644
index 0000000..fc09b10
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shades/shades-neutral.mdx
@@ -0,0 +1,29 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+<Meta title="Colors/Shades neutral" />
+
+<ColorPalette>
+    <ColorItem
+        title="100-10"
+        colors={{
+            100: '#28292B',
+            90: '#3E3E40',
+            80: '#535455',
+            70: '#69696B',
+            60: '#7E7F80',
+            50: '#949495',
+            40: '#A9A9AA',
+            30: '#BFBFBF',
+            20: '#D4D4D5',
+            10: '#EAEAEA',
+            9: '#F6F6F6',
+        }}
+    />
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/shadow/shadow.mdx b/apps/nt-headless-ui/stories/colors/shadow/shadow.mdx
new file mode 100644
index 0000000..b959df6
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/shadow/shadow.mdx
@@ -0,0 +1,24 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+import { boxShadow } from '../../../../nt-stylesheet/themes/colors.ts'
+
+<Meta title="Colors/Shadow" />
+
+<ColorPalette>
+    {Object.entries(boxShadow)
+        .map(([name, value]) => ({ name, value }))
+        .map((color) => (
+            <ColorItem
+                key={color.title}
+                title={color.name}
+                colors={{ [color.name]: color.value }}
+            />
+        ))}
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/success/colors.json b/apps/nt-headless-ui/stories/colors/success/colors.json
new file mode 100644
index 0000000..f5a17bb
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/success/colors.json
@@ -0,0 +1,18 @@
+[
+    {
+        "name": "bold",
+        "value": "#359000"
+    },
+    {
+        "name": "regular (default)",
+        "value": "#6CD430"
+    },
+    {
+        "name": "light",
+        "value": "#ABE38B"
+    },
+    {
+        "name": "thin",
+        "value": "#E4FFD5"
+    }
+]
diff --git a/apps/nt-headless-ui/stories/colors/success/success.mdx b/apps/nt-headless-ui/stories/colors/success/success.mdx
new file mode 100644
index 0000000..8cff269
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/success/success.mdx
@@ -0,0 +1,22 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+import colors from './colors.json'
+
+<Meta title="Colors/Success" />
+
+<ColorPalette>
+    {colors.map((color) => (
+        <ColorItem
+            key={color.title}
+            title={color.name}
+            colors={{ [color.name]: color.value }}
+        />
+    ))}
+</ColorPalette>
diff --git a/apps/nt-headless-ui/stories/colors/warning/colors.json b/apps/nt-headless-ui/stories/colors/warning/colors.json
new file mode 100644
index 0000000..2e76c73
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/warning/colors.json
@@ -0,0 +1,18 @@
+[
+    {
+        "name": "bold",
+        "value": "#DF7700"
+    },
+    {
+        "name": "regular (default)",
+        "value": "#FFB92E"
+    },
+    {
+        "name": "light",
+        "value": "#FED496"
+    },
+    {
+        "name": "thin",
+        "value": "#FFF0DA"
+    }
+]
diff --git a/apps/nt-headless-ui/stories/colors/warning/warning.mdx b/apps/nt-headless-ui/stories/colors/warning/warning.mdx
new file mode 100644
index 0000000..8823f48
--- /dev/null
+++ b/apps/nt-headless-ui/stories/colors/warning/warning.mdx
@@ -0,0 +1,22 @@
+import { Markdown } from '@storybook/blocks'
+import {
+    Canvas,
+    ColorItem,
+    ColorPalette,
+    Meta,
+    Story,
+} from '@storybook/blocks'
+
+import colors from './colors.json'
+
+<Meta title="Colors/Warning" />
+
+<ColorPalette>
+    {colors.map((color) => (
+        <ColorItem
+            key={color.title}
+            title={color.name}
+            colors={{ [color.name]: color.value }}
+        />
+    ))}
+</ColorPalette>