diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index bad93b9..504fc40 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -136,19 +136,19 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
   const activePath = router.pathname.split('/')[1];
 
   return (
-    <div className='min-h-screen bg-[#f7f5f1] text-[#17201b]'>
+    <div className='min-h-screen bg-[#fffdf9] text-[#19192d]'>
       <aside
-        className={`fixed inset-y-0 left-0 z-40 w-64 border-r border-[#ded8cc] bg-[#fbfaf6] px-3 py-4 shadow-[16px_0_45px_rgba(23,32,27,0.08)] transition-transform duration-300 lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-40 w-64 border-r border-[#19192d]/10 bg-[#fffdf9] px-3 py-4 shadow-[16px_0_45px_rgba(23,32,27,0.08)] transition-transform duration-300 lg:translate-x-0 ${
           isAsideOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
         <div className='flex items-center justify-between'>
           <Link href='/dashboard' className='flex items-center gap-3'>
-            <span className='grid h-8 w-8 place-items-center rounded-full border border-[#d8b15e]/50 bg-[#245c4c] text-sm font-black text-white'>
+            <span className='grid h-8 w-8 place-items-center rounded-full border border-[#b17a1e]/50 bg-[#35b7a5] text-sm font-black text-white'>
               CW
             </span>
             <span>
-              <span className='block text-sm font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <span className='block text-sm font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                 AppWizzy
               </span>
               <span className='block text-lg font-semibold'>
@@ -158,18 +158,18 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
           </Link>
           <button
             type='button'
-            className='grid h-8 w-8 place-items-center rounded-full border border-[#ded8cc] text-[#526159] lg:hidden'
+            className='grid h-8 w-8 place-items-center rounded-full border border-[#19192d]/10 text-[#72798a] lg:hidden'
             onClick={() => setIsAsideOpen(false)}
           >
             <BaseIcon path={mdiClose} size={18} />
           </button>
         </div>
 
-        <div className='mt-5 rounded-lg border border-[#ded8cc] bg-white p-4'>
-          <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'>
+        <div className='mt-5 rounded-lg border border-[#19192d]/10 bg-white p-4'>
+          <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#b17a1e]'>
             Today
           </p>
-          <p className='mt-2 text-sm leading-6 text-[#5f6b64]'>
+          <p className='mt-2 text-sm leading-6 text-[#72798a]'>
             Prepare, follow up, and keep every coaching relationship warm
             between sessions.
           </p>
@@ -186,8 +186,8 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
                 href={item.href}
                 className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-semibold transition ${
                   isActive
-                    ? 'bg-[#245c4c] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]'
-                    : 'text-[#56645d] hover:bg-[#efeae0] hover:text-[#17201b]'
+                    ? 'bg-[#35b7a5] text-white shadow-[0_14px_28px_rgba(36,92,76,0.2)]'
+                    : 'text-[#72798a] hover:bg-[#fbf8f1] hover:text-[#19192d]'
                 }`}
               >
                 <BaseIcon path={item.icon} size={18} />
@@ -197,8 +197,8 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
           })}
         </nav>
 
-        <div className='absolute inset-x-4 bottom-5 rounded-lg border border-[#ded8cc] bg-[#f0ede6] p-4'>
-          <p className='text-xs font-semibold uppercase tracking-[0.18em] text-[#9a6a2f]'>
+        <div className='absolute inset-x-4 bottom-5 rounded-lg border border-[#19192d]/10 bg-[#fbf8f1] p-4'>
+          <p className='text-xs font-semibold uppercase tracking-[0.18em] text-[#b17a1e]'>
             Signed in
           </p>
           <p className='mt-2 truncate text-sm font-semibold'>
@@ -206,7 +206,7 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
           </p>
           <button
             type='button'
