diff --git a/web/avatars/edit-avatar-menu.css b/web/avatars/edit-avatar-menu.css
index 30938ff2f..4f86168de 100644
--- a/web/avatars/edit-avatar-menu.css
+++ b/web/avatars/edit-avatar-menu.css
@@ -1,24 +1,27 @@
 .editAvatarBadge {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   bottom: 0;
   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'] {
   display: none;
 }
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
index 95b90ec80..78ce600d3 100644
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,76 +1,80 @@
 .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;
 }
 
 .content {
   margin-top: 32px;
 }
 
 .content ul {
   list-style-type: none;
 }
 
 .content li {
-  color: var(--account-settings-label);
+  color: var(--text-background-tertiary-default);
   padding: 24px 16px 16px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .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);
 }
 
 .passwordContainer {
   display: flex;
 }
 
 .password {
   align-items: center;
   padding-right: 16px;
 }
 
 .editPasswordLink {
-  color: var(--account-settings-label);
+  color: var(--text-background-tertiary-default);
   cursor: pointer;
 }
 
 .preferencesContainer {
   padding-top: 24px;
 }
 
 .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
index cbaa48529..68191947f 100644
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -1,142 +1,144 @@
 // @flow
 
 import * as React from 'react';
 
 import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 
 import css from './account-settings.css';
 import AppearanceChangeModal from './appearance-change-modal.react.js';
 import PasswordChangeModal from './password-change-modal.js';
 import BlockListModal from './relationship/block-list-modal.react.js';
 import FriendListModal from './relationship/friend-list-modal.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Button from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useServerCall(logOut);
   const preRequestUserState = useSelector(preRequestUserStateSelector);
   const dispatchActionPromise = useDispatchActionPromise();
   const logOutUser = React.useCallback(
     () =>
       dispatchActionPromise(
         logOutActionTypes,
         sendLogoutRequest(preRequestUserState),
       ),
     [dispatchActionPromise, preRequestUserState, sendLogoutRequest],
   );
 
   const { pushModal, popModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
     () => pushModal(<PasswordChangeModal />),
     [pushModal],
   );
 
   const openFriendList = React.useCallback(
     () => pushModal(<FriendListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const openBlockList = React.useCallback(
     () => pushModal(<BlockListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const isAccountWithPassword = useSelector(state =>
     accountHasPassword(state.currentUserInfo),
   );
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
   const staffCanSee = useStaffCanSee();
 
   const showAppearanceModal = React.useCallback(
     () => pushModal(<AppearanceChangeModal />),
     [pushModal],
   );
 
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
 
   let changePasswordSection;
   if (isAccountWithPassword) {
     changePasswordSection = (
       <li>
         <span>Password</span>
         <span className={css.passwordContainer}>
           <span className={css.password}>******</span>
           <a className={css.editPasswordLink} onClick={showPasswordChangeModal}>
             <SWMansionIcon icon="edit-1" size={22} />
           </a>
         </span>
       </li>
     );
   }
 
   let preferences;
   if (staffCanSee) {
     preferences = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Preferences</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Appearance</span>
               <a className={css.editPasswordLink} onClick={showAppearanceModal}>
                 <SWMansionIcon icon="edit-1" size={22} />
               </a>
             </li>
           </ul>
         </div>
       </div>
     );
   }
 
   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>
   );
 }
 
 export default AccountSettings;
diff --git a/web/theme.css b/web/theme.css
index 3a8ec088d..ccf38ba31 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,245 +1,307 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --community-creation-btn-bg: var(--shades-black-80);
   --community-creation-ancestry-bg: var(--shades-black-80);
   --community-creation-ancestry-text: var(--shades-black-60);
   --community-creation-form-notice: var(--shades-white-60);
   --community-creation-keyserver-container: var(--shades-black-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-search-button-color: var(--shades-black-60);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --label-grey-bg: var(--shades-black-80);
   --label-grey-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-90);
   --filters-button-bg: var(--shades-black-100);
   --filters-button-border: var(--shades-black-80);
   --filters-button-hover-bg: var(--shades-black-90);
   --filter-panel-fg: var(--shades-black-60);
   --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-80);
   --topbar-button-fg: var(--shades-white-60);
   --message-label-color: var(--shades-black-60);
   --topbar-lines: rgba(255, 255, 255, 0.08);
   --pin-message-information-text-color: var(--shades-white-60);
   --pin-message-modal-border-color: var(--shades-black-80);
   --pinned-count-banner-color: var(--shades-black-90);
   --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);
   --dropdown-option-bg: var(--shades-black-80);
   --dropdown-option-hover-bg: var(--shades-black-70);
   --dropdown-selected-option-check-color: var(--violet-dark-100);
   --dropdown-chevron-color: var(--shades-white-100);
   --dropdown-disabled-color: var(--shades-black-60);
   --change-member-role-modal-description-text: var(--shades-white-60);
   --change-member-role-modal-generic-text: var(--shades-white-100);
   --change-member-role-modal-disabled-background: var(--shades-black-80);
   --unsaved-changes-modal-text-color: var(--shades-white-60);
   --modal-secondary-label: var(--shades-black-60);
   --community-roles-text-color: var(--shades-white-100);
   --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);
+}