diff --git a/src/scss/base.scss b/src/scss/base.scss
index 2fb926f..201f55f 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -61,6 +61,9 @@
     var(--container-spacing-left-safe);
   --welcome-headings-text-align: center;
 
+  --modal-width: 100%;
+  --modal-border: 0.25rem solid var(--color-modal-border);
+
   --navigation-flow: row nowrap;
   --navigation-justify: space-evenly;
   --navigation-align: center;
@@ -130,7 +133,12 @@
   --color-background: var(--theme-c-antique-white);
   --color-background-body: var(--theme-c-desert-sand);
 
-  --color-border: var(--theme-c-crystal-blue);
+  --color-modal-background: var(--theme-c-desert-sand);
+  --color-modal-border: var(--theme-c-walnut-brown);
+
+  --color-button: var(--theme-c-walnut-brown);
+  --color-button-box-shadow: var(--theme-c-deep-oak);
+  --color-button-text: var(--theme-c-text-dark);
 
   --color-heading: var(--theme-c-text-light);
   --color-text: var(--theme-c-text-light);
@@ -169,6 +177,13 @@
     --color-background: var(--theme-c-dark-grey-blue);
     --color-background-body: var(--theme-c-deep-oak);
 
+    --color-modal-background: var(--theme-c-deep-oak);
+    --color-modal-border: var(--theme-c-antique-white);
+
+    --color-button: var(--theme-c-antique-white);
+    --color-button-box-shadow: var(--theme-c-desert-sand);
+    --color-button-text: var(--theme-c-text-light);
+
     --color-heading: var(--theme-c-text-dark);
     --color-text: var(--theme-c-text-dark);
     --color-link-text: var(--theme-c-text-dark);
@@ -200,6 +215,7 @@
     --table-cell-padding: 0.5rem 1rem;
     --font-size: 20px;
     --timeline-circle-size: 4rem;
+    --modal-width: 30rem;
   }
 }