diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less
new file mode 100644
index 00000000..9d1b1ed7
--- /dev/null
+++ b/less/_defaults/_btn-mixins.less
@@ -0,0 +1,14 @@
+// Notify and Drawer controls (< > x)
+
+// DEPRECATED
+// for legacy support only, replaced by .ui-btn-ctrl()
+.notify-btn-icon() {
+  .ui-btn-ctrl();
+}
+//
+
+.ui-btn-ctrl() {
+  margin: @ui-btn-controls-margin;
+  padding: @ui-btn-controls-padding;
+  border-radius: @ui-btn-controls-border-radius;
+}
diff --git a/less/_defaults/_btn-style.less b/less/_defaults/_btn-style.less
new file mode 100644
index 00000000..2516a07e
--- /dev/null
+++ b/less/_defaults/_btn-style.less
@@ -0,0 +1,13 @@
+// Button styles
+// Note: default styles include 'filled' and 'outline'
+// --------------------------------------------------
+@item-color-style: filled;
+@item-ui-color-style: filled;
+@btn-color-style: filled;
+@menu-item-btn-color-style: filled;
+@ui-color-style: filled;
+@nav-ui-btn-ctrl-color-style: filled;
+@notify-ui-btn-ctrl-color-style: filled;
+@notify-btn-color-style: filled;
+@drawer-ui-btn-ctrl-color-style: filled;
+@drawer-item-color-style: filled;
diff --git a/less/_defaults/_buttonMixins/_btnStyles.less b/less/_defaults/_buttonMixins/_btnStyles.less
new file mode 100644
index 00000000..423fa017
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_btnStyles.less
@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// BUTTON COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.btn-color() {
+  background-color: @btn-color;
+  color: @btn-color-inverted;
+  border-radius: @btn-border-radius;
+}
+
+.btn-color-hover() {
+  background-color: @btn-color-hover;
+  color: @btn-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.btn-color-focus() {
+  background-color: @btn-color-focus;
+  color: @btn-color-inverted-focus;
+}
+
+.btn-color-selected() {
+  background-color: @btn-color-selected;
+  color: @btn-color-inverted-selected;
+}
+
+.btn-color-locked() {
+  background-color: @btn-color-locked;
+  color: @btn-color-inverted-locked;
+}
+
+.btn-color-disabled() {
+  background-color: @btn-color-disabled;
+  color: @btn-color-inverted-disabled;
+}
+
+// Outline
+.btn-color-outline() {
+  background-color: @btn-color-inverted;
+  color: @btn-color;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color inset;
+  border-radius: @btn-border-radius;
+}
+
+.btn-color-outline-hover() {
+  .btn-color-hover;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.btn-color-outline-focus() {
+  .btn-color-focus;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset;
+}
+
+.btn-color-outline-selected() {
+  .btn-color-selected;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset;
+}
+
+.btn-color-outline-locked() {
+  .btn-color-locked;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset;
+}
+
+.btn-color-outline-disabled() {
+  .btn-color-disabled;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset;
+}
diff --git a/less/_defaults/_buttonMixins/_drawerItemStyles.less b/less/_defaults/_buttonMixins/_drawerItemStyles.less
new file mode 100644
index 00000000..789ac8cf
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_drawerItemStyles.less
@@ -0,0 +1,65 @@
+// --------------------------------------------------
+// DRAWER ITEM COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.drawer-item-color() {
+  background-color: @drawer-item;
+  color: @drawer-item-inverted;
+  border-color: @drawer-item-hover;
+  border-radius: @drawer-item-border-radius;
+}
+
+.drawer-item-color-hover() {
+  background-color: @drawer-item-hover;
+  color: @drawer-item-inverted-hover;
+  border-color: @drawer-item-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;);
+}
+
+.drawer-item-color-focus() {
+  background-color: @drawer-item-focus;
+  color: @drawer-item-inverted-focus;
+  border-color: @drawer-item-focus;
+}
+
+.drawer-item-color-locked() {
+  background-color: @disabled;
+  color: @disabled-inverted;
+  border-color: @drawer-item-hover;
+}
+
+.drawer-item-color-selected() {
+  background-color: @drawer-item-selected;
+  color: @drawer-item-inverted-selected;
+  border-color: @drawer-item-hover;
+}
+
+// Outline
+.drawer-item-color-outline() {
+  background-color: @drawer-item-inverted;
+  color: @drawer-item;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset;
+  border-radius: @drawer-item-border-radius;
+}
+
+.drawer-item-color-outline-hover() {
+  .drawer-item-color-hover;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.drawer-item-color-outline-focus() {
+  .drawer-item-color-focus;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset;
+}
+
+.drawer-item-color-outline-selected() {
+  .drawer-item-color-selected;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset;
+}
+
+.drawer-item-color-outline-locked() {
+  .drawer-item-color-locked;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset;
+}
diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUiStyles.less
new file mode 100644
index 00000000..1d0ad742
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_drawerUiStyles.less
@@ -0,0 +1,38 @@
+// --------------------------------------------------
+// DRAWER UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.drawer-ui-btn-ctrl-color() {
+  background-color: @drawer-icon;
+  color: @drawer-icon-inverted;
+}
+
+.drawer-ui-btn-ctrl-color-hover() {
+  background-color: @drawer-icon-hover;
+  color: @drawer-icon-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.drawer-ui-btn-ctrl-color-focus() {
+  background-color: @drawer-icon-focus;
+  color: @drawer-icon-inverted-focus;
+}
+
+// Outline
+.drawer-ui-btn-ctrl-color-outline() {
+  background-color: @drawer-icon;
+  color: @drawer-icon-inverted;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-inverted inset;
+}
+
+.drawer-ui-btn-ctrl-color-outline-hover() {
+  .drawer-ui-btn-ctrl-color-hover;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.drawer-ui-btn-ctrl-color-outline-focus() {
+  .drawer-ui-btn-ctrl-color-focus;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-focus inset;
+}
diff --git a/less/_defaults/_buttonMixins/_itemStyles.less b/less/_defaults/_buttonMixins/_itemStyles.less
new file mode 100644
index 00000000..2783eee4
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_itemStyles.less
@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// ITEM COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.item-color() {
+  background-color: @item-color;
+  color: @item-color-inverted;
+  border-radius: @item-border-radius;
+}
+
+.item-color-hover() {
+  background-color: @item-color-hover;
+  color: @item-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.item-color-focus() {
+  background-color: @item-color-focus;
+  color: @item-color-inverted-focus;
+}
+
+.item-color-selected() {
+  background-color: @item-color-selected;
+  color: @item-color-inverted-selected;
+}
+
+.item-color-visited() {
+  background-color: @visited;
+  color: @visited-inverted;
+}
+
+.item-color-disabled() {
+  background-color: @item-color-disabled;
+  color: @item-color-inverted-disabled;
+}
+
+// Outline
+.item-color-outline() {
+  background-color: @item-color-inverted;
+  color: @item-color;
+  box-shadow: 0 0 0 @item-color-border-width @item-color inset;
+  border-radius: @item-border-radius;
+}
+
+.item-color-outline-hover() {
+  .item-color-hover;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.item-color-outline-focus() {
+  .item-color-focus;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset;
+}
+
+.item-color-outline-selected() {
+  .item-color-selected;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset;
+}
+
+.item-color-outline-visited() {
+  .item-color-visited;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset;
+}
+
+.item-color-outline-disabled() {
+  .item-color-disabled;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset;
+}
diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUiStyles.less
new file mode 100644
index 00000000..f40b698a
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_itemUiStyles.less
@@ -0,0 +1,80 @@
+// --------------------------------------------------
+// ITEM UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.item-ui-color() {
+  background-color: @item-ui-color;
+  color: @item-ui-color-inverted;
+  border-radius: @item-ui-border-radius;
+}
+
+.item-ui-color-hover() {
+  background-color: @item-ui-color-hover;
+  color: @item-ui-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.item-ui-color-focus() {
+  background-color: @item-ui-color-focus;
+  color: @item-ui-color-inverted-focus;
+}
+
+.item-ui-color-visited() {
+  background-color: @item-ui-color-visited;
+  color: @item-ui-color-inverted-visited;
+}
+
+.item-ui-color-selected() {
+  background-color: @item-ui-color-selected;
+  color: @item-ui-color-inverted-selected;
+}
+
+.item-ui-color-locked() {
+  background-color: @item-ui-color-locked;
+  color: @item-ui-color-inverted-locked;
+}
+
+.item-ui-color-disabled() {
+  background-color: @item-ui-color-disabled;
+  color: @item-ui-color-inverted-disabled;
+}
+
+// Outline
+.item-ui-color-outline() {
+  background-color: @item-ui-color-inverted;
+  color: @item-ui-color;
+  box-shadow: 0 0 0 @item-ui-border-width @item-color inset;
+  border-radius: @item-ui-border-radius;
+}
+
+.item-ui-color-outline-hover() {
+  .item-ui-color-hover;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.item-ui-color-outline-focus() {
+  .item-ui-color-focus;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-focus inset;
+}
+
+.item-ui-color-outline-selected() {
+  .item-ui-color-selected;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-selected inset;
+}
+
+.item-ui-color-outline-visited() {
+  .item-ui-color-visited;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-visited inset;
+}
+
+.item-ui-color-outline-locked() {
+  .item-ui-color-locked;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-locked inset;
+}
+
+.item-ui-color-outline-disabled() {
+  .item-ui-color-disabled;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-disabled inset;
+}
diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItemStyles.less
new file mode 100644
index 00000000..4e9db1a9
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_menuItemStyles.less
@@ -0,0 +1,60 @@
+// --------------------------------------------------
+// MENU ITEM BUTTON COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.menu-item-btn-color() {
+  background-color: @menu-item-btn-color;
+  color: @menu-item-btn-color-inverted;
+  border-radius: @menu-item-btn-border-radius;
+}
+
+.menu-item-btn-color-hover() {
+  background-color: @menu-item-btn-color-hover;
+  color: @menu-item-btn-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.menu-item-btn-color-focus() {
+  background-color: @menu-item-btn-color-focus;
+  color: @menu-item-btn-color-inverted-focus;
+}
+
+.menu-item-btn-color-locked() {
+  background-color: @menu-item-btn-color-locked;
+  color: @menu-item-btn-color-inverted-locked;
+}
+
+// Outline
+.menu-item-btn-color-outline() {
+  background-color: @menu-item-btn-color-inverted;
+  color: @menu-item-btn-color;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color inset;
+  border-radius: @menu-item-btn-border-radius;
+}
+
+.menu-item-btn-color-outline-hover() {
+  .menu-item-btn-color-hover;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.menu-item-btn-color-outline-focus() {
+  .menu-item-btn-color-focus;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-focus inset;
+}
+
+.menu-item-btn-color-outline-selected() {
+  .menu-item-btn-color-selected;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-selected inset;
+}
+
+.menu-item-btn-color-outline-locked() {
+  .menu-item-btn-color-locked;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-locked inset;
+}
+
+.menu-item-btn-color-outline-disabled() {
+  .menu-item-btn-color-disabled;
+  box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-disabled inset;
+}
diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less
new file mode 100644
index 00000000..1b6868a6
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_navUiStyles.less
@@ -0,0 +1,50 @@
+// --------------------------------------------------
+// NAV UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.nav-ui-btn-ctrl-color() {
+  background-color: @nav-icon;
+  color: @nav-icon-inverted;
+  border-radius: @nav-btn-border-radius;
+}
+
+.nav-ui-btn-ctrl-color-hover() {
+  background-color: @nav-icon-hover;
+  color: @nav-icon-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.nav-ui-btn-ctrl-color-focus() {
+  background-color: @nav-icon-focus;
+  color: @nav-icon-inverted-focus;
+}
+
+.nav-ui-btn-ctrl-color-locked() {
+  background-color: @nav-icon-locked;
+  color: @nav-icon-inverted-locked;
+}
+
+.nav-ui-btn-ctrl-color-disabled() {
+  background-color: @nav-icon-disabled;
+  color: @nav-icon-inverted-disabled;
+}
+
+// Outline
+.nav-ui-btn-ctrl-color-outline() {
+  background-color: @nav-icon-inverted;
+  color: @nav-icon;
+  box-shadow: 0 0 0 @nav-btn-border-width @nav-icon inset;
+  border-radius: @nav-btn-border-radius;
+}
+
+.nav-ui-btn-ctrl-color-outline-hover() {
+  .nav-ui-btn-ctrl-color-hover;
+  box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.nav-ui-btn-ctrl-color-outline-focus() {
+  .nav-ui-btn-ctrl-color-focus;
+  box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-focus inset;
+}
diff --git a/less/_defaults/_buttonMixins/_notifyBtnStyles.less b/less/_defaults/_buttonMixins/_notifyBtnStyles.less
new file mode 100644
index 00000000..339d86e7
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_notifyBtnStyles.less
@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// NOTIFY BTN COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.notify-btn-color() {
+  background-color: @notify-btn;
+  color: @notify-btn-inverted;
+  border-radius: @notify-btn-border-radius;
+}
+
+.notify-btn-color-hover() {
+  background-color: @notify-btn-hover;
+  color: @notify-btn-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.notify-btn-color-focus() {
+  background-color: @notify-btn-focus;
+  color: @notify-btn-inverted-focus;
+}
+
+.notify-btn-color-selected() {
+  background-color: @notify-btn-selected;
+  color: @notify-btn-inverted-selected;
+}
+
+.notify-btn-color-locked() {
+  background-color: @notify-btn-locked;
+  color: @notify-btn-inverted-locked;
+}
+
+.notify-btn-color-disabled() {
+  background-color: @notify-btn-disabled;
+  color: @notify-btn-inverted-disabled;
+}
+
+// Outline
+.notify-btn-color-outline() {
+  background-color: @notify-btn-inverted;
+  color: @notify-btn;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset;
+  border-radius: @notify-btn-border-radius;
+}
+
+.notify-btn-color-outline-hover() {
+  .notify-btn-color-hover;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.notify-btn-color-outline-focus() {
+  .notify-btn-color-focus;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-focus inset;
+}
+
+.notify-btn-color-outline-selected() {
+  .notify-btn-color-selected;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-selected inset;
+}
+
+.notify-btn-color-outline-locked() {
+  .notify-btn-color-locked;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-locked inset;
+}
+
+.notify-btn-color-outline-disabled() {
+  .notify-btn-color-disabled;
+  box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset;
+}
diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUiStyles.less
new file mode 100644
index 00000000..083ac48e
--- /dev/null
+++ b/less/_defaults/_buttonMixins/_notifyUiStyles.less
@@ -0,0 +1,48 @@
+// --------------------------------------------------
+// NOTIFY UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.notify-ui-btn-ctrl-color() {
+  background-color: @notify-icon;
+  color: @notify-icon-inverted;
+}
+
+.notify-ui-btn-ctrl-color-hover() {
+  background-color: @notify-icon-hover;
+  color: @notify-icon-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.notify-ui-btn-ctrl-color-focus() {
+  background-color: @notify-icon-focus;
+  color: @notify-icon-inverted-focus;
+}
+
+.notify-ui-btn-ctrl-color-disabled() {
+  background-color: @notify-icon-disabled;
+  color: @notify-icon-inverted-disabled;
+}
+
+// Outline
+.notify-ui-btn-ctrl-color-outline() {
+  background-color: @notify-icon;
+  color: @notify-icon-inverted;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-inverted inset;
+}
+
+.notify-ui-btn-ctrl-color-outline-hover() {
+  .notify-ui-btn-ctrl-color-hover;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.notify-ui-btn-ctrl-color-outline-focus() {
+  .notify-ui-btn-ctrl-color-focus;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-focus inset;
+}
+
+.notify-ui-btn-ctrl-color-outline-disabled() {
+  .notify-ui-btn-ctrl-color-disabled;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-disabled inset;
+}
diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less
index bbee487c..2ae87402 100644
--- a/less/_defaults/_colors.less
+++ b/less/_defaults/_colors.less
@@ -2,7 +2,7 @@
 // --------------------------------------------------
 @blue: #117F93;
 @blueDark: #263944;
-@grey: #9096A0;
+@grey: #DDDDDD;
 @greyDark: #4D4D4D;
 @greyLight: #f9f9f9;
 
@@ -34,7 +34,7 @@
 @heading-color: @blue;
 @heading-color-inverted: @white;
 
-// Items - components
+// Content Item (components)
 // --------------------------------------------------
 @item-color: @blue;
 @item-color-inverted: @white;
@@ -42,34 +42,94 @@
 @item-color-hover: darken(@item-color, 10%);
 @item-color-inverted-hover: @item-color-inverted;
 
+@item-color-focus: @item-color-hover;
+@item-color-inverted-focus: @item-color-inverted-hover;
+
 @item-color-selected: darken(@item-color, 20%);
 @item-color-inverted-selected: @item-color-inverted;
 
-// Visited - presentation components
-// --------------------------------------------------
+// DEPRECATED
+// replaced by @item-color-visited and @item-color-inverted-visited
+// Note: @visited is only used by presentation components
 @visited: darken(@item-color, 15%);
 @visited-inverted: @item-color-inverted;
+//
+
+@item-color-visited: @visited;
+@item-color-inverted-visited: @visited-inverted;
 
-// Buttons
+@item-color-disabled: @disabled;
+@item-color-inverted-disabled: @disabled-inverted;
+
+// Outline
+@item-color-border-color: @item-color;
+
+// Content UI (action not content)
+// boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle
+// logic: if outputting course content into word doc, these buttons wouldn’t need including
 // --------------------------------------------------
+@item-ui-color: @item-color;
+@item-ui-color-inverted: @item-color-inverted;
+
+@item-ui-color-hover: darken(@item-ui-color, 10%);
+@item-ui-color-inverted-hover: @item-ui-color-inverted;
+
+@item-ui-color-focus: @item-ui-color-hover;
+@item-ui-color-inverted-focus: @item-ui-color-inverted-hover;
+
+@item-ui-color-selected: darken(@item-ui-color, 20%);
+@item-ui-color-inverted-selected: @item-ui-color-inverted;
+
+@item-ui-color-visited: darken(@item-ui-color, 15%);
+@item-ui-color-inverted-visited: @item-ui-color-inverted;
+
+@item-ui-color-locked: @disabled;
+@item-ui-color-inverted-locked: @disabled-inverted;
+
+@item-ui-color-disabled: @disabled;
+@item-ui-color-inverted-disabled: @disabled-inverted;
+
+// Content Buttons
+// --------------------------------------------------
+// Filled
 @btn-color: @greyDark;
 @btn-color-inverted: @white;
 
 @btn-color-hover: darken(@btn-color, 10%);
 @btn-color-inverted-hover: @btn-color-inverted;
 
-// Button icon
-// --------------------------------------------------
+@btn-color-focus: @btn-color-hover;
+@btn-color-inverted-focus: @btn-color-inverted-hover;
+
+@btn-color-selected: darken(@btn-color, 20%);
+@btn-color-inverted-selected: @btn-color-inverted;
+
+@btn-color-locked: @disabled;
+@btn-color-inverted-locked: @disabled-inverted;
+
+
+// DEPRECATED
+// replaced by @btn-color-disabled and @btn-color-disabled-inverted
+@disabled: @grey;
+@disabled-inverted: @black;
+//
+
+@btn-color-disabled: @disabled;
+@btn-color-inverted-disabled: @disabled-inverted;
+
+// DEPRECATED
+// for legacy support only, not utilised in _buttonMixins
 @btn-icon-color: @nav-icon;
 @btn-icon-color-inverted: @nav-icon-inverted;
 
 @btn-icon-color-hover: @nav-icon-hover;
 @btn-icon-color-inverted-hover: @nav-icon-inverted-hover;
+//
 
-// Disabled - question components
+// UI (global default for nav, notify, drawer)
 // --------------------------------------------------
-@disabled: #DDDDDD;
-@disabled-inverted: @black;
+@ui-color: @white;
+@ui-color-inverted: @greyDark;
 
 // Validation states - question marking
 // --------------------------------------------------
@@ -81,9 +141,9 @@
 
 // Progress
 // --------------------------------------------------
-@progress: @grey;
+@progress: @greyDark;
 @progress-inverted: @white;
-@progress-border: @grey;
+@progress-border: @greyDark;
 
 // Menu
 // --------------------------------------------------
@@ -101,23 +161,39 @@
 @menu-item-progress-inverted: @progress-inverted;
 @menu-item-progress-border: @progress-border;
 
-@menu-item-btn-color: @btn-color;
-@menu-item-btn-color-inverted: @btn-color-inverted;
+@menu-item-btn-color: @item-ui-color;
+@menu-item-btn-color-inverted: @item-ui-color-inverted;
+
+@menu-item-btn-color-hover: @item-ui-color-hover;
+@menu-item-btn-color-inverted-hover: @item-ui-color-inverted-hover;
+
+@menu-item-btn-color-focus: @item-ui-color-hover;
+@menu-item-btn-color-inverted-focus: @item-ui-color-inverted-hover;
 
-@menu-item-btn-color-hover: @btn-color-hover;
-@menu-item-btn-color-inverted-hover: @btn-color-inverted-hover;
+@menu-item-btn-color-locked: @item-ui-color-locked;
+@menu-item-btn-color-inverted-locked: @item-ui-color-inverted-locked;
 
 // Navigation
 // --------------------------------------------------
-@nav: @white;
-@nav-inverted: @grey;
+@nav: @ui-color;
+@nav-inverted: @ui-color-inverted;
 
+// UI
 @nav-icon: @nav-inverted;
 @nav-icon-inverted: @nav;
 
 @nav-icon-hover: darken(@nav-icon, 10%);
 @nav-icon-inverted-hover: @nav-icon-inverted;
 
+@nav-icon-focus: @nav-icon-hover;
+@nav-icon-inverted-focus: @nav-icon-inverted-hover;
+
+@nav-icon-locked: @disabled;
+@nav-icon-inverted-locked: @disabled-inverted;
+
+@nav-icon-disabled: @disabled;
+@nav-icon-inverted-disabled: @disabled-inverted;
+
 @nav-progress: @nav-icon-inverted;
 @nav-progress-inverted: @nav-icon;
 @nav-progress-border: @nav-icon-inverted;
@@ -128,50 +204,81 @@
 
 // Notify
 // --------------------------------------------------
-@notify: @blue;
-@notify-inverted: @white;
+@notify: @ui-color;
+@notify-inverted: @ui-color-inverted;
 
 @notify-link: @notify-inverted;
 
 @notify-link-hover: @notify-link;
 
-@notify-btn: @btn-color-inverted;
-@notify-btn-inverted: @btn-color;
+// UI
+@notify-icon: darken(@notify, 10%);
+@notify-icon-inverted: @notify-inverted;
+
+@notify-icon-hover: darken(@notify-icon, 10%);
+@notify-icon-inverted-hover: @notify-icon-inverted;
+
+@notify-icon-focus: @notify-icon-hover;
+@notify-icon-inverted-focus: @notify-icon-inverted-hover;
+
+@notify-icon-disabled: @disabled;
+@notify-icon-inverted-disabled: @disabled-inverted;
+
+// Button
+@notify-btn: @btn-color;
+@notify-btn-inverted: @btn-color-inverted;
 
 @notify-btn-hover: darken(@notify-btn, 10%);
 @notify-btn-inverted-hover: @notify-btn-inverted;
 
-@notify-icon: darken(@notify, 10%);
-@notify-icon-inverted: @notify-inverted;
+@notify-btn-focus: @btn-color-focus;
+@notify-btn-inverted-focus: @btn-color-inverted-focus;
 
-@notify-icon-hover: darken(@notify, 15%);
-@notify-icon-inverted-hover: @notify-icon-inverted;
+@notify-btn-selected: @btn-color-selected;
+@notify-btn-inverted-selected: @btn-color-inverted-selected;
+
+@notify-btn-locked: @btn-color-locked;
+@notify-btn-inverted-locked: @btn-color-inverted-locked;
+
+@notify-btn-disabled: @btn-color-disabled;
+@notify-btn-inverted-disabled: @btn-color-inverted-disabled;
 
 // Drawer
 // --------------------------------------------------
-@drawer: @blueDark;
-@drawer-inverted: @white;
+@drawer: @ui-color;
+@drawer-inverted: @ui-color-inverted;
 
 @drawer-link: @drawer-inverted;
 
 @drawer-link-hover: @drawer-link;
 
-@drawer-icon: @drawer;
+// UI
+@drawer-icon: darken(@drawer, 10%);
 @drawer-icon-inverted: @drawer-inverted;
 
 @drawer-icon-hover: darken(@drawer-icon, 10%);
 @drawer-icon-inverted-hover: @drawer-icon-inverted;
 
+@drawer-icon-focus: @drawer-icon-hover;
+@drawer-icon-inverted-focus: @drawer-icon-inverted-hover;
+
+// Item
 @drawer-item: @drawer;
 @drawer-item-inverted: @drawer-inverted;
 
 @drawer-item-hover: darken(@drawer-item, 10%);
 @drawer-item-inverted-hover: @drawer-item-inverted;
 
+@drawer-item-focus: darken(@drawer-item-hover, 10%);
+@drawer-item-inverted-focus: @drawer-item-inverted-hover;
+
 @drawer-item-selected: darken(@drawer-item, 20%);
 @drawer-item-inverted-selected: @drawer-item-inverted;
 @drawer-item-selected-underline: @drawer-item-inverted;
 
+@drawer-item-locked: @disabled;
+@drawer-item-inverted-locked: @disabled-inverted;
+
 @drawer-progress: @drawer-item-inverted;
 @drawer-progress-inverted: @drawer-item;
 @drawer-progress-border: @drawer-item-inverted;
diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less
index 3b4abd3f..57a883c8 100644
--- a/less/_defaults/_spacing-config.less
+++ b/less/_defaults/_spacing-config.less
@@ -2,31 +2,75 @@
 // --------------------------------------------------
 @icon-padding: 1rem;
 
-// Item
+// Content Item
 // --------------------------------------------------
 @item-margin: 0.5rem;
 @item-padding: 1rem;
 
 @item-border-radius: 0.25rem;
+@item-color-border-width: 1px;
 
-// Button
+// Content UI (action not content)
+// --------------------------------------------------
+@item-ui-border-radius: @item-border-radius;
+@item-ui-border-width: @item-color-border-width;
+
+// Content Button
 // --------------------------------------------------
 @btn-margin: 1rem;
 @btn-padding: 1rem;
 
 @btn-border-radius: 0.25rem;
+@btn-color-border-width: 1px;
+
+// UI Button
+// --------------------------------------------------
+@ui-btn-controls-margin: @btn-margin / 2;
+@ui-btn-controls-padding: @btn-padding / 2;
+
+@ui-btn-controls-border-radius: 50%;
+@ui-btn-controls-border-width: 1px;
+
+// Menu
+// --------------------------------------------------
+@menu-item-btn-border-radius: @item-ui-border-radius;
+@menu-item-btn-border-width: @item-ui-border-width;
 
 // Navigation
 // --------------------------------------------------
 @nav-btn-margin: 0;
 
+@nav-btn-padding-ver: @icon-padding;
+@nav-btn-padding-hoz: @icon-padding;
+
 @nav-btn-border-radius: 0;
+@nav-btn-border-width: 1px;
 
+// Notify button
+// --------------------------------------------------
+@notify-btn-margin: 0;
+
+@notify-btn-padding-ver: @btn-padding / 2;
+@notify-btn-padding-hoz: @btn-padding;
+
+@notify-btn-border-radius: @btn-border-radius;
+@notify-btn-border-width: 1px;
+
+// Drawer item
+// --------------------------------------------------
+@drawer-item-margin: 0;
+
+@drawer-item-padding-ver: @item-padding;
+@drawer-item-padding-hoz: @item-padding;
+
+@drawer-item-border-radius: 0;
+@drawer-item-border-width: 1px;
 
 // Progress
 // --------------------------------------------------
 @progress-border-radius: 50px;
 
+
 // Menu header text margin
 // --------------------------------------------------
 @menu-title-margin: 1rem;
diff --git a/less/core/button.less b/less/core/button.less
index cf17788a..da4ca734 100644
--- a/less/core/button.less
+++ b/less/core/button.less
@@ -3,53 +3,55 @@
     margin-top: @btn-margin;
   }
 
-  &-icon {
-    background-color: @btn-icon-color;
-    color: @btn-icon-color-inverted;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @btn-icon-color-hover;
-      color: @btn-icon-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
-  }
-
   &-text {
     .button-text;
   }
 
+  &-text.is-locked,
+  &-icon.is-locked {
+    cursor: not-allowed;
+  }
+
+  // DEPRECATED
+  // legacy color styles for generic .btn-text and .btn-icon 
+  // color mixins applied to plugin selectors instead
   &-text {
-    background-color: @btn-color;
-    color: @btn-color-inverted;
-    border-radius: @btn-border-radius;
+    .btn-color;
 
     .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @btn-color-hover;
-      color: @btn-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+      .btn-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &:focus-visible {
+      .btn-color-focus;
     }
   }
 
-  &-icon.is-disabled,
   &-text.is-disabled {
-    background-color: @disabled;
-    color: @disabled-inverted;
+    .btn-color-disabled;
   }
 
-  &-icon.is-locked,
   &-text.is-locked {
-    background-color: @disabled;
-    color: @disabled-inverted;
-    cursor: not-allowed;
+    .btn-color-locked;
+  }
+
+  &-icon {
+    .nav-ui-btn-ctrl-color;
+
+    .no-touch &:not(.is-disabled):not(.is-locked):hover {
+      .nav-ui-btn-ctrl-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &:focus-visible {
+      .nav-ui-btn-ctrl-color-focus;
+    }
   }
 
-  &__marking {
-    padding: @item-padding * 0.75;
-    border-radius: 50%;
+  &-icon.is-disabled {
+    .nav-ui-btn-ctrl-color-disabled;
   }
 
-  .can-show-marking &__action.is-full-width,
-  .can-show-marking &__feedback.is-full-width {
-    margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2);
+  &-icon.is-locked {
+    .nav-ui-btn-ctrl-color-locked;
   }
 }
diff --git a/less/core/drawer.less b/less/core/drawer.less
index f8db20ef..29b23c55 100644
--- a/less/core/drawer.less
+++ b/less/core/drawer.less
@@ -7,16 +7,30 @@
   }
 
   &__btn {
-    margin: @btn-margin / 2;
-    padding: @btn-padding / 2;
-    background-color: @drawer-icon;
-    color: @drawer-icon-inverted;
-    border-radius: 50%;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @drawer-icon-hover;
-      color: @drawer-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    .ui-btn-ctrl;
+
+    & when (@drawer-ui-btn-ctrl-color-style = filled) {
+      .drawer-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .drawer-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-ui-btn-ctrl-color-focus;
+      }
+    }
+
+    & when (@drawer-ui-btn-ctrl-color-style = outline) {
+      .drawer-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .drawer-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-ui-btn-ctrl-color-outline-focus;
+      }
     }
   }
 }
diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less
index efe11aa6..3600d8a0 100644
--- a/less/core/drawerItem.less
+++ b/less/core/drawerItem.less
@@ -1,38 +1,76 @@
 .drawer {
   &__item-btn {
     display: block;
-    padding: @item-padding;
-    background-color: @drawer-item;
-    border-bottom: 1px solid @drawer-item-hover;
-    color: @drawer-item-inverted;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @drawer-item-hover;
-      color: @drawer-item-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    padding: @drawer-item-padding-ver @drawer-item-padding-hoz;
+    margin: @drawer-item-margin;
+    border-bottom: @drawer-item-border-width solid;
+
+    & when (@drawer-item-margin > 0) {
+      @total-margin: @drawer-item-margin * 2;
+      width: calc(100% ~'-' @total-margin);
+      border: @drawer-item-border-width solid;
     }
   }
 
-  &__item-btn.is-locked,
-  &__item-btn.is-disabled {
-    background-color: @disabled;
-    color: @disabled-inverted;
+  & when (@drawer-item-color-style = filled) {
+    &__item-btn {
+      .drawer-item-color();
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .drawer-item-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-item-color-focus;
+      }
+    }
+
+    &__item-btn.is-locked,
+    &__item-btn.is-disabled {
+      .drawer-item-color-locked;
+    }
+
+    // aria-current="true" is used by languagePicker
+    &__item-btn[aria-current="true"],
+    &__item-btn.is-selected {
+      .drawer-item-color-selected;
+    }
   }
 
-  &__item-btn.is-selected {
-    background-color: @drawer-item-selected;
-    color: @drawer-item-inverted-selected;
+  & when (@drawer-item-color-style = outline) {
+    &__item-btn {
+      .drawer-item-color-outline();
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .drawer-item-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-item-color-outline-focus;
+      }
+    }
+
+    &__item-btn.is-locked,
+    &__item-btn.is-disabled {
+      .drawer-item-color-outline-locked;
+    }
+
+    // aria-current="true" is used by languagePicker
+    &__item-btn[aria-current="true"],
+    &__item-btn.is-selected {
+      .drawer-item-color-outline-selected;
+    }
   }
 
   &__item-title {
     .drawer-item-title;
     text-align: start;
   }
-  
+
   &__item-title + &__item-body {
     margin-top: @drawer-title-margin;
   }
-  
+
   &__item-body {
     margin-bottom: @drawer-body-margin;
     .drawer-item-body;
diff --git a/less/core/nav.less b/less/core/nav.less
index 290c57d7..e74f2d92 100644
--- a/less/core/nav.less
+++ b/less/core/nav.less
@@ -12,14 +12,30 @@
 
   &__btn {
     margin: @nav-btn-margin (@nav-btn-margin / 2);
-    background-color: @nav-icon;
-    color: @nav-icon-inverted;
-    border-radius: @nav-btn-border-radius;
-
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @nav-icon-hover;
-      color: @nav-icon-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    padding: @nav-btn-padding-ver @nav-btn-padding-hoz;
+
+    & when (@nav-ui-btn-ctrl-color-style = filled) {
+      .nav-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .nav-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .nav-ui-btn-ctrl-color-focus;
+      }
+    }
+
+    & when (@nav-ui-btn-ctrl-color-style = outline) {
+      .nav-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .nav-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .nav-ui-btn-ctrl-color-outline-focus;
+      }
     }
   }
 
diff --git a/less/core/notify.less b/less/core/notify.less
index 1ae95f16..5aa70990 100644
--- a/less/core/notify.less
+++ b/less/core/notify.less
@@ -51,19 +51,75 @@
     margin-top: @btn-margin;
   }
 
+  // Button
   &__btn {
-    background-color: @notify-btn;
-    color: @notify-btn-inverted;
+    margin: @notify-btn-margin;
+    padding: @notify-btn-padding-ver @notify-btn-padding-hoz;
+  }
+
+  & when (@notify-btn-color-style = filled) {
+    &__btn {
+      .notify-btn-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-btn-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-btn-color-focus;
+      }
+    }
+
+    &__btn.is-disabled {
+      .notify-btn-color-disabled;
+    }
+  }
+
+  & when (@notify-btn-color-style = outline) {
+    &__btn {
+      .notify-btn-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-btn-color-outline-focus;
+      }
+    }
 
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @notify-btn-hover;
-      color: @notify-btn-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    &__btn.is-disabled {
+      .notify-btn-color-outline-disabled;
     }
   }
 
+  // UI
   &__btn-icon {
-    .notify-btn-icon;
+    .ui-btn-ctrl;
+
+    & when (@notify-btn-color-style = filled) {
+      .notify-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-focus;
+      }
+    }
+
+    & when (@notify-btn-color-style = outline) {
+      .notify-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-outline-focus;
+      }
+    }
   }
 
   &__close-btn {
@@ -90,19 +146,3 @@
   //   }
   // }
 }
