diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 6af55b822..4071fa8ec 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -1,6 +1,30 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
+    <!--new colors-->
+
+    <color name="colorPrimary">#009688</color>
+    <color name="colorPrimaryDark">#00796B</color>
+    <color name="colorSecondary">#D50000</color>
+    <color name="colorSecondaryDark">#6D1111</color>
+
+    <color name="dividerGray">#888888</color>
+
+    <color name="colorText">#1D1D1D</color>
+    <color name="colorTextInactive">#6a6868</color>
+    <color name="colorTextInverse">#fff</color>
+
+    <color name="colorTextTinted">#FFFFFF</color>
+    <color name="colorCardStroke">#2AFFFFFF</color>
+    <color name="colorCardStrokeInverse">#2A000000</color>
+
+    <color name="colorBackground">#fff</color>
+    <color name="colorTintedBackground">@color/colorPrimary</color>
+
+    <color name="colorInactive">#66000000</color>
+
+    <!--new colors ^^-->
+
     <color name="primary">#009688</color>
     <color name="primary_dark">#00796B</color>
     <color name="accent">#FFC107</color>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 6235002dd..74b6a01fe 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -8,4 +8,21 @@
     <dimen name="card_corner_radius">2dp</dimen>
     <dimen name="card_elevation">2dp</dimen>
     <dimen name="fab_padding">16dp</dimen>
