Polish spacing and typography for a more consistent UI across pages

[siribeesu]

Summary

ChaatBazaar has many pages and components (menu, cart, favourites, orders, FAQ, etc.), and the overall look and feel can benefit from a focused pass on spacing and typography. Consistent spacing and text styles make the interface feel more professional and easier to read.

Problem

• Margins, paddings, and gaps between elements may vary from page to page.
• Heading sizes, font weights, and text alignment may not follow a consistent pattern across sections.
• Some areas might feel crowded while others feel too empty, especially on different screen sizes.
• As new components are added, inconsistencies in spacing and typography can accumulate over time.

Proposed Improvement

Perform a UI polish pass specifically focused on spacing (layout) and typography (text style).

Suggested behavior:

• Define a small set of spacing rules (for example: standard section padding, card padding, gap between components).
• Define a simple typography scale:
  • Page title
  • Section heading
  • Body text
  • Small/secondary text
• Apply these rules consistently across key pages so similar elements look and feel aligned.

Why This Is Needed

Consistent spacing and typography:

• Make the app visually cleaner and easier to scan.
• Help users quickly recognize important sections and actions.
• Reduce visual noise and give a more cohesive brand impression.
• Make future UI changes easier because contributors have clear spacing/text guidelines to follow.

Expected Result

• Sections across different pages have similar padding and spacing patterns.
• Headings and body text look consistent, with clear hierarchy.
• Common components (cards, buttons, lists) feel aligned visually across the app.
• The overall interface feels more polished without changing the core layout or features.

Implementation Sketch

• Audit a few representative pages (home, menu, cart, favourites, orders, FAQ).
• Identify repeated patterns (cards, headings, paragraphs, buttons) and note current spacing/typography differences.
• Create or refine a simple design guideline:
  • Standard heading sizes and weights.
  • Standard body text size.
  • Standard gaps between sections and within cards.
• Update CSS so these guidelines are applied consistently.
• Verify the changes on both desktop and mobile to ensure spacing remains comfortable and readable.

Additional Context

This issue is focused on visual consistency and polish, not on adding new features. It complements existing UI/UX, accessibility, and theming work by giving ChaatBazaar a more unified and professional appearance across all its pages.

[aayan-rashid]

Hi, I would like to contribute to this issue under GSSoC.

Please assign it to me.

[akshaya988]

/assign