diff --git a/web/avatars/edit-avatar-menu.css b/web/avatars/edit-avatar-menu.css
--- a/web/avatars/edit-avatar-menu.css
+++ b/web/avatars/edit-avatar-menu.css
@@ -7,16 +7,19 @@
   right: 0;
   width: 34px;
   height: 34px;
-  color: var(--fg);
-  background-color: var(--edit-avatar-button);
-  border: 2px solid var(--bg);
+  color: var(--button-label-primary-default);
+  background-color: var(--button-background-primary-default);
+  /* We want the border color of the edit avatar badge to always 
+  match the panel background color */
+  border: 2px solid var(--panel-background-primary-default);
   border-radius: 50%;
   cursor: pointer;
   transition-duration: 200ms;
 }
 
 .editAvatarBadge:hover {
-  filter: brightness(0.8);
+  background-color: var(--button-background-primary-hover);
+  color: var(--button-label-primary-hover);
 }
 
 input[type='file'] {
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,11 +1,16 @@
 .container {
+  flex: 1;
+  background-color: var(--panel-background-primary-default);
+}
+
+.contentContainer {
   padding: 40px;
   width: 456px;
   overflow-y: auto;
 }
 
 .header {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
   padding-bottom: 55px;
@@ -20,7 +25,7 @@
 }
 
 .content li {
-  color: var(--account-settings-label);
+  color: var(--text-background-tertiary-default);
   padding: 24px 16px 16px;
   display: flex;
   flex-direction: row;
@@ -28,26 +33,25 @@
 }
 
 .content li:not(:last-child) {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--separator-background-primary-default);
 }
 
 .logoutContainer {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--fg);
 }
 
 .logoutLabel {
-  color: var(--account-settings-label);
+  color: var(--text-background-tertiary-default);
 }
 
 .username {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
 }
 
 .buttonText {
-  color: var(--account-button-color);
+  color: var(--link-background-primary-default);
   line-height: var(--line-height-text);
 }
 
@@ -61,7 +65,7 @@
 }
 
 .editPasswordLink {
-  color: var(--account-settings-label);
+  color: var(--text-background-tertiary-default);
   cursor: pointer;
 }
 
@@ -70,7 +74,7 @@
 }
 
 .preferencesHeader {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
 }
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -106,35 +106,37 @@
 
   return (
     <div className={css.container}>
-      <h4 className={css.header}>My Account</h4>
-      <EditUserAvatar userID={currentUserInfo.id} />
-      <div className={css.content}>
-        <ul>
-          <li>
-            <p className={css.logoutContainer}>
-              <span className={css.logoutLabel}>{'Logged in as '}</span>
-              <span className={css.username}>{stringForUser}</span>
-            </p>
-            <Button variant="text" onClick={logOutUser}>
-              <p className={css.buttonText}>Log out</p>
-            </Button>
-          </li>
-          {changePasswordSection}
-          <li>
-            <span>Friend List</span>
-            <Button variant="text" onClick={openFriendList}>
-              <p className={css.buttonText}>See List</p>
-            </Button>
-          </li>
-          <li>
-            <span>Block List</span>
-            <Button variant="text" onClick={openBlockList}>
-              <p className={css.buttonText}>See List</p>
-            </Button>
-          </li>
-        </ul>
+      <div className={css.contentContainer}>
+        <h4 className={css.header}>My Account</h4>
+        <EditUserAvatar userID={currentUserInfo.id} />
+        <div className={css.content}>
+          <ul>
+            <li>
+              <p className={css.logoutContainer}>
+                <span className={css.logoutLabel}>{'Logged in as '}</span>
+                <span className={css.username}>{stringForUser}</span>
+              </p>
+              <Button variant="text" onClick={logOutUser}>
+                <p className={css.buttonText}>Log out</p>
+              </Button>
+            </li>
+            {changePasswordSection}
+            <li>
+              <span>Friend List</span>
+              <Button variant="text" onClick={openFriendList}>
+                <p className={css.buttonText}>See List</p>
+              </Button>
+            </li>
+            <li>
+              <span>Block List</span>
+              <Button variant="text" onClick={openBlockList}>
+                <p className={css.buttonText}>See List</p>
+              </Button>
+            </li>
+          </ul>
+        </div>
+        {preferences}
       </div>
-      {preferences}
     </div>
   );
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -225,7 +225,6 @@
   --pinned-count-text-color: var(--shades-white-90);
   --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
   --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
-  --edit-avatar-button: var(--violet-dark-60);
   --dropdown-text: var(--shades-white-100);
   --dropdown-select-bg: var(--shades-black-90);
   --dropdown-select-border: var(--shades-white-60);
@@ -243,3 +242,66 @@
   --modal-separator: var(--shades-black-80);
   --create-roles-text-color: var(--shades-white-100);
 }
+
+/* 
+  Hey Comm Devs! Below is the in progress work for introducing a new
+  color design system/light mode for our web app! We will be slowly 
+  migrating over to this new system over the next few months. At
+  this moment, if you are working on a new feature, please use the
+  new color system. 
+
+  If there is not a good color for your use case, please message
+  Ginsu and/or Ted and we can help you figure out what the best 
+  to do is.
+  
+  Also until this project is fully done, please add Ginsu as a reviewer
+  to any diff where we use the colors.
+
+  If you have any questions please message Ginsu or Ted.
+
+  Thanks :)
+*/
+
+/* Dark theme (default CSS theme) */
+:root {
+  /* Panel */
+  --panel-background-primary-default: var(--shades-black-100);
+
+  /* Text */
+  --text-background-primary-default: var(--shades-white-100);
+  --text-background-tertiary-default: var(--shades-black-60);
+
+  /* Button */
+  --button-background-primary-default: var(--violet-dark-100);
+  --button-background-primary-hover: var(--violet-dark-80);
+  --button-label-primary-default: var(--shades-white-100);
+  --button-label-primary-hover: var(--shades-white-90);
+
+  /* Link */
+  --link-background-primary-default: var(--violet-dark-100);
+
+  /* Separator */
+  --separator-background-primary-default: var(--shades-black-80);
+}
+
+/* Light theme */
+[data-theme='light'] {
+  /* Panel */
+  --panel-background-primary-default: var(--shades-white-100);
+
+  /* Text */
+  --text-background-primary-default: var(--shades-black-100);
+  --text-background-tertiary-default: var(--shades-black-60);
+
+  /* Button */
+  --button-background-primary-default: var(--violet-dark-100);
+  --button-background-primary-hover: var(--violet-dark-80);
+  --button-label-primary-default: var(--shades-white-100);
+  --button-label-primary-hover: var(--shades-white-90);
+
+  /* Link */
+  --link-background-primary-default: var(--violet-dark-100);
+
+  /* Separator */
+  --separator-background-primary-default: var(--shades-white-60);
+}