From ae72e5cf3f94360637135984db1ef6cbf0293858 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 30 Apr 2026 14:13:56 +0200
Subject: [PATCH] Change color palette

---
 .../answer-compatibility-question-content.tsx |  4 +-
 .../compatibility-questions-display.tsx       |  4 +-
 .../answers/free-response-display.tsx         |  2 +-
 web/components/bio/profile-bio-block.tsx      |  2 +-
 web/components/browse-matches-button.tsx      |  2 +-
 .../buttons/confirmation-button.tsx           |  2 +-
 .../buttons/more-options-user-button.tsx      |  2 +-
 web/components/buttons/report-button.tsx      |  2 +-
 web/components/chat/chat-message.tsx          |  2 +-
 .../comments/dropdown-button-menu.tsx         |  2 +-
 web/components/comments/dropdown-menu.tsx     |  2 +-
 web/components/compatibility/sort-widget.tsx  |  2 +-
 web/components/editor/embed-modal.tsx         |  2 +-
 web/components/editor/emoji/emoji-list.tsx    |  2 +-
 .../editor/user-mention/mention-list.tsx      |  2 +-
 web/components/events/event-card.tsx          |  2 +-
 web/components/filters/card-size-selector.tsx |  2 +-
 web/components/filters/field-toggles.tsx      |  2 +-
 web/components/filters/has-photo-filter.tsx   |  2 +-
 web/components/filters/search.tsx             |  7 +-
 web/components/filters/show-age-toggle.tsx    |  2 +-
 web/components/filters/show-photos-toggle.tsx |  2 +-
 web/components/layout/modal.tsx               |  2 +-
 .../messaging/new-message-button.tsx          |  4 +-
 web/components/multi-user-reaction-link.tsx   |  2 +-
 web/components/nav/sidebar-item.tsx           |  6 +-
 web/components/nav/sidebar.tsx                | 10 +--
 web/components/optional-profile-form.tsx      |  2 +-
 web/components/page-base.tsx                  |  2 +-
 web/components/profile-about.tsx              |  2 +-
 web/components/profile-carousel.tsx           |  2 +-
 web/components/profile-comments.tsx           |  2 +-
 web/components/profile-grid.tsx               | 10 +--
 .../profile/delete-account-survey-modal.tsx   |  2 +-
 web/components/profile/profile-header.tsx     |  2 +-
 web/components/profile/profile-info.tsx       |  4 +-
 web/components/profile/report-user.tsx        |  2 +-
 .../profile/visibility-confirmation-modal.tsx |  2 +-
 web/components/questions-form.tsx             |  2 +-
 web/components/searches/button.tsx            | 18 +++--
 web/components/select-users.tsx               |  2 +-
 web/components/widgets/add-photos.tsx         |  4 +-
 web/components/widgets/avatar.tsx             |  4 +-
 web/components/widgets/card.tsx               |  2 +-
 web/components/widgets/checkbox.tsx           |  2 +-
 .../widgets/choices-toggle-group.tsx          |  2 +-
 .../widgets/customizeable-dropdown.tsx        |  2 +-
 .../widgets/editable-photo-grid.tsx           |  2 +-
 web/components/widgets/editor.tsx             |  2 +-
 web/components/widgets/expanding-input.tsx    |  2 +-
 web/components/widgets/gradient-container.tsx |  2 +-
 web/components/widgets/icon-toggle.tsx        |  2 +-
 web/components/widgets/input.tsx              | 24 +++++--
 web/components/widgets/like-button.tsx        |  2 +-
 web/components/widgets/likes-display.tsx      |  2 +-
 .../widgets/news-topics-content-container.tsx |  2 +-
 web/components/widgets/searchable-select.tsx  |  4 +-
 web/components/widgets/select.tsx             |  2 +-
 web/components/widgets/ship-button.tsx        |  2 +-
 web/components/widgets/short-toggle.tsx       |  2 +-
 web/components/widgets/toast-clipboard.tsx    |  2 +-
 web/pages/compatibility.tsx                   |  2 +-
 web/pages/delete-account.tsx                  |  2 +-
 web/pages/events.tsx                          | 16 ++---
 web/pages/messages/index.tsx                  |  2 +-
 web/pages/privacy.tsx                         |  2 +-
 web/pages/referrals.tsx                       |  2 +-
 web/pages/terms.tsx                           |  2 +-
 web/styles/globals.css                        | 68 +++++++++++++------
 69 files changed, 173 insertions(+), 122 deletions(-)

diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index 4b4ae371..24e65326 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -300,7 +300,7 @@ export const SelectAnswer = (props: {
     <RadioGroup
       data-testid="compatibility-question-your-answer"
       className={
-        'border-ink-300 text-ink-400 bg-canvas-0 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm'
+        'border-ink-300 text-ink-400 bg-canvas-50 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm'
       }
       value={value}
       onChange={setValue}
@@ -338,7 +338,7 @@ export const MultiSelectAnswers = (props: {
     <Col
       data-testid="compatibility-answers-you-accept"
       className={
-        'border-ink-300 text-ink-400 bg-canvas-0 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm main-font'
+        'border-ink-300 text-ink-400 bg-canvas-50 inline-flex flex-col gap-2 rounded-md border p-1 text-sm shadow-sm main-font'
       }
     >
       {options.map((label, i) => (
diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index 35eb2839..0609ef95 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -263,7 +263,7 @@ export function CompatibilityQuestionsDisplay(props: {
             {/*    setSearchTerm(e.target.value)*/}
             {/*    setPage(0)*/}
             {/*  }}*/}
-            {/*  className="h-8 pl-7 pr-2 text-sm border border-ink-300 rounded-xl bg-canvas-0 focus:outline-none focus:ring-1 focus:ring-primary-500 w-48 transition-all"*/}
+            {/*  className="h-8 pl-7 pr-2 text-sm border border-ink-300 rounded-xl bg-canvas-50 focus:outline-none focus:ring-1 focus:ring-primary-500 w-48 transition-all"*/}
             {/*/>*/}
             <Input
               value={searchTerm}
@@ -452,7 +452,7 @@ export function CompatibilityAnswerBlock(props: {
     <Col
       data-testid="profile-compatibility-section"
       className={
-        'bg-canvas-0 flex-grow gap-4 whitespace-pre-line rounded-xl px-3 py-2 leading-relaxed'
+        'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl px-3 py-2 leading-relaxed'
       }
     >
       <Row
diff --git a/web/components/answers/free-response-display.tsx b/web/components/answers/free-response-display.tsx
index 6f4c69bf..6f268f4d 100644
--- a/web/components/answers/free-response-display.tsx
+++ b/web/components/answers/free-response-display.tsx
@@ -105,7 +105,7 @@ function AnswerBlock(props: {
   return (
     <Col
       key={question.id}
-      className={'bg-canvas-0 flex-grow whitespace-pre-line rounded-md px-3 py-2 leading-relaxed'}
+      className={'bg-canvas-50 flex-grow whitespace-pre-line rounded-md px-3 py-2 leading-relaxed'}
     >
       <Row className="text-ink-600 justify-between text-sm">
         {question.question}
diff --git a/web/components/bio/profile-bio-block.tsx b/web/components/bio/profile-bio-block.tsx
index d90c679a..87712d38 100644
--- a/web/components/bio/profile-bio-block.tsx
+++ b/web/components/bio/profile-bio-block.tsx
@@ -26,7 +26,7 @@ export function BioBlock(props: {
   return (
     <Col
       className={clsx(
-        'bg-canvas-0 flex-grow whitespace-pre-line rounded-md leading-relaxed',
+        'flex-grow whitespace-pre-line rounded-md leading-relaxed',
         !edit && 'px-3 py-2',
       )}
     >
diff --git a/web/components/browse-matches-button.tsx b/web/components/browse-matches-button.tsx
index 2841039c..56414067 100644
--- a/web/components/browse-matches-button.tsx
+++ b/web/components/browse-matches-button.tsx
@@ -132,7 +132,7 @@
 //       open
 //       setOpen={setOpen}
 //     >
-//       <Col className="bg-canvas-0 min-h-full gap-2 rounded p-4 pb-8">
+//       <Col className="bg-canvas-50 min-h-full gap-2 rounded p-4 pb-8">
 //         <Row className="justify-between">
 //           <Title className="!mb-0">
 //             Browse {!isCurrentUser && `for ${profile.user.name}`}
diff --git a/web/components/buttons/confirmation-button.tsx b/web/components/buttons/confirmation-button.tsx
index ffc8edf9..0505a35e 100644
--- a/web/components/buttons/confirmation-button.tsx
+++ b/web/components/buttons/confirmation-button.tsx
@@ -53,7 +53,7 @@ export function ConfirmationButton(props: {
   return (
     <>
       <Modal open={open} setOpen={updateOpen}>
-        <Col className="bg-canvas-0 gap-4 rounded-md px-8 py-6">
+        <Col className="bg-canvas-50 gap-4 rounded-md px-8 py-6">
           {children}
           <Row className="w-full justify-end gap-4">
             <Button
diff --git a/web/components/buttons/more-options-user-button.tsx b/web/components/buttons/more-options-user-button.tsx
index ddc4c5cf..d0e2ecfa 100644
--- a/web/components/buttons/more-options-user-button.tsx
+++ b/web/components/buttons/more-options-user-button.tsx
@@ -52,7 +52,7 @@ export function MoreOptionsUserButton(props: {user: User}) {
       </Tooltip>
 
       <Modal open={isModalOpen} setOpen={setIsModalOpen}>
-        <Col className={'bg-canvas-0 text-ink-1000 rounded-md p-4 '}>
+        <Col className={'bg-canvas-50 text-ink-1000 rounded-md p-4 '}>
           <div className="mb-2 flex flex-wrap justify-between">
             <Title className={'!mb-0'}>{name}</Title>
             {(isAdmin || isTrusted) && (
diff --git a/web/components/buttons/report-button.tsx b/web/components/buttons/report-button.tsx
index 87a5c951..9ed1a147 100644
--- a/web/components/buttons/report-button.tsx
+++ b/web/components/buttons/report-button.tsx
@@ -61,7 +61,7 @@ export const ReportModal = (props: {
 
   return (
     <Modal open={isModalOpen} setOpen={setIsModalOpen}>
-      <Col className={'bg-canvas-0 rounded-md p-4'}>
+      <Col className={'bg-canvas-50 rounded-md p-4'}>
         <Title>Report {label}</Title>
         <span className={'mb-4 text-sm'}>
           {isReported
diff --git a/web/components/chat/chat-message.tsx b/web/components/chat/chat-message.tsx
index 17ff35f6..67a8cf21 100644
--- a/web/components/chat/chat-message.tsx
+++ b/web/components/chat/chat-message.tsx
@@ -121,7 +121,7 @@ export function ChatMessageItem(props: {
                         ? 'bg-canvas-50 italic'
                         : isMe
                           ? 'bg-primary-200 items-end self-end rounded-r-none group-first:rounded-tr-3xl'
-                          : 'bg-canvas-0 items-start self-start rounded-l-none group-first:rounded-tl-3xl',
+                          : 'bg-canvas-50 items-start self-start rounded-l-none group-first:rounded-tl-3xl',
                     )}
                     onMouseDown={() => startLongPress(chat.id)}
                     onMouseUp={cancelLongPress}
diff --git a/web/components/comments/dropdown-button-menu.tsx b/web/components/comments/dropdown-button-menu.tsx
index ff985275..73336eaf 100644
--- a/web/components/comments/dropdown-button-menu.tsx
+++ b/web/components/comments/dropdown-button-menu.tsx
@@ -54,7 +54,7 @@ export default function DropdownMenu(props: {
               ref={refs.setFloating}
               style={floatingStyles}
               className={clsx(
-                'bg-canvas-0 ring-ink-1000 z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+                'bg-canvas-50 ring-ink-1000 z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
                 menuWidth ?? 'w-34',
                 menuItemsClass,
                 'p-1',
diff --git a/web/components/comments/dropdown-menu.tsx b/web/components/comments/dropdown-menu.tsx
index 07fb3e85..80560a85 100644
--- a/web/components/comments/dropdown-menu.tsx
+++ b/web/components/comments/dropdown-menu.tsx
@@ -67,7 +67,7 @@ export default function DropdownMenu(props: {
               ref={refs.setFloating}
               style={floatingStyles}
               className={clsx(
-                'bg-canvas-0 ring-ink-1000 z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+                'bg-canvas-50 ring-ink-1000 z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
                 menuWidth ?? 'w-34',
                 menuItemsClass,
                 'py-1',
diff --git a/web/components/compatibility/sort-widget.tsx b/web/components/compatibility/sort-widget.tsx
index d8a02d3a..05ece8d0 100644
--- a/web/components/compatibility/sort-widget.tsx
+++ b/web/components/compatibility/sort-widget.tsx
@@ -69,7 +69,7 @@ export function CompatibilitySortWidget(props: {
       buttonContent={(open: boolean) => (
         <DropdownButton content={sortToDisplay[sort]} open={open} />
       )}
-      menuItemsClass={'bg-canvas-0'}
+      menuItemsClass={'bg-canvas-50'}
       menuWidth="w-56"
     />
   )
diff --git a/web/components/editor/embed-modal.tsx b/web/components/editor/embed-modal.tsx
index a1f2a34d..e338ff55 100644
--- a/web/components/editor/embed-modal.tsx
+++ b/web/components/editor/embed-modal.tsx
@@ -72,7 +72,7 @@ export function EmbedModal(props: {
 
   return (
     <Modal open={open} setOpen={setOpen}>
-      <Col className="bg-canvas-0 gap-2 rounded p-6">
+      <Col className="bg-canvas-50 gap-2 rounded p-6">
         <label htmlFor="embed" className="text-ink-700 block text-sm font-medium">
           Embed a Youtube video
         </label>
diff --git a/web/components/editor/emoji/emoji-list.tsx b/web/components/editor/emoji/emoji-list.tsx
index 5e4e1262..b53e1811 100644
--- a/web/components/editor/emoji/emoji-list.tsx
+++ b/web/components/editor/emoji/emoji-list.tsx
@@ -41,7 +41,7 @@ export const EmojiList = forwardRef((props: SuggestionProps<EmojiData>, ref) =>
   }))
 
   return (
-    <div className="w-42 bg-canvas-0 ring-ink-1000 absolute z-10 overflow-x-hidden rounded-md py-1 shadow-lg ring-1 ring-opacity-5 focus:outline-none">
+    <div className="w-42 bg-canvas-50 ring-ink-1000 absolute z-10 overflow-x-hidden rounded-md py-1 shadow-lg ring-1 ring-opacity-5 focus:outline-none">
       {!items.length ? (
         <span className="text-ink-900 m-1 whitespace-nowrap">No results</span>
       ) : (
diff --git a/web/components/editor/user-mention/mention-list.tsx b/web/components/editor/user-mention/mention-list.tsx
index 7dc26dff..b573deec 100644
--- a/web/components/editor/user-mention/mention-list.tsx
+++ b/web/components/editor/user-mention/mention-list.tsx
@@ -40,7 +40,7 @@ export const MentionList = forwardRef((props: SuggestionProps<DisplayUser>, ref)
   }))
 
   return (
-    <div className="w-42 bg-canvas-0 ring-ink-1000 absolute z-10 overflow-x-hidden rounded-md py-1 shadow-lg ring-1 ring-opacity-5 focus:outline-none">
+    <div className="w-42 bg-canvas-50 ring-ink-1000 absolute z-10 overflow-x-hidden rounded-md py-1 shadow-lg ring-1 ring-opacity-5 focus:outline-none">
       {!users.length ? (
         <span className="m-1 whitespace-nowrap">No results...</span>
       ) : (
diff --git a/web/components/events/event-card.tsx b/web/components/events/event-card.tsx
index 38756e56..c10370cf 100644
--- a/web/components/events/event-card.tsx
+++ b/web/components/events/event-card.tsx
@@ -57,7 +57,7 @@ export function EventCard(props: {
 
   return (
     <div
-      className={clsx('bg-canvas-0 border-canvas-200 rounded-lg border p-4 shadow-sm', className)}
+      className={clsx('bg-canvas-50 border-canvas-200 rounded-lg border p-4 shadow-sm', className)}
     >
       {/* Header */}
       <div className="mb-3">
diff --git a/web/components/filters/card-size-selector.tsx b/web/components/filters/card-size-selector.tsx
index 1c7b9eaf..5e2784f7 100644
--- a/web/components/filters/card-size-selector.tsx
+++ b/web/components/filters/card-size-selector.tsx
@@ -27,7 +27,7 @@ export function CardSizeSelector(props: {
               key={size}
               className={clsx(
                 'px-3 py-1.5 text-sm rounded-xl border border-canvas-100 transition-colors',
-                isSelected ? 'bg-primary-100' : 'bg-canvas-0  hover:bg-canvas-25',
+                isSelected ? 'bg-primary-100' : 'bg-canvas-50  hover:bg-canvas-25',
               )}
               onClick={() => updateDisplayOptions({cardSize: size})}
             >
diff --git a/web/components/filters/field-toggles.tsx b/web/components/filters/field-toggles.tsx
index 59dc264e..b5c9b54c 100644
--- a/web/components/filters/field-toggles.tsx
+++ b/web/components/filters/field-toggles.tsx
@@ -43,7 +43,7 @@ export function FieldToggles(props: {
             <input
               id={field.key}
               type="checkbox"
-              className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
+              className="border-ink-300 bg-canvas-50 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
               checked={value as boolean}
               onChange={() => {
                 const newValue = !(displayOptions[field.key] ?? true)
diff --git a/web/components/filters/has-photo-filter.tsx b/web/components/filters/has-photo-filter.tsx
index bb96d659..6694863f 100644
--- a/web/components/filters/has-photo-filter.tsx
+++ b/web/components/filters/has-photo-filter.tsx
@@ -18,7 +18,7 @@ export function HasPhotoFilter(props: {
       <input
         id={label}
         type="checkbox"
-        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
+        className="border-ink-300 bg-canvas-50 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
         checked={on}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           updateFilter({hasPhoto: e.target.checked ? true : undefined})
diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx
index ed8d1858..86b6f1d8 100644
--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -167,7 +167,7 @@ export const Search = forwardRef<
           ref={ref}
           value={keywordInput}
           placeholder={placeholder}
-          className={'w-full max-w-xs'}
+          className={'w-full'}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setKeywordInput(e.target.value)
           }}
@@ -203,7 +203,7 @@ export const Search = forwardRef<
         </Row>
       </Row>
       <RightModal
-        className="bg-canvas-0 w-2/3 text-sm lg:hidden h-full max-h-screen overflow-y-auto"
+        className="bg-canvas-50 w-2/3 text-sm lg:hidden h-full max-h-screen overflow-y-auto"
         open={openFiltersModal}
         setOpen={setOpenFiltersModal}
       >
@@ -232,8 +232,9 @@ export const Search = forwardRef<
             }}
             size={'xs'}
             color={'none'}
-            className={'bg-canvas-100 hover:bg-canvas-200'}
+            className={'text-ink-100 bg-primary-500 hover:bg-primary-400 rounded-xl'}
           >
+            🔔
             {bookmarked
               ? t('common.saved', 'Saved!')
               : loadingBookmark
diff --git a/web/components/filters/show-age-toggle.tsx b/web/components/filters/show-age-toggle.tsx
index f0849957..05f97352 100644
--- a/web/components/filters/show-age-toggle.tsx
+++ b/web/components/filters/show-age-toggle.tsx
@@ -19,7 +19,7 @@ export function ShowAgeToggle(props: {
       <input
         id={label}
         type="checkbox"
-        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
+        className="border-ink-300 bg-canvas-50 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
         checked={on}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           updateDisplayOptions({showAge: e.target.checked})
diff --git a/web/components/filters/show-photos-toggle.tsx b/web/components/filters/show-photos-toggle.tsx
index 23c3284f..b19e96fb 100644
--- a/web/components/filters/show-photos-toggle.tsx
+++ b/web/components/filters/show-photos-toggle.tsx
@@ -19,7 +19,7 @@ export function ShowPhotosToggle(props: {
       <input
         id={label}
         type="checkbox"
-        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
+        className="border-ink-300 bg-canvas-50 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
         checked={on}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           updateDisplayOptions({showPhotos: e.target.checked})
diff --git a/web/components/layout/modal.tsx b/web/components/layout/modal.tsx
index a4bf62d1..7129f9b7 100644
--- a/web/components/layout/modal.tsx
+++ b/web/components/layout/modal.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import {Fragment, ReactNode, useEffect, useRef} from 'react'
 
 export const MODAL_CLASS =
-  'items-center gap-4 rounded-md bg-canvas-0 sm:px-8 px-4 pt-6 pb-2 text-ink-1000 h-[calc(100dvh-var(--hloss)-120px)] sm:h-[calc(95dvh-var(--hloss)-120px)] '
+  'items-center gap-4 rounded-md bg-canvas-50 sm:px-8 px-4 pt-6 pb-2 text-ink-1000 h-[calc(100dvh-var(--hloss)-120px)] sm:h-[calc(95dvh-var(--hloss)-120px)] '
 export const SCROLLABLE_MODAL_CLASS = '!overflow-auto'
 
 // From https://tailwindui.com/components/application-ui/overlays/modals
diff --git a/web/components/messaging/new-message-button.tsx b/web/components/messaging/new-message-button.tsx
index 4704dc79..402f391e 100644
--- a/web/components/messaging/new-message-button.tsx
+++ b/web/components/messaging/new-message-button.tsx
@@ -64,8 +64,8 @@ function MessageModal(props: {open: boolean; setOpen: (open: boolean) => void})
             .concat(buildArray(privateUser?.id))}
         />
       </Col>
-      {errorText && <p className={'bg-canvas-0 text-red-500 px-5'}>{errorText}</p>}
-      <Row className={'bg-canvas-0 justify-end rounded-b-md p-2'}>
+      {errorText && <p className={'bg-canvas-50 text-red-500 px-5'}>{errorText}</p>}
+      <Row className={'bg-canvas-50 justify-end rounded-b-md p-2'}>
         <Button disabled={users.length === 0} onClick={createChannel}>
           {t('messages.create', 'Create')}
         </Button>
diff --git a/web/components/multi-user-reaction-link.tsx b/web/components/multi-user-reaction-link.tsx
index 22521d81..732cacac 100644
--- a/web/components/multi-user-reaction-link.tsx
+++ b/web/components/multi-user-reaction-link.tsx
@@ -13,7 +13,7 @@ export function MultiUserReactionModal(props: {
   const {similarNotifications, modalLabel, open, setOpen} = props
   return (
     <Modal open={open} setOpen={setOpen} size={'sm'}>
-      <Col className="bg-canvas-0 items-start gap-4 rounded-md p-6">
+      <Col className="bg-canvas-50 items-start gap-4 rounded-md p-6">
         <span className={'text-xl'}>{modalLabel}</span>
         {similarNotifications.map((notif) => (
           <UserAvatarAndBadge
diff --git a/web/components/nav/sidebar-item.tsx b/web/components/nav/sidebar-item.tsx
index 1fd1ac82..2c229cb0 100644
--- a/web/components/nav/sidebar-item.tsx
+++ b/web/components/nav/sidebar-item.tsx
@@ -28,7 +28,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
   }
 
   const sidebarClass = clsx(
-    isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-600 hover:text-primary-700',
+    isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-100 hover:text-primary-700',
     'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
     'focus-visible:bg-ink-100 outline-none transition-all',
   )
@@ -38,7 +38,9 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
       {item.icon && (
         <item.icon
           className={clsx(
-            isCurrentPage ? 'text-primary-700' : 'text-ink-500 group-hover:text-primary-700',
+            isCurrentPage
+              ? 'text-primary-700'
+              : 'text-ink-100 group-hover:text-primary-700 group-hover:translate-x-[2px]',
             '-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
           )}
           aria-hidden="true"
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 551ee93d..ae301802 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -21,9 +21,10 @@ import {Item, SidebarItem} from './sidebar-item'
 export default function Sidebar(props: {
   className?: string
   isMobile?: boolean
+  style?: React.CSSProperties
   navigationOptions: Item[]
 }) {
-  const {className, isMobile} = props
+  const {className, isMobile, style} = props
   const router = useRouter()
   const currentPage = router.pathname
 
@@ -46,12 +47,13 @@ export default function Sidebar(props: {
         'flex flex-col h-[calc(100dvh-var(--hloss))] mb-[calc(var(--bnh))] mt-[calc(var(--tnh))]',
         className,
       )}
+      style={style}
     >
-      <SiteLogo className={''} />
+      <SiteLogo className={'invert'} />
 
       {user === undefined && <div className="h-[24px]" />}
 
-      {user && !isMobile && <ProfileSummary user={user} className="mb-3" />}
+      {user && !isMobile && <ProfileSummary user={user} className="mb-3 text-white" />}
 
       <div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
         {navOptions.map((item) => (
@@ -63,7 +65,7 @@ export default function Sidebar(props: {
             alt="divider"
             width={160}
             height={80}
-            className="mx-auto pt-4 hover:opacity-70 cursor-pointer invert dark:invert-0"
+            className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
             onClick={() => router.push(ANDROID_APP_URL)}
           />
         )}
diff --git a/web/components/optional-profile-form.tsx b/web/components/optional-profile-form.tsx
index 377f321b..6f42f602 100644
--- a/web/components/optional-profile-form.tsx
+++ b/web/components/optional-profile-form.tsx
@@ -546,7 +546,7 @@ export const OptionalProfileUserForm = (props: {
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
               setProfile('headline', e.target.value)
             }
-            className={'w-full md:w-[700px] bg-canvas-0 border rounded-md p-2'}
+            className={'w-full md:w-[700px] bg-canvas-50 border rounded-md p-2'}
             value={profile['headline'] ?? undefined}
             maxLength={250}
           />
diff --git a/web/components/page-base.tsx b/web/components/page-base.tsx
index e6717fde..a975852d 100644
--- a/web/components/page-base.tsx
+++ b/web/components/page-base.tsx
@@ -93,7 +93,7 @@ export function PageBase(props: {
         ) : (
           <Sidebar
             navigationOptions={desktopSidebarOptions}
-            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-50"
+            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-950"
           />
         )}
         <main
diff --git a/web/components/profile-about.tsx b/web/components/profile-about.tsx
index 9e9e19e9..c1df309a 100644
--- a/web/components/profile-about.tsx
+++ b/web/components/profile-about.tsx
@@ -108,7 +108,7 @@ export default function ProfileAbout(props: {
   const {locale} = useLocale()
 
   return (
-    <Col className={clsx('bg-canvas-0 relative gap-3 overflow-hidden rounded px-4')}>
+    <Col className={clsx('relative gap-3 overflow-hidden rounded px-4')}>
       <Seeking profile={profile} />
       <RelationshipStatus profile={profile} />
       <Education profile={profile} />
diff --git a/web/components/profile-carousel.tsx b/web/components/profile-carousel.tsx
index 5603ed0f..78d1fe44 100644
--- a/web/components/profile-carousel.tsx
+++ b/web/components/profile-carousel.tsx
@@ -38,7 +38,7 @@ export default function ProfileCarousel(props: {profile: Profile; refreshProfile
           </div>
         )}
         {photoNums > 0 && (
-          <Col className="bg-canvas-100 dark:bg-canvas-0 text-ink-500 relative h-[300px] w-[300px] flex-none items-center rounded text-6xl ">
+          <Col className="bg-canvas-100 dark:bg-canvas-50 text-ink-500 relative h-[300px] w-[300px] flex-none items-center rounded text-6xl ">
             <Col className=" m-auto items-center gap-1">
               <div className="select-none font-semibold">+{photoNums}</div>
               <SignUpButton
diff --git a/web/components/profile-comments.tsx b/web/components/profile-comments.tsx
index d621b32f..bc19538d 100644
--- a/web/components/profile-comments.tsx
+++ b/web/components/profile-comments.tsx
@@ -179,7 +179,7 @@ const ProfileComment = memo(function FeedComment(props: {
             'grow rounded-lg rounded-tl-none px-3 pb-0.5 pt-1 transition-colors',
             highlighted
               ? 'bg-primary-100 border-primary-300 border-2'
-              : 'bg-canvas-0 drop-shadow-sm',
+              : 'bg-canvas-50 drop-shadow-sm',
           )}
         >
           <FeedCommentHeader
diff --git a/web/components/profile-grid.tsx b/web/components/profile-grid.tsx
index 36d0dd43..f3243c45 100644
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -316,7 +316,7 @@ function ProfilePreview(props: {
   return (
     <div
       className={clsx(
-        'relative overflow-hidden rounded-lg',
+        'relative overflow-hidden rounded-lg bg-canvas-50',
         isLoading && 'scale-[0.94] transition-transform duration-[80ms] ease-out',
         !isLoading && 'transition-transform duration-[120ms] ease-in',
       )}
@@ -333,7 +333,7 @@ function ProfilePreview(props: {
       >
         {/* Phase 1: Dim overlay */}
         {isLoading && (
-          <div className="absolute inset-0 bg-canvas-0/[0.32] rounded-lg z-20 pointer-events-none" />
+          <div className="absolute inset-0 bg-canvas-50/[0.32] rounded-lg z-20 pointer-events-none" />
         )}
         <Col className={clsx('relative w-full rounded transition-all')}>
           <Row className={clsx('absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10')}>
@@ -399,7 +399,7 @@ function ProfilePreview(props: {
                     ?.slice(0, 10)
                     ?.map(capitalize)
                     ?.map((tag, i) => (
-                      <span key={i} className={'bg-primary-200 text-sm px-3 py-2 rounded-full'}>
+                      <span key={i} className={'bg-canvas-200 text-sm px-3 py-2 rounded-full'}>
                         {tag.trim()}
                       </span>
                     ))}
@@ -481,8 +481,8 @@ function ProfilePreview(props: {
               {isOverflowing && (
                 <div
                   className={clsx(
-                    'absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-canvas-0 to-transparent pointer-events-none',
-                    'group-hover:from-gray-50 dark:group-hover:from-canvas-100',
+                    'absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-canvas-50 to-transparent pointer-events-none',
+                    'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
                   )}
                 />
               )}
diff --git a/web/components/profile/delete-account-survey-modal.tsx b/web/components/profile/delete-account-survey-modal.tsx
index d5bb446e..f0f26ea2 100644
--- a/web/components/profile/delete-account-survey-modal.tsx
+++ b/web/components/profile/delete-account-survey-modal.tsx
@@ -199,7 +199,7 @@ export function DeleteAccountSurveyModal() {
                 <textarea
                   id="otherReason"
                   rows={3}
-                  className="block w-full bg-canvas-0 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                  className="block w-full bg-canvas-50 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   placeholder={t('delete_survey.other_placeholder', 'Please share more details')}
                   value={reasonFreeText}
                   onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
diff --git a/web/components/profile/profile-header.tsx b/web/components/profile/profile-header.tsx
index 868a70e7..9af79521 100644
--- a/web/components/profile/profile-header.tsx
+++ b/web/components/profile/profile-header.tsx
@@ -254,7 +254,7 @@ export default function ProfileHeader(props: {
         {profile.keywords?.map(capitalize)?.map((tag, i) => (
           <span
             key={i}
-            className={'bg-primary-200'}
+            className={'bg-canvas-200'}
             style={{
               padding: '6px 16px',
               borderRadius: '20px',
diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx
index 68035bba..e8824bb9 100644
--- a/web/components/profile/profile-info.tsx
+++ b/web/components/profile/profile-info.tsx
@@ -98,7 +98,7 @@ export function ProfileInfo(props: {
           // refreshShips={refresh}
         />
       ) : (
-        <Col className="bg-canvas-0 w-full gap-4 rounded p-4">
+        <Col className="bg-canvas-50 w-full gap-4 rounded p-4">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             <Content className="w-full line-clamp-6" content={profile.bio as JSONContent} />
           </div>
@@ -106,7 +106,7 @@ export function ProfileInfo(props: {
             <div className="bg-ink-200 dark:bg-ink-400 h-4 w-2/5" />
             <div className="bg-ink-200 dark:bg-ink-400 h-4 w-3/5" />
             <div className="bg-ink-200 dark:bg-ink-400 h-4 w-1/2" />
-            <div className="from-canvas-0 absolute bottom-0 h-12 w-full bg-gradient-to-t to-transparent" />
+            <div className="from-canvas-50 absolute bottom-0 h-12 w-full bg-gradient-to-t to-transparent" />
           </Col>
           <Row className="gap-2">
             <SignUpButton text={t('profile.info.signup_to_see', 'Sign up to see profile')} />
diff --git a/web/components/profile/report-user.tsx b/web/components/profile/report-user.tsx
index 51254245..cb2ca7f7 100644
--- a/web/components/profile/report-user.tsx
+++ b/web/components/profile/report-user.tsx
@@ -91,7 +91,7 @@ export const ReportUser = (props: {user: User; closeModal: () => void}) => {
                 'Add more context and/or provide a link to the content',
               )}
               rows={2}
-              className={'border-ink-300 bg-canvas-0 -ml-2 rounded-md border p-2'}
+              className={'border-ink-300 bg-canvas-50 -ml-2 rounded-md border p-2'}
               value={otherReportType}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setOtherReportType(e.target.value)
diff --git a/web/components/profile/visibility-confirmation-modal.tsx b/web/components/profile/visibility-confirmation-modal.tsx
index d71957cc..2bb2e83b 100644
--- a/web/components/profile/visibility-confirmation-modal.tsx
+++ b/web/components/profile/visibility-confirmation-modal.tsx
@@ -17,7 +17,7 @@ export function VisibilityConfirmationModal(props: {
 
   return (
     <Modal open={open} setOpen={setOpen}>
-      <Col className="bg-canvas-0 gap-4 rounded-md px-8 py-6">
+      <Col className="bg-canvas-50 gap-4 rounded-md px-8 py-6">
         <Row className="items-center gap-2 text-lg">
           {isMakingPublic ? (
             <EyeIcon className="h-5 w-5" />
diff --git a/web/components/questions-form.tsx b/web/components/questions-form.tsx
index 5ed1df0e..6ab2b6d3 100644
--- a/web/components/questions-form.tsx
+++ b/web/components/questions-form.tsx
@@ -25,7 +25,7 @@ export const QuestionsForm = (props: {questionType: QuestionType}) => {
   const router = useRouter()
   return (
     <Col className={'w-full items-center'}>
-      <Col className={' bg-canvas-0 w-full max-w-2xl justify-between px-6 py-4'}>
+      <Col className={' bg-canvas-50 w-full max-w-2xl justify-between px-6 py-4'}>
         <Title>Questions</Title>
         <Col className={'gap-2'}>
           {user &&
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index 3275dc81..8352087d 100644
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -33,8 +33,13 @@ export function BookmarkSearchButton(props: {
   if (!user) return null
   return (
     <>
-      <Button onClick={() => setOpen(true)} color="gray-outline" size={'xs'}>
-        {t('saved_searches.button', 'Saved Searches')}
+      <Button
+        onClick={() => setOpen(true)}
+        color="gray-outline"
+        size={'xs'}
+        className={'rounded-xl'}
+      >
+        ⭐ {t('saved_searches.button', 'Saved Searches')}
       </Button>
       <ButtonModal
         open={open}
@@ -156,8 +161,13 @@ export function BookmarkStarButton(props: {
   if (!user) return null
   return (
     <>
-      <Button onClick={() => setOpen(true)} color="gray-outline" size={'xs'}>
-        {t('saved_people.button', 'Saved People')}
+      <Button
+        onClick={() => setOpen(true)}
+        color="gray-outline"
+        size={'xs'}
+        className={'rounded-xl'}
+      >
+        👥 {t('saved_people.button', 'Saved People')}
       </Button>
       <StarModal
         open={open}
diff --git a/web/components/select-users.tsx b/web/components/select-users.tsx
index d8e3e29d..6515f055 100644
--- a/web/components/select-users.tsx
+++ b/web/components/select-users.tsx
@@ -107,7 +107,7 @@ export function SelectUsers(props: {
                 >
                   <Menu.Items
                     static={true}
-                    className="divide-ink-100 bg-canvas-0 ring-ink-1000 absolute right-0 mt-2 w-full origin-top-right cursor-pointer divide-y rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none"
+                    className="divide-ink-100 bg-canvas-50 ring-ink-1000 absolute right-0 mt-2 w-full origin-top-right cursor-pointer divide-y rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none"
                   >
                     <div className="py-1">
                       {filteredUsers.map((user) => (
diff --git a/web/components/widgets/add-photos.tsx b/web/components/widgets/add-photos.tsx
index 622b1bb3..602b1005 100644
--- a/web/components/widgets/add-photos.tsx
+++ b/web/components/widgets/add-photos.tsx
@@ -102,7 +102,7 @@ export const AddPhotosWidget = (props: {
             >
               {isPinned && (
                 <div className={clsx(' absolute left-0 top-0 rounded-full')}>
-                  <CheckCircleIcon className={' bg-canvas-0 h-6 w-6 rounded-full text-teal-500'} />
+                  <CheckCircleIcon className={' bg-canvas-50 h-6 w-6 rounded-full text-teal-500'} />
                 </div>
               )}
               <Button
@@ -114,7 +114,7 @@ export const AddPhotosWidget = (props: {
                 }}
                 color={'gray-outline'}
                 size={'2xs'}
-                className={clsx('bg-canvas-0 absolute right-0 top-0 !rounded-full !px-1 py-1')}
+                className={clsx('bg-canvas-50 absolute right-0 top-0 !rounded-full !px-1 py-1')}
               >
                 <XMarkIcon className={'h-4 w-4'} />
               </Button>
diff --git a/web/components/widgets/avatar.tsx b/web/components/widgets/avatar.tsx
index 2705ac74..fd76d366 100644
--- a/web/components/widgets/avatar.tsx
+++ b/web/components/widgets/avatar.tsx
@@ -60,7 +60,7 @@ export const Avatar = memo(
           width={sizeInPx}
           height={sizeInPx}
           className={clsx(
-            'bg-canvas-0 my-0 flex-shrink-0 rounded-full object-cover',
+            'bg-canvas-50 my-0 flex-shrink-0 rounded-full object-cover',
             `w-${s} h-${s}`,
             !noLink && 'cursor-pointer',
             className,
@@ -84,7 +84,7 @@ export const Avatar = memo(
     // ) : (
     //   <UserCircleIcon
     //     className={clsx(
-    //       `bg-canvas-0 flex-shrink-0 rounded-full w-${s} h-${s} text-ink-500`,
+    //       `bg-canvas-50 flex-shrink-0 rounded-full w-${s} h-${s} text-ink-500`,
     //       className
     //     )}
     //     aria-hidden="true"
diff --git a/web/components/widgets/card.tsx b/web/components/widgets/card.tsx
index 2ad56f57..4267edfa 100644
--- a/web/components/widgets/card.tsx
+++ b/web/components/widgets/card.tsx
@@ -9,7 +9,7 @@ export const Card = forwardRef(function Card(
   return (
     <div
       className={clsx(
-        'bg-canvas-0 border-ink-300 rounded-lg border transition-shadow hover:shadow-md focus:shadow-md',
+        'bg-canvas-50 border-ink-300 rounded-lg border transition-shadow hover:shadow-md focus:shadow-md',
         className,
       )}
       ref={ref}
diff --git a/web/components/widgets/checkbox.tsx b/web/components/widgets/checkbox.tsx
index fc4c5d84..da010c04 100644
--- a/web/components/widgets/checkbox.tsx
+++ b/web/components/widgets/checkbox.tsx
@@ -20,7 +20,7 @@ export function Checkbox(props: {
         <input
           id={label}
           type="checkbox"
-          className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-5 w-5 rounded hover:bg-canvas-300"
+          className="border-ink-300 bg-canvas-50 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-5 w-5 rounded hover:bg-canvas-300"
           checked={checked}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => toggle(e.target.checked)}
           disabled={disabled}
diff --git a/web/components/widgets/choices-toggle-group.tsx b/web/components/widgets/choices-toggle-group.tsx
index 3355a85e..38ea5841 100644
--- a/web/components/widgets/choices-toggle-group.tsx
+++ b/web/components/widgets/choices-toggle-group.tsx
@@ -45,7 +45,7 @@ export function ChoicesToggleGroup<T extends Record<string, string | number | bo
     <RadioGroup
       className={clsx(
         className,
-        'border-ink-300 text-ink-400 bg-canvas-0 inline-flex flex-row gap-2 rounded-md border p-1 text-sm shadow-sm',
+        'border-ink-300 text-ink-400 bg-canvas-50 inline-flex flex-row gap-2 rounded-md border p-1 text-sm shadow-sm',
         disabled && 'bg-canvas-50 !cursor-not-allowed',
       )}
       value={currentChoice ?? undefined}
diff --git a/web/components/widgets/customizeable-dropdown.tsx b/web/components/widgets/customizeable-dropdown.tsx
index 448912e0..3639f466 100644
--- a/web/components/widgets/customizeable-dropdown.tsx
+++ b/web/components/widgets/customizeable-dropdown.tsx
@@ -55,7 +55,7 @@ export function CustomizeableDropdown(props: {
               ref={refs.setFloating}
               style={floatingStyles}
               className={clsx(
-                'bg-canvas-0 ring-ink-1000 z-30 rounded-md px-2 py-2 shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+                'bg-canvas-50 ring-ink-1000 z-30 rounded-md px-2 py-2 shadow-lg ring-1 ring-opacity-5 focus:outline-none',
                 menuWidth ?? 'w-36',
                 popoverClassName,
               )}
diff --git a/web/components/widgets/editable-photo-grid.tsx b/web/components/widgets/editable-photo-grid.tsx
index 5f0b8cde..27140539 100644
--- a/web/components/widgets/editable-photo-grid.tsx
+++ b/web/components/widgets/editable-photo-grid.tsx
@@ -169,7 +169,7 @@ const PhotoItem = ({
           e.stopPropagation()
           onDelete(url)
         }}
-        className="bg-canvas-0 hover:bg-ink-100 absolute right-2 top-2 rounded-full p-1"
+        className="bg-canvas-50 hover:bg-ink-100 absolute right-2 top-2 rounded-full p-1"
       >
         <XMarkIcon className="h-5 w-5" />
       </button>
diff --git a/web/components/widgets/editor.tsx b/web/components/widgets/editor.tsx
index 61fb6d96..b15fb168 100644
--- a/web/components/widgets/editor.tsx
+++ b/web/components/widgets/editor.tsx
@@ -225,7 +225,7 @@ export function TextEditor(props: {
     // matches input styling
     <div
       className={clsx(
-        'border-ink-300 bg-canvas-0 focus-within:border-primary-500 focus-within:ring-primary-500 w-full overflow-hidden rounded-lg border shadow-sm transition-colors focus-within:ring-1',
+        'border-ink-300 bg-canvas-50 focus-within:border-primary-500 focus-within:ring-primary-500 w-full overflow-hidden rounded-lg border shadow-sm transition-colors focus-within:ring-1',
         className,
       )}
     >
diff --git a/web/components/widgets/expanding-input.tsx b/web/components/widgets/expanding-input.tsx
index 35f7593b..c91aa07c 100644
--- a/web/components/widgets/expanding-input.tsx
+++ b/web/components/widgets/expanding-input.tsx
@@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
   return (
     <Textarea
       className={clsx(
-        'disabled:bg-canvas-50 border-ink-300 disabled:border-ink-200 disabled:text-ink-500 bg-canvas-0 focus:border-primary-500 focus:ring-primary-500 resize-none rounded-md border px-4  leading-loose shadow-sm transition-colors focus:outline-none focus:ring-1 disabled:cursor-not-allowed ',
+        'disabled:bg-canvas-50 border-ink-300 disabled:border-ink-200 disabled:text-ink-500 bg-canvas-50 focus:border-primary-500 focus:ring-primary-500 resize-none rounded-md border px-4  leading-loose shadow-sm transition-colors focus:outline-none focus:ring-1 disabled:cursor-not-allowed ',
         className,
       )}
       {...rest}
diff --git a/web/components/widgets/gradient-container.tsx b/web/components/widgets/gradient-container.tsx
index c5896f22..ffaedd0d 100644
--- a/web/components/widgets/gradient-container.tsx
+++ b/web/components/widgets/gradient-container.tsx
@@ -10,7 +10,7 @@ export function GradientContainer(props: {children: React.ReactNode; className?:
         className,
       )}
     >
-      <div className="bg-canvas-0 w-full rounded p-3 ">{children}</div>
+      <div className="bg-canvas-50 w-full rounded p-3 ">{children}</div>
     </div>
   )
 }
diff --git a/web/components/widgets/icon-toggle.tsx b/web/components/widgets/icon-toggle.tsx
index 5b4714e1..db117268 100644
--- a/web/components/widgets/icon-toggle.tsx
+++ b/web/components/widgets/icon-toggle.tsx
@@ -24,7 +24,7 @@ export default function IconToggle(props: {
       <span
         className={clsx(
           on ? 'translate-x-4' : 'translate-x-0',
-          'bg-canvas-0 pointer-events-none relative inline-block h-[1.2rem] w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out',
+          'bg-canvas-50 pointer-events-none relative inline-block h-[1.2rem] w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out',
         )}
       >
         <span
diff --git a/web/components/widgets/input.tsx b/web/components/widgets/input.tsx
index ad5ff0ca..68786697 100644
--- a/web/components/widgets/input.tsx
+++ b/web/components/widgets/input.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import {ComponentPropsWithoutRef, forwardRef, Ref} from 'react'
+import {Row} from 'web/components/layout/row'
 
 /** Text input. Wraps html `<input>` */
 export const Input = forwardRef(
@@ -12,18 +13,29 @@ export const Input = forwardRef(
     const {error, className, ...rest} = props
 
     return (
-      <input
-        ref={ref}
+      <Row
         className={clsx(
-          'invalid:border-error invalid:text-error disabled:bg-canvas-50 disabled:border-ink-200 disabled:text-ink-500 bg-canvas-0 h-12 rounded-md border px-4 shadow-sm transition-colors invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
+          'bg-canvas-50 h-12 rounded-xl border px-4 shadow-sm transition-colors items-center gap-2',
           error
             ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
             : 'border-ink-300 placeholder-ink-400 focus:ring-primary-500 focus:border-primary-500',
           className,
         )}
-        step={0.001} // default to 3 decimal places
-        {...rest}
-      />
+      >
+        <span className="search-icon">🔍</span>
+        <input
+          ref={ref}
+          step={0.001} // default to 3 decimal places
+          className={clsx(
+            'bg-canvas-50 invalid:border-error invalid:text-error  invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
+            error
+              ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
+              : '',
+            className,
+          )}
+          {...rest}
+        />
+      </Row>
     )
   },
 )
diff --git a/web/components/widgets/like-button.tsx b/web/components/widgets/like-button.tsx
index bde9fa58..bc5323ee 100644
--- a/web/components/widgets/like-button.tsx
+++ b/web/components/widgets/like-button.tsx
@@ -49,7 +49,7 @@ export const LikeButton = (props: {
         disabled={isLoading}
         className={clsx(
           buttonClass('md', 'none'),
-          'text-ink-500 disabled:text-ink-500 bg-canvas-0 active:bg-canvas-100 disabled:bg-canvas-100 border-ink-100 dark:border-ink-300 !rounded-full border shadow',
+          'text-ink-500 disabled:text-ink-500 bg-canvas-50 active:bg-canvas-100 disabled:bg-canvas-100 border-ink-100 dark:border-ink-300 !rounded-full border shadow',
           isLoading && 'animate-pulse',
           className,
         )}
diff --git a/web/components/widgets/likes-display.tsx b/web/components/widgets/likes-display.tsx
index d484371b..35efd92a 100644
--- a/web/components/widgets/likes-display.tsx
+++ b/web/components/widgets/likes-display.tsx
@@ -130,7 +130,7 @@
 //
 //   return (
 //     <Col className="mb-2 w-[200px] shrink-0 overflow-hidden rounded">
-//       <Col className="bg-canvas-0 w-full px-4 py-2">
+//       <Col className="bg-canvas-50 w-full px-4 py-2">
 //         <UserLink
 //           className={
 //             'hover:text-primary-500 text-ink-1000 truncate font-semibold transition-colors'
diff --git a/web/components/widgets/news-topics-content-container.tsx b/web/components/widgets/news-topics-content-container.tsx
index e555d7b7..f5792e21 100644
--- a/web/components/widgets/news-topics-content-container.tsx
+++ b/web/components/widgets/news-topics-content-container.tsx
@@ -14,7 +14,7 @@ export const NewsTopicsContentContainer = (props: {
   return (
     <Col
       className={clsx(
-        'border-ink-300 bg-canvas-0 m-0 mb-4 rounded-lg border object-contain px-3 py-1',
+        'border-ink-300 bg-canvas-50 m-0 mb-4 rounded-lg border object-contain px-3 py-1',
         className,
       )}
     >
diff --git a/web/components/widgets/searchable-select.tsx b/web/components/widgets/searchable-select.tsx
index e40bc0c7..fcdf24c1 100644
--- a/web/components/widgets/searchable-select.tsx
+++ b/web/components/widgets/searchable-select.tsx
@@ -42,7 +42,7 @@ export function SearchableSelect(props: {
           <PopoverButton
             ref={refs.setReference}
             className={clsx(
-              'bg-canvas-0 border-ink-300 flex w-32 items-center justify-between rounded-md border px-3 py-2 text-left text-sm shadow-sm focus:outline-none',
+              'bg-canvas-50 border-ink-300 flex w-32 items-center justify-between rounded-md border px-3 py-2 text-left text-sm shadow-sm focus:outline-none',
               className,
             )}
           >
@@ -55,7 +55,7 @@ export function SearchableSelect(props: {
           <PopoverPanel
             ref={refs.setFloating}
             style={floatingStyles}
-            className="bg-canvas-0 ring-ink-1000 z-30 mt-1 w-48 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none"
+            className="bg-canvas-50 ring-ink-1000 z-30 mt-1 w-48 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none"
           >
             <div className="p-2">
               <Input
diff --git a/web/components/widgets/select.tsx b/web/components/widgets/select.tsx
index e92920c7..90bd4715 100644
--- a/web/components/widgets/select.tsx
+++ b/web/components/widgets/select.tsx
@@ -9,7 +9,7 @@ export const Select = forwardRef<HTMLSelectElement, ComponentPropsWithoutRef<'se
       <select
         ref={ref}
         className={clsx(
-          'bg-canvas-0 text-ink-1000 border-ink-300 focus:border-primary-500 focus:ring-primary-500 h-12 cursor-pointer self-start overflow-hidden rounded-md border pl-4 pr-10 text-sm shadow-sm focus:outline-none',
+          'bg-canvas-50 text-ink-1000 border-ink-300 focus:border-primary-500 focus:ring-primary-500 h-12 cursor-pointer self-start overflow-hidden rounded-xl border pl-4 pr-10 text-sm shadow-sm focus:outline-none',
           className,
         )}
         {...rest}
diff --git a/web/components/widgets/ship-button.tsx b/web/components/widgets/ship-button.tsx
index 42b6fd0b..2b755ffa 100644
--- a/web/components/widgets/ship-button.tsx
+++ b/web/components/widgets/ship-button.tsx
@@ -40,7 +40,7 @@ export const ShipButton = (props: {
         className={clsx(
           baseButtonClasses,
           'p-2 text-sm',
-          'text-ink-500 disabled:text-ink-500 bg-canvas-0 active:bg-canvas-100 disabled:bg-canvas-100 border-ink-100 dark:border-ink-300 !rounded-full border shadow disabled:cursor-not-allowed',
+          'text-ink-500 disabled:text-ink-500 bg-canvas-50 active:bg-canvas-100 disabled:bg-canvas-100 border-ink-100 dark:border-ink-300 !rounded-full border shadow disabled:cursor-not-allowed',
           className,
         )}
         onClick={like}
diff --git a/web/components/widgets/short-toggle.tsx b/web/components/widgets/short-toggle.tsx
index 63ed1653..496570e4 100644
--- a/web/components/widgets/short-toggle.tsx
+++ b/web/components/widgets/short-toggle.tsx
@@ -26,7 +26,7 @@ export default function ShortToggle(props: {
     : 'cursor-not-allowed opacity-30'
 
   const knobBaseClasses =
-    'bg-canvas-0 pointer-events-none inline-block rounded-full ring-0 transition duration-200 ease-in-out'
+    'bg-canvas-50 pointer-events-none inline-block rounded-full ring-0 transition duration-200 ease-in-out'
   const knobColorClasses = clsx({
     'dark:bg-primary-50': on && colorMode === 'primary',
     'dark:bg-amber-50': on && colorMode === 'warning',
diff --git a/web/components/widgets/toast-clipboard.tsx b/web/components/widgets/toast-clipboard.tsx
index 13c13ffa..933060f8 100644
--- a/web/components/widgets/toast-clipboard.tsx
+++ b/web/components/widgets/toast-clipboard.tsx
@@ -8,7 +8,7 @@ export function ToastClipboard(props: {className?: string}) {
     <Row
       className={clsx(
         'border-ink-400 absolute items-center' +
-          'divide-ink-200 bg-canvas-0 gap-2 divide-x rounded-md border-2 ' +
+          'divide-ink-200 bg-canvas-50 gap-2 divide-x rounded-md border-2 ' +
           'h-15 text-ink-500 z-10 w-[15rem] p-2 pr-3',
         className,
       )}
diff --git a/web/pages/compatibility.tsx b/web/pages/compatibility.tsx
index 38c69442..628b430b 100644
--- a/web/pages/compatibility.tsx
+++ b/web/pages/compatibility.tsx
@@ -283,7 +283,7 @@ function QuestionList({
         <div
           key={q.id}
           className={clsx(
-            'bg-canvas-0 border-canvas-100 rounded-lg border px-2 pt-2 shadow-sm transition-colors',
+            'bg-canvas-50 border-canvas-100 rounded-lg border px-2 pt-2 shadow-sm transition-colors',
             isLoading && 'animate-pulse opacity-80',
           )}
         >
diff --git a/web/pages/delete-account.tsx b/web/pages/delete-account.tsx
index d8b2f832..ce05c480 100644
--- a/web/pages/delete-account.tsx
+++ b/web/pages/delete-account.tsx
@@ -15,7 +15,7 @@ export default function DeleteAccountPage() {
   return (
     <PageBase
       trackPageView={'delete-account'}
-      className="max-w-4xl mx-auto p-8 text-gray-800 dark:text-white col-span-8 bg-canvas-0"
+      className="max-w-4xl mx-auto p-8 text-gray-800 dark:text-white col-span-8 bg-canvas-50"
     >
       <SEO
         title={t('delete.seo.title', 'Delete Your Account')}
diff --git a/web/pages/events.tsx b/web/pages/events.tsx
index 23a81bce..5f63de83 100644
--- a/web/pages/events.tsx
+++ b/web/pages/events.tsx
@@ -124,28 +124,28 @@ export default function EventsPage() {
               )}
             </p>
             <div className="flex flex-wrap gap-2">
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 📚 {t('events.book_clubs', 'Book clubs')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🎮 {t('events.game_nights', 'Game nights')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🚶 {t('events.walking_groups', 'Walking groups')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 ☕ {t('events.coffee_chats', 'Coffee chats')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🎨 {t('events.creative_workshops', 'Creative workshops')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🤔 {t('events.philosophy_discussions', 'Philosophy discussions')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🌱 {t('events.sustainability_meetups', 'Sustainability meetups')}
               </span>
-              <span className="bg-canvas-0 text-ink-700 px-3 py-1 rounded-full text-xs">
+              <span className="bg-canvas-50 text-ink-700 px-3 py-1 rounded-full text-xs">
                 🎯 {t('events.hobby_exchanges', 'Hobby exchanges')}
               </span>
             </div>
diff --git a/web/pages/messages/index.tsx b/web/pages/messages/index.tsx
index a9f697ee..8bee4131 100644
--- a/web/pages/messages/index.tsx
+++ b/web/pages/messages/index.tsx
@@ -168,7 +168,7 @@ export const MessageChannelRow = (props: {
             {unseen && (
               <div
                 className={clsx(
-                  'text-canvas-0 bg-primary-500 h-4 min-w-[15px] rounded-full p-[2px] text-center text-[10px] ',
+                  'text-canvas-50 bg-primary-500 h-4 min-w-[15px] rounded-full p-[2px] text-center text-[10px] ',
                 )}
               />
             )}
diff --git a/web/pages/privacy.tsx b/web/pages/privacy.tsx
index ace3fedb..d062bd2e 100644
--- a/web/pages/privacy.tsx
+++ b/web/pages/privacy.tsx
@@ -8,7 +8,7 @@ export default function PrivacyPage() {
   const t = useT()
 
   return (
-    <PageBase trackPageView={'terms'} className="max-w-4xl mx-auto p-8 col-span-8 bg-canvas-0">
+    <PageBase trackPageView={'terms'} className="max-w-4xl mx-auto p-8 col-span-8 bg-canvas-50">
       <SEO
         title={t('privacy.seo.title', 'Privacy')}
         description={t('privacy.seo.description', 'Privacy Policy for Compass')}
diff --git a/web/pages/referrals.tsx b/web/pages/referrals.tsx
index 0a036aa3..23f65eb6 100644
--- a/web/pages/referrals.tsx
+++ b/web/pages/referrals.tsx
@@ -22,7 +22,7 @@ export default function ReferralsPage() {
     <PageBase trackPageView={'referrals'} className="items-center">
       <SEO title="Compass" description={title} />
 
-      <Col className="bg-canvas-0 rounded-lg p-4 sm:p-8">
+      <Col className="bg-canvas-50 rounded-lg p-4 sm:p-8">
         <Title>{title}</Title>
 
         <CopyLinkRow url={url} eventTrackingName="copyreferral" />
diff --git a/web/pages/terms.tsx b/web/pages/terms.tsx
index ce879d7b..1ea05904 100644
--- a/web/pages/terms.tsx
+++ b/web/pages/terms.tsx
@@ -9,7 +9,7 @@ export default function TermsPage() {
   return (
     <PageBase
       trackPageView={'terms'}
-      className="max-w-4xl mx-auto p-8 text-gray-800 dark:text-white col-span-8 bg-canvas-0"
+      className="max-w-4xl mx-auto p-8 text-gray-800 dark:text-white col-span-8 bg-canvas-50"
     >
       <SEO
         title={t('terms.seo.title', 'Terms & Conditions')}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index fab9a479..b575e44d 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -86,8 +86,31 @@
     -webkit-tap-highlight-color: transparent;
   }
 
+  /*Background:    #EDE8E0  (current - warm beige)*/
+  /*Sidebar:       #2C2416  (dark espresso brown)*/
+  /*Cards:         #F7F4EF  (cream white)*/
+  /*Primary:       #C17F3E  (warm amber/gold)*/
+  /*Secondary:     #8B5E3C  (terracotta brown)*/
+  /*Accent:        #6B8F71  (sage green)*/
+  /*Text:          #1E1A14  (deep warm black)*/
+  /*Muted text:    #8C8070  (warm gray)*/
+  /*Tags:          #E8D5BC  (light tan)*/
   :root {
     touch-action: pan-y;
+
+    /* Ink - Text Colors */
+    --color-ink-900: 30 26 20; /* Deep Warm Black (#1E1A14) */
+    --color-ink-500: 140 128 112; /* Muted Warm Gray (#8C8070) */
+
+    /* Canvas - Backgrounds & Surfaces */
+    --color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
+    --color-canvas-100: 237 232 224; /* Background - Warm Beige (#EDE8E0) */
+    --color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
+    --color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
+
+    /* Green - Accents */
+    --color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
+
     /* Text / Ink Grey Scale */
     /* High Contrast */
     --color-ink-0: 255 255 255; /* white */
@@ -96,11 +119,11 @@
     --color-ink-200: 255 255 255;
     --color-ink-300: 160 160 160;
     --color-ink-400: 160 160 160;
-    --color-ink-500: 80 80 80;
+    /*--color-ink-500: 80 80 80;*/
     --color-ink-600: 0 0 0;
     --color-ink-700: 0 0 0;
     --color-ink-800: 0 0 0;
-    --color-ink-900: 0 0 0;
+    /*--color-ink-900: 0 0 0;*/
     --color-ink-950: 0 0 0;
     --color-ink-1000: 0 0 0; /* black */
 
@@ -121,10 +144,10 @@
 
     /* Background / Canvas Grey Scale */
     --color-canvas-0: 255 255 255; /* white */
-    --color-canvas-25: 245 245 245;
-    --color-canvas-50: 240 240 240;
-    --color-canvas-100: 220 220 220;
-    --color-canvas-200: 210 210 210;
+    --color-canvas-25: 242 240 232;
+    /*--color-canvas-50: 248 247 255;*/
+    /*--color-canvas-100: 220 220 220;*/
+    /*--color-canvas-200: 210 210 210;*/
     --color-canvas-300: 190 190 190;
     --color-canvas-400: 160 160 160;
     --color-canvas-500: 130 130 130;
@@ -132,20 +155,21 @@
     --color-canvas-700: 75 75 75;
     --color-canvas-800: 50 50 50;
     --color-canvas-900: 30 30 30;
-    --color-canvas-950: 15 15 15;
+    /*--color-canvas-950: 15 15 15;*/
     --color-canvas-1000: 0 0 0; /* black */
 
-    --color-primary-950: 23 37 84; /* very dark navy */
-    --color-primary-900: 30 58 138;
-    --color-primary-800: 30 64 175;
-    --color-primary-700: 29 78 216;
-    --color-primary-600: 29 78 216;
-    --color-primary-500: 59 130 246; /* standard blue */
-    --color-primary-400: 96 165 250;
-    --color-primary-300: 147 197 253;
-    --color-primary-200: 191 219 254;
-    --color-primary-100: 219 234 254;
-    --color-primary-50: 239 246 255; /* very light blue */
+    /* Primary - Warm Amber */
+    --color-primary-950: 250 243 233; /* #FAF3E9 */
+    --color-primary-900: 243 228 206; /* #F3E4CE */
+    --color-primary-800: 232 201 157; /* #E8C99D */
+    --color-primary-700: 220 171 113; /* #DCAB71 */
+    --color-primary-600: 208 147 82; /* #D09352 */
+    --color-primary-500: 193 127 62; /* #C17F3E - Base */
+    --color-primary-400: 166 104 46; /* #A6682E */
+    --color-primary-300: 133 80 34; /* #855022 */
+    --color-primary-200: 101 58 24; /* #653A18 */
+    --color-primary-100: 71 39 16; /* #472710 */
+    --color-primary-50: 43 21 8; /* #2B1508 */
 
     --color-yes-0: 255 255 255;
     --color-yes-50: 249 249 249;
@@ -180,7 +204,7 @@
     --color-green-800: 22 101 52;
     --color-green-700: 21 128 61;
     --color-green-600: 22 163 74;
-    --color-green-500: 34 197 94; /* standard green */
+    /*--color-green-500: 34 197 94; !* standard green *!*/
     --color-green-400: 74 222 128;
     --color-green-300: 110 231 183; /* vibrant but not neon */
     --color-green-200: 167 243 208; /* gentle mid-light tone */
@@ -454,14 +478,14 @@ ul {
 
 .custom-link a,
 .custom-link button {
-  color: #0969da;
+  color: #c17f3e;
   text-decoration: none;
   font-family: var(--font-main), serif;
 }
 
 .dark .custom-link a,
 .dark .custom-link button {
-  color: #4493f8;
+  color: #c17f3e;
   text-decoration: none;
   font-family: var(--font-main), serif;
 }
@@ -481,7 +505,7 @@ ul {
 }
 
 .body-bg {
-  background-color: rgb(var(--color-canvas-0));
+  background-color: rgb(var(--color-canvas-100));
 }
 
 /* Restore normal ol numbers and ensure they are visible */