-
-// Global Notify button icon
-// --------------------------------------------------
-.notify-btn-icon() {
-  margin: @btn-margin / 2;
-  padding: @btn-padding / 2;
-  background-color: @notify-icon;
-  color: @notify-icon-inverted;
-  border-radius: 50%;
-
-  .no-touch &:not(.is-disabled):not(.is-locked):hover {
-    background-color: @notify-icon-hover;
-    color: @notify-icon-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
-  }
-}
diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less
index 95ee9e6a..ce9864f0 100644
--- a/less/core/notifyPush.less
+++ b/less/core/notifyPush.less
@@ -33,7 +33,31 @@
     position: absolute;
     top: 0;
     right: 0;
-    .notify-btn-icon;
+    .ui-btn-ctrl;
+
+    & when (@notify-ui-btn-ctrl-color-style = filled) {
+      .notify-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-focus;
+      }
+    }
+
+    & when (@notify-ui-btn-ctrl-color-style = outline) {
+      .notify-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-outline-focus;
+      }
+    }
 
     .dir-rtl & {
       right: auto;
diff --git a/less/core/questionButton.less b/less/core/questionButton.less
new file mode 100644
index 00000000..e9ee4f65
--- /dev/null
+++ b/less/core/questionButton.less
@@ -0,0 +1,46 @@
+.btn {
+  &__action,
+  &__feedback {
+    & when (@btn-color-style = filled) {
+      .btn-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-focus;
+      }
+
+      &.is-disabled {
+        .btn-color-disabled;
+      }
+    }
+
+    & when (@btn-color-style = outline) {
+      .btn-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-outline-focus;
+      }
+
+      &.is-disabled {
+        .btn-color-outline-disabled;
+      }
+    }
+  }
+
+  &__marking {
+    padding: @item-padding * 0.75;
+    border-radius: 50%;
+  }
+
+  .can-show-marking &__action.is-full-width,
+  .can-show-marking &__feedback.is-full-width {
+    margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2);
+  }
+}
diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less
index a5231606..d4531890 100644
--- a/less/plugins/adapt-contrib-accordion/accordion.less
+++ b/less/plugins/adapt-contrib-accordion/accordion.less
@@ -8,29 +8,54 @@
     padding-inline-start: @item-padding;
     padding-inline-end: @icon-size + (@item-padding * 2);
     text-align: start;
