Skip to main content

Buttons

Buttons should feel modest, not shouty. Prefer smaller, well-placed buttons near the relevant content rather than giant, full-width, high-contrast buttons.

Common Properties​

  • Height: 44–48 pt
  • Corner radius: 24 pt (subtle pill)
  • Text: medium or semi-bold for primary, regular for secondary

Primary Buttons​

Use for main CTAs (e.g., "Add to wishlist", "Checkout")

Amber Variant​

  • Background: Amber Star (#FFC857)
  • Text: Ink Blue (#233548)

Ink Blue Variant​

  • Background: Ink Blue (#233548)
  • Text: Parchment (#FAF4E8) or white

Secondary Buttons​

Use for alternative or less emphasized actions

  • Background: Transparent
  • Border: Ink Blue (#233548) or Teal Edge (#4BB4C8)
  • Text: Ink Blue (#233548)
  • Style: Outline only

Flutter Components​

Flutter should define:

  • BwPrimaryButton – CTAs adhering to the primary button rules
  • BwSecondaryButton – Secondary actions with outline style

All new screens should use these primitives rather than re-defining button styles.

Design Guidelines​

  • Avoid giant, full-width, high-contrast buttons that feel shouty
  • Prefer smaller, well-placed buttons near the relevant content
  • No emoji on buttons or labels
  • Keep button text concise and action-oriented
  • Use sentence case, not ALL CAPS