diff --git a/app/src/main/res/color/shared_checkbox_selector.xml b/app/src/main/res/color/shared_checkbox_selector.xml
new file mode 100644
index 00000000000..a25ab2bcddf
--- /dev/null
+++ b/app/src/main/res/color/shared_checkbox_selector.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:alpha="0.38" android:color="@color/component_color_shared_checkbox_disabled_color" android:state_checked="false" android:state_enabled="false" />
+  <item android:color="@color/component_color_shared_checkbox_unchecked_color" android:state_checked="false" android:state_enabled="true" />
+  <item android:color="@color/component_color_shared_checkbox_checked_color" android:state_checked="true" />
+</selector>
diff --git a/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml b/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml
index e536f3a4e0d..232e2ffbf3a 100644
--- a/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml
+++ b/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
-  android:tint="@color/component_color_onboarding_activity_arrow_color"
   android:viewportWidth="24.0"
   android:viewportHeight="24.0"
   android:autoMirrored="true">
diff --git a/app/src/main/res/drawable/ic_hide_eye_icon.xml b/app/src/main/res/drawable/ic_hide_eye_icon.xml
index d0c91d0495e..37a199b7a6b 100644
--- a/app/src/main/res/drawable/ic_hide_eye_icon.xml
+++ b/app/src/main/res/drawable/ic_hide_eye_icon.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:tint="@color/component_color_pin_password_activity_hide_eye_icon_color"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path
diff --git a/app/src/main/res/drawable/ic_landscape_onboarding_2.xml b/app/src/main/res/drawable/ic_landscape_onboarding_2.xml
index 174ec0aca06..a91c4cc5d97 100644
--- a/app/src/main/res/drawable/ic_landscape_onboarding_2.xml
+++ b/app/src/main/res/drawable/ic_landscape_onboarding_2.xml
@@ -35,5 +35,5 @@
   </path>
   <path
       android:pathData="M202.2,157.8H167V105H114.2v52.8H79l61.6,61.6ZM79,237v17.6H202.2V237Z"
-      android:fillColor="#02655c"/>
+      android:fillColor="#00645c"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml b/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml
index fb9c379ed5c..fc4f156ee08 100644
--- a/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml
+++ b/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml
@@ -11,7 +11,7 @@
     <path
         android:pathData="M59.4,149.2C25,168.1 2.5,206.8 -18.7,244c-11.7,20.6 -23,40.8 -35.7,57L-200,155.4L139.4,-184L293.7,-29.7c-0.6,19.7 -7.8,46.5 -29.1,82c-7.2,12.2 -15.8,23.5 -25.7,33.7C186.1,138.6 124.7,113.4 59.4,149.2z">
       <aapt:attr name="android:fillColor">
-        <gradient 
+        <gradient
             android:startY="91.72759"
             android:startX="243.86374"
             android:endY="39.447502"
@@ -25,7 +25,7 @@
     <path
         android:pathData="M20.8,376.2L-200,155.4L139.4,-184L305,-18.4c11.5,37 13.8,77.3 -7.3,112.4c-58,96.6 -182.9,21.5 -246.7,84.1c-29.2,28.6 -25,66.6 -19.4,103.3c5.5,36.4 12.5,71.4 -10.6,94.5L20.8,376.2z">
       <aapt:attr name="android:fillColor">
-        <gradient 
+        <gradient
             android:startY="155.68356"
             android:startX="305.44385"
             android:endY="53.203266"
@@ -42,6 +42,6 @@
         android:pathData="M0,-12h320v360h-320z"/>
     <path
         android:pathData="M221.6,134h-35.2V81.2h-52.8V134H98.4l61.6,61.6L221.6,134zM98.4,213.2v17.6h123.2v-17.6H98.4z"
-        android:fillColor="#02655C"/>
+        android:fillColor="#00645c"/>
   </group>
 </vector>
diff --git a/app/src/main/res/drawable/ic_show_eye_icon.xml b/app/src/main/res/drawable/ic_show_eye_icon.xml
index c9bdc0e56e0..c337488d1c2 100644
--- a/app/src/main/res/drawable/ic_show_eye_icon.xml
+++ b/app/src/main/res/drawable/ic_show_eye_icon.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:tint="@color/component_color_pin_password_activity_show_eye_icon_color"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path
diff --git a/app/src/main/res/drawable/primary_rounded_button.xml b/app/src/main/res/drawable/primary_rounded_button.xml
index 52724ab97dd..bceb2871ecd 100644
--- a/app/src/main/res/drawable/primary_rounded_button.xml
+++ b/app/src/main/res/drawable/primary_rounded_button.xml
@@ -2,5 +2,5 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="4dp" />
-  <solid android:color="@color/oppia_primary" />
+  <solid android:color="@color/color_palette_primary_button_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/start_button_transparent_background.xml b/app/src/main/res/drawable/start_button_transparent_background.xml
index d70e3bf5c8b..5fed1e4f9bf 100644
--- a/app/src/main/res/drawable/start_button_transparent_background.xml
+++ b/app/src/main/res/drawable/start_button_transparent_background.xml
@@ -5,10 +5,10 @@
       <item>
         <shape>
           <corners android:radius="4dp" />
-          <solid android:color="@color/oppia_disabled_button_background" />
+          <solid android:color="@color/component_color_shared_button_inactive_solid_color" />
           <stroke
             android:width="1dp"
-            android:color="@color/component_color_start_button_transparent_background_stroke_color" />
+            android:color="@color/component_color_shared_button_inactive_stroke_color" />
         </shape>
       </item>
     </layer-list>
diff --git a/app/src/main/res/drawable/state_button_inactive_background.xml b/app/src/main/res/drawable/state_button_inactive_background.xml
index 9baefb7aa3e..b6899510516 100644
--- a/app/src/main/res/drawable/state_button_inactive_background.xml
+++ b/app/src/main/res/drawable/state_button_inactive_background.xml
@@ -2,8 +2,8 @@
 <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/component_color_shared_submit_button_inactive_solid_color" />
+  <solid android:color="@color/component_color_shared_button_inactive_solid_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_shared_submit_button_inactive_stroke_color" />
+    android:color="@color/component_color_shared_button_inactive_stroke_color" />
 </shape>
diff --git a/app/src/main/res/drawable/state_button_primary_background.xml b/app/src/main/res/drawable/state_button_primary_background.xml
index 047d0044abc..4b3b30c74b2 100644
--- a/app/src/main/res/drawable/state_button_primary_background.xml
+++ b/app/src/main/res/drawable/state_button_primary_background.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/spotlight_done_button_corner_radius" />
-  <solid android:color="@color/component_color_continue_button_background_color" />
+  <solid android:color="@color/component_color_shared_button_active_solid_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_continue_button_border_color" />
+    android:color="@color/component_color_shared_button_active_stroke_color" />
 </shape>
diff --git a/app/src/main/res/layout-land/onboarding_fragment.xml b/app/src/main/res/layout-land/onboarding_fragment.xml
index dc154eeb4c3..5b7c6f69e9b 100644
--- a/app/src/main/res/layout-land/onboarding_fragment.xml
+++ b/app/src/main/res/layout-land/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -43,6 +43,7 @@
       android:onClick="@{(v) -> presenter.clickOnSkip()}"
       android:text="@string/skip"
       android:textAllCaps="true"
+      android:textColor="@color/component_color_shared_primary_text_color"
       android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -71,9 +72,10 @@
       android:minHeight="48dp"
       android:onClick="@{(v) -> presenter.clickOnNext()}"
       android:padding="12dp"
-      app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
       android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+      app:tint="@color/component_color_onboarding_activity_arrow_color" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-land/onboarding_slide.xml b/app/src/main/res/layout-land/onboarding_slide.xml
index 6866c505baf..9b65824f318 100644
--- a/app/src/main/res/layout-land/onboarding_slide.xml
+++ b/app/src/main/res/layout-land/onboarding_slide.xml
@@ -29,11 +29,11 @@
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        app:srcCompat="@{viewModel.slideImage}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="H, 10:9"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@{viewModel.slideImage}" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -44,6 +44,7 @@
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif-medium"
         android:text="@{viewModel.title}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -57,6 +58,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="40dp"
         android:text="@{viewModel.description}"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
diff --git a/app/src/main/res/layout-land/onboarding_slide_final.xml b/app/src/main/res/layout-land/onboarding_slide_final.xml
index 365ca188dc6..c619e2a2a21 100644
--- a/app/src/main/res/layout-land/onboarding_slide_final.xml
+++ b/app/src/main/res/layout-land/onboarding_slide_final.xml
@@ -30,11 +30,11 @@
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        app:srcCompat="@drawable/ic_landscape_onboarding_3"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="H, 10:9"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_landscape_onboarding_3" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -45,6 +45,7 @@
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif-medium"
         android:text="@string/onboarding_slide_3_title"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -58,6 +59,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="40dp"
         android:text="@string/onboarding_slide_3_description"
+        android:textColor="@color/color_palette_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -75,7 +77,7 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> viewModel.clickOnGetStarted()}"
         android:text="@string/get_started"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_primary_button_text_color"
         android:textSize="14sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -90,11 +92,12 @@
         android:layout_marginTop="24dp"
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif"
+        android:textColor="@color/component_color_shared_primary_text_color"
+        android:textColorLink="@color/component_color_shared_primary_text_color"
         android:textSize="12sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
         app:layout_constraintTop_toBottomOf="@id/get_started_button" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
   </ScrollView>
 </layout>
