diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index 5d1d11bdc..cab1bc20a 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -1,4 +1,15 @@
 // Colors
+$font-light: 300;
+$font-medium: 400;
+$inner-box-width: 25rem;
+$inner-box-width-state: 35rem;
+$color-blue: #2c7cc7;
+$color-blue-dark: #11385b;
+$color-blue-headings: $color-blue-dark;
+$color-blue-light: #ecf2f8;
+$color-grey: #e1e2e4;
+$color-grey-dark: #4b4b4d;
+$theme-color-base-family: #dcdee0;
 $light-gray: #cddbee;
 $gray: #808080;
 $dark-cool-gray: #565c65;
@@ -9,3 +20,6 @@ $color-blue-dark: #11385b;
 $color-blue-headings: $color-blue-dark;
 $deep-blue: #002f6c;
 $blue-black: #1a3857;
+
+// Measurements
+$logo-width: 130px;
diff --git a/assets/styles/component/accordion.scss b/assets/styles/component/accordion.scss
index 68e9292e6..17f9e9643 100644
--- a/assets/styles/component/accordion.scss
+++ b/assets/styles/component/accordion.scss
@@ -58,3 +58,8 @@
 .homepage-acc {
   padding-top: 50px;
 }
+
+.content-heading {
+  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+  font-weight: normal;
+}
diff --git a/assets/styles/component/alert.scss b/assets/styles/component/alert.scss
new file mode 100644
index 000000000..e73e3b708
--- /dev/null
+++ b/assets/styles/component/alert.scss
@@ -0,0 +1,46 @@
+@use 'uswds-core' as *;
+@use '../mixins' as *;
+
+.usa-alert {
+  padding: 0;
+  margin-top: 0;
+  border-left: 0.5rem solid #00bde3;
+}
+
+[dir="rtl"] .usa-alert {
+  border-right: 0.5rem solid #00bde3;
+  border-left: 0;
+}
+
+.usa-alert--info:before {
+  display: none;
+}
+
+.usa-alert--info {
+  background-image: unset;
+  background-color: #e7f6f8;
+  border: 0;
+}
+
+[dir="rtl"] .usa-alert--info {
+  .grid-container {
+    background-position: calc(100% - 1rem) 1rem;
+
+    @include at-media('tablet') {
+      background-position: calc(100% - 1rem) 0.3rem;
+    }
+  }
+}
+
+.usa-alert--info .usa-alert__body {
+  padding-left: 2.5rem;
+
+  &:before {
+    left: -0.5rem;
+  }
+}
+
+.usa-alert__text:only-child {
+  margin-bottom: 0.5rem;
+  padding: 0.75rem 0 0.25rem;
+}
diff --git a/assets/styles/component/button.scss b/assets/styles/component/button.scss
deleted file mode 100644
index 3b37152c8..000000000
--- a/assets/styles/component/button.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use 'uswds-core' as *;
-
-@forward 'usa-button';
-
-.usa-button {
-  .page-type--basic & {
-    margin-top: 1rem;
-    margin-bottom: 3rem;
-  }
-}
diff --git a/assets/styles/component/buttons.scss b/assets/styles/component/buttons.scss
new file mode 100644
index 000000000..bdc474c3c
--- /dev/null
+++ b/assets/styles/component/buttons.scss
@@ -0,0 +1,49 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+
+@forward 'usa-button';
+
+.usa-button {
+  background-color: $color-blue-dark;
+  color: white;
+  margin-right: 0;
+
+  .page-type--basic & {
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+  }
+}
+
+.usa-button:hover,
+.usa-button.usa-button--hover {
+  color: white;
+  background-color: $color-grey-dark;
+  border-bottom: 0;
+  text-decoration: none;
+}
+
+//"Go back" arrow button and text
+.arrow {
+  border: solid $color-blue-dark;
+  border-width: 0 4px 4px 0;
+  display: inline-block;
+  padding: 4px;
+}
+
+.direction {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+  margin-right: 5px;
+}
+
+[dir="rtl"] .direction {
+  transform: rotate(315deg);
+  -webkit-transform: rotate(315deg);
+  margin-left: 5px;
+}
+
+.arrow-text a {
+  color: $color-blue-dark;
+  text-decoration: underline;
+  font-weight: 700;
+}
diff --git a/assets/styles/component/header.scss b/assets/styles/component/header.scss
new file mode 100644
index 000000000..c28b94b86
--- /dev/null
+++ b/assets/styles/component/header.scss
@@ -0,0 +1,24 @@
+.usa-header .usa-alert--info {
+  margin-top: 0;
+}
+
+.banner__text-container {
+  flex: 1;
+}
+
+.usa-banner__header {
+  padding-right: 0.5rem;
+}
+
+.usa-banner__icon {
+  margin-left: 0.3rem;
+}
+
+.usa-banner__button {
+  margin-right: 0.5rem;
+}
+
+[dir="rtl"] .usa-banner__header-flag {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
diff --git a/assets/styles/component/hero.scss b/assets/styles/component/hero.scss
new file mode 100644
index 000000000..7083cb662
--- /dev/null
+++ b/assets/styles/component/hero.scss
@@ -0,0 +1,87 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+@use 'sass:math';
+
+.css-arrow {
+  position: relative;
+
+  &:after {
+    $arrow-width: 100px;
+    $arrow-height: 30px;
+    $arrow-half-width: math.div($arrow-width, 2);
+    content: "";
+    position: absolute;
+    left: calc(50% - #{$arrow-half-width});
+    bottom: -$arrow-height;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: $arrow-height+1 $arrow-half-width 0 $arrow-half-width;
+    border-color: $color-blue transparent transparent transparent;
+
+    @include at-media('tablet') {
+      content: none;
+    }
+  }
+}
+
+.site-logo {
+  display: block;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+
+  svg .ballot {
+    transform: translateY(-4px);
+    transition: transform 200ms;
+  }
+
+  &:hover,
+  &:focus {
+    svg .ballot {
+      transform: translateY(0);
+    }
+  }
+
+  #SiteLogo {
+    width: $logo-width;
+    max-width: unset;
+    margin: auto;
+    display: block;
+  }
+
+  @include at-media('mobile') {
+    #SiteLogo {
+      padding: 10px 0 10px;
+    }
+  }
+
+  .logo-text {
+    font-weight: bold;
+    font-size: 1.6em;
+    margin-top: 20px;
+  }
+
+  @include at-media('tablet') {
+    #SiteLogo {
+      position: absolute;
+      bottom: $logo-width * -0.32 + 1;
+      right: calc(50% - #{math.div($logo-width, 2)});
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .logo-text {
+      margin: 40px 0 140px;
+    }
+  }
+}
+
+.align-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+}
diff --git a/assets/styles/component/identifier.scss b/assets/styles/component/identifier.scss
index 6383a1b3b..6138c4112 100644
--- a/assets/styles/component/identifier.scss
+++ b/assets/styles/component/identifier.scss
@@ -12,8 +12,8 @@
     padding-bottom: 4rem;
   }
 
