diff --git a/docs/sources/packages_api/data/grafanatheme.md b/docs/sources/packages_api/data/grafanatheme.md
index 55e3d6c86b5..359d799e0df 100644
--- a/docs/sources/packages_api/data/grafanatheme.md
+++ b/docs/sources/packages_api/data/grafanatheme.md
@@ -25,7 +25,7 @@ import { GrafanaTheme } from '@grafana/data';
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [background](#background-property) | <code>{</code><br/><code>        dropdown: string;</code><br/><code>        scrollbar: string;</code><br/><code>        scrollbar2: string;</code><br/><code>        pageHeader: string;</code><br/><code>    }</code> |  |
-|  [colors](#colors-property) | <code>{</code><br/><code>        black: string;</code><br/><code>        white: string;</code><br/><code>        dark1: string;</code><br/><code>        dark2: string;</code><br/><code>        dark3: string;</code><br/><code>        dark4: string;</code><br/><code>        dark5: string;</code><br/><code>        dark6: string;</code><br/><code>        dark7: string;</code><br/><code>        dark8: string;</code><br/><code>        dark9: string;</code><br/><code>        dark10: string;</code><br/><code>        gray1: string;</code><br/><code>        gray2: string;</code><br/><code>        gray3: string;</code><br/><code>        gray4: string;</code><br/><code>        gray5: string;</code><br/><code>        gray6: string;</code><br/><code>        gray7: string;</code><br/><code>        gray98: string;</code><br/><code>        gray95: string;</code><br/><code>        gray85: string;</code><br/><code>        gray70: string;</code><br/><code>        gray33: string;</code><br/><code>        gray25: string;</code><br/><code>        gray15: string;</code><br/><code>        gray10: string;</code><br/><code>        gray05: string;</code><br/><code>        blue95: string;</code><br/><code>        blue85: string;</code><br/><code>        blue77: string;</code><br/><code>        red88: string;</code><br/><code>        grayBlue: string;</code><br/><code>        inputBlack: string;</code><br/><code>        blue: string;</code><br/><code>        blueBase: string;</code><br/><code>        blueShade: string;</code><br/><code>        blueLight: string;</code><br/><code>        blueFaint: string;</code><br/><code>        redBase: string;</code><br/><code>        redShade: string;</code><br/><code>        greenBase: string;</code><br/><code>        greenShade: string;</code><br/><code>        red: string;</code><br/><code>        yellow: string;</code><br/><code>        purple: string;</code><br/><code>        variable: string;</code><br/><code>        orange: string;</code><br/><code>        orangeDark: string;</code><br/><code>        queryRed: string;</code><br/><code>        queryGreen: string;</code><br/><code>        queryPurple: string;</code><br/><code>        queryKeyword: string;</code><br/><code>        queryOrange: string;</code><br/><code>        brandPrimary: string;</code><br/><code>        brandSuccess: string;</code><br/><code>        brandWarning: string;</code><br/><code>        brandDanger: string;</code><br/><code>        online: string;</code><br/><code>        warn: string;</code><br/><code>        critical: string;</code><br/><code>        link: string;</code><br/><code>        linkDisabled: string;</code><br/><code>        linkHover: string;</code><br/><code>        linkExternal: string;</code><br/><code>        body: string;</code><br/><code>        text: string;</code><br/><code>        textStrong: string;</code><br/><code>        textWeak: string;</code><br/><code>        textFaint: string;</code><br/><code>        textEmphasis: string;</code><br/><code>        panelBg: string;</code><br/><code>        bodyBg: string;</code><br/><code>        pageBg: string;</code><br/><code>        headingColor: string;</code><br/><code>        pageHeaderBorder: string;</code><br/><code>        formLabel: string;</code><br/><code>        formDescription: string;</code><br/><code>        formLegend: string;</code><br/><code>        formInputBg: string;</code><br/><code>        formInputBgDisabled: string;</code><br/><code>        formInputBorder: string;</code><br/><code>        formInputBorderHover: string;</code><br/><code>        formInputBorderActive: string;</code><br/><code>        formInputBorderInvalid: string;</code><br/><code>        formFocusOutline: string;</code><br/><code>        formInputText: string;</code><br/><code>        formInputDisabledText: string;</code><br/><code>        formInputTextStrong: string;</code><br/><code>        formInputTextWhite: string;</code><br/><code>        formValidationMessageText: string;</code><br/><code>        formValidationMessageBg: string;</code><br/><code>        formSwitchBg: string;</code><br/><code>        formSwitchBgActive: string;</code><br/><code>        formSwitchBgActiveHover: string;</code><br/><code>        formSwitchBgHover: string;</code><br/><code>        formSwitchBgDisabled: string;</code><br/><code>        formSwitchDot: string;</code><br/><code>        formCheckboxBg: string;</code><br/><code>        formCheckboxBgChecked: string;</code><br/><code>        formCheckboxBgCheckedHover: string;</code><br/><code>        formCheckboxCheckmark: string;</code><br/><code>    }</code> |  |
+|  [colors](#colors-property) | <code>{</code><br/><code>        black: string;</code><br/><code>        white: string;</code><br/><code>        dark1: string;</code><br/><code>        dark2: string;</code><br/><code>        dark3: string;</code><br/><code>        dark4: string;</code><br/><code>        dark5: string;</code><br/><code>        dark6: string;</code><br/><code>        dark7: string;</code><br/><code>        dark8: string;</code><br/><code>        dark9: string;</code><br/><code>        dark10: string;</code><br/><code>        gray1: string;</code><br/><code>        gray2: string;</code><br/><code>        gray3: string;</code><br/><code>        gray4: string;</code><br/><code>        gray5: string;</code><br/><code>        gray6: string;</code><br/><code>        gray7: string;</code><br/><code>        gray98: string;</code><br/><code>        gray95: string;</code><br/><code>        gray85: string;</code><br/><code>        gray70: string;</code><br/><code>        gray33: string;</code><br/><code>        gray25: string;</code><br/><code>        gray15: string;</code><br/><code>        gray10: string;</code><br/><code>        gray05: string;</code><br/><code>        blue95: string;</code><br/><code>        blue85: string;</code><br/><code>        blue77: string;</code><br/><code>        red88: string;</code><br/><code>        grayBlue: string;</code><br/><code>        inputBlack: string;</code><br/><code>        blue: string;</code><br/><code>        blue80: string;</code><br/><code>        blue77: string;</code><br/><code>        blue95: string;</code><br/><code>        blueFaint: string;</code><br/><code>        redBase: string;</code><br/><code>        redShade: string;</code><br/><code>        greenBase: string;</code><br/><code>        greenShade: string;</code><br/><code>        red: string;</code><br/><code>        yellow: string;</code><br/><code>        purple: string;</code><br/><code>        variable: string;</code><br/><code>        orange: string;</code><br/><code>        orangeDark: string;</code><br/><code>        queryRed: string;</code><br/><code>        queryGreen: string;</code><br/><code>        queryPurple: string;</code><br/><code>        queryKeyword: string;</code><br/><code>        queryOrange: string;</code><br/><code>        brandPrimary: string;</code><br/><code>        brandSuccess: string;</code><br/><code>        brandWarning: string;</code><br/><code>        brandDanger: string;</code><br/><code>        online: string;</code><br/><code>        warn: string;</code><br/><code>        critical: string;</code><br/><code>        link: string;</code><br/><code>        linkDisabled: string;</code><br/><code>        linkHover: string;</code><br/><code>        linkExternal: string;</code><br/><code>        body: string;</code><br/><code>        text: string;</code><br/><code>        textStrong: string;</code><br/><code>        textWeak: string;</code><br/><code>        textFaint: string;</code><br/><code>        textEmphasis: string;</code><br/><code>        panelBg: string;</code><br/><code>        bodyBg: string;</code><br/><code>        pageBg: string;</code><br/><code>        headingColor: string;</code><br/><code>        pageHeaderBorder: string;</code><br/><code>        formLabel: string;</code><br/><code>        formDescription: string;</code><br/><code>        formLegend: string;</code><br/><code>        formInputBg: string;</code><br/><code>        formInputBgDisabled: string;</code><br/><code>        formInputBorder: string;</code><br/><code>        formInputBorderHover: string;</code><br/><code>        formInputBorderActive: string;</code><br/><code>        formInputBorderInvalid: string;</code><br/><code>        formFocusOutline: string;</code><br/><code>        formInputText: string;</code><br/><code>        formInputDisabledText: string;</code><br/><code>        formInputTextStrong: string;</code><br/><code>        formInputTextWhite: string;</code><br/><code>        formValidationMessageText: string;</code><br/><code>        formValidationMessageBg: string;</code><br/><code>        formSwitchBg: string;</code><br/><code>        formSwitchBgActive: string;</code><br/><code>        formSwitchBgActiveHover: string;</code><br/><code>        formSwitchBgHover: string;</code><br/><code>        formSwitchBgDisabled: string;</code><br/><code>        formSwitchDot: string;</code><br/><code>        formCheckboxBg: string;</code><br/><code>        formCheckboxBgChecked: string;</code><br/><code>        formCheckboxBgCheckedHover: string;</code><br/><code>        formCheckboxCheckmark: string;</code><br/><code>    }</code> |  |
 |  [isDark](#isdark-property) | <code>boolean</code> |  |
 |  [isLight](#islight-property) | <code>boolean</code> |  |
 |  [shadow](#shadow-property) | <code>{</code><br/><code>        pageHeader: string;</code><br/><code>    }</code> |  |
@@ -85,9 +85,9 @@ colors: {
         grayBlue: string;
         inputBlack: string;
         blue: string;
-        blueBase: string;
-        blueShade: string;
-        blueLight: string;
+        blue80: string;
+        blue77: string;
+        blue95: string;
         blueFaint: string;
         redBase: string;
         redShade: string;
diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts
index 67e91f38e2f..d0d9ff772f8 100644
--- a/packages/grafana-data/src/types/theme.ts
+++ b/packages/grafana-data/src/types/theme.ts
@@ -67,7 +67,6 @@ export interface GrafanaThemeCommons {
     formSpacingBase: number;
     formMargin: string;
     formFieldsetMargin: string;
-    formLegendMargin: string;
     formInputHeight: string;
     formButtonHeight: number;
     formInputPaddingHorizontal: string;
@@ -148,17 +147,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     // New blues palette used by next-gen form elements
     blue95: string;
     blue85: string;
+    blue80: string;
     blue77: string;
 
     // New reds palette used by next-gen form elements
     red88: string;
 
     // Accent colors
-    blue: string;
-    blueBase: string;
-    blueShade: string;
-    blueLight: string;
-    blueFaint: string;
     redBase: string;
     redShade: string;
     greenBase: string;
@@ -188,6 +183,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     bg3: string;
     border1: string;
     border2: string;
+    border3: string;
+
+    bgBlue1: string;
+    bgBlue2: string;
 
     dashboardBg: string;
     bodyBg: string;
@@ -207,18 +206,17 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     linkExternal: string;
 
     // Text colors
-    text: string;
     textStrong: string;
+    textHeading: string;
+    text: string;
+    textSemiWeak: string;
     textWeak: string;
     textFaint: string;
-    textEmphasis: string;
-    headingColor: string;
     textBlue: string;
 
     // Next-gen forms functional colors
     formLabel: string;
     formDescription: string;
-    formLegend: string;
     formInputBg: string;
     formInputBgDisabled: string;
     formInputBorder: string;
@@ -229,8 +227,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formInputText: string;
     formInputDisabledText: string;
     formInputPlaceholderText: string;
-    formInputTextStrong: string;
-    formInputTextWhite: string;
     formValidationMessageText: string;
     formValidationMessageBg: string;
     formSwitchBg: string;
@@ -244,4 +240,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formCheckboxBgCheckedHover: string;
     formCheckboxCheckmark: string;
   };
+  shadows: {
+    listItem: string;
+  };
 }
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
index 3a712eb66ee..1b2fb38c8d5 100644
--- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
@@ -17,7 +17,7 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
   const styles = cx(
     className,
     css`
-      background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade});
+      background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77});
       color: ${theme.palette.gray7};
       white-space: nowrap;
       border-radius: 3px;
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 2b856ef5c27..9d0da1bd4a0 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
     case 'primary':
     default:
       return {
-        borderColor: theme.palette.blueShade,
-        background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
+        borderColor: theme.colors.bgBlue1,
+        background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white),
       };
   }
 };
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index f62a7492405..01d363769ce 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -36,7 +36,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
       animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
       animation-iteration-count: 100;
       left: -25%;
-      background: ${theme.palette.blue};
+      background: ${theme.palette.blue85};
     }
     @keyframes loader {
       from {
diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx
index 89077a523a7..774af2c4a4d 100644
--- a/packages/grafana-ui/src/components/Forms/Legend.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legend.tsx
@@ -13,8 +13,7 @@ export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => {
     legend: css`
       font-size: ${theme.typography.heading.h3};
       font-weight: ${theme.typography.weight.regular};
-      margin: ${theme.spacing.formLegendMargin};
-      color: ${theme.colors.formLegend};
+      margin: 0 0 ${theme.spacing.md} 0;
     `,
   };
 });
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 7a7fb9eedf0..546deae1c54 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -21,12 +21,12 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
   const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
   const c = theme.palette;
 
-  const textColor = theme.isLight ? c.gray33 : c.gray70;
-  const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
-  const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
-  const borderColor = theme.isLight ? c.gray4 : c.gray25;
-  const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
-  const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
+  const textColor = theme.colors.textSemiWeak;
+  const textColorHover = theme.colors.text;
+  const textColorActive = theme.isLight ? c.blue77 : c.blue95;
+  const borderColor = theme.colors.border2;
+  const borderColorHover = theme.colors.border3;
+  const borderColorActive = theme.isLight ? c.blue77 : c.blue95;
   const bg = theme.colors.bodyBg;
   const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
   const bgActive = theme.isLight ? c.white : c.gray05;
diff --git a/packages/grafana-ui/src/components/Legend/LegendTable.tsx b/packages/grafana-ui/src/components/Legend/LegendTable.tsx
index b3046a8884c..da627811b3f 100644
--- a/packages/grafana-ui/src/components/Legend/LegendTable.tsx
+++ b/packages/grafana-ui/src/components/Legend/LegendTable.tsx
@@ -41,7 +41,7 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
               <th
                 key={columnHeader}
                 className={css`
-                  color: ${theme.palette.blue};
+                  color: ${theme.colors.textBlue};
                   font-weight: bold;
                   text-align: right;
                   cursor: pointer;
diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
index ed9fb4c070a..fc90d52bb1e 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
@@ -11,7 +11,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   logsStatsRowActive: css`
     label: logs-stats-row--active;
-    color: ${theme.palette.blue};
+    color: ${theme.colors.textBlue};
     position: relative;
   `,
   logsStatsRowLabel: css`
@@ -46,8 +46,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     label: logs-stats-row__innerbar;
     height: 4px;
     overflow: hidden;
-    background: ${theme.colors.textFaint};
-    background: ${theme.palette.blue};
+    background: ${theme.colors.bgBlue1};
   `,
 });
 
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index 30683cc96d5..d13c6452e46 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -32,7 +32,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       opacity: 0.7;
     `,
     modalHeader: css`
-      background: ${theme.colors.bg1};
+      background: ${theme.colors.bg2};
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
       display: flex;
       height: 42px;
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index 36ed296cb91..4a361a4a67a 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
@@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
         <div className="panel-options-group__header">
           <button className="panel-options-group__add-btn" onClick={props.onAdd}>
             <div className="panel-options-group__add-circle">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </div>
             <span className="panel-options-group__title">{props.title}</span>
           </button>
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
index 0d25f0e648b..d3620296e74 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
 
 const AddButton = (
   <a className="gf-form-label query-part">
-    <Icon name="plus-circle" />
+    <Icon name="plus" />
   </a>
 );
 
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
index 04c77081476..5e3fb4ce202 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
@@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => {
           setInputComponents([...inputComponents, InputComponent]);
         }}
       >
-        <Icon name="plus-circle" />
+        <Icon name="plus" />
       </a>
     </SegmentFrame>
   );
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 6fc0e98a746..38ca6a795d5 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
   const bgColor = theme.colors.formInputBg;
   const menuShadowColor = theme.colors.dropdownShadow;
   const optionBgHover = theme.colors.dropdownOptionHoverBg;
-  const multiValueContainerBg = theme.colors.bg3;
+  const multiValueContainerBg = theme.colors.bg2;
   const multiValueColor = theme.colors.text;
 
   return {
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index d79bad32082..edc6f312316 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -19,7 +19,7 @@ export interface TableStyles {
 
 export const getTableStyles = stylesFactory(
   (theme: GrafanaTheme): TableStyles => {
-    const palette = theme.palette;
+    const { palette, colors } = theme;
     const headerBg = theme.colors.panelBorder;
     const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05;
     const resizerColor = theme.isLight ? palette.blue77 : palette.blue95;
@@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory(
         padding: ${padding}px 10px;
         cursor: pointer;
         white-space: nowrap;
-        color: ${palette.blue};
+        color: ${colors.textBlue};
         border-right: 1px solid ${headerBorderColor};
 
         &:last-child {
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index 6f04e728338..b4a09ce52e1 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
       background: ${colors.bodyBg};
       color: ${colors.link};
       overflow: hidden;
-      cursor: not-allowed;
 
       &::before {
         display: block;
diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
index 58ab8595985..a40be2ac7cc 100644
--- a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
+++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
@@ -1,76 +1,15 @@
 import React from 'react';
-import { css, cx } from 'emotion';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { useTheme } from '../../themes/ThemeContext';
+import { ThemeColors } from './ThemeColors';
 
 export default {
   title: 'General/ThemeColors',
-  component: () => {},
-  decorators: [withCenteredStory],
+  component: ThemeColors,
+  decorators: [],
   parameters: {
     docs: {},
   },
 };
 
-interface DemoElement {
-  name: string;
-  bg: string;
-  border?: string;
-  textColor?: string;
-  child?: DemoElement;
-}
-
-function renderElement(el: DemoElement) {
-  const style = cx(
-    css`
-      padding: 36px;
-      background: ${el.bg};
-    `,
-    el.border
-      ? css`
-          border: 1px solid ${el.border};
-        `
-      : null
-  );
-
-  return (
-    <div className={style}>
-      <div
-        className={css`
-          padding: 8px;
-        `}
-      >
-        {el.name}
-      </div>
-      {el.child && renderElement(el.child)}
-    </div>
-  );
-}
-
-export const BackgroundsAndBorders = () => {
-  const theme = useTheme();
-
-  const lvl1 = {
-    name: 'dashbord background',
-    bg: theme.colors.dashboardBg,
-    child: {
-      name: 'colors.bg1',
-      bg: theme.colors.bg1,
-      border: theme.colors.border1,
-      child: {
-        name:
-          'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1',
-        bg: theme.colors.bg2,
-        border: theme.colors.border2,
-        child: {
-          name:
-            'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2',
-          bg: theme.colors.bg3,
-          border: theme.colors.border2,
-        },
-      },
-    },
-  };
-
-  return <div>{renderElement(lvl1)}</div>;
+export const ThemeColorsDemo = () => {
+  return <ThemeColors />;
 };
diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
new file mode 100644
index 00000000000..cc83210374a
--- /dev/null
+++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
@@ -0,0 +1,143 @@
+import React, { FC } from 'react';
+import { css, cx } from 'emotion';
+import { useTheme } from '../../themes/ThemeContext';
+import { Icon } from '../Icon/Icon';
+import { HorizontalGroup } from '../Layout/Layout';
+
+interface DemoBoxProps {
+  bg: string;
+  border?: string;
+  textColor?: string;
+}
+
+const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
+  const style = cx(
+    css`
+      padding: 16px 32px;
+      background: ${bg};
+      width: 100%;
+    `,
+    border
+      ? css`
+          border: 1px solid ${border};
+        `
+      : null
+  );
+
+  return (
+    <div className={style}>
+      <div
+        className={css`
+          padding-bottom: 16px;
+        `}
+      >
+        {name}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => {
+  const style = css`
+    padding: 4px;
+    color: ${color ?? 'inherit'};
+    font-weight: ${bold ? 500 : 400};
+    font-size: ${size ?? 14}px;
+  `;
+
+  return <div className={style}>{children}</div>;
+};
+
+export const ThemeColors = () => {
+  const theme = useTheme();
+
+  return (
+    <div
+      className={css`
+        width: 100%;
+      `}
+    >
+      <DemoBox bg={theme.colors.dashboardBg}>
+        <DemoText>theme.colors.dashboardBg</DemoText>
+        <DemoBox bg={theme.colors.bg1} border={theme.colors.border1}>
+          <DemoText>
+            theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1
+          </DemoText>
+          <DemoBox bg={theme.colors.bg2} border={theme.colors.border2}>
+            <DemoText>
+              colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on
+              elements placed ontop of bg1. Ths box is using border2.
+            </DemoText>
+            <DemoBox bg={theme.colors.bg3} border={theme.colors.border2}>
+              <DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText>
+            </DemoBox>
+          </DemoBox>
+        </DemoBox>
+      </DemoBox>
+
+      <HorizontalGroup>
+        <DemoBox bg={theme.colors.bodyBg}>
+          <>
+            Text on main body background (bg1)
+            <DemoText color={theme.colors.textHeading} size={24}>
+              textHeading Usually a bit bigger text <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.text}>
+              text <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textSemiWeak}>
+              textSemiWeak <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textWeak}>
+              textWeak <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textFaint}>
+              textFaint <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textStrong}>
+              textStrong <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formInputText}>
+              formInputText <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formLabel} bold>
+              formLabel is also bold <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formDescription}>
+              formDescription <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textBlue} bold>
+              textBlue usually bold
+            </DemoText>
+            <DemoText color={theme.colors.link}>link</DemoText>
+            <DemoText color={theme.colors.linkHover}>linkHover</DemoText>
+            <DemoText color={theme.colors.linkDisabled}>linkDisabled</DemoText>
+            <DemoText color={theme.colors.linkExternal}>linkExternal</DemoText>
+          </>
+        </DemoBox>
+        <DemoBox bg={theme.colors.formInputBg}>
+          This is inside form input bg (same as dashboard bg)
+          <DemoText color={theme.colors.formInputText}>formInputText</DemoText>
+          <DemoText color={theme.colors.formInputDisabledText}>formInputDisabledText</DemoText>
+          <DemoText color={theme.colors.formInputPlaceholderText}>formInputPlaceholderText</DemoText>
+        </DemoBox>
+        <DemoBox bg={theme.colors.bg2}>
+          Inside bg2
+          <DemoText color={theme.colors.text}>
+            text <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textWeak}>
+            textWeak <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textFaint}>
+            textFaint <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textStrong}>
+            textStrong <Icon name="trash-alt" />
+          </DemoText>
+        </DemoBox>
+      </HorizontalGroup>
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
index 4b8495c48dc..90485723947 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
@@ -110,7 +110,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
       .react-calendar__month-view__weekdays {
         background-color: inherit;
         text-align: center;
-        color: ${theme.palette.blueShade};
+        color: ${theme.palette.blue77};
 
         abbr {
           border: 0;
diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
index 5138ceff494..a8bdb634d89 100644
--- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
@@ -70,10 +70,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
                 "colors": Object {
                   "bg1": "#141619",
                   "bg2": "#202226",
-                  "bg3": "#343b40",
+                  "bg3": "#2c3235",
+                  "bgBlue1": "#3274d9",
+                  "bgBlue2": "#1f60c4",
                   "bodyBg": "#141619",
                   "border1": "#202226",
-                  "border2": "#343b40",
+                  "border2": "#2c3235",
+                  "border3": "#464c54",
                   "dashboardBg": "#0b0c0e",
                   "dropdownBg": "#0b0c0e",
                   "dropdownOptionHoverBg": "#202226",
@@ -81,45 +84,42 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formCheckboxBg": "#222426",
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
-                  "formCheckboxCheckmark": "#343b40",
+                  "formCheckboxCheckmark": "#2c3235",
                   "formDescription": "#7b8087",
                   "formFocusOutline": "#1f60c4",
                   "formInputBg": "#0b0c0e",
                   "formInputBgDisabled": "#141619",
-                  "formInputBorder": "#343b40",
+                  "formInputBorder": "#2c3235",
                   "formInputBorderActive": "#5794f2",
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#555555",
+                  "formInputPlaceholderText": "#464c54",
                   "formInputText": "#c7d0d9",
-                  "formInputTextStrong": "#c7d0d9",
-                  "formInputTextWhite": "#ffffff",
                   "formLabel": "#9fa7b3",
-                  "formLegend": "#c7d0d9",
-                  "formSwitchBg": "#343b40",
+                  "formSwitchBg": "#2c3235",
                   "formSwitchBgActive": "#5794f2",
                   "formSwitchBgActiveHover": "#3274d9",
-                  "formSwitchBgDisabled": "#343b40",
+                  "formSwitchBgDisabled": "#2c3235",
                   "formSwitchBgHover": "#464c54",
                   "formSwitchDot": "#202226",
                   "formValidationMessageBg": "#e02f44",
                   "formValidationMessageText": "#ffffff",
-                  "headingColor": "#d8d9da",
                   "link": "#d8d9da",
                   "linkDisabled": "#8e8e8e",
-                  "linkExternal": "#33b5e5",
+                  "linkExternal": "#33a2e5",
                   "linkHover": "#ffffff",
                   "pageHeaderBg": "#202226",
                   "pageHeaderBorder": "#202226",
                   "panelBg": "#141619",
                   "panelBorder": "#202226",
                   "text": "#c7d0d9",
-                  "textBlue": "#339ae5",
-                  "textEmphasis": "#ececec",
-                  "textFaint": "#222426",
-                  "textStrong": "#ffffff",
-                  "textWeak": "#8e8e8e",
+                  "textBlue": "#33a2e5",
+                  "textFaint": "#464c54",
+                  "textHeading": "#d8d9da",
+                  "textSemiWeak": "#9fa7b3",
+                  "textStrong": "#f7f8fa",
+                  "textWeak": "#7b8087",
                 },
                 "height": Object {
                   "lg": "48px",
@@ -131,14 +131,10 @@ exports[`TimePicker renders buttons correctly 1`] = `
                 "name": "Grafana Dark",
                 "palette": Object {
                   "black": "#000000",
-                  "blue": "#33b5e5",
                   "blue77": "#1f60c4",
-                  "blue85": "#339ae5",
+                  "blue80": "#3274d9",
+                  "blue85": "#33a2e5",
                   "blue95": "#5794f2",
-                  "blueBase": "#3274d9",
-                  "blueFaint": "#041126",
-                  "blueLight": "#5794f2",
-                  "blueShade": "#1f60c4",
                   "brandDanger": "#e02f44",
                   "brandPrimary": "#eb7b18",
                   "brandSuccess": "#299c46",
@@ -159,7 +155,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "gray10": "#141619",
                   "gray15": "#202226",
                   "gray2": "#8e8e8e",
-                  "gray25": "#343b40",
+                  "gray25": "#2c3235",
                   "gray3": "#b3b3b3",
                   "gray33": "#464c54",
                   "gray4": "#d8d9da",
@@ -169,7 +165,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "gray7": "#fbfbfb",
                   "gray70": "#9fa7b3",
                   "gray85": "#c7d0d9",
+                  "gray90": "#dce1e6",
                   "gray95": "#e9edf2",
+                  "gray97": "#f1f5f9",
                   "gray98": "#f7f8fa",
                   "greenBase": "#299c46",
                   "greenShade": "#23843b",
@@ -192,6 +190,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
                 },
                 "panelHeaderHeight": 28,
                 "panelPadding": 8,
+                "shadows": Object {
+                  "listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
+                },
                 "spacing": Object {
                   "d": "14px",
                   "formButtonHeight": 32,
@@ -202,7 +203,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formInputPaddingHorizontal": "8px",
                   "formLabelMargin": "0 0 4px 0",
                   "formLabelPadding": "0 0 0 2px",
-                  "formLegendMargin": "0 0 16px 0",
                   "formMargin": "32px",
                   "formSpacingBase": 8,
                   "formValidationMessageMargin": "4px 0 0 0",
@@ -384,10 +384,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                 "colors": Object {
                   "bg1": "#141619",
                   "bg2": "#202226",
-                  "bg3": "#343b40",
+                  "bg3": "#2c3235",
+                  "bgBlue1": "#3274d9",
+                  "bgBlue2": "#1f60c4",
                   "bodyBg": "#141619",
                   "border1": "#202226",
-                  "border2": "#343b40",
+                  "border2": "#2c3235",
+                  "border3": "#464c54",
                   "dashboardBg": "#0b0c0e",
                   "dropdownBg": "#0b0c0e",
                   "dropdownOptionHoverBg": "#202226",
@@ -395,45 +398,42 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formCheckboxBg": "#222426",
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
-                  "formCheckboxCheckmark": "#343b40",
+                  "formCheckboxCheckmark": "#2c3235",
                   "formDescription": "#7b8087",
                   "formFocusOutline": "#1f60c4",
                   "formInputBg": "#0b0c0e",
                   "formInputBgDisabled": "#141619",
-                  "formInputBorder": "#343b40",
+                  "formInputBorder": "#2c3235",
                   "formInputBorderActive": "#5794f2",
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#555555",
+                  "formInputPlaceholderText": "#464c54",
                   "formInputText": "#c7d0d9",
-                  "formInputTextStrong": "#c7d0d9",
-                  "formInputTextWhite": "#ffffff",
                   "formLabel": "#9fa7b3",
-                  "formLegend": "#c7d0d9",
-                  "formSwitchBg": "#343b40",
+                  "formSwitchBg": "#2c3235",
                   "formSwitchBgActive": "#5794f2",
                   "formSwitchBgActiveHover": "#3274d9",
-                  "formSwitchBgDisabled": "#343b40",
+                  "formSwitchBgDisabled": "#2c3235",
                   "formSwitchBgHover": "#464c54",
                   "formSwitchDot": "#202226",
                   "formValidationMessageBg": "#e02f44",
                   "formValidationMessageText": "#ffffff",
-                  "headingColor": "#d8d9da",
                   "link": "#d8d9da",
                   "linkDisabled": "#8e8e8e",
-                  "linkExternal": "#33b5e5",
+                  "linkExternal": "#33a2e5",
                   "linkHover": "#ffffff",
                   "pageHeaderBg": "#202226",
                   "pageHeaderBorder": "#202226",
                   "panelBg": "#141619",
                   "panelBorder": "#202226",
                   "text": "#c7d0d9",
-                  "textBlue": "#339ae5",
-                  "textEmphasis": "#ececec",
-                  "textFaint": "#222426",
-                  "textStrong": "#ffffff",
-                  "textWeak": "#8e8e8e",
+                  "textBlue": "#33a2e5",
+                  "textFaint": "#464c54",
+                  "textHeading": "#d8d9da",
+                  "textSemiWeak": "#9fa7b3",
+                  "textStrong": "#f7f8fa",
+                  "textWeak": "#7b8087",
                 },
                 "height": Object {
                   "lg": "48px",
@@ -445,14 +445,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                 "name": "Grafana Dark",
                 "palette": Object {
                   "black": "#000000",
-                  "blue": "#33b5e5",
                   "blue77": "#1f60c4",
-                  "blue85": "#339ae5",
+                  "blue80": "#3274d9",
+                  "blue85": "#33a2e5",
                   "blue95": "#5794f2",
-                  "blueBase": "#3274d9",
-                  "blueFaint": "#041126",
-                  "blueLight": "#5794f2",
-                  "blueShade": "#1f60c4",
                   "brandDanger": "#e02f44",
                   "brandPrimary": "#eb7b18",
                   "brandSuccess": "#299c46",
@@ -473,7 +469,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "gray10": "#141619",
                   "gray15": "#202226",
                   "gray2": "#8e8e8e",
-                  "gray25": "#343b40",
+                  "gray25": "#2c3235",
                   "gray3": "#b3b3b3",
                   "gray33": "#464c54",
                   "gray4": "#d8d9da",
@@ -483,7 +479,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "gray7": "#fbfbfb",
                   "gray70": "#9fa7b3",
                   "gray85": "#c7d0d9",
+                  "gray90": "#dce1e6",
                   "gray95": "#e9edf2",
+                  "gray97": "#f1f5f9",
                   "gray98": "#f7f8fa",
                   "greenBase": "#299c46",
                   "greenShade": "#23843b",
@@ -506,6 +504,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                 },
                 "panelHeaderHeight": 28,
                 "panelPadding": 8,
+                "shadows": Object {
+                  "listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
+                },
                 "spacing": Object {
                   "d": "14px",
                   "formButtonHeight": 32,
@@ -516,7 +517,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formInputPaddingHorizontal": "8px",
                   "formLabelMargin": "0 0 4px 0",
                   "formLabelPadding": "0 0 0 2px",
-                  "formLegendMargin": "0 0 16px 0",
                   "formMargin": "32px",
                   "formSpacingBase": 8,
                   "formValidationMessageMargin": "4px 0 0 0",
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
index 201de526839..e08fa6b8937 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       className={css`
         padding: ${theme.spacing.xxs} ${theme.spacing.sm};
         color: white;
-        background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
+        background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
         border-radius: 16px;
         display: inline-block;
         cursor: pointer;
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
index f6933fc805a..a3056288e1e 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       className={css`
         padding: ${theme.spacing.xxs} ${theme.spacing.sm};
         color: white;
-        background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
+        background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
         border-radius: 16px;
         display: inline-block;
         cursor: pointer;
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index e1ede7f1c0a..4245557fd2e 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -12,10 +12,9 @@ $theme-name: dark;
 
 // New Colors
 // -------------------------
-$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.palette.blueShade};
+$blue-light: ${theme.palette.blue95};
+$blue-base: ${theme.palette.blue80};
+$blue-shade: ${theme.palette.blue77};
 $red-base: ${theme.palette.redBase};
 $red-shade: ${theme.palette.redShade};
 $green-base: ${theme.palette.greenBase};
@@ -59,7 +58,7 @@ $white: ${theme.palette.white};
 
 // Accent colors
 // -------------------------
-$blue: ${theme.palette.blue};
+$blue: ${theme.palette.blue85};
 $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
@@ -92,7 +91,7 @@ $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
-$text-color-emphasis: ${theme.colors.textEmphasis};
+$text-color-emphasis: ${theme.colors.textStrong};
 $text-blue: ${theme.colors.textBlue};
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -111,7 +110,7 @@ $external-link-color: ${theme.colors.linkExternal};
 
 // Typography
 // -------------------------
-$headings-color: ${theme.colors.headingColor};
+$headings-color: ${theme.colors.textHeading};
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -353,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: ${theme.palette.blueLight};
+$switch-slider-on-bg: ${theme.palette.blue77};
 $switch-slider-shadow: 0 0 3px black;
 
 //Checkbox
@@ -379,8 +378,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
 $panel-options-group-header-bg: ${theme.colors.bg2};
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
+$panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
 
 // logs
 $logs-color-unkown: $gray-2;
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 6bca9da160a..eeb8a0932d4 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -12,10 +12,9 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.palette.blueShade};
+$blue-light: ${theme.palette.blue95};
+$blue-base: ${theme.palette.blue80};
+$blue-shade: ${theme.palette.blue77};
 $red-base: ${theme.palette.redBase};
 $red-shade: ${theme.palette.redShade};
 $green-base: ${theme.palette.greenBase};
@@ -53,7 +52,7 @@ $white: ${theme.palette.white};
 
 // Accent colors
 // -------------------------
-$blue: ${theme.palette.blue};
+$blue: ${theme.colors.textBlue};
 $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
@@ -86,7 +85,7 @@ $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
-$text-color-emphasis: ${theme.colors.textEmphasis};
+$text-color-emphasis: ${theme.colors.textStrong};
 $text-blue: ${theme.colors.textBlue};
 
 $text-shadow-faint: none;
@@ -104,7 +103,7 @@ $external-link-color: ${theme.colors.linkExternal};
 
 // Typography
 // -------------------------
-$headings-color: ${theme.colors.headingColor};
+$headings-color: ${theme.colors.textHeading};
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -346,7 +345,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
-$switch-slider-on-bg: ${theme.palette.blueShade};
+$switch-slider-on-bg: ${theme.palette.blue77};
 $switch-slider-shadow: 0 0 3px $dark-2;
 
 //Checkbox
@@ -372,8 +371,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+$panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
 
 // logs
 $logs-color-unkown: $gray-5;
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index ab5cdf2e591..b0467d3ce59 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -22,15 +22,10 @@ const basicColors = {
   gray5: '#ececec',
   gray6: '#f4f5f8', // not used in dark theme
   gray7: '#fbfbfb', // not used in dark theme
-  blueBase: '#3274d9',
-  blueShade: '#1f60c4',
-  blueLight: '#5794f2',
-  blueFaint: '#041126',
   redBase: '#e02f44',
   redShade: '#c4162a',
   greenBase: '#299c46',
   greenShade: '#23843b',
-  blue: '#33b5e5',
   red: '#d44a3a',
   yellow: '#ecbb13',
   purple: '#9933cc',
@@ -44,41 +39,51 @@ const backgrounds = {
   bg2: basicColors.gray15,
   bg3: basicColors.gray25,
   dashboardBg: basicColors.gray05,
+  bgBlue1: basicColors.blue80,
+  bgBlue2: basicColors.blue77,
 };
 
 const borders = {
   border1: basicColors.gray15,
   border2: basicColors.gray25,
+  border3: basicColors.gray33,
+};
+
+const textColors = {
+  textStrong: basicColors.gray98,
+  textHeading: basicColors.gray4,
+  text: basicColors.gray85,
+  textSemiWeak: basicColors.gray70,
+  textWeak: basicColors.gray60,
+  textFaint: basicColors.gray33,
+  textBlue: basicColors.blue85,
 };
 
 const form = {
   // Next-gen forms functional colors
-  formLabel: basicColors.gray70,
+  formLabel: textColors.textSemiWeak,
   formDescription: basicColors.gray60,
-  formLegend: basicColors.gray85,
   formInputBg: basicColors.gray05,
   formInputBgDisabled: basicColors.gray10,
-  formInputBorder: basicColors.gray25,
+  formInputBorder: borders.border2,
   formInputBorderHover: basicColors.gray33,
   formInputBorderActive: basicColors.blue95,
   formInputBorderInvalid: basicColors.red88,
-  formInputPlaceholderText: basicColors.gray1,
+  formInputPlaceholderText: textColors.textFaint,
   formInputText: basicColors.gray85,
   formInputDisabledText: basicColors.gray70,
-  formInputTextStrong: basicColors.gray85,
-  formInputTextWhite: basicColors.white,
-  formFocusOutline: basicColors.blueShade,
+  formFocusOutline: basicColors.blue77,
   formValidationMessageText: basicColors.white,
   formValidationMessageBg: basicColors.red88,
   formSwitchBg: basicColors.gray25,
-  formSwitchBgActive: basicColors.blueLight,
+  formSwitchBgActive: basicColors.blue95,
   formSwitchBgHover: basicColors.gray33,
-  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgActiveHover: basicColors.blue80,
   formSwitchBgDisabled: basicColors.gray25,
   formSwitchDot: basicColors.gray15,
   formCheckboxBg: basicColors.dark5,
-  formCheckboxBgChecked: basicColors.blueLight,
-  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxBgChecked: basicColors.blue95,
+  formCheckboxBgCheckedHover: basicColors.blue80,
   formCheckboxCheckmark: basicColors.gray25,
 };
 
@@ -106,6 +111,7 @@ const darkTheme: GrafanaTheme = {
     ...backgrounds,
     ...borders,
     ...form,
+    ...textColors,
 
     bodyBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
@@ -117,19 +123,13 @@ const darkTheme: GrafanaTheme = {
     dropdownShadow: basicColors.black,
     dropdownOptionHoverBg: backgrounds.bg2,
 
-    // text
-    headingColor: basicColors.gray4,
-    text: basicColors.gray85,
-    textStrong: basicColors.white,
-    textWeak: basicColors.gray2,
-    textEmphasis: basicColors.gray5,
-    textFaint: basicColors.dark5,
-    textBlue: basicColors.blue85,
-
     link: basicColors.gray4,
     linkDisabled: basicColors.gray2,
     linkHover: basicColors.white,
-    linkExternal: basicColors.blue,
+    linkExternal: basicColors.blue85,
+  },
+  shadows: {
+    listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)',
   },
 };
 
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 467cde1ceef..1e60b00adde 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -3,20 +3,23 @@ import { GrafanaThemeCommons } from '@grafana/data';
 export const commonColorsPalette = {
   // New greys palette used by next-gen form elements
   gray98: '#f7f8fa',
+  gray97: '#f1f5f9',
   gray95: '#e9edf2',
+  gray90: '#dce1e6',
   gray85: '#c7d0d9',
   gray70: '#9fa7b3',
   gray60: '#7b8087',
   gray33: '#464c54',
-  gray25: '#343b40',
+  gray25: '#2c3235',
   gray15: '#202226',
   gray10: '#141619',
   gray05: '#0b0c0e',
 
   // New blues palette used by next-gen form elements
-  blue95: '#5794f2',
-  blue85: '#339ae5',
-  blue77: '#1f60c4',
+  blue95: '#5794f2', // blue95
+  blue85: '#33a2e5', // blueText
+  blue80: '#3274d9', // blue80
+  blue77: '#1f60c4', // blue77
 
   // New reds palette used by next-gen form elements
   red88: '#e02f44',
@@ -86,7 +89,6 @@ const theme: GrafanaThemeCommons = {
     formSpacingBase: SPACING_BASE,
     formMargin: `${SPACING_BASE * 4}px`,
     formFieldsetMargin: `${SPACING_BASE * 2}px`,
-    formLegendMargin: `0 0 ${SPACING_BASE * 2}px 0`,
     formInputHeight: `${SPACING_BASE * 4}px`,
     formButtonHeight: SPACING_BASE * 4,
     formInputPaddingHorizontal: `${SPACING_BASE}px`,
diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts
index b6f42e3b1f3..b56f9be86fb 100644
--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -22,15 +22,10 @@ const basicColors = {
   gray5: '#dde4ed',
   gray6: '#e9edf2', // same as gray95
   gray7: '#f7f8fa', // same as gray98
-  blueBase: '#3274d9',
-  blueShade: '#1f60c4',
-  blueLight: '#5794f2',
-  blueFaint: '#f5f9ff',
   redBase: '#e02f44',
   redShade: '#c4162a',
   greenBase: '#3eb15b',
   greenShade: '#369b4f',
-  blue: '#0083b3',
   red: '#d44939',
   yellow: '#ff851b',
   purple: '#9954bb',
@@ -40,19 +35,32 @@ const basicColors = {
 
 const backgrounds = {
   bg1: basicColors.white,
-  bg2: basicColors.gray98,
+  bg2: basicColors.gray97,
   bg3: basicColors.gray95,
   dashboardBg: basicColors.gray98,
+  bgBlue1: basicColors.blue80,
+  bgBlue2: basicColors.blue77,
 };
 
 const borders = {
-  border1: basicColors.gray95,
+  border1: basicColors.gray90,
   border2: basicColors.gray85,
+  border3: basicColors.gray70,
+};
+
+const textColors = {
+  // Text colors
+  textStrong: basicColors.gray15,
+  text: basicColors.gray33,
+  textSemiWeak: basicColors.gray33,
+  textWeak: basicColors.gray60,
+  textFaint: basicColors.gray70,
+  textBlue: basicColors.blue85,
 };
 
 const form = {
-  formLabel: basicColors.gray33,
-  formDescription: basicColors.gray33,
+  formLabel: textColors.text,
+  formDescription: textColors.textWeak,
   formLegend: basicColors.gray25,
   formInputBg: basicColors.white,
   formInputBgDisabled: basicColors.gray95,
@@ -60,23 +68,21 @@ const form = {
   formInputBorderHover: basicColors.gray70,
   formInputBorderActive: basicColors.blue77,
   formInputBorderInvalid: basicColors.red88,
-  formInputText: basicColors.gray25,
-  formInputPlaceholderText: basicColors.gray70,
-  formInputDisabledText: basicColors.gray33,
-  formInputTextStrong: basicColors.gray25,
-  formInputTextWhite: basicColors.white,
-  formFocusOutline: basicColors.blueLight,
+  formInputText: textColors.text,
+  formInputPlaceholderText: textColors.textFaint,
+  formInputDisabledText: textColors.textWeak,
+  formFocusOutline: basicColors.blue95,
   formValidationMessageText: basicColors.white,
   formValidationMessageBg: basicColors.red88,
   formSwitchBg: basicColors.gray85,
-  formSwitchBgActive: basicColors.blueShade,
+  formSwitchBgActive: basicColors.blue77,
   formSwitchBgHover: basicColors.gray3,
-  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgActiveHover: basicColors.blue80,
   formSwitchBgDisabled: basicColors.gray4,
   formSwitchDot: basicColors.white,
   formCheckboxBg: basicColors.white,
-  formCheckboxBgChecked: basicColors.blueShade,
-  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxBgChecked: basicColors.blue77,
+  formCheckboxBgCheckedHover: basicColors.blue80,
   formCheckboxCheckmark: basicColors.white,
 };
 
@@ -103,6 +109,8 @@ const lightTheme: GrafanaTheme = {
   colors: {
     ...backgrounds,
     ...borders,
+    ...textColors,
+    ...form,
 
     bodyBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
@@ -114,22 +122,15 @@ const lightTheme: GrafanaTheme = {
     dropdownShadow: basicColors.gray3,
     dropdownOptionHoverBg: backgrounds.bg2,
 
-    // Text colors
-    text: basicColors.gray1,
-    textStrong: basicColors.dark2,
-    textWeak: basicColors.gray2,
-    textEmphasis: basicColors.dark5,
-    textFaint: basicColors.dark4,
-    textBlue: basicColors.blue85,
-
     // Link colors
-    link: basicColors.gray1,
-    linkDisabled: basicColors.gray3,
-    linkHover: basicColors.dark1,
-    linkExternal: basicColors.blueLight,
-    headingColor: basicColors.gray1,
-
-    ...form,
+    link: textColors.text,
+    linkDisabled: textColors.textWeak,
+    linkHover: textColors.textStrong,
+    linkExternal: basicColors.blue85,
+    textHeading: basicColors.gray25,
+  },
+  shadows: {
+    listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)',
   },
 };
 
diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts
index 540fd79e9b9..469c307320f 100644
--- a/packages/grafana-ui/src/themes/mixins.ts
+++ b/packages/grafana-ui/src/themes/mixins.ts
@@ -2,54 +2,37 @@ import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from './selectThemeVariant';
 import { css } from 'emotion';
 import { stylesFactory } from './stylesFactory';
+import tinycolor from 'tinycolor2';
 
 export function cardChrome(theme: GrafanaTheme): string {
-  if (theme.isDark) {
-    return `
-       background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
-       &:hover {
-         background: linear-gradient(135deg, ${theme.palette.dark9}, ${theme.palette.dark6});
-       }
-       box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
-       border-radius: ${theme.border.radius.md};
-    `;
-  }
-
   return `
-       background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
+       background: ${theme.colors.bg2};
        &:hover {
-         background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6});
+         background: ${hoverColor(theme.colors.bg2, theme)};
        }
-       box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
+       box-shadow: ${theme.shadows.listItem};
        border-radius: ${theme.border.radius.md};
     `;
 }
 
-export function listItem(theme: GrafanaTheme): string {
-  if (theme.isDark) {
-    return `
-       background: ${theme.palette.dark7};
-       &:hover {
-         background: ${theme.palette.dark9};
-       }
-       box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
-       border-radius: ${theme.border.radius.md};
-    `;
-  }
+export function hoverColor(color: string, theme: GrafanaTheme) {
+  return theme.isDark ? tinycolor(color).brighten(2) : tinycolor(color).darken(2);
+}
 
+export function listItem(theme: GrafanaTheme): string {
   return `
-       background: ${theme.palette.gray7};
-       &:hover {
-         background: ${theme.palette.gray6};
-       }
-       box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
-       border-radius: ${theme.border.radius.md};
-    `;
+  background: ${theme.colors.bg2};
+  &:hover {
+    background: ${hoverColor(theme.colors.bg2, theme)};
+  }
+  box-shadow: ${theme.shadows.listItem};
+  border-radius: ${theme.border.radius.md};
+`;
 }
 
 export function listItemSelected(theme: GrafanaTheme): string {
   return `
-       background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
+       background: ${hoverColor(theme.colors.bg2, theme)};
        color: ${theme.colors.textStrong};
     `;
 }
diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
index b59cde93b1c..fe783fb0c40 100644
--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -171,6 +171,7 @@ export class FolderPicker extends PureComponent<Props, State> {
                 defaultOptions
                 defaultValue={folder}
                 value={folder}
+                className={'width-20'}
                 allowCustomValue={enableCreateNew}
                 loadOptions={this.debouncedSearch}
                 onChange={this.onFolderChange}
diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
index 6f6b40b3eb5..b2b3a899396 100644
--- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`FolderPicker should render 1`] = `
       </label>
       <AsyncSelect
         allowCustomValue={false}
+        className="width-20"
         defaultOptions={true}
         defaultValue={Object {}}
         loadOptions={[Function]}
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index 3931d7d2442..b3df505f388 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -55,11 +55,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
   const highlightColor = selectThemeVariant(
     {
-      light: theme.palette.blueLight,
-      dark: theme.palette.blueShade,
+      light: theme.palette.blue95,
+      dark: theme.palette.blue77,
     },
     theme.type
   );
+
   return {
     wrapper: css`
       border-top: 1px dashed ${borderColor};
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
index bf1f78902a3..7b7da95dc81 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
@@ -111,7 +111,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ data, override,
         <div className={styles.propertyPickerWrapper}>
           <ValuePicker
             label="Set config property"
-            icon="plus-circle"
+            icon="plus"
             options={configPropertiesOptions}
             variant={'link'}
             onChange={o => {
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 4d95b1877f0..4af9c631087 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -347,7 +347,7 @@ enum Pane {
  */
 const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
   const { uiState } = props;
-  const handleColor = theme.palette.blueLight;
+  const handleColor = theme.palette.blue95;
   const paneSpaceing = theme.spacing.md;
 
   const resizer = css`
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
index 77ebac3742a..f21d53ca53a 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   name: css`
     font-weight: ${theme.typography.weight.semibold};
-    color: ${theme.palette.blue};
+    color: ${theme.colors.textBlue};
   `,
   iconRow: css`
     display: flex;
@@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     text-align: center;
     font-family: ${theme.typography.fontFamily.monospace};
     font-size: ${theme.typography.size.sm};
-    color: ${theme.palette.blueBase};
+    color: ${theme.palette.blue80};
     border-bottom: 1px dashed ${theme.palette.gray15};
     flex-grow: 0;
     flex-shrink: 1;
diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
index 11a68a55b0a..11679db91f9 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
@@ -28,12 +28,10 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`;
-
   return {
     item: css`
-      background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15};
-      border: ${itemBorder};
+      background: ${theme.colors.bg2};
+      border: 1px solid ${theme.colors.border2};
       border-radius: 3px;
       height: 100px;
       width: 100%;
@@ -49,8 +47,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       padding-bottom: 6px;
 
       &:hover {
-        box-shadow: 0 0 4px ${theme.palette.blueLight};
-        border: 1px solid ${theme.palette.blueLight};
+        box-shadow: 0 0 4px ${theme.palette.blue95};
+        border: 1px solid ${theme.palette.blue95};
       }
     `,
     current: css`
@@ -63,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       cursor: default;
       &:hover {
         box-shadow: none;
-        border: ${itemBorder};
+        border: 1px solid ${theme.colors.border2};
       }
     `,
     name: css`
diff --git a/public/app/features/explore/AdHocFilterField.tsx b/public/app/features/explore/AdHocFilterField.tsx
index 08be7671b28..b36330da5a5 100644
--- a/public/app/features/explore/AdHocFilterField.tsx
+++ b/public/app/features/explore/AdHocFilterField.tsx
@@ -7,7 +7,7 @@ export const DEFAULT_REMOVE_FILTER_VALUE = '-- remove filter --';
 
 const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => (
   <button className="gf-form-label gf-form-label--btn query-part" onClick={onAddFilter}>
-    <Icon name="plus-circle" />
+    <Icon name="plus" />
   </button>
 );
 
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 664a5eafe3d..2f0637ee87e 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -308,15 +308,19 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         {datasourceMissing ? this.renderEmptyState() : null}
         {datasourceInstance && (
           <div className="explore-container">
-            <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
-            <SecondaryActions
-              addQueryRowButtonDisabled={isLive}
-              // We cannot show multiple traces at the same time right now so we do not show add query button.
-              addQueryRowButtonHidden={mode === ExploreMode.Tracing}
-              richHistoryButtonActive={showRichHistory}
-              onClickAddQueryRowButton={this.onClickAddQueryRowButton}
-              onClickRichHistoryButton={this.toggleShowRichHistory}
-            />
+            <div className="panel-container">
+              <div className="panel-content">
+                <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
+                <SecondaryActions
+                  addQueryRowButtonDisabled={isLive}
+                  // We cannot show multiple traces at the same time right now so we do not show add query button.
+                  addQueryRowButtonHidden={mode === ExploreMode.Tracing}
+                  richHistoryButtonActive={showRichHistory}
+                  onClickAddQueryRowButton={this.onClickAddQueryRowButton}
+                  onClickRichHistoryButton={this.toggleShowRichHistory}
+                />
+              </div>
+            </div>
             <ErrorContainer queryError={queryError} />
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx
index 9ee405ad776..745d81e9a82 100644
--- a/public/app/features/explore/LiveLogs.tsx
+++ b/public/app/features/explore/LiveLogs.tsx
@@ -23,13 +23,13 @@ const getStyles = (theme: GrafanaTheme) => ({
   logsRowFade: css`
     label: logs-row-fresh;
     color: ${theme.colors.text};
-    background-color: ${tinycolor(theme.palette.blueLight)
+    background-color: ${tinycolor(theme.palette.blue95)
       .setAlpha(0.25)
       .toString()};
     animation: fade 1s ease-out 1s 1 normal forwards;
     @keyframes fade {
       from {
-        background-color: ${tinycolor(theme.palette.blueLight)
+        background-color: ${tinycolor(theme.palette.blue95)
           .setAlpha(0.25)
           .toString()};
       }
diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx
index 0ebf41f3997..74e72ec11c4 100644
--- a/public/app/features/explore/SecondaryActions.tsx
+++ b/public/app/features/explore/SecondaryActions.tsx
@@ -28,7 +28,7 @@ export function SecondaryActions(props: Props) {
           onClick={props.onClickAddQueryRowButton}
           disabled={props.addQueryRowButtonDisabled}
         >
-          <Icon className="icon-margin-right" name="plus-circle" size="sm" />
+          <Icon className="icon-margin-right" name="plus" size="sm" />
           <span className="btn-title">{'\xA0' + 'Add query'}</span>
         </button>
       )}
diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
index 795292f9bb1..17ef39ea361 100644
--- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`MetaInfoText should render component 1`] = `
 <div
-  className="css-mi7ebz"
+  className="css-1u65mbf"
 >
   <Memo(MetaInfoItem)
     key="0-label"
diff --git a/public/app/features/panel/panellinks/module.html b/public/app/features/panel/panellinks/module.html
index 2b2349051df..0d4a2557e8d 100644
--- a/public/app/features/panel/panellinks/module.html
+++ b/public/app/features/panel/panellinks/module.html
@@ -66,5 +66,5 @@
 </div>
 
 <div class="editor-row">
-  <button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus-circle'"></icon> Add link</button>
+  <button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus'"></icon> Add link</button>
 </div>
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index fcfe0979250..e64fec6206b 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
             <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
-              <Icon name="plus-circle" /> Add group
+              <Icon name="plus" /> Add group
             </button>
           )}
         </div>
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index 3305b077f7f..6b758e51c08 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`Render should render groups table 1`] = `
       onClick={[Function]}
     >
       <Icon
-        name="plus-circle"
+        name="plus"
       />
        Add group
     </button>
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
index da12e4f6627..80236252ba6 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
@@ -71,7 +71,7 @@ function filterAddButton(key: string | null): ReactElement | undefined {
 
   return (
     <a className="gf-form-label query-part">
-      <Icon name="plus-circle" />
+      <Icon name="plus" />
     </a>
   );
 }
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
index 51e822b4431..a5e58209a00 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
@@ -26,9 +26,7 @@ describe('Dimensions', () => {
         />
       );
 
-      expect(wrapper.html()).toEqual(
-        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
-      );
+      expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
     });
   });
 
@@ -42,9 +40,7 @@ describe('Dimensions', () => {
           loadValues={() => Promise.resolve<SelectableStrings>([])}
         />
       );
-      expect(wrapper.html()).toEqual(
-        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
-      );
+      expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
     });
   });
 });
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
index e6f02bb854b..f2f05891567 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
           allowCustomValue
           Component={
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
           }
           loadOptions={() => loadKeys().then(excludeUsedKeys)}
diff --git a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
index 8f49dcb75a4..d3267380e8c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
     <Segment
       Component={
         <a className="gf-form-label query-part">
-          <Icon name="plus-circle" />
+          <Icon name="plus" />
         </a>
       }
       allowCustomValue
diff --git a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
index 9791a45a95d..066a5c22e50 100644
--- a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
+++ b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
@@ -41,7 +41,7 @@ Array [
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
+            d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"
           />
         </svg>
       </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
index a9fbcee4a2b..908c872cfd7 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
@@ -214,10 +214,10 @@
       </div>
       <div class="gf-form">
         <label class="gf-form-label" ng-if="$first">
-          <a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus-circle'"></icon></a>
+          <a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus'"></icon></a>
         </label>
         <label class="gf-form-label" ng-if="!$first">
-          <a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus-circle'"></icon></a>
+          <a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus'"></icon></a>
         </label>
       </div>
     </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
index ef803f7afb7..4863ed163d4 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
@@ -38,10 +38,10 @@
 
 	<div class="gf-form">
 		<label class="gf-form-label" ng-if="isFirst">
-			<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus-circle'"></icon></a>
+			<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus'"></icon></a>
 		</label>
 		<label class="gf-form-label" ng-if="!isSingle">
-			<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus-circle'"></icon></a>
+			<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus'"></icon></a>
 		</label>
 	</div>
 </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
index fdee5f00a97..42d008cb102 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
@@ -17,10 +17,10 @@
       css-class="width-12"
     ></metric-segment-model>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
     </label>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="add()"><icon name="'plus-circle'"></icon></a>
+      <a class="pointer" ng-click="add()"><icon name="'plus'"></icon></a>
     </label>
   </div>
   <div class="gf-form offset-width-17" ng-if="$index !== 0">
@@ -40,7 +40,7 @@
       css-class="width-12"
     ></metric-segment-model>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
     </label>
   </div>
 </div>
diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.ts b/public/app/plugins/datasource/graphite/add_graphite_func.ts
index 51dd5c26a2b..699f7badb8e 100644
--- a/public/app/plugins/datasource/graphite/add_graphite_func.ts
+++ b/public/app/plugins/datasource/graphite/add_graphite_func.ts
@@ -11,9 +11,9 @@ export function graphiteAddFunc($compile: any) {
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
 
   const buttonTemplate =
-    '<a class="gf-form-label query-part dropdown-toggle"' +
+    '<a class="gf-form-label dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
-    '<icon name="fa fa-plus"></i></a>';
+    '<icon name="\'plus\'" size="\'sm\'"></name></a>';
 
   return {
     link: function($scope: any, elem: JQuery) {
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
index fcb080a70a4..1505d13a9af 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
@@ -66,11 +66,11 @@ export const DerivedFields = (props: Props) => {
           })}
         <div>
           <Button
-            variant="primary"
+            variant="secondary"
             className={css`
               margin-right: 10px;
             `}
-            icon="plus-circle"
+            icon="plus"
             onClick={event => {
               event.preventDefault();
               const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
index 18725bac372..3d2a35c391f 100644
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -112,7 +112,7 @@
 			</div>
 			<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
 				<a ng-click="ctrl.addFilter()">
-					<icon name="'plus-circle'"></icon>
+					<icon name="'plus'"></icon>
 				</a>
 			</label>
  		</div>
@@ -190,7 +190,7 @@
 
 		<div class="gf-form" ng-hide="ctrl.addTagMode">
 			<label class="gf-form-label query-keyword">
-				<a ng-click="ctrl.addTag()"><icon name="'plus-circle'"></icon></a>
+				<a ng-click="ctrl.addTag()"><icon name="'plus'"></icon></a>
 			</label>
 		</div>
 
diff --git a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
index d4076b3c84d..038d48cb4a0 100644
--- a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
@@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent<Props> = ({ groupBys = [], values = [],
         <Segment
           Component={
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
           }
           allowCustomValue
diff --git a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
index 104e075298a..5db1f88a1ce 100644
--- a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
@@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
           allowCustomValue
           Component={
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
           }
           options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
diff --git a/public/app/plugins/datasource/testdata/partials/query.editor.html b/public/app/plugins/datasource/testdata/partials/query.editor.html
index e6f2ceba188..545eaa7c3fb 100644
--- a/public/app/plugins/datasource/testdata/partials/query.editor.html
+++ b/public/app/plugins/datasource/testdata/partials/query.editor.html
@@ -11,11 +11,11 @@
       <input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
 		</div>
 		<div class="gf-form">
-			<label class="gf-form-label query-keyword">Alias</label>
+			<label class="gf-form-label query-keyword width-7">Alias</label>
 			<input type="text" class="gf-form-input width-14" placeholder="optional" ng-model="ctrl.target.alias" ng-change="ctrl.refresh()" ng-model-onblur>
 		</div>
 		<div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
-			<label class="gf-form-label query-keyword">
+			<label class="gf-form-label query-keyword width-7">
 				Labels
 				<info-popover mode="right-normal">
 					Set labels using a key=value syntax:<br/>
@@ -62,7 +62,7 @@
     <div class="gf-form">
 			<label class="gf-form-label query-keyword width-7">Start value</label>
 			<input type="number"
-				class="gf-form-input width-6"
+				class="gf-form-input width-14"
 				placeholder="auto"
 				ng-model="ctrl.target.startValue"
 				step="1"
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
index df843e893f2..becc19828c1 100644
--- a/public/app/plugins/panel/graph/tab_display.html
+++ b/public/app/plugins/panel/graph/tab_display.html
@@ -199,7 +199,7 @@
   </div>
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
-      <icon name="'plus-circle'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
+      <icon name="'plus'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
     </button>
   </div>
 </div>
diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html
index 2dd24506e6e..a19c0211f8e 100644
--- a/public/app/plugins/panel/graph/thresholds_form.html
+++ b/public/app/plugins/panel/graph/thresholds_form.html
@@ -99,7 +99,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
-        <icon name="'plus-circle'"></icon>&nbsp;Add Threshold
+        <icon name="'plus'"></icon>&nbsp;Add threshold
       </button>
     </div>
   </div>
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index cc894930fb3..ac8a3c6006e 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -61,10 +61,10 @@ export class ThresholdFormCtrl {
   onThresholdTypeChange(index: number) {
     // Because of the ng-model binding, threshold's color mode is already set here
     if (this.panel.thresholds[index].colorMode === 'custom') {
-      this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blueBase)
+      this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blue85)
         .setAlpha(0.2)
         .toRgbString();
-      this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blueShade)
+      this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77)
         .setAlpha(0.6)
         .toRgbString();
     }
diff --git a/public/app/plugins/panel/graph/time_regions_form.html b/public/app/plugins/panel/graph/time_regions_form.html
index 634d5c1dece..3ed3bafc465 100644
--- a/public/app/plugins/panel/graph/time_regions_form.html
+++ b/public/app/plugins/panel/graph/time_regions_form.html
@@ -83,7 +83,7 @@
 
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
-      <icon name="'plus-circle'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
+      <icon name="'plus'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
     </button>
   </div>
 </div>
diff --git a/public/app/plugins/panel/homelinks/module.tsx b/public/app/plugins/panel/homelinks/module.tsx
index 2826b27bbef..e6b437077f3 100755
--- a/public/app/plugins/panel/homelinks/module.tsx
+++ b/public/app/plugins/panel/homelinks/module.tsx
@@ -92,7 +92,8 @@ export const getStyles = stylesFactory(() => {
       margin-right: ${theme.spacing.sm};
     `,
     footer: css`
-      ${styleMixins.listItem(theme)}
+      background: ${theme.colors.bg2};
+      font-size: ${theme.typography.size.sm};
       position: absolute;
       bottom: 0;
       width: 100%;
diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx
index 4b75b9de6f4..0d9c1bb08b9 100755
--- a/public/app/plugins/panel/news/NewsPanel.tsx
+++ b/public/app/plugins/panel/news/NewsPanel.tsx
@@ -4,7 +4,7 @@ import { css } from 'emotion';
 
 // Utils & Services
 import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory, CustomScrollbar, styleMixins } from '@grafana/ui';
+import { stylesFactory, CustomScrollbar } from '@grafana/ui';
 import config from 'app/core/config';
 import { feedToDataFrame } from './utils';
 import { sanitize } from 'app/core/utils/text';
@@ -82,8 +82,8 @@ export class NewsPanel extends PureComponent<Props, State> {
                 <a href={item.link} target="_blank">
                   <div className={styles.title}>{item.title}</div>
                   <div className={styles.date}>{dateTime(item.date).format('MMM DD')} </div>
-                  <div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
                 </a>
+                <div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
               </div>
             );
           })}
@@ -98,11 +98,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     height: 100%;
   `,
   item: css`
-    ${styleMixins.listItem(theme)}
     padding: ${theme.spacing.sm};
     position: relative;
     margin-bottom: 4px;
     margin-right: ${theme.spacing.sm};
+    border-bottom: 2px solid ${theme.colors.border1};
   `,
   title: css`
     color: ${theme.colors.linkExternal};
@@ -113,6 +113,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   content: css`
     p {
       margin-bottom: 4px;
+      color: ${theme.colors.text};
     }
   `,
   date: css`
diff --git a/public/app/plugins/panel/singlestat/mappings.html b/public/app/plugins/panel/singlestat/mappings.html
index 5e5889eb9ec..ac99879f1a7 100644
--- a/public/app/plugins/panel/singlestat/mappings.html
+++ b/public/app/plugins/panel/singlestat/mappings.html
@@ -43,7 +43,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
-        <icon name="'plus-circle'"></icon>
+        <icon name="'plus'"></icon>
         Add a value mapping
       </button>
     </div>
@@ -66,7 +66,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
-        <icon name="'plus-circle'"></icon>
+        <icon name="'plus'"></icon>
         Add a range mapping
       </button>
     </div>
diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html
index 6be030d6dee..2fb9a636161 100644
--- a/public/app/plugins/panel/table/column_options.html
+++ b/public/app/plugins/panel/table/column_options.html
@@ -164,7 +164,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus-circle'"></icon></a>
+              <a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus'"></icon></a>
             </label>
           </div>
         </div>
@@ -302,6 +302,6 @@
 
 <div class="gf-form-button-row">
   <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
-    <icon name="'plus-circle'"></icon>&nbsp;Add column style
+    <icon name="'plus'"></icon>&nbsp;Add column style
   </button>
 </div>
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 3639cde7ff9..647dda5d980 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -15,7 +15,6 @@ $theme-name: dark;
 
 // New Colors
 // -------------------------
-$blue-faint: #041126;
 $blue-light: #5794f2;
 $blue-base: #3274d9;
 $blue-shade: #1f60c4;
@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
 $gray70: #9fa7b3;
 $gray60: #7b8087;
 $gray33: #464c54;
-$gray25: #343b40;
+$gray25: #2c3235;
 $gray15: #202226;
 $gray10: #141619;
 $gray05: #0b0c0e;
@@ -62,12 +61,12 @@ $white: #ffffff;
 
 // Accent colors
 // -------------------------
-$blue: #33b5e5;
+$blue: #33a2e5;
 $red: $red-base;
 $yellow: #ecbb13;
 $orange: #eb7b18;
 $purple: #9933cc;
-$variable: #339ae5;
+$variable: #33a2e5;
 
 $brand-primary: #eb7b18;
 $brand-success: #299c46;
@@ -92,11 +91,11 @@ $page-bg: #141619;
 $dashboard-bg: #0b0c0e;
 
 $text-color: #c7d0d9;
-$text-color-strong: #ffffff;
-$text-color-weak: #8e8e8e;
-$text-color-faint: #222426;
-$text-color-emphasis: #ececec;
-$text-blue: #339ae5;
+$text-color-strong: #f7f8fa;
+$text-color-weak: #7b8087;
+$text-color-faint: #464c54;
+$text-color-emphasis: #f7f8fa;
+$text-blue: #33a2e5;
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -110,7 +109,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 $link-color: #d8d9da;
 $link-color-disabled: #8e8e8e;
 $link-hover-color: #ffffff;
-$external-link-color: #33b5e5;
+$external-link-color: #33a2e5;
 
 // Typography
 // -------------------------
@@ -205,11 +204,11 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 
 $input-color: #c7d0d9;
-$input-border-color: #343b40;
+$input-border-color: #2c3235;
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: #555555;
+$input-color-placeholder: #464c54;
 $input-label-bg: #202226;
 $input-color-select-arrow: $white;
 
@@ -226,7 +225,7 @@ $typeahead-selected-color: $yellow;
 $dropdownBackground: $panel-bg;
 $dropdownBorder: #202226;
 $dropdownDividerTop: transparent;
-$dropdownDividerBottom: #343b40;
+$dropdownDividerBottom: #2c3235;
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@@ -356,7 +355,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: #5794f2;
+$switch-slider-on-bg: #1f60c4;
 $switch-slider-shadow: 0 0 3px black;
 
 //Checkbox
@@ -382,8 +381,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
 $panel-options-group-header-bg: #202226;
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
+$panel-grid-placeholder-bg: darken(#1f60c4, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
 
 // logs
 $logs-color-unkown: $gray-2;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index a49dca17881..53f499255f6 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -15,7 +15,6 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$blue-faint: #f5f9ff;
 $blue-light: #5794f2;
 $blue-base: #3274d9;
 $blue-shade: #1f60c4;
@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
 $gray70: #9fa7b3;
 $gray60: #7b8087;
 $gray33: #464c54;
-$gray25: #343b40;
+$gray25: #2c3235;
 $gray15: #202226;
 $gray10: #141619;
 $gray05: #0b0c0e;
@@ -56,12 +55,12 @@ $white: #ffffff;
 
 // Accent colors
 // -------------------------
-$blue: #0083b3;
+$blue: #33a2e5;
 $red: $red-base;
 $yellow: #ff851b;
 $orange: #ff7941;
 $purple: #9954bb;
-$variable: #339ae5;
+$variable: #33a2e5;
 
 $brand-primary: #ff7941;
 $brand-success: #3eb15b;
@@ -85,12 +84,12 @@ $body-bg: #ffffff;
 $page-bg: #ffffff;
 $dashboard-bg: #f7f8fa;
 
-$text-color: #52545c;
-$text-color-strong: #41444b;
-$text-color-weak: #767980;
-$text-color-faint: #35373f;
-$text-color-emphasis: #41444b;
-$text-blue: #339ae5;
+$text-color: #464c54;
+$text-color-strong: #202226;
+$text-color-weak: #7b8087;
+$text-color-faint: #9fa7b3;
+$text-color-emphasis: #202226;
+$text-blue: #33a2e5;
 
 $text-shadow-faint: none;
 
@@ -100,14 +99,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 
 // Links
 // -------------------------
-$link-color: #52545c;
-$link-color-disabled: #acb6bf;
-$link-hover-color: #1e2028;
-$external-link-color: #5794f2;
+$link-color: #464c54;
+$link-color-disabled: #7b8087;
+$link-hover-color: #202226;
+$external-link-color: #33a2e5;
 
 // Typography
 // -------------------------
-$headings-color: #52545c;
+$headings-color: #2c3235;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -116,14 +115,14 @@ $hr-border-color: $gray-4 !default;
 // Panel
 // -------------------------
 $panel-bg: #ffffff;
-$panel-border: 1px solid #e9edf2;
-$panel-header-hover-bg: #f7f8fa;
+$panel-border: 1px solid #dce1e6;
+$panel-header-hover-bg: #f1f5f9;
 $panel-corner: $gray-4;
 
 // Page header
-$page-header-bg: #f7f8fa;
+$page-header-bg: #f1f5f9;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #e9edf2;
+$page-header-border-color: #dce1e6;
 
 $divider-border-color: $gray-2;
 
@@ -197,13 +196,13 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 $input-bg: $white;
 $input-bg-disabled: $gray-5;
 
-$input-color: #343b40;
+$input-color: #464c54;
 $input-border-color: #c7d0d9;
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9fa7b3;
-$input-label-bg: #f7f8fa;
+$input-label-bg: #f1f5f9;
 $input-color-select-arrow: #7b8087;
 
 // search
@@ -242,9 +241,9 @@ $navbar-button-border: $gray-4;
 // Sidemenu
 // -------------------------
 $side-menu-bg: #202226;
-$side-menu-border: 1px solid #343b40;
+$side-menu-border: 1px solid #2c3235;
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
-$side-menu-item-hover-bg: #343b40;
+$side-menu-item-hover-bg: #2c3235;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-link-color: $gray-4;
 $side-menu-icon-color: #9fa7b3;
@@ -375,8 +374,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+$panel-grid-placeholder-bg: lighten(#5794f2, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
 
 // logs
 $logs-color-unkown: $gray-5;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 3e5ef757f3b..61dec6c23a1 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -112,6 +112,7 @@ $input-border: 1px solid $input-border-color;
   margin-right: $space-xs;
   border-radius: $input-border-radius;
   justify-content: space-between;
+  border: none;
 
   &--grow {
     flex-grow: 1;
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 6dfa5ced9d6..1ee15d90746 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -15,35 +15,6 @@
   margin: 20px 0;
 }
 
-.gf-form-query {
-  .gf-form,
-  .gf-form-filler {
-    margin-bottom: 2px;
-  }
-
-  .gf-form-switch,
-  .gf-form-switch label,
-  .gf-form-input,
-  .gf-form-select-wrapper,
-  .gf-form-filler,
-  .gf-form-label {
-    margin-right: 2px;
-  }
-
-  .gf-form-label {
-    border-right: 1px solid $input-border-color;
-    border-radius: $border-radius;
-  }
-
-  .gf-form-input {
-    border-radius: $border-radius;
-  }
-
-  .gf-form + .gf-form {
-    margin-left: 0;
-  }
-}
-
 .tight-form-func {
   background: $tight-form-func-bg;
 
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 32660716c97..c7e45dbca43 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -20,6 +20,10 @@ div.flot-text {
   }
 }
 
+.template-variable {
+  color: $variable;
+}
+
 .panel-solo {
   position: fixed;
   bottom: 0;