diff --git a/src/themes/dojo/tabPane.m.css b/src/themes/dojo/tabPane.m.css
index e89eff46cf..2c1c22d39c 100644
--- a/src/themes/dojo/tabPane.m.css
+++ b/src/themes/dojo/tabPane.m.css
@@ -1,8 +1,14 @@
 @import './variables.css';
 
+:root {
+	--tab-width: calc(var(--grid-base) * 16);
+}
+
 .root {
-	font: var(--base-font);
 	box-sizing: border-box;
+	color: var(--color-text-primary);
+	font-size: var(--font-size-base);
+	line-height: var(--line-height-base);
 }
 
 .root * {
@@ -10,72 +16,66 @@
 }
 
 .tabButton {
-	border-top: var(--border-thick) solid transparent;
-	border-left: var(--border-thin) solid transparent;
-	border-right: var(--border-thin) solid transparent;
-	text-align: center;
-	padding: 14px 28px 14px 28px;
+	border-bottom: var(--border-width) solid var(--color-border);
+	border-left: var(--border-width) solid transparent;
+	border-right: var(--border-width) solid transparent;
+	border-top: var(--border-width) solid transparent;
+	color: var(--color-text-faded);
+	cursor: pointer;
 	display: inline-block;
-	vertical-align: top;
-	width: var(--tab-width);
-	white-space: nowrap;
+	outline: none;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	cursor: pointer;
+	padding: 15px 0;
 	position: relative;
-	top: 1px;
-	z-index: 1;
-	background: var(--dojo-white);
-	outline: none;
+	text-align: center;
+	text-overflow: ellipsis;
+	vertical-align: top;
+	white-space: nowrap;
+	width: var(--tab-width);
+}
+
+.tabButton:hover:not(.disabledTabButton):not(.activeTabButton) {
+	background-color: var(--color-background-faded);
+	border-color: var(--color-background-faded);
+	color: var(--color-text-primary);
 }
 
 .tabButton:focus:not(.disabledTabButton) {
-	font-weight: bold;
+	border-color: var(--color-highlight);
+	box-shadow: var(--box-shadow-dimensions-small) color(var(--color-highlight) alpha(20%));
 }
 
 .activeTabButton {
-	border-top-color: var(--dojo-blue);
-	border-left-color: var(--dojo-shade-gray);
-	border-right-color: var(--dojo-shade-gray);
-	z-index: 2;
+	border-bottom-color: var(--color-highlight);
+	color: var(--color-highlight);
 }
 
 .disabledTabButton {
-	font-style: italic;
+	color: var(--color-border);
 	cursor: default;
-	color: var(--dojo-gray);
 }
 
 .close {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	right: 5px;
+	background: none;
+	border: none;
 	cursor: pointer;
 	font-size: 0;
-	border: none;
-	background: none;
 	outline: none;
 	padding: 1px 3px;
+	position: absolute;
+	right: 5px;
+	top: 50%;
+	transform: translateY(-50%);
 }
 
 .close:after {
 	content: '✕';
 	display: block;
-	font-size: 14px;
-}
-
-.close:focus {
-	box-shadow: var(--input-focus-shadow);
+	font-size: var(--font-size-small);
 }
 
 .tab {
 	position: relative;
-	padding: var(--container-padding);
-	border: var(--border-thin) solid var(--dojo-shade-gray);
-	z-index: 1;
-	background: var(--dojo-white);
-	min-height: var(--min-container-height);
 }
 
 .alignLeft .tabs {
@@ -90,32 +90,16 @@
 }
 
 .alignLeft .tabButton {
-	border-top: var(--border-thin) solid transparent;
-	border-left: var(--border-thick) solid transparent;
-	border-bottom: var(--border-thin) solid transparent;
-	border-right: none;
+	border-bottom: var(--border-width) solid transparent;
+	border-left: var(--border-width) solid transparent;
+	border-right: var(--border-width) solid var(--color-border);
+	border-top: var(--border-width) solid transparent;
 	display: block;
-	top: 0;
-	left: 1px;
 }
 
 .alignLeft .activeTabButton {
-	border-top-color: var(--dojo-shade-gray);
-	border-left-color: var(--dojo-blue);
-	border-bottom-color: var(--dojo-shade-gray);
-}
-
-.alignBottom .tabButton {
-	border-top: none;
-	border-bottom: var(--border-thick) solid transparent;
-	top: -1px;
-	z-index: 0;
-}
-
-.alignBottom .activeTabButton {
-	border-top-color: var(--dojo-shade-gray);
-	border-bottom-color: var(--dojo-blue);
-	z-index: 1;
+	border-right-color: var(--color-highlight);
+	color: var(--color-highlight);
 }
 
 .alignRight .tabs {
@@ -130,19 +114,24 @@
 }
 
 .alignRight .tabButton {
-	border-top: var(--border-thin) solid transparent;
-	border-right: var(--border-thick) solid transparent;
-	border-bottom: var(--border-thin) solid transparent;
-	border-left: none;
+	border-bottom: var(--border-width) solid transparent;
+	border-left: var(--border-width) solid var(--color-border);
+	border-right: var(--border-width) solid transparent;
+	border-top: var(--border-width) solid transparent;
 	display: block;
-	top: 0;
-	left: -1px;
-	z-index: 0;
 }
 
 .alignRight .activeTabButton {
-	border-top-color: var(--dojo-shade-gray);
-	border-right-color: var(--dojo-blue);
-	border-bottom-color: var(--dojo-shade-gray);
-	z-index: 1;
+	border-left-color: var(--color-highlight);
+	color: var(--color-highlight);
+}
+
+.alignBottom .tabButton {
+	border-bottom-color: transparent;
+	border-top-color: var(--color-border);
+}
+
+.alignBottom .activeTabButton {
+	border-bottom-color: transparent;
+	border-top-color: var(--color-highlight);
 }
