diff --git a/src/assets/scripts/Pinecone/NestedCheckbox/index.js b/src/assets/scripts/Pinecone/NestedCheckbox/index.js
index 84da196e..cf2ddea3 100644
--- a/src/assets/scripts/Pinecone/NestedCheckbox/index.js
+++ b/src/assets/scripts/Pinecone/NestedCheckbox/index.js
@@ -40,16 +40,18 @@ class NestedCheckbox {
 	initCustomCheckbox() {
 		const status = this.getCustomState();
 		const supplementaryLabel = this.container.querySelector( 'span.supplementary-label' );
-		supplementaryLabel.parentNode.removeChild( supplementaryLabel );
 		const customCheckbox = document.createElement( 'div' );
 		customCheckbox.classList.add( 'checkbox' );
 		customCheckbox.setAttribute( 'role', 'checkbox' );
 		customCheckbox.setAttribute( 'aria-checked', status );
 		customCheckbox.setAttribute( 'tabindex', 0 );
 		customCheckbox.textContent = this.label.innerText;
-		customCheckbox.appendChild( supplementaryLabel );
-		supplementaryLabel.classList.add( 'screen-reader-text' );
-		supplementaryLabel.hidden = false;
+		if ( supplementaryLabel ) {
+			supplementaryLabel.parentNode.removeChild( supplementaryLabel );
+			customCheckbox.appendChild( supplementaryLabel );
+			supplementaryLabel.classList.add( 'screen-reader-text' );
+			supplementaryLabel.hidden = false;
+		}
 		this.input.parentNode.insertBefore( customCheckbox, this.input );
 		this.input.classList.add( 'screen-reader-text' );
 		this.input.setAttribute( 'aria-hidden', 'true' );
diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss
index b1628681..69e4d555 100644
--- a/src/assets/styles/components/_button.scss
+++ b/src/assets/styles/components/_button.scss
@@ -27,67 +27,108 @@ button:-moz-focusring {
 
 .button--inverse {
 	--color: var(--blue-500);
-	--outline-color: var(--blue-500);
 	--background-color: var(--off-white);
-	--hover-color: var(--color);
+
+	--active-background-color: var(--blue-500);
+	--active-color: var(--off-white);
+
+	--disabled-background-color: var(--grey-200);
+	--disabled-border-color: var(--grey-200);
+	--disabled-color: var(--grey-400);
+
+	--focus-background-color: var(--off-white);
+	--focus-border-color: var(--off-white);
+	--focus-color: var(--blue-500);
+
 	--hover-background-color: var(--blue-50);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
-	--focus-background-color: var(--background-color);
-	--focus-color: var(--color);
+	--hover-color: var(--color);
 }
 
 .button--secondary {
 	--color: var(--blue-500);
-	--outline-color: var(--blue-500);
-	--outline-width: #{rem(2)};
-	--border-color: var(--outline-color);
-	--border-width: #{rem(1)};
 	--background-color: var(--white);
-	--hover-color: var(--blue-500);
+	--border-color: var(--blue-500);
+
+	--active-border-color: transparent;
+	--active-background-color: var(--blue-500);
+	--active-color: var(--off-white);
+
 	--hover-background-color: var(--grey-200);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
+	--hover-color: var(--blue-500);
+
+	--disabled-background-color: var(--grey-200);
+	--disabled-border-color: var(--grey-200);
+	--disabled-color: var(--grey-400);
+
+	--focus-background-color: var(--off-white);
+	--focus-border-color: var(--blue-500);
 	--focus-color: var(--blue-500);
-	--focus-background-color: var(--hover-background-color);
-	--focus-box-shadow:
-		0 0 0 var(--outline-width) var(--focus-background-color, var(--off-white)),
-		0 0 0 calc(2 * var(--outline-width)) var(--outline-color, var(--blue-700));
 
 	&:focus {
-		border-width: var(--outline-width);
+		border-color: transparent;
 	}
 }
 
 .button--secondary.button--inverse {
 	--color: var(--off-white);
-	--outline-color: var(--off-white);
 	--background-color: var(--blue-500);
-	--hover-color: var(--blue-50);
-	--hover-background-color: var(--blue-500);
-	--active-color: var(--white);
-	--active-background-color: var(--background-color);
+	--border-color: var(--off-white);
+
+	--active-background-color: var(--off-white);
+	--active-color: var(--blue-500);
+
+	--disabled-background-color: var(--parent-background-color);
+	--disabled-border-color: var(--grey-400);
+	--disabled-color: var(--grey-400);
+
+	--focus-background-color: var(--blue-500);
+	--focus-border-color: var(--off-white);
 	--focus-color: var(--off-white);
-	--focus-background-color: var(--background-color);
+
+	--hover-border-color: var(--blue-50);
+	--hover-color: var(--blue-50);
+	--hover-background-color: var(--blue-700);
 }
 
 .button--borderless {
 	--color: var(--blue-500);
-	--outline-color: var(--dark-mint-500);
 	--background-color: transparent;
-	--border-width: #{rem(2)};
-	--hover-background-color: var(--off-white);
-	--hover-color: var(--blue-600);
-	--active-background-color: var(--grey-200);
-	--active-color: var(--blue-500);
-	--focus-color: var(--dark-mint-500);
-	--focus-background-color: var(--grey-200);
-	--focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color);
+
+	--active-background-color: var(--blue-500);
+	--active-color: var(--off-white);
+
+	--disabled-background-color: var(--parent-background-color);
+	--disabled-color: var(--grey-400);
+
+	--focus-background-color: inherit;
+	--focus-border-color: var(--color);
+	--focus-color: var(--blue-500);
+
+	--hover-background-color: var(--grey-200);
+	--hover-color: var(--dark-mint-500);
 
 	margin: rem(6) rem(24) rem(6) rem(-8);
 	min-height: rem(28);
-	padding: 0 rem(4);
+	padding: rem(4) rem(6);
 	width: auto;
+
+	&:disabled {
+		border-color: var(--parent-background-color);
+	}
+
+	&:focus {
+		border: solid var(--border-width) transparent;
+	}
+}
+
+.button[disabled] {
+	background-color: var(--disabled-background-color);
+	color: var(--disabled-color);
+
+	&:active,
+	&:focus {
+		box-shadow: none;
+	}
 }
 
 .align-right .button--borderless {
@@ -97,35 +138,49 @@ button:-moz-focusring {
 
 .button--borderless.button--inverse {
 	--color: var(--off-white);
-	--outline-color: var(--off-white);
-	--hover-background-color: var(--blue-600);
-	--hover-color: var(--blue-50);
-	--active-background-color: var(--blue-600);
-	--active-color: var(--blue-200);
-	--focus-color: var(--off-white);
+
+	--active-color: var(--blue-600);
+	--active-background-color: var(--off-white);
+
 	--focus-background-color: transparent;
-	--focus-box-shadow: 0 0 0 var(--border-width) var(--dark-mint-500), 0 0 0 calc(2 * var(--border-width)) var(--outline-color);
-	--focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color);
+	--focus-color: var(--off-white);
+
+	--hover-background-color: var(--blue-600);
+	--hover-color: var(--off-white);
 }
 
 .button--borderless.button--destructive {
 	--color: var(--red-500);
-	--outline-color: var(--red-500);
-	--hover-color: var(--dark-mint-500);
-	--focus-color: var(--red-500);
-	--active-color: var(--white);
+
 	--active-background-color: var(--red-500);
+	--active-color: var(--white);
+
+	--focus-color: var(--red-500);
+
+	--hover-color: var(--dark-mint-500);
 }
 
 .button--borderless.button--destructive.button--inverse {
-	// TODO.
+	--color: var(--red-200);
+
+	--active-background-color: var(--red-200);
+	--active-color: var(--blue-600);
+
+	--focus-border-color: var(--red-200);
+	--focus-color: var(--red-200);
+
+	--hover-color: var(--red-200);
+	--hover-background-color: var(--blue-600);
 }
 
 .button--tag-button {
-	--outline-color: var(--white);
-	--active-background-color: var(--blue-400);
-	--active-border-color: var(--border-color);
-	--active-color: var(--off-white);
+	--active-background-color: var(--off-white);
+	--active-color: var(--blue-700);
+
+	--focus-border-color: var(--blue-700);
+	--focus-background-color: var(--blue-700);
+
+	--hover-background-color: var(--blue-700);
 
 	border-radius: rem(15);
 	font-family: $font-family-sans;
@@ -142,18 +197,22 @@ button:-moz-focusring {
 
 .button--disc {
 	--color: var(--blue-500);
-	--outline-color: var(--blue-500);
 	--background-color: var(--blue-50);
+
+	--active-border-color: transparent;
+	--active-background-color: var(--blue-500);
+	--active-color: var(--blue-50);
+
+	--disabled-background-color: var(--grey-200);
+	--disabled-border-color: var(--parent-background-color);
+	--disabled-color: var(--grey-400);
+
+	--focus-background-color: var(--background-color);
+	--focus-border-color: var(--color);
+	--focus-color: var(--color);
+
 	--hover-background-color: var(--blue-150);
 	--hover-color: var(--color);
-	--active-background-color: var(--blue-100);
-	--active-color: var(--color);
-	--focus-color: var(--color);
-	--focus-background-color: var(--background-color);
-	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--outline-color),
-		0 0 0 calc(2 * var(--border-width)) var(--focus-background-color),
-		0 0 0 calc(3 * var(--border-width)) var(--outline-color);
 
 	align-items: center;
 	border-radius: 50%;
@@ -171,12 +230,22 @@ button:-moz-focusring {
 	svg {
 		margin-bottom: 0;
 	}
+
+	&:focus {
+		border: none;
+	}
 }
 
 .button--disc.button--inverse {
 	--color: var(--off-white);
-	--background-color: #{var(--blue-700)};
-	--outline-color: var(--off-white);
+	--background-color: var(--blue-700);
+
+	--active-background-color: var(--off-white);
+	--active-color: var(--blue-700);
+
+	--disabled-color: var(--blue-700);
+	--disabled-background-color: var(--blue-500);
+	--disabled-border-color: var(--blue-700);
+
 	--hover-background-color: var(--black);
-	--active-background-color: var(--blue-400);
 }
diff --git a/src/assets/styles/components/_input.scss b/src/assets/styles/components/_input.scss
index e0576701..971c01d5 100644
--- a/src/assets/styles/components/_input.scss
+++ b/src/assets/styles/components/_input.scss
@@ -1,8 +1,96 @@
 .input-group {
+	--border-width: #{rem(1)};
+
 	display: block;
 	list-style: none;
 	position: relative;
 	width: auto;
+
+	--text-border-color-default: var(--grey-500);
+	--text-border-color-disabled: var(--grey-400);
+	--text-border-color-hover: var(--blue-500);
+	--text-border-color-focus: var(--blue-500);
+	--text-border-color-error: var(--red-500);
+	--text-border-color-error-hover: var(--red-500);
+	--text-border-color-error-focus: var(--red-500);
+
+	--text-value-color-disabled: var(--grey-400);
+	--text-value-color-error: var(--red-500);
+
+	--text-background-color-disabled: var(--grey-200);
+	--input-group--error-color: var(--red-500);
+
+	--text-default-box-shadow: 0 0 0 var(--border-width) var(--text-border-color-default) inset;
+	--text-disabled-box-shadow: 0 0 0 var(--border-width) var(--text-border-color-disabled) inset;
+	--text-error-box-shadow: 0 0 0 var(--border-width) var(--text-border-color-error) inset;
+
+	--text-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--text-border-color-focus) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--text-border-color-focus);
+	--text-hover-box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--text-border-color-hover) inset;
+	--text-error-hover-box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--text-border-color-error-hover) inset;
+	--text-error-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--text-border-color-error-focus) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--text-border-color-error-focus);
+
+	--checkbox-radio-hover-color: var(--blue-500);
+	--checkbox-radio-active-color: var(--blue-150);
+	--checkbox-radio-border-color: var(--grey-500);
+	--checkbox-radio-checked-background-color: var(--blue-500);
+	--checkbox-radio-focus-border-color: var(--blue-500);
+	--checkbox-radio-focus-hover-background-color: var(--off-white);
+
+	--checkbox-radio-hover-box-shadow: 0 0 0 calc(1 * var(--border-width)) var(--checkbox-radio-hover-color) inset;
+	--checkbox-radio-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(4 * var(--border-width)) var(--checkbox-radio-focus-border-color),
+		0 0 0 calc(1 * var(--border-width)) var(--checkbox-radio-focus-border-color) inset;
+
+	--checkbox-checked-hover-box-shadow: 0 0 0 var(--border-width) var(--checkbox-radio-focus-border-color);
+	--radio-checked-box-shadow:
+		0 0 0 var(--border-width) var(--checkbox-radio-focus-border-color) inset,
+		0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset;
+	--radio-checked-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(4 * var(--border-width)) var(--checkbox-radio-focus-border-color),
+		0 0 0 var(--border-width) var(--checkbox-radio-focus-border-color) inset,
+		0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset;
+	--radio-checked-hover-box-shadow:
+		0 0 0 calc(1 * var(--border-width)) var(--checkbox-radio-hover-color) inset,
+		0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset;
+}
+
+.input-group--inverse {
+	--text-border-color-default: var(--grey-500);
+	--text-border-color-disabled: var(--grey-500);
+	--text-border-color-hover: var(--blue-300);
+	--text-border-color-focus: var(--blue-500);
+	--text-border-color-error: var(--red-300);
+	--text-border-color-error-hover: var(--red-300);
+	--text-border-color-error-focus: var(--red-300);
+
+	--text-value-color-disabled: var(--grey-500);
+	--text-value-color-error: var(--red-500);
+
+	--text-background-color-disabled: var(--grey-200);
+	--input-group--error-color: var(--red-200);
+
+	--text-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--off-white) inset,
+		0 0 0 calc(4 * var(--border-width)) var(--text-border-color-focus) inset;
+
+	--text-error-focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--off-white) inset,
+		0 0 0 calc(4 * var(--border-width)) var(--text-border-color-error-hover) inset;
+
+	--checkbox-radio-hover-color: var(--blue-300);
+	--checkbox-radio-active-color: var(--blue-400);
+	--checkbox-radio-border-color: var(--off-white);
+	--checkbox-radio-checked-background-color: var(--off-white);
+	--checkbox-radio-focus-border-color: var(--blue-300);
+	--checkbox-radio-focus-hover-background-color: default;
 }
 
 .input-group + .input-group {
@@ -19,24 +107,49 @@ label {
 	line-height: (24 / 16);
 }
 
-.input-group--error label {
-	color: var(--red-500);
+.input-group__description {
+	font-size: rem(14);
+	font-style: italic;
+	line-height: (24 / 14);
+}
+
+.input-group__error {
+	display: flex;
+	flex-direction: row;
+	font-family: $font-family-sans;
+	font-size: rem(14);
+	font-weight: $font-weight-semibold;
+	line-height: (20 / 14);
+
+	svg {
+		margin-right: rem(4);
+	}
+}
+
+.input-group--error {
+	color: var(--input-group--error-color);
 }
 
+/*
+Text input and text areas.
+*/
+
 input:not([type="submit"]),
 select,
 textarea {
 	-moz-appearance: none;
 	-webkit-appearance: none;
 	appearance: none;
-	border: solid rem(1) var(--grey-500);
-	border-radius: rem(3);
+	border: solid var(--border-width) transparent;
+	border-radius: rem(3.5);
+	box-shadow: var(--text-default-box-shadow);
 	display: block;
 	font-family: $font-family-serif;
 	font-size: rem(16);
 	height: rem(40);
 	line-height: (24 / 16);
 	max-width: rem(268);
+	outline: none;
 	padding: rem(10) rem(10) rem(7);
 	transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
 	width: 100%;
@@ -46,15 +159,6 @@ textarea {
 	}
 }
 
-input[type="checkbox"],
-input[type="radio"] {
-	@include visually-hidden();
-}
-
-[role="checkbox"] {
-	cursor: default;
-}
-
 textarea {
 	height: rem(118);
 	max-width: rem(367);
@@ -62,12 +166,12 @@ textarea {
 }
 
 select {
-	background-color: var(--white);
 	background-image: url("../images/chevron-down.svg");
-	background-position: calc(100% - #{rem(16)}) center;
+	background-position: calc(100% - #{rem(8)}) center;
 	background-repeat: no-repeat;
 	background-size: 1.25em;
-	padding: rem(8) rem(40) rem(6) rem(10);
+	line-height: normal;
+	padding: rem(6.5) rem(40) rem(6) rem(10);
 
 	&::-ms-expand {
 		display: none;
@@ -83,25 +187,81 @@ select {
 	}
 }
 
-input:not([type="submit"]):hover,
+.input-group--inverse input[type="text"],
+.input-group--inverse select,
+.input-group--inverse textarea {
+	border-color: var(--parent-background-color);
+}
+
+input[type="text"]:hover,
 textarea:hover,
 select:hover {
-	border-color: var(--blue-400);
+	box-shadow: var(--text-hover-box-shadow);
+}
+
+.input-group--error input[type="text"],
+.input-group--error select,
+.input-group--error textarea {
+	box-shadow: var(--text-error-box-shadow);
+	color: var(--text-value-color-error);
 }
 
-input:not([type="submit"]):focus,
+input[type="text"]:focus,
 textarea:focus,
-select:focus {
-	border-color: var(--blue-500);
-	box-shadow: 0 0 0 rem(1) var(--blue-500) inset;
-	outline: none;
+select:focus,
+input[type="text"]:focus:hover,
+textarea:focus:hover,
+select:focus:hover {
+	box-shadow: var(--text-focus-box-shadow);
 }
 
-input:not([type="submit"])[disabled],
-textarea[disabled],
 select[disabled] {
-	background-color: var(--grey-200);
-	border-color: var(--grey-400);
+	background-image: none;
+}
+
+select[disabled],
+input[type="text"][disabled],
+textarea[disabled],
+input[type="text"][disabled]:hover,
+textarea[disabled]:hover,
+select[disabled]:hover {
+	background-color: var(--text-background-color-disabled);
+	box-shadow: var(--text-disabled-box-shadow);
+	color: var(--text-value-color-disabled);
+}
+
+.input-group--error input[type="text"]:hover,
+.input-group--error textarea:hover,
+.input-group--error select:hover {
+	box-shadow: var(--text-error-hover-box-shadow);
+}
+
+.input-group--error input[type="text"]:focus,
+.input-group--error textarea:focus,
+.input-group--error select:focus {
+	box-shadow: var(--text-error-focus-box-shadow);
+}
+
+/*
+Checkboxes and radios.
+*/
+
+input[type="checkbox"],
+input[type="radio"] {
+	@include visually-hidden();
+}
+
+input[type="checkbox"],
+[role="checkbox"] {
+	cursor: default;
+
+	&::before {
+		margin-right: rem(8);
+	}
+
+	&:focus {
+		outline: none;
+	}
 }
 
 input[type="radio"] + label,
@@ -113,7 +273,8 @@ input[type="checkbox"] + label {
 input[type="radio"] + label::before,
 input[type="checkbox"] + label::before,
 [role="checkbox"]::before {
-	border: rem(1) solid var(--grey-500);
+	border: rem(1) solid;
+	border-color: var(--checkbox-radio-border-color);
 	border-radius: rem(3);
 	content: "";
 	display: block;
@@ -128,247 +289,103 @@ input[type="checkbox"] + label::before,
 	}
 }
 
-[role="checkbox"]::before {
-	margin-right: rem(8);
+input[type="radio"]:disabled + label,
+input[type="checkbox"]:disabled + label {
+	color: var(--text-value-color-disabled);
 }
 
 input[type="radio"] + label::before {
 	border-radius: 100%;
 }
 
-[role="checkbox"] + input[type="checkbox"] {
-	display: none;
+input[type="checkbox"]:checked + label::before,
+[role="checkbox"][aria-checked="true"]::before {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.572" height="7.742" viewBox="0 0 10.572 7.742"><path d="M.681 3.812l3.148 2.931L9.864.708" fill="none" stroke="%23f9f9f7" stroke-linejoin="round" class="stroke" stroke-width="2"/></svg>');
+}
+
+[role="checkbox"][aria-checked="mixed"]::before {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23f9f9f7" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
+	background-size: rem(10) rem(2.5);
 }
 
 input[type="radio"]:hover + label::before,
 input[type="checkbox"]:hover + label::before,
 [role="checkbox"]:hover::before {
-	border-color: var(--blue-400);
-	box-shadow: 0 0 0 rem(1) var(--blue-400) inset;
+	background-color: var(--checkbox-radio-focus-hover-background-color);
+	border-color: var(--checkbox-radio-hover-color);
+	box-shadow: var(--checkbox-radio-hover-box-shadow);
 }
 
-[role="checkbox"]:focus {
-	outline: none;
+input[type="radio"]:active + label::before,
+input[type="checkbox"]:active + label::before,
+[role="checkbox"]:active::before {
+	background-color: var(--checkbox-radio-active-color);
+	border-color: var(--checkbox-radio-hover-color);
+	box-shadow: var(--checkbox-radio-hover-box-shadow);
 }
 
 input[type="radio"]:focus + label::before,
 input[type="checkbox"]:focus + label::before,
 [role="checkbox"]:focus::before {
-	border-color: var(--blue-400);
-	box-shadow:
-		0 0 0 rem(2) var(--white),
-		0 0 0 rem(4) var(--blue-400),
-		0 0 0 rem(1) var(--blue-400) inset;
-}
-
-input[type="radio"]:checked + label::before {
-	background: var(--blue-400);
-	border-color: var(--blue-400);
-	box-shadow:
-		0 0 0 rem(1) var(--blue-400) inset,
-		0 0 0 rem(3) var(--white) inset;
+	border-color: var(--checkbox-radio-focus-border-color);
+	box-shadow: var(--checkbox-radio-focus-box-shadow);
 }
 
 input[type="checkbox"]:checked + label::before,
+[role="checkbox"][aria-checked="mixed"]::before,
 [role="checkbox"][aria-checked="true"]::before {
-	background: var(--blue-400);
-	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.572" height="7.742" viewBox="0 0 10.572 7.742"><path d="M.681 3.812l3.148 2.931L9.864.708" fill="none" stroke="%23f9f9f7" stroke-linejoin="round" class="stroke" stroke-width="2"/></svg>');
+	background-color: var(--checkbox-radio-checked-background-color);
 	background-position: center;
 	background-repeat: no-repeat;
-	border-color: var(--blue-400);
+	border: rem(1) solid var(--checkbox-radio-checked-background-color);
 }
 
-[role="checkbox"][aria-checked="mixed"]::before {
-	background: var(--blue-400);
-	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23f9f9f7" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: rem(10) rem(2.5);
-	border-color: var(--blue-400);
-}
-
-.has-dark-mint-500-background-color .input-group--error label {
-	color: var(--red-200);
-}
-
-input[type="radio"]:disabled + label,
-input[type="checkbox"]:disabled + label {
-	color: var(--grey-400);
+input[type="radio"]:checked + label::before {
+	background: var(--checkbox-radio-checked-background-color);
+	border-color: var(--checkbox-radio-focus-border-color);
+	box-shadow: var(--radio-checked-box-shadow);
 }
 
 input[type="radio"]:disabled + label::before,
 input[type="checkbox"]:disabled + label::before {
-	border-color: var(--grey-400);
-}
-
-.has-dark-mint-500-background-color input[type="radio"] + label::before,
-.has-dark-mint-500-background-color input[type="checkbox"] + label::before,
-.has-dark-mint-500-background-color [role="checkbox"]::before {
-	border-color: var(--off-white);
+	border-color: var(--text-border-color-disabled);
 }
 
 input[type="radio"]:disabled:hover + label::before,
-input[type="checkbox"]:disabled:hover + label::before {
+input[type="checkbox"]:disabled:hover + label::before,
+[role="checkbox"]:disabled:hover::before {
+	background: initial;
 	box-shadow: none;
 }
 
-input[type="radio"]:checked:focus + label::before {
-	box-shadow:
-		0 0 0 rem(2) var(--white),
-		0 0 0 rem(4) var(--blue-400),
-		0 0 0 rem(1) var(--blue-400) inset,
-		0 0 0 rem(3) var(--white) inset;
-}
-
-input[type="checkbox"]:checked:focus + label::before,
-[role="checkbox"][aria-checked="true"]:focus::before,
-[role="checkbox"][aria-checked="mixed"]:focus::before {
-	box-shadow:
-		0 0 0 rem(2) var(--white),
-		0 0 0 rem(4) var(--blue-400);
-}
-
-.has-dark-mint-500-background-color input[type="radio"]:hover + label::before,
-.has-dark-mint-500-background-color input[type="checkbox"]:hover + label::before,
-.has-dark-mint-500-background-color [role="checkbox"]:hover::before {
-	border-color: var(--blue-300);
-	box-shadow: 0 0 0 rem(1) var(--blue-300) inset;
-}
-
-.has-dark-mint-500-background-color input[type="checkbox"]:focus + label::before {
-	border-color: var(--blue-300);
-	box-shadow:
-		0 0 0 rem(2) var(--dark-mint-500),
-		0 0 0 rem(4) var(--blue-300),
-		0 0 0 rem(1) var(--blue-300) inset;
-}
-
-.has-dark-mint-500-background-color input[type="radio"]:checked + label::before {
-	background: var(--off-white);
-	border-color: var(--off-white);
-	box-shadow:
-		0 0 0 rem(1) var(--off-white) inset,
-		0 0 0 rem(3) var(--dark-mint-500) inset;
-}
-
-.has-dark-mint-500-background-color input[type="checkbox"]:checked + label::before,
-.has-dark-mint-500-background-color [role="checkbox"][aria-checked="true"]::before {
-	background: var(--off-white);
-	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.572" height="7.742" viewBox="0 0 10.572 7.742"><path d="M.681 3.812l3.148 2.931L9.864.708" fill="none" stroke="%23000000" stroke-linejoin="round" class="stroke" stroke-width="2"/></svg>');
-	background-position: center;
-	background-repeat: no-repeat;
-	border-color: var(--off-white);
+input[type="radio"]:disabled:active + label::before,
+input[type="checkbox"]:disabled:active + label::before,
+[role="checkbox"]:disabled:active::before {
+	background: initial;
 	box-shadow: none;
 }
 
-.has-dark-mint-500-background-color [role="checkbox"][aria-checked="mixed"]::before {
-	background: var(--off-white);
-	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23000000" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: rem(10) rem(2.5);
-	border-color: var(--off-white);
-	box-shadow: none;
+input[type="radio"]:checked:hover + label::before {
+	border-color: var(--checkbox-radio-hover-color);
+	box-shadow: var(--radio-checked-hover-box-shadow);
 }
 
-.has-dark-mint-500-background-color input[type="radio"]:disabled label,
-.has-dark-mint-500-background-color input[type="checkbox"]:disabled label {
-	color: var(--grey-400);
-
-	&::before {
-		border-color: var(--grey-400);
-	}
+input[type="radio"]:checked:focus + label::before {
+	box-shadow: var(--radio-checked-focus-box-shadow);
 }
 
-.has-dark-mint-500-background-color input[type="radio"]:disabled:hover label::before,
-.has-dark-mint-500-background-color input[type="checkbox"]:disabled:hover label::before {
-	box-shadow: none;
+.input-group--inverse [role="checkbox"][aria-checked="mixed"]::before {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23000000" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
 }
 
-.has-dark-mint-500-background-color input[type="radio"]:checked:focus + label::before,
-.has-dark-mint-500-background-color input[type="checkbox"]:checked:focus + label::before,
-.has-dark-mint-500-background-color [role="checkbox"][aria-checked="true"]:focus::before {
-	border-color: var(--off-white);
-	box-shadow:
-		0 0 0 rem(2) var(--dark-mint-500),
-		0 0 0 rem(4) var(--blue-300),
-		0 0 0 rem(1) var(--off-white) inset,
-		0 0 0 rem(3) var(--dark-mint-500) inset;
+.input-group--inverse input[type="checkbox"]:checked + label::before,
+.input-group--inverse [role="checkbox"][aria-checked="true"]::before {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.572" height="7.742" viewBox="0 0 10.572 7.742"><path d="M.681 3.812l3.148 2.931L9.864.708" fill="none" stroke="%23000000" stroke-linejoin="round" class="stroke" stroke-width="2"/></svg>');
 }
 
-.has-dark-mint-500-background-color input[type="checkbox"]:checked:focus + label::before,
-.has-dark-mint-500-background-color [role="checkbox"][aria-checked="true"]:focus::before {
+.input-group--inverse input[type="checkbox"]:checked:focus + label::before,
+.input-group--inverse [role="checkbox"][aria-checked="true"]:focus::before {
 	box-shadow:
-		0 0 0 rem(2) var(--dark-mint-500),
-		0 0 0 rem(4) var(--blue-300);
-}
-
-.input-group--error input:not([type="submit"]),
-.input-group--error select,
-.input-group--error textarea {
-	border-color: var(--red-500);
-	color: var(--red-500);
-}
-
-.has-dark-mint-500-background-color input:not([type="submit"]):hover,
-.has-dark-mint-500-background-color textarea:hover,
-.has-dark-mint-500-background-color select:hover {
-	border-color: var(--blue-300);
-}
-
-.has-dark-mint-500-background-color input:not([type="submit"]):focus,
-.has-dark-mint-500-background-color textarea:focus,
-.has-dark-mint-500-background-color select:focus {
-	border-color: var(--blue-300);
-	box-shadow: 0 0 0 rem(2) var(--blue-300) inset;
-}
-
-.input-group__description {
-	font-size: rem(14);
-	font-style: italic;
-	line-height: (24 / 14);
-}
-
-.input-group--error input:not([type="submit"]):hover,
-.input-group--error select:hover,
-.input-group--error textarea:hover {
-	border-color: var(--red-500);
-}
-
-.input-group--error input:not([type="submit"]):focus,
-.input-group--error select:focus,
-.input-group--error textarea:focus {
-	border-color: var(--red-500);
-	box-shadow: 0 0 0 rem(1) var(--red-500) inset;
+		0 0 0 calc(2 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(4 * var(--border-width)) var(--checkbox-radio-focus-border-color);
 }
-
-.has-dark-mint-500-background-color .input-group--error input:not([type="submit"]),
-.has-dark-mint-500-background-color .input-group--error select,
-.has-dark-mint-500-background-color .input-group--error textarea {
-	border-color: var(--red-200);
-	color: var(--red-500);
-
-	&:focus {
-		border-color: var(--red-200);
-		box-shadow: 0 0 0 rem(2) var(--red-200) inset;
-	}
-}
-
-.input-group__error {
-	color: var(--red-500);
-	display: flex;
-	flex-direction: row;
-	font-family: $font-family-sans;
-	font-size: rem(14);
-	font-weight: $font-weight-semibold;
-	line-height: (20 / 14);
-
-	svg {
-		margin-right: rem(4);
-	}
-
-	.has-dark-mint-500-background-color & {
-		color: var(--red-200);
-	}
-}
-
diff --git a/src/assets/styles/components/_search.scss b/src/assets/styles/components/_search.scss
index c1d9a777..1b934e8f 100644
--- a/src/assets/styles/components/_search.scss
+++ b/src/assets/styles/components/_search.scss
@@ -1,4 +1,6 @@
 .search-form {
+	--border-width: #{rem(1)};
+
 	display: flex;
 	flex-direction: row;
 
@@ -18,17 +20,22 @@
 
 		&:hover {
 			border-color: var(--blue-500);
+			box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--blue-500) inset;
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 rem(1) var(--blue-500) inset;
+			border-color: var(--blue-500);
+			box-shadow:
+				0 0 0 calc(2 * var(--border-width)) var(--blue-500) inset,
+				0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--blue-500) inset;
 		}
 	}
 
 	.button--search {
-		--border-width: #{rem(2)};
-		--outline-color: var(--white);
-		--focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color) inset;
+		--focus-box-shadow:
+			0 0 0 calc(2 * var(--border-width)) var(--blue-500) inset,
+			0 0 0 calc(3 * var(--border-width)) var(--white) inset;
 
 		border-bottom-left-radius: 0;
 		border-top-left-radius: 0;
@@ -36,6 +43,10 @@
 		margin-left: 0;
 		position: relative;
 		width: rem(50);
+
+		&:focus {
+			border-color: var(--blue-500);
+		}
 	}
 }
 
@@ -52,11 +63,14 @@
 
 		&:hover {
 			border-color: var(--blue-300);
+			box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--blue-300) inset;
 		}
 
 		&:focus {
-			border-color: var(--blue-300);
-			box-shadow: 0 0 0 rem(1) var(--blue-300) inset;
+			border-color: var(--white);
+			box-shadow:
+				0 0 0 calc(2 * var(--border-width)) var(--white) inset,
+				0 0 0 calc(4 * var(--border-width)) var(--blue-500) inset;
 		}
 	}
 
@@ -64,7 +78,6 @@
 		--color: var(--blue-500);
 		--background-color: var(--blue-50);
 		--border-color: transparent;
-		--border-width: #{rem(1)};
 		--outline-color: var(--blue-600);
 		--hover-color: var(--blue-600);
 		--hover-background-color: var(--blue-150);
@@ -74,10 +87,10 @@
 		--focus-background-color: var(--background-color);
 		--focus-border-color: var(--blue-50);
 		--focus-box-shadow:
-			0 0 0 var(--border-width) var(--focus-background-color) inset,
-			0 0 0 calc(3 * var(--border-width)) var(--outline-color) inset;
+			0 0 0 calc(2 * var(--border-width)) var(--focus-background-color) inset,
+			0 0 0 calc(4 * var(--border-width)) var(--outline-color) inset;
 
-		border: solid rem(1) var(--border-color);
+		border: solid var(--border-width) var(--border-color);
 
 		&:focus {
 			border-color: var(--focus-border-color);
@@ -88,18 +101,24 @@
 .home__search .search-form.search-form--inverse {
 	[type="search"],
 	.button--search {
-		box-shadow: 0 rem(3) rem(6) rgba(0, 0, 0, 0.16);
+		box-shadow: 0 calc(3 * var(--border-width)) calc(6 * var(--border-width)) rgba(0, 0, 0, 0.16);
+	}
+
+	[type="search"]:hover {
+		box-shadow: 0 0 0 calc(3 * var(--border-width)) var(--blue-300) inset;
 	}
 
 	[type="search"]:focus {
-		box-shadow: 0 0 0 rem(1) var(--blue-300) inset, 0 rem(3) rem(6) rgba(0, 0, 0, 0.16);
+		box-shadow:
+			0 0 0 calc(2 * var(--border-width)) var(--white) inset,
+			0 0 0 calc(4 * var(--border-width)) var(--blue-500) inset;
 	}
 
 	.button--search {
 		--focus-box-shadow:
-			0 0 0 var(--border-width) var(--focus-background-color) inset,
-			0 0 0 calc(var(--border-width) * 3) var(--outline-color) inset,
-			0 calc(var(--border-width) * 3) calc(var(--border-width) * 6) rgba(0, 0, 0, 0.16);
+			0 0 0 calc(2 * var(--border-width)) var(--focus-background-color) inset,
+			0 0 0 calc(4 * var(--border-width)) var(--outline-color) inset,
+			0 calc(3 * var(--border-width)) calc(var(--border-width) * 6) rgba(0, 0, 0, 0.16);
 
 		&:focus {
 			box-shadow: var(--focus-box-shadow);
@@ -110,10 +129,6 @@
 		[type="search"] {
 			height: rem(60);
 
-			&:focus {
-				box-shadow: 0 0 0 rem(2) var(--blue-300) inset, 0 rem(3) rem(6) rgba(0, 0, 0, 0.16);
-			}
-
 			&::placeholder {
 				color: var(--grey-500);
 				opacity: 1;
diff --git a/src/assets/styles/layouts/_header.scss b/src/assets/styles/layouts/_header.scss
index e0c2be79..b9184956 100644
--- a/src/assets/styles/layouts/_header.scss
+++ b/src/assets/styles/layouts/_header.scss
@@ -90,23 +90,24 @@
 				}
 
 				&:hover {
-					border-color: var(--blue-300);
+					box-shadow: 0 0 0 rem(3) var(--blue-300) inset;
 				}
 
 				&:focus {
-					border-color: var(--blue-300);
-					box-shadow: 0 0 0 rem(1) var(--blue-300) inset;
+					box-shadow:
+						0 0 0 rem(2) var(--white) inset,
+						0 0 0 rem(4) var(--blue-500) inset;
 				}
 			}
 
 			.button--search {
 				--color: var(--blue-500);
 				--background-color: var(--blue-50);
-				--border-color: var(--grey-300);
+				--border-color: transparent;
 				--border-width: #{rem(1)};
 				--outline-color: var(--blue-600);
 				--hover-color: var(--blue-600);
-				--hover-background-color: var(--background-color);
+				--hover-background-color: var(--blue-150);
 				--active-color: var(--blue-400);
 				--active-background-color: var(--background-color);
 				--focus-color: var(--blue-600);
@@ -123,19 +124,6 @@
 
 				&:focus {
 					border-color: var(--focus-border-color);
-
-					&::before {
-						border-bottom: solid rem(2) var(--focus-border-color);
-						border-left: solid rem(3) var(--focus-border-color);
-						border-top: solid rem(2) var(--focus-border-color);
-						content: "";
-						display: block;
-						height: rem(46);
-						left: rem(-2);
-						position: absolute;
-						top: rem(-1);
-						width: rem(3);
-					}
 				}
 			}
 		}
diff --git a/src/assets/styles/mixins/_interactive.scss b/src/assets/styles/mixins/_interactive.scss
index eac98fe7..f9664604 100644
--- a/src/assets/styles/mixins/_interactive.scss
+++ b/src/assets/styles/mixins/_interactive.scss
@@ -1,24 +1,29 @@
 %interactive {
+	--color: var(--off-white);
 	--background-color: var(--blue-500);
 	--border-color: transparent;
-	--border-width: #{rem(2)};
-	--color: var(--off-white);
-	--outline-color: var(--parent-background-color);
-	--hover-background-color: var(--blue-700);
-	--hover-border-color: var(--border-color);
-	--hover-color: var(--off-white);
-	--active-background-color: var(--blue-400);
-	--active-border-color: var(--border-color);
-	--active-color: var(--off-white);
-	--active-box-shadow: none;
-	--focus-background-color: var(--blue-700);
-	--focus-border-color: var(--border-color);
-	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--outline-color),
-		0 0 0 calc(2 * var(--border-width)) var(--focus-background-color);
+	--border-width: #{rem(1)};
+
+	--active-background-color: var(--white);
+	--active-box-shadow: var(--focus-box-shadow);
+	--active-color: var(--blue-500);
+
+	--disabled-background-color: var(--blue-150);
+	--disabled-border-color: var(--blue-150);
+	--disabled-color: var(--off-white);
 
+	--focus-background-color: var(--blue-500);
+	--focus-border-color: var(--blue-500);
+	--focus-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--focus-border-color) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--focus-border-color);
 	--focus-color: var(--off-white);
 
+	--hover-background-color: var(--blue-600);
+	--hover-border-color: var(--border-color);
+	--hover-color: var(--off-white);
+
 	background-color: var(--background-color);
 	border: solid var(--border-width) var(--border-color);
 	color: var(--color);
@@ -41,13 +46,12 @@
 
 	&:hover {
 		background-color: var(--hover-background-color);
-		border-color: var(--hover-border-color);
 		color: var(--hover-color, var(--color));
 	}
 
 	&:focus {
 		background-color: var(--focus-background-color);
-		border-color: var(--focus-border-color);
+		border-color: var(--parent-background-color);
 		box-shadow: var(--focus-box-shadow);
 		color: var(--focus-color, var(--color));
 		outline: none;
@@ -55,8 +59,13 @@
 
 	&:active {
 		background-color: var(--active-background-color);
-		border-color: var(--active-border-color);
 		box-shadow: var(--active-box-shadow);
 		color: var(--active-color, var(--color));
 	}
+
+	&:disabled {
+		background-color: var(--disabled-background-color);
+		border-color: var(--disabled-border-color);
+		color: var(--disabled-color);
+	}
 }
diff --git a/src/components/atoms/button/button.config.js b/src/components/atoms/button/button.config.js
index f1eb82fc..8396b89b 100644
--- a/src/components/atoms/button/button.config.js
+++ b/src/components/atoms/button/button.config.js
@@ -10,7 +10,17 @@ module.exports = {
 		iconPosition: 'start',
 		id: 'button',
 		type: 'button',
-		standAlone: false
+		standAlone: false,
+		buttons: [
+			{
+				name: 'default',
+				disabled: false
+			},
+			{
+				name: 'disabled',
+				disabled: true
+			}
+		]
 	},
 	variants: [
 		{
@@ -46,7 +56,7 @@ module.exports = {
 			label: 'Borderless (Inverse)',
 			context: {
 				modifiers: ['borderless', 'inverse'],
-				bodyClass: 'has-blue-500-background-color'
+				bodyClass: 'has-dark-mint-500-background-color'
 			}
 		},
 		{
@@ -60,7 +70,7 @@ module.exports = {
 			label: 'Destructive Borderless (Inverse)',
 			context: {
 				modifiers: ['borderless', 'destructive', 'inverse'],
-				bodyClass: 'has-blue-500-background-color'
+				bodyClass: 'has-dark-mint-500-background-color'
 			}
 		},
 		{
@@ -77,7 +87,7 @@ module.exports = {
 			label: 'Disc (Inverse)',
 			context: {
 				modifiers: ['disc', 'inverse'],
-				bodyClass: 'has-blue-500-background-color',
+				bodyClass: 'has-dark-mint-500-background-color',
 				icon: 'chevron-down',
 				labelVisuallyHidden: true,
 			}
diff --git a/src/components/atoms/form-elements/_checkbox/_checkbox.njk b/src/components/atoms/form-elements/_checkbox/_checkbox.njk
index 0361c26b..79bc06c2 100644
--- a/src/components/atoms/form-elements/_checkbox/_checkbox.njk
+++ b/src/components/atoms/form-elements/_checkbox/_checkbox.njk
@@ -1 +1,4 @@
-{% if standAlone %}<p{% if className %} class="{{ className }}"{% endif %}>{% endif %}<input id="{{ value }}" type="checkbox" name="{{ name }}[]" value="{{ value }}" {% if checked %} checked{% elseif disabled %} disabled{% endif %} /><label for="{{ value }}">{{ label }}</label>{% if standAlone %}</p>{% endif %}
+{% if standAlone %}<p{% if modifiers %} class="{% for modifier in modifiers %} input-group--{{ modifier }}{% endfor %}"{% endif %}>{% endif %}
+<input id="{{ name | slugify }}" type="checkbox" name="{{ name }}" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} />
+<label for="{{ name | slugify }}">{{ label }}</label>
+{% if standAlone %}</p>{% endif %}
diff --git a/src/components/atoms/form-elements/_input/_input.config.js b/src/components/atoms/form-elements/_input/_input.config.js
index 578eddd7..b9eb389e 100644
--- a/src/components/atoms/form-elements/_input/_input.config.js
+++ b/src/components/atoms/form-elements/_input/_input.config.js
@@ -6,46 +6,6 @@ module.exports = {
 		name: 'text',
 		description: 'Description for this text input.',
 		placeholder: 'Example input',
-		error: false,
-		disabled: false
-	},
-	variants: [
-		{
-			name: 'Error',
-			context: {
-				value: 'Incorrect input',
-				error: 'Sorry, that appears to be incorrect.'
-			}
-		},
-		{
-			name: 'Disabled',
-			context: {
-				disabled: true
-			}
-		},
-		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
-			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
-			}
-		},
-		{
-			name: 'Error (Light on Dark)',
-			label: 'Error (Light on Dark)',
-			context: {
-				bodyClass: 'has-dark-mint-500-background-color',
-				value: 'Incorrect input',
-				error: 'Sorry, that appears to be incorrect.'
-			}
-		},
-		{
-			name: 'Disabled (Light on Dark)',
-			label: 'Disabled (Light on Dark)',
-			context: {
-				bodyClass: 'has-dark-mint-500-background-color',
-				disabled: true
-			}
-		}
-	]
+		errorMessage: 'Sorry, that appears to be incorrect.'
+	}
 };
diff --git a/src/components/atoms/form-elements/_input/_input.njk b/src/components/atoms/form-elements/_input/_input.njk
index 3a396254..0dbda769 100644
--- a/src/components/atoms/form-elements/_input/_input.njk
+++ b/src/components/atoms/form-elements/_input/_input.njk
@@ -1,6 +1,6 @@
-<div class="input-group{% if error %} input-group--error{% endif %}">
-	<label for="{{ name }}">{{ label }}{% if error %} (Error){% elseif disabled %} (Disabled){% endif %}</label>
-	<input id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" type="text" value="{{ value or '' }}" {% if disabled %}disabled {% endif %}/>
-	{% if error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ error | safe }}</p>{% endif %}
+<div class="input-group{% if inverse %} input-group--inverse{% endif %}{% if input.modifiers %}{% for modifier in input.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
+	<label for="{{ input.name }}">{{ label }}{% if input.error %} (Error){% elseif input.disabled %} (Disabled){% endif %}</label>
+	<input id="{{ input.name }}" name="{{ input.name }}" placeholder="{{ placeholder }}" type="text" value="{{ value or '' }}" {% if input.disabled %} disabled {% endif %}/>
+	{% if input.error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ errorMessage | safe }}</p>{% endif %}
 	<p class="input-group__description">{{ description }}</p>
 </div>
diff --git a/src/components/atoms/form-elements/_radio-button/_radio-button.config.js b/src/components/atoms/form-elements/_radio-button/_radio-button.config.js
deleted file mode 100644
index 44af59bd..00000000
--- a/src/components/atoms/form-elements/_radio-button/_radio-button.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
-	title: 'Radio Button',
-	label: 'Radio Button',
-	status: 'wip',
-	context: {
-		label: 'Radio Button',
-		value: 'radio',
-		name: 'name',
-		standAlone: false,
-		checked: false,
-		disabled: false
-	}
-};
diff --git a/src/components/atoms/form-elements/_radio-button/_radio-button.njk b/src/components/atoms/form-elements/_radio-button/_radio-button.njk
deleted file mode 100644
index 537d64f1..00000000
--- a/src/components/atoms/form-elements/_radio-button/_radio-button.njk
+++ /dev/null
@@ -1 +0,0 @@
-<li><input id="{{ value }}" type="radio" name="radio" value="{{ value }}"{% if checked %} checked{% elseif disabled %} disabled{% endif %} /><label for="{{ value }}">{{ label }}</label></li>
diff --git a/src/components/atoms/form-elements/_select/_select.config.js b/src/components/atoms/form-elements/_select/_select.config.js
index c7ad74ed..08f018c9 100644
--- a/src/components/atoms/form-elements/_select/_select.config.js
+++ b/src/components/atoms/form-elements/_select/_select.config.js
@@ -12,6 +12,7 @@ module.exports = {
 		label: 'Select',
 		name: 'select',
 		description: 'Description for this select input.',
+		errorMessage: 'Please make a selection.',
 		disabled: false,
 		options: optionData
 	}
diff --git a/src/components/atoms/form-elements/_select/_select.njk b/src/components/atoms/form-elements/_select/_select.njk
index 9d1a93f4..bf23a0da 100644
--- a/src/components/atoms/form-elements/_select/_select.njk
+++ b/src/components/atoms/form-elements/_select/_select.njk
@@ -1,11 +1,10 @@
-<div class="input-group">
-	<label for="{{ name }}">{{ label }}</label>
-	<select id="{{ name }}" name="{{ name }}"{% if disabled %} disabled{% endif %}>
+<div class="input-group{% if inverse %} input-group--inverse{% endif %}{% if select.modifiers %}{% for modifier in select.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
+	<label for="{{ select.name }}">{{ label }}{% if select.error %} (Error){% elseif select.disabled %} (Disabled){% endif %}</label>
+	<select id="{{ select.name }}" name="{{ select.name }}"{% if select.disabled %} disabled{% endif %}>
 		{% for value, label in options %}
 		<option val="{{ value }}">{{ label | safe }}</option>
 		{% endfor %}
 	</select>
-	{% if description %}
+	{% if select.error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ errorMessage | safe }}</p>{% endif %}
 	<p class="input-group__description">{{ description }}</p>
-	{% endif %}
 </div>
diff --git a/src/components/atoms/form-elements/_textarea/_textarea.config.js b/src/components/atoms/form-elements/_textarea/_textarea.config.js
index 6c7516ac..a90284c3 100644
--- a/src/components/atoms/form-elements/_textarea/_textarea.config.js
+++ b/src/components/atoms/form-elements/_textarea/_textarea.config.js
@@ -7,5 +7,7 @@ module.exports = {
 		name: 'text',
 		description: 'Description for this text area.',
 		placeholder: 'Content goes here.',
+		errorMessage: 'Sorry, that appears to be incorrect.',
+		errorValue: 'Incorrect input'
 	}
 };
diff --git a/src/components/atoms/form-elements/_textarea/_textarea.njk b/src/components/atoms/form-elements/_textarea/_textarea.njk
index cf2c19c3..33cacf1f 100644
--- a/src/components/atoms/form-elements/_textarea/_textarea.njk
+++ b/src/components/atoms/form-elements/_textarea/_textarea.njk
@@ -1,6 +1,6 @@
-<div class="input-group {% if error %} input-group--error{% endif %}">
-	<label for="{{ name }}">{{ label }}{% if error %} (Error){% elseif disabled %} (Disabled){% endif %}</label>
-	<textarea id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}"{% if disabled %} disabled{% endif %}>{% if value %}{{ value | safe }}{% endif %}</textarea>
-	{% if error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ error | safe }}</p>{% endif %}
+<div class="input-group{% if inverse %} input-group--inverse{% endif %}{% if textarea.modifiers %}{% for modifier in textarea.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
+	<label for="{{ textarea.name }}">{{ label }}{% if textarea.error %} (Error){% elseif textarea.disabled %} (Disabled){% endif %}</label>
+	<textarea id="{{ textarea.name }}" name="{{ textarea.name }}" placeholder="{{ placeholder }}"{% if textarea.disabled %} disabled{% endif %}>{% if textarea.error %}{{ errorValue | safe }}{% endif %}</textarea>
+	{% if textarea.error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ errorMessage | safe }}</p>{% endif %}
 	<p class="input-group__description">{{ description }}</p>
 </div>
diff --git a/src/components/atoms/form-elements/checkboxes/checkboxes.config.js b/src/components/atoms/form-elements/checkboxes/checkboxes.config.js
index f1251561..4ed0a37f 100644
--- a/src/components/atoms/form-elements/checkboxes/checkboxes.config.js
+++ b/src/components/atoms/form-elements/checkboxes/checkboxes.config.js
@@ -6,21 +6,19 @@ module.exports = {
 		standAlone: false,
 		checkboxes: [
 			{
-				name: 'checkbox',
+				name: 'unchecked',
+				label: 'Initially unchecked',
 				standAlone: false
 			},
 			{
-				name: 'checkbox',
+				name: 'checked',
+				label: 'Initially checked',
 				checked: true,
 				standAlone: false
 			},
 			{
-				name: 'checkbox',
-				value: 'indeterminate',
-				standAlone: false
-			},
-			{
-				name: 'checkbox',
+				name: 'disabled',
+				label: 'Disabled checkbox',
 				disabled: true,
 				standAlone: false
 			}
@@ -31,7 +29,9 @@ module.exports = {
 			name: 'Default Inverse',
 			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-blue-500-background-color'
+				bodyClass: 'has-dark-mint-500-background-color',
+				inverse: true,
+				modifiers: ['inverse']
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/checkboxes/checkboxes.njk b/src/components/atoms/form-elements/checkboxes/checkboxes.njk
index d13910be..f2090fc5 100644
--- a/src/components/atoms/form-elements/checkboxes/checkboxes.njk
+++ b/src/components/atoms/form-elements/checkboxes/checkboxes.njk
@@ -1,4 +1,4 @@
-<ul class="input-group {{ className if className }}">
+<ul class="input-group{% if inverse %} input-group--inverse{% endif %}{% if select.modifiers %}{% for modifier in select.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
 	{% for checkbox in checkboxes %}
 	<li>{% render '@checkbox', checkbox, true %}</li>
 	{% endfor %}
diff --git a/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.config.js b/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.config.js
new file mode 100644
index 00000000..ea6a6c20
--- /dev/null
+++ b/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.config.js
@@ -0,0 +1,30 @@
+module.exports = {
+	title: 'Custom Checkboxes',
+	status: 'wip',
+  standAlone: 'false',
+	order: 7,
+	context: {
+		label: 'Nested Checkboxes',
+		items: [
+			{
+				label: 'Parent item 1',
+				children: [
+					'Sub item 1',
+					'Sub item 2',
+					'Sub item 3'
+				]
+			}
+    ]
+	},
+	variants: [
+		{
+			name: 'Default Inverse',
+			label: 'Default (Inverse)',
+			context: {
+				bodyClass: 'has-dark-mint-500-background-color',
+				inverse: true,
+				modifiers: ['inverse']
+			}
+		}
+	]
+};
diff --git a/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.njk b/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.njk
new file mode 100644
index 00000000..59ffdd2c
--- /dev/null
+++ b/src/components/atoms/form-elements/custom-checkboxes/custom-checkboxes.njk
@@ -0,0 +1,14 @@
+<ul id="{{ label | slugify }}" class="input-group input-group__parent {{ label | slugify }} {% if inverse %} input-group--inverse{% endif %}">
+	{% for item in items %}
+	<li>
+		{% if item.children %}
+			{% render '@checkbox', {label: item.label, value: item.label | slugify, name: item.label | slugify, standAlone: false}, true %}
+			<ul class="input-group input-group__descendant{% if inverse %} input-group--inverse{% endif %}{% if modifiers %}{% for modifier in modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
+				{% for child in item.children %}
+				<li>{% render '@checkbox', {label: child, value: child | slugify, name: child | slugify, standAlone: false}, true %}</li>
+				{% endfor %}
+			</ul>
+    {% endif %}
+	</li>
+	{% endfor %}
+</ul>
diff --git a/src/components/atoms/form-elements/inputs/inputs.config.js b/src/components/atoms/form-elements/inputs/inputs.config.js
index 1acfee46..0e63a065 100644
--- a/src/components/atoms/form-elements/inputs/inputs.config.js
+++ b/src/components/atoms/form-elements/inputs/inputs.config.js
@@ -1,7 +1,9 @@
 module.exports = {
 	title: 'Text Input',
+	label: 'Text Input',
 	status: 'wip',
 	order: 1,
+	inverse: false,
 	context: {
 		standAlone: false,
 		inputs: [
@@ -10,21 +12,24 @@ module.exports = {
 			},
 			{
 				name: 'error',
-				value: 'Incorrect input',
-				error: 'Sorry, that appears to be incorrect.'
+				error: true,
+				modifiers: ['error']
 			},
 			{
 				name: 'disabled',
-				disabled: true
-			},
+				disabled: true,
+				modifiers: ['disabled']
+			}
 		]
 	},
 	variants: [
 		{
-			name: 'Default Invers',
+			name: 'default_inverse',
 			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-blue-500-background-color'
+				inverse: true,
+				bodyClass: 'has-dark-mint-500-background-color',
+				modifiers: ['inverse']
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/inputs/inputs.njk b/src/components/atoms/form-elements/inputs/inputs.njk
index 49e9ffcd..53cfe9b3 100644
--- a/src/components/atoms/form-elements/inputs/inputs.njk
+++ b/src/components/atoms/form-elements/inputs/inputs.njk
@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
 {% for input in inputs %}
-{% render '@input', input, true %}
+{% render '@input', {input:input, inverse:inverse}, true %}
 {% endfor %}
diff --git a/src/components/atoms/form-elements/radio-buttons/radio-buttons.config.js b/src/components/atoms/form-elements/radio-buttons/radio-buttons.config.js
index 91e3bc02..7fdc38bc 100644
--- a/src/components/atoms/form-elements/radio-buttons/radio-buttons.config.js
+++ b/src/components/atoms/form-elements/radio-buttons/radio-buttons.config.js
@@ -4,17 +4,19 @@ module.exports = {
 	order: 5,
 	status: 'wip',
 	context: {
-		standAlone: false,
 		radioButtons: [
 			{
-				name: 'radio'
+				name: 'radio',
+				label: 'Radio initially unchecked'
 			},
 			{
-				name: 'radio',
+				name: 'radio checked',
+				label: 'Radio initially checked',
 				checked: true
 			},
 			{
-				name: 'radio',
+				name: 'radio disabled',
+				label: 'Radio disabled',
 				disabled: true
 			}
 		]
@@ -24,7 +26,9 @@ module.exports = {
 			name: 'Default Inverse',
 			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-blue-500-background-color'
+				inverse: true,
+				bodyClass: 'has-dark-mint-500-background-color',
+				modifiers: ['inverse']
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/radio-buttons/radio-buttons.njk b/src/components/atoms/form-elements/radio-buttons/radio-buttons.njk
index 91af86d4..ac755941 100644
--- a/src/components/atoms/form-elements/radio-buttons/radio-buttons.njk
+++ b/src/components/atoms/form-elements/radio-buttons/radio-buttons.njk
@@ -1,5 +1,5 @@
-{% if not standAlone %}<ul class="input-group">{% endif %}
+<ul class="input-group {% if inverse %} input-group--inverse{% endif %}{% if select.modifiers %}{% for modifier in select.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
 {% for radioButton in radioButtons %}
-{% render '@radio-button', radioButton, true %}
+<li><input id="{{ radioButton.name }}" type="radio" name="radio" value="{{ value }}"{% if radioButton.checked %} checked{% elseif radioButton.disabled %} disabled{% endif %} /><label for="{{ radioButton.name }}">{{ radioButton.label }}</label></li>
 {% endfor %}
-{% if not standAlone %}</ul>{% endif %}
+</ul>
diff --git a/src/components/atoms/form-elements/selects/selects.config.js b/src/components/atoms/form-elements/selects/selects.config.js
index e1c79fe2..18a87e68 100644
--- a/src/components/atoms/form-elements/selects/selects.config.js
+++ b/src/components/atoms/form-elements/selects/selects.config.js
@@ -8,9 +8,15 @@ module.exports = {
 			{
 				name: 'select'
 			},
+			{
+				name: 'error',
+				error: true,
+				modifiers: ['error']
+			},
 			{
 				name: 'disabled',
-				disabled: true
+				disabled: true,
+				modifiers: ['disabled']
 			}
 		]
 	},
@@ -19,7 +25,8 @@ module.exports = {
 			name: 'Default Inverse',
 			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-blue-500-background-color'
+				bodyClass: 'has-dark-mint-500-background-color',
+				inverse: true
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/selects/selects.njk b/src/components/atoms/form-elements/selects/selects.njk
index 67d23680..61be97d6 100644
--- a/src/components/atoms/form-elements/selects/selects.njk
+++ b/src/components/atoms/form-elements/selects/selects.njk
@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
 {% for select in selects %}
-{% render '@select', select, true %}
+{% render '@select', {select:select, inverse:inverse}, true %}
 {% endfor %}
diff --git a/src/components/atoms/form-elements/submit/submit.config.js b/src/components/atoms/form-elements/submit/submit.config.js
index c5d905f6..e2732c5a 100644
--- a/src/components/atoms/form-elements/submit/submit.config.js
+++ b/src/components/atoms/form-elements/submit/submit.config.js
@@ -17,7 +17,7 @@ module.exports = {
 			label: 'Default (Inverse)',
 			context: {
 				modifiers: ['inverse'],
-				bodyClass: 'has-blue-500-background-color'
+				bodyClass: 'has-dark-mint-500-background-color'
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/submit/submit.njk b/src/components/atoms/form-elements/submit/submit.njk
index 47e5edec..7bcb7d06 100644
--- a/src/components/atoms/form-elements/submit/submit.njk
+++ b/src/components/atoms/form-elements/submit/submit.njk
@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
-<div class="input-group">
+<div class="input-group{% if modifiers %}{% for modifier in modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
 	{% render '@button', {label: label, id: id, icon: icon, modifiers: modifiers, type: type, standAlone: true}, true %}
 </div>
diff --git a/src/components/atoms/form-elements/textareas/textareas.config.js b/src/components/atoms/form-elements/textareas/textareas.config.js
index a5d5cf3b..e3d9af0d 100644
--- a/src/components/atoms/form-elements/textareas/textareas.config.js
+++ b/src/components/atoms/form-elements/textareas/textareas.config.js
@@ -1,13 +1,9 @@
 module.exports = {
 	title: 'Text Areas',
-	label: 'Text Areas',
 	status: 'wip',
 	order: 2,
 	context: {
-		label: 'Text Area',
 		name: 'text',
-		description: 'Description for this text area.',
-		placeholder: 'Content goes here.',
 		standAlone: false,
 		textareas: [
 			{
@@ -15,12 +11,13 @@ module.exports = {
 			},
 			{
 				name: 'error',
-				value: 'Incorrect input',
-				error: 'Sorry, that appears to be incorrect.'
+				error: true,
+				modifiers: ['error']
 			},
 			{
 				name: 'disabled',
-				disabled: true
+				disabled: true,
+				modifiers: ['disabled']
 			}
 		]
 	},
@@ -29,7 +26,9 @@ module.exports = {
 			name: 'Default Inverse',
 			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-blue-500-background-color'
+				inverse: true,
+				bodyClass: 'has-dark-mint-500-background-color',
+				modifiers: ['inverse']
 			}
 		}
 	]
diff --git a/src/components/atoms/form-elements/textareas/textareas.njk b/src/components/atoms/form-elements/textareas/textareas.njk
index 04fbd909..30da5fd0 100644
--- a/src/components/atoms/form-elements/textareas/textareas.njk
+++ b/src/components/atoms/form-elements/textareas/textareas.njk
@@ -1,4 +1,4 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
 {% for textarea in textareas %}
-{% render '@textarea', textarea, true %}
+{% render '@textarea', {textarea:textarea, inverse:inverse}, true %}
 {% endfor%}
diff --git a/src/components/molecules/filter-list/filter-list.njk b/src/components/molecules/filter-list/filter-list.njk
index bfb63e20..0a475f37 100644
--- a/src/components/molecules/filter-list/filter-list.njk
+++ b/src/components/molecules/filter-list/filter-list.njk
@@ -10,18 +10,18 @@
 		<div class="accordion__pane">
 			<p class="accordion__heading">{{ label }}</p>
 			<div class="accordion__content">
-				{% render '@button--borderless', {label: 'Deselect All<span class="screen-reader-text"> '+label+'</span>', id: 'deselect-'+ label | slugify, icon: false, standAlone: true}, true %}
+				{% render '@button--borderless', {label: 'Deselect All<span class="screen-reader-text"> '+label+'</span>', id: 'deselect-'+ label | slugify, icon: false, standAlone: true, buttons:[{name: 'default' }]}, true %}
 				<ul id="{{ label | slugify }}" class="input-group input-group__parent {{ label | slugify }}">
 					{% for term in terms %}
 					<li>
 						{% if term.children %}
 							{% set count = term.children.length %}
-							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: label | slugify, standAlone: false}, true %}
+							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: label | slugify, standAlone: false, inverse: true}, true %}
 							<span class="filter-disclosure-label" hidden>show {{ count }} subtopics for "{{ term.label }}"</span>
 							<span class="supplementary-label" hidden> (and {{ count }} subtopics)</span>
 							<ul class="input-group input-group__descendant">
 								{% for child in term.children %}
-								<li>{% render '@checkbox', {label: child, value: child | slugify, name: label | slugify, standAlone: false}, true %}</li>
+								<li>{% render '@checkbox', {label: child, value: child | slugify, name: child | slugify, standAlone: false, inverse: true}, true %}</li>
 								{% endfor %}
 							</ul>
 						{% else %}