diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 5ecd3cd..e005ff3 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -132,8 +132,10 @@
 - Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
 - Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
 - Customized `checkbox` and `radio` input elements, they should work pretty much fine.
-- *TODO* Add variables to customize `input_control` further, except buttons. Add all missing values much like I have done in `layout` module.
+- *TODO* Add all missing values to modules much like I have done in `layout` module.
 
 ## 20171112
 
 - Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
+- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
+- *TODO* Add button groups, deal with `checkbox` and `radio` sizing in a proper manner.
diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css
index 8be66a7..6d17dde 100644
--- a/docs/v3_dev/src/index.css
+++ b/docs/v3_dev/src/index.css
@@ -646,6 +646,12 @@ a:hover, a:focus {
 */
 /* Input_control module CSS variable definitions */
 :root {
+  --form-back-color: #f0f0f0;
+  --form-fore-color: #111;
+  --form-border-color: #ddd;
+  --input-back-color: #f8f8f8;
+  --input-fore-color: #111;
+  --input-border-color: #ddd;
   --input-focus-color: #0288d1;
   --input-invalid-color: #d32f2f;
   --button-back-color: #e2e2e2;
@@ -656,15 +662,16 @@ a:hover, a:focus {
 }
 
 form {
-  background: var(--secondary-back-color);
-  border: 0.0625rem solid var(--secondary-border-color);
+  background: var(--form-back-color);
+  color: var(--form-fore-color);
+  border: 0.0625rem solid var(--form-border-color);
   border-radius: var(--universal-border-radius);
   margin: var(--universal-margin);
   padding: calc(2 * var(--universal-padding)) var(--universal-padding);
 }
 
 fieldset {
-  border: 0.0625rem solid var(--secondary-border-color);
+  border: 0.0625rem solid var(--form-border-color);
   border-radius: var(--universal-border-radius);
   margin: calc(var(--universal-margin) / 4);
   padding: var(--universal-padding);
@@ -733,9 +740,9 @@ label {
 input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
 [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
   box-sizing: border-box;
-  background: var(--back-color);
-  color: var(--fore-color);
-  border: 0.0625rem solid var(--secondary-border-color);
+  background: var(--input-back-color);
+  color: var(--input-fore-color);
+  border: 0.0625rem solid var(--input-border-color);
   border-radius: var(--universal-border-radius);
   margin: calc(var(--universal-margin) / 2);
   padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
@@ -798,17 +805,17 @@ option {
   content: '';
   top: calc(0.0625rem + var(--universal-padding) / 2);
   left: calc(0.0625rem + var(--universal-padding) / 2);
-  background: #111;
+  background: var(--input-fore-color);
   width: 0.5rem;
   height: 0.5rem;
 }
 
 :placeholder-shown {
-  color: var(--fore-color);
+  color: var(--input-fore-color);
 }
 
 ::-ms-placeholder {
-  color: var(--fore-color);
+  color: var(--input-fore-color);
   opacity: 0.54;
 }
 
diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss
index f867d42..805b2d3 100644
--- a/src/mini/_input_control.scss
+++ b/src/mini/_input_control.scss
@@ -9,6 +9,12 @@ $input-group-vertical-name:  'vertical' !default;     // Class name for vertical
 $input-group-mobile-breakpoint:   767px !default;     // Breakpoint for fluid input group mobile view.
 $button-class-name:           'button' !default;      // Class name for elements styled as buttons.
 $input-disabled-opacity:      0.75 !default;          // Opacity for input elements when disabled.
+$form-back-color:             #f0f0f0 !default;       // Background color for forms.
+$form-fore-color:             #111 !default;          // Text color for forms.
+$form-border-color:           #ddd !default;          // Border color for forms.
+$input-back-color:            #f8f8f8 !default;       // Background color for input elements.
+$input-fore-color:            #111 !default;          // Text color for input elements.
+$input-border-color:          #ddd !default;          // Border color for input elements.
 $input-focus-color:           #0288d1 !default;       // Border color for focused input elements.
 $input-invalid-color:         #d32f2f !default;       // Border color for invalid input elements.
 $button-back-color:           #e2e2e2 !default;       // Background color for buttons.
@@ -17,6 +23,12 @@ $button-fore-color:           #212121 !default;       // Text color for buttons.
 $button-border-color:         transparent !default;   // Border color for buttons.
 $button-hover-border-color:   transparent !default;   // Border color for buttons (hover).
 // CSS variable name definitions [exercise caution if modifying these]
+$form-back-color-var:         '--form-back-color' !default;
+$form-fore-color-var:         '--form-fore-color' !default;
+$form-border-color-var:       '--form-border-color' !default;
+$input-back-color-var:        '--input-back-color' !default;
+$input-fore-color-var:        '--input-fore-color' !default;
+$input-border-color-var:      '--input-border-color' !default;
 $input-focus-color-var:       '--input-focus-color' !default;
 $input-invalid-color-var:     '--input-invalid-color' !default;
 $button-back-color-var:       '--button-back-color' !default;
@@ -27,24 +39,14 @@ $button-border-color-var:       '--button-border-color' !default;
 $button-hover-border-color-var: '--button-hover-border-color' !default;
 // Check the `_input_control_mixins.scss` file to find this module's mixins.
 @import 'input_control_mixins';
-// Necessary functions for certain elements (mainly the icon used for the checkbox)
-/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
-/// -----------------------------------------------------------------------
-/// Replace `$search` with `$replace` in `$string`
-/// @author Hugo Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-  @return $string;
-}
 /* Input_control module CSS variable definitions */
 :root {
+  #{$form-back-color-var}: $form-back-color;
+  #{$form-fore-color-var}: $form-fore-color;
+  #{$form-border-color-var}: $form-border-color;
+  #{$input-back-color-var}: $input-back-color;
+  #{$input-fore-color-var}: $input-fore-color;
+  #{$input-border-color-var}: $input-border-color;
   #{$input-focus-color-var}: $input-focus-color;
   #{$input-invalid-color-var}: $input-invalid-color;
   #{$button-back-color-var}: $button-back-color;
@@ -55,8 +57,9 @@ $button-hover-border-color-var: '--button-hover-border-color' !default;
 }
 // Base form styling
 form {  // Text color is the default, this can be changed manually.
-  background: var(#{$secondary-back-color-var});
-  border: $__1px solid var(#{$secondary-border-color-var});
+  background: var(#{$form-back-color-var});
+  color: var(#{$form-fore-color-var});
+  border: $__1px solid var(#{$form-border-color-var});
   border-radius: var(#{$universal-border-radius-var});
   margin: var(#{$universal-margin-var});
   padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@@ -67,7 +70,7 @@ form {  // Text color is the default, this can be changed manually.
 // Fieldset styling
 fieldset {
   // Apply always to overwrite defaults for all of the below.
-  border: $__1px solid var(#{$secondary-border-color-var});
+  border: $__1px solid var(#{$form-border-color-var});
   border-radius: var(#{$universal-border-radius-var});
   margin: calc(var(#{$universal-margin-var}) / 4);
   padding: var(#{$universal-padding-var});
@@ -137,9 +140,9 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
   box-sizing: border-box;
   // Background, color and border should not be unassigned, as the browser defaults will apply.
-  background: var(#{$back-color-var});
-  color: var(#{$fore-color-var});
-  border: $__1px solid var(#{$secondary-border-color-var});
+  background: var(#{$input-back-color-var});
+  color: var(#{$input-fore-color-var});
+  border: $__1px solid var(#{$input-border-color-var});
   border-radius: var(#{$universal-border-radius-var});
   margin: calc(var(#{$universal-margin-var}) / 2);
   padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
@@ -198,17 +201,17 @@ option {
     content: '';
     top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
     left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
-    background: $fore-color;
+    background: var(#{$input-fore-color-var});
     width: 0.5rem;
     height: 0.5rem;
   }
 }
 // Placeholder styling (keep browser-specific definitions separated, they do not play well together).
 :placeholder-shown {
-  color: var(#{$fore-color-var});
+  color: var(#{$input-fore-color-var});
 }
 ::-ms-placeholder {
-  color: var(#{$fore-color-var});
+  color: var(#{$input-fore-color-var});
   opacity: 0.54;
 }
 // Definitions for the button and button-like elements.