diff --git a/packages/playground/devEnv/home/PlaygroundHeader.tsx b/packages/playground/devEnv/home/PlaygroundHeader.tsx
index 3b1fcef..3a4d5d3 100644
--- a/packages/playground/devEnv/home/PlaygroundHeader.tsx
+++ b/packages/playground/devEnv/home/PlaygroundHeader.tsx
@@ -52,7 +52,7 @@ const HeaderLink = styled.a`
   /* identical to box height, or 169% */
 
   /* White/White100 */
-  color: #ffffff;
+  color: #000000;
 
   transition: color 0.2s ease-in;
 
diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx
index ffc9d42..eb18613 100644
--- a/theatre/studio/src/css.tsx
+++ b/theatre/studio/src/css.tsx
@@ -25,13 +25,13 @@ export const pointerEventsAutoInNormalMode = css`
 
 export const theme = {
   panel: {
-    bg: `#0092FF77`,
+    bg: `#AAAAAA`,
     head: {
       title: {
-        color: `#0092FF`,
+        color: `#000000`,
       },
       punctuation: {
-        color: `#0092FF`,
+        color: `#000000`,
       },
     },
     body: {
diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
index 035e65f..350321d 100644
--- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
@@ -8,7 +8,7 @@ const Container = styled.div`
   position: absolute;
   user-select: none;
   box-sizing: border-box;
-  font-family: 'OPS-Cubic';
+  font-family: 'Tonka';
   ${pointerEventsAutoInNormalMode};
   /* box-shadow: 1px 2px 10px -5px black; */
 
diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx
index 7f7fd4c..10501b8 100644
--- a/theatre/studio/src/panels/BasePanel/common.tsx
+++ b/theatre/studio/src/panels/BasePanel/common.tsx
@@ -50,9 +50,8 @@ export const TitleBar = styled.div`
   align-items: center;
   padding: 0 10px;
   position: relative;
-  color: #ffffffb3;
-  border-bottom: 1px solid rgb(0 0 0 / 13%);
-  background-color: #0092ff;
+  color: black;
+  background-color: #a5a5a5;
   font-size: 10px;
   font-weight: 500;
   overflow: hidden;
diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
index 6953281..281b5bc 100644
--- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
@@ -28,23 +28,19 @@ const headerHeight = `32px`
 
 const Container = styled.div<{pin: boolean}>`
   ${pointerEventsAutoInNormalMode};
-  font-family: 'OPS-Cubic';
-  text-transform: uppercase;
-  background-color: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(0, 146, 255, 1);
-  border-radius: 15px;
+  font-family: 'Tonka';
+  // text-transform: uppercase;
+  background: rgba(242, 242, 242, 0.9);
+  border-radius: 0px;
   color: black;
   position: fixed;
-  right: 8px;
-  top: 50px;
+  right: 10px;
+  top: 10px;
   // Temporary, see comment about CSS grid in SingleRowPropEditor.
   width: 280px;
   height: fit-content;
   z-index: ${panelZIndexes.propsPanel};
-
-  box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25),
-    0 10px 10px rgba(0, 146, 255 0.15);
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(2px);
 
   display: ${({pin}) => (pin ? 'block' : 'none')};
 
@@ -53,13 +49,13 @@ const Container = styled.div<{pin: boolean}>`
   }
 
   @supports not (backdrop-filter: blur()) {
-    background: rgba(0, 146, 255 0.75);
+    background: rgba(242, 242, 242, 0.9);
   }
 `
 
 const Title = styled.div`
   margin: 0 10px;
-  color: #0092ff;
+  color: #000000;
   font-weight: bold;
   font-size: 10px;
   user-select: none;
@@ -73,6 +69,7 @@ const Header = styled.div`
   height: ${headerHeight};
   display: flex;
   align-items: center;
+  border-bottom: 1px dashed #91919177;
 `
 
 const Body = styled.div`
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index 1cf8097..3b80036 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -33,23 +33,21 @@ const Header = styled(BaseHeader)`
   align-items: center;
   pointer-events: none;
   white-space: nowrap;
-  font-family: 'OPS-Cubic';
-
-  border-radius: 2px;
+  font-family: 'Tonka';
   /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
 
-  color: rgba(0, 146, 255, 0.9);
+  color: rgba(0, 0, 0, 0.8);
   background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 
   &.descendant-is-selected {
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 1);
   }
 
   ${pointerEventsAutoInNormalMode};
   &:not(.not-selectable):not(.selected):hover {
-    background: rgba(59, 63, 69, 0.9);
+    background: rgba(142, 142, 142, 1);
 
     border-bottom: 1px solid rgba(255, 255, 255, 0.24);
   }
@@ -60,8 +58,7 @@ const Header = styled(BaseHeader)`
   }
 
   &.selected {
-    background: rgba(255, 255, 255, 0.7);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(142, 142, 142, 1);
   }
 
   @supports not (backdrop-filter: blur()) {
@@ -71,7 +68,7 @@ const Header = styled(BaseHeader)`
 
 export const outlineItemFont = css`
   font-weight: 500;
-  font-size: 11px;
+  font-size: 12px;
   & {
   }
 `
diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
index 0c0f63a..151b321 100644
--- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
@@ -14,10 +14,10 @@ const Container = styled.div<{pin: boolean}>`
   ${pointerEventsAutoInNormalMode};
   background-color: transparent;
   position: absolute;
-  left: 8px;
+  left: 10px;
   z-index: ${panelZIndexes.outlinePanel};
 
-  top: calc(${headerHeight} + 8px);
+  top: 10px;
   height: fit-content;
   max-height: calc(100% - ${headerHeight});
   overflow-y: scroll;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
index 1269ca0..24433cc 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
@@ -1,9 +1,8 @@
-import {theme} from '@theatre/studio/css'
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
 import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 import {useVal} from '@theatre/react'
 import type {Pointer} from '@theatre/dataverse'
-import {darken, transparentize} from 'polished'
+import { transparentize} from 'polished'
 import React from 'react'
 import styled from 'styled-components'
 import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid'
@@ -15,7 +14,7 @@ const Container = styled.div`
   bottom: 0;
   z-index: ${() => zIndexes.rightBackground};
   overflow: hidden;
-  background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))};
+  background: ${transparentize(0.1, '#f2f2f2')};
   pointer-events: none;
 `
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
index 84ef686..596b1c6 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
@@ -17,7 +17,7 @@ const Container = styled.div`
 `
 
 export const stampsGridTheme = {
-  fullUnitStampColor: `#ffffff`,
+  fullUnitStampColor: `#000000`,
   stampFontSize: '10px',
   get subUnitStampColor(): string {
     return darken(0.2, stampsGridTheme.fullUnitStampColor)
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
index fad801c..ee2dc5c 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
@@ -27,7 +27,8 @@ const Container = styled.div`
   position: absolute;
   right: 0;
   bottom: 0;
-  background: ${transparentize(0.1, '#0092FF')};
+  background: ${transparentize(0.1, '#c9c9c9')};
+  backdrop-filter: blur(2px);
 `
 
 const SVGContainer = styled.svg`
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
index 549378a..a38b88a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
@@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider'
 
 const Container = styled.button`
   outline: none;
-  background-color: #1c1d21;
-  border: 1px solid #191919;
-  border-radius: 2px;
+  background-color: #ffffff;
+  border: none;
+  border-radius: 0px;
   display: flex;
   bottom: 14px;
   right: 8px;
   z-index: 1;
   position: absolute;
-
   padding: 4px 8px;
   display: flex;
   color: #656d77;
@@ -26,7 +25,7 @@ const Container = styled.button`
   font-size: 10px;
 
   &:hover {
-    color: white;
+    color: black;
   }
 
   & > svg {
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
index 8045d52..138295a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
@@ -53,9 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
 
   #pointer-root.normal & {
     pointer-events: auto;
-    border-radius: 15px;
+    border-radius: 0px;
     overflow: hidden;
-    border: 2px solid #0092ff;
+    border: 2px solid #000000;
   }
 
   #pointer-root.draggingPositionInSequenceEditor & {
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx
index 828f662..d5814cf 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx
@@ -14,7 +14,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag'
 
 const Container = styled.div`
   --threadHeight: 6px;
-  --bg-inactive: #32353b;
+  --bg-inactive: #a5a5a5;
   --bg-active: #5b5c5d;
   position: absolute;
   height: 0;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
index 49780a9..dd0db39 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
@@ -33,7 +33,7 @@ import {
 } from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget'
 
 const Container = styled.div<{isVisible: boolean}>`
-  --thumbColor: #00e0ff;
+  --thumbColor: #ff2a00;
   position: absolute;
   top: 0;
   left: 0;
@@ -50,7 +50,7 @@ const Rod = styled.div`
   top: 8px;
   width: 0;
   height: calc(100% - 8px);
-  border-left: 1px solid #27e0fd;
+  border-left: 1px solid #ff2a00;
   z-index: 10;
   pointer-events: none;
 
@@ -177,7 +177,7 @@ const Tooltip = styled.div`
   left: 4px;
   padding: 0 2px;
   transform: translateX(-50%);
-  background: #0092ff;
+  background: #000000;
   border-radius: 4px;
   color: #fff;
   font-size: 10px;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
index 01be055..ef3a7c6 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
@@ -11,8 +11,8 @@ import FocusRangeZone from './FocusRangeZone/FocusRangeZone'
 export const topStripHeight = 18
 
 export const topStripTheme = {
-  backgroundColor: `#0092FFeb`,
-  borderColor: `#0092FF`,
+  backgroundColor: `#f2f2f2`,
+  borderColor: `#000000`,
 }
 
 const Container = styled.div`
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index f2d88b9..7a202a0 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
@@ -36,16 +36,16 @@ const Container = styled(PanelWrapper)`
 `
 
 const LeftBackground = styled.div`
