diff --git a/extension.json b/extension.json
index 9c31ee8e..2eda62a0 100644
--- a/extension.json
+++ b/extension.json
@@ -199,7 +199,7 @@
 		},
 		"ext.uls.interface": {
 			"scripts": "js/ext.uls.interface.js",
-			"styles": "css/ext.uls.interface.css",
+			"styles": "css/ext.uls.interface.less",
 			"dependencies": [
 				"ext.uls.common",
 				"mediawiki.jqueryMsg",
@@ -219,7 +219,7 @@
 		},
 		"ext.uls.languagesettings": {
 			"scripts": "js/ext.uls.languagesettings.js",
-			"styles": "css/ext.uls.languagesettings.css",
+			"styles": "css/ext.uls.languagesettings.less",
 			"dependencies": [
 				"ext.uls.messages",
 				"ext.uls.preferences",
diff --git a/resources/css/ext.uls-monobook.css b/resources/css/ext.uls-monobook.css
index 409c3e1b..4f6eeb26 100644
--- a/resources/css/ext.uls-monobook.css
+++ b/resources/css/ext.uls-monobook.css
@@ -1,3 +1,3 @@
-#pt-uls { /* stylelint-disable selector-no-id */
+#pt-uls { /* stylelint-disable-line selector-no-id */
 	text-transform: none;
 }
diff --git a/resources/css/ext.uls.compactlinks.less b/resources/css/ext.uls.compactlinks.less
index 70ded668..deeab1a9 100644
--- a/resources/css/ext.uls.compactlinks.less
+++ b/resources/css/ext.uls.compactlinks.less
@@ -2,13 +2,11 @@
 @import 'ext.uls.mixins.less';
 
 /* stylelint-disable selector-no-id */
-
 #p-lang .body ul .uls-trigger,
 #p-lang .pBody ul .uls-trigger {
 	background-image: none;
 	padding: 0;
 }
-
 /* stylelint-enable selector-no-id */
 
 .mw-interlanguage-selector,
@@ -27,8 +25,8 @@
 
 .mw-interlanguage-selector:active,
 .mw-interlanguage-selector.selector-open {
-	color: #555;
-	background-color: #ccc;
+	background-color: #c8ccd1;
+	color: #54595d;
 }
 
 .interlanguage-uls-menu {
diff --git a/resources/css/ext.uls.displaysettings.less b/resources/css/ext.uls.displaysettings.less
index 5c1f72a3..9e91e2dd 100644
--- a/resources/css/ext.uls.displaysettings.less
+++ b/resources/css/ext.uls.displaysettings.less
@@ -4,7 +4,7 @@ div.display-settings-block {
 	background: transparent no-repeat left top;
 	.background-image-svg( '../images/display.svg', '../images/display.png' );
 	background-size: 20px auto;
-	color: #252525;
+	color: #222;
 	padding-left: 26px;
 	cursor: pointer;
 }
@@ -22,7 +22,7 @@ div.display-settings-block {
 }
 
 .ext-uls-sub-panel {
-	border-top: 1px solid #eee;
+	border-top: 1px solid #eaecf0;
 	padding-top: 25px;
 	top: -20px;
 	position: relative;
@@ -34,38 +34,30 @@ div.display-settings-block {
 }
 
 .uls-font-item {
-	border-bottom: 1px solid #eee;
-	background: #fbfbfb;
+	border-bottom: 1px solid #eaecf0;
+	background: #f8f9fa;
 	padding: 10px 0;
 
 	&:first-child {
-		border-top: 1px solid #eee;
+		border-top: 1px solid #eaecf0;
 	}
 }
 
 .uls-font-label,
-.uls-font-select {
+.uls-font-select,
+#uls-display-settings-anon-log-in-cta { /* stylelint-disable-line selector-no-id */
 	font-size: 10pt;
 }
 
-.uls-content-fonts:hover,
-.uls-ui-fonts:hover {
-	background-color: #f6f6f6;
-}
-
-.uls-font-label strong {
-	color: #252525;
-}
-
 .uls-font-label {
-	color: #555;
+	color: #54595d;
 	font-size: 10pt;
 }
 
+.uls-font-label strong {
+	color: #222;
+}
+
 .uls-display-settings-anon-label {
 	font-weight: bold;
 }
-
-#uls-display-settings-anon-log-in-cta { /* stylelint-disable-line selector-no-id */
-	font-size: 10pt;
-}
diff --git a/resources/css/ext.uls.inputsettings.less b/resources/css/ext.uls.inputsettings.less
index a6095bc8..055f1bb1 100644
--- a/resources/css/ext.uls.inputsettings.less
+++ b/resources/css/ext.uls.inputsettings.less
@@ -4,7 +4,7 @@
 	background: transparent no-repeat left top;
 	.background-image-svg( '../images/input.svg', '../images/input.png' );
 	background-size: 20px auto;
-	color: #252525;
+	color: #222;
 	padding-left: 26px;
 	cursor: pointer;
 }
@@ -25,9 +25,9 @@
 }
 
 .uls-ime-menu-settings-item {
-	background-color: #f0f0f0;
+	background-color: #f8f9fa;
 	border-radius: 0 0 5px 5px;
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #c8ccd1;
 	margin-top: 6px;
 	padding: 4px 2px;
 	color: #444;
@@ -48,7 +48,7 @@
 	background: transparent no-repeat center top;
 	.background-image-svg( '../images/cog.svg', '../images/cog.png' );
 	background-size: auto 14px;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid #c8ccd1;
 	width: 22px;
 	height: 14px;
 	position: absolute;
@@ -57,7 +57,7 @@
 }
 
 .uls-ime-menu-settings-item > a:hover {
-	background-color: #f0f0f0;
+	background-color: #f8f9fa;
 	color: #000;
 }
 
