diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index 9e6edf0101afc..a758fee564973 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -90,79 +90,84 @@ export type ThemeColorsInput = DeepPartial<ThemeColorsBase<ThemeRichColor>>;
 class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   mode: ThemeColorsMode = 'dark';
 
-  // Used to get more white opacity colors
-  whiteBase = '209, 209, 209';
+  whiteBase = '255, 255, 255';
 
-  border = {
-    weak: `rgba(${this.whiteBase}, 0.12)`,
-    medium: `rgba(${this.whiteBase}, 0.20)`,
-    strong: `rgba(${this.whiteBase}, 0.30)`,
+  primary = {
+    main: '#F04006',
+    border: '#46404F',
+    text: '#F5F4F6',
   };
 
   text = {
-    primary: '#fff',
-    secondary: '#ffffff90',
-    disabled: '#9DA7B8',
-    link: '#F0E4B6',
-    maxContrast: '#F0E4B6',
+    primary: '#F5F4F6',
+    secondary: '#D5D3DD',
+    disabled: '#D5D3DA',
+    link: '#F04006',
+    maxContrast: palette.white,
   };
 
-  primary = {
-    main: '#ff570ae5',
-    text: '#e94900',
-    border: '#ffffff00',
+  border = {
+    weak: `rgba(${this.whiteBase}, 0.12)`,
+    medium: `rgba(${this.whiteBase}, 0.30)`,
+    strong: `rgba(${this.whiteBase}, 0.40)`,
   };
 
   secondary = {
-    main: '#F06929',
-    shade: '#F0692955',
+    main: '#F04006',
+    shade: '#9E240E',
+    contrastText: `rgba(${this.whiteBase},  1)`,
     text: this.text.primary,
-    contrastText: `rgb(${this.whiteBase})`,
-    border: `rgba(${this.whiteBase}, 0.08)`,
+    border: this.border.weak,
   };
 
-  info = this.primary;
+  info = {
+    main: '#51A2FF',
+    text: palette.blueDarkText,
+  };
 
   error = {
-    main: palette.redDarkMain,
+    main: '#FF6467',
     text: palette.redDarkText,
+    border: palette.redDarkText,
   };
 
   success = {
-    main: '#4BBF73',
-    text: '#318B50',
+    main: '#05DF72',
+    text: palette.greenDarkText,
   };
 
   warning = {
-    main: '#CF8E07',
-    text: this.text.primary,
+    main: '#FDC700',
+    text: palette.orangeDarkText,
   };
 
   background = {
-    canvas: '#161618', //palette.gray05,
-    primary: '#23242a', //palette.gray10,
-    secondary: '#5E5855', //palette.gray15,
+    primary: '#141116',
+    canvas: '#141116',
+    secondary: '#211E25',
   };
 
   action = {
-    hover: `rgba(${this.whiteBase}, 0.16)`,
-    selected: `rgba(${this.whiteBase}, 0.12)`,
+    hover: `rgba(${this.whiteBase}, 0.12)`,
+    selected: '#F04006',
     selectedBorder: palette.orangeDarkMain,
-    focus: `rgba(${this.whiteBase}, 0.16)`,
     hoverOpacity: 0.08,
-    disabledText: this.text.disabled,
+    focus: `rgba(${this.whiteBase}, 0.12)`,
     disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
+    disabledText: this.text.disabled,
     disabledOpacity: 0.38,
   };
 
   gradients = {
-    brandHorizontal: 'linear-gradient(270deg, #F55F3E 0%, #FF8833 100%)',
-    brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%)',
+    brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
+    brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
   };
 
   contrastThreshold = 3;
+
   hoverFactor = 0.03;
-  tonalOffset = 0.15;
+
+  tonalOffset = 0.2;
 }
 
 class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
