diff --git a/app/build.gradle b/app/build.gradle
index e79765528..e819b449c 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -130,6 +130,9 @@ dependencies {
implementation Deps.mozilla_feature_findinpage
implementation Deps.mozilla_support_ktx
+ implementation Deps.mozilla_ui_colors
+ implementation Deps.mozilla_ui_icons
+
implementation Deps.mozilla_lib_crash
testImplementation Deps.junit
diff --git a/app/src/main/java/org/mozilla/fenix/library/LibraryFragment.kt b/app/src/main/java/org/mozilla/fenix/library/LibraryFragment.kt
new file mode 100644
index 000000000..d2e8fe6ec
--- /dev/null
+++ b/app/src/main/java/org/mozilla/fenix/library/LibraryFragment.kt
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.library
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import org.mozilla.fenix.R
+
+class LibraryFragment : Fragment() {
+
+ override fun onCreateView(
+ inflater: LayoutInflater,
+ container: ViewGroup?,
+ savedInstanceState: Bundle?
+ ): View? {
+ return inflater.inflate(R.layout.fragment_library, container, false)
+ }
+}
diff --git a/app/src/main/java/org/mozilla/fenix/library/LibraryListItem.kt b/app/src/main/java/org/mozilla/fenix/library/LibraryListItem.kt
new file mode 100644
index 000000000..b56906e2d
--- /dev/null
+++ b/app/src/main/java/org/mozilla/fenix/library/LibraryListItem.kt
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.library
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import androidx.constraintlayout.widget.ConstraintLayout
+import kotlinx.android.synthetic.main.library_list_item.view.*
+import org.mozilla.fenix.R
+
+class LibraryListItem @JvmOverloads constructor(
+ context: Context,
+ attrs: AttributeSet? = null,
+ defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+ init {
+ LayoutInflater.from(context).inflate(R.layout.library_list_item, this, true)
+ attrs.let {
+ context.theme.obtainStyledAttributes(
+ it,
+ R.styleable.LibraryListItem,
+ 0, 0
+ ).apply {
+ try {
+ val id = getResourceId(
+ R.styleable.LibraryListItem_listItemIcon,
+ R.drawable.library_icon_logins_circle_background
+ )
+ libraryIcon?.background = resources.getDrawable(id, context.theme)
+ libraryItemTitle?.text = resources.getString(
+ getResourceId(
+ R.styleable.LibraryListItem_listItemTitle,
+ R.string.browser_menu_library
+ )
+ )
+ } finally {
+ recycle()
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/main/res/drawable/ic_bookmark_filled.xml b/app/src/main/res/drawable/ic_bookmark_filled.xml
new file mode 100644
index 000000000..5e5cd5944
--- /dev/null
+++ b/app/src/main/res/drawable/ic_bookmark_filled.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/ic_download.xml b/app/src/main/res/drawable/ic_download.xml
new file mode 100644
index 000000000..a73aad073
--- /dev/null
+++ b/app/src/main/res/drawable/ic_download.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/ic_history.xml b/app/src/main/res/drawable/ic_history.xml
new file mode 100644
index 000000000..96dd395cf
--- /dev/null
+++ b/app/src/main/res/drawable/ic_history.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/ic_screenshots.xml b/app/src/main/res/drawable/ic_screenshots.xml
new file mode 100644
index 000000000..ce15b6503
--- /dev/null
+++ b/app/src/main/res/drawable/ic_screenshots.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/ic_session_restore.xml b/app/src/main/res/drawable/ic_session_restore.xml
new file mode 100644
index 000000000..a57306cda
--- /dev/null
+++ b/app/src/main/res/drawable/ic_session_restore.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_icon_downloads_circle_background.xml b/app/src/main/res/drawable/library_icon_downloads_circle_background.xml
new file mode 100644
index 000000000..553e34591
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_downloads_circle_background.xml
@@ -0,0 +1,32 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_icon_favorites_circle_background.xml b/app/src/main/res/drawable/library_icon_favorites_circle_background.xml
new file mode 100644
index 000000000..dd61ef685
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_favorites_circle_background.xml
@@ -0,0 +1,32 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_icon_history_circle_background.xml b/app/src/main/res/drawable/library_icon_history_circle_background.xml
new file mode 100644
index 000000000..a4558638b
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_history_circle_background.xml
@@ -0,0 +1,32 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_icon_logins_circle_background.xml b/app/src/main/res/drawable/library_icon_logins_circle_background.xml
new file mode 100644
index 000000000..a1fd38699
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_logins_circle_background.xml
@@ -0,0 +1,30 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
\ No newline at end of file
diff --git a/app/src/main/res/drawable/library_icon_screenshots_circle_background.xml b/app/src/main/res/drawable/library_icon_screenshots_circle_background.xml
new file mode 100644
index 000000000..29b092107
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_screenshots_circle_background.xml
@@ -0,0 +1,32 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_icon_sessions_circle_background.xml b/app/src/main/res/drawable/library_icon_sessions_circle_background.xml
new file mode 100644
index 000000000..24a5eefee
--- /dev/null
+++ b/app/src/main/res/drawable/library_icon_sessions_circle_background.xml
@@ -0,0 +1,33 @@
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
+
diff --git a/app/src/main/res/drawable/library_separator.xml b/app/src/main/res/drawable/library_separator.xml
new file mode 100644
index 000000000..6813e020b
--- /dev/null
+++ b/app/src/main/res/drawable/library_separator.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_library.xml b/app/src/main/res/layout/fragment_library.xml
new file mode 100644
index 000000000..ca3b2606e
--- /dev/null
+++ b/app/src/main/res/layout/fragment_library.xml
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/src/main/res/layout/library_list_item.xml b/app/src/main/res/layout/library_list_item.xml
new file mode 100644
index 000000000..7a4bdd5ac
--- /dev/null
+++ b/app/src/main/res/layout/library_list_item.xml
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
new file mode 100644
index 000000000..4ee2ed545
--- /dev/null
+++ b/app/src/main/res/values/attrs.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 9b89249fd..bec540153 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -22,4 +22,22 @@
#FAFAFC
#202340
+
+ #C0EBFF
+ #094490
+
+ #A3FFFF
+ #09616A
+
+ #D6CEFF
+ #1E1562
+
+ #FDD4FF
+ #6E006E
+
+ #FFDAEC
+ #720028
+
+ #FFF4C3
+ #C13905
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 12eb1d7f9..9103c534b 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -7,4 +7,7 @@
48dp
14dp
7dp
+ 56dp
+ 40dp
+ 16dp
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 8802f3579..0936699cf 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -90,4 +90,22 @@
Data choices
+
+
+ Sessions
+
+
+ Screenshots
+
+
+ Downloads
+
+
+ Favorites
+
+
+ History
+
+
+ Logins
diff --git a/buildSrc/src/main/java/Dependencies.kt b/buildSrc/src/main/java/Dependencies.kt
index 9d92eab17..03b81d581 100644
--- a/buildSrc/src/main/java/Dependencies.kt
+++ b/buildSrc/src/main/java/Dependencies.kt
@@ -77,6 +77,9 @@ object Deps {
const val mozilla_service_fretboard = "org.mozilla.components:service-fretboard:${Versions.mozilla_android_components}"
const val mozilla_service_glean = "org.mozilla.components:service-glean:${Versions.mozilla_android_components}"
+ const val mozilla_ui_colors = "org.mozilla.components:ui-colors:${Versions.mozilla_android_components}"
+ const val mozilla_ui_icons = "org.mozilla.components:ui-icons:${Versions.mozilla_android_components}"
+
const val mozilla_lib_crash = "org.mozilla.components:lib-crash:${Versions.mozilla_android_components}"
const val mozilla_support_base = "org.mozilla.components:support-base:${Versions.mozilla_android_components}"