diff --git a/src/app/globals.css b/src/app/globals.css
index 4080096..d14dd0c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -14,7 +14,7 @@
   --progress-green: #00bc45;
   --progress-warning: #f563f4;
   --progress-alert: #ff0088;
-  --progress-proceeded: #808080;
+  --progress-exceeded: #808080;
 
   --gray-50: color-mix(in srgb, var(--gray) 4%, var(--white));
   --gray-100: color-mix(in srgb, var(--gray) 8%, var(--white));
diff --git a/src/app/timer/TimerDisplay.tsx b/src/app/timer/TimerDisplay.tsx
index f30e907..487b270 100644
--- a/src/app/timer/TimerDisplay.tsx
+++ b/src/app/timer/TimerDisplay.tsx
@@ -18,7 +18,7 @@ export function TimerDisplay({
 }: TimerDisplayProps) {
   const renderVariant = () => {
     if (secondsRemaining <= 0) {
-      return 'timeup';
+      return 'exceeded';
     } else if (secondsRemaining <= 30) {
       return 'alert';
     } else if (secondsRemaining <= 60) {
diff --git a/src/app/timer/timer.css b/src/app/timer/timer.css
index b6cdaad..4441a72 100644
--- a/src/app/timer/timer.css
+++ b/src/app/timer/timer.css
@@ -147,21 +147,21 @@
     }
   }
 
-  &[data-variant='timeup'] {
+  &[data-variant='exceeded'] {
     background-color: var(--safety-red);
     color: var(--white);
 
     .timer-progress {
       &::-webkit-progress-value {
-        background-color: var(--progress-proceeded);
+        background-color: var(--progress-exceeded);
       }
 
       &::-moz-progress-bar {
-        background-color: var(--progress-proceeded);
+        background-color: var(--progress-exceeded);
       }
 
       &::-ms-fill {
-        background-color: var(--progress-proceeded);
+        background-color: var(--progress-exceeded);
       }
     }
   }