Skip to content

Feature: Client design system — color tokens, typography, and theme #50

@FadyGergesRezk

Description

@FadyGergesRezk

Define the visual foundation for the web client: color palette, typography scale, and Tailwind v4 theme configuration. This issue must be resolved before or alongside #43.

Priority: P0

Tasks

  • Define the color palette using daisyUI's default theme or customize it in tailwind.config.js using daisyUI's color tokens
  • Choose a daisyUI theme (light/dark/auto) or extend with custom color palette using CSS custom properties
  • Pick and configure a typeface (e.g. Inter via @fontsource/inter) and register it in Tailwind config as --font-sans
  • Establish a typography scale (heading sizes h1–h4, body, caption, mono) using Tailwind utility classes
  • Ensure all daisyUI components render using the defined palette and typography
  • Dark mode class toggle visually switches the theme

Acceptance criteria

  • pnpm build passes with no type errors
  • All daisyUI components render using the defined palette (no hardcoded colors)
  • Dark mode class toggle visually switches the theme
  • Typography scale is applied consistently across heading and body elements
  • Theme mode behavior is explicit (persist toggle state or intentionally do not persist)

Metadata

Metadata

Assignees

No one assigned

    Labels

    clientIssue regarding the client frontendenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions