diff --git a/doc/theming/styled/ReservedKeysDoc.vue b/doc/theming/styled/ReservedKeysDoc.vue
new file mode 100644
index 000000000..7fac1b0af
--- /dev/null
+++ b/doc/theming/styled/ReservedKeysDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Following keys are reserved in the preset scheme and cannot be used as a token name; <i>primitive</i>, <i>semantic</i>, <i>components</i>, <i>directives</i>, <i>colorscheme</i>, <i>light</i>, <i>dark</i>, <i>common</i>, <i>root</i>,
+            <i>states</i>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/pages/theming/styled/index.vue b/pages/theming/styled/index.vue
index 7c5727edf..232ba2dce 100755
--- a/pages/theming/styled/index.vue
+++ b/pages/theming/styled/index.vue
@@ -22,6 +22,7 @@
 import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
 import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
+import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
 import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
@@ -83,6 +84,11 @@ export default {
                     label: 'Case Style',
                     component: CaseStyleDoc
                 },
+                {
+                    id: 'reserved',
+                    label: 'Reserved Keys',
+                    component: ReservedKeysDoc
+                },
                 {
                     id: 'customization',
                     label: 'Customization',