diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index e3b03b614..c7e02a380 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -21,6 +21,7 @@
 	--radius-2: 6px;
 	--radius-3: 9px;
 	--radius-4: 13px;
+	/* Z Index */
 	--layer-background: 100;
 	--layer-grid: 150;
 	--layer-canvas: 200;
@@ -77,16 +78,18 @@
 	--tl-cursor-senw-rotate: pointer;
 	--tl-cursor-swne-rotate: pointer;
 	--tl-scale: calc(1 / var(--tl-zoom));
+	/* fonts */
 	--tl-font-draw: 'tldraw_draw', sans-serif;
 	--tl-font-sans: 'tldraw_sans', sans-serif;
 	--tl-font-serif: 'tldraw_serif', serif;
 	--tl-font-mono: 'tldraw_mono', monospace;
+	/* fext outline */
 	--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
 	--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
 	--tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
 		var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
 		var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);
-	/* Own properties */
+	/* own properties */
 	position: relative;
 	top: 0px;
 	left: 0px;
@@ -96,85 +99,85 @@
 }
 
 .tl-theme__light {
-	--color-accent: #e64a4a;
-	--color-background: rgb(249, 250, 251);
-	--color-brush-fill: rgba(144, 144, 144, 0.102);
-	--color-brush-stroke: rgba(144, 144, 144, 0.251);
-	--color-grid: rgb(109, 109, 109);
+	--color-accent: hsl(0, 76%, 60%);
+	--color-background: hsl(210, 20%, 98%);
+	--color-brush-fill: hsl(0, 0%, 56%, 10.2%);
+	--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
+	--color-grid: hsl(0, 0%, 43%);
 	--color-low: hsl(204, 16%, 94%);
 	--color-low-border: hsl(204, 16%, 92%);
-	--color-culled: rgb(235, 238, 240);
-	--color-muted-none: rgba(0, 0, 0, 0);
-	--color-muted-0: rgba(0, 0, 0, 0.02);
-	--color-muted-1: rgba(0, 0, 0, 0.1);
-	--color-muted-2: rgba(0, 0, 0, 0.042);
-	--color-hint: rgba(0, 0, 0, 0.055);
-	--color-overlay: rgba(0, 0, 0, 0.2);
-	--color-divider: #e8e8e8;
-	--color-panel-contrast: #ffffff;
-	--color-panel-overlay: rgba(255, 255, 255, 0.82);
-	--color-panel: #fdfdfd;
-	--color-focus: #004094;
-	--color-selected: #2f80ed;
-	--color-selected-contrast: #ffffff;
-	--color-selection-fill: #1e90ff06;
-	--color-selection-stroke: #2f80ed;
-	--color-text-0: #1d1d1d;
-	--color-text-1: #2d2d2d;
-	--color-text-3: #a4a5a7;
-	--color-text-shadow: #ffffff;
-	--color-primary: #2f80ed;
-	--color-warn: #d10b0b;
-	--color-text: #000000;
-	--color-laser: #ff0000;
-
-	--shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.09);
-	--shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.16), 0px 2px 3px rgba(0, 0, 0, 0.24),
-		0px 2px 6px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
-	--shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.28), 0px 2px 6px rgba(0, 0, 0, 0.14),
+	--color-culled: hsl(204, 14%, 93%);
+	--color-muted-none: hsl(0, 0%, 0%, 0%);
+	--color-muted-0: hsl(0, 0%, 0%, 2%);
+	--color-muted-1: hsl(0, 0%, 0%, 10%);
+	--color-muted-2: hsl(0, 0%, 0%, 4.3%);
+	--color-hint: hsl(0, 0%, 0%, 5.5%);
+	--color-overlay: hsl(0, 0%, 0% 20%);
+	--color-divider: hsl(0, 0%, 91%);
+	--color-panel-contrast: hsl(0, 0%, 100%);
+	--color-panel-overlay: hsl(0, 0%, 100%, 82%);
+	--color-panel: hsl(0, 0%, 99%);
+	--color-focus: hsl(214, 100%, 29%);
+	--color-selected: hsl(214, 84%, 56%);
+	--color-selected-contrast: hsl(0, 0%, 100%);
+	--color-selection-fill: hsl(210, 100%, 56% 2.4%);
+	--color-selection-stroke: hsl(214, 84%, 56%);
+	--color-text-0: hsl(0, 0%, 11%);
+	--color-text-1: hsl(0, 0%, 18%);
+	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-shadow: hsl(0, 0%, 100%);
+	--color-primary: hsl(214, 84%, 56%);
+	--color-warn: hsl(0, 90%, 43%);
+	--color-text: hsl(0, 0%, 0%);
+	--color-laser: hsl(0, 100%, 50%);
+	/* Shadows */
+	--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
+	--shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
+		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
 		inset 0px 0px 0px 1px var(--color-panel-contrast);
