Learning Page Rebrand — Color & Typography Styling

[MTsomo]

Learning Page Rebrand — Color & Typography Styling

As a Lead UI/UX Designer,
I need to update the core Learning Page (Courseware/Unit View) mockups, component designs, and UI library specs with the new WeBuddhist Academy color palette and typography styles,
So that the development team has an exact visual specification for updating the learning experience without changing existing layouts.

Description

This ticket covers creating high-fidelity Figma mockups for the Learning Page (Open edX courseware / unit navigation view) applying our updated brand identity. Because this page is actively used by students for focused study, the design scope is strictly limited to visual styling—applying brand colors, typography, and updated component styles. The structural layout, unit sequence navigation, sidebar drawer, and core XBlock placement must remain identical to the existing layout.

Design Deliverables & Scope

• Primary Courseware Screens:

  • Unit Navigation Header & Course Progress Bar.
  • Collapsible Left Sidebar / Sequence Accordion (default, open, and active states).
  • Main Unit Content Area & Container.

• Component Design Specs (Color & Typography Rebrand):

  • Video Player Component: Updated control bar, play/pause buttons, transcripts drawer, and speed selector overlay.
  • Text / HTML Block Components: Styled typography headers, body text, blockquotes, inline links, and code snippets.
  • Assessment & Problem Components: Styled multiple-choice options, checkbox groups, dropdowns, text inputs, hint boxes, and immediate feedback banners (correct/incorrect states).
  • Interactive Action Buttons: "Previous", "Next", "Bookmark", "Show Answer", and "Submit" buttons.
  • Progress & Status Badges: "Completed", "In Progress", and "Graded" indicators.

• States & Variations:

  • Active vs. Inactive Unit Tabs.
  • Hover, Focus, Disabled, and Selected state styling for all courseware navigation controls and input components.

Acceptance Criteria

• High-fidelity Figma screens created for the Learning Page across Desktop (1440px), Tablet (768px), and Mobile (375px) viewports.
• Individual component designs (Video, Text, Problems, Buttons, Navigation) updated with the new brand color theme and typography hierarchy.
• Existing page layout, sidebar collapsible drawer, and core XBlock structural placements remain 100% untouched.
• All interactive states (Default, Hover, Active, Focus, Completed, Correct/Incorrect) defined across all components.
• Figma components updated and linked to the centralized WeBuddhist Academy Design System library.

Definition of Done

• Design Sign-Off: Mockups and component specs reviewed and approved by product lead.
• Developer Handoff: Figma link published with inspectable color/typography variables and component state specs ready for frontend integration.