diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss
index 5a87cc6c612..22b7ce6d831 100644
--- a/app/assets/stylesheets/generic/markdown_area.scss
+++ b/app/assets/stylesheets/generic/markdown_area.scss
@@ -77,3 +77,13 @@
     }
   }
 }
+
+.markdown-area {
+  background: #FFF;
+  border: 1px solid #ddd;
+  min-height: 100px;
+  padding: 5px;
+  font-size: 14px;
+  box-shadow: none;
+  width: 100%;
+}
diff --git a/app/assets/stylesheets/pages/markdown_area.scss b/app/assets/stylesheets/pages/markdown_area.scss
deleted file mode 100644
index 8ee8eaa4ee7..00000000000
--- a/app/assets/stylesheets/pages/markdown_area.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.markdown-area {
-  background: #FFF;
-  border: 1px solid #ddd;
-  min-height: 100px;
-  padding: 5px;
-  font-size: 14px;
-  box-shadow: none;
-  width: 100%;
-}
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
new file mode 100644
index 00000000000..277afa1db9e
--- /dev/null
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -0,0 +1,9 @@
+.gitlab-ui-dev-kit {
+  > h2 {
+    font-size: 27px;
+    border-bottom: 1px solid #CCC;
+    color: #666;
+    margin: 30px 0;
+    font-weight: bold;
+  }
+}
diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb
index fc498559d6b..c4d620d87b1 100644
--- a/app/controllers/help_controller.rb
+++ b/app/controllers/help_controller.rb
@@ -15,4 +15,7 @@ class HelpController < ApplicationController
 
   def shortcuts
   end
+
+  def ui
+  end
 end
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
new file mode 100644
index 00000000000..58de5b7c869
--- /dev/null
+++ b/app/views/help/ui.html.haml
@@ -0,0 +1,208 @@
+- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
+
+.gitlab-ui-dev-kit
+  %h1 GitLab UI development kit
+  %p.light
+    Use page inspector in your browser to check element classes and structure
+    of examples below.
+  %hr
+  %ul
+    %li
+      = link_to 'Blocks', '#blocks'
+    %li
+      = link_to 'Lists', '#lists'
+    %li
+      = link_to 'Tables', '#tables'
+    %li
+      = link_to 'Buttons', '#buttons'
+    %li
+      = link_to 'Panels', '#panels'
+    %li
+      = link_to 'Alerts', '#alerts'
+    %li
+      = link_to 'Forms', '#forms'
+    %li
+      = link_to 'Markdown', '#markdown'
+
+  %h2#blocks Blocks
+
+  %h3
+    %code .well
+
+
+  .well
+    %h4 Something
+    = lorem
+
+
+  %h2#lists Lists
+
+  %h3
+    %code .well-list
+  %ul.well-list
+    %li
+      One item
+    %li
+      One item
+    %li
+      One item
+
+  %h3
+    %code .panel .well-list
+
+  .panel.panel-default
+    .panel-heading My list
+    %ul.well-list
+      %li
+        One item
+      %li
+        One item
+      %li
+        One item
+
+  %h3
+    %code .bordered-list
+  %ul.bordered-list
+    %li
+      One item
+    %li
+      One item
+    %li
+      One item
+
+
+
+  %h2#tables Tables
+
+  .example
+    %table.table
+      %thead
+        %tr
+          %th #
+          %th First Name
+          %th Last Name
+          %th Username
+      %tbody
+        %tr
+          %td 1
+          %td Mark
+          %td Otto
+          %td @mdo
+        %tr
+          %td 2
+          %td Jacob
+          %td Thornton
+          %td @fat
+        %tr
+          %td 3
+          %td Larry
+          %td the Bird
+          %td @twitter
+
+
+  %h2#buttons Buttons
+
+  .example
+    %button.btn.btn-default{:type => "button"} Default
+    %button.btn.btn-primary{:type => "button"} Primary
+    %button.btn.btn-success{:type => "button"} Success
+    %button.btn.btn-info{:type => "button"} Info
+    %button.btn.btn-warning{:type => "button"} Warning
+    %button.btn.btn-danger{:type => "button"} Danger
+    %button.btn.btn-link{:type => "button"} Link
+
+  %h2#panels Panels
+
+  .row
+    .col-md-6
+      .panel.panel-success
+        .panel-heading Success
+        .panel-body
+          = lorem
+      .panel.panel-primary
+        .panel-heading Primary
+        .panel-body
+          = lorem
+      .panel.panel-info
+        .panel-heading Info
+        .panel-body
+          = lorem
+    .col-md-6
+      .panel.panel-warning
+        .panel-heading Warning
+        .panel-body
+          = lorem
+      .panel.panel-danger
+        .panel-heading Danger
+        .panel-body
+          = lorem
+
+  %h2#alert Alerts
+
+  .row
+    .col-md-6
+      .alert.alert-success
+        = lorem
+      .alert.alert-primary
+        = lorem
+      .alert.alert-info
+        = lorem
+    .col-md-6
+      .alert.alert-warning
+        = lorem
+      .alert.alert-danger
+        = lorem
+
+  %h2#forms Forms
+
+  %h3
+    %code form.horizontal-form
+
+  %form.form-horizontal
+    .form-group
+      %label.col-sm-2.control-label{:for => "inputEmail3"} Email
+      .col-sm-10
+        %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
+    .form-group
+      %label.col-sm-2.control-label{:for => "inputPassword3"} Password
+      .col-sm-10
+        %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          %label
+            %input{:type => "checkbox"}/
+            Remember me
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        %button.btn.btn-default{:type => "submit"} Sign in
+
+  %h3
+    %code form
+
+  %form
+    .form-group
+      %label{:for => "exampleInputEmail1"} Email address
+      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
+    .form-group
+      %label{:for => "exampleInputPassword1"} Password
+      %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
+    .checkbox
+      %label
+        %input{:type => "checkbox"}/
+        Remember me
+    %button.btn.btn-default{:type => "submit"} Sign in
+
+  %h2#markdown Markdown
+  %h3
+    %code .md or .wiki and others
+
+  Markdown rendering has a bit different css and presented in next UI elements:
+
+  %ul
+    %li comment
+    %li issue, merge request description
+    %li wiki page
+    %li help page
+
+  You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("markdown", "markdown")}.
diff --git a/config/routes.rb b/config/routes.rb
index 5348c86ea9d..6dd9ded0193 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -7,9 +7,8 @@ Gitlab::Application.routes.draw do
                 authorized_applications: 'oauth/authorized_applications',
                 authorizations: 'oauth/authorizations'
   end