@@ -80,7 +80,7 @@
 	border-top: 0;
 	border-right: 8px solid transparent;
 	border-left: 8px solid transparent;
-	border-bottom: 8px solid #f0f0f0;
+	border-bottom: 8px solid #f8f9fa;
 	content: '';
 	position: relative;
 	vertical-align: bottom;
@@ -97,7 +97,7 @@
 .uls-input-settings .uls-input-settings-inputmethods-list {
 	margin: 12px 0;
 	padding: 6px 10px;
-	background: #f0f0f0;
+	background: #f8f9fa;
 
 	.uls-input-settings-name {
 		unicode-bidi: -moz-isolate;
@@ -110,7 +110,7 @@
 }
 
 .uls-ime-notification-bubble .link {
-	color: #0645ad;
+	color: #36c;
 	cursor: pointer;
 }
 
diff --git a/resources/css/ext.uls.interface.css b/resources/css/ext.uls.interface.css
deleted file mode 100644
index fc1f999e..00000000
--- a/resources/css/ext.uls.interface.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* stylelint-disable selector-no-id */
-
-#uls-settings-block {
-	border-top: 1px solid #c9c9c9;
-	background: #f8f8f8;
-	background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
-	background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: linear-gradient( #fbfbfb, #f0f0f0 );
-	padding-left: 10px;
-	line-height: 1.2em;
-	border-radius: 0 0 5px 5px;
-}
-
-#uls-settings-block div.display-settings-block,
-#uls-settings-block div.input-settings-block {
-	display: inline-block;
-	margin: 8px 15px;
-	color: #565656;
-}
-
-#uls-settings-block div.display-settings-block:hover,
-#uls-settings-block div.input-settings-block:hover {
-	color: #252525;
-}
diff --git a/resources/css/ext.uls.interface.less b/resources/css/ext.uls.interface.less
new file mode 100644
index 00000000..18edb1c1
--- /dev/null
+++ b/resources/css/ext.uls.interface.less
@@ -0,0 +1,22 @@
+/* stylelint-disable selector-no-id */
+@import 'mediawiki.mixins';
+
+#uls-settings-block {
+	border-top: 1px solid #c8ccd1;
+	.vertical-gradient( #fbfbfb, #f0f0f0 );
+	padding-left: 10px;
+	line-height: 1.2em;
+	border-radius: 0 0 5px 5px;
+}
+
+#uls-settings-block div.display-settings-block,
+#uls-settings-block div.input-settings-block {
+	display: inline-block;
+	margin: 8px 15px;
+	color: #54595d;
+}
+
+#uls-settings-block div.display-settings-block:hover,
+#uls-settings-block div.input-settings-block:hover {
+	color: #222;
+}
diff --git a/resources/css/ext.uls.interlanguage.less b/resources/css/ext.uls.interlanguage.less
index f1b76509..c21c485c 100644
--- a/resources/css/ext.uls.interlanguage.less
+++ b/resources/css/ext.uls.interlanguage.less
@@ -1,6 +1,5 @@
-@import 'mediawiki.mixins';
-
 /* stylelint-disable selector-no-id */
+@import 'mediawiki.mixins';
 
 #p-lang .uls-settings-trigger {
 	background: transparent no-repeat right top;
diff --git a/resources/css/ext.uls.languagesettings.css b/resources/css/ext.uls.languagesettings.less
similarity index 77%
rename from resources/css/ext.uls.languagesettings.css
rename to resources/css/ext.uls.languagesettings.less
index 17b9ffd2..1990da6f 100644
--- a/resources/css/ext.uls.languagesettings.css
+++ b/resources/css/ext.uls.languagesettings.less
@@ -1,13 +1,9 @@
-/* stylelint-disable selector-no-id */
+@import 'mediawiki.mixins';
 
+/* stylelint-disable selector-no-id */
 #uls-settings-block {