diff --git a/app/src/main/res/layout-land/profile_chooser_add_view.xml b/app/src/main/res/layout-land/profile_chooser_add_view.xml
index c2944ecf4c5..d88f39ecfaf 100644
--- a/app/src/main/res/layout-land/profile_chooser_add_view.xml
+++ b/app/src/main/res/layout-land/profile_chooser_add_view.xml
@@ -35,7 +35,7 @@
         android:layout_marginBottom="8dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp" />
 
       <TextView
@@ -46,7 +46,7 @@
         android:layout_gravity="center"
         android:fontFamily="sans-serif-medium"
         android:text="@{hasProfileEverBeenAddedValue ? @string/profile_chooser_add : @string/set_up_multiple_profiles}"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
         android:textSize="14sp" />
 
       <TextView
@@ -57,7 +57,7 @@
         android:layout_gravity="center"
         android:fontFamily="sans-serif"
         android:text="@string/set_up_multiple_profiles_description"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
         android:textSize="12sp"
         android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}" />
     </LinearLayout>
diff --git a/app/src/main/res/layout-land/profile_chooser_fragment.xml b/app/src/main/res/layout-land/profile_chooser_fragment.xml
index 7c8ae6203ef..7eedba72455 100644
--- a/app/src/main/res/layout-land/profile_chooser_fragment.xml
+++ b/app/src/main/res/layout-land/profile_chooser_fragment.xml
@@ -16,7 +16,7 @@
     <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/profile_chooser_background"
+      android:background="@color/component_color_profile_chooser_activity_background_color"
       android:overScrollMode="never"
       android:scrollbars="none">
 
@@ -33,17 +33,17 @@
           android:paddingStart="4dp"
           android:paddingTop="20dp"
           android:paddingEnd="20dp"
-          app:srcCompat="@drawable/ic_language_icon_grey_24dp"
           android:visibility="gone"
           app:layout_constraintEnd_toEndOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
+          app:layout_constraintTop_toTopOf="parent"
+          app:srcCompat="@drawable/ic_language_icon_grey_24dp" />
 
         <TextView
           style="@style/Subtitle1ViewCenter"
           android:minHeight="48dp"
           android:paddingTop="20dp"
           android:text="@string/profile_chooser_language"
-          android:textColor="@color/profile_chooser_grey_text"
+          android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color"
           android:visibility="gone"
           app:layout_constraintEnd_toStartOf="@+id/profile_chooser_language_icon"
           app:layout_constraintTop_toTopOf="parent" />
@@ -55,7 +55,7 @@
           android:layout_marginTop="@dimen/profile_chooser_fragment_profile_select_text_margin_top"
           android:layout_marginEnd="36dp"
           android:text="@string/profile_chooser_select"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
 
@@ -103,7 +103,7 @@
         android:layout_marginBottom="24dp"
         android:minHeight="48dp"
         android:text="@string/profile_chooser_administrator_controls"
-        android:textColor="@color/profile_chooser_grey_text" />
+        android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color" />
 
       <ImageView
         android:id="@+id/profile_chooser_setting_icon"
diff --git a/app/src/main/res/layout-land/profile_chooser_profile_view.xml b/app/src/main/res/layout-land/profile_chooser_profile_view.xml
index c17de85fbe3..1a07343a5b0 100644
--- a/app/src/main/res/layout-land/profile_chooser_profile_view.xml
+++ b/app/src/main/res/layout-land/profile_chooser_profile_view.xml
@@ -41,7 +41,7 @@
         android:layout_height="72dp"
         android:layout_marginBottom="8dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         profile:src="@{viewModel.profile.avatar}" />
 
@@ -58,14 +58,14 @@
           android:maxLines="2"
           android:singleLine="false"
           android:text="@{viewModel.profile.name}"
-          android:textColor="@color/color_def_white" />
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color" />
 
         <TextView
           android:id="@+id/profile_last_visited"
           style="@style/SubtitleLight1Center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.lastLoggedInTimestampMs > 0 ? View.VISIBLE : View.GONE}"
           profile:lastVisited="@{viewModel.profile.lastLoggedInTimestampMs}" />
 
@@ -75,7 +75,7 @@
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/profile_chooser_admin"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.isAdmin ? View.VISIBLE : View.GONE}" />
       </LinearLayout>
     </LinearLayout>
@@ -86,7 +86,7 @@
       android:layout_height="match_parent"
       android:layout_marginTop="@dimen/profile_chooser_profile_view_view_margin_top"
       android:layout_gravity="bottom"
-      android:background="@color/oppia_profile_chooser_divider"
+      android:background="@color/component_color_shared_divider_color"
       android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}"
       app:layout_constraintBottom_toBottomOf="@+id/profile_chooser_item"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml b/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml
index d38768aeb24..4899d438355 100644
--- a/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -45,7 +45,7 @@
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_marginBottom="16dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toTopOf="@+id/slide_dots_container" />
 
       <LinearLayout
@@ -75,11 +75,12 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> presenter.clickOnNext()}"
         android:scaleType="center"
-        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
         android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+        app:tint="@color/component_color_onboarding_activity_arrow_color" />
 
       <TextView
         android:id="@+id/skip_text_view"
@@ -90,6 +91,7 @@
         android:onClick="@{(v) -> presenter.clickOnSkip()}"
         android:text="@string/skip"
         android:textAllCaps="true"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:visibility="@{viewModel.slideNumber != (viewModel.totalNumberOfSlides - 1) ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="@+id/slide_dots_container"
         app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-land/onboarding_slide.xml b/app/src/main/res/layout-sw600dp-land/onboarding_slide.xml
index 7351cfdd31b..c55b9f82284 100644
--- a/app/src/main/res/layout-sw600dp-land/onboarding_slide.xml
+++ b/app/src/main/res/layout-sw600dp-land/onboarding_slide.xml
@@ -28,11 +28,11 @@
         android:layout_height="0dp"
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
-        app:srcCompat="@{viewModel.slideImage}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="40:39"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@{viewModel.slideImage}" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -40,6 +40,7 @@
         android:layout_width="0dp"
         android:layout_marginBottom="12dp"
         android:text="@{viewModel.title}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="32sp"
         app:layout_constraintBottom_toTopOf="@+id/guideline"
         app:layout_constraintEnd_toStartOf="@+id/guideline5"
@@ -51,6 +52,7 @@
         android:layout_width="0dp"
         android:layout_marginTop="12dp"
         android:text="@{viewModel.description}"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="@+id/slide_title_text_view"
         app:layout_constraintStart_toStartOf="@+id/slide_title_text_view"
         app:layout_constraintTop_toTopOf="@+id/guideline" />
diff --git a/app/src/main/res/layout-sw600dp-land/onboarding_slide_final.xml b/app/src/main/res/layout-sw600dp-land/onboarding_slide_final.xml
index 2e7a4b532a8..673d9643694 100644
--- a/app/src/main/res/layout-sw600dp-land/onboarding_slide_final.xml
+++ b/app/src/main/res/layout-sw600dp-land/onboarding_slide_final.xml
@@ -29,11 +29,11 @@
         android:layout_height="0dp"
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
-        app:srcCompat="@drawable/ic_landscape_onboarding_3_tablet"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="40:39"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_landscape_onboarding_3_tablet" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -42,6 +42,7 @@
         android:layout_marginBottom="12dp"
         android:fontFamily="sans-serif-medium"
         android:text="@string/onboarding_slide_3_title"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="32sp"
         app:layout_constraintBottom_toTopOf="@+id/guideline2"
         app:layout_constraintEnd_toEndOf="@+id/slide_description_text_view"
@@ -54,6 +55,7 @@
         android:layout_width="0dp"
         android:layout_marginTop="12dp"
         android:text="@string/onboarding_slide_3_description"
+        android:textColor="@color/color_palette_secondary_1_text_color"
         android:textSize="24sp"
         app:layout_constraintEnd_toStartOf="@+id/guideline3"
         app:layout_constraintStart_toStartOf="@+id/guideline4"
@@ -69,7 +71,7 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> viewModel.clickOnGetStarted()}"
         android:text="@string/get_started"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_primary_button_text_color"
         android:textSize="14sp"
         app:layout_constraintEnd_toEndOf="@+id/slide_title_text_view"
         app:layout_constraintStart_toStartOf="@+id/slide_title_text_view"
@@ -81,6 +83,8 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
+        android:textColor="@color/component_color_shared_primary_text_color"
+        android:textColorLink="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="@+id/slide_title_text_view"
         app:layout_constraintStart_toStartOf="@+id/slide_title_text_view"
         app:layout_constraintTop_toBottomOf="@id/get_started_button" />
diff --git a/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml b/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml
index 7e23d059e07..a0fa9c9839b 100644
--- a/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml
+++ b/app/src/main/res/layout-sw600dp-land/profile_chooser_add_view.xml
@@ -41,7 +41,7 @@
         android:layout_height="108dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape" />
 
@@ -61,7 +61,7 @@
           android:layout_height="wrap_content"
           android:fontFamily="sans-serif-medium"
           android:text="@{hasProfileEverBeenAddedValue ? @string/profile_chooser_add : @string/set_up_multiple_profiles}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="20sp" />
 
         <TextView
@@ -73,7 +73,7 @@
           android:layout_marginTop="4dp"
           android:fontFamily="sans-serif"
           android:text="@string/set_up_multiple_profiles_description"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="16sp"
           android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}" />
       </LinearLayout>
diff --git a/app/src/main/res/layout-sw600dp-land/profile_chooser_fragment.xml b/app/src/main/res/layout-sw600dp-land/profile_chooser_fragment.xml
index 7f548736aa9..d3eaa7ff74b 100644
--- a/app/src/main/res/layout-sw600dp-land/profile_chooser_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/profile_chooser_fragment.xml
@@ -20,7 +20,7 @@
     <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/profile_chooser_background"