@@ -171,63 +176,63 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   blackBase = '45, 51, 62';
 
   primary = {
-    main: '#FF570AE5',
-    border: '#D7D7C7',
-    text: '#101828',
+    main: '#F04006',
+    border: '#D5D3DD',
+    text: '#141116',
   };
 
   text = {
-    primary: '#101828',
-    secondary: '#363636',
-    disabled: '#9DA7B8',
-    link: '#FF4702',
+    primary: '#141116',
+    secondary: '#3A3441',
+    disabled: '#AFACB3',
+    link: '#F04006',
     maxContrast: palette.black,
   };
 
   border = {
     weak: `rgba(${this.blackBase}, 0.12)`,
     medium: `rgba(${this.blackBase}, 0.30)`,
-    strong: `rgba(${this.blackBase}, 0.40)`,
+    strong: `rgba(${this.blackBase}, .4)`,
   };
 
   secondary = {
-    main: '#FF4702',
-    shade: '#FC9A6990',
+    main: '#F04006',
+    shade: '#FFCFA8',
     contrastText: `rgba(${this.blackBase},  1)`,
     text: this.text.primary,
     border: this.border.weak,
   };
 
   info = {
-    main: '#64B6F7',
+    main: '#51A2FF',
     text: palette.blueLightText,
   };
 
   error = {
-    main: palette.redLightMain,
+    main: '#FF6467',
     text: palette.redLightText,
     border: palette.redLightText,
   };
 
   success = {
-    main: '#83D39E',
+    main: '#05DF72',
     text: palette.greenLightText,
   };
 
   warning = {
-    main: '#F3D086',
+    main: '#FDC700',
     text: palette.orangeLightText,
   };
 
   background = {
-    primary: '#F5F5F5',
+    primary: '#FFFFFF',
     canvas: '#FFFFFF',
-    secondary: '#FFFFFF',
+    secondary: '#F5F4F6',
   };
 
   action = {
     hover: `rgba(${this.blackBase}, 0.12)`,
-    selected: `#F27A40`,
+    selected: '#F04006',
     selectedBorder: palette.orangeLightMain,
     hoverOpacity: 0.08,
     focus: `rgba(${this.blackBase}, 0.12)`,
@@ -237,12 +242,14 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   gradients = {
-    brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%)',
-    brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%)',
+    brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
+    brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
   };
 
   contrastThreshold = 3;
+
   hoverFactor = 0.03;
