diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index cfff216..2aa04d7 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -313,7 +313,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
         }}
       >
         <div className="font-medium mb-0.5">{label}</div>
-        <div style={{ color: '#FD5E0F' }} className="font-semibold">
+        <div style={{ color: 'var(--color-brand-orange)' }} className="font-semibold">
           {payload[0].value}ms
         </div>
       </div>
@@ -330,8 +330,8 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
           <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
             <defs>
               <linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#FD5E0F" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="#FD5E0F" stopOpacity={0.02} />
+                <stop offset="0%" stopColor="var(--color-brand-orange)" stopOpacity={0.3} />
+                <stop offset="100%" stopColor="var(--color-brand-orange)" stopOpacity={0.02} />
               </linearGradient>
             </defs>
             <CartesianGrid
@@ -357,11 +357,11 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
             <Area
               type="monotone"
               dataKey="ms"
-              stroke="#FD5E0F"
+              stroke="var(--color-brand-orange)"
               strokeWidth={2}
               fill="url(#responseTimeGradient)"
               dot={false}
-              activeDot={{ r: 4, fill: '#FD5E0F', strokeWidth: 0 }}
+              activeDot={{ r: 4, fill: 'var(--color-brand-orange)', strokeWidth: 0 }}
             />
           </AreaChart>
         </ResponsiveContainer>
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
index 5074e20..317b442 100644
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -285,7 +285,7 @@ Glass card effect with backdrop blur (premium feel):
 Orange gradient for emphasized text:
 ```css
 .gradient-text {
-  @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
+  @apply bg-gradient-to-r from-brand-orange to-brand-orange-hover bg-clip-text text-transparent;
 }
 ```
 
diff --git a/package-lock.json b/package-lock.json
index 95bd9b6..99267af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.6.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.55",
+        "@ciphera-net/ui": "^0.0.56",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "axios": "^1.13.2",
@@ -1539,9 +1539,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.55",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.55/85bf1bf04d4ce1814c27b0645de9d5f11083f4c1",
-      "integrity": "sha512-B0nxtRlALno5ttC1BFsLmR4Inx72x5T38CJXU/SqbHEfTioM4Z/MD129995N58ve6ATJl3YFH+AM+DwapfFqiA==",
+      "version": "0.0.56",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.56/dfa7f3a01be81773c16c68868d0517a67e5c5860",
+      "integrity": "sha512-cOdq5Yu6riKQkJe6O1GNpv3k044qSr/K465uPtsAQL604gc9rC6Ooyom+jabt+N8yM3qoXL5KDaNiUBjKdTP0g==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 6c5e9d8..187f321 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.55",
+    "@ciphera-net/ui": "^0.0.56",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "axios": "^1.13.2",