+      android:background="@color/component_color_profile_chooser_activity_background_color"
       android:overScrollMode="never"
       android:scrollbars="none">
 
@@ -37,17 +37,17 @@
           android:paddingStart="4dp"
           android:paddingTop="20dp"
           android:paddingEnd="20dp"
-          app:srcCompat="@drawable/ic_language_icon_grey_24dp"
           android:visibility="gone"
           app:layout_constraintEnd_toEndOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
+          app:layout_constraintTop_toTopOf="parent"
+          app:srcCompat="@drawable/ic_language_icon_grey_24dp" />
 
         <TextView
           style="@style/Subtitle1ViewCenter"
           android:minHeight="48dp"
           android:paddingTop="20dp"
           android:text="@string/profile_chooser_language"
-          android:textColor="@color/profile_chooser_grey_text"
+          android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color"
           android:visibility="gone"
           app:layout_constraintEnd_toStartOf="@+id/profile_chooser_language_icon"
           app:layout_constraintTop_toTopOf="parent" />
@@ -60,7 +60,7 @@
           android:layout_marginTop="80dp"
           android:fontFamily="sans-serif"
           android:text="@string/profile_chooser_select"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="36sp"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -111,7 +111,7 @@
         android:layout_marginBottom="28dp"
         android:minHeight="48dp"
         android:text="@string/profile_chooser_administrator_controls"
-        android:textColor="@color/profile_chooser_grey_text" />
+        android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color" />
 
       <ImageView
         android:id="@+id/profile_chooser_setting_icon"
diff --git a/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml b/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml
index ea4b021816f..333679388b0 100644
--- a/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml
+++ b/app/src/main/res/layout-sw600dp-land/profile_chooser_profile_view.xml
@@ -46,7 +46,7 @@
         android:id="@+id/profile_avatar_img"
         android:layout_width="108dp"
         android:layout_height="108dp"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
@@ -68,7 +68,7 @@
           android:maxLines="2"
           android:singleLine="false"
           android:text="@{viewModel.profile.name}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_name_margin_top_profile_already_added : @dimen/space_0dp}" />
 
         <!-- Note: The style set here is without the Gravity property, as the gravity set for this TextView is conditional and its not doable through styles. -->
@@ -79,7 +79,7 @@
           android:layout_height="wrap_content"
           android:layout_marginTop="4dp"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.lastLoggedInTimestampMs > 0 ? View.VISIBLE : View.GONE}"
           app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_last_visited_margin_top_profile_already_added : @dimen/profile_chooser_profile_view_last_visited_margin_top_profile_not_added}"
           profile:lastVisited="@{viewModel.profile.lastLoggedInTimestampMs}" />
@@ -93,7 +93,7 @@
           android:layout_marginTop="4dp"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
           android:text="@string/profile_chooser_admin"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.isAdmin ? View.VISIBLE : View.GONE}"
           app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_is_admin_margin_top_profile_already_added : @dimen/space_0dp}" />
       </LinearLayout>
@@ -104,7 +104,7 @@
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:layout_marginTop="@dimen/profile_chooser_profile_view_divider_margin_top"
-      android:background="@color/oppia_profile_chooser_divider"
+      android:background="@color/component_color_shared_divider_color"
       android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-port/onboarding_fragment.xml b/app/src/main/res/layout-sw600dp-port/onboarding_fragment.xml
index 9c3e35176bd..18b1555cbcc 100644
--- a/app/src/main/res/layout-sw600dp-port/onboarding_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-port/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -44,7 +44,7 @@
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_marginBottom="16dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toTopOf="@id/slide_dots_container" />
 
       <LinearLayout
@@ -74,11 +74,12 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> presenter.clickOnNext()}"
         android:scaleType="center"
-        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
         android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+        app:tint="@color/component_color_onboarding_activity_arrow_color" />
 
       <TextView
         android:id="@+id/skip_text_view"
@@ -90,6 +91,7 @@
         android:onClick="@{(v) -> presenter.clickOnSkip()}"
         android:text="@string/skip"
         android:textAllCaps="true"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:visibility="@{viewModel.slideNumber != (viewModel.totalNumberOfSlides - 1) ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp-port/onboarding_slide.xml b/app/src/main/res/layout-sw600dp-port/onboarding_slide.xml
index 9caf4f150b9..3e3c01cc22f 100644
--- a/app/src/main/res/layout-sw600dp-port/onboarding_slide.xml
+++ b/app/src/main/res/layout-sw600dp-port/onboarding_slide.xml
@@ -27,11 +27,11 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:importantForAccessibility="no"
-        app:srcCompat="@{viewModel.slideImage}"
         app:layout_constraintDimensionRatio="5:4"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@{viewModel.slideImage}" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -42,6 +42,7 @@
         android:layout_marginEnd="160dp"
         android:gravity="center_horizontal"
         android:text="@{viewModel.title}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="32sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -58,6 +59,7 @@
         android:maxLines="2"
         android:minLines="2"
         android:text="@{viewModel.description}"
+        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/slide_title_text_view" />
diff --git a/app/src/main/res/layout-sw600dp-port/onboarding_slide_final.xml b/app/src/main/res/layout-sw600dp-port/onboarding_slide_final.xml
index 7e1ed7446d3..ecb61bac498 100644
--- a/app/src/main/res/layout-sw600dp-port/onboarding_slide_final.xml
+++ b/app/src/main/res/layout-sw600dp-port/onboarding_slide_final.xml
@@ -28,11 +28,11 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:importantForAccessibility="no"
-        app:srcCompat="@drawable/ic_portrait_onboarding_3"
         app:layout_constraintDimensionRatio="5:4"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_portrait_onboarding_3" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -44,6 +44,7 @@
         android:fontFamily="sans-serif-medium"
         android:gravity="center_horizontal"
         android:text="@string/onboarding_slide_3_title"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="32sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -59,6 +60,7 @@
         android:maxLines="2"
         android:minLines="2"
         android:text="@string/onboarding_slide_3_description"
+        android:textColor="@color/color_palette_secondary_1_text_color"
         android:textSize="24sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -76,7 +78,7 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> viewModel.clickOnGetStarted()}"
         android:text="@string/get_started"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_primary_button_text_color"
         android:textSize="20sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -90,10 +92,11 @@
         android:layout_marginStart="192dp"
         android:layout_marginTop="24dp"
         android:layout_marginEnd="192dp"
+        android:textColor="@color/component_color_shared_primary_text_color"
+        android:textColorLink="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/get_started_button" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
   </ScrollView>
 </layout>
diff --git a/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml b/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml
index 3cef9d7f218..28e9c956051 100644
--- a/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml
+++ b/app/src/main/res/layout-sw600dp-port/profile_chooser_add_view.xml
@@ -43,7 +43,7 @@
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_add_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp" />
 
       <LinearLayout
@@ -62,7 +62,7 @@
           android:layout_height="wrap_content"
           android:fontFamily="sans-serif-medium"
           android:text="@{hasProfileEverBeenAddedValue ? @string/profile_chooser_add : @string/set_up_multiple_profiles}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="20sp" />
 
         <TextView
@@ -74,7 +74,7 @@
           android:layout_marginTop="4dp"
           android:fontFamily="sans-serif"
           android:text="@string/set_up_multiple_profiles_description"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="16sp"
           android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}" />
       </LinearLayout>
diff --git a/app/src/main/res/layout-sw600dp-port/profile_chooser_fragment.xml b/app/src/main/res/layout-sw600dp-port/profile_chooser_fragment.xml
index 1c5ce1fb922..a1ab6c27833 100644
--- a/app/src/main/res/layout-sw600dp-port/profile_chooser_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-port/profile_chooser_fragment.xml
@@ -20,7 +20,7 @@
     <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/profile_chooser_background"
+      android:background="@color/component_color_profile_chooser_activity_background_color"
       android:overScrollMode="never"
       android:scrollbars="none">
 
@@ -37,17 +37,17 @@
           android:paddingStart="4dp"
           android:paddingTop="20dp"
           android:paddingEnd="20dp"
-          app:srcCompat="@drawable/ic_language_icon_grey_24dp"
           android:visibility="gone"
           app:layout_constraintEnd_toEndOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
+          app:layout_constraintTop_toTopOf="parent"
+          app:srcCompat="@drawable/ic_language_icon_grey_24dp" />
 
         <TextView
           style="@style/Subtitle1ViewCenter"
           android:minHeight="48dp"
           android:paddingTop="20dp"
           android:text="@string/profile_chooser_language"
-          android:textColor="@color/profile_chooser_grey_text"
+          android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color"
           android:visibility="gone"
           app:layout_constraintEnd_toStartOf="@+id/profile_chooser_language_icon"
           app:layout_constraintTop_toTopOf="parent" />
@@ -60,7 +60,7 @@
           android:layout_marginTop="80dp"
           android:fontFamily="sans-serif"
           android:text="@string/profile_chooser_select"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="36sp"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -111,7 +111,7 @@
         android:layout_marginBottom="32dp"
         android:minHeight="48dp"
         android:text="@string/profile_chooser_administrator_controls"
-        android:textColor="@color/profile_chooser_grey_text" />
+        android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color" />
 
       <ImageView
         android:id="@+id/profile_chooser_setting_icon"
diff --git a/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml b/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml
index 19a014c558d..456486f4ab7 100644
--- a/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml
+++ b/app/src/main/res/layout-sw600dp-port/profile_chooser_profile_view.xml
@@ -44,7 +44,7 @@
         android:id="@+id/profile_avatar_img"
         android:layout_width="108dp"
         android:layout_height="108dp"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_circular_image_margin_top_profile_already_added : @dimen/space_0dp}"
