diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index d4534f14..d8836cc0 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -36,10 +36,10 @@ type ImportanceColorsType = {
 }
 
 export const IMPORTANCE_RADIO_COLORS: ImportanceColorsType = {
-  0: `bg-teal-300 ring-teal-200`,
-  1: `bg-teal-500 ring-teal-200`,
-  2: `bg-teal-700 ring-teal-300`,
-  3: `bg-teal-900 ring-teal-400`,
+  0: `bg-teal-700 ring-teal-200`,
+  1: `bg-teal-800 ring-teal-200`,
+  2: `bg-teal-900 ring-teal-300`,
+  3: `bg-teal-950 ring-teal-400`,
 }
 
 export const IMPORTANCE_DISPLAY_COLORS: ImportanceColorsType = {
diff --git a/web/components/buttons/button.tsx b/web/components/buttons/button.tsx
index 48a4e2aa..337b183c 100644
--- a/web/components/buttons/button.tsx
+++ b/web/components/buttons/button.tsx
@@ -69,7 +69,7 @@ export function buttonClass(size: SizeType, color: ColorType) {
     color === 'gradient' && [gradient, 'from-primary-500 to-blue-400'],
     color === 'gradient-pink' && [gradient, 'from-primary-500 to-fuchsia-500'],
     color === 'gray-white' &&
-      'text-ink-600 hover:text-ink-900 disabled:text-ink-300 disabled:bg-transparent',
+      'text-ink-500 hover:text-ink-900 disabled:text-ink-300 disabled:bg-transparent',
     color === 'gold' && [
       gradient,
       'enabled:!bg-gradient-to-br from-yellow-400 via-yellow-100 to-yellow-300 dark:from-yellow-600 dark:via-yellow-200 dark:to-yellow-400 !text-gray-900',
diff --git a/web/components/comments/dropdown-menu.tsx b/web/components/comments/dropdown-menu.tsx
index 527c71ae..7239043a 100644
--- a/web/components/comments/dropdown-menu.tsx
+++ b/web/components/comments/dropdown-menu.tsx
@@ -90,7 +90,7 @@ export default function DropdownMenu(props: {
                     className={clsx(
                       selectedItemName && item.name == selectedItemName
                         ? 'bg-primary-100'
-                        : 'hover:bg-ink-100 hover:text-ink-900',
+                        : 'hover:bg-ink-300 hover:text-ink-900',
                       'text-ink-700',
                       'flex w-full gap-2 px-4 py-2 text-left text-sm'
                     )}
diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index 284cc57d..8bb74059 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -249,7 +249,7 @@ export function DesktopFilters(props: {
       {/*  menuWidth="w-40"*/}
       {/*/>*/}
       <button
-        className="text-ink-500 hover:text-primary-500 underline"
+        className="text-ink-900 hover:text-primary-500 underline"
         onClick={clearFilters}
       >
         Clear filters
diff --git a/web/components/votes/vote-info.tsx b/web/components/votes/vote-info.tsx
index 7c25ca42..e207df1e 100644
--- a/web/components/votes/vote-info.tsx
+++ b/web/components/votes/vote-info.tsx
@@ -39,7 +39,7 @@ export function VoteComponent() {
       <Row className="items-center justify-between flex-col xxs:flex-row mb-4 xxs:mb-0 gap-2">
         <Title className="text-3xl">Proposals</Title>
         <div className="flex items-center gap-2 text-sm justify-end">
-          <label htmlFor="orderBy" className="text-gray-600">Order by:</label>
+          <label htmlFor="orderBy" className="text-ink-700">Order by:</label>
           <select
             id="orderBy"
             value={orderBy}
@@ -71,7 +71,7 @@ export function VoteComponent() {
           <VoteCreator
               onEditor={(e) => setEditor(e)}
           />
-          <Row className="mx-2 mb-2 items-center gap-2 text-sm text-gray-500">
+          <Row className="mx-2 mb-2 items-center gap-2 text-sm">
               <input
                   type="checkbox"
                   id="anonymous"
diff --git a/web/components/votes/vote-item.tsx b/web/components/votes/vote-item.tsx
index f028dd85..f14a6bf5 100644
--- a/web/components/votes/vote-item.tsx
+++ b/web/components/votes/vote-item.tsx
@@ -26,11 +26,11 @@ export function VoteItem(props: {
   }, [vote.creator_id])
   // console.debug('creator', creator)
   return (
-    <Col className={'mb-4 rounded-lg border border-ink-200 p-4'}>
+    <Col className={'mb-4 rounded-lg border border-canvas-200 p-4'}>
       <Row className={'mb-2'}>
         <Col className={'flex-grow'}>
           <p className={'text-2xl'}>{vote.title}</p>
-          <Col className='text-sm text-gray-500 italic'>
+          <Col className='text-sm italic'>
             <Content className="w-full" content={vote.description as JSONContent}/>
           </Col>
           <Row className={'gap-2 mt-2 items-center justify-between w-full custom-link flex-wrap'}>
diff --git a/web/components/widgets/radio-toggle-group.tsx b/web/components/widgets/radio-toggle-group.tsx
index f3541048..afe437f5 100644
--- a/web/components/widgets/radio-toggle-group.tsx
+++ b/web/components/widgets/radio-toggle-group.tsx
@@ -27,7 +27,7 @@ export function RadioToggleGroup(props: {
 
   const length = orderedChoicesMap.length
   return (
-    <Row className="text-ink-500 dark:text-ink-500 mb-6 items-center gap-3 text-sm">
+    <Row className="text-ink-600 mb-6 items-center gap-3 text-sm">
       {orderedChoicesMap[0][0]}
       <RadioGroup
         className={clsx(
diff --git a/web/components/widgets/show-more.tsx b/web/components/widgets/show-more.tsx
index 25d2f9bd..4cdf1955 100644
--- a/web/components/widgets/show-more.tsx
+++ b/web/components/widgets/show-more.tsx
@@ -16,7 +16,7 @@ export function ShowMore(props: ShowMoreProps) {
       <button
         type="button"
         onClick={() => setShowMoreInfo(!showMoreInfo)}
-        className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center"
+        className="text-primary-600 hover:text-primary-800 flex items-center"
       >
         {showMoreInfo ? labelOpen : labelClosed}
         <svg
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 4f87b021..b569a537 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -10,6 +10,7 @@
 .main-font {
     font-family: var(--font-main), serif;
 }
+
 .main-font a,
 .main-font label,
 .main-font button {
@@ -35,20 +36,36 @@
 
     :root {
         /* Text / Ink Grey Scale */
+        /* High Contrast */
         --color-ink-0: 255 255 255; /* white */
-        --color-ink-50: 245 245 245;
-        --color-ink-100: 230 230 230;
-        --color-ink-200: 200 200 200;
-        --color-ink-300: 170 170 170;
-        --color-ink-400: 140 140 140;
-        --color-ink-500: 110 110 110;
-        --color-ink-600: 85 85 85;
-        --color-ink-700: 60 60 60;
-        --color-ink-800: 40 40 40;
-        --color-ink-900: 25 25 25;
-        --color-ink-950: 12 12 12;
+        --color-ink-50: 255 255 255;
+        --color-ink-100: 255 255 255;
+        --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-600: 0 0 0;
+        --color-ink-700: 0 0 0;
+        --color-ink-800: 0 0 0;
+        --color-ink-900: 0 0 0;
+        --color-ink-950: 0 0 0;
         --color-ink-1000: 0 0 0; /* black */
 
+        /* Medium Contrast */
+        /*--color-ink-0: 255 255 255; !* white *!*/
+        /*--color-ink-50: 245 245 245;*/
+        /*--color-ink-100: 230 230 230;*/
+        /*--color-ink-200: 200 200 200;*/
+        /*--color-ink-300: 170 170 170;*/
+        /*--color-ink-400: 140 140 140;*/
+        /*--color-ink-500: 110 110 110;*/
+        /*--color-ink-600: 85 85 85;*/
+        /*--color-ink-700: 60 60 60;*/
+        /*--color-ink-800: 40 40 40;*/
+        /*--color-ink-900: 25 25 25;*/
+        /*--color-ink-950: 12 12 12;*/
+        /*--color-ink-1000: 0 0 0; !* black *!*/
+
         /* Background / Canvas Grey Scale */
         --color-canvas-0: 255 255 255; /* white */
         --color-canvas-25: 245 245 245;
@@ -69,7 +86,7 @@
         --color-primary-900: 30 58 138;
         --color-primary-800: 30 64 175;
         --color-primary-700: 29 78 216;
-        --color-primary-600: 37 99 235;
+        --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;
@@ -115,19 +132,7 @@
         --color-green-300: 110 231 183; /* vibrant but not neon */
         --color-green-200: 167 243 208; /* gentle mid-light tone */
         --color-green-100: 209 260 229; /* soft and airy */
-        --color-green-50: 240 263 245;  /* subtle, barely tinted background */
-
-        --color-red-950: 69 10 10; /* darkest red */
-        --color-red-900: 127 29 29;
-        --color-red-800: 153 27 27;
-        --color-red-700: 185 28 28;
-        --color-red-600: 220 38 38;
-        --color-red-500: 239 68 68; /* standard red */
-        --color-red-400: 248 113 113;
-        --color-red-300: 252 165 165;
-        --color-red-200: 254 202 202;
-        --color-red-100: 254 226 226;
-        --color-red-50: 254 242 242; /* lightest red */
+        --color-green-50: 240 263 245; /* subtle, barely tinted background */
 
         --color-yellow-950: 66 50 3; /* darkest yellow */
         --color-yellow-900: 113 63 18;
@@ -140,60 +145,51 @@
         --color-yellow-200: 253 230 138;
         --color-yellow-100: 254 243 199;
         --color-yellow-50: 255 251 235; /* lightest yellow */
+
+        --color-red-950: 69 10 10; /* darkest red */
+        --color-red-900: 127 29 29;
+        --color-red-800: 153 27 27;
+        --color-red-700: 185 28 28;
+        --color-red-600: 220 38 38;
+        --color-red-500: 239 68 68; /* standard red */
+        --color-red-400: 248 113 113;
+        --color-red-300: 252 165 165;
+        --color-red-200: 254 202 202;
+        --color-red-100: 254 226 226;
+        --color-red-50: 254 242 242; /* lightest red */
     }
 
     .dark {
         color-scheme: dark;
 
-        --color-green-50: 240 253 244; /* lightest green */
-        --color-green-100: 220 252 231;
-        --color-green-200: 187 247 208;
-        --color-green-300: 134 239 172;
-        --color-green-400: 74 222 128;
-        --color-green-500: 34 197 94; /* standard green */
-        --color-green-600: 22 163 74;
-        --color-green-700: 21 128 61;
-        --color-green-800: 22 101 52;
-        --color-green-900: 20 83 45;
-        --color-green-950: 5 46 22; /* darkest green */
-
-        --color-red-50: 254 242 242; /* lightest red */
-        --color-red-100: 254 226 226;
-        --color-red-200: 254 202 202;
-        --color-red-300: 252 165 165;
-        --color-red-400: 248 113 113;
-        --color-red-500: 239 68 68; /* standard red */
-        --color-red-600: 220 38 38;
-        --color-red-700: 185 28 28;
-        --color-red-800: 153 27 27;
-        --color-red-900: 127 29 29;
-        --color-red-950: 69 10 10; /* darkest red */
-
-        --color-yellow-50: 255 251 235; /* lightest yellow */
-        --color-yellow-100: 254 243 199;
-        --color-yellow-200: 253 230 138;
-        --color-yellow-300: 252 211 77;
-        --color-yellow-400: 251 191 36;
-        --color-yellow-500: 245 158 11; /* standard yellow */
-        --color-yellow-600: 217 119 6;
-        --color-yellow-700: 180 83 9;
-        --color-yellow-800: 146 64 14;
-        --color-yellow-900: 113 63 18;
-        --color-yellow-950: 66 50 3; /* darkest yellow */
-
+        /* High Contrast */
         --color-ink-1000: 255 255 255; /* white */
-        --color-ink-950: 250 250 250; /* #FAFAFA */
-        --color-ink-900: 242 242 242; /* #F2F2F2 */
-        --color-ink-800: 217 217 217; /* #D9D9D9 */
-        --color-ink-700: 191 191 191; /* #BFBFBF */
-        --color-ink-600: 166 166 166; /* #A6A6A6 */
-        --color-ink-500: 140 140 140; /* #8C8C8C */
-        --color-ink-400: 115 115 115; /* #737373 */
-        --color-ink-300: 89 89 89; /* #595959 */
-        --color-ink-200: 64 64 64; /* #404040 */
-        --color-ink-100: 34 34 34; /* #222222 */
-        --color-ink-50: 17 17 17; /* #111111 */
+        --color-ink-950: 255 255 255;
+        --color-ink-900: 255 255 255;
+        --color-ink-800: 255 255 255;
+        --color-ink-700: 255 255 255;
+        --color-ink-600: 255 255 255;
+        --color-ink-500: 200 200 200;
+        --color-ink-400: 100 100 100;
+        --color-ink-300: 100 100 100;
+        --color-ink-200: 0 0 0;
+        --color-ink-100: 0 0 0;
+        --color-ink-50: 0 0 0;
         --color-ink-0: 0 0 0; /* black */
+        /* Medium Contrast */
+        /*--color-ink-1000: 255 255 255; !* white *!*/
+        /*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
+        /*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
+        /*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
+        /*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
+        /*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
+        /*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
+        /*--color-ink-400: 115 115 115; !* #737373 *!*/
+        /*--color-ink-300: 89 89 89; !* #595959 *!*/
+        /*--color-ink-200: 64 64 64; !* #404040 *!*/
+        /*--color-ink-100: 34 34 34; !* #222222 *!*/
+        /*--color-ink-50: 17 17 17; !* #111111 *!*/
+        /*--color-ink-0: 0 0 0; !* black *!*/
 
         --color-canvas-25: 0 0 0;
         --color-canvas-0: 20 20 20;
@@ -204,9 +200,9 @@
 
         --color-primary-950: 255 255 255;
         --color-primary-900: 255 255 255;
-        --color-primary-800: 255 255 255;
+        --color-primary-800: 170 220 250;
         --color-primary-700: 255 255 255;
-        --color-primary-600: 96 165 250;
+        --color-primary-600: 150 200 250;
         --color-primary-500: 59 130 246; /* standard blue */
         --color-primary-400: 37 99 235;
         --color-primary-300: 29 78 216;
@@ -214,7 +210,6 @@
         --color-primary-100: 30 58 138;
         --color-primary-50: 23 37 84; /* very dark navy */
 
-
         --color-no-950: 255 255 255; /* white */
         --color-no-900: 242 242 242;
         --color-no-800: 217 217 217;
@@ -228,7 +223,6 @@
         --color-no-50: 17 17 17;
         --color-no-0: 0 0 0; /* black */
 
-
         --color-yes-950: 255 255 255; /* white */
         --color-yes-900: 242 242 242;
         --color-yes-800: 217 217 217;
@@ -242,6 +236,42 @@
         --color-yes-50: 17 17 17;
         --color-yes-0: 0 0 0; /* black */
 
+        --color-green-50: 240 253 244; /* lightest green */
+        --color-green-100: 220 252 231;
+        --color-green-200: 187 247 208;
+        --color-green-300: 134 239 172;
+        --color-green-400: 74 222 128;
+        --color-green-500: 34 197 94; /* standard green */
+        --color-green-600: 22 163 74;
+        --color-green-700: 21 128 61;
+        --color-green-800: 22 101 52;
+        --color-green-900: 20 83 45;
+        --color-green-950: 5 46 22; /* darkest green */
+
+        --color-yellow-50: 255 251 235; /* lightest yellow */
+        --color-yellow-100: 254 243 199;
+        --color-yellow-200: 253 230 138;
+        --color-yellow-300: 252 211 77;
+        --color-yellow-400: 251 191 36;
+        --color-yellow-500: 245 158 11; /* standard yellow */
+        --color-yellow-600: 217 119 6;
+        --color-yellow-700: 180 83 9;
+        --color-yellow-800: 146 64 14;
+        --color-yellow-900: 113 63 18;
+        --color-yellow-950: 66 50 3; /* darkest yellow */
+
+        --color-red-50: 254 242 242; /* lightest red */
+        --color-red-100: 254 226 226;
+        --color-red-200: 254 202 202;
+        --color-red-300: 252 165 165;
+        --color-red-400: 248 113 113;
+        --color-red-500: 239 68 68; /* standard red */
+        --color-red-600: 220 38 38;
+        --color-red-700: 185 28 28;
+        --color-red-800: 153 27 27;
+        --color-red-900: 127 29 29;
+        --color-red-950: 69 10 10; /* darkest red */
+
     }
 }
 
@@ -365,9 +395,10 @@ ul {
     padding-left: 1.25rem;
     margin-top: 0.5rem;
 }
+
 .custom-link a,
-.custom-link button{
-    color: rgb(var(--color-primary-500));
+.custom-link button {
+    color: rgb(var(--color-primary-600));
     text-decoration: none;
     font-family: var(--font-main), serif;
 }
@@ -402,12 +433,12 @@ ol {
     list-style-position: inside; /* or 'inside' if you prefer */
     /*margin: 0 0 1rem 0;*/
     list-style: decimal;
-    padding-left: 0.5rem;     /* space for numbers */
+    padding-left: 0.5rem; /* space for numbers */
 }
 
 /* Ensure li behaves as a list item (some resets or flex can break markers) */
 ol > li {
-    display: list-item;           /* prevents flex from removing marker layout */
+    display: list-item; /* prevents flex from removing marker layout */
     /*padding-left: 0rem;   !* extra spacing after number *!*/
     /*text-indent: -0rem;   !* pull first line back so text aligns *!*/
 }