Summary
consistent UI design throughout the website. Adopt a clean, professional look with standardized styling (remove excessive rounded corners, minimize gradients, apply a uniform design schema across all components)
Current vs. Desired Behavior
Current UI:
- Inconsistent use of rounded corners across cards, buttons, and sections.
- Multiple gradient styles and shadow intensities.
- vrying padding, margin, and spacing conventions.
- Lack of a unified color hierarchy and typography scale.
Desired UI:
- Flat, professional design system with clean, sharp edges (no rounded corners).
- Minimal gradients with subtle, consistent shadows.
- Cohesive color scheme aligned with the ACM brand palette.
- Proper design layout with clear spacing and visual hierarchy.
- Unified typography scale and consistent component spacing.
- Smooth hover animations for interactive elements (buttons, links, cards, etc.).
Affected Components / Screens
This is a global UI update that will affect nearly all frontend components and templates, including but not limited to:
base.html (layout, navigation, footer)home.htmlabout.htmlevents.html & event_detail.htmlteam.htmlgallery.htmlprojects.htmlmembership.html & membership_status.html- All form pages (
feedback.html, competitions/login.html, competitions/signup.html)
- All card, button, and input field components.
Design References
A Figma design file should be created first @renarin-kholin as the single source of truth for all components.
Workflow
- Design First: A shared Figma document will be created and shared with all web team members to collaborate on the new design system.
- Finalize Design: Development will only begin once the design for all core components and layouts is finalized and approved in Figma.
- Development Branch: All work for this UI update must be done in a new, dedicated branch.
- Merge Strategy: Upon completion and review, the feature branch will be squash-merged into the master.
Acceptance Criteria
- All UI components follow a shared design schema or style guide.
- Hover animations are minimal and consistent throughout.
- Typography and colors adhere to ACM’s branding guidelines.
- Layout spacing and alignment are consistent across all pages.
Summary
consistent UI design throughout the website. Adopt a clean, professional look with standardized styling (remove excessive rounded corners, minimize gradients, apply a uniform design schema across all components)
Current vs. Desired Behavior
Current UI:
Desired UI:
Affected Components / Screens
This is a global UI update that will affect nearly all frontend components and templates, including but not limited to:
base.html(layout, navigation, footer)home.htmlabout.htmlevents.html&event_detail.htmlteam.htmlgallery.htmlprojects.htmlmembership.html&membership_status.htmlfeedback.html,competitions/login.html,competitions/signup.html)Design References
A Figma design file should be created first @renarin-kholin as the single source of truth for all components.
Workflow
Acceptance Criteria