diff --git a/components/00-base/01-colors/_colors-vars.scss b/components/00-base/01-colors/_colors-vars.scss
index 236f0b3a..04e896a2 100644
--- a/components/00-base/01-colors/_colors-vars.scss
+++ b/components/00-base/01-colors/_colors-vars.scss
@@ -11,13 +11,19 @@ $gray-light: #888;
 $gray: #666;
 $gray-dark: #4c4c4c;
 $gray-darker: #333;
+$gray-darkest: #222;
 $black: black;
 
 // Status
-$yellow-light: #f9fb93;
-$red-light: #fbe3e4;
-$green-light: #cfefc2;
+$yellow: #ecef26;
+$yellow-light: #f6f886;
+$red: #ca242c;
+$red-light: #fcd0d2;
+$green: #278002;
+$green-light: #a6eb89;
 
 // Project
-$purple: #610c63;
-$blue: #005de0;
+$purple: #5c0a5d;
+$purple-light: #912892;
+$blue: #0852ba;
+$blue-light: #61a0f7;
diff --git a/components/00-base/01-colors/colors-used.scss b/components/00-base/01-colors/colors-used.scss
index 22f9eda5..6ec984f7 100644
--- a/components/00-base/01-colors/colors-used.scss
+++ b/components/00-base/01-colors/colors-used.scss
@@ -8,7 +8,9 @@ $defaultColors: (
   background: colors-vars.$white,
   background-section: colors-vars.$gray-lightest,
   primary: colors-vars.$blue,
+  primary-alt: colors-vars.$blue-light,
   secondary: colors-vars.$purple,
+  secondary-alt: colors-vars.$purple-light,
   accent: colors-vars.$gray-dark,
   accent-high: colors-vars.$black,
   highlight: colors-vars.$gray-lighter,
@@ -24,17 +26,19 @@ $darkColors: (
   text-inverse: colors-vars.$gray,
   background: colors-vars.$gray,
   background-inverse: colors-vars.$gray-light,
-  background-section: colors-vars.$gray-dark,
-  primary: colors-vars.$blue,
-  secondary: colors-vars.$purple,
+  background-section: colors-vars.$gray-darkest,
+  primary: colors-vars.$blue-light,
+  primary-alt: colors-vars.$blue,
+  secondary: colors-vars.$purple-light,
+  secondary-alt: colors-vars.$purple,
   accent: colors-vars.$gray-lightest,
   accent-high: colors-vars.$white,
   highlight: colors-vars.$gray-dark,
   highlight-high: colors-vars.$gray-darker,
   muted: colors-vars.$gray-darker,
-  warning: colors-vars.$yellow-light,
-  error: colors-vars.$red-light,
-  message: colors-vars.$green-light,
+  warning: colors-vars.$yellow,
+  error: colors-vars.$red,
+  message: colors-vars.$green,
 );
 
 ///////////
diff --git a/components/00-base/01-colors/colors.yml b/components/00-base/01-colors/colors.yml
index a6e98adc..6cb338a8 100644
--- a/components/00-base/01-colors/colors.yml
+++ b/components/00-base/01-colors/colors.yml
@@ -5,7 +5,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'
@@ -19,7 +21,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'
diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.scss
index 5df5faa5..7fe79aae 100644
--- a/components/01-atoms/buttons/_buttons.scss
+++ b/components/01-atoms/buttons/_buttons.scss
@@ -9,13 +9,13 @@ $button-colors: (
   ),
   primary-dark: (
     text: clr(text),
-    bg: clr(primary),
+    bg: clr(primary-alt),
     text-hover: clr(text),
     bg-hover: clr(highlight-high),
   ),
   secondary: (
     text: clr(text-inverse),
-    bg: clr(secondary),
+    bg: clr(secondary-alt),
     text-hover: clr(secondary),
     bg-hover: clr(highlight),
   ),
diff --git a/components/01-atoms/buttons/button.twig b/components/01-atoms/buttons/button.twig
index ba6c3fa2..b83f380f 100644
--- a/components/01-atoms/buttons/button.twig
+++ b/components/01-atoms/buttons/button.twig
@@ -11,11 +11,11 @@
 
 {% set button_base_class = button_base_class|default('button') %}
 
-{% set additional_attributes = {
+{% set button_attributes = button_attributes|default({
   class: bem(button_base_class, button_modifiers, button_blockname),
-} %}
+}) %}
 
-<button {{ add_attributes(additional_attributes) }}>
+<button {{ add_attributes(button_attributes) }}>
   {% block button_content %}
     {{ button_content }}
   {% endblock %}
diff --git a/components/01-atoms/links/link/_link.scss b/components/01-atoms/links/link/_link.scss
index 1637caf3..3fa823ee 100644
--- a/components/01-atoms/links/link/_link.scss
+++ b/components/01-atoms/links/link/_link.scss
@@ -1,11 +1,20 @@
 @mixin link {
-  color: clr(accent);
+  color: clr(primary);
 
   &:hover {
-    color: clr(accent-high);
+    color: clr(primary-alt);
   }
 }
 
 .link {
   @include link;
 }
+
+a {
+  @include link;
+
+  /* A elements that don't have a class get default styles */
+  &:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+}
diff --git a/components/01-atoms/text/headings/_heading.twig b/components/01-atoms/text/headings/_heading.twig
index 367b2cba..8dfbac80 100644
--- a/components/01-atoms/text/headings/_heading.twig
+++ b/components/01-atoms/text/headings/_heading.twig
@@ -2,7 +2,7 @@
 /**
  * Available variables:
  * - heading_level - the header level 1-6 (produces h1, h2, etc.)
- *
+ * - heading__attributes - array of attributes and their values
  * - heading_base_class - the base class
  * - heading_modifiers - array of modifiers to add to the base classname
  * - heading_blockname - blockname prepended to the base classname
@@ -17,8 +17,11 @@
  */
 #}
 {% set heading_base_class = heading_base_class|default('h' ~ heading_level) %}
+{% set heading__attributes = heading__attributes|default({
+  'class': bem(heading_base_class, heading_modifiers, heading_blockname),
+}) %}
 
-<h{{ heading_level }} {{ bem(heading_base_class, heading_modifiers, heading_blockname) }}>
+<h{{ heading_level }} {{ add_attributes(heading__attributes) }}>
   {% if heading_url %}
     {% include "@atoms/links/link/link.twig" with {
       "link_content": heading,
diff --git a/components/02-molecules/modal/_modal.scss b/components/02-molecules/modal/_modal.scss
new file mode 100644
index 00000000..3c59c399
--- /dev/null
+++ b/components/02-molecules/modal/_modal.scss
@@ -0,0 +1,95 @@
+// Base modal styles. Additional classes accommodate for custom app implementations.
+.modal__toggle {
+  cursor: pointer;
+}
+
+.modal__pane {
+  background-color: clr(background-section);
+  color: clr(text);
+  left: 0;
+  opacity: 0;
+  padding: $space;
+  position: fixed;
+  top: 50%;
+  transform: translate(0%, -50%);
+  transition: opacity 300ms;
+  visibility: hidden;
+  width: 100vw;
+  z-index: 1000;
+
+  @include large {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: $small;
+  }
+
+  .modal--active & {
+    max-height: 100vh;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.modal__title {
+  @include wrapper($container-max-width: $small);
+
+  margin-bottom: $space;
+}
+
+.modal__content {
+  @include wrapper($container-max-width: $small);
+
+  > * {
+    margin-bottom: $space;
+    width: 100%;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.modal__modal-heading {
+  display: flex;
+  flex-flow: row nowrap;
+
+  // Close button
+  .modal__toggle {
+    @include button-base;
+    @include button-color-primary;
+    @include button-medium;
+
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .icon {
+    fill: clr(text);
+    height: $space;
+    position: relative;
+    right: 0;
+    stroke: clr(text);
+    stroke-linecap: round;
+    top: $space-one-fourth;
+    width: $space;
+  }
+}
+
+.modal__overlay {
+  background-color: clr(background);
+  color: clr(text);
+  display: none;
+  left: 0;
+  opacity: 0.45;
+  position: fixed;
+  top: 0;
+
+  &--active {
+    display: block;
+    height: 100vh;
+    width: 100vw;
+    z-index: 999;
+  }
+}
diff --git a/components/02-molecules/modal/modal.js b/components/02-molecules/modal/modal.js
new file mode 100644
index 00000000..3c57bca9
--- /dev/null
+++ b/components/02-molecules/modal/modal.js
@@ -0,0 +1,150 @@
+Drupal.behaviors.modal = {
+  attach(context) {
+    // Variables
+    const modals = context.querySelector('.modal');
+    let activeModal = context.querySelector('.modal--active');
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+    // Check if an element is completely empty.
+    function isEmpty(node) {
+      return node.innerHTML.trim() === '';
+    }
+
+    // Toggle aria-[anything] attribute from true / false.
+    function toggleAria(el, aria) {
+      let x = el.getAttribute(`aria-${aria}`);
+      if (x === 'true') {
+        x = 'false';
+      } else {
+        x = 'true';
+      }
+      el.setAttribute(`aria-${aria}`, x);
+    }
+
+    // Traps keyboard focus when modal is open for ADA compliance
+    function trapKeyboard(modal) {
+      const firstFocusableElement =
+        modal.querySelectorAll(focusableElements)[0];
+      const focusableContent = modal.querySelectorAll(focusableElements);
+      const lastFocusableElement =
+        focusableContent[focusableContent.length - 1];
+
+      modal.addEventListener('keydown', (e) => {
+        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+        if (!isTabPressed) {
+          return;
+        }
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableElement) {
+            lastFocusableElement.focus();
+            e.preventDefault();
+          }
+        } else if (document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+        }
+      });
+
+      firstFocusableElement.focus();
+    }
+
+    // Toggle tabindex focus attribute.
+    function toggletabIndex(el) {
+      let x = el.getAttribute('tabindex');
+      if (x === '-1') {
+        x = '1';
+      } else {
+        x = '-1';
+      }
+      el.setAttribute('tabindex', x);
+    }
+
+    // Toggle Modal
+    function toggleModal(modal) {
+      const overlay = modal.querySelector('.modal__overlay');
+      const modalModalPane = modal.querySelector('.modal__pane');
+      if (overlay) {
+        overlay.classList.toggle('modal__overlay--active');
+      }
+      modal.classList.toggle('modal--active');
+      activeModal = context.querySelector('.modal--active');
+      toggleAria(modalModalPane, 'hidden');
+      toggleAria(modal, 'expanded');
+      trapKeyboard(modalModalPane);
+      toggletabIndex(modalModalPane);
+    }
+
+    // AJAX Request data from url + CSS selector.
+    function ajaxRequest(request, url, selector) {
+      let response = '';
+      request.onreadystatechange = function processResponse() {
+        if (request.status === 200) {
+          const resp = request.responseText;
+          const parser = new DOMParser();
+          const htmlDoc = parser.parseFromString(resp, 'text/html');
+          const remoteselector = htmlDoc.querySelectorAll(selector);
+
+          response = remoteselector[0].innerHTML;
+        } else {
+          response = `<p>Could not process request. Error code: ${request.status}</p>`;
+        }
+      };
+      request.open('GET', url, false);
+      request.send();
+
+      return response;
+    }
+
+    if (modals) {
+      [modals].forEach((modal) => {
+        const modalToggle = modal.querySelectorAll('.modal__toggle');
+        const modalModalContent = modal.querySelector('.modal__content');
+        const modalOverlay = modal.querySelector('.modal__overlay');
+
+        modalToggle.forEach((toggle) => {
+          toggle.addEventListener('click', (e) => {
+            const toggleChild = toggle.children[0];
+            e.preventDefault();
+
+            // First check if the child of toggle is a link.
+            // Attempt to request the <main> from the link's href.
+            if (
+              typeof toggleChild !== 'undefined' &&
+              toggleChild.tagName === 'A' &&
+              toggleChild.getAttribute('href') !== null
+            ) {
+              e.preventDefault();
+              const request = new XMLHttpRequest();
+              const url = toggleChild.getAttribute('href');
+              const response = ajaxRequest(
+                request,
+                url,
+                '#storybook-preview-iframe',
+              );
+              modalModalContent.innerHTML = response;
+            }
+            // On trigger the modal if content is present.
+            if (isEmpty(modalModalContent) === false) {
+              toggleModal(modal);
+            }
+          });
+        });
+        [modalOverlay].forEach((overlay) => {
+          overlay.addEventListener('click', () => {
+            toggleModal(modal);
+          });
+        });
+      });
+    }
+
+    // Keyboard controls for closing the modal
+    context.addEventListener('keyup', (e) => {
+      if (e.key === 'Escape') {
+        toggleModal(activeModal);
+      }
+    });
+  },
+};
diff --git a/components/02-molecules/modal/modal.stories.js b/components/02-molecules/modal/modal.stories.js
new file mode 100644
index 00000000..b831ad05
--- /dev/null
+++ b/components/02-molecules/modal/modal.stories.js
@@ -0,0 +1,39 @@
+import modalTwig from './modal.twig';
+
+import modalData from './modal.yml';
+
+import './modal';
+
+/**
+ * Storybook Definition.
+ */
+export default {
+  title: 'Molecules/Modal',
+};
+
+export const modalButton = () => {
+  return modalTwig({ ...modalData });
+};
+
+export const modalAjaxLink = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle:
+      '<a href="http://localhost:6006/?path=/story/molecules-modal--modal-ajax-link">Ajax modal data</a>',
+  });
+};
+
+export const modalText = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle: '<p>Plain Ol Text</p>',
+  });
+};
+
+export const modalMedia = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle:
+      '<img src="https://placeimg.com/320/180/any" alt="Example image to trigger the modal">',
+  });
+};
diff --git a/components/02-molecules/modal/modal.twig b/components/02-molecules/modal/modal.twig
new file mode 100644
index 00000000..91d16410
--- /dev/null
+++ b/components/02-molecules/modal/modal.twig
@@ -0,0 +1,107 @@
+{#
+ # Available variables:
+ # - modal__id - unique id of the wrapper.
+ # - modal__base_class - base classname of the wrapper.
+ # - modal__modifiers - array of modifiers to add to the base classname of the wrapper.
+ # - modal__blockname - blockname prepended to the base classname of the wrapper(s) and each component.
+ #
+ # - modal__attributes - array of attributes and their values for the wrapper.
+ # - modal__toggle_attributes - array of attributes and their values for the toggle.
+ # - modal__close_attributes - array of attributes and their values for the close button.
+ # - modal__heading_attributes - array of attributes and their values for the heading.
+ #
+ # - modal__toggle__content - button content if block is not replaced.
+ #
+ # - modal__heading_modifiers - array of modifiers to add to the base classname of the modal heading.
+ # - modal__heading - Main heading and label of the modal when open.
+ #
+ # Available blocks:
+ # - modal__toggle - Content that triggers the modal.
+ # - modal__content - Content of the modal when open.
+ # - button_content - Content of the modals close button. Defaults to close icon.
+ #}
+
+{% set modal__base_class = 'modal' %}
+{% set modal__id = modal__id|default() %}
+{% set modal__modifiers = modal__modifiers|default([]) %}
+
+{% if modal__id is empty %}
+	{% set modal__id = random(100000) %}
+{% endif %}
+
+{% set modal__attributes = modal__attributes|default({
+  'class': bem(modal__base_class, modal__modifiers, modal__blockname),
+  'aria-modal': 'true',
+  'aria-expanded': 'false',
+}) %}
+
+{% set modal__pane_attributes = modal__pane_attributes|default({
+  'class': bem('pane', modal__modifiers, modal__base_class),
+  'tabindex': '-1',
+  'aria-hidden': 'true',
+  'aria-labelledby': modal__base_class ~ '-' ~ modal__id ~ '-label',
+  'aria-describedby': modal__base_class ~ '-' ~ modal__id ~ '-heading',
+  'role': 'dialog',
+}) %}
+
+{% set modal__heading_attributes = modal__heading_attributes|default({
+  'class': bem('title', [], modal__base_class),
+  'id': modal__base_class ~ '-' ~ modal__id ~ '-heading',
+}) %}
+
+{% set modal__toggle_attributes = modal__toggle_attributes|default({
+  'class': bem('toggle', [], modal__base_class),
+  'id': modal__base_class ~ '-' ~ modal__id ~ '-label',
+}) %}
+
+{% set modal__close_attributes = modal__close_attributes|default({
+  'class': bem('toggle', [], modal__base_class),
+  'aria-label': 'Close Modal',
+}) %}
+
+<div {{ add_attributes(modal__attributes) }}>
+  <div {{ add_attributes(modal__toggle_attributes) }}>
+    {% block modal__toggle %}
+      {% if modal__toggle is empty %}
+        {% include "@atoms/buttons/button.twig" with {
+          button_content: modal__toggle__content,
+        } %}
+        {% else %}
+          {{ modal__toggle }}
+      {% endif %}
+    {% endblock %}
+  </div>
+
+  <div {{ add_attributes(modal__pane_attributes) }}>
+
+    <div {{ bem('modal-heading', modal__modifiers, modal__base_class) }}>
+      {% include "@atoms/text/headings/_heading.twig" with {
+        heading_base_class: 'title',
+        heading_modifiers: modal__heading_modifiers,
+        heading_blockname: modal__base_class,
+        heading_level: 2,
+        heading: modal__heading,
+        heading__attributes: modal__heading_attributes,
+      } %}
+
+      {% embed "@atoms/buttons/button.twig" with {
+        button_attributes: modal__close_attributes,
+      } %}
+        {% block button_content %}
+          {% include "@atoms/images/icons/_icon.twig" with {
+            icon_name: 'close',
+          } %}
+        {% endblock %}
+      {% endembed %}
+    </div>
+
+    <div {{ bem('content', modal__modifiers, modal__base_class) }}>
+      {% block modal__content %}
+        {% include "@atoms/text/text/01-paragraph.twig" with {
+          paragraph_content: modal_content,
+        } %}
+      {% endblock %}
+    </div>
+  </div>
+  <div {{ bem('overlay', modal__modifiers, modal__base_class) }}></div>
+</div>
diff --git a/components/02-molecules/modal/modal.yml b/components/02-molecules/modal/modal.yml
new file mode 100644
index 00000000..1a067955
--- /dev/null
+++ b/components/02-molecules/modal/modal.yml
@@ -0,0 +1,4 @@
+modal__toggle__content: 'Show Modal'
+modal__heading: 'This is an example of a modal'
+modal__close__content: 'Close Modal'
+modal_content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor commodo magna nec iaculis. Duis ullamcorper sed lorem vehicula vulputate. Aenean condimentum augue libero, quis finibus libero hendrerit sit amet. Integer ullamcorper aliquet nisl, in ullamcorper augue ullamcorper sit amet. Quisque interdum nunc at egestas lobortis. Phasellus ante lorem, posuere id tortor eget, venenatis sagittis nunc. Aenean luctus tincidunt consequat. Donec vulputate, elit sit amet molestie pulvinar, eros lectus faucibus metus, id rutrum libero ipsum et leo. Curabitur egestas libero sit amet risus aliquet efficitur. Etiam suscipit posuere tortor. Pellentesque tincidunt justo quis quam aliquet varius. <a href="#" title="test-focus">Example link to test modal focus</a>'
diff --git a/images/icons/close.svg b/images/icons/close.svg
new file mode 100644
index 00000000..43c39b44
--- /dev/null
+++ b/images/icons/close.svg
@@ -0,0 +1 @@
+<svg height="329pt" viewBox="0 0 329.26933 329" width="329pt" xmlns="http://www.w3.org/2000/svg"><path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0"/></svg>
diff --git a/package-lock.json b/package-lock.json
index 5dfd7731..edc05266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
   "name": "compound",
-  "version": "1.0.0",
+  "version": "0.0.0-development",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "compound",
-      "version": "1.0.0",
+      "version": "0.0.0-development",
+      "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
         "@babel/eslint-parser": "^7.12.17",
@@ -21365,6 +21366,11 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/package.json b/package.json
index 273462e0..e7821804 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "prettier-fix": "prettier \"./components\" --write --ignore-unknown",
     "sass": "sass",
     "semantic-release": "semantic-release",
-    "storybook": "start-storybook --ci -s images,dist -p 6006",
-    "storybook:build": "npm run build && build-storybook -s images,dist -o .out",
+    "storybook": "start-storybook --ci -s ./dist,./images,./images/icons -p 6006",
+    "storybook:build": "npm run build && build-storybook -s ./dist,./images,./images/icons -o .out",
     "storybook:deploy": "storybook-to-ghpages -o .out",
     "test": "echo \"Error: no test specified\" && exit 1",
     "visreg": "percy storybook http://localhost:6006",
diff --git a/system.emulsify.json b/system.emulsify.json
index d4daa2bb..8f34a703 100644
--- a/system.emulsify.json
+++ b/system.emulsify.json
@@ -168,6 +168,11 @@
           "required": true,
           "dependency": ["images", "links", "lists"]
         },
+        {
+          "name": "modal",
+          "structure": "molecules",
+          "dependency": ["buttons", "text", "images"]
+        },
         {
           "name": "pager",
           "structure": "molecules",