Skip to content

Client #50: Design system — color palette, typography, and theme#54

Open
FadyGergesRezk wants to merge 2 commits into
mainfrom
client/50-design-system-theme
Open

Client #50: Design system — color palette, typography, and theme#54
FadyGergesRezk wants to merge 2 commits into
mainfrom
client/50-design-system-theme

Conversation

@FadyGergesRezk
Copy link
Copy Markdown
Collaborator

@FadyGergesRezk FadyGergesRezk commented May 29, 2026

Why

The web client had no visual foundation — no defined colour palette, no typography scale. This establishes the full design system that all feature pages will build on, closing the blocker for issue #43.

What changed

  • Replaced Inter with Poppins (400/500/600/700) as the body font and added Bebas Neue as a display font for headings and titles
  • Defined a lumio / lumio-dark theme pair using daisyUI v5 CSS custom properties with full semantic color tokens
  • Added a dual typography scale: display-xs through display-2xl for Bebas Neue headings, and h1h4 / body / caption / mono for Poppins prose
  • Added a ThemeProvider, ThemeContext, useTheme hook, and ThemeToggle button with Lucide icons (Sun/Moon) — theme persists to localStorage and falls back to OS preference
  • Installed Lucide React as the icon library (tree-shakeable SVG, no icon font)
  • Applied font-display to the app title and page titles in AppRouter.tsx
  • Added CLAUDE.md with branch naming, conventional commit, and PR conventions for the repo
  • Fixed payments/client.ts base URL (/finances/finance) and added Vite dev proxy for /api

Notes

Poppins ships Devanagari subsets by default via @fontsource. If the app is Latin-only, swap imports to @fontsource/poppins/latin-400.css etc. to trim ~160 KB from the font bundle.

Testing

pnpm build passes with no type errors. All pre-commit hooks (lint, typecheck, tests, build) pass. Dark mode toggle switches theme and persists across page reloads.

Closes #50

@FadyGergesRezk FadyGergesRezk requested review from f-s-h and raphael-frank and removed request for raphael-frank May 29, 2026 02:47
@f-s-h
Copy link
Copy Markdown
Collaborator

f-s-h commented May 29, 2026

Borders and shadows of cards cannot be seen in dark mode

@f-s-h
Copy link
Copy Markdown
Collaborator

f-s-h commented May 29, 2026

Rest lgtm

Copy link
Copy Markdown
Collaborator

@f-s-h f-s-h left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants