Page MenuHomePhabricator

Update Color Scheme and Button Styles
Closed, ResolvedPublic

Description

**Title: Update Color Scheme and Button Styles

Description: Redesign the color scheme and button styles of the WebApp to strongly reflect Ghanaian identity. The interface should instantly communicate that this is a Ghana-built platform focused on Ghana’s Supreme Court and legal system. Color choices should be inspired by Ghana’s national colors and cultural aesthetics, while maintaining a clean, professional look suitable for legal and academic use.

The design should feel distinctly Ghanaian without compromising usability, readability, or accessibility.

Domain: Design (UI)
Difficulty: Advance
Steps:

  • Research Ghana’s national colors and commonly recognized cultural color combinations.
  • Propose a primary and secondary color palette inspired by Ghana that meets accessibility standards.
  • Apply the selected colors consistently to buttons, links, navigation elements, and highlights.
  • Update button styles including default, hover, and active states to match the new palette.
  • Ensure sufficient color contrast for readability and accessibility compliance.
  • Test the updated design across different pages and screen sizes.

Hover Image

Expected Outcome:
The WebApp has a consistent, accessible, and visually distinct Ghanaian look, with button styles and color schemes that clearly communicate the platform’s national identity while remaining user-friendly.

Event Timeline

07032609890 claimed this task.
07032609890 added a subscriber: Chuiimuii_ofc.

hey @07032609890 , the task has been resolved on the author's github and as for now , it should be marked as " Resolved " . there is no need to open the task again and poke the assignees and the subscribers. Thankyou !

Hi @Chuiimuii_ofc,

Please note that tasks must NOT be closed or resolved without mentor review and approval.

The correct process is: 1️⃣ Assign the task to yourself
2️⃣ Do the work
3️⃣ Comment “Task completed, please review”
4️⃣ Wait for mentor confirmation

Closing or resolving tasks on your own without mentor consent is not allowed and may affect task validity and leaderboard points.

Going forward, please follow the process strictly.
If you’re unsure at any point, ask before taking action.

Thank you for understanding.

I am taking this task

Update Color Scheme and Button Styles

Ghanaian Color Scheme Implementation

Overview

The WebApp has been redesigned with a comprehensive Ghanaian color scheme inspired by Ghana's national flag colors (Red, Gold, Green) while maintaining professional aesthetics suitable for a legal platform.

Color Palette

    1. Primary Colors (Red - Ghana Flag Red)
  • Primary Red: #CE1126 - Main brand color
  • Primary Red Light: #E63946 - Hover states
  • Primary Red Dark: #A91D2A - Active/pressed states
  • Primary Red Subtle: #F8E8EA - Backgrounds and subtle accents
    1. Accent Colors (Gold - Ghana Flag Gold)
  • Accent Gold: #FCD116 - Highlights and accents
  • Accent Gold Light: #FDE68A - Light backgrounds
  • Accent Gold Dark: #F59E0B - Darker gold variants
  • Accent Gold Subtle: #FFFBEB - Subtle gold backgrounds
    1. Secondary Colors (Green - Ghana Flag Green)
  • Secondary Green: #006B3F - Secondary actions
  • Secondary Green Light: #008751 - Hover states
  • Secondary Green Dark: #004D2E - Active states
  • Secondary Green Subtle: #E6F5ED - Backgrounds

home page with ghanaian colors .png (579×1 px, 732 KB)
"Hero Section color schema changes with design."

buttons well displayed.png (874×1 px, 839 KB)
"When the filter advance search is displayed, the design appearance."
about page.png (877×1 px, 727 KB)
"About page Design"
Refer to Task T412200 demo on the design, and when finally brought in to coding
Or preferably here is the Demo

@SincerelySaeed5000

Task Completed please review

Task is being handled by @FauwazAlhassan. Others, please pick a different task.

Mentor review:

This task was implemented by @Fauwaz
The Ghanaian color scheme and button style updates were completed by him, with supporting documentation, palette details, and screenshots provided.

Other comments on this task are review-related only and do not constitute task implementation.

Proceeding with approval for @Fauwaz