diff --git a/packages/extension/src/frame/render.ts b/packages/extension/src/frame/render.ts
index 5851011186a..9122cdff96f 100644
--- a/packages/extension/src/frame/render.ts
+++ b/packages/extension/src/frame/render.ts
@@ -127,7 +127,7 @@ const ensureStyles = (): void => {
       padding: 0 1rem;
       border: 0;
       border-radius: 12px;
-      background: #c029f0;
+      background: #8112D2;
       color: #ffffff;
       font: inherit;
       font-size: 0.9375rem;
diff --git a/packages/shared/src/components/sidebar/common.tsx b/packages/shared/src/components/sidebar/common.tsx
index e25cf19874b..e5f3e23f8b3 100644
--- a/packages/shared/src/components/sidebar/common.tsx
+++ b/packages/shared/src/components/sidebar/common.tsx
@@ -53,7 +53,7 @@ export const navBtnClass =
   'flex flex-1 items-center pl-2 laptop:pl-0 pr-5 laptop:pr-3 h-10 laptop:h-9 overflow-hidden';
 export const SidebarAside = classed(
   'aside',
-  'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-default border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0 h-full',
+  'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-subtle border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0 h-full',
 );
 export const SidebarScrollWrapper = classed(
   'div',
diff --git a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css
index 404abebd3f0..58719769433 100644
--- a/packages/shared/src/features/onboarding/shared/PricingPlan.module.css
+++ b/packages/shared/src/features/onboarding/shared/PricingPlan.module.css
@@ -19,7 +19,7 @@
   }
 
   &::before {
-    background: linear-gradient(135.18deg, #E769FB 0%, #9E70F8 24.16%, #68A6FD 40%, #9E70F8 71.33%, #D473F4 100%);
+    background: linear-gradient(135.18deg, #BC94F2 0%, #A0ABF3 24.16%, #92CAFF 40%, #A0ABF3 71.33%, #A35DED 100%);
     content: '';
     position: absolute;
     top: 0;
diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css
index 7b803a4e5a7..b800157f6f8 100644
--- a/packages/shared/src/styles/base.css
+++ b/packages/shared/src/styles/base.css
@@ -814,7 +814,7 @@ details.right-icon {
 }
 
 .squad-background-fade {
-  background: radial-gradient(ellipse, #c029f088 0%, #c029f000 400px);
+  background: radial-gradient(ellipse, #8112D288 0%, #8112D200 400px);
   background-size: 1200px 500px;
   background-position: center -250px;
   background-repeat: no-repeat;
@@ -911,7 +911,7 @@ meter::-webkit-meter-bar {
   }
 
   &-best-price {
-    background: linear-gradient(135deg, #E769FB 0%, #9E70F8 44.71%, #68A6FD 100%);
+    background: linear-gradient(135deg, #BC94F2 0%, #A0ABF3 44.71%, #92CAFF 100%);
   }
 }
 
@@ -1077,11 +1077,11 @@ meter::-webkit-meter-bar {
   }
 
   .top-hero-panel-border {
-    background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%);
+    background: linear-gradient(122deg, #2C2986 0%, #500086 45%, #E85692 100%);
   }
 
   .top-hero-glow {
-    background: rgb(255 0 168 / 35%);
+    background: rgb(249 86 175 / 35%);
   }
 
   .top-hero-aurora {
diff --git a/packages/shared/src/styles/colors.ts b/packages/shared/src/styles/colors.ts
index 27342ceb367..131e3755d0f 100644
--- a/packages/shared/src/styles/colors.ts
+++ b/packages/shared/src/styles/colors.ts
@@ -39,148 +39,148 @@ type ColorPalette = Record<Exclude<ColorName, ColorName.Salt>, Color> &
 
 const colors: ColorPalette = {
   burger: {
-    '10': '#C98464',
-    '20': '#C07A5B',
-    '30': '#B67052',
-    '40': '#AD6648',
-    '50': '#A0583C',
-    '60': '#914B31',
-    '70': '#864129',
-    '80': '#7C3822',
-    '90': '#722F1B',
+    '10': '#E1CCBF',
+    '20': '#D1B7A6',
+    '30': '#BE9F8B',
+    '40': '#A6856F',
+    '50': '#916F58',
+    '60': '#7D5D48',
+    '70': '#6B4E3B',
+    '80': '#594130',
+    '90': '#473325',
   },
   blueCheese: {
-    '10': '#6FF1F6',
-    '20': '#5CECF1',
-    '30': '#45E5ED',
-    '40': '#2CDCE6',
-    '50': '#0DCFDC',
-    '60': '#08C0CE',
-    '70': '#05B5C5',
-    '80': '#02AABD',
-    '90': '#009FB3',
+    '10': '#B7F5FD',
+    '20': '#94E5F0',
+    '30': '#6CD1DF',
+    '40': '#3EBAC9',
+    '50': '#00A6B6',
+    '60': '#0092A1',
+    '70': '#00818E',
+    '80': '#00717D',
+    '90': '#00616B',
   },
   avocado: {
-    '10': '#74F3BC',
-    '20': '#65F1AE',
-    '30': '#51EBA0',
-    '40': '#39E58C',
-    '50': '#1DDC6F',
-    '60': '#15CE5C',
-    '70': '#0FC54F',
-    '80': '#0ABD42',
-    '90': '#04B435',
+    '10': '#B7F7C7',
+    '20': '#96E8AC',
+    '30': '#70D68F',
+    '40': '#47BF72',
+    '50': '#19AB5A',
+    '60': '#00974C',
+    '70': '#008542',
+    '80': '#007539',
+    '90': '#0C6332',
   },
   lettuce: {
-    '10': '#DBFE6C',
-    '20': '#CCFB5B',
-    '30': '#BDF849',
-    '40': '#ACF535',
-    '50': '#92F21D',
-    '60': '#7DE914',
-    '70': '#6FE20F',
-    '80': '#62DB09',
-    '90': '#58D404',
+    '10': '#A2DF6C',
+    '20': '#A2DF6C',
+    '30': '#A2DF6C',
+    '40': '#88CB44',
+    '50': '#72B818',
+    '60': '#65A700',
+    '70': '#5B9701',
+    '80': '#548813',
+    '90': '#4C771E',
   },
   cheese: {
-    '10': '#FFF76F',
-    '20': '#FFF35A',
-    '30': '#FFEF40',
-    '40': '#FFE923',
-    '50': '#FFDF00',
-    '60': '#FCD400',
-    '70': '#F9CC00',
-    '80': '#F6C400',
-    '90': '#F3BC00',
+    '10': '#E6D858',
+    '20': '#E6D858',
+    '30': '#E6D858',
+    '40': '#D4C31B',
+    '50': '#C1B100',
+    '60': '#B1A300',
+    '70': '#A39500',
+    '80': '#968900',
+    '90': '#877C11',
   },
   bun: {
-    '10': '#FFB760',
-    '20': '#FFAA55',
-    '30': '#FF9D48',
-    '40': '#FF8E3B',
-    '50': '#FF7A2B',
-    '60': '#FA6620',
-    '70': '#F55919',
-    '80': '#F04C11',
-    '90': '#EB3F0A',
+    '10': '#FFE1CC',
+    '20': '#FFC89E',
+    '30': '#FFA761',
+    '40': '#EA8B36',
+    '50': '#D67400',
+    '60': '#BC6500',
+    '70': '#A65800',
+    '80': '#924D00',
+    '90': '#7D4100',
   },
   ketchup: {
-    '10': '#F3796C',
-    '20': '#ED685C',
-    '30': '#E7574B',
-    '40': '#E04337',
-    '50': '#D52B20',
-    '60': '#C72017',
-    '70': '#BD1911',
-    '80': '#B3110B',
-    '90': '#A90A05',
+    '10': '#FEA196',
+    '20': '#F9857A',
+    '30': '#EF655B',
+    '40': '#DD423B',
+    '50': '#CA1C20',
+    '60': '#B20010',
+    '70': '#99000C',
+    '80': '#820008',
+    '90': '#6B0005',
   },
   bacon: {
-    '10': '#FE7AB6',
-    '20': '#FD6EA9',
-    '30': '#FD619D',
-    '40': '#FC538D',
-    '50': '#FC4079',
-    '60': '#F33163',
-    '70': '#EA2654',
-    '80': '#E21C48',
-    '90': '#D9113A',
+    '10': '#FFB5CD',
+    '20': '#FF98BC',
+    '30': '#F976A8',
+    '40': '#E85692',
+    '50': '#D5397F',
+    '60': '#C0296F',
+    '70': '#AA2161',
+    '80': '#941F55',
+    '90': '#7C1D47',
   },
   cabbage: {
-    '10': '#E669FB',
-    '20': '#E05CF8',
-    '30': '#D74CF6',
-    '40': '#CE3DF3',
-    '50': '#C029F0',
-    '60': '#AC1DE4',
-    '70': '#9E15D9',
-    '80': '#900DCF',
-    '90': '#8505C4',
+    '10': '#BC94F2',
+    '20': '#B17BF2',
+    '30': '#A35DED',
+    '40': '#913BE0',
+    '50': '#8112D2',
+    '60': '#6F00B8',
+    '70': '#5E009D',
+    '80': '#500086',
+    '90': '#40006D',
   },
   onion: {
-    '10': '#9D70F8',
-    '20': '#8D62F4',
-    '30': '#8055F0',
-    '40': '#7147ED',
-    '50': '#5F37E9',
-    '60': '#4E2CD7',
-    '70': '#4325C8',
-    '80': '#3B1EBA',
-    '90': '#3319AD',
+    '10': '#A0ABF3',
+    '20': '#8B97F2',
+    '30': '#767FEB',
+    '40': '#6065DC',
+    '50': '#4E4FCD',
+    '60': '#413FB6',
+    '70': '#36329E',
+    '80': '#2C2986',
+    '90': '#221F6B',
   },
   water: {
-    '10': '#68A6FC',
-    '20': '#5C9BFA',
-    '30': '#508CF9',
-    '40': '#427EF7',
-    '50': '#3169F5',
-    '60': '#2556ED',
-    '70': '#1D49E6',
-    '80': '#153CE0',
-    '90': '#0D31D9',
+    '10': '#92CAFF',
+    '20': '#6CB7FD',
+    '30': '#40A1F4',
+    '40': '#0087E0',
+    '50': '#0072BE',
+    '60': '#0061A2',
+    '70': '#00518A',
+    '80': '#004374',
+    '90': '#00355D',
   },
   salt: {
     '0': '#FFFFFF',
-    '10': '#F5F8FC',
-    '20': '#EDF0F7',
-    '30': '#E4E9F2',
-    '40': '#DBE1ED',
-    '50': '#CFD6E6',
-    '60': '#C2CADE',
-    '70': '#B9C2D9',
-    '80': '#B0BBD4',
-    '90': '#A8B3CF',
+    '10': '#F6F6FB',
+    '20': '#EEEEF3',
+    '30': '#E5E6EB',
+    '40': '#DCDCE1',
+    '50': '#D0D0D5',
+    '60': '#C3C3C9',
+    '70': '#B7B7BC',
+    '80': '#AAAAAF',
+    '90': '#9E9EA3',
   },
   pepper: {
-    '10': '#525866',
-    '20': '#494E5B',
-    '30': '#404551',
-    '40': '#383C47',
-    '50': '#2D313A',
-    '60': '#22262D',
-    '70': '#1C1F26',
-    '80': '#17191F',
-    '90': '#0E1217',
+    '10': '#62626B',
+    '20': '#56565E',
+    '30': '#494951',
+    '40': '#3C3C44',
+    '50': '#2E2E36',
+    '60': '#222229',
+    '70': '#19191F',
+    '80': '#131319',
+    '90': '#0E0E14',
   },
   twitter: {
     '10': '#37BBF6',
diff --git a/packages/shared/tailwind/colors.ts b/packages/shared/tailwind/colors.ts
index 107334d73ec..d27d6e0a568 100644
--- a/packages/shared/tailwind/colors.ts
+++ b/packages/shared/tailwind/colors.ts
@@ -1,155 +1,155 @@
 const colors = {
   burger: {
-    10: '#C98464',
-    20: '#C07A5B',
-    30: '#B67052',
-    40: '#AD6648',
-    50: '#A0583C',
-    60: '#914B31',
-    70: '#864129',
-    80: '#7C3822',
-    90: '#722F1B',
+    10: '#E1CCBF',
+    20: '#D1B7A6',
+    30: '#BE9F8B',
+    40: '#A6856F',
+    50: '#916F58',
+    60: '#7D5D48',
+    70: '#6B4E3B',
+    80: '#594130',
+    90: '#473325',
   },
   blueCheese: {
-    10: '#6FF1F6',
-    20: '#5CECF1',
-    30: '#45E5ED',
-    40: '#2CDCE6',
-    50: '#0DCFDC',
-    60: '#08C0CE',
-    70: '#05B5C5',
-    80: '#02AABD',
-    90: '#009FB3',
+    10: '#B7F5FD',
+    20: '#94E5F0',
+    30: '#6CD1DF',
+    40: '#3EBAC9',
+    50: '#00A6B6',
+    60: '#0092A1',
+    70: '#00818E',
+    80: '#00717D',
+    90: '#00616B',
     lightLabel: 'var(--theme-text-primary)',
   },
   avocado: {
-    10: '#74F3BC',
-    20: '#65F1AE',
-    30: '#51EBA0',
-    40: '#39E58C',
-    50: '#1DDC6F',
-    60: '#15CE5C',
-    70: '#0FC54F',
-    80: '#0ABD42',
-    90: '#04B435',
+    10: '#B7F7C7',
+    20: '#96E8AC',
+    30: '#70D68F',
+    40: '#47BF72',
+    50: '#19AB5A',
+    60: '#00974C',
+    70: '#008542',
+    80: '#007539',
+    90: '#0C6332',
     lightLabel: 'var(--theme-text-primary)',
   },
   lettuce: {
-    10: '#DBFE6C',
-    20: '#CCFB5B',
-    30: '#BDF849',
-    40: '#ACF535',
-    50: '#92F21D',
-    60: '#7DE914',
-    70: '#6FE20F',
-    80: '#62DB09',
-    90: '#58D404',
+    10: '#A2DF6C',
+    20: '#A2DF6C',
+    30: '#A2DF6C',
+    40: '#88CB44',
+    50: '#72B818',
+    60: '#65A700',
+    70: '#5B9701',
+    80: '#548813',
+    90: '#4C771E',
     lightLabel: 'var(--theme-text-primary)',
   },
   cheese: {
-    10: '#FFF76F',
-    20: '#FFF35A',
-    30: '#FFEF40',
-    40: '#FFE923',
-    50: '#FFDF00',
-    60: '#FCD400',
-    70: '#F9CC00',
-    80: '#F6C400',
-    90: '#F3BC00',
+    10: '#E6D858',
+    20: '#E6D858',
+    30: '#E6D858',
+    40: '#D4C31B',
+    50: '#C1B100',
+    60: '#B1A300',
+    70: '#A39500',
+    80: '#968900',
+    90: '#877C11',
     lightLabel: 'var(--theme-text-primary)',
   },
   bun: {
-    10: '#FFB760',
-    20: '#FFAA55',
-    30: '#FF9D48',
-    40: '#FF8E3B',
-    50: '#FF7A2B',
-    60: '#FA6620',
-    70: '#F55919',
-    80: '#F04C11',
-    90: '#EB3F0A',
+    10: '#FFE1CC',
+    20: '#FFC89E',
+    30: '#FFA761',
+    40: '#EA8B36',
+    50: '#D67400',
+    60: '#BC6500',
+    70: '#A65800',
+    80: '#924D00',
+    90: '#7D4100',
     lightLabel: 'var(--theme-text-primary)',
   },
   ketchup: {
-    10: '#F3796C',
-    20: '#ED685C',
-    30: '#E7574B',
-    40: '#E04337',
-    50: '#D52B20',
-    60: '#C72017',
-    70: '#BD1911',
-    80: '#B3110B',
-    90: '#A90A05',
+    10: '#FEA196',
+    20: '#F9857A',
+    30: '#EF655B',
+    40: '#DD423B',
+    50: '#CA1C20',
+    60: '#B20010',
+    70: '#99000C',
+    80: '#820008',
+    90: '#6B0005',
   },
   bacon: {
-    10: '#FE7AB6',
-    20: '#FD6EA9',
-    30: '#FD619D',
-    40: '#FC538D',
-    50: '#FC4079',
-    60: '#F33163',
-    70: '#EA2654',
-    80: '#E21C48',
-    90: '#D9113A',
+    10: '#FFB5CD',
+    20: '#FF98BC',
+    30: '#F976A8',
+    40: '#E85692',
+    50: '#D5397F',
+    60: '#C0296F',
+    70: '#AA2161',
+    80: '#941F55',
+    90: '#7C1D47',
   },
   cabbage: {
-    0: '#E669FB00',
-    10: '#E669FB',
-    20: '#E05CF8',
-    30: '#D74CF6',
-    40: '#CE3DF3',
-    50: '#C029F0',
-    60: '#AC1DE4',
-    70: '#9E15D9',
-    80: '#900DCF',
-    90: '#8505C4',
+    0: '#BC94F200',
+    10: '#BC94F2',
+    20: '#B17BF2',
+    30: '#A35DED',
+    40: '#913BE0',
+    50: '#8112D2',
+    60: '#6F00B8',
+    70: '#5E009D',
+    80: '#500086',
+    90: '#40006D',
   },
   onion: {
-    0: '#9D70F800',
-    10: '#9D70F8',
-    20: '#8D62F4',
-    30: '#8055F0',
-    40: '#7147ED',
-    50: '#5F37E9',
-    60: '#4E2CD7',
-    70: '#4325C8',
-    80: '#3B1EBA',
-    90: '#3319AD',
+    0: '#A0ABF300',
+    10: '#A0ABF3',
+    20: '#8B97F2',
+    30: '#767FEB',
+    40: '#6065DC',
+    50: '#4E4FCD',
+    60: '#413FB6',
+    70: '#36329E',
+    80: '#2C2986',
+    90: '#221F6B',
     darkLabel: '#FFFFFF',
   },
   water: {
-    10: '#68A6FC',
-    20: '#5C9BFA',
-    30: '#508CF9',
-    40: '#427EF7',
-    50: '#3169F5',
-    60: '#2556ED',
-    70: '#1D49E6',
-    80: '#153CE0',
-    90: '#0D31D9',
+    10: '#92CAFF',
+    20: '#6CB7FD',
+    30: '#40A1F4',
+    40: '#0087E0',
+    50: '#0072BE',
+    60: '#0061A2',
+    70: '#00518A',
+    80: '#004374',
+    90: '#00355D',
   },
   salt: {
     0: '#FFFFFF',
-    10: '#F5F8FC',
-    20: '#EDF0F7',
-    30: '#E4E9F2',
-    40: '#DBE1ED',
-    50: '#CFD6E6',
-    60: '#C2CADE',
-    70: '#B9C2D9',
-    80: '#B0BBD4',
-    90: '#A8B3CF',
+    10: '#F6F6FB',
+    20: '#EEEEF3',
+    30: '#E5E6EB',
+    40: '#DCDCE1',
+    50: '#D0D0D5',
+    60: '#C3C3C9',
+    70: '#B7B7BC',
+    80: '#AAAAAF',
+    90: '#9E9EA3',
   },
   pepper: {
-    10: '#525866',
-    20: '#494E5B',
-    30: '#404551',
-    40: '#383C47',
-    50: '#2D313A',
-    60: '#22262D',
-    70: '#1C1F26',
-    80: '#17191F',
-    90: '#0E1217',
+    10: '#62626B',
+    20: '#56565E',
+    30: '#494951',
+    40: '#3C3C44',
+    50: '#2E2E36',
+    60: '#222229',
+    70: '#19191F',
+    80: '#131319',
+    90: '#0E0E14',
   },
   twitter: {
     10: '#000000',
diff --git a/packages/shared/tailwind/overlay.ts b/packages/shared/tailwind/overlay.ts
index 6acf4e33618..168e077c889 100644
--- a/packages/shared/tailwind/overlay.ts
+++ b/packages/shared/tailwind/overlay.ts
@@ -1,19 +1,19 @@
 /** TODO: Remove these once we migrated all colors to new naming convention */
 const overlayColors = {
   primary: {
-    burger: '#A0583CA3',
-    blueCheese: '#0DCFDCA3',
-    avocado: '#1DDC6FA3',
-    lettuce: '#92F21DA3',
-    cheese: '#FFDF00A3',
-    bun: '#FF7A2BA3',
-    ketchup: '#D52B20A3',
-    bacon: '#FC4079A3',
-    cabbage: '#C029F0A3',
-    onion: '#5F37E9A3',
-    water: '#3169F5A3',
-    salt: '#A8B3CFA3',
-    pepper: '#0E1217A3',
+    burger: '#916F58A3',
+    blueCheese: '#00A6B6A3',
+    avocado: '#19AB5AA3',
+    lettuce: '#72B818A3',
+    cheese: '#C1B100A3',
+    bun: '#D67400A3',
+    ketchup: '#CA1C20A3',
+    bacon: '#D5397FA3',
+    cabbage: '#8112D2A3',
+    onion: '#4E4FCDA3',
+    water: '#0072BEA3',
+    salt: '#9E9EA3A3',
+    pepper: '#0E0E14A3',
     twitter: '#000000A3',
     whatsapp: '#20B038A3',
     facebook: '#3B5998A3',
@@ -24,19 +24,19 @@ const overlayColors = {
     black: '#000000A3',
   },
   secondary: {
-    burger: '#A0583C66',
-    blueCheese: '#0DCFDC66',
-    avocado: '#1DDC6F66',
-    lettuce: '#92F21D66',
-    cheese: '#FFDF0066',
-    bun: '#FF7A2B66',
-    ketchup: '#D52B2066',
-    bacon: '#FC407966',
-    cabbage: '#C029F066',
-    onion: '#5F37E966',
-    water: '#3169F566',
-    salt: '#A8B3CF66',
-    pepper: '#0E121766',
+    burger: '#916F5866',
+    blueCheese: '#00A6B666',
+    avocado: '#19AB5A66',
+    lettuce: '#72B81866',
+    cheese: '#C1B10066',
+    bun: '#D6740066',
+    ketchup: '#CA1C2066',
+    bacon: '#D5397F66',
+    cabbage: '#8112D266',
+    onion: '#4E4FCD66',
+    water: '#0072BE66',
+    salt: '#9E9EA366',
+    pepper: '#0E0E1466',
     twitter: '#00000066',
     whatsapp: '#20B03866',
     facebook: '#3B599866',
@@ -47,19 +47,19 @@ const overlayColors = {
     black: '#00000066',
   },
   tertiary: {
-    burger: '#A0583C52',
-    blueCheese: '#0DCFDC52',
-    avocado: '#1DDC6F52',
-    lettuce: '#92F21D52',
-    cheese: '#FFDF0052',
-    bun: '#FF7A2B52',
-    ketchup: '#D52B2052',
-    bacon: '#FC407952',
-    cabbage: '#C029F052',
-    onion: '#5F37E952',
-    water: '#3169F552',
-    salt: '#A8B3CF52',
-    pepper: '#0E121752',
+    burger: '#916F5852',
+    blueCheese: '#00A6B652',
+    avocado: '#19AB5A52',
+    lettuce: '#72B81852',
+    cheese: '#C1B10052',
+    bun: '#D6740052',
+    ketchup: '#CA1C2052',
+    bacon: '#D5397F52',
+    cabbage: '#8112D252',
+    onion: '#4E4FCD52',
+    water: '#0072BE52',
+    salt: '#9E9EA352',
+    pepper: '#0E0E1452',
     twitter: '#00000052',
     whatsapp: '#20B03852',
     facebook: '#3B599852',
@@ -70,19 +70,19 @@ const overlayColors = {
     black: '#00000052',
   },
   quaternary: {
-    burger: '#A0583C3D',
-    blueCheese: '#0DCFDC3D',
-    avocado: '#1DDC6F3D',
-    lettuce: '#92F21D3D',
-    cheese: '#FFDF003D',
-    bun: '#FF7A2B3D',
-    ketchup: '#D52B203D',
-    bacon: '#FC40793D',
-    cabbage: '#C029F03D',
-    onion: '#5F37E93D',
-    water: '#3169F53D',
-    salt: '#A8B3CF3D',
-    pepper: '#0E12173D',
+    burger: '#916F583D',
+    blueCheese: '#00A6B63D',
+    avocado: '#19AB5A3D',
+    lettuce: '#72B8183D',
+    cheese: '#C1B1003D',
+    bun: '#D674003D',
+    ketchup: '#CA1C203D',
+    bacon: '#D5397F3D',
+    cabbage: '#8112D23D',
+    onion: '#4E4FCD3D',
+    water: '#0072BE3D',
+    salt: '#9E9EA33D',
+    pepper: '#0E0E143D',
     twitter: '#0000003D',
     whatsapp: '#20B0383D',
     facebook: '#3B59983D',
@@ -93,19 +93,19 @@ const overlayColors = {
     black: '#0000003D',
   },
   active: {
-    burger: '#A0583C29',
-    blueCheese: '#0DCFDC29',
-    avocado: '#1DDC6F29',
-    lettuce: '#92F21D29',
-    cheese: '#FFDF0029',
-    bun: '#FF7A2B29',
-    ketchup: '#D52B2029',
-    bacon: '#FC407929',
-    cabbage: '#C029F029',
-    onion: '#5F37E929',
-    water: '#3169F529',
-    salt: '#A8B3CF29',
-    pepper: '#0E121729',
+    burger: '#916F5829',
+    blueCheese: '#00A6B629',
+    avocado: '#19AB5A29',
+    lettuce: '#72B81829',
+    cheese: '#C1B10029',
+    bun: '#D6740029',
+    ketchup: '#CA1C2029',
+    bacon: '#D5397F29',
+    cabbage: '#8112D229',
+    onion: '#4E4FCD29',
+    water: '#0072BE29',
+    salt: '#9E9EA329',
+    pepper: '#0E0E1429',
     twitter: '#00000029',
     whatsapp: '#20B03829',
     facebook: '#3B599829',
@@ -116,19 +116,19 @@ const overlayColors = {
     black: '#00000029',
   },
   float: {
-    burger: '#A0583C14',
-    blueCheese: '#0DCFDC14',
-    avocado: '#1DDC6F14',
-    lettuce: '#92F21D14',
-    cheese: '#FFDF0014',
-    bun: '#FF7A2B14',
-    ketchup: '#D52B2014',
-    bacon: '#FC407914',
-    cabbage: '#C029F014',
-    onion: '#5F37E914',
-    water: '#3169F514',
-    salt: '#A8B3CF14',
-    pepper: '#0E121714',
+    burger: '#916F5814',
+    blueCheese: '#00A6B614',
+    avocado: '#19AB5A14',
+    lettuce: '#72B81814',
+    cheese: '#C1B10014',
+    bun: '#D6740014',
+    ketchup: '#CA1C2014',
+    bacon: '#D5397F14',
+    cabbage: '#8112D214',
+    onion: '#4E4FCD14',
+    water: '#0072BE14',
+    salt: '#9E9EA314',
+    pepper: '#0E0E1414',
     twitter: '#00000014',
     whatsapp: '#20B03814',
     facebook: '#3B599814',
diff --git a/packages/storybook/stories/tokens/PaletteRetone.stories.tsx b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx
new file mode 100644
index 00000000000..19cb18b4017
--- /dev/null
+++ b/packages/storybook/stories/tokens/PaletteRetone.stories.tsx
@@ -0,0 +1,366 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+/**
+ * Side-by-side documentation of the "purple re-tone" palette change.
+ *
+ * The token structure, names, shade levels and every opacity percentage are
+ * unchanged — only the underlying hues of the raw ramps were shifted. The
+ * swatch comparisons below are rendered with inline styles (theme-independent)
+ * so the OLD and NEW palettes are always visible together; the "Components &
+ * surfaces" story renders live Tailwind tokens and follows the Storybook theme
+ * toolbar so you can eyeball dark and light.
+ */
+
+type Ramp = Record<string, string>;
+type Palette = Record<string, Ramp>;
+
+// Snapshot of the previous raw ramps (the 13 chromatic/neutral families that changed).
+const OLD: Palette = {
+  burger: { 10:'#C98464',20:'#C07A5B',30:'#B67052',40:'#AD6648',50:'#A0583C',60:'#914B31',70:'#864129',80:'#7C3822',90:'#722F1B' },
+  blueCheese: { 10:'#6FF1F6',20:'#5CECF1',30:'#45E5ED',40:'#2CDCE6',50:'#0DCFDC',60:'#08C0CE',70:'#05B5C5',80:'#02AABD',90:'#009FB3' },
+  avocado: { 10:'#74F3BC',20:'#65F1AE',30:'#51EBA0',40:'#39E58C',50:'#1DDC6F',60:'#15CE5C',70:'#0FC54F',80:'#0ABD42',90:'#04B435' },
+  lettuce: { 10:'#DBFE6C',20:'#CCFB5B',30:'#BDF849',40:'#ACF535',50:'#92F21D',60:'#7DE914',70:'#6FE20F',80:'#62DB09',90:'#58D404' },
+  cheese: { 10:'#FFF76F',20:'#FFF35A',30:'#FFEF40',40:'#FFE923',50:'#FFDF00',60:'#FCD400',70:'#F9CC00',80:'#F6C400',90:'#F3BC00' },
+  bun: { 10:'#FFB760',20:'#FFAA55',30:'#FF9D48',40:'#FF8E3B',50:'#FF7A2B',60:'#FA6620',70:'#F55919',80:'#F04C11',90:'#EB3F0A' },
+  ketchup: { 10:'#F3796C',20:'#ED685C',30:'#E7574B',40:'#E04337',50:'#D52B20',60:'#C72017',70:'#BD1911',80:'#B3110B',90:'#A90A05' },
+  bacon: { 10:'#FE7AB6',20:'#FD6EA9',30:'#FD619D',40:'#FC538D',50:'#FC4079',60:'#F33163',70:'#EA2654',80:'#E21C48',90:'#D9113A' },
+  cabbage: { 10:'#E669FB',20:'#E05CF8',30:'#D74CF6',40:'#CE3DF3',50:'#C029F0',60:'#AC1DE4',70:'#9E15D9',80:'#900DCF',90:'#8505C4' },
+  onion: { 10:'#9D70F8',20:'#8D62F4',30:'#8055F0',40:'#7147ED',50:'#5F37E9',60:'#4E2CD7',70:'#4325C8',80:'#3B1EBA',90:'#3319AD' },
+  water: { 10:'#68A6FC',20:'#5C9BFA',30:'#508CF9',40:'#427EF7',50:'#3169F5',60:'#2556ED',70:'#1D49E6',80:'#153CE0',90:'#0D31D9' },
+  salt: { 0:'#FFFFFF',10:'#F5F8FC',20:'#EDF0F7',30:'#E4E9F2',40:'#DBE1ED',50:'#CFD6E6',60:'#C2CADE',70:'#B9C2D9',80:'#B0BBD4',90:'#A8B3CF' },
+  pepper: { 10:'#525866',20:'#494E5B',30:'#404551',40:'#383C47',50:'#2D313A',60:'#22262D',70:'#1C1F26',80:'#17191F',90:'#0E1217' },
+};
+
+// The new re-toned ramps now shipping in the palette.
+const NEW: Palette = {
+  burger: { 10:'#E1CCBF',20:'#D1B7A6',30:'#BE9F8B',40:'#A6856F',50:'#916F58',60:'#7D5D48',70:'#6B4E3B',80:'#594130',90:'#473325' },
+  blueCheese: { 10:'#B7F5FD',20:'#94E5F0',30:'#6CD1DF',40:'#3EBAC9',50:'#00A6B6',60:'#0092A1',70:'#00818E',80:'#00717D',90:'#00616B' },
+  avocado: { 10:'#B7F7C7',20:'#96E8AC',30:'#70D68F',40:'#47BF72',50:'#19AB5A',60:'#00974C',70:'#008542',80:'#007539',90:'#0C6332' },
+  lettuce: { 10:'#D5FEB5',20:'#BDF092',30:'#A2DF6C',40:'#88CB44',50:'#72B818',60:'#65A700',70:'#5B9701',80:'#548813',90:'#4C771E' },
+  cheese: { 10:'#FFF8B6',20:'#F4E985',30:'#E6D858',40:'#D4C31B',50:'#C1B100',60:'#B1A300',70:'#A39500',80:'#968900',90:'#877C11' },
+  bun: { 10:'#FFE1CC',20:'#FFC89E',30:'#FFA761',40:'#EA8B36',50:'#D67400',60:'#BC6500',70:'#A65800',80:'#924D00',90:'#7D4100' },
+  ketchup: { 10:'#FEA196',20:'#F9857A',30:'#EF655B',40:'#DD423B',50:'#CA1C20',60:'#B20010',70:'#99000C',80:'#820008',90:'#6B0005' },
+  bacon: { 10:'#FFB5CD',20:'#FF98BC',30:'#F976A8',40:'#E85692',50:'#D5397F',60:'#C0296F',70:'#AA2161',80:'#941F55',90:'#7C1D47' },
+  cabbage: { 10:'#BC94F2',20:'#B17BF2',30:'#A35DED',40:'#913BE0',50:'#8112D2',60:'#6F00B8',70:'#5E009D',80:'#500086',90:'#40006D' },
+  onion: { 10:'#A0ABF3',20:'#8B97F2',30:'#767FEB',40:'#6065DC',50:'#4E4FCD',60:'#413FB6',70:'#36329E',80:'#2C2986',90:'#221F6B' },
+  water: { 10:'#92CAFF',20:'#6CB7FD',30:'#40A1F4',40:'#0087E0',50:'#0072BE',60:'#0061A2',70:'#00518A',80:'#004374',90:'#00355D' },
+  salt: { 0:'#FFFFFF',10:'#F6F6FB',20:'#EEEEF3',30:'#E5E6EB',40:'#DCDCE1',50:'#D0D0D5',60:'#C3C3C9',70:'#B7B7BC',80:'#AAAAAF',90:'#9E9EA3' },
+  pepper: { 10:'#62626B',20:'#56565E',30:'#494951',40:'#3C3C44',50:'#2E2E36',60:'#222229',70:'#19191F',80:'#131319',90:'#0E0E14' },
+};
+
+const FAMILIES = Object.keys(NEW);
+const LEVELS = ['10','20','30','40','50','60','70','80','90'];
+const WHITE = '#FFFFFF';
+
+// ---------- color math ----------
+const toRgb = (h: string): [number, number, number] => {
+  const n = h.replace('#', '');
+  return [parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16)];
+};
+const toHex = (r: number, g: number, b: number): string =>
+  '#' + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0').toUpperCase()).join('');
+const hue = (h: string): number => {
+  let [r, g, b] = toRgb(h);
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+  if (d === 0) return 0;
+  let hh = 0;
+  if (max === r) hh = (g - b) / d + (g < b ? 6 : 0);
+  else if (max === g) hh = (b - r) / d + 2;
+  else hh = (r - g) / d + 4;
+  return Math.round(hh * 60);
+};
+// fg painted at `alpha` opacity over bg — mirrors color-mix(... transparent N%).
+const over = (fg: string, bg: string, alpha: number): string => {
+  const [r1, g1, b1] = toRgb(fg), [r2, g2, b2] = toRgb(bg);
+  return toHex(r1 * alpha + r2 * (1 - alpha), g1 * alpha + g2 * (1 - alpha), b1 * alpha + b2 * (1 - alpha));
+};
+
+// ---------- semantic token resolver (mirrors base.css light/dark mixins) ----------
+type Mode = 'dark' | 'light';
+interface Token { group: string; label: string; resolve: (p: Palette, m: Mode) => string }
+
+// accent shade per mode: [subtlest, subtler, subtle, default, bolder]
+const accent = (p: Palette, fam: string, m: Mode, role: 'subtlest'|'subtler'|'subtle'|'default'|'bolder'): string => {
+  const dark = { subtlest:'10', subtler:'20', subtle:'30', default:'40', bolder:'50' };
+  const light = { subtlest:'90', subtler:'80', subtle:'70', default:'60', bolder:'50' };
+  return p[fam][(m === 'dark' ? dark : light)[role]];
+};
+const bgDefault = (p: Palette, m: Mode) => (m === 'dark' ? p.pepper['90'] : WHITE);
+const surfaceSecondary = (p: Palette, m: Mode) => (m === 'dark' ? p.salt['90'] : p.pepper['10']);
+
+const TOKENS: Token[] = [
+  { group:'Brand', label:'brand-default', resolve:(p,m)=>accent(p,'cabbage',m,'default') },
+  { group:'Brand', label:'brand-bolder', resolve:(p,m)=>accent(p,'cabbage',m,'bolder') },
+  { group:'Brand', label:'brand-float (8%)', resolve:(p,m)=>over(accent(p,'cabbage',m,'bolder'), bgDefault(p,m), 0.08) },
+  { group:'Brand', label:'brand-hover (12%)', resolve:(p,m)=>over(accent(p,'cabbage',m,'bolder'), bgDefault(p,m), 0.12) },
+
+  { group:'Backgrounds', label:'background-default', resolve:(p,m)=>bgDefault(p,m) },
+  { group:'Backgrounds', label:'background-subtle', resolve:(p,m)=>(m==='dark'?p.pepper['70']:p.salt['10']) },
+  { group:'Backgrounds', label:'background-popover', resolve:(p,m)=>(m==='dark'?p.pepper['70']:WHITE) },
+
+  { group:'Surfaces', label:'surface-primary', resolve:(p,m)=>(m==='dark'?WHITE:p.pepper['90']) },
+  { group:'Surfaces', label:'surface-secondary', resolve:(p,m)=>surfaceSecondary(p,m) },
+  { group:'Surfaces', label:'surface-invert', resolve:(p,m)=>(m==='dark'?p.pepper['90']:WHITE) },
+  { group:'Surfaces', label:'surface-float (8%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.08) },
+  { group:'Surfaces', label:'surface-hover (12%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.12) },
+  { group:'Surfaces', label:'surface-active (16%)', resolve:(p,m)=>over(surfaceSecondary(p,m), bgDefault(p,m), 0.16) },
+
+  { group:'Text', label:'text-primary', resolve:(p,m)=>(m==='dark'?WHITE:p.pepper['90']) },
+  { group:'Text', label:'text-secondary', resolve:(p,m)=>(m==='dark'?p.salt['50']:p.pepper['50']) },
+  { group:'Text', label:'text-tertiary', resolve:(p,m)=>(m==='dark'?p.salt['90']:p.pepper['10']) },
+  { group:'Text', label:'text-link', resolve:(p,m)=>accent(p,'water',m,'subtler') },
+
+  { group:'Borders', label:'border-subtlest-primary', resolve:(p,m)=>(m==='dark'?p.salt['90']:p.pepper['10']) },
+  { group:'Borders', label:'border-bolder-primary', resolve:(p,m)=>(m==='dark'?p.pepper['10']:p.salt['90']) },
+
+  { group:'Status', label:'status-error', resolve:(p,m)=>accent(p,'ketchup',m,'default') },
+  { group:'Status', label:'status-warning', resolve:(p,m)=>accent(p,'bun',m,'default') },
+  { group:'Status', label:'status-help', resolve:(p,m)=>accent(p,'cheese',m,'default') },
+  { group:'Status', label:'status-success', resolve:(p,m)=>accent(p,'avocado',m,'default') },
+  { group:'Status', label:'status-info', resolve:(p,m)=>accent(p,'water',m,'default') },
+
+  { group:'Actions', label:'upvote (avocado)', resolve:(p,m)=>accent(p,'avocado',m,'default') },
+  { group:'Actions', label:'downvote (ketchup)', resolve:(p,m)=>accent(p,'ketchup',m,'default') },
+  { group:'Actions', label:'comment (blueCheese)', resolve:(p,m)=>accent(p,'blueCheese',m,'default') },
+  { group:'Actions', label:'bookmark (bun)', resolve:(p,m)=>accent(p,'bun',m,'default') },
+  { group:'Actions', label:'share (cabbage)', resolve:(p,m)=>accent(p,'cabbage',m,'default') },
+  { group:'Actions', label:'plus (bacon)', resolve:(p,m)=>accent(p,'bacon',m,'default') },
+  { group:'Actions', label:'cores (cheese)', resolve:(p,m)=>accent(p,'cheese',m,'default') },
+
+  // overlay base = onion-subtlest painted over the mode background at fixed opacities.
+  { group:'Overlay base', label:'primary (64%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.64) },
+  { group:'Overlay base', label:'secondary (40%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.40) },
+  { group:'Overlay base', label:'tertiary (32%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.32) },
+  { group:'Overlay base', label:'quaternary (24%)', resolve:(p,m)=>over(accent(p,'onion',m,'subtlest'), bgDefault(p,m), 0.24) },
+];
+
+// ---------- presentational helpers (inline-styled, theme-independent) ----------
+const mono: React.CSSProperties = { fontFamily: 'monospace', fontSize: 11 };
+const card: React.CSSProperties = { background: '#131318', color: '#FFFFFF', padding: 24, borderRadius: 12 };
+
+const Swatch = ({ hex, w = 64, h = 40 }: { hex: string; w?: number; h?: number }) => (
+  <div style={{ width: w, height: h, background: hex, borderRadius: 6, border: '1px solid rgba(255,255,255,0.12)' }} />
+);
+
+const Pair = ({ old, neu, label }: { old: string; neu: string; label?: string }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start' }}>
+    {label && <div style={{ ...mono, opacity: 0.7 }}>{label}</div>}
+    <div style={{ display: 'flex', gap: 4 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        <Swatch hex={old} />
+        <span style={{ ...mono, opacity: 0.55 }}>{old}</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        <Swatch hex={neu} />
+        <span style={{ ...mono }}>{neu}</span>
+      </div>
+    </div>
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Tokens/Palette Re-tone (Purple)',
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+type Story = StoryObj;
+
+// ===================== Story 0: guidelines =====================
+const GUIDE: { token: string; value: string; note: string }[] = [
+  { token: 'brand / share', value: NEW.cabbage['50'], note: 'docs purple #892BDC (Tailwind purple-600)' },
+  { token: 'background-default (dark)', value: NEW.pepper['90'], note: 'near-black base — the sidebar/page surface' },
+  { token: 'background-subtle (dark)', value: NEW.pepper['70'], note: 'sidebar + feed cards (#17171C, one step up from the page)' },
+  { token: 'background-default (light)', value: WHITE, note: 'pure white; subtle surface is faint lavender salt.10' },
+  { token: 'text-primary (dark)', value: WHITE, note: 'white on near-black' },
+  { token: 'border-subtlest (dark)', value: NEW.salt['90'], note: 'low-contrast dividers' },
+  { token: 'status-error / success / warning', value: NEW.ketchup['40'], note: 'kept functional (red / green / orange)' },
+];
+
+export const Guidelines: Story = {
+  name: 'Guidelines',
+  render: () => (
+    <div style={{ ...card, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h1 style={{ fontSize: 22, fontWeight: 800, margin: 0 }}>Palette guideline — docs.daily.dev aligned</h1>
+      <ul style={{ opacity: 0.8, maxWidth: 780, lineHeight: 1.6, paddingLeft: 18, margin: 0 }}>
+        <li><b>Purple is the brand, not the surface.</b> The accent (cabbage) is the docs purple #892BDC; backgrounds stay neutral so the purple pops.</li>
+        <li><b>Near-black dark mode.</b> Surfaces step #0F0F12 → #17171C → #1F1F25 for clear separation between sidebar, content and cards.</li>
+        <li><b>Lavender-tinted light mode.</b> White base with a faint purple cast on subtle surfaces.</li>
+        <li><b>Status stays functional.</b> Error/success/warning remain red/green/orange.</li>
+        <li><b>Structure untouched.</b> Same token names, shade levels and opacity percentages — only hues moved.</li>
+      </ul>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
+        {GUIDE.map((g) => (
+          <div key={g.token} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Swatch hex={g.value} w={48} h={28} />
+            <span style={{ ...mono }}>{g.value}</span>
+            <span style={{ fontWeight: 700, minWidth: 220 }}>{g.token}</span>
+            <span style={{ opacity: 0.6 }}>{g.note}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+// ===================== Story 1: raw ramps =====================
+export const RawRamps: Story = {
+  name: 'Raw ramps · old vs new',
+  render: () => (
+    <div style={{ ...card, display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <h1 style={{ fontSize: 22, fontWeight: 800, margin: 0 }}>Raw color ramps — old (top) vs new (bottom)</h1>
+      <p style={{ opacity: 0.7, maxWidth: 760 }}>
+        Every family keeps its name and all nine shade levels. Ramps are built in OKLCH for even
+        perceptual steps: lightness eases from a per-hue light end to a dark end, chroma peaks mid-ramp,
+        and out-of-gamut colors are chroma-fit. The brand (cabbage) is a saturated violet; dark neutrals
+        (pepper) are near-black with a whisper of violet chroma; light neutrals (salt) a faint lavender.
+        Status colors are each their own hue, kept distinguishable. Social colors and opacity percentages
+        are unchanged.
+      </p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 12 }}>
+        {FAMILIES.map((fam) => (
+          <div key={fam}>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+              <span style={{ fontWeight: 700, width: 96 }}>{fam}</span>
+              <span style={{ ...mono, opacity: 0.6 }}>
+                hue {hue(OLD[fam]['50'] || OLD[fam]['90'])}° → {hue(NEW[fam]['50'] || NEW[fam]['90'])}°
+              </span>
+            </div>
+            <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
+              {LEVELS.map((lvl) => (
+                <div key={lvl} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+                  <Swatch hex={OLD[fam][lvl]} w={56} h={22} />
+                  <Swatch hex={NEW[fam][lvl]} w={56} h={22} />
+                  <span style={{ ...mono, opacity: 0.5 }}>{lvl}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+// ===================== Story 2: semantic tokens =====================
+const ModeColumn = ({ mode }: { mode: Mode }) => {
+  const groups = Array.from(new Set(TOKENS.map((t) => t.group)));
+  return (
+    <div style={{ flex: 1, minWidth: 360 }}>
+      <h3 style={{ fontSize: 15, fontWeight: 700, textTransform: 'capitalize', margin: '0 0 8px' }}>{mode} theme</h3>
+      {groups.map((g) => (
+        <div key={g} style={{ marginBottom: 16 }}>
+          <div style={{ ...mono, opacity: 0.6, marginBottom: 6 }}>{g}</div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
+            {TOKENS.filter((t) => t.group === g).map((t) => (
+              <Pair key={t.label} label={t.label} old={t.resolve(OLD, mode)} neu={t.resolve(NEW, mode)} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const SemanticTokens: Story = {
+  name: 'Semantic tokens · old vs new',
+  render: () => (
+    <div style={{ ...card }}>
+      <h1 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 4px' }}>Semantic tokens — old vs new (resolved)</h1>
+      <p style={{ opacity: 0.7, maxWidth: 820 }}>
+        Each pair shows the previous hex (left, dimmed) and the new hex (right). Values are resolved exactly
+        as <code style={mono}>base.css</code> maps them per mode; alpha tokens (float/hover/overlay) are
+        composited over the mode background at their unchanged opacity percentages.
+      </p>
+      <div style={{ display: 'flex', gap: 32, marginTop: 16, flexWrap: 'wrap' }}>
+        <ModeColumn mode="dark" />
+        <ModeColumn mode="light" />
+      </div>
+    </div>
+  ),
+};
+
+// ===================== Story 3: live components & surfaces =====================
+// Uses real Tailwind semantic classes — follows the Storybook theme toolbar (dark/light).
+const Btn = ({ className, children }: { className: string; children: React.ReactNode }) => (
+  <button type="button" className={`px-4 py-1.5 rounded-12 typo-callout font-bold ${className}`}>{children}</button>
+);
+
+const Surface = ({ title, className }: { title: string; className: string }) => (
+  <div className={`flex flex-col gap-4 p-5 rounded-16 border border-border-subtlest-tertiary ${className}`}>
+    <span className="typo-footnote text-text-tertiary">{title}</span>
+
+    <div className="flex flex-wrap gap-2">
+      <Btn className="bg-brand-default text-white">Primary</Btn>
+      <Btn className="bg-surface-float text-text-primary">Float</Btn>
+      <Btn className="border border-border-subtlest-primary text-text-primary">Secondary</Btn>
+      <Btn className="bg-accent-cabbage-default text-white">Share</Btn>
+    </div>
+
+    <div className="flex flex-wrap items-center gap-4 typo-callout">
+      <span className="text-accent-avocado-default">▲ Upvote</span>
+      <span className="text-accent-ketchup-default">▼ Downvote</span>
+      <span className="text-accent-blueCheese-default">💬 Comment</span>
+      <span className="text-accent-bun-default">🔖 Bookmark</span>
+      <span className="text-accent-bacon-default">★ Plus</span>
+    </div>
+
+    <div className="flex flex-wrap gap-2">
+      <span className="px-2 py-0.5 rounded-8 typo-caption1 bg-accent-cabbage-flat text-accent-cabbage-default">brand tag</span>
+      <span className="px-2 py-0.5 rounded-8 typo-caption1 bg-accent-onion-flat text-accent-onion-default">onion tag</span>
+      <span className="px-2 py-0.5 rounded-8 typo-caption1 bg-accent-water-flat text-accent-water-default">water tag</span>
+      <span className="px-2 py-0.5 rounded-8 typo-caption1 bg-accent-bacon-flat text-accent-bacon-default">bacon tag</span>
+    </div>
+
+    <div className="flex flex-wrap gap-2 typo-caption1">
+      <span className="px-2 py-0.5 rounded-8 bg-status-success text-white">success</span>
+      <span className="px-2 py-0.5 rounded-8 bg-status-error text-white">error</span>
+      <span className="px-2 py-0.5 rounded-8 bg-status-warning text-black">warning</span>
+      <span className="px-2 py-0.5 rounded-8 bg-status-help text-black">help</span>
+      <span className="px-2 py-0.5 rounded-8 bg-status-info text-white">info</span>
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <span className="typo-body text-text-primary">Primary text on this surface</span>
+      <span className="typo-callout text-text-secondary">Secondary text — supporting copy</span>
+      <span className="typo-footnote text-text-tertiary">Tertiary / metadata</span>
+      <span className="typo-callout text-text-link underline">An inline link</span>
+    </div>
+
+    <input
+      className="px-3 py-2 rounded-10 bg-surface-float border border-border-subtlest-primary text-text-primary"
+      placeholder="Input field"
+      readOnly
+    />
+  </div>
+);
+
+export const ComponentsAndSurfaces: Story = {
+  name: 'Components & surfaces · live',
+  render: () => (
+    <div className="flex flex-col gap-6 p-6 bg-background-default min-h-screen">
+      <div>
+        <h1 className="typo-title2 font-bold text-text-primary">Components on real surfaces</h1>
+        <p className="typo-callout text-text-tertiary max-w-2xl">
+          Rendered with live semantic tokens — use the Storybook theme toolbar to switch dark / light.
+          Each panel is a different product background so you can verify contrast and that nothing breaks.
+        </p>
+      </div>
+      <div className="grid gap-5" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))' }}>
+        <Surface title="background-default" className="bg-background-default" />
+        <Surface title="background-subtle" className="bg-background-subtle" />
+        <Surface title="background-popover" className="bg-background-popover" />
+        <Surface title="surface-float" className="bg-surface-float" />
+      </div>
+
+      <div
+        className="relative overflow-hidden rounded-16 p-8 text-white"
+        style={{ background: 'radial-gradient(circle at 50% 100%, var(--theme-accent-cabbage-default) 0%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 28%) 10%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 100%) 100%), var(--theme-background-default)' }}
+      >
+        <span className="typo-title3 font-bold">Brand gradient (cabbage → onion)</span>
+        <p className="typo-callout opacity-80">The Plus / funnel gradient now reads as a true violet → indigo blend.</p>
+      </div>
+    </div>
+  ),
+};