Category

Molecules

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.

Sizes

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

Specification

  • 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).

Usage

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