diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index b917c37adfbe2..38c65d64c973e 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -172,13 +172,13 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
 
   primary = {
     main: '#FF570AE5',
-    border: '#D9D9C8',
+    border: '#D7D7C7',
     text: '#101828',
   };
 
   text = {
     primary: '#101828',
-    secondary: '#344054',
+    secondary: '#363636',
     disabled: '#9DA7B8',
     link: '#FF4702',
     maxContrast: palette.black,
@@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   background = {
-    primary: '#F5F5F5',
+    primary: '#FFFFFF',
     canvas: '#F5F5F5',
-    secondary: '#F5f5f5',
+    secondary: '#FFFFFF',
   };
 
   action = {
diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts
index d0c8fe8189476..b09ac110ef839 100644
--- a/packages/grafana-data/src/themes/createTypography.ts
+++ b/packages/grafana-data/src/themes/createTypography.ts
@@ -53,8 +53,8 @@ export interface ThemeTypographyInput {
   htmlFontSize?: number;
 }
 
-const defaultFontFamily = '"Poppins", Inter, Satoshi, sans-serif'; //'"Roboto", "Helvetica", "Arial", sans-serif';
-const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; // "'Roboto Mono', monospace";
+const defaultFontFamily = '"Work Sans", Inter, Satoshi, sans-serif';
+const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; 
 
 export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
   const {
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 5917185f2bbae..e1745f1a9c1f1 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { useStyles2 } from '../../themes';
-import { Button, ButtonVariant } from '../Button';
+import { Button } from '../Button';
 import { Icon } from '../Icon/Icon';
 
 export interface Props {
@@ -34,9 +34,9 @@ export const Pagination = ({
     const pages = [...new Array(numberOfPages).keys()];
 
     const condensePages = numberOfPages > pageLengthToCondense;
-    const getListItem = (page: number, variant: 'primary' | 'secondary') => (
+    const getListItem = (page: number, fill?: 'outline') => (
       <li key={page} className={styles.item}>
-        <Button size="sm" variant={variant} onClick={() => onNavigate(page)}>
+        <Button size="sm" onClick={() => onNavigate(page)} fill={fill}>
           {page}
         </Button>
       </li>
@@ -44,7 +44,7 @@ export const Pagination = ({
 
     return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {
       const page = pageIndex + 1;
-      const variant: ButtonVariant = page === currentPage ? 'primary' : 'secondary';
+      const fill: 'outline' | undefined = page === currentPage ? undefined : 'outline';
 
       // The indexes at which to start and stop condensing pages
       const lowerBoundIndex = pageLengthToCondense;
@@ -72,7 +72,7 @@ export const Pagination = ({
           (currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset)
         ) {
           // Renders a button for the page
-          pagesToRender.push(getListItem(page, variant));
+          pagesToRender.push(getListItem(page, fill));
         } else if (
           (page === lowerBoundIndex && currentPage < lowerBoundIndex) ||
           (page === upperBoundIndex && currentPage > upperBoundIndex) ||
@@ -87,7 +87,7 @@ export const Pagination = ({
           );
         }
       } else {
-        pagesToRender.push(getListItem(page, variant));
+        pagesToRender.push(getListItem(page, fill));
       }
       return pagesToRender;
     }, []);
@@ -104,9 +104,9 @@ export const Pagination = ({
           <Button
             aria-label={`previous page`}
             size="sm"
-            variant="secondary"
             onClick={() => onNavigate(currentPage - 1)}
             disabled={currentPage === 1}
+            fill="outline"
           >
             <Icon name="angle-left" />
           </Button>
@@ -116,7 +116,7 @@ export const Pagination = ({
           <Button
             aria-label={`next page`}
             size="sm"
-            variant="secondary"
+            fill="outline"
             onClick={() => onNavigate(currentPage + 1)}
             disabled={currentPage === numberOfPages}
           >
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
index 6fd77b0e77e97..96be18e2c0e36 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
@@ -31,14 +31,18 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
         position: 'unset !important' as 'unset',
         transform: 'translate(0px, 0px) !important',
         marginBottom: theme.spacing(2),
+        boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
+        borderRadius: theme.shape.borderRadius(2),
       },
       '.panel-repeater-grid-item': {
         height: 'auto !important',
+        boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
+        borderRadius: theme.shape.borderRadius(2),
       },
     },
 
     '.react-grid-item.react-grid-placeholder': {
-      boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
+      boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
       background: `${theme.colors.primary.transparent} !important`,
       zIndex: '-1 !important',
       opacity: 'unset !important',
@@ -49,6 +53,11 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
       borderBottom: `2px solid ${theme.isDark ? theme.v1.palette.gray1 : theme.v1.palette.gray3} !important`,
     },
 
+    '.react-grid-item > div:first-of-type': {
+      boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
+      borderRadius: theme.shape.borderRadius(2),
+    },
+
     // Hack for preventing panel menu overlapping.
     '.react-grid-item.resizing.panel, .react-grid-item.panel.dropdown-menu-open, .react-grid-item.react-draggable-dragging.panel':
       {
diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index 50169aa291e50..ad81243cd62fb 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -62,10 +62,9 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
   border: 'none',
   fontWeight: 500,
   fontSize: '14px',
-  padding: '3px 6px',
-  letterSpacing: '0.15px',
-  height: '24px',
-  marginTop: '2px',
+  padding: '12px 6px',
+  display: 'flex',
+  alignItems: 'center',
 };
 
 function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
@@ -76,6 +75,7 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
     () => ({
       ...COMMON_PICKER_LABEL_STYLE,
       color: mode === 'light' ? '#2D333E' : '#DBD9D7',
+      backgroundColor: '#F6F6F1',
     }),
     [mode]
   );
diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html
index 4f35f79eb4703..258c0764d4fe6 100644
--- a/public/microfrontends/fn_dashboard/index.html
+++ b/public/microfrontends/fn_dashboard/index.html
@@ -10,16 +10,16 @@
 <script nonce="">
   window.fnData = {
     themePaths: {
-      light: '../../../public/build/grafana.light.11edba0e518ac6df7727.css',
-      dark: '../../../public/build/grafana.dark.75e907ac2464bdcdeb20.css',
+      light: '../../../public/build/grafana.light.1225898111a2fd093893.css',
+      dark: '../../../public/build/grafana.dark.cd0ed8a9f2cb3824f581.css',
     }
   };
 </script>
 
      
-    <script nonce="" src="../../../public/build/runtime~fn_dashboard.832e70d83875a90e9629.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/runtime~fn_dashboard.c72758889b72f840d29c.js" type="text/javascript"></script>
       
-    <script nonce="" src="../../../public/build/fn_dashboard.0ebf23b22c9b8b6b19b9.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/fn_dashboard.5bf65485c5298da38ca6.js" type="text/javascript"></script>
      
   </body>
 </html>
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index af4b049cb217d..1e660b246464a 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -99,7 +99,7 @@ $height-lg: 48;
 // Typography
 // -------------------------
 /* stylelint-disable-next-line string-quotes */
-$font-family-sans-serif: "Poppins", Inter, Satoshi, sans-serif;
+$font-family-sans-serif: "Work Sans", Inter, Satoshi, sans-serif;
 /* stylelint-disable-next-line string-quotes */
 $font-family-monospace: "SatoshiLight", "FigtreeLight", monospace;
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 53f65b000d749..300c537007168 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -58,8 +58,8 @@ $gray-7: #fbfbfb;
 $white: #ffffff;
 
 $layer0: #F5F5F5;
-$layer1: #F5F5F5;
-$layer2: #F5f5f5;
+$layer1: #FFFFFF;
+$layer2: #FFFFFF;
 
 $divider: rgba(45, 51, 62, 0.12);
 $border0: rgba(45, 51, 62, 0.12);
@@ -99,8 +99,8 @@ $dashboard-bg: #F5F5F5;
 
 $text-color: #101828;
 $text-color-strong: #000000;
-$text-color-semi-weak: #344054;
-$text-color-weak: #344054;
+$text-color-semi-weak: #363636;
+$text-color-weak: #363636;
 $text-color-faint: #9DA7B8;
 $text-color-emphasis: #000000;
 $text-blue: #101828;
@@ -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: #F5F5F5;
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: #F5f5f5;
-$tight-form-func-highlight-bg: #f0f0f0;
+$tight-form-func-bg: #FFFFFF;
+$tight-form-func-highlight-bg: #fafafa;
 
-$modal-backdrop-bg: #F5F5F5;
+$modal-backdrop-bg: #FFFFFF;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
 // cards
-$card-background: #F5f5f5;
-$card-background-hover: #F5f5f5;
+$card-background: #FFFFFF;
+$card-background-hover: #FFFFFF;
 $card-shadow: none;
 
 // Lists
@@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
-$table-bg-accent: #F5f5f5;
+$table-bg-accent: #FFFFFF;
 $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,7 +207,7 @@ $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;
@@ -216,7 +216,7 @@ $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9DA7B8;
-$input-label-bg: #F5f5f5;
+$input-label-bg: #FFFFFF;
 $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);
 
@@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086;
 $alert-info-bg: #F3D086;
 
 // Tooltips and popovers
-$tooltipBackground: #F5f5f5;
+$tooltipBackground: #FFFFFF;
 $tooltipColor: #101828;
-$tooltipArrowColor: #F5f5f5;
+$tooltipArrowColor: #FFFFFF;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
-$popover-bg: #F5F5F5;
+$popover-bg: #FFFFFF;
 $popover-color: #101828;
 $popover-border-color: rgba(45, 51, 62, 0.12);
-$popover-header-bg: #F5f5f5;
+$popover-header-bg: #FFFFFF;
 $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,9 +338,9 @@ $diff-label-bg: rgba(45, 51, 62, 0.12);
 $diff-label-fg: $gray-2;
 
 $diff-arrow-color: $dark-2;
-$diff-group-bg: #F5f5f5;
+$diff-group-bg: #FFFFFF;
 
-$diff-json-bg: #F5f5f5;
+$diff-json-bg: #FFFFFF;
 $diff-json-fg: #101828;
 
 $diff-json-added: $blue-shade;