diff --git a/web/components/button.css b/web/components/button.css
index cd840f080..c4a4efa1f 100644
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -1,81 +1,82 @@
 .plain {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background: none;
   border: none;
 }
 
 /*
  * Changes to the height of the button component should be reflected in
  * the `chat-constants.js`component in the `editBoxBottomRowHeight`
  * variable as well.
  */
 .btn {
   --border-width: 1px;
   --border-radius: 8px;
 
   position: relative;
   font-size: var(--m-font-16);
   padding: 12px 24px;
   color: var(--fg);
   border: var(--border-width) solid transparent;
   border-radius: var(--border-radius);
 }
 
 .btn.outline {
-  border: var(--border-width) solid var(--btn-outline-border);
+  border: var(--border-width) solid var(--button-border-outline-default);
+  color: var(--text-background-secondary-default);
 }
 
 .btn > * {
   position: relative;
 }
 
 .btn::before {
   content: '';
   border: inherit;
   border-radius: inherit;
   background: inherit;
   position: absolute;
   top: calc(-1 * var(--border-width));
   left: calc(-1 * var(--border-width));
   width: 100%;
   height: 100%;
 }
 
 .btn.outline::before {
   top: 0;
   left: 0;
   border: none;
   border-radius: calc(var(--border-radius) - var(--border-width));
 }
 
 .btn:hover::before {
   transition-duration: 200ms;
   transition-property: filter;
 }
 
 .btn:hover:not(:disabled)::before {
   filter: brightness(0.8);
 }
 
 .btn.outline:hover:not(:disabled)::before {
   filter: brightness(2);
 }
 
 .btn:disabled {
   cursor: not-allowed;
   color: var(--button-label-primary-disabled);
 }
 
 .btn:not(.outline):disabled::before {
   background-color: var(--button-background-primary-disabled);
 }
 
 .text {
   font-size: var(--m-font-16);
   background: transparent;
   white-space: nowrap;
 }
diff --git a/web/components/button.react.js b/web/components/button.react.js
index 66d1fca27..0058b6287 100644
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -1,78 +1,78 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import css from './button.css';
 
 export type ButtonVariant = 'plain' | 'filled' | 'outline' | 'text';
 export type ButtonColor = {
   +backgroundColor?: string,
   +color?: string,
   +borderColor?: string,
 };
 
 export const buttonThemes: { [string]: ButtonColor } = {
   standard: {
     backgroundColor: 'var(--button-background-primary-default)',
   },
   danger: {
     backgroundColor: 'var(--btn-bg-danger)',
   },
   success: {
     backgroundColor: 'var(--btn-bg-success)',
   },
   outline: {
-    backgroundColor: 'var(--btn-bg-outline)',
+    backgroundColor: 'transparent',
   },
 };
 
 export type ButtonProps = {
   ...React.ElementConfig<'button'>,
   +variant?: ButtonVariant,
   +buttonColor?: ButtonColor,
 };
 
 function Button(props: ButtonProps): React.Node {
   const {
     variant = 'plain',
     buttonColor,
     children,
     type = 'button',
     className,
     ...buttonProps
   } = props;
 
   const btnCls = classnames(
     {
       [css.plain]: true,
       [css.btn]: variant === 'filled' || variant === 'outline',
       [css[variant]]: true,
     },
     className,
   );
 
   let style = {};
   if (buttonColor) {
     style = buttonColor;
   } else if (variant === 'outline') {
     style = buttonThemes.outline;
   } else if (variant === 'filled') {
     style = buttonThemes.standard;
   }
 
   const wrappedChildren = React.Children.map(children, (child: React.Node) => {
     if (typeof child === 'string' || typeof child === 'number') {
       return <span>{child}</span>;
     }
     return child;
   });
 
   return (
     <button {...buttonProps} type={type} className={btnCls} style={style}>
       {wrappedChildren}
     </button>
   );
 }
 
 export default Button;
diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css
index 71413201f..17a9e33c7 100644
--- a/web/invite-links/manage/manage-invite-links-modal.css
+++ b/web/invite-links/manage/manage-invite-links-modal.css
@@ -1,97 +1,97 @@
 .container {
   font-size: var(--m-font-16);
   padding: 24px 32px;
 }
 
 .sectionHeaderRow {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
 
 .sectionHeaderText {
   color: var(--text-background-primary-default);
   margin-bottom: 16px;
 }
 
 .description {
   font-size: var(--s-font-14);
   color: var(--text-background-primary-default);
   margin-top: 8px;
 }
 
 .inlineButton {
   display: inline;
   font-size: var(--s-font-14);
 }
 
 .editLinkContainer {
   display: flex;
   flex-direction: column;
   gap: 32px;
-  color: var(--modal-fg);
+  color: var(--text-background-secondary-default);
   font-size: var(--s-font-14);
 }
 
 .editLinkDescription {
   font-weight: var(--semi-bold);
-  color: var(--modal-fg);
+  color: var(--text-background-secondary-default);
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .editLinkDescription p {
   font-size: var(--s-font-14);
 }
 
 .separator {
-  border-color: var(--border-color);
+  border-color: var(--separator-background-primary-default);
   margin: 0;
 }
 
 .linkSection {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .linkRow {
   display: flex;
   font-size: var(--m-font-16);
   align-items: center;
   gap: 8px;
 }
 
 .buttonRow {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
 }
 
 .buttonRowWithError {
   margin-top: 8px;
 }
 
 .errorContainer {
   display: flex;
   justify-content: center;
   font-size: var(--s-font-14);
-  color: var(--error-primary);
+  color: var(--text-background-danger-default);
 }
 
 .disableLinkRow {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   font-size: var(--s-font-14);
 }
 
 .disableLinkButtons {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
diff --git a/web/theme.css b/web/theme.css
index ab199491b..b95c1a850 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,359 +1,361 @@
 :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-95: #0a0a0a;
   --shades-black-90: #191919;
   --shades-black-85: #1f1f1f;
   --shades-black-75: #404040;
   --shades-black-60: #666666;
   --shades-black-50: #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-95);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-50);
   --text-input-bg: var(--shades-black-75);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-75);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-85);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-75);
   --btn-disabled-color: var(--shades-black-50);
   --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-75);
   --thread-active-bg: var(--shades-black-75);
   --chat-timestamp-color: var(--shades-black-50);
   --tool-tip-bg: var(--shades-black-75);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-75);
   --calendar-chevron: var(--shades-black-50);
   --calendar-day-bg: var(--shades-black-50);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-85);
   --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-75);
   --community-creation-ancestry-bg: var(--shades-black-75);
   --community-creation-ancestry-text: var(--shades-black-50);
   --community-creation-form-notice: var(--shades-white-60);
   --community-creation-keyserver-container: var(--shades-black-95);
   --modal-bg: var(--shades-black-85);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-85);
   --help-color: var(--shades-black-50);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-50);
   --thread-color-read: var(--shades-black-50);
   --thread-preview-secondary: var(--shades-black-60);
   --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-95);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-search-button-color: var(--shades-black-50);
   --thread-ancestor-keyserver-border: var(--shades-black-60);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-75);
   --message-action-tooltip-bg: var(--shades-black-85);
   --message-action-tooltip-bg-light: var(--shades-black-75);
   --menu-bg: var(--shades-black-85);
   --menu-bg-light: var(--shades-black-75);
   --menu-separator-color: var(--shades-black-75);
   --menu-color: var(--shades-black-50);
   --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-50);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --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-75);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-85);
   --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-50);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-75);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-60);
   --members-modal-member-text: var(--shades-black-50);
   --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-75);
   --label-grey-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-50);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-75);
   --relationship-modal-color: var(--shades-black-50);
   --arrow-extension-color: var(--shades-black-50);
   --modal-close-color: var(--shades-black-50);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-50);
   --add-members-item-color: var(--shades-black-50);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-75);
   --add-members-item-disabled-color-hover: var(--shades-black-50);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-60);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-75);
   --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-75);
   --notification-settings-option-invalid-selected-color: var(--shades-black-50);
   --thread-creation-search-container-bg: var(--shades-black-85);
   --thread-creation-close-search-color: var(--shades-black-50);
   --thread-creation-search-item-bg-hover: var(--shades-black-75);
   --thread-creation-search-item-info-color: var(--shades-black-50);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-50);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-60);
   --inline-engagement-bg-hover: var(--shades-black-75);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-50);
   --compose-subchannel-header-bg: var(--shades-black-75);
   --compose-subchannel-label-color: var(--shades-black-50);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-60);
   --typeahead-overlay-light: var(--shades-black-75);
   --typeahead-overlay-dark: var(--shades-black-85);
   --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-50);
   --drawer-expand-button-disabled: var(--shades-black-75);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: var(--shades-black-90);
   --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-85);
   --filters-button-bg: var(--shades-black-95);
   --filters-button-border: var(--shades-black-75);
   --filters-button-hover-bg: var(--shades-black-85);
   --filter-panel-fg: var(--shades-black-50);
   --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-75);
   --topbar-button-fg: var(--shades-white-60);
   --message-label-color: var(--shades-black-50);
   --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-75);
   --pinned-count-banner-color: var(--shades-black-85);
   --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);
   --dropdown-text: var(--shades-white-100);
   --dropdown-select-bg: var(--shades-black-85);
   --dropdown-select-border: var(--shades-white-60);
   --dropdown-option-bg: var(--shades-black-75);
   --dropdown-option-hover-bg: var(--shades-black-60);
   --dropdown-selected-option-check-color: var(--violet-dark-100);
   --dropdown-chevron-color: var(--shades-white-100);
   --dropdown-disabled-color: var(--shades-black-50);
   --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-75);
   --unsaved-changes-modal-text-color: var(--shades-white-60);
   --modal-secondary-label: var(--shades-black-50);
   --community-roles-text-color: var(--shades-white-100);
   --modal-separator: var(--shades-black-75);
   --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-95);
 
   /* Text */
   --text-background-primary-default: var(--shades-white-100);
   --text-background-secondary-default: var(--shades-white-60);
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
   --button-background-primary-disabled: var(--shades-black-75);
