diff --git a/app/src/main/res/drawable/spotlight_done_button_background.xml b/app/src/main/res/drawable/spotlight_done_button_background.xml
index 8cb2452157e..96b6ff9e767 100644
--- a/app/src/main/res/drawable/spotlight_done_button_background.xml
+++ b/app/src/main/res/drawable/spotlight_done_button_background.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
-  <solid android:color="@color/spotlight_hint_background" />
+  <solid android:color="@color/component_color_shared_spotlight_hint_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/spotlight_hint_text_background.xml b/app/src/main/res/drawable/spotlight_hint_text_background.xml
index cfa84f27751..df855c8f311 100644
--- a/app/src/main/res/drawable/spotlight_hint_text_background.xml
+++ b/app/src/main/res/drawable/spotlight_hint_text_background.xml
@@ -6,5 +6,5 @@
     android:bottomRightRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp" />
-  <solid android:color="@color/spotlight_hint_background" />
+  <solid android:color="@color/component_color_shared_spotlight_hint_background_color" />
 </shape>
diff --git a/app/src/main/res/layout/bottom_left_overlay.xml b/app/src/main/res/layout/bottom_left_overlay.xml
index 820a9fb32af..fd54dfb04a8 100644
--- a/app/src/main/res/layout/bottom_left_overlay.xml
+++ b/app/src/main/res/layout/bottom_left_overlay.xml
@@ -24,7 +24,8 @@
       android:rotationX="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -38,7 +39,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -51,6 +52,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -67,7 +69,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/bottom_right_overlay.xml b/app/src/main/res/layout/bottom_right_overlay.xml
index 836e1850e76..d93caa2ad2c 100644
--- a/app/src/main/res/layout/bottom_right_overlay.xml
+++ b/app/src/main/res/layout/bottom_right_overlay.xml
@@ -25,7 +25,8 @@
       android:rotationY="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -39,7 +40,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -52,6 +53,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -68,7 +70,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/top_left_overlay.xml b/app/src/main/res/layout/top_left_overlay.xml
index 106668891e3..fba00994436 100644
--- a/app/src/main/res/layout/top_left_overlay.xml
+++ b/app/src/main/res/layout/top_left_overlay.xml
@@ -23,7 +23,8 @@
       android:layout_height="@dimen/spotlight_arrow_height"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -37,7 +38,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -50,6 +51,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -64,7 +66,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/top_right_overlay.xml b/app/src/main/res/layout/top_right_overlay.xml
index 9f0d00a535f..13d17e7c942 100644
--- a/app/src/main/res/layout/top_right_overlay.xml
+++ b/app/src/main/res/layout/top_right_overlay.xml
@@ -24,7 +24,8 @@
       android:rotationY="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -38,7 +39,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -51,6 +52,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -67,7 +69,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index 230386dc464..6f472642c41 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -5,6 +5,7 @@
   <color name="color_palette_accent_color">@color/color_def_oppia_metallic_blue</color>
   <color name="color_palette_primary_text_color">@color/color_def_white</color>
   <color name="color_palette_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_black_text_color">@color/color_def_black</color>
   <color name="color_palette_highlighted_text_color">@color/color_def_white</color>
   <color name="color_palette_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_dark_background_color">@color/color_def_oppia_light_black</color>
@@ -187,4 +188,7 @@
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
+  <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
+  <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
+  <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index 4ad324d81bd..c1b937eb81c 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -5,6 +5,7 @@
   <color name="color_palette_accent_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_primary_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_black_text_color">@color/color_def_black</color>
   <color name="color_palette_highlighted_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_skip_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_background_color">@color/color_def_oppia_light_yellow</color>
@@ -190,4 +191,7 @@
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
+  <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
+  <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
+  <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 4806ae40106..f403636349e 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -84,6 +84,9 @@
   <color name="component_color_shared_icon_white_color">@color/color_palette_icon_white_color</color>
   <color name="component_color_shared_icon_color">@color/color_palette_icon_color</color>
   <color name="component_color_shared_resume_lesson_start_over_button_color">@color/color_palette_shared_resume_lesson_start_over_button_color</color>
+  <color name="component_color_shared_spotlight_hint_background_color">@color/color_palette_shared_spotlight_hint_background_color</color>
+  <color name="component_color_shared_close_spotlight_button_color">@color/color_palette_shared_close_spotlight_button_color</color>
+  <color name="component_color_shared_spotlight_overlay_arrow_color">@color/color_palette_shared_spotlight_overlay_arrow_color</color>
   <!-- Themes.xml -->
   <color name="component_color_shared_activity_status_bar_color">@color/color_palette_status_bar_color</color>
   <color name="component_color_shared_fragment_status_bar_color">@color/color_palette_fragment_status_bar_color</color>
@@ -100,6 +103,7 @@
   <color name="component_color_shared_link_text_color">@color/color_palette_link_text_color</color>
   <color name="component_color_shared_active_text_color">@color/color_palette_primary_color</color>
   <color name="component_color_shared_secondary_4_text_color">@color/color_palette_white_text_color</color>
+  <color name="component_color_shared_secondary_5_text_color">@color/color_palette_black_text_color</color>
   <color name="component_color_shared_text_input_layout_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_shared_text_input_layout_stroke_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_shared_text_input_edit_text_text_color">@color/color_palette_primary_text_color</color>