DriftFold · what your buttons & cards actually look like

We looked through your app and found 10 button and card styles that don't quite match, used across 21 spots. A lot of them are really the same thing twice. Each card below is one style — just tell us what to do with it, then download your choices at the bottom.

How it works: ① Look at each style. ② Tell us what to do with it. ③ Hit Download my choices — that's the file that cleans things up.

Button your main one + 5 that look a bit different, across 12 places

Used in 4 places ★ your main one

Blue background, pill-shaped, a drop shadow and white text

Why?

bg-blue-600/hover:bg-blue-700 + rounded-full + shadow-lg + text-white is a distinct elevated pill used in 4 places, unlike default's bg-primary hover:bg-primary/90 — promote to a shared 'brand' variant.

Show where it's used (4)
  • app/billing/page.tsx line 21
  • app/checkout/page.tsx line 16
  • app/dashboard/page.tsx line 21
  • app/page.tsx line 18
Exact code
bg-blue-600hover:bg-blue-700rounded-fullshadow-lgtext-white
Used in 3 places

Green background and white text

Why?

bg-green-600/hover:bg-green-700/text-white recurs across 3 sites as a confirm/success action with no matching cva variant — name it by role as 'success'.

Show where it's used (3)
  • app/onboarding/page.tsx line 16
  • app/page.tsx line 23
  • app/profile/page.tsx line 25
Exact code
bg-green-600hover:bg-green-700text-white
Used in 2 places

Red background and white text

Why?

Hand-rolled bg-red-600/hover:bg-red-700/text-white is the destructive role already defined as bg-destructive text-destructive-foreground hover:bg-destructive/90 — fold into the existing variant.

Show where it's used (2)
  • app/billing/page.tsx line 26
  • app/dashboard/page.tsx line 26
Exact code
bg-red-600hover:bg-red-700text-white
Used in 1 place only here

A custom color background, pill-shaped, a drop shadow and white text

Why?

