From c5108a194802c2918d31fc479e05eb9c7c4c2ea8 Mon Sep 17 00:00:00 2001
From: Anna Nguyen <anna.nguyen42@gmail.com>
Date: Tue, 18 Aug 2026 11:26:55 -0400
Subject: [PATCH 1/4] Apply Pure Light tokens and light-mode surface polish.

Bake Pure Light fills/borders into default light semantic colors and gate elevated surfaces, shadows, and overflow fixes to light mode so dark mode stays unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 assets/design-system/src/GlobalStyle.tsx      |  5 ++
 .../design-system/src/components/Button.tsx   | 54 +++++++++----
 assets/design-system/src/components/Card.tsx  | 40 ++++++++--
 .../src/components/CatalogCard.tsx            |  5 --
 assets/design-system/src/components/Chip.tsx  |  4 +-
 .../src/components/IconFrame.tsx              | 15 ++--
 .../design-system/src/components/Input2.tsx   |  6 +-
 .../design-system/src/components/ListBox.tsx  |  3 +-
 .../src/components/PopoverListBox.tsx         |  6 +-
 .../design-system/src/components/Select.tsx   | 11 ++-
 .../design-system/src/components/Sidecar.tsx  |  5 ++
 assets/design-system/src/components/Tab.tsx   | 10 ++-
 assets/design-system/src/theme/colors-base.ts |  4 +
 .../src/theme/colors-semantic-dark.ts         |  3 +
 .../src/theme/colors-semantic-light.ts        | 37 +++++----
 .../src/theme/lightElevatedSurface.ts         | 41 ++++++++++
 assets/index.html                             |  6 +-
 .../cd/services/service/ServiceComponents.tsx |  5 +-
 .../service/component/ComponentCard.tsx       |  4 +-
 .../cost-management/CostManagement.tsx        | 23 +++++-
 .../CostManagementChartView.tsx               | 37 +++++++--
 .../components/home/HomeFilterOptionCard.tsx  |  7 +-
 assets/src/components/layout/Console.tsx      |  5 +-
 .../src/components/layout/HeaderPopupMenu.tsx | 16 ++--
 assets/src/components/security/Security.tsx   |  8 ++
 .../overview/SecurityOverviewCharts.tsx       |  6 +-
 .../components/utils/sidebar/SidebarItem.tsx  | 77 ++++++++++++-------
 .../workbench/WorkbenchSidePanel.tsx          |  7 +-
 28 files changed, 333 insertions(+), 117 deletions(-)
 create mode 100644 assets/design-system/src/theme/lightElevatedSurface.ts

diff --git a/assets/design-system/src/GlobalStyle.tsx b/assets/design-system/src/GlobalStyle.tsx
index 6d5231f3db..765b85e252 100644
--- a/assets/design-system/src/GlobalStyle.tsx
+++ b/assets/design-system/src/GlobalStyle.tsx
@@ -132,6 +132,11 @@ const GlobalStyle = createGlobalStyle(({ theme }) => ({
   [lightModeSelectors]: {
     ...getSemanticColorCSSVars({ mode: 'light' }),
   },
+  // Keep html/body on the app-shell token (index.html reads --color-page-background).
+  // This is intentionally NOT fill-zero.
+  'html, body': {
+    backgroundColor: theme.colors['page-background'],
+  },
   '*': theme.partials.scrollBar({ fillLevel: 0 }),
 }))
 
