AI Chat

chat

Conversational UI with streaming reply — Raycast-style sharp surface (mirrors the existing / route).

Brand

Motion

9:41

5G·100%

AI Assist

Pricing component refactor

Refactor my pricing card so each tier highlights its CTA differently. Use the brand gradient for the popular one.

On it. I'll extract a `TierCard` component and route the highlighted tier through the StyleSeed brand gradient token. One sec — checking your existing setup.

Read(app/pricing/page.tsx)✓

Found it. Here's the cleaned-up component — gradient is wired to `var(--gradient-brand)` so it morphs automatically when you swap skins:

tsx

<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  className="w-full py-3 font-semibold"
  style={{
    background: tier.highlighted
      ? "var(--gradient-brand)"
      : "var(--card)",
    color: tier.highlighted
      ? "var(--brand-foreground)"
      : "var(--brand)",
    borderRadius: "var(--radius-lg)",
  }}
>
  {tier.cta}
</motion.button>

Perfect. Can you also add a hover lift?

Reply…

Design rules

• Rule 1 (Color Philosophy)
• Rule 14 (Hierarchy)

Methodology

• Ch.6 Linear/Toss Aesthetic
• Ch.8 Motion Vibe

Motion

• Snap entrance for messages; Spring on send button.