diff --git a/src/themes/dojo/variables.css b/src/themes/dojo/variables.css
index 5e927fc56c..be6bed8498 100644
--- a/src/themes/dojo/variables.css
+++ b/src/themes/dojo/variables.css
@@ -1,4 +1,8 @@
 :root {
+	/*******************************
+	******** Old variables *********
+	*******************************/
+
 	/* Colors */
 	--dojo-blue: #34495e;
 	--dojo-light-blue: #86BBD8;
@@ -55,4 +59,53 @@
 	--calendar-disabled-bg: var(--dojo-light-gray);
 	--calendar-hover-bg: var(--dojo-light-blue);
 	--calendar-selected: var(--dojo-blue);
+
+	/*******************************
+	******** New variables *********
+	*******************************/
+
+	/* Spacing */
+	--grid-base: 8px;
+	--spacing-regular: var(--grid-base);
+	--spacing-large: calc(var(--grid-base) * 2);
+
+	/* Fonts */
+	--font-size-base: 16px;
+	--font-size-small: 14px;
+	--font-size-title: 20px;
+	--font-size-icon: 24px;
+	--line-height-base: 24px;
+
+	/* Color hex values */
+	--dojo-white: #ffffff;
+	--dojo-light-grey: #f4f6f7;
+	--dojo-grey: #d6dde2;
+	--dojo-dark-grey: #5c6c7c;
+	--dojo-black: #000000;
+	--dojo-blue: #006be6;
+	--dojo-red: #eb1313;
+	--dojo-green: #188701;
+
+	/* Color usage names */
+	--color-text-primary: var(--dojo-black);
+	--color-text-faded: var(--dojo-dark-grey);
+	--color-text-inverted: var(--dojo-white);
+	--color-highlight: var(--dojo-blue);
+	--color-success: var(--dojo-green);
+	--color-error: var(--dojo-red);
+	--color-background: var(--dojo-white);
+	--color-background-inverted: var(--dojo-dark-grey);
+	--color-background-faded: var(--dojo-light-grey);
+	--color-border: var(--dojo-grey);
+	--color-border-strong: var(--dojo-dark-grey);
+	--color-box-shadow: color(var(--dojo-black) alpha(20%));
+	--color-box-shadow-strong: color(var(--dojo-black) alpha(50%));
+
+	/* Misc, for now */
+	--box-shadow-dimensions-small: 0 2px 2px 0;
+	--box-shadow-dimensions-large: 0 9px 16px 0;
+	--border-width: 1px;
+	--border-width-emphasized: 2px;
+	--transition-duration: 0.25s;
+	--transition-easing: ease;
 }