From 6969df1512802c61fe8e83de203e864b0a687a08 Mon Sep 17 00:00:00 2001
From: Josh Braun <josh.braun.4@gmail.com>
Date: Mon, 27 Nov 2023 10:38:30 -0800
Subject: [PATCH] Josh theme tweaks (#18284)

## Summary & Motivation
Adds a bunch of small style tweaks to the dark and light themes

## How I Tested These Changes
Booted up the UI and tried it
---
 .../ui-components/src/components/Button.tsx   |  3 +-
 .../src/components/ButtonGroup.tsx            |  4 +-
 .../ui-components/src/components/Checkbox.tsx |  4 +-
 .../ui-components/src/components/Dialog.tsx   |  4 +-
 .../ui-components/src/components/Menu.tsx     | 16 +++--
 .../src/components/PageHeader.tsx             |  2 +-
 .../ui-components/src/components/Popover.tsx  | 12 ++--
 .../src/components/TextInput.tsx              | 38 +++++-----
 .../ui-components/src/components/Tooltip.tsx  |  5 +-
 .../ui-components/src/palettes/ColorName.tsx  | 24 +++++++
 .../ui-components/src/palettes/Colors.tsx     |  4 ++
 .../src/palettes/DarkPalette.tsx              | 44 +++++++++---
 .../src/palettes/LegacyPalette.tsx            | 26 ++++++-
 .../src/palettes/LightPalette.tsx             | 30 +++++++-
 .../ui-components/src/theme/color.tsx         | 26 +++++++
 .../ui-core/src/asset-graph/AssetEdges.tsx    |  8 +--
 .../src/asset-graph/AssetGraphExplorer.tsx    |  6 +-
 .../ui-core/src/asset-graph/AssetNode.tsx     | 56 ++++++++-------
 .../src/asset-graph/CollapsedGroupNode.tsx    | 31 +++++---
 .../src/asset-graph/ExpandedGroupNode.tsx     | 21 ++++--
 .../asset-graph/sidebar/AssetSidebarNode.tsx  |  4 +-
 .../src/asset-graph/sidebar/SearchFilter.tsx  | 14 +++-
 .../packages/ui-core/src/gantt/GanttChart.tsx | 11 +--
 .../ui-core/src/gantt/GanttChartTimescale.tsx |  2 +-
 .../packages/ui-core/src/graph/OpTags.tsx     | 71 ++++++++-----------
 .../ui-core/src/graph/SVGViewport.tsx         |  6 +-
 .../packages/ui-core/src/nav/LeftNav.tsx      |  4 +-
 .../packages/ui-core/src/nav/RepoNavItem.tsx  |  4 +-
 .../ui-core/src/runs/LogsRowComponents.tsx    |  5 +-
 .../ui-core/src/runs/RepoSectionHeader.tsx    |  3 +-
 .../ui-core/src/runs/RunStatusDots.tsx        |  4 +-
 .../ui-core/src/runs/RunStatusTag.tsx         |  6 +-
 .../packages/ui-core/src/runs/RunTimeline.tsx | 24 ++++---
 .../src/runs/mergeStatusToBackground.tsx      | 11 +--
 .../ui-core/src/search/SearchDialog.tsx       | 13 ++--
 .../ui-core/src/ui/SectionedLeftNav.tsx       | 10 ++-
 .../ui-core/src/workspace/ReloadAllButton.tsx |  4 +-
 .../ui-core/src/workspace/WorkspaceHeader.tsx |  1 +
 38 files changed, 373 insertions(+), 188 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx
index 9d5b0c66d3fbc..95c26b843de1b 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx
@@ -21,6 +21,7 @@ import {
   colorBackgroundYellow,
   colorBorderDefault,
   colorBorderHover,
+  colorBackgroundLightHover,
 } from '../theme/color';
 
 import {BaseButton} from './BaseButton';
@@ -167,7 +168,7 @@ export const intentToFillColorHover = (intent: BlueprintIntent) => {
       return colorAccentYellowHover();
     case 'none':
     default:
-      return colorBackgroundGray();
+      return colorBackgroundLightHover();
   }
 };
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx
index db8c057b03273..80b3128a050e4 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {
   colorBackgroundDefault,
-  colorBackgroundGray,
+  colorBackgroundLighterHover,
   colorBorderDefault,
   colorTextDefault,
   colorTextLight,
@@ -36,7 +36,7 @@ export const ButtonGroup = <T extends string | number>(props: Props<T>) => {
         const buttonElement = (
           <BaseButton
             key={id}
-            fillColor={isActive ? colorBackgroundGray() : colorBackgroundDefault()}
+            fillColor={isActive ? colorBackgroundLighterHover() : colorBackgroundDefault()}
             textColor={isActive ? colorTextDefault() : colorTextLight()}
             iconColor={isActive ? colorTextDefault() : colorTextLight()}
             strokeColor={colorBorderDefault()}
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx
index e9c5dd88a9fbb..4fa81d9e17e27 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx
@@ -5,9 +5,9 @@ import styled, {css} from 'styled-components';
 import {
   colorAccentBlue,
   colorAccentGray,
+  colorAccentWhite,
   colorAccentReversed,
   colorBackgroundDefault,
-  colorBackgroundDisabled,
   colorBackgroundGray,
   colorBorderDefault,
   colorTextDefault,
@@ -118,7 +118,7 @@ const SwitchIcon = ({checked, indeterminate, fillColor, disabled}: IconProps) =>
       width="20"
       height="20"
       rx="10"
-      fill={disabled ? colorBackgroundDisabled() : colorBackgroundDefault()}
+      fill={disabled ? colorAccentWhite() : colorAccentWhite()}
     />
   </svg>
 );
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
index 1a1a1b19bef4a..a320aaf3cfb86 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
@@ -3,7 +3,7 @@ import {Dialog as BlueprintDialog} from '@blueprintjs/core';
 import * as React from 'react';
 import styled, {createGlobalStyle} from 'styled-components';
 
-import {colorAccentPrimary, colorBackgroundDefault} from '../theme/color';
+import {colorAccentPrimary, colorBackgroundDefault, colorDialogBackground} from '../theme/color';
 
 import {Box} from './Box';
 import {LegacyColors} from './Colors';
@@ -100,7 +100,7 @@ export const DialogHeaderText = styled.div`
 
 export const GlobalDialogStyle = createGlobalStyle`
   .dagster-portal .bp4-overlay-backdrop {
-    background-color: ${LegacyColors.WashGray};
+    background-color: ${colorDialogBackground()};
   }
 
   .dagster-portal .bp4-dialog-container {
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
index 8995bf0bc8b9d..b85b2d2bd99d7 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -20,6 +20,10 @@ import {
   colorKeylineDefault,
   colorTextDefault,
   colorTextLight,
+  colorPopoverBackground,
+  colorBackgroundCyan,
+  colorPopoverBackgroundHover,
+  colorBackgroundBlue,
 } from '../theme/color';
 
 import {IconName, Icon, IconWrapper} from './Icon';
@@ -132,7 +136,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
 `;
 
 const StyledMenu = styled(BlueprintMenu)`
-  background-color: ${colorBackgroundDefault()};
+  background-color: ${colorPopoverBackground()};
   border-radius: 4px;
   padding: 8px 4px;
 `;
@@ -162,11 +166,11 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
 
   &.bp4-active,
   &.bp4-active:hover {
-    background-color: ${colorAccentBlue()};
-    color: ${colorAccentReversed()};
+    background-color: ${colorBackgroundBlue()};
+    color: ${colorTextDefault()};
 
     ${IconWrapper} {
-      background-color: ${colorAccentReversed()};
+      background-color: ${colorTextDefault()};
     }
   }
 
@@ -175,7 +179,7 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
   }
 
   &.bp4-active ${IconWrapper} {
-    color: ${colorAccentReversed()};
+    color: ${colorTextDefault()};
   }
 
   ${IconWrapper}:first-child {
@@ -183,7 +187,7 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
   }
 
   &:hover {
-    background: ${colorBackgroundGray()};
+    background: ${colorPopoverBackgroundHover()};
     color: ${({$textColor}) => $textColor};
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
index 5dc8603cb7d89..8283025ea19c5 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
@@ -25,7 +25,7 @@ export const PageHeader = (props: Props) => {
       border="bottom"
     >
       <Box flex={{direction: 'row', justifyContent: 'space-between'}} padding={{bottom: 16}}>
-        <Box flex={{direction: 'row', alignItems: 'flex-start', gap: 12, wrap: 'wrap'}}>
+        <Box flex={{direction: 'row', alignItems: 'center', gap: 12, wrap: 'wrap',}}>
           {title}
           {tags}
         </Box>
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx
index e9a444c7fc21c..80f959f747e7f 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx
@@ -13,6 +13,8 @@ import {
   colorKeylineDefault,
   colorTextDefault,
   colorTextDisabled,
+  colorPopoverBackground,
+  colorPopoverBackgroundHover,
 } from '../theme/color';
 
 import {FontFamily} from './styles';
@@ -25,11 +27,11 @@ export const GlobalPopoverStyle = createGlobalStyle`
 
   .dagster-popover .bp4-popover2-content,
   .dagster-popover .bp4-popover-content {
-    background-color: ${colorBackgroundDefault()};
+    background-color: ${colorPopoverBackground()};
     border-radius: 4px;
 
     .bp4-menu {
-      background-color: ${colorBackgroundDefault()};
+      background-color: ${colorPopoverBackground()};
       color: ${colorTextDefault()};
     }
 
@@ -49,7 +51,7 @@ export const GlobalPopoverStyle = createGlobalStyle`
       }
         
       .bp4-input {
-        background-color: ${colorBackgroundDefault()};
+        background-color: ${colorPopoverBackground()};
         border: none;
         border-radius: 8px;
         box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px, ${colorKeylineDefault()} inset 2px 2px 1.5px;
@@ -73,12 +75,12 @@ export const GlobalPopoverStyle = createGlobalStyle`
   }
 
   .dagster-popover .bp4-popover2-arrow-fill {
-    fill: ${colorBackgroundDefault()};
+    fill: ${colorPopoverBackground()};
   }
 
   .dagster-popover .bp4-popover2.bp4-dark .bp4-popover2-content,
   .bp4-dark .dagster-popover .bp4-popover2 .bp4-popover2-content {
-    background-color: ${colorBackgroundDefault()};
+    background-color: ${colorPopoverBackground()};
   }
 `;
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
index af035d539e96d..6776465846def 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -7,12 +7,15 @@ import {
   colorBackgroundDefault,
   colorBackgroundDisabled,
   colorBorderDefault,
+  colorBorderHover,
   colorBorderDisabled,
+  colorBorderFocussed,
   colorKeylineDefault,
   colorTextDefault,
   colorTextDisabled,
   colorTextLight,
   colorTextLighter,
+  colorBackgroundDefaultHover,
 } from '../theme/color';
 
 import {IconName, Icon, IconWrapper} from './Icon';
@@ -100,17 +103,16 @@ const RightContainer = styled.div`
 export const TextInputStyles = css`
   background-color: ${colorBackgroundDefault()};
   border: none;
+  outline: none;
   border-radius: 8px;
-  box-shadow:
-    ${colorBorderDefault()} inset 0px 0px 0px 1px,
-    ${colorKeylineDefault()} inset 2px 2px 1.5px;
   color: ${colorTextDefault()};
   flex-grow: 1;
   font-size: 14px;
   line-height: 20px;
   padding: 6px 6px 6px 12px;
+  box-shadow: none;
   margin: 0;
-  transition: box-shadow 150ms;
+  transition: border 150ms;
 
   ::placeholder {
     color: ${colorTextLighter()};
@@ -155,15 +157,16 @@ const StyledInput = styled.input<StyledInputProps>`
         `
       : null}
 
-  box-shadow: ${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
-    ${colorKeylineDefault()} inset 2px 2px 1.5px;
+  box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px;
   padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
-
+  transition: box-shadow 150ms;
+  :hover {
+    box-shadow: ${colorBorderHover()} inset 0px 0px 0px 1px;
+  }
   :focus {
     box-shadow:
-      ${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
-      ${colorKeylineDefault()} inset 2px 2px 1.5px,
-      rgba(58, 151, 212, 0.6) 0 0 0 3px;
+      ${colorBorderFocussed()} 0px 0px 0px 1px;
+    background-color: ${colorBackgroundDefaultHover()};
   }
 `;
 
@@ -175,14 +178,17 @@ interface TextAreaProps {
 export const TextArea = styled.textarea<TextAreaProps>`
   ${TextInputStyles}
 
-  box-shadow: ${({$strokeColor}) => $strokeColor || colorBorderDefault()} inset 0px 0px 0px 1px,
-    ${colorKeylineDefault()} inset 2px 2px 1.5px;
-
+  box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px;
+  :hover {
+    ${colorBorderHover()} inset 0px 0px 0px 1px;
+  }
+  :hover {
+    box-shadow: ${colorBorderHover()} inset 0px 0px 0px 1px;
+  }
   :focus {
     box-shadow:
-      ${({$strokeColor}) => $strokeColor || colorBorderDefault()} inset 0px 0px 0px 1px,
-      ${colorKeylineDefault()} inset 2px 2px 1.5px,
-      rgba(58, 151, 212, 0.6) 0 0 0 3px;
+      ${colorBorderFocussed()} 0px 0px 0px 1px;
+    background-color: ${colorBackgroundDefaultHover()};
   }
 
   ${({$resize}) => ($resize ? `resize: ${$resize};` : null)}
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tooltip.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tooltip.tsx
index ae2b985af2750..33213ed36743d 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Tooltip.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Tooltip.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import styled, {createGlobalStyle, css} from 'styled-components';
 
 import {CoreColors} from '../palettes/Colors';
+import {colorTooltipBackground, colorTooltipText} from '../theme/color';
 
 import {FontFamily} from './styles';
 
@@ -13,8 +14,8 @@ export const GlobalTooltipStyle = createGlobalStyle`
       font-family: ${FontFamily.default};
       font-size: 12px;
       line-height: 16px;
-      background: ${CoreColors.Gray900};
-      color: ${CoreColors.Gray50};
+      background: ${colorTooltipBackground()};
+      color: ${colorTooltipText()};
       padding: 8px 16px;
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
index cf52609ffeb35..46723609a3e96 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
@@ -40,6 +40,7 @@ export enum ColorName {
   BorderDefault = 'BorderDefault',
   BorderHover = 'BorderHover',
   BorderDisabled = 'BorderDisabled',
+  BorderFocussed = 'BorderFocussed',
   AccentPrimary = 'AccentPrimary',
   AccentPrimaryHover = 'AccentPrimaryHover',
   AccentReversed = 'AccentReversed',
@@ -56,6 +57,29 @@ export enum ColorName {
   AccentCyanHover = 'AccentCyanHover',
   AccentLime = 'AccentLime',
   AccentLimeHover = 'AccentLimeHover',
+  AccentLavender = 'AccentLavender',
+  AccentLavenderHover = 'AccentLavenderHover',
   AccentGray = 'AccentGray',
   AccentGrayHover = 'AccentGrayHover',
+  AccentWhite = 'AccentWhite',
+  DialogBackground = 'DialogBackground',
+  TooltipBackground = 'TooltipBackground',
+  TooltipText = 'TooltipText',
+  PopoverBackground = 'PopoverBackground',
+  PopoverBackgroundHover = 'PopoverBackgroundHover',
+  //Lineage Graph
+  LineageDots = 'LineageDots',
+  LineageEdge = 'LineageEdge',
+  LineageEdgeHighlighted = 'LineageEdgeHighlighted',
+  LineageGroupNodeBackground = 'LineageGroupNodeBackground',
+  LineageGroupNodeBackgroundHover = 'LineageGroupNodeBackgroundHover',
+  LineageGroupNodeBorder = 'LineageGroupNodeBorder',
+  LineageGroupNodeBorderHover = 'LineageGroupNodeBorderHover',
+  LineageGroupBackground = 'LineageGroupBackground',
+
+  LineageNodeBackground = 'LineageNodeBackground',
+  LineageNodeBackgroundHover = 'LineageNodeBackgroundHover',
+  LineageNodeBorder = 'LineageNodeBorder',
+  LineageNodeBorderHover = 'LineageNodeBorderHover',
+  LineageNodeBorderSelected = 'LineageNodeBorderSelected',
 }
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/Colors.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/Colors.tsx
index 1c8ef39eae053..880e952953233 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/Colors.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/Colors.tsx
@@ -155,4 +155,8 @@ export const TranslucentColors = {
   Gray20: 'rgba(156, 172, 151, 0.20)',
   Gray25: 'rgba(156, 172, 151, 0.25)',
   Gray30: 'rgba(156, 172, 151, 0.30)',
+  Gray50: 'rgba(13, 17, 33, 0.50)',
+  Gray90: 'rgba(13, 17, 33, 0.90)',
+  LightWash: 'rgba(247, 248, 249, 0.40)',
+  DarkWash: 'rgba(13, 17, 33, 0.40)',
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
index a6ee2341183d5..f2118c7140a33 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
@@ -2,7 +2,7 @@ import {ColorName} from './ColorName';
 import {CoreColors, TranslucentColors} from './Colors';
 
 export const DarkPalette = {
-  [ColorName.KeylineDefault]: TranslucentColors.Gray20,
+  [ColorName.KeylineDefault]: TranslucentColors.Gray15,
   [ColorName.LinkDefault]: CoreColors.Blue200,
   [ColorName.LinkHover]: CoreColors.Blue400,
   [ColorName.LinkDisabled]: CoreColors.Gray750,
@@ -10,13 +10,13 @@ export const DarkPalette = {
   [ColorName.TextLight]: CoreColors.Gray300,
   [ColorName.TextLighter]: CoreColors.Gray500,
   [ColorName.TextDisabled]: CoreColors.Gray600,
-  [ColorName.TextRed]: CoreColors.Red300,
-  [ColorName.TextYellow]: CoreColors.Yellow300,
-  [ColorName.TextGreen]: CoreColors.Green300,
-  [ColorName.TextBlue]: CoreColors.Blue300,
-  [ColorName.TextOlive]: CoreColors.Olive300,
-  [ColorName.TextCyan]: CoreColors.Cyan300,
-  [ColorName.TextLime]: CoreColors.Lime300,
+  [ColorName.TextRed]: CoreColors.Red200,
+  [ColorName.TextYellow]: CoreColors.Yellow200,
+  [ColorName.TextGreen]: CoreColors.Green200,
+  [ColorName.TextBlue]: CoreColors.Blue200,
+  [ColorName.TextOlive]: CoreColors.Olive200,
+  [ColorName.TextCyan]: CoreColors.Cyan200,
+  [ColorName.TextLime]: CoreColors.Lime200,
   [ColorName.BackgroundDefault]: CoreColors.Gray990,
   [ColorName.BackgroundDefaultHover]: CoreColors.Gray950,
   [ColorName.BackgroundLight]: CoreColors.Gray950,
@@ -43,6 +43,7 @@ export const DarkPalette = {
   [ColorName.BorderDefault]: CoreColors.Gray800,
   [ColorName.BorderHover]: CoreColors.Gray700,
   [ColorName.BorderDisabled]: CoreColors.Gray600,
+  [ColorName.BorderFocussed]: CoreColors.Gray100,
   [ColorName.AccentPrimary]: CoreColors.Gray150,
   [ColorName.AccentPrimaryHover]: CoreColors.Gray50,
   [ColorName.AccentReversed]: CoreColors.Gray950,
@@ -51,14 +52,37 @@ export const DarkPalette = {
   [ColorName.AccentRedHover]: CoreColors.Red600,
   [ColorName.AccentYellow]: CoreColors.Yellow500,
   [ColorName.AccentYellowHover]: CoreColors.Yellow600,
-  [ColorName.AccentGreen]: CoreColors.Green500,
-  [ColorName.AccentGreenHover]: CoreColors.Green600,
+  [ColorName.AccentGreen]: CoreColors.Green600,
+  [ColorName.AccentGreenHover]: CoreColors.Green700,
   [ColorName.AccentBlue]: CoreColors.Blue400,
   [ColorName.AccentBlueHover]: CoreColors.Blue500,
   [ColorName.AccentCyan]: CoreColors.Cyan500,
   [ColorName.AccentCyanHover]: CoreColors.Cyan600,
   [ColorName.AccentLime]: CoreColors.Lime500,
   [ColorName.AccentLimeHover]: CoreColors.Lime600,
+  [ColorName.AccentLavender]: CoreColors.Blue800,
+  [ColorName.AccentLavenderHover]: CoreColors.Blue700,
   [ColorName.AccentGray]: CoreColors.Gray500,
   [ColorName.AccentGrayHover]: CoreColors.Gray600,
+  [ColorName.AccentWhite]: CoreColors.Gray150,
+  [ColorName.DialogBackground]: TranslucentColors.Gray90,
+  [ColorName.TooltipBackground]: CoreColors.Gray850,
+  [ColorName.TooltipText]: CoreColors.White,
+  [ColorName.PopoverBackground]: CoreColors.Gray900,
+  [ColorName.PopoverBackgroundHover]: CoreColors.Gray850,
+  //Lineage Graph
+  [ColorName.LineageDots]: TranslucentColors.Gray12,
+  [ColorName.LineageEdge]: CoreColors.Gray850,
+  [ColorName.LineageEdgeHighlighted]: CoreColors.Gray500,
+  [ColorName.LineageGroupNodeBackground]: CoreColors.Gray900,
+  [ColorName.LineageGroupNodeBackgroundHover]: CoreColors.Gray850,
+  [ColorName.LineageGroupNodeBorder]: CoreColors.Gray900,
+  [ColorName.LineageGroupNodeBorderHover]: CoreColors.Gray850,
+  [ColorName.LineageGroupBackground]: TranslucentColors.DarkWash,
+  
+  [ColorName.LineageNodeBackground]: CoreColors.Gray850,
+  [ColorName.LineageNodeBackgroundHover]: CoreColors.Gray800,
+  [ColorName.LineageNodeBorder]: CoreColors.Gray700,
+  [ColorName.LineageNodeBorderHover]: CoreColors.Gray400,
+  [ColorName.LineageNodeBorderSelected]: CoreColors.Blue300,
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx
index 6e0e21b1f5366..bebf63f8ed0e0 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx
@@ -24,7 +24,7 @@ export const LegacyPalette = {
   [ColorName.BackgroundLightHover]: LegacyColors.Gray100,
   [ColorName.BackgroundLighter]: LegacyColors.Gray10,
   [ColorName.BackgroundLighterHover]: LegacyColors.Gray50,
-  [ColorName.BackgroundDisabled]: LegacyColors.Gray100,
+  [ColorName.BackgroundDisabled]: LegacyColors.Gray200,
   [ColorName.BackgroundRed]: LegacyColors.Red50,
   [ColorName.BackgroundRedHover]: LegacyColors.Red50,
   [ColorName.BackgroundYellow]: LegacyColors.Yellow50,
@@ -44,6 +44,7 @@ export const LegacyPalette = {
   [ColorName.BorderDefault]: LegacyColors.Gray300,
   [ColorName.BorderHover]: LegacyColors.Gray200,
   [ColorName.BorderDisabled]: LegacyColors.Gray100,
+  [ColorName.BorderFocussed]: LegacyColors.Gray600,
   [ColorName.AccentPrimary]: LegacyColors.Gray900,
   [ColorName.AccentPrimaryHover]: LegacyColors.Gray800,
   [ColorName.AccentReversed]: LegacyColors.White,
@@ -62,4 +63,27 @@ export const LegacyPalette = {
   [ColorName.AccentLimeHover]: LegacyColors.HighlightGreen, // No lime
   [ColorName.AccentGray]: LegacyColors.Gray500,
   [ColorName.AccentGrayHover]: LegacyColors.Gray400,
+  [ColorName.AccentLavender]: LegacyColors.Blue200,
+  [ColorName.AccentLavenderHover]: LegacyColors.Blue100,
+  [ColorName.AccentWhite]: LegacyColors.White,
+  [ColorName.DialogBackground]: LegacyColors.WashGray,
+  [ColorName.TooltipBackground]: LegacyColors.Dark,
+  [ColorName.TooltipText]: LegacyColors.White,
+  [ColorName.PopoverBackground]: LegacyColors.White,
+  [ColorName.PopoverBackgroundHover]: LegacyColors.Gray100,
+  //Lineage Graph
+  [ColorName.LineageDots]: LegacyColors.KeylineGray,
+  [ColorName.LineageEdge]: LegacyColors.Gray200,
+  [ColorName.LineageEdgeHighlighted]: LegacyColors.Blue500,
+  [ColorName.LineageGroupNodeBackground]: LegacyColors.Gray100,
+  [ColorName.LineageGroupNodeBackgroundHover]: LegacyColors.KeylineGray,
+  [ColorName.LineageGroupNodeBorder]: LegacyColors.Gray100,
+  [ColorName.LineageGroupNodeBorderHover]: LegacyColors.Gray10,
+  [ColorName.LineageGroupBackground]: LegacyColors.Gray10,
+  [ColorName.LineageNodeBackground]: LegacyColors.Blue50,
+  [ColorName.LineageNodeBackgroundHover]: LegacyColors.Blue50,
+  [ColorName.LineageNodeBorder]: LegacyColors.Blue200,
+  [ColorName.LineageNodeBorderHover]: LegacyColors.Blue200,
+  [ColorName.LineageNodeBorderSelected]: LegacyColors.Blue500,
 };
+
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
index 7c7d9293b3216..cbaee096d8e3d 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
@@ -40,9 +40,10 @@ export const LightPalette = {
   [ColorName.BackgroundLimeHover]: TranslucentColors.Lime15,
   [ColorName.BackgroundGray]: TranslucentColors.Gray12,
   [ColorName.BackgroundGrayHover]: TranslucentColors.Gray15,
-  [ColorName.BorderDefault]: CoreColors.Gray300,
-  [ColorName.BorderHover]: CoreColors.Gray200,
-  [ColorName.BorderDisabled]: CoreColors.Gray100,
+  [ColorName.BorderDefault]: CoreColors.Gray200,
+  [ColorName.BorderHover]: CoreColors.Gray300,
+  [ColorName.BorderDisabled]: CoreColors.Gray500,
+  [ColorName.BorderFocussed]: CoreColors.Gray950,
   [ColorName.AccentPrimary]: CoreColors.Gray950,
   [ColorName.AccentPrimaryHover]: CoreColors.Gray800,
   [ColorName.AccentReversed]: CoreColors.Gray10,
@@ -59,6 +60,29 @@ export const LightPalette = {
   [ColorName.AccentCyanHover]: CoreColors.Cyan400,
   [ColorName.AccentLime]: CoreColors.Lime500,
   [ColorName.AccentLimeHover]: CoreColors.Lime400,
+  [ColorName.AccentLavender]: CoreColors.Blue200,
+  [ColorName.AccentLavenderHover]: CoreColors.Blue100,
   [ColorName.AccentGray]: CoreColors.Gray500,
   [ColorName.AccentGrayHover]: CoreColors.Gray400,
+  [ColorName.AccentWhite]: CoreColors.White,
+  [ColorName.DialogBackground]: TranslucentColors.Gray50,
+  [ColorName.TooltipBackground]: CoreColors.Gray850,
+  [ColorName.TooltipText]: CoreColors.White,
+  [ColorName.PopoverBackground]: CoreColors.White,
+  [ColorName.PopoverBackgroundHover]: CoreColors.Gray50,
+  //Lineage Graph
+  [ColorName.LineageDots]: TranslucentColors.Gray20,
+  [ColorName.LineageEdge]: CoreColors.Gray100,
+  [ColorName.LineageEdgeHighlighted]: CoreColors.Gray400,
+  [ColorName.LineageGroupNodeBackground]: CoreColors.Gray10,
+  [ColorName.LineageGroupNodeBackgroundHover]: CoreColors.Gray50,
+  [ColorName.LineageGroupNodeBorder]: CoreColors.Gray50,
+  [ColorName.LineageGroupNodeBorderHover]: CoreColors.Gray50,
+  [ColorName.LineageGroupBackground]: TranslucentColors.LightWash,
+
+  [ColorName.LineageNodeBackground]: CoreColors.Gray50,
+  [ColorName.LineageNodeBackgroundHover]: CoreColors.Gray100,
+  [ColorName.LineageNodeBorder]: CoreColors.Gray150,
+  [ColorName.LineageNodeBorderHover]: CoreColors.Gray300,
+  [ColorName.LineageNodeBorderSelected]: CoreColors.Blue500,
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
index 4a0faa7dc4fb7..20966b7bed888 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
@@ -50,6 +50,7 @@ export const colorBackgroundGrayHover = () => color(ColorName.BackgroundGrayHove
 export const colorBorderDefault = () => color(ColorName.BorderDefault);
 export const colorBorderHover = () => color(ColorName.BorderHover);
 export const colorBorderDisabled = () => color(ColorName.BorderDisabled);
+export const colorBorderFocussed = () => color(ColorName.BorderFocussed);
 export const colorAccentPrimary = () => color(ColorName.AccentPrimary);
 export const colorAccentPrimaryHover = () => color(ColorName.AccentPrimaryHover);
 export const colorAccentReversed = () => color(ColorName.AccentReversed);
@@ -66,5 +67,30 @@ export const colorAccentCyan = () => color(ColorName.AccentCyan);
 export const colorAccentCyanHover = () => color(ColorName.AccentCyanHover);
 export const colorAccentLime = () => color(ColorName.AccentLime);
 export const colorAccentLimeHover = () => color(ColorName.AccentLimeHover);
+export const colorAccentLavender = () => color(ColorName.AccentLavender);
+export const colorAccentLavenderHover = () => color(ColorName.AccentLavenderHover);
 export const colorAccentGray = () => color(ColorName.AccentGray);
 export const colorAccentGrayHover = () => color(ColorName.AccentGrayHover);
+export const colorAccentWhite = () => color(ColorName.AccentWhite);
+export const colorDialogBackground = () => color(ColorName.DialogBackground);
+export const colorTooltipBackground = () => color(ColorName.TooltipBackground);
+export const colorTooltipText = () => color(ColorName.TooltipText);
+export const colorPopoverBackground = () => color(ColorName.PopoverBackground);
+export const colorPopoverBackgroundHover = () => color(ColorName.PopoverBackgroundHover);
+//LINEAGE GRAPH COLORS
+export const colorLineageDots = () => color(ColorName.LineageDots);
+export const colorLineageEdge = () => color(ColorName.LineageEdge);
+export const colorLineageEdgeHighlighted = () => color(ColorName.LineageEdgeHighlighted);
+//GRAPH GROUPS
+export const colorLineageGroupNodeBackground = () => color(ColorName.LineageGroupNodeBackground);
+export const colorLineageGroupNodeBackgroundHover = () => color(ColorName.LineageGroupNodeBackgroundHover);
+export const colorLineageGroupNodeBorder = () => color(ColorName.LineageGroupNodeBorder);
+export const colorLineageGroupNodeBorderHover = () => color(ColorName.LineageGroupNodeBorderHover);
+export const colorLineageGroupBackground = () => color(ColorName.LineageGroupBackground);
+//GRAPH NODES
+export const colorLineageNodeBackground = () => color(ColorName.LineageNodeBackground);
+export const colorLineageNodeBackgroundHover = () => color(ColorName.LineageNodeBackgroundHover);
+export const colorLineageNodeBorder = () => color(ColorName.LineageNodeBorder);
+export const colorLineageNodeBorderHover = () => color(ColorName.LineageNodeBorderHover);
+export const colorLineageNodeBorderSelected = () => color(ColorName.LineageNodeBorderSelected);
+
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx
index dbda103650175..9c72eda27b29d 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetEdges.tsx
@@ -1,4 +1,4 @@
-import {colorAccentBlue, colorKeylineDefault} from '@dagster-io/ui-components';
+import {colorLineageEdgeHighlighted, colorLineageEdge} from '@dagster-io/ui-components';
 import React from 'react';
 
 import {buildSVGPath} from './Utils';
@@ -9,7 +9,6 @@ interface AssetEdgesProps {
   selected: string[] | null;
   highlighted: string | null;
   strokeWidth?: number;
-  baseColor?: string;
   viewportRect: {top: number; left: number; right: number; bottom: number};
 }
 
@@ -18,7 +17,6 @@ export const AssetEdges = ({
   selected,
   highlighted,
   strokeWidth = 4,
-  baseColor = colorKeylineDefault(),
   viewportRect,
 }: AssetEdgesProps) => {
   // Note: we render the highlighted edges twice, but it's so that the first item with
@@ -33,13 +31,13 @@ export const AssetEdges = ({
   return (
     <React.Fragment>
       <AssetEdgeSet
-        color={baseColor}
+        color={colorLineageEdge()}
         edges={intersectedEdges.length > 50 ? visibleToFromEdges : intersectedEdges}
         strokeWidth={strokeWidth}
         viewportRect={viewportRect}
       />
       <AssetEdgeSet
-        color={colorAccentBlue()}
+        color={colorLineageEdgeHighlighted()}
         edges={edges.filter(
           ({fromId, toId}) =>
             selected?.includes(fromId) ||
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
index f0e50c8594919..ff02c3eb569ad 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -434,11 +434,7 @@ const AssetGraphExplorerWithData = ({
                         : filterEdges(layout.edges, allowGroupsOnlyZoomLevel, scale, assetGraphData)
                     }
                     strokeWidth={allowGroupsOnlyZoomLevel ? Math.max(4, 3 / scale) : 4}
-                    baseColor={
-                      allowGroupsOnlyZoomLevel && scale < GROUPS_ONLY_SCALE
-                        ? colorAccentGray()
-                        : colorKeylineDefault()
-                    }
+
                   />
 
                   {Object.values(layout.groups)
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
index 75a7f6c435871..c77c8e1047380 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
@@ -6,7 +6,6 @@ import {
   Spinner,
   Tooltip,
   colorAccentBlue,
-  colorAccentBlueHover,
   colorAccentCyan,
   colorAccentGray,
   colorAccentGrayHover,
@@ -19,6 +18,14 @@ import {
   colorBackgroundLight,
   colorTextDefault,
   colorTextLight,
+  colorTextLighter,
+  colorBorderDefault,
+  colorLineageEdgeHighlighted,
+  colorLineageNodeBorder,
+  colorLineageNodeBorderSelected,
+  colorLineageNodeBorderHover,
+  colorLineageNodeBackground,
+  colorLineageNodeBackgroundHover,
 } from '@dagster-io/ui-components';
 import countBy from 'lodash/countBy';
 import isEqual from 'lodash/isEqual';
@@ -94,8 +101,8 @@ export const AssetNode = React.memo(({definition, selected}: Props) => {
           {(liveData?.assetChecks || []).length > 0 && (
             <AssetNodeChecksRow definition={definition} liveData={liveData} />
           )}
-          <AssetComputeKindTag definition={definition} style={{right: -2, paddingTop: 7}} />
         </AssetNodeBox>
+        <AssetComputeKindTag definition={definition} style={{right: -2, paddingTop: 7}} />
       </AssetNodeContainer>
     </AssetInsetForHoverEffect>
   );
@@ -121,8 +128,8 @@ const AssetNodeRowBox = styled(Box)`
     text-decoration: none;
   }
   &:last-child {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
   }
 `;
 
@@ -309,7 +316,9 @@ const AssetNodeChecksRow = ({
       padding={{horizontal: 8}}
       flex={{justifyContent: 'space-between', alignItems: 'center', gap: 6}}
       border="top"
-      background={colorBackgroundLight()}
+      background={colorBackgroundLight()
+      }
+      
     >
       Checks
       <Link
@@ -410,7 +419,8 @@ const AssetInsetForHoverEffect = styled.div`
 const AssetNodeContainer = styled.div<{$selected: boolean}>`
   user-select: none;
   cursor: pointer;
-  padding: 4px;
+  padding: 6px;
+  overflow: clip;
 `;
 
 const AssetNodeShowOnHover = styled.span`
@@ -421,18 +431,20 @@ const AssetNodeBox = styled.div<{$isSource: boolean; $selected: boolean}>`
   ${(p) =>
     p.$isSource
       ? `border: 2px dashed ${p.$selected ? colorAccentGrayHover() : colorAccentGray()}`
-      : `border: 2px solid ${p.$selected ? colorAccentBlueHover() : colorAccentBlue()}`};
-
+      : `border: 2px solid ${p.$selected ? colorLineageNodeBorderSelected() : colorLineageNodeBorder()}`};
   ${(p) =>
-    p.$isSource
-      ? `outline: 3px solid ${p.$selected ? colorAccentBlue() : 'transparent'}`
-      : `outline: 3px solid ${p.$selected ? colorAccentCyan() : 'transparent'}`};
+    p.$selected && `outline: 2px solid ${colorLineageNodeBorderSelected()}`};
 
   background: ${colorBackgroundDefault()};
-  border-radius: 8px;
+  border-radius: 10px;
   position: relative;
+  transition: all 150ms linear;
   &:hover {
+    ${(p) =>
+      !p.$selected && `border: 2px solid ${colorLineageNodeBorderHover()};`};
+    
     box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;
+    scale: 1.03;
     ${AssetNodeShowOnHover} {
       display: initial;
     }
@@ -456,21 +468,21 @@ export const NameTooltipCSS: CSSObject = {
 
 export const NameTooltipStyle = JSON.stringify({
   ...NameTooltipCSS,
-  background: colorBackgroundBlue(),
-  border: `1px solid ${colorAccentBlue()}`,
+  background: colorLineageNodeBackground(),
+  border: `none`,
 });
 
 const NameTooltipStyleSource = JSON.stringify({
   ...NameTooltipCSS,
   background: colorBackgroundGray(),
-  border: `1px solid ${colorAccentGray()}`,
+  border: `none`,
 });
 
 const AssetName = styled.div<{$isSource: boolean}>`
   ${NameCSS};
   display: flex;
   gap: 4px;
-  background: ${(p) => (p.$isSource ? colorBackgroundLight() : colorBackgroundBlue())};
+  background: ${(p) => (p.$isSource ? colorBackgroundLight() : colorLineageNodeBackground())};
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 `;
@@ -495,18 +507,14 @@ const MinimalAssetNodeBox = styled.div<{
   ${(p) =>
     p.$isSource
       ? `border: 4px dashed ${p.$selected ? colorAccentGray() : p.$border}`
-      : `border: 4px solid ${p.$selected ? colorAccentBlue() : p.$border}`};
+      : `border: 4px solid ${p.$selected ? colorLineageNodeBorderSelected() : p.$border}`};
 
-  ${(p) =>
-    p.$isSource
-      ? `outline: 8px solid ${p.$selected ? colorAccentGrayHover() : 'transparent'}`
-      : `outline: 8px solid ${p.$selected ? colorAccentCyan() : 'transparent'}`};
 
-  border-radius: 10px;
+  border-radius: 16px;
   position: relative;
   padding: 4px;
   height: 100%;
-  min-height: 46px;
+  min-height: 86px;
   &:hover {
     box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;
   }
@@ -526,7 +534,7 @@ export const AssetDescription = styled.div<{$color: string}>`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${(p) => p.$color};
+  color: ${colorTextLighter()};
   font-size: 12px;
 `;
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
index 3c78333291880..b9ecd3197e447 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
@@ -5,8 +5,13 @@ import {
   colorAccentReversed,
   colorBackgroundLight,
   colorBackgroundLightHover,
+  colorBackgroundLighter,
   colorBorderDefault,
+  colorLineageGroupBackground,
+  colorLineageGroupNodeBackgroundHover,
+  colorLineageGroupNodeBorder,
   colorTextLight,
+  colorTextLighter,
 } from '@dagster-io/ui-components';
 import React from 'react';
 import styled from 'styled-components';
@@ -34,7 +39,7 @@ export const GroupNodeNameAndRepo = ({group, minimal}: {minimal: boolean; group:
         >
           {withMiddleTruncation(name, {maxLength: 14})}
         </div>
-        <div style={{fontSize: 20}}>{withMiddleTruncation(location, {maxLength: 21})}</div>
+        {/* <div style={{fontSize: 20}}>{withMiddleTruncation(location, {maxLength: 21})}</div> */}
       </Box>
     );
   }
@@ -49,7 +54,7 @@ export const GroupNodeNameAndRepo = ({group, minimal}: {minimal: boolean; group:
           {withMiddleTruncation(name, {maxLength: 22})}
         </div>
       </Box>
-      <Box style={{lineHeight: '1em'}}>{withMiddleTruncation(location, {maxLength: 31})}</Box>
+      <Box style={{lineHeight: '1em', color: colorTextLight()}}>{withMiddleTruncation(location, {maxLength: 31})}</Box>
     </Box>
   );
 };
@@ -79,7 +84,7 @@ export const CollapsedGroupNode = ({
         </Box>
         {!minimal && (
           <Box padding={{horizontal: 12, bottom: 4}}>
-            <AssetDescription $color={colorTextLight()}>
+            <AssetDescription $color={colorTextLighter()}>
               {group.assetCount} {group.assetCount === 1 ? 'asset' : 'assets'}
             </AssetDescription>
           </Box>
@@ -93,35 +98,39 @@ export const CollapsedGroupNode = ({
 
 export const GroupNameTooltipStyle = JSON.stringify({
   ...NameTooltipCSS,
-  background: colorBackgroundLight(),
-  border: `1px solid ${colorBorderDefault()}`,
+  background: colorBackgroundLighter(),
+  border: `none`,
+  borderRadius: '4px',
 });
 
 const GroupStackLine = styled.div`
-  background: ${colorBackgroundLight()};
-  border-top: 2px solid ${colorAccentReversed()};
+  background: transparent;
+  border-top: 2px solid ${colorLineageGroupNodeBorder()};
   border-radius: 2px;
-  height: 4px;
 `;
 
 const CollapsedGroupNodeBox = styled.div<{$minimal: boolean}>`
-  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorBorderDefault()};
+  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorLineageGroupNodeBorder()};
   background: ${colorBackgroundLight()};
   border-radius: 8px;
   position: relative;
-  outline-bottom: 3px solid gray;
   margin-top: 8px;
 `;
 
 const CollapsedGroupNodeContainer = styled.div`
   user-select: none;
   padding: 4px;
-  transition: transform linear 120ms;
+  transition: transform linear 200ms, gap linear 200ms;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 
   &:hover {
     transform: scale(1.03);
+    gap: 3px;
     ${CollapsedGroupNodeBox} {
+      transition: background linear 200ms;
       background: ${colorBackgroundLightHover()};
     }
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ExpandedGroupNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ExpandedGroupNode.tsx
index 567d09ccb55c4..add0757626d2a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ExpandedGroupNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ExpandedGroupNode.tsx
@@ -1,10 +1,14 @@
 import {
   Box,
   Icon,
-  colorBackgroundDefault,
+  colorLineageGroupBackground,
   colorBackgroundLight,
   colorBackgroundLightHover,
   colorBorderDefault,
+  colorLineageGroupNodeBorder,
+  colorLineageGroupNodeBackground,
+  colorLineageGroupNodeBackgroundHover,
+  colorLineageGroupNodeBorderHover,
 } from '@dagster-io/ui-components';
 import React from 'react';
 import styled from 'styled-components';
@@ -46,19 +50,19 @@ const GroupOutline = styled.div<{$minimal: boolean}>`
   inset: 0;
   top: 60px;
   position: absolute;
-  background: ${colorBackgroundDefault()};
+  background: ${colorLineageGroupBackground()};
   width: 100%;
   border-radius: 10px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   pointer-events: none;
 
-  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorBorderDefault()};
+  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorLineageGroupNodeBorder()};
 `;
 
 const GroupNodeHeaderBox = styled.div<{$minimal: boolean}>`
-  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorBorderDefault()};
-  background: ${colorBackgroundLight()};
+  border: ${(p) => (p.$minimal ? '4px' : '2px')} solid ${colorLineageGroupNodeBorder()};
+  background: ${colorLineageGroupNodeBackground()};
   width: 100%;
   height: 60px;
   display: flex;
@@ -70,8 +74,13 @@ const GroupNodeHeaderBox = styled.div<{$minimal: boolean}>`
   border-bottom-right-radius: 0;
   border-bottom: 0;
   position: relative;
+  transition: 
+    background 100ms linear,
+    border-color 100ms linear;
 
   &:hover {
-    background: ${colorBackgroundLightHover()};
+    background: ${colorLineageGroupNodeBackgroundHover()};
+    border-color: ${colorLineageGroupNodeBorderHover()};
+
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx
index 8ef31cadf28f3..12841e6ee0799 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx
@@ -6,6 +6,7 @@ import {
   UnstyledButton,
   colorAccentGray,
   colorBackgroundBlue,
+  colorBackgroundLightHover,
   colorBackgroundLight,
   colorKeylineDefault,
 } from '@dagster-io/ui-components';
@@ -217,8 +218,9 @@ const GrayOnHoverBox = styled(UnstyledButton)`
   flex-shrink: 1;
   &:hover,
   &:focus-within {
-    background: ${colorBackgroundLight()};
+    background: ${colorBackgroundLightHover()};
     transition: background 100ms linear;
+    box-shadow: none;
     ${ExpandMore} {
       visibility: visible;
     }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx
index f6aede04651b0..a57034cf4aea5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/SearchFilter.tsx
@@ -1,4 +1,4 @@
-import {MenuItem, useViewport, Suggest} from '@dagster-io/ui-components';
+import {MenuItem, useViewport, Suggest, colorBorderFocussed, colorBorderHover, colorBorderDefault} from '@dagster-io/ui-components';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -64,5 +64,17 @@ export const SearchFilter = <T,>({
 const SuggestWrapper = styled.div`
   .bp4-input-group.dagster-suggest-input {
     width: 100%;
+    border-radius: 8px;
+    transition: border 200ms;
+    box-shadow: none;
+    border: 1px solid ${colorBorderDefault()};
+    :hover {
+      border: 1px solid ${colorBorderHover()};
+    }
+    :focus {
+      border: 1px solid ${colorBorderFocussed()};
+      box-shadow: none;
+      outline:none;
+    }
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx
index 61e40396fa059..6165944042b8f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx
@@ -11,7 +11,9 @@ import {
   colorBackgroundGray,
   colorBackgroundYellow,
   colorBorderDefault,
+  colorBorderFocussed,
   colorBorderHover,
+  colorTextDefault,
   colorTextYellow,
   FontFamily,
   Group,
@@ -744,7 +746,6 @@ const GanttChartContainer = styled.div`
     height: ${BOX_HEIGHT - BOX_MARGIN_Y * 2}px;
     padding: 3px;
     padding-right: 1px;
-    border: 1px solid transparent;
     border-radius: 2px;
     white-space: nowrap;
     font-family: ${FontFamily.monospace};
@@ -756,14 +757,14 @@ const GanttChartContainer = styled.div`
       top ${CSS_DURATION}ms linear,
       left ${CSS_DURATION}ms linear,
       width ${CSS_DURATION}ms linear,
-      height ${CSS_DURATION}ms linear;
+      height ${CSS_DURATION}ms linear,
+      box-shadow ${CSS_DURATION}ms linear;
 
     &.focused {
-      border: 1px solid ${colorBorderDefault()};
-      box-shadow: 0 0 0 2px ${colorAccentYellow()};
+      box-shadow: 0 0 0 2px ${colorBorderFocussed()};
     }
     &.hovered {
-      border: 1px solid ${colorBorderHover()};
+      box-shadow: 0 0 0 2px ${colorBorderFocussed()};
     }
     &.dynamic {
       filter: brightness(115%);
diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx
index 8df6ab720978b..847970abbd5a0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx
@@ -228,7 +228,7 @@ const TimescaleContainer = styled.div`
   }
   & .line {
     position: absolute;
-    border-left: 1px solid ${colorBorderDefault()};
+    border-left: 1px solid ${colorKeylineDefault()};
     transition: left ${CSS_DURATION}ms linear;
     top: 0px;
     bottom: 0px;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
index c0072158d2cfa..3471f70695301 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
@@ -4,8 +4,14 @@ import {
   IconWrapper,
   colorAccentPrimary,
   colorAccentReversed,
+  colorAccentWhite,
   colorBackgroundDefault,
+  colorBackgroundGray,
   colorBackgroundLight,
+  colorBackgroundLighter,
+  colorBackgroundLighterHover,
+  colorLineageNodeBackground,
+  colorTextDefault,
   colorTextLight,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
@@ -80,7 +86,7 @@ interface OpTagsProps {
 
 export const KNOWN_TAGS = {
   jupyter: {
-    color: '#4E4E4E',
+    color: '#929292',
     icon: jupyter,
     content: 'Jupyter',
   },
@@ -93,7 +99,6 @@ export const KNOWN_TAGS = {
     color: '#00D2D2',
     icon: noteable,
     content: 'Noteable',
-    reversed: true,
   },
   airbyte: {
     color: '#655CFC',
@@ -111,7 +116,7 @@ export const KNOWN_TAGS = {
     content: 'Snowflake',
   },
   python: {
-    color: '#35668F',
+    color: '#367EF0',
     icon: python,
     content: 'Python',
   },
@@ -126,7 +131,7 @@ export const KNOWN_TAGS = {
     content: 'dbt',
   },
   slack: {
-    color: '#4A144A',
+    color: '#803A80',
     icon: slack,
     content: 'Slack',
   },
@@ -149,18 +154,17 @@ export const KNOWN_TAGS = {
     color: '#FCBC41',
     icon: duckdb,
     content: 'DuckDB',
-    reversed: true,
   },
   tensorflow: {
     color: '#FE9413',
     icon: tensorflow,
     content: 'TensorFlow',
-    reversed: true,
   },
   pandas: {
-    color: '#130754',
+    color: '#E40385',
     icon: pandas,
     content: 'pandas',
+    reversed: true,
   },
   googlesheets: {
     color: '#23A566',
@@ -173,10 +177,9 @@ export const KNOWN_TAGS = {
     content: 'SQL',
   },
   wandb: {
-    color: '#FCB119',
+    color: '#FFBE00',
     icon: weights_and_biases,
     content: 'Weights & Biases',
-    reversed: true,
   },
   databricks: {
     color: '#FD3820',
@@ -189,12 +192,12 @@ export const KNOWN_TAGS = {
     content: 'Airflow',
   },
   datadog: {
-    color: '#632CA6',
+    color: '#7633C8',
     icon: datadog,
     content: 'Datadog',
   },
   postgres: {
-    color: '#336791',
+    color: '#136FBA',
     icon: postgres,
     content: 'Postgres',
   },
@@ -204,7 +207,7 @@ export const KNOWN_TAGS = {
     content: 'Stripe',
   },
   hightouch: {
-    color: '#07484D',
+    color: '#4EBB6C',
     icon: hightouch,
     content: 'Hightouch',
   },
@@ -214,7 +217,7 @@ export const KNOWN_TAGS = {
     content: 'Census',
   },
   hex: {
-    color: '#F5C0C0',
+    color: '#473982',
     icon: hex,
     content: 'Hex',
     reversed: true,
@@ -258,7 +261,6 @@ export const KNOWN_TAGS = {
     color: '#EDC947',
     icon: powerbi,
     content: 'Power BI',
-    reversed: true,
   },
   gcp: {
     color: '#4285F4',
@@ -271,12 +273,12 @@ export const KNOWN_TAGS = {
     content: 'Google Cloud',
   },
   looker: {
-    color: '#5F6368',
+    color: '#929292',
     icon: looker,
     content: 'Looker',
   },
   tableau: {
-    color: '#25447A',
+    color: '#2E5EB1',
     icon: tableau,
     content: 'Tableau',
   },
@@ -289,25 +291,21 @@ export const KNOWN_TAGS = {
     color: '#FF9900',
     icon: aws,
     content: 'Athena',
-    reversed: true,
   },
   s3: {
     color: '#FF9900',
     icon: aws,
     content: 'S3',
-    reversed: true,
   },
   aws: {
     color: '#FF9900',
     icon: aws,
     content: 'AWS',
-    reversed: true,
   },
   stitch: {
     color: '#FFD201',
     icon: stitch,
     content: 'Stitch',
-    reversed: true,
   },
   openai: {
     color: '#4AA081',
@@ -315,12 +313,13 @@ export const KNOWN_TAGS = {
     content: 'Open AI',
   },
   vercel: {
-    color: '#171615',
+    color: '#787878',
     icon: vercel,
     content: 'Vercel',
+    reversed: true,
   },
   github: {
-    color: '#171615',
+    color: '#A970C1',
     icon: github,
     content: 'Github',
   },
@@ -335,18 +334,18 @@ export const KNOWN_TAGS = {
     content: 'plotly',
   },
   modal: {
-    color: '#9AEE86',
+    color: '#4CDE29',
     icon: modal,
     content: 'Modal',
     reversed: true,
   },
   meltano: {
-    color: '#311772',
+    color: '#3537BE',
     icon: meltano,
     content: 'Meltano',
   },
   matplotlib: {
-    color: '#2B597C',
+    color: '#055998',
     icon: matplotlib,
     content: 'matplotlib',
   },
@@ -428,8 +427,9 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
         const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
         const text = known?.content || tag.label;
         const color = known?.color || colorTextLight();
+        const reversed = known && 'reversed' in known ? known.reversed : false;
         const textcolor =
-          known && 'reversed' in known ? colorAccentPrimary() : colorAccentReversed();
+          known && 'reversed' in known ? colorTextDefault() : colorAccentWhite();
         return (
           <Box
             key={tag.label}
@@ -437,13 +437,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
             data-tooltip={reduceText ? text : undefined}
             onClick={tag.onClick}
             style={{
-              background:
-                reduceColor && reduceText
-                  ? colorBackgroundDefault()
-                  : reduceColor
-                  ? colorBackgroundLight()
-                  : color,
-              color: reduceColor ? colorTextLight() : textcolor,
+              background: reduceColor ? colorBackgroundGray() : colorLineageNodeBackground(),
               fontWeight: reduceColor ? 500 : 700,
             }}
           >
@@ -452,14 +446,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
                 role="img"
                 $size={16}
                 $img={known.icon.src}
-                $color={
-                  reduceColor
-                    ? known && 'reversed' in known
-                      ? colorAccentPrimary()
-                      : color
-                    : textcolor
-                }
-                //$color={reduceColor ? color : textcolor}
+                $color={reversed ? colorAccentPrimary() : color}
+                // $color={reduceColor ? color : textcolor}
                 $rotation={null}
                 aria-label={tag.label}
               />
@@ -485,6 +473,7 @@ const OpTagsContainer = styled.div`
   gap: 6px;
   position: absolute;
   display: flex;
+  margin-right: 14px;
 
   & > div {
     padding: 0 8px;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
index 0f9e3c9b9155c..5735cd55aae46 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
@@ -7,7 +7,7 @@ import {
   colorBackgroundDefault,
   colorBackgroundLight,
   colorBorderDefault,
-  colorKeylineDefault,
+  colorLineageDots,
 } from '@dagster-io/ui-components';
 import {CoreColors} from '@dagster-io/ui-components/src/palettes/Colors';
 import animate from 'amator';
@@ -607,7 +607,7 @@ export class SVGViewport extends React.Component<SVGViewportProps, SVGViewportSt
   render() {
     const {children, onClick, interactor} = this.props;
     const {x, y, scale, isClickHeld} = this.state;
-    const dotsize = Math.max(7, 30 * scale);
+    const dotsize = Math.max(7, 22 * scale);
 
     return (
       <div
@@ -650,7 +650,7 @@ const SVGViewportStyles: React.CSSProperties = {
   overflow: 'hidden',
   userSelect: 'none',
   outline: 'none',
-  background: `url("data:image/svg+xml;utf8,<svg width='30px' height='30px' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'><circle fill='${colorKeylineDefault()}' cx='5' cy='5' r='5' /></svg>") repeat`,
+  background: `url("data:image/svg+xml;utf8,<svg width='30px' height='30px' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'><circle fill='${colorLineageDots()}' cx='5' cy='5' r='5' /></svg>") repeat`,
 };
 
 const ZoomSliderContainer = styled.div`
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNav.tsx
index f54e095b76c19..513c1d4ec7ef4 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNav.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNav.tsx
@@ -1,4 +1,4 @@
-import {colorBackgroundLighter, colorKeylineDefault} from '@dagster-io/ui-components';
+import {colorBackgroundDefault, colorKeylineDefault} from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -29,7 +29,7 @@ const LeftNavContainer = styled.div<{$open: boolean; $smallScreen: boolean}>`
   flex-shrink: 0;
   flex-direction: column;
   justify-content: start;
-  background: ${colorBackgroundLighter()};
+  background: ${colorBackgroundDefault()};
   box-shadow: 1px 0px 0px ${colorKeylineDefault()};
 
   ${(p) =>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
index 199cadad27214..f9bf45925c49f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
@@ -171,14 +171,14 @@ const SummaryText = styled.div`
 `;
 
 const SingleRepoNameLink = styled(Link)<{$onlyRepo: boolean}>`
-  color: ${colorTextDefault()};
+  color: ${colorTextLight()};
   display: block;
   max-width: ${({$onlyRepo}) => ($onlyRepo ? '248px' : '192px')};
   overflow-x: hidden;
   text-overflow: ellipsis;
   transition: color 100ms linear;
 
-  && {
+  &&:hover {
     color: ${colorTextDefault()};
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx
index 84b35afdc6dcb..700cfaeaf5566 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsRowComponents.tsx
@@ -2,10 +2,11 @@ import {
   FontFamily,
   MetadataTable,
   Tooltip,
+  colorBackgroundBlue,
   colorBackgroundDefault,
   colorBackgroundRed,
   colorBackgroundYellow,
-  colorBackgroundYellowHover,
+  colorBackgroundLightHover,
   colorKeylineDefault,
   colorTextDefault,
   colorTextLight,
@@ -50,7 +51,7 @@ export const Row = styled.div<{level: LogLevel; highlighted: boolean}>`
   overflow: hidden;
   border-top: 1px solid ${colorKeylineDefault()};
   background-color: ${({highlighted, level}) =>
-    highlighted ? colorBackgroundYellowHover() : bgcolorForLevel(level)};
+    highlighted ? colorBackgroundLightHover() : bgcolorForLevel(level)};
 
   color: ${(props) =>
     ({
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
index b91e8f570e734..a492c666520d5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
@@ -5,6 +5,7 @@ import {
   colorAccentGray,
   colorBackgroundGrayHover,
   colorBackgroundLight,
+  colorBackgroundLightHover,
   colorKeylineDefault,
   colorTextLight,
   colorTextLighter,
@@ -75,7 +76,7 @@ const SectionHeaderButton = styled.button<{$open: boolean}>`
   }
 
   :hover {
-    background-color: ${colorBackgroundGrayHover()};
+    background-color: ${colorBackgroundLightHover()};
   }
 
   ${IconWrapper}[aria-label="arrow_drop_down"] {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx
index 3a09f8060a0e4..90e18e9947ebe 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusDots.tsx
@@ -53,7 +53,7 @@ const pulseAnimation = keyframes`
   }
 
   50% {
-    filter: brightness(0.7);
+    filter: brightness(0.6);
   }
 
   100% {
@@ -80,6 +80,6 @@ export const RunStatusDot = styled.div<{
   background: ${({status}) => RUN_STATUS_COLORS[status]};
   &:hover {
     animation: none;
-    filter: brightness(0.7);
+    filter: brightness(0.6);
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx
index becb490316f27..ab786cf3c43a4 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusTag.tsx
@@ -4,7 +4,7 @@ import {
   Popover,
   Tag,
   colorAccentBlue,
-  colorAccentBlueHover,
+  colorAccentLavender,
   colorAccentGray,
   colorAccentGrayHover,
   colorAccentGreen,
@@ -87,7 +87,7 @@ export const runStatusToBackfillStateString = (status: RunStatus) => {
 };
 
 export const RUN_STATUS_COLORS = {
-  QUEUED: colorAccentBlueHover(),
+  QUEUED: colorAccentGray(),
   NOT_STARTED: colorAccentGrayHover(),
   MANAGED: colorAccentGray(),
   STARTED: colorAccentBlue(),
@@ -98,7 +98,7 @@ export const RUN_STATUS_COLORS = {
   CANCELED: colorAccentRed(),
 
   // Not technically a RunStatus, but useful.
-  SCHEDULED: colorAccentBlueHover(),
+  SCHEDULED: colorAccentGray(),
 };
 
 export const RunStatusTag = (props: {status: RunStatus}) => {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
index 1bc09d167a502..9290289563203 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
@@ -16,6 +16,7 @@ import {
   colorTextDefault,
   colorBackgroundDefault,
   colorBackgroundDefaultHover,
+  colorAccentPrimary,
 } from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import * as React from 'react';
@@ -441,7 +442,7 @@ const TimeDividers = (props: TimeDividersProps) => {
         {now >= start && now <= end ? (
           <>
             <NowMarker style={{left: nowLeft}}>Now</NowMarker>
-            <DividerLine style={{left: nowLeft, backgroundColor: colorAccentBlue(), zIndex: 1}} />
+            <DividerLine style={{left: nowLeft, backgroundColor: colorAccentPrimary(), zIndex: 1}} />
           </>
         ) : null}
       </DividerLines>
@@ -505,7 +506,7 @@ const DividerLine = styled.div`
 `;
 
 const NowMarker = styled.div`
-  background-color: ${colorAccentBlue()};
+  background-color: ${colorAccentPrimary()};
   border-radius: 1px;
   color: ${colorAccentReversed()};
   cursor: default;
@@ -518,7 +519,7 @@ const NowMarker = styled.div`
   user-select: none;
 `;
 
-const MIN_CHUNK_WIDTH = 2;
+const MIN_CHUNK_WIDTH = 4;
 const MIN_WIDTH_FOR_MULTIPLE = 12;
 
 const RunTimelineRow = ({
@@ -671,6 +672,7 @@ const Row = styled.div.attrs<RowProps>(({$height, $start}) => ({
   right: 0;
   top: 0;
   overflow: hidden;
+  transition: background-color 100ms linear;
 
   :hover {
     background-color: ${colorBackgroundDefaultHover()};
@@ -705,16 +707,20 @@ interface ChunkProps {
 const RunChunk = styled.div<ChunkProps>`
   align-items: center;
   background: ${({$background}) => $background};
-  border-radius: 2px;
-  height: ${ROW_HEIGHT - 4}px;
+  border-radius: 1px;
+  height: ${ROW_HEIGHT - 8}px;
   position: absolute;
-  top: 2px;
+  top: 4px;
   ${({$multiple}) => ($multiple ? `min-width: ${MIN_WIDTH_FOR_MULTIPLE}px` : null)};
 
   transition:
-    background-color 300ms linear,
-    width 300ms ease-in-out;
-
+    background 200ms linear,
+    opacity 200ms linear,
+    width 200ms ease-in-out;
+    
+  :hover{
+    opacity: 0.7;
+  }
   .chunk-popover-target {
     display: block;
     height: 100%;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/mergeStatusToBackground.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/mergeStatusToBackground.tsx
index 49078a63f66d6..87c5ea9da76fa 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/mergeStatusToBackground.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/mergeStatusToBackground.tsx
@@ -1,8 +1,11 @@
 import {
   colorAccentBlue,
-  colorAccentBlueHover,
+  colorAccentLavender,
   colorAccentGreen,
   colorAccentRed,
+  colorAccentCyan,
+  colorAccentGray,
+  colorBackgroundDisabled,
 } from '@dagster-io/ui-components';
 
 import {queuedStatuses, inProgressStatuses, failedStatuses, successStatuses} from './RunStatuses';
@@ -13,15 +16,15 @@ type BackgroundStatus = 'inProgress' | 'queued' | 'failed' | 'succeeded' | 'sche
 const statusToColor = (status: BackgroundStatus) => {
   switch (status) {
     case 'queued':
-      return colorAccentBlueHover();
+      return colorBackgroundDisabled();
+    case 'scheduled':
+      return colorBackgroundDisabled();
     case 'inProgress':
       return colorAccentBlue();
     case 'failed':
       return colorAccentRed();
     case 'succeeded':
       return colorAccentGreen();
-    case 'scheduled':
-      return colorAccentBlueHover();
   }
 };
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
index 323f23bd847ad..d975591f292b5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -9,9 +9,9 @@ import {
   colorTextLight,
   colorTextLighter,
   colorBackgroundDefault,
-  colorKeylineDefault,
-  LegacyColors,
+  colorKeylineDefault
 } from '@dagster-io/ui-components';
+import {colorDialogBackground} from '@dagster-io/ui-components/src/theme/color';
 import {CoreColors} from '@dagster-io/ui-components/src/palettes/Colors';
 import Fuse from 'fuse.js';
 import debounce from 'lodash/debounce';
@@ -220,7 +220,7 @@ export const SearchDialog = ({searchPlaceholder}: {searchPlaceholder: string}) =
         </SearchTrigger>
       </ShortcutHandler>
       <Overlay
-        backdropProps={{style: {backgroundColor: LegacyColors.WashGray}}}
+        backdropProps={{style: {backgroundColor: colorDialogBackground()}}}
         isOpen={shown}
         onClose={() => dispatch({type: 'hide-dialog'})}
         transitionDuration={100}
@@ -263,6 +263,11 @@ const SearchTrigger = styled.button`
   user-select: none;
   width: 188px;
   height: 32px;
+  transition: background-color 100ms linear;
+
+  :hover {
+    background-color: ${CoreColors.Gray850};
+  }
 
   :focus {
     border-color: ${CoreColors.Gray100};
@@ -311,7 +316,7 @@ const SearchInput = styled.input`
 `;
 
 const SlashShortcut = styled.div`
-  background-color: ${CoreColors.Gray900};
+  background-color: transparent;
   border-radius: 3px;
   color: ${CoreColors.White};
   font-size: 14px;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
index 2904af55d57c8..c9016474fa603 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
@@ -8,12 +8,14 @@ import {
   colorBackgroundDisabled,
   colorBackgroundGray,
   colorBackgroundLight,
+  colorBackgroundLightHover,
   colorBackgroundLighter,
   colorBackgroundLighterHover,
   colorKeylineDefault,
   colorTextDefault,
   colorTextDisabled,
   colorTextLight,
+  colorTextLighter,
 } from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import * as React from 'react';
@@ -309,6 +311,7 @@ const Container = styled.div`
   height: 100%;
   overflow: auto;
   background-color: ${colorBackgroundLight()};
+
 `;
 
 interface CodeLocationNameRowProps {
@@ -492,7 +495,7 @@ const usePathMatch = () => {
 };
 
 const ItemTypeLabel = styled.div`
-  color: ${colorTextLight()};
+  color: ${colorTextLighter()};
   padding: 0 12px 4px;
   font-size: 12px;
 `;
@@ -501,7 +504,7 @@ const SectionHeader = styled.button<{
   $open: boolean;
   $showRepoLocation: boolean;
 }>`
-  background: ${colorBackgroundLighter()};
+  background: ${colorBackgroundLight()};
   border: 0;
   border-radius: 0;
   cursor: pointer;
@@ -513,6 +516,7 @@ const SectionHeader = styled.button<{
   text-align: left;
   user-select: none;
   white-space: nowrap;
+  transition: background 100ms linear;
 
   width: 100%;
   margin: 0;
@@ -525,7 +529,7 @@ const SectionHeader = styled.button<{
 
   :hover,
   :active {
-    background-color: ${colorBackgroundLighterHover()};
+    background-color: ${colorBackgroundLightHover()};
   }
 
   :disabled:hover,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx
index d0939528e52bd..f9a974ddb96c7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/ReloadAllButton.tsx
@@ -26,7 +26,7 @@ export const ReloadAllButton = ({label = 'Reload all'}: {label?: string}) => {
   if (!canReloadWorkspace) {
     return (
       <Tooltip content={disabledReasons.canReloadWorkspace}>
-        <Button icon={<Icon name="refresh" />} disabled intent="none">
+        <Button outlined icon={<Icon name="refresh" />} disabled>
           {label}
         </Button>
       </Tooltip>
@@ -35,7 +35,7 @@ export const ReloadAllButton = ({label = 'Reload all'}: {label?: string}) => {
 
   return (
     <>
-      <Button onClick={tryReload} icon={<Icon name="refresh" />} loading={reloading} intent="none">
+      <Button outlined onClick={tryReload} icon={<Icon name="refresh" />} loading={reloading}>
         {label}
       </Button>
       {errorLocationId ? (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceHeader.tsx
index 2974605d5fec1..926522b1cb0d2 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceHeader.tsx
@@ -70,6 +70,7 @@ export const WorkspaceHeader = <TData extends Record<string, any>>(props: Props<
                   loading={reloading}
                   disabled={!hasReloadPermission}
                   icon={<Icon name="refresh" />}
+                  outlined
                 >
                   Reload definitions
                 </Button>