diff --git a/app/src/main/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt b/app/src/main/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt
index efc12c8f887..6be59c11c7b 100644
--- a/app/src/main/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt
+++ b/app/src/main/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt
@@ -76,16 +76,28 @@ class SegmentedCircularProgressView : View {
     calculateSweepAngle()
 
     chapterFinishedArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-    setupArcPaint(chapterFinishedArcPaint, R.color.oppia_progress_chapter_finished)
+    setupArcPaint(
+      chapterFinishedArcPaint,
+      R.color.component_color_lessons_tab_activity_chapter_completed_progress_color
+    )
 
     chapterInProgressArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-    setupArcPaint(chapterInProgressArcPaint, R.color.oppia_progress_chapter_in_progress)
+    setupArcPaint(
+      chapterInProgressArcPaint,
+      R.color.component_color_lessons_tab_activity_chapter_in_progress_progress_color
+    )
 
     chapterNotStartedArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
     if (chaptersFinished != 0) {
-      setupArcPaint(chapterNotStartedArcPaint, R.color.oppia_progress_chapter_not_finished)
+      setupArcPaint(
+        chapterNotStartedArcPaint,
+        R.color.component_color_lessons_tab_activity_chapter_not_finished_progress_color
+      )
     } else {
-      setupArcPaint(chapterNotStartedArcPaint, R.color.color_def_grey_shade_20)
+      setupArcPaint(
+        chapterNotStartedArcPaint,
+        R.color.component_color_lessons_tab_activity_chapter_not_started_progress_color
+      )
     }
   }
 
