diff --git a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
index 7e2e70a31d..98a4d02394 100644
--- a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
@@ -88,7 +88,7 @@ export function AskPiMenu(props: Props) {
             </div>
           </div>
         ) : (
-          <p className="text-sm text-custom-text-200">Pi is answering...</p>
+          <p className="text-13 text-secondary">AI is answering...</p>
         )}
       </div>
       <div className="py-3 px-4">
@@ -101,7 +101,7 @@ export function AskPiMenu(props: Props) {
             className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Tell Pi what to do..."
+            placeholder="Tell AI what to do..."
           />
           <span className="flex-shrink-0 size-4 grid place-items-center">
             <CircleArrowUp className="size-4 text-custom-text-200" />
diff --git a/apps/web/core/components/analytics/select/analytics-params.tsx b/apps/web/core/components/analytics/select/analytics-params.tsx
index 957ea2aeed..30934fd984 100644
--- a/apps/web/core/components/analytics/select/analytics-params.tsx
+++ b/apps/web/core/components/analytics/select/analytics-params.tsx
@@ -2,9 +2,10 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import type { Control, UseFormSetValue } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { Calendar, SlidersHorizontal } from "lucide-react";
+import { SlidersHorizontal } from "lucide-react";
 // plane package imports
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@plane/constants";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import type { IAnalyticsParams } from "@plane/types";
 import { ChartYAxisMetric } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -63,8 +64,8 @@ export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(pro
               }}
               label={
                 <div className="flex items-center gap-2">
-                  <Calendar className="h-3 w-3" />
-                  <span className={cn("text-custom-text-200", value && "text-custom-text-100")}>
+                  <CalendarLayoutIcon className="h-3 w-3" />
+                  <span className={cn("text-secondary", value && "text-primary")}>
                     {xAxisOptions.find((v) => v.value === value)?.label || "Add Property"}
                   </span>
                 </div>
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index e052875f19..baf4c7a772 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -61,7 +61,7 @@ export function PageSearchInput(props: Props) {
         <Search className="h-3.5 w-3.5" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none ml-2"
           placeholder="Search pages"
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx
index 37845aaf43..4c91aecf15 100644
--- a/apps/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { AlertModalCore } from "@plane/ui";
+import { getPageName } from "@plane/utils";
 // constants
 // hooks
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -91,7 +92,7 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
       content={
         <>
           Are you sure you want to delete page-{" "}
-          <span className="break-words font-medium text-custom-text-100 break-all">{name}</span> ? The Page will be
+          <span className="break-words font-medium text-primary break-all">{getPageName(name)}</span> ? The Page will be
           deleted permanently. This action cannot be undone.
         </>
       }
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
index b88dbd5db5..ec667b557d 100644
--- a/apps/web/core/components/project/settings/helper.tsx
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
 import { ToggleSwitch } from "@plane/ui";
 import { joinUrlPath } from "@plane/utils";
@@ -27,7 +27,7 @@ export function ProjectFeatureToggle(props: Props) {
         >
           {value ? "Enabled" : "Disabled"}
         </Pill>
-        <ChevronRight className="h-4 w-4 text-custom-text-300" />
+        <ChevronRightIcon className="h-4 w-4 text-tertiary" />
       </div>
     </Link>
   ) : (
diff --git a/apps/web/core/components/readonly/date.tsx b/apps/web/core/components/readonly/date.tsx
index 0de4c22459..5e2c71af44 100644
--- a/apps/web/core/components/readonly/date.tsx
+++ b/apps/web/core/components/readonly/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import { Calendar } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 
 export type TReadonlyDateProps = {
@@ -19,8 +19,8 @@ export const ReadonlyDate = observer(function ReadonlyDate(props: TReadonlyDateP
   const formattedDate = value ? renderFormattedDate(getDate(value), formatToken) : null;
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
-      {!hideIcon && <Calendar className="size-4 flex-shrink-0" />}
+    <div className={cn("flex items-center gap-1 text-13", className)}>
+      {!hideIcon && <CalendarLayoutIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{formattedDate ?? placeholder ?? t("common.none")}</span>
     </div>
   );
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
index 926759824c..166755c830 100644
--- a/packages/tailwind-config/index.css
+++ b/packages/tailwind-config/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./variables.css";
+@import "./typography.css";
 @import "./animations.css";
 @source "../**/*.{ts,tsx}";
 
diff --git a/packages/tailwind-config/typography.css b/packages/tailwind-config/typography.css
index ffa7582def..d8a2628e51 100644
--- a/packages/tailwind-config/typography.css
+++ b/packages/tailwind-config/typography.css
@@ -1,360 +1,127 @@
-/* Text Styles  */
-.font-h1-regular {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@theme {
+  /* ---------- Font family ---------- */
+  --font-family-*: initial;
+  --font-family-heading: Inter;
+  --font-family-body: Inter;
+  --font-family-code: IBM Mono;
+
+  /* ---------- Font weight ---------- */
+  --font-weight-*: initial;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+
+  /* ---------- Font size ---------- */
+  --text-*: initial;
+  --text-9: 0.5625rem;
+  --text-10: 0.625rem;
+  --text-11: 0.6875rem;
+  --text-12: 0.75rem;
+  --text-13: 0.8125rem;
+  --text-14: 0.875rem;
+  --text-16: 1rem;
+  --text-18: 1.125rem;
+  --text-20: 1.25rem;
+  --text-24: 1.5rem;
+  --text-28: 1.75rem;
+  --text-32: 2rem;
+  --text-40: 2.5rem;
+
+  /* ---------- Letter spacing ---------- */
+  --tracking-*: initial;
+  --tracking-extra-tight: -0.025rem;
+  --tracking-tight: -0.05rem;
+  --tracking-default: 0;
+  --tracking-wide: 0.05rem;
 }
 
-.font-h1-medium {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-h1-* {
+  font-size: var(--text-32);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h1-semibold {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-h2-* {
+  font-size: var(--text-28);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h1-bold {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-h3-* {
+  font-size: var(--text-24);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-regular {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@utility text-h4-* {
+  font-size: var(--text-20);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-medium {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-h5-* {
+  font-size: var(--text-16);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-semibold {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-h6-* {
+  font-size: var(--text-14);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-bold {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-body-md-* {
+  --font-size: var(--text-16);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-regular {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@utility text-body-sm-* {
+  --font-size: var(--text-14);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-medium {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-body-xs-* {
+  --font-size: var(--text-13);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-semibold {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-caption-md-* {
+  font-size: var(--text-12);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-bold {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-caption-sm-* {
+  font-size: var(--text-11);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h4-regular {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h4-medium {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h4-semibold {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h4-bold {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-h5-regular {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h5-medium {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h5-semibold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h5-bold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-h6-regular {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h6-medium {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h6-semibold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h6-bold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-body-md-light {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-md-regular {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-md-medium {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-md-semibold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-body-sm-light {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-sm-regular {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-sm-medium {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-sm-semibold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-body-xs-light {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-xs-regular {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-xs-medium {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-xs-semibold {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-caption-md-regular {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-caption-md-medium {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-caption-md-semibold {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-caption-sm-regular {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-caption-sm-medium {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-caption-sm-semibold {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-caption-xs-regular {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-caption-xs-medium {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-caption-xs-semibold {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 600;
+@utility text-caption-xs-* {
+  --font-size: var(--text-10);
+  font-size: var(--font-size);
+  line-height: 1;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
index 921657299c..398df6d2e1 100644
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@@ -70,44 +70,6 @@
   --border-width-lg: 2px;
   --border-width-xl: 2.5px;
   --default-border-width: 1px;
-
-  /* ---------- Font family ---------- */
-  --font-family-*: initial;
-  --font-family-heading: Inter;
-  --font-family-body: Inter;
-  --font-family-code: IBM Mono;
-
-  /* ---------- Font weight ---------- */
-  --font-weight-*: initial;
-  --font-weight-light: Light;
-  --font-weight-regular: 400;
-  --font-weight-medium: medium;
-  --font-weight-semi-bold: semi bold;
-  --font-weight-bold: bold;
-  --font-weight-heavy: heavy;
-
-  /* ---------- Font size ---------- */
-  --text-*: initial;
-  --text-9: 0.5625rem;
-  --text-10: 0.625rem;
-  --text-11: 0.6875rem;
-  --text-12: 0.75rem;
-  --text-13: 0.8125rem;
-  --text-14: 0.875rem;
-  --text-16: 1rem;
-  --text-18: 1.125rem;
-  --text-20: 1.25rem;
-  --text-24: 1.5rem;
-  --text-28: 1.75rem;
-  --text-32: 2rem;
-  --text-40: 2.5rem;
-
-  /* ---------- Letter spacing ---------- */
-  --tracking-*: initial;
-  --tracking-extra-tight: -0.025rem;
-  --tracking-tight: -0.05rem;
-  --tracking-default: 0;
-  --tracking-wide: 0.05rem;
 }
 
 @theme {
@@ -182,117 +144,116 @@
 
   /* --------- Extended colors ---------- */
   /* Purple colors */
-  --extended-palette-purple-25: oklch(0.981 0.0054 297.73);
-  --extended-palette-purple-50: oklch(0.9421 0.0162 293.74);
-  --extended-palette-purple-100: oklch(0.8808 0.0343 293.03);
-  --extended-palette-purple-200: oklch(0.779 0.0639 293.01);
-  --extended-palette-purple-300: oklch(0.6978 0.0888 291.44);
-  --extended-palette-purple-400: oklch(0.6139 0.1164 290.19);
-  --extended-palette-purple-500: oklch(0.5527 0.1361 288.8);
-  --extended-palette-purple-600: oklch(0.4895 0.157 286.65);
-  --extended-palette-purple-700: oklch(0.42 0.1303 287.25);
-  --extended-palette-purple-800: oklch(0.3617 0.1077 287.53);
-  --extended-palette-purple-900: oklch(0.2861 0.0795 287.41);
-  --extended-palette-purple-950: oklch(0.219 0.0552 288.93);
+  --extended-color-purple-25: oklch(0.981 0.0054 297.73);
+  --extended-color-purple-50: oklch(0.9421 0.0162 293.74);
+  --extended-color-purple-100: oklch(0.8808 0.0343 293.03);
+  --extended-color-purple-200: oklch(0.779 0.0639 293.01);
+  --extended-color-purple-300: oklch(0.6978 0.0888 291.44);
+  --extended-color-purple-400: oklch(0.6139 0.1164 290.19);
+  --extended-color-purple-500: oklch(0.5527 0.1361 288.8);
+  --extended-color-purple-600: oklch(0.4895 0.157 286.65);
+  --extended-color-purple-700: oklch(0.42 0.1303 287.25);
+  --extended-color-purple-800: oklch(0.3617 0.1077 287.53);
+  --extended-color-purple-900: oklch(0.2861 0.0795 287.41);
+  --extended-color-purple-950: oklch(0.219 0.0552 288.93);
 
   /* Orange colors */
-  --extended-palette-orange-25: oklch(0.9856 0.0084 56.32);
-  --extended-palette-orange-50: oklch(0.964 0.0219 58.79);
-  --extended-palette-orange-100: oklch(0.9152 0.0522 56.77);
-  --extended-palette-orange-200: oklch(0.8504 0.097 56.87);
-  --extended-palette-orange-300: oklch(0.801 0.1323 55.27);
-  --extended-palette-orange-400:oklch(0.7563 0.1644 52.56);
-  --extended-palette-orange-500: oklch(0.7177 0.1905 47.86);
-  --extended-palette-orange-600: oklch(0.6601 0.1884 45.09);
-  --extended-palette-orange-700: oklch(0.5737 0.162 45.72);
-  --extended-palette-orange-800: oklch(0.5059 0.141467 46.3267);
-  --extended-palette-orange-900:oklch(0.3897 0.105571 48.3415);
-  --extended-palette-orange-950: oklch(0.2896 0.0746 51.86);
+  --extended-color-orange-25: oklch(0.9856 0.0084 56.32);
+  --extended-color-orange-50: oklch(0.964 0.0219 58.79);
+  --extended-color-orange-100: oklch(0.9152 0.0522 56.77);
+  --extended-color-orange-200: oklch(0.8504 0.097 56.87);
+  --extended-color-orange-300: oklch(0.801 0.1323 55.27);
+  --extended-color-orange-400: oklch(0.7563 0.1644 52.56);
+  --extended-color-orange-500: oklch(0.7177 0.1905 47.86);
+  --extended-color-orange-600: oklch(0.6601 0.1884 45.09);
+  --extended-color-orange-700: oklch(0.5737 0.162 45.72);
+  --extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
+  --extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
+  --extended-color-orange-950: oklch(0.2896 0.0746 51.86);
 
   /* Crimson colors */
-  --extended-palette-crimson-25: oklch(0.9805 0.0066 28.83);
-  --extended-palette-crimson-50: oklch(0.9503 0.0186 21.57);
-  --extended-palette-crimson-100: oklch(0.8847 0.0455 23.1);
-  --extended-palette-crimson-200: oklch(0.791 0.0874 23.59);
-  --extended-palette-crimson-300: oklch(0.72 0.124 24.83);
-  --extended-palette-crimson-400: oklch(0.6556 0.1604 26.47);
-  --extended-palette-crimson-500: oklch(0.5954 0.1956 28.51);
-  --extended-palette-crimson-600: oklch(0.5284 0.185 28.96);
-  --extended-palette-crimson-700: oklch(0.4754 0.1647 28.98);
-  --extended-palette-crimson-800: oklch(0.4209 0.1438 29.01);
-  --extended-palette-crimson-900: oklch(0.3249 0.106 28.39);
-  --extended-palette-crimson-950: oklch(0.2457 0.0742 27.56);
-  
+  --extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
+  --extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
+  --extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
+  --extended-color-crimson-200: oklch(0.791 0.0874 23.59);
+  --extended-color-crimson-300: oklch(0.72 0.124 24.83);
+  --extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
+  --extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
+  --extended-color-crimson-600: oklch(0.5284 0.185 28.96);
+  --extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
+  --extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
+  --extended-color-crimson-900: oklch(0.3249 0.106 28.39);
+  --extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
+
   /* Emerald colors */
-  --extended-palette-emerald-25: oklch(0.9884 0.0082 157.1);
-  --extended-palette-emerald-50: oklch(0.9563 0.0256 154.47);
-  --extended-palette-emerald-100: oklch(0.9153 0.0531 153.59);
-  --extended-palette-emerald-200: oklch(0.8679 0.0829 153.02);
-  --extended-palette-emerald-300: oklch(0.8221 0.1121 152.16);
-  --extended-palette-emerald-400:oklch(0.7785 0.1398 151.07);
-  --extended-palette-emerald-500: oklch(0.7401 0.166 149.61);
-  --extended-palette-emerald-600: oklch(0.6567 0.1599 148.98);
-  --extended-palette-emerald-700: oklch(0.5883 0.1413 149.06);
-  --extended-palette-emerald-800: oklch(0.4965 0.1172 149.18);
-  --extended-palette-emerald-900: oklch(0.4003 0.0918 149.37);
-  --extended-palette-emerald-950: oklch(0.2982 0.0631 150.55);
+  --extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
+  --extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
+  --extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
+  --extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
+  --extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
+  --extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
+  --extended-color-emerald-500: oklch(0.7401 0.166 149.61);
+  --extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
+  --extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
+  --extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
+  --extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
+  --extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
 
   /* Pink colors */
-  --extended-palette-pink-25: oklch(0.9828 0.005 345.28);
-  --extended-palette-pink-50: oklch(0.9394 0.0201 340.71);
-  --extended-palette-pink-100: oklch(0.8759 0.0418 339.71);
-  --extended-palette-pink-200: oklch(0.805 0.0664 341.18);
-  --extended-palette-pink-300: oklch(0.736 0.0938 342.16);
-  --extended-palette-pink-400: oklch(0.6673 0.1206 342.89);
-  --extended-palette-pink-500: oklch(0.6185 0.1388 344.06);
-  --extended-palette-pink-600: oklch(0.5704 0.1574 345.25);
-  --extended-palette-pink-700: oklch(0.4947 0.1333 344.88);
-  --extended-palette-pink-800: oklch(0.4162 0.1108 344.66);
-  --extended-palette-pink-900: oklch(0.326 0.0807 344.57);
-  --extended-palette-pink-950: oklch(0.2474 0.0553 344.95);
+  --extended-color-pink-25: oklch(0.9828 0.005 345.28);
+  --extended-color-pink-50: oklch(0.9394 0.0201 340.71);
+  --extended-color-pink-100: oklch(0.8759 0.0418 339.71);
+  --extended-color-pink-200: oklch(0.805 0.0664 341.18);
+  --extended-color-pink-300: oklch(0.736 0.0938 342.16);
+  --extended-color-pink-400: oklch(0.6673 0.1206 342.89);
+  --extended-color-pink-500: oklch(0.6185 0.1388 344.06);
+  --extended-color-pink-600: oklch(0.5704 0.1574 345.25);
+  --extended-color-pink-700: oklch(0.4947 0.1333 344.88);
+  --extended-color-pink-800: oklch(0.4162 0.1108 344.66);
+  --extended-color-pink-900: oklch(0.326 0.0807 344.57);
+  --extended-color-pink-950: oklch(0.2474 0.0553 344.95);
 
   /* yellow colors */
-  --extended-palette-yellow-25: oklch(0.989 0.0073 80.72);
-  --extended-palette-yellow-50: oklch(0.9631 0.0268 85.66);
-  --extended-palette-yellow-100: oklch(0.9297 0.0545 86.15);
-  --extended-palette-yellow-200: oklch(0.8893 0.0843 85.3);
-  --extended-palette-yellow-300: oklch(0.8522 0.1121 85.14);
-  --extended-palette-yellow-400: oklch(0.8167 0.1342 83.9);
-  --extended-palette-yellow-500: oklch(0.79 0.1466 82.04);
-  --extended-palette-yellow-600: oklch(0.7399 0.1487 79.36);
-  --extended-palette-yellow-700: oklch(0.683 0.1365 79.84);
-  --extended-palette-yellow-800: oklch(0.5522 0.1093 80.44);
-  --extended-palette-yellow-900: oklch(0.425 0.0824 81.46);
-  --extended-palette-yellow-950: oklch(0.3142 0.0586 82.21);
+  --extended-color-yellow-25: oklch(0.989 0.0073 80.72);
+  --extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
+  --extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
+  --extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
+  --extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
+  --extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
+  --extended-color-yellow-500: oklch(0.79 0.1466 82.04);
+  --extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
+  --extended-color-yellow-700: oklch(0.683 0.1365 79.84);
+  --extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
+  --extended-color-yellow-900: oklch(0.425 0.0824 81.46);
+  --extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
 
   /* indigo colors */
-  --extended-palette-indigo-25: oklch(0.9813 0.0074 260.73);
-  --extended-palette-indigo-50: oklch(0.9415 0.022 263.19);
-  --extended-palette-indigo-100: oklch(0.8828 0.045 263.07);
-  --extended-palette-indigo-200: oklch(0.7852 0.086 263.89);
-  --extended-palette-indigo-300: oklch(0.7066 0.121 263.57);
-  --extended-palette-indigo-400: oklch(0.6322 0.1556 262.59);
-  --extended-palette-indigo-500: oklch(0.579 0.1807 262.31);
-  --extended-palette-indigo-600: oklch(0.5291 0.2045 262.05);
-  --extended-palette-indigo-700: oklch(0.458 0.1753 262.2);
-  --extended-palette-indigo-800: oklch(0.3862 0.1436 262.12);
-  --extended-palette-indigo-900: oklch(0.3019 0.1051 262.16); 
-  --extended-palette-indigo-950: oklch(0.2308 0.0713 261.96);
+  --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
+  --extended-color-indigo-50: oklch(0.9415 0.022 263.19);
+  --extended-color-indigo-100: oklch(0.8828 0.045 263.07);
+  --extended-color-indigo-200: oklch(0.7852 0.086 263.89);
+  --extended-color-indigo-300: oklch(0.7066 0.121 263.57);
+  --extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
+  --extended-color-indigo-500: oklch(0.579 0.1807 262.31);
+  --extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
+  --extended-color-indigo-700: oklch(0.458 0.1753 262.2);
+  --extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
+  --extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
+  --extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
 
   /* grey colors */
-  --extended-palette-grey-25: oklch(0.9851 0 0);
-  --extended-palette-grey-50: oklch(0.9461 0 0);
-  --extended-palette-grey-100: oklch(0.9067 0 0);
-  --extended-palette-grey-200: oklch(0.8297 0 0);
-  --extended-palette-grey-300: oklch(0.7668 0 0);
-  --extended-palette-grey-400: oklch(0.6993 0 0);
-  --extended-palette-grey-500: oklch(0.65 0 0);
-  --extended-palette-grey-600: oklch(0.5999 0 0);
-  --extended-palette-grey-700: oklch(0.5208 0 0);
-  --extended-palette-grey-800: oklch(0.4386 0 0);
-  --extended-palette-grey-900: oklch(0.3407 0 0);
-  --extended-palette-grey-950: oklch(0.2603 0 0);
-
+  --extended-color-grey-25: oklch(0.9851 0 0);
+  --extended-color-grey-50: oklch(0.9461 0 0);
+  --extended-color-grey-100: oklch(0.9067 0 0);
+  --extended-color-grey-200: oklch(0.8297 0 0);
+  --extended-color-grey-300: oklch(0.7668 0 0);
+  --extended-color-grey-400: oklch(0.6993 0 0);
+  --extended-color-grey-500: oklch(0.65 0 0);
+  --extended-color-grey-600: oklch(0.5999 0 0);
+  --extended-color-grey-700: oklch(0.5208 0 0);
+  --extended-color-grey-800: oklch(0.4386 0 0);
+  --extended-color-grey-900: oklch(0.3407 0 0);
+  --extended-color-grey-950: oklch(0.2603 0 0);
 
   /* -------------------- Light mode custom(derived) colors -------------------- */
   /* Background colors */
@@ -404,34 +365,34 @@
   --text-color-link-secondary: var(--color-neutral-900);
 
   /* Label colors */
-  --label-indigo-bg: var(--extended-palette-indigo-100);
-  --label-indigo-bg-strong: var(--extended-palette-indigo-700);
-  --label-indigo-hover: var(--extended-palette-indigo-300);
-  --label-indigo-icon: var(--extended-palette-indigo-700);
-  --label-indigo-text: var(--extended-palette-indigo-700);
+  --label-indigo-bg: var(--extended-color-indigo-100);
+  --label-indigo-bg-strong: var(--extended-color-indigo-700);
+  --label-indigo-hover: var(--extended-color-indigo-300);
+  --label-indigo-icon: var(--extended-color-indigo-700);
+  --label-indigo-text: var(--extended-color-indigo-700);
   --label-indigo-border: hsla(0, 0%, 100%, 0);
-  --label-indigo-focus: var(--extended-palette-indigo-500);
-  --label-emerald-bg: var(--extended-palette-emerald-50);
-  --label-emerald-bg-strong: var(--extended-palette-emerald-600);
-  --label-emerald-hover: var(--extended-palette-emerald-200);
-  --label-emerald-icon: var(--extended-palette-emerald-600);
-  --label-emerald-text: var(--extended-palette-emerald-800);
+  --label-indigo-focus: var(--extended-color-indigo-500);
+  --label-emerald-bg: var(--extended-color-emerald-50);
+  --label-emerald-bg-strong: var(--extended-color-emerald-600);
+  --label-emerald-hover: var(--extended-color-emerald-200);
+  --label-emerald-icon: var(--extended-color-emerald-600);
+  --label-emerald-text: var(--extended-color-emerald-800);
   --label-emerald-border: hsla(0, 0%, 100%, 0);
-  --label-emerald-focus: var(--extended-palette-emerald-700);
-  --label-grey-bg: var(--extended-palette-grey-50);
-  --label-grey-bg-strong: var(--extended-palette-grey-700);
-  --label-grey-hover: var(--extended-palette-grey-100);
-  --label-grey-icon: var(--extended-palette-grey-700);
-  --label-grey-text: var(--extended-palette-grey-700);
+  --label-emerald-focus: var(--extended-color-emerald-700);
+  --label-grey-bg: var(--extended-color-grey-50);
+  --label-grey-bg-strong: var(--extended-color-grey-700);
+  --label-grey-hover: var(--extended-color-grey-100);
+  --label-grey-icon: var(--extended-color-grey-700);
+  --label-grey-text: var(--extended-color-grey-700);
   --label-grey-border: hsla(0, 0%, 100%, 0);
-  --label-grey-focus: var(--extended-palette-grey-500);
-  --label-crimson-bg: var(--extended-palette-crimson-50);
-  --label-crimson-bg-strong: var(--extended-palette-crimson-700);
-  --label-crimson-hover: var(--extended-palette-crimson-100);
-  --label-crimson-icon: var(--extended-palette-crimson-700);
-  --label-crimson-text: var(--extended-palette-crimson-700);
+  --label-grey-focus: var(--extended-color-grey-500);
+  --label-crimson-bg: var(--extended-color-crimson-50);
+  --label-crimson-bg-strong: var(--extended-color-crimson-700);
+  --label-crimson-hover: var(--extended-color-crimson-100);
+  --label-crimson-icon: var(--extended-color-crimson-700);
+  --label-crimson-text: var(--extended-color-crimson-700);
   --label-crimson-border: hsla(0, 0%, 100%, 0);
-  --label-crimson-focus: var(--extended-palette-crimson-500);
+  --label-crimson-focus: var(--extended-color-crimson-500);
 
   /* Illustration colors */
   --illustration-fill-white: var(--color-neutral-white);
@@ -626,34 +587,34 @@
       --text-color-link-secondary: var(--color-neutral-1100);
 
       /* Label colors */
-      --label-indigo-bg: var(--extended-palette-indigo-800);
-      --label-indigo-bg-strong: var(--extended-palette-indigo-500);
-      --label-indigo-hover: var(--extended-palette-indigo-700);
-      --label-indigo-icon: var(--extended-palette-indigo-500);
-      --label-indigo-text: var(--extended-palette-indigo-500);
+      --label-indigo-bg: var(--extended-color-indigo-800);
+      --label-indigo-bg-strong: var(--extended-color-indigo-500);
+      --label-indigo-hover: var(--extended-color-indigo-700);
+      --label-indigo-icon: var(--extended-color-indigo-500);
+      --label-indigo-text: var(--extended-color-indigo-500);
       --label-indigo-border: hsla(0, 0%, 100%, 0);
-      --label-indigo-focus: var(--extended-palette-indigo-400);
-      --label-emerald-bg: var(--extended-palette-emerald-700);
-      --label-emerald-bg-strong: var(--extended-palette-emerald-600);
-      --label-emerald-hover: var(--extended-palette-emerald-800);
-      --label-emerald-icon: var(--extended-palette-emerald-600);
-      --label-emerald-text: var(--extended-palette-emerald-400);
+      --label-indigo-focus: var(--extended-color-indigo-400);
+      --label-emerald-bg: var(--extended-color-emerald-700);
+      --label-emerald-bg-strong: var(--extended-color-emerald-600);
+      --label-emerald-hover: var(--extended-color-emerald-800);
+      --label-emerald-icon: var(--extended-color-emerald-600);
+      --label-emerald-text: var(--extended-color-emerald-400);
       --label-emerald-border: hsla(0, 0%, 100%, 0);
-      --label-emerald-focus: var(--extended-palette-emerald-700);
-      --label-grey-bg: var(--extended-palette-grey-800);
-      --label-grey-bg-strong: var(--extended-palette-grey-500);
-      --label-grey-hover: var(--extended-palette-grey-700);
-      --label-grey-icon: var(--extended-palette-grey-500);
-      --label-grey-text: var(--extended-palette-grey-500);
+      --label-emerald-focus: var(--extended-color-emerald-700);
+      --label-grey-bg: var(--extended-color-grey-800);
+      --label-grey-bg-strong: var(--extended-color-grey-500);
+      --label-grey-hover: var(--extended-color-grey-700);
+      --label-grey-icon: var(--extended-color-grey-500);
+      --label-grey-text: var(--extended-color-grey-500);
       --label-grey-border: hsla(0, 0%, 100%, 0);
-      --label-grey-focus: var(--extended-palette-grey-400);
-      --label-crimson-bg: var(--extended-palette-crimson-800);
-      --label-crimson-bg-strong: var(--extended-palette-crimson-500);
-      --label-crimson-hover: var(--extended-palette-crimson-700);
-      --label-crimson-icon: var(--extended-palette-crimson-500);
-      --label-crimson-text: var(--extended-palette-crimson-500);
+      --label-grey-focus: var(--extended-color-grey-400);
+      --label-crimson-bg: var(--extended-color-crimson-800);
+      --label-crimson-bg-strong: var(--extended-color-crimson-500);
+      --label-crimson-hover: var(--extended-color-crimson-700);
+      --label-crimson-icon: var(--extended-color-crimson-500);
+      --label-crimson-text: var(--extended-color-crimson-500);
       --label-crimson-border: hsla(0, 0%, 100%, 0);
-      --label-crimson-focus: var(--extended-palette-crimson-400);
+      --label-crimson-focus: var(--extended-color-crimson-400);
 
       /* Illustration colors */
       --illustration-fill-white: var(--color-neutral-400);
@@ -666,3 +627,18 @@
     }
   }
 }
+
+@utility outline-* {
+  outline-width: --value(--border-width-*);
+  outline-color: --value(--border-color-*);
+}
+
+@utility px-page-x {
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+}
+
+@utility py-page-y {
+  padding-top: 1.35rem;
+  padding-bottom: 1.35rem;
+}