diff --git a/gitbutler-ui/src/lib/branches/types.ts b/gitbutler-ui/src/lib/branches/types.ts
index b46907481..df0e22b6a 100644
--- a/gitbutler-ui/src/lib/branches/types.ts
+++ b/gitbutler-ui/src/lib/branches/types.ts
@@ -1,7 +1,5 @@
 import type { PullRequest } from '$lib/github/types';
 import type { Author, Branch, RemoteBranch } from '$lib/vbranches/types';
-import type iconsJson from '$lib/icons/icons.json';
-import type { IconColor } from '$lib/icons/Icon.svelte';
 
 export class CombinedBranch {
 	pr?: PullRequest;
@@ -52,18 +50,20 @@ export class CombinedBranch {
 		return this.authors[0];
 	}
 
-	get icon(): keyof typeof iconsJson | undefined {
-		if (this.vbranch) return 'branch';
+	get icon(): 'remote-branch' | 'virtual-branch' | 'pr' | 'pr-draft' | 'pr-closed' | undefined {
+		if (this.vbranch) return 'virtual-branch';
 		if (this.pr) return 'pr';
-		if (this.remoteBranch) return 'branch';
+		if (this.remoteBranch) return 'remote-branch';
 		return undefined; // or implement a default icon?
 	}
 
-	get color(): IconColor {
-		if (this.pr?.mergedAt) return 'pop';
-		if (this.vbranch && this.vbranch.active == false) return 'warn';
-		if (this.remoteBranch?.isMergeable) return 'success';
-		return 'pop';
+	// GH colors reference https://github.blog/changelog/2021-06-08-new-issue-and-pull-request-state-icons
+	get color(): 'neutral' | 'success' | 'pop' | 'purple' | undefined {
+		if (this.pr?.mergedAt) return 'purple'; // merged PR
+		if (this.pr) return 'success'; // open PR
+		if (this.vbranch && this.vbranch.active == false) return 'pop'; // stashed virtual branches
+		if (this.remoteBranch?.isMergeable) return 'success'; // remote branches
+		return 'neutral';
 	}
 
 	get modifiedAt(): Date | undefined {
diff --git a/gitbutler-ui/src/lib/components/Button.svelte b/gitbutler-ui/src/lib/components/Button.svelte
index 0c230ce3b..60c152053 100644
--- a/gitbutler-ui/src/lib/components/Button.svelte
+++ b/gitbutler-ui/src/lib/components/Button.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+	export type ButtonColor = 'primary' | 'neutral' | 'error' | 'warn';
+</script>
+
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type iconsJson from '$lib/icons/icons.json';
@@ -5,7 +9,7 @@
 
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let iconAlign: 'left' | 'right' = 'right';
-	export let color: 'primary' | 'neutral' | 'error' = 'primary';
+	export let color: ButtonColor = 'primary';
 	export let kind: 'filled' | 'outlined' = 'filled';
 	export let disabled = false;
 	export let id: string | undefined = undefined;
@@ -31,8 +35,10 @@
 	class={`btn ${className}`}
 	class:error-outline={color == 'error' && kind == 'outlined'}
 	class:primary-outline={color == 'primary' && kind == 'outlined'}
+	class:warn-outline={color == 'warn' && kind == 'outlined'}
 	class:error-filled={color == 'error' && kind == 'filled'}
 	class:primary-filled={color == 'primary' && kind == 'filled'}
+	class:warn-filled={color == 'warn' && kind == 'filled'}
 	class:neutral-outline={color == 'neutral' && kind == 'outlined'}
 	class:pointer-events-none={loading}
 	class:icon-left={iconAlign == 'left'}
@@ -125,6 +131,29 @@
 			background: var(--clr-theme-container-pale);
 		}
 	}
+	.warn-filled {
+		color: var(--clr-theme-warn-on-element);
+		background: var(--clr-theme-warn-element);
+		&:hover {
+			background: var(--clr-theme-warn-element-dim);
+		}
+		&:active {
+			background: var(--clr-theme-warn-element-dark);
+		}
+	}
+	.warn-outline {
+		color: var(--clr-theme-warn-outline);
+		border: 1px solid var(--clr-theme-warn-outline);
+		&:hover {
+			color: var(--clr-theme-warn-outline-dim);
+			border: 1px solid var(--clr-theme-warn-outline-dim);
+		}
+		&:active {
+			color: var(--clr-theme-warn-outline-dim);
+			border: 1px solid var(--clr-theme-warn-outline-dim);
+			background: var(--clr-theme-warn-container);
+		}
+	}
 	.error-filled {
 		color: var(--clr-theme-err-on-element);
 		background: var(--clr-theme-err-element);
diff --git a/gitbutler-ui/src/lib/components/InfoMessage.svelte b/gitbutler-ui/src/lib/components/InfoMessage.svelte
new file mode 100644
index 000000000..cd3dc2803
--- /dev/null
+++ b/gitbutler-ui/src/lib/components/InfoMessage.svelte
@@ -0,0 +1,121 @@
+<script lang="ts" context="module">
+	export type MessageStyle = 'neutral' | 'error' | 'pop' | 'warn';
+</script>
+
+<script lang="ts">
+	import Icon, { type IconColor } from '$lib/icons/Icon.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import type iconsJson from '../icons/icons.json';
+	import Button, { type ButtonColor } from './Button.svelte';
+
+	export let style: MessageStyle = 'neutral';
+	export let title: string;
+	export let primary: string | undefined = undefined;
+	export let secondary: string | undefined = undefined;
+
+	const dispatch = createEventDispatcher<{ primary: void; secondary: void }>();
+
+	const iconMap: { [Key in MessageStyle]: keyof typeof iconsJson } = {
+		neutral: 'info',
+		pop: 'info',
+		warn: 'warning',
+		error: 'error'
+	};
+
+	const iconColorMap: { [Key in MessageStyle]: IconColor } = {
+		neutral: 'pop',
+		pop: 'pop',
+		warn: 'warn',
+		error: 'error'
+	};
+
+	const primaryButtonMap: { [Key in MessageStyle]: ButtonColor } = {
+		neutral: 'primary',
+		pop: 'primary',
+		warn: 'warn',
+		error: 'error'
+	};
+
+	const secondaryButtonMap: { [Key in MessageStyle]: ButtonColor } = {
+		neutral: 'neutral',
+		pop: 'primary',
+		warn: 'warn',
+		error: 'error'
+	};
+</script>
+
+<div
+	class="info-message"
+	class:neutral={style == 'neutral'}
+	class:error={style == 'error'}
+	class:pop={style == 'pop'}
+	class:warn={style == 'warn'}
+>
+	<Icon name={iconMap[style]} color={iconColorMap[style]} />
+	<div class="info-message__inner">
+		<div class="info-message__content">
+			<div class="info-message__title text-base-13 text-semibold">{title}</div>
+			<div class="info-message__text text-base-12">
+				<slot />
+			</div>
+		</div>
+		<div class="info-message__actions">
+			{#if secondary}
+				<Button
+					color={secondaryButtonMap[style]}
+					kind="outlined"
+					on:click={() => dispatch('secondary')}
+				>
+					{secondary}
+				</Button>
+			{/if}
+			{#if primary}
+				<Button color={primaryButtonMap[style]} on:click={() => dispatch('primary')}>
+					{primary}
+				</Button>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.info-message {
+		color: var(--clr-theme-scale-ntrl-0);
+		display: flex;
+		padding: var(--space-16);
+		border-radius: var(--radius-m);
+		gap: var(--space-12);
+	}
+	.info-message__inner {
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+		gap: var(--space-12);
+	}
+	.info-message__content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-8);
+	}
+	.info-message__actions {
+		display: flex;
+		gap: var(--space-6);
+		justify-content: flex-end;
+	}
+	.neutral {
+		background-color: var(--clr-theme-container-light);
+		border: 1px solid var(--clr-theme-container-outline-light);
+	}
+	.error {
+		background-color: var(--clr-theme-err-container);
+		border: 1px solid var(--clr-theme-scale-err-70);
+	}
+	.pop {
+		background-color: var(--clr-theme-pop-container);
+		border: 1px solid var(--clr-theme-scale-pop-60);
+	}
+	.warn {
+		background-color: var(--clr-theme-warn-container);
+		border: 1px solid var(--clr-theme-scale-warn-70);
+	}
+</style>
diff --git a/gitbutler-ui/src/lib/components/Toggle.svelte b/gitbutler-ui/src/lib/components/Toggle.svelte
index 01d4941c6..7c21efaf4 100644
--- a/gitbutler-ui/src/lib/components/Toggle.svelte
+++ b/gitbutler-ui/src/lib/components/Toggle.svelte
@@ -25,7 +25,7 @@
 		width: calc(var(--space-24) + var(--space-2));
 		height: var(--space-16);
 		border-radius: var(--space-16);
-		background-color: var(--clr-theme-container-mid);
+		background-color: var(--clr-theme-container-sub);
 		box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
 		transition:
 			background-color var(--transition-fast),
@@ -37,7 +37,7 @@
 		/* not checked */
 		&:hover,
 		&:focus {
-			background-color: var(--clr-theme-container-dark);
+			background-color: var(--clr-theme-container-dim);
 			outline: none;
 		}
 
diff --git a/gitbutler-ui/src/lib/icons/Icon.svelte b/gitbutler-ui/src/lib/icons/Icon.svelte
index e02a4db5e..77ab45c47 100644
--- a/gitbutler-ui/src/lib/icons/Icon.svelte
+++ b/gitbutler-ui/src/lib/icons/Icon.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-	export type IconColor = 'success' | 'error' | 'pop' | 'warn' | undefined;
+	export type IconColor = 'success' | 'error' | 'pop' | 'warn' | 'neutral' | undefined;
 </script>
 
 <script lang="ts">
diff --git a/gitbutler-ui/src/routes/[projectId]/components/Tag.svelte b/gitbutler-ui/src/routes/[projectId]/components/Tag.svelte
index becd8679d..646b1eb4d 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/Tag.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/Tag.svelte
@@ -84,7 +84,7 @@
 	}
 
 	.success {
-		color: var(--clr-theme-succ-outline-dark);
+		color: var(--clr-theme-scale-succ-30);
 		background: var(--clr-theme-succ-container);
 		&:hover {
 			background: var(--clr-theme-succ-container-dim);
@@ -102,7 +102,7 @@
 	}
 
 	.error {
-		color: var(--clr-theme-err-outline-dark);
+		color: var(--clr-theme-scale-err-30);
 		background: var(--clr-theme-err-container);
 		&:hover {
 			background: var(--clr-theme-err-container-dim);
@@ -120,7 +120,7 @@
 	}
 
 	.warning {
-		color: var(--clr-theme-warn-outline-dark);
+		color: var(--clr-theme-scale-warn-30);
 		background: var(--clr-theme-warn-container);
 		&:hover {
 			background: var(--clr-theme-warn-container-dim);
diff --git a/gitbutler-ui/src/routes/[projectId]/navigation/BranchIcon.svelte b/gitbutler-ui/src/routes/[projectId]/navigation/BranchIcon.svelte
new file mode 100644
index 000000000..5ab4ea400
--- /dev/null
+++ b/gitbutler-ui/src/routes/[projectId]/navigation/BranchIcon.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	export let name: 'remote-branch' | 'virtual-branch' | 'pr' | 'pr-draft' | 'pr-closed' | undefined;
+	export let color: 'neutral' | 'success' | 'pop' | 'purple' | undefined;
+
+	console.log(name, color);
+</script>
+
+<div
+	class="branch-icon"
+	class:pop={color == 'pop'}
+	class:neutral={color == 'neutral'}
+	class:success={color == 'success'}
+	class:purple={color == 'purple'}
+>
+	{#if name == 'virtual-branch'}
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M5.75 7.5V4H4.25V7.5H5.75Z" fill="white" />
+			<path
+				d="M11.75 7V4H10.25V7C10.25 8.24264 9.24264 9.25 8 9.25C5.92893 9.25 4.25 10.9289 4.25 13V16H5.75V13C5.75 11.7574 6.75736 10.75 8 10.75C10.0711 10.75 11.75 9.07107 11.75 7Z"
+				fill="white"
+			/>
+		</svg>
+	{/if}
+	{#if name == 'remote-branch'}
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M5.75 9.99973V4H4.25V16H5.75V13C5.75 11.7574 6.75736 10.75 8 10.75C10.0711 10.75 11.75 9.07107 11.75 7V4H10.25V7C10.25 8.24264 9.24264 9.25 8 9.25C7.1558 9.25 6.37675 9.52896 5.75 9.99973Z"
+				fill="white"
+			/>
+		</svg>
+	{/if}
+	{#if name == 'pr'}
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M3 5L8 2V4.25H10C11.5188 4.25 12.75 5.48122 12.75 7V16H11.25V7C11.25 6.30964 10.6904 5.75 10 5.75H8V8L3 5Z"
+				fill="white"
+			/>
+			<path d="M4.25 9L4.25 16H5.75L5.75 9H4.25Z" fill="white" />
+		</svg>
+	{/if}
+	{#if name == 'pr-draft'}
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M11.75 7.88555C12.7643 7.56698 13.5 6.61941 13.5 5.5C13.5 4.11929 12.3807 3 11 3C9.61929 3 8.5 4.11929 8.5 5.5C8.5 6.61941 9.23572 7.56698 10.25 7.88555V9H11.75V7.88555Z"
+				fill="white"
+			/>
+			<path d="M4.25 16V4L5.75 4L5.75 16H4.25Z" fill="white" />
+			<path d="M10.25 13L10.25 11H11.75L11.75 13H10.25Z" fill="white" />
+			<path d="M10.25 16V15H11.75V16H10.25Z" fill="white" />
+		</svg>
+	{/if}
+	{#if name == 'pr-closed'}
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M9.99999 4.93934L12.4697 2.46967L13.5303 3.53033L11.0607 6L13.5303 8.46967L12.4697 9.53033L9.99999 7.06066L7.53033 9.53033L6.46967 8.46967L8.93933 6L6.46967 3.53033L7.53033 2.46967L9.99999 4.93934Z"
+				fill="white"
+			/>
+			<path d="M3.25 4.00001V16H4.75L4.75 4.00001H3.25Z" fill="white" />
+			<path d="M9.25 10L9.25 16H10.75L10.75 10H9.25Z" fill="white" />
+		</svg>
+	{/if}
+</div>
+
+<style lang="postcss">
+	.branch-icon {
+		flex-shrink: 0;
+		width: 16px;
+		height: 16px;
+		border-radius: var(--radius-s);
+	}
+
+	.pop {
+		background-color: var(--clr-core-pop-40);
+	}
+
+	.neutral {
+		background-color: var(--clr-core-ntrl-50);
+	}
+
+	.success {
+		background-color: var(--clr-core-succ-45);
+	}
+
+	.purple {
+		background-color: #8e5ae3;
+	}
+</style>
diff --git a/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte b/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
index d98313258..3ff4b45f8 100644
--- a/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
@@ -2,7 +2,8 @@
 	import { page } from '$app/stores';
 	import AuthorIcons from '$lib/components/AuthorIcons.svelte';
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
-	import Icon from '$lib/icons/Icon.svelte';
+	import BranchIcon from './BranchIcon.svelte';
+	// import Icon from '$lib/icons/Icon.svelte';
 	import type { CombinedBranch } from '$lib/branches/types';
 
 	export let projectId: string;
@@ -21,7 +22,8 @@
 
 <a class="branch" class:selected {href}>
 	{#if branch.icon}
-		<div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div>
+		<!-- <div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div> -->
+		<BranchIcon name={branch.icon} color={branch.color} />
 	{/if}
 	<div class="branch__info flex flex-col gap-2">
 		<p class="text-base-body-13 branch__name">
@@ -78,8 +80,4 @@
 	.selected {
 		background-color: var(--clr-theme-container-pale);
 	}
-
-	.item__icon {
-		flex-shrink: 0;
-	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/navigation/Navigation.svelte b/gitbutler-ui/src/routes/[projectId]/navigation/Navigation.svelte
index 9cd278471..c9a826cea 100644
--- a/gitbutler-ui/src/routes/[projectId]/navigation/Navigation.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/navigation/Navigation.svelte
@@ -64,10 +64,14 @@
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
-					<rect width="16" height="16" rx="4" fill="#797FE6" />
-					<path d="M5 8.8H11V4" stroke="white" stroke-width="2" />
-					<path d="M5 12V8.44444V4" stroke="white" stroke-width="2" />
+					<path
+						d="M0 6.64C0 4.17295 0 2.93942 0.525474 2.01817C0.880399 1.39592 1.39592 0.880399 2.01817 0.525474C2.93942 0 4.17295 0 6.64 0H9.36C11.8271 0 13.0606 0 13.9818 0.525474C14.6041 0.880399 15.1196 1.39592 15.4745 2.01817C16 2.93942 16 4.17295 16 6.64V9.36C16 11.8271 16 13.0606 15.4745 13.9818C15.1196 14.6041 14.6041 15.1196 13.9818 15.4745C13.0606 16 11.8271 16 9.36 16H6.64C4.17295 16 2.93942 16 2.01817 15.4745C1.39592 15.1196 0.880399 14.6041 0.525474 13.9818C0 13.0606 0 11.8271 0 9.36V6.64Z"
+						fill="#48B0AA"
+					/>
+					<rect x="2" y="3" width="6" height="10" rx="2" fill="#D9F3F2" />
+					<rect opacity="0.7" x="10" y="3" width="4" height="10" rx="2" fill="#D9F3F2" />
 				</svg>
+
 				<span>Applied branches</span>
 				{#if ($base$?.behind || 0) > 0}
 					<Tooltip label="Merge upstream commits into common base">
diff --git a/gitbutler-ui/src/styles/tokens.css b/gitbutler-ui/src/styles/tokens.css
index fc66b5c5c..52c624280 100644
--- a/gitbutler-ui/src/styles/tokens.css
+++ b/gitbutler-ui/src/styles/tokens.css
@@ -26,45 +26,45 @@
 	--clr-core-err-90: #fdf1f4;
 	--clr-core-err-95: #fff8fb;
 	--clr-core-ntrl-0: #000000;
-	--clr-core-ntrl-5: #141415;
-	--clr-core-ntrl-10: #1c1c1c;
-	--clr-core-ntrl-15: #252527;
-	--clr-core-ntrl-20: #2d2d2f;
-	--clr-core-ntrl-25: #383838;
-	--clr-core-ntrl-30: #424242;
-	--clr-core-ntrl-35: #4d4d4d;
-	--clr-core-ntrl-40: #676767;
-	--clr-core-ntrl-45: #7a7a7a;
-	--clr-core-ntrl-50: #989898;
-	--clr-core-ntrl-55: #afafaf;
-	--clr-core-ntrl-60: #c4c4c4;
-	--clr-core-ntrl-65: #d4d4d4;
-	--clr-core-ntrl-70: #d9d9d9;
-	--clr-core-ntrl-75: #e1e1e1;
-	--clr-core-ntrl-80: #e7e7e7;
-	--clr-core-ntrl-85: #eeeeee;
-	--clr-core-ntrl-90: #f4f4f4;
-	--clr-core-ntrl-95: #f9f9f9;
+	--clr-core-ntrl-5: #151514;
+	--clr-core-ntrl-10: #1a1a19;
+	--clr-core-ntrl-15: #1f1f1e;
+	--clr-core-ntrl-20: #242423;
+	--clr-core-ntrl-25: #2c2c2a;
+	--clr-core-ntrl-30: #373634;
+	--clr-core-ntrl-35: #444341;
+	--clr-core-ntrl-40: #51504d;
+	--clr-core-ntrl-45: #787773;
+	--clr-core-ntrl-50: #999894;
+	--clr-core-ntrl-55: #b1b0ad;
+	--clr-core-ntrl-60: #c5c5c3;
+	--clr-core-ntrl-65: #d5d5d3;
+	--clr-core-ntrl-70: #dbdad7;
+	--clr-core-ntrl-75: #e3e2df;
+	--clr-core-ntrl-80: #e9e8e5;
+	--clr-core-ntrl-85: #f0efec;
+	--clr-core-ntrl-90: #f5f5f3;
+	--clr-core-ntrl-95: #fbfaf9;
 	--clr-core-ntrl-100: #ffffff;
-	--clr-core-pop-5: #27273f;
-	--clr-core-pop-10: #2a2b50;
-	--clr-core-pop-15: #363763;
-	--clr-core-pop-20: #3d3f7b;
-	--clr-core-pop-25: #414595;
-	--clr-core-pop-30: #484cad;
-	--clr-core-pop-35: #565ac2;
-	--clr-core-pop-40: #666ad6;
-	--clr-core-pop-45: #7176e4;
-	--clr-core-pop-50: #7c81e3;
-	--clr-core-pop-55: #a0a4f7;
-	--clr-core-pop-60: #b5b9f8;
-	--clr-core-pop-65: #cacdff;
-	--clr-core-pop-70: #d6d8fd;
-	--clr-core-pop-75: #dfe1ff;
-	--clr-core-pop-80: #e8eaff;
-	--clr-core-pop-85: #eeefff;
-	--clr-core-pop-90: #f4f4ff;
-	--clr-core-pop-95: #f9f9ff;
+	--clr-core-pop-5: #073e3b;
+	--clr-core-pop-10: #084643;
+	--clr-core-pop-15: #094e4b;
+	--clr-core-pop-20: #0a5d59;
+	--clr-core-pop-25: #0c6e69;
+	--clr-core-pop-30: #0e7c76;
+	--clr-core-pop-35: #108e88;
+	--clr-core-pop-40: #12a19a;
+	--clr-core-pop-45: #14b8af;
+	--clr-core-pop-50: #1eccc3;
+	--clr-core-pop-55: #6cdad5;
+	--clr-core-pop-60: #91e3df;
+	--clr-core-pop-65: #a5e9e5;
+	--clr-core-pop-70: #baeeeb;
+	--clr-core-pop-75: #c6f1ef;
+	--clr-core-pop-80: #d2f4f2;
+	--clr-core-pop-85: #e2f8f7;
+	--clr-core-pop-90: #ebfaf9;
+	--clr-core-pop-95: #f3fcfb;
 	--clr-core-succ-5: #112c1f;
 	--clr-core-succ-10: #153727;
 	--clr-core-succ-15: #1b412f;
@@ -116,7 +116,6 @@
 	--clr-theme-container-pale: var(--clr-core-ntrl-90);
 	--clr-theme-container-sub: var(--clr-core-ntrl-80);
 	--clr-theme-err-container: var(--clr-core-err-95);
-	--clr-theme-err-container-dark: var(--clr-core-err-70);
 	--clr-theme-err-container-dim: var(--clr-core-err-80);
 	--clr-theme-err-element: var(--clr-core-err-50);
 	--clr-theme-err-element-dark: var(--clr-core-err-35);
@@ -124,11 +123,9 @@
 	--clr-theme-err-on-container: var(--clr-core-err-40);
 	--clr-theme-err-on-element: var(--clr-core-err-95);
 	--clr-theme-err-outline: var(--clr-core-err-45);
-	--clr-theme-err-outline-dark: var(--clr-core-err-35);
 	--clr-theme-err-outline-dim: var(--clr-core-err-40);
 	--clr-theme-overlay-bg: #cfcfcf4d;
 	--clr-theme-pop-container: var(--clr-core-pop-95);
-	--clr-theme-pop-container-dark: var(--clr-core-pop-70);
 	--clr-theme-pop-container-dim: var(--clr-core-pop-80);
 	--clr-theme-pop-element: var(--clr-core-pop-40);
 	--clr-theme-pop-element-dark: var(--clr-core-pop-20);
@@ -136,7 +133,6 @@
 	--clr-theme-pop-on-container: var(--clr-core-pop-10);
 	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
 	--clr-theme-pop-outline: var(--clr-core-pop-40);
-	--clr-theme-pop-outline-dark: var(--clr-core-pop-20);
 	--clr-theme-pop-outline-dim: var(--clr-core-pop-30);
 	--clr-theme-scale-err-10: var(--clr-core-err-10);
 	--clr-theme-scale-err-20: var(--clr-core-err-20);
@@ -186,7 +182,6 @@
 	--clr-theme-scale-warn-80: var(--clr-core-warn-80);
 	--clr-theme-scale-warn-90: var(--clr-core-warn-90);
 	--clr-theme-succ-container: var(--clr-core-succ-95);
-	--clr-theme-succ-container-dark: var(--clr-core-succ-70);
 	--clr-theme-succ-container-dim: var(--clr-core-succ-80);
 	--clr-theme-succ-element: var(--clr-core-succ-50);
 	--clr-theme-succ-element-dark: var(--clr-core-succ-35);
@@ -194,19 +189,18 @@
 	--clr-theme-succ-on-container: var(--clr-core-succ-40);
 	--clr-theme-succ-on-element: var(--clr-core-succ-95);
 	--clr-theme-succ-outline: var(--clr-core-succ-45);
-	--clr-theme-succ-outline-dark: var(--clr-core-succ-35);
 	--clr-theme-succ-outline-dim: var(--clr-core-succ-40);
 	--clr-theme-warn-container: var(--clr-core-warn-95);
-	--clr-theme-warn-container-dark: var(--clr-core-warn-75);
 	--clr-theme-warn-container-dim: var(--clr-core-warn-80);
-	--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-40);
+	--clr-theme-warn-element-dark: var(--clr-core-warn-40);
 	--clr-theme-warn-element: var(--clr-core-warn-55);
+	--clr-theme-warn-element-dark: var(--clr-core-warn-40);
 	--clr-theme-warn-element-dim: var(--clr-core-warn-50);
 	--clr-theme-warn-on-container: var(--clr-core-warn-40);
 	--clr-theme-warn-on-element: var(--clr-core-warn-95);
 	--clr-theme-warn-outline: var(--clr-core-warn-45);
-	--clr-theme-warn-outline-dark: var(--clr-core-warn-35);
 	--clr-theme-warn-outline-dim: var(--clr-core-warn-40);
+	/* other */
 	--fx-shadow-l: 0 16px 40px 0 #0000001f;
 	--fx-shadow-m: 0 10px 30px 0 #00000024;
 	--fx-shadow-s: 0 7px 14px 0 #0000001a;
@@ -257,7 +251,6 @@
 	--clr-theme-container-pale: var(--clr-core-ntrl-20);
 	--clr-theme-container-sub: var(--clr-core-ntrl-15);
 	--clr-theme-err-container: var(--clr-core-err-20);
-	--clr-theme-err-container-dark: var(--clr-core-err-10);
 	--clr-theme-err-container-dim: var(--clr-core-err-15);
 	--clr-theme-err-element: var(--clr-core-err-40);
 	--clr-theme-err-element-dark: var(--clr-core-err-30);
@@ -265,19 +258,16 @@
 	--clr-theme-err-on-container: var(--clr-core-err-65);
 	--clr-theme-err-on-element: var(--clr-core-err-90);
 	--clr-theme-err-outline: var(--clr-core-err-55);
-	--clr-theme-err-outline-dark: var(--clr-core-err-65);
 	--clr-theme-err-outline-dim: var(--clr-core-err-60);
 	--clr-theme-overlay-bg: #20202099;
-	--clr-theme-pop-container: var(--clr-core-pop-20);
-	--clr-theme-pop-container-dark: var(--clr-core-pop-10);
-	--clr-theme-pop-container-dim: var(--clr-core-pop-15);
-	--clr-theme-pop-element: var(--clr-core-pop-40);
+	--clr-theme-pop-container: var(--clr-core-pop-15);
+	--clr-theme-pop-container-dim: var(--clr-core-pop-10);
+	--clr-theme-pop-element: var(--clr-core-pop-35);
 	--clr-theme-pop-element-dark: var(--clr-core-pop-20);
 	--clr-theme-pop-element-dim: var(--clr-core-pop-30);
 	--clr-theme-pop-on-container: var(--clr-core-pop-80);
 	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
 	--clr-theme-pop-outline: var(--clr-core-pop-55);
-	--clr-theme-pop-outline-dark: var(--clr-core-pop-65);
 	--clr-theme-pop-outline-dim: var(--clr-core-pop-60);
 	--clr-theme-scale-err-10: var(--clr-core-err-90);
 	--clr-theme-scale-err-20: var(--clr-core-err-80);
@@ -327,7 +317,6 @@
 	--clr-theme-scale-warn-80: var(--clr-core-warn-20);
 	--clr-theme-scale-warn-90: var(--clr-core-warn-10);
 	--clr-theme-succ-container: var(--clr-core-succ-20);
-	--clr-theme-succ-container-dark: var(--clr-core-succ-10);
 	--clr-theme-succ-container-dim: var(--clr-core-succ-15);
 	--clr-theme-succ-element: var(--clr-core-succ-40);
 	--clr-theme-succ-element-dark: var(--clr-core-succ-25);
@@ -335,19 +324,18 @@
 	--clr-theme-succ-on-container: var(--clr-core-succ-80);
 	--clr-theme-succ-on-element: var(--clr-core-succ-90);
 	--clr-theme-succ-outline: var(--clr-core-succ-55);
-	--clr-theme-succ-outline-dark: var(--clr-core-succ-65);
 	--clr-theme-succ-outline-dim: var(--clr-core-succ-60);
 	--clr-theme-warn-container: var(--clr-core-warn-20);
-	--clr-theme-warn-container-dark: var(--clr-core-warn-10);
 	--clr-theme-warn-container-dim: var(--clr-core-warn-15);
-	--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-35);
+	--clr-theme-warn-element-dark: var(--clr-core-warn-35);
 	--clr-theme-warn-element: var(--clr-core-warn-45);
+	--clr-theme-warn-element-dark: var(--clr-core-warn-35);
 	--clr-theme-warn-element-dim: var(--clr-core-warn-40);
 	--clr-theme-warn-on-container: var(--clr-core-warn-80);
 	--clr-theme-warn-on-element: var(--clr-core-warn-90);
 	--clr-theme-warn-outline: var(--clr-core-warn-55);
-	--clr-theme-warn-outline-dark: var(--clr-core-warn-65);
 	--clr-theme-warn-outline-dim: var(--clr-core-warn-60);
+	/* other */
 	--helpers-invert-0: 1;
 	--helpers-invert-1: 0;
 }