diff --git a/assets/design-system/src/components/Button.tsx b/assets/design-system/src/components/Button.tsx
index b420ac5aa9..56669da2f3 100644
--- a/assets/design-system/src/components/Button.tsx
+++ b/assets/design-system/src/components/Button.tsx
@@ -12,6 +12,7 @@ import {
 import { CSSProperties, styled, useTheme } from 'styled-components'
 import type { RelativeRoutingType } from 'react-router-dom'
 import { resolveSpacersAndSanitizeCss, SpacerProps } from '../theme/spacing'
+import { lightElevatedSurface } from '../theme/lightElevatedSurface'
 import { applyNodeToRefs } from '../utils/applyNodeToRefs'
 import Flex, { FlexProps } from './Flex'
 import { Spinner } from './Spinner'
@@ -188,7 +189,8 @@ export const ButtonBaseSC = styled.button<{
   $noPadding: boolean
 }>(
   ({
-    theme: { colors, spacing, partials, borderRadiuses, boxShadows },
+    theme,
+    theme: { colors, spacing, partials, borderRadiuses, boxShadows, mode },
     $size,
     $type,
     $noPadding,
@@ -229,22 +231,34 @@ export const ButtonBaseSC = styled.button<{
     // secondary styles
     ...($type === 'secondary' && {
       color: colors['text-light'],
-      background: 'transparent',
+      background: mode === 'light' ? colors['fill-zero'] : 'transparent',
       borderColor: colors['border-input'],
+      ...lightElevatedSurface(theme),
       '&:hover': {
         color: colors['text'],
-        background: colors['action-input-hover'],
+        background:
+          mode === 'light'
+            ? colors['fill-zero-hover']
+            : colors['action-input-hover'],
         borderColor: colors['border-input'],
       },
-      '&:active': { color: colors['text'], background: 'transparent' },
+      '&:active': {
+        color: colors['text'],
+        background: mode === 'light' ? colors['fill-zero'] : 'transparent',
+      },
       '&:focus-visible': {
         color: colors['text'],
-        background: colors['action-input-hover'],
+        background:
+          mode === 'light'
+            ? colors['fill-zero-hover']
+            : colors['action-input-hover'],
+        boxShadow: 'none',
       },
       '&:disabled': {
         cursor: 'not-allowed',
         color: colors['text-disabled'],
-        background: 'transparent',
+        background: mode === 'light' ? colors['fill-zero'] : 'transparent',
+        boxShadow: 'none',
       },
     }),
     // tertiary styles
@@ -295,32 +309,42 @@ export const ButtonBaseSC = styled.button<{
     // floating styles
     ...($type === 'floating' && {
       color: colors['text-light'],
-      background: colors['fill-two'],
+      background: mode === 'light' ? colors['fill-zero'] : colors['fill-two'],
       borderColor: colors['border-input'],
-      boxShadow: boxShadows.slight,
+      ...lightElevatedSurface(theme),
+      ...(mode !== 'light' ? { boxShadow: boxShadows.slight } : {}),
       '&:hover': {
         color: colors['text'],
-        background: colors['fill-two'],
+        background: mode === 'light' ? colors['fill-zero'] : colors['fill-two'],
         borderColor: colors['border-input'],
         boxShadow: boxShadows.moderate,
       },
       '&:active': {
         color: colors['text'],
-        background: colors['fill-two-hover'],
+        background:
+          mode === 'light'
+            ? colors['fill-zero-hover']
+            : colors['fill-two-hover'],
         borderColor: colors['border-input'],
       },
       '&:focus-visible': {
         color: colors['text'],
-        background: colors['fill-two-selected'],
+        background:
+          mode === 'light'
+            ? colors['fill-zero-selected']
+            : colors['fill-two-selected'],
+        boxShadow: 'none',
       },
       '&:disabled': {
         cursor: 'not-allowed',
         color: colors['text-disabled'],
-        borderColor: colors['border-input'],
-        background: 'transparent',
+        borderColor: mode === 'light' ? 'transparent' : colors['border-input'],
+        background: mode === 'light' ? colors['fill-zero'] : 'transparent',
+        boxShadow: 'none',
         '&:hover': {
-          borderColor: colors['border-input'],
-          background: 'transparent',
+          borderColor:
+            mode === 'light' ? 'transparent' : colors['border-input'],
+          background: mode === 'light' ? colors['fill-zero'] : 'transparent',
         },
       },
     }),
diff --git a/assets/design-system/src/components/Card.tsx b/assets/design-system/src/components/Card.tsx
index c8c7a94ea9..d0458810c4 100644
--- a/assets/design-system/src/components/Card.tsx
+++ b/assets/design-system/src/components/Card.tsx
@@ -9,6 +9,8 @@ import {
   useFillLevel,
 } from './contexts/FillLevelContext'
 import WrapWithIf from './WrapWithIf'
+import { lightElevatedSurface } from '../theme/lightElevatedSurface'
+import { borderWidths } from '../theme/borders'
 
 type CornerSize = 'medium' | 'large'
 type CardFillLevel = Exclude<FillLevel, 0>
@@ -99,7 +101,10 @@ const HeaderSC = styled.div<{
       ],
     height: size === 'large' ? 48 : 40,
     padding: `0 ${theme.spacing.medium}px`,
-    overflow: 'hidden',
+    // overflow:hidden + matching radius shears the 1px border at corners
+    // and can make the white fill look clipped against the border curve.
+    overflow: theme.mode === 'light' ? 'visible' : 'hidden',
+    ...(theme.mode === 'light' && { backgroundClip: 'padding-box' }),
   })
 )
 
@@ -133,6 +138,15 @@ const CardSC = styled(Div)<{
     borderRadius: $hasHeader
       ? `0 0 ${theme.borderRadiuses[cornerSize]}px ${theme.borderRadiuses[cornerSize]}px`
       : theme.borderRadiuses[cornerSize],
+    // Soft lift on the body when there's no header wrapper; header cards
+    // elevate via OuterWrapSC so the full card (header + body) casts one shadow.
+    ...(!$hasHeader ? lightElevatedSurface(theme) : null),
+    // Soft box-shadow paints outside the border box; hidden clips it flush.
+    ...(theme.mode === 'light' && { overflow: 'visible' }),
+    // Keep opaque fill inset from the border curve (outer radius − border width)
+    ...(theme.mode === 'light' && {
+      backgroundClip: 'padding-box',
+    }),
     ...($hasTabs && {
       borderTopLeftRadius: 0, // TODO: It should be applied only if first tab is active.
     }),
@@ -163,15 +177,28 @@ const CardSC = styled(Div)<{
   })
 )
 
-const OuterWrapSC = styled.div<{ $overflowVisible: boolean }>(
-  ({ $overflowVisible: overflowVisible }) => ({
+const OuterWrapSC = styled.div<{
+  $overflowVisible: boolean
+  $cornerSize: CornerSize
+}>(({ theme, $overflowVisible: overflowVisible, $cornerSize: cornerSize }) => {
+  const outerRadius = theme.borderRadiuses[cornerSize]
+  // Inner white/header pieces use outerRadius; shadow host uses outer+border
+  // so the curve isn’t flush with the opaque fill (reads as a hard clip).
+  const shadowRadius = outerRadius + borderWidths.default
+
+  return {
     display: 'flex',
     flexDirection: 'column',
-    overflow: overflowVisible ? 'visible' : 'hidden',
+    // Light mode cards use box-shadow; overflow:hidden clips it on all sides.
+    overflow: overflowVisible || theme.mode === 'light' ? 'visible' : 'hidden',
     width: '100%',
     height: '100%',
-  })
-)
+    ...(theme.mode === 'light' && {
+      borderRadius: shadowRadius,
+      boxShadow: theme.boxShadows.slight,
+    }),
+  }
+})
 
 function Card({
   ref,
@@ -200,6 +227,7 @@ function Card({
         wrapper={
           <OuterWrapSC
             $overflowVisible={hasTabs}
+            $cornerSize={cornerSize}
             {...(hasTabs ? tabsOuterProps : outerProps)}
           />
         }
diff --git a/assets/design-system/src/components/CatalogCard.tsx b/assets/design-system/src/components/CatalogCard.tsx
index 894d3d116b..b0e506c46c 100644
--- a/assets/design-system/src/components/CatalogCard.tsx
+++ b/assets/design-system/src/components/CatalogCard.tsx
@@ -38,11 +38,6 @@ function CatalogCard({
         minWidth: 256,
         width: '100%',
       }}
-      css={
-        theme.mode === 'light'
-          ? { backgroundColor: theme.colors['fill-zero'] }
-          : undefined
-      }
       {...props}
     >
       <Flex
diff --git a/assets/design-system/src/components/Chip.tsx b/assets/design-system/src/components/Chip.tsx
index b34607c6c0..7b85928d4c 100644
--- a/assets/design-system/src/components/Chip.tsx
+++ b/assets/design-system/src/components/Chip.tsx
@@ -106,6 +106,8 @@ const ChipCardSC = styled(Card)<{
       display: 'inline-flex',
       textDecoration: 'none',
       gap: $condensed ? 6 : theme.spacing.xsmall,
+      // Chips are dense inline labels — hairline only, no Card elevation shadow
+      ...(theme.mode === 'light' && { boxShadow: 'none' }),
     },
     '.children': {
       display: 'flex',
@@ -231,7 +233,7 @@ function Chip({
           {...{
             [CHIP_CLOSE_ATTR_KEY]: '',
           }}
-          as={clickable ? 'div' : 'button'}
+          {...(clickable ? { as: 'div' } : {})}
           {...(closeButtonProps || {})}
         >
           <CloseIcon
diff --git a/assets/design-system/src/components/IconFrame.tsx b/assets/design-system/src/components/IconFrame.tsx
index c68bab9824..94c2adad95 100644
--- a/assets/design-system/src/components/IconFrame.tsx
+++ b/assets/design-system/src/components/IconFrame.tsx
@@ -7,6 +7,7 @@ import {
 import styled, { DefaultTheme } from 'styled-components'
 
 import { type SemanticColorKey } from '../theme/colors'
+import { lightElevatedSurface } from '../theme/lightElevatedSurface'
 
 import { type PolymorphicComponentProps } from '../types'
 
@@ -21,7 +22,7 @@ function typeToBG(theme: DefaultTheme): Record<Type, string | undefined> {
     tertiary: 'transparent',
     floating:
       theme.mode === 'light'
-        ? theme.colors['fill-three']
+        ? theme.colors['fill-zero']
         : theme.colors['fill-two'],
   }
 }
@@ -32,7 +33,7 @@ function typeToHoverBG(theme: DefaultTheme): Record<Type, string | undefined> {
     tertiary: theme.colors['action-input-hover'],
     floating:
       theme.mode === 'light'
-        ? theme.colors['fill-three-hover']
+        ? theme.colors['fill-zero-hover']
         : theme.colors['fill-two-hover'],
   }
 }
@@ -45,7 +46,7 @@ function typeToSelectedBG(
     tertiary: undefined,
     floating:
       theme.mode === 'light'
-        ? theme.colors['fill-three-selected']
+        ? theme.colors['fill-zero-selected']
         : theme.colors['fill-two-selected'],
   }
 }
@@ -56,7 +57,7 @@ function typeToFocusBG(theme: DefaultTheme): Record<Type, string | undefined> {
     tertiary: undefined,
     floating:
       theme.mode === 'light'
-        ? theme.colors['fill-three-selected']
+        ? theme.colors['fill-zero-selected']
         : theme.colors['fill-two-selected'],
   }
 }
@@ -67,7 +68,7 @@ function typeToBorder(theme: DefaultTheme): Record<Type, string> {
       theme.mode === 'light' ? theme.borders['fill-two'] : theme.borders.input,
     tertiary: '1px solid transparent',
     floating:
-      theme.mode === 'light' ? theme.borders['fill-two'] : theme.borders.input,
+      theme.mode === 'light' ? '1px solid transparent' : theme.borders.input,
   }
 }
 
@@ -157,7 +158,9 @@ const IconFrameSC = styled.div<{
         },
       }
     : {}),
-  ...($type === 'floating' ? { boxShadow: theme.boxShadows.slight } : {}),
+  ...($type === 'floating' && lightElevatedSurface(theme)),
+  ...($type === 'floating' &&
+    theme.mode !== 'light' && { boxShadow: theme.boxShadows.slight }),
 }))
 
 function IconFrame<E extends ElementType = 'div'>({
diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx
index d06895c7e3..7e0cabfb30 100644
--- a/assets/design-system/src/components/Input2.tsx
+++ b/assets/design-system/src/components/Input2.tsx
@@ -22,6 +22,7 @@ import { parentFillLevelToBackground, TitleContent } from './Select'
 import Tooltip from './Tooltip'
 
 import { useFormField } from './FormField'
+import { lightElevatedSurface } from '../theme/lightElevatedSurface'
 
 export type InputProps = {
   suffix?: ReactNode
@@ -126,7 +127,7 @@ const InputRootSC = styled.div<{
     ? theme.partials.text.caption
     : theme.partials.text.body2),
   display: 'flex',
-  overflow: 'hidden',
+  overflow: theme.mode === 'light' ? 'visible' : 'hidden',
   justifyContent: 'space-between',
   alignItems: 'center',
   height: 'auto',
@@ -142,11 +143,14 @@ const InputRootSC = styled.div<{
     ? theme.colors['border-danger']
     : theme.colors['border-input'],
   borderRadius: theme.borderRadiuses.medium,
+  ...lightElevatedSurface(theme, { error: $error }),
   '&:focus-within': {
     borderColor: theme.colors['border-outline-focused'],
+    boxShadow: 'none',
   },
   '&[aria-disabled=true]': {
     borderColor: theme.colors['border-disabled'],
+    boxShadow: 'none',
   },
   '&[aria-disabled=true], &[aria-disabled=true] *': {
     color: theme.colors['text-input-disabled'],
diff --git a/assets/design-system/src/components/ListBox.tsx b/assets/design-system/src/components/ListBox.tsx
index d543369cc0..d8e0687b9b 100644
--- a/assets/design-system/src/components/ListBox.tsx
+++ b/assets/design-system/src/components/ListBox.tsx
@@ -60,6 +60,7 @@ const ListBoxCard = styled(Card)(({ theme }) => ({
   flexShrink: 1,
   overflowX: 'visible',
   overflowY: 'hidden',
+  // White floating panel — match notifications / header menus
   background:
     theme.mode === 'light'
       ? theme.colors['fill-zero']
@@ -206,7 +207,7 @@ function ListBox({
     children: useItemWrappedChildren(children, header, footer),
   }
 
-  const state = useListState<object>(listStateProps as any)
+  const state = useListState(listStateProps as any)
 
   stateRef.current = state
 
diff --git a/assets/design-system/src/components/PopoverListBox.tsx b/assets/design-system/src/components/PopoverListBox.tsx
index 20cb8629fd..da97003482 100644
--- a/assets/design-system/src/components/PopoverListBox.tsx
+++ b/assets/design-system/src/components/PopoverListBox.tsx
@@ -7,7 +7,7 @@ import {
   FloatingPortal,
   type Placement,
   type UseFloatingReturn,
-} from '@floating-ui/react'
+} from '@floating-ui/react-dom-interactions'
 
 import { ListBoxUnmanaged, type ListBoxUnmanagedProps } from './ListBox'
 import { Popover, type PopoverProps } from './ReactAriaPopover'
@@ -107,7 +107,7 @@ function PopoverListBox({
         $isOpen={isOpen}
         $placement={floating.placement}
         className="popoverWrapper"
-        ref={floating.refs.setFloating}
+        ref={floating.floating}
         style={{
           position: floating.strategy,
           left: floating.x ?? 0,
@@ -137,7 +137,7 @@ function PopoverListBox({
               headerFixed={dropdownHeaderFixed}
               footerFixed={dropdownFooterFixed}
               extendStyle={{
-                boxShadow: theme.boxShadows.moderate,
+                boxShadow: theme.boxShadows.slight,
               }}
               listBoxRef={listBoxRef}
               {...listBoxProps}
diff --git a/assets/design-system/src/components/Select.tsx b/assets/design-system/src/components/Select.tsx
index 9c4e2c9247..b5856019b8 100644
--- a/assets/design-system/src/components/Select.tsx
+++ b/assets/design-system/src/components/Select.tsx
@@ -32,6 +32,7 @@ import {
 } from './SelectComboShared'
 import { type FillLevel, useFillLevel } from './contexts/FillLevelContext'
 import CaretDownIcon from './icons/CaretDownIcon'
+import { lightElevatedSurface } from '../theme/lightElevatedSurface'
 
 export const parentFillLevelToBackground = {
   0: 'fill-one',
@@ -56,7 +57,8 @@ type SelectButtonProps = {
 
 export type SelectProps = Exclude<SelectButtonProps, 'children'> & {
   children:
-    ReactElement<ListBoxItemBaseProps> | ReactElement<ListBoxItemBaseProps>[]
+    | ReactElement<ListBoxItemBaseProps>
+    | ReactElement<ListBoxItemBaseProps>[]
   dropdownHeaderFixed?: ReactNode
   dropdownFooterFixed?: ReactNode
   dropdownHeader?: ReactElement<any>
@@ -158,7 +160,10 @@ const SelectButtonInner = styled.div<{
     color: theme.colors['text-light'],
     border: theme.borders.input,
     borderRadius: theme.borderRadiuses.medium,
-    overflow: 'hidden',
+    // Soft shadow needs to paint outside the control in light mode
+    overflow: theme.mode === 'light' ? 'visible' : 'hidden',
+    ...(theme.mode === 'light' && { backgroundClip: 'padding-box' }),
+    ...lightElevatedSurface(theme, { disabled: isDisabled }),
     '.content': {
       alignItems: 'center',
       display: 'flex',
@@ -189,6 +194,7 @@ const SelectButtonInner = styled.div<{
     },
     '&:focus-visible': {
       ...theme.partials.focus.default,
+      boxShadow: 'none',
     },
     '&:hover': {
       color: theme.colors.text,
@@ -196,6 +202,7 @@ const SelectButtonInner = styled.div<{
     },
     ...(isDisabled && {
       borderColor: theme.colors['border-disabled'],
+      boxShadow: 'none',
       color: theme.colors['text-input-disabled'],
       cursor: 'not-allowed',
 
diff --git a/assets/design-system/src/components/Sidecar.tsx b/assets/design-system/src/components/Sidecar.tsx
index a7a5e2b8a4..3f2a979302 100644
--- a/assets/design-system/src/components/Sidecar.tsx
+++ b/assets/design-system/src/components/Sidecar.tsx
@@ -12,6 +12,11 @@ const SidecarSC = styled(Section)(({ theme }) => ({
   border: theme.borders.default,
   borderRadius: theme.borderRadiuses.medium,
   padding: theme.spacing.medium,
+  // Light: white metadata panel on the page canvas; dark: raised nested surface
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['fill-zero']
+      : theme.colors['fill-two'],
 }))
 const SidecarHeadingSC = styled.h1(({ theme }) => ({
   ...theme.partials.text.overline,
diff --git a/assets/design-system/src/components/Tab.tsx b/assets/design-system/src/components/Tab.tsx
index 4f8dd72f9b..121d9d76c0 100644
--- a/assets/design-system/src/components/Tab.tsx
+++ b/assets/design-system/src/components/Tab.tsx
@@ -95,14 +95,16 @@ function Tab({
             : theme.colors['text-xlight']
         }
         backgroundColor={
-          !active && activeSecondary ? theme.colors['fill-two'] : 'transparent'
+          active
+            ? theme.colors['fill-zero-selected']
+            : activeSecondary
+              ? theme.colors['fill-zero-hover']
+              : 'transparent'
         }
         {...{
           '&:hover': {
             color: theme.colors.text,
-            ...(!(!active && activeSecondary)
-              ? { backgroundColor: theme.colors['fill-zero-hover'] }
-              : {}),
+            backgroundColor: theme.colors['fill-zero-hover'],
           },
         }}
         transition="background-color 150ms ease, border-color 150ms ease, color 150ms ease"
diff --git a/assets/design-system/src/theme/colors-base.ts b/assets/design-system/src/theme/colors-base.ts
index 9b4ec30313..fb32b3d97c 100644
--- a/assets/design-system/src/theme/colors-base.ts
+++ b/assets/design-system/src/theme/colors-base.ts
@@ -26,6 +26,10 @@ export const grey = {
   100: '#E3E4E7',
   75: '#EBEDEE',
   50: '#EEF0F1',
+  // Soft steps between page canvas (25) and 50 — Pure Light hover / raised ladder
+  45: '#F0F2F3',
+  40: '#F2F4F5',
+  30: '#F7F8F8',
   25: '#F9FAFA',
 } as const satisfies Record<number, CSSProperties['color']>
 
diff --git a/assets/design-system/src/theme/colors-semantic-dark.ts b/assets/design-system/src/theme/colors-semantic-dark.ts
index 5e5230c216..ba94bb90e9 100644
--- a/assets/design-system/src/theme/colors-semantic-dark.ts
+++ b/assets/design-system/src/theme/colors-semantic-dark.ts
@@ -5,6 +5,9 @@ import { colorsCloudShellDark } from './colors-cloudshell-dark'
 import { colorsCodeBlockDark } from './colors-codeblock-dark'
 
 export const semanticColorsDark = {
+  // App shell canvas (html/body / console chrome) — independent from fill-zero
+  'page-background': '#171a21',
+
   // Fill
   //
   // fill-zero
diff --git a/assets/design-system/src/theme/colors-semantic-light.ts b/assets/design-system/src/theme/colors-semantic-light.ts
index 2af52f39d3..905a27cc7d 100644
--- a/assets/design-system/src/theme/colors-semantic-light.ts
+++ b/assets/design-system/src/theme/colors-semantic-light.ts
@@ -6,29 +6,33 @@ import { colorsCodeBlockLight } from './colors-codeblock-light'
 import { semanticColorsDark } from './colors-semantic-dark'
 
 export const semanticColorsLight = {
+  // App shell canvas (html/body / console chrome) — independent from fill-zero
+  'page-background': '#F9FAFA',
+
   // Fill
   //
+  // Pure Light: white surfaces on a soft grey page; hover/selected darken gently
   // fill-zero
   'fill-zero': '#FFFFFF',
-  'fill-zero-hover': grey[75],
-  'fill-zero-selected': '#FFFFFF',
+  'fill-zero-hover': grey[40],
+  'fill-zero-selected': grey[45],
   // fill-one
-  'fill-one': grey[50],
-  'fill-one-hover': grey[75],
-  'fill-one-selected': grey[50],
+  'fill-one': '#FFFFFF',
+  'fill-one-hover': grey[40],
+  'fill-one-selected': grey[45],
   // fill-two
-  'fill-two': grey[25],
-  'fill-two-hover': grey[125],
-  'fill-two-selected': grey[100],
+  'fill-two': grey[30],
+  'fill-two-hover': grey[45],
+  'fill-two-selected': grey[50],
   // fill-three
-  'fill-three': grey[100],
-  'fill-three-hover': grey[150],
-  'fill-three-selected': grey[175],
+  'fill-three': grey[40],
+  'fill-three-hover': grey[50],
+  'fill-three-selected': grey[50],
   // primary
   'fill-primary': purple[400],
   'fill-primary-hover': purple[350],
-  // accent- used sparingly
-  'fill-accent': '#FFFFFF',
+  // accent — nav / header chrome
+  'fill-accent': '#EEF0F1',
   // Action
   //
   // primary
@@ -55,13 +59,14 @@ export const semanticColorsLight = {
 
   // Border
   //
+  // Soft hairlines — readable on white / soft grey without hard chrome
   border: grey[100],
-  'border-fill-one': grey[50],
-  'border-fill-two': grey[100],
+  'border-fill-one': grey[100],
+  'border-fill-two': grey[125],
   'border-fill-three': grey[150],
   'border-selected': grey[800],
   'border-input': grey[100],
-  'border-disabled': grey[75],
+  'border-disabled': grey[50],
   'border-primary': purple[500],
   'border-secondary': blue[700],
   'border-info': blue[600],
diff --git a/assets/design-system/src/theme/lightElevatedSurface.ts b/assets/design-system/src/theme/lightElevatedSurface.ts
new file mode 100644
index 0000000000..72334b3840
--- /dev/null
+++ b/assets/design-system/src/theme/lightElevatedSurface.ts
@@ -0,0 +1,41 @@
+import type { DefaultTheme } from 'styled-components'
+
+/**
+ * Light-mode elevated controls (inputs, selects, cards): soft hairline + slight
+ * lift. Shadows alone disappear on white-on-white (modals) and get clipped by
+ * overflow:hidden parents — keep a real border so the box always reads.
+ */
+export function lightElevatedSurface(
+  theme: DefaultTheme,
+  {
+    error = false,
+    disabled = false,
+  }: {
+    error?: boolean
+    disabled?: boolean
+  } = {}
+): Record<string, unknown> | null {
+  if (theme.mode !== 'light') return null
+
+  if (error) {
+    return {
+      border: theme.borders.input,
+      borderColor: theme.colors['border-danger'],
+      boxShadow: 'none',
+    }
+  }
+
+  if (disabled) {
+    return {
+      border: theme.borders.input,
+      borderColor: theme.colors['border-disabled'],
+      boxShadow: 'none',
+    }
+  }
+
+  return {
+    border: theme.borders.input,
+    borderColor: theme.colors['border-input'],
+    boxShadow: theme.boxShadows.slight,
+  }
+}
diff --git a/assets/index.html b/assets/index.html
index 2dc2a4b470..07c399ddd5 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -151,14 +151,16 @@
     }
   </style>
   <style>
+    /* App shell canvas — independent from design-system fill-zero.
+       Fallbacks match the historical hardcoded values before React boots. */
     html,
     body {
-      background-color: #171a21;
+      background-color: var(--color-page-background, #171a21);
     }
 
     html[data-theme-mode='light'],
     html[data-theme-mode='light'] body {
-      background-color: #F9FAFA;
+      background-color: var(--color-page-background, #F9FAFA);
     }
   </style>
   <!--
diff --git a/assets/src/components/cd/services/service/ServiceComponents.tsx b/assets/src/components/cd/services/service/ServiceComponents.tsx
index bb6cea7185..36260ce445 100644
--- a/assets/src/components/cd/services/service/ServiceComponents.tsx
+++ b/assets/src/components/cd/services/service/ServiceComponents.tsx
@@ -135,7 +135,7 @@ export function ServiceComponents() {
                   width: '100%',
                   flexWrap: 'nowrap',
                   minWidth: 0,
-                  overflow: 'hidden',
+                  overflow: theme.mode === 'light' ? 'visible' : 'hidden',
                 }}
               >
                 <Input
@@ -207,6 +207,7 @@ function ComponentsListView({
   setComponents: (components: ServiceDeploymentComponentFragment[]) => void
   searchQuery: string
 }) {
+  const theme = useTheme()
   const { serviceId, clusterId, flowIdOrName } = useParams()
   const throttledSearchQuery = useThrottle(searchQuery, 250)
   const [showDeprecations, setShowDeprecations] = useState(false)
@@ -237,7 +238,7 @@ function ComponentsListView({
       <Flex
         direction="column"
         gap="medium"
-        overflow="hidden"
+        overflow={theme.mode === 'light' ? 'visible' : 'hidden'}
       >
         {deprecationCount > 0 && (
           <Callout
diff --git a/assets/src/components/cd/services/service/component/ComponentCard.tsx b/assets/src/components/cd/services/service/component/ComponentCard.tsx
index 82e063251f..0e0527f0c5 100644
--- a/assets/src/components/cd/services/service/component/ComponentCard.tsx
+++ b/assets/src/components/cd/services/service/component/ComponentCard.tsx
@@ -16,7 +16,8 @@ const ComponentCardSC = styled(Card)(({ theme }) => ({
   '&&': {
     display: 'flex',
     alignItems: 'center',
-    overflow: 'hidden',
+    // Soft shadows must paint outside the card; keep text truncate on .content
+    overflow: theme.mode === 'light' ? 'visible' : 'hidden',
     padding: `${theme.spacing.xxsmall}px ${theme.spacing.xsmall}px`,
     gap: theme.spacing.xsmall,
     textDecoration: 'none',
@@ -33,6 +34,7 @@ const ComponentCardSC = styled(Card)(({ theme }) => ({
     flexShrink: 1,
     flexGrow: 1,
     overflow: 'hidden',
+    minWidth: 0,
     '.name': {
       ...theme.partials.text.body2Bold,
       maxWidth: '100%',
diff --git a/assets/src/components/cost-management/CostManagement.tsx b/assets/src/components/cost-management/CostManagement.tsx
index 6c8458d66b..ba0d11476c 100644
--- a/assets/src/components/cost-management/CostManagement.tsx
+++ b/assets/src/components/cost-management/CostManagement.tsx
@@ -39,8 +39,15 @@ export function CostManagement() {
 
   return (
     <WrapperSC>
-      <SubTabs directory={directory} />
-      <Outlet context={ctx} />
+      {/*
+        Padding lives on an inner wrapper (not the scrollport). Soft card
+        shadows that paint into padding get clipped when padding is on the
+        same element as overflow:auto — Chrome clips to the content edge.
+      */}
+      <InnerSC>
+        <SubTabs directory={directory} />
+        <Outlet context={ctx} />
+      </InnerSC>
     </WrapperSC>
   )
 }
@@ -53,6 +60,18 @@ const WrapperSC = styled.div(({ theme }) => ({
   width: '100%',
   margin: 'auto',
   maxWidth: theme.breakpoints.desktopLarge,
+}))
+
+const InnerSC = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
   gap: theme.spacing.medium,
+  // Room for soft shadows outside cards (must not be on the overflow:auto node)
   padding: theme.spacing.large,
+  ...(theme.mode === 'light' && {
+    padding: theme.spacing.large + theme.spacing.small,
+  }),
+  minWidth: 0,
+  boxSizing: 'border-box',
+  width: '100%',
 }))
diff --git a/assets/src/components/cost-management/CostManagementChartView.tsx b/assets/src/components/cost-management/CostManagementChartView.tsx
index 6793e478f6..b6e016e122 100644
--- a/assets/src/components/cost-management/CostManagementChartView.tsx
+++ b/assets/src/components/cost-management/CostManagementChartView.tsx
@@ -127,13 +127,18 @@ export function CostManagementChartView() {
       direction="column"
       gap="large"
       height="100%"
-      overflow="auto"
-      paddingRight={spacing.xxsmall} // gap for scrollbar
+      minWidth={0}
+      width="100%"
+      // Parent CostManagement WrapperSC already scrolls; clipping here
+      // cuts Pure Light card shadows on the chart cards.
+      overflow="visible"
     >
       <TimeSeriesCardSC>
         <Flex
           gap="medium"
           padding="medium"
+          wrap="wrap"
+          minWidth={0}
         >
           <FormField
             label="Project"
@@ -256,12 +261,15 @@ export function CostManagementChartView() {
                 padding: spacing.large,
                 height: CM_TREE_MAP_CARD_HEIGHT,
                 cursor: 'pointer',
+                minWidth: 0,
                 ...(theme.mode === 'light' && {
                   backgroundColor: theme.colors['fill-zero'],
                 }),
               }}
               header={{
-                outerProps: { style: { flex: 1 } },
+                outerProps: {
+                  style: { flex: 1, minWidth: 0, overflow: 'visible' },
+                },
                 headerProps: {
                   style: { backgroundColor: theme.colors['fill-one'] },
                 },
@@ -286,12 +294,15 @@ export function CostManagementChartView() {
                 padding: spacing.large,
                 height: CM_TREE_MAP_CARD_HEIGHT,
                 cursor: 'pointer',
+                minWidth: 0,
                 ...(theme.mode === 'light' && {
                   backgroundColor: theme.colors['fill-zero'],
                 }),
               }}
               header={{
-                outerProps: { style: { flex: 1 } },
+                outerProps: {
+                  style: { flex: 1, minWidth: 0, overflow: 'visible' },
+                },
                 headerProps: {
                   style: { backgroundColor: theme.colors['fill-one'] },
                 },
@@ -318,17 +329,27 @@ export function CostManagementChartView() {
   )
 }
 
-const TimeSeriesCardSC = styled(Card)({
+const TimeSeriesCardSC = styled(Card)(({ theme }) => ({
   flexShrink: 0,
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'hidden',
-})
+  width: '100%',
+  minWidth: 0,
+  // Keep chart/content clipped without cutting the Pure Light card shadow
+  overflow: 'visible',
+  ...(theme.mode === 'light' && {
+    backgroundColor: theme.colors['fill-zero'],
+  }),
+}))
 
 const TimeSeriesContainerSC = styled.div(({ theme }) => ({
   flex: 1,
   width: '100%',
   minHeight: 260,
-  background: theme.colors['fill-accent'],
+  overflow: 'hidden',
+  background:
+    theme.mode === 'light'
+      ? theme.colors['fill-zero']
+      : theme.colors['fill-accent'],
   borderTop: theme.borders.default,
 }))
diff --git a/assets/src/components/home/HomeFilterOptionCard.tsx b/assets/src/components/home/HomeFilterOptionCard.tsx
index e936da59f5..4de57f77ce 100644
--- a/assets/src/components/home/HomeFilterOptionCard.tsx
+++ b/assets/src/components/home/HomeFilterOptionCard.tsx
@@ -67,8 +67,11 @@ const CardSC = styled.button<{ $selected: boolean }>(
     gap: theme.spacing.xxsmall,
     padding: theme.spacing.xsmall,
     borderRadius: theme.borderRadiuses.large,
-    border: theme.borders['fill-two'],
-    background: 'transparent',
+    border: theme.borders.input,
+    // Light panel on the chart surface — no elevation shadow
+    background:
+      theme.mode === 'light' ? theme.colors['fill-zero'] : 'transparent',
+    boxShadow: 'none',
     flex: 1,
     ...($selected && {
       background: theme.colors['fill-zero-selected'],
diff --git a/assets/src/components/layout/Console.tsx b/assets/src/components/layout/Console.tsx
index 0835a67563..f0c8807930 100644
--- a/assets/src/components/layout/Console.tsx
+++ b/assets/src/components/layout/Console.tsx
@@ -143,8 +143,5 @@ function ConsoleContent() {
 }
 
 const ConsoleRoutesSC = styled(Flex)(({ theme }) => ({
-  backgroundColor:
-    theme.mode === 'light'
-      ? theme.colors['fill-two']
-      : theme.colors['fill-zero'],
+  backgroundColor: theme.colors['page-background'],
 }))
diff --git a/assets/src/components/layout/HeaderPopupMenu.tsx b/assets/src/components/layout/HeaderPopupMenu.tsx
index 07c107ad23..732731e6c5 100644
--- a/assets/src/components/layout/HeaderPopupMenu.tsx
+++ b/assets/src/components/layout/HeaderPopupMenu.tsx
@@ -35,7 +35,7 @@ export function SimplePopupMenu({
       style={styles}
     >
       <MenuCardSC
-        fillLevel={2}
+        fillLevel={1}
         {...props}
         $linkStyles={linkStyles}
       >
@@ -47,11 +47,15 @@ export function SimplePopupMenu({
 
 const MenuCardSC = styled(Card)<{ $linkStyles?: boolean }>(
   ({ theme, $linkStyles }) => ({
-    width: 230,
-    padding: `${theme.spacing.xsmall}px 0`,
-    borderRadius: theme.borderRadiuses.medium,
-    display: 'flex',
-    flexDirection: 'column',
+    '&&': {
+      width: 230,
+      padding: `${theme.spacing.xsmall}px 0`,
+      borderRadius: theme.borderRadiuses.medium,
+      display: 'flex',
+      flexDirection: 'column',
+      // White floating panel — match notifications popover tone
+      backgroundColor: theme.colors['fill-zero'],
+    },
     ...($linkStyles && {
       [`& a, & button`]: {
         ...theme.partials.text.body2,
diff --git a/assets/src/components/security/Security.tsx b/assets/src/components/security/Security.tsx
index 5d6e0ad39e..3142779fb7 100644
--- a/assets/src/components/security/Security.tsx
+++ b/assets/src/components/security/Security.tsx
@@ -78,4 +78,12 @@ const WrapperSC = styled.div(({ theme }) => ({
   maxWidth: 1280,
   gap: theme.spacing.large,
   padding: `${theme.spacing.large}px ${theme.spacing.xxlarge}px ${theme.spacing.medium}px`,
+  // Soft card shadows paint into this padding; keep a little extra in light mode
+  // so the scrollport edge doesn’t shear them off.
+  ...(theme.mode === 'light' && {
+    paddingTop: theme.spacing.large + theme.spacing.xsmall,
+    paddingBottom: theme.spacing.medium + theme.spacing.xsmall,
+    paddingLeft: theme.spacing.xxlarge + theme.spacing.xsmall,
+    paddingRight: theme.spacing.xxlarge + theme.spacing.xsmall,
+  }),
 }))
diff --git a/assets/src/components/security/overview/SecurityOverviewCharts.tsx b/assets/src/components/security/overview/SecurityOverviewCharts.tsx
index b0e1acaadb..f6b20d1df6 100644
--- a/assets/src/components/security/overview/SecurityOverviewCharts.tsx
+++ b/assets/src/components/security/overview/SecurityOverviewCharts.tsx
@@ -260,10 +260,14 @@ function clustersByVulnCount(vulns: ClusterVulnAggregateFragment[]) {
 
 const ChartRowWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
-  overflowX: 'auto',
   gap: theme.spacing.large,
   minHeight: 'fit-content',
   flexShrink: 0,
+  // overflowX:auto makes overflow-y compute to auto too, which clips soft shadows.
+  flexWrap: 'wrap',
+  ...(theme.mode === 'light'
+    ? { padding: theme.spacing.xsmall }
+    : { overflowX: 'auto' }),
 }))
 
 const ChartWrapperSC = styled.div(({ theme }) => ({
diff --git a/assets/src/components/utils/sidebar/SidebarItem.tsx b/assets/src/components/utils/sidebar/SidebarItem.tsx
index 25f0d2ca25..0a8b0e125d 100644
--- a/assets/src/components/utils/sidebar/SidebarItem.tsx
+++ b/assets/src/components/utils/sidebar/SidebarItem.tsx
@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode, use } from 'react'
 import styled from 'styled-components'
+import chroma from 'chroma-js'
 
 import { Tooltip, WrapWithIf } from '@pluralsh/design-system'
 import { SidebarContext } from 'components/layout/Sidebar'
@@ -11,6 +12,15 @@ type SidebarItemProps = ComponentPropsWithRef<'button'> & {
   active?: boolean
 } & ({ asLink?: never } | ({ asLink: true } & LinkProps))
 
+/** Soft darken for nav chrome — lighter than table hover (avoid heavy grey pills). */
+export function navInteractionFill(fillAccent: string, amount: number) {
+  try {
+    return chroma.mix(fillAccent, '#000000', amount, 'rgb').hex()
+  } catch {
+    return fillAccent
+  }
+}
+
 export function SidebarItem({
   asLink,
   tooltip,
@@ -47,31 +57,42 @@ export function SidebarItem({
 const ItemSC = styled.button<{
   $active: boolean
   $isExpanded: boolean
-}>(({ theme, $active, $isExpanded }) => ({
-  ...theme.partials.reset.button,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: $isExpanded ? 'flex-start' : 'center',
-  gap: theme.spacing.xsmall,
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  width: $isExpanded ? '100%' : 40,
-  height: 40,
-  flexGrow: 0,
-  padding: theme.spacing.small,
-  borderRadius: '3px',
-  overflow: 'hidden',
-  color: theme.colors['icon-light'],
-  background: $active
-    ? theme.mode === 'light'
-      ? theme.colors['fill-one-selected']
-      : theme.colors['fill-zero-selected']
-    : 'transparent',
-  cursor: 'pointer',
-  '&:hover': {
-    background: !$active ? theme.colors['fill-zero-hover'] : undefined,
-  },
-  '&:focus-visible': {
-    outline: theme.borders['outline-focused'],
-  },
-}))
+}>(({ theme, $active, $isExpanded }) => {
+  const accent = theme.colors['fill-accent']
+  // Keep nav pills soft on light chrome (≪ table row hover contrast)
+  const lightActive = navInteractionFill(accent, 0.04)
+  const lightHover = navInteractionFill(accent, 0.025)
+
+  return {
+    ...theme.partials.reset.button,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: $isExpanded ? 'flex-start' : 'center',
+    gap: theme.spacing.xsmall,
+    textDecoration: 'none',
+    whiteSpace: 'nowrap',
+    width: $isExpanded ? '100%' : 40,
+    height: 40,
+    flexGrow: 0,
+    padding: theme.spacing.small,
+    borderRadius: '3px',
+    overflow: 'hidden',
+    color: theme.colors['icon-light'],
+    background: $active
+      ? theme.mode === 'light'
+        ? lightActive
+        : theme.colors['fill-zero-selected']
+      : 'transparent',
+    cursor: 'pointer',
+    '&:hover': {
+      background: !$active
+        ? theme.mode === 'light'
+          ? lightHover
+          : theme.colors['fill-zero-hover']
+        : undefined,
+    },
+    '&:focus-visible': {
+      outline: theme.borders['outline-focused'],
+    },
+  }
+})
diff --git a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
index 7f525f8de7..2050998991 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
@@ -281,7 +281,12 @@ export function WorkbenchSidePanel({
 
 const WrapperSC = styled.div(({ theme }) => ({
   alignSelf: 'stretch',
-  backgroundColor: theme.colors['fill-accent'],
+  // Light: match the workbench page canvas (not the white prompt / fill-zero).
+  // Dark: keep raised fill-one panel.
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['page-background']
+      : theme.colors['fill-one'],
   borderRight: theme.borders['fill-one'],
   display: 'flex',
   flexDirection: 'column',

From db7cabc21d83ec748ad507695e696ff60e5fa6c2 Mon Sep 17 00:00:00 2001
From: Anna Nguyen <anna.nguyen42@gmail.com>
Date: Wed, 26 Aug 2026 16:17:34 -0400
Subject: [PATCH 2/4] Polish Pure Light surfaces, preserve dark mode, and round
 user avatars.

Light-mode-only table zebra, shadows, and surface overrides; dark regressions reverted. User avatars are circular in header, profile sidebar, and user lists via Avatar theme and AppIcon rounded prop.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../design-system/src/components/AppIcon.tsx  | 48 +++++++++-----
 .../src/components/CatalogCard.tsx            |  5 ++
 .../src/components/PopoverListBox.tsx         |  4 +-
 assets/design-system/src/components/Tab.tsx   | 18 ++++--
 .../design-system/src/components/table/Tr.tsx | 15 ++++-
 .../src/components/table/colors.ts            | 64 ++++++++++++++-----
 assets/design-system/src/theme.tsx            |  2 +-
 assets/design-system/src/theme/boxShadows.ts  | 16 ++---
 assets/design-system/src/theme/colors-base.ts |  1 +
 .../src/theme/colors-semantic-dark.ts         |  5 ++
 .../src/theme/colors-semantic-light.ts        | 17 +++--
 .../components/ai/chatbot/input/ChatInput.tsx | 10 +--
 .../components/cd/clusters/ClustersCharts.tsx |  3 +
 .../src/components/home/HomeWorkbenches.tsx   |  2 +-
 assets/src/components/layout/Console.tsx      |  5 +-
 .../src/components/layout/HeaderPopupMenu.tsx | 11 ++--
 assets/src/components/layout/ProfileMenu.tsx  | 34 ++++++++--
 assets/src/components/profile/MyProfile.tsx   |  7 +-
 .../overview/SecurityOverviewCharts.tsx       |  7 +-
 assets/src/components/stacks/StacksEntry.tsx  |  4 ++
 assets/src/components/utils/UserInfo.tsx      |  1 +
 .../workbench/WorkbenchJobCreateInput.tsx     |  5 +-
 .../workbench/WorkbenchSidePanel.tsx          |  4 +-
 23 files changed, 206 insertions(+), 82 deletions(-)

diff --git a/assets/design-system/src/components/AppIcon.tsx b/assets/design-system/src/components/AppIcon.tsx
index 64a70a11c1..a472065e7f 100644
--- a/assets/design-system/src/components/AppIcon.tsx
+++ b/assets/design-system/src/components/AppIcon.tsx
@@ -19,6 +19,7 @@ type AppIconProps = {
   spacing?: AppIconSpacing
   hue?: AppIconHue
   clickable?: boolean
+  rounded?: boolean
   url?: Nullable<string>
   icon?: ReactElement<any>
   alt?: Nullable<string>
@@ -97,22 +98,33 @@ const AppIconSC = styled.div<{
   $hasBorder?: boolean
   $boxSize?: number
   $clickable?: boolean
-}>(({ theme, $color, $borderColor, $hasBorder, $boxSize, $clickable }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: $color ? theme.colors[$color] : undefined,
-  borderRadius: theme.borderRadiuses.medium,
-  border: $hasBorder ? theme.borders.default : 'none',
-  borderColor: $borderColor ? theme.colors[$borderColor] : undefined,
-  width: $boxSize,
-  height: $boxSize,
-  minWidth: $boxSize,
-  minHeight: $boxSize,
-  cursor: $clickable ? 'pointer' : 'auto',
-  overflow: 'hidden',
-  _hover: $clickable ? { backgroundColor: $borderColor } : undefined,
-}))
+  $rounded?: boolean
+}>(
+  ({
+    theme,
+    $color,
+    $borderColor,
+    $hasBorder,
+    $boxSize,
+    $clickable,
+    $rounded,
+  }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors[$color],
+    borderRadius: $rounded ? '50%' : theme.borderRadiuses.medium,
+    border: $hasBorder ? theme.borders.default : 'none',
+    borderColor: theme.colors[$borderColor],
+    width: $boxSize,
+    height: $boxSize,
+    minWidth: $boxSize,
+    minHeight: $boxSize,
+    cursor: $clickable ? 'pointer' : 'auto',
+    overflow: 'hidden',
+    _hover: $clickable ? { backgroundColor: $borderColor } : null,
+  })
+)
 
 const InitialsSC = styled.div<{
   $size: AppIconSize
@@ -140,6 +152,7 @@ function AppIcon({
   spacing = 'padding',
   hue,
   clickable = false,
+  rounded = false,
   url,
   icon,
   alt,
@@ -175,7 +188,8 @@ function AppIcon({
       $hasBorder={hasBorder}
       $boxSize={boxSize}
       $clickable={clickable}
-      onClick={clickable ? onClose : undefined}
+      $rounded={rounded}
+      onClick={clickable ? onClose : null}
       {...props}
     >
       {url ? (
diff --git a/assets/design-system/src/components/CatalogCard.tsx b/assets/design-system/src/components/CatalogCard.tsx
index b0e506c46c..894d3d116b 100644
--- a/assets/design-system/src/components/CatalogCard.tsx
+++ b/assets/design-system/src/components/CatalogCard.tsx
@@ -38,6 +38,11 @@ function CatalogCard({
         minWidth: 256,
         width: '100%',
       }}
+      css={
+        theme.mode === 'light'
+          ? { backgroundColor: theme.colors['fill-zero'] }
+          : undefined
+      }
       {...props}
     >
       <Flex
diff --git a/assets/design-system/src/components/PopoverListBox.tsx b/assets/design-system/src/components/PopoverListBox.tsx
index da97003482..d7f42166a5 100644
--- a/assets/design-system/src/components/PopoverListBox.tsx
+++ b/assets/design-system/src/components/PopoverListBox.tsx
@@ -7,7 +7,7 @@ import {
   FloatingPortal,
   type Placement,
   type UseFloatingReturn,
-} from '@floating-ui/react-dom-interactions'
+} from '@floating-ui/react'
 
 import { ListBoxUnmanaged, type ListBoxUnmanagedProps } from './ListBox'
 import { Popover, type PopoverProps } from './ReactAriaPopover'
@@ -107,7 +107,7 @@ function PopoverListBox({
         $isOpen={isOpen}
         $placement={floating.placement}
         className="popoverWrapper"
-        ref={floating.floating}
+        ref={floating.refs.setFloating}
         style={{
           position: floating.strategy,
           left: floating.x ?? 0,
diff --git a/assets/design-system/src/components/Tab.tsx b/assets/design-system/src/components/Tab.tsx
index 121d9d76c0..803710e9be 100644
--- a/assets/design-system/src/components/Tab.tsx
+++ b/assets/design-system/src/components/Tab.tsx
@@ -95,16 +95,24 @@ function Tab({
             : theme.colors['text-xlight']
         }
         backgroundColor={
-          active
-            ? theme.colors['fill-zero-selected']
-            : activeSecondary
-              ? theme.colors['fill-zero-hover']
+          theme.mode === 'light'
+            ? active
+              ? theme.colors['fill-zero-selected']
+              : activeSecondary
+                ? theme.colors['fill-zero-hover']
+                : 'transparent'
+            : !active && activeSecondary
+              ? theme.colors['fill-two']
               : 'transparent'
         }
         {...{
           '&:hover': {
             color: theme.colors.text,
-            backgroundColor: theme.colors['fill-zero-hover'],
+            ...(theme.mode === 'light'
+              ? { backgroundColor: theme.colors['fill-zero-hover'] }
+              : !(!active && activeSecondary)
+                ? { backgroundColor: theme.colors['fill-zero-hover'] }
+                : {}),
           },
         }}
         transition="background-color 150ms ease, border-color 150ms ease, color 150ms ease"
diff --git a/assets/design-system/src/components/table/Tr.tsx b/assets/design-system/src/components/table/Tr.tsx
index a0774d34e1..830f96c318 100644
--- a/assets/design-system/src/components/table/Tr.tsx
+++ b/assets/design-system/src/components/table/Tr.tsx
@@ -26,13 +26,20 @@ export const Tr = styled.tr<{
     display: 'contents',
     backgroundColor:
       theme.colors[
-        tableCellColor(fillLevel, highlighted, raised, selectable, selected)
+        tableCellColor(
+          fillLevel,
+          highlighted,
+          raised,
+          selectable,
+          selected,
+          theme.mode
+        )
       ],
     '&[data-expander-row]': {
       backgroundColor:
         theme.colors[
           expandedBgColor ??
-            tableCellHoverColor(fillLevel, selectable, selected)
+            tableCellHoverColor(fillLevel, selectable, selected, theme.mode)
         ],
     },
 
@@ -42,7 +49,9 @@ export const Tr = styled.tr<{
       // highlight when hovered, but not when hovering nested actions
       '&:not(:has(button:hover, [data-clickable="true"]:hover)):hover': {
         backgroundColor:
-          theme.colors[tableCellHoverColor(fillLevel, selectable, selected)],
+          theme.colors[
+            tableCellHoverColor(fillLevel, selectable, selected, theme.mode)
+          ],
       },
     }),
   })
diff --git a/assets/design-system/src/components/table/colors.ts b/assets/design-system/src/components/table/colors.ts
index d3c30e4213..e316456fdf 100644
--- a/assets/design-system/src/components/table/colors.ts
+++ b/assets/design-system/src/components/table/colors.ts
@@ -1,3 +1,4 @@
+import { type ColorMode } from '../../theme'
 import { type SemanticBorderKey } from '../../theme/borders'
 import { TableFillLevel } from './tableUtils'
 
@@ -31,17 +32,33 @@ const tableFillLevelToCellBg = {
   2: 'fill-two',
 } as const satisfies Record<TableFillLevel, string>
 
+/** Light: dedicated zebra tokens. Dark: legacy mapping (unchanged live behavior). */
 const tableFillLevelToRaisedCellBg = {
-  0: 'fill-zero-selected',
-  1: 'fill-one-selected',
-  2: 'fill-two-selected',
-} as const satisfies Record<TableFillLevel, string>
+  light: {
+    0: 'fill-zero-raised',
+    1: 'fill-one-raised',
+    2: 'fill-two-raised',
+  },
+  dark: {
+    0: 'fill-zero-selected',
+    1: 'fill-one-selected',
+    2: 'fill-two-selected',
+  },
+} as const satisfies Record<ColorMode, Record<TableFillLevel, string>>
 
+/** Light: true selection. Dark: legacy mapping used hover tokens for selected rows. */
 const tableFillLevelToSelectedCellBg = {
-  0: 'fill-zero-hover',
-  1: 'fill-one-hover',
-  2: 'fill-two-hover',
-} as const satisfies Record<TableFillLevel, string>
+  light: {
+    0: 'fill-zero-selected',
+    1: 'fill-one-selected',
+    2: 'fill-two-selected',
+  },
+  dark: {
+    0: 'fill-zero-hover',
+    1: 'fill-one-hover',
+    2: 'fill-two-hover',
+  },
+} as const satisfies Record<ColorMode, Record<TableFillLevel, string>>
 
 export const tableFillLevelToHighlightedCellBg = {
   0: 'fill-two',
@@ -55,6 +72,12 @@ const tableFillLevelToHoverCellBg = {
   2: 'fill-two-hover',
 } as const satisfies Record<TableFillLevel, string>
 
+const raisedCellBg = (fillLevel: TableFillLevel, mode: ColorMode) =>
+  tableFillLevelToRaisedCellBg[mode][fillLevel]
+
+const selectedCellBg = (fillLevel: TableFillLevel, mode: ColorMode) =>
+  tableFillLevelToSelectedCellBg[mode][fillLevel]
+
 export const tableHeaderColor = (
   fillLevel: TableFillLevel,
   highlighted: boolean
@@ -68,23 +91,32 @@ export const tableCellColor = (
   highlighted: boolean,
   raised: boolean,
   selectable: boolean,
-  selected: boolean
+  selected: boolean,
+  mode: ColorMode
 ) =>
   highlighted
     ? tableFillLevelToHighlightedCellBg[fillLevel]
     : selected
-      ? tableFillLevelToSelectedCellBg[fillLevel]
+      ? selectedCellBg(fillLevel, mode)
       : raised || (selectable && !selected)
-        ? tableFillLevelToRaisedCellBg[fillLevel]
+        ? raisedCellBg(fillLevel, mode)
         : tableFillLevelToCellBg[fillLevel]
 
 export const tableCellHoverColor = (
   fillLevel: TableFillLevel,
   selectable: boolean,
-  selected: boolean
-) =>
-  selectable
+  selected: boolean,
+  mode: ColorMode
+) => {
+  if (mode === 'light') {
+    return selected
+      ? selectedCellBg(fillLevel, mode)
+      : tableFillLevelToHoverCellBg[fillLevel]
+  }
+
+  return selectable
     ? selected
-      ? tableFillLevelToSelectedCellBg[fillLevel]
-      : tableFillLevelToRaisedCellBg[fillLevel]
+      ? selectedCellBg(fillLevel, mode)
+      : raisedCellBg(fillLevel, mode)
     : tableFillLevelToHoverCellBg[fillLevel]
+}
diff --git a/assets/design-system/src/theme.tsx b/assets/design-system/src/theme.tsx
index 79911440a7..16cc170751 100644
--- a/assets/design-system/src/theme.tsx
+++ b/assets/design-system/src/theme.tsx
@@ -148,7 +148,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => {
       Root: [
         {
           backgroundColor: 'action-primary',
-          borderRadius: 4, // TODO 3 or 6
+          borderRadius: '50%',
           fontWeight: 400,
         },
       ],
diff --git a/assets/design-system/src/theme/boxShadows.ts b/assets/design-system/src/theme/boxShadows.ts
index faa7a67d9b..870ed34dc3 100644
--- a/assets/design-system/src/theme/boxShadows.ts
+++ b/assets/design-system/src/theme/boxShadows.ts
@@ -29,22 +29,22 @@ export const getBoxShadows = ({ mode }: { mode: ColorMode }) =>
         }
       : {
           slight: [
-            `0px 2px 10px 0px ${shadowL.alpha(0.04)}`,
+            `0px 1px 2px 0px ${shadowL.alpha(0.03)}`,
             `0px 1px 3px 0px ${shadowL.alpha(0.04)}`,
           ].join(','),
           moderate: [
-            `0px 2px 10px 0px ${shadowL.alpha(0.08)}`,
-            `0px 2px 7px 1px ${shadowL.alpha(0.1)}`,
+            `0px 4px 12px 0px ${shadowL.alpha(0.06)}`,
+            `0px 1px 3px 0px ${shadowL.alpha(0.04)}`,
           ].join(','),
-          modal: `0px 10px 40px 0px ${shadowL.alpha(0.25)}`,
+          modal: `0px 8px 28px 0px ${shadowL.alpha(0.12)}`,
           slightPurple: [
-            `0px 2px 10px 0px ${shadowLPurple.alpha(0.04)}`,
+            `0px 1px 2px 0px ${shadowLPurple.alpha(0.03)}`,
             `0px 1px 3px 0px ${shadowLPurple.alpha(0.04)}`,
           ].join(','),
           moderatePurple: [
-            `0px 2px 10px 0px ${shadowLPurple.alpha(0.08)}`,
-            `0px 2px 7px 1px ${shadowLPurple.alpha(0.1)}`,
+            `0px 4px 12px 0px ${shadowLPurple.alpha(0.06)}`,
+            `0px 1px 3px 0px ${shadowLPurple.alpha(0.04)}`,
           ].join(','),
-          modalPurple: `0px 10px 40px 0px ${shadowLPurple.alpha(0.25)}`,
+          modalPurple: `0px 8px 28px 0px ${shadowLPurple.alpha(0.12)}`,
         }),
   }) as const satisfies Record<string, CSSProperties['boxShadow']>
diff --git a/assets/design-system/src/theme/colors-base.ts b/assets/design-system/src/theme/colors-base.ts
index fb32b3d97c..919a7bb54b 100644
--- a/assets/design-system/src/theme/colors-base.ts
+++ b/assets/design-system/src/theme/colors-base.ts
@@ -29,6 +29,7 @@ export const grey = {
   // Soft steps between page canvas (25) and 50 — Pure Light hover / raised ladder
   45: '#F0F2F3',
   40: '#F2F4F5',
+  35: '#F5F6F6',
   30: '#F7F8F8',
   25: '#F9FAFA',
 } as const satisfies Record<number, CSSProperties['color']>
diff --git a/assets/design-system/src/theme/colors-semantic-dark.ts b/assets/design-system/src/theme/colors-semantic-dark.ts
index ba94bb90e9..0bc74476a1 100644
--- a/assets/design-system/src/theme/colors-semantic-dark.ts
+++ b/assets/design-system/src/theme/colors-semantic-dark.ts
@@ -10,20 +10,25 @@ export const semanticColorsDark = {
 
   // Fill
   //
+  // `*-raised` = zebra / striped rows (light-mode table stripes; dark mirrors legacy selected step).
   // fill-zero
   'fill-zero': grey[925],
+  'fill-zero-raised': grey[900],
   'fill-zero-hover': grey[875],
   'fill-zero-selected': grey[900],
   // fill-one
   'fill-one': grey[875],
+  'fill-one-raised': grey[850],
   'fill-one-hover': grey[825],
   'fill-one-selected': grey[850],
   // fill-two
   'fill-two': grey[825],
+  'fill-two-raised': grey[800],
   'fill-two-hover': grey[775],
   'fill-two-selected': grey[800],
   // fill-three
   'fill-three': grey[775],
+  'fill-three-raised': grey[750],
   'fill-three-hover': grey[725],
   'fill-three-selected': grey[750],
   // primary
diff --git a/assets/design-system/src/theme/colors-semantic-light.ts b/assets/design-system/src/theme/colors-semantic-light.ts
index 905a27cc7d..3e6de5db2d 100644
--- a/assets/design-system/src/theme/colors-semantic-light.ts
+++ b/assets/design-system/src/theme/colors-semantic-light.ts
@@ -11,28 +11,33 @@ export const semanticColorsLight = {
 
   // Fill
   //
-  // Pure Light: white surfaces on a soft grey page; hover/selected darken gently
+  // Pure Light: white surfaces on a soft grey page.
+  // `*-raised` = zebra / striped rows — keep nearly white (matches Theme Lab Pure Light).
   // fill-zero
   'fill-zero': '#FFFFFF',
+  'fill-zero-raised': grey[25],
   'fill-zero-hover': grey[40],
   'fill-zero-selected': grey[45],
   // fill-one
   'fill-one': '#FFFFFF',
+  'fill-one-raised': grey[25],
   'fill-one-hover': grey[40],
   'fill-one-selected': grey[45],
   // fill-two
   'fill-two': grey[30],
+  'fill-two-raised': grey[30],
   'fill-two-hover': grey[45],
   'fill-two-selected': grey[50],
   // fill-three
   'fill-three': grey[40],
+  'fill-three-raised': grey[45],
   'fill-three-hover': grey[50],
   'fill-three-selected': grey[50],
   // primary
   'fill-primary': purple[400],
   'fill-primary-hover': purple[350],
   // accent — nav / header chrome
-  'fill-accent': '#EEF0F1',
+  'fill-accent': '#FFFFFF',
   // Action
   //
   // primary
@@ -60,10 +65,10 @@ export const semanticColorsLight = {
   // Border
   //
   // Soft hairlines — readable on white / soft grey without hard chrome
-  border: grey[100],
-  'border-fill-one': grey[100],
-  'border-fill-two': grey[125],
-  'border-fill-three': grey[150],
+  border: grey[75],
+  'border-fill-one': grey[75],
+  'border-fill-two': grey[100],
+  'border-fill-three': grey[125],
   'border-selected': grey[800],
   'border-input': grey[100],
   'border-disabled': grey[50],
diff --git a/assets/src/components/ai/chatbot/input/ChatInput.tsx b/assets/src/components/ai/chatbot/input/ChatInput.tsx
index 18867dc13c..e424c98350 100644
--- a/assets/src/components/ai/chatbot/input/ChatInput.tsx
+++ b/assets/src/components/ai/chatbot/input/ChatInput.tsx
@@ -158,7 +158,7 @@ export function ChatInputSimple({
   allowSubmit = true,
   loading = false,
   disabled = false,
-  bgColor = 'fill-zero-selected',
+  bgColor,
   options,
   wrapperStyles,
   enableAutoComplete = false,
@@ -188,7 +188,9 @@ export function ChatInputSimple({
   showSubmitButton?: boolean
   submitButton?: ReactNode
 } & Omit<ComponentPropsWithoutRef<typeof EditableDiv>, 'onEnter'>) {
-  const { spacing } = useTheme()
+  const { mode, spacing } = useTheme()
+  const resolvedBgColor =
+    bgColor ?? (mode === 'light' ? 'fill-zero' : 'fill-zero-selected')
   const divRef = useRef<HTMLDivElement>(null)
   const handleSubmit = () => allowSubmit && onSubmit()
 
@@ -222,7 +224,7 @@ export function ChatInputSimple({
 
   return (
     <EditableContentWrapperSC
-      $bgColor={bgColor}
+      $bgColor={resolvedBgColor}
       css={{ position: 'relative', minHeight: 130, ...wrapperStyles }}
     >
       <EditableDiv
@@ -347,7 +349,7 @@ const EditableContentWrapperSC = styled.div<{
   outline: '1px solid transparent',
 
   '&:has(div:focus)': {
-    backgroundColor: theme.colors['fill-zero-selected'],
+    backgroundColor: theme.colors[$bgColor],
     transition: 'box-shadow 0.16s ease-in-out, border 0.16s ease-in-out',
     border: theme.borders['outline-focused'],
   },
diff --git a/assets/src/components/cd/clusters/ClustersCharts.tsx b/assets/src/components/cd/clusters/ClustersCharts.tsx
index b785f7567a..1c978b2ef5 100644
--- a/assets/src/components/cd/clusters/ClustersCharts.tsx
+++ b/assets/src/components/cd/clusters/ClustersCharts.tsx
@@ -130,6 +130,9 @@ const ChartCellSC = styled.div<{ $side?: 'left' | 'right' }>(
         : `0 ${theme.borderRadiuses.large}px ${theme.borderRadiuses.large}px 0`,
     padding: theme.spacing.medium,
     height: '100%',
+    ...(theme.mode === 'light' && {
+      backgroundColor: theme.colors['fill-zero'],
+    }),
     ...($side === 'right' && { borderLeft: 'none' }),
   })
 )
diff --git a/assets/src/components/home/HomeWorkbenches.tsx b/assets/src/components/home/HomeWorkbenches.tsx
index 5e5bc24860..1d9b53d485 100644
--- a/assets/src/components/home/HomeWorkbenches.tsx
+++ b/assets/src/components/home/HomeWorkbenches.tsx
@@ -158,7 +158,7 @@ function AnnouncementBanner() {
   )
   if (dismissed) return null
   return (
-    <BannerSC fillLevel={2}>
+    <BannerSC fillLevel={0}>
       <Body2P>
         Introducing workbenches- build your own agents for DevOps.{' '}
         <BannerLinkSC
diff --git a/assets/src/components/layout/Console.tsx b/assets/src/components/layout/Console.tsx
index f0c8807930..20a22ec32c 100644
--- a/assets/src/components/layout/Console.tsx
+++ b/assets/src/components/layout/Console.tsx
@@ -143,5 +143,8 @@ function ConsoleContent() {
 }
 
 const ConsoleRoutesSC = styled(Flex)(({ theme }) => ({
-  backgroundColor: theme.colors['page-background'],
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['page-background']
+      : theme.colors['fill-zero'],
 }))
diff --git a/assets/src/components/layout/HeaderPopupMenu.tsx b/assets/src/components/layout/HeaderPopupMenu.tsx
index 732731e6c5..415bf26985 100644
--- a/assets/src/components/layout/HeaderPopupMenu.tsx
+++ b/assets/src/components/layout/HeaderPopupMenu.tsx
@@ -2,7 +2,7 @@ import { Card, CardProps } from '@pluralsh/design-system'
 import { useKeyDown } from '@react-hooks-library/core'
 import { animated, useTransition } from '@react-spring/web'
 import { Dispatch, ReactNode, SetStateAction } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 export function SimplePopupMenu({
   isOpen,
@@ -18,6 +18,7 @@ export function SimplePopupMenu({
   linkStyles?: boolean
   children: ReactNode
 } & CardProps) {
+  const theme = useTheme()
   useKeyDown(['Escape'], () => setIsOpen(false))
 
   const transitions = useTransition(isOpen ? [true] : [], {
@@ -35,7 +36,7 @@ export function SimplePopupMenu({
       style={styles}
     >
       <MenuCardSC
-        fillLevel={1}
+        fillLevel={theme.mode === 'light' ? 1 : 2}
         {...props}
         $linkStyles={linkStyles}
       >
@@ -53,8 +54,10 @@ const MenuCardSC = styled(Card)<{ $linkStyles?: boolean }>(
       borderRadius: theme.borderRadiuses.medium,
       display: 'flex',
       flexDirection: 'column',
-      // White floating panel — match notifications popover tone
-      backgroundColor: theme.colors['fill-zero'],
+      ...(theme.mode === 'light' && {
+        // White floating panel — match notifications popover tone
+        backgroundColor: theme.colors['fill-zero'],
+      }),
     },
     ...($linkStyles && {
       [`& a, & button`]: {
diff --git a/assets/src/components/layout/ProfileMenu.tsx b/assets/src/components/layout/ProfileMenu.tsx
index e53af5f8cf..d521253a66 100644
--- a/assets/src/components/layout/ProfileMenu.tsx
+++ b/assets/src/components/layout/ProfileMenu.tsx
@@ -54,6 +54,15 @@ export function ProfileMenu() {
           ref={menuBtnRef}
           tertiary
           onClick={() => setIsMenuOpen((open) => !open)}
+          css={{
+            borderRadius: '50%',
+            padding: 0,
+            ...(theme.mode === 'light' && {
+              // Tertiary hover uses a light wash — keep the avatar chrome instead
+              '&:hover': { background: 'transparent' },
+              '&:focus-visible': { background: 'transparent' },
+            }),
+          }}
           aria-haspopup="menu"
           aria-expanded={isMenuOpen}
           aria-label={
@@ -67,12 +76,26 @@ export function ProfileMenu() {
             src={me?.profile}
             size={32}
             css={{
+              transition: 'background-color 0.1s ease, filter 0.1s ease',
               ...(me?.profile
-                ? {}
+                ? {
+                    '&:hover, button:hover &': {
+                      filter:
+                        theme.mode === 'light' ? 'brightness(0.92)' : undefined,
+                    },
+                  }
                 : {
                     backgroundColor: theme.colors['fill-three'],
                     border: theme.borders.input,
                     fontSize: 12,
+                    ...(theme.mode === 'light' && {
+                      // Honorable Avatar defaults to white initials (for purple fill);
+                      // on light grey chrome use default dark text.
+                      color: theme.colors.text,
+                    }),
+                    'button:hover &, button:focus-visible &': {
+                      backgroundColor: theme.colors['fill-three-hover'],
+                    },
                   }),
             }}
           />
@@ -150,12 +173,13 @@ export function ProfileMenu() {
   )
 }
 
-const ProfileButtonSC = styled(Button)({
+const ProfileButtonSC = styled(Button)(({ theme }) => ({
   position: 'relative',
-  padding: 0,
   transition: 'filter 0.1s ease',
-  '&:hover': { filter: 'brightness(1.1)' },
-})
+  ...(theme.mode !== 'light' && {
+    '&:hover': { filter: 'brightness(1.1)' },
+  }),
+}))
 
 const ImpersonationIconSC = styled.span(({ theme }) => ({
   alignItems: 'center',
diff --git a/assets/src/components/profile/MyProfile.tsx b/assets/src/components/profile/MyProfile.tsx
index bb06125a68..8eb506f06f 100644
--- a/assets/src/components/profile/MyProfile.tsx
+++ b/assets/src/components/profile/MyProfile.tsx
@@ -46,7 +46,12 @@ export default function MyProfile() {
       >
         <PageCard
           heading={me.name}
-          icon={{ name: me.name, url: me.profile, spacing: 'none' }}
+          icon={{
+            name: me.name,
+            url: me.profile,
+            spacing: 'none',
+            rounded: true,
+          }}
           subheading={me?.email}
         />
         <TabList
diff --git a/assets/src/components/security/overview/SecurityOverviewCharts.tsx b/assets/src/components/security/overview/SecurityOverviewCharts.tsx
index f6b20d1df6..baf346a09f 100644
--- a/assets/src/components/security/overview/SecurityOverviewCharts.tsx
+++ b/assets/src/components/security/overview/SecurityOverviewCharts.tsx
@@ -260,14 +260,11 @@ function clustersByVulnCount(vulns: ClusterVulnAggregateFragment[]) {
 
 const ChartRowWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
+  overflowX: 'auto',
   gap: theme.spacing.large,
   minHeight: 'fit-content',
   flexShrink: 0,
-  // overflowX:auto makes overflow-y compute to auto too, which clips soft shadows.
-  flexWrap: 'wrap',
-  ...(theme.mode === 'light'
-    ? { padding: theme.spacing.xsmall }
-    : { overflowX: 'auto' }),
+  ...(theme.mode === 'light' && { padding: theme.spacing.xsmall }),
 }))
 
 const ChartWrapperSC = styled.div(({ theme }) => ({
diff --git a/assets/src/components/stacks/StacksEntry.tsx b/assets/src/components/stacks/StacksEntry.tsx
index 8b1c54dc21..7092f07ab2 100644
--- a/assets/src/components/stacks/StacksEntry.tsx
+++ b/assets/src/components/stacks/StacksEntry.tsx
@@ -67,6 +67,10 @@ const WrapperSC = styled.div<{ $active: boolean; $first: boolean }>(
     padding: theme.spacing.medium,
     borderLeft: theme.borders.default,
     borderRight: theme.borders.default,
+    ...(theme.mode === 'light' && {
+      // White on page-background — never transparent (same as page grey)
+      backgroundColor: theme.colors['fill-zero'],
+    }),
 
     ...($active
       ? {
diff --git a/assets/src/components/utils/UserInfo.tsx b/assets/src/components/utils/UserInfo.tsx
index f8c7abffd1..c25144aaf1 100644
--- a/assets/src/components/utils/UserInfo.tsx
+++ b/assets/src/components/utils/UserInfo.tsx
@@ -24,6 +24,7 @@ export default function UserInfo({
         name={name}
         spacing={avatar ? 'none' : undefined}
         size="xsmall"
+        rounded
       />
       <div css={{ display: 'flex', flexDirection: 'column' }}>
         <span css={{ fontWeight: 'bold' }}>{name}</span>
diff --git a/assets/src/components/workbenches/workbench/WorkbenchJobCreateInput.tsx b/assets/src/components/workbenches/workbench/WorkbenchJobCreateInput.tsx
index c3b90db94b..129f929f9d 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchJobCreateInput.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchJobCreateInput.tsx
@@ -571,7 +571,10 @@ const InputWrapperSC = styled.div({
 })
 
 const SavedPromptTooltipPromptSC = styled.div(({ theme }) => ({
-  backgroundColor: theme.colors['fill-three'],
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['fill-zero']
+      : theme.colors['fill-three'],
   borderRadius: theme.borderRadiuses.medium,
   padding: theme.spacing.small,
   minWidth: 0,
diff --git a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
index 2050998991..633cc2e775 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
@@ -282,11 +282,11 @@ export function WorkbenchSidePanel({
 const WrapperSC = styled.div(({ theme }) => ({
   alignSelf: 'stretch',
   // Light: match the workbench page canvas (not the white prompt / fill-zero).
-  // Dark: keep raised fill-one panel.
+  // Dark: keep accent chrome (unchanged from live).
   backgroundColor:
     theme.mode === 'light'
       ? theme.colors['page-background']
-      : theme.colors['fill-one'],
+      : theme.colors['fill-accent'],
   borderRight: theme.borders['fill-one'],
   display: 'flex',
   flexDirection: 'column',

From c0216eaaeb86cc584fa01cdce5efa047dbbaf11b Mon Sep 17 00:00:00 2001
From: michaeljguarino <mjg@plural.sh>
Date: Wed, 26 Aug 2026 18:10:52 -0400
Subject: [PATCH 3/4] minor light mode touchups

---
 .../design-system/src/components/AppIcon.tsx  |  8 +++---
 assets/design-system/src/components/Card.tsx  | 16 ++++++++++-
 assets/design-system/src/components/Code.tsx  | 28 +++++++++++--------
 .../design-system/src/components/ListBox.tsx  |  2 +-
 .../design-system/src/components/Markdown.tsx |  5 +++-
 .../src/components/icons/GitHubLogoIcon.tsx   |  4 +--
 assets/design-system/src/theme.tsx            |  2 +-
 .../multithread/MultiThreadViewerMessage.tsx  |  6 +++-
 assets/src/components/layout/ProfileMenu.tsx  |  2 +-
 assets/src/components/profile/MyProfile.tsx   |  1 -
 .../src/components/stacks/run/plan/Plan.tsx   |  1 +
 .../stacks/run/progress/Progress.tsx          |  1 +
 assets/src/components/utils/ClusterDistro.tsx |  4 +--
 assets/src/components/utils/UserInfo.tsx      |  1 -
 .../WorkbenchesConfiguredTools.tsx            |  1 -
 .../workbenches/WorkbenchesIntegrations.tsx   |  1 -
 .../common/WorkbenchEvalGradeBadge.tsx        |  2 +-
 .../common/WorkbenchTriggerCard.tsx           |  1 +
 .../tools/WorkbenchToolCreateOrEdit.tsx       |  1 -
 .../WorkbenchModesForm.tsx                    | 20 +++++++------
 .../WorkbenchPromptModeSelector.tsx           | 19 ++++++++++++-
 .../WorkbenchPromptOptionsSelector.tsx        | 23 +++++++++------
 .../WorkbenchPromptSupervisionOption.tsx      |  7 ++++-
 .../workbench/WorkbenchSidePanel.tsx          |  7 +----
 .../workbench/WorkbenchToolsEditModal.tsx     |  1 -
 .../create-edit/WorkbenchFormSteps.tsx        |  1 -
 26 files changed, 108 insertions(+), 57 deletions(-)

diff --git a/assets/design-system/src/components/AppIcon.tsx b/assets/design-system/src/components/AppIcon.tsx
index a472065e7f..ff032580b9 100644
--- a/assets/design-system/src/components/AppIcon.tsx
+++ b/assets/design-system/src/components/AppIcon.tsx
@@ -112,17 +112,17 @@ const AppIconSC = styled.div<{
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.colors[$color],
+    backgroundColor: $color ? theme.colors[$color] : undefined,
     borderRadius: $rounded ? '50%' : theme.borderRadiuses.medium,
     border: $hasBorder ? theme.borders.default : 'none',
-    borderColor: theme.colors[$borderColor],
+    borderColor: $borderColor ? theme.colors[$borderColor] : undefined,
     width: $boxSize,
     height: $boxSize,
     minWidth: $boxSize,
     minHeight: $boxSize,
     cursor: $clickable ? 'pointer' : 'auto',
     overflow: 'hidden',
-    _hover: $clickable ? { backgroundColor: $borderColor } : null,
+    _hover: $clickable ? { backgroundColor: $borderColor } : undefined,
   })
 )
 
@@ -189,7 +189,7 @@ function AppIcon({
       $boxSize={boxSize}
       $clickable={clickable}
       $rounded={rounded}
-      onClick={clickable ? onClose : null}
+      onClick={clickable ? onClose : undefined}
       {...props}
     >
       {url ? (
diff --git a/assets/design-system/src/components/Card.tsx b/assets/design-system/src/components/Card.tsx
index d0458810c4..9d2f1e3b1c 100644
--- a/assets/design-system/src/components/Card.tsx
+++ b/assets/design-system/src/components/Card.tsx
@@ -116,6 +116,7 @@ const CardSC = styled(Div)<{
   $selected: boolean
   $clickable: boolean
   $disabled: boolean
+  $overflowSpecified: boolean
 }>(
   ({
     theme,
@@ -126,6 +127,7 @@ const CardSC = styled(Div)<{
     $selected: selected,
     $clickable: clickable,
     $disabled: disabled,
+    $overflowSpecified,
   }) => ({
     ...theme.partials.reset.button,
     border: `1px solid ${
@@ -142,7 +144,10 @@ const CardSC = styled(Div)<{
     // elevate via OuterWrapSC so the full card (header + body) casts one shadow.
     ...(!$hasHeader ? lightElevatedSurface(theme) : null),
     // Soft box-shadow paints outside the border box; hidden clips it flush.
-    ...(theme.mode === 'light' && { overflow: 'visible' }),
+    // Skip when the caller set overflow so scrollable cards (e.g. stack logs)
+    // can still clip and scroll.
+    ...(theme.mode === 'light' &&
+      !$overflowSpecified && { overflow: 'visible' }),
     // Keep opaque fill inset from the border curve (outer radius − border width)
     ...(theme.mode === 'light' && {
       backgroundClip: 'padding-box',
@@ -211,11 +216,16 @@ function Card({
   clickable = false,
   disabled = false,
   children,
+  overflow,
+  overflowX,
+  overflowY,
   ...props
 }: CardProps) {
   const hasHeader = !!header
   const hasTabs = !!tabs
   const { size, content: headerContent, headerProps, outerProps } = header ?? {}
+  const overflowSpecified =
+    overflow != null || overflowX != null || overflowY != null
 
   const mainFillLevel = useDecideFillLevel({ fillLevel })
   const headerFillLevel = useDecideFillLevel({ fillLevel: mainFillLevel + 1 })
@@ -258,6 +268,10 @@ function Card({
             'data-clickable': 'true',
           })}
           $disabled={clickable && disabled}
+          $overflowSpecified={overflowSpecified}
+          overflow={overflow}
+          overflowX={overflowX}
+          overflowY={overflowY}
           {...props}
         >
           {children}
diff --git a/assets/design-system/src/components/Code.tsx b/assets/design-system/src/components/Code.tsx
index b383731bb8..1a1b2f482b 100644
--- a/assets/design-system/src/components/Code.tsx
+++ b/assets/design-system/src/components/Code.tsx
@@ -38,7 +38,6 @@ import {
 } from './contexts/FillLevelContext'
 import CheckIcon from './icons/CheckIcon'
 import CopyIcon from './icons/CopyIcon'
-import FileIcon from './icons/FileIcon'
 import CaretDownIcon from './icons/CaretDownIcon'
 
 type CodeProps = Omit<CardProps, 'children'> & {
@@ -83,16 +82,20 @@ function CodeHeaderUnstyled({
 
 const CodeHeader = styled(CodeHeaderUnstyled)<{ $visuallyHidden?: boolean }>(
   ({ $visuallyHidden = false, fillLevel, theme }) => ({
-    minHeight: theme.spacing.xlarge + theme.spacing.xsmall * 2,
-    padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px`,
+    minHeight: theme.spacing.large,
+    padding: `${theme.spacing.xxsmall}px ${theme.spacing.small}px`,
     borderBottom:
       fillLevel >= 1 ? theme.borders['fill-three'] : theme.borders['fill-two'],
     backgroundColor:
-      fillLevel >= 1 ? theme.colors['fill-three'] : theme.colors['fill-two'],
+      theme.mode === 'light'
+        ? theme.colors['fill-one']
+        : fillLevel >= 1
+          ? theme.colors['fill-three']
+          : theme.colors['fill-two'],
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    gap: theme.spacing.medium,
+    gap: theme.spacing.xsmall,
     borderTopLeftRadius: theme.borderRadiuses.medium + 2,
     borderTopRightRadius: theme.borderRadiuses.medium + 2,
     ...($visuallyHidden
@@ -155,8 +158,8 @@ const TitleArea = styled.div<{ $shrinkable: boolean; $preserveCase?: boolean }>(
     display: 'flex',
     flexShrink: $shrinkable ? 1 : 0,
     flexGrow: 1,
-    gap: theme.spacing.xsmall,
-    ...theme.partials.text.overline,
+    gap: theme.spacing.xxsmall,
+    ...theme.partials.text.caption,
     color: 'text-light',
     ...($preserveCase ? { textTransform: 'none' } : {}),
   })
@@ -384,8 +387,8 @@ const CodeContentSC = styled.div<{
   height: '100%',
   overflow: 'auto',
   alignItems: 'center',
-  padding: `${$multiLine ? theme.spacing.medium : theme.spacing.small}px ${
-    theme.spacing.medium
+  padding: `${$multiLine ? theme.spacing.small : theme.spacing.xsmall}px ${
+    theme.spacing.small
   }px`,
   borderBottomLeftRadius: theme.borderRadiuses.large,
   borderBottomRightRadius: theme.borderRadiuses.large,
@@ -450,7 +453,6 @@ function CodeUnstyled({
         $shrinkable={tabInterface === 'dropdown' || !tabs}
         $preserveCase={preserveTitleCase}
       >
-        <FileIcon />
         {(title || language) && <div>{title || language}</div>}
       </TitleArea>
     ) : undefined
@@ -458,7 +460,11 @@ function CodeUnstyled({
   const content = (
     <Card
       ref={ref}
-      fillLevel={toFillLevel(Math.min(inferredFillLevel + 1, 2))}
+      fillLevel={
+        theme.mode === 'light'
+          ? 1
+          : toFillLevel(Math.min(inferredFillLevel + 1, 2))
+      }
       borderColor={
         inferredFillLevel >= 1
           ? theme.colors['border-fill-three']
diff --git a/assets/design-system/src/components/ListBox.tsx b/assets/design-system/src/components/ListBox.tsx
index d8e0687b9b..07373da0e4 100644
--- a/assets/design-system/src/components/ListBox.tsx
+++ b/assets/design-system/src/components/ListBox.tsx
@@ -207,7 +207,7 @@ function ListBox({
     children: useItemWrappedChildren(children, header, footer),
   }
 
-  const state = useListState(listStateProps as any)
+  const state = useListState<object>(listStateProps as any)
 
   stateRef.current = state
 
diff --git a/assets/design-system/src/components/Markdown.tsx b/assets/design-system/src/components/Markdown.tsx
index 6d589b6bbf..87b14170c0 100644
--- a/assets/design-system/src/components/Markdown.tsx
+++ b/assets/design-system/src/components/Markdown.tsx
@@ -240,7 +240,10 @@ const MdTh = styled.th(({ theme }) => ({
 }))
 
 const MdTd = styled.td(({ theme }) => ({
-  backgroundColor: theme.colors['fill-zero-selected'],
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['fill-one']
+      : theme.colors['fill-zero-selected'],
   padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
   color: theme.colors['text-light'],
   height: 40,
diff --git a/assets/design-system/src/components/icons/GitHubLogoIcon.tsx b/assets/design-system/src/components/icons/GitHubLogoIcon.tsx
index 34b08ea3de..14ac99cc4d 100644
--- a/assets/design-system/src/components/icons/GitHubLogoIcon.tsx
+++ b/assets/design-system/src/components/icons/GitHubLogoIcon.tsx
@@ -1,6 +1,6 @@
 import createIcon from './createIcon'
 
-export default createIcon(({ size, color, fullColor }) => (
+export default createIcon(({ size, color, fullColor, mode }) => (
   <svg
     width={size}
     viewBox="0 0 16 16"
@@ -8,7 +8,7 @@ export default createIcon(({ size, color, fullColor }) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill={fullColor ? '#fff' : color}
+      fill={fullColor ? (mode === 'light' ? '#24292f' : '#fff') : color}
       fillRule="evenodd"
       d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
     />
diff --git a/assets/design-system/src/theme.tsx b/assets/design-system/src/theme.tsx
index 16cc170751..5f7229d64f 100644
--- a/assets/design-system/src/theme.tsx
+++ b/assets/design-system/src/theme.tsx
@@ -148,7 +148,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => {
       Root: [
         {
           backgroundColor: 'action-primary',
-          borderRadius: '50%',
+          borderRadius: 3,
           fontWeight: 400,
         },
       ],
diff --git a/assets/src/components/ai/chatbot/multithread/MultiThreadViewerMessage.tsx b/assets/src/components/ai/chatbot/multithread/MultiThreadViewerMessage.tsx
index 47b2249333..76c0717c11 100644
--- a/assets/src/components/ai/chatbot/multithread/MultiThreadViewerMessage.tsx
+++ b/assets/src/components/ai/chatbot/multithread/MultiThreadViewerMessage.tsx
@@ -460,6 +460,7 @@ export function SimpleAccordion({
       css={{
         background: 'none',
         border: 'none',
+        boxShadow: 'none',
         width: '100%',
         ...accordionStyles,
       }}
@@ -583,7 +584,10 @@ const ThSC = styled.th(({ theme }) => ({
 }))
 
 const TdSC = styled.td(({ theme }) => ({
-  backgroundColor: theme.colors['fill-zero-selected'],
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['fill-one']
+      : theme.colors['fill-zero-selected'],
   padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
   color: theme.colors['text-light'],
   height: 40,
diff --git a/assets/src/components/layout/ProfileMenu.tsx b/assets/src/components/layout/ProfileMenu.tsx
index d521253a66..4b0e248738 100644
--- a/assets/src/components/layout/ProfileMenu.tsx
+++ b/assets/src/components/layout/ProfileMenu.tsx
@@ -55,7 +55,7 @@ export function ProfileMenu() {
           tertiary
           onClick={() => setIsMenuOpen((open) => !open)}
           css={{
-            borderRadius: '50%',
+            borderRadius: theme.borderRadiuses.medium,
             padding: 0,
             ...(theme.mode === 'light' && {
               // Tertiary hover uses a light wash — keep the avatar chrome instead
diff --git a/assets/src/components/profile/MyProfile.tsx b/assets/src/components/profile/MyProfile.tsx
index 8eb506f06f..d3b94b9109 100644
--- a/assets/src/components/profile/MyProfile.tsx
+++ b/assets/src/components/profile/MyProfile.tsx
@@ -50,7 +50,6 @@ export default function MyProfile() {
             name: me.name,
             url: me.profile,
             spacing: 'none',
-            rounded: true,
           }}
           subheading={me?.email}
         />
diff --git a/assets/src/components/stacks/run/plan/Plan.tsx b/assets/src/components/stacks/run/plan/Plan.tsx
index e917858de6..f5168392ed 100644
--- a/assets/src/components/stacks/run/plan/Plan.tsx
+++ b/assets/src/components/stacks/run/plan/Plan.tsx
@@ -15,6 +15,7 @@ export default function StackRunPlan(): ReactNode {
       flexGrow={1}
       overflowY="auto"
       maxHeight="100%"
+      minHeight={0}
     >
       <CommandLog
         text={value}
diff --git a/assets/src/components/stacks/run/progress/Progress.tsx b/assets/src/components/stacks/run/progress/Progress.tsx
index 532b8f0d7b..30ce82e3a7 100644
--- a/assets/src/components/stacks/run/progress/Progress.tsx
+++ b/assets/src/components/stacks/run/progress/Progress.tsx
@@ -42,6 +42,7 @@ export default function StackRunProgress(): ReactNode {
         flexGrow={1}
         overflowY="auto"
         maxHeight="100%"
+        minHeight={0}
       >
         {sorted?.map((s) => (
           <Step
diff --git a/assets/src/components/utils/ClusterDistro.tsx b/assets/src/components/utils/ClusterDistro.tsx
index e85104676b..035bb7f4c6 100644
--- a/assets/src/components/utils/ClusterDistro.tsx
+++ b/assets/src/components/utils/ClusterDistro.tsx
@@ -21,7 +21,7 @@ export const ClusterProviderIcons = {
   },
   [ClusterDistro.Eks]: {
     dark: `${DISTRO_ICON_PATH}/eks-dark.svg`,
-    light: `${DISTRO_ICON_PATH}/eks-light.svg`,
+    light: `${DISTRO_ICON_PATH}/eks-dark.svg`,
   },
   [ClusterDistro.Gke]: {
     dark: `${DISTRO_ICON_PATH}/gke-dark.svg`,
@@ -37,7 +37,7 @@ export const ClusterProviderIcons = {
   },
   [ClusterDistro.Openshift]: {
     dark: `${DISTRO_ICON_PATH}/openshift-dark.svg`,
-    light: `${DISTRO_ICON_PATH}/openshift-light.svg`,
+    light: `${DISTRO_ICON_PATH}/openshift-dark.svg`,
   },
   [ClusterDistro.Generic]: {
     dark: `${DISTRO_ICON_PATH}/k8s.svg`,
diff --git a/assets/src/components/utils/UserInfo.tsx b/assets/src/components/utils/UserInfo.tsx
index c25144aaf1..f8c7abffd1 100644
--- a/assets/src/components/utils/UserInfo.tsx
+++ b/assets/src/components/utils/UserInfo.tsx
@@ -24,7 +24,6 @@ export default function UserInfo({
         name={name}
         spacing={avatar ? 'none' : undefined}
         size="xsmall"
-        rounded
       />
       <div css={{ display: 'flex', flexDirection: 'column' }}>
         <span css={{ fontWeight: 'bold' }}>{name}</span>
diff --git a/assets/src/components/workbenches/WorkbenchesConfiguredTools.tsx b/assets/src/components/workbenches/WorkbenchesConfiguredTools.tsx
index 71bc6346a2..27cc40f4a2 100644
--- a/assets/src/components/workbenches/WorkbenchesConfiguredTools.tsx
+++ b/assets/src/components/workbenches/WorkbenchesConfiguredTools.tsx
@@ -81,7 +81,6 @@ export function WorkbenchesConfiguredTools() {
                       )}
                       icon={
                         <IconFrame
-                          circle
                           type="secondary"
                           icon={
                             <WorkbenchToolIcon
diff --git a/assets/src/components/workbenches/WorkbenchesIntegrations.tsx b/assets/src/components/workbenches/WorkbenchesIntegrations.tsx
index 6fd51702b1..fa170fbdf8 100644
--- a/assets/src/components/workbenches/WorkbenchesIntegrations.tsx
+++ b/assets/src/components/workbenches/WorkbenchesIntegrations.tsx
@@ -214,7 +214,6 @@ export function WorkbenchesIntegrations() {
                               gap="medium"
                             >
                               <IconFrame
-                                circle
                                 type="secondary"
                                 icon={
                                   <WorkbenchToolIcon
diff --git a/assets/src/components/workbenches/common/WorkbenchEvalGradeBadge.tsx b/assets/src/components/workbenches/common/WorkbenchEvalGradeBadge.tsx
index 4814a94e05..1b646605e5 100644
--- a/assets/src/components/workbenches/common/WorkbenchEvalGradeBadge.tsx
+++ b/assets/src/components/workbenches/common/WorkbenchEvalGradeBadge.tsx
@@ -46,7 +46,7 @@ export function WorkbenchEvalGradeBadge({
           border: colorBorder
             ? `1px solid ${color}`
             : theme.borders['fill-two'],
-          borderRadius: '50%',
+          borderRadius: theme.borderRadiuses.medium,
           color,
           cursor: !!onClick ? 'pointer' : 'default',
           display: 'flex',
diff --git a/assets/src/components/workbenches/common/WorkbenchTriggerCard.tsx b/assets/src/components/workbenches/common/WorkbenchTriggerCard.tsx
index 4b7290d1b9..a3ca91a282 100644
--- a/assets/src/components/workbenches/common/WorkbenchTriggerCard.tsx
+++ b/assets/src/components/workbenches/common/WorkbenchTriggerCard.tsx
@@ -26,6 +26,7 @@ export const TriggerCardIconWrapperSC = styled.div(({ theme }) => ({
 export const TriggerAccordionSC = styled(Accordion)({
   background: 'none',
   border: 'none',
+  boxShadow: 'none',
   marginTop: 0,
 })
 
diff --git a/assets/src/components/workbenches/tools/WorkbenchToolCreateOrEdit.tsx b/assets/src/components/workbenches/tools/WorkbenchToolCreateOrEdit.tsx
index 02015a607d..e69594df51 100644
--- a/assets/src/components/workbenches/tools/WorkbenchToolCreateOrEdit.tsx
+++ b/assets/src/components/workbenches/tools/WorkbenchToolCreateOrEdit.tsx
@@ -190,7 +190,6 @@ export function WorkbenchToolCreateOrEdit({
           align="center"
         >
           <IconFrame
-            circle
             type="secondary"
             icon={
               <WorkbenchToolIcon
diff --git a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchModesForm.tsx b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchModesForm.tsx
index bc0705dd83..21702a7c4c 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchModesForm.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchModesForm.tsx
@@ -32,7 +32,10 @@ import {
   WorkbenchKubernetesMutationFields,
   WorkbenchVerificationLoopControl,
 } from './WorkbenchModeOptionFields'
-import { WorkbenchPromptPopover } from './WorkbenchPromptModeSelector'
+import {
+  WorkbenchPromptPopover,
+  workbenchPromptPanelSurfaces,
+} from './WorkbenchPromptModeSelector'
 import {
   attributesForPromptMode,
   CODING_AGENT_LABEL,
@@ -59,6 +62,7 @@ export function WorkbenchModesForm({
   disabled?: boolean
 }) {
   const theme = useTheme()
+  const { panelBackground, panelBorder } = workbenchPromptPanelSurfaces(theme)
   const selectedMode = value?.plan ? 'plan' : 'agent'
   const coding = value?.coding
   const kubernetes = value?.kubernetes
@@ -161,8 +165,8 @@ export function WorkbenchModesForm({
             flexDirection: 'column',
             gap: theme.spacing.large,
             padding: theme.spacing.large,
-            background: theme.colors['fill-two'],
-            border: theme.borders['fill-two'],
+            background: panelBackground,
+            border: panelBorder,
           }}
         >
           <Select
@@ -457,6 +461,7 @@ function ModeActionRow({
 }) {
   const theme = useTheme()
   const triggerRef = useRef<HTMLButtonElement>(null)
+  const { detailBackground, panelBorder } = workbenchPromptPanelSurfaces(theme)
   const { floating, triggerRef: mergedTriggerRef } = useFloatingDropdown({
     triggerRef,
     width: 360,
@@ -549,8 +554,8 @@ function ModeActionRow({
               gap: theme.spacing.small,
               width: 360,
               padding: theme.spacing.medium,
-              background: theme.colors['fill-two-selected'],
-              border: theme.borders['fill-two'],
+              background: detailBackground,
+              border: panelBorder,
               boxShadow: theme.boxShadows.moderate,
             }}
           >
@@ -578,6 +583,7 @@ function ModeCard({
   onClick: () => void
 }) {
   const theme = useTheme()
+  const { panelBackground } = workbenchPromptPanelSurfaces(theme)
 
   return (
     <button
@@ -607,9 +613,7 @@ function ModeCard({
           marginTop: 2,
           borderRadius: '50%',
           border: `1px solid ${active ? theme.colors['border-selected'] : theme.colors['border-input']}`,
-          boxShadow: active
-            ? `inset 0 0 0 3px ${theme.colors['fill-two']}`
-            : undefined,
+          boxShadow: active ? `inset 0 0 0 3px ${panelBackground}` : undefined,
           background: active ? theme.colors['action-primary'] : 'transparent',
           flexShrink: 0,
         }}
diff --git a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptModeSelector.tsx b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptModeSelector.tsx
index 78c7ee5da8..d593de23c3 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptModeSelector.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptModeSelector.tsx
@@ -9,10 +9,27 @@ import {
 import { type CSSProperties, type ReactNode } from 'react'
 import { to, useTransition } from '@react-spring/web'
 import { FloatingPortal, type UseFloatingReturn } from '@floating-ui/react'
-import { useTheme } from 'styled-components'
+import { type DefaultTheme, useTheme } from 'styled-components'
 import { type WorkbenchPromptModeConfig } from './WorkbenchPromptModeDetails'
 import { type WorkbenchPromptMode } from './workbenchPromptModes'
 
+export function workbenchPromptPanelSurfaces(theme: DefaultTheme) {
+  const isLight = theme.mode === 'light'
+
+  return {
+    panelBackground: isLight
+      ? theme.colors['fill-zero']
+      : theme.colors['fill-two'],
+    detailBackground: isLight
+      ? theme.colors['fill-zero-hover']
+      : theme.colors['fill-two-selected'],
+    modeItemBackground: isLight
+      ? theme.colors['fill-zero-selected']
+      : theme.colors['fill-two-hover'],
+    panelBorder: isLight ? theme.borders.input : theme.borders['fill-two'],
+  }
+}
+
 export const WORKBENCH_PROMPT_MODES: (WorkbenchPromptModeConfig & {
   mode: WorkbenchPromptMode
 })[] = [
diff --git a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptOptionsSelector.tsx b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptOptionsSelector.tsx
index 55427aee53..607d54948c 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptOptionsSelector.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptOptionsSelector.tsx
@@ -40,7 +40,10 @@ import {
   WorkbenchCodingSupervisionFields,
   WorkbenchKubernetesMutationFields,
 } from './WorkbenchModeOptionFields'
-import { WorkbenchPromptPopover } from './WorkbenchPromptModeSelector'
+import {
+  WorkbenchPromptPopover,
+  workbenchPromptPanelSurfaces,
+} from './WorkbenchPromptModeSelector'
 import {
   CODING_AGENT_LABEL,
   disableKubernetesModes,
@@ -75,6 +78,7 @@ export function WorkbenchPromptOptionsSelector({
   workbenchModes?: WorkbenchJobModes | null
 }) {
   const theme = useTheme()
+  const { panelBackground, panelBorder } = workbenchPromptPanelSurfaces(theme)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [sidePanel, setSidePanel] = useState<SidePanel | null>(null)
@@ -160,8 +164,8 @@ export function WorkbenchPromptOptionsSelector({
               flexShrink: 0,
               overflowY: 'auto',
               padding: `${theme.spacing.small}px ${theme.spacing.medium}px`,
-              backgroundColor: theme.colors['fill-two'],
-              border: 'none',
+              backgroundColor: panelBackground,
+              border: theme.mode === 'light' ? panelBorder : 'none',
               borderRadius: sidePanel
                 ? `${theme.borderRadiuses.large}px 0 0 ${theme.borderRadiuses.large}px`
                 : theme.borderRadiuses.large,
@@ -418,6 +422,7 @@ function PromptOptionRow({
   onOpen: () => void
 }) {
   const theme = useTheme()
+  const { modeItemBackground } = workbenchPromptPanelSurfaces(theme)
 
   return (
     <button
@@ -431,11 +436,11 @@ function PromptOptionRow({
         padding: theme.spacing.xsmall,
         color: theme.colors.text,
         textAlign: 'left',
-        background: active ? theme.colors['fill-two-hover'] : 'transparent',
+        background: active ? modeItemBackground : 'transparent',
         border: 0,
         borderRadius: theme.borderRadiuses.medium,
         cursor: 'pointer',
-        '&:hover': { background: theme.colors['fill-two-hover'] },
+        '&:hover': { background: modeItemBackground },
       }}
     >
       <Flex
@@ -559,6 +564,7 @@ function KubernetesSidePanel({
 
 function SidePanelContainer({ children }: { children: ReactNode }) {
   const theme = useTheme()
+  const { detailBackground, panelBorder } = workbenchPromptPanelSurfaces(theme)
 
   return (
     <Flex
@@ -571,8 +577,8 @@ function SidePanelContainer({ children }: { children: ReactNode }) {
         maxHeight: '100%',
         minHeight: 0,
         overflowY: 'auto',
-        background: theme.colors['fill-two-selected'],
-        border: theme.borders['fill-two'],
+        background: detailBackground,
+        border: panelBorder,
         borderRadius: `0 ${theme.borderRadiuses.large}px ${theme.borderRadiuses.large}px 0`,
         boxShadow: theme.boxShadows.moderate,
       }}
@@ -653,6 +659,7 @@ function SelectedOptionPill({
 
 function Divider() {
   const theme = useTheme()
+  const { panelBorder } = workbenchPromptPanelSurfaces(theme)
 
-  return <div css={{ borderTop: theme.borders['fill-two'] }} />
+  return <div css={{ borderTop: panelBorder }} />
 }
diff --git a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptSupervisionOption.tsx b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptSupervisionOption.tsx
index c28d043c11..f1cce02056 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptSupervisionOption.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchPromptModeSelector/WorkbenchPromptSupervisionOption.tsx
@@ -2,6 +2,7 @@ import { Checkbox, Flex } from '@pluralsh/design-system'
 import { Body2BoldP, CaptionP } from 'components/utils/typography/Text'
 import type { ReactElement } from 'react'
 import { useTheme } from 'styled-components'
+import { workbenchPromptPanelSurfaces } from './WorkbenchPromptModeSelector'
 
 export function WorkbenchPromptSupervisionOption({
   icon,
@@ -17,6 +18,7 @@ export function WorkbenchPromptSupervisionOption({
   onChange: (checked: boolean) => void
 }) {
   const theme = useTheme()
+  const { modeItemBackground } = workbenchPromptPanelSurfaces(theme)
 
   return (
     <button
@@ -34,7 +36,10 @@ export function WorkbenchPromptSupervisionOption({
         cursor: 'pointer',
         textAlign: 'left',
         '&:hover': {
-          backgroundColor: theme.colors['fill-three-hover'],
+          backgroundColor:
+            theme.mode === 'light'
+              ? modeItemBackground
+              : theme.colors['fill-three-hover'],
         },
       }}
     >
diff --git a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
index 633cc2e775..7f525f8de7 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchSidePanel.tsx
@@ -281,12 +281,7 @@ export function WorkbenchSidePanel({
 
 const WrapperSC = styled.div(({ theme }) => ({
   alignSelf: 'stretch',
-  // Light: match the workbench page canvas (not the white prompt / fill-zero).
-  // Dark: keep accent chrome (unchanged from live).
-  backgroundColor:
-    theme.mode === 'light'
-      ? theme.colors['page-background']
-      : theme.colors['fill-accent'],
+  backgroundColor: theme.colors['fill-accent'],
   borderRight: theme.borders['fill-one'],
   display: 'flex',
   flexDirection: 'column',
diff --git a/assets/src/components/workbenches/workbench/WorkbenchToolsEditModal.tsx b/assets/src/components/workbenches/workbench/WorkbenchToolsEditModal.tsx
index f16b879d02..3bb4ef5757 100644
--- a/assets/src/components/workbenches/workbench/WorkbenchToolsEditModal.tsx
+++ b/assets/src/components/workbenches/workbench/WorkbenchToolsEditModal.tsx
@@ -256,7 +256,6 @@ export function WorkbenchToolsEditModal({
                             css={{ minWidth: 0, flex: 1 }}
                           >
                             <IconFrame
-                              circle
                               type="secondary"
                               icon={
                                 <WorkbenchToolIcon
diff --git a/assets/src/components/workbenches/workbench/create-edit/WorkbenchFormSteps.tsx b/assets/src/components/workbenches/workbench/create-edit/WorkbenchFormSteps.tsx
index 15de2d846d..20bf2a8c99 100644
--- a/assets/src/components/workbenches/workbench/create-edit/WorkbenchFormSteps.tsx
+++ b/assets/src/components/workbenches/workbench/create-edit/WorkbenchFormSteps.tsx
@@ -946,7 +946,6 @@ export function WorkbenchAttachToolsStep({
                       css={{ minWidth: 0, flex: 1 }}
                     >
                       <IconFrame
-                        circle
                         type="secondary"
                         icon={
                           <WorkbenchToolIcon

From 337751f1ab39464241bd50344862e123e9e59780 Mon Sep 17 00:00:00 2001
From: michaeljguarino <mjg@plural.sh>
Date: Wed, 26 Aug 2026 18:43:29 -0400
Subject: [PATCH 4/4] more fixes

---
 assets/design-system/src/components/Code.tsx  |  9 ++-
 .../src/components/InlineCode.tsx             |  5 +-
 .../design-system/src/components/Select.tsx   |  3 +-
 .../src/components/codeLanguageIcons.tsx      | 70 +++++++++++++++++++
 .../src/components/icons/AnsibleIcon.tsx      |  6 +-
 .../src/components/icons/CSharpLogoIcon.tsx   | 17 +++++
 .../src/components/icons/CppLogoIcon.tsx      | 17 +++++
 .../src/components/icons/ElixirLogoIcon.tsx   | 17 +++++
 .../src/components/icons/GoLogoIcon.tsx       | 17 +++++
 .../src/components/icons/JavaLogoIcon.tsx     | 34 +++++++++
 .../components/icons/JavaScriptLogoIcon.tsx   | 17 +++++
 .../src/components/icons/PhpLogoIcon.tsx      | 17 +++++
 .../src/components/icons/PythonLogoIcon.tsx   | 17 +++++
 .../src/components/icons/RubyLogoIcon.tsx     | 17 +++++
 .../src/components/icons/RustLogoIcon.tsx     | 17 +++++
 .../src/components/icons/ScalaLogoIcon.tsx    | 17 +++++
 .../components/icons/TypeScriptLogoIcon.tsx   | 17 +++++
 .../src/components/icons/YamlLogoIcon.tsx     | 17 +++++
 assets/design-system/src/hljs.ts              |  2 +
 assets/design-system/src/icons.ts             | 13 ++++
 .../src/markdoc/components/MdBaseNodes.tsx    |  5 +-
 .../agent-runs/details/AIAgentRunMessages.tsx | 15 ++--
 assets/src/components/stacks/StacksEntry.tsx  | 19 ++---
 .../stacks/common/StackTypeIcon.tsx           |  2 +-
 24 files changed, 367 insertions(+), 20 deletions(-)
 create mode 100644 assets/design-system/src/components/codeLanguageIcons.tsx
 create mode 100644 assets/design-system/src/components/icons/CSharpLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/CppLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/ElixirLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/GoLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/JavaLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/JavaScriptLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/PhpLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/PythonLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/RubyLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/RustLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/ScalaLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/TypeScriptLogoIcon.tsx
 create mode 100644 assets/design-system/src/components/icons/YamlLogoIcon.tsx

diff --git a/assets/design-system/src/components/Code.tsx b/assets/design-system/src/components/Code.tsx
index 1a1b2f482b..e0e14ca945 100644
--- a/assets/design-system/src/components/Code.tsx
+++ b/assets/design-system/src/components/Code.tsx
@@ -36,6 +36,7 @@ import {
   toFillLevel,
   useFillLevel,
 } from './contexts/FillLevelContext'
+import { getCodeLanguageIcon } from './codeLanguageIcons'
 import CheckIcon from './icons/CheckIcon'
 import CopyIcon from './icons/CopyIcon'
 import CaretDownIcon from './icons/CaretDownIcon'
@@ -83,7 +84,7 @@ function CodeHeaderUnstyled({
 const CodeHeader = styled(CodeHeaderUnstyled)<{ $visuallyHidden?: boolean }>(
   ({ $visuallyHidden = false, fillLevel, theme }) => ({
     minHeight: theme.spacing.large,
-    padding: `${theme.spacing.xxsmall}px ${theme.spacing.small}px`,
+    padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
     borderBottom:
       fillLevel >= 1 ? theme.borders['fill-three'] : theme.borders['fill-two'],
     backgroundColor:
@@ -156,6 +157,7 @@ type CodeTabData = {
 const TitleArea = styled.div<{ $shrinkable: boolean; $preserveCase?: boolean }>(
   ({ $shrinkable, $preserveCase = false, theme }) => ({
     display: 'flex',
+    alignItems: 'center',
     flexShrink: $shrinkable ? 1 : 0,
     flexGrow: 1,
     gap: theme.spacing.xxsmall,
@@ -447,12 +449,17 @@ function CodeUnstyled({
     [onSelectedTabChange, selectedTabKey, tabInterface, setTabInterface, tabs]
   )
 
+  const selectedTabLanguage = tabs?.find(
+    (tab) => tab.key === selectedTabKey
+  )?.language
+
   const titleArea =
     (tabs && title) || !tabs ? (
       <TitleArea
         $shrinkable={tabInterface === 'dropdown' || !tabs}
         $preserveCase={preserveTitleCase}
       >
+        {getCodeLanguageIcon(language || selectedTabLanguage)}
         {(title || language) && <div>{title || language}</div>}
       </TitleArea>
     ) : undefined
diff --git a/assets/design-system/src/components/InlineCode.tsx b/assets/design-system/src/components/InlineCode.tsx
index c284cbb093..a9d6fd8d6e 100644
--- a/assets/design-system/src/components/InlineCode.tsx
+++ b/assets/design-system/src/components/InlineCode.tsx
@@ -52,7 +52,10 @@ const CodeElt = styled.code<{ $parentFillLevel: FillLevel }>(
     borderColor: (theme.colors as any)[
       parentFillLevelToBorderColor[parentFillLevel]
     ],
-    backgroundColor: theme.colors['fill-one'],
+    backgroundColor:
+      theme.mode === 'light'
+        ? theme.colors['fill-two']
+        : theme.colors['fill-one'],
     'a:any-link &': {
       color: theme.colors['action-link-inline'],
     },
diff --git a/assets/design-system/src/components/Select.tsx b/assets/design-system/src/components/Select.tsx
index b5856019b8..efc4696ebe 100644
--- a/assets/design-system/src/components/Select.tsx
+++ b/assets/design-system/src/components/Select.tsx
@@ -57,8 +57,7 @@ type SelectButtonProps = {
 
 export type SelectProps = Exclude<SelectButtonProps, 'children'> & {
   children:
-    | ReactElement<ListBoxItemBaseProps>
-    | ReactElement<ListBoxItemBaseProps>[]
+    ReactElement<ListBoxItemBaseProps> | ReactElement<ListBoxItemBaseProps>[]
   dropdownHeaderFixed?: ReactNode
   dropdownFooterFixed?: ReactNode
   dropdownHeader?: ReactElement<any>
diff --git a/assets/design-system/src/components/codeLanguageIcons.tsx b/assets/design-system/src/components/codeLanguageIcons.tsx
new file mode 100644
index 0000000000..22d307631e
--- /dev/null
+++ b/assets/design-system/src/components/codeLanguageIcons.tsx
@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react'
+
+import type { IconProps } from './icons/createIcon'
+import CppLogoIcon from './icons/CppLogoIcon'
+import CSharpLogoIcon from './icons/CSharpLogoIcon'
+import ElixirLogoIcon from './icons/ElixirLogoIcon'
+import GoLogoIcon from './icons/GoLogoIcon'
+import JavaLogoIcon from './icons/JavaLogoIcon'
+import JavaScriptLogoIcon from './icons/JavaScriptLogoIcon'
+import PhpLogoIcon from './icons/PhpLogoIcon'
+import PythonLogoIcon from './icons/PythonLogoIcon'
+import RubyLogoIcon from './icons/RubyLogoIcon'
+import RustLogoIcon from './icons/RustLogoIcon'
+import ScalaLogoIcon from './icons/ScalaLogoIcon'
+import TerraformLogoIcon from './icons/TerraformLogoIcon'
+import TypeScriptLogoIcon from './icons/TypeScriptLogoIcon'
+import YamlLogoIcon from './icons/YamlLogoIcon'
+
+const LANGUAGE_ICONS: Record<string, (props: IconProps) => ReactNode> = {
+  yaml: YamlLogoIcon,
+  yml: YamlLogoIcon,
+  terraform: TerraformLogoIcon,
+  tf: TerraformLogoIcon,
+  hcl: TerraformLogoIcon,
+  go: GoLogoIcon,
+  golang: GoLogoIcon,
+  python: PythonLogoIcon,
+  py: PythonLogoIcon,
+  rust: RustLogoIcon,
+  rs: RustLogoIcon,
+  javascript: JavaScriptLogoIcon,
+  js: JavaScriptLogoIcon,
+  jsx: JavaScriptLogoIcon,
+  mjs: JavaScriptLogoIcon,
+  cjs: JavaScriptLogoIcon,
+  typescript: TypeScriptLogoIcon,
+  ts: TypeScriptLogoIcon,
+  tsx: TypeScriptLogoIcon,
+  mts: TypeScriptLogoIcon,
+  cts: TypeScriptLogoIcon,
+  java: JavaLogoIcon,
+  csharp: CSharpLogoIcon,
+  cs: CSharpLogoIcon,
+  'c#': CSharpLogoIcon,
+  cpp: CppLogoIcon,
+  'c++': CppLogoIcon,
+  cc: CppLogoIcon,
+  cxx: CppLogoIcon,
+  hpp: CppLogoIcon,
+  hh: CppLogoIcon,
+  hxx: CppLogoIcon,
+  elixir: ElixirLogoIcon,
+  ex: ElixirLogoIcon,
+  exs: ElixirLogoIcon,
+  ruby: RubyLogoIcon,
+  rb: RubyLogoIcon,
+  php: PhpLogoIcon,
+  scala: ScalaLogoIcon,
+}
+
+export function getCodeLanguageIcon(
+  language?: string,
+  props: IconProps = { size: 12, fullColor: true }
+) {
+  if (!language) return null
+
+  const Icon = LANGUAGE_ICONS[language.toLowerCase().trim()]
+
+  return Icon ? <Icon {...props} /> : null
+}
diff --git a/assets/design-system/src/components/icons/AnsibleIcon.tsx b/assets/design-system/src/components/icons/AnsibleIcon.tsx
index 9215baf25b..2a2d7c0976 100644
--- a/assets/design-system/src/components/icons/AnsibleIcon.tsx
+++ b/assets/design-system/src/components/icons/AnsibleIcon.tsx
@@ -1,13 +1,15 @@
 import createIcon from './createIcon'
 
-export default createIcon(({ size, color }) => (
+const ANSIBLE_RED = '#EE0000'
+
+export default createIcon(({ size, color, fullColor }) => (
   <svg
     width={size}
     viewBox="0 0 512 512"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g fill={color}>
+    <g fill={fullColor ? ANSIBLE_RED : color}>
       <path d="m260.8456726 115.0143204 89.6253662 221.2051086-135.3775177-106.6378097zm251.1543274 140.9856796c0 196.3383179-214.0074463 319.7159424-384.2888794 221.546814s-170.2814941-344.9244995-.000061-443.093689 384.2889404 25.2085571 384.2889404 221.546875zm-91.9366455 131.1765747-137.861969-331.7742691c-7.2346802-19.6264496-35.9119873-19.2634583-43.3018036 0l-151.3127746 363.9148026h51.7616882l59.8983765-150.0432129 178.7501678 144.4087219c21.8892822 20.6537475 53.0055542-.0903931 42.0663147-26.5060425z" />
     </g>
   </svg>
diff --git a/assets/design-system/src/components/icons/CSharpLogoIcon.tsx b/assets/design-system/src/components/icons/CSharpLogoIcon.tsx
new file mode 100644
index 0000000000..0b7edcd878
--- /dev/null
+++ b/assets/design-system/src/components/icons/CSharpLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// C# from Simple Icons: https://simpleicons.org/icons/csharp
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.194 7.543v8.913c0 1.103.588 2.122 1.544 2.674l7.718 4.456a3.086 3.086 0 0 0 3.088 0l7.718-4.456a3.087 3.087 0 0 0 1.544-2.674V7.543a3.084 3.084 0 0 0-1.544-2.673L13.544.414a3.086 3.086 0 0 0-3.088 0L2.738 4.87a3.085 3.085 0 0 0-1.544 2.673Zm5.403 2.914v3.087a.77.77 0 0 0 .772.772.773.773 0 0 0 .772-.772.773.773 0 0 1 1.317-.546.775.775 0 0 1 .226.546 2.314 2.314 0 1 1-4.631 0v-3.087c0-.615.244-1.203.679-1.637a2.312 2.312 0 0 1 3.274 0c.434.434.678 1.023.678 1.637a.769.769 0 0 1-.226.545.767.767 0 0 1-1.091 0 .77.77 0 0 1-.226-.545.77.77 0 0 0-.772-.772.771.771 0 0 0-.772.772Zm12.35 3.087a.77.77 0 0 1-.772.772h-.772v.772a.773.773 0 0 1-1.544 0v-.772h-1.544v.772a.773.773 0 0 1-1.317.546.775.775 0 0 1-.226-.546v-.772H12a.771.771 0 1 1 0-1.544h.772v-1.543H12a.77.77 0 1 1 0-1.544h.772v-.772a.773.773 0 0 1 1.317-.546.775.775 0 0 1 .226.546v.772h1.544v-.772a.773.773 0 0 1 1.544 0v.772h.772a.772.772 0 0 1 0 1.544h-.772v1.543h.772a.776.776 0 0 1 .772.772Zm-3.088-2.315h-1.544v1.543h1.544v-1.543Z"
+      fill={fullColor ? '#512BD4' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/CppLogoIcon.tsx b/assets/design-system/src/components/icons/CppLogoIcon.tsx
new file mode 100644
index 0000000000..84ce535bab
--- /dev/null
+++ b/assets/design-system/src/components/icons/CppLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// C++ from Simple Icons: https://simpleicons.org/icons/cplusplus
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076 1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012 15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112 19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z"
+      fill={fullColor ? '#00599C' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/ElixirLogoIcon.tsx b/assets/design-system/src/components/icons/ElixirLogoIcon.tsx
new file mode 100644
index 0000000000..9f0d8a2e26
--- /dev/null
+++ b/assets/design-system/src/components/icons/ElixirLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Elixir from Simple Icons: https://simpleicons.org/icons/elixir
+export default createIcon(({ size, color, fullColor, mode }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.793 16.575c0 3.752-2.927 7.426-7.743 7.426-5.249 0-7.843-3.71-7.843-8.29 0-5.21 3.892-12.952 8-15.647a.397.397 0 0 1 .61.371 9.716 9.716 0 0 0 1.694 6.518c.522.795 1.092 1.478 1.763 2.352.94 1.227 1.637 1.906 2.644 3.842l.015.028a7.107 7.107 0 0 1 .86 3.4z"
+      fill={fullColor ? (mode === 'light' ? '#4B275F' : '#A78BFA') : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/GoLogoIcon.tsx b/assets/design-system/src/components/icons/GoLogoIcon.tsx
new file mode 100644
index 0000000000..58c3cf74b3
--- /dev/null
+++ b/assets/design-system/src/components/icons/GoLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Go wordmark from Simple Icons: https://simpleicons.org/icons/go
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z"
+      fill={fullColor ? '#00ADD8' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/JavaLogoIcon.tsx b/assets/design-system/src/components/icons/JavaLogoIcon.tsx
new file mode 100644
index 0000000000..74ae0d018b
--- /dev/null
+++ b/assets/design-system/src/components/icons/JavaLogoIcon.tsx
@@ -0,0 +1,34 @@
+import createIcon from './createIcon'
+
+// Java coffee-cup mark from Devicon (Oracle does not publish a Simple Icons entry):
+// https://github.com/devicons/devicon/blob/master/icons/java/java-original.svg
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 128 128"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z"
+      fill={fullColor ? '#0074BD' : color}
+    />
+    <path
+      d="M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z"
+      fill={fullColor ? '#EA2D2E' : color}
+    />
+    <path
+      d="M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171-4.451-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.953-3.487-32.013 6.85-13.743 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326 9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958 10.832-5.239 19.644-4.643 19.644-4.643zm40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725 0-.002.359-.327.468-.617z"
+      fill={fullColor ? '#0074BD' : color}
+    />
+    <path
+      d="M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587z"
+      fill={fullColor ? '#EA2D2E' : color}
+    />
+    <path
+      d="M52.214 126.021c22.476 1.437 57-.8 57.817-11.436 0 0-1.571 4.032-18.577 7.231-19.186 3.612-42.854 3.191-56.887.874 0 .001 2.875 2.381 17.647 3.331z"
+      fill={fullColor ? '#0074BD' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/JavaScriptLogoIcon.tsx b/assets/design-system/src/components/icons/JavaScriptLogoIcon.tsx
new file mode 100644
index 0000000000..3754d1a04d
--- /dev/null
+++ b/assets/design-system/src/components/icons/JavaScriptLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// JavaScript from Simple Icons: https://simpleicons.org/icons/javascript
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"
+      fill={fullColor ? '#F7DF1E' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/PhpLogoIcon.tsx b/assets/design-system/src/components/icons/PhpLogoIcon.tsx
new file mode 100644
index 0000000000..d57c7a7c5d
--- /dev/null
+++ b/assets/design-system/src/components/icons/PhpLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// PHP from Simple Icons: https://simpleicons.org/icons/php
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z"
+      fill={fullColor ? '#777BB4' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/PythonLogoIcon.tsx b/assets/design-system/src/components/icons/PythonLogoIcon.tsx
new file mode 100644
index 0000000000..93c103cef0
--- /dev/null
+++ b/assets/design-system/src/components/icons/PythonLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Python from Simple Icons: https://simpleicons.org/icons/python
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"
+      fill={fullColor ? '#3776AB' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/RubyLogoIcon.tsx b/assets/design-system/src/components/icons/RubyLogoIcon.tsx
new file mode 100644
index 0000000000..98d3da3ffd
--- /dev/null
+++ b/assets/design-system/src/components/icons/RubyLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Ruby from Simple Icons: https://simpleicons.org/icons/ruby
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20.156.083c3.033.525 3.893 2.598 3.829 4.77L24 4.822 22.635 22.71 4.89 23.926h.016C3.433 23.864.15 23.729 0 19.139l1.645-3 2.819 6.586.503 1.172 2.805-9.144-.03.007.016-.03 9.255 2.956-1.396-5.431-.99-3.9 8.82-.569-.615-.51L16.5 2.114 20.159.073l-.003.01zM0 19.089zM5.13 5.073c3.561-3.533 8.157-5.621 9.922-3.84 1.762 1.777-.105 6.105-3.673 9.636-3.563 3.532-8.103 5.734-9.864 3.957-1.766-1.777.045-6.217 3.612-9.75l.003-.003z"
+      fill={fullColor ? '#CC342D' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/RustLogoIcon.tsx b/assets/design-system/src/components/icons/RustLogoIcon.tsx
new file mode 100644
index 0000000000..deac819198
--- /dev/null
+++ b/assets/design-system/src/components/icons/RustLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Rust from Simple Icons: https://simpleicons.org/icons/rust
+export default createIcon(({ size, color, fullColor, mode }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.8346 11.7033l-1.0073-.6236a13.7268 13.7268 0 00-.0283-.2936l.8656-.8069a.3483.3483 0 00-.1154-.578l-1.1066-.414a8.4958 8.4958 0 00-.087-.2856l.6904-.9587a.3462.3462 0 00-.2257-.5446l-1.1663-.1894a9.3574 9.3574 0 00-.1407-.2622l.49-1.0761a.3437.3437 0 00-.0274-.3361.3486.3486 0 00-.3006-.154l-1.1845.0416a6.7444 6.7444 0 00-.1873-.2268l.2723-1.153a.3472.3472 0 00-.417-.4172l-1.1532.2724a14.0183 14.0183 0 00-.2278-.1873l.0415-1.1845a.3442.3442 0 00-.49-.328l-1.076.491c-.0872-.0476-.1742-.0952-.2623-.1407l-.1903-1.1673A.3483.3483 0 0016.256.955l-.9597.6905a8.4867 8.4867 0 00-.2855-.086l-.414-1.1066a.3483.3483 0 00-.5781-.1154l-.8069.8666a9.2936 9.2936 0 00-.2936-.0284L12.2946.1683a.3462.3462 0 00-.5892 0l-.6236 1.0073a13.7383 13.7383 0 00-.2936.0284L9.9803.3374a.3462.3462 0 00-.578.1154l-.4141 1.1065c-.0962.0274-.1903.0567-.2855.086L7.744.955a.3483.3483 0 00-.5447.2258L7.009 2.348a9.3574 9.3574 0 00-.2622.1407l-1.0762-.491a.3462.3462 0 00-.49.328l.0416 1.1845a7.9826 7.9826 0 00-.2278.1873L3.8413 3.425a.3472.3472 0 00-.4171.4171l.2713 1.1531c-.0628.075-.1255.1509-.1863.2268l-1.1845-.0415a.3462.3462 0 00-.328.49l.491 1.0761a9.167 9.167 0 00-.1407.2622l-1.1662.1894a.3483.3483 0 00-.2258.5446l.6904.9587a13.303 13.303 0 00-.087.2855l-1.1065.414a.3483.3483 0 00-.1155.5781l.8656.807a9.2936 9.2936 0 00-.0283.2935l-1.0073.6236a.3442.3442 0 000 .5892l1.0073.6236c.008.0982.0182.1964.0283.2936l-.8656.8079a.3462.3462 0 00.1155.578l1.1065.4141c.0273.0962.0567.1914.087.2855l-.6904.9587a.3452.3452 0 00.2268.5447l1.1662.1893c.0456.088.0922.1751.1408.2622l-.491 1.0762a.3462.3462 0 00.328.49l1.1834-.0415c.0618.0769.1235.1528.1873.2277l-.2713 1.1541a.3462.3462 0 00.4171.4161l1.153-.2713c.075.0638.151.1255.2279.1863l-.0415 1.1845a.3442.3442 0 00.49.327l1.0761-.49c.087.0486.1741.0951.2622.1407l.1903 1.1662a.3483.3483 0 00.5447.2268l.9587-.6904a9.299 9.299 0 00.2855.087l.414 1.1066a.3452.3452 0 00.5781.1154l.8079-.8656c.0972.0111.1954.0203.2936.0294l.6236 1.0073a.3472.3472 0 00.5892 0l.6236-1.0073c.0982-.0091.1964-.0183.2936-.0294l.8069.8656a.3483.3483 0 00.578-.1154l.4141-1.1066a8.4626 8.4626 0 00.2855-.087l.9587.6904a.3452.3452 0 00.5447-.2268l.1903-1.1662c.088-.0456.1751-.0931.2622-.1407l1.0762.49a.3472.3472 0 00.49-.327l-.0415-1.1845a6.7267 6.7267 0 00.2267-.1863l1.1531.2713a.3472.3472 0 00.4171-.416l-.2713-1.1542c.0628-.0749.1255-.1508.1863-.2278l1.1845.0415a.3442.3442 0 00.328-.49l-.49-1.076c.0475-.0872.0951-.1742.1407-.2623l1.1662-.1893a.3483.3483 0 00.2258-.5447l-.6904-.9587.087-.2855 1.1066-.414a.3462.3462 0 00.1154-.5781l-.8656-.8079c.0101-.0972.0202-.1954.0283-.2936l1.0073-.6236a.3442.3442 0 000-.5892zm-6.7413 8.3551a.7138.7138 0 01.2986-1.396.714.714 0 11-.2997 1.396zm-.3422-2.3142a.649.649 0 00-.7715.5l-.3573 1.6685c-1.1035.501-2.3285.7795-3.6193.7795a8.7368 8.7368 0 01-3.6951-.814l-.3574-1.6684a.648.648 0 00-.7714-.499l-1.473.3158a8.7216 8.7216 0 01-.7613-.898h7.1676c.081 0 .1356-.0141.1356-.088v-2.536c0-.074-.0536-.0881-.1356-.0881h-2.0966v-1.6077h2.2677c.2065 0 1.1065.0587 1.394 1.2088.0901.3533.2875 1.5044.4232 1.8729.1346.413.6833 1.2381 1.2685 1.2381h3.5716a.7492.7492 0 00.1296-.0131 8.7874 8.7874 0 01-.8119.9526zM6.8369 20.024a.714.714 0 11-.2997-1.396.714.714 0 01.2997 1.396zM4.1177 8.9972a.7137.7137 0 11-1.304.5791.7137.7137 0 011.304-.579zm-.8352 1.9813l1.5347-.6824a.65.65 0 00.33-.8585l-.3158-.7147h1.2432v5.6025H3.5669a8.7753 8.7753 0 01-.2834-3.348zm6.7343-.5437V8.7836h2.9601c.153 0 1.0792.1772 1.0792.8697 0 .575-.7107.7815-1.2948.7815zm10.7574 1.4862c0 .2187-.008.4363-.0243.651h-.9c-.09 0-.1265.0586-.1265.1477v.413c0 .973-.5487 1.1846-1.0296 1.2382-.4576.0517-.9648-.1913-1.0275-.4717-.2704-1.5186-.7198-1.8436-1.4305-2.4034.8817-.5599 1.799-1.386 1.799-2.4915 0-1.1936-.819-1.9458-1.3769-2.3153-.7825-.5163-1.6491-.6195-1.883-.6195H5.4682a8.7651 8.7651 0 014.907-2.7699l1.0974 1.151a.648.648 0 00.9182.0213l1.227-1.1743a8.7753 8.7753 0 016.0044 4.2762l-.8403 1.8982a.652.652 0 00.33.8585l1.6178.7188c.0283.2875.0425.577.0425.8717zm-9.3006-9.5993a.7128.7128 0 11.984 1.0316.7137.7137 0 01-.984-1.0316zm8.3389 6.71a.7107.7107 0 01.9395-.3625.7137.7137 0 11-.9405.3635z"
+      fill={fullColor ? (mode === 'light' ? '#000000' : '#FFFFFF') : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/ScalaLogoIcon.tsx b/assets/design-system/src/components/icons/ScalaLogoIcon.tsx
new file mode 100644
index 0000000000..f70606cf6a
--- /dev/null
+++ b/assets/design-system/src/components/icons/ScalaLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// Scala from Simple Icons: https://simpleicons.org/icons/scala
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.589 24c4.537 0 13.81-1.516 14.821-3v-5.729c-.957 1.408-10.284 2.912-14.821 2.912V24zM4.589 16.365c4.537 0 13.81-1.516 14.821-3V7.636c-.957 1.408-10.284 2.912-14.821 2.912v5.817zM4.589 8.729c4.537 0 13.81-1.516 14.821-3V0C18.453 1.408 9.126 2.912 4.589 2.912v5.817z"
+      fill={fullColor ? '#DC322F' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/TypeScriptLogoIcon.tsx b/assets/design-system/src/components/icons/TypeScriptLogoIcon.tsx
new file mode 100644
index 0000000000..18ff626421
--- /dev/null
+++ b/assets/design-system/src/components/icons/TypeScriptLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// TypeScript from Simple Icons: https://simpleicons.org/icons/typescript
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"
+      fill={fullColor ? '#3178C6' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/components/icons/YamlLogoIcon.tsx b/assets/design-system/src/components/icons/YamlLogoIcon.tsx
new file mode 100644
index 0000000000..8795bad24a
--- /dev/null
+++ b/assets/design-system/src/components/icons/YamlLogoIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+// YAML wordmark from Simple Icons: https://simpleicons.org/icons/yaml
+export default createIcon(({ size, color, fullColor }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m0 .97 4.111 6.453v4.09h2.638v-4.09L11.053.969H8.214L5.58 5.125 2.965.969Zm12.093.024-4.47 10.544h2.114l.97-2.345h4.775l.804 2.345h2.26L14.255.994Zm1.133 2.225 1.463 3.87h-3.096zm3.06 9.475v10.29H24v-2.199h-5.454v-8.091zm-12.175.002v10.335h2.217v-7.129l2.32 4.792h1.746l2.4-4.96v7.295h2.127V12.696h-2.904L9.44 17.37l-2.455-4.674Z"
+      fill={fullColor ? '#CB171E' : color}
+    />
+  </svg>
+))
diff --git a/assets/design-system/src/hljs.ts b/assets/design-system/src/hljs.ts
index 622297e3e5..d10d996fe9 100644
--- a/assets/design-system/src/hljs.ts
+++ b/assets/design-system/src/hljs.ts
@@ -236,9 +236,11 @@ hljs.registerLanguage('sql', sql)
 hljs.registerLanguage('stylus', stylus)
 hljs.registerLanguage('swift', swift)
 hljs.registerLanguage('terraform', terraform)
+hljs.registerLanguage('hcl', terraform)
 hljs.registerLanguage('typescript', typescript)
 hljs.registerLanguage('vbnet', vbnet)
 hljs.registerLanguage('vbscript', vbscript)
 hljs.registerLanguage('vim', vim)
 hljs.registerLanguage('xml', xml)
 hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('yml', yaml)
diff --git a/assets/design-system/src/icons.ts b/assets/design-system/src/icons.ts
index 736da4f249..ab81effc19 100644
--- a/assets/design-system/src/icons.ts
+++ b/assets/design-system/src/icons.ts
@@ -77,9 +77,11 @@ export { default as ConsoleIcon } from './components/icons/ConsoleIcon'
 export { default as CookieIcon } from './components/icons/CookieIcon'
 export { default as CopyIcon } from './components/icons/CopyIcon'
 export { default as CostManagementIcon } from './components/icons/CostManagementIcon'
+export { default as CppLogoIcon } from './components/icons/CppLogoIcon'
 export { default as CpuIcon } from './components/icons/CpuIcon'
 export { default as CraneIcon } from './components/icons/CraneIcon'
 export { default as CreditCardIcon } from './components/icons/CreditCardIcon'
+export { default as CSharpLogoIcon } from './components/icons/CSharpLogoIcon'
 export { default as DashboardIcon } from './components/icons/DashboardIcon'
 export { default as DatabaseIcon } from './components/icons/DatabaseIcon'
 export { default as DatadogLogoIcon } from './components/icons/DatadogLogoIcon'
@@ -102,6 +104,7 @@ export { default as EdgeComputeIcon } from './components/icons/EdgeComputeIcon'
 export { default as EditIcon } from './components/icons/EditIcon'
 export { default as EKSIcon } from './components/icons/EKSIcon'
 export { default as ElasticsearchLogoIcon } from './components/icons/ElasticsearchLogoIcon'
+export { default as ElixirLogoIcon } from './components/icons/ElixirLogoIcon'
 export { default as EmojiHoverIcon } from './components/icons/EmojiHoverIcon'
 export { default as EmojiIcon } from './components/icons/EmojiIcon'
 export { default as ErrorIcon } from './components/icons/ErrorIcon'
@@ -133,6 +136,7 @@ export { default as GitMergeIcon } from './components/icons/GitMergeIcon'
 export { default as GitPullIcon } from './components/icons/GitPullIcon'
 export { default as GKEIcon } from './components/icons/GKEIcon'
 export { default as GlobeIcon } from './components/icons/GlobeIcon'
+export { default as GoLogoIcon } from './components/icons/GoLogoIcon'
 export { default as GoogleCloudLogoIcon } from './components/icons/GoogleCloudLogoIcon'
 export { default as GoogleCloudRunIcon } from './components/icons/GoogleCloudRunIcon'
 export { default as GoogleLogoIcon } from './components/icons/GoogleLogoIcon'
@@ -157,6 +161,8 @@ export { default as InfrastructureIcon } from './components/icons/Infrastructure
 export { default as InstalledIcon } from './components/icons/InstalledIcon'
 export { default as InstallIcon } from './components/icons/InstallIcon'
 export { default as InvoicesIcon } from './components/icons/InvoicesIcon'
+export { default as JavaLogoIcon } from './components/icons/JavaLogoIcon'
+export { default as JavaScriptLogoIcon } from './components/icons/JavaScriptLogoIcon'
 export { default as JiraLogoIcon } from './components/icons/JiraLogoIcon'
 export { default as KeyIcon } from './components/icons/KeyIcon'
 export { default as KeyPairIcon } from './components/icons/KeyPairIcon'
@@ -214,6 +220,7 @@ export { default as PeopleIcon } from './components/icons/PeopleIcon'
 export { default as PeoplePlusIcon } from './components/icons/PeoplePlusIcon'
 export { default as PersonIcon } from './components/icons/PersonIcon'
 export { default as PersonPlusIcon } from './components/icons/PersonPlusIcon'
+export { default as PhpLogoIcon } from './components/icons/PhpLogoIcon'
 export { default as PipelineIcon } from './components/icons/PipelineIcon'
 export { default as PlanIcon } from './components/icons/PlanIcon'
 export { default as PlayIcon } from './components/icons/PlayIcon'
@@ -233,6 +240,7 @@ export { default as ProtectedManagementClusterIcon } from './components/icons/Pr
 export { default as PrQueueIcon } from './components/icons/PrQueueIcon'
 export { default as PushPinFilledIcon } from './components/icons/PushPinFilledIcon'
 export { default as PushPinOutlineIcon } from './components/icons/PushPinOutlineIcon'
+export { default as PythonLogoIcon } from './components/icons/PythonLogoIcon'
 export { default as QueuedOutlineIcon } from './components/icons/QueuedOutlineIcon'
 export { default as RamIcon } from './components/icons/RamIcon'
 export { default as ReloadIcon } from './components/icons/ReloadIcon'
@@ -240,9 +248,12 @@ export { default as RestoreIcon } from './components/icons/RestoreIcon'
 export { default as ReturnIcon } from './components/icons/ReturnIcon'
 export { default as RobotIcon } from './components/icons/RobotIcon'
 export { default as RocketIcon } from './components/icons/RocketIcon'
+export { default as RubyLogoIcon } from './components/icons/RubyLogoIcon'
 export { default as RunBookIcon } from './components/icons/RunBookIcon'
+export { default as RustLogoIcon } from './components/icons/RustLogoIcon'
 export { default as ScrollIcon } from './components/icons/ScrollIcon'
 export { default as ScrollPlusIcon } from './components/icons/ScrollPlusIcon'
+export { default as ScalaLogoIcon } from './components/icons/ScalaLogoIcon'
 export { default as SearchDocsIcon } from './components/icons/SearchDocsIcon'
 export { default as SearchIcon } from './components/icons/SearchIcon'
 export { default as SendMessageIcon } from './components/icons/SendMessageIcon'
@@ -298,6 +309,7 @@ export { default as TrashCanIcon } from './components/icons/TrashCanIcon'
 export { default as TreeViewIcon } from './components/icons/TreeViewIcon'
 export { default as TwitterIcon } from './components/icons/TwitterIcon'
 export { default as TuningIcon } from './components/icons/TuningIcon'
+export { default as TypeScriptLogoIcon } from './components/icons/TypeScriptLogoIcon'
 export { default as UbuntuLogoIcon } from './components/icons/UbuntuLogoIcon'
 export { default as UnknownIcon } from './components/icons/UnknownIcon'
 export { default as UpdatesIcon } from './components/icons/UpdatesIcon'
@@ -316,4 +328,5 @@ export { default as WebhooksIcon } from './components/icons/WebhooksIcon'
 export { default as WindowsLogoIcon } from './components/icons/WindowsLogoIcon'
 export { default as WorkbenchIcon } from './components/icons/WorkbenchIcon'
 export { default as XAILogoIcon } from './components/icons/XAILogoIcon'
+export { default as YamlLogoIcon } from './components/icons/YamlLogoIcon'
 export { default as YouTubeIcon } from './components/icons/YouTubeIcon'
diff --git a/assets/design-system/src/markdoc/components/MdBaseNodes.tsx b/assets/design-system/src/markdoc/components/MdBaseNodes.tsx
index 83c7bebaa7..40b0d9e83c 100644
--- a/assets/design-system/src/markdoc/components/MdBaseNodes.tsx
+++ b/assets/design-system/src/markdoc/components/MdBaseNodes.tsx
@@ -54,7 +54,10 @@ export const MdCode = styled.code.withConfig(commonCfg)(({ theme }) => ({
   verticalAlign: 'baseline',
   padding: '0.1em 0.4em',
   margin: '-0.1em 0',
-  backgroundColor: theme.colors['fill-one'],
+  backgroundColor:
+    theme.mode === 'light'
+      ? theme.colors['fill-two']
+      : theme.colors['fill-one'],
   borderRadius: theme.borderRadiuses.medium,
 }))
 export const MdHr = styled.hr.withConfig(commonCfg)(({ theme }) => ({
diff --git a/assets/src/components/ai/agent-runs/details/AIAgentRunMessages.tsx b/assets/src/components/ai/agent-runs/details/AIAgentRunMessages.tsx
index 6d4c0f0102..a94740c3e5 100644
--- a/assets/src/components/ai/agent-runs/details/AIAgentRunMessages.tsx
+++ b/assets/src/components/ai/agent-runs/details/AIAgentRunMessages.tsx
@@ -23,7 +23,7 @@ import { AILoadingText } from 'components/utils/AILoadingText'
 import { duration } from 'utils/datetime'
 
 export function AIAgentRunMessages({ run }: { run: AgentRunFragment }) {
-  const { spacing, colors } = useTheme()
+  const { spacing, colors, mode, borders, boxShadows } = useTheme()
 
   const [subscribedMessages, setSubscribedMessages] = useState<
     AgentMessageFragment[]
@@ -134,8 +134,15 @@ export function AIAgentRunMessages({ run }: { run: AgentRunFragment }) {
               {...chatMessagePropsShared}
               {...getToolMessageProps(rowData.id)}
               userMsgWrapperStyle={{
-                background: colors['fill-one'],
-                borderColor: colors['border-fill-one'],
+                backgroundColor:
+                  mode === 'light' ? colors['fill-two'] : colors['fill-one'],
+                ...(mode === 'light'
+                  ? {
+                      border: borders.input,
+                      borderColor: colors['border-input'],
+                      boxShadow: boxShadows.slight,
+                    }
+                  : { borderColor: colors['border-fill-one'] }),
                 '& *': { color: colors.text },
               }}
             />
@@ -161,7 +168,7 @@ const MessagesStreamWrapperSC = styled.div(({ theme }) => ({
 const chatMessagePropsShared = {
   disableActions: 'no-spacing' as const,
   toolDisplayType: 'simple' as const,
-  style: { padding: 0 },
+  style: { padding: 0, overflow: 'visible' },
 }
 
 const isHiddenAgentMessage = (msg: AgentMessageFragment) =>
diff --git a/assets/src/components/stacks/StacksEntry.tsx b/assets/src/components/stacks/StacksEntry.tsx
index 7092f07ab2..8fe48d13d2 100644
--- a/assets/src/components/stacks/StacksEntry.tsx
+++ b/assets/src/components/stacks/StacksEntry.tsx
@@ -40,9 +40,13 @@ export function StackEntry({
           gap="small"
         >
           <AppIcon
-            icon={<StackTypeIcon stackType={stack.type} />}
-            size="xxsmall"
-            $boxSize={24}
+            icon={
+              <StackTypeIcon
+                stackType={stack.type}
+                size={16}
+              />
+            }
+            size="xxxsmall"
           />
           <NameSC $active={active}>{stack.name}</NameSC>
         </Flex>
@@ -66,7 +70,10 @@ const WrapperSC = styled.div<{ $active: boolean; $first: boolean }>(
     alignItems: 'center',
     padding: theme.spacing.medium,
     borderLeft: theme.borders.default,
-    borderRight: theme.borders.default,
+    borderRight: $active
+      ? `2px solid ${theme.colors['border-primary']}`
+      : theme.borders.default,
+    borderBottom: theme.borders.default,
     ...(theme.mode === 'light' && {
       // White on page-background — never transparent (same as page grey)
       backgroundColor: theme.colors['fill-zero'],
@@ -75,13 +82,9 @@ const WrapperSC = styled.div<{ $active: boolean; $first: boolean }>(
     ...($active
       ? {
           backgroundColor: theme.colors['fill-zero-selected'],
-          borderBottom: `2px solid ${theme.colors['border-primary']}`,
           cursor: 'default',
-          marginBottom: -1,
-          zIndex: theme.zIndexes.base + 1,
         }
       : {
-          borderBottom: theme.borders.default,
           cursor: 'pointer',
 
           '&:hover': {
diff --git a/assets/src/components/stacks/common/StackTypeIcon.tsx b/assets/src/components/stacks/common/StackTypeIcon.tsx
index bb53de8978..1c7c4e9dd3 100644
--- a/assets/src/components/stacks/common/StackTypeIcon.tsx
+++ b/assets/src/components/stacks/common/StackTypeIcon.tsx
@@ -10,7 +10,7 @@ import { StackType } from 'generated/graphql'
 export function StackTypeIcon({
   stackType,
   size = 16,
-  fullColor = false,
+  fullColor = true,
   color,
 }: {
   stackType: Nullable<StackType>