@@ -68,7 +68,7 @@
           android:maxLines="2"
           android:singleLine="false"
           android:text="@{viewModel.profile.name}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_name_margin_top_profile_already_added : @dimen/space_0dp}" />
 
         <!-- Note: The style set here is without the Gravity property, as the gravity set for this TextView is conditional and its not doable through styles. -->
@@ -79,7 +79,7 @@
           android:layout_height="wrap_content"
           android:layout_marginTop="4dp"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.lastLoggedInTimestampMs > 0 ? View.VISIBLE : View.GONE}"
           profile:lastVisited="@{viewModel.profile.lastLoggedInTimestampMs}" />
 
@@ -91,7 +91,7 @@
           android:layout_marginTop="4dp"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
           android:text="@string/profile_chooser_admin"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.isAdmin ? View.VISIBLE : View.GONE}" />
       </LinearLayout>
     </LinearLayout>
@@ -101,7 +101,7 @@
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:layout_marginTop="92dp"
-      android:background="@color/oppia_profile_chooser_divider"
+      android:background="@color/component_color_shared_divider_color"
       android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout-sw600dp/administrator_controls_activity.xml b/app/src/main/res/layout-sw600dp/administrator_controls_activity.xml
index b3031fae8ab..5839d07ba63 100644
--- a/app/src/main/res/layout-sw600dp/administrator_controls_activity.xml
+++ b/app/src/main/res/layout-sw600dp/administrator_controls_activity.xml
@@ -45,7 +45,7 @@
         android:id="@+id/administrator_controls_separator"
         android:layout_width="1dp"
         android:layout_height="0dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/administrator_controls_guideline"
         app:layout_constraintTop_toBottomOf="@id/administrator_controls_activity_toolbar" />
diff --git a/app/src/main/res/layout-sw600dp/help_activity.xml b/app/src/main/res/layout-sw600dp/help_activity.xml
index f39a382d510..d3c04c10838 100644
--- a/app/src/main/res/layout-sw600dp/help_activity.xml
+++ b/app/src/main/res/layout-sw600dp/help_activity.xml
@@ -83,7 +83,7 @@
         android:id="@+id/options_separator"
         android:layout_width="1dp"
         android:layout_height="0dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/multipane_guideline"
         app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout-sw600dp/option_activity.xml b/app/src/main/res/layout-sw600dp/option_activity.xml
index abb585e8a4c..ccad100499d 100644
--- a/app/src/main/res/layout-sw600dp/option_activity.xml
+++ b/app/src/main/res/layout-sw600dp/option_activity.xml
@@ -69,7 +69,7 @@
         android:id="@+id/options_separator"
         android:layout_width="1dp"
         android:layout_height="0dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/multipane_guideline"
         app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout-sw600dp/options_without_drawer_activity.xml b/app/src/main/res/layout-sw600dp/options_without_drawer_activity.xml
index e33d691e123..c8dde6bde96 100644
--- a/app/src/main/res/layout-sw600dp/options_without_drawer_activity.xml
+++ b/app/src/main/res/layout-sw600dp/options_without_drawer_activity.xml
@@ -68,7 +68,7 @@
         android:id="@+id/options_separator"
         android:layout_width="1dp"
         android:layout_height="0dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/multipane_guideline"
         app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout/add_profile_activity.xml b/app/src/main/res/layout/add_profile_activity.xml
index b6e2981f1e3..6e930ed60d1 100644
--- a/app/src/main/res/layout/add_profile_activity.xml
+++ b/app/src/main/res/layout/add_profile_activity.xml
@@ -17,14 +17,14 @@
     android:orientation="vertical">
 
     <androidx.appcompat.widget.Toolbar
-       android:id="@+id/add_profile_activity_toolbar"
-       android:layout_width="match_parent"
-       android:layout_height="wrap_content"
-       android:background="@color/component_color_shared_activity_toolbar_color"
-       android:minHeight="?attr/actionBarSize"
-       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
-       app:titleTextAppearance="@style/ToolbarTitle" />
+      android:id="@+id/add_profile_activity_toolbar"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:background="@color/component_color_shared_activity_toolbar_color"
+      android:minHeight="?attr/actionBarSize"
+      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
+      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
+      app:titleTextAppearance="@style/ToolbarTitle" />
 
     <FrameLayout
       android:layout_width="match_parent"
@@ -34,7 +34,7 @@
         android:id="@+id/add_profile_activity_scroll_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/component_color_add_profile_activity_layout_background_color">
+        android:background="@color/component_color_shared_screen_secondary_background_color">
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="wrap_content"
@@ -50,15 +50,15 @@
             android:layout_height="120dp"
             android:clickable="true"
             android:contentDescription="@string/current_profile_picture_content_description"
-            android:focusable="true"
             android:elevation="4dp"
+            android:focusable="true"
             app:add_shadow="true"
-            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:shadow_radius="8"
-            app:srcCompat="@{@drawable/ic_default_avatar}"/>
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
+            app:srcCompat="@{@drawable/ic_default_avatar}" />
 
           <ImageView
             android:id="@+id/add_profile_activity_edit_user_image_view"
@@ -102,9 +102,10 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="@dimen/add_profile_pin_checkbox_margin_top"
+            android:buttonTint="@color/shared_checkbox_selector"
             android:minHeight="48dp"
             android:text="@string/add_profile_create_a_3_digit_pin"
-            android:textColor="@color/component_color_add_profile_activity_label_text_color"
+            android:textColor="@color/component_color_shared_secondary_1_text_color"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/add_profile_activity_user_name" />
 
@@ -114,6 +115,7 @@
             android:layout_height="48dp"
             android:contentDescription="@string/add_profile_info_content_description"
             android:padding="12dp"
+            android:tint="@color/component_color_add_profile_activity_info_icon_color"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="@+id/add_profile_activity_pin_check_box"
             app:srcCompat="@drawable/ic_info_icon" />
@@ -196,7 +198,7 @@
                 android:layout_height="wrap_content"
                 android:fontFamily="sans-serif"
                 android:text="@string/add_profile_allow_download_heading"
-                android:textColor="@{viewModel.validPin ? @color/component_color_add_profile_activity_switch_text_color : @color/component_color_add_profile_activity_switch_description_color}"
+                android:textColor="@color/component_color_shared_primary_text_color"
                 android:textSize="16sp"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent" />
@@ -208,7 +210,7 @@
                 android:layout_height="wrap_content"
                 android:fontFamily="sans-serif"
                 android:text="@string/add_profile_allow_download_sub"
-                android:textColor="@color/component_color_add_profile_activity_switch_description_color"
+                android:textColor="@color/component_color_shared_secondary_2_text_color"
                 android:textSize="14sp"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/add_profile_activity_allow_download_heading_text_view"
@@ -236,7 +238,7 @@
             android:gravity="center"
             android:text="@string/add_profile_create_btn"
             android:textAllCaps="true"
-            android:textColor="@{viewModel.isButtonActive() ? @color/color_def_white : @color/submit_button_inactive_text }"
+            android:textColor="@{viewModel.isButtonActive() ? @color/component_color_shared_button_active_text_color : @color/component_color_shared_button_inactive_text_color }"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/add_profile_activity_pin_constraint_layout" />
         </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/admin_auth_activity.xml b/app/src/main/res/layout/admin_auth_activity.xml
index 0ff58ad52e9..813b1528b97 100644
--- a/app/src/main/res/layout/admin_auth_activity.xml
+++ b/app/src/main/res/layout/admin_auth_activity.xml
@@ -13,7 +13,7 @@
     android:id="@+id/admin_auth_container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_admin_auth_layout_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/admin_auth_app_bar_layout"
@@ -28,14 +28,14 @@
         android:id="@+id/admin_auth_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_admin_auth_activity_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:fontFamily="sans-serif"
         android:minHeight="?attr/actionBarSize"
         app:navigationContentDescription="@string/admin_auth_close"
         app:navigationIcon="@drawable/ic_close_white_24dp"
         app:title="@string/admin_auth_toolbar"
         app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/color_def_white" />
+        app:titleTextColor="@color/component_color_shared_activity_toolbar_text_color" />
     </com.google.android.material.appbar.AppBarLayout>
 
     <androidx.core.widget.NestedScrollView
@@ -79,7 +79,7 @@
           android:layout_height="wrap_content"
           android:layout_marginTop="12dp"
           android:text="@string/admin_auth_sub"
-          android:textColor="@color/component_color_admin_auth_secondary_text_color"
+          android:textColor="@color/component_color_shared_secondary_2_text_color"
           app:layout_constraintEnd_toEndOf="@id/admin_auth_heading_textview"
           app:layout_constraintStart_toStartOf="@id/admin_auth_heading_textview"
           app:layout_constraintTop_toBottomOf="@id/admin_auth_heading_textview" />
@@ -117,7 +117,7 @@
           android:enabled="@{viewModel.isSubmitButtonActive}"
           android:minHeight="48dp"
           android:text="@string/admin_auth_submit"
-          android:textColor="@{viewModel.isSubmitButtonActive ? @color/color_def_white : @color/submit_button_inactive_text }"
+          android:textColor="@{viewModel.isSubmitButtonActive() ? @color/component_color_shared_button_active_text_color : @color/component_color_shared_button_inactive_text_color }"
           app:layout_constraintEnd_toEndOf="@id/admin_auth_input_pin"
           app:layout_constraintHorizontal_bias="1.0"
           app:layout_constraintTop_toBottomOf="@id/admin_auth_input_pin" />
