diff --git a/apps/blog/src/app/global.css b/apps/blog/src/app/global.css
index b9f9e62842..4f14b3ae25 100644
--- a/apps/blog/src/app/global.css
+++ b/apps/blog/src/app/global.css
@@ -1,7 +1,14 @@
 @import "tailwindcss";
-@import '@prisma-docs/eclipse/styles/globals.css';
-@import 'fumadocs-ui/css/shadcn.css';
-@import 'fumadocs-ui/css/preset.css';
-@import 'fumadocs-openapi/css/preset.css';
-@import '@prisma-docs/ui/styles';
+@import "@prisma-docs/eclipse/styles/globals.css";
+@import "fumadocs-ui/css/shadcn.css";
+@import "fumadocs-ui/css/preset.css";
+@import "fumadocs-openapi/css/preset.css";
+@import "@prisma-docs/ui/styles";
 
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: var(--font-sans-display);
+}
diff --git a/apps/docs/src/components/eclipse-showcase.tsx b/apps/docs/src/components/eclipse-showcase.tsx
index 666c51e3ba..d7d1e37c33 100644
--- a/apps/docs/src/components/eclipse-showcase.tsx
+++ b/apps/docs/src/components/eclipse-showcase.tsx
@@ -197,7 +197,7 @@ export function EclipseShowcase() {
               Square (6px)
             </span>
           </div>
-          <div className="px-6 py-4 bg-background-orm rounded-high border border-stroke-orm">
+          <div className="px-6 py-4 bg-background-orm rounded-square-high border border-stroke-orm">
             <span className="text-sm font-medium text-foreground-neutral">
               High (12px)
             </span>
@@ -216,7 +216,7 @@ export function EclipseShowcase() {
           Semantic Patterns
         </h3>
 
-        <div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+        <div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
           <div className="flex items-start gap-3">
             <span className="text-foreground-error">⚠️</span>
             <div>
@@ -230,7 +230,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+        <div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
           <div className="flex items-start gap-3">
             <span className="text-foreground-success">✓</span>
             <div>
@@ -244,7 +244,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+        <div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
           <div className="flex items-start gap-3">
             <span className="text-foreground-warning">!</span>
             <div>
@@ -265,12 +265,12 @@ export function EclipseShowcase() {
           Gradients
         </h3>
         <div className="space-y-4">
-          <div className="h-24 bg-gradient-orm rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-orm rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-orm-reverse">
               ORM Gradient
             </span>
           </div>
-          <div className="h-24 bg-gradient-ppg rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-ppg rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-ppg-reverse">
               PPG Gradient
             </span>
diff --git a/apps/eclipse/content/design-system/atoms/input.mdx b/apps/eclipse/content/design-system/atoms/input.mdx
index 1585a9b1a5..2dfa3109b3 100644
--- a/apps/eclipse/content/design-system/atoms/input.mdx
+++ b/apps/eclipse/content/design-system/atoms/input.mdx
@@ -441,7 +441,7 @@ The Input component uses design tokens and can be customized:
 - **Invalid text**: `text-foreground-error` when `aria-invalid` is true
 - **Placeholder**: `text-foreground-neutral-weak`
 - **Radius**: `rounded-square` (6px)
-- **Focus shadow**: `shadow-drop-low`
+- **Focus shadow**: `shadow-box-low`
 - **Transition**: Smooth color transitions
 
 Customize by passing `className` props:
diff --git a/apps/eclipse/content/design-system/index.mdx b/apps/eclipse/content/design-system/index.mdx
index bc307cc17d..e75fd002a2 100644
--- a/apps/eclipse/content/design-system/index.mdx
+++ b/apps/eclipse/content/design-system/index.mdx
@@ -192,16 +192,16 @@ Eclipse provides a comprehensive spacing system for margins and padding.
 ### Padding Utilities
 
 ```tsx
-<div className="p-padding-block-container">Container padding</div>
+<div className="p-6">Container padding</div>
 <div className="p-padding-inline-element-lg">Element padding</div>
 ```
 
 ## Border Radius
 
 ```tsx
-<div className="rounded-low">Low radius (3px)</div>
+<div className="rounded-square-low">Low radius (3px)</div>
 <div className="rounded-square">Square radius (6px)</div>
-<div className="rounded-high">High radius (12px)</div>
+<div className="rounded-square-high">High radius (12px)</div>
 <div className="rounded-circle">Circular</div>
 ```
 
diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 3c9d6bf5a4..1b2589a6f7 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -21,3 +21,10 @@ header &[data-search-full] {
 #nd-page {
     @apply @container;
 }
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: var(--font-sans-display);
+}
diff --git a/apps/eclipse/src/components/eclipse-showcase.tsx b/apps/eclipse/src/components/eclipse-showcase.tsx
index 666c51e3ba..d7d1e37c33 100644
--- a/apps/eclipse/src/components/eclipse-showcase.tsx
+++ b/apps/eclipse/src/components/eclipse-showcase.tsx
@@ -197,7 +197,7 @@ export function EclipseShowcase() {
               Square (6px)
             </span>
           </div>
-          <div className="px-6 py-4 bg-background-orm rounded-high border border-stroke-orm">
+          <div className="px-6 py-4 bg-background-orm rounded-square-high border border-stroke-orm">
             <span className="text-sm font-medium text-foreground-neutral">
               High (12px)
             </span>
@@ -216,7 +216,7 @@ export function EclipseShowcase() {
           Semantic Patterns
         </h3>
 
-        <div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+        <div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
           <div className="flex items-start gap-3">
             <span className="text-foreground-error">⚠️</span>
             <div>
@@ -230,7 +230,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+        <div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
           <div className="flex items-start gap-3">
             <span className="text-foreground-success">✓</span>
             <div>
@@ -244,7 +244,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+        <div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
           <div className="flex items-start gap-3">
             <span className="text-foreground-warning">!</span>
             <div>
@@ -265,12 +265,12 @@ export function EclipseShowcase() {
           Gradients
         </h3>
         <div className="space-y-4">
-          <div className="h-24 bg-gradient-orm rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-orm rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-orm-reverse">
               ORM Gradient
             </span>
           </div>
-          <div className="h-24 bg-gradient-ppg rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-ppg rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-ppg-reverse">
               PPG Gradient
             </span>
diff --git a/packages/eclipse/GETTING_STARTED.md b/packages/eclipse/GETTING_STARTED.md
index 5fe8176644..3da9e6e927 100644
--- a/packages/eclipse/GETTING_STARTED.md
+++ b/packages/eclipse/GETTING_STARTED.md
@@ -110,7 +110,7 @@ Use consistent spacing throughout your app:
 <div className="m-margin-md">Content with margin</div>
 
 // Padding
-<div className="p-padding-block-container">
+<div className="p-6">
   Container with padding
 </div>
 
@@ -143,9 +143,9 @@ Use consistent spacing throughout your app:
 ### Border Radius
 
 ```tsx
-<div className="rounded-low">Low radius (3px)</div>
+<div className="rounded-square-low">Low radius (3px)</div>
 <div className="rounded-square">Default radius (6px)</div>
-<div className="rounded-high">High radius (12px)</div>
+<div className="rounded-square-high">High radius (12px)</div>
 <div className="rounded-circle">Circular (999px)</div>
 ```
 
@@ -200,21 +200,21 @@ import { Button } from "@prisma-docs/eclipse";
 
 ```tsx
 // Error message
-<div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+<div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
   <p className="text-foreground-error">
     An error occurred
   </p>
 </div>
 
 // Success message
-<div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+<div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
   <p className="text-foreground-success">
     Operation successful!
   </p>
 </div>
 
 // Warning message
-<div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+<div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
   <p className="text-foreground-warning">
     Please review this carefully
   </p>
@@ -224,11 +224,11 @@ import { Button } from "@prisma-docs/eclipse";
 ### Gradients
 
 ```tsx
-<div className="bg-gradient-orm text-foreground-orm-reverse p-8 rounded-high">
+<div className="bg-gradient-orm text-foreground-orm-reverse p-8 rounded-square-high">
   ORM Branded Section
 </div>
 
-<div className="bg-gradient-ppg text-foreground-ppg-reverse p-8 rounded-high">
+<div className="bg-gradient-ppg text-foreground-ppg-reverse p-8 rounded-square-high">
   PPG Branded Section
 </div>
 ```
@@ -243,7 +243,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@prisma-docs/eclipse/lib/cn";
 
 const cardVariants = cva(
-  "rounded-high border",
+  "rounded-square-high border",
   {
     variants: {
       variant: {
@@ -251,9 +251,9 @@ const cardVariants = cva(
         elevated: "bg-background-default border-stroke-neutral shadow-lg",
       },
       padding: {
-        sm: "p-padding-block-container-tight",
-        md: "p-padding-block-container",
-        lg: "p-padding-block-container-loose",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-12",
       },
     },
     defaultVariants: {
@@ -307,7 +307,7 @@ const fontFamily = tokens.typography.fontFamily.sans; // "Inter"
 ### Responsive Design
 
 ```tsx
-<div className="p-padding-block-container-tight md:p-padding-block-container lg:p-padding-block-container-loose">
+<div className="p-4 md:p-6 lg:p-12">
   Responsive padding
 </div>
 ```
@@ -334,8 +334,7 @@ const fontFamily = tokens.typography.fontFamily.sans; // "Inter"
 <div className="
   bg-background-default
   text-foreground-neutral
-  p-padding-block-container
-  rounded-high
+  rounded-square-high
   border border-stroke-neutral
   shadow-lg
 ">
diff --git a/packages/eclipse/TOKENS.md b/packages/eclipse/TOKENS.md
index 546b4acca5..861e4ed6e2 100644
--- a/packages/eclipse/TOKENS.md
+++ b/packages/eclipse/TOKENS.md
@@ -151,55 +151,21 @@ Margin tokens for consistent spacing between elements:
 - `margin-xl` - 32px
 - `margin-4xl` - 48px
 
-### Padding
-
-#### Container Padding (Block)
-
-- `padding-block-container-tighter` - 12px
-- `padding-block-container-tight` - 16px
-- `padding-block-container` - 24px
-- `padding-block-container-loose` - 48px
-- `padding-block-container-looser` - 48px
-
-#### Container Padding (Inline)
-
-- `padding-inline-container-tighter` - 12px
-- `padding-inline-container-tight` - 16px
-- `padding-inline-container` - 24px
-- `padding-inline-container-loose` - 48px
-- `padding-inline-container-looser` - 48px
-
-#### Element Padding (Block)
-
-- `padding-block-element-lg` - 4px
-- `padding-block-element-xl` - 6px
-- `padding-block-element-2xl` - 8px
-- `padding-block-element-3xl` - 10px
-- `padding-block-element-4xl` - 12px
-
-#### Element Padding (Inline)
-
-- `padding-inline-element-lg` - 8px
-- `padding-inline-element-xl` - 10px
-- `padding-inline-element-2xl` - 12px
-- `padding-inline-element-3xl` - 16px
-- `padding-inline-element-4xl` - 16px
-
 ### Size
 
 Element sizing tokens:
 
-- `size-2xs` - 12px
-- `size-xs` - 16px
-- `size-sm` - 20px
-- `size-md` - 24px
-- `size-lg` - 28px
-- `size-xl` - 32px
-- `size-2xl` - 36px
-- `size-3xl` - 40px
-- `size-4xl` - 48px
-- `size-5xl` - 64px
-- `size-6xl` - 96px
+- `size-element-2xs` - 12px
+- `size-element-xs` - 16px
+- `size-element-sm` - 20px
+- `size-element-md` - 24px
+- `size-element-lg` - 28px
+- `size-element-xl` - 32px
+- `size-element-2xl` - 36px
+- `size-element-3xl` - 40px
+- `size-element-4xl` - 48px
+- `size-element-5xl` - 64px
+- `size-element-6xl` - 96px
 
 ---
 
@@ -207,9 +173,9 @@ Element sizing tokens:
 
 ### Font Families
 
-- `font-sans-display` - Inter (for display text)
+- `font-sans-display` - Mona Sans (for display text)
 - `font-sans` - Inter (body text)
-- `font-mono` - JetBrains Mono (code)
+- `font-mono` - Mona Sans Mono (code)
 
 ### Font Sizes
 
@@ -239,17 +205,17 @@ All font sizes include corresponding line heights:
 ## Border Radius Tokens
 
 - `rounded-circle` - 999px (fully rounded)
-- `rounded-low` - 3px
+- `rounded-square-low` - 3px
 - `rounded-square` - 6px
-- `rounded-high` - 12px
+- `rounded-square-high` - 12px
 
 ---
 
 ## Blur Tokens
 
-- `blur-background-low` - 16px
-- `blur-background` - 24px
-- `blur-background-high` - 40px
+- `blur-surface-low` - 16px
+- `blur-surface` - 24px
+- `blur-surface-high` - 40px
 
 ---
 
@@ -280,11 +246,6 @@ All font sizes include corresponding line heights:
 // Margin
 <div className="m-margin-md">Spaced content</div>
 
-// Padding
-<div className="p-padding-block-container">
-  Container with padding
-</div>
-
 // Sizes
 <div className="w-size-xl h-size-xl">
   Square element
@@ -311,7 +272,7 @@ All font sizes include corresponding line heights:
 ### Using Border Radius
 
 ```tsx
-<div className="rounded-high p-4 bg-background-neutral">
+<div className="rounded-square-high p-4 bg-background-neutral">
   Card with rounded corners
 </div>
 
diff --git a/packages/eclipse/src/components/action.tsx b/packages/eclipse/src/components/action.tsx
index 2e9d9c0a32..e173a76037 100644
--- a/packages/eclipse/src/components/action.tsx
+++ b/packages/eclipse/src/components/action.tsx
@@ -22,15 +22,14 @@ const actionVariants = cva(
         violet: "bg-background-violet text-foreground-violet",
         yellow: "bg-background-yellow text-foreground-yellow",
         neutral: "bg-background-neutral text-foreground-neutral",
-        "neutral-reversed":
-          "bg-background-neutral-reverse text-foreground-neutral-reverse",
+        "neutral-reversed": "bg-background-neutral-reverse text-foreground-neutral-reverse",
       },
       size: {
-        lg: "h-7 w-7 p-1.5",
-        "2xl": "h-9 w-9 p-2",
-        nav: "h-10 w-10 p-2.5",
-        "4xl": "h-12 w-12 p-3",
-        "5xl": "h-16 w-16 p-4",
+        lg: "size-element-lg p-1.5",
+        "2xl": "size-element-2xl p-2",
+        "3xl": "size-element-3xl p-2.5",
+        "4xl": "size-element-4xl p-3",
+        "5xl": "size-element-5xl p-4",
       },
       isFramed: {
         true: "border",
@@ -67,42 +66,42 @@ const actionVariants = cva(
       {
         color: "cyan",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-cyan",
       },
       {
         color: "fuchsia",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-fuchsia",
       },
       {
         color: "lime",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-lime",
       },
       {
         color: "pink",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-pink",
       },
       {
         color: "purple",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-purple",
       },
       {
         color: "sky",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-sky",
       },
       {
         color: "violet",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-violet",
       },
       {
         color: "yellow",
         isFramed: true,
-        className: "border-stroke-neutral",
+        className: "border-stroke-yellow",
       },
       {
         color: "neutral",
diff --git a/packages/eclipse/src/components/avatar.tsx b/packages/eclipse/src/components/avatar.tsx
index 2e8b95e44a..b7a51566c7 100644
--- a/packages/eclipse/src/components/avatar.tsx
+++ b/packages/eclipse/src/components/avatar.tsx
@@ -6,7 +6,7 @@ import { cn } from "../lib/cn";
  * Define Avatar variants using CVA
  */
 const avatarVariants = cva(
-  "bg-background-neutral-reverse hover:bg-background-neutral-reverse-strong text-foreground-neutral-reverse relative flex shrink-0 overflow-hidden rounded-square uppercase flex items-center justify-center font-semibold",
+  "bg-background-neutral-reverse hover:bg-background-neutral-reverse-strong font-semibold text-foreground-neutral-reverse relative flex shrink-0 overflow-hidden rounded-square uppercase flex items-center justify-center",
   {
     variants: {
       disabled: {
@@ -14,10 +14,10 @@ const avatarVariants = cva(
         false: "",
       },
       size: {
-        lg: "not-prose text-2xs",
-        xl: "not-prose text-2xs",
-        "2xl": "text-sm",
-        "3xl": "text-sm",
+        lg: "size-element-lg text-2xs",
+        xl: "size-element-xl text-2xs",
+        "2xl": "size-element-2xl text-sm",
+        "3xl": "size-element-3xl text-sm",
       },
     },
     defaultVariants: {
@@ -39,13 +39,6 @@ const avatarContentVariants = cva("", {
   },
 });
 
-const sizeMap = {
-  lg: { width: 28, height: 28 },
-  xl: { width: 32, height: 32 },
-  "2xl": { width: 36, height: 36 },
-  "3xl": { width: 40, height: 40 },
-} as const;
-
 /**
  * Avatar component props
  */
@@ -116,22 +109,14 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       src,
       alt,
       children,
-      style,
       ...props
     },
     ref,
   ) => {
-    const dimensions = sizeMap[size];
-
     return (
       <div
         ref={ref}
         className={cn(avatarVariants({ size, disabled, className }))}
-        style={{
-          width: `${dimensions?.width}px`,
-          height: `${dimensions?.height}px`,
-          ...style,
-        }}
         {...props}
       >
         {format === "image" && src ? (
diff --git a/packages/eclipse/src/components/badge.tsx b/packages/eclipse/src/components/badge.tsx
index df443b5994..2ad0433f04 100644
--- a/packages/eclipse/src/components/badge.tsx
+++ b/packages/eclipse/src/components/badge.tsx
@@ -6,7 +6,7 @@ import { cn } from "../lib/cn";
  * Define badge variants using CVA based on Figma design
  */
 const badgeVariants = cva(
-  "inline-flex flex-row justify-center items-center px-2 py-1 min-w-[24px] rounded-square text-xs font-medium",
+  "inline-flex flex-row justify-center items-center px-2 h-element-lg min-w-[24px] rounded-square text-xs font-medium",
   {
     variants: {
       color: {
diff --git a/packages/eclipse/src/components/banner.tsx b/packages/eclipse/src/components/banner.tsx
index 51d81bdf29..de684a5d90 100644
--- a/packages/eclipse/src/components/banner.tsx
+++ b/packages/eclipse/src/components/banner.tsx
@@ -9,20 +9,16 @@ import { cn } from "../lib/cn";
  * Banner variants based on color prop
  */
 const bannerVariants = cva(
-  "text-sm font-medium py-3 px-[27px] flex items-center justify-center",
+  "text-sm font-medium py-3 px-6 flex items-center justify-center",
   {
     variants: {
       color: {
-        default:
-          "bg-background-neutral-reverse text-foreground-neutral-reverse",
+        default: "bg-background-neutral-reverse text-foreground-neutral-reverse",
         ppg: "bg-background-ppg-reverse-strong text-foreground-ppg-reverse",
         orm: "bg-background-orm-reverse-strong text-foreground-orm-reverse",
-        error:
-          "bg-background-error-reverse-strong text-foreground-error-reverse",
-        success:
-          "bg-background-success-reverse-strong text-foreground-success-reverse",
-        warning:
-          "bg-background-warning-reverse-strong text-foreground-warning-reverse",
+        error: "bg-background-error-reverse-strong text-foreground-error-reverse",
+        success: "bg-background-success-reverse-strong text-foreground-success-reverse",
+        warning: "bg-background-warning-reverse-strong text-foreground-warning-reverse",
         gradient: "bg-gradient-ppg-orm text-foreground-neutral",
       },
     },
diff --git a/packages/eclipse/src/components/button.tsx b/packages/eclipse/src/components/button.tsx
index 3e18871bd1..dce4185b38 100644
--- a/packages/eclipse/src/components/button.tsx
+++ b/packages/eclipse/src/components/button.tsx
@@ -2,25 +2,25 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/cn";
 
-const buttonVariants = cva("", {
+const buttonVariants = cva(
+  "flex flex-row justify-center items-center rounded-square transition-all duration-50 cursor-pointer disabled:cursor-not-allowed",
+  {
   variants: {
     variant: {
-      ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong",
-      orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong",
-      default:
-        "bg-background-default border border-stroke-neutral text-foreground-neutral",
-      "default-stronger":
-        "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong",
-      "default-weaker": "bg-background-neutral text-foreground-neutral-weaker",
-      error:
-        "bg-background-error-reverse text-foreground-error-reverse hover:bg-backΩground-error-reverse-strong focus-visible:ring-stroke-error",
+      ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong shadow-box-low",
+      orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong shadow-box-low",
+      "default-stronger": "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong transition-all duration-50",
+      default: "bg-background-default hover:bg-background-neutral border border-stroke-neutral hover:border-stroke-neutral-strong text-foreground-neutral shadow-box-low",
+      "default-weaker": "bg-transparent hover:bg-background-neutral text-foreground-neutral",
+      error: "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong focus-visible:ring-stroke-error",
+      success: "bg-background-success-reverse text-foreground-success-reverse hover:bg-background-success-reverse-strong focus-visible:ring-stroke-success",
       link: "text-foreground-neutral underline-offset-4 hover:underline focus-visible:ring-foreground-neutral",
     },
     size: {
-      lg: "px-2 py-1 text-sm rounded-square",
-      xl: "py-1.5 px-2.5 text-md rounded-square",
-      "2xl": "py-2 px-3 text-lg rounded-square",
-      "4xl": "py-3 px-4 text-xl rounded-square",
+      lg: "px-2 h-element-lg text-sm",
+      xl: "px-3 h-element-xl text-md",
+      "2xl": "px-3  h-element-2xl text-lg",
+      "4xl": "px-4  h-element-4xl text-xl",
     },
   },
   defaultVariants: {
diff --git a/packages/eclipse/src/components/card.tsx b/packages/eclipse/src/components/card.tsx
index 9e8cb90e20..fb6f0ca1a2 100644
--- a/packages/eclipse/src/components/card.tsx
+++ b/packages/eclipse/src/components/card.tsx
@@ -11,9 +11,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     <div
       ref={ref}
       className={cn(
-        "rounded-square border border-stroke-neutral bg-card text-card-foreground shadow-box-low p-4 flex flex-col gap-4 hover:border-stroke-neutral-strong hover:shadow-drop transition-colors",
+        "rounded-square border border-stroke-neutral bg-card text-card-foreground shadow-box-low p-4 flex flex-col gap-4 hover:border-stroke-neutral-strong hover:shadow-box transition-colors",
         active &&
-          "border-stroke-neutral-strong shadow-drop bg-surface-elevated",
+          "border-stroke-neutral-strong shadow-box bg-surface-elevated",
         className,
       )}
       {...props}
diff --git a/packages/eclipse/src/components/checkbox.tsx b/packages/eclipse/src/components/checkbox.tsx
index 1f840d5f90..73bd954d37 100644
--- a/packages/eclipse/src/components/checkbox.tsx
+++ b/packages/eclipse/src/components/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-low bg-background-default border border-stroke-neutral focus-visible:shadow-box-low focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-background-neutral-weak disabled:border-stroke-neutral-weak data-[state=checked]:text-foreground-neutral disabled:text-foreground-neutral-weaker",
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-square-low bg-background-default border border-stroke-neutral focus-visible:shadow-box-low focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-background-neutral-weak disabled:border-stroke-neutral-weak data-[state=checked]:text-foreground-neutral disabled:text-foreground-neutral-weaker",
       className,
     )}
     {...props}
diff --git a/packages/eclipse/src/components/input.tsx b/packages/eclipse/src/components/input.tsx
index 7583590895..e59a422f43 100644
--- a/packages/eclipse/src/components/input.tsx
+++ b/packages/eclipse/src/components/input.tsx
@@ -12,16 +12,16 @@ export interface InputProps extends Omit<
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, size, ...props }, ref) => {
     const sizes = {
-      lg: "padding-btn-lg",
-      xl: "padding-btn-xl",
-      "2xl": "padding-btn-2xl",
+      lg: " px-2 h-element-lg file:py-1 file:px-2",
+      xl: "px-3 h-element-xl file:py-1.5 file:px-3",
+      "2xl": "px-3 h-element-2xl file:py-2 file:px-3",
     };
 
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-square border border-stroke-neutral bg-background-default px-3 py-1 text-foreground-neutral transition-colors placeholder:text-foreground-neutral-weak focus-visible:outline-none focus-visible:shadow-drop-low focus-visible:ring-ring focus-visible:border-stroke-neutral-strong disabled:cursor-not-allowed disabled:text-foreground-neutral-weaker disabled:placeholder:text-foreground-neutral-weaker disabled:border-stroke-neutral-weak disabled:bg-background-neutral-weak aria-invalid:border-stroke-error aria-invalid:text-foreground-error aria-invalid:focus-visible:border-stroke-error text-sm",
+          "flex w-full rounded-square border border-stroke-neutral bg-background-default px-3 py-1 text-foreground-neutral transition-colors placeholder:text-foreground-neutral-weak focus-visible:outline-none focus-visible:shadow-box-low focus-visible:ring-ring focus-visible:border-stroke-neutral-strong disabled:cursor-not-allowed disabled:text-foreground-neutral-weaker disabled:placeholder:text-foreground-neutral-weaker disabled:border-stroke-neutral-weak disabled:bg-background-neutral-weak aria-invalid:border-stroke-error aria-invalid:text-foreground-error aria-invalid:focus-visible:border-stroke-error text-sm",
           sizes[size ?? "lg"],
           className,
         )}
diff --git a/packages/eclipse/src/components/label.tsx b/packages/eclipse/src/components/label.tsx
index 2690831b6e..28e540c532 100644
--- a/packages/eclipse/src/components/label.tsx
+++ b/packages/eclipse/src/components/label.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/cn";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "font-medium text-foreground-neutral peer-disabled:text-foreground-neutral-weaker text-sm peer-disabled:cursor-not-allowed",
 );
 
 const Label = React.forwardRef<
diff --git a/packages/eclipse/src/components/statistic.tsx b/packages/eclipse/src/components/statistic.tsx
index 41ee0fd8bf..9d7e0f5f75 100644
--- a/packages/eclipse/src/components/statistic.tsx
+++ b/packages/eclipse/src/components/statistic.tsx
@@ -27,7 +27,7 @@ export default function Statistic({
 
       {/* Value + Measure */}
       <div className="flex items-baseline gap-2 leading-8">
-        <span className="text-2xl font-bold text-foreground-neutral font-mona-sans">
+        <span className="text-2xl font-bold text-foreground-neutral font-sans-display">
           {value}
         </span>
         <span className="text-sm text-foreground-neutral-weak">{measure}</span>
diff --git a/packages/eclipse/src/components/tooltip.tsx b/packages/eclipse/src/components/tooltip.tsx
index 6b9893d8bb..c10a67d90d 100644
--- a/packages/eclipse/src/components/tooltip.tsx
+++ b/packages/eclipse/src/components/tooltip.tsx
@@ -24,7 +24,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md tooltip px-3 py-1.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        "z-50 overflow-hidden rounded-md backdrop-blur-surface-low bg-black/50 px-3 py-1.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
         className,
       )}
       {...props}
diff --git a/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf b/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf
deleted file mode 100644
index a509c9553f..0000000000
Binary files a/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf b/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf
deleted file mode 100644
index 0f863ad42f..0000000000
Binary files a/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf b/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf
deleted file mode 100644
index f48a8da1ff..0000000000
Binary files a/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf b/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf
deleted file mode 100644
index e3b027a43e..0000000000
Binary files a/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf b/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf
deleted file mode 100644
index 607b9c5bd9..0000000000
Binary files a/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/mona-sans-italic-variable.woff2 b/packages/eclipse/src/static/fonts/mona-sans-italic-variable.woff2
new file mode 100644
index 0000000000..25ad052d40
Binary files /dev/null and b/packages/eclipse/src/static/fonts/mona-sans-italic-variable.woff2 differ
diff --git a/packages/eclipse/src/static/fonts/mona-sans-mono-variable.woff2 b/packages/eclipse/src/static/fonts/mona-sans-mono-variable.woff2
new file mode 100644
index 0000000000..f4ccd616f1
Binary files /dev/null and b/packages/eclipse/src/static/fonts/mona-sans-mono-variable.woff2 differ
diff --git a/packages/eclipse/src/static/fonts/mona-sans-variable.woff2 b/packages/eclipse/src/static/fonts/mona-sans-variable.woff2
new file mode 100644
index 0000000000..8f744267ce
Binary files /dev/null and b/packages/eclipse/src/static/fonts/mona-sans-variable.woff2 differ
diff --git a/packages/eclipse/src/static/fonts/monaspace_neon_var.woff b/packages/eclipse/src/static/fonts/monaspace_neon_var.woff
deleted file mode 100644
index 0df0364fd8..0000000000
Binary files a/packages/eclipse/src/static/fonts/monaspace_neon_var.woff and /dev/null differ
diff --git a/packages/eclipse/src/static/fonts/monaspace_neon_var.woff2 b/packages/eclipse/src/static/fonts/monaspace_neon_var.woff2
deleted file mode 100644
index 9b7d48d487..0000000000
Binary files a/packages/eclipse/src/static/fonts/monaspace_neon_var.woff2 and /dev/null differ
diff --git a/packages/eclipse/src/styles/fonts.css b/packages/eclipse/src/styles/fonts.css
index a7fb99e4c7..41c7a72bc2 100644
--- a/packages/eclipse/src/styles/fonts.css
+++ b/packages/eclipse/src/styles/fonts.css
@@ -1,41 +1,25 @@
 /* Mona Sans Font Faces */
 
 @font-face {
-    font-family: "Mona Sans";
-    src: url("../static/fonts/MonaSans-Regular.ttf") format("truetype");
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
+  font-display: swap;
+  font-family: "Mona Sans";
+  font-style: normal;
+  font-weight: 200 900;
+  src: url("../static/fonts/mona-sans-variable.woff2") format("woff2");
 }
 
 @font-face {
-    font-family: "Mona Sans";
-    src: url("../static/fonts/MonaSans-Medium.ttf") format("truetype");
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  font-display: swap;
+  font-family: "Mona Sans";
+  font-style: italic;
+  font-weight: 200 900;
+  src: url("../static/fonts/mona-sans-italic-variable.woff2") format("woff2");
 }
 
 @font-face {
-    font-family: "Mona Sans";
-    src: url("../static/fonts/MonaSans-SemiBold.ttf") format("truetype");
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Mona Sans";
-    src: url("../static/fonts/MonaSans-Bold.ttf") format("truetype");
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "Mona Sans";
-    src: url("../static/fonts/MonaSans-ExtraBold.ttf") format("truetype");
-    font-weight: 800;
-    font-style: normal;
-    font-display: swap;
-}
+  font-display: swap;
+  font-family: "Mona Sans Mono";
+  font-style: normal;
+  font-weight: 200 900;
+  src: url("../static/fonts/mona-sans-mono-variable.woff2") format("woff2");
+}
\ No newline at end of file
diff --git a/packages/eclipse/src/styles/globals.css b/packages/eclipse/src/styles/globals.css
index 3a1b7c546f..b29df8d1f7 100644
--- a/packages/eclipse/src/styles/globals.css
+++ b/packages/eclipse/src/styles/globals.css
@@ -4,746 +4,357 @@
 @source "../components/**/*.tsx";
 @source "../components/ui/**/*.tsx";
 
-@font-face {
-    font-family: "Monaspace Neon Var";
-    src:
-        url("../static/fonts/monaspace_neon_var.woff") format("woff"),
-        url("../static/fonts/monaspace_neon_var.woff2") format("woff2");
-}
-
 @theme {
-    /* Box Shadow */
-    --shadow-drop-low: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-    --shadow-drop:
-        0 8px 8px -8px rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);
-    --shadow-drop-high:
-        0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);
-    --shadow-box-low: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-
-    /* Border Radius */
-    --radius-circle: 999px;
-    --radius-low: 3px;
-    --radius-square: 6px;
-    --radius-high: 12px;
-
-    /* Spacing - Margin */
-    --spacing-margin-4xs: 4px;
-    --spacing-margin-3xs: 8px;
-    --spacing-margin-2xs: 12px;
-    --spacing-margin-xs: 16px;
-    --spacing-margin-sm: 20px;
-    --spacing-margin-md: 24px;
-    --spacing-margin-lg: 28px;
-    --spacing-margin-xl: 32px;
-    --spacing-margin-4xl: 48px;
-
-    /* Spacing - Padding Container */
-    --spacing-padding-block-container-tighter: 12px;
-    --spacing-padding-block-container-tight: 16px;
-    --spacing-padding-block-container: 24px;
-    --spacing-padding-block-container-loose: 48px;
-    --spacing-padding-block-container-looser: 48px;
-    --spacing-padding-inline-container-tighter: 12px;
-    --spacing-padding-inline-container-tight: 16px;
-    --spacing-padding-inline-container: 24px;
-    --spacing-padding-inline-container-loose: 48px;
-    --spacing-padding-inline-container-looser: 48px;
-
-    /* Spacing - Padding Element */
-    --spacing-padding-block-element-lg: 4px;
-    --spacing-padding-block-element-xl: 6px;
-    --spacing-padding-block-element-2xl: 8px;
-    --spacing-padding-block-element-3xl: 10px;
-    --spacing-padding-block-element-4xl: 12px;
-    --spacing-padding-inline-element-lg: 8px;
-    --spacing-padding-inline-element-xl: 10px;
-    --spacing-padding-inline-element-2xl: 12px;
-    --spacing-padding-inline-element-3xl: 16px;
-    --spacing-padding-inline-element-4xl: 16px;
-
-    /* Spacing - Size */
-    --spacing-size-2xs: 12px;
-    --spacing-size-xs: 16px;
-    --spacing-size-sm: 20px;
-    --spacing-size-md: 24px;
-    --spacing-size-lg: 28px;
-    --spacing-size-xl: 32px;
-    --spacing-size-2xl: 36px;
-    --spacing-size-3xl: 40px;
-    --spacing-size-4xl: 48px;
-    --spacing-size-5xl: 64px;
-    --spacing-size-6xl: 96px;
-
-    /* Blur */
-    --blur-background-low: 16px;
-    --blur-background: 24px;
-    --blur-background-high: 40px;
-    --font-mona-sans:
-        "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        "Helvetica Neue", Arial, sans-serif;
-    /* Typography - Font Families */
-    --font-family-display: var(--font-mona-sans), Inter, sans-serif;
-    --font-family-sans-display: Inter, sans-serif;
-    --font-family-sans: Inter, system-ui, sans-serif;
-    --font-family-mono: Monaspace Neon Var;
-
-    /* Tailwind Font Family Mappings */
-    --font-display: var(--font-mona-sans), Inter, sans-serif;
-
-    /* Typography - Font Sizes */
-    --font-size-2xs: 11px;
-    --font-size-xs: 12px;
-    --font-size-sm: 14px;
-    --font-size-md: 16px;
-    --font-size-lg: 18px;
-    --font-size-xl: 20px;
-    --font-size-2xl: 24px;
-    --font-size-3xl: 30px;
-
-    /* Typography - Line Heights */
-    --line-height-2xs: 16px;
-    --line-height-xs: 16px;
-    --line-height-sm: 20px;
-    --line-height-md: 24px;
-    --line-height-lg: 28px;
-    --line-height-xl: 28px;
-    --line-height-2xl: 32px;
-    --line-height-3xl: 36px;
-
-    /* Typography - Font Weights */
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 750;
-    --font-weight-ultra-bold: 900;
-
-    /* Colors - Background (Tailwind v4 auto-generates bg-* utilities) */
-    --color-background-default: #ffffff;
-    --color-background-default-050: rgb(255 255 255 / 0.5);
-    --color-background-default-075: rgb(255 255 255 / 0.75);
-    --color-background-neutral-strong: #e5e7eb;
-    --color-background-neutral: #f3f4f6;
-    --color-background-neutral-weak: #f9fafb;
-    --color-background-neutral-weaker: #fcfdfd;
-    --color-background-neutral-reverse-strong: #111827;
-    --color-background-neutral-reverse: #1f2937;
-    --color-background-ppg-strong: #ccfbf1;
-    --color-background-ppg: #f0fdfa;
-    --color-background-ppg-reverse-strong: #0d9488;
-    --color-background-ppg-reverse: #14b8a6;
-    --color-background-orm-strong: #e0e7ff;
-    --color-background-orm: #eef2ff;
-    --color-background-orm-reverse-strong: #4f46e5;
-    --color-background-orm-reverse: #6366f1;
-    --color-background-error-strong: #fee2e2;
-    --color-background-error: #fef2f2;
-    --color-background-error-reverse-strong: #dc2626;
-    --color-background-error-reverse: #ef4444;
-    --color-background-success-strong: #ccfbf1;
-    --color-background-success: #f0fdfa;
-    --color-background-success-reverse-strong: #0d9488;
-    --color-background-success-reverse: #14b8a6;
-    --color-background-warning-strong: #ffedd5;
-    --color-background-warning: #fff7ed;
-    --color-background-warning-reverse-strong: #ea580c;
-    --color-background-warning-reverse: #f97316;
-    --color-background-cyan-strong: #cffafe;
-    --color-background-cyan: #ecfeff;
-    --color-background-fuchsia-strong: #fae8ff;
-    --color-background-fuchsia: #fdf4ff;
-    --color-background-lime-strong: #ecfccb;
-    --color-background-lime: #f7fee7;
-    --color-background-pink-strong: #fce7f3;
-    --color-background-pink: #fdf2f8;
-    --color-background-purple-strong: #f3e8ff;
-    --color-background-purple: #faf5ff;
-    --color-background-sky-strong: #e0f2fe;
-    --color-background-sky: #f0f9ff;
-    --color-background-violet-strong: #ede9fe;
-    --color-background-violet: #f5f3ff;
-    --color-background-yellow-strong: #fef9c3;
-    --color-background-yellow: #fefce8;
-
-    /* Foreground colors */
-    --color-foreground-neutral: #111827;
-    --color-foreground-neutral-weak: #6b7280;
-    --color-foreground-neutral-weaker: #9ca3af;
-    --color-foreground-neutral-reverse: #ffffff;
-    --color-foreground-neutral-reverse-weak: #9ca3af;
-    --color-foreground-ppg-strong: #0f766e;
-    --color-foreground-ppg: #0d9488;
-    --color-foreground-ppg-weak: #14b8a6;
-    --color-foreground-ppg-reverse: #ffffff;
-    --color-foreground-ppg-reverse-weak: #99f6e4;
-    --color-foreground-orm-strong: #4338ca;
-    --color-foreground-orm: #4f46e5;
-    --color-foreground-orm-weak: #6366f1;
-    --color-foreground-orm-reverse: #ffffff;
-    --color-foreground-orm-reverse-weak: #c7d2fe;
-    --color-foreground-error-strong: #b91c1c;
-    --color-foreground-error: #dc2626;
-    --color-foreground-error-weak: #ef4444;
-    --color-foreground-error-reverse: #ffffff;
-    --color-foreground-error-reverse-weak: #fecaca;
-    --color-foreground-success-strong: #0f766e;
-    --color-foreground-success: #0d9488;
-    --color-foreground-success-weak: #14b8a6;
-    --color-foreground-success-reverse: #ffffff;
-    --color-foreground-success-reverse-weak: #99f6e4;
-    --color-foreground-warning-strong: #c2410c;
-    --color-foreground-warning: #ea580c;
-    --color-foreground-warning-weak: #f97316;
-    --color-foreground-warning-reverse: #ffffff;
-    --color-foreground-warning-reverse-weak: #fed7aa;
-    --color-foreground-cyan-strong: #0e7490;
-    --color-foreground-cyan: #0891b2;
-    --color-foreground-cyan-weak: #06b6d4;
-    --color-foreground-fuchsia-strong: #a21caf;
-    --color-foreground-fuchsia: #c026d3;
-    --color-foreground-fuchsia-weak: #d946ef;
-    --color-foreground-lime-strong: #4d7c0f;
-    --color-foreground-lime: #65a30d;
-    --color-foreground-lime-weak: #84cc16;
-    --color-foreground-pink-strong: #be185d;
-    --color-foreground-pink: #db2777;
-    --color-foreground-pink-weak: #ec4899;
-    --color-foreground-purple-strong: #7e22ce;
-    --color-foreground-purple: #9333ea;
-    --color-foreground-purple-weak: #a855f7;
-    --color-foreground-sky-strong: #0369a1;
-    --color-foreground-sky: #0284c7;
-    --color-foreground-sky-weak: #0ea5e9;
-    --color-foreground-violet-strong: #6d28d9;
-    --color-foreground-violet: #7c3aed;
-    --color-foreground-violet-weak: #8b5cf6;
-    --color-foreground-yellow-strong: #a16207;
-    --color-foreground-yellow: #ca8a04;
-    --color-foreground-yellow-weak: #eab308;
-
-    /* Stroke colors */
-    --color-stroke-neutral-stronger: #111827;
-    --color-stroke-neutral-strong: #d1d5db;
-    --color-stroke-neutral: #e5e7eb;
-    --color-stroke-neutral-weak: #f3f4f6;
-    --color-stroke-ppg: #0d9488;
-    --color-stroke-orm: #4f46e5;
-    --color-stroke-error: #dc2626;
-    --color-stroke-success: #0d9488;
-    --color-stroke-warning: #ea580c;
-    --color-stroke-cyan: #0891b2;
-    --color-stroke-fuchsia: #c026d3;
-    --color-stroke-lime: #65a30d;
-    --color-stroke-pink: #db2777;
-    --color-stroke-purple: #9333ea;
-    --color-stroke-sky: #0284c7;
-    --color-stroke-violet: #7c3aed;
-    --color-stroke-yellow: #ca8a04;
-
-    --chart-1: var(--color-foreground-pink);
-    --chart-2: var(--color-foreground-fuchsia);
-    --chart-3: var(--color-foreground-lime);
-    --chart-4: var(--color-foreground-sky);
-    --chart-5: var(--color-foreground-purple);
-    --chart-6: var(--color-foreground-neutral-weak);
+  /* Blur */
+  --blur-surface-low: 1rem;
+  --blur-surface: 1.5rem;
+  --blur-surface-high: 2.5rem;
+
+  /* Box Shadow */
+  --shadow-box-low: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.04);
+  --shadow-box: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.04);
+  --shadow-box-high: 0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.04);
+
+  /* Border Radius */
+  --radius-circle: 999px;
+  --radius-square-low: 0.1875rem;
+  --radius-square: 0.375rem;
+  --radius-square-high: 0.75rem;
+
+  /* Spacing - Margin */
+  --spacing-margin-4xs: 0.25rem;
+  --spacing-margin-3xs: 0.5rem;
+  --spacing-margin-2xs: 0.75rem;
+  --spacing-margin-xs: 1rem;
+  --spacing-margin-sm: 1.25rem;
+  --spacing-margin-md: 1.5rem;
+  --spacing-margin-lg: 1.75rem;
+  --spacing-margin-xl: 2rem;
+  --spacing-margin-4xl: 3rem;
+
+  /* Spacing - Element Sizing */
+  --spacing-element-2xs: 0.75rem;
+  --spacing-element-xs: 1rem;
+  --spacing-element-sm: 1.25rem;
+  --spacing-element-md: 1.5rem;
+  --spacing-element-lg: 1.75rem;
+  --spacing-element-xl: 2rem;
+  --spacing-element-2xl: 2.25rem;
+  --spacing-element-3xl: 2.5rem;
+  --spacing-element-4xl: 3rem;
+  --spacing-element-5xl: 4rem;
+  --spacing-element-6xl: 6rem;
+
+  /* Typography - Font Families */
+  --font-sans-display: "Mona Sans", "Inter", "Roboto", "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+  --font-sans-display-settings: "ss01" on, "ss02" on, "ss05" on, "ss06" on;
+  --font-sans: "Inter", "Roboto", "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+  --font-sans-settings: "cv01" on, "cv02" on, "cv06" on, "cv07" on, "cv08" on, "cv10" on;
+  --font-mono: "Mona Sans Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  --font-mono--settings: "ss01" on, "ss02" on, "ss05" on, "ss06" on;
+
+  /* Typography - Font Sizes with paired Line Heights */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-md: 1rem;
+  --text-md--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+
+  /* Background Colors */
+  --color-background-default: #ffffff;
+  --color-background-default-050: rgb(255 255 255 / 0.5);
+  --color-background-default-075: rgb(255 255 255 / 0.75);
+  --color-background-neutral-strong: #e5e7eb;
+  --color-background-neutral: #f3f4f6;
+  --color-background-neutral-weak: #f9fafb;
+  --color-background-neutral-weaker: #fcfdfd;
+  --color-background-neutral-reverse-strong: #111827;
+  --color-background-neutral-reverse: #1f2937;
+  --color-background-ppg-strong: #ccfbf1;
+  --color-background-ppg: #f0fdfa;
+  --color-background-ppg-reverse-strong: #0d9488;
+  --color-background-ppg-reverse: #14b8a6;
+  --color-background-orm-strong: #e0e7ff;
+  --color-background-orm: #eef2ff;
+  --color-background-orm-reverse-strong: #4f46e5;
+  --color-background-orm-reverse: #6366f1;
+  --color-background-error-strong: #fee2e2;
+  --color-background-error: #fef2f2;
+  --color-background-error-reverse-strong: #dc2626;
+  --color-background-error-reverse: #ef4444;
+  --color-background-success-strong: #ccfbf1;
+  --color-background-success: #f0fdfa;
+  --color-background-success-reverse-strong: #0d9488;
+  --color-background-success-reverse: #14b8a6;
+  --color-background-warning-strong: #ffedd5;
+  --color-background-warning: #fff7ed;
+  --color-background-warning-reverse-strong: #ea580c;
+  --color-background-warning-reverse: #f97316;
+  --color-background-cyan-strong: #cffafe;
+  --color-background-cyan: #ecfeff;
+  --color-background-fuchsia-strong: #fae8ff;
+  --color-background-fuchsia: #fdf4ff;
+  --color-background-lime-strong: #ecfccb;
+  --color-background-lime: #f7fee7;
+  --color-background-pink-strong: #fce7f3;
+  --color-background-pink: #fdf2f8;
+  --color-background-purple-strong: #f3e8ff;
+  --color-background-purple: #faf5ff;
+  --color-background-sky-strong: #e0f2fe;
+  --color-background-sky: #f0f9ff;
+  --color-background-violet-strong: #ede9fe;
+  --color-background-violet: #f5f3ff;
+  --color-background-yellow-strong: #fef9c3;
+  --color-background-yellow: #fefce8;
+
+  /* Foreground Colors */
+  --color-foreground-neutral: #111827;
+  --color-foreground-neutral-weak: #6b7280;
+  --color-foreground-neutral-weaker: #9ca3af;
+  --color-foreground-neutral-reverse: #ffffff;
+  --color-foreground-neutral-reverse-weak: #9ca3af;
+  --color-foreground-ppg-strong: #0f766e;
+  --color-foreground-ppg: #0d9488;
+  --color-foreground-ppg-weak: #14b8a6;
+  --color-foreground-ppg-reverse: #ffffff;
+  --color-foreground-ppg-reverse-weak: #99f6e4;
+  --color-foreground-orm-strong: #4338ca;
+  --color-foreground-orm: #4f46e5;
+  --color-foreground-orm-weak: #6366f1;
+  --color-foreground-orm-reverse: #ffffff;
+  --color-foreground-orm-reverse-weak: #c7d2fe;
+  --color-foreground-error-strong: #b91c1c;
+  --color-foreground-error: #dc2626;
+  --color-foreground-error-weak: #ef4444;
+  --color-foreground-error-reverse: #ffffff;
+  --color-foreground-error-reverse-weak: #fecaca;
+  --color-foreground-success-strong: #0f766e;
+  --color-foreground-success: #0d9488;
+  --color-foreground-success-weak: #14b8a6;
+  --color-foreground-success-reverse: #ffffff;
+  --color-foreground-success-reverse-weak: #99f6e4;
+  --color-foreground-warning-strong: #c2410c;
+  --color-foreground-warning: #ea580c;
+  --color-foreground-warning-weak: #f97316;
+  --color-foreground-warning-reverse: #ffffff;
+  --color-foreground-warning-reverse-weak: #fed7aa;
+  --color-foreground-cyan-strong: #0e7490;
+  --color-foreground-cyan: #0891b2;
+  --color-foreground-cyan-weak: #06b6d4;
+  --color-foreground-fuchsia-strong: #a21caf;
+  --color-foreground-fuchsia: #c026d3;
+  --color-foreground-fuchsia-weak: #d946ef;
+  --color-foreground-lime-strong: #4d7c0f;
+  --color-foreground-lime: #65a30d;
+  --color-foreground-lime-weak: #84cc16;
+  --color-foreground-pink-strong: #be185d;
+  --color-foreground-pink: #db2777;
+  --color-foreground-pink-weak: #ec4899;
+  --color-foreground-purple-strong: #7e22ce;
+  --color-foreground-purple: #9333ea;
+  --color-foreground-purple-weak: #a855f7;
+  --color-foreground-sky-strong: #0369a1;
+  --color-foreground-sky: #0284c7;
+  --color-foreground-sky-weak: #0ea5e9;
+  --color-foreground-violet-strong: #6d28d9;
+  --color-foreground-violet: #7c3aed;
+  --color-foreground-violet-weak: #8b5cf6;
+  --color-foreground-yellow-strong: #a16207;
+  --color-foreground-yellow: #ca8a04;
+  --color-foreground-yellow-weak: #eab308;
+
+  /* Stroke Colors */
+  --color-stroke-neutral-stronger: #111827;
+  --color-stroke-neutral-strong: #d1d5db;
+  --color-stroke-neutral: #e5e7eb;
+  --color-stroke-neutral-weak: #f3f4f6;
+  --color-stroke-ppg: #0d9488;
+  --color-stroke-orm: #4f46e5;
+  --color-stroke-error: #dc2626;
+  --color-stroke-success: #0d9488;
+  --color-stroke-warning: #ea580c;
+  --color-stroke-cyan: #0891b2;
+  --color-stroke-fuchsia: #c026d3;
+  --color-stroke-lime: #65a30d;
+  --color-stroke-pink: #db2777;
+  --color-stroke-purple: #9333ea;
+  --color-stroke-sky: #0284c7;
+  --color-stroke-violet: #7c3aed;
+  --color-stroke-yellow: #ca8a04;
+
+  /* Chart Colors */
+  --chart-1: var(--color-foreground-pink);
+  --chart-2: var(--color-foreground-fuchsia);
+  --chart-3: var(--color-foreground-lime);
+  --chart-4: var(--color-foreground-sky);
+  --chart-5: var(--color-foreground-purple);
+  --chart-6: var(--color-foreground-neutral-weak);
 }
 
 .dark {
-    /* Background colors */
-    --color-background-default: #030712;
-    --color-background-default-050: rgb(10 14 20 / 0.5);
-    --color-background-default-075: rgb(10 14 20 / 0.75);
-    --color-background-neutral-strong: #374151;
-    --color-background-neutral: #1f2937;
-    --color-background-neutral-weak: #111827;
-    --color-background-neutral-weaker: #0a101d;
-    --color-background-neutral-reverse-strong: #f9fafb;
-    --color-background-neutral-reverse: #f3f4f6;
-    --color-background-ppg-strong: #134e4a;
-    --color-background-ppg: #042f2e;
-    --color-background-ppg-reverse-strong: #2dd4bf;
-    --color-background-ppg-reverse: #14b8a6;
-    --color-background-orm-strong: #312e81;
-    --color-background-orm: #1e1b4b;
-    --color-background-orm-reverse-strong: #818cf8;
-    --color-background-orm-reverse: #6366f1;
-    --color-background-error-strong: #7f1d1d;
-    --color-background-error: #450a0a;
-    --color-background-error-reverse-strong: #f87171;
-    --color-background-error-reverse: #ef4444;
-    --color-background-success-strong: #134e4a;
-    --color-background-success: #042f2e;
-    --color-background-success-reverse-strong: #2dd4bf;
-    --color-background-success-reverse: #14b8a6;
-    --color-background-warning-strong: #7c2d12;
-    --color-background-warning: #431407;
-    --color-background-warning-reverse-strong: #fb923c;
-    --color-background-warning-reverse: #f97316;
-    --color-background-cyan-strong: #164e63;
-    --color-background-cyan: #083344;
-    --color-background-fuchsia-strong: #701a75;
-    --color-background-fuchsia: #4a044e;
-    --color-background-lime-strong: #365314;
-    --color-background-lime: #1a2e05;
-    --color-background-pink-strong: #831843;
-    --color-background-pink: #500724;
-    --color-background-purple-strong: #581c87;
-    --color-background-purple: #3b0764;
-    --color-background-sky-strong: #0c4a6e;
-    --color-background-sky: #082f49;
-    --color-background-violet-strong: #4c1d95;
-    --color-background-violet: #2e1065;
-    --color-background-yellow-strong: #713f12;
-    --color-background-yellow: #422006;
-
-    /* Foreground colors */
-    --color-foreground-neutral: #f9fafb;
-    --color-foreground-neutral-weak: #9ca3af;
-    --color-foreground-neutral-weaker: #6b7280;
-    --color-foreground-neutral-reverse: #030712;
-    --color-foreground-neutral-reverse-weak: #4b5563;
-    --color-foreground-ppg-strong: #2dd4bf;
-    --color-foreground-ppg: #14b8a6;
-    --color-foreground-ppg-weak: #0d9488;
-    --color-foreground-ppg-reverse: #f9fafb;
-    --color-foreground-ppg-reverse-weak: #99f6e4;
-    --color-foreground-orm-strong: #818cf8;
-    --color-foreground-orm: #6366f1;
-    --color-foreground-orm-weak: #4f46e5;
-    --color-foreground-orm-reverse: #f9fafb;
-    --color-foreground-orm-reverse-weak: #c7d2fe;
-    --color-foreground-error-strong: #f87171;
-    --color-foreground-error: #ef4444;
-    --color-foreground-error-weak: #dc2626;
-    --color-foreground-error-reverse: #f9fafb;
-    --color-foreground-error-reverse-weak: #fecaca;
-    --color-foreground-success-strong: #2dd4bf;
-    --color-foreground-success: #14b8a6;
-    --color-foreground-success-weak: #0d9488;
-    --color-foreground-success-reverse: #f9fafb;
-    --color-foreground-success-reverse-weak: #99f6e4;
-    --color-foreground-warning-strong: #fb923c;
-    --color-foreground-warning: #f97316;
-    --color-foreground-warning-weak: #ea580c;
-    --color-foreground-warning-reverse: #f9fafb;
-    --color-foreground-warning-reverse-weak: #fed7aa;
-    --color-foreground-cyan-strong: #22d3ee;
-    --color-foreground-cyan: #06b6d4;
-    --color-foreground-cyan-weak: #0891b2;
-    --color-foreground-fuchsia-strong: #e879f9;
-    --color-foreground-fuchsia: #d946ef;
-    --color-foreground-fuchsia-weak: #c026d3;
-    --color-foreground-lime-strong: #a3e635;
-    --color-foreground-lime: #84cc16;
-    --color-foreground-lime-weak: #65a30d;
-    --color-foreground-pink-strong: #f472b6;
-    --color-foreground-pink: #ec4899;
-    --color-foreground-pink-weak: #db2777;
-    --color-foreground-purple-strong: #c084fc;
-    --color-foreground-purple: #a855f7;
-    --color-foreground-purple-weak: #9333ea;
-    --color-foreground-sky-strong: #38bdf8;
-    --color-foreground-sky: #0ea5e9;
-    --color-foreground-sky-weak: #0284c7;
-    --color-foreground-violet-strong: #a78bfa;
-    --color-foreground-violet: #8b5cf6;
-    --color-foreground-violet-weak: #7c3aed;
-    --color-foreground-yellow-strong: #facc15;
-    --color-foreground-yellow: #eab308;
-    --color-foreground-yellow-weak: #ca8a04;
-
-    /* Stroke colors */
-    --color-stroke-neutral-stronger: #f9fafb;
-    --color-stroke-neutral-strong: #374151;
-    --color-stroke-neutral: #1f2937;
-    --color-stroke-neutral-weak: #111827;
-    --color-stroke-ppg: #2dd4bf;
-    --color-stroke-orm: #818cf8;
-    --color-stroke-error: #f87171;
-    --color-stroke-success: #2dd4bf;
-    --color-stroke-warning: #fb923c;
-    --color-stroke-cyan: #22d3ee;
-    --color-stroke-fuchsia: #e879f9;
-    --color-stroke-lime: #a3e635;
-    --color-stroke-pink: #f472b6;
-    --color-stroke-purple: #c084fc;
-    --color-stroke-sky: #38bdf8;
-    --color-stroke-violet: #a78bfa;
-    --color-stroke-yellow: #facc15;
-
-    /* Typography - Font Weights (Dark mode - lighter weights) */
-    --font-weight-normal: 375;
-    --font-weight-medium: 475;
-    --font-weight-semibold: 575;
-    --font-weight-bold: 725;
-    --font-weight-ultra-bold: 850;
+  /* Background Colors */
+  --color-background-default: #030712;
+  --color-background-default-050: rgb(10 14 20 / 0.5);
+  --color-background-default-075: rgb(10 14 20 / 0.75);
+  --color-background-neutral-strong: #374151;
+  --color-background-neutral: #1f2937;
+  --color-background-neutral-weak: #111827;
+  --color-background-neutral-weaker: #0a101d;
+  --color-background-neutral-reverse-strong: #f9fafb;
+  --color-background-neutral-reverse: #f3f4f6;
+  --color-background-ppg-strong: #134e4a;
+  --color-background-ppg: #042f2e;
+  --color-background-ppg-reverse-strong: #2dd4bf;
+  --color-background-ppg-reverse: #14b8a6;
+  --color-background-orm-strong: #312e81;
+  --color-background-orm: #1e1b4b;
+  --color-background-orm-reverse-strong: #818cf8;
+  --color-background-orm-reverse: #6366f1;
+  --color-background-error-strong: #7f1d1d;
+  --color-background-error: #450a0a;
+  --color-background-error-reverse-strong: #f87171;
+  --color-background-error-reverse: #ef4444;
+  --color-background-success-strong: #134e4a;
+  --color-background-success: #042f2e;
+  --color-background-success-reverse-strong: #2dd4bf;
+  --color-background-success-reverse: #14b8a6;
+  --color-background-warning-strong: #7c2d12;
+  --color-background-warning: #431407;
+  --color-background-warning-reverse-strong: #fb923c;
+  --color-background-warning-reverse: #f97316;
+  --color-background-cyan-strong: #164e63;
+  --color-background-cyan: #083344;
+  --color-background-fuchsia-strong: #701a75;
+  --color-background-fuchsia: #4a044e;
+  --color-background-lime-strong: #365314;
+  --color-background-lime: #1a2e05;
+  --color-background-pink-strong: #831843;
+  --color-background-pink: #500724;
+  --color-background-purple-strong: #581c87;
+  --color-background-purple: #3b0764;
+  --color-background-sky-strong: #0c4a6e;
+  --color-background-sky: #082f49;
+  --color-background-violet-strong: #4c1d95;
+  --color-background-violet: #2e1065;
+  --color-background-yellow-strong: #713f12;
+  --color-background-yellow: #422006;
+
+  /* Foreground Colors */
+  --color-foreground-neutral: #f9fafb;
+  --color-foreground-neutral-weak: #9ca3af;
+  --color-foreground-neutral-weaker: #6b7280;
+  --color-foreground-neutral-reverse: #030712;
+  --color-foreground-neutral-reverse-weak: #4b5563;
+  --color-foreground-ppg-strong: #2dd4bf;
+  --color-foreground-ppg: #14b8a6;
+  --color-foreground-ppg-weak: #0d9488;
+  --color-foreground-ppg-reverse: #f9fafb;
+  --color-foreground-ppg-reverse-weak: #99f6e4;
+  --color-foreground-orm-strong: #818cf8;
+  --color-foreground-orm: #6366f1;
+  --color-foreground-orm-weak: #4f46e5;
+  --color-foreground-orm-reverse: #f9fafb;
+  --color-foreground-orm-reverse-weak: #c7d2fe;
+  --color-foreground-error-strong: #f87171;
+  --color-foreground-error: #ef4444;
+  --color-foreground-error-weak: #dc2626;
+  --color-foreground-error-reverse: #f9fafb;
+  --color-foreground-error-reverse-weak: #fecaca;
+  --color-foreground-success-strong: #2dd4bf;
+  --color-foreground-success: #14b8a6;
+  --color-foreground-success-weak: #0d9488;
+  --color-foreground-success-reverse: #f9fafb;
+  --color-foreground-success-reverse-weak: #99f6e4;
+  --color-foreground-warning-strong: #fb923c;
+  --color-foreground-warning: #f97316;
+  --color-foreground-warning-weak: #ea580c;
+  --color-foreground-warning-reverse: #f9fafb;
+  --color-foreground-warning-reverse-weak: #fed7aa;
+  --color-foreground-cyan-strong: #22d3ee;
+  --color-foreground-cyan: #06b6d4;
+  --color-foreground-cyan-weak: #0891b2;
+  --color-foreground-fuchsia-strong: #e879f9;
+  --color-foreground-fuchsia: #d946ef;
+  --color-foreground-fuchsia-weak: #c026d3;
+  --color-foreground-lime-strong: #a3e635;
+  --color-foreground-lime: #84cc16;
+  --color-foreground-lime-weak: #65a30d;
+  --color-foreground-pink-strong: #f472b6;
+  --color-foreground-pink: #ec4899;
+  --color-foreground-pink-weak: #db2777;
+  --color-foreground-purple-strong: #c084fc;
+  --color-foreground-purple: #a855f7;
+  --color-foreground-purple-weak: #9333ea;
+  --color-foreground-sky-strong: #38bdf8;
+  --color-foreground-sky: #0ea5e9;
+  --color-foreground-sky-weak: #0284c7;
+  --color-foreground-violet-strong: #a78bfa;
+  --color-foreground-violet: #8b5cf6;
+  --color-foreground-violet-weak: #7c3aed;
+  --color-foreground-yellow-strong: #facc15;
+  --color-foreground-yellow: #eab308;
+  --color-foreground-yellow-weak: #ca8a04;
+
+  /* Stroke Colors */
+  --color-stroke-neutral-stronger: #f9fafb;
+  --color-stroke-neutral-strong: #374151;
+  --color-stroke-neutral: #1f2937;
+  --color-stroke-neutral-weak: #111827;
+  --color-stroke-ppg: #2dd4bf;
+  --color-stroke-orm: #818cf8;
+  --color-stroke-error: #f87171;
+  --color-stroke-success: #2dd4bf;
+  --color-stroke-warning: #fb923c;
+  --color-stroke-cyan: #22d3ee;
+  --color-stroke-fuchsia: #e879f9;
+  --color-stroke-lime: #a3e635;
+  --color-stroke-pink: #f472b6;
+  --color-stroke-purple: #c084fc;
+  --color-stroke-sky: #38bdf8;
+  --color-stroke-violet: #a78bfa;
+  --color-stroke-yellow: #facc15;
 }
 
 @layer utilities {
-    .padding-btn-lg {
-        padding: 4px 8px;
-    }
-    .padding-btn-xl {
-        padding: 6px 10px;
-    }
-    .padding-btn-2xl {
-        padding: 8px 12px;
-    }
-    /* Custom utility classes */
-    .bg-gradient-orm {
-        background: linear-gradient(
-            to right,
-            #7c7ff1,
-            #a5a8f5,
-            #9ea2f3,
-            #c6c9f9,
-            #d8dcf5,
-            #d8dcf5,
-            #eff1fd
-        );
-    }
-
-    .bg-gradient-ppg {
-        background: linear-gradient(
-            to right,
-            #2bc9b4,
-            #4dd4c1,
-            #67ddd0,
-            #8ae5dc,
-            #b8f1e9,
-            #c7f1ec,
-            #e8fcf9
-        );
-    }
-
-    .bg-gradient-ppg-orm {
-        background: linear-gradient(
-            90deg,
-            var(--color-background-ppg) 0%,
-            var(--color-background-orm) 100%
-        );
-    }
 
-    /* Explicit typography utilities to ensure they work everywhere */
-    .text-2xs {
-        font-size: 11px;
-        line-height: 16px;
-    }
+  /* Gradients */
+  .bg-gradient-orm {
+    background: linear-gradient(to right, #7c7ff1, #a5a8f5, #9ea2f3, #c6c9f9, #d8dcf5, #d8dcf5, #eff1fd);
+  }
 
-    .text-xs {
-        font-size: 12px;
-        line-height: 16px;
-    }
+  .bg-gradient-ppg {
+    background: linear-gradient(to right, #2bc9b4, #4dd4c1, #67ddd0, #8ae5dc, #b8f1e9, #c7f1ec, #e8fcf9);
+  }
 
-    .text-sm {
-        font-size: 14px;
-        line-height: 20px;
-    }
+  .bg-gradient-ppg-orm {
+    background: linear-gradient(90deg, var(--color-background-ppg) 0%, var(--color-background-orm) 100%);
+  }
 
-    .text-md {
-        font-size: 16px;
-        line-height: 24px;
-    }
+  /* File input button styles */
+  input[type="file"]:valid {
+    @apply text-foreground-neutral;
+  }
 
-    .text-lg {
-        font-size: 18px;
-        line-height: 28px;
-    }
+  input[type="file"]:invalid {
+    @apply text-foreground-error;
+  }
 
-    .text-xl {
-        font-size: 20px;
-        line-height: 28px;
-    }
+  input[type="file"] {
+    @apply font-normal cursor-pointer text-foreground-neutral-weak disabled:text-foreground-neutral-weaker p-0 border-0;
+  }
 
-    .text-2xl {
-        font-size: 24px;
-        line-height: 32px;
-    }
-
-    .bg-background-neutral-reverse {
-        background-color: var(--color-background-neutral-reverse);
-    }
-    .bg-background-ppg-strong {
-        background-color: var(--color-background-ppg-strong);
-    }
-    .bg-background-ppg {
-        background-color: var(--color-background-ppg);
-    }
-    .bg-background-ppg-reverse-strong {
-        background-color: var(--color-background-ppg-reverse-strong);
-    }
-    .bg-background-ppg-reverse {
-        background-color: var(--color-background-ppg-reverse);
-    }
-    .bg-background-orm-strong {
-        background-color: var(--color-background-orm-strong);
-    }
-    .bg-background-orm {
-        background-color: var(--color-background-orm);
-    }
-    .bg-background-orm-reverse-strong {
-        background-color: var(--color-background-orm-reverse-strong);
-    }
-    .bg-background-orm-reverse {
-        background-color: var(--color-background-orm-reverse);
-    }
-    .bg-background-error-strong {
-        background-color: var(--color-background-error-strong);
-    }
-    .bg-background-error {
-        background-color: var(--color-background-error);
-    }
-    .bg-background-error-reverse-strong {
-        background-color: var(--color-background-error-reverse-strong);
-    }
-    .bg-background-error-reverse {
-        background-color: var(--color-background-error-reverse);
-    }
-    .bg-background-success-strong {
-        background-color: var(--color-background-success-strong);
-    }
-    .bg-background-success {
-        background-color: var(--color-background-success);
-    }
-    .bg-background-success-reverse-strong {
-        background-color: var(--color-background-success-reverse-strong);
-    }
-    .bg-background-success-reverse {
-        background-color: var(--color-background-success-reverse);
-    }
-    .bg-background-warning-strong {
-        background-color: var(--color-background-warning-strong);
-    }
-    .bg-background-warning {
-        background-color: var(--color-background-warning);
-    }
-    .bg-background-warning-reverse-strong {
-        background-color: var(--color-background-warning-reverse-strong);
-    }
-    .bg-background-warning-reverse {
-        background-color: var(--color-background-warning-reverse);
-    }
-    .bg-background-cyan-strong {
-        background-color: var(--color-background-cyan-strong);
-    }
-    .bg-background-cyan {
-        background-color: var(--color-background-cyan);
-    }
-    .bg-background-fuchsia-strong {
-        background-color: var(--color-background-fuchsia-strong);
-    }
-    .bg-background-fuchsia {
-        background-color: var(--color-background-fuchsia);
-    }
-    .bg-background-lime-strong {
-        background-color: var(--color-background-lime-strong);
-    }
-    .bg-background-lime {
-        background-color: var(--color-background-lime);
-    }
-    .bg-background-pink-strong {
-        background-color: var(--color-background-pink-strong);
-    }
-    .bg-background-pink {
-        background-color: var(--color-background-pink);
-    }
-    .bg-background-purple-strong {
-        background-color: var(--color-background-purple-strong);
-    }
-    .bg-background-purple {
-        background-color: var(--color-background-purple);
-    }
-    .bg-background-sky-strong {
-        background-color: var(--color-background-sky-strong);
-    }
-    .bg-background-sky {
-        background-color: var(--color-background-sky);
-    }
-    .bg-background-violet-strong {
-        background-color: var(--color-background-violet-strong);
-    }
-    .bg-background-violet {
-        background-color: var(--color-background-violet);
-    }
-    .bg-background-yellow-strong {
-        background-color: var(--color-background-yellow-strong);
-    }
-    .bg-background-yellow {
-        background-color: var(--color-background-yellow);
-    }
-
-    /* Hover background color utilities */
-    .hover\:bg-background-neutral-strong:hover {
-        background-color: var(--color-background-neutral-strong);
-    }
-    .hover\:bg-background-neutral-reverse-strong:hover {
-        background-color: var(--color-background-neutral-reverse-strong);
-    }
-    .hover\:bg-background-ppg-reverse-strong:hover {
-        background-color: var(--color-background-ppg-reverse-strong);
-    }
-    .hover\:bg-background-orm-reverse-strong:hover {
-        background-color: var(--color-background-orm-reverse-strong);
-    }
-    .hover\:bg-background-error-reverse-strong:hover {
-        background-color: var(--color-background-error-reverse-strong);
-    }
-
-    /* Foreground/text color utilities */
-    .text-foreground-neutral {
-        color: var(--color-foreground-neutral);
-    }
-    .text-foreground-neutral-weak {
-        color: var(--color-foreground-neutral-weak);
-    }
-    .text-foreground-neutral-weaker {
-        color: var(--color-foreground-neutral-weaker);
-    }
-    .text-foreground-neutral-reverse {
-        color: var(--color-foreground-neutral-reverse);
-    }
-    .text-foreground-neutral-reverse-weak {
-        color: var(--color-foreground-neutral-reverse-weak);
-    }
-    .text-foreground-ppg-strong {
-        color: var(--color-foreground-ppg-strong);
-    }
-    .text-foreground-ppg {
-        color: var(--color-foreground-ppg);
-    }
-    .text-foreground-ppg-weak {
-        color: var(--color-foreground-ppg-weak);
-    }
-    .text-foreground-ppg-reverse {
-        color: var(--color-foreground-ppg-reverse);
-    }
-    .text-foreground-ppg-reverse-weak {
-        color: var(--color-foreground-ppg-reverse-weak);
-    }
-    .text-foreground-orm-strong {
-        color: var(--color-foreground-orm-strong);
-    }
-    .text-foreground-orm {
-        color: var(--color-foreground-orm);
-    }
-    .text-foreground-orm-weak {
-        color: var(--color-foreground-orm-weak);
-    }
-    .text-foreground-orm-reverse {
-        color: var(--color-foreground-orm-reverse);
-    }
-    .text-foreground-orm-reverse-weak {
-        color: var(--color-foreground-orm-reverse-weak);
-    }
-    .text-foreground-error-strong {
-        color: var(--color-foreground-error-strong);
-    }
-    .text-foreground-error {
-        color: var(--color-foreground-error);
-    }
-    .text-foreground-error-weak {
-        color: var(--color-foreground-error-weak);
-    }
-    .text-foreground-error-reverse {
-        color: var(--color-foreground-error-reverse);
-    }
-    .text-foreground-error-reverse-weak {
-        color: var(--color-foreground-error-reverse-weak);
-    }
-    .text-foreground-success-strong {
-        color: var(--color-foreground-success-strong);
-    }
-    .text-foreground-success {
-        color: var(--color-foreground-success);
-    }
-    .text-foreground-success-weak {
-        color: var(--color-foreground-success-weak);
-    }
-    .text-foreground-success-reverse {
-        color: var(--color-foreground-success-reverse);
-    }
-    .text-foreground-success-reverse-weak {
-        color: var(--color-foreground-success-reverse-weak);
-    }
-    .text-foreground-warning-strong {
-        color: var(--color-foreground-warning-strong);
-    }
-    .text-foreground-warning {
-        color: var(--color-foreground-warning);
-    }
-    .text-foreground-warning-weak {
-        color: var(--color-foreground-warning-weak);
-    }
-    .text-foreground-warning-reverse {
-        color: var(--color-foreground-warning-reverse);
-    }
-    .text-foreground-warning-reverse-weak {
-        color: var(--color-foreground-warning-reverse-weak);
-    }
-
-    /* Border/stroke color utilities */
-    .border-stroke-neutral-stronger {
-        border-color: var(--color-stroke-neutral-stronger);
-    }
-    .border-stroke-neutral-strong {
-        border-color: var(--color-stroke-neutral-strong);
-    }
-    .border-stroke-neutral {
-        border-color: var(--color-stroke-neutral);
-    }
-    .border-stroke-neutral-weak {
-        border-color: var(--color-stroke-neutral-weak);
-    }
-    .border-stroke-ppg {
-        border-color: var(--color-stroke-ppg);
-    }
-    .border-stroke-orm {
-        border-color: var(--color-stroke-orm);
-    }
-    .border-stroke-error {
-        border-color: var(--color-stroke-error);
-    }
-    .border-stroke-success {
-        border-color: var(--color-stroke-success);
-    }
-    .border-stroke-warning {
-        border-color: var(--color-stroke-warning);
-    }
-
-    /* Padding utilities for accordion */
-    .pl-10 {
-        padding-left: 40px;
-    }
-    .shadow-box {
-        box-shadow:
-            0 8px 8px -8px rgba(0, 0, 0, 0.04),
-            0 2px 2px 0 rgba(0, 0, 0, 0.04);
-    }
-    /* File input button styles */
-    input[type="file"]:valid {
-        @apply text-foreground-neutral;
-    }
-    input[type="file"]:invalid {
-        @apply text-foreground-error;
-    }
-    input[type="file"] {
-        @apply font-normal cursor-pointer text-foreground-neutral-weak disabled:text-foreground-neutral-weaker p-0!;
-        border: none !important;
-    }
-    input[type="file"]::file-selector-button {
-        @apply font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 disabled:bg-background-neutral-weak text-foreground-neutral disabled:text-foreground-neutral-weaker;
-    }
-    .padding-btn-lg[type="file"]::file-selector-button {
-        padding: 4px 8px;
-    }
-    .padding-btn-xl[type="file"]::file-selector-button {
-        padding: 6px 10px;
-    }
-    .padding-btn-2xl[type="file"]::file-selector-button {
-        padding: 8px 12px;
-    }
-    .tooltip {
-        background: rgba(0, 0, 0, 0.5);
-        /* blur-background-low */
-        backdrop-filter: blur(8px);
-    }
-}
+  input[type="file"]::file-selector-button {
+    @apply font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 disabled:bg-background-neutral-weak text-foreground-neutral disabled:text-foreground-neutral-weaker;
+  }
+}
\ No newline at end of file
diff --git a/packages/eclipse/src/tokens/index.ts b/packages/eclipse/src/tokens/index.ts
index a5817e9560..e2ede7b87c 100644
--- a/packages/eclipse/src/tokens/index.ts
+++ b/packages/eclipse/src/tokens/index.ts
@@ -152,16 +152,16 @@ export const colors = {
 // Border Radius Tokens
 export const borderRadius = {
   circle: 999,
-  low: 3,
+  "square-low": 3,
   square: 6,
-  high: 12,
+  "square-high": 12,
 } as const;
 
 // Blur Tokens
 export const blur = {
-  "background-low": 16,
-  background: 24,
-  "background-high": 40,
+  "surface-low": 16,
+  surface: 24,
+  "surface-high": 40,
 } as const;
 
 // Spacing/Margin Tokens
@@ -235,7 +235,7 @@ export const typography = {
   fontFamily: {
     "sans-display": "Inter",
     sans: "Inter",
-    monospace: "Monaspace Neon Var",
+    mono: "Mona Sans Mono",
   },
   fontSize: {
     "2xs": 11,
diff --git a/packages/ui/src/components/footer.tsx b/packages/ui/src/components/footer.tsx
index deda388e44..9fd6761f73 100644
--- a/packages/ui/src/components/footer.tsx
+++ b/packages/ui/src/components/footer.tsx
@@ -111,7 +111,7 @@ const Footer = ({
                 className="flex-1 lg:mb-0 lg:px-2 min-w-40"
                 key={`footer-${idx}`}
               >
-                <span className="uppercase stretch-display font-mona-sans inline-block font-bold text-base text-foreground-neutral tracking-[0.1em] mt-0 mb-2.5 lg:mb-3">
+                <span className="uppercase stretch-display font-sans-display inline-block font-bold text-base text-foreground-neutral tracking-[0.1em] mt-0 mb-2.5 lg:mb-3">
                   {footerItem.title}
                 </span>
                 {footerItem.links.map((link: any, idx: number) =>
diff --git a/packages/ui/src/components/navigation-menu.tsx b/packages/ui/src/components/navigation-menu.tsx
index e22f31634f..190f2a5214 100644
--- a/packages/ui/src/components/navigation-menu.tsx
+++ b/packages/ui/src/components/navigation-menu.tsx
@@ -65,9 +65,9 @@ function NavigationWrapper({
   return (
     <div
       className={cn(
-        "transition-navbar max-w-7xl w-full mx-auto py-3 px-6 shadow-drop-high bg-background-neutral-weaker rounded-high flex justify-between align-center",
+        "transition-navbar max-w-7xl w-full mx-auto py-3 px-6 shadow-box-high bg-background-neutral-weaker rounded-square-high flex justify-between align-center",
         mobileOpen &&
-          "py-7 px-10 rounded-none md:py-3! md:px-6! md:rounded-high",
+          "py-7 px-10 rounded-none md:py-3! md:px-6! md:rounded-square-high",
         className,
         scroll && "max-w-235",
       )}
@@ -168,7 +168,7 @@ function NavigationMenuPositioner({
         )}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 rounded-square shadow shadow-drop-high outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]">
+        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 rounded-square shadow shadow-box-high outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]">
           <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
@@ -282,7 +282,7 @@ function MenuNavigationItem({
       href={link.url}
       className="flex gap-2 items-center justify-start hover:bg-background-ppg-strong w-full rounded-square! overflow-hidden"
     >
-      <Action color="ppg" size="nav">
+      <Action color="ppg" size="3xl">
         <i className={cn("text-background-ppg-reverse", link.icon)} />
       </Action>
       <div className="flex flex-col gap-0">
diff --git a/packages/ui/src/components/web-navigation.tsx b/packages/ui/src/components/web-navigation.tsx
index 0450daeb75..5838b3867c 100644
--- a/packages/ui/src/components/web-navigation.tsx
+++ b/packages/ui/src/components/web-navigation.tsx
@@ -65,7 +65,7 @@ export function WebNavigation({ links }: WebNavigationProps) {
                 ) : link?.sub?.length ? (
                   <NavigationMenuItem key={link.text}>
                     <NavigationMenuTrigger>{link.text}</NavigationMenuTrigger>
-                    <NavigationMenuContent className="rounded-high! overflow-hidden!">
+                    <NavigationMenuContent className="rounded-square-high! overflow-hidden!">
                       <div
                         className={cn(
                           "list gap-1 flex flex-col",
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 6f8f1fd195..4ad31d5c88 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -129,3 +129,8 @@
 .transition-navbar {
     transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
+.stretch-display {
+    font-variation-settings:
+        "wght" 700,
+        "wdth" 125;
+}