diff --git a/packages/frontend/src/lib/Card.svelte b/packages/frontend/src/lib/Card.svelte
index 27dfc1c34..339e5186f 100644
--- a/packages/frontend/src/lib/Card.svelte
+++ b/packages/frontend/src/lib/Card.svelte
@@ -26,7 +26,7 @@ export let primaryBackground: string = 'bg-charcoal-800';
             <Fa size="1x" class="text-purple-500 cursor-pointer" icon="{icon}" />
           </button>
         {/if}
-        <div class="flex flex-col text-gray-400 whitespace-normal space-y-2" aria-label="context-name">
+        <div class="flex flex-col text-[var(--pd-content-card-text)] whitespace-normal space-y-2" aria-label="context-name">
           {#if title}
             <div class="text-sm">
               {title}
diff --git a/packages/frontend/src/lib/RecipeCard.svelte b/packages/frontend/src/lib/RecipeCard.svelte
index 9ea091d42..1d2165db3 100644
--- a/packages/frontend/src/lib/RecipeCard.svelte
+++ b/packages/frontend/src/lib/RecipeCard.svelte
@@ -22,8 +22,8 @@ $: localPath = findLocalRepositoryByRecipeId($localRepositories, recipe.id);
     <div class="flex flex-row text-base grow">
       <!-- left column -->
       <div class="flex flex-col grow">
-        <span class="">{recipe.name}</span>
-        <span class="text-sm text-gray-700">{recipe.description}</span>
+        <span class="text-[var(--pd-content-card-header-text)]">{recipe.name}</span>
+        <span class="text-sm text-[var(--pd-content-card-text)]">{recipe.description}</span>
       </div>
 
       <!-- right column -->
@@ -34,7 +34,7 @@ $: localPath = findLocalRepositoryByRecipeId($localRepositories, recipe.id);
 
     {#if localPath}
       <div
-        class="bg-charcoal-600 max-w-full rounded-md p-2 mb-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
+        class="bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] max-w-full rounded-md p-2 mb-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
         <Fa class="mr-2" icon="{faFolder}" />
         <span class="overflow-x-hidden text-ellipsis max-w-full">
           {localPath.path}
@@ -45,7 +45,7 @@ $: localPath = findLocalRepositoryByRecipeId($localRepositories, recipe.id);
     <!-- footer -->
     <div class="flex flex-row">
       <!-- version -->
-      <div class="flex-grow">
+      <div class="flex-grow text-[var(--pd-content-card-text)] opacity-50">
         {#if recipe.ref}
           <span>{recipe.ref}</span>
         {/if}
@@ -53,7 +53,7 @@ $: localPath = findLocalRepositoryByRecipeId($localRepositories, recipe.id);
 
       <!-- more details -->
       <button on:click="{() => router.goto(`/recipe/${recipe.id}`)}">
-        <div class="flex flex-row items-center">
+        <div class="flex flex-row items-center text-[var(--pd-link)] ">
           <Fa class="mr-2" icon="{faArrowUpRightFromSquare}" />
           <span> More details </span>
         </div>
diff --git a/packages/frontend/src/lib/RecipeStatus.svelte b/packages/frontend/src/lib/RecipeStatus.svelte
index 3bc779559..81920f04d 100644
--- a/packages/frontend/src/lib/RecipeStatus.svelte
+++ b/packages/frontend/src/lib/RecipeStatus.svelte
@@ -37,7 +37,7 @@ function onClick(): void {
       <button
         on:click="{onClick}"
         disabled="{loading}"
-        class="border-2 justify-center relative rounded border-dustypurple-700 text-dustypurple-700 hover:bg-charcoal-800 hover:text-dustypurple-600 w-10 p-2 text-center cursor-pointer flex flex-row">
+        class="border-2 justify-center relative rounded border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] hover:text-[var(--pd-button-text)] w-10 p-2 text-center cursor-pointer flex flex-row">
         {#if loading}
           <Spinner size="1em" />
         {:else}
@@ -48,7 +48,7 @@ function onClick(): void {
       </button>
     {/if}
     <svelte:fragment slot="tip">
-      <span class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs"
+      <span class="inline-block py-2 px-4 rounded-md text-xs"
         >{loading ? 'Cloning...' : localRepository ? 'Recipe cloned' : 'Clone recipe'}</span>
     </svelte:fragment>
   </Tooltip>