diff --git a/app/src/main/res/layout/admin_pin_activity.xml b/app/src/main/res/layout/admin_pin_activity.xml
index bc63e17ab7c..1a4538b4e32 100644
--- a/app/src/main/res/layout/admin_pin_activity.xml
+++ b/app/src/main/res/layout/admin_pin_activity.xml
@@ -17,7 +17,7 @@
       android:id="@+id/scrollViewAdminPin"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/component_color_admin_pin_activity_layout_background_color"
+      android:background="@color/component_color_shared_screen_secondary_background_color"
       android:fillViewport="true"
       android:overScrollMode="never"
       android:scrollbars="none">
@@ -40,6 +40,7 @@
           android:layout_marginTop="32dp"
           android:layout_marginEnd="@dimen/admin_pin_activity_admin_pin_main_text_view_margin_end"
           android:text="@string/admin_pin_requirement_description"
+          android:textColor="@color/component_color_shared_secondary_1_text_color"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -51,6 +52,7 @@
           android:layout_height="wrap_content"
           android:layout_marginTop="16dp"
           android:text="@string/admin_pin_pin_description"
+          android:textColor="@color/component_color_shared_secondary_1_text_color"
           app:layout_constraintEnd_toEndOf="@id/admin_pin_main_text"
           app:layout_constraintStart_toStartOf="@+id/admin_pin_main_text"
           app:layout_constraintTop_toBottomOf="@+id/admin_pin_main_text" />
@@ -109,12 +111,12 @@
           android:layout_marginStart="0dp"
           android:layout_marginTop="48dp"
           android:layout_marginEnd="0dp"
-          android:background="@{viewModel.isButtonActive() ? @drawable/state_button_primary_background : @drawable/start_button_transparent_background}"
+          android:background="@{viewModel.isButtonActive() ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
           android:clickable="@{viewModel.isButtonActive()}"
           android:enabled="@{viewModel.isButtonActive()}"
           android:minHeight="48dp"
           android:text="@string/save"
-          android:textColor="@{viewModel.isButtonActive() ? @color/color_def_white : @color/submit_button_inactive_text }"
+          android:textColor="@{viewModel.isButtonActive() ? @color/component_color_shared_button_active_text_color : @color/component_color_shared_button_inactive_text_color }"
           app:layout_constraintEnd_toEndOf="@id/admin_pin_input_confirm_pin"
           app:layout_constraintTop_toBottomOf="@+id/admin_pin_input_confirm_pin" />
       </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/onboarding_fragment.xml b/app/src/main/res/layout/onboarding_fragment.xml
index 50f2545d200..d8e747840c3 100644
--- a/app/src/main/res/layout/onboarding_fragment.xml
+++ b/app/src/main/res/layout/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -45,7 +45,7 @@
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_marginBottom="16dp"
-        android:background="@color/component_color_onboarding_activity_divider_color"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toTopOf="@+id/slide_dots_container" />
 
       <LinearLayout
@@ -74,10 +74,11 @@
         android:onClick="@{(v) -> presenter.clickOnNext()}"
         android:paddingStart="12dp"
         android:paddingEnd="12dp"
-        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
         android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/slide_dots_container" />
+        app:layout_constraintTop_toTopOf="@+id/slide_dots_container"
+        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+        app:tint="@color/component_color_onboarding_activity_arrow_color" />
 
       <TextView
         android:id="@+id/skip_text_view"
@@ -88,6 +89,7 @@
         android:onClick="@{(v) -> presenter.clickOnSkip()}"
         android:text="@string/skip"
         android:textAllCaps="true"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:visibility="@{viewModel.slideNumber != (viewModel.totalNumberOfSlides - 1) ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="@+id/slide_dots_container" />
diff --git a/app/src/main/res/layout/onboarding_slide.xml b/app/src/main/res/layout/onboarding_slide.xml
index 44f5aced520..84b23314193 100644
--- a/app/src/main/res/layout/onboarding_slide.xml
+++ b/app/src/main/res/layout/onboarding_slide.xml
@@ -27,11 +27,11 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:importantForAccessibility="no"
-        app:srcCompat="@{viewModel.slideImage}"
         app:layout_constraintDimensionRatio="5:4"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@{viewModel.slideImage}" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -44,6 +44,7 @@
         android:fontFamily="sans-serif-medium"
         android:gravity="center_horizontal"
         android:text="@{viewModel.title}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/slide_image_view" />
@@ -58,6 +59,7 @@
         android:maxLines="2"
         android:minLines="2"
         android:text="@{viewModel.description}"
+        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/slide_title_text_view" />
diff --git a/app/src/main/res/layout/onboarding_slide_final.xml b/app/src/main/res/layout/onboarding_slide_final.xml
index bda4a4055cf..7856e09640d 100644
--- a/app/src/main/res/layout/onboarding_slide_final.xml
+++ b/app/src/main/res/layout/onboarding_slide_final.xml
@@ -21,19 +21,19 @@
       android:id="@+id/final_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:overScrollMode="always"
-      android:importantForAccessibility="yes">
+      android:importantForAccessibility="yes"
+      android:overScrollMode="always">
 
       <ImageView
         android:id="@+id/slide_image_view"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:importantForAccessibility="no"
-        app:srcCompat="@drawable/ic_portrait_onboarding_3"
         app:layout_constraintDimensionRatio="5:4"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_portrait_onboarding_3" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -46,6 +46,7 @@
         android:fontFamily="sans-serif-medium"
         android:gravity="center_horizontal"
         android:text="@string/onboarding_slide_3_title"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/slide_image_view" />
@@ -60,6 +61,7 @@
         android:maxLines="2"
         android:minLines="2"
         android:text="@string/onboarding_slide_3_description"
+        android:textColor="@color/color_palette_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/slide_title_text_view" />
@@ -77,7 +79,7 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> viewModel.clickOnGetStarted()}"
         android:text="@string/get_started"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_primary_button_text_color"
         android:textSize="14sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -91,11 +93,12 @@
         android:layout_marginTop="24dp"
         android:layout_marginEnd="48dp"
         android:fontFamily="sans-serif"
+        android:textColor="@color/component_color_shared_primary_text_color"
+        android:textColorLink="@color/component_color_shared_primary_text_color"
         android:textSize="12sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/get_started_button" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
   </ScrollView>
 </layout>
diff --git a/app/src/main/res/layout/pin_password_activity.xml b/app/src/main/res/layout/pin_password_activity.xml
index 36d3f8258c9..643c33b4adb 100644
--- a/app/src/main/res/layout/pin_password_activity.xml
+++ b/app/src/main/res/layout/pin_password_activity.xml
@@ -17,7 +17,7 @@
     android:id="@+id/pin_password_container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_pin_password_activity_layout_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/pin_password_app_bar_layout"
@@ -32,21 +32,21 @@
         android:id="@+id/pin_password_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_pin_password_activity_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:fontFamily="sans-serif"
         android:minHeight="?attr/actionBarSize"
         app:navigationContentDescription="@string/pin_password_close"
         app:navigationIcon="@drawable/ic_close_white_24dp"
         app:title="@string/pin_password_toolbar_title"
         app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/color_def_white" />
+        app:titleTextColor="@color/component_color_shared_activity_toolbar_text_color" />
     </com.google.android.material.appbar.AppBarLayout>
 
     <FrameLayout
       android:id="@+id/pin_password_main_frame_layout"
       android:layout_width="@dimen/pin_password_activity_layout_width"
       android:layout_height="0dp"
-      android:background="@color/component_color_pin_password_activity_layout_background_color"
+      android:background="@color/component_color_shared_screen_secondary_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
@@ -76,7 +76,7 @@
             android:layout_marginEnd="@dimen/pin_password_activity_hello_text_view_margin_end"
             android:fontFamily="sans-serif-medium"
             android:text="@{viewModel.helloText}"
-            android:textColor="@color/component_color_pin_password_activity_text_color"
+            android:textColor="@color/component_color_shared_primary_text_color"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toStartOf="parent"
@@ -89,7 +89,7 @@
             android:layout_height="wrap_content"
             android:layout_marginTop="12dp"
             android:text="@{viewModel.profile.isAdmin ? @string/pin_password_admin_enter : @string/pin_password_user_enter}"
-            android:textColor="@color/component_color_pin_password_activity_sub_text_color"
+            android:textColor="@color/component_color_shared_secondary_2_text_color"
             app:layout_constraintEnd_toEndOf="@+id/hello_text_view"
             app:layout_constraintStart_toStartOf="@+id/hello_text_view"
             app:layout_constraintTop_toBottomOf="@id/hello_text_view" />
@@ -109,8 +109,8 @@
               android:layout_height="wrap_content"
               android:layout_marginTop="2dp"
               android:hint="@{viewModel.profile.isAdmin ? @string/input_pin_password_as_admin : @string/input_pin_password_as_user}"
-              app:errorMessage="@{viewModel.errorMessage}"
               android:minHeight="56dp"
+              app:errorMessage="@{viewModel.errorMessage}"
               app:layout_constraintEnd_toStartOf="@id/show_pin"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent">
@@ -161,7 +161,8 @@
                 android:layout_height="32dp"
                 android:layout_gravity="center_horizontal"
                 android:contentDescription="@{viewModel.showPassword ? @string/password_shown_icon : @string/password_hidden_icon}"
-                app:srcCompat="@{viewModel.showPassword ? @drawable/ic_show_eye_icon : @drawable/ic_hide_eye_icon}" />
+                app:srcCompat="@{viewModel.showPassword ? @drawable/ic_show_eye_icon : @drawable/ic_hide_eye_icon}"
+                app:tint="@color/component_color_pin_password_activity_show_hide_color" />
 
               <TextView
                 android:id="@+id/show_hide_password_text_view"