diff --git a/app/src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt b/app/src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt
index 9d1cb84a69b..59349f1c03f 100644
--- a/app/src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt
+++ b/app/src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt
@@ -35,7 +35,10 @@ class VerticalDashedLineView @JvmOverloads constructor(
 
     paint = Paint().apply {
       isAntiAlias = true
-      color = ContextCompat.getColor(context, R.color.oppia_primary)
+      color = ContextCompat.getColor(
+        context,
+        R.color.component_color_story_chapter_default_progress_solid_color
+      )
       style = Paint.Style.STROKE
       strokeCap = Paint.Cap.ROUND
       strokeWidth = dashThickness
diff --git a/app/src/main/res/drawable/chapter_dark_green_bg_with_bright_green_border.xml b/app/src/main/res/drawable/chapter_dark_green_bg_with_bright_green_border.xml
index 603d0047198..bccd03a7a19 100644
--- a/app/src/main/res/drawable/chapter_dark_green_bg_with_bright_green_border.xml
+++ b/app/src/main/res/drawable/chapter_dark_green_bg_with_bright_green_border.xml
@@ -3,6 +3,6 @@
   android:shape="rectangle">
   <stroke
     android:width="4dp"
-    android:color="@color/color_def_bright_green" />
-  <solid android:color="@color/color_def_oppia_green" />
+    android:color="@color/component_color_lessons_tab_activity_lesson_not_started_stroke_color" />
+  <solid android:color="@color/component_color_lessons_tab_activity_lesson_not_started_chapter_index_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/chapter_white_bg_with_bright_green_border.xml b/app/src/main/res/drawable/chapter_white_bg_with_bright_green_border.xml
index 0c6ad912e03..3ac79d76083 100644
--- a/app/src/main/res/drawable/chapter_white_bg_with_bright_green_border.xml
+++ b/app/src/main/res/drawable/chapter_white_bg_with_bright_green_border.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <stroke android:color="@color/color_def_bright_green" android:width="4dp"/>
-  <solid android:color="@color/color_def_white"/>
+  <stroke android:color="@color/component_color_lessons_tab_activity_lesson_not_started_stroke_color" android:width="4dp"/>
+  <solid android:color="@color/component_color_lessons_tab_activity_lesson_not_started_chapter_name_background_color"/>
 </shape>
diff --git a/app/src/main/res/drawable/circular_solid_color_primary_32dp.xml b/app/src/main/res/drawable/circular_solid_color_primary_32dp.xml
index 6b8ebbafaa1..0f13f044e68 100644
--- a/app/src/main/res/drawable/circular_solid_color_primary_32dp.xml
+++ b/app/src/main/res/drawable/circular_solid_color_primary_32dp.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/oppia_primary" />
+  <solid android:color="@color/component_color_story_chapter_default_progress_solid_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"
diff --git a/app/src/main/res/drawable/circular_stroke_2dp_color_primary_32dp.xml b/app/src/main/res/drawable/circular_stroke_2dp_color_primary_32dp.xml
index 63aeeb172d1..69973c90b9c 100644
--- a/app/src/main/res/drawable/circular_stroke_2dp_color_primary_32dp.xml
+++ b/app/src/main/res/drawable/circular_stroke_2dp_color_primary_32dp.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_story_chapter_not_start_progress_solid_color" />
   <stroke
     android:width="2dp"
-    android:color="@color/oppia_primary" />
+    android:color="@color/component_color_story_chapter_default_progress_solid_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"
diff --git a/app/src/main/res/drawable/circular_stroke_2dp_grey_32dp.xml b/app/src/main/res/drawable/circular_stroke_2dp_grey_32dp.xml
index 0d06c065b2f..4b0c7668a97 100644
--- a/app/src/main/res/drawable/circular_stroke_2dp_grey_32dp.xml
+++ b/app/src/main/res/drawable/circular_stroke_2dp_grey_32dp.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_story_chapter_not_start_progress_solid_color" />
   <stroke
     android:width="2dp"
-    android:color="@color/color_def_light_grey" />
+    android:color="@color/component_color_story_chapter_default_progress_stroke_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"
diff --git a/app/src/main/res/drawable/dashed_divider.xml b/app/src/main/res/drawable/dashed_divider.xml
index 8f2b7ffb570..31795ff6f58 100644
--- a/app/src/main/res/drawable/dashed_divider.xml
+++ b/app/src/main/res/drawable/dashed_divider.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="line">
-  <solid android:color="@android:color/transparent" />
+  <solid android:color="@color/component_color_shared_transparent_background_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/oppia_dashed_divider"
+    android:color="@color/component_color_lessons_tab_activity_lesson_card_dashed_divider_color"
     android:dashWidth="8dp"
     android:dashGap="6dp" />
 </shape>
diff --git a/app/src/main/res/drawable/grey_recycler_view_item_decoration_divider.xml b/app/src/main/res/drawable/grey_recycler_view_item_decoration_divider.xml
index c3148cc02a5..79d6900301d 100644
--- a/app/src/main/res/drawable/grey_recycler_view_item_decoration_divider.xml
+++ b/app/src/main/res/drawable/grey_recycler_view_item_decoration_divider.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_accessible_light_grey_2" />
+  <solid android:color="@color/component_color_shared_divider_color" />
   <size android:height="1dp" />
 </shape>
diff --git a/app/src/main/res/drawable/start_over_button_background.xml b/app/src/main/res/drawable/start_over_button_background.xml
index 1aaaf64dfe4..d620c9b5d40 100644
--- a/app/src/main/res/drawable/start_over_button_background.xml
+++ b/app/src/main/res/drawable/start_over_button_background.xml
@@ -2,7 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/state_previous_next_button_radius" />
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_shared_white_background_color" />
   <stroke
     android:width="2dp"
     android:color="@color/component_color_start_over_button_stroke_color" />
diff --git a/app/src/main/res/drawable/toolbar_drop_shadow.xml b/app/src/main/res/drawable/toolbar_drop_shadow.xml
index e4cc20c44e5..29c312c0449 100644
--- a/app/src/main/res/drawable/toolbar_drop_shadow.xml
+++ b/app/src/main/res/drawable/toolbar_drop_shadow.xml
@@ -3,6 +3,6 @@
   android:shape="rectangle">
   <gradient
     android:angle="90"
-    android:endColor="@color/toolbar_drop_shadow"
+    android:endColor="@color/component_color_shared_activity_toolbar_shadow_color"
     android:startColor="@android:color/transparent" />
 </shape>
diff --git a/app/src/main/res/layout-land/resume_lesson_fragment.xml b/app/src/main/res/layout-land/resume_lesson_fragment.xml
index 24b0e0e17c2..5c9702b26f8 100644
--- a/app/src/main/res/layout-land/resume_lesson_fragment.xml
+++ b/app/src/main/res/layout-land/resume_lesson_fragment.xml
@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_resume_lesson_activity_background_color"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -34,7 +34,7 @@
         android:layout_marginBottom="8dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.chapterTitle}"
-        android:textColor="@color/component_color_resume_lesson_activity_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textDirection="locale"
         android:textSize="24sp"
         android:textStyle="bold"
@@ -49,7 +49,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="32dp"
         android:ellipsize="end"
-        android:textColor="@color/component_color_resume_lesson_activity_description_color"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />
diff --git a/app/src/main/res/layout-land/story_chapter_view.xml b/app/src/main/res/layout-land/story_chapter_view.xml
index aeec0d1ddcb..3793d5de239 100644
--- a/app/src/main/res/layout-land/story_chapter_view.xml
+++ b/app/src/main/res/layout-land/story_chapter_view.xml
@@ -29,11 +29,12 @@
       android:layout_marginTop="16dp"
       android:layout_marginEnd="72dp"
       android:layout_marginBottom="8dp"
+      app:cardBackgroundColor="@color/component_color_story_activity_container_background_color"
       android:clickable="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES}"
       android:onClick="@{(v) -> viewModel.onExplorationClicked()}"
       app:cardCornerRadius="4dp"
       app:cardElevation="@dimen/story_chapter_card_playable_state_elevation"
-      app:strokeColor="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/oppia_primary : @color/chapter_card_grey_border}"
+      app:strokeColor="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/component_color_story_activity_story_chapter_card_start_stroke_color : @color/component_color_story_activity_story_chapter_card_not_start_stroke_color}"
       app:strokeWidth="2dp">
 
       <androidx.constraintlayout.widget.ConstraintLayout
@@ -46,7 +47,6 @@
           android:layout_height="wrap_content"
           android:minHeight="116dp"
           android:padding="8dp"
-          android:background="@color/component_color_story_activity_container_background_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
@@ -64,7 +64,7 @@
             android:fontFamily="sans-serif-medium"
             android:maxLines="2"
             android:text="@{viewModel.computeChapterTitleText()}"
-            android:textColor="@color/component_color_story_activity_text_color"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="18sp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -78,8 +78,8 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:text="@{htmlContent}"
-            android:textColor="@color/component_color_story_activity_text_color"
-            android:textColorLink="@color/oppia_primary"
+            android:textColor="@color/component_color_shared_primary_text_color"
+            android:textColorLink="@color/component_color_shared_link_text_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -93,12 +93,13 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:contentDescription="@{@string/chapter_completed}"
-            app:srcCompat="@drawable/ic_check_24dp"
             android:visibility="@{viewModel.chapterSummary.chapterPlayState == ChapterPlayState.COMPLETED ? View.VISIBLE : View.GONE}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/chapter_summary"
-            app:layout_constraintVertical_bias="1.0" />
+            app:layout_constraintVertical_bias="1.0"
+            app:srcCompat="@drawable/ic_check_24dp"
+            app:tint="@color/component_color_shared_check_icon_color" />
         </androidx.constraintlayout.widget.ConstraintLayout>
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml b/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
index fd27c963ea8..7de2d16c4ef 100644
--- a/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
@@ -21,7 +21,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/topic_thumbnail_background"
+      android:background="@color/component_color_resume_lesson_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"
@@ -48,7 +48,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/component_color_resume_lesson_activity_background_color">
+      android:background="@color/component_color_shared_screen_primary_background_color">
 
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
@@ -65,7 +65,7 @@
           android:layout_marginBottom="8dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.chapterTitle}"
-          android:textColor="@color/component_color_resume_lesson_activity_text_color"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textDirection="locale"
           android:textSize="24sp"
           android:textStyle="bold"
@@ -80,7 +80,7 @@
           android:layout_marginTop="16dp"
           android:layout_marginEnd="32dp"
           android:ellipsize="end"
-          android:textColor="@color/component_color_resume_lesson_activity_description_color"
+          android:textColor="@color/component_color_shared_secondary_1_text_color"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />
diff --git a/app/src/main/res/layout-sw600dp-land/topic_lessons_story_summary.xml b/app/src/main/res/layout-sw600dp-land/topic_lessons_story_summary.xml
index d34ac91bed0..994053b30f3 100644
--- a/app/src/main/res/layout-sw600dp-land/topic_lessons_story_summary.xml
+++ b/app/src/main/res/layout-sw600dp-land/topic_lessons_story_summary.xml
@@ -27,10 +27,12 @@
       android:layout_marginTop="12dp"
       android:layout_marginBottom="12dp"
       android:importantForAccessibility="no"
-      app:cardBackgroundColor="@color/color_def_white"
+      app:cardBackgroundColor="@color/component_color_lessons_tab_activity_background_color"
       app:cardCornerRadius="4dp"
       app:cardElevation="4dp"
-      app:rippleColor="@color/color_def_transparent">
+      app:rippleColor="@color/component_color_lessons_tab_activity_lesson_card_ripple_color"
+      app:strokeColor="@color/component_color_shared_card_border_stroke_color"
+      app:strokeWidth="1dp">
 
       <LinearLayout
         android:layout_width="match_parent"
@@ -71,7 +73,7 @@
                 android:layout_gravity="center"
                 android:fontFamily="sans-serif-medium"
                 android:text="@{viewModel.storyProgressPercentageText}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="14sp"
                 android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
             </FrameLayout>
@@ -83,7 +85,7 @@
               android:layout_marginTop="4dp"
               android:fontFamily="sans-serif"
               android:text="@{viewModel.storyPercentage != 100? @string/status_in_progress : @string/status_completed}"
-              android:textColor="@color/oppia_primary_text"
+              android:textColor="@color/component_color_shared_text_view_text_color"
               android:textSize="10sp"
               android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
           </LinearLayout>
@@ -112,7 +114,7 @@
                 android:paddingTop="24dp"
                 android:paddingBottom="4dp"
                 android:text="@{viewModel.storyTitle}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="18sp" />
 
               <TextView
@@ -123,7 +125,7 @@
                 android:fontFamily="sans-serif"
                 android:importantForAccessibility="no"
                 android:text="@{viewModel.computeChapterCountText()}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="16sp" />
             </LinearLayout>
 
@@ -143,7 +145,8 @@
                 android:contentDescription="@{isListExpanded ? @string/hide_chapter_list : @string/show_chapter_list}"
                 app:isRotationAnimationClockwise="@{isListExpanded}"
                 app:rotationAnimationAngle="@{180f}"
-                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
+                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp"
+                app:tint="@color/component_color_lessons_tab_activity_lesson_card_drop_down_arrow_color" />
             </FrameLayout>
           </LinearLayout>
         </LinearLayout>
@@ -153,7 +156,7 @@
           android:id="@+id/chapter_list_container"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
-          android:background="@color/color_def_white_light"
+          android:background="@color/component_color_lessons_tab_activity_background_color"
           android:orientation="vertical"
           android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}">
 
diff --git a/app/src/main/res/layout-sw600dp/revision_card_fragment.xml b/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
index 81e4600ac43..e10815ad3e1 100644
--- a/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
+++ b/app/src/main/res/layout-sw600dp/revision_card_fragment.xml
@@ -13,7 +13,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_revision_card_activity_background_color"
+    android:background="@color/component_color_shared_screen_secondary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -33,7 +33,8 @@
         <TextView
           android:id="@+id/revision_card_explanation_text"
           style="@style/Body"
-          android:layout_marginTop="@dimen/revision_card_fragment_layout_text_margin_top" />
+          android:layout_marginTop="@dimen/revision_card_fragment_layout_text_margin_top"
+          android:textColorLink="@color/component_color_shared_link_text_color" />
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/revision_card_fragment_navigation_card_container"
@@ -49,7 +50,7 @@
             android:layout_marginEnd="28dp"
             android:text="@string/revision_navigation_cards_header"
             android:textAlignment="@{viewModel.subtopicId == 1 ? View.TEXT_ALIGNMENT_TEXT_END : View.TEXT_ALIGNMENT_TEXT_START}"
-            android:textColor="@color/color_def_black"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="20sp"
             android:textStyle="bold"
             app:layout_constraintEnd_toEndOf="parent"
@@ -67,7 +68,7 @@
             android:clipToPadding="true"
             android:onClick="@{() -> viewModel.onPreviousCardClicked()}"
             android:visibility="@{viewModel.subtopicId == 1 ? View.GONE : View.VISIBLE}"
-            app:cardBackgroundColor="@color/color_def_white"
+            app:cardBackgroundColor="@color/component_color_shared_revision_card_background_color"
             app:cardCornerRadius="4dp"
             app:cardElevation="4dp"
             app:cardMaxElevation="4dp"
@@ -96,7 +97,7 @@
                 style="@style/TextViewStart"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:background="@color/color_def_oppia_brown_dark"
+                android:background="@color/component_color_shared_revision_card_text_background_color"
                 android:ellipsize="end"
                 android:fontFamily="sans-serif"
                 android:lines="3"
@@ -105,7 +106,7 @@
                 android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
                 android:paddingBottom="16dp"
                 android:text="@{viewModel.computeTitleText(viewModel.previousSubtopicLiveData)}"
-                android:textColor="@color/color_def_white"
+                android:textColor="@color/component_color_shared_secondary_4_text_color"
                 android:textSize="14sp"
                 android:textStyle="bold"
                 app:layout_constraintTop_toBottomOf="@id/prev_subtopic_image_view" />
@@ -123,7 +124,7 @@
             android:clipToPadding="true"
             android:onClick="@{() -> viewModel.onNextCardClicked()}"
             android:visibility="@{viewModel.subtopicId &lt; viewModel.subtopicListSize ? View.VISIBLE : View.GONE}"
-            app:cardBackgroundColor="@color/color_def_white"
+            app:cardBackgroundColor="@color/component_color_shared_revision_card_background_color"
             app:cardCornerRadius="4dp"
             app:cardElevation="4dp"
             app:cardMaxElevation="4dp"
@@ -152,7 +153,7 @@
                 style="@style/TextViewStart"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:background="@color/color_def_oppia_brown_dark"
+                android:background="@color/component_color_shared_revision_card_text_background_color"
                 android:ellipsize="end"
                 android:fontFamily="sans-serif"
                 android:lines="3"
@@ -161,7 +162,7 @@
                 android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
                 android:paddingBottom="16dp"
                 android:text="@{viewModel.computeTitleText(viewModel.nextSubtopicLiveData)}"
-                android:textColor="@color/color_def_white"
+                android:textColor="@color/component_color_shared_secondary_4_text_color"
                 android:textSize="14sp"
                 android:textStyle="bold"
                 app:layout_constraintTop_toBottomOf="@id/next_subtopic_image_view" />
diff --git a/app/src/main/res/layout-sw600dp/story_chapter_view.xml b/app/src/main/res/layout-sw600dp/story_chapter_view.xml
index 5a9ca629ba0..b4d65ef1c45 100644
--- a/app/src/main/res/layout-sw600dp/story_chapter_view.xml
+++ b/app/src/main/res/layout-sw600dp/story_chapter_view.xml
@@ -6,7 +6,9 @@
   <data>
 
     <import type="android.view.View" />
+
     <import type="org.oppia.android.app.model.ChapterPlayState" />
+
     <import type="org.oppia.android.app.model.ChapterSummary" />
 
     <variable
@@ -22,7 +24,6 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
-    android:background="@color/component_color_story_activity_container_background_color"
     android:paddingTop="@{viewModel.index == 0 ? @dimen/story_chapter_view_margin_top_first_item : @dimen/space_0dp}">
 
     <FrameLayout
@@ -36,7 +37,7 @@
         android:layout_height="match_parent"
         android:layout_gravity="center_horizontal"
         android:visibility="@{viewModel.index == (viewModel.totalChapters - 1) ? View.INVISIBLE : View.VISIBLE}"
-        app:color="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.COMPLETED ? @color/color_def_grey : @color/oppia_primary}" />
+        app:color="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.COMPLETED ? @color/component_color_story_activity_story_chapter_card_not_start_stroke_color : @color/component_color_story_activity_story_chapter_card_start_stroke_color}" />
 
       <ImageView
         android:id="@+id/progress_image_view"
@@ -70,8 +71,11 @@
         android:layout_marginBottom="32dp"
         android:clickable="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES}"
         android:onClick="@{(v) -> viewModel.onExplorationClicked()}"
+        app:cardBackgroundColor="@color/component_color_story_activity_container_background_color"
         app:cardCornerRadius="4dp"
-        app:cardElevation="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @dimen/story_chapter_card_playable_state_elevation : @dimen/story_chapter_card_not_playable_state_elevation}">
+        app:cardElevation="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @dimen/story_chapter_card_playable_state_elevation : @dimen/story_chapter_card_not_playable_state_elevation}"
+        app:strokeColor="@color/component_color_shared_card_border_stroke_color"
+        app:strokeWidth="1dp">
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="match_parent"
@@ -118,7 +122,6 @@
             android:layout_height="wrap_content"
             android:minHeight="140dp"
             android:padding="8dp"
-            android:background="@color/component_color_story_activity_container_background_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -135,7 +138,7 @@
               android:fontFamily="sans-serif-medium"
               android:maxLines="2"
               android:text="@{viewModel.computeChapterTitleText()}"
-              android:textColor="@color/component_color_story_activity_text_color"
+              android:textColor="@color/component_color_shared_primary_text_color"
               android:textSize="18sp"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent"
@@ -149,7 +152,7 @@
               android:layout_marginEnd="8dp"
               android:layout_marginBottom="4dp"
               android:text="@{htmlContent}"
-              android:textColorLink="@color/component_color_story_activity_text_color"
+              android:textColorLink="@color/component_color_shared_link_text_color"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent"
@@ -168,7 +171,8 @@
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintTop_toBottomOf="@+id/chapter_summary"
               app:layout_constraintVertical_bias="1.0"
-              app:srcCompat="@drawable/ic_check_24dp" />
+              app:srcCompat="@drawable/ic_check_24dp"
+              app:tint="@color/component_color_shared_check_icon_color" />
           </androidx.constraintlayout.widget.ConstraintLayout>
         </androidx.constraintlayout.widget.ConstraintLayout>
       </com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout-sw600dp/story_fragment.xml b/app/src/main/res/layout-sw600dp/story_fragment.xml
index 786c255e904..1c4a22acad5 100644
--- a/app/src/main/res/layout-sw600dp/story_fragment.xml
+++ b/app/src/main/res/layout-sw600dp/story_fragment.xml
@@ -13,7 +13,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white">
+    android:background="@color/component_color_shared_screen_quaternary_background_color">
 
     <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/topic_app_bar_layout"
@@ -28,7 +28,7 @@
         android:id="@+id/story_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_story_activity_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:fontFamily="sans-serif"
         android:gravity="center_vertical"
         android:minHeight="?attr/actionBarSize"
@@ -59,7 +59,7 @@
         android:layout_width="528dp"
         android:layout_height="match_parent"
         android:layout_gravity="center_horizontal"
-        android:background="@color/component_color_story_activity_background_color"
+        android:background="@color/component_color_shared_content_container_background_color"
         android:clipToPadding="false"
         android:overScrollMode="never"
         android:paddingStart="64dp"
diff --git a/app/src/main/res/layout/concept_card_fragment.xml b/app/src/main/res/layout/concept_card_fragment.xml
index f40145a825f..0ffcf760be5 100644
--- a/app/src/main/res/layout/concept_card_fragment.xml
+++ b/app/src/main/res/layout/concept_card_fragment.xml
@@ -13,7 +13,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_concept_card_fragment_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.appcompat.widget.Toolbar
       android:id="@+id/concept_card_toolbar"
@@ -58,7 +58,8 @@
             android:layout_marginEnd="@dimen/concept_card_heading_text_margin_end"
             android:fontFamily="sans-serif-medium"
             android:text="@{viewModel.conceptCardLiveData.conceptCard.skillDescription}"
-            android:textColor="@color/component_color_concept_card_fragment_text_color"
+            android:textColor="@color/component_color_shared_primary_text_color"
+            android:textColorLink="@color/component_color_shared_link_text_color"
             android:textSize="20sp" />
 
           <TextView
@@ -66,7 +67,8 @@
             style="@style/Body"
             android:layout_marginStart="@dimen/concept_card_explanation_text_margin_start"
             android:layout_marginTop="@dimen/concept_card_explanation_text_margin_top"
-            android:layout_marginEnd="@dimen/concept_card_explanation_text_margin_end" />
+            android:layout_marginEnd="@dimen/concept_card_explanation_text_margin_end"
+            android:textColorLink="@color/component_color_shared_link_text_color" />
         </LinearLayout>
         <!-- TODO(#352): Show worked examples in Concept Card. -->
       </ScrollView>
diff --git a/app/src/main/res/layout/lessons_completed_chapter_view.xml b/app/src/main/res/layout/lessons_completed_chapter_view.xml
index ee26070791e..7468d9d4023 100644
--- a/app/src/main/res/layout/lessons_completed_chapter_view.xml
+++ b/app/src/main/res/layout/lessons_completed_chapter_view.xml
@@ -24,7 +24,7 @@
       android:id="@+id/chapter_index"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
-      android:background="@color/color_def_oppia_green"
+      android:background="@color/component_color_lessons_tab_activity_lessons_completed_chapter_index_background_color"
       android:fontFamily="sans-serif"
       android:gravity="center"
       android:importantForAccessibility="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? View.IMPORTANT_FOR_ACCESSIBILITY_YES : View.IMPORTANT_FOR_ACCESSIBILITY_NO}"
@@ -35,7 +35,7 @@
       android:paddingEnd="8dp"
       android:paddingBottom="12dp"
       android:text="@{viewModel.computePlayChapterIndexText()}"
-      android:textColor="@color/color_def_white"
+      android:textColor="@color/component_color_shared_secondary_4_text_color"
       android:textSize="20sp"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -45,7 +45,7 @@
       style="@style/TextViewStart"
       android:layout_width="0dp"
       android:layout_height="0dp"
-      android:background="@color/color_def_light_green"
+      android:background="@color/component_color_lessons_tab_activity_lessons_completed_chapter_name_background_color"
       android:fontFamily="sans-serif"
       android:gravity="center|start"
       android:importantForAccessibility="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? View.IMPORTANT_FOR_ACCESSIBILITY_YES : View.IMPORTANT_FOR_ACCESSIBILITY_NO}"
@@ -53,7 +53,7 @@
       android:paddingStart="12dp"
       android:paddingEnd="12dp"
       android:text="@{viewModel.chapterTitle}"
-      android:textColor="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/oppia_primary_text : @color/oppia_primary_text_30}"
+      android:textColor="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/component_color_shared_primary_text_color : @color/component_color_shared_primary_text_color}"
       android:textSize="14sp"
       app:layout_constraintBottom_toTopOf="@id/divider"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/lessons_in_progress_chapter_view.xml b/app/src/main/res/layout/lessons_in_progress_chapter_view.xml
index c052db4944e..057e550d1d1 100644
--- a/app/src/main/res/layout/lessons_in_progress_chapter_view.xml
+++ b/app/src/main/res/layout/lessons_in_progress_chapter_view.xml
@@ -23,7 +23,7 @@
     <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:background="@color/color_def_oppia_green"
+      android:background="@drawable/chapter_dark_green_bg_with_bright_green_border"
       android:minHeight="48dp"
       android:orientation="horizontal">
 
@@ -39,7 +39,7 @@
         android:minHeight="20dp"
         android:text="@{viewModel.computePlayChapterIndexText()}"
         android:textAlignment="center"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_secondary_4_text_color"
         android:textSize="16sp" />
 
       <ImageView
@@ -56,7 +56,7 @@
         style="@style/TextViewStart"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/color_def_light_green"
+        android:background="@drawable/chapter_white_bg_with_bright_green_border"
         android:fontFamily="sans-serif"
         android:gravity="center|start"
         android:importantForAccessibility="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? View.IMPORTANT_FOR_ACCESSIBILITY_YES : View.IMPORTANT_FOR_ACCESSIBILITY_NO}"
@@ -64,7 +64,7 @@
         android:paddingStart="12dp"
         android:paddingEnd="12dp"
         android:text="@{viewModel.chapterTitle}"
-        android:textColor="@color/color_def_accessible_light_grey_2"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="14sp" />
     </LinearLayout>
 
diff --git a/app/src/main/res/layout/lessons_locked_chapter_view.xml b/app/src/main/res/layout/lessons_locked_chapter_view.xml
index 89be6f1ad1e..78a04c5938e 100644
--- a/app/src/main/res/layout/lessons_locked_chapter_view.xml
+++ b/app/src/main/res/layout/lessons_locked_chapter_view.xml
@@ -22,7 +22,7 @@
       android:id="@+id/locked_chapter_container"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:background="@color/color_def_oppia_dark_grey"
+      android:background="@color/component_color_lessons_tab_activity_lessons_locked_chapter_container_background_color"
       android:clickable="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? true : false}"
       android:minHeight="48dp"
       android:onClick="@{() -> viewModel.onClick(viewModel.explorationId)}"
@@ -40,7 +40,7 @@
         android:minHeight="20dp"
         android:text="@{viewModel.computePlayChapterIndexText()}"
         android:textAlignment="center"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_secondary_4_text_color"
         android:textSize="16sp" />
 
       <ImageView
@@ -52,12 +52,17 @@
         android:contentDescription="@{viewModel.computeChapterPlayStateIconContentDescription()}"
         app:srcCompat="@drawable/ic_baseline_lock_24" />
 
+      <View
+        android:layout_width="1dp"
+        android:layout_height="match_parent"
+        android:background="@color/component_color_lessons_tab_activity_lessons_locked_vertical_divider_color"/>
+
       <TextView
         android:id="@+id/chapter_name"
         style="@style/TextViewStart"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/color_def_grey"
+        android:background="@color/component_color_lessons_tab_activity_lessons_locked_chapter_name_background_color"
         android:fontFamily="sans-serif"
         android:gravity="center|start"
         android:importantForAccessibility="@{viewModel.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? View.IMPORTANT_FOR_ACCESSIBILITY_YES : View.IMPORTANT_FOR_ACCESSIBILITY_NO}"
@@ -65,7 +70,7 @@
         android:paddingStart="12dp"
         android:paddingEnd="12dp"
         android:text="@{viewModel.chapterTitle}"
-        android:textColor="@color/color_def_accessible_light_grey_2"
+        android:textColor="@color/component_color_lessons_tab_activity_lessons_locked_chapter_name_text_color"
         android:textSize="14sp" />
     </LinearLayout>
 
diff --git a/app/src/main/res/layout/lessons_not_started_chapter_view.xml b/app/src/main/res/layout/lessons_not_started_chapter_view.xml
index 358a7850e15..f2038b60e8f 100644
--- a/app/src/main/res/layout/lessons_not_started_chapter_view.xml
+++ b/app/src/main/res/layout/lessons_not_started_chapter_view.xml
@@ -36,7 +36,7 @@
       android:paddingStart="8dp"
       android:paddingEnd="8dp"
       android:text="@{viewModel.computePlayChapterIndexText()}"
-      android:textColor="@color/color_def_white"
+      android:textColor="@color/component_color_shared_secondary_4_text_color"
       android:textSize="20sp"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -53,7 +53,7 @@
       android:paddingStart="12dp"
       android:paddingEnd="12dp"
       android:text="@{viewModel.chapterTitle}"
-      android:textColor="@color/color_def_black"
+      android:textColor="@color/component_color_shared_primary_text_color"
       android:textSize="14sp"
       app:layout_constraintBottom_toTopOf="@id/divider"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/resume_lesson_activity.xml b/app/src/main/res/layout/resume_lesson_activity.xml
index 6d1636bfae8..f15c5c409b0 100644
--- a/app/src/main/res/layout/resume_lesson_activity.xml
+++ b/app/src/main/res/layout/resume_lesson_activity.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layout>
+
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
@@ -17,15 +18,15 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="end"
-        android:background="@color/component_color_resume_lesson_activity_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
         app:navigationContentDescription="@string/navigate_up"
         app:navigationIcon="?attr/homeAsUpIndicator"
         app:title="@string/resume_lesson_activity_title"
-        app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/color_def_white" />
+        app:titleTextAppearance="@style/ToolbarTextAppearance" />
     </com.google.android.material.appbar.AppBarLayout>
+
     <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
diff --git a/app/src/main/res/layout/resume_lesson_fragment.xml b/app/src/main/res/layout/resume_lesson_fragment.xml
index 49a5021456f..c1fe33dd70b 100644
--- a/app/src/main/res/layout/resume_lesson_fragment.xml
+++ b/app/src/main/res/layout/resume_lesson_fragment.xml
@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_resume_lesson_activity_background_color"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -47,7 +47,7 @@
         android:layout_marginBottom="16dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.chapterTitle}"
-        android:textColor="@color/component_color_resume_lesson_activity_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textDirection="locale"
         android:textSize="24sp"
         android:textStyle="bold"
@@ -64,7 +64,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="32dp"
         android:ellipsize="end"
-        android:textColor="@color/component_color_resume_lesson_activity_description_color"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />
diff --git a/app/src/main/res/layout/revision_card_activity.xml b/app/src/main/res/layout/revision_card_activity.xml
index b4e9886e08c..78e72c6b269 100644
--- a/app/src/main/res/layout/revision_card_activity.xml
+++ b/app/src/main/res/layout/revision_card_activity.xml
@@ -22,7 +22,7 @@
         android:id="@+id/revision_card_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_concept_card_fragment_toolbar_color"
+        android:background="@color/component_color_revision_card_activity_toolbar_color"
         android:gravity="center_vertical"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
diff --git a/app/src/main/res/layout/revision_card_fragment.xml b/app/src/main/res/layout/revision_card_fragment.xml
index f723f76558f..5c1aa19d965 100644
--- a/app/src/main/res/layout/revision_card_fragment.xml
+++ b/app/src/main/res/layout/revision_card_fragment.xml
@@ -13,7 +13,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_revision_card_activity_background_color"
+    android:background="@color/component_color_shared_screen_secondary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -30,7 +30,8 @@
         android:layout_marginTop="@dimen/revision_card_fragment_layout_text_margin_top"
         android:layout_marginEnd="@dimen/revision_card_fragment_layout_margin_end"
         android:minWidth="48dp"
-        android:minHeight="48dp" />
+        android:minHeight="48dp"
+        android:textColorLink="@color/component_color_shared_link_text_color" />
 
       <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/revision_card_fragment_navigation_card_container"
@@ -46,7 +47,7 @@
           android:layout_marginEnd="28dp"
           android:text="@string/revision_navigation_cards_header"
           android:textAlignment="@{viewModel.subtopicId == 1 ? View.TEXT_ALIGNMENT_TEXT_END : View.TEXT_ALIGNMENT_TEXT_START}"
-          android:textColor="@color/color_def_black"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="20sp"
           android:textStyle="bold"
           android:visibility="@{viewModel.subtopicListSize == 1 ? View.INVISIBLE : View.VISIBLE}"
@@ -65,7 +66,7 @@
           android:clipToPadding="true"
           android:onClick="@{() -> viewModel.onPreviousCardClicked()}"
           android:visibility="@{viewModel.subtopicId == 1 ? View.GONE : View.VISIBLE}"
-          app:cardBackgroundColor="@color/color_def_white"
+          app:cardBackgroundColor="@color/component_color_shared_revision_card_background_color"
           app:cardCornerRadius="4dp"
           app:cardElevation="4dp"
           app:cardMaxElevation="4dp"
@@ -94,7 +95,7 @@
               style="@style/TextViewStart"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
-              android:background="@color/color_def_oppia_brown_dark"
+              android:background="@color/component_color_shared_revision_card_text_background_color"
               android:ellipsize="end"
               android:fontFamily="sans-serif"
               android:lines="3"
@@ -103,7 +104,7 @@
               android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
               android:paddingBottom="16dp"
               android:text="@{viewModel.computeTitleText(viewModel.previousSubtopicLiveData)}"
-              android:textColor="@color/color_def_white"
+              android:textColor="@color/component_color_shared_secondary_4_text_color"
               android:textSize="14sp"
               android:textStyle="bold"
               app:layout_constraintTop_toBottomOf="@id/prev_subtopic_image_view" />
@@ -121,7 +122,7 @@
           android:clipToPadding="true"
           android:onClick="@{() -> viewModel.onNextCardClicked()}"
           android:visibility="@{viewModel.subtopicId &lt; viewModel.subtopicListSize ? View.VISIBLE : View.GONE}"
-          app:cardBackgroundColor="@color/color_def_white"
+          app:cardBackgroundColor="@color/component_color_shared_revision_card_background_color"
           app:cardCornerRadius="4dp"
           app:cardElevation="4dp"
           app:cardMaxElevation="4dp"
@@ -150,7 +151,7 @@
               style="@style/TextViewStart"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
-              android:background="@color/color_def_oppia_brown_dark"
+              android:background="@color/component_color_shared_revision_card_text_background_color"
               android:ellipsize="end"
               android:fontFamily="sans-serif"
               android:lines="3"
@@ -159,7 +160,7 @@
               android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
               android:paddingBottom="16dp"
               android:text="@{viewModel.computeTitleText(viewModel.nextSubtopicLiveData)}"
-              android:textColor="@color/color_def_white"
+              android:textColor="@color/component_color_shared_secondary_4_text_color"
               android:textSize="14sp"
               android:textStyle="bold"
               app:layout_constraintTop_toBottomOf="@id/next_subtopic_image_view" />
diff --git a/app/src/main/res/layout/story_chapter_view.xml b/app/src/main/res/layout/story_chapter_view.xml
index 1d45abbfe16..ca2e67e11a0 100644
--- a/app/src/main/res/layout/story_chapter_view.xml
+++ b/app/src/main/res/layout/story_chapter_view.xml
@@ -29,6 +29,7 @@
       android:layout_marginTop="16dp"
       android:layout_marginEnd="28dp"
       android:layout_marginBottom="16dp"
+      app:cardBackgroundColor="@color/component_color_story_activity_container_background_color"
       android:clickable="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES}"
       android:onClick="@{(v) -> viewModel.onExplorationClicked()}"
       app:cardCornerRadius="4dp"
@@ -67,19 +68,18 @@
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="center"
-          app:srcCompat="@drawable/ic_baseline_lock_24"
           android:visibility="@{viewModel.chapterSummary.chapterPlayState == ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? View.VISIBLE : View.INVISIBLE}"
           app:layout_constraintBottom_toBottomOf="@id/chapter_thumbnail"
           app:layout_constraintEnd_toEndOf="@id/chapter_thumbnail"
           app:layout_constraintStart_toStartOf="@id/chapter_thumbnail"
-          app:layout_constraintTop_toTopOf="@id/chapter_thumbnail" />
+          app:layout_constraintTop_toTopOf="@id/chapter_thumbnail"
+          app:srcCompat="@drawable/ic_baseline_lock_24" />
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:minHeight="140dp"
           android:padding="8dp"
-          android:background="@color/component_color_story_activity_container_background_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
@@ -96,7 +96,7 @@
             android:fontFamily="sans-serif-medium"
             android:maxLines="2"
             android:text="@{viewModel.computeChapterTitleText()}"
-            android:textColor="@color/component_color_story_activity_text_color"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="18sp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -110,8 +110,8 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:text="@{htmlContent}"
-            android:textColor="@color/component_color_story_activity_text_color"
-            android:textColorLink="@color/oppia_primary"
+            android:textColor="@color/component_color_shared_primary_text_color"
+            android:textColorLink="@color/component_color_shared_link_text_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -125,12 +125,13 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:contentDescription="@{@string/chapter_completed}"
-            app:srcCompat="@drawable/ic_check_24dp"
             android:visibility="@{viewModel.chapterSummary.chapterPlayState == ChapterPlayState.COMPLETED ? View.VISIBLE : View.GONE}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/chapter_summary"
-            app:layout_constraintVertical_bias="1.0" />
+            app:layout_constraintVertical_bias="1.0"
+            app:srcCompat="@drawable/ic_check_24dp"
+            app:tint="@color/component_color_shared_check_icon_color" />
         </androidx.constraintlayout.widget.ConstraintLayout>
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout/story_fragment.xml b/app/src/main/res/layout/story_fragment.xml
index e7e38eaccb2..1d5c4f5a61a 100644
--- a/app/src/main/res/layout/story_fragment.xml
+++ b/app/src/main/res/layout/story_fragment.xml
@@ -13,7 +13,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white">
+    android:background="@color/component_color_shared_screen_primary_background_color">
 
     <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/topic_app_bar_layout"
@@ -28,7 +28,7 @@
         android:id="@+id/story_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_story_activity_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:fontFamily="sans-serif"
         android:gravity="center_vertical"
         android:minHeight="?attr/actionBarSize"
@@ -42,7 +42,7 @@
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginEnd="20dp"
-          android:text="@{viewModel.storyNameLiveData}"/>
+          android:text="@{viewModel.storyNameLiveData}" />
       </androidx.appcompat.widget.Toolbar>
     </com.google.android.material.appbar.AppBarLayout>
 
@@ -59,7 +59,6 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="center_horizontal"
-        android:background="@color/component_color_story_activity_background_color"
         android:clipToPadding="false"
         android:overScrollMode="never"
         android:paddingBottom="@dimen/story_fragment_padding_bottom"
diff --git a/app/src/main/res/layout/story_header_view.xml b/app/src/main/res/layout/story_header_view.xml
index 688ec02e038..1aef722aeac 100644
--- a/app/src/main/res/layout/story_header_view.xml
+++ b/app/src/main/res/layout/story_header_view.xml
@@ -19,7 +19,7 @@
     android:layout_marginBottom="8dp"
     android:fontFamily="sans-serif-medium"
     android:text="@{viewModel.computeStoryProgressChapterCompletedText()}"
-    android:textColor="@color/component_color_story_activity_story_header_view_text_color"
+    android:textColor="@color/component_color_shared_primary_text_color"
     android:textSize="18sp"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout/topic_fragment.xml b/app/src/main/res/layout/topic_fragment.xml
index fdcc12484d7..3932b56e38f 100644
--- a/app/src/main/res/layout/topic_fragment.xml
+++ b/app/src/main/res/layout/topic_fragment.xml
@@ -27,7 +27,7 @@
         android:id="@+id/topic_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_topic_fragment_primary_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:fontFamily="sans-serif"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
@@ -52,7 +52,7 @@
         android:layout_marginEnd="@dimen/topic_fragment_tab_layout_margin_end"
         android:textSize="14sp"
         app:layout_constraintTop_toTopOf="parent"
-        app:tabBackground="@color/component_color_topic_fragment_primary_tab_color"
+        app:tabBackground="@color/component_color_shared_activity_toolbar_color"
         app:tabGravity="fill"
         app:tabIconTint="@color/tab_icon_color_selector"
         app:tabIndicatorColor="@android:color/white"
diff --git a/app/src/main/res/layout/topic_lessons_fragment.xml b/app/src/main/res/layout/topic_lessons_fragment.xml
index 6af9f6a87bb..0b7b7ad9b2c 100644
--- a/app/src/main/res/layout/topic_lessons_fragment.xml
+++ b/app/src/main/res/layout/topic_lessons_fragment.xml
@@ -9,24 +9,15 @@
       type="org.oppia.android.app.topic.lessons.TopicLessonViewModel" />
   </data>
 
-  <androidx.constraintlayout.widget.ConstraintLayout
+  <androidx.recyclerview.widget.RecyclerView
+    android:id="@+id/story_summary_recycler_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/oppia_background">
-
-    <androidx.recyclerview.widget.RecyclerView
-      android:id="@+id/story_summary_recycler_view"
-      android:layout_width="match_parent"
-      android:layout_height="0dp"
-      android:clipToPadding="false"
-      android:overScrollMode="never"
-      android:paddingBottom="@dimen/topic_lessons_fragment_layout_padding_bottom"
-      android:scrollbars="none"
-      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-      app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent"
-      app:data="@{viewModel.topicLessonLiveData}" />
-  </androidx.constraintlayout.widget.ConstraintLayout>
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
+    android:clipToPadding="false"
+    android:overScrollMode="never"
+    android:paddingBottom="@dimen/topic_lessons_fragment_layout_padding_bottom"
+    android:scrollbars="none"
+    app:data="@{viewModel.topicLessonLiveData}"
+    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 </layout>
diff --git a/app/src/main/res/layout/topic_lessons_story_summary.xml b/app/src/main/res/layout/topic_lessons_story_summary.xml
index b10a51e38d6..40e62555c62 100644
--- a/app/src/main/res/layout/topic_lessons_story_summary.xml
+++ b/app/src/main/res/layout/topic_lessons_story_summary.xml
@@ -24,10 +24,12 @@
     android:layout_marginEnd="20dp"
     android:layout_marginBottom="12dp"
     android:importantForAccessibility="no"
-    app:cardBackgroundColor="@color/color_def_white"
+    app:cardBackgroundColor="@color/component_color_lessons_tab_activity_background_color"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp"
-    app:rippleColor="@color/color_def_transparent">
+    app:rippleColor="@color/component_color_lessons_tab_activity_lesson_card_ripple_color"
+    app:strokeWidth="1dp"
+    app:strokeColor="@color/component_color_shared_card_border_stroke_color">
 
     <LinearLayout
       android:layout_width="match_parent"
@@ -69,7 +71,7 @@
               android:layout_gravity="center"
               android:fontFamily="sans-serif-medium"
               android:text="@{viewModel.storyProgressPercentageText}"
-              android:textColor="@color/oppia_primary_text"
+              android:textColor="@color/component_color_shared_text_view_text_color"
               android:textSize="14sp"
               android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
           </FrameLayout>
@@ -81,7 +83,7 @@
             android:layout_marginTop="4dp"
             android:fontFamily="sans-serif"
             android:text="@{viewModel.storyPercentage != 100? @string/status_in_progress : @string/status_completed}"
-            android:textColor="@color/oppia_primary_text"
+            android:textColor="@color/component_color_shared_text_view_text_color"
             android:textSize="10sp"
             android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
         </LinearLayout>
@@ -110,7 +112,7 @@
               android:paddingTop="24dp"
               android:paddingBottom="4dp"
               android:text="@{viewModel.storyTitle}"
-              android:textColor="@color/oppia_primary_text"
+              android:textColor="@color/component_color_shared_text_view_text_color"
               android:textSize="18sp" />
 
             <TextView
@@ -120,7 +122,7 @@
               android:layout_height="wrap_content"
               android:fontFamily="sans-serif"
               android:text="@{viewModel.computeChapterCountText()}"
-              android:textColor="@color/oppia_primary_text"
+              android:textColor="@color/component_color_shared_text_view_text_color"
               android:textSize="16sp" />
           </LinearLayout>
 
@@ -140,7 +142,8 @@
               android:contentDescription="@{isListExpanded ? @string/hide_chapter_list : @string/show_chapter_list}"
               app:isRotationAnimationClockwise="@{isListExpanded}"
               app:rotationAnimationAngle="@{180f}"
-              app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
+              app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp"
+              app:tint="@color/component_color_lessons_tab_activity_lesson_card_drop_down_arrow_color"/>
           </FrameLayout>
         </LinearLayout>
       </LinearLayout>
@@ -150,7 +153,7 @@
         android:id="@+id/chapter_list_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/color_def_white_light"
+        android:background="@color/component_color_lessons_tab_activity_background_color"
         android:orientation="vertical"
         android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}">
 
diff --git a/app/src/main/res/layout/topic_revision_fragment.xml b/app/src/main/res/layout/topic_revision_fragment.xml
index 5e548c12f8b..2f2e852f774 100755
--- a/app/src/main/res/layout/topic_revision_fragment.xml
+++ b/app/src/main/res/layout/topic_revision_fragment.xml
@@ -9,23 +9,18 @@
       type="org.oppia.android.app.topic.revision.TopicRevisionViewModel" />
   </data>
 
-  <FrameLayout
+  <androidx.recyclerview.widget.RecyclerView
+    android:id="@+id/revision_recycler_view"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/component_color_topic_revision_fragment_background_color">
-
-    <androidx.recyclerview.widget.RecyclerView
-      android:id="@+id/revision_recycler_view"
-      android:layout_width="match_parent"
-      android:layout_height="wrap_content"
-      android:clipToPadding="false"
-      android:overScrollMode="never"
-      android:paddingStart="@dimen/topic_revision_fragment_padding_start"
-      android:paddingTop="@dimen/topic_revision_fragment_padding_top"
-      android:paddingEnd="@dimen/topic_revision_fragment_padding_end"
-      android:paddingBottom="@dimen/topic_revision_fragment_padding_bottom"
-      android:scrollbars="none"
-      android:tag="@string/topic_revision_recyclerview_tag"
-      app:data="@{viewModel.subtopicLiveData}" />
-  </FrameLayout>
+    android:layout_height="wrap_content"
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
+    android:clipToPadding="false"
+    android:overScrollMode="never"
+    android:paddingStart="@dimen/topic_revision_fragment_padding_start"
+    android:paddingTop="@dimen/topic_revision_fragment_padding_top"
+    android:paddingEnd="@dimen/topic_revision_fragment_padding_end"
+    android:paddingBottom="@dimen/topic_revision_fragment_padding_bottom"
+    android:scrollbars="none"
+    android:tag="@string/topic_revision_recyclerview_tag"
+    app:data="@{viewModel.subtopicLiveData}" />
 </layout>
diff --git a/app/src/main/res/layout/topic_revision_summary_view.xml b/app/src/main/res/layout/topic_revision_summary_view.xml
index 05aa52d9111..70aec1d1231 100755
--- a/app/src/main/res/layout/topic_revision_summary_view.xml
+++ b/app/src/main/res/layout/topic_revision_summary_view.xml
@@ -22,7 +22,7 @@
     android:layout_marginBottom="@dimen/topic_revision_summary_view_container_margin_bottom"
     android:clipToPadding="true"
     android:onClick="@{(v) -> viewModel.onRevisionItemPressed.onTopicRevisionSummaryClicked(viewModel.subtopic)}"
-    app:cardBackgroundColor="@color/color_def_white"
+    app:cardBackgroundColor="@color/component_color_shared_revision_card_background_color"
     app:cardCornerRadius="4dp"
     app:cardElevation="4dp"
     app:cardMaxElevation="4dp">
@@ -49,7 +49,7 @@
         style="@style/TextViewStart"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/color_def_oppia_brown_dark"
+        android:background="@color/component_color_shared_revision_card_text_background_color"
         android:ellipsize="end"
         android:fontFamily="sans-serif"
         android:lines="3"
@@ -58,7 +58,7 @@
         android:paddingEnd="@dimen/topic_revision_summary_view_subtopic_title_text_view_padding_end"
         android:paddingBottom="16dp"
         android:text="@{viewModel.subtopicTitle}"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_secondary_4_text_color"
         android:textSize="14sp"
         android:textStyle="bold"
         app:layout_constraintTop_toBottomOf="@id/subtopic_image_view" />
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index e46826859d3..58302f217b5 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -4,6 +4,7 @@
   <color name="color_palette_primary_dark_color">@color/color_def_oppia_bangladesh_green</color>
   <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_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>
@@ -18,6 +19,7 @@
   <color name="color_palette_item_background_solid_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_item_background_stroke_color">@color/color_def_black_12</color>
   <color name="color_palette_toolbar_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_toolbar_shadow_color">@color/color_def_black_24</color>
   <color name="color_palette_toolbar_text_color">@color/color_def_white</color>
   <color name="color_palette_secondary_toolbar_color">@color/color_def_forest_green</color>
   <color name="color_palette_status_bar_color">@color/color_def_dark_green</color>
@@ -39,6 +41,7 @@
   <color name="color_palette_arrow_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_exploration_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_revision_card_background_color">@color/color_def_oppia_light_black</color>
+  <color name="color_palette_revision_card_fragment_status_bar_color">@color/color_def_dark_green</color>
   <color name="color_palette_content_background_solid_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_content_background_stroke_color">@color/color_def_dark_blue</color>
   <color name="color_palette_rounded_rect_background_color">@color/color_def_oppia_grayish_black</color>
@@ -110,7 +113,7 @@
   <color name="color_palette_confetti_yellow_color">@color/color_def_confetti_bright_gold</color>
   <color name="color_palette_confetti_blue_color">@color/color_def_confetti_crystal_blue</color>
   <color name="color_palette_forward_arrow_button_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_revision_card_layout_background_color">@color/color_def_oppia_light_black</color>
+  <color name="color_palette_topic_activity_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_view_all_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_layout_below_greeting_text_color">@color/color_def_dark_turquoise</color>
   <color name="color_palette_thumbnail_gradient_end_color">@color/color_def_accessible_grey</color>
@@ -121,6 +124,7 @@
   <color name="color_palette_toolbar_secondary_color">@color/color_def_forest_green</color>
   <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_concept_card_toolbar_color">@color/color_def_dark_pink</color>
+  <color name="color_palette_revision_card_toolbar_color">@color/color_def_forest_green</color>
   <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_pink</color>
   <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
   <color name="color_palette_underline_view_color">@color/color_def_bright_green</color>
@@ -149,4 +153,30 @@
   <color name="color_palette_topic_card_text_color">@color/color_def_white</color>
   <color name="color_palette_profile_progress_activity_story_count_card_stroke_color">@color/color_def_grey</color>
   <color name="color_palette_section_title_divider_color">@color/color_def_white</color>
+  <color name="color_palette_lesson_card_drop_down_arrow_color">@color/color_def_white</color>
+  <color name="color_palette_lesson_card_dashed_divider_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lesson_card_chapter_list_background_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_shared_card_border_stroke_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lesson_in_progress_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_in_progress_chapter_name_background_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_lessons_locked_chapter_container_background_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lesson_locked_chapter_name_text_color">@color/color_def_white_80</color>
+  <color name="color_palette_lesson_locked_chapter_name_background_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lessons_locked_vertical_divider_color">@color/color_def_dark_silver</color>
+  <color name="color_palette_lesson_not_started_stroke_color">@color/color_def_white</color>
+  <color name="color_palette_lesson_not_started_chapter_name_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_not_started_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_completed_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_completed_chapter_name_background_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_chapter_completed_progress_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_chapter_in_progress_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_chapter_not_finished_color">@color/color_def_chooser_grey</color>
+  <color name="color_palette_chapter_not_started_color">@color/color_def_grey_shade_20</color>
+  <color name="color_palette_revision_card_text_background_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_check_icon_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_story_chapter_start_stroke_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_story_chapter_start_progress_icon_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_story_chapter_not_start_stroke_color">@color/color_def_grey</color>
+  <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>
 </resources>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
index 643faf6fb02..342811c3754 100644
--- a/app/src/main/res/values/color_defs.xml
+++ b/app/src/main/res/values/color_defs.xml
@@ -9,6 +9,7 @@
   <color name="color_def_oppia_reddish_brown">#882814</color>
   <color name="color_def_oppia_brown">#C55F45</color>
   <color name="color_def_oppia_light_brown">#E76F51</color>
+  <color name="color_def_pastel_pink">#E7AC9B</color>
   <color name="color_def_oppia_stroke_blue">#4D395FD0</color>
   <color name="color_def_oppia_solid_blue">#4DA5D3EC</color>
   <color name="color_def_black_80">#CC333333</color>
@@ -23,6 +24,7 @@
   <color name="color_def_black_26">#42000000</color>
   <color name="color_def_black_54">#8A000000</color>
   <color name="color_def_black_87">#DE000000</color>
+  <color name="color_def_black_24">#3D000000</color>
   <color name="color_def_white_light">#F9F9F9</color>
   <color name="color_def_accessible_grey">#333333</color>
   <color name="color_def_accessible_light_grey">#555555</color>
@@ -94,6 +96,7 @@
   <color name="color_def_teal_blue">#2F6687</color>
   <color name="color_def_dark_red">#A6503A</color>
   <color name="color_def_dark_purple">#441530</color>
-  <color name="color_def_oppia_white_2">#F2F2F2</color>
   <color name="color_def_blue_sapphire">#205D86</color>
+  <color name="color_def_dark_silver_40">#80707070</color>
+  <color name="color_def_columbia_blue">#C6DCDA</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index f297dc6d0c2..f1ff6185fe5 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -4,6 +4,7 @@
   <color name="color_palette_primary_dark_color">@color/color_def_dark_green</color>
   <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_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>
@@ -19,6 +20,7 @@
   <color name="color_palette_item_background_solid_color">@color/color_def_white</color>
   <color name="color_palette_item_background_stroke_color">@color/color_def_black_12</color>
   <color name="color_palette_toolbar_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_toolbar_shadow_color">@color/color_def_black_24</color>
   <color name="color_palette_toolbar_text_color">@color/color_def_white</color>
   <color name="color_palette_secondary_toolbar_color">@color/color_def_oppia_green</color>
   <color name="color_palette_status_bar_color">@color/color_def_dark_green</color>
@@ -39,7 +41,7 @@
   <color name="color_palette_dots_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_arrow_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_exploration_background_color">@color/color_def_oppia_light_green</color>
-  <color name="color_palette_revision_card_background_color">@color/color_def_oppia_light_green</color>
+  <color name="color_palette_revision_card_background_color">@color/color_def_yellow_ivory</color>
   <color name="color_palette_revision_card_fragment_status_bar_color">@color/color_def_oppia_reddish_brown</color>
   <color name="color_palette_content_background_solid_color">@color/color_def_oppia_solid_blue</color>
   <color name="color_palette_content_background_stroke_color">@color/color_def_oppia_stroke_blue</color>
@@ -112,7 +114,7 @@
   <color name="color_palette_confetti_yellow_color">@color/color_def_confetti_light_gold</color>
   <color name="color_palette_confetti_blue_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_forward_arrow_button_color">@color/color_def_oppia_dark_blue</color>
-  <color name="color_palette_revision_card_layout_background_color">@color/color_def_oppia_white</color>
+  <color name="color_palette_topic_activity_background_color">@color/color_def_oppia_white</color>
   <color name="color_palette_layout_below_greeting_text_color">@color/color_def_oppia_brown_dark</color>
   <color name="color_palette_thumbnail_gradient_end_color">@color/color_def_white</color>
   <color name="color_palette_thumbnail_gradient_start_color">@color/color_def_white_0</color>
@@ -122,16 +124,17 @@
   <color name="color_palette_toolbar_secondary_color">@color/color_def_oppia_green</color>
   <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_green</color>
   <color name="color_palette_concept_card_toolbar_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_revision_card_toolbar_color">@color/color_def_oppia_brown_dark</color>
   <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_red</color>
   <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
   <color name="color_palette_underline_view_color">@color/color_def_oppia_light_brown</color>
   <color name="color_palette_menu_text_color">@color/color_def_black</color>
   <color name="color_palette_secondary_container_background_color">@color/color_def_teal_blue</color>
-  <color name="color_palette_concept_status_bar_color">@color/color_def_dark_red</color>
-  <color name="color_palette_topic_revision_background_color">@color/color_def_oppia_white_2</color>
+  <color name="color_palette_concept_status_bar_color">@color/color_def_oppia_reddish_brown</color>
+  <color name="color_palette_topic_revision_background_color">@color/color_def_oppia_white</color>
   <color name="color_palette_view_all_text_color">@color/color_def_oppia_green</color>
   <color name="color_palette_completed_progress_activity_background_color">@color/color_def_white</color>
-  <color name="color_palette_topic_fragments_background_color">@color/color_def_oppia_white_2</color>
+  <color name="color_palette_topic_fragments_background_color">@color/color_def_oppia_white</color>
   <color name="color_palette_topic_practice_header_description_color">@color/color_def_accessible_light_grey_2</color>
   <color name="color_palette_topic_practice_subtopic_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_profile_view_designation_color">@color/color_def_accessible_light_grey</color>
@@ -151,4 +154,30 @@
   <color name="color_palette_topic_card_text_color">@color/color_def_white</color>
   <color name="color_palette_profile_progress_activity_story_count_card_stroke_color">@color/color_def_grey</color>
   <color name="color_palette_section_title_divider_color">@color/color_def_light_grey</color>
+  <color name="color_palette_lesson_card_drop_down_arrow_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_lesson_card_dashed_divider_color">@color/color_def_dark_silver_40</color>
+  <color name="color_palette_lesson_card_chapter_list_background_color">@color/color_def_white</color>
+  <color name="color_palette_shared_card_border_stroke_color">@color/color_def_transparent</color>
+  <color name="color_palette_lesson_in_progress_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_in_progress_chapter_name_background_color">@color/color_def_light_green</color>
+  <color name="color_palette_lessons_locked_chapter_container_background_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lesson_locked_chapter_name_text_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_lesson_locked_chapter_name_background_color">@color/color_def_grey</color>
+  <color name="color_palette_lessons_locked_vertical_divider_color">@color/color_def_transparent</color>
+  <color name="color_palette_lesson_not_started_stroke_color">@color/color_def_bright_green</color>
+  <color name="color_palette_lesson_not_started_chapter_name_background_color">@color/color_def_white</color>
+  <color name="color_palette_lesson_not_started_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_completed_chapter_index_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_lesson_completed_chapter_name_background_color">@color/color_def_light_green</color>
+  <color name="color_palette_chapter_completed_progress_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_chapter_in_progress_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_chapter_not_finished_color">@color/color_def_chooser_grey</color>
+  <color name="color_palette_chapter_not_started_color">@color/color_def_grey_shade_20</color>
+  <color name="color_palette_revision_card_text_background_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_check_icon_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_story_chapter_start_stroke_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_story_chapter_start_progress_icon_color">@color/color_def_white</color>
+  <color name="color_palette_story_chapter_not_start_stroke_color">@color/color_def_grey</color>
+  <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>
 </resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 216e874d0dc..6619ba2b463 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -2,17 +2,22 @@
 <resources>
   <color name="component_color_shared_edit_text_cursor_color">@color/color_palette_cursor_color</color>
   <color name="component_color_shared_activity_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_shared_activity_toolbar_shadow_color">@color/color_palette_toolbar_shadow_color</color>
   <color name="component_color_shared_activity_toolbar_text_color">@color/color_palette_toolbar_text_color</color>
   <color name="component_color_shared_screen_primary_background_color">@color/color_palette_primary_background_color</color>
   <color name="component_color_shared_screen_secondary_background_color">@color/color_palette_secondary_background_color</color>
   <color name="component_color_shared_screen_tertiary_background_color">@color/color_palette_tertiary_background_color</color>
+  <color name="component_color_shared_screen_quaternary_background_color">@color/color_palette_topic_activity_background_color</color>
   <color name="component_color_shared_content_container_background_color">@color/color_palette_content_container_background_color</color>
+  <color name="component_color_shared_revision_card_background_color">@color/color_palette_primary_background_color</color>
   <color name="component_color_shared_topic_card_item_background_color">@color/color_palette_topic_card_item_background_color</color>
   <color name="component_color_shared_content_item_text_view_color">@color/color_palette_highlighted_text_color</color>
   <color name="component_color_shared_feedback_item_text_view_color">@color/color_palette_highlighted_text_color</color>
   <color name="component_color_shared_topic_card_text_view_color">@color/color_palette_topic_card_text_color</color>
   <color name="component_color_shared_story_card_topic_name_text_color">@color/color_palette_card_topic_name_text_color</color>
+  <color name="component_color_shared_story_card_background_color">@color/color_palette_primary_background_color</color>
   <color name="component_color_shared_state_fragment_background_color">@color/color_palette_exploration_background_color</color>
+  <color name="component_color_shared_revision_card_text_background_color">@color/color_palette_revision_card_text_background_color</color>
   <color name="component_color_shared_previous_responses_header_item_container_background_color">@color/color_palette_highlighted_text_color</color>
   <color name="component_color_shared_transparent_background_color">@color/color_palette_transparent_background_color</color>
   <color name="component_color_shared_white_background_color">@color/color_palette_shared_white_background_color</color>
@@ -57,6 +62,7 @@
   <color name="component_color_shared_button_inactive_text_color">@color/color_palette_button_inactive_text_color</color>
   <color name="component_color_shared_button_active_solid_color">@color/color_palette_button_active_solid_color</color>
   <color name="component_color_shared_button_active_stroke_color">@color/color_palette_button_active_stroke_color</color>
+  <color name="component_color_shared_check_icon_color">@color/color_palette_check_icon_color</color>
   <color name="component_color_shared_button_active_text_color">@color/color_palette_button_active_text_color</color>
   <color name="component_color_shared_submit_button_inactive_stroke_color">@color/color_palette_submit_button_inactive_stroke_color</color>
   <color name="component_color_shared_submit_text_inactive_color">@color/color_palette_submit_text_inactive_color</color>
@@ -73,6 +79,7 @@
   <color name="component_color_shared_multipane_icon_color">@color/color_palette_multipane_icon_color</color>
   <color name="component_color_shared_item_background_solid_color">@color/color_palette_item_background_solid_color</color>
   <color name="component_color_shared_item_background_stroke_color">@color/color_palette_item_background_stroke_color</color>
+  <color name="component_color_shared_card_border_stroke_color">@color/color_palette_shared_card_border_stroke_color</color>
   <color name="component_color_shared_item_highlighted_background_solid_color">@color/color_palette_highlighted_background_color</color>
   <color name="component_color_shared_item_highlighted_background_stroke_color">@color/color_palette_item_background_stroke_color</color>
   <!-- Themes.xml -->
@@ -87,6 +94,7 @@
   <color name="component_color_shared_secondary_3_text_color">@color/color_palette_secondary_3_text_color</color>
   <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_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>
@@ -121,16 +129,15 @@
   <color name="component_color_hints_and_solution_summary_bottom_background_color">@color/color_palette_hints_and_solution_summary_bottom_background_color</color>
   <color name="component_color_hints_and_solution_summary_button_text_color">@color/color_palette_hints_and_solution_summary_button_text_color</color>
   <!-- Story Activity -->
-  <color name="component_color_story_activity_background_color">@color/color_palette_primary_background_color</color>
-  <color name="component_color_story_activity_story_header_view_text_color">@color/color_palette_highlighted_text_color</color>
   <color name="component_color_story_activity_container_background_color">@color/color_palette_primary_container_background_color</color>
-  <color name="component_color_story_activity_text_color">@color/color_palette_highlighted_text_color</color>
-  <color name="component_color_story_activity_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_story_activity_story_chapter_card_start_stroke_color">@color/color_palette_story_chapter_start_stroke_color</color>
+  <color name="component_color_story_chapter_default_progress_solid_color">@color/color_palette_story_chapter_start_stroke_color</color>
+  <color name="component_color_story_chapter_not_start_progress_stroke_color">@color/color_palette_story_chapter_start_stroke_color</color>
+  <color name="component_color_story_chapter_not_start_progress_solid_color">@color/color_palette_shared_white_background_color</color>
+  <color name="component_color_story_chapter_default_progress_stroke_color">@color/color_palette_story_chapter_default_progress_stroke_color</color>
+  <color name="component_color_story_activity_story_chapter_card_not_start_stroke_color">@color/color_palette_story_chapter_not_start_stroke_color</color>
   <!-- Resume Lesson Activity -->
-  <color name="component_color_resume_lesson_activity_background_color">@color/color_palette_primary_background_color</color>
-  <color name="component_color_resume_lesson_activity_text_color">@color/color_palette_highlighted_text_color</color>
-  <color name="component_color_resume_lesson_activity_description_color">@color/color_palette_primary_text_color</color>
-  <color name="component_color_resume_lesson_activity_toolbar_color">@color/color_palette_secondary_toolbar_color</color>
+  <color name="component_color_resume_lesson_topic_thumbnail_background_color">@color/color_palette_topic_thumbnail_background_color</color>
   <color name="component_color_continue_button_border_color">@color/color_palette_button_border_color</color>
   <color name="component_color_continue_button_background_color">@color/color_palette_secondary_toolbar_color</color>
   <color name="component_color_start_over_button_text_color">@color/color_palette_secondary_toolbar_color</color>
@@ -147,9 +154,28 @@
   <color name="component_color_question_player_activity_background_color">@color/color_palette_exploration_background_color</color>
   <color name="component_color_question_player_activity_text_color">@color/color_palette_highlighted_text_color</color>
   <!-- Revision Card Activity -->
-  <color name="component_color_revision_card_activity_background_color">@color/color_palette_revision_card_background_color</color>
-  <color name="component_color_revision_card_activity_layout_background_color">@color/color_palette_revision_card_layout_background_color</color>
-  <color name="component_color_revision_card_activity_toolbar_color">@color/color_palette_revision_card_fragment_status_bar_color</color>
+  <color name="component_color_revision_card_activity_status_bar_color">@color/color_palette_revision_card_fragment_status_bar_color</color>
+  <color name="component_color_revision_card_activity_toolbar_color">@color/color_palette_revision_card_toolbar_color</color>
+  <!-- Lessons Tab Fragment -->
+  <color name="component_color_lessons_tab_activity_background_color">@color/color_palette_primary_container_background_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_card_ripple_color">@color/color_palette_transparent_background_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_card_drop_down_arrow_color">@color/color_palette_lesson_card_drop_down_arrow_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_card_dashed_divider_color">@color/color_palette_lesson_card_dashed_divider_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_in_progress_chapter_index_background_color">@color/color_palette_lesson_in_progress_chapter_index_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_in_progress_chapter_name_background_color">@color/color_palette_lesson_in_progress_chapter_name_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_locked_chapter_container_background_color">@color/color_palette_lessons_locked_chapter_container_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_locked_chapter_name_text_color">@color/color_palette_lesson_locked_chapter_name_text_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_locked_chapter_name_background_color">@color/color_palette_lesson_locked_chapter_name_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_locked_vertical_divider_color">@color/color_palette_lessons_locked_vertical_divider_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_not_started_stroke_color">@color/color_palette_lesson_not_started_stroke_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_not_started_chapter_name_background_color">@color/color_palette_lesson_not_started_chapter_name_background_color</color>
+  <color name="component_color_lessons_tab_activity_lesson_not_started_chapter_index_background_color">@color/color_palette_lesson_not_started_chapter_index_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_completed_chapter_index_background_color">@color/color_palette_lesson_in_progress_chapter_index_background_color</color>
+  <color name="component_color_lessons_tab_activity_lessons_completed_chapter_name_background_color">@color/color_palette_lesson_in_progress_chapter_name_background_color</color>
+  <color name="component_color_lessons_tab_activity_chapter_completed_progress_color">@color/color_palette_chapter_completed_progress_color</color>
+  <color name="component_color_lessons_tab_activity_chapter_in_progress_progress_color">@color/color_palette_chapter_in_progress_color</color>
+  <color name="component_color_lessons_tab_activity_chapter_not_finished_progress_color">@color/color_palette_chapter_not_finished_color</color>
+  <color name="component_color_lessons_tab_activity_chapter_not_started_progress_color">@color/color_palette_chapter_not_started_color</color>
   <!-- Onboarding Activity -->
   <color name="component_color_onboarding_activity_sub_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_onboarding_activity_dots_color">@color/color_palette_dots_color</color>
@@ -213,9 +239,6 @@
   <!-- Home Activity -->
   <color name="component_color_home_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_home_activity_layout_greeting_text_line_color">@color/color_palette_layout_below_greeting_text_color</color>
-  <!-- Topic Activity -->
-  <color name="component_color_topic_fragment_primary_toolbar_color">@color/color_palette_toolbar_color</color>
-  <color name="component_color_topic_fragment_primary_tab_color">@color/color_palette_secondary_toolbar_color</color>
   <!--  CONFETTI COLORS -->
   <color name="component_color_confetti_red_color">@color/color_palette_confetti_red_color</color>
   <color name="component_color_confetti_yellow_color">@color/color_palette_confetti_yellow_color</color>
@@ -245,16 +268,12 @@
   <!-- Concept Card Fragment -->
   <color name="component_color_concept_card_fragment_toolbar_color">@color/color_palette_concept_card_toolbar_color</color>
   <color name="component_color_concept_card_fragment_status_bar_color">@color/color_palette_concept_status_bar_color</color>
-  <color name="component_color_concept_card_fragment_background_color">@color/color_palette_background_color</color>
-  <color name="component_color_concept_card_fragment_text_color">@color/color_palette_highlighted_text_color</color>
   <!-- Audio Fragment -->
   <color name="component_color_audio_fragment_background_color">@color/color_palette_accent_background_color</color>
   <color name="component_color_audio_fragment_icon_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_thumb_background_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_seekbar_progress_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_seekbar_color">@color/color_palette_seekbar_progress_background_color</color>
-  <!-- Topic Revision Fragment -->
-  <color name="component_color_topic_revision_fragment_background_color">@color/color_palette_topic_revision_background_color</color>
   <!-- Profile Progress Activity -->
   <color name="component_color_profile_progress_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_profile_progress_activity_story_count_card_stroke_color">@color/color_palette_profile_progress_activity_story_count_card_stroke_color</color>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 0833da624c4..bef37bc6877 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -435,11 +435,11 @@
     <item name="android:minWidth">144dp</item>
     <item name="android:background">@drawable/state_button_primary_background</item>
     <item name="drawableEndCompat">@drawable/ic_arrow_right_alt_24dp</item>
-    <item name="drawableTint">@color/color_def_white</item>
+    <item name="drawableTint">@color/component_color_shared_white_background_color</item>
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:minHeight">@dimen/clickable_item_min_height</item>
     <item name="android:textAllCaps">true</item>
-    <item name="android:textColor">@color/color_def_white</item>
+    <item name="android:textColor">@color/component_color_shared_secondary_4_text_color</item>
     <item name="android:textSize">14sp</item>
   </style>
 
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 56abf877a5d..7c87f9c0d8d 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -19,7 +19,7 @@
   </style>
 
   <style name="RevisionCardActivityTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
-    <item name="colorPrimaryDark">@color/component_color_revision_card_activity_toolbar_color</item>
+    <item name="colorPrimaryDark">@color/component_color_revision_card_activity_status_bar_color</item>
   </style>
 
   <style name="OppiaThemeWithoutActionBarColorAccentColorPrimary" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">