diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 6bf2857e83..cbfd4bc29b 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -21,7 +21,6 @@
     position: relative;
     background: $background-color;
     border-bottom: 1px solid $border-color;
-    text-shadow: 0 1px 1px #fff;
     margin: 0;
     text-align: left;
     padding: 10px $gl-padding;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index a798ae812e..927641216e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -72,13 +72,6 @@
   }
 }
 
-ol, ul {
-  &.styled {
-    li {
-      padding: 2px;
-    }
-  }
-}
 
 /** light list with border-bottom between li **/
 ul.bordered-list {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 277afa1db9..185f3622e6 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -1,9 +1,6 @@
 .gitlab-ui-dev-kit {
   > h2 {
-    font-size: 27px;
-    border-bottom: 1px solid #CCC;
-    color: #666;
-    margin: 30px 0;
+    margin: 35px 0 20px;
     font-weight: bold;
   }
 }
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 2169a821fb..d9ffda884c 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -31,11 +31,9 @@
 
   %h2#blocks Blocks
 
-  %h3
+  %h4
     %code .gray-content-block
 
-
-
   .gray-content-block.middle-block
     %h4 Normal block inside content
     = lorem
@@ -45,9 +43,28 @@
     = lorem
 
 
+  %h4
+    %code .cover-block
+  %br
+  .cover-block
+    .avatar-holder
+      = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
+    .cover-title
+      John Smith
+
+    .cover-desc
+      = lorem
+
+    .cover-controls
+      = link_to '#', class: 'btn btn-gray' do
+        = icon('pencil')
+       
+      = link_to '#', class: 'btn btn-gray' do
+        = icon('rss')
+
   %h2#lists Lists
 
-  %h3
+  %h4
     %code .content-list
   %ul.content-list
     %li
@@ -57,7 +74,7 @@
     %li
       One item
 
-  %h3
+  %h4
     %code .well-list
   %ul.well-list
     %li
@@ -67,7 +84,7 @@
     %li
       One item
 
-  %h3
+  %h4
     %code .panel .well-list
 
   .panel.panel-default
@@ -80,7 +97,7 @@
       %li
         One item
 
-  %h3
+  %h4
     %code .bordered-list
   %ul.bordered-list
     %li
@@ -121,7 +138,7 @@
 
   %h2#navs Navigation
 
-  %h3
+  %h4
     %code .center-top-menu
   .example
     %ul.center-top-menu
@@ -130,7 +147,7 @@
       %li
         %a Closed
 
-  %h3
+  %h4
     %code .btn-group.btn-group-next
   .example
     %div.btn-group.btn-group-next
@@ -138,7 +155,7 @@
       %a.btn Closed
 
 
-  %h3
+  %h4
     %code .nav.nav-tabs
   .example
     %ul.nav.nav-tabs
@@ -204,7 +221,7 @@
 
   %h2#forms Forms
 
-  %h3
+  %h4
     %code form.horizontal-form
 
   %form.form-horizontal
@@ -226,7 +243,7 @@
       .col-sm-offset-2.col-sm-10
         %button.btn.btn-default{:type => "submit"} Sign in
 
-  %h3
+  %h4
     %code form
 
   %form
@@ -243,7 +260,7 @@
     %button.btn.btn-default{:type => "submit"} Sign in
 
   %h2#file File
-  %h3
+  %h4
     %code .file-holder
 
   - blob = Snippet.new(content: "Wow\nSuch\nFile")
@@ -254,13 +271,12 @@
         .file-actions
           .btn-group
             %a.btn Edit
-            %a.btn Remove
+            %a.btn.btn-danger Remove
       .file-contenta.code
         = render 'shared/file_highlight', blob: blob
 
-
   %h2#markdown Markdown
-  %h3
+  %h4
     %code .md or .wiki and others
 
   Markdown rendering has a bit different css and presented in next UI elements: