Component

Button

Pill-shaped CTA — one color, three levels (default, hover, inactive). Icons: Lucide as the child, with gap-3.

Variants

primary, secondary, ghost, mint, blue, destructive.

sm, md (default), lg — comfortable for both finger and mouse.

Padding (vertical / horizontal): sm 12px / 24px · md 16px / 24px · lg 20px / 32px
Gap between icon and label: 12px (gap-3)
Radius: pill (9999px)
Font: Figtree 600, size depends on button size
Motion: 150ms ease-out; hover scale 1.02, active scale 0.98 (see Overview → Motion & interaction).

On dark cards (hero blocks): primary + ghost.