-  > .grid-container {
-    > * + * {
+  >.grid-container {
+    >* + * {
       margin-top: 40px;
     }
   }
@@ -34,7 +34,7 @@
     }
 
     @include at-media('tablet') {
-      + li {
+      +li {
         padding-top: 20px;
       }
     }
diff --git a/assets/styles/component/sign-up.scss b/assets/styles/component/sign-up.scss
new file mode 100644
index 000000000..9a806b5e6
--- /dev/null
+++ b/assets/styles/component/sign-up.scss
@@ -0,0 +1,7 @@
+p,
+label#emailsub,
+.registered-resources li,
+.updated-date {
+  font-size: 1.06rem;
+  line-height: 1.3rem;
+}
diff --git a/assets/styles/global/colors.scss b/assets/styles/global/colors.scss
new file mode 100644
index 000000000..77a559373
--- /dev/null
+++ b/assets/styles/global/colors.scss
@@ -0,0 +1,19 @@
+@use '../variables' as *;
+
+.bg-blue {
+  background: $color-blue;
+  color: white;
+}
+
+.bg-lightblue {
+  background: $color-blue-light;
+  color: $color-blue-dark;
+}
+
+.bg-grey {
+  background: $color-grey;
+}
+
+.bg-darkblue {
+  background-color: $color-blue-dark;
+}
diff --git a/assets/styles/global/layout.scss b/assets/styles/global/layout.scss
new file mode 100644
index 000000000..c36a8a085
--- /dev/null
+++ b/assets/styles/global/layout.scss
@@ -0,0 +1,27 @@
+@use 'uswds-core' as *;
+@use '../mixins' as *;
+
+.registered-resources li {
+  margin-bottom: 6px;
+}
+
+.right-shift {
+  /*
+  move the whole content on the right about 40 pixels to the right
+  (this is due to the spanish logo text being so close to the content on the right)
+  */
+  @include at-media('tablet') {
+    padding-left: 3rem !important;
+  }
+}
+
+.max-width-input {
+  display: inline-block;
+  max-width: 25rem;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+label.max-width-input {
+  margin-bottom: 0;
+}
diff --git a/assets/styles/global/media.scss b/assets/styles/global/media.scss
new file mode 100644
index 000000000..4b253cebe
--- /dev/null
+++ b/assets/styles/global/media.scss
@@ -0,0 +1,12 @@
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.ext-link {
+  white-space: nowrap;
+
+  svg {
+    margin-left: 0.2ex;
+  }
+}
diff --git a/assets/styles/global/typography.scss b/assets/styles/global/typography.scss
new file mode 100644
index 000000000..a22ba9de6
--- /dev/null
+++ b/assets/styles/global/typography.scss
@@ -0,0 +1,29 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.bold-text {
+  font-weight: bold;
+}
+
+.text-blue {
+  color: $color-blue-headings;
+}
+
+.text-grey {
+  color: $color-grey-dark;
+}
+
+.font-size-medium {
+  font-size: 1.3em;
+}
+
+.main-heading {
+  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+
+  @include at-media-max(tablet-lg) {
+    span[hidden] {
+      display: inline;
+    }
+  }
+}
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 64d3d8efb..5937285aa 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,9 +1,7 @@
 // Imports -------------- //
-@use 'uswds-core' as * with (
-  $theme-show-compile-warnings: false,
-  $theme-show-notifications: false,
+@use 'uswds-core' as * with ($theme-show-compile-warnings: false,
+$theme-show-notifications: false,
 );
-@use 'sass:math';
 
 @forward "uswds-core";
 @forward "uswds-global";
@@ -25,382 +23,17 @@
 @forward 'component/contact';
 @forward 'component/accordion';
 @forward 'component/search';
-@forward 'component/button';
-
-// Variables ------------ //
-
-$font-light: 300;
-$font-medium: 400;
-$inner-box-width: 25rem;
-$inner-box-width-state: 35rem;
-$color-blue: #2c7cc7;
-$color-blue-dark: #11385b;
-$color-blue-headings: $color-blue-dark;
-$color-blue-light: #ecf2f8;
-$color-grey: #e1e2e4;
-$color-grey-dark: #4b4b4d;
-$theme-color-base-family: #dcdee0;
-
-p,
-label#emailsub,
-.registered-resources li,
-.updated-date {
-  font-size: 1.06rem;
-  line-height: 1.3rem;
-}
-
-svg {
-  max-width: 100%;
-  height: auto;
-}
-
-.bg-blue {
-  background: $color-blue;
-  color: white;
-}
-
-.bold-text {
-  font-weight: bold;
-}
-
-.bg-lightblue {
-  background: $color-blue-light;
-  color: $color-blue-dark;
-}
-
-.bg-grey {
-  background: $color-grey;
-}
-
-.bg-darkblue {
-  background-color: $color-blue-dark;
-}
-
-.text-blue {
-  color: $color-blue-headings;
-}
-
-.text-grey {
-  color: $color-grey-dark;
-}
-
-.font-size-medium {
-  font-size: 1.3em;
-}
-
-.max-width-input {
-  display: inline-block;
-  max-width: 25rem;
-  width: 100%;
-  margin-bottom: 1rem;
-}
-
-label.max-width-input {
-  margin-bottom: 0;
-}
-
-.align-bottom {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  height: 100%;
-}
-
-.align-center {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  height: 70%;
-}
-
-.right-shift {
-  /*
-  move the whole content on the right about 40 pixels to the right
-  (this is due to the spanish logo text being so close to the content on the right)
-  */
-  @include at-media('tablet') {
-    padding-left: 3rem !important;
-  }
-}
-
-.css-arrow {
-  position: relative;
-
-  &:after {
-    $arrow-width: 100px;
-    $arrow-height: 30px;
-    $arrow-half-width: math.div($arrow-width, 2);
-    content: "";
-    position: absolute;
-    left: calc(50% - #{$arrow-half-width});
-    bottom: -$arrow-height;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: $arrow-height+1 $arrow-half-width 0 $arrow-half-width;
-    border-color: $color-blue transparent transparent transparent;
-    @include at-media('tablet') {
-      content: none;
-    }
-  }
-}
-
-.arrow {
-  border: solid $color-blue-dark;
-  border-width: 0 4px 4px 0;
-  display: inline-block;
-  padding: 4px;
-}
-
-.direction {
-  transform: rotate(135deg);
-  -webkit-transform: rotate(135deg);
-  margin-right: 5px;
-}
-
-[dir="rtl"] .direction {
-  transform: rotate(315deg);
-  -webkit-transform: rotate(315deg);
-  margin-left: 5px;
-}
-
-.arrow-text a {
-  color: $color-blue-dark;
-  text-decoration: underline;
-  font-weight: 700;
-}
-
-.usa-button {
-  background-color: $color-blue-dark;
-  color: white;
-  margin-right: 0;
-}
-
-.usa-button:hover,
-.usa-button.usa-button--hover {
-  color: white;
-  background-color: $color-grey-dark;
-  border-bottom: 0;
-  text-decoration: none;
-}
-
-.banner__text-container {
-  flex: 1;
-}
-
-.usa-banner__header {
-  padding-right: 0.5rem;
-}
-
-.usa-banner__icon {
-  margin-left: 0.3rem;
-}
-
-.usa-banner__button {
-  margin-right: 0.3rem;
-}
-
-.usa-alert {
-  margin-top: 0;
-}
-
-.usa-alert--info {
-  border: 0;  
-}
-
-.usa-alert--info .usa-alert__body {
-  padding-left: 2rem;
-}
-
-.usa-alert--warning .usa-alert__body {
-  padding: 0 2.5rem;
-  line-height: initial;
-}
-
-.usa-alert__text:only-child {
-  margin-bottom: 0.5rem;
-  padding: 0.75rem 0 0.25rem;
-}
-
-.usa-alert--info .usa-alert__body::before {
-  left: -0.5rem;
-}
-
-[dir="rtl"] .usa-banner__header-flag {
-  margin-left: 0.5rem;
-  margin-right: 0;
-}
-
-.form-register {
-  margin-bottom: 2rem;
-
-  h2 {
-    margin: 0;
-  }
-}
-
-$logo-width: 130px;
-
-.site-logo {
-  display: block;
-  color: white;
-  text-decoration: none;
-  text-align: center;
-
-  svg .ballot {
-    transform: translateY(-4px);
-    transition: transform 200ms;
-  }
-
-  &:hover,
-  &:focus {
-    svg .ballot {
-      transform: translateY(0);
-    }
-  }
-
-  #SiteLogo {
-    width: $logo-width;
-    max-width: unset;
-    margin: auto;
-    display: block;
-  }
-
-  @include at-media('mobile') {
-    #SiteLogo {
-      padding: 10px 0 10px;
-    }
-  }
-
-  .logo-text {
-    font-weight: bold;
-    font-size: 1.6em;
-    margin-top: 20px;
-  }
-
-  @include at-media('tablet') {
-    #SiteLogo {
-      position: absolute;
-      bottom: $logo-width * -0.32 + 1;
-      right: calc(50% - #{math.div($logo-width, 2)});
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .logo-text {
-      margin: 40px 0 140px;
-    }
-  }
-}
-
-.page-vote {
-  min-height: 100%;
-  min-width: 100%;
-  
-  .site-logo {
-    color: white;
-    text-decoration: none;
-    text-align: center;
-
-    #SiteLogo {
-      width: $logo-width;
-    }
-
-    .logo-text {
-      margin: 20px 0 15px;
-    }
-
-    @include at-media('tablet') {
-      $logo-width: 200px;
-
-      #SiteLogo {
-        width: $logo-width;
-        bottom: $logo-width * -0.32 + 1;
-        right: calc(50% - #{math.div($logo-width, 2)});
-      }
-
-      .logo-text {
-        margin: 120px 0 200px;
-      }
-    }
-  }
-
-  .main-heading {
-    font-size: 2em;
-  }
-}
-
-.main-heading {
-  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
-
-  @include at-media-max(tablet-lg) {
-    span[hidden] {
-      display: inline;
-    }
-  }
-}
-
-.content-heading {
-  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
-  font-weight: normal;
-}
-
-.registered {
-  color: $color-blue-dark;
-  margin: 60px 0 60px;
-
-  h2 {
-    font-size: 2em;
-  }
-
-  a {
-    color: $color-blue-dark;
-  }
-}
-
-.registered-resources li {
-  margin-bottom: 6px;
-}
-
-.voter-resources p {
-  font-size: 1.3em;
-  font-weight: bold;
-}
-
-.voter-info {
-  color: $color-blue-dark;
-  margin-bottom: 60px;
-  margin-top: 40px;
-
-  a {
-    color: $color-blue-dark;
-  }
-
-  h1 {
-    color: $color-blue-headings;
-  }
-
-  h2 {
-    color: $color-blue-headings;
-    margin-bottom: 0.5em;
-    margin-top: 30px;
-  }
-
-  p {
-    margin-bottom: 1em;
-    margin-top: 0;
-  }
-}
-
-.usa-prose .usa-collection__item {
-  border-top: 0;
-}
-
-.ext-link {
-  white-space: nowrap;
-
-  svg {
-    margin-left: 0.2ex;
-  }
-}
+@forward 'component/alert';
+@forward 'component/sign-up';
+@forward 'component/buttons';
+@forward 'component/header';
+@forward 'component/hero';
+
+@forward 'pages/homepage';
+@forward 'pages/state-page';
+@forward 'pages/basic-page';
+
+@forward 'global/colors';
+@forward 'global/typography';
+@forward 'global/media';
+@forward 'global/layout';
diff --git a/assets/styles/pages/basic-page.scss b/assets/styles/pages/basic-page.scss
new file mode 100644
index 000000000..37861e597
--- /dev/null
+++ b/assets/styles/pages/basic-page.scss
@@ -0,0 +1,10 @@
+.usa-prose .usa-collection__item {
+  border-top: 0;
+}
+
+.align-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 70%;
+}
diff --git a/assets/styles/pages/homepage.scss b/assets/styles/pages/homepage.scss
new file mode 100644
index 000000000..47501147e
--- /dev/null
+++ b/assets/styles/pages/homepage.scss
@@ -0,0 +1,62 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+@use 'sass:math';
+
+.page-vote {
+  min-height: 100%;
+  min-width: 100%;
+
+  .site-logo {
+    color: white;
+    text-decoration: none;
+    text-align: center;
+
+    #SiteLogo {
+      width: $logo-width;
+    }
+
+    .logo-text {
+      margin: 20px 0 15px;
+    }
+
+    @include at-media('tablet') {
+      $logo-width: 200px;
+
+      #SiteLogo {
+        width: $logo-width;
+        bottom: $logo-width * -0.32 + 1;
+        right: calc(50% - #{math.div($logo-width, 2)});
+      }
+
+      .logo-text {
+        margin: 120px 0 200px;
+      }
+    }
+  }
+
+  .main-heading {
+    font-size: 2em;
+  }
+}
+
+.form-register {
+  margin-bottom: 2rem;
+
+  h2 {
+    margin: 0;
+  }
+}
+
+.registered {
+  color: $color-blue-dark;
+  margin: 60px 0 60px;
+
+  h2 {
+    font-size: 2em;
+  }
+
+  a {
+    color: $color-blue-dark;
+  }
+}
diff --git a/assets/styles/pages/state-page.scss b/assets/styles/pages/state-page.scss
new file mode 100644
index 000000000..243409be3
--- /dev/null
+++ b/assets/styles/pages/state-page.scss
@@ -0,0 +1,26 @@
+@use '../variables' as *;
+
+.voter-info {
+  color: $color-blue-dark;
+  margin-bottom: 60px;
+  margin-top: 40px;
+
+  a {
+    color: $color-blue-dark;
+  }
+
+  h1 {
+    color: $color-blue-headings;
+  }
+
+  h2 {
+    color: $color-blue-headings;
+    margin-bottom: 0.5em;
+    margin-top: 30px;
+  }
+
+  p {
+    margin-bottom: 1em;
+    margin-top: 0;
+  }
+}