💡[Feature]: Introduce a Universal UI Layout System (buttons, inputs, spacing, cards, and rounding) for consistent frontend design

[rushiii3]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Currently, UI components across the frontend may use different styles, spacing, sizes, and rounding values. This can lead to inconsistent user interfaces and makes it harder to maintain a cohesive design system.

I propose introducing a universal UI layout and design system that standardizes core UI primitives such as:

• Buttons
• Inputs
• Cards
• Spacing
• Border radius (rounding)
• Typography scale
• Layout containers

The goal is to create a consistent, professional UI foundation similar to modern application design systems.

This system can be implemented using theme tokens and reusable components, ensuring that every screen follows the same visual rules.

If the project uses Tamagui, the design system can be built using Tamagui tokens and variants to maintain consistency across platforms.

Proposed Design System Elements

1. Button System

• Primary button
• Secondary button
• Ghost button
• Destructive button
• Loading states
• Size variants (sm, md, lg)

2. Input System

• Standard input
• Password input
• Textarea
• Validation states
• Disabled states

3. Card Components

• Standard card layout
• Card header
• Card content
• Card footer

4. Spacing System
A consistent spacing scale:

xs
sm
md
lg
xl
2xl

5. Border Radius Tokens

Standard rounding tokens:

sm
md
lg
xl
2xl
full

6. Layout Containers
Reusable layout primitives such as:

• Page container
• Section container
• Form layout
• Responsive grid system

Use Case

As the project grows, multiple developers may create UI components independently. Without a universal layout system, this can lead to:

• Different button styles across pages
• Inconsistent spacing between components
• Mixed border radius values
• UI that looks fragmented instead of cohesive

A universal UI system ensures that all new screens and components follow the same visual guidelines.

Example:

Instead of defining styles per component:

<Button padding={12} borderRadius={8} />

Developers would use standardized tokens:

<Button size="md" variant="primary" />

This improves developer productivity and visual consistency.

Benefits

Implementing a universal UI layout system would provide several benefits:

• Consistent design language across the application
• Professional and polished user interface
• Reusable UI components
• Faster UI development
• Better scalability for future features
• Easier onboarding for new contributors
• Centralized control over design changes

Additionally, aligning the UI system with patterns similar to modern component libraries (such as shadcn/ui) would make the project easier to extend and maintain.

Add ScreenShots

No response

Priority

High

Record

• I have read the Contributing Guidelines
• I'm a GSSOC'24 contributor
• I'm a IEEE IGDTUW contributor
• I want to work on this issue

[github-actions]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊

[SB2318]

Good. I will create the sub-issues once the backend process is completed. So that our workload can be equally distributed.