-	--shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.19), 0px 5px 4px rgba(0, 0, 0, 0.16),
-		0px 2px 16px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
+		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
 }
 
 .tl-theme__dark {
-	--color-accent: #e64a4a;
-	--color-background: #212529;
-	--color-brush-fill: rgba(180, 180, 180, 0.05);
-	--color-brush-stroke: rgba(180, 180, 180, 0.25);
-	--color-grid: #909090;
-	--color-low: #2c3136;
-	--color-low-border: #30363b;
-	--color-culled: rgb(47, 52, 57);
-	--color-muted-none: rgba(255, 255, 255, 0);
-	--color-muted-0: rgba(255, 255, 255, 0.02);
-	--color-muted-1: rgba(255, 255, 255, 0.1);
-	--color-muted-2: rgba(255, 255, 255, 0.05);
-	--color-hint: rgba(255, 255, 255, 0.1);
-	--color-overlay: rgba(0, 0, 0, 0.35);
-	--color-divider: #49555f;
-	--color-panel-contrast: #49555f;
-	--color-panel: #363d44;
-	--color-panel-overlay: rgba(54, 61, 68, 0.82);
-	--color-focus: #a5c3f3;
-	--color-selected: #4285f4;
-	--color-selected-contrast: #ffffff;
-	--color-selection-fill: rgba(38, 150, 255, 0.05);
-	--color-selection-stroke: #2f80ed;
-	--color-text-0: #f0eded;
-	--color-text-1: #d9d9d9;
-	--color-text-3: #6d747b;
-	--color-text-shadow: #292f35;
-	--color-primary: #2f80ed;
-	--color-warn: #ef6464;
-	--color-text: #f8f9fa;
-	--color-laser: #ff0000;
-
-	--shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038,
+	--color-accent: hsl(0, 76%, 60%);
+	--color-background: hsl(240, 5%, 8%);
+	--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
+	--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
+	--color-grid: hsl(0, 0%, 56%);
+	--color-low: hsl(260, 5%, 5%);
+	--color-low-border: hsl(207, 10%, 10%);
+	--color-culled: hsl(210, 11%, 19%);
+	--color-muted-none: hsl(0, 0%, 100%, 0%);
+	--color-muted-0: hsl(0, 0%, 100%, 2%);
+	--color-muted-1: hsl(0, 0%, 100%, 10%);
+	--color-muted-2: hsl(0, 0%, 100%, 5%);
+	--color-hint: hsl(0, 0%, 100%, 10%);
+	--color-overlay: hsl(0, 0%, 0%, 35%);
+	--color-divider: hsl(240, 9%, 25%);
+	--color-panel-contrast: hsl(240, 13%, 19%);
+	--color-panel: hsl(220, 8%, 15%);
+	--color-panel-overlay: hsl(210, 11%, 24%, 82%);
+	--color-focus: hsl(217, 76%, 80%);
+	--color-selected: hsl(217, 89%, 61%);
+	--color-selected-contrast: hsl(0, 0%, 100%);
+	--color-selection-fill: hsl(209, 100%, 57%, 5%);
+	--color-selection-stroke: hsl(214, 84%, 56%);
+	--color-text-0: hsl(0, 9%, 94%);
+	--color-text-1: hsl(0, 0%, 85%);
+	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-shadow: hsl(210, 13%, 18%);
+	--color-primary: hsl(214, 84%, 56%);
+	--color-warn: hsl(0, 81%, 66%);
+	--color-text: hsl(210, 17%, 98%);
+	--color-laser: hsl(0, 100%, 50%);
+	/* Shadows */
+	--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
 		inset 0px 0px 0px 1px var(--color-panel-contrast);
-	--shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055,
+	--shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 46.7%), 0px 2px 6px hsl(0, 0%, 0%, 33.3%),
 		inset 0px 0px 0px 1px var(--color-panel-contrast);
-	--shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22),
+	--shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 46.7%), 0px 2px 12px hsl(0, 0%, 0%, 22%),
 		inset 0px 0px 0px 1px var(--color-panel-contrast);
 }
 
diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json
index 3b98a1ca2..96e2a8db3 100644
--- a/packages/tldraw/package.json
+++ b/packages/tldraw/package.json
@@ -31,7 +31,7 @@
 	"scripts": {
 		"test": "lazy inherit",
 		"test-coverage": "lazy inherit",
-		"dev": "chokidar '../{editor/src/lib/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs' --initial",
+		"dev": "chokidar '../{editor/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs' --initial",
 		"prebuild": "node ./scripts/copy-css-files.mjs",
 		"build": "yarn run -T tsx ../../scripts/build-package.ts",
 		"build-api": "yarn run -T tsx ../../scripts/build-api.ts",