Suggestion: Improved landing page with new design

[AyushhhCR7]

Describe the feature

This issue proposes defining and implementing a cohesive design system and visual language for the PictoPy as part of the overall visual overhaul.

Figma File: https://www.figma.com/design/loFMxcum8P539ulceCDfAM/PictoPy?m=auto&t=88meYIGPxgKegEoI-6

This will establish the foundation for all subsequent UI updates, ensuring visual consistency, accessibility, and minimal performance overhead across the site.

Scope

• Typography and font usage
• Colour palette and contrast-safe colour tokens
• Iconography style and usage
• Spacing, layout, and visual rhythm
• Base UI components (buttons, links, cards, etc)
• Accessibility and performance considerations

Current Design Issues

• Inconsistent typography hierarchy across sections
• Colour contrast issues affecting readability and accessibility
• No clearly defined visual tokens (colours, spacing, components)
• UI elements (buttons, links, badges) lack consistency
• Design decisions are repeated instead of reused

Proposed Solution

• Define a clear typography (headings, body, captions) with consistent usage
• Introduce a colour system using accessible contrast ratios
• Standardise iconography style and sizing
• Create reusable base components (buttons, links, cards) to be used across the site
• This implementation should support responsive layouts and be compatible with the existing light/dark colour system defined in the Design System.
• Use lightweight Tailwind CSS to avoid unnecessary runtime or bundle overhead
• Document design decisions to make future contributions easier

Add ScreenShots

Design Considerations

• Accessibility
• Visual consistency
• User flow/navigation
• Responsive design

Record

• I agree to follow this project's Code of Conduct
• I want to work on this issue

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[AyushhhCR7]

@rahulharpal1603 sir, i went through the landing page, and noticed that it doesnt look that much proffesional
lack of consistency, unwanted things, and lack of aesthetics can be seen
i have made some new designs, as i have provided the link too

[AnikeshAnilkumarLathe]

Hi @AyushhhCR7 , I would like to contribute to this issue.

[pranitaurlam]

Hi @AyushhhCR7 ! I've implemented the design system improvements and raised a PR for this issue.

Since the Figma file was restricted, I created a modern, accessible design system based on the existing brand identity and best practices. This includes new typography tokens, accessible color palettes, and standardized components.

[AyushhhCR7]

@pranitaurlam it was already mentioned that you should not raise a pr without getting reviewed by the maintainer

I was already working on this issue, and have done most of the things
Just waiting for the maintainer's response

Follow the guidelines

[pranitaurlam]

Hi @AyushhhCR7 , since no assignee was mentioned for this issue, I went ahead and worked on it. I’ve raised a PR with the changes.

[AyushhhCR7]

@pranitaurlam please follow the guidelines