diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx
index 671650b..ffc9d42 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: `#282b2f`,
+    bg: `#0092FF77`,
     head: {
       title: {
-        color: `#bbb`,
+        color: `#0092FF`,
       },
       punctuation: {
-        color: `#808080`,
+        color: `#0092FF`,
       },
     },
     body: {
diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
index 764f1b0..350321d 100644
--- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
@@ -8,6 +8,7 @@ const Container = styled.div`
   position: absolute;
   user-select: none;
   box-sizing: border-box;
+  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 47ddf8f..7f7fd4c 100644
--- a/theatre/studio/src/panels/BasePanel/common.tsx
+++ b/theatre/studio/src/panels/BasePanel/common.tsx
@@ -50,9 +50,9 @@ export const TitleBar = styled.div`
   align-items: center;
   padding: 0 10px;
   position: relative;
-  color: #adadadb3;
+  color: #ffffffb3;
   border-bottom: 1px solid rgb(0 0 0 / 13%);
-  background-color: #25272b;
+  background-color: #0092ff;
   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 a2ae973..d561acc 100644
--- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
@@ -28,7 +28,11 @@ const headerHeight = `32px`
 
 const Container = styled.div<{pin: boolean}>`
   ${pointerEventsAutoInNormalMode};
-  background-color: rgba(40, 43, 47, 0.8);
+  font-family: 'Tonka';
+  background-color: rgba(255, 255, 255, 1);
+  border: 2px solid rgba(0, 146, 255, 1);
+  border-radius: 15px;
+  color: black;
   position: fixed;
   right: 8px;
   top: 50px;
@@ -37,9 +41,9 @@ const Container = styled.div<{pin: boolean}>`
   height: fit-content;
   z-index: ${panelZIndexes.propsPanel};
 
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25),
+    0 10px 10px rgba(0, 146, 255 0.15);
   backdrop-filter: blur(14px);
-  border-radius: 2px;
 
   display: ${({pin}) => (pin ? 'block' : 'none')};
 
@@ -48,14 +52,14 @@ const Container = styled.div<{pin: boolean}>`
   }
 
   @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
+    background: rgba(0, 146, 255 0.75);
   }
 `
 
 const Title = styled.div`
   margin: 0 10px;
-  color: #919191;
-  font-weight: 500;
+  color: #0092ff;
+  font-weight: bold;
   font-size: 10px;
   user-select: none;
   ${pointerEventsAutoInNormalMode};
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index d389f50..3b67e8d 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -33,17 +33,18 @@ const Header = styled(BaseHeader)`
   align-items: center;
   pointer-events: none;
   white-space: nowrap;
+  font-family: 'Tonka';
 
   border-radius: 2px;
-  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);
+  /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
 
-  color: rgba(255, 255, 255, 0.9);
-  background: rgba(40, 43, 47, 0.65);
+  color: rgba(0, 146, 255, 0.9);
+  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(29, 53, 59, 0.7);
+    background: rgba(255, 255, 255, 0.7);
   }
 
   ${pointerEventsAutoInNormalMode};
