diff --git a/docs/eyedropper.md b/docs/eyedropper.md
new file mode 100644
index 0000000..dd1de64
--- /dev/null
+++ b/docs/eyedropper.md
@@ -0,0 +1,59 @@
+---
+# Page settings
+layout: default
+keywords:
+comments: false
+
+# Hero section
+title: Smart eyedropper
+description: How to be quick, efficient and precise when working colors
+icon: 'color-dropper'
+
+# Micro navigation
+micro_nav: false
+
+# Page navigation
+page_nav:
+    next:
+        content: Symbols
+        url: '/symbols'
+    prev:
+        content: Styling
+        url: '/styling'
+---
+
+Working with colors is an essential part of a designer's job. The Lunacy's smart eyedropper tool is designed to make this work easy and effective.
+
+To use the eyedropper tool:
+
+1. Select an object to which you are going to apply a color. If you don't select any object, Lunacy applies the color to the workspace.
+2. Click the eyedropper icon on the toolbar or on the color picker panel, or just press `I`. The cursor turns into the eyedropper. Also, the **Colors** panel appears on the left. It features four pallets:
+  
+    * Recent colors
+    * Document colors
+    * Flat colors
+    * Material colors
+
+3. Hover the eyedropper over the color that you want to sample anywhere on the screen and click to apply it.
+
+![Using the eyedropper](public/eye-general.png)
+
+That is typically how all eyedroppers work in similar apps. But Lunacy's eyedropper also features a very nice zoom option that comes in handy when the target area is too small and you need pixel precision. To enable zoom, hover the eyedropper over the target and hold down the left mouse button. Then point the eyedropper to the required pixel and release the mouse button. To exit the zoom mode, press `Esc` or quickly swipe the cursor anywhere away from the current area, see the demo below.
+
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/eyedropper2.gif" height="auto"><source src="/public/eyedropper2.mp4" type="video/mp4"></video>
+
+## How Lunacy applies color to objects
+
+Depending on the styling properties of an object, Lunacy applies colors in the following order:
+
+1. Fill
+2. Border
+3. Shadow
+4. Inner shadow
+
+So, if an object has a fill and a border, Lunacy updates the fill. If an object has no fill, but has a border and a shadow, Lunacy changes the border color and so on. If an object has several fills/borders/shadows/inner shadows, Lunacy applies the color to the one which sits at the top of the property list in the Inspector. Similar rules apply to text objects where text color has top priority.
+
+To demonstrate all this, in the figure below we applied the colors of the rectangles to the ellipses with different sets of styling properties.
+
+{:.is-big}
+![Applying colors](public/eye-apply.png)
diff --git a/docs/index.md b/docs/index.md
index 556d833..a1fae4b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,6 +37,10 @@ grid_navigation:
       excerpt: Learn about tools that will help you create your unique style
       url: '/styling'
       icon: 'design'
+    - title: 'Smart eyedropper'
+      excerpt: How to be quick, efficient and precise when working colors
+      url: '/eyedropper'
+      icon: 'color-dropper'
     - title: 'Symbols'
       excerpt: Explore the power of Lunacy by learning how to use symbols
       url: '/symbols'
diff --git a/docs/public/eye-apply.png b/docs/public/eye-apply.png
new file mode 100644
index 0000000..a4874da
Binary files /dev/null and b/docs/public/eye-apply.png differ
diff --git a/docs/public/eye-general.png b/docs/public/eye-general.png
new file mode 100644
index 0000000..827dbf0
Binary files /dev/null and b/docs/public/eye-general.png differ
diff --git a/docs/public/eyedropper2.gif b/docs/public/eyedropper2.gif
new file mode 100644
index 0000000..496c7f3
Binary files /dev/null and b/docs/public/eyedropper2.gif differ
diff --git a/docs/public/eyedropper2.mp4 b/docs/public/eyedropper2.mp4
new file mode 100644
index 0000000..7e4293b
Binary files /dev/null and b/docs/public/eyedropper2.mp4 differ
diff --git a/docs/styling.md b/docs/styling.md
index 3af97ce..4b21c6d 100644
--- a/docs/styling.md
+++ b/docs/styling.md
@@ -15,8 +15,8 @@ micro_nav: false
 # Page navigation
 page_nav:
     next:
-        content: Symbols
-        url: '/symbols'
+        content: Smart eyedropper
+        url: '/eyedropper'
     prev:
         content: Text
         url: '/text'
diff --git a/docs/symbols.md b/docs/symbols.md
index d6dcfd2..e9553cc 100644
--- a/docs/symbols.md
+++ b/docs/symbols.md
@@ -18,8 +18,8 @@ page_nav:
         content: Layer and text styles
         url: '/layerstyles'
     prev:
-        content: Styling
-        url: '/styling'
+        content: Smart eyedropper
+        url: '/eyedropper'
 ---
 
 **Symbols** are reusable objects or groups of objects that make your designs consistent and your life easier.