-            className='mt-4 flex w-full items-center justify-center gap-2 rounded-full bg-[#17201b] px-3 py-1.5 text-sm font-semibold text-white'
+            className='mt-4 flex w-full items-center justify-center gap-2 rounded-full bg-[#19192d] px-3 py-1.5 text-sm font-semibold text-white'
             onClick={() => {
               dispatch(logoutUser());
               router.push('/login');
@@ -222,32 +222,32 @@ export default function LayoutAuthenticated({ children, permission }: Props) {
         <button
           type='button'
           aria-label='Close menu'
-          className='fixed inset-0 z-30 bg-[#17201b]/40 lg:hidden'
+          className='fixed inset-0 z-30 bg-[#19192d]/40 lg:hidden'
           onClick={() => setIsAsideOpen(false)}
         />
       )}
 
       <div className='lg:pl-64'>
-        <header className='sticky top-0 z-20 border-b border-[#ded8cc]/80 bg-[#f7f5f1]/92 px-3 py-2 backdrop-blur lg:px-8'>
+        <header className='sticky top-0 z-20 border-b border-[#19192d]/10/80 bg-[#fffdf9]/92 px-3 py-2 backdrop-blur lg:px-8'>
           <div className='flex items-center justify-between'>
             <button
               type='button'
-              className='grid h-8 w-8 place-items-center rounded-full border border-[#ded8cc] bg-white text-[#526159] lg:hidden'
+              className='grid h-8 w-8 place-items-center rounded-full border border-[#19192d]/10 bg-white text-[#72798a] lg:hidden'
               onClick={() => setIsAsideOpen(true)}
             >
               <BaseIcon path={mdiMenu} size={18} />
             </button>
             <div className='hidden lg:block'>
-              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                 Workspace status
               </p>
-              <p className='mt-1 text-sm text-[#647068]'>
+              <p className='mt-1 text-sm text-[#72798a]'>
                 Review sessions, clients, tasks, and shared client materials.
               </p>
             </div>
             <Link
               href='/'
-              className='rounded-full border border-[#ded8cc] bg-white px-3 py-1.5 text-sm font-semibold text-[#17201b] shadow-sm'
+              className='rounded-full border border-[#19192d]/10 bg-white px-3 py-1.5 text-sm font-semibold text-[#19192d] shadow-sm'
             >
               Public site
             </Link>
diff --git a/frontend/src/pages/client-portal.tsx b/frontend/src/pages/client-portal.tsx
index de19b52..63b6dcf 100644
--- a/frontend/src/pages/client-portal.tsx
+++ b/frontend/src/pages/client-portal.tsx
@@ -37,7 +37,7 @@ function Panel({
 }) {
   return (
     <section
-      className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
+      className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
     >
       {children}
     </section>
@@ -87,8 +87,8 @@ const ClientPortal = () => {
       <SectionMain>
         <div className='mx-auto max-w-7xl'>
           <div className='mb-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
-            <div className='rounded-lg bg-[#17201b] p-5 text-white'>
-              <div className='flex items-center gap-3 text-[#d8b15e]'>
+            <div className='rounded-lg bg-[#19192d] p-5 text-white'>
+              <div className='flex items-center gap-3 text-[#b17a1e]'>
                 <BaseIcon path={mdiAccountCircle} size={18} />
                 <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
                   Client portal
@@ -97,19 +97,19 @@ const ClientPortal = () => {
               <h1 className='mt-3 text-xl font-semibold'>
                 Client portal preview
               </h1>
-              <p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
+              <p className='mt-2 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
                 Preview the client-facing workspace with shared notes,
                 commitments, resources, and a pre-session reflection prompt.
               </p>
             </div>
             <Panel className='p-4'>
-              <label className='block text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <label className='block text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                 Preview as client
               </label>
               <select
                 value={clientId}
                 onChange={(event) => setClientId(event.target.value)}
-                className='mt-4 w-full rounded-lg border border-[#d8d1c2] bg-white px-3 py-2 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
+                className='mt-4 w-full rounded-lg border border-[#19192d]/10 bg-white px-3 py-2 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
               >
                 {clients.map((client) => (
                   <option key={client.id} value={client.id}>
@@ -117,7 +117,7 @@ const ClientPortal = () => {
                   </option>
                 ))}
               </select>
-              <p className='mt-4 text-sm leading-6 text-[#68736c]'>
+              <p className='mt-4 text-sm leading-6 text-[#72798a]'>
                 MVP note: this is still a coach-visible preview. Final client
                 access should be a client role or magic-link route.
               </p>
@@ -127,28 +127,28 @@ const ClientPortal = () => {
           {portalClient && (
             <div className='grid gap-4 xl:grid-cols-[1.05fr_0.95fr]'>
               <Panel className='overflow-hidden'>
-                <div className='bg-[#fbfaf6] p-5'>
-                  <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+                <div className='bg-[#fffdf9] p-5'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                     Your coaching workspace
                   </p>
-                  <h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
+                  <h2 className='mt-2 text-xl font-semibold text-[#19192d]'>
                     {portalClient.name}
                   </h2>
-                  <p className='mt-4 max-w-2xl leading-6 text-[#4f5a53]'>
+                  <p className='mt-4 max-w-2xl leading-6 text-[#72798a]'>
                     {portalClient.goals}
                   </p>
                 </div>
 
                 <div className='p-5'>
                   <div className='flex items-center gap-3'>
-                    <span className='grid h-8 w-8 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
+                    <span className='grid h-8 w-8 place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
                       <BaseIcon path={mdiMessageReplyTextOutline} size={18} />
                     </span>
                     <div>
-                      <h3 className='text-lg font-semibold text-[#17201b]'>
+                      <h3 className='text-lg font-semibold text-[#19192d]'>
                         Shared session notes
                       </h3>
-                      <p className='text-sm text-[#68736c]'>
+                      <p className='text-sm text-[#72798a]'>
                         Only coach-approved notes appear here.
                       </p>
                     </div>
@@ -158,12 +158,12 @@ const ClientPortal = () => {
                     {(portalClient.sessions || []).map((session) => (
                       <div
                         key={session.id}
-                        className='rounded-lg border border-[#ded8cc] bg-white p-5'
+                        className='rounded-lg border border-[#19192d]/10 bg-white p-5'
                       >
-                        <p className='font-semibold text-[#17201b]'>
+                        <p className='font-semibold text-[#19192d]'>
                           {session.title}
                         </p>
-                        <p className='mt-3 leading-6 text-[#4f5a53]'>
+                        <p className='mt-3 leading-6 text-[#72798a]'>
                           {session.shared_client_notes}
                         </p>
                       </div>
@@ -174,8 +174,8 @@ const ClientPortal = () => {
 
               <div className='space-y-6'>
                 <Panel>
-                  <div className='border-b border-[#ded8cc] p-5'>
-                    <h3 className='text-lg font-semibold text-[#17201b]'>
+                  <div className='border-b border-[#19192d]/10 p-5'>
+                    <h3 className='text-lg font-semibold text-[#19192d]'>
                       Commitments
                     </h3>
                   </div>
@@ -183,16 +183,16 @@ const ClientPortal = () => {
                     {(portalClient.action_items || []).map((item) => (
                       <div
                         key={item.id}
-                        className='flex gap-3 rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4'
+                        className='flex gap-3 rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4'
                       >
-                        <span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#245c4c] text-white'>
+                        <span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#35b7a5] text-white'>
                           <BaseIcon path={mdiCheckCircleOutline} size={18} />
                         </span>
                         <div>
-                          <p className='font-semibold text-[#17201b]'>
+                          <p className='font-semibold text-[#19192d]'>
                             {item.title}
                           </p>
-                          <p className='mt-1 text-sm text-[#68736c]'>
+                          <p className='mt-1 text-sm text-[#72798a]'>
                             {item.status.replace('_', ' ')}
                           </p>
                         </div>
@@ -202,8 +202,8 @@ const ClientPortal = () => {
                 </Panel>
 
                 <Panel>
-                  <div className='border-b border-[#ded8cc] p-5'>
-                    <h3 className='text-lg font-semibold text-[#17201b]'>
+                  <div className='border-b border-[#19192d]/10 p-5'>
+                    <h3 className='text-lg font-semibold text-[#19192d]'>
                       Resources
                     </h3>
                   </div>
@@ -212,17 +212,17 @@ const ClientPortal = () => {
                       <a
                         key={resource.id}
                         href={resource.url}
-                        className='flex items-center justify-between gap-4 rounded-lg border border-[#ded8cc] bg-white p-4 transition hover:bg-[#fbfaf6]'
+                        className='flex items-center justify-between gap-4 rounded-lg border border-[#19192d]/10 bg-white p-4 transition hover:bg-[#fffdf9]'
                       >
                         <div className='flex gap-3'>
-                          <span className='grid h-8 w-8 place-items-center rounded-full bg-[#f0ede6] text-[#9a6a2f]'>
+                          <span className='grid h-8 w-8 place-items-center rounded-full bg-[#fbf8f1] text-[#b17a1e]'>
                             <BaseIcon path={mdiBookOpenVariant} size={18} />
                           </span>
                           <div>
-                            <p className='font-semibold text-[#17201b]'>
+                            <p className='font-semibold text-[#19192d]'>
                               {resource.title}
                             </p>
-                            <p className='mt-1 text-sm leading-6 text-[#68736c]'>
+                            <p className='mt-1 text-sm leading-6 text-[#72798a]'>
                               {resource.description}
                             </p>
                           </div>
@@ -230,21 +230,21 @@ const ClientPortal = () => {
                         <BaseIcon
                           path={mdiChevronRight}
                           size={18}
-                          className='text-[#245c4c]'
+                          className='text-[#35b7a5]'
                         />
                       </a>
                     ))}
                   </div>
                 </Panel>
 
-                <Panel className='bg-[#e8f1ec] p-4'>
-                  <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#245c4c]'>
+                <Panel className='bg-[#f3fbf8] p-4'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
                     Pre-session reflection
                   </p>
-                  <h3 className='mt-2 text-lg font-semibold text-[#17201b]'>
+                  <h3 className='mt-2 text-lg font-semibold text-[#19192d]'>
                     What changed since last time?
                   </h3>
-                  <p className='mt-3 leading-6 text-[#4f5a53]'>
+                  <p className='mt-3 leading-6 text-[#72798a]'>
                     Final MVP should let the client answer this before a
                     session, then feed the response into the coach prep brief.
                   </p>
diff --git a/frontend/src/pages/clients.tsx b/frontend/src/pages/clients.tsx
index 204b081..23060af 100644
--- a/frontend/src/pages/clients.tsx
+++ b/frontend/src/pages/clients.tsx
@@ -55,7 +55,7 @@ function Panel({
 }) {
   return (
     <section
-      className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
+      className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
     >
       {children}
     </section>
@@ -64,7 +64,7 @@ function Panel({
 
 function EmptyState({ label }: { label: string }) {
   return (
-    <p className='rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-4 text-sm text-[#68736c]'>
+    <p className='rounded-lg border border-dashed border-[#19192d]/10 bg-[#fffdf9] p-4 text-sm text-[#72798a]'>
       {label}
     </p>
   );
@@ -113,33 +113,33 @@ const Clients = () => {
       </Head>
       <SectionMain>
         <div className='mx-auto max-w-7xl'>
-          <div className='mb-4 flex flex-col justify-between gap-4 rounded-lg bg-[#17201b] p-5 text-white md:flex-row md:items-end'>
+          <div className='mb-4 flex flex-col justify-between gap-4 rounded-lg bg-[#19192d] p-5 text-white md:flex-row md:items-end'>
             <div>
-              <div className='flex items-center gap-3 text-[#d8b15e]'>
+              <div className='flex items-center gap-3 text-[#b17a1e]'>
                 <BaseIcon path={mdiAccountGroup} size={18} />
                 <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
                   Client CRM
                 </span>
               </div>
               <h1 className='mt-3 text-xl font-semibold'>Client records</h1>
-              <p className='mt-2 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
+              <p className='mt-2 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
                 Open a client record to review goals, coach notes, recent
                 sessions, and commitments.
               </p>
             </div>
-            <div className='rounded-full bg-white/10 px-3 py-1.5 text-sm font-semibold text-[#f5ead5]'>
+            <div className='rounded-full bg-white/10 px-3 py-1.5 text-sm font-semibold text-[#fbf8f1]'>
               {clients.length} clients
             </div>
           </div>
 
           <div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
             <Panel className='overflow-hidden'>
-              <div className='border-b border-[#ded8cc] p-5'>
-                <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <div className='border-b border-[#19192d]/10 p-5'>
+                <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                   Coaching relationships
                 </p>
               </div>
-              <div className='divide-y divide-[#eee8dc]'>
+              <div className='divide-y divide-[#19192d]/10'>
                 {clients.map((client) => (
                   <button
                     key={client.id}
@@ -147,20 +147,20 @@ const Clients = () => {
                     onClick={() => selectClient(client.id)}
                     className={`block w-full p-5 text-left transition ${
                       selectedClient?.id === client.id
-                        ? 'bg-[#e8f1ec]'
-                        : 'bg-white hover:bg-[#fbfaf6]'
+                        ? 'bg-[#f3fbf8]'
+                        : 'bg-white hover:bg-[#fffdf9]'
                     }`}
                   >
                     <div className='flex items-start justify-between gap-3'>
                       <div>
-                        <p className='font-semibold text-[#17201b]'>
+                        <p className='font-semibold text-[#19192d]'>
                           {client.name}
                         </p>
-                        <p className='mt-1 text-sm text-[#68736c]'>
+                        <p className='mt-1 text-sm text-[#72798a]'>
                           {client.role_title} · {client.company}
                         </p>
                       </div>
-                      <span className='rounded-full bg-[#f0ede6] px-3 py-1 text-xs font-semibold text-[#6e5730]'>
+                      <span className='rounded-full bg-[#fbf8f1] px-3 py-1 text-xs font-semibold text-[#b17a1e]'>
                         {client.status}
                       </span>
                     </div>
@@ -173,7 +173,7 @@ const Clients = () => {
                         .map((tag) => (
                           <span
                             key={tag}
-                            className='rounded-full bg-white px-3 py-1 text-xs text-[#68736c]'
+                            className='rounded-full bg-white px-3 py-1 text-xs text-[#72798a]'
                           >
                             {tag}
                           </span>
@@ -189,22 +189,22 @@ const Clients = () => {
                 <Panel className='p-4'>
                   <div className='flex flex-col justify-between gap-4 md:flex-row md:items-start'>
                     <div>
-                      <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+                      <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                         {selectedClient.package?.title || 'Coaching client'}
                       </p>
-                      <h2 className='mt-2 text-xl font-semibold text-[#17201b]'>
+                      <h2 className='mt-2 text-xl font-semibold text-[#19192d]'>
                         {selectedClient.name}
                       </h2>
-                      <p className='mt-2 text-[#68736c]'>
+                      <p className='mt-2 text-[#72798a]'>
                         {selectedClient.email}
                       </p>
                     </div>
-                    <div className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4 md:min-w-56'>
-                      <div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
+                    <div className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4 md:min-w-56'>
+                      <div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
                         <BaseIcon path={mdiCalendarClock} size={18} />
                         Next session
                       </div>
-                      <p className='mt-2 text-sm text-[#68736c]'>
+                      <p className='mt-2 text-sm text-[#72798a]'>
                         {selectedClient.next_session_at ||
                           'No session scheduled'}
                       </p>
@@ -212,21 +212,21 @@ const Clients = () => {
                   </div>
 
                   <div className='mt-4 grid gap-4 lg:grid-cols-2'>
-                    <div className='rounded-lg bg-[#f7f5f1] p-5'>
-                      <div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
+                    <div className='rounded-lg bg-[#fffdf9] p-5'>
+                      <div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
                         <BaseIcon path={mdiTarget} size={18} />
                         Goals
                       </div>
-                      <p className='mt-3 leading-6 text-[#4f5a53]'>
+                      <p className='mt-3 leading-6 text-[#72798a]'>
                         {selectedClient.goals}
                       </p>
                     </div>
-                    <div className='rounded-lg bg-[#f7f5f1] p-5'>
-                      <div className='flex items-center gap-2 text-sm font-semibold text-[#245c4c]'>
+                    <div className='rounded-lg bg-[#fffdf9] p-5'>
+                      <div className='flex items-center gap-2 text-sm font-semibold text-[#35b7a5]'>
                         <BaseIcon path={mdiFileDocumentOutline} size={18} />
                         Private coach notes
                       </div>
-                      <p className='mt-3 leading-6 text-[#4f5a53]'>
+                      <p className='mt-3 leading-6 text-[#72798a]'>
                         {selectedClient.notes}
                       </p>
                     </div>
@@ -235,8 +235,8 @@ const Clients = () => {
 
                 <div className='grid gap-4 lg:grid-cols-2'>
                   <Panel>
-                    <div className='border-b border-[#ded8cc] p-5'>
-                      <h3 className='text-lg font-semibold text-[#17201b]'>
+                    <div className='border-b border-[#19192d]/10 p-5'>
+                      <h3 className='text-lg font-semibold text-[#19192d]'>
                         Session timeline
                       </h3>
                     </div>
@@ -245,12 +245,12 @@ const Clients = () => {
                         (selectedClient.sessions || []).map((session) => (
                           <div
                             key={session.id}
-                            className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-4'
+                            className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-4'
                           >
-                            <p className='font-semibold text-[#17201b]'>
+                            <p className='font-semibold text-[#19192d]'>
                               {session.title}
                             </p>
-                            <p className='mt-2 text-sm leading-6 text-[#68736c]'>
+                            <p className='mt-2 text-sm leading-6 text-[#72798a]'>
                               {session.ai_summary}
                             </p>
                           </div>
@@ -262,8 +262,8 @@ const Clients = () => {
                   </Panel>
 
                   <Panel>
-                    <div className='border-b border-[#ded8cc] p-5'>
-                      <h3 className='text-lg font-semibold text-[#17201b]'>
+                    <div className='border-b border-[#19192d]/10 p-5'>
+                      <h3 className='text-lg font-semibold text-[#19192d]'>
                         Open commitments
                       </h3>
                     </div>
@@ -272,19 +272,19 @@ const Clients = () => {
                         (selectedClient.action_items || []).map((item) => (
                           <div
                             key={item.id}
-                            className='flex gap-3 rounded-lg border border-[#ded8cc] bg-white p-4'
+                            className='flex gap-3 rounded-lg border border-[#19192d]/10 bg-white p-4'
                           >
-                            <span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
+                            <span className='mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
                               <BaseIcon
                                 path={mdiCheckCircleOutline}
                                 size={18}
                               />
                             </span>
                             <div>
-                              <p className='font-semibold text-[#17201b]'>
+                              <p className='font-semibold text-[#19192d]'>
                                 {item.title}
                               </p>
-                              <p className='mt-1 text-sm text-[#68736c]'>
+                              <p className='mt-1 text-sm text-[#72798a]'>
                                 {item.status.replace('_', ' ')}
                               </p>
                             </div>
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index 1a28ac7..1e05fb5 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -68,7 +68,7 @@ function ShellCard({
 }) {
   return (
     <section
-      className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
+      className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
     >
       {children}
     </section>
@@ -125,8 +125,8 @@ const Dashboard = () => {
       <SectionMain>
         <div className='mx-auto max-w-7xl'>
           <div className='grid gap-4 xl:grid-cols-[1.1fr_0.9fr]'>
-            <div className='rounded-lg bg-[#17201b] p-5 text-white shadow-[0_24px_80px_rgba(23,32,27,0.18)]'>
-              <div className='flex items-center gap-3 text-[#d8b15e]'>
+            <div className='rounded-lg bg-[#19192d] p-5 text-white shadow-[0_24px_80px_rgba(23,32,27,0.18)]'>
+              <div className='flex items-center gap-3 text-[#b17a1e]'>
                 <BaseIcon path={mdiViewDashboardOutline} size={18} />
                 <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
                   Workspace overview
@@ -136,14 +136,14 @@ const Dashboard = () => {
                 Manage upcoming sessions, client notes, commitments, and
                 follow-up drafts.
               </h1>
-              <p className='mt-3 max-w-2xl text-sm leading-6 text-[#d9d5ca]'>
+              <p className='mt-3 max-w-2xl text-sm leading-6 text-[#fffdf9]'>
                 Review scheduled sessions, open tasks, recent notes, and drafts
                 that need approval.
               </p>
               <div className='mt-5 flex flex-wrap gap-3'>
                 <Link
                   href='/session-memory'
-                  className='rounded-full bg-[#d8b15e] px-4 py-2 text-sm font-semibold text-[#17201b]'
+                  className='rounded-full bg-[#b17a1e] px-4 py-2 text-sm font-semibold text-[#19192d]'
                 >
                   Generate session memory
                 </Link>
@@ -157,30 +157,30 @@ const Dashboard = () => {
             </div>
 
             <ShellCard className='p-4'>
-              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                 Next session prep
               </p>
               {nextSession ? (
                 <div>
-                  <h2 className='mt-4 text-lg font-semibold text-[#17201b]'>
+                  <h2 className='mt-4 text-lg font-semibold text-[#19192d]'>
                     {nextSession.client?.name || 'Client session'}
                   </h2>
-                  <p className='mt-1 text-sm text-[#68736c]'>
+                  <p className='mt-1 text-sm text-[#72798a]'>
                     {nextSession.title}
                   </p>
-                  <p className='mt-5 leading-6 text-[#4f5a53]'>
+                  <p className='mt-5 leading-6 text-[#72798a]'>
                     {nextSession.ai_summary}
                   </p>
                   <Link
                     href='/session-memory'
-                    className='mt-4 inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
+                    className='mt-4 inline-flex items-center gap-2 rounded-full bg-[#35b7a5] px-3 py-1.5 text-sm font-semibold text-white'
                   >
                     Review memory
                     <BaseIcon path={mdiArrowRight} size={18} />
                   </Link>
                 </div>
               ) : (
-                <p className='mt-4 leading-6 text-[#68736c]'>
+                <p className='mt-4 leading-6 text-[#72798a]'>
                   {loading
                     ? 'Loading your coaching workspace...'
                     : 'No upcoming session memory yet.'}
@@ -195,14 +195,14 @@ const Dashboard = () => {
                 <ShellCard className='h-full p-5 transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(23,32,27,0.1)]'>
                   <div className='flex items-start justify-between gap-4'>
                     <div>
-                      <p className='text-sm font-semibold text-[#68736c]'>
+                      <p className='text-sm font-semibold text-[#72798a]'>
                         {stat.label}
                       </p>
-                      <p className='mt-2 text-2xl font-semibold text-[#17201b]'>
+                      <p className='mt-2 text-2xl font-semibold text-[#19192d]'>
                         {loading ? '...' : stat.value}
                       </p>
                     </div>
-                    <span className='grid h-9 w-9 place-items-center rounded-full bg-[#e8f1ec] text-[#245c4c]'>
+                    <span className='grid h-9 w-9 place-items-center rounded-full bg-[#f3fbf8] text-[#35b7a5]'>
                       <BaseIcon path={stat.icon} size={19} />
                     </span>
                   </div>
@@ -213,10 +213,10 @@ const Dashboard = () => {
 
           <div className='mt-4 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]'>
             <ShellCard>
-              <div className='border-b border-[#ded8cc] p-4'>
+              <div className='border-b border-[#19192d]/10 p-4'>
                 <div className='flex items-center justify-between gap-4'>
                   <div>
-                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                       Client records
                     </p>
                     <h2 className='mt-2 text-lg font-semibold'>
@@ -224,30 +224,30 @@ const Dashboard = () => {
                     </h2>
                   </div>
                   <Link
-                    className='text-sm font-semibold text-[#245c4c]'
+                    className='text-sm font-semibold text-[#35b7a5]'
                     href='/clients'
                   >
                     View all
                   </Link>
                 </div>
               </div>
-              <div className='divide-y divide-[#eee8dc]'>
+              <div className='divide-y divide-[#19192d]/10'>
                 {summary.activeClients.map((client) => (
                   <Link
                     key={client.id}
                     href={`/clients?clientId=${client.id}`}
-                    className='block p-5 transition hover:bg-[#fbfaf6]'
+                    className='block p-5 transition hover:bg-[#fffdf9]'
                   >
                     <div className='flex items-start justify-between gap-4'>
                       <div>
-                        <p className='font-semibold text-[#17201b]'>
+                        <p className='font-semibold text-[#19192d]'>
                           {client.name}
                         </p>
-                        <p className='mt-1 text-sm text-[#68736c]'>
+                        <p className='mt-1 text-sm text-[#72798a]'>
                           {client.role_title} · {client.company}
                         </p>
                       </div>
-                      <span className='rounded-full bg-[#f0ede6] px-3 py-1 text-xs font-semibold text-[#6e5730]'>
+                      <span className='rounded-full bg-[#fbf8f1] px-3 py-1 text-xs font-semibold text-[#b17a1e]'>
                         {client.package?.title || 'Coaching'}
                       </span>
                     </div>
@@ -257,10 +257,10 @@ const Dashboard = () => {
             </ShellCard>
 
             <ShellCard>
-              <div className='border-b border-[#ded8cc] p-4'>
+              <div className='border-b border-[#19192d]/10 p-4'>
                 <div className='flex items-center justify-between gap-4'>
                   <div>
-                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                       Recent intelligence
                     </p>
                     <h2 className='mt-2 text-lg font-semibold'>
@@ -268,23 +268,23 @@ const Dashboard = () => {
                     </h2>
                   </div>
                   <Link
-                    className='text-sm font-semibold text-[#245c4c]'
+                    className='text-sm font-semibold text-[#35b7a5]'
                     href='/session-memory'
                   >
                     Open
                   </Link>
                 </div>
               </div>
-              <div className='divide-y divide-[#eee8dc]'>
+              <div className='divide-y divide-[#19192d]/10'>
                 {summary.nextSessions.map((session) => (
                   <div key={session.id} className='p-5'>
-                    <p className='font-semibold text-[#17201b]'>
+                    <p className='font-semibold text-[#19192d]'>
                       {session.title}
                     </p>
-                    <p className='mt-1 text-sm text-[#68736c]'>
+                    <p className='mt-1 text-sm text-[#72798a]'>
                       {session.client?.name}
                     </p>
-                    <p className='mt-3 leading-6 text-[#4f5a53]'>
+                    <p className='mt-3 leading-6 text-[#72798a]'>
                       {session.ai_summary}
                     </p>
                   </div>
diff --git a/frontend/src/pages/session-memory.tsx b/frontend/src/pages/session-memory.tsx
index 22ec5f8..2a65cb0 100644
--- a/frontend/src/pages/session-memory.tsx
+++ b/frontend/src/pages/session-memory.tsx
@@ -39,7 +39,7 @@ function Panel({
 }) {
   return (
     <section
-      className={`rounded-lg border border-[#ded8cc] bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
+      className={`rounded-lg border border-[#19192d]/10 bg-white shadow-[0_18px_60px_rgba(23,32,27,0.07)] ${className}`}
     >
       {children}
     </section>
@@ -54,11 +54,11 @@ function OutputBlock({
   children: React.ReactNode;
 }) {
   return (
-    <div className='rounded-lg border border-[#ded8cc] bg-[#fbfaf6] p-5'>
-      <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#9a6a2f]'>
+    <div className='rounded-lg border border-[#19192d]/10 bg-[#fffdf9] p-5'>
+      <p className='text-xs font-semibold uppercase tracking-[0.2em] text-[#b17a1e]'>
         {title}
       </p>
-      <div className='mt-3 leading-6 text-[#4f5a53]'>{children}</div>
+      <div className='mt-3 leading-6 text-[#72798a]'>{children}</div>
     </div>
   );
 }
@@ -107,8 +107,8 @@ const SessionMemory = () => {
       </Head>
       <SectionMain>
         <div className='mx-auto max-w-7xl'>
-          <div className='mb-4 rounded-lg bg-[#17201b] p-5 text-white'>
-            <div className='flex items-center gap-3 text-[#d8b15e]'>
+          <div className='mb-4 rounded-lg bg-[#19192d] p-5 text-white'>
+            <div className='flex items-center gap-3 text-[#b17a1e]'>
               <BaseIcon path={mdiFileDocumentEditOutline} size={18} />
               <span className='text-xs font-semibold uppercase tracking-[0.22em]'>
                 Session Memory
@@ -118,7 +118,7 @@ const SessionMemory = () => {
               Turn rough notes into follow-up, commitments, and next-session
               prep.
             </h1>
-            <p className='mt-2 max-w-3xl text-sm leading-6 text-[#d9d5ca]'>
+            <p className='mt-2 max-w-3xl text-sm leading-6 text-[#fffdf9]'>
               Paste session notes or a transcript, generate structured output,
               then review and save the result before sharing anything with a
               client.
@@ -127,20 +127,20 @@ const SessionMemory = () => {
 
           <div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
             <Panel className='p-4'>
-              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                 Raw session input
               </p>
-              <h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
+              <h2 className='mt-2 text-lg font-semibold text-[#19192d]'>
                 Extract a session
               </h2>
 
-              <label className='mb-2 mt-4 block text-sm font-semibold text-[#526159]'>
+              <label className='mb-2 mt-4 block text-sm font-semibold text-[#72798a]'>
                 Client
               </label>
               <select
                 value={clientId}
                 onChange={(event) => setClientId(event.target.value)}
-                className='w-full rounded-lg border border-[#d8d1c2] bg-white px-3 py-2 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
+                className='w-full rounded-lg border border-[#19192d]/10 bg-white px-3 py-2 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
               >
                 {clients.map((client) => (
                   <option key={client.id} value={client.id}>
@@ -149,13 +149,13 @@ const SessionMemory = () => {
                 ))}
               </select>
 
-              <label className='mb-2 mt-5 block text-sm font-semibold text-[#526159]'>
+              <label className='mb-2 mt-5 block text-sm font-semibold text-[#72798a]'>
                 Transcript or raw notes
               </label>
               <textarea
                 value={transcript}
                 onChange={(event) => setTranscript(event.target.value)}
-                className='min-h-[220px] w-full rounded-lg border border-[#d8d1c2] bg-[#fbfaf6] px-3 py-2 leading-6 text-[#17201b] outline-none focus:border-[#245c4c] focus:ring-2 focus:ring-[#245c4c]/15'
+                className='min-h-[220px] w-full rounded-lg border border-[#19192d]/10 bg-[#fffdf9] px-3 py-2 leading-6 text-[#19192d] outline-none focus:border-[#35b7a5] focus:ring-2 focus:ring-[#35b7a5]/15'
                 placeholder='Paste session transcript, coach notes, commitments, blockers, or a rough debrief...'
               />
               <div className='mt-5'>
@@ -172,14 +172,14 @@ const SessionMemory = () => {
               <Panel className='p-4'>
                 <div className='flex items-start justify-between gap-4'>
                   <div>
-                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#9a6a2f]'>
+                    <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#b17a1e]'>
                       AI draft
                     </p>
-                    <h2 className='mt-2 text-lg font-semibold text-[#17201b]'>
+                    <h2 className='mt-2 text-lg font-semibold text-[#19192d]'>
                       Review before sharing
                     </h2>
                   </div>
-                  <span className='rounded-full bg-[#e8f1ec] px-3 py-1 text-xs font-semibold text-[#245c4c]'>
+                  <span className='rounded-full bg-[#f3fbf8] px-3 py-1 text-xs font-semibold text-[#35b7a5]'>
                     Coach approved
                   </span>
                 </div>
@@ -200,14 +200,14 @@ const SessionMemory = () => {
                     <div className='flex flex-wrap gap-3'>
                       <button
                         type='button'
-                        className='inline-flex items-center gap-2 rounded-full bg-[#245c4c] px-3 py-1.5 text-sm font-semibold text-white'
+                        className='inline-flex items-center gap-2 rounded-full bg-[#35b7a5] px-3 py-1.5 text-sm font-semibold text-white'
                       >
                         <BaseIcon path={mdiCheckCircleOutline} size={18} />
                         Save final memory
                       </button>
                       <button
                         type='button'
-                        className='inline-flex items-center gap-2 rounded-full border border-[#ded8cc] bg-white px-3 py-1.5 text-sm font-semibold text-[#17201b]'
+                        className='inline-flex items-center gap-2 rounded-full border border-[#19192d]/10 bg-white px-3 py-1.5 text-sm font-semibold text-[#19192d]'
                       >
                         <BaseIcon path={mdiContentCopy} size={18} />
                         Copy follow-up
@@ -215,13 +215,13 @@ const SessionMemory = () => {
                     </div>
                   </div>
                 ) : (
-                  <div className='mt-4 rounded-lg border border-dashed border-[#d8d1c2] bg-[#fbfaf6] p-4'>
+                  <div className='mt-4 rounded-lg border border-dashed border-[#19192d]/10 bg-[#fffdf9] p-4'>
                     <BaseIcon
                       path={mdiLightbulbOnOutline}
                       size={22}
-                      className='text-[#d8b15e]'
+                      className='text-[#b17a1e]'
                     />
-                    <p className='mt-4 leading-6 text-[#68736c]'>
+                    <p className='mt-4 leading-6 text-[#72798a]'>
                       Generate a structured memory through the AppWizzy AI
                       proxy. The result should stay reviewable: summary,
                       commitments, blockers, homework, follow-up, and prep for
@@ -232,33 +232,33 @@ const SessionMemory = () => {
               </Panel>
 
               <Panel>
-                <div className='border-b border-[#ded8cc] p-5'>
-                  <h2 className='text-lg font-semibold text-[#17201b]'>
+                <div className='border-b border-[#19192d]/10 p-5'>
+                  <h2 className='text-lg font-semibold text-[#19192d]'>
                     Recent memories
                   </h2>
                 </div>
-                <div className='divide-y divide-[#eee8dc]'>
+                <div className='divide-y divide-[#19192d]/10'>
                   {sessions.map((session) => (
                     <div key={session.id} className='p-5'>
                       <div className='flex items-start justify-between gap-4'>
                         <div>
-                          <p className='font-semibold text-[#17201b]'>
+                          <p className='font-semibold text-[#19192d]'>
                             {session.title}
                           </p>
-                          <p className='mt-1 text-sm text-[#68736c]'>
+                          <p className='mt-1 text-sm text-[#72798a]'>
                             {session.client?.name}
                           </p>
                         </div>
                         <BaseIcon
                           path={mdiSendOutline}
                           size={18}
-                          className='text-[#245c4c]'
+                          className='text-[#35b7a5]'
                         />
                       </div>
-                      <p className='mt-3 leading-6 text-[#4f5a53]'>
+                      <p className='mt-3 leading-6 text-[#72798a]'>
                         {session.ai_summary}
                       </p>
-                      <p className='mt-3 text-sm font-semibold text-[#245c4c]'>
+                      <p className='mt-3 text-sm font-semibold text-[#35b7a5]'>
                         {session.key_topics}
                       </p>
                     </div>