Change color palette

2026-05-14 01:54:40 -04:00 · 2026-04-30 14:13:56 +02:00
parent 4f244997bb
commit ae72e5cf3f
69 changed files with 173 additions and 122 deletions
--- 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) => (
--- 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
--- 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}
--- 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',
      )}
    >
--- 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}`}
--- 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
--- 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) && (
--- 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
--- 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}
--- 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',
--- 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',
--- 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"
    />
  )
--- 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>
--- 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>
      ) : (
--- 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>
      ) : (
--- 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">
--- 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})}
            >
--- 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)
--- 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})
--- 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
--- 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})
--- 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})
--- 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
--- 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>
--- 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
--- 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"
--- 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)}
          />
        )}
--- 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}
          />
--- 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
--- 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} />
--- 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
--- 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
--- 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',
                  )}
                />
              )}
--- 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>) =>
--- 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',
--- 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')} />
--- 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)
--- 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" />
--- 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 &&
--- 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}
--- 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) => (
--- 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>
--- 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"
--- 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}
--- 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}
--- 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}
--- 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,
              )}
--- 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>
--- 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,
      )}
    >
--- 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}
--- 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>
  )
 }
--- 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
--- 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>
    )
  },
 )
--- 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,
        )}
--- 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'
--- 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,
      )}
    >
--- 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
--- 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}
--- 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}
--- 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',
--- 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,
      )}
--- 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',
          )}
        >
--- 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')}
--- 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>
--- 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] ',
                )}
              />
            )}
--- 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')}
--- 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" />
--- 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')}
--- 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 */