bg-[#2563eb]/hover:bg-[#1d4ed8] are the literal hexes of blue-600/blue-700, and with identical rounded-full/shadow-lg/text-white this renders pixel-identical to btn-1 — merge the arbitrary-value duplicate into the named cluster.

Show where it's used (1)
  • app/settings/page.tsx line 26
Exact code
bg-[#2563eb]hover:bg-[#1d4ed8]rounded-fullshadow-lgtext-white
Used in 1 place ⚠ looks like a mistake

Blue background and blue text

Why?

bg-blue-600 with text-blue-600 paints the label the same hue as its background (illegible) — an error, not a style; keep at the single site and flag for human review.

Show where it's used (1)
  • app/profile/page.tsx line 30
Exact code
bg-blue-600text-blue-600
Used in 1 place ⚠ looks like a mistake

Purple background, extra padding, square corners, a heavy shadow and small text

Why?

bg-purple-500 + px-12 + rounded-none + text-xs + shadow-2xl is a lone one-off matching no role or other cluster — reads as a copy-paste slip; keep at the call site and flag.

Show where it's used (1)
  • app/onboarding/page.tsx line 21
Exact code
bg-purple-500px-12rounded-noneshadow-2xltext-xs
2 that change depending on context — we won't touch these
  • app/checkout/page.tsx line 26
  • app/settings/page.tsx line 36

Card your main one + 1 that look a bit different, across 5 places

Used in 3 places ★ your main one
elevated

A drop shadow

Why?

The lone shadow-md override is pixel-identical to the existing 'elevated' variant (classes: shadow-md) — it's a hand-rolled duplicate, fold it into the named variant.

Show where it's used (3)
  • app/billing/page.tsx line 11
  • app/dashboard/page.tsx line 11
  • app/profile/page.tsx line 12
Exact code
shadow-md
Used in 2 places
accent

Blue border and a drop shadow

Why?

border-blue-500 + shadow-lg is a genuinely new look used at 2 sites that matches no existing variant; promote it to a role-named 'accent' variant rather than leaving the blue border drifting.

Show where it's used (2)
  • app/page.tsx line 10
  • app/settings/page.tsx line 14
Exact code
border-blue-500shadow-lg

Badge 2 different looks across 4 places

Used in 2 places
muted

Gray background, rounded corners and gray text

Why?

bg-gray-100/text-gray-600 is a legible low-emphasis look repeated across 2 sites with no theme-token equivalent among existing variants, so it earns a semantic 'muted' variant.

Show where it's used (2)
  • app/billing/page.tsx line 16
  • app/settings/page.tsx line 19
Exact code
bg-gray-100rounded-smtext-gray-600
Used in 2 places
success

Green background and green text

Why?

bg-green-100/text-green-800 is the conventional high-contrast success pairing used in 2 places and no existing variant covers green, so it becomes a 'success' variant named by role not color.

Show where it's used (2)
  • app/dashboard/page.tsx line 16
  • app/profile/page.tsx line 17
Exact code
bg-green-100text-green-800

Input ✓ already consistent

Every Input uses the standard style — nothing to clean up here.

Your choices updates as you pick — this is what gets cleaned up 
[
  {
    "component": "Button",
    "clusters": [
      {
        "cluster_id": "btn-1",
        "decision": "snap-to",
        "target_variant": "brand",
        "folded_utils": [
          "bg-blue-600",
          "hover:bg-blue-700",
          "rounded-full",
          "shadow-lg",
          "text-white"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/billing/page.tsx",
            "line": 21,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/checkout/page.tsx",
            "line": 16,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/dashboard/page.tsx",
            "line": 21,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/page.tsx",
            "line": 18,
            "variant": "default",
            "size": "default"
          }
        ]
      },
      {
        "cluster_id": "btn-2",
        "decision": "snap-to",
        "target_variant": "success",
        "folded_utils": [
          "bg-green-600",
          "hover:bg-green-700",
          "text-white"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/onboarding/page.tsx",
            "line": 16,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/page.tsx",
            "line": 23,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/profile/page.tsx",
            "line": 25,
            "variant": "default",
            "size": "default"
          }
        ]
      },
      {
        "cluster_id": "btn-3",
        "decision": "merge-into",
        "target_variant": "destructive",
        "folded_utils": [
          "bg-red-600",
          "hover:bg-red-700",
          "text-white"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/billing/page.tsx",
            "line": 26,
            "variant": "default",
            "size": "default"
          },
          {
            "file": "app/dashboard/page.tsx",
            "line": 26,
            "variant": "default",
            "size": "default"
          }
        ]
      },
      {
        "cluster_id": "btn-4",
        "decision": "merge-into",
        "target_variant": "btn-1",
        "folded_utils": [
          "bg-[#2563eb]",
          "hover:bg-[#1d4ed8]",
          "rounded-full",
          "shadow-lg",
          "text-white"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/settings/page.tsx",
            "line": 26,
            "variant": "default",
            "size": "default"
          }
        ]
      },
      {
        "cluster_id": "btn-5",
        "decision": "keep",
        "target_variant": "",
        "folded_utils": [
          "bg-blue-600",
          "text-blue-600"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/profile/page.tsx",
            "line": 30,
            "variant": "default",
            "size": "default"
          }
        ]
      },
      {
        "cluster_id": "btn-6",
        "decision": "keep",
        "target_variant": "",
        "folded_utils": [
          "bg-purple-500",
          "px-12",
          "rounded-none",
          "shadow-2xl",
          "text-xs"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/onboarding/page.tsx",
            "line": 21,
            "variant": "default",
            "size": "default"
          }
        ]
      }
    ]
  },
  {
    "component": "Card",
    "clusters": [
      {
        "cluster_id": "card-1",
        "decision": "merge-into",
        "target_variant": "elevated",
        "folded_utils": [
          "shadow-md"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/billing/page.tsx",
            "line": 11,
            "variant": "default",
            "size": null
          },
          {
            "file": "app/dashboard/page.tsx",
            "line": 11,
            "variant": "default",
            "size": null
          },
          {
            "file": "app/profile/page.tsx",
            "line": 12,
            "variant": "default",
            "size": null
          }
        ]
      },
      {
        "cluster_id": "card-2",
        "decision": "snap-to",
        "target_variant": "accent",
        "folded_utils": [
          "border-blue-500",
          "shadow-lg"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/page.tsx",
            "line": 10,
            "variant": "default",
            "size": null
          },
          {
            "file": "app/settings/page.tsx",
            "line": 14,
            "variant": "default",
            "size": null
          }
        ]
      }
    ]
  },
  {
    "component": "Badge",
    "clusters": [
      {
        "cluster_id": "badge-1",
        "decision": "snap-to",
        "target_variant": "muted",
        "folded_utils": [
          "bg-gray-100",
          "rounded-sm",
          "text-gray-600"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/billing/page.tsx",
            "line": 16,
            "variant": "default",
            "size": null
          },
          {
            "file": "app/settings/page.tsx",
            "line": 19,
            "variant": "default",
            "size": null
          }
        ]
      },
      {
        "cluster_id": "badge-2",
        "decision": "snap-to",
        "target_variant": "success",
        "folded_utils": [
          "bg-green-100",
          "text-green-800"
        ],
        "kept_utils": [],
        "call_sites": [
          {
            "file": "app/dashboard/page.tsx",
            "line": 16,
            "variant": "default",
            "size": null
          },
          {
            "file": "app/profile/page.tsx",
            "line": 17,
            "variant": "default",
            "size": null
          }
        ]
      }
    ]
  }
]