+
+    <!--new dimens-->
+
+    <dimen name="margin_generic_quadruple">64dp</dimen>
+    <dimen name="margin_generic_triple">48dp</dimen>
+    <dimen name="margin_generic_double">32dp</dimen>
+    <dimen name="margin_generic">16dp</dimen>
+    <dimen name="margin_generic_half">8dp</dimen>
+    <dimen name="margin_generic_quarter">4dp</dimen>
+    <dimen name="margin_generic_eighth">2dp</dimen>
+
+    <dimen name="radius_generic">8dp</dimen>
+    <dimen name="supplemental_animation_height">20dp</dimen>
+
+    <dimen name="divider_size">1dp</dimen>
+
+    <!--new dimens ^^-->
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_appearances.xml b/app/src/main/res/values/view_appearances.xml
new file mode 100644
index 000000000..1a1d5121f
--- /dev/null
+++ b/app/src/main/res/values/view_appearances.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="TextAppearance" parent="TextAppearance.AppCompat.Body1">
+        <item name="android:textColor">@color/colorText</item>
+    </style>
+
+    <style name="TextAppearance.Inactive">
+        <item name="android:textColor">@color/colorTextInactive</item>
+    </style>
+
+    <style name="TextAppearance.Emphasize" parent="TextAppearance.AppCompat.Body1">
+        <item name="android:textColor">@color/colorText</item>
+        <item name="android:textSize">16sp</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+
+    <style name="TextAppearance.Emphasize.Inactive">
+        <item name="android:textColor">@color/colorTextInactive</item>
+    </style>
+
+    <style name="TextAppearance.Emphasize.Tinted">
+        <item name="android:textColor">@color/colorTextTinted</item>
+    </style>
+
+    <style name="TextAppearance.Title" parent="TextAppearance.AppCompat.Title">
+        <item name="android:textColor">@color/colorText</item>
+    </style>
+
+    <style name="TextAppearance.Title.Inactive">
+        <item name="android:textColor">@color/colorTextInactive</item>
+    </style>
+
+    <style name="TextAppearance.Caption" parent="TextAppearance.AppCompat.Caption">
+        <item name="android:textColor">@color/colorText</item>
+    </style>
+
+    <style name="TextAppearance.Caption.Inactive">
+        <item name="android:textColor">@color/colorTextInactive</item>
+    </style>
+
+    <style name="TextAppearance.Caption.Tinted">
+        <item name="android:textColor">@color/colorTextTinted</item>
+    </style>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_button_styles.xml b/app/src/main/res/values/view_button_styles.xml
new file mode 100644
index 000000000..30ec17475
--- /dev/null
+++ b/app/src/main/res/values/view_button_styles.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Button" parent="Widget.MaterialComponents.Button">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="Widget.Button.Iconified" parent="Widget.MaterialComponents.Button.Icon">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="Widget.Button.Text" parent="Widget.MaterialComponents.Button.TextButton">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+        <item name="rippleColor">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.Button.Text.Iconified" parent="Widget.MaterialComponents.Button.TextButton.Icon">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+        <item name="iconTint">@color/colorSecondary</item>
+        <item name="rippleColor">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.Button.Flat" parent="Widget.MaterialComponents.Button.UnelevatedButton">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="Widget.Button.Flat.Iconified" parent="Widget.MaterialComponents.Button.UnelevatedButton.Icon">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="Widget.Button.Outlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="strokeColor">@color/colorSecondary</item>
+        <item name="rippleColor">@color/colorSecondary</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.Button.Outlined.Iconified" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="strokeColor">@color/colorSecondary</item>
+        <item name="rippleColor">@color/colorSecondary</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+        <item name="iconTint">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.FAB" parent="Widget.MaterialComponents.FloatingActionButton">
+        <item name="tint">@color/colorTextInverse</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_card_styles.xml b/app/src/main/res/values/view_card_styles.xml
new file mode 100644
index 000000000..af1aed063
--- /dev/null
+++ b/app/src/main/res/values/view_card_styles.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Card" parent="Widget.MaterialComponents.CardView">
+        <item name="cardCornerRadius">@dimen/radius_generic</item>
+        <item name="cardElevation">0dp</item>
+    </style>
+
+    <style name="Widget.Card.Outlined">
+        <item name="cardBackgroundColor">@color/colorBackground</item>
+        <item name="strokeColor">@color/colorCardStrokeInverse</item>
+        <item name="strokeWidth">1dp</item>
+    </style>
+
+    <style name="Widget.Card.Outlined.Tinted">
+        <item name="cardBackgroundColor">@color/colorPrimary</item>
+        <item name="strokeColor">@color/colorCardStroke</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_dialog_styles.xml b/app/src/main/res/values/view_dialog_styles.xml
new file mode 100644
index 000000000..7a1cc28e2
--- /dev/null
+++ b/app/src/main/res/values/view_dialog_styles.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.DialogButton">
+        <item name="android:background">?attr/selectableItemBackground</item>
+        <item name="android:gravity">center</item>
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_divider_styles.xml b/app/src/main/res/values/view_divider_styles.xml
new file mode 100644
index 000000000..d77d43b1e
--- /dev/null
+++ b/app/src/main/res/values/view_divider_styles.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Divider">
+        <item name="android:background">@color/colorCardStrokeInverse</item>
+    </style>
+
+    <style name="Widget.Divider.Horizontal">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">1dp</item>
+    </style>
+
+    <style name="Widget.Divider.Vertical">
+        <item name="android:layout_width">1dp</item>
+        <item name="android:layout_height">0dp</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_image_styles.xml b/app/src/main/res/values/view_image_styles.xml
new file mode 100644
index 000000000..83651a21c
--- /dev/null
+++ b/app/src/main/res/values/view_image_styles.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Icon">
+        <item name="android:layout_width">36dp</item>
+        <item name="android:layout_height">36dp</item>
+        <item name="android:padding">6dp</item>
+        <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
+    </style>
+
+    <style name="Widget.Icon.Large">
+        <item name="android:layout_width">48dp</item>
+        <item name="android:layout_height">48dp</item>
+        <item name="android:padding">6dp</item>
+        <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
+    </style>
+
+    <style name="Widget.Icon.Accent">
+        <item name="tint">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.Icon.DialogButton" parent="Widget.Icon.Accent">
+        <item name="android:layout_gravity">center</item>
+        <item name="android:background">@android:color/transparent</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_input_styles.xml b/app/src/main/res/values/view_input_styles.xml
new file mode 100644
index 000000000..2dfdf4371
--- /dev/null
+++ b/app/src/main/res/values/view_input_styles.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Input.Layout" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="passwordToggleEnabled">true</item>
+    </style>
+
+    <style name="Widget.Input.EditText" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_progress_styles.xml b/app/src/main/res/values/view_progress_styles.xml
new file mode 100644
index 000000000..5d26132be
--- /dev/null
+++ b/app/src/main/res/values/view_progress_styles.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.Progress" parent="Widget.AppCompat.ProgressBar.Horizontal">
+        <item name="android:indeterminate">true</item>
+        <item name="android:layout_width">64dp</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_styles.xml b/app/src/main/res/values/view_styles.xml
new file mode 100644
index 000000000..7cbd5ce8a
--- /dev/null
+++ b/app/src/main/res/values/view_styles.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget" />
+
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/view_text_styles.xml b/app/src/main/res/values/view_text_styles.xml
new file mode 100644
index 000000000..588e528aa
--- /dev/null
+++ b/app/src/main/res/values/view_text_styles.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Widget.BaseText">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="Widget.Text" parent="Widget.BaseText">
+        <item name="android:textAppearance">@style/TextAppearance</item>
+        <item name="android:ellipsize">end</item>
+    </style>
+
+    <style name="Widget.Text.Inactive">
+        <item name="android:textAppearance">@style/TextAppearance.Inactive</item>
+    </style>
+
+    <style name="Widget.Text.Emphasize">
+        <item name="android:textAppearance">@style/TextAppearance.Emphasize</item>
+    </style>
+
+    <style name="Widget.Text.Emphasize.Inactive">
+        <item name="android:textAppearance">@style/TextAppearance.Emphasize.Inactive</item>
+    </style>
+
+    <style name="Widget.Text.Emphasize.Tinted">
+        <item name="android:textAppearance">@style/TextAppearance.Emphasize.Tinted</item>
+    </style>
+
+    <style name="Widget.Text.Title">
+        <item name="android:textAppearance">@style/TextAppearance.Title</item>
+    </style>
+
+    <style name="Widget.Text.Title.Inactive">
+        <item name="android:textAppearance">@style/TextAppearance.Title.Inactive</item>
+    </style>
+
+    <style name="Widget.Text.Caption">
+        <item name="android:textAppearance">@style/TextAppearance.Caption</item>
+    </style>
+
+    <style name="Widget.Text.Caption.Inactive">
+        <item name="android:textAppearance">@style/TextAppearance.Caption.Inactive</item>
+    </style>
+
+    <style name="Widget.Text.Caption.Tinted">
+        <item name="android:textAppearance">@style/TextAppearance.Caption.Tinted</item>
+    </style>
+
+    <style name="Widget.Text.SectionTitle">
+        <item name="android:textStyle">bold</item>
+        <item name="android:paddingTop">@dimen/margin_generic_double</item>
+        <item name="android:paddingBottom">@dimen/margin_generic</item>
+        <item name="android:paddingLeft">@dimen/margin_generic</item>
+        <item name="android:paddingRight">@dimen/margin_generic</item>
+        <item name="android:textAppearance">@style/TextAppearance.Caption</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+    </style>
+
+    <style name="Widget.Text.DialogButton">
+        <item name="android:padding">@dimen/margin_generic</item>
+        <item name="android:textColor">@color/colorSecondary</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+</resources>
\ No newline at end of file