diff --git a/.changeset/five-tables-smile.md b/.changeset/five-tables-smile.md
new file mode 100644
index 00000000..e8687ae0
--- /dev/null
+++ b/.changeset/five-tables-smile.md
@@ -0,0 +1,6 @@
+---
+'@example/ui-playground': patch
+'@genseki/react': patch
+---
+
+Revamp new design system and design token for Genseki.
diff --git a/examples/erp/src/app/(admin)/admin/tiptap-style.css b/examples/erp/src/app/(admin)/admin/tiptap-style.css
index d9db2492..dadb6917 100644
--- a/examples/erp/src/app/(admin)/admin/tiptap-style.css
+++ b/examples/erp/src/app/(admin)/admin/tiptap-style.css
@@ -278,7 +278,7 @@
           }
 
           .tiptap-image-upload-subtext {
-            color: var(--color-text-trivial);
+            color: var(--color-text-secondary);
           }
         }
       }
diff --git a/examples/ui-playground/src/app/playground/_components/card.tsx b/examples/ui-playground/src/app/playground/_components/card.tsx
index 9808b718..2a8c6f41 100644
--- a/examples/ui-playground/src/app/playground/_components/card.tsx
+++ b/examples/ui-playground/src/app/playground/_components/card.tsx
@@ -18,7 +18,7 @@ export const PlaygroundCard = ({
       <div className="border-border flex w-full flex-col gap-y-4 border-b px-4 py-6">
         <div className="flex items-center gap-x-2">
           <div className="rounded-md bg-blue-500 p-2">
-            <BaseIcon icon={StarIcon} size="sm" weight="duotone" className="text-white" />
+            <BaseIcon icon={StarIcon} size="sm" weight="duotone" className="text-text-inverse" />
           </div>
           <Typography type="caption" weight="medium" className="text-blue-500">
             {categoryTitle}
diff --git a/examples/ui-playground/src/app/playground/_components/wrapper.tsx b/examples/ui-playground/src/app/playground/_components/wrapper.tsx
index 49dd1241..310e7703 100644
--- a/examples/ui-playground/src/app/playground/_components/wrapper.tsx
+++ b/examples/ui-playground/src/app/playground/_components/wrapper.tsx
@@ -3,7 +3,7 @@ import { Typography } from '@genseki/react'
 export const Wrapper = ({ children, title }: { children: React.ReactNode; title: string }) => {
   return (
     <div className="flex flex-col space-y-6 p-8">
-      <Typography type="h4" weight="semibold" className="text-text-nontrivial">
+      <Typography type="h4" weight="semibold" className="text-text-primary">
         {title}
       </Typography>
       {children}
diff --git a/examples/ui-playground/src/app/playground/page.tsx b/examples/ui-playground/src/app/playground/page.tsx
index 59f2cf72..a2a8f38e 100644
--- a/examples/ui-playground/src/app/playground/page.tsx
+++ b/examples/ui-playground/src/app/playground/page.tsx
@@ -316,9 +316,10 @@ export default function UIPlayground() {
 
   return (
     <div className="bg-white pb-24 relative dark:bg-black">
+      <div className="bg-warning text-warning-fg">xxxx</div>
       <div className="fixed top-6 right-6 z-50">
         <Button
-          variant={theme === 'dark' ? 'secondary' : 'primary'}
+          variant={'secondary'}
           size="md"
           onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
         >
@@ -332,10 +333,9 @@ export default function UIPlayground() {
               Background: --color-bg | Foreground: --color-fg
             </Typography>
           </div>
-          <div className="bg-primary border-primary-emphasis rounded-sm border px-8 py-4">
+          <div className="bg-primary border-primary rounded-sm border px-8 py-4">
             <Typography type="body" weight="normal" className="text-primary-fg">
-              Background: --color-primary | Foreground: --color-primary-fg | border:
-              --color-primary-emphasis
+              Background: --color-primary | Foreground: --color-primary-fg | border: --color-primary
             </Typography>
           </div>
           <div className="bg-secondary border-border rounded-sm border px-8 py-4">
@@ -1093,13 +1093,22 @@ export default function UIPlayground() {
                 isDisabled
                 placeholder="Data"
               />
+              <TextField
+                isRequired
+                type="text"
+                label="Something label and small textfield"
+                description="This is a helper text"
+                prefix={<BaseIcon icon={PlusCircleIcon} size="sm" />}
+                suffix={<BaseIcon icon={PlusCircleIcon} size="sm" />}
+                size="xs"
+              />
               <TextField
                 isRequired
                 type="password"
-                label="Package name"
+                label="Some large textfield"
                 isPending
                 description="This is a helper text"
-                size="md"
+                size="lg"
               />
               <TextField
                 isRequired
@@ -1188,9 +1197,63 @@ export default function UIPlayground() {
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
-                TESTER
+                Primary
+              </Button>
+              <Button
+                variant="secondary"
+                isDisabled
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Secondary
+              </Button>
+              <Button
+                variant="tertiary"
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Tertiary
+              </Button>
+              <Button
+                variant="naked"
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Naked
+              </Button>
+              <Button
+                variant="outline"
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Outline
+              </Button>
+              <Button
+                variant="ghost"
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Ghost
               </Button>
               <Button
+                variant="destruction"
+                leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
+                size="md"
+              >
+                Destruction
+              </Button>
+            </div>
+          </PlaygroundCard>
+          <PlaygroundCard title="Medium size (md) (disabled)" categoryTitle="Button">
+            <div className="flex w-full flex-col items-start gap-y-3">
+              <Button
+                isDisabled
                 variant="primary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1199,6 +1262,7 @@ export default function UIPlayground() {
                 Primary
               </Button>
               <Button
+                isDisabled
                 variant="secondary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1207,6 +1271,7 @@ export default function UIPlayground() {
                 Secondary
               </Button>
               <Button
+                isDisabled
                 variant="tertiary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1215,6 +1280,7 @@ export default function UIPlayground() {
                 Tertiary
               </Button>
               <Button
+                isDisabled
                 variant="naked"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1223,6 +1289,7 @@ export default function UIPlayground() {
                 Naked
               </Button>
               <Button
+                isDisabled
                 variant="outline"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1231,6 +1298,7 @@ export default function UIPlayground() {
                 Outline
               </Button>
               <Button
+                isDisabled
                 variant="ghost"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1239,6 +1307,7 @@ export default function UIPlayground() {
                 Ghost
               </Button>
               <Button
+                isDisabled
                 variant="destruction"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1447,31 +1516,6 @@ export default function UIPlayground() {
               </Button>
             </div>
           </PlaygroundCard>
-          <PlaygroundCard title="Double extra small size (xxs)" categoryTitle="Button">
-            <div className="flex w-full flex-col items-start gap-y-3">
-              <Button variant="primary" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="secondary" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="tertiary" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="naked" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="outline" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="ghost" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-              <Button variant="destruction" size="xxs">
-                <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </Button>
-            </div>
-          </PlaygroundCard>
         </div>
       </Wrapper>
       <Wrapper title="Base icon">
@@ -1584,17 +1628,13 @@ export default function UIPlayground() {
           </PlaygroundCard>
           <PlaygroundCard title="Large size (lg)" categoryTitle="Checkbox">
             <CheckboxGroup>
-              <Checkbox value="x" size="lg">
-                X
-              </Checkbox>
               <Checkbox
+                size="lg"
                 value="y"
                 label="Remember me"
                 description="Save my login details for next time"
-              ></Checkbox>
-              <Checkbox isDisabled value="z">
-                Z
-              </Checkbox>
+              />
+              <Checkbox isDisabled value="z" label="Hello world" size="lg" />
             </CheckboxGroup>
           </PlaygroundCard>
         </div>
@@ -1690,7 +1730,7 @@ export default function UIPlayground() {
 
       <Wrapper title="Annotation">
         <Annotation>Annotation</Annotation>
-        <Annotation className="bg-red-50 text-red-700">Annotation</Annotation>
+        <Annotation className="bg-surface-incorrect text-text-incorrect">Annotation</Annotation>
       </Wrapper>
 
       <Wrapper title="Tools Tip group">
diff --git a/examples/ui-playground/src/app/playground/tiptap-style.css b/examples/ui-playground/src/app/playground/tiptap-style.css
index addfc9c0..f2e4201c 100644
--- a/examples/ui-playground/src/app/playground/tiptap-style.css
+++ b/examples/ui-playground/src/app/playground/tiptap-style.css
@@ -281,7 +281,7 @@
           }
 
           .tiptap-image-upload-subtext {
-            color: var(--color-text-trivial);
+            color: var(--color-text-secondary);
           }
         }
       }
diff --git a/packages/react/src/react/components/compound/auto-field/index.tsx b/packages/react/src/react/components/compound/auto-field/index.tsx
index e813b095..de30d865 100644
--- a/packages/react/src/react/components/compound/auto-field/index.tsx
+++ b/packages/react/src/react/components/compound/auto-field/index.tsx
@@ -25,12 +25,14 @@ import {
   SelectOption,
   type SelectProps,
   SelectTrigger,
+  Separator,
   Switch,
   type SwitchProps,
   TextField,
   type TextFieldProps,
   TimeField,
   type TimeFieldProps,
+  Typography,
   useFormItemController,
 } from '@genseki/react'
 
@@ -251,7 +253,7 @@ export function AutoSelectField(props: AutoSelectField) {
     >
       {props.label && (
         <Label>
-          {props.label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {props.label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <SelectTrigger className="h-auto" isPending={query.isLoading} />
@@ -609,14 +611,25 @@ export function AutoOneRelationshipField(props: AutoRelationshipFieldProps) {
   switch (fieldShape.type) {
     case 'connect':
       return (
-        <div className="p-6 bg-muted rounded-lg flex flex-col gap-y-4 border border-red-500">
-          <div>{fieldShape.label}</div>
-          {connectComponent(`${props.name}.connect`, fieldShape.options)}
+        <div className="rounded-md border border-border bg-surface-tertiary overflow-hidden">
+          {fieldShape.label && (
+            <>
+              <Typography
+                type="caption"
+                weight="normal"
+                className="px-6 py-2 text-text-brand bg-surface-brand-soft-1 w-full"
+              >
+                {fieldShape.label}
+              </Typography>
+              <Separator className="border-border-brand" />
+            </>
+          )}
+          <div className="p-6">{connectComponent(`${props.name}.connect`, fieldShape.options)}</div>
         </div>
       )
     case 'create':
       return (
-        <div className="p-6 bg-muted rounded-lg flex flex-col gap-y-4 border border-red-500">
+        <div className="">
           <div>{fieldShape.label}</div>
           {createComponent}
         </div>
@@ -625,7 +638,7 @@ export function AutoOneRelationshipField(props: AutoRelationshipFieldProps) {
       return (
         <div className="p-6 bg-muted rounded-lg flex flex-col gap-y-4 border border-red-500">
           {connectComponent(`${props.name}.connect`, fieldShape.options)}
-          <div className="flex flex-col gap-y-2 bg-yellow-500 p-4 rounded-lg">
+          <div className="flex flex-col gap-y-2 bg-surface-accent-hover p-4 rounded-lg">
             {createComponent}
           </div>
         </div>
@@ -700,37 +713,57 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
   switch (fieldShape.type) {
     case 'connect':
       return (
-        <div className="border border-red-500 p-6">
-          {fieldArray.fields.map((fieldValue, index) => (
-            <div key={fieldValue.id} className="p-6 bg-muted rounded-lg flex flex-col gap-y-4">
-              <div>
-                {fieldShape.label} #{index + 1}
-              </div>
-              {connectComponent(`${props.name}.${index}.connect`, fieldShape.options)}
+        <div className="rounded-md border border-input p-6 grid grid-cols-1 gap-y-6">
+          {!!fieldArray.fields.length && (
+            <div className="flex flex-col gap-y-6">
+              {fieldArray.fields.map((fieldValue, index) => (
+                <div key={fieldValue.id} className="p-6 bg-muted rounded-lg flex flex-col gap-y-4">
+                  <div>
+                    {fieldShape.label} #{index + 1}
+                  </div>
+                  {connectComponent(`${props.name}.${index}.connect`, fieldShape.options)}
+                </div>
+              ))}
             </div>
-          ))}
-          <Button type="button" variant="primary" size="sm" onClick={() => fieldArray.append({})}>
+          )}
+          <Button
+            type="button"
+            variant="primary"
+            size="sm"
+            onClick={() => fieldArray.append({})}
+            className="justify-self-start"
+          >
             Add
           </Button>
         </div>
       )
     case 'create':
       return (
-        <div className="border border-red-500 p-6">
-          {fieldArray.fields.map((fieldValue, index) => (
-            <div key={fieldValue.id} className="p-6 bg-muted rounded-lg flex flex-col gap-y-4">
-              <div>
-                {fieldShape.label} #{index + 1}
-              </div>
-              {createComponent(`${props.name}.${index}.create`)}
+        <div className="rounded-md border border-input p-6 grid grid-cols-1 gap-y-6">
+          {!!fieldArray.fields.length && (
+            <div className="flex flex-col space-y-6">
+              {fieldArray.fields.map((fieldValue, index) => (
+                <div
+                  key={fieldValue.id}
+                  className="p-6 bg-surface-tertiary rounded-sm flex flex-col gap-y-4"
+                >
+                  <Typography type="caption" weight="normal">
+                    {fieldShape.label} #{index + 1}
+                  </Typography>
+                  <div className="flex flex-col">
+                    {createComponent(`${props.name}.${index}.create`)}
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
+          )}
           <Button
             type="button"
-            variant="primary"
+            variant="outline"
             size="sm"
             isDisabled={disabled}
             onClick={() => fieldArray.append({})}
+            className="justify-self-start"
           >
             Add
           </Button>
@@ -739,7 +772,7 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
 
     case 'connectOrCreate':
       return (
-        <div className="border border-red-500 p-6">
+        <div className="rounded-md border border-input shadow-sm p-6">
           {fieldArray.fields.map((fieldValue, index) => (
             <div key={fieldValue.id} className="p-6 bg-muted rounded-lg flex flex-col gap-y-4">
               <div>
diff --git a/packages/react/src/react/components/compound/collection-card.tsx b/packages/react/src/react/components/compound/collection-card.tsx
index 1797eff0..6b964879 100644
--- a/packages/react/src/react/components/compound/collection-card.tsx
+++ b/packages/react/src/react/components/compound/collection-card.tsx
@@ -31,7 +31,7 @@ export const CollectionCard = ({
       </div>
       <div className="border-secondary relative flex items-center justify-between overflow-hidden border-b px-8 pb-4 pt-14">
         <div className="absolute -left-2 -top-1/2 aspect-square h-36 [background-image:radial-gradient(circle,--alpha(var(--color-fg)/25%)_2px,--alpha(var(--color-fg)/25%)_2px,transparent_2px)] [background-repeat:repeat] [background-size:8px_8px] [mask-image:radial-gradient(circle,black,transparent_80%)]" />
-        <Typography type="h4" weight="semibold" className="text-text-nontrivial">
+        <Typography type="h4" weight="semibold" className="text-text-primary">
           {collectionName}
         </Typography>
         <div className="flex items-center gap-x-2">
@@ -46,7 +46,7 @@ export const CollectionCard = ({
           content={description}
           type="body"
           weight="normal"
-          className="text-text-trivial line-clamp-3"
+          className="text-text-secondary line-clamp-3"
         >
           {description}
         </Typography>
diff --git a/packages/react/src/react/components/compound/collection-sidebar/index.tsx b/packages/react/src/react/components/compound/collection-sidebar/index.tsx
index 34b9d541..5acb3636 100644
--- a/packages/react/src/react/components/compound/collection-sidebar/index.tsx
+++ b/packages/react/src/react/components/compound/collection-sidebar/index.tsx
@@ -57,10 +57,10 @@ export function AppSidebar(props: AppSidebarProps) {
             <BaseIcon icon={MoonStarsIcon} size="lg" weight="duotone" className="text-primary" />
           </div>
           <div className="flex flex-col group-data-[sidebar-state=collapsed]/sidebar-container:hidden group-data-[sidebar-state=collapsed]/sidebar-container:translate-x-full">
-            <Typography type="body" weight="semibold" className="text-text-nontrivial">
+            <Typography type="body" weight="semibold" className="text-text-primary">
               {props.title}
             </Typography>
-            <Typography type="label" weight="medium" className="text-text-trivial">
+            <Typography type="label" weight="medium" className="text-text-secondary">
               {props.version}
             </Typography>
           </div>
@@ -72,7 +72,7 @@ export function AppSidebar(props: AppSidebarProps) {
             <SidebarDisclosure id={1}>
               <SidebarDisclosureTrigger className="in-data-[sidebar-state=collapsed]:rounded-none rounded-md">
                 <BaseIcon icon={DatabaseIcon} size="sm" weight="duotone" className="size-8!" />
-                <SidebarLabel className="text-text-body text-sm">Collections</SidebarLabel>
+                <SidebarLabel className="text-text-primary text-sm">Collections</SidebarLabel>
               </SidebarDisclosureTrigger>
               <SidebarDisclosurePanel>
                 <SidebarBuilder pathname={props.pathname} {...props.sidebar} />
diff --git a/packages/react/src/react/components/compound/collection-sidebar/sections/navigations-section.tsx b/packages/react/src/react/components/compound/collection-sidebar/sections/navigations-section.tsx
index eac369f1..1708f08a 100644
--- a/packages/react/src/react/components/compound/collection-sidebar/sections/navigations-section.tsx
+++ b/packages/react/src/react/components/compound/collection-sidebar/sections/navigations-section.tsx
@@ -19,7 +19,7 @@ export const NavigationSection = ({ id }: { id: number }) => {
     <SidebarDisclosure id={id}>
       <SidebarDisclosureTrigger className="rounded-md`!` in-data-[sidebar-state=collapsed]:rounded-none!">
         <BaseIcon icon={CompassIcon} size="sm" weight="duotone" className="size-8!" />
-        <SidebarLabel className="text-text-body text-sm">Navigations</SidebarLabel>
+        <SidebarLabel className="text-text-primary text-sm">Navigations</SidebarLabel>
       </SidebarDisclosureTrigger>
       <SidebarDisclosurePanel>
         <SidebarItem
diff --git a/packages/react/src/react/components/compound/collection-sidebar/sections/plugin-section.tsx b/packages/react/src/react/components/compound/collection-sidebar/sections/plugin-section.tsx
index 9da5562d..8f0a1283 100644
--- a/packages/react/src/react/components/compound/collection-sidebar/sections/plugin-section.tsx
+++ b/packages/react/src/react/components/compound/collection-sidebar/sections/plugin-section.tsx
@@ -17,7 +17,7 @@ export const PluginSection = ({ id }: { id: number }) => {
     <SidebarDisclosure id={id} isDisabled={plugins.length === 0}>
       <SidebarDisclosureTrigger className="rounded-md! in-data-[sidebar-state=collapsed]:rounded-none!">
         <BaseIcon icon={PlugIcon} size="sm" weight="duotone" className="size-8!" />
-        <SidebarLabel className="text-text-body text-sm">Plugins</SidebarLabel>
+        <SidebarLabel className="text-text-primary text-sm">Plugins</SidebarLabel>
       </SidebarDisclosureTrigger>
       <SidebarDisclosurePanel>
         <SidebarItem href="#" tooltip="Tickets">
diff --git a/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx b/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx
index b7daae37..3fe101dd 100644
--- a/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx
+++ b/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx
@@ -24,7 +24,7 @@ export const RichTextEditor = (props: RichTextEditorProps) => {
     <div className="flex flex-col gap-y-4" data-invalid={true}>
       {props.label && (
         <Label>
-          {props.label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {props.label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <FieldGroup
diff --git a/packages/react/src/react/components/compound/file-upload-field.tsx b/packages/react/src/react/components/compound/file-upload-field.tsx
index 7f0d4bca..154d2500 100644
--- a/packages/react/src/react/components/compound/file-upload-field.tsx
+++ b/packages/react/src/react/components/compound/file-upload-field.tsx
@@ -420,7 +420,7 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
     <div className="group flex flex-col gap-y-4">
       {props.label && (
         <Label htmlFor={props.name}>
-          {props.label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {props.label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       {fileKey ? (
@@ -474,7 +474,7 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
                       <span>{hintText}</span>
                     </Typography>
 
-                    {/* <Typography type="caption" weight="normal" className="text-text-trivial">
+                    {/* <Typography type="caption" weight="normal" className="text-text-secondary">
                   Maximum file size {readableMaxSize}.
                 </Typography> */}
                   </div>
diff --git a/packages/react/src/react/components/compound/reorder-group/index.tsx b/packages/react/src/react/components/compound/reorder-group/index.tsx
index 0bd20cfc..74d431f4 100644
--- a/packages/react/src/react/components/compound/reorder-group/index.tsx
+++ b/packages/react/src/react/components/compound/reorder-group/index.tsx
@@ -100,7 +100,7 @@ const SortableItem = ({ id, children, title, order }: SortableItemProps) => {
     <div ref={setNodeRef} style={style}>
       <div className="flex flex-col w-full">
         <div
-          className={`p-6 w-full border border-bluegray-300 bg-bluegray-100 rounded-t-lg overflow-hidden flex items-center gap-12 justify-between ${
+          className={`p-6 w-full border border-bluegray-300 bg-surface-primary-hover rounded-t-lg overflow-hidden flex items-center gap-12 justify-between ${
             isShowContent ? 'rounded-b-none' : 'rounded-b-lg'
           }`}
         >
@@ -111,10 +111,10 @@ const SortableItem = ({ id, children, title, order }: SortableItemProps) => {
               {...attributes}
               {...listeners}
             >
-              <BaseIcon icon={DotsSixIcon} size="sm" className="rotate-90 text-bluegray-600" />
+              <BaseIcon icon={DotsSixIcon} size="sm" className="rotate-90 text-text-secondary" />
             </div>
 
-            <Typography type="body" weight="semibold" className="text-bluegray-600">
+            <Typography type="body" weight="semibold" className="text-text-secondary">
               {order} {title}
             </Typography>
           </div>
diff --git a/packages/react/src/react/components/primitives/badge.tsx b/packages/react/src/react/components/primitives/badge.tsx
index 5576a863..d8f44f40 100644
--- a/packages/react/src/react/components/primitives/badge.tsx
+++ b/packages/react/src/react/components/primitives/badge.tsx
@@ -1,11 +1,11 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 
 const badgeIntents = {
-  gray: 'bg-white border-gray-300 text-bluegray-600',
-  brand: 'bg-pumpkin-50 text-text-accent border-pumpkin-300',
-  blue: 'bg-ocean-50 text-ocean-500 border-ocean-300',
-  red: 'bg-red-50 text-red-500 border-red-300',
-  yellow: 'bg-yellow-50 text-yellow-500 border-yellow-300',
+  gray: 'bg-white border-gray-300 text-text-secondary',
+  brand: 'bg-pumpkin-50 text-text-brand border-pumpkin-300',
+  blue: 'bg-surface-info text-ocean-500 border-ocean-300',
+  red: 'bg-surface-incorrect text-red-500 border-red-300',
+  yellow: 'bg-surface-accent text-yellow-500 border-yellow-300',
   green: 'bg-palm-50 text-palm-500 border-palm-300',
   purple: 'bg-purple-50 text-purple-500 border-purple-300',
   cyan: 'bg-cyan-50 text-cyan-500 border-cyan-300',
diff --git a/packages/react/src/react/components/primitives/base-icon.tsx b/packages/react/src/react/components/primitives/base-icon.tsx
index e1226595..b2d7d39a 100644
--- a/packages/react/src/react/components/primitives/base-icon.tsx
+++ b/packages/react/src/react/components/primitives/base-icon.tsx
@@ -5,7 +5,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import { cn } from '../../utils/cn'
 
 const iconVariants = tv({
-  base: 'text-text-body',
+  base: 'text-icon-secondary',
   variants: {
     size: {
       xl: 'size-15',
diff --git a/packages/react/src/react/components/primitives/button-group.tsx b/packages/react/src/react/components/primitives/button-group.tsx
index a45b48fd..eb6e47b2 100644
--- a/packages/react/src/react/components/primitives/button-group.tsx
+++ b/packages/react/src/react/components/primitives/button-group.tsx
@@ -60,7 +60,7 @@ interface ButtonGroupItemProps extends ToggleButtonProps {}
 
 const ButtonGroupItemStyles = tv({
   base: [
-    'bg-bluegray-100 cursor-pointer dark:bg-bluegray-700',
+    'bg-surface-primary-hover cursor-pointer dark:bg-bluegray-700',
     'text-bluegray-800 px-4 py-2 dark:text-bluegray-200',
     'relative isolate inline-flex flex-row items-center font-medium outline-hidden',
   ],
@@ -76,12 +76,12 @@ const ButtonGroupItemStyles = tv({
     },
     size: {
       sm: [
-        'text-base',
+        'text-sm',
         '*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4',
         '*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4',
       ],
       md: [
-        'text-lg',
+        'text-base',
         '*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4',
         '*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4',
       ],
diff --git a/packages/react/src/react/components/primitives/button.tsx b/packages/react/src/react/components/primitives/button.tsx
index a20798a8..288cb0e4 100644
--- a/packages/react/src/react/components/primitives/button.tsx
+++ b/packages/react/src/react/components/primitives/button.tsx
@@ -7,7 +7,7 @@ import {
   Link,
 } from 'react-aria-components'
 
-import { Spinner } from '@phosphor-icons/react'
+import { Spinner, SpinnerIcon } from '@phosphor-icons/react'
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import { BaseIcon } from './base-icon'
@@ -18,35 +18,35 @@ const buttonVariants = tv({
   base: 'cursor-pointer flex items-center justify-center transition-all duration-200',
   variants: {
     variant: {
-      primary: `[&>*]:text-white text-white
-        shadow-[0_0_0_0.8px_var(--color-primary-emphasis),0_1px_3px_0_var(--color-primary),inset_0_1.5px_0_0_--alpha(var(--color-white)/20%)]
-        focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
+      primary: `[&>*]:text-text-inverse text-text-inverse
+        focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
       secondary: `
-        bg-pumpkin-50 hover:bg-pumpkin-100
-        [&>*]:text-accent text-accent
-        focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
-      tertiary: `bg-pumpkin-50 hover:bg-pumpkin-100
-        [&>*]:text-accent text-accent 
-        focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none border border-primary-emphasis`,
-      naked: `bg-white-normal hover:bg-bluegray-100 [&>*]:text-bluegray-600 text-bluegray-600 shadow-xs border-b border-stroke-trivial/10 
-      focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
-      outline: `bg-white-normal dark:bg-bluegray-800 hover:bg-bluegray-50 [&>*]:text-text-body text-text-body border border-bluegray-300 focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
+        bg-surface-button-secondary hover:bg-surface-button-secondary-hover disabled:bg-surface-button-secondary-disabled
+        [&>*]:text-text-brand text-text-brand
+        focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
+      tertiary: `bg-surface-button-tertiary hover:bg-surface-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled focus:outline-none
+        [&>*]:text-text-brand text-text-brand 
+        focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg border border-border-button-tertiary`,
+      naked: `bg-surface-button-naked hover:bg-surface-button-naked-hover disabled:bg-surface-button-naked-disabled focus:outline-none
+       [&>*]:text-text-secondary text-text-secondary shadow-xs border-b border-stroke-tertiary/10 
+      focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg`,
+      outline: `bg-surface-button-outline  hover:bg-surface-button-outline-hover disabled:bg-surface-button-outline-disabled focus:outline-none
+       [&>*]:text-text-secondary text-text-secondary border border-border-button-outline focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg`,
       ghost:
-        'bg-none [&>*]:text-bluegray-600 text-bluegray-600 hover:bg-bluegray-50 focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none',
+        'bg-none [&>*]:text-text-secondary text-text-secondary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none',
       vanish:
-        '[&>*]:text-secondary-fg text-secondary-fg focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none',
-      destruction: `[&>*]:text-white text-white bg-red-600 hover:bg-red-700
-        focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none`,
+        '[&>*]:text-secondary-fg text-secondary-fg focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none',
+      destruction: `[&>*]:text-text-inverse text-text-inverse bg-surface-button-destruction hover:bg-surface-button-destruction-hover disabled:bg-surface-button-destruction-disabled focus:outline-none
+        focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 focus-visible:ring-offset-bg `,
     },
     size: {
       'square-petite': 'size-14 p-0 rounded-md text-base font-medium',
-      md: 'p-6 gap-x-2 rounded-md text-base font-medium',
-      sm: 'p-4 gap-x-2 rounded-md text-sm font-medium',
-      xs: 'p-2 gap-x-1 rounded-sm text-sm font-medium',
-      xxs: 'p-1 gap-x-1 rounded-xs text-xs font-medium',
+      md: 'py-4 [&:has(>_*[data-slot="icon"]:only-child)]:p-4 px-6 gap-x-2 rounded-md text-base font-medium',
+      sm: 'py-3 [&:has(>_*[data-slot="icon"]:only-child)]:p-3 px-4 gap-x-2 rounded-md text-sm font-medium',
+      xs: 'py-1 [&:has(>_*[data-slot="icon"]:only-child)]:p-1 px-2 gap-x-1 rounded-sm text-sm font-medium',
     },
     isDisabled: {
-      true: 'cursor-not-allowed bg-accent-fg [&>*]:text-bluegray-300 text-bluegray-300 border-secondary shadow-none',
+      true: 'cursor-not-allowed [&>*]:text-bluegray-300 text-bluegray-300 border-secondary shadow-none',
       false: null,
     },
   },
@@ -90,6 +90,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <ButtonPrimitive
+        data-xxx="xxx"
         ref={ref}
         {...props}
         isDisabled={isDisabled || isPending}
@@ -109,7 +110,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             {props.leadingIcon}
             {typeof props.children === 'function' ? props.children(values) : props.children}
             {isPending ? (
-              <BaseIcon icon={Spinner} size="sm" className="animate-spin" />
+              <BaseIcon icon={SpinnerIcon} size="sm" className="animate-spin" />
             ) : (
               props.trailingIcon
             )}
diff --git a/packages/react/src/react/components/primitives/card.tsx b/packages/react/src/react/components/primitives/card.tsx
index 8d78f93a..e847c026 100644
--- a/packages/react/src/react/components/primitives/card.tsx
+++ b/packages/react/src/react/components/primitives/card.tsx
@@ -25,7 +25,7 @@ const Card: React.FC<CardProps> = ({ title, itemNumber, description, buttonTitle
       <BaseIcon
         icon={CubeIcon}
         size="md"
-        className="text-text-accent size-10 absolute top-0 left-8 -translate-y-1/2 z-[2] translate-x-1/2"
+        className="text-text-brand size-10 absolute top-0 left-8 -translate-y-1/2 z-[2] translate-x-1/2"
       />
       {/* Header */}
       <div className="flex justify-between items-center px-8 pb-4 pt-14 border-b border-bluegray-300 relative overflow-hidden">
@@ -36,22 +36,22 @@ const Card: React.FC<CardProps> = ({ title, itemNumber, description, buttonTitle
         <p className="text-lg font-semibold text-bluegray-800">{title}</p>
         {itemNumber && (
           <div className="flex items-center gap-2">
-            <BaseIcon icon={Folder} size="md" className="text-bluegray-600" />
-            <span className="text-sm text-bluegray-600">{itemNumber} items</span>
+            <BaseIcon icon={Folder} size="md" className="text-text-secondary" />
+            <span className="text-sm text-text-secondary">{itemNumber} items</span>
           </div>
         )}
       </div>
 
       <div className="px-8 pb-8 pt-6">
-        <p className="text-bluegray-600 leading-snug">{description}</p>
+        <p className="text-text-secondary leading-snug">{description}</p>
       </div>
 
       <button
         onClick={onClick}
-        className="w-full py-6 px-8 bg-gradient-to-b from-pumpkin-50 to-pumpkin-200 rounded-lg text-bluegray-600 font-medium flex items-center justify-end hover:from-pumpkin-100 hover:to-pumpkin-300 transition cursor-pointer gap-3"
+        className="w-full py-6 px-8 bg-gradient-to-b from-pumpkin-50 to-pumpkin-200 rounded-lg text-text-secondary font-medium flex items-center justify-end hover:from-pumpkin-100 hover:to-pumpkin-300 transition cursor-pointer gap-3"
       >
         <span>{buttonTitle ?? 'View'}</span>
-        <IconChevronLgRight fontSize={24} className="size-10 text-bluegray-600" />
+        <IconChevronLgRight fontSize={24} className="size-10 text-text-secondary" />
       </button>
     </div>
   )
diff --git a/packages/react/src/react/components/primitives/checkbox.tsx b/packages/react/src/react/components/primitives/checkbox.tsx
index 6bcbab74..45ce8bb0 100644
--- a/packages/react/src/react/components/primitives/checkbox.tsx
+++ b/packages/react/src/react/components/primitives/checkbox.tsx
@@ -94,12 +94,12 @@ const Checkbox = forwardRef(function Checkbox(
   const sizeClasses = {
     md: {
       box: 'size-8',
-      label: 'text-base font-medium',
+      label: 'text-base font-medium leading-[100%]',
       description: 'text-base',
     },
     lg: {
-      box: 'size-10',
-      label: 'text-lg font-medium',
+      box: 'size-12',
+      label: 'text-lg font-medium leading-[100%]',
       description: 'text-lg',
     },
   }
@@ -139,7 +139,7 @@ const Checkbox = forwardRef(function Checkbox(
                 {props.label ? (
                   <Label className={cn(props.description, sizeClasses[size].label)}>
                     {props.label}
-                    {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+                    {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
                   </Label>
                 ) : (
                   (props.children as React.ReactNode)
diff --git a/packages/react/src/react/components/primitives/color-field.tsx b/packages/react/src/react/components/primitives/color-field.tsx
index 2e0be01d..4d18405f 100644
--- a/packages/react/src/react/components/primitives/color-field.tsx
+++ b/packages/react/src/react/components/primitives/color-field.tsx
@@ -62,7 +62,7 @@ const ColorField = forwardRef<HTMLInputElement, ColorFieldProps>(
               data-slot="prefix"
               type="caption"
               weight="medium"
-              className="ml-2 text-text-trivial"
+              className="ml-2 text-text-secondary"
             >
               {prefix}
             </Typography>
@@ -90,7 +90,7 @@ const ColorField = forwardRef<HTMLInputElement, ColorFieldProps>(
               data-slot="suffix"
               type="caption"
               weight="medium"
-              className="text-text-trivial mr-2"
+              className="text-text-secondary mr-2"
             >
               {suffix}
             </Typography>
diff --git a/packages/react/src/react/components/primitives/date-field.tsx b/packages/react/src/react/components/primitives/date-field.tsx
index fb7fcf6c..9bf172c9 100644
--- a/packages/react/src/react/components/primitives/date-field.tsx
+++ b/packages/react/src/react/components/primitives/date-field.tsx
@@ -57,7 +57,7 @@ const DateField = <T extends DateValue>({
     >
       {label && (
         <Label>
-          {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <FieldGroup>
diff --git a/packages/react/src/react/components/primitives/date-picker.tsx b/packages/react/src/react/components/primitives/date-picker.tsx
index d1c99387..4c44f227 100644
--- a/packages/react/src/react/components/primitives/date-picker.tsx
+++ b/packages/react/src/react/components/primitives/date-picker.tsx
@@ -102,7 +102,7 @@ const DatePicker = <T extends DateValue>({
       >
         {label && (
           <Label>
-            {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+            {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
           </Label>
         )}
         <FieldGroup className="min-w-40">
diff --git a/packages/react/src/react/components/primitives/dropdown.tsx b/packages/react/src/react/components/primitives/dropdown.tsx
index ca0cf130..c78a727e 100644
--- a/packages/react/src/react/components/primitives/dropdown.tsx
+++ b/packages/react/src/react/components/primitives/dropdown.tsx
@@ -139,7 +139,7 @@ const DropdownItemDetails = forwardRef(function DropdownItemDetails(
       {description && (
         <Text
           slot={slot ?? 'description'}
-          className={twMerge('text-sm', classNames?.description)}
+          className={twMerge('text-sm text-text-secondary', classNames?.description)}
           {...restProps}
         >
           {description}
diff --git a/packages/react/src/react/components/primitives/field.tsx b/packages/react/src/react/components/primitives/field.tsx
index 5a24b217..5ce12f5f 100644
--- a/packages/react/src/react/components/primitives/field.tsx
+++ b/packages/react/src/react/components/primitives/field.tsx
@@ -141,7 +141,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       {...props}
       className={composeTailwindRenderProps(
         className,
-        'text-fg placeholder-text-body outline-hidden focus:outline-hidden w-full min-w-0 bg-transparent p-4 text-base [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden'
+        'text-text-primary placeholder-text-primary outline-hidden focus:outline-hidden w-full min-w-0 bg-transparent p-4 text-base [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden'
       )}
     />
   )
diff --git a/packages/react/src/react/components/primitives/form.tsx b/packages/react/src/react/components/primitives/form.tsx
index cee2ca65..e4c0d28c 100644
--- a/packages/react/src/react/components/primitives/form.tsx
+++ b/packages/react/src/react/components/primitives/form.tsx
@@ -96,7 +96,7 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
   ({ className, ...props }, ref) => {
     return (
       <FormItemProvider>
-        <div ref={ref} className={cn('space-y-spacing-4', className)} {...props} />
+        <div ref={ref} className={cn('', className)} {...props} />
       </FormItemProvider>
     )
   }
@@ -148,7 +148,7 @@ const FormDescription = React.forwardRef<
       ref={ref}
       id={formDescriptionId}
       className={cn(
-        'text-body-s font-regular text-input-text-helper peer-disabled:text-input-text-disabled',
+        'text-primary-s font-regular text-input-text-helper peer-disabled:text-input-text-disabled',
         className
       )}
       {...props}
@@ -194,7 +194,7 @@ export const FormRootMessage = React.forwardRef<
     <p
       ref={ref}
       className={cn(
-        'text-body-s font-regular text-input-text-error gap-spacing-8 flex items-center',
+        'text-primary-s font-regular text-input-text-error gap-spacing-8 flex items-center',
         className
       )}
       {...props}
diff --git a/packages/react/src/react/components/primitives/input-otp.tsx b/packages/react/src/react/components/primitives/input-otp.tsx
index 92f5e176..ba044973 100644
--- a/packages/react/src/react/components/primitives/input-otp.tsx
+++ b/packages/react/src/react/components/primitives/input-otp.tsx
@@ -22,7 +22,10 @@ const InputOTP = ({
       'flex items-center gap-2 has-disabled:opacity-50',
       containerClassName
     )}
-    className={twMerge('mt-auto h-[2.5rem] bg-red-500 disabled:cursor-not-allowed', className)}
+    className={twMerge(
+      'mt-auto h-[2.5rem] bg-surface-incorrect-hover disabled:cursor-not-allowed',
+      className
+    )}
     {...props}
   />
 )
diff --git a/packages/react/src/react/components/primitives/loader.tsx b/packages/react/src/react/components/primitives/loader.tsx
index b7586e25..ca19208a 100644
--- a/packages/react/src/react/components/primitives/loader.tsx
+++ b/packages/react/src/react/components/primitives/loader.tsx
@@ -14,22 +14,22 @@ const loaderStyles = tv({
   variants: {
     intent: {
       current: 'text-current',
-      primary: 'text-primary',
-      secondary: 'text-muted-fg',
-      success: 'text-success',
-      warning: 'text-warning',
-      danger: 'text-danger',
+      primary: 'text-text-brand',
+      secondary: 'text-text-secondary',
+      success: 'text-text-correct',
+      warning: 'text-text-accent',
+      danger: 'text-text-incorrect',
     },
     size: {
-      small: 'size-4',
-      medium: 'size-6',
-      large: 'size-8',
-      'extra-large': 'size-10',
+      small: 'size-6',
+      medium: 'size-8',
+      large: 'size-10',
+      'extra-large': 'size-12',
     },
   },
   defaultVariants: {
     intent: 'current',
-    size: 'small',
+    size: 'medium',
   },
 })
 
diff --git a/packages/react/src/react/components/primitives/modal.tsx b/packages/react/src/react/components/primitives/modal.tsx
index f9633512..cb857de5 100644
--- a/packages/react/src/react/components/primitives/modal.tsx
+++ b/packages/react/src/react/components/primitives/modal.tsx
@@ -184,7 +184,7 @@ const ModalTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
 
 const ModalDescription = forwardRef<HTMLDivElement, DialogDescriptionProps>(
   function ModalDescription(props, ref) {
-    return <DialogDescription ref={ref} className="text-bluegray-600" {...props} />
+    return <DialogDescription ref={ref} className="text-text-secondary" {...props} />
   }
 )
 
diff --git a/packages/react/src/react/components/primitives/multiple-select.tsx b/packages/react/src/react/components/primitives/multiple-select.tsx
index 1c8292c7..fdeba2a3 100644
--- a/packages/react/src/react/components/primitives/multiple-select.tsx
+++ b/packages/react/src/react/components/primitives/multiple-select.tsx
@@ -129,7 +129,7 @@ const MultipleSelect = <T extends object>({
         <>
           {props.label && (
             <Label onClick={() => inputRef.current?.focus()}>
-              {props.label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+              {props.label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
             </Label>
           )}
           <FieldGroup
diff --git a/packages/react/src/react/components/primitives/number-field.tsx b/packages/react/src/react/components/primitives/number-field.tsx
index 01923b6f..e1e8b033 100644
--- a/packages/react/src/react/components/primitives/number-field.tsx
+++ b/packages/react/src/react/components/primitives/number-field.tsx
@@ -70,7 +70,7 @@ const NumberField = ({
     >
       {label && (
         <Label>
-          {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <FieldGroup
diff --git a/packages/react/src/react/components/primitives/pagination.tsx b/packages/react/src/react/components/primitives/pagination.tsx
index e982d68c..de978fe6 100644
--- a/packages/react/src/react/components/primitives/pagination.tsx
+++ b/packages/react/src/react/components/primitives/pagination.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { IconArrowLeft, IconArrowRight } from '@intentui/icons'
 import clsx from 'clsx'
 
-import { Select, SelectList, SelectOption, SelectTrigger } from '../..'
+import { Select, SelectList, SelectOption, SelectTrigger, Typography } from '../..'
 
 interface PaginationProps {
   variant?: 'default' | 'compact'
@@ -39,7 +39,7 @@ const Pagination = (props: PaginationProps) => {
           'flex gap-2.5 size-20 transition-colors text-lg shrink-0 items-center justify-center bg-white dark:bg-bluegray-800',
           currentPage === 1
             ? 'cursor-not-allowed text-bluegray-300'
-            : 'cursor-pointer text-text-body '
+            : 'cursor-pointer text-text-primary '
         )}
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1}
@@ -55,9 +55,11 @@ const Pagination = (props: PaginationProps) => {
             return (
               <div
                 key={`elipse-${page}-${idx}`}
-                className={`size-20 shrink-0 flex items-center justify-center text-text-body transition-colors cursor-pointer text-lg border-l border-bluegray-300 bg-white dark:bg-bluegray-800`}
+                className={`size-20 shrink-0 flex items-center justify-center text-text-primary transition-colors cursor-pointer text-lg border-l border-bluegray-300 bg-white dark:bg-bluegray-800`}
               >
-                <span className="text-lg">...</span>
+                <Typography type="body" weight="normal">
+                  ...
+                </Typography>
               </div>
             )
           }
@@ -65,7 +67,7 @@ const Pagination = (props: PaginationProps) => {
             <button
               key={`page-${page}-${idx}`}
               className={clsx(
-                'flex size-20 shrink-0 items-center justify-center bg-accent-fg text-text-body transition-colors cursor-pointer text-lg',
+                'flex size-20 shrink-0 items-center justify-center bg-accent-fg text-text-primary transition-colors cursor-pointer text-lg',
                 page === currentPage
                   ? 'bg-bluegray-50 dark:bg-bluegray-700'
                   : 'bg-white dark:bg-bluegray-800',
@@ -74,7 +76,9 @@ const Pagination = (props: PaginationProps) => {
               )}
               onClick={() => onPageChange(page as number)}
             >
-              {page}
+              <Typography type="body" weight="normal">
+                {page}
+              </Typography>
             </button>
           )
         })}
@@ -86,7 +90,7 @@ const Pagination = (props: PaginationProps) => {
           'flex gap-2.5 size-20 transition-colors cursor-pointer text-lg shrink-0 items-center justify-center bg-white dark:bg-bluegray-800',
           currentPage === totalPages
             ? 'cursor-not-allowed text-bluegray-300'
-            : 'cursor-pointer text-text-body'
+            : 'cursor-pointer text-text-primary'
         )}
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
diff --git a/packages/react/src/react/components/primitives/radio-group.tsx b/packages/react/src/react/components/primitives/radio-group.tsx
index 571a6456..89be6ac9 100644
--- a/packages/react/src/react/components/primitives/radio-group.tsx
+++ b/packages/react/src/react/components/primitives/radio-group.tsx
@@ -97,7 +97,7 @@ const Radio = ({ className, children, description, label, size = 'md', ...props
                 data-slot="indicator"
                 className={twMerge([
                   `relative inset-bluegray-300 isolate flex ${sizeClasses[size].indicator} shrink-0 items-center justify-center rounded-full bg-secondary text-bg transition before:absolute before:inset-auto before:shrink-0 before:rounded-full before:content-['']`,
-                  `focus-visible:ring-2 focus-visible:ring-primary-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none border border-bluegray-400`,
+                  `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus:outline-none border border-bluegray-400`,
                   isSelected && [
                     'bg-primary text-primary-fg before:bg-white',
                     'group-invalid:inset-ring-danger/70 group-invalid:bg-danger group-invalid:text-danger-fg',
diff --git a/packages/react/src/react/components/primitives/select.tsx b/packages/react/src/react/components/primitives/select.tsx
index f2c6694b..6000257c 100644
--- a/packages/react/src/react/components/primitives/select.tsx
+++ b/packages/react/src/react/components/primitives/select.tsx
@@ -34,13 +34,13 @@ import { cn } from '../../utils/cn'
 const selectTriggerStyles = tv({
   extend: focusStyles,
   base: [
-    'btr flex w-full cursor-default items-center gap-12 gap-x-2 rounded-md border border-input px-6 py-5 text-start shadow-sm transition group-disabled:opacity-50 **:data-[slot=icon]:size-8 h-20 dark:shadow-none',
+    'bg-bg btr flex w-full cursor-default items-center gap-12 gap-x-2 rounded-md border border-input px-6 py-5 text-start shadow-sm transition group-disabled:opacity-50 **:data-[slot=icon]:size-8 h-20 dark:shadow-none',
     'group-data-open:border-ring/70 group-data-open:ring-4 group-data-open:ring-ring/20',
     'text-fg group-invalid:border-danger group-invalid:ring-danger/20 forced-colors:group-invalid:border-[Mark]',
   ],
   variants: {
     isDisabled: {
-      true: 'opacity-80 bg-bluegray-100 forced-colors:border-[GrayText] forced-colors:text-[GrayText]',
+      true: 'opacity-80 bg-surface-primary-hover forced-colors:border-[GrayText] forced-colors:text-[GrayText]',
     },
   },
 })
@@ -69,7 +69,7 @@ const Select = <T extends object>({
         <>
           {label && (
             <Label>
-              {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+              {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
             </Label>
           )}
           {typeof props.children === 'function' ? props.children(values) : props.children}
diff --git a/packages/react/src/react/components/primitives/sidebar.tsx b/packages/react/src/react/components/primitives/sidebar.tsx
index 076a9891..a2b2713f 100644
--- a/packages/react/src/react/components/primitives/sidebar.tsx
+++ b/packages/react/src/react/components/primitives/sidebar.tsx
@@ -422,7 +422,7 @@ const sidebarItemStyles = tv({
       true: 'flex not-has-data-[slot=icon]:hidden size-9 items-center justify-center gap-x-0 p-0 **:data-[slot=menu-trigger]:hidden',
     },
     isCurrent: {
-      true: 'bg-primary/10 text-text-accent pointer-events-none hover:bg-(--sidebar-accent)/90 hover:text-fg **:data-[slot=menu-trigger]:from-(--sidebar-accent) **:data-[slot=icon]:text-fg [&_.text-muted-fg]:text-fg/80',
+      true: 'bg-primary/10 text-text-brand pointer-events-none hover:bg-(--sidebar-accent)/90 hover:text-fg **:data-[slot=menu-trigger]:from-(--sidebar-accent) **:data-[slot=icon]:text-fg [&_.text-muted-fg]:text-fg/80',
     },
     isActive: {
       true: 'bg-[--alpha(var(--sidebar-accent)/20%)] text-sidebar-fg **:data-[slot=menu-trigger]:flex',
diff --git a/packages/react/src/react/components/primitives/tab.tsx b/packages/react/src/react/components/primitives/tab.tsx
index 86339a64..da601182 100644
--- a/packages/react/src/react/components/primitives/tab.tsx
+++ b/packages/react/src/react/components/primitives/tab.tsx
@@ -86,16 +86,16 @@ const TabList = <T extends object>({ className, ref, ...props }: TabListProps<T>
 
 const tabStyles = tv({
   base: [
-    'relative flex cursor-pointer items-center whitespace-nowrap rounded-full font-semibold outline-hidden transition *:data-[slot=icon]:mr-2 *:data-[slot=icon]:size-4 focus-visible:text-text-accent',
+    'relative flex cursor-pointer items-center whitespace-nowrap rounded-full font-semibold outline-hidden transition *:data-[slot=icon]:mr-2 *:data-[slot=icon]:size-4 focus-visible:text-text-brand',
     'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:py-0 group-data-[orientation=vertical]/tabs:pr-2 group-data-[orientation=vertical]/tabs:pl-4',
     'group-data-[orientation=horizontal]/tabs:pb-6',
   ],
   variants: {
     isSelected: {
-      false: 'text-text-body',
-      true: 'text-text-accent',
+      false: 'text-text-primary',
+      true: 'text-text-brand',
     },
-    isFocused: { false: 'ring-0', true: 'text-text-accent' },
+    isFocused: { false: 'ring-0', true: 'text-text-brand' },
     isDisabled: {
       true: 'text-muted-fg/50',
     },
diff --git a/packages/react/src/react/components/primitives/table.tsx b/packages/react/src/react/components/primitives/table.tsx
index 7f1ca13c..9d7e8ced 100644
--- a/packages/react/src/react/components/primitives/table.tsx
+++ b/packages/react/src/react/components/primitives/table.tsx
@@ -37,7 +37,11 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('text-text-body font-medium text-base', className)} {...props} />
+  <tbody
+    ref={ref}
+    className={cn('text-text-primary font-medium text-base', className)}
+    {...props}
+  />
 ))
 TableBody.displayName = 'TableBody'
 
@@ -45,7 +49,11 @@ const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn('font-normal text-base text-text-body', className)} {...props} />
+  <tfoot
+    ref={ref}
+    className={cn('font-normal text-base text-text-primary', className)}
+    {...props}
+  />
 ))
 TableFooter.displayName = 'TableFooter'
 
@@ -89,7 +97,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'text-foreground px-6 py-7 text-left align-middle whitespace-nowrap text-body-s font-normal',
+      'text-foreground px-6 py-7 text-left align-middle whitespace-nowrap text-primary-s font-normal',
       className
     )}
     {...props}
diff --git a/packages/react/src/react/components/primitives/tag-group.tsx b/packages/react/src/react/components/primitives/tag-group.tsx
index e04580c8..37bad776 100644
--- a/packages/react/src/react/components/primitives/tag-group.tsx
+++ b/packages/react/src/react/components/primitives/tag-group.tsx
@@ -27,7 +27,7 @@ import { BaseIcon } from '../../components/primitives/base-icon'
 const intents = {
   primary: {
     base: [
-      'bg-pumpkin-100 text-pumpkin-600 **:[[slot=remove]]:hover:bg-primary **:[[slot=remove]]:hover:text-primary-fg',
+      'bg-surface-brand-soft-2 text-primary **:[[slot=remove]]:hover:bg-primary **:[[slot=remove]]:hover:text-primary-fg',
     ],
     selected: [
       'bg-primary dark:hover:bg-primary dark:bg-primary hover:bg-primary text-primary-fg dark:text-primary-fg hover:text-primary-fg',
@@ -36,10 +36,10 @@ const intents = {
   },
   gray: {
     base: [
-      'bg-bluegray-100 text-bluegray-600 **:[[slot=remove]]:hover:bg-fg **:[[slot=remove]]:hover:text-bg',
+      'bg-surface-primary-hover text-text-secondary **:[[slot=remove]]:hover:bg-fg **:[[slot=remove]]:hover:text-bg',
     ],
     selected: [
-      'bg-stroke-body text-white',
+      'bg-surface-secondary text-text-inverse',
       '**:[[slot=remove]]:hover:bg-secondary/30 **:[[slot=remove]]:hover:text-secondary',
     ],
   },
@@ -48,35 +48,35 @@ const intents = {
       'bg-surface-correct text-text-correct **:[[slot=remove]]:hover:bg-success **:[[slot=remove]]:hover:text-success-fg',
     ],
     selected: [
-      'bg-palm-500 text-white',
+      'bg-palm-500 text-text-inverse',
       '**:[[slot=remove]]:hover:bg-success-fg/30 **:[[slot=remove]]:hover:text-success-fg',
     ],
   },
   incorrect: {
     base: [
-      'bg-red-50 text-red-700 **:[[slot=remove]]:hover:bg-danger **:[[slot=remove]]:hover:text-danger-fg',
+      'bg-surface-incorrect text-text-incorrect **:[[slot=remove]]:hover:bg-danger **:[[slot=remove]]:hover:text-danger-fg',
     ],
     selected: [
-      'bg-red-500 text-white',
+      'bg-surface-incorrect-hover text-text-inverse',
       '**:[[slot=remove]]:hover:bg-danger-fg/30 **:[[slot=remove]]:hover:text-danger-fg',
     ],
   },
   accent: {
     base: [
-      'bg-yellow-50 text-yellow-600 **:[[slot=remove]]:hover:bg-warning **:[[slot=remove]]:hover:text-warning-fg',
+      'bg-surface-accent text-text-accent-bold **:[[slot=remove]]:hover:bg-warning **:[[slot=remove]]:hover:text-warning-fg',
     ],
     selected: [
-      'bg-yellow-500 text-white',
+      'bg-surface-accent-hover text-text-inverse',
       '**:[[slot=remove]]:hover:bg-warning-fg/30 **:[[slot=remove]]:hover:text-warning-fg',
     ],
   },
   info: {
     base: [
-      'bg-ocean-50 text-ocean-600',
+      'bg-surface-info text-text-info-bold',
       '**:[[slot=remove]]:hover:bg-danger **:[[slot=remove]]:hover:text-danger-fg',
     ],
     selected: [
-      'bg-ocean-500 text-white',
+      'bg-surface-info-hover text-text-inverse',
       '**:[[slot=remove]]:hover:bg-danger-fg/30 **:[[slot=remove]]:hover:text-danger-fg',
     ],
   },
diff --git a/packages/react/src/react/components/primitives/text-area.tsx b/packages/react/src/react/components/primitives/text-area.tsx
index 638007d8..78eb02d1 100644
--- a/packages/react/src/react/components/primitives/text-area.tsx
+++ b/packages/react/src/react/components/primitives/text-area.tsx
@@ -29,7 +29,7 @@ const Textarea = ({
     >
       {label && (
         <Label>
-          {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <TextArea
diff --git a/packages/react/src/react/components/primitives/text-field.tsx b/packages/react/src/react/components/primitives/text-field.tsx
index b8ea69c5..dbcdc65d 100644
--- a/packages/react/src/react/components/primitives/text-field.tsx
+++ b/packages/react/src/react/components/primitives/text-field.tsx
@@ -39,12 +39,13 @@ interface NonRevealableTextFieldProps extends BaseTextFieldProps {
 }
 
 const fieldgroupVariants = tv({
-  base: 'box-content rounded-md',
+  base: 'bg-bg box-content rounded-md',
   variants: {
     size: {
-      md: `[&>input]:p-6 [&>[data-slot=prefix]]:pl-4 [&>[data-slot=suffix]]:pr-4`,
-      sm: `[&>input]:p-4 [&>[data-slot=prefix]]:pl-2 [&>[data-slot=suffix]]:pr-2`,
-      xs: `[&>input]:p-2 [&>[data-slot=prefix]]:pl-2 [&>[data-slot=suffix]]:pr-2`,
+      lg: `[&>input]:py-6 px-2 [&>[data-slot=prefix]]:pl-4 [&>[data-slot=suffix]]:pr-4`,
+      md: `[&>input]:py-4 px-2 [&>[data-slot=prefix]]:pl-2 [&>[data-slot=suffix]]:pr-2`,
+      sm: `[&>input]:py-3 px-2 [&>[data-slot=prefix]]:pl-1 [&>[data-slot=suffix]]:pr-1`,
+      xs: `[&>input]:py-2 px-1 [&>[data-slot=prefix]]:pl-1 [&>[data-slot=suffix]]:pr-1`,
     },
   },
   defaultVariants: { size: 'md' },
@@ -89,7 +90,7 @@ const TextField = ({
         <>
           {label && (
             <Label>
-              {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+              {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
             </Label>
           )}
           <FieldGroup
@@ -110,7 +111,7 @@ const TextField = ({
                 data-slot="prefix"
                 type="caption"
                 weight="medium"
-                className="text-text-trivial"
+                className="text-text-secondary"
               >
                 {prefix}
               </Typography>
@@ -133,14 +134,14 @@ const TextField = ({
                 )}
               </Button>
             ) : isPending ? (
-              <Loader variant="spin" className="size-10" />
+              <Loader variant="spin" />
             ) : suffix ? (
               typeof suffix === 'string' ? (
                 <Typography
                   data-slot="suffix"
                   type="caption"
                   weight="medium"
-                  className="text-text-trivial"
+                  className="text-text-secondary"
                 >
                   {suffix}
                 </Typography>
diff --git a/packages/react/src/react/components/primitives/time-field.tsx b/packages/react/src/react/components/primitives/time-field.tsx
index ab209440..6b4e40b1 100644
--- a/packages/react/src/react/components/primitives/time-field.tsx
+++ b/packages/react/src/react/components/primitives/time-field.tsx
@@ -38,7 +38,7 @@ const TimeField = <T extends TimeValue>({
     >
       {label && (
         <Label>
-          {label} {props.isRequired && <span className="ml-1 text-pumpkin-500">*</span>}
+          {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
         </Label>
       )}
       <FieldGroup>
diff --git a/packages/react/src/react/components/primitives/tooltip.tsx b/packages/react/src/react/components/primitives/tooltip.tsx
index e6d97198..3723a35c 100644
--- a/packages/react/src/react/components/primitives/tooltip.tsx
+++ b/packages/react/src/react/components/primitives/tooltip.tsx
@@ -18,7 +18,7 @@ const tooltipStyles = tv({
   ],
   variants: {
     intent: {
-      default: 'bg-black text-white [&_.arx]:fill-overlay [&_.arx]:stroke-border',
+      default: 'bg-black text-text-inverse [&_.arx]:fill-overlay [&_.arx]:stroke-border',
       inverse:
         'border-transparent bg-fg text-bg [&_.arx]:fill-fg [&_.arx]:stroke-transparent dark:[&_.arx]:fill-white [&_.text-muted-fg]:text-bg/70 dark:[&_.text-muted-fg]:text-fg/70',
     },
diff --git a/packages/react/src/react/pages/401.tsx b/packages/react/src/react/pages/401.tsx
index 9180a9b4..1e1fe837 100644
--- a/packages/react/src/react/pages/401.tsx
+++ b/packages/react/src/react/pages/401.tsx
@@ -35,22 +35,18 @@ export const NotAuthorizedPage = ({
         401
       </Typography>
       {typeof title === 'string' ? (
-        <Typography
-          weight="semibold"
-          type="h4"
-          className="text-text-nontrivial mt-12 min-w-[120px]"
-        >
+        <Typography weight="semibold" type="h4" className="text-text-primary mt-12 min-w-[120px]">
           {title}
         </Typography>
       ) : (
         title
       )}
-      <Typography weight="normal" type="body" className="text-text-body">
+      <Typography weight="normal" type="body" className="text-text-primary">
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
       <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
-        <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-accent" weight="bold" />
+        <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
       </Link>
     </div>
diff --git a/packages/react/src/react/pages/403.tsx b/packages/react/src/react/pages/403.tsx
index f052992d..cb9f1b09 100644
--- a/packages/react/src/react/pages/403.tsx
+++ b/packages/react/src/react/pages/403.tsx
@@ -8,23 +8,23 @@ export const UnauthorizedPage = () => {
   return (
     <div className="from-bg to-primary/10 grid h-[calc(100svh-76px-10px)] content-center justify-center bg-gradient-to-br from-50% px-20">
       <div className="flex items-center gap-x-2">
-        <Typography type="h1" weight="bold" className="text-text-accent">
+        <Typography type="h1" weight="bold" className="text-text-brand">
           403
         </Typography>
       </div>
       <div className="mt-12 flex items-center justify-start gap-x-2">
-        <Typography weight="semibold" type="h4" className="text-text-nontrivial">
+        <Typography weight="semibold" type="h4" className="text-text-primary">
           Unauthorized
         </Typography>
-        <BaseIcon icon={LockKeyIcon} className="text-text-body" size="md" weight="duotone" />
+        <BaseIcon icon={LockKeyIcon} className="text-text-primary" size="md" weight="duotone" />
       </div>
-      <Typography weight="normal" type="body" className="text-text-body">
+      <Typography weight="normal" type="body" className="text-text-primary">
         You are not authorized to access this page. Please check your permission and try again.
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
       <Link intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
         Back to home
-        <BaseIcon size="sm" icon={ArrowRightIcon} className="text-text-accent" weight="bold" />
+        <BaseIcon size="sm" icon={ArrowRightIcon} className="text-text-brand" weight="bold" />
       </Link>
     </div>
   )
diff --git a/packages/react/src/react/pages/404.tsx b/packages/react/src/react/pages/404.tsx
index 25f69ec6..47e396bb 100644
--- a/packages/react/src/react/pages/404.tsx
+++ b/packages/react/src/react/pages/404.tsx
@@ -24,7 +24,7 @@ export const NotfoundPage = ({
       <Typography
         style={{
           backgroundImage:
-            'radial-gradient(circle, var(--color-accent) 2px,var(--color-accent) 2px,transparent 2px)',
+            'radial-gradient(circle, var(--color-primary) 2px,var(--color-primary) 2px,transparent 2px)',
           backgroundRepeat: 'repeat',
           backgroundSize: '4px 4px',
         }}
@@ -35,22 +35,18 @@ export const NotfoundPage = ({
         404
       </Typography>
       {typeof title === 'string' ? (
-        <Typography
-          weight="semibold"
-          type="h4"
-          className="text-text-nontrivial mt-12 min-w-[120px]"
-        >
+        <Typography weight="semibold" type="h4" className="text-text-primary mt-12 min-w-[120px]">
           {title}
         </Typography>
       ) : (
         title
       )}
-      <Typography weight="normal" type="body" className="text-text-body">
+      <Typography weight="normal" type="body" className="text-text-primary">
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
       <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
-        <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-accent" weight="bold" />
+        <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
       </Link>
     </div>
diff --git a/packages/react/src/react/pages/500.tsx b/packages/react/src/react/pages/500.tsx
index c20e89ce..51536138 100644
--- a/packages/react/src/react/pages/500.tsx
+++ b/packages/react/src/react/pages/500.tsx
@@ -7,17 +7,22 @@ export const ServerErrorPage = () => {
   return (
     <div className="from-bg to-primary/10 grid h-[calc(100svh-76px-10px)] content-center justify-center bg-gradient-to-br from-50% px-20">
       <div className="flex items-center gap-x-2">
-        <Typography type="h1" weight="bold" className="text-text-accent">
+        <Typography type="h1" weight="bold" className="text-text-brand">
           500
         </Typography>
       </div>
       <div className="mt-12 flex items-center justify-start gap-x-2">
-        <Typography weight="semibold" type="h4" className="text-text-nontrivial">
+        <Typography weight="semibold" type="h4" className="text-text-primary">
           Server Error
         </Typography>
-        <BaseIcon icon={WarningDiamondIcon} className="text-text-body" size="md" weight="duotone" />
+        <BaseIcon
+          icon={WarningDiamondIcon}
+          className="text-text-primary"
+          size="md"
+          weight="duotone"
+        />
       </div>
-      <Typography weight="normal" type="body" className="text-text-body">
+      <Typography weight="normal" type="body" className="text-text-primary">
         An error occurred while loading the page. Please try again later.
       </Typography>
     </div>
diff --git a/packages/react/src/react/styles/tailwind.css b/packages/react/src/react/styles/tailwind.css
index a0e2d9e9..02a27755 100644
--- a/packages/react/src/react/styles/tailwind.css
+++ b/packages/react/src/react/styles/tailwind.css
@@ -22,6 +22,9 @@
   --radius-3xl: 20px;
   --radius-4xl: 24px;
 
+  --color-base-white: #ffffff;
+  --color-base-black: #000000;
+
   --color-pumpkin-50: #fffaf8;
   --color-pumpkin-100: #feeadd;
   --color-pumpkin-200: #ffc8ab;
@@ -99,11 +102,27 @@
   --color-yellow-800: #854d0e;
   --color-yellow-900: #422006;
 
-  --color-black-normal: #000000;
-  --color-black-vanish: rgba(0, 0, 0, 0);
-
-  --color-white-normal: #ffffff;
-  --color-white-vanish: rgba(255, 255, 255, 0);
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #3b0764;
+
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #06b6d4;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #083344;
 
   --opacity-disabled: 0.8;
 
@@ -122,26 +141,83 @@
   --text-3xl: 2.25rem;
   --text-3xl-line-height: 115%;
 
-  /* Drizzilify | Senmantic */
-  --color-text-correct: var(--color-palm-600);
-  --color-text-tertiary: #94a3b8;
-  --color-text-incorrect: var(--color-valencia-600);
-  --color-text-accent: var(--color-pumpkin-500);
-  --color-text-nontrivial: var(--color-bluegray-800);
-  --color-text-body: var(--color-bluegray-600);
-  --color-text-trivial: var(--color-bluegray-500);
-  --color-text-white: var(--color-white-normal);
-
-  --color-stroke-correct: var(--color-palm-400);
-  --color-stroke-incorrect: var(--color-valencia-400);
-  --color-stroke-accent: var(--color-pumpkin-500);
-  --color-stroke-nontrivial: var(--color-bluegray-500);
-  --color-stroke-body: var(--color-bluegray-400);
-  --color-stroke-trivial: var(--color-bluegray-300);
-  --color-stroke-verytrival: var(--color-bluegray-200);
+  /* Genseki | Semantics */
+  /* Text */
+  --color-text-primary: var(--color-bluegray-800);
+  --color-text-secondary: var(--color-bluegray-600);
+  --color-text-tertiary: var(--color-bluegray-400);
+
+  --color-text-inverse: var(--color-base-white);
+  --color-text-disabled: var(--color-bluegray-100);
+
+  --color-text-brand: var(--color-pumpkin-500);
+  --color-text-brand-bold: var(--color-pumpkin-600);
+
+  --color-text-info: var(--color-ocean-500);
+  --color-text-info-bold: var(--color-ocean-600);
+
+  --color-text-correct: var(--color-palm-500);
+  --color-text-correct-bold: var(--color-palm-600);
+
+  --color-text-incorrect: var(--color-red-600);
+  --color-text-incorrect-bold: var(--color-red-700);
+
+  --color-text-accent: var(--color-yellow-500);
+  --color-text-accent-bold: var(--color-yellow-600);
+
+  --color-text-chowder: var(--color-purple-500);
+  --color-text-chowder-bold: var(--color-purple-600);
+
+  /* Icon */
+  --color-icon-primary: var(--color-bluegray-800);
+  --color-icon-secondary: var(--color-bluegray-600);
+  --color-icon-tertiary: var(--color-bluegray-400);
+
+  --color-icon-inverse: var(--color-base-white);
+  --color-icon-disabled: var(--color-bluegray-100);
 
+  --color-icon-brand: var(--color-pumpkin-500);
+  --color-icon-brand-bold: var(--color-pumpkin-600);
+
+  --color-icon-info: var(--color-ocean-500);
+  --color-icon-info-bold: var(--color-ocean-600);
+
+  --color-icon-correct: var(--color-palm-500);
+  --color-icon-correct-bold: var(--color-palm-600);
+
+  --color-icon-incorrect: var(--color-red-600);
+  --color-icon-incorrect-bold: var(--color-red-700);
+
+  --color-icon-accent: var(--color-yellow-500);
+  --color-icon-accent-bold: var(--color-yellow-600);
+
+  --color-icon-chowder: var(--color-purple-500);
+  --color-icon-chowder-bold: var(--color-purple-600);
+
+  /* border */
+  --color-border-primary: var(--color-bluegray-500);
+  --color-border-secondary: var(--color-bluegray-400);
+  --color-border-tertiary: var(--color-bluegray-300);
+  --color-border-very-trival: var(--color-gray-200);
+  --color-border-correct: var(--color-palm-400);
+  --color-border-incorrect: var(--color-red-500);
+  --color-border-accent: var(--color-yellow-400);
+  --color-border-brand: var(--color-pumpkin-500);
+
+  /* Surface */
+  --color-surface-primary: var(--color-base-white);
+  --color-surface-primary-hover: var(--color-bluegray-100);
+  --color-surface-primary-active: var(--color-bluegray-300);
+  --color-surface-primary-disabled: var(--color-bluegray-50);
+  --color-surface-secondary: var(--color-bluegray-400);
+  --color-surface-tertiary: var(--color-bluegray-50);
+  --color-surface-brand: var(--color-pumpkin-500);
+  --color-surface-brand-soft-1: var(--color-pumpkin-50);
+  --color-surface-brand-soft-2: var(--color-pumpkin-100);
   --color-surface-correct: var(--color-palm-50);
   --color-surface-correct-hover: var(--color-palm-500);
+  --color-surface-incorrect: var(--color-red-50);
+  --color-surface-incorrect-hover: var(--color-red-500);
   --color-surface-incorrect: var(--color-valencia-50);
   --color-surface-incorrect-hover: var(--color-red-500);
   --color-surface-primary: var(--color-white);
@@ -154,8 +230,9 @@
   --color-surface-accent-hover: var(--color-yellow-500);
   --color-surface-info: var(--color-ocean-50);
   --color-surface-info-hover: var(--color-ocean-500);
-  --color-surface-neutral: #faf5ff;
-  --color-surface-neutral-hover: var(--color-ocean-500);
+  --color-surface-chowder: var(--color-purple-50);
+  --color-surface-chowder-hover: var(--color-purple-500);
+  --color-surface-muted: var();
 
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -164,74 +241,130 @@
     'Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
     '"Liberation Mono"', '"Courier New"', 'monospace';
 
+  /* Genseki | Contextual token (Component token)*/
+  --color-border-button-primary-disabled: var(--color-gray-200);
+
+  --color-border-button-tertiary: var(--color-pumpkin-400);
+  --color-border-button-tertiary-hover: var(--color-pumpkin-400);
+  --color-border-button-tertiary-disabled: var(--color-gray-200);
+
+  --color-border-button-outline: var(--color-bluegray-300);
+  --color-border-button-outline-hover: var(--color-bluegray-300);
+  --color-border-button-outline-disabled: var(--color-bluegray-300);
+
+  --background-image-surface-button-primary: linear-gradient(
+    180deg,
+    var(--color-pumpkin-500) 35%,
+    var(--color-pumpkin-600) 105%
+  );
+  --color-surface-button-primary-hover: var(--color-pumpkin-500);
+  --color-surface-button-primary-disabled: var(--color-bluegray-50);
+
+  --color-surface-button-secondary: var(--color-pumpkin-50);
+  --color-surface-button-secondary-hover: var(--color-pumpkin-100);
+  --color-surface-button-secondary-disabled: var(--color-bluegray-50);
+
+  --color-surface-button-tertiary: var(--color-pumpkin-50);
+  --color-surface-button-tertiary-hover: var(--color-pumpkin-100);
+  --color-surface-button-tertiary-disabled: var(--color-bluegray-50);
+
+  --color-surface-button-naked: var(--color-base-white);
+  --color-surface-button-naked-hover: var(--color-bluegray-100);
+  --color-surface-button-naked-disabled: var(--color-bluegray-50);
+
+  --color-surface-button-outline: var(--color-base-white);
+  --color-surface-button-outline-hover: var(--color-bluegray-50);
+  --color-surface-button-outline-disabled: var(--color-bluegray-50);
+
+  --color-surface-button-ghost: var(--color-bluegray-50);
+
+  --color-surface-button-destruction: var(--color-red-500);
+  --color-surface-button-destruction-hover: var(--color-red-700);
+  --color-surface-button-destruction-disabled: var(--color-bluegray-50);
+
   /* Intent UI | semantics */
-  --color-border: var(--border);
-  --color-input: var(--input);
+  --color-bg: var(--color-base-white);
+  --color-fg: var(--color-base-black);
+
+  --color-primary: var(--color-pumpkin-500);
+  --color-primary-fg: var(--color-pumpkin-50);
+
+  --color-primary-subtle: oklch(0.623 0.214 259.815 / 0.15);
+  --color-primary-subtle-fg: oklch(0.488 0.243 264.376);
 
-  --color-ring: var(--ring);
+  --color-secondary: var(--color-bluegray-50);
+  --color-secondary-fg: var(--color-bluegray-900);
 
-  --color-bg: var(--bg);
-  --color-fg: var(--fg);
+  --color-accent: var(--color-bluegray-50);
+  --color-accent-fg: var(--color-bluegray-900);
 
-  --color-primary: var(--primary);
-  --color-primary-fg: var(--primary-fg);
-  --color-primary-emphasis: var(--primary-emphasis);
+  --color-overlay: var(--color-base-white);
+  --color-overlay-fg: var(--color-bluegray-900);
 
-  --color-secondary: var(--secondary);
-  --color-secondary-fg: var(--secondary-fg);
+  --color-muted: var(--color-bluegray-100);
+  --color-muted-fg: var(--color-bluegray-500);
 
-  --color-accent: var(--accent);
-  --color-accent-fg: var(--accent-fg);
+  --color-success: var(--color-palm-500);
+  --color-success-fg: var(--color-palm-100);
 
-  --color-success: var(--success);
-  --color-success-fg: var(--success-fg);
+  --color-success-subtle: var(--color-palm-50);
+  --color-success-subtle-fg: var(--color-palm-600);
 
-  --color-danger: var(--danger);
-  --color-danger-fg: var(--danger-fg);
+  --color-info-subtle: oklch(0.7303 0.1795 71.83 / 0.15);
+  --color-info-subtle-fg: oklch(0.7303 0.1795 71.83);
 
-  --color-warning: var(--warning);
-  --color-warning-fg: var(--warning-fg);
+  --color-warning: var(--color-yellow-500);
+  --color-warning-fg: var(--color-yellow-900);
 
-  --color-yellow: var(--yellow);
-  --color-yellow-fg: var(--yellow-fg);
+  --color-warning-subtle: oklch(0.828 0.189 84.429 / 0.2);
+  --color-warning-subtle-fg: oklch(0.555 0.163 48.998);
 
-  --color-muted: var(--muted);
-  --color-muted-fg: var(--muted-fg);
+  --color-danger: var(--color-red-600);
+  --color-danger-fg: var(--color-red-50);
 
-  --color-overlay: var(--overlay);
-  --color-overlay-fg: var(--overlay-fg);
+  --color-danger-subtle: oklch(0.637 0.237 25.331 / 0.15);
+  --color-danger-subtle-fg: oklch(0.505 0.213 27.518);
 
-  --color-navbar: var(--navbar);
-  --color-navbar-fg: var(--navbar-fg);
+  --color-border: var(--color-border-very-trival);
+  --color-input: var(--color-border-tertiary);
+  --color-ring: var(--color-pumpkin-500);
 
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-fg: var(--sidebar-fg);
+  --color-navbar: var(--color-bluegray-50);
+  --color-navbar-fg: var(--color-bluegray-900);
 
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--color-bluegray-50);
+  --color-sidebar-fg: var(--color-bluegray-900);
+  --color-sidebar-primary: var(--color-pumpkin-500);
+  --color-sidebar-primary-fg: var(--color-pumpkin-50);
+  --color-sidebar-accent: var(--color-bluegray-50);
+  --color-sidebar-accent-fg: var(--color-bluegray-900);
+  --color-sidebar-border: var(--color-border-tertiary);
+  --color-sidebar-ring: var(--color-pumpkin-500);
+
+  --color-chart-1: var(--color-pumpkin-500);
+  --color-chart-2: var(--color-pumpkin-400);
+  --color-chart-3: var(--color-pumpkin-300);
+  --color-chart-4: var(--color-pumpkin-200);
+  --color-chart-5: var(--color-pumpkin-100);
 }
 
 @layer base {
-  /* Do we have a dark mode? */
-  .dark {
+  /* .dark {
     --color-text-correct: var(--color-palm-600);
     --color-text-incorrect: var(--color-valencia-600);
-    --color-text-accent: var(--color-pumpkin-500);
+    --color-text-brand: var(--color-pumpkin-500);
 
     --color-text-nontrivial: var(--color-bluegray-50);
-    --color-text-body: var(--color-bluegray-200);
-    --color-text-trivial: var(--color-bluegray-400);
-    --color-text-white: var(--color-bluegray-600);
-  }
+    --color-text-primary: var(--color-bluegray-200);
+    --color-text-secondary: var(--color-bluegray-400);
+    --color-text-text-inverse: var(--color-bluegray-600);
+  } */
 
   /* IntentUI | Theme for used by @theme */
   /**
   User need to redefine these variables
   */
-  :root {
+  /* :root {
     --bg: var(--color-white);
     --fg: var(--color-bluegray-900);
 
@@ -252,7 +385,7 @@
     --muted-fg: var(--color-bluegray-600);
 
     --success: var(--color-palm-600);
-    --success-fg: var(--color-white-normal);
+    --success-fg: var(--color-base-white);
 
     --warning: oklch(0.828 0.189 84.429);
     --warning-fg: oklch(0.279 0.077 45.635);
@@ -272,14 +405,14 @@
     --sidebar: var(--color-bluegray-50);
     --sidebar-fg: var(--color-bluegray-600);
 
-    --chart-1: oklch(0.546 0.245 262.881);
+    --chart-1: var(--color-pumpkin-500);
     --chart-2: oklch(0.707 0.165 254.624);
     --chart-3: oklch(0.809 0.105 251.813);
     --chart-4: oklch(0.882 0.059 254.128);
     --chart-5: oklch(0.932 0.032 255.585);
-  }
+  } */
 
-  .dark {
+  /* .dark {
     --bg: var(--color-bluegray-800);
     --fg: var(--color-bluegray-50);
 
@@ -323,7 +456,7 @@
     --chart-3: var(--color-blue-400);
     --chart-4: var(--color-blue-300);
     --chart-5: var(--color-blue-200);
-  }
+  } */
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -332,24 +465,18 @@
   background-color: var(--color-pumpkin-500);
   background-image: linear-gradient(
     to bottom,
-    --alpha(var(--color-white-normal) / --value(percentage)),
+    --alpha(var(--color-base-white) / --value(percentage)),
     --alpha(var(--color-pumpkin-600) / --value(percentage))
   );
 }
 
 @utility brand-secondary-gradient-* {
   background-color: var(--color-pumpkin-100);
-  background-image:
-    linear-gradient(
-      to bottom,
-      --alpha(var(--color-white-normal) / --value(percentage)),
-      --alpha(var(--color-pumpkin-600) / --value(percentage))
-    ),
-    linear-gradient(
-      to bottom,
-      --alpha(var(--color-white-normal) / --value(percentage)),
-      --alpha(var(--color-white-vanish) / --value(percentage))
-    );
+  background-image: linear-gradient(
+    to bottom,
+    --alpha(var(--color-base-white) / --value(percentage)),
+    --alpha(var(--color-pumpkin-600) / --value(percentage))
+  );
 }
 
 @layer base {
@@ -358,13 +485,13 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--border, currentColor);
+    border-color: var(--color-border, currentColor);
   }
 
   * {
     text-rendering: optimizeLegibility;
     scrollbar-width: thin;
-    scrollbar-color: var(--border) transparent;
+    scrollbar-color: var(--color-border) transparent;
     line-height: 1;
   }
 
@@ -379,8 +506,8 @@
   }
 
   body {
-    background-color: var(--sidebar);
-    color: var(--color-text-body);
+    background-color: var(--color-sidebar);
+    color: var(--color-text-primary);
   }
 
   ::-webkit-scrollbar {
diff --git a/packages/react/src/react/views/collections/home.tsx b/packages/react/src/react/views/collections/home.tsx
index 01b3d7da..c3083c9d 100644
--- a/packages/react/src/react/views/collections/home.tsx
+++ b/packages/react/src/react/views/collections/home.tsx
@@ -28,13 +28,13 @@ export function HomeView(props: HomeViewProps) {
     <div>
       <div className="relative min-h-[240px] w-full px-12 pt-24 [background-image:radial-gradient(100%_100%_at_10%_-30%,--alpha(var(--color-primary)/15%),var(--color-secondary))]">
         <div className="mx-auto flex w-full max-w-[800px] flex-col">
-          <Typography type="h2" weight="bold" className="text-text-nontrivial">
+          <Typography type="h2" weight="bold" className="text-text-primary">
             {greeting()}
           </Typography>
-          <Typography type="h4" weight="normal" className="text-text-body">
+          <Typography type="h4" weight="normal" className="text-text-primary">
             Welcome to your collections
           </Typography>
-          <Typography type="body" weight="normal" className="text-text-trivial mt-4">
+          <Typography type="body" weight="normal" className="text-text-secondary mt-4">
             Select a collection below to view and manage your data.
           </Typography>
         </div>
diff --git a/packages/react/src/react/views/collections/list/banner.tsx b/packages/react/src/react/views/collections/list/banner.tsx
index b51469ec..f1376733 100644
--- a/packages/react/src/react/views/collections/list/banner.tsx
+++ b/packages/react/src/react/views/collections/list/banner.tsx
@@ -27,11 +27,11 @@ export function Banner(props: BannerProps) {
           />
           <div className="absolute -inset-8 z-0 aspect-square [background-image:radial-gradient(circle,--alpha(var(--color-fg)/25%)_2px,--alpha(var(--color-fg)/25%)_2px,transparent_2px)] [background-repeat:repeat] [background-size:8px_8px] [mask-image:radial-gradient(circle,black,transparent_80%)]" />
         </div>
-        <div className="flex flex-col">
-          <Typography type="h2" weight="bold" className="text-text-nontrivial">
+        <div className="flex flex-col justify-center">
+          <Typography type="h2" weight="bold" className="text-text-primary leading-[100%]">
             {formatSlug(props.slug)}
           </Typography>
-          <Typography type="h4" weight="normal" className="text-text-body">
+          <Typography type="h4" weight="normal" className="text-text-secondary leading-[140%]">
             A collection
           </Typography>
         </div>
diff --git a/packages/react/src/react/views/collections/list/toolbar/index.tsx b/packages/react/src/react/views/collections/list/toolbar/index.tsx
index 01e9ec50..fb4754ad 100644
--- a/packages/react/src/react/views/collections/list/toolbar/index.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/index.tsx
@@ -53,7 +53,7 @@ export function CollectionListToolbar(props: CollectionListToolbarProps) {
       >
         Back
       </ButtonLink>
-      <div className="flex items-center gap-x-4">
+      <div className="flex gap-x-4">
         {toolbar?.delete && isRowsSelected && (
           <CollectionListDelete onDelete={() => deleteMutation.mutate(rowSelectionIds)} />
         )}
diff --git a/packages/react/src/react/views/collections/list/toolbar/search.tsx b/packages/react/src/react/views/collections/list/toolbar/search.tsx
index ef0e71fd..d68232b4 100644
--- a/packages/react/src/react/views/collections/list/toolbar/search.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/search.tsx
@@ -40,7 +40,6 @@ export function CollectionListSearch(props: CollectionListSearchProps) {
       aria-label="Search"
       placeholder="Search"
       prefix={<BaseIcon icon={MagnifyingGlassIcon} size="md" />}
-      className="w-full"
       isPending={props.isLoading}
       value={search}
       onChange={onSearch}