Edit flow configured

app/components/utility/Tag/Tag.container.tsx

@@ -7,6 +7,7 @@ import type { TagProps } from "./Tag.types";
 const DEFAULT_LABELS: Record<TagProps["variant"], string> = {
   recommended: "RECOMMENDED",
   selected: "SELECTED",
+  templateRecommended: "RECOMMENDED",
 };
 
 /**

app/components/utility/Tag/Tag.types.ts

@@ -1,7 +1,11 @@
-export type TagVariant = "recommended" | "selected";
+export type TagVariant = "recommended" | "selected" | "templateRecommended";
 
 export interface TagProps {
-  /** Visual variant: recommended (yellow) or selected (dark) */
+  /**
+   * Visual variant: recommended (yellow), selected (dark on light),
+   * or templateRecommended (dark pill on pastel `Card / Rule` — Figma
+   * `22142:898446`).
+   */
   variant: TagVariant;
   /** Tag text. Defaults to "RECOMMENDED" or "SELECTED" when not provided. */
   children?: React.ReactNode;

app/components/utility/Tag/Tag.view.tsx

@@ -7,12 +7,17 @@ import type { TagViewProps } from "./Tag.types";
  */
 export function TagView({ variant, children, className }: TagViewProps) {
   const isRecommended = variant === "recommended";
-  const bgClass = isRecommended
-    ? "bg-[var(--color-surface-inverse-brand-accent)]"
-    : "bg-[var(--color-gray-1000)]";
-  const textClass = isRecommended
-    ? "text-[var(--color-content-inverse-brand-primary)]"
-    : "text-[var(--color-gray-000)]";
+  const isTemplateRecommended = variant === "templateRecommended";
+  const bgClass = isTemplateRecommended
+    ? "bg-[var(--color-surface-default-tertiary)]"
+    : isRecommended
+      ? "bg-[var(--color-surface-inverse-brand-accent)]"
+      : "bg-[var(--color-gray-1000)]";
+  const textClass = isTemplateRecommended
+    ? "text-[var(--color-gray-000)]"
+    : isRecommended
+      ? "text-[var(--color-content-inverse-brand-primary)]"
+      : "text-[var(--color-gray-000)]";
 
   return (
     <span