+  --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-black-75);
 
   /* Modal */
   --modal-background-primary-default: var(--shades-black-85);
   --modal-background-secondary-default: var(--shades-black-90);
   --modal-header-primary-default: var(--shades-white-100);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-white-100);
   --modal-listItem-primary-hover: var(--shades-black-90);
 
   /* Input Field */
   --inputField-background-primary-default: var(--shades-black-85);
   --inputField-background-secondary-default: var(--shades-black-75);
   --inputField-label-primary-default: var(--shades-white-100);
   --inputField-label-secondary-default: var(--shades-black-50);
   --inputField-border-primary-default: var(--shades-black-75);
   --inputField-clearBackground-primary-default: var(--shades-black-60);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
 
   /* Status Indicator */
   --statusIndicator-background-outer-active: var(--success-dark-90);
   --statusIndicator-background-outer-inactive: var(--error-dark-90);
   --statusIndicator-background-inner-active: var(--success-primary);
   --statusIndicator-background-inner-inactive: var(--error-primary);
 }
 
 /* Light theme */
 [data-theme='light'] {
   /* Panel */
   --panel-background-primary-default: var(--shades-white-100);
 
   /* Text */
   --text-background-primary-default: var(--shades-black-95);
   --text-background-secondary-default: var(--shades-black-60);
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
   --button-background-primary-disabled: var(--shades-white-60);
+  --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-90);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-white-60);
 
   /* Modal */
   --modal-background-primary-default: var(--shades-white-100);
   --modal-background-secondary-default: var(--shades-white-80);
   --modal-header-primary-default: var(--shades-black-95);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-black-95);
   --modal-listItem-primary-hover: var(--shades-white-70);
 
   /* Input Field */
   --inputField-background-primary-default: var(--shades-white-100);
   --inputField-background-secondary-default: var(--shades-white-60);
   --inputField-label-primary-default: var(--shades-black-95);
   --inputField-label-secondary-default: var(--shades-black-60);
   --inputField-border-primary-default: var(--shades-white-60);
   --inputField-clearBackground-primary-default: var(--shades-black-50);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
 
   /* Status Indicator */
   --statusIndicator-background-outer-active: var(--success-dark-50);
   --statusIndicator-background-outer-inactive: var(--error-dark-50);
   --statusIndicator-background-inner-active: var(--success-primary);
   --statusIndicator-background-inner-inactive: var(--error-primary);
 }