diff --git a/.gitignore b/.gitignore
index c31f9a1..ffc2997 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,23 @@
 /build
 /captures
 .externalNativeBuild
-.idea
\ No newline at end of file
+.idea
+*.apk
+*.ap_
+*.dex
+*.class
+bin/
+gen/
+out/
+build/
+workspace.xml
+local.properties
+ks.properties
+.classpath
+.project
+lint.xml
+protected_strings.xml
+/dist
+/dexguard
+googlePlay/
+captures/
\ No newline at end of file
diff --git a/design/.gitignore b/design/.gitignore
new file mode 100644
index 0000000..796b96d
--- /dev/null
+++ b/design/.gitignore
@@ -0,0 +1 @@
+/build
diff --git a/design/build.gradle b/design/build.gradle
new file mode 100644
index 0000000..2c65c3e
--- /dev/null
+++ b/design/build.gradle
@@ -0,0 +1,17 @@
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+
+android {
+    compileSdkVersion 29
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 29
+    }
+}
+dependencies {
+    api project(':app')
+    implementation 'com.google.android.material:material:1.1.0'
+    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.72"
+}
diff --git a/design/consumer-rules.pro b/design/consumer-rules.pro
new file mode 100644
index 0000000..e69de29
diff --git a/design/proguard-rules.pro b/design/proguard-rules.pro
new file mode 100644
index 0000000..f1b4245
--- /dev/null
+++ b/design/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
diff --git a/design/src/main/AndroidManifest.xml b/design/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..251e0bd
--- /dev/null
+++ b/design/src/main/AndroidManifest.xml
@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.buffer.android.components.design" />
diff --git a/design/src/main/res/anim/bottom_sheet_slide_in.xml b/design/src/main/res/anim/bottom_sheet_slide_in.xml
new file mode 100644
index 0000000..731fe64
--- /dev/null
+++ b/design/src/main/res/anim/bottom_sheet_slide_in.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+  android:duration="250"
+  android:interpolator="@android:anim/accelerate_decelerate_interpolator">
+
+    <translate
+      android:fromYDelta="20%p"
+      android:toYDelta="0"/>
+
+    <alpha
+      android:fromAlpha="0.0"
+      android:toAlpha="1.0"/>
+
+</set>
diff --git a/design/src/main/res/anim/bottom_sheet_slide_out.xml b/design/src/main/res/anim/bottom_sheet_slide_out.xml
new file mode 100644
index 0000000..b32db34
--- /dev/null
+++ b/design/src/main/res/anim/bottom_sheet_slide_out.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+  android:duration="200"
+  android:interpolator="@android:anim/accelerate_interpolator">
+
+    <translate
+      android:fromYDelta="0"
+      android:toYDelta="20%p"/>
+
+    <alpha
+      android:fromAlpha="1.0"
+      android:toAlpha="0.0"/>
+
+</set>
diff --git a/design/src/main/res/drawable-hdpi/illustration_pro_plan.png b/design/src/main/res/drawable-hdpi/illustration_pro_plan.png
new file mode 100755
index 0000000..e7d710b
Binary files /dev/null and b/design/src/main/res/drawable-hdpi/illustration_pro_plan.png differ
diff --git a/design/src/main/res/drawable-xhdpi/illustration_pro_plan.png b/design/src/main/res/drawable-xhdpi/illustration_pro_plan.png
new file mode 100755
index 0000000..393e910
Binary files /dev/null and b/design/src/main/res/drawable-xhdpi/illustration_pro_plan.png differ
diff --git a/design/src/main/res/drawable-xxhdpi/illustration_pro_plan.png b/design/src/main/res/drawable-xxhdpi/illustration_pro_plan.png
new file mode 100755
index 0000000..3e63edb
Binary files /dev/null and b/design/src/main/res/drawable-xxhdpi/illustration_pro_plan.png differ
diff --git a/design/src/main/res/drawable-xxxhdpi/illustration_pro_plan.png b/design/src/main/res/drawable-xxxhdpi/illustration_pro_plan.png
new file mode 100755
index 0000000..eb49ed6
Binary files /dev/null and b/design/src/main/res/drawable-xxxhdpi/illustration_pro_plan.png differ
diff --git a/design/src/main/res/drawable/grey_bordered_background_ripple.xml b/design/src/main/res/drawable/grey_bordered_background_ripple.xml
new file mode 100644
index 0000000..39c8a8a
--- /dev/null
+++ b/design/src/main/res/drawable/grey_bordered_background_ripple.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="?android:colorControlHighlight">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="?colorOnSurface" />
+            <corners android:radius="4dp" />
+            <stroke
+                android:width="0.5dp"
+                android:color="@color/color_on_surface_border" />
+        </shape>
+    </item>
+</ripple>
diff --git a/design/src/main/res/drawable/ic_ellipse.xml b/design/src/main/res/drawable/ic_ellipse.xml
new file mode 100644
index 0000000..91b48ef
--- /dev/null
+++ b/design/src/main/res/drawable/ic_ellipse.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M6,6m-6,0a6,6 0,1 1,12 0a6,6 0,1 1,-12 0"
+      android:fillColor="#9C2BFF"/>
+</vector>
diff --git a/design/src/main/res/drawable/ic_pencil.xml b/design/src/main/res/drawable/ic_pencil.xml
new file mode 100644
index 0000000..dc90fc6
--- /dev/null
+++ b/design/src/main/res/drawable/ic_pencil.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M21.2135,1.2557C20.6277,0.67 19.6779,0.67 19.0922,1.2557L18.0315,2.3164L21.2135,5.4984L22.2741,4.4377C22.8599,3.8519 22.8599,2.9022 22.2741,2.3164L21.2135,1.2557Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M16.9709,3.377L20.1529,6.559L7.425,19.2869L3.8531,21.0728C3.4525,21.2731 2.9687,21.1946 2.652,20.8779C2.3353,20.5612 2.2567,20.0774 2.4571,19.6768L4.243,16.1049L16.9709,3.377Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/design/src/main/res/drawable/white_background_gray_ripple.xml b/design/src/main/res/drawable/white_background_gray_ripple.xml
new file mode 100644
index 0000000..80d975d
--- /dev/null
+++ b/design/src/main/res/drawable/white_background_gray_ripple.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="?colorOnSurface">
+    <item android:drawable="@color/white" />
+</ripple>
diff --git a/design/src/main/res/values-v23/themes.xml b/design/src/main/res/values-v23/themes.xml
new file mode 100644
index 0000000..44adbbc
--- /dev/null
+++ b/design/src/main/res/values-v23/themes.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="Base.PublishThemeBuilder" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <item name="android:statusBarColor">?colorSurface</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:navigationBarColor">@color/black</item>
+        <item name="android:navigationBarDividerColor" tools:ignore="NewApi">?colorControlHighlight</item>
+
+        <item name="colorPrimaryDark">?colorPrimaryVariant</item>
+        <item name="colorAccent">?colorSecondary</item>
+    </style>
+</resources>
diff --git a/design/src/main/res/values/color.xml b/design/src/main/res/values/color.xml
new file mode 100644
index 0000000..ff41731
--- /dev/null
+++ b/design/src/main/res/values/color.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="color_primary">@color/white</color>
+    <color name="color_primary_variant">@color/gray_darker</color>
+    <color name="color_secondary">@color/curious_blue</color>
+    <color name="color_secondary_variant">@color/curious_blue_dark</color>
+
+    <!--colorBackground appears behind scrollable content and is used for the default window-->
+    <!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
+    <!--and menus. colorError is used to indicate an error state for components such as-->
+    <!--text fields.-->
+    <color name="color_background">@color/gray_lighter</color>
+    <color name="color_surface">@color/white</color>
+    <color name="color_error">@color/red_dark</color>
+
+    <!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
+    <!--on which they appear.-->
+    <color name="color_on_primary">@color/text_primary</color>
+    <color name="color_on_primary_inverse">@color/white</color>
+    <color name="color_on_primary_70">#E63D3D3D</color>
+    <color name="color_on_primary_20">#333D3D3D</color>
+    <color name="color_primary_as_surface">#F5F5F5</color>
+    <color name="color_secondary_as_surface">#1A2C4BFF</color>
+    <color name="color_on_secondary">@color/white</color>
+    <color name="color_on_background">@color/text_secondary</color>
+    <color name="color_on_surface">@color/gray_lighter</color>
+    <color name="color_on_surface_border">@color/gray_light</color>
+    <color name="color_on_error">@color/white</color>
+
+    <color name="message_background">#f4f7f9</color>
+    <color name="unselected_item">#B8B8B8</color>
+    <color name="text_on_colored_surface">@color/black</color>
+    <color name="text_on_surface">@color/gray_dark</color>
+    <color name="search_background">@color/gray_lighter</color>
+
+    <color name="text_primary">@color/gray_darker</color>
+    <color name="text_secondary">@color/gray_dark</color>
+</resources>
diff --git a/design/src/main/res/values/dimens.xml b/design/src/main/res/values/dimens.xml
new file mode 100644
index 0000000..1b76e9a
--- /dev/null
+++ b/design/src/main/res/values/dimens.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="material_card_stroke_width">0.5dp</dimen>
+    <dimen name="button_radius">4dp</dimen>
+    <dimen name="content_action_padding">6dp</dimen>
+
+    <dimen name="one_space">8dp</dimen>
+    <dimen name="two_space">16dp</dimen>
+
+    <dimen name="item_content_vertical_padding">0dp</dimen>
+    <dimen name="item_content_horizontal_padding">0dp</dimen>
+
+    <dimen name="buffer_card_width">340dp</dimen>
+    <dimen name="tabbed_content_top_margin_to_center">180dp</dimen>
+    <dimen name="error_view_top_offset">-120dp</dimen>
+</resources>
\ No newline at end of file
diff --git a/design/src/main/res/values/motion.xml b/design/src/main/res/values/motion.xml
new file mode 100644
index 0000000..cdf1738
--- /dev/null
+++ b/design/src/main/res/values/motion.xml
@@ -0,0 +1,26 @@
+<!--
+~ Copyright (C) 2019 The Android Open Source Project
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~      http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+
+<resources>
+
+    <!--Motion-->
+
+    <style name="Animation.MyTheme.BottomSheet.Modal" parent="Animation.AppCompat.Dialog">
+        <item name="android:windowEnterAnimation">@anim/bottom_sheet_slide_in</item>
+        <item name="android:windowExitAnimation">@anim/bottom_sheet_slide_out</item>
+    </style>
+
+</resources>
diff --git a/design/src/main/res/values/styles.xml b/design/src/main/res/values/styles.xml
new file mode 100644
index 0000000..76e8a60
--- /dev/null
+++ b/design/src/main/res/values/styles.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="ThemeOverlay.PublishTheme.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.Dialog">
+        <item name="android:windowIsFloating">false</item>
+        <item name="android:windowBackground">@android:color/transparent</item>
+        <item name="android:windowAnimationStyle">@style/Animation.MyTheme.BottomSheet.Modal</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="bottomSheetStyle">@style/Widget.PublishTheme.BottomSheet.Modal</item>
+        <item name="android:navigationBarColor">?colorSurface</item>
+        <item name="android:navigationBarDividerColor" tools:ignore="NewApi">@android:color/transparent</item>
+    </style>
+
+    <style name="Widget.PublishTheme.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
+        <item name="shapeAppearanceOverlay">?shapeAppearanceLargeComponent</item>
+    </style>
+
+    <style name="Widget.PublishTheme.NavigationView" parent="Widget.MaterialComponents.NavigationView">
+        <item name="itemTextAppearance">?textAppearanceBody2</item>
+    </style>
+
+    <style name="ThemeOverlay.PublishTheme.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
+        <item name="rippleColor">@color/color_on_primary_20</item>
+    </style>
+</resources>
diff --git a/design/src/main/res/values/themes.xml b/design/src/main/res/values/themes.xml
new file mode 100644
index 0000000..4b934fd
--- /dev/null
+++ b/design/src/main/res/values/themes.xml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="PublishTheme.DayNight" parent="Base.PublishTheme"/>
+
+    <style name="Base.PublishTheme" parent="Base.PublishThemeBuilder">
+        <item name="colorPrimary">@color/color_primary</item>
+        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
+        <item name="colorPrimaryDark">@color/color_on_primary</item>
+        <item name="colorSecondary">@color/color_secondary</item>
+        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>
+
+        <item name="android:colorBackground">@color/color_background</item>
+        <item name="colorSurface">@color/color_surface</item>
+        <item name="colorError">@color/color_error</item>
+
+        <item name="colorOnPrimary">@color/color_on_primary</item>
+        <item name="colorOnSecondary">@color/color_on_secondary</item>
+        <item name="colorOnBackground">@color/color_on_background</item>
+        <item name="colorOnSurface">@color/color_on_surface</item>
+        <item name="colorOnError">@color/color_on_error</item>
+        <item name="android:windowBackground">@color/color_background</item>
+
+        <item name="materialAlertDialogTheme">@style/MaterialDialogTheme</item>
+        <item name="bottomSheetDialogTheme">@style/ThemeOverlay.PublishTheme.BottomSheetDialog</item>
+        <item name="navigationViewStyle">@style/Widget.PublishTheme.NavigationView</item>
+        <item name="toolbarStyle">@style/ToolbarTheme</item>
+        <item name="snackbarStyle">@style/SnackbarTheme</item>
+        <item name="textInputStyle">@style/TextInputLayoutTheme</item>
+        <item name="colorControlNormal">?android:textColorPrimary</item>
+        <item name="android:textColorPrimary">@color/text_primary</item>
+        <item name="android:textColorSecondary">@color/text_secondary</item>
+    </style>
+
+    <style name="TextInputLayoutTheme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
+        <item name="boxBackgroundColor">@color/gray_lighter</item>
+        <item name="android:textColorHint">?android:textColorSecondary</item>
+        <item name="hintTextColor">?colorSecondary</item>
+        <item name="materialThemeOverlay">@style/TextInputLayoutAppearance</item>
+    </style>
+
+    <style name="TextInputLayoutAppearance" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
+        <item name="colorControlNormal">?colorSecondary</item>
+        <item name="colorControlActivated">?colorSecondary</item>
+        <item name="colorControlHighlight">?colorSecondary</item>
+    </style>
+
+    <style name="MaterialDialogTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
+        <item name="buttonBarPositiveButtonStyle">@style/AlertButtonStyle</item>
+        <item name="buttonBarNegativeButtonStyle">@style/AlertButtonStyle</item>
+        <item name="buttonBarNeutralButtonStyle">@style/AlertButtonStyle</item>
+        <item name="materialAlertDialogTitleTextStyle">@style/TitleTextStyle</item>
+        <item name="materialAlertDialogBodyTextStyle">@style/BodyTextStyle</item>
+    </style>
+
+    <style name="TitleTextStyle" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
+        <item name="android:textColor">?android:textColorPrimary</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:textSize">@dimen/text_title</item>
+    </style>
+
+    <style name="BodyTextStyle" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
+        <item name="android:textColor">?android:textColorPrimary</item>
+        <item name="android:textSize">@dimen/text_body</item>
+    </style>
+
+    <style name="AlertButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
+        <item name="android:textColor">@color/colorAccent</item>
+    </style>
+
+    <style name="SnackbarTheme" parent="@style/Widget.MaterialComponents.Snackbar">
+        <item name="android:background">@color/gray_darker</item>
+    </style>
+
+    <style name="ToolbarTheme" parent="@style/Widget.MaterialComponents.Toolbar.Surface">
+        <item name="titleTextColor">?android:textColorPrimary</item>
+        <item name="colorControlNormal">?android:textColorPrimary</item>
+        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
+    </style>
+
+    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
+        <item name="color">?android:textColorPrimary</item>
+    </style>
+
+    <style name="Base.PublishThemeBuilder" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <item name="android:statusBarColor">?colorOnBackground</item>
+        <item name="android:navigationBarColor">?colorPrimaryVariant</item>
+        <item name="android:navigationBarDividerColor" tools:ignore="NewApi">?colorControlHighlight</item>
+
+        <item name="colorPrimaryDark">?colorPrimaryVariant</item>
+        <item name="colorAccent">?colorSecondary</item>
+    </style>
+
+    <style name="Publish.NoActionBar" parent="PublishTheme.DayNight">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+    </style>
+
+</resources>
diff --git a/sample/build.gradle b/sample/build.gradle
index 83b0406..dd67626 100644
--- a/sample/build.gradle
+++ b/sample/build.gradle
@@ -26,7 +26,7 @@ android {
 }
 
 dependencies {
-    implementation project(':app')
+    implementation project(':design')
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'androidx.core:core-ktx:1.2.0'
diff --git a/sample/src/main/AndroidManifest.xml b/sample/src/main/AndroidManifest.xml
index f2cc742..b552361 100644
--- a/sample/src/main/AndroidManifest.xml
+++ b/sample/src/main/AndroidManifest.xml
@@ -8,7 +8,7 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/Theme.Publish">
         <activity android:name=".MainActivity">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/sample/src/main/res/values/styles.xml b/sample/src/main/res/values/styles.xml
index bb5819a..37bee64 100644
--- a/sample/src/main/res/values/styles.xml
+++ b/sample/src/main/res/values/styles.xml
@@ -1,11 +1,11 @@
 <resources>
 
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.MaterialComponents">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
+    <style name="Theme.Publish" parent="PublishTheme.DayNight" />
+
+    <style name="App.Theme.NoActionBar" parent="Theme.Publish">
+        <item name="android:colorEdgeEffect">?colorSecondary</item>
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
     </style>
 
 </resources>
diff --git a/settings.gradle b/settings.gradle
index 59a4f44..fd00c16 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -1 +1 @@
-include ':app', ':sample'
+include ':app', ':sample', ':design'