-    background-color: @item-color;
-    color: @item-color-inverted;
-    border-radius: @item-border-radius;
-
-    .no-touch &:not(.is-selected):hover {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
   }
-
+  
   &__btn.has-title-icon {
     padding-inline-start: @icon-size + (@item-padding * 2);
   }
 
-  &__btn.is-visited {
-    background-color: @visited;
-    color: @visited-inverted;
+  & when (@item-color-style = filled) {
+    &__btn {
+      .item-color;
+
+      .no-touch &:not(.is-selected):hover {
+        .item-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-color-focus;
+      }
+    }
+
+    &__btn.is-visited {
+      .item-color-visited;
+    }
+
+    &__btn.is-selected {
+      .item-color-selected;
+    }
   }
 
-  &__btn.is-selected {
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+  & when (@item-color-style = outline) {
+    &__btn {
+      .item-color-outline;
+
+      .no-touch &:not(.is-selected):hover {
+        .item-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-color-outline-focus;
+      }
+    }
+
+    &__btn.is-visited {
+      .item-color-outline-visited;
+    }
+
+    &__btn.is-selected {
+      .item-color-outline-selected;
+    }
   }
 
   &:not(.is-center-aligned) &__title-icon {
diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less
index c6186fab..e5571770 100644
--- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less
+++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less
@@ -2,4 +2,40 @@
   &__retry-feedback {
     margin-bottom: @component-body-margin;
   }
-}
\ No newline at end of file
+
+  & when (@btn-color-style = filled) {
+    &__retry-btn {
+      .btn-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-focus;
+      }
+    }
+
+    &__retry-btn.is-disabled {
+      .btn-color-disabled;
+    }
+  }
+
+  & when (@btn-color-style = outline) {
+    &__retry-btn {
+      .btn-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-outline-focus;
+      }
+    }
+
+    &__retry-btn.is-disabled {
+      .btn-color-outline-disabled;
+    }
+  }
+}
diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less
index 9d20a12d..93c30818 100644
--- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less
+++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less
@@ -1,6 +1,6 @@
 .boxmenu-item {
   display: flex;
-  
+
   &__inner {
     width: 100%;
     margin: 0 @menu-item-padding-hoz @menu-item-padding-ver;
@@ -43,21 +43,40 @@
     align-items: center;
   }
 
-  &__button {
-    background-color: @menu-item-btn-color;
-    color: @menu-item-btn-color-inverted;
+  & when (@menu-item-btn-color-style = filled) {
+    &__button {
+      .menu-item-btn-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .menu-item-btn-color-hover;
+      }
 
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @menu-item-btn-color-hover;
-      color: @menu-item-btn-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .menu-item-btn-color-focus;
+      }
+    }
+
+    &__button.is-locked {
+      .menu-item-btn-color-locked;
     }
   }
 