+
   tonalOffset = 0.2;
 }
 
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 0c723eb06aa63..5cdbbc831b106 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -116,9 +116,7 @@ type OwnProps = {
 export type DashboardPageProps = OwnProps &
   GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams>;
 
-export type Props = Themeable2 &
-  GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams> &
-  ConnectedProps<typeof connector>;
+export type Props = Themeable2 & DashboardPageProps & ConnectedProps<typeof connector>;
 
 export interface State {
   editPanel: PanelModel | null;
@@ -383,9 +381,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
     const kioskMode = getKioskMode(this.props.queryParams);
 
     if (!dashboard) {
+      this.props?.isLoading?.(true);
       return FNDashboard ? <FnLoader /> : <DashboardLoading initPhase={this.props.initPhase} />;
     }
 
+    this.props?.isLoading?.(false);
     const inspectPanel = this.getInspectPanel();
     const showSubMenu = !editPanel && !kioskMode && !this.props.queryParams.editview;
 
diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index 6b519f95e8688..87033cafaaa38 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -70,15 +70,17 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
 function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
   const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
   const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-  const { colors: { mode } } = useTheme2();
+  const {
+    colors: { background, text },
+  } = useTheme2();
 
   const fnLabelStyle = useMemo(
     () => ({
       ...COMMON_PICKER_LABEL_STYLE,
-      color: mode === 'light' ? '#2D333E' : '#DBD9D7',
-      backgroundColor: mode === 'light' ? '#F6F6F1': '#23242a',
+      color: text.primary,
+      backgroundColor: background.canvas,
     }),
-    [mode]
+    [background, text]
   );
 
   if (variable.hide !== VariableHide.dontHide) {
diff --git a/public/app/fn-app/fn-app-provider.tsx b/public/app/fn-app/fn-app-provider.tsx
index 6ecd22616e160..8dcbcaa46a1c7 100644
--- a/public/app/fn-app/fn-app-provider.tsx
+++ b/public/app/fn-app/fn-app-provider.tsx
@@ -18,7 +18,7 @@ import app from '../fn_app';
 import { FNDashboardProps } from './types';
 
 type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'> & {
-  store: Store<StoreState>
+  store: Store<StoreState>;
 };
 
 export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props) => {
diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html
index bb5f9f5818ea9..09317f6eb509b 100644
--- a/public/microfrontends/fn_dashboard/index.html
+++ b/public/microfrontends/fn_dashboard/index.html
@@ -10,8 +10,8 @@
 <script nonce="">
   window.fnData = {
     themePaths: {
-      light: '../../../public/build/grafana.light.485c55b1c2950f6001af.css',
-      dark: '../../../public/build/grafana.dark.93afaa54e9b1395b4d54.css',
+      light: '../../../public/build/grafana.light.014e7717596b1ae793cd.css',
+      dark: '../../../public/build/grafana.dark.a2d738431fce3ebf70b9.css',
     }
   };
 </script>
@@ -19,7 +19,7 @@
      
     <script nonce="" src="../../../public/build/runtime~fn_dashboard.551314fa089c5f51c211.js" type="text/javascript"></script>
       
-    <script nonce="" src="../../../public/build/fn_dashboard.cba3a3077df2f940f692.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/fn_dashboard.0a5f240b55d61360ccc0.js" type="text/javascript"></script>
      
   </body>
 </html>
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 06844ce9b0c48..6d999e73822d0 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -14,18 +14,18 @@
 
 $theme-name: dark;
 
-$colors-action-hover: rgba(209, 209, 209, 0.16);
-$colors-action-selected: rgba(209, 209, 209, 0.12);
+$colors-action-hover: rgba(255, 255, 255, 0.12);
+$colors-action-selected: #F04006;
 
 // New Colors
 // -------------------------
-$blue-light: #e94900;
-$blue-base: #ff570ae5;
-$blue-shade: rgba(255, 112, 46, 0.898);
-$red-base: #D10E5C;
-$red-shade: rgb(215, 50, 116);
-$green-base: #4BBF73;
-$green-shade: rgb(102, 200, 136);
+$blue-light: #F5F4F6;
+$blue-base: #F04006;
+$blue-shade: rgb(243, 102, 55);
+$red-base: #FF6467;
+$red-shade: rgb(255, 131, 133);
+$green-base: #05DF72;
+$green-shade: rgb(55, 229, 142);
 $orange-dark: #ff780a;
 
 $gray98: #f7f8fa;
@@ -61,14 +61,14 @@ $gray-6: #f4f5f8;
 
 $white: #ffffff;
 
-$layer0: #161618;
-$layer1: #23242a;
-$layer2: #5E5855;
+$layer0: #141116;
+$layer1: #141116;
+$layer2: #211E25;
 
-$divider: rgba(209, 209, 209, 0.12);
+$divider: rgba(255, 255, 255, 0.12);
 
-$border0: rgba(209, 209, 209, 0.12);
-$border1: rgba(209, 209, 209, 0.20);
+$border0: rgba(255, 255, 255, 0.12);
+$border1: rgba(255, 255, 255, 0.30);
 
 // Accent colors
 // -------------------------
@@ -77,55 +77,55 @@ $red: $red-base;
 $yellow: #ecbb13;
 $orange: #eb7b18;
 $purple: #9933cc;
-$variable: #e94900;
+$variable: #F5F4F6;
 
 $brand-primary: #eb7b18;
-$brand-success: #4BBF73;
-$brand-warning: #CF8E07;
-$brand-danger: #D10E5C;
+$brand-success: #05DF72;
+$brand-warning: #FDC700;
+$brand-danger: #FF6467;
 
 $query-red: #FF5286;
-$query-green: #318B50;
+$query-green: #6CCF8E;
 $query-purple: #fe85fc;
 $query-orange: #eb7b18;
 
 // Status colors
 // -------------------------¨
-$online: #318B50;
-$warn: #fff;
+$online: #6CCF8E;
+$warn: #fbad37;
 $critical: #FF5286;
 
 // Scaffolding
 // -------------------------
-$body-bg: #161618;
-$page-bg: #161618;
-$dashboard-bg: #161618;
-
-$text-color-strong: #F0E4B6;
-$text-color: #fff;
-$text-color-semi-weak: #ffffff90;
-$text-color-weak: #ffffff90;
-$text-color-faint: #9DA7B8;
-$text-color-emphasis: #F0E4B6;
-$text-blue: #e94900;
+$body-bg: #141116;
+$page-bg: #141116;
+$dashboard-bg: #141116;
+
+$text-color-strong: #FFFFFF;
+$text-color: #F5F4F6;
+$text-color-semi-weak: #D5D3DD;
+$text-color-weak: #D5D3DD;
+$text-color-faint: #D5D3DA;
+$text-color-emphasis: #FFFFFF;
+$text-blue: #F5F4F6;
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
 
 // gradients
-$brand-gradient-horizontal: linear-gradient(270deg, #F55F3E 0%, #FF8833 100%);
-$brand-gradient-vertical: linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%);
+$brand-gradient-horizontal: linear-gradient(90deg, #FF570A 0%, #F04006 100%);
+$brand-gradient-vertical: linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%);
 
 // Links
 // -------------------------
-$link-color: #fff;
-$link-color-disabled: #9DA7B8;
-$link-hover-color: #F0E4B6;
-$external-link-color: #F0E4B6;
+$link-color: #F5F4F6;
+$link-color-disabled: #D5D3DA;
+$link-hover-color: #FFFFFF;
+$external-link-color: #F04006;
 
 // Typography
 // -------------------------
-$headings-color: #fff;
+$headings-color: #F5F4F6;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -133,30 +133,30 @@ $hr-border-color: $dark-9;
 
 // Panel
 // -------------------------
-$panel-bg: #23242a;
-$panel-border: 1px solid rgba(209, 209, 209, 0.12);
-$panel-header-hover-bg: rgba(209, 209, 209, 0.16);
+$panel-bg: #141116;
+$panel-border: 1px solid rgba(255, 255, 255, 0.12);
+$panel-header-hover-bg: rgba(255, 255, 255, 0.12);
 $panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
 // page header
-$page-header-bg: #161618;
+$page-header-bg: #141116;
 $page-header-shadow: inset 0px -4px 14px $dark-3;
-$page-header-border-color: #161618;
+$page-header-border-color: #141116;
 
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: #5E5855;
-$tight-form-func-highlight-bg: rgb(98, 93, 90);
+$tight-form-func-bg: #211E25;
+$tight-form-func-highlight-bg: rgb(39, 36, 43);
 
-$modal-backdrop-bg: rgba(209, 209, 209, 0.16);
+$modal-backdrop-bg: rgba(255, 255, 255, 0.12);
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
 // cards
-$card-background: #5E5855;
-$card-background-hover: rgb(98, 93, 90);
+$card-background: #211E25;
+$card-background-hover: rgb(39, 36, 43);
 $card-shadow: none;
 
 // Lists
@@ -164,7 +164,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: $card-background-hover;
 $list-item-shadow: $card-shadow;
 
-$empty-list-cta-bg: #5E5855;
+$empty-list-cta-bg: #211E25;
 
 // Scrollbars
 $scrollbarBackground: #404357;
@@ -173,10 +173,10 @@ $scrollbarBorder: black;
 
 // Tables
 // -------------------------
-$table-bg-accent: #5E5855;
-$table-border: rgba(209, 209, 209, 0.20);
-$table-bg-odd: rgb(39, 40, 46);
-$table-bg-hover: rgb(46, 46, 52);
+$table-bg-accent: #211E25;
+$table-border: rgba(255, 255, 255, 0.30);
+$table-bg-odd: rgb(24, 21, 26);
+$table-bg-hover: rgb(31, 28, 33);
 
 // Buttons
 // -------------------------
@@ -212,16 +212,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 
 // Forms
 // -------------------------
-$input-bg: #161618;
-$input-bg-disabled: rgba(209, 209, 209, 0.04);
+$input-bg: #141116;
+$input-bg-disabled: rgba(255, 255, 255, 0.04);
 
-$input-color: #fff;
-$input-border-color: rgba(209, 209, 209, 0.20);
+$input-color: #F5F4F6;
+$input-border-color: rgba(255, 255, 255, 0.30);
 $input-box-shadow: none;
-$input-border-focus: #ffffff00;
-$input-box-shadow-focus: #ffffff00 !default;
-$input-color-placeholder: #9DA7B8;
-$input-label-bg: #5E5855;
+$input-border-focus: #46404F;
+$input-box-shadow-focus: #46404F !default;
+$input-color-placeholder: #D5D3DA;
+$input-label-bg: #211E25;
 $input-color-select-arrow: $white;
 
 // Search
@@ -234,10 +234,10 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #23242a;
-$dropdownBorder: rgba(209, 209, 209, 0.12);
-$dropdownDividerTop: rgba(209, 209, 209, 0.12);
-$dropdownDividerBottom: rgba(209, 209, 209, 0.12);
+$dropdownBackground: #141116;
+$dropdownBorder: rgba(255, 255, 255, 0.12);
+$dropdownDividerTop: rgba(255, 255, 255, 0.12);
+$dropdownDividerBottom: rgba(255, 255, 255, 0.12);
 $dropdownShadow: 0px 8px 24px rgb(1, 4, 9);
 
 $dropdownLinkColor: $link-color;
@@ -259,15 +259,15 @@ $navbarBorder: 1px solid $dark-6;
 $side-menu-bg: $panel-bg;
 $side-menu-bg-mobile: $panel-bg;
 $side-menu-border: none;
-$side-menu-item-hover-bg: #5E5855;
+$side-menu-item-hover-bg: #211E25;
 $side-menu-shadow: 0 0 30px #111;
 $side-menu-icon-color: #9fa7b3;
-$side-menu-header-color: #fff;
+$side-menu-header-color: #F5F4F6;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: #23242a;
-$menu-dropdown-hover-bg: rgba(209, 209, 209, 0.16);
+$menu-dropdown-bg: #141116;
+$menu-dropdown-hover-bg: rgba(255, 255, 255, 0.12);
 $menu-dropdown-shadow: 0px 8px 24px rgb(1, 4, 9);
 
 // Tabs
@@ -276,14 +276,14 @@ $tab-border-color: $dark-9;
 
 // Form states and alerts
 // -------------------------
-$warning-text-color: #fff;
+$warning-text-color: #fbad37;
 $error-text-color: #FF5286;
-$success-text-color: #318B50;
+$success-text-color: #6CCF8E;
 
-$alert-error-bg: #D10E5C;
-$alert-success-bg: #4BBF73;
-$alert-warning-bg: #CF8E07;
-$alert-info-bg: #CF8E07;
+$alert-error-bg: #FF6467;
+$alert-success-bg: #05DF72;
+$alert-warning-bg: #FDC700;
+$alert-info-bg: #FDC700;
 
 // Tooltips and popovers
 // -------------------------
@@ -292,16 +292,16 @@ $tooltipLinkColor: $link-color;
 $tooltipExternalLinkColor: $external-link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: #5E5855;
-$tooltipColor: #fff;
-$tooltipArrowColor: #5E5855;
-$tooltipBackgroundError: #D10E5C;
+$tooltipBackground: #211E25;
+$tooltipColor: #F5F4F6;
+$tooltipArrowColor: #211E25;
+$tooltipBackgroundError: #FF6467;
 $tooltipShadow: 0px 4px 8px rgba(1, 4, 9, 0.75);
 
-$popover-bg: #23242a;
-$popover-color: #fff;
-$popover-border-color: rgba(209, 209, 209, 0.12);
-$popover-header-bg: #5E5855;
+$popover-bg: #141116;
+$popover-color: #F5F4F6;
+$popover-border-color: rgba(255, 255, 255, 0.12);
+$popover-header-bg: #211E25;
 $popover-shadow: 0px 8px 24px rgb(1, 4, 9);
 
 $popover-help-bg: $tooltipBackground;
@@ -337,14 +337,14 @@ $json-explorer-url-color: #027bff;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: rgba(209, 209, 209, 0.16);
+$diff-label-bg: rgba(255, 255, 255, 0.12);
 $diff-label-fg: $white;
 
-$diff-group-bg: #5E5855;
+$diff-group-bg: #211E25;
 $diff-arrow-color: $white;
 
-$diff-json-bg: #5E5855;
-$diff-json-fg: #fff;
+$diff-json-bg: #211E25;
+$diff-json-fg: #F5F4F6;
 
 $diff-json-added: $blue-shade;
 $diff-json-deleted: $red-shade;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 52faeabd5f8f6..355e79abf975e 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -15,17 +15,17 @@
 $theme-name: light;
 
 $colors-action-hover: rgba(45, 51, 62, 0.12);
-$colors-action-selected: #F27A40;
+$colors-action-selected: #F04006;
 
 // New Colors
 // -------------------------
-$blue-light: #101828;
-$blue-base: #FF570AE5;
-$blue-shade: rgba(204, 69, 8, 0.898);
-$red-base: #E0226E;
-$red-shade: rgb(179, 27, 88);
-$green-base: #83D39E;
-$green-shade: rgb(104, 168, 126);
+$blue-light: #141116;
+$blue-base: #F04006;
+$blue-shade: rgb(192, 51, 4);
+$red-base: #FF6467;
+$red-shade: rgb(204, 80, 82);
+$green-base: #05DF72;
+$green-shade: rgb(4, 178, 91);
 $orange-dark: #ff780a;
 
 $gray98: #f7f8fa;
@@ -58,8 +58,8 @@ $gray-7: #fbfbfb;
 $white: #ffffff;
 
 $layer0: #FFFFFF;
-$layer1: #F5F5F5;
-$layer2: #FFFFFF;
+$layer1: #FFFFFF;
+$layer2: #F5F4F6;
 
 $divider: rgba(45, 51, 62, 0.12);
 $border0: rgba(45, 51, 62, 0.12);
@@ -67,17 +67,17 @@ $border1: rgba(45, 51, 62, 0.30);
 
 // Accent colors
 // -------------------------
-$blue: #101828;
+$blue: #141116;
 $red: $red-base;
 $yellow: #ecbb13;
 $orange: #eb7b18;
 $purple: #9933cc;
-$variable: #101828;
+$variable: #141116;
 
 $brand-primary: #eb7b18;
-$brand-success: #83D39E;
-$brand-warning: #F3D086;
-$brand-danger: #E0226E;
+$brand-success: #05DF72;
+$brand-warning: #FDC700;
+$brand-danger: #FF6467;
 
 $query-red: #CF0E5B;
 $query-green: #0A764E;
@@ -97,30 +97,30 @@ $body-bg: #FFFFFF;
 $page-bg: #FFFFFF;
 $dashboard-bg: #FFFFFF;
 
-$text-color: #101828;
+$text-color: #141116;
 $text-color-strong: #000000;
-$text-color-semi-weak: #363636;
-$text-color-weak: #363636;
-$text-color-faint: #9DA7B8;
+$text-color-semi-weak: #3A3441;
+$text-color-weak: #3A3441;
+$text-color-faint: #AFACB3;
 $text-color-emphasis: #000000;
-$text-blue: #101828;
+$text-blue: #141116;
 
 $text-shadow-faint: none;
 
 // gradients
-$brand-gradient-horizontal: linear-gradient(90deg, #FF8833 0%, #F53E4C 100%);
-$brand-gradient-vertical: linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%);
+$brand-gradient-horizontal: linear-gradient(90deg, #FF570A 0%, #F04006 100%);
+$brand-gradient-vertical: linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%);
 
 // Links
 // -------------------------
-$link-color: #101828;
-$link-color-disabled: #9DA7B8;
+$link-color: #141116;
+$link-color-disabled: #AFACB3;
 $link-hover-color: #000000;
-$external-link-color: #FF4702;
+$external-link-color: #F04006;
 
 // Typography
 // -------------------------
-$headings-color: #101828;
+$headings-color: #141116;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;
 
 // Panel
 // -------------------------
-$panel-bg: #F5F5F5;
+$panel-bg: #FFFFFF;
 $panel-border: 1px solid rgba(45, 51, 62, 0.12);
 $panel-header-hover-bg: rgba(45, 51, 62, 0.12);
 $panel-box-shadow: none;
@@ -142,16 +142,16 @@ $page-header-border-color: #FFFFFF;
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: #FFFFFF;
-$tight-form-func-highlight-bg: #fafafa;
+$tight-form-func-bg: #F5F4F6;
+$tight-form-func-highlight-bg: #f0eef1;
 
-$modal-backdrop-bg: #F5F5F5;
+$modal-backdrop-bg: #FFFFFF;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
 // cards
-$card-background: #FFFFFF;
-$card-background-hover: #FFFFFF;
+$card-background: #F5F4F6;
+$card-background-hover: #F5F4F6;
 $card-shadow: none;
 
 // Lists
@@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
-$table-bg-accent: #FFFFFF;
+$table-bg-accent: #F5F4F6;
 $table-border: rgba(45, 51, 62, 0.30);
-$table-bg-odd: rgb(240, 240, 240);
-$table-bg-hover: rgb(232, 232, 232);
+$table-bg-odd: rgb(249, 249, 249);
+$table-bg-hover: rgb(242, 242, 242);
 
 // Buttons
 // -------------------------
@@ -207,16 +207,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 
 // Forms
 // -------------------------
-$input-bg: #F5F5F5;
+$input-bg: #FFFFFF;
 $input-bg-disabled: rgba(45, 51, 62, 0.04);
 
-$input-color: #101828;
+$input-color: #141116;
 $input-border-color: rgba(45, 51, 62, 0.30);
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
-$input-color-placeholder: #9DA7B8;
-$input-label-bg: #FFFFFF;
+$input-color-placeholder: #AFACB3;
+$input-label-bg: #F5F4F6;
 $input-color-select-arrow: #7b8087;
 
 // search
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #F5F5F5;
+$dropdownBackground: #FFFFFF;
 $dropdownBorder: rgba(45, 51, 62, 0.12);
 $dropdownDividerTop: rgba(45, 51, 62, 0.12);
 $dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: #F5F5F5;
+$menu-dropdown-bg: #FFFFFF;
 $menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
 $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
@@ -277,22 +277,22 @@ $warning-text-color: #B5510D;
 $error-text-color: #CF0E5B;
 $success-text-color: #0A764E;
 
-$alert-error-bg: #E0226E;
-$alert-success-bg: #83D39E;
-$alert-warning-bg: #F3D086;
-$alert-info-bg: #F3D086;
+$alert-error-bg: #FF6467;
+$alert-success-bg: #05DF72;
+$alert-warning-bg: #FDC700;
+$alert-info-bg: #FDC700;
 
 // Tooltips and popovers
-$tooltipBackground: #FFFFFF;
-$tooltipColor: #101828;
-$tooltipArrowColor: #FFFFFF;
-$tooltipBackgroundError: #E0226E;
+$tooltipBackground: #F5F4F6;
+$tooltipColor: #141116;
+$tooltipArrowColor: #F5F4F6;
+$tooltipBackgroundError: #FF6467;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
-$popover-bg: #F5F5F5;
-$popover-color: #101828;
+$popover-bg: #FFFFFF;
+$popover-color: #141116;
 $popover-border-color: rgba(45, 51, 62, 0.12);
-$popover-header-bg: #FFFFFF;
+$popover-header-bg: #F5F4F6;
 $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
 $graph-tooltip-bg: $gray-5;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 
-$popover-code-bg: #F5F5F5;
+$popover-code-bg: #FFFFFF;
 $popover-code-boxshadow: 0 0 5px $gray60;
 
 // images
@@ -338,10 +338,10 @@ $diff-label-bg: rgba(45, 51, 62, 0.12);
 $diff-label-fg: $gray-2;
 
 $diff-arrow-color: $dark-2;
-$diff-group-bg: #FFFFFF;
+$diff-group-bg: #F5F4F6;
 
-$diff-json-bg: #FFFFFF;
-$diff-json-fg: #101828;
+$diff-json-bg: #F5F4F6;
+$diff-json-fg: #141116;
 
 $diff-json-added: $blue-shade;
 $diff-json-deleted: $red-shade;