Add a UI design-tokens and Badge-variant styleguide for contributors

[mikewheeleer]

Add a UI design-tokens and Badge-variant styleguide for contributors

Description

The app uses a consistent visual language — focus rings, rounded-full buttons, neutral/emerald/amber/rose palettes, and the Badge neutral | ok | warning | danger variants — but none of it is written down. Contributors copy Tailwind class strings ad hoc, leading to drift. This issue adds a short styleguide documenting the tokens and when to use each variant.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Document the Badge variant semantics, button styles, focus-ring convention, and the light/dark color pairs, citing real classes from src/components/Badge.tsx and src/components/Button.tsx.
• Reference tailwind.config.ts and src/app/globals.css for theme variables.
• Keep it concise and example-driven so it stays maintainable.

Suggested execution

• Fork the repo and create a branch
• git checkout -b docs/ui-styleguide
• Implement changes
  • Write code in: documentation only (no component change).
  • Write comprehensive tests in: not applicable; ensure existing component tests still pass.
  • Add documentation: add docs/STYLEGUIDE.md and link it from README.md.
  • Validate accessibility: include the focus-ring and color-contrast conventions in the guide.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.

Example commit message

docs: add UI design-tokens and Badge-variant styleguide

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[YfengJ]

Hi maintainers, I would like to work on this issue if it is still available. I can keep the scope limited to a concise contributor styleguide for the existing Badge/Button/theme conventions, citing the current code and avoiding runtime behavior changes. I will wait for maintainer or GrantFox assignment/confirmation before opening a PR.