@@ -173,7 +174,7 @@
                 android:fontFamily="sans-serif-medium"
                 android:text="@{viewModel.showPassword ? @string/pin_password_hide : @string/pin_password_show}"
                 android:textAllCaps="true"
-                android:textColor="@color/component_color_pin_password_activity_show_hide_text_color"
+                android:textColor="@color/component_color_pin_password_activity_show_hide_color"
                 android:textSize="12sp" />
             </LinearLayout>
           </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/profile_chooser_add_view.xml b/app/src/main/res/layout/profile_chooser_add_view.xml
index 612d511ede9..4a9a29881a0 100644
--- a/app/src/main/res/layout/profile_chooser_add_view.xml
+++ b/app/src/main/res/layout/profile_chooser_add_view.xml
@@ -37,7 +37,7 @@
         android:layout_height="72dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp" />
 
       <LinearLayout
@@ -56,7 +56,7 @@
           android:layout_height="wrap_content"
           android:fontFamily="sans-serif-medium"
           android:text="@{hasProfileEverBeenAddedValue ? @string/profile_chooser_add : @string/set_up_multiple_profiles}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="14sp" />
 
         <TextView
@@ -67,7 +67,7 @@
           android:layout_marginTop="4dp"
           android:fontFamily="sans-serif"
           android:text="@string/set_up_multiple_profiles_description"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:textSize="12sp"
           android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}" />
       </LinearLayout>
diff --git a/app/src/main/res/layout/profile_chooser_fragment.xml b/app/src/main/res/layout/profile_chooser_fragment.xml
index 3428c516091..d49e7676114 100644
--- a/app/src/main/res/layout/profile_chooser_fragment.xml
+++ b/app/src/main/res/layout/profile_chooser_fragment.xml
@@ -16,7 +16,7 @@
     <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/profile_chooser_background"
+      android:background="@color/component_color_profile_chooser_activity_background_color"
       android:overScrollMode="never"
       android:scrollbars="none">
 
@@ -33,20 +33,20 @@
           android:paddingStart="4dp"
           android:paddingTop="20dp"
           android:paddingEnd="20dp"
-          app:srcCompat="@drawable/ic_language_icon_grey_24dp"
           android:visibility="gone"
           app:layout_constraintEnd_toEndOf="parent"
-          app:layout_constraintTop_toTopOf="parent"/>
+          app:layout_constraintTop_toTopOf="parent"
+          app:srcCompat="@drawable/ic_language_icon_grey_24dp" />
 
         <TextView
           style="@style/Subtitle1ViewCenter"
           android:minHeight="48dp"
           android:paddingTop="20dp"
           android:text="@string/profile_chooser_language"
-          android:textColor="@color/profile_chooser_grey_text"
+          android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color"
           android:visibility="gone"
           app:layout_constraintEnd_toStartOf="@+id/profile_chooser_language_icon"
-          app:layout_constraintTop_toTopOf="parent"/>
+          app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
           android:id="@+id/profile_select_text"
@@ -55,9 +55,9 @@
           android:layout_marginTop="@dimen/profile_chooser_fragment_profile_select_text_margin_top"
           android:layout_marginEnd="36dp"
           android:text="@string/profile_chooser_select"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toTopOf="parent"/>
+          app:layout_constraintTop_toTopOf="parent" />
 
         <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/profile_recycler_view"
@@ -86,8 +86,8 @@
       android:layout_height="128dp"
       android:background="@drawable/profile_chooser_gradient"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent" />
 
     <LinearLayout
       android:id="@+id/administrator_controls_linear_layout"
@@ -103,7 +103,7 @@
         android:layout_marginBottom="24dp"
         android:minHeight="48dp"
         android:text="@string/profile_chooser_administrator_controls"
-        android:textColor="@color/profile_chooser_grey_text" />
+        android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color" />
 
       <ImageView
         android:id="@+id/profile_chooser_setting_icon"
diff --git a/app/src/main/res/layout/profile_chooser_profile_view.xml b/app/src/main/res/layout/profile_chooser_profile_view.xml
index a63b7b179b3..c36669d75ba 100644
--- a/app/src/main/res/layout/profile_chooser_profile_view.xml
+++ b/app/src/main/res/layout/profile_chooser_profile_view.xml
@@ -41,7 +41,7 @@
         android:id="@+id/profile_avatar_img"
         android:layout_width="72dp"
         android:layout_height="72dp"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
         profile:src="@{viewModel.profile.avatar}" />
@@ -62,7 +62,7 @@
           android:maxLines="2"
           android:singleLine="false"
           android:text="@{viewModel.profile.name}"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layoutMarginTop="@{hasProfileEverBeenAddedValue ? @dimen/profile_chooser_profile_view_name_margin_top_profile_already_added : @dimen/space_0dp}" />
 
         <!-- Note: The style set here is without the Gravity property, as the gravity set for this TextView is conditional and its not doable through styles. -->
@@ -71,7 +71,7 @@
           style="@style/SubtitleLight1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:layout_marginTop="4dp"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
           android:visibility="@{viewModel.profile.lastLoggedInTimestampMs > 0 ? View.VISIBLE : View.GONE}"
@@ -86,7 +86,7 @@
           android:layout_marginTop="@dimen/profile_chooser_profile_view_is_admin_margin_top"
           android:gravity="@{hasProfileEverBeenAddedValue ? Gravity.CENTER_HORIZONTAL : Gravity.CENTER_VERTICAL}"
           android:text="@string/profile_chooser_admin"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.isAdmin ? View.VISIBLE : View.GONE}" />
       </LinearLayout>
     </LinearLayout>
@@ -96,7 +96,7 @@
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:layout_marginTop="@dimen/profile_chooser_profile_view_view_margin_top"
-      android:background="@color/oppia_profile_chooser_divider"
+      android:background="@color/component_color_shared_divider_color"
       android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index 5dd9fb09d08..a92f97f7b20 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -3,7 +3,7 @@
   <color name="color_palette_primary_color">@color/color_def_oppia_turquoise</color>
   <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_oppia_silver</color>
+  <color name="color_palette_primary_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>
@@ -12,8 +12,10 @@
   <color name="color_palette_text_input_background_color">@color/color_def_oppia_dark_grey</color>
   <color name="color_palette_dark_text_color">@color/color_def_white</color>
   <color name="color_palette_error_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_helper_text_color">@color/color_def_white</color>
   <color name="color_palette_container_background_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_toolbar_color">@color/color_def_oppia_green</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>
   <color name="color_palette_action_bar_color">@color/color_def_oppia_green</color>
@@ -27,7 +29,6 @@
   <color name="color_palette_button_border_color">@color/color_def_bright_turquoise</color>
   <color name="color_palette_divider_color">@color/color_def_dark_silver</color>
   <color name="color_palette_light_background_color">@color/color_def_oppia_light_black</color>
-  <color name="color_palette_onboarding_divider_color">@color/color_def_chooser_grey</color>
   <color name="color_palette_dots_color">@color/color_def_oppia_silver</color>
   <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>
@@ -44,8 +45,8 @@
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_show_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_error_text_color">@color/color_def_oppia_pink</color>
-  <color name="color_palette_show_eye_icon_color">@color/color_def_forest_green</color>
-  <color name="color_palette_hide_eye_icon_color">@color/color_def_forest_green</color>
+  <color name="color_palette_show_hide_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_info_icon_color">@color/color_def_oppia_silver</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_replay_button_color">@color/color_def_dark_pink</color>
@@ -57,6 +58,14 @@
   <color name="color_palette_submit_button_inactive_solid_color">@color/color_def_black_grey</color>
   <color name="color_palette_submit_button_inactive_stroke_color">@color/color_def_bright_turquoise</color>
   <color name="color_palette_submit_text_inactive_color">@color/color_def_light_grey</color>
+  <color name="color_palette_primary_button_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_primary_button_text_color">@color/color_def_white</color>
+  <color name="color_palette_button_inactive_solid_color">@color/color_def_grey_38</color>
+  <color name="color_palette_button_inactive_stroke_color">@color/color_def_bright_turquoise</color>
+  <color name="color_palette_button_inactive_text_color">@color/color_def_light_grey</color>
+  <color name="color_palette_button_active_solid_color">@color/color_def_forest_green</color>
+  <color name="color_palette_button_active_stroke_color">@color/color_def_bright_turquoise</color>
+  <color name="color_palette_button_active_text_color">@color/color_def_white</color>
   <color name="color_palette_previous_next_state_image_view_background_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_progress_bar_gradient_start_color">@color/color_def_dark_mode_question_player_progress_bar_gradient_start</color>
   <color name="color_palette_progress_bar_gradient_center_color">@color/color_def_dark_mode_question_player_progress_bar_gradient_center</color>
@@ -66,6 +75,8 @@
   <color name="color_palette_checkbox_text_unselected_state_color">@color/color_def_white</color>
   <color name="color_palette_checkbox_text_selected_state_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_checkbox_selected_state_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_checkbox_checked_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_checkbox_unchecked_color">@color/color_def_oppia_silver</color>
   <color name="color_palette_mark_completed_text_color">@color/color_def_white</color>
   <color name="color_palette_mark_completed_all_text_color">@color/color_def_white</color>
   <color name="color_palette_hints_and_solution_summary_card_border_color">@color/color_def_accessible_light_grey_2</color>
@@ -126,6 +137,12 @@
   <color name="color_palette_profile_view_designation_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_primary_toolbar_color">@color/color_def_forest_green</color>
   <color name="color_palette_secondary_text_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_secondary_1_text_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_secondary_2_text_color">@color/color_def_oppia_silver</color>
   <color name="color_palette_save_button_border_color">@color/color_def_bright_turquoise</color>
   <color name="color_palette_stroke_color">@color/color_def_black_12</color>
