Restyle de exemplo.

public/styles/main.css

@@ -4,10 +4,16 @@ HERE YOUR CUSTOM CSS
 
 **/
 
-.navbar, .navbar-inverse {
-    background-color: #5b5ce1 !important;
-}
 
 .dev .navbar, .dev .navbar-inverse {
-    background-color: #333333 !important;
+    background-color: #666 !important;
+}
+
+.navbar, .navbar-inverse {
+    background-color: #00B9D3 !important;
 }
+
+.top-nav > li.active > a {
+    background-color: #B8E3EA;
+    color: #000;
+}

ui/src/styles/main.less

@@ -2,3 +2,33 @@
 /*** GLOBAL CSS ***/
 
 @import '~antd/dist/antd';
+
+
+@cor-principal: #00B9D3;
+@cor-princiipal-bordas: #57C7DB;
+
+
+.navbar, .navbar-inverse {
+    background-color: @cor-principal !important;
+}
+
+.top-nav > li.active > a {
+    background-color: #B8E3EA;
+    color: #000;
+}
+
+.search-content .btn-search, .search-content .btn-filter {
+    background-color: @cor-principal;
+    border-color: @cor-princiipal-bordas;
+}
+
+.btn-primary {
+    background-color: @cor-principal;
+    border-color: @cor-princiipal-bordas;
+    &:hover {
+        background-color: lighten(@cor-principal, 20%);
+        border-color: @cor-princiipal-bordas;
+    }
+}
+
+//lighten(hsl(90, 80%, 50%), 20%)

ui/webpack.config.js

@@ -56,9 +56,9 @@ module.exports = {
                         loader: 'less-loader', // compiles Less to CSS
                         options: {
                             modifyVars: {
-                                'primary-color': '#5b5ce1',
-                                'link-color': '#5b5ce1',
-                                'border-radius-base': '5px'
+                                'primary-color': '#00B9D3',
+                                'link-color': '#00B9D3',
+                                'border-radius-base': '0'
                             },
                             javascriptEnabled: true
                         }