-  background-color: #ffffff;
-  color: #ffffff;
+  background-color: #f3f3f3;
+  color: #000000;
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: -1;
   pointer-events: none;
-  /* border-bottom: 2px solid #0092FF;
-  border-left: 2px solid #0092FF; */
+  /* border-bottom: 2px solid #000000;
+  border-left: 2px solid #000000; */
 `
 
 export const zIndexes = (() => {
diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
index 9c132d6..9bc615d 100644
--- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
+++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
@@ -78,7 +78,7 @@ const Button = styled.div`
 
 export const nextPrevCursorsTheme = {
   offColor: '#555',
-  onColor: '#0092FF',
+  onColor: '#000000',
 }
 
 const CurButton = styled(Button)<{
@@ -86,7 +86,7 @@ const CurButton = styled(Button)<{
   presence: PresenceFlag | undefined
 }>`
   &:hover {
-    color: #0092ff;
+    color: #000000;
   }
 
   color: ${(props) =>
diff --git a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx
index ff460c1..72fc396 100644
--- a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx
+++ b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx
@@ -5,7 +5,7 @@ import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox'
 import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps'
 
 const Input = styled(BasicCheckbox)`
-  margin-left: 6px;
+  margin-bottom: 10px;
 
   :focus {
     outline: 1px solid #555;
diff --git a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
index cd4355d..a4a01c7 100644
--- a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
+++ b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
@@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
     background: rgba2hex(props.rgbaColor),
   },
 }))<ColorPreviewPuckProps>`
-  height: 18px;
+  height: 23px;
   aspect-ratio: 1;
   border-radius: 99999px;
-  border: 1px solid #0092ff;
+  border: 1px solid #000000;
 `
 
 const HexInput = styled(BasicStringInput)`
diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
index 46e53dc..1d5e686 100644
--- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
+++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
@@ -3,8 +3,6 @@ import {css} from 'styled-components'
 
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
-  font-size: 14px;
-  color: ${(props) =>
-    props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'};
-  text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);
+  font-size: 12px;
+  color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
 `
diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx
index 7ba777e..9ded83d 100644
--- a/theatre/studio/src/toolbars/GlobalToolbar.tsx
+++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx
@@ -29,7 +29,7 @@ const Container = styled.div`
   height: 36px;
   pointer-events: none;
 
-  display: flex;
+  display: none;
   justify-content: space-between;
   padding: 12px;
 `
diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
index 315e586..05432f4 100644
--- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
+++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
@@ -62,7 +62,7 @@ const Link = styled(Item)`
 
   &:hover {
     /* background-color: #398995; */
-    color: white !important;
+    color: grey;
     &:before {
       opacity: 1;
     }
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index 56e231e..0807407 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -34,16 +34,15 @@ const Container = styled.div`
   &.dragging,
   &.editingViaKeyboard {
     &:after {
-      background-color: rgba(0, 146, 255, 0.8);
-      border-color: rgba(0, 146, 255, 1);
+      // background-color: rgba(255, 255, 255, 1);
     }
   }
 `
 
 const Input = styled.input`
-  background: rgba(0, 146, 255, 0.1);
-  border: 3px solid white;
-  color: rgba(0, 146, 255, 1);
+  background: rgba(255, 255, 255, 1);
+  border: none;
+  color: rgba(0, 0, 0, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
@@ -51,7 +50,8 @@ const Input = styled.input`
   text-align: left;
   width: 100%;
   height: calc(100% - 4px);
-  border-radius: 5px;
+  border-radius: 0px;
+  margin-bottom: 10px;
 
   &:focus {
     cursor: text;
@@ -60,16 +60,17 @@ const Input = styled.input`
 
 const FillIndicator = styled.div`
   position: absolute;
-  inset: 3px 2px 4px;
+  inset: 0px 0px 10px;
   transform: scale(var(--percentage), 1);
   transform-origin: top left;
-  background-color: #2d5561;
-  z-index: -1;
+  background-color: #b4b4b4;
+  z-index: 0;
   border-radius: 2px;
-  pointer-events: none;
+  pointer-events: none !important;
+  mix-blend-mode: multiply;
 
   ${Container}.dragging &, ${Container}.noFocus:hover & {
-    background-color: rgba(0, 146, 255, 0.8);
+    background-color: rgba(188, 188, 188, 0.8);
   }
 `
 
diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
index abfec78..9c3a3fd 100644
--- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
@@ -22,16 +22,16 @@ const IconContainer = styled.div`
 
 const Select = styled.select`
   appearance: none;
-  background-color: transparent;
+  background-color: white;
   box-sizing: border-box;
   border: 1px solid transparent;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(0, 0, 0, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
   text-align: left;
   width: 100%;
-  border-radius: 2px;
+  border-radius: 0px;
   /*
   looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
   So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
@@ -46,7 +46,6 @@ const Select = styled.select`
   &:hover,
   &:focus {
     background-color: #10101042;
-    border-color: #00000059;
   }
 `
 
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index 4a33ba6..de1700a 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -7,9 +7,9 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 
 const StyledTextarea = styled.textarea.attrs({type: 'text'})`
-  background: transparent;
-  border: 1px solid transparent;
-  color: rgba(0, 146, 255, 1);
+  background: #ffffff;
+  border: none;
+  color: rgba(0, 0, 0, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
@@ -17,9 +17,9 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   text-align: left;
   width: 100%;
   height: calc(100% - 4px);
-  border-radius: 2px;
-  border: 1px solid transparent;
+  border-radius: 0px;
   box-sizing: border-box;
+  margin-bottom: 10px;
 
   &:hover {
     background-color: #10101042;