diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
index 15b012d2b451..e247092ba7be 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -143,7 +143,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
         control: FloatingIndicator,
         props: {
           ...props,
-          color: colorTheme.brandNeonPink.value,
+          color: colorTheme.brandNeonOrange.value,
         },
         key: 'padding-value-indicator-control',
         show: 'visible-except-when-other-strategy-is-active',
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index e20678016012..484d19455ef5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -132,7 +132,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
         control: FloatingIndicator,
         props: {
           ...maybeIndicatorProps,
-          color: colorTheme.brandNeonPink.value,
+          color: colorTheme.brandNeonOrange.value,
         },
         key: 'padding-value-indicator-control',
         show: 'visible-except-when-other-strategy-is-active',
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2d70341e6b61..684ee4890c89 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -251,34 +251,22 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         data-testid={labelId}
         style={{
           zoom: 1 / scale,
-          width: GRID_RESIZE_HANDLE_SIZE,
           height: GRID_RESIZE_HANDLE_SIZE,
-          borderRadius: '100%',
-          border: `1px solid ${colorTheme.border0.value}`,
-          boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
-              1px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px 1px 2px 2px`,
-          background: colorTheme.white.value,
+          borderRadius: 3,
+          padding: '0 4px',
+          border: `.1px solid ${colorTheme.white.value}`,
+          background: colorTheme.primary.value,
+          color: colorTheme.white.value,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
-          fontSize: 8,
           pointerEvents: 'initial',
         }}
-        css={{
-          opacity: props.resizing !== 'not-resizing' ? 1 : 0.5,
-          ':hover': {
-            opacity: 1,
-          },
-        }}
         onMouseDown={mouseDownHandler}
         onMouseMove={onMouseMove}
       >
-        {props.axis === 'row' ? '↕' : '↔'}
-        {when(
-          props.dimension.areaName != null,
-          <span style={{ position: 'absolute', top: 12 }}>{props.dimension.areaName}</span>,
-        )}
+        {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
       </div>
       {when(
         props.resizing !== 'not-resizing',
@@ -302,37 +290,34 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
             justifyContent: 'center',
             border: `1px solid ${
               props.resizeLocked
-                ? colorTheme.brandNeonPink10.value
+                ? colorTheme.primary10.value
                 : props.resizing === 'resize-target'
-                ? colorTheme.brandNeonPink.value
-                : colorTheme.brandNeonPink60.value
+                ? colorTheme.primary.value
+                : colorTheme.primary50.value
             }`,
             ...(props.resizeLocked
-              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink10.value, scale)
+              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale)
               : props.resizing === 'resize-target'
-              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale)
-              : UtopiaStyles.backgrounds.stripedBackground(
-                  colorTheme.brandNeonPink10.value,
-                  scale,
-                )),
+              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary50.value, scale)
+              : UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale)),
           }}
         >
-          <CanvasLabel
-            value={getLabelForAxis(
-              props.dimension,
-              props.dimensionIndex,
-              props.fromPropsAxisValues,
-            )}
-            scale={scale}
-            color={
-              props.resizeLocked
-                ? colorTheme.brandNeonPink10.value
-                : props.resizing === 'resize-target'
-                ? colorTheme.brandNeonPink.value
-                : colorTheme.brandNeonPink60.value
-            }
-            textColor={colorTheme.white.value}
-          />
+          {when(
+            props.dimension.areaName != null,
+            <div
+              style={{
+                position: 'absolute',
+                color: colorTheme.primary.value,
+                background: colorTheme.white.value,
+                top: 0,
+                left: 0,
+                padding: '0 4px',
+                borderRadius: '0 0 3px 0',
+              }}
+            >
+              {props.dimension.areaName}
+            </div>,
+          )}
         </div>,
       )}
     </div>
@@ -945,7 +930,8 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const countedColumn = Math.floor(cell % grid.columns) + 1
           const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
           const borderID = `${id}-border`
-          const dotgridColor = activelyDraggingOrResizingCell != null ? `#00000033` : 'transparent'
+          const dotgridColor =
+            activelyDraggingOrResizingCell != null ? colorTheme.blackOpacity35.value : 'transparent'
 
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
@@ -953,7 +939,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const borderColor =
             isActiveCell && targetsAreCellsWithPositioning
               ? colorTheme.brandNeonPink.value
-              : `#00000033`
+              : colorTheme.blackOpacity35.value
           return (
             <div
               key={id}
@@ -1332,7 +1318,7 @@ const AbsoluteDistanceIndicators = React.memo(
       return null
     }
 
-    const backgroundColor = colorTheme.brandNeonPink.value
+    const backgroundColor = colorTheme.primary.value
     const dashedBorder = `1px dashed ${backgroundColor}`
 
     return (
diff --git a/editor/src/components/canvas/controls/select-mode/controls-common.tsx b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
index d625dcc0fb06..7010cde16fe0 100644
--- a/editor/src/components/canvas/controls/select-mode/controls-common.tsx
+++ b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
@@ -104,7 +104,7 @@ interface CanvasLabelProps {
   scale: number
   color: string
   textColor: string
-  value: string | number
+  value: string | number | null
   onMouseDown?: React.MouseEventHandler
   testId?: string
 }
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index ee073c9b828a..0e83aff83ffb 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -383,7 +383,7 @@ const GapControlSegment = React.memo<GapControlSegmentProps>((props) => {
               <CanvasLabel
                 value={printCSSNumber(gapValue, null)}
                 scale={scale}
-                color={colorTheme.brandNeonPink.value}
+                color={colorTheme.brandNeonOrange.value}
                 textColor={colorTheme.white.value}
               />,
             )}
@@ -391,7 +391,7 @@ const GapControlSegment = React.memo<GapControlSegmentProps>((props) => {
           <PillHandle
             width={width}
             height={height}
-            pillColor={colorTheme.brandNeonPink.value}
+            pillColor={colorTheme.brandNeonOrange.value}
             borderWidth={borderWidth}
           />
         </div>
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index 5cf6af9f6779..adca71944cc3 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -452,7 +452,7 @@ function GridGapHandle({
           <CanvasLabel
             value={printCSSNumber(gapValue, null)}
             scale={scale}
-            color={colorTheme.brandNeonPink.value}
+            color={colorTheme.brandNeonOrange.value}
             textColor={colorTheme.white.value}
           />,
         )}
@@ -460,7 +460,7 @@ function GridGapHandle({
       <PillHandle
         width={width}
         height={height}
-        pillColor={colorTheme.brandNeonPink.value}
+        pillColor={colorTheme.brandNeonOrange.value}
         borderWidth={borderWidth}
       />
     </div>
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index 3081003c09c7..63c1564223f5 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -20,6 +20,7 @@ const darkBase = {
   brandNeonPink10: createUtopiColor('oklch(78.64% 0.237 327.81 / 10%)'),
   brandNeonPink60: createUtopiColor('oklch(78.64% 0.237 327.81 / 50%)'),
   brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
+  brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'),
   green: createUtopiColor('oklch(88% 0.2535 150)'),
   green10: createUtopiColor('oklch(88% 0.2535 150 / 10%)'),
   green20: createUtopiColor('oklch(88% 0.2535 150 / 20%)'),
@@ -133,6 +134,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'),
   neutralInvertedBackground10: createUtopiColor('rgba(217, 220, 227, 0.1)'),
@@ -266,7 +268,7 @@ const darkTheme: typeof light = {
   codeEditorGrid: createUtopiColor('#6d705b'),
 
   // Gap controls
-  gapControlsBg: darkBase.brandNeonGreen,
+  gapControlsBg: darkBase.brandNeonOrange,
 }
 
 export const dark = enforceUtopiColorTheme(darkTheme)
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 2c14f9b169d5..0063da12508d 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -20,6 +20,7 @@ const lightBase = {
   brandNeonPink10: createUtopiColor('oklch(72.53% 0.353 331.69 / 10%)'),
   brandNeonPink60: createUtopiColor('oklch(72.53% 0.353 331.69 / 30%)'),
   brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
+  brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'),
   green: createUtopiColor('oklch(64.6% 0.17 150.6)'),
   green10: createUtopiColor('oklch(64.6% 0.17 150.6 / 10%)'),
   green20: createUtopiColor('oklch(64.6% 0.17 150.6 / 20%)'),
@@ -134,6 +135,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'),
   neutralInvertedBackground10: createUtopiColor('hsla(0,0%,0%,0.1)'),
@@ -266,7 +268,7 @@ const lightTheme = {
   codeEditorGrid: createUtopiColor('#6d705b'),
 
   // Gap controls
-  gapControlsBg: createUtopiColor('#FFA500'),
+  gapControlsBg: lightBase.brandNeonOrange,
 }
 
 // all values in light must be of the type UtopiColor! This will break if you made a mistake.