diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
index 8ee4eac..8d6b893 100644
--- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
@@ -67,7 +67,6 @@ const PropNameContainer = deriver(styled.div<{
 
   ${propNameTextCSS};
   &:hover {
-    color: blue;
   }
 `)
 
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index 03f28df..e2b4afb 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import styled, {css} from 'styled-components'
 import noop from '@theatre/shared/utils/noop'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
-import { Package} from '@theatre/studio/uiComponents/icons'
+import {Package} from '@theatre/studio/uiComponents/icons'
 
 export const Container = styled.li`
   margin: 0;
@@ -21,7 +21,6 @@ const Header = styled(BaseHeader)`
   position: relative;
   margin-bottom: 2px;
   margin-left: calc(4px + var(--depth) * 16px);
-  padding-left: 4px;
   padding-right: 8px;
   gap: 4px;
   min-height: 21px;
diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
index c88534a..5733a94 100644
--- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
+++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx
@@ -29,21 +29,19 @@ const Rect = styled.rect`
 `
 
 const DefaultIcon = styled.div`
-  width: 5px;
-  height: 5px;
-  background-color: currentColor;
-  border-radius: 0px;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
   transform: rotate(45deg);
-  border: 1px solid grey;
+  background: #a3a3a3;
 `
 
 const FilledIcon = styled.div`
-  width: 5px;
-  height: 5px;
-  background-color: currentColor;
-  border-radius: 0px;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
   transform: rotate(45deg);
-  border: 1px solid grey;
+  background: #a3a3a3;
 `
 
 const DefaultOrStaticValueIndicator: React.FC<{
diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
index 63f16a5..027f351 100644
--- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
+++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
@@ -29,7 +29,7 @@ const Container = styled.div`
   margin: 0 0px 0 2px;
   position: relative;
   z-index: 0;
-  opacity: 0.7;
+  opacity: 1;
 
   &:after {
     position: absolute;
@@ -152,7 +152,7 @@ namespace Icons {
     >
       <Chevron_Group transform={`translate(0 0)`}>
         <path
-          fill="black"
+          fill="#ea2333"
           d="M3.8,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6C2.4,9.3,0,5.8,0,4.6
     C0,3.5,2.4,0,3.8,0z M11,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2C6.8,3.4,9.9,0.4,11,0.4z M17.5,0.6
     c0-0.4,0.3-0.6,0.8-0.6C19.6,0,22,3.5,22,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6c0-0.7,2.8-3.1,2.8-4
@@ -172,7 +172,7 @@ namespace Icons {
     >
       <Chevron_Group transform={`translate(2 0)`}>
         <path
-          fill="black"
+          fill="#ea2333"
           d="M-13.7,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
     c-1.3,0-3.8-3.4-3.8-4.6C-17.5,3.5-15.1,0-13.7,0z M-6.5,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2
     C-10.7,3.4-7.6,0.4-6.5,0.4z M0,0.6C0,0.2,0.3,0,0.8,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6C0.3,9.3,0,9,0,8.7
@@ -185,8 +185,6 @@ namespace Icons {
   const Cur_Group = styled.g`
     stroke-width: 0;
     ${CurButton}:hover & path {
-      stroke: currentColor;
-      stroke-width: 2;
     }
   `
 
@@ -200,7 +198,7 @@ namespace Icons {
     >
       <Cur_Group transform="translate(0 0)">
         <path
-          fill="black"
+          fill="#ea2333"
           d="M-3.1,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
     c-1.3,0-3.8-3.4-3.8-4.6C-6.8,3.5-4.4,0-3.1,0z M4.2,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2C3,8.7,0,5.7,0,4.6
     C0,3.4,3,0.4,4.2,0.4z M10.7,0.6C10.7,0.2,11,0,11.4,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6
diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
index 1d5e686..e041d50 100644
--- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
+++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
@@ -4,5 +4,6 @@ import {css} from 'styled-components'
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
   font-size: 12px;
+  font-variation-settings: 'wght' 130;
   color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
 `
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index fd26dc3..a1c06c2 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -43,7 +43,7 @@ const Input = styled.input`
   background: rgba(255, 255, 255, 1);
   border: none;
   color: rgba(0, 0, 0, 1);
-  padding: 1px 6px;
+  padding: 3px 6px 1px 6px;
   font: inherit;
   outline: none;
   cursor: ew-resize;
@@ -53,6 +53,7 @@ const Input = styled.input`
   border-radius: 0px;
   margin-bottom: 0px;
   text-align: center;
+  font-variation-settings: 'wght' 200;
 
   &:focus {
     cursor: text;
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index 4fae9a5..e3fdd9e 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -10,7 +10,7 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   background: #ffffff;
   border: none;
   color: rgba(0, 0, 0, 1);
-  padding: 1px 6px;
+  padding: 3px 6px 1px 6px;
   font: inherit;
   outline: none;
   cursor: text;
@@ -21,6 +21,7 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   box-sizing: border-box;
   margin-bottom: 10px;
   margin-top: 10px;
+  font-variation-settings: 'wght' 200;
 
   &:hover {
     background-color: #10101042;