+  <color name="color_palette_profile_chooser_charcoal_black_background_color">@color/color_def_charcoal_black</color>
+  <color name="color_palette_profile_chooser_silver_text_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_profile_chooser_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_profile_chooser_avatar_border_color">@color/color_def_dark_silver</color>
 </resources>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
index 58a698527dd..9849a35695c 100644
--- a/app/src/main/res/values/color_defs.xml
+++ b/app/src/main/res/values/color_defs.xml
@@ -16,6 +16,7 @@
   <color name="color_def_white">#FFFFFF</color>
   <color name="color_def_white_80">#CCFFFFFF</color>
   <color name="color_def_oppia_white">#F2F2F2</color>
+  <color name="color_def_charcoal_black">#222222</color>
   <color name="color_def_black">#000000</color>
   <color name="color_def_transparent">#00000000</color>
   <color name="color_def_black_12">#1F000000</color>
@@ -59,12 +60,12 @@
   <color name="color_def_dark_silver">#707070</color>
   <color name="color_def_yellow_ivory">#FFFFF0</color>
   <color name="color_def_chooser_grey">#999999</color>
+  <color name="color_def_grey_38">#61999999</color>
   <color name="color_def_green">#02655c</color>
   <color name="color_def_error_text">#923026</color>
   <color name="color_def_black_grey">#33999999</color>
   <color name="color_def_dark_pink">#8A3D69</color>
   <color name="color_def_light_turquoise">#ACFFF8</color>
-  <color name="color_def_submit_button_inactive">#61999999</color>
   <color name="color_def_question_player_progress_bar_gradient_start">#00E4F2F1</color>
   <color name="color_def_question_player_progress_bar_gradient_center">#E4F2F1</color>
   <color name="color_def_question_player_progress_bar_gradient_end">#E4F2F1</color>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index 3a3ee5a991f..80376ed938f 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -5,6 +5,7 @@
   <color name="color_palette_accent_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_primary_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_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>
   <color name="color_palette_dark_background_color">@color/color_def_mid_grey_30</color>
   <color name="color_palette_transparent_background_color">@color/color_def_transparent</color>
@@ -12,8 +13,10 @@
   <color name="color_palette_text_input_background_color">@color/color_def_white</color>
   <color name="color_palette_dark_text_color">@color/color_def_black_87</color>
   <color name="color_palette_error_color">@color/color_def_oppia_red</color>
+  <color name="color_palette_helper_text_color">@color/color_def_accessible_light_grey_2</color>
   <color name="color_palette_container_background_color">@color/color_def_white</color>
   <color name="color_palette_toolbar_color">@color/color_def_oppia_green</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>
   <color name="color_palette_action_bar_color">@color/color_def_oppia_green</color>
@@ -21,13 +24,12 @@
   <color name="color_palette_light_description_text_color">@color/color_def_accessible_light_grey_2</color>
   <color name="color_palette_primary_background_color">@color/color_def_white</color>
   <color name="color_palette_hint_text_color">@color/color_def_spanish_grey</color>
-  <color name="color_palette_secondary_background_color">@color/color_def_bright_grey</color>
+  <color name="color_palette_secondary_background_color">@color/color_def_yellow_ivory</color>
   <color name="color_palette_primary_container_background_color">@color/color_def_white</color>
   <color name="color_palette_icon_background_color">@color/color_def_black</color>
   <color name="color_palette_button_border_color">@color/color_def_oppia_green</color>
   <color name="color_palette_divider_color">@color/color_def_dark_silver</color>
   <color name="color_palette_light_background_color">@color/color_def_yellow_ivory</color>
-  <color name="color_palette_onboarding_divider_color">@color/color_def_accessible_grey</color>
   <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>
@@ -45,8 +47,8 @@
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_green</color>
   <color name="color_palette_show_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_error_text_color">@color/color_def_error_text</color>
-  <color name="color_palette_show_eye_icon_color">@color/color_def_accessible_grey</color>
-  <color name="color_palette_hide_eye_icon_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_show_hide_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_info_icon_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_replay_button_color">@color/color_def_oppia_brown_dark</color>
@@ -55,9 +57,17 @@
   <color name="color_palette_correct_text_stroke_color">@color/color_def_green_shade_80</color>
   <color name="color_palette_correct_text_solid_color">@color/color_def_light_green</color>
   <color name="color_palette_correct_text_color">@color/color_def_oppia_green</color>
-  <color name="color_palette_submit_button_inactive_solid_color">@color/color_def_submit_button_inactive</color>
-  <color name="color_palette_submit_button_inactive_stroke_color">@color/color_def_submit_button_inactive</color>
+  <color name="color_palette_submit_button_inactive_solid_color">@color/color_def_grey_38</color>
+  <color name="color_palette_submit_button_inactive_stroke_color">@color/color_def_grey_38</color>
   <color name="color_palette_submit_text_inactive_color">@color/color_def_white</color>
+  <color name="color_palette_primary_button_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_primary_button_text_color">@color/color_def_white</color>
+  <color name="color_palette_button_inactive_solid_color">@color/color_def_grey_38</color>
+  <color name="color_palette_button_inactive_stroke_color">@color/color_def_grey_38</color>
+  <color name="color_palette_button_inactive_text_color">@color/color_def_light_grey</color>
+  <color name="color_palette_button_active_solid_color">@color/color_def_forest_green</color>
+  <color name="color_palette_button_active_stroke_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_button_active_text_color">@color/color_def_white</color>
   <color name="color_palette_previous_next_state_image_view_background_color">@color/color_def_oppia_light_yellow</color>
   <color name="color_palette_progress_bar_gradient_start_color">@color/color_def_question_player_progress_bar_gradient_start</color>
   <color name="color_palette_progress_bar_gradient_center_color">@color/color_def_question_player_progress_bar_gradient_center</color>
@@ -67,6 +77,8 @@
   <color name="color_palette_checkbox_text_unselected_state_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_checkbox_text_selected_state_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_checkbox_selected_state_color">@color/color_def_checkbox_green</color>
+  <color name="color_palette_checkbox_checked_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_checkbox_unchecked_color">@color/color_def_dark_silver</color>
   <color name="color_palette_mark_completed_text_color">@color/color_def_white</color>
   <color name="color_palette_mark_completed_all_text_color">@color/color_def_white</color>
   <color name="color_palette_hints_and_solution_summary_card_border_color">@color/color_def_accessible_light_grey_2</color>
@@ -127,6 +139,12 @@
   <color name="color_palette_profile_view_designation_color">@color/color_def_accessible_light_grey</color>
   <color name="color_palette_primary_toolbar_color">@color/color_def_oppia_green</color>
   <color name="color_palette_secondary_text_color">@color/color_def_accessible_light_grey_2</color>
+  <color name="color_palette_secondary_1_text_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_secondary_2_text_color">@color/color_def_accessible_light_grey</color>
   <color name="color_palette_save_button_border_color">@color/color_def_black_grey</color>
   <color name="color_palette_stroke_color">@color/color_def_black_12</color>
+  <color name="color_palette_profile_chooser_charcoal_black_background_color">@color/color_def_charcoal_black</color>
+  <color name="color_palette_profile_chooser_silver_text_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_profile_chooser_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_profile_chooser_avatar_border_color">@color/color_def_dark_silver</color>
 </resources>
diff --git a/app/src/main/res/values/colors_migrating.xml b/app/src/main/res/values/colors_migrating.xml
index 85e6e5c8654..aebb0c001ea 100644
--- a/app/src/main/res/values/colors_migrating.xml
+++ b/app/src/main/res/values/colors_migrating.xml
@@ -23,7 +23,6 @@
   <color name="oppia_progress_chapter_in_progress">#E7AC9B</color>
   <color name="oppia_progress_chapter_not_finished">#999999</color>
   <color name="oppia_admin_auth_secondary_text">#555555</color>
-  <color name="oppia_onboarding_divider">#707070</color>
   <color name="oppia_disabled_button_background">#33999999</color>
   <color name="oppia_text_shadow">#1F000000</color>
   <color name="oppia_grey_border">#DDDDDD</color>
@@ -41,8 +40,6 @@
   <color name="audio_component_background">@color/color_def_oppia_dark_blue</color>
   <!-- PROFILE COMPONENT -->
   <color name="avatar_border">#707070</color>
-  <color name="profile_chooser_background">#212121</color>
-  <color name="profile_chooser_grey_text">#999999</color>
   <color name="profile_edit_background">#E5E5E5</color>
   <color name="general_navigation_background">#E5E5E5</color>
   <color name="app_version_background">#E5E5E5</color>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 754418c7bc9..27d432074d9 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -2,6 +2,9 @@
 <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_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_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_state_fragment_background_color">@color/color_palette_exploration_background_color</color>
@@ -41,7 +44,14 @@
   <color name="component_color_shared_correct_text_stroke_color">@color/color_palette_correct_text_stroke_color</color>
   <color name="component_color_shared_correct_text_solid_color">@color/color_palette_correct_text_solid_color</color>
   <color name="component_color_shared_correct_text_color">@color/color_palette_correct_text_color</color>
