UI/UX: Establish a consistent primary/secondary button system across the app

[Baskarayelu]

Description

Button styling is inconsistent across RemitWise: the Insurance page uses bg-blue-600, the family page uses focus:ring-red-500, the landing uses brand red, and emergency uses brand-red/brand-redHover. There is no shared button component, so primary, secondary, destructive, and disabled treatments drift between pages. We need a defined button system (variants, sizes, states) anchored on the brand and status tokens, with documented usage so future screens stay consistent. Focus rings should use the existing ring-focus/ring-offset-focus tokens.

Requirements and context

• UI/UX scope only.
• Reference tailwind.config.js, app/insurance/page.tsx, app/family/page.tsx, app/emergency-transfer/page.tsx, components/WalletButton.tsx.
• Define variants: primary, secondary, destructive, ghost; and sizes sm/md/lg.
• Define states: default, hover, active, focus-visible, disabled, loading.
• Standardize on brand red for primary (replacing stray blue).

Suggested execution

• Branch: uiux/button-system
• Deliver a button variant/state matrix and token mapping in docs/.
• Identify and redline the highest-traffic mismatched buttons.
• Provide focus-ring specs using ring-focus.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: focus visibility, disabled semantics, contrast for all variants.

Example commit message

feat(uiux): define consistent button system across remitwise

Guidelines

• Document the variant/state matrix.
• Eliminate stray blue primaries.
• Timeframe: 96 hours