diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx
index 5670449..379a83f 100644
--- a/src/components/ordering/MenuBackdrop.tsx
+++ b/src/components/ordering/MenuBackdrop.tsx
@@ -46,6 +46,7 @@ const FriesIcon = () => (
 )
 
 const ICONS = [PizzaIcon, BurgerIcon, FriesIcon]
+const ICON_COLORS = ['#e2725b', '#d9a441', '#e8c468']
 
 // Fixed, hand-placed positions rather than random ones — random values would
 // differ between the server-rendered and first client-rendered HTML and
@@ -66,6 +67,7 @@ export const MenuBackdrop = () => (
   <div className={styles.backdrop} aria-hidden="true">
     {PLACEMENTS.map((placement, index) => {
       const Icon = ICONS[index % ICONS.length]
+      const color = ICON_COLORS[index % ICON_COLORS.length]
       return (
         <span
           key={index}
@@ -78,6 +80,7 @@ export const MenuBackdrop = () => (
               height: placement.size,
               animationDelay: `${placement.delay}s`,
               '--icon-rotate': `${placement.rotate}deg`,
+              color,
             } as CSSProperties
           }
         >