-	border-top: 1px solid #c9c9c9;
-	background: #f8f8f8;
-	background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
-	background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
-	background: linear-gradient( #fbfbfb, #f0f0f0 );
+	.vertical-gradient( #fbfbfb, #f0f0f0 );
+	border-top: 1px solid #c8ccd1;
 	padding-left: 10px;
 	line-height: 1.2em;
 	border-radius: 0 0 5px 5px;
@@ -32,12 +28,12 @@
 }
 
 .settings-text {
-	color: #555;
+	color: #54595d;
 	font-size: 9pt;
 }
 
 .display-settings-block:hover .settings-text {
-	color: #252525;
+	color: #222;
 }
 
 .languagesettings-menu h1 {
@@ -47,17 +43,17 @@
 	font-weight: normal;
 	border: 0;
 	padding: 15px 0 3px 15px;
-	color: #555;
+	color: #54595d;
 }
 
 #languagesettings-settings-panel {
 	padding: 0 15px;
-	color: #252525;
+	color: #222;
 	background: #fff;
 }
 
 #languagesettings-settings-panel h3 {
-	color: #252525;
+	color: #222;
 	padding-top: 15px;
 	margin-top: 1pt;
 	line-height: 20pt;
@@ -65,13 +61,13 @@
 }
 
 #languagesettings-settings-panel h4 {
-	color: #252525;
+	color: #222;
 	font-size: 12pt;
 }
 
 /* Buttons in the selector panel */
 .menu-section {
-	color: #777;
+	color: #72777d;
 	padding: 5px 0 5px 50px;
 	border-left: 3px solid transparent;
 	display: block;
@@ -79,7 +75,7 @@
 }
 
 #language-settings-dialog {
-	background: #fbfbfb;
+	background: #f8f9fa;
 	/* Ensure base font size is same in different skins */
 	font-size: medium;
 }
@@ -90,9 +86,9 @@
 
 #languagesettings-panels .menu-section.active,
 #languagesettings-panels .menu-section.active:hover {
+	background-color: #fff;
 	color: #000;
-	background-color: #f0f0f0;
-	border-left-color: #36b;
+	border-left-color: #36c;
 }
 
 .settings-menu-items .menu-section {
@@ -102,11 +98,11 @@
 }
 
 .settings-menu-items .menu-section:hover {
-	background-color: #f5f5f5;
+	background-color: #fff;
 }
 
 .language-settings-buttons {
-	border-top: 1px solid #f0f0f0;
+	border-top: 1px solid #eaecf0;
 	margin-top: 25px;
 	padding: 15px;
 	width: auto;
@@ -119,13 +115,14 @@
 
 .uls-ui-languages p,
 .checkbox {
-	color: #555;
+	color: #54595d;
 	font-size: 10pt;
 }
 
 /* mediawiki.ui does not have a pressed state style. */
 #languagesettings-panels .mw-ui-pressed {
-	background-color: #d8d8d8;
+	background-color: #2a4b8d;
+	color: #fff;
 }
 
 .checkbox input[type='checkbox'] {
@@ -133,7 +130,7 @@
 }
 
 .checkbox strong {
-	color: #252525;
+	color: #222;
 }
 
 label.checkbox input[type='checkbox'] {
diff --git a/resources/css/ext.uls.less b/resources/css/ext.uls.less
index 940d713f..e1b51c6c 100644
--- a/resources/css/ext.uls.less
+++ b/resources/css/ext.uls.less
@@ -47,7 +47,7 @@
 	display: block;
 	position: absolute;
 	left: 0;
-	border-right: 1px solid #c9c9c9;
+	border-right: 1px solid #c8ccd1;
 	opacity: 0.8;
 }
 
diff --git a/resources/css/ext.uls.mixins.less b/resources/css/ext.uls.mixins.less
index c08c5569..db770a0d 100644
--- a/resources/css/ext.uls.mixins.less
+++ b/resources/css/ext.uls.mixins.less
@@ -14,13 +14,13 @@
 	&.selector-right {
 		&:before {
 			/* @noflip */
-			border-left: 10px solid #c9c9c9;
+			border-left: 10px solid #c8ccd1;
 			/* @noflip */
 			right: -11px;
 		}
 		&:after {
 			/* @noflip */
-			border-left: 10px solid #fcfcfc;
+			border-left: 10px solid #f8f9fa;
 			/* @noflip */
 			right: -10px;
 		}
@@ -28,13 +28,13 @@
 	&.selector-left {
 		&:before {
 			/* @noflip */
-			border-right: 10px solid #c9c9c9;
+			border-right: 10px solid #c8ccd1;
 			/* @noflip */
 			left: -11px;
 		}
 		&:after {
 			/* @noflip */
-			border-right: 10px solid #fcfcfc;
+			border-right: 10px solid #f8f9fa;
 			/* @noflip */
 			left: -10px;
 		}