-  #
+
   # Search
-  #
   get 'search' => 'search#show'
   get 'search/autocomplete' => 'search#autocomplete', as: :search_autocomplete
 
@@ -33,13 +32,11 @@ Gitlab::Application.routes.draw do
     receive_pack: Gitlab.config.gitlab_shell.receive_pack
   }), at: '/', constraints: lambda { |request| /[-\/\w\.]+\.git\//.match(request.path_info) }, via: [:get, :post]
 
-  #
   # Help
-  #
-
   get 'help'                  => 'help#index'
   get 'help/:category/:file'  => 'help#show', as: :help_page
   get 'help/shortcuts'
+  get 'help/ui'               => 'help#ui'
 
   #
   # Global snippets
@@ -73,7 +70,7 @@ Gitlab::Application.routes.draw do
       get :callback
       get :jobs
     end
-    
+
     resource :gitorious, only: [:create, :new], controller: :gitorious do
       get :status
       get :callback
diff --git a/doc/development/README.md b/doc/development/README.md
index c31e5d7ae97..d5d264be19d 100644
--- a/doc/development/README.md
+++ b/doc/development/README.md
@@ -5,3 +5,4 @@
 - [Rake tasks](rake_tasks.md) for development
 - [CI setup](ci_setup.md) for testing GitLab
 - [Sidekiq debugging](sidekiq_debugging.md)
+- [UI guide](ui_guide.md) for building GitLab with existing css styles and elements
diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md
new file mode 100644
index 00000000000..2f01defc11d
--- /dev/null
+++ b/doc/development/ui_guide.md
@@ -0,0 +1,12 @@
+# UI Guide for building GitLab 
+
+## Best practices for creating new pages in GitLab
+
+TODO: write some best practices when develop GitLab features.
+
+## GitLab UI development kit
+
+We created a page inside GitLab where you can check commonly used html and css elements.
+
+When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples 
+you can use during GitLab development.