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

[greatest0fallt1me]

@greatest0fallt1me has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hello Maintainers 👋,
I’m interested in picking up this issue and contributing to the project.
I have solid experience working across both frontend and blockchain layers, including building user interfaces with Next.js and developing Stellar smart contracts using Rust (Soroban). I’m familiar with translating Figma designs into pixel-accurate UIs, handling wallet integrations, and writing efficient, well-tested contract logic.
I focus on writing clean, maintainable code, following repository standards, and keeping communication transparent throughout the development process. I can start immediately and complete the work within the expected timeframe.
Excited to collaborate and add value to the project 🚀
Thank you!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @greatest0fallt1me to this issue.

[Deyanju23]

@Deyanju23 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to resolve this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Deyanju23 to this issue.

[drips-wave]

Congratulations, @greatest0fallt1me! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @greatest0fallt1me: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[greatest0fallt1me]

I’ve completed the design and added it to the provided Figma file. Please review it and close this issue. If you find it satisfactory, thank you.

[drips-wave]

This issue has been completed by @greatest0fallt1me as part of the Stellar Wave Program's 5th Wave 🥳

😎 @greatest0fallt1me: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.