Implement Color and Font Tokens to Be Reusable Across the App

[CMI-James]

Project: streamfi-community
Figma Reference: Design Tokens Reference

📌 Description:

Refactor the codebase to make all colors and fonts reusable via design tokens or theme configuration.

🎯 Tasks:

• Fonts:

  • Set up global font families as defined in Figma (e.g., headings, body text, etc.).
  • Ensure correct weights, sizes, and responsive scaling.

• Colors:

  • Define all primary, secondary, accent, and neutral colors from the Figma in a single configuration.
  • Replace any hardcoded colors across components with the new tokenized variables.

✅ Expected Outcome:

• Easy access to consistent color and typography usage across all components.
• Improves maintainability and ensures Figma alignment.

---

Please comment with your ETA before starting this task.

[abbakargarba]

I want to tackle this issue

🎨 Application for Design Tokens & Theme Configuration Refactor Task

👋 Introduction

Hi there!
I'm excited to apply for the design system refactor task. My experience with scalable UI architecture and design system implementation makes me confident in delivering a tokenized theme setup that matches Figma precisely and improves long-term maintainability.

---

✅ Plan of Execution

1. Typography Tokens

• Define font families, weights, and line heights from Figma in a central config:
  • Headings (h1–h6)
  • Body text
  • Captions / Labels
• Set up responsive scaling using Tailwind's typography plugin or CSS clamp.
• Add tokens via Tailwind theme extension (in tailwind.config.ts) for:
  • fontFamily
  • fontSize
  • fontWeight
  • lineHeight
• Apply globally using utility classes or component-level overrides as needed.

2. Color Tokens

• Extract Figma-defined color palette:
  • Primary, Secondary
  • Accent, Error, Warning
  • Neutrals (backgrounds, text, surfaces)
• Add to Tailwind's theme:

  theme: {
    extend: {
      colors: {
        primary: '#XXXXXX',
        secondary: '#XXXXXX',
        accent: '#XXXXXX',
        // etc.
      },
    }
  }

File Path	Purpose
tailwind.config.ts	Centralized theme configuration
src/styles/globals.css	Optional base token setup (CSS vars)
src/components/*	Replace hardcoded values with tokens
src/utils/theme.ts (optional)	Custom theme logic (e.g., for dark mode)

Task	Result
Fonts tokenized in config	Heading/body classes set via Tailwind
Colors centralized via tokens	No hardcoded hex or inline colors
Responsive typography	Uses clamp() or Tailwind responsive sizes
Figma consistency ensured	Matches Figma design system tokens
Improved maintainability	Scalable, clean, and DRY configuration