diff --git a/packages/styles/shared-styles.css b/packages/styles/shared-styles.css
index 5ad8c0214..81e6b2645 100644
--- a/packages/styles/shared-styles.css
+++ b/packages/styles/shared-styles.css
@@ -318,20 +318,6 @@
   --color-accent-900: #171717;
   --color-accent-950: #0a0a0a;
 
-  /* ============================================
-  * Border Radius (calc-based from --radius-lg)
-  * Set --radius-lg to your brand's default (0.375rem = rounded-md)
-  * All other radii are calculated relative to it
-  * ============================================ */
-  --radius-lg: 0.375rem;
-  --radius-xs: calc(var(--radius-lg) * 0.25);
-  --radius-sm: calc(var(--radius-lg) * 0.5);
-  --radius-md: calc(var(--radius-lg) * 1.33);
-  --radius-xl: calc(var(--radius-lg) * 1.5);
-  --radius-2xl: calc(var(--radius-lg) * 2);
-  --radius-3xl: calc(var(--radius-lg) * 3);
-  --radius-4xl: calc(var(--radius-lg) * 4);
-
   /* ============================================
    * Box Shadows
    * ============================================ */
@@ -470,18 +456,18 @@
 
   /* Base body styles */
   body {
-    background-color: hsl(var(--op-white));
+    background-color: var(--color-white);
     font-family: var(--font-sans);
-    color: hsl(var(--op-neutral-900));
+    color: var(--color-neutral-charcoal);
   }
 
   /* Placeholder styles */
   input::placeholder {
-    color: hsl(var(--op-neutral-500));
+    color: var(--color-neutral-gray3);
   }
 
   textarea::placeholder {
-    color: hsl(var(--op-neutral-500));
+    color: var(--color-neutral-gray3);
   }
 
   /* Hide Google extension bubble */
@@ -497,7 +483,7 @@
   /* Default hr styling - Tailwind v4 reset removes borders */
   hr {
     border-top-width: 1px;
-    border-color: hsl(var(--op-neutral-200));
+    border-color: var(--color-neutral-gray1);
   }
 }
 
@@ -509,7 +495,7 @@
 @utility better-scrollbar {
   overflow-y: scroll;
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--op-neutral-600)) transparent;
+  scrollbar-color: var(--color-neutral-gray4) transparent;
 }
 
 @utility scrollable-hidden-scrollbar {
@@ -556,7 +542,7 @@
 
 /* Border glow utility */
 @utility border-glow {
-  border: 1px solid hsl(var(--op-neutral-500) / 0.5);
+  border: 1px solid color-mix(in srgb, var(--color-neutral-gray3) 50%, transparent);
   background-clip: padding-box;
   backdrop-filter: blur(40px) contrast(1.5) saturate(3);
   box-shadow:
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 90012e50c..46d36cb1e 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -76,6 +76,7 @@ After adding a component:
 1. **Use existing components**: Where possible, replace Intent UI dependencies with existing `@op/ui` components. For example, replace the Intent UI checkbox import with `@/components/Checkbox`.
 
 2. **Export the component**: Add an export to `package.json`:
+
    ```json
    {
      "exports": {
@@ -94,7 +95,6 @@ Intent UI components use CSS variables that are mapped to `@op/styles` tokens in
 
 - **Colors**: `--primary`, `--secondary`, `--danger`, etc. mapped to teal/neutral/red tokens
 - **Border color**: Default border color set via `var(--border)` on all elements
-- **Border radius**: Calc-based system using `--radius-lg` as the base (0.375rem)
 
 To customize colors, edit the mappings in `intent-ui-theme.css`.