@@ -59,7 +60,7 @@ const Header = styled(BaseHeader)`
   }
 
   &.selected {
-    background: rgba(30, 88, 102, 0.7);
+    background: rgba(255, 255, 255, 0.7);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
index ac30dd2..bf36b14 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
@@ -12,7 +12,7 @@ export type IConnectorThemeValues = {
 }
 
 export const CONNECTOR_THEME = {
-  normalColor: `#365b59`, // (greenish-blueish)ish
+  normalColor: `#FFFFFF`, // (greenish-blueish)ish
   selectedColor: `#8A7842`,
   barColor: (values: IConnectorThemeValues) => {
     const base = values.isSelected
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
index 9831543..84ef686 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: `#6a6a6a`,
+  fullUnitStampColor: `#ffffff`,
   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 bf56382..fad801c 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
@@ -15,8 +15,8 @@ import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/Fram
 import {transparentize} from 'polished'
 
 export const graphEditorColors = {
-  '1': {iconColor: '#b98b08'},
-  '2': {iconColor: '#70a904'},
+  '1': {iconColor: '#AF007E'},
+  '2': {iconColor: '#0600FF'},
   '3': {iconColor: '#2e928a'},
   '4': {iconColor: '#a943bb'},
   '5': {iconColor: '#b90808'},
@@ -27,7 +27,7 @@ const Container = styled.div`
   position: absolute;
   right: 0;
   bottom: 0;
-  background: ${transparentize(0.03, '#1a1c1e')};
+  background: ${transparentize(0.1, '#0092FF')};
 `
 
 const SVGContainer = styled.svg`
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
index 4f68908..8045d52 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
@@ -53,6 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
 
   #pointer-root.normal & {
     pointer-events: auto;
+    border-radius: 15px;
+    overflow: hidden;
+    border: 2px solid #0092ff;
   }
 
   #pointer-root.draggingPositionInSequenceEditor & {
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
index 4916d15..49780a9 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
@@ -177,7 +177,7 @@ const Tooltip = styled.div`
   left: 4px;
   padding: 0 2px;
   transform: translateX(-50%);
-  background: #1a1a1a;
+  background: #0092ff;
   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 1f5741d..01be055 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: `#1f2120eb`,
-  borderColor: `#1c1e21`,
+  backgroundColor: `#0092FFeb`,
+  borderColor: `#0092FF`,
 }
 
 const Container = styled.div`
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index 5eb2e1f..f2d88b9 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
@@ -36,13 +36,16 @@ const Container = styled(PanelWrapper)`
 `
 
 const LeftBackground = styled.div`
-  background-color: rgba(40, 43, 47, 0.99);
+  background-color: #ffffff;
+  color: #ffffff;
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: -1;
   pointer-events: none;
+  /* border-bottom: 2px solid #0092FF;
+  border-left: 2px solid #0092FF; */
 `
 
 export const zIndexes = (() => {
diff --git a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
index bd1f1b5..cd4355d 100644
--- a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
+++ b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
@@ -35,6 +35,7 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
   height: 18px;
   aspect-ratio: 1;
   border-radius: 99999px;
+  border: 1px solid #0092ff;
 `
 
 const HexInput = styled(BasicStringInput)`
diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
index 986bb45..e1761ab 100644
--- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
+++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
@@ -4,6 +4,7 @@ import {css} from 'styled-components'
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
   font-size: 11px;
-  color: ${(props) => (props.isHighlighted === 'self' ? '#CCC' : '#919191')};
-  text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
+  color: ${(props) =>
+    props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'};
+  text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);
 `
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index 8398427..56e231e 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -34,16 +34,16 @@ const Container = styled.div`
   &.dragging,
   &.editingViaKeyboard {
     &:after {
-      background-color: #10101042;
-      border-color: #00000059;
+      background-color: rgba(0, 146, 255, 0.8);
+      border-color: rgba(0, 146, 255, 1);
     }
   }
 `
 
 const Input = styled.input`
-  background: transparent;
-  border: 1px solid transparent;
-  color: rgba(255, 255, 255, 0.9);
+  background: rgba(0, 146, 255, 0.1);
+  border: 3px solid white;
+  color: rgba(0, 146, 255, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
@@ -51,7 +51,7 @@ const Input = styled.input`
   text-align: left;
   width: 100%;
   height: calc(100% - 4px);
-  border-radius: 2px;
+  border-radius: 5px;
 
   &:focus {
     cursor: text;
@@ -69,7 +69,7 @@ const FillIndicator = styled.div`
   pointer-events: none;
 
   ${Container}.dragging &, ${Container}.noFocus:hover & {
-    background-color: #338198;
+    background-color: rgba(0, 146, 255, 0.8);
   }
 `
 
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index 795e07e..0ba157c 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import type {MutableRefObject} from 'react';
-import { useEffect} from 'react'
+import type {MutableRefObject} from 'react'
+import {useEffect} from 'react'
 import React, {useMemo, useRef} from 'react'
 import mergeRefs from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
@@ -9,7 +9,7 @@ import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 const Input = styled.input.attrs({type: 'text'})`
   background: transparent;
   border: 1px solid transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(0, 146, 255, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;