-  &__button.is-locked,
-  &__button.is-disabled {
-    background-color: @disabled;
-    color: @disabled-inverted;
+  & when (@menu-item-btn-color-style = outline) {
+    &__button {
+      .menu-item-btn-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .menu-item-btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .menu-item-btn-color-outline-focus;
+      }
+    }
+
+    &__button.is-locked {
+      .menu-item-btn-color-outline-locked;
+    }
   }
 
   &__status {
diff --git a/less/plugins/adapt-contrib-glossary/glossary.less b/less/plugins/adapt-contrib-glossary/glossary.less
index 2a907111..08ed0cf9 100644
--- a/less/plugins/adapt-contrib-glossary/glossary.less
+++ b/less/plugins/adapt-contrib-glossary/glossary.less
@@ -1,6 +1,6 @@
 .glossary {
   &__textbox-container {
-    padding: @item-padding;
+    padding: @drawer-item-padding-ver @drawer-item-padding-hoz;
   }
 
   &__textbox {
@@ -8,7 +8,7 @@
   }
 
   &__checkbox-container {
-    padding: 0 @item-padding @item-padding;
+    padding: 0 @drawer-item-padding-hoz @drawer-item-padding-ver;
   }
 
   &__checkbox-input,
diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less
index 0f14bb55..c63ca816 100644
--- a/less/plugins/adapt-contrib-gmcq/gmcq.less
+++ b/less/plugins/adapt-contrib-gmcq/gmcq.less
@@ -10,26 +10,50 @@
   &__option {
     margin-top: @item-margin;
     padding: @item-padding / 2;
-    background-color: @item-color;
-    color: @item-color-inverted;
-    border-radius: @item-border-radius;
   }
 
-  .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option,
-  html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option {
-    background-color: @item-color-hover;
-    color: @item-color-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
-  }
+  & when (@item-color-style = filled) {
+    &__option {
+      .item-color;
+    }
 
-  &__label.is-disabled &__option {
-    background-color: @disabled;
-    color: @disabled-inverted;
+    .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option {
+      .item-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option {
+      .item-color-focus;
+    }
+
+    &__label.is-disabled &__option {
+      .item-color-disabled;
+    }
+
+    &__label.is-selected &__option {
+      .item-color-selected;
+    }
   }
 
-  &__label.is-selected &__option {
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+  & when (@item-color-style = outline) {
+    &__option {
+      .item-color-outline;
+    }
+
+    .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option {
+      .item-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option {
+      .item-color-outline-focus;
+    }
+
+    &__label.is-disabled &__option {
+      .item-color-outline-disabled;
+    }
+
+    &__label.is-selected &__option {
+      .item-color-outline-selected;
+    }
   }
 
   &__state {
diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less
index 25472822..860352c2 100644
--- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less
+++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less
@@ -7,21 +7,42 @@
     }
   }
 
-  &__pin:not(.has-pin-image) {
-    background-color: @item-color;
-    color: @item-color-inverted;
-    border-radius: 50%;
+  & when (@item-ui-color-style = filled) {
+    &__pin:not(.has-pin-image) {
+      .item-ui-color;
+      border-radius: 50%;
 
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-focus;
+      }
+    }
+
+    &__pin:not(.has-pin-image).is-visited {
+      .item-ui-color-visited;
     }
   }
 
-  &__pin:not(.has-pin-image).is-visited {
-    background-color: @visited;
-    color: @visited-inverted;
+  & when (@item-ui-color-style = outline) {
+    &__pin:not(.has-pin-image) {
+      .item-ui-color-outline;
+      border-radius: 50%;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-outline-focus;
+      }
+    }
+
+    &__pin:not(.has-pin-image).is-visited {
+      .item-ui-color-outline-visited;
+    }
   }
 
   // Numbered pins
diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less
index 66700d95..7742b908 100644
--- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less
+++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less
@@ -8,7 +8,39 @@
 
   &__controls,
   &__close {
-    .notify-btn-icon;
+    .ui-btn-ctrl;
+
+    & when (@notify-ui-btn-ctrl-color-style = filled) {
+      .notify-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-focus;
+      }
+
+      &.is-disabled {
+        .notify-ui-btn-ctrl-color-disabled;
+      }
+    }
+
+    & when (@notify-ui-btn-ctrl-color-style = outline) {
+      .notify-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-outline-focus;
+      }
+
+      &.is-disabled {
+        .notify-ui-btn-ctrl-color-outline-disabled;
+      }
+    }
   }
 
   &__item-title {
diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less
index c835b063..f1b15b74 100644
--- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less
+++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less
@@ -27,6 +27,42 @@
   &__language-btn {
     margin: @item-margin / 2;
   }
+
+  & when (@btn-color-style = filled) {
+    &__language-btn {
+      .btn-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-focus;
+      }
+    }
+
+    &__language-btn.is-disabled {
+      .btn-color-disabled;
+    }
+  }
+
+  & when (@btn-color-style = outline) {
+    &__language-btn {
+      .btn-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .btn-color-outline-focus;
+      }
+    }
+
+    &__language-btn.is-disabled {
+      .btn-color-outline-disabled;
+    }
+  }
 }
 
 // Language picker notify confirmation override
diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less
index 066c4d7c..dc8fea15 100644
--- a/less/plugins/adapt-contrib-matching/dropdown.less
+++ b/less/plugins/adapt-contrib-matching/dropdown.less
@@ -6,25 +6,52 @@
     padding-inline: @item-padding (@icon-size + (@item-padding * 2));
     line-height: @body-line-height;
     text-align: start;
-    background-color: @item-color;
-    color: @item-color-inverted;
-
-    .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover,
-    html:not(.a11y-disable-focusoutline) &:focus-visible {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
   }
 
-  &__btn.is-disabled {
-    background-color: @disabled;
-    color: @disabled-inverted;
+  & when (@item-color-style = filled) {
+    &__btn {
+      .item-color;
+      border-radius: 0;
+
+      .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover {
+        .item-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-color-focus;
+      }
+    }
+
+    &__btn.is-disabled {
+      .item-color-disabled;
+    }
+
+    &__btn[aria-expanded="true"] {
+      .item-color-selected;
+    }
   }
 
-  &__btn[aria-expanded="true"] {
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+  & when (@item-color-style = outline) {
+    &__btn {
+      .item-color-outline;
+      border-radius: 0;
+
+      .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover {
+        .item-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-color-outline-focus;
+      }
+    }
+
+    &__btn.is-disabled {
+      .item-color-outline-disabled;
+    }
+
+    &__btn[aria-expanded="true"] {
+      .item-color-outline-selected;
+    }
   }
 
   &__icon {
@@ -46,29 +73,49 @@
 
 .dropdown-item {
   padding: @item-padding;
-  background-color: @item-color;
-  border-bottom: 1px solid @item-color-hover;
-  color: @item-color-inverted;
 
-  &:last-child {
-    border-bottom: none;
-  }
+  & when (@item-color-style = filled) {
+    .item-color;
+    border-radius: 0;
+    border-bottom: 1px solid @item-color-hover;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover {
+      .item-color-hover;
+    }
+
+    &:focus-visible,
+    &[aria-selected="true"] {
+      // This code can be used to style a non-native dropdown as closely
+      // as possible to the default browser settings
+      // background-color: Highlight;
+      // background-color: -webkit-focus-ring-color;
+      // color: white;
 
-  .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover {
-    background-color: @item-color-hover;
-    color: @item-color-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
+      .item-color-selected;
+    }
   }
 
-  &:focus-visible,
-  &[aria-selected="true"] {
-    // This code can be used to style a non-native dropdown as closely
-    // as possible to the default browser settings
-    // background-color: Highlight;
-    // background-color: -webkit-focus-ring-color;
-    // color: white;
+  & when (@item-color-style = outline) {
+    .item-color-outline;
+    border-radius: 0;
+    box-shadow: none;
+    border-bottom: 1px solid @item-color-hover;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover {
+      .item-color-outline-hover;
+    }
 
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+    &:focus-visible,
+    &[aria-selected="true"] {
+      .item-color-outline-selected;
+    }
   }
 }
diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less
index 07d2d5cc..942801cd 100644
--- a/less/plugins/adapt-contrib-mcq/mcq.less
+++ b/less/plugins/adapt-contrib-mcq/mcq.less
@@ -1,30 +1,54 @@
 .mcq-item {
   &__label {
     margin-bottom: @item-margin / 2;
-    background-color: @item-color;
-    color: @item-color-inverted;
-    border-radius: @item-border-radius;
-
-    .no-touch &:not(.is-disabled):not(.is-selected):hover,
-    html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
 
     .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon {
       .effect-scalePulse;
     }
   }
 
-  &__label.is-disabled {
-    background-color: @disabled;
-    color: @disabled-inverted;
+  & when (@item-color-style = filled) {
+    &__label {
+      .item-color;
+
+      .no-touch &:not(.is-disabled):not(.is-selected):hover {
+        .item-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & {
+        .item-color-focus;
+      }
+    }
+
+    &__label.is-disabled {
+      .item-color-disabled;
+    }
+
+    &__label.is-selected {
+      .item-color-selected;
+    }
   }
 
-  &__label.is-selected {
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+  & when (@item-color-style = outline) {
+    &__label {
+      .item-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-selected):hover {
+        .item-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & {
+        .item-color-outline-focus;
+      }
+    }
+
+    &__label.is-disabled {
+      .item-color-outline-disabled;
+    }
+
+    &__label.is-selected {
+      .item-color-outline-selected;
+    }
   }
 
   &__state {
diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less
index 2cb50376..8d409d1f 100644
--- a/less/plugins/adapt-contrib-media/media.less
+++ b/less/plugins/adapt-contrib-media/media.less
@@ -5,25 +5,50 @@
 
   &__transcript-btn {
     padding: @item-padding;
-    background-color: @item-color;
-    color: @item-color-inverted;
-    border-radius: @item-border-radius;
-
-    .no-touch &:not([aria-expanded="true"]):hover {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
-    }
   }
 
-  &.is-complete &__transcript-btn {
-    background-color: @visited;
-    color: @visited-inverted;
+  & when (@item-ui-color-style = filled) {
+    &__transcript-btn {
+      .item-ui-color;
+
+      .no-touch &:not([aria-expanded="true"]):hover {
+        .item-ui-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible {
+        .item-ui-color-focus;
+      }
+    }
+
+    &.is-complete &__transcript-btn {
+      .item-ui-color-visited;
+    }
+
+    &__transcript-btn[aria-expanded="true"] {
+      .item-ui-color-selected;
+    }
   }
 
-  &__transcript-btn[aria-expanded="true"] {
-    background-color: @item-color-selected;
-    color: @item-color-inverted-selected;
+  & when (@item-ui-color-style = outline) {
+    &__transcript-btn {
+      .item-ui-color-outline;
+
+      .no-touch &:not([aria-expanded="true"]):hover {
+        .item-ui-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible {
+        .item-ui-color-outline-focus;
+      }
+    }
+
+    &.is-complete &__transcript-btn {
+      .item-ui-color-outline-visited;
+    }
+
+    &__transcript-btn[aria-expanded="true"] {
+      .item-ui-color-outline-selected;
+    }
   }
 
   &__transcript-body-inline {
diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less
index 2cafc3b7..ce56fc32 100644
--- a/less/plugins/adapt-contrib-narrative/narrative.less
+++ b/less/plugins/adapt-contrib-narrative/narrative.less
@@ -8,14 +8,39 @@
     .link-text;
   }
 
-  &__controls {
-    background-color: @item-color;
-    color: @item-color-inverted;
+  & when (@item-ui-color-style = filled) {
+    &__controls {
+      .item-ui-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-focus;
+      }
+    }
 
-    .no-touch &:not(.is-disabled):not(.is-locked):hover {
-      background-color: @item-color-hover;
-      color: @item-color-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    &__controls.is-disabled {
+      .item-ui-color-disabled;
+    }
+  }
+
+  & when (@item-ui-color-style = outline) {
+    &__controls {
+      .item-ui-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-outline-focus;
+      }
+    }
+
+    &__controls.is-disabled {
+      .item-ui-color-outline-disabled;
     }
   }
 
@@ -40,43 +65,49 @@
 
   &__strapline-btn {
     text-align: start;
-    background-color: @item-color;
-    color: @item-color-inverted;
   }
 
-  // set icon background color to transparent to 'inherit' strapline styling
-  &__strapline-icon {
-    background-color: transparent;
-    color: @item-color-inverted;
-  }
+  & when (@item-ui-color-style = filled) {
+    &__strapline-btn {
+      .item-ui-color;
+    }
 
-  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover,
-  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon {
-    color: @item-color-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
-  }
+    .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover {
+      .item-ui-color-hover;
+    }
 
-  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover {
-    background-color: @item-color-hover;
-  }
+    html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible {
+      .item-ui-color-focus;
+    }
 
-  // set icon hover background color to transparent to 'inherit' strapline styling
-  .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon {
-    background-color: transparent;
+    &__strapline-btn.is-visited {
+      .item-ui-color-visited;
+    }
   }
 
-  &__strapline-btn.is-visited,
-  &__strapline-btn.is-visited &__strapline-icon {
-    color: @visited-inverted;
-  }
+  & when (@item-ui-color-style = outline) {
+    &__strapline-btn {
+      .item-ui-color-outline;
+    }
 
-  &__strapline-btn.is-visited {
-    background-color: @visited;
+    .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover {
+      .item-ui-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible {
+      .item-ui-color-outline-focus;
+    }
+
+    &__strapline-btn.is-visited {
+      .item-ui-color-outline-visited;
+    }
   }
 
-  // set icon visited background color to transparent to 'inherit' strapline styling
-  &__strapline-btn.is-visited &__strapline-icon {
+  // set icon background color to transparent to 'inherit' strapline styling
+  // prevents icon background obscuring the btn focus outline
+  &__strapline-icon {
     background-color: transparent;
+    color: inherit;
   }
 
   &.has-img-zoom &__slider-image-container {
@@ -87,6 +118,7 @@
   &__inner.is-stacked &__content-item {
     margin-bottom: (@item-margin * 4);
   }
+
   &__inner.is-stacked &__content-image {
     margin-bottom: @item-title-margin;
   }
diff --git a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less
index eb3a11d6..0ed13b16 100644
--- a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less
+++ b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less
@@ -44,6 +44,10 @@
 .pagelevelprogress__nav-btn {
   .pagelevelprogress__indicator {
     border-color: @nav-progress-border;
+
+    & when (@nav-ui-btn-ctrl-color-style = outline) {
+      border-color: @nav-progress-inverted;
+    }
   }
 
   .pagelevelprogress__indicator-inner {
diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less
index 505fd832..c19468a6 100644
--- a/less/plugins/adapt-contrib-resources/resources.less
+++ b/less/plugins/adapt-contrib-resources/resources.less
@@ -2,15 +2,31 @@
   &__filter-btn {
     padding: @item-padding (@item-padding / 2);
     .resources-filter-btn;
-    background-color: @drawer-item;
-    border-bottom: 1px solid @drawer-item-hover;
-    border-right: 1px solid @drawer-item-hover;
-    color: @drawer-item-inverted;
-
-    .no-touch &:not(.is-disabled):not(.is-selected):hover {
-      background-color: @drawer-item-hover;
-      color: @drawer-item-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+    border-bottom: 1px solid;
+    border-right: 1px solid;
+
+    & when (@drawer-item-color-style = filled) {
+      .drawer-item-color;
+
+      .no-touch &:not(.is-disabled):not(.is-selected):hover {
+        .drawer-item-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-item-color-focus;
+      }
+    }
+
+    & when (@drawer-item-color-style = outline) {
+      .drawer-item-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-selected):hover {
+        .drawer-item-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .drawer-item-color-outline-focus;
+      }
     }
 
     &:last-child {
@@ -19,8 +35,7 @@
   }
 
   &__filter-btn.is-selected {
-    background-color: @drawer-item-selected;
-    color: @drawer-item-inverted-selected;
+    .drawer-item-color-selected;
     box-shadow: inset 0 -0.625rem 0 -0.4375rem @drawer-item-selected-underline;
   }
 
diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less
index a95864d8..2e0beccf 100644
--- a/less/plugins/adapt-contrib-slider/slider.less
+++ b/less/plugins/adapt-contrib-slider/slider.less
@@ -9,28 +9,26 @@
     min-height: 2.5rem;
   }
 
-  &__number,
-  &__number-selection,
-  &__number-model-answer {
-    height: 2.5rem;
-    width: 2.5rem;
-    line-height: 2.5;
-    text-align: center;
-    border-radius: 50%;
-  }
-
   &__widget:not(.is-disabled) &__number {
     cursor: pointer;
   }
 
   &__number-selection {
-    background-color: @item-color;
-    color: @item-color-inverted;
+    .item-color;
   }
 
   &__number-model-answer {
-    background-color: @item-color;
-    color: @item-color-inverted;
+    .item-color;
+  }
+
+  &__number,
+  &__number-selection,
+  &__number-model-answer {
+    height: 2.5rem;
+    width: 2.5rem;
+    line-height: 2.5;
+    text-align: center;
+    border-radius: 50%;
   }
 
   // Scale
diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less
index cef2d9f4..b94b6df4 100644
--- a/less/plugins/adapt-contrib-trickle/trickle.less
+++ b/less/plugins/adapt-contrib-trickle/trickle.less
@@ -1,4 +1,48 @@
 .trickle {
+  & when (@item-ui-color-style = filled) {
+    &__btn {
+      .item-ui-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-focus;
+      }
+    }
+
+    &__btn.is-disabled {
+      .item-ui-color-disabled;
+    }
+
+    &__btn.is-locked {
+      .item-ui-color-locked;
+    }
+  }
+
+  & when (@item-ui-color-style = outline) {
+    &__btn {
+      .item-ui-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .item-ui-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .item-ui-color-outline-focus;
+      }
+    }
+
+    &__btn.is-disabled {
+      .item-ui-color-outline-disabled;
+    }
+
+    &__btn.is-locked {
+      .item-ui-color-outline-locked;
+    }
+  }
+
   &__btn-icon {
     display: inline-block;
     vertical-align: middle;
diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less
index 4fcc833b..668a1616 100644
--- a/less/plugins/adapt-contrib-tutor/tutor.less
+++ b/less/plugins/adapt-contrib-tutor/tutor.less
@@ -18,7 +18,31 @@
   }
 
   &__btn-icon {
-    .notify-btn-icon;
+    .ui-btn-ctrl;
+
+    & when (@notify-ui-btn-ctrl-color-style = filled) {
+      .notify-ui-btn-ctrl-color;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-focus;
+      }
+    }
+
+    & when (@notify-ui-btn-ctrl-color-style = outline) {
+      .notify-ui-btn-ctrl-color-outline;
+
+      .no-touch &:not(.is-disabled):not(.is-locked):hover {
+        .notify-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-outline-focus;
+      }
+    }
   }
 
   // overlay
@@ -42,23 +66,54 @@
     }
   }
 
-  &-type-overlay &__btn {
-    background-color: @notify-btn;
-    color: @notify-btn-inverted;
+  & when (@notify-btn-color-style = filled) {
+    &-type-overlay &__btn {
+      .notify-btn-color;
 
-    .no-touch &:hover {
-      background-color: @notify-btn-hover;
-      color: @notify-btn-inverted-hover;
-      .transition(background-color @duration ease-in, color @duration ease-in;);
+      .no-touch &:hover {
+        .notify-btn-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-btn-color-focus;
+      }
     }
 
-     &-icon {
-      background-color: @notify-icon;
-      color: @notify-icon-inverted;
+    &-type-overlay &__btn-icon {
+      .notify-ui-btn-ctrl-color;
 
       .no-touch &:hover {
-        background-color: @notify-icon-hover;
-        color: @notify-icon-inverted-hover;
+        .notify-ui-btn-ctrl-color-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-focus;
+      }
+    }
+  }
+
+  & when (@notify-btn-color-style = outline) {
+    &-type-overlay &__btn {
+      .notify-btn-color-outline;
+
+      .no-touch &:hover {
+        .notify-btn-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-btn-color-outline-focus;
+      }
+    }
+
+    &-type-overlay &__btn-icon {
+      .notify-ui-btn-ctrl-color-outline;
+
+      .no-touch &:hover {
+        .notify-ui-btn-ctrl-color-outline-hover;
+      }
+
+      html:not(.a11y-disable-focusoutline) &:focus-visible {
+        .notify-ui-btn-ctrl-color-outline-focus;
       }
     }
   }