-  <color name="component_color_shared_submit_button_inactive_solid_color">@color/color_palette_submit_button_inactive_solid_color</color>
+  <color name="component_color_shared_primary_button_background_color">@color/color_palette_primary_button_background_color</color>
+  <color name="component_color_shared_primary_button_text_color">@color/color_palette_primary_button_text_color</color>
+  <color name="component_color_shared_button_inactive_solid_color">@color/color_palette_button_inactive_solid_color</color>
+  <color name="component_color_shared_button_inactive_stroke_color">@color/color_palette_button_inactive_stroke_color</color>
+  <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_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>
   <color name="component_color_shared_submit_text_active_color">@color/color_palette_submit_text_active_color</color>
@@ -49,30 +59,32 @@
   <color name="component_color_shared_question_player_progress_bar_gradient_start_color">@color/color_palette_progress_bar_gradient_start_color</color>
   <color name="component_color_shared_question_player_progress_bar_gradient_center_color">@color/color_palette_progress_bar_gradient_center_color</color>
   <color name="component_color_shared_question_player_progress_bar_gradient_end_color">@color/color_palette_progress_bar_gradient_end_color</color>
+  <color name="component_color_shared_checkbox_checked_color">@color/color_palette_checkbox_checked_color</color>
+  <color name="component_color_shared_checkbox_unchecked_color">@color/color_palette_checkbox_unchecked_color</color>
+  <color name="component_color_shared_checkbox_disabled_color">@color/color_palette_checkbox_unchecked_color</color>
+  <color name="component_color_shared_divider_color">@color/color_palette_divider_color</color>
   <!-- Themes.xml -->
   <color name="component_color_shared_activity_status_bar_color">@color/color_palette_status_bar_color</color>
   <color name="component_color_shared_activity_action_bar_color">@color/color_palette_action_bar_color</color>
   <!-- Styles.xml -->
   <color name="component_color_shared_text_view_text_color">@color/color_palette_primary_text_color</color>
-  <color name="component_color_shared_text_view_heading_text_color">@color/color_palette_highlighted_text_color</color>
+  <color name="component_color_shared_primary_text_color">@color/color_palette_primary_text_color</color>
+  <color name="component_color_shared_secondary_1_text_color">@color/color_palette_secondary_1_text_color</color>
+  <color name="component_color_shared_secondary_2_text_color">@color/color_palette_secondary_2_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>
   <color name="component_color_shared_input_interaction_edit_text_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_shared_input_interaction_edit_text_background_color">@color/color_palette_text_input_background_color</color>
   <color name="component_color_shared_text_input_layout_error_color">@color/color_palette_error_color</color>
+  <color name="component_color_shared_text_input_layout_helper_text_color">@color/color_palette_helper_text_color</color>
   <color name="component_color_general_item_background_solid_color">@color/color_palette_container_background_color</color>
   <color name="component_color_general_item_background_stroke_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_general_item_secondary_background_stroke_color">@color/color_palette_stroke_color</color>
-  <!-- Admin Auth Activity -->
-  <color name="component_color_admin_auth_secondary_text_color">@color/color_palette_description_text_color</color>
-  <color name="component_color_admin_auth_layout_background_color">@color/color_palette_background_color</color>
-  <color name="component_color_admin_auth_activity_toolbar_color">@color/color_palette_toolbar_color</color>
   <!-- Add Profile Activity -->
-  <color name="component_color_add_profile_activity_label_text_color">@color/color_palette_primary_text_color</color>
+  <color name="component_color_add_profile_activity_info_icon_color">@color/color_palette_info_icon_color</color>
   <color name="component_color_add_profile_activity_switch_text_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_add_profile_activity_switch_description_color">@color/color_palette_description_text_color</color>
-  <color name="component_color_add_profile_activity_layout_background_color">@color/color_palette_background_color</color>
   <!-- Administrator Controls -->
   <color name="component_color_admin_controls_background_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_admin_controls_options_background_color">@color/color_palette_container_background_color</color>
@@ -82,18 +94,10 @@
   <color name="component_color_admin_controls_menu_options_text_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_admin_controls_sub_heading_background_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_admin_controls_view_divider_color">@color/color_palette_dark_background_color</color>
-  <!-- Admin Pin Activity -->
-  <color name="component_color_admin_pin_activity_layout_background_color">@color/color_palette_background_color</color>
   <!-- Pin Password Activity -->
-  <color name="component_color_pin_password_activity_layout_background_color">@color/color_palette_background_color</color>
-  <color name="component_color_pin_password_activity_toolbar_color">@color/color_palette_toolbar_color</color>
-  <color name="component_color_pin_password_activity_text_color">@color/color_palette_highlighted_text_color</color>
-  <color name="component_color_pin_password_activity_sub_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_pin_password_activity_forgot_pin_color">@color/color_palette_forgot_pin_color</color>
-  <color name="component_color_pin_password_activity_show_hide_text_color">@color/color_palette_show_text_color</color>
+  <color name="component_color_pin_password_activity_show_hide_color">@color/color_palette_show_hide_color</color>
   <color name="component_color_pin_password_activity_error_text_color">@color/color_palette_error_text_color</color>
-  <color name="component_color_pin_password_activity_show_eye_icon_color">@color/color_palette_show_eye_icon_color</color>
-  <color name="component_color_pin_password_activity_hide_eye_icon_color">@color/color_palette_hide_eye_icon_color</color>
   <!-- Help Activity -->
   <color name="component_color_help_activity_background_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_help_activity_container_color">@color/color_palette_container_background_color</color>
@@ -172,10 +176,7 @@
   <color name="component_color_license_text_viewer_activity_background_color">@color/color_palette_dark_background_color</color>
   <color name="component_color_license_text_viewer_activity_text_color">@color/color_palette_description_text_color</color>
   <!-- Onboarding Activity -->
-  <color name="component_color_onboarding_activity_background_color">@color/color_palette_light_background_color</color>
   <color name="component_color_onboarding_activity_sub_text_color">@color/color_palette_primary_text_color</color>
-  <color name="component_color_onboarding_activity_text_color">@color/color_palette_highlighted_text_color</color>
-  <color name="component_color_onboarding_activity_divider_color">@color/color_palette_onboarding_divider_color</color>
   <color name="component_color_onboarding_activity_dots_color">@color/color_palette_dots_color</color>
   <color name="component_color_onboarding_activity_arrow_color">@color/color_palette_arrow_color</color>
   <!-- Developer Options Activity -->
@@ -343,4 +344,9 @@
   <color name="component_color_app_version_activity_background_color">@color/color_palette_primary_background_color</color>
   <color name="component_color_app_version_activity_text_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_app_version_activity_description_text_color">@color/color_palette_secondary_text_color</color>
+  <!-- Profile Chooser Activity -->
+  <color name="component_color_profile_chooser_activity_background_color">@color/color_palette_profile_chooser_charcoal_black_background_color</color>
+  <color name="component_color_profile_chooser_activity_secondary_options_color">@color/color_palette_profile_chooser_silver_text_color</color>
+  <color name="component_color_profile_chooser_activity_white_text_color">@color/color_palette_profile_chooser_white_text_color</color>
+  <color name="component_color_profile_chooser_activity_avatar_border_color">@color/color_palette_profile_chooser_avatar_border_color</color>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 26b9f3bbf6f..e08ac9d2eee 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -175,6 +175,7 @@
     <item name="errorEnabled">true</item>
     <item name="errorIconTint">@color/component_color_shared_text_input_layout_error_color</item>
     <item name="errorTextColor">@color/component_color_shared_text_input_layout_error_color</item>
+    <item name="helperTextTextColor">@color/component_color_shared_text_input_layout_helper_text_color</item>
     <item name="boxStrokeErrorColor">@color/component_color_shared_text_input_layout_error_color</item>
     <item name="hintTextColor">@color/component_color_shared_text_input_layout_text_color</item>
     <item name="android:textAlignment">viewStart</item>
@@ -196,7 +197,7 @@
     <item name="android:fontFamily">sans-serif</item>
     <item name="android:textSize">24sp</item>
     <item name="fontFamily">sans-serif</item>
-    <item name="android:textColor">@color/component_color_shared_text_view_heading_text_color</item>
+    <item name="android:textColor">@color/component_color_shared_primary_text_color</item>
   </style>
 
   <style name="Heading1ViewStart" parent="Heading1">
@@ -219,7 +220,7 @@
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:textSize">20sp</item>
     <item name="fontFamily">sans-serif-medium</item>
-    <item name="android:textColor">@color/component_color_shared_text_view_heading_text_color</item>
+    <item name="android:textColor">@color/component_color_shared_primary_text_color</item>
   </style>
 
   <style name="Heading2ViewStart" parent="Heading2">
@@ -239,7 +240,7 @@
     <item name="android:textSize">18sp</item>
     <item name="fontFamily">sans-serif-medium</item>
     <item name="android:gravity">center_vertical</item>
-    <item name="android:textColor">@color/component_color_shared_text_view_heading_text_color</item>
+    <item name="android:textColor">@color/component_color_shared_primary_text_color</item>
   </style>
 
   <style name="Heading3ViewCenterVertical" parent="Heading3">
@@ -254,7 +255,7 @@
     <item name="android:fontFamily">sans-serif</item>
     <item name="android:textSize">18sp</item>
     <item name="fontFamily">sans-serif</item>
-    <item name="android:textColor">@color/component_color_shared_text_view_heading_text_color</item>
+    <item name="android:textColor">@color/component_color_shared_primary_text_color</item>
   </style>
 
   <style name="Heading4ViewCenter" parent="Heading4">
@@ -273,7 +274,7 @@
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:textSize">14sp</item>
     <item name="fontFamily">sans-serif-medium</item>
-    <item name="android:textColor">@color/component_color_shared_text_view_heading_text_color</item>
+    <item name="android:textColor">@color/component_color_shared_primary_text_color</item>
   </style>
 
   <style name="Heading5ViewCenterVertical" parent="Heading5">