Edit flow configured

app/components/cards/Rule/Rule.container.tsx

@@ -42,6 +42,7 @@ const RuleContainer = memo<RuleProps>(
     hasBottomLinks = false,
     bottomStatusLabel,
     bottomLinks,
+    recommended = false,
   }) => {
     const size = sizeProp ?? "L";
 
@@ -96,6 +97,7 @@ const RuleContainer = memo<RuleProps>(
         hasBottomLinks={hasBottomLinks}
         bottomStatusLabel={bottomStatusLabel}
         bottomLinks={bottomLinks}
+        recommended={recommended}
       />
     );
   },

app/components/cards/Rule/Rule.types.ts

@@ -4,6 +4,8 @@ import type { RuleSizeValue } from "../../../../lib/propNormalization";
 export interface Category {
   name: string;
   chipOptions: ChipOption[];
+  /** When `false`, hide the row’s + affordance. Default: show when the Rule allows adds. */
+  addButton?: boolean;
   onChipClick?: (categoryName: string, chipId: string) => void;
   onAddClick?: (categoryName: string) => void;
   onCustomChipConfirm?: (
@@ -58,6 +60,12 @@ export interface RuleProps {
   /** Uppercase chip (e.g. IN PROGRESS); omit when no left badge. */
   bottomStatusLabel?: string;
   bottomLinks?: RuleBottomLink[];
+  /**
+   * When set and the card is collapsed (`expanded` false), show the
+   * “RECOMMENDED” tag above the title (e.g. templates index). Ignored when
+   * `expanded` — Figma `22142:898446` compact `Card / Rule` only.
+   */
+  recommended?: boolean;
 }
 
 export interface RuleViewProps {
@@ -81,4 +89,5 @@ export interface RuleViewProps {
   hasBottomLinks?: boolean;
   bottomStatusLabel?: string;
   bottomLinks?: RuleBottomLink[];
+  recommended?: boolean;
 }

app/components/cards/Rule/Rule.view.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "../../../contexts/MessagesContext";
 import MultiSelect from "../../controls/MultiSelect";
 import InlineTextButton from "../../buttons/InlineTextButton";
 import NavigationLink from "../../navigation/Link";
+import Tag from "../../utility/Tag";
 import type { RuleBottomLink, RuleViewProps } from "./Rule.types";
 
 export function RuleView({
@@ -28,6 +29,7 @@ export function RuleView({
   hasBottomLinks = false,
   bottomStatusLabel,
   bottomLinks,
+  recommended = false,
 }: RuleViewProps) {
   const t = useTranslation("ruleCard");
   const ariaLabel = t("ariaLabel")?.replace("{title}", title) || title;
@@ -90,6 +92,7 @@ export function RuleView({
   `;
 
   // Title typography - use CSS responsive classes
+  const showRecommendedTag = recommended && !expanded;
   const titleClass = `
     max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px]
     min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px]
@@ -256,12 +259,22 @@ export function RuleView({
             {/* Inner container for header text with padding */}
             <div
               className={`
-              flex items-center justify-center w-full
+              flex w-full
+              ${
+                showRecommendedTag
+                  ? "flex-col items-start justify-center gap-1"
+                  : "items-center justify-center"
+              }
               max-[639px]:pl-[8px] max-[639px]:py-[8px]
               min-[640px]:max-[1023px]:pl-[12px] min-[640px]:max-[1023px]:py-[12px]
               min-[1024px]:px-[16px] min-[1024px]:py-[24px]
             `}
             >
+              {showRecommendedTag ? (
+                <Tag variant="templateRecommended">
+                  {t("recommendedLabel")}
+                </Tag>
+              ) : null}
               <h3
                 className={`${titleClass} cursor-inherit text-[var(--color-content-invert-primary)] overflow-hidden text-ellipsis w-full`}
               >
@@ -384,7 +397,9 @@ export function RuleView({
                   onCustomChipClose={(chipId) => {
                     category.onCustomChipClose?.(category.name, chipId);
                   }}
-                  addButton={!hideCategoryAddButton}
+                  addButton={
+                    !hideCategoryAddButton && category.addButton !== false
+                  }
                   addButtonText="" // Empty text for icon-only circular button
                   className="w-full"
                 />

app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx

@@ -57,6 +57,7 @@ export function GovernanceTemplateGrid({
           key={card.slug}
           title={card.title}
           description={card.description}
+          recommended={card.recommended === true}
           size={cardSize}
           className={`
               select-none

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