Design System Audit — Brand DNA from almaghrib.org

AlMaghrib.org Design System Audit

Date: 2026-03-16 Source: https://www.almaghrib.org (live extraction via browser computed styles) Platform: WordPress (Salient/Nectar theme) + Tailwind CSS + Custom React components Viewport Tested: Desktop 1440x900, Mobile 375x812

1. Typography

Font Families

Loaded Font Weights (actually rendered on pages)

Type Scale

Letter Spacing

• normal across all headings and body text (no custom letter-spacing values)

2. Color Palette

Primary Brand Colors

CTA / Accent Colors

Neutral Colors

Interactive State Colors

Footer Colors

3. Spacing System

CSS Variables

--nectar-resp-container-padding: 90px;
--mobile-container-width: 88%;
--nectar-body-line-height: 22px;
--nectar-menu-item-spacing: 10px;
--nectar-border-thickness: 2px;
--nectar-border-radius: 4px;

Container Widths

Section Vertical Padding

Component Spacing

4. Component Library

Buttons

A. Large CTA (Yellow/Gold - Nectar Button)

background: #FCD823;
color: #000000;
font: 600 18px/22px "Readex Pro", sans-serif; /* weight may show as body default */
padding: 23px 50px;
border-radius: 4px;
border: none;
display: inline-block;
/* Class: .nectar-button.jumbo.regular.extra-color-2 */

Used for: "Maximize Your Ajr", large section CTAs

B. Primary CTA (Purple)

background: #811CE5;
color: #FFFFFF;
font: 600 18px "Readex Pro", sans-serif;
padding: 16px 24px;
border-radius: 4px; /* or 8px in some contexts */
border: none;
/* Custom component styling */

Used for: "Upcoming Seminars" hero button, "See What's New" (uses #8E23B2 variant)

C. Donate Button (Header)

background: #811CE5;
color: #FFFFFF;
font: 400 16px "Readex Pro", sans-serif;
padding: 13px 31px;
border-radius: 4px;
border: none;
display: flex;
/* Class: .donate-btn */
/* Has chain-link icon prefix */

D. Outline Button (White on Dark BG)

background: transparent;
color: #F9F9F9;
font: 600 18px "Readex Pro", sans-serif;
padding: 16px 24px;
border: 1.11px solid #FFFFFF;
border-radius: 4px;

Used for: "Seminar Catalogue" on hero

E. Pill Button (Yellow Rounded)

background: #F9EB22;
color: #000000;
font: 600 16px "Readex Pro", sans-serif;
padding: 8px 22.4px;
border-radius: 100px;
border: none;
/* Class: .link_wrap */

Used for: "Get Your Access", "Automate Your Sadaqa"

F. "See All" Button (Light Purple)

background: #F5EBFF;
color: #811CE5;
font: 600 "Readex Pro";
padding: 8px 16px 8px 12px;
border-radius: 4px;
border: none;
/* Has right-arrow icon */

G. "See What's New" Button (Purple Filled Accent)

background: #8E23B2;
color: #FDCA17; /* Gold text on purple */
font: 600 "Readex Pro";
padding: 16px 24px;
border-radius: 8px;
border: none;

H. Learn More (Mega Menu Card - Full Width)

background: oklch(0.852 0.199 91.936); /* ~#FDCA17 */
color: #191533;
font: 600 12px "Readex Pro";
padding: 10px 0px;
border-radius: 8px;
width: 100%;
text-align: center;
/* Class: .btn-learn-more */

I. Learn More (Seminar Page)

background: #FDCA17;
color: #000000;
font: 400 18px "Readex Pro", sans-serif;
padding: 12px 26px;
border-radius: 4px;
border: none;
/* Class: .btn-learn-more */

J. Register Here (Event Page)

background: #F9EB22;
color: #000000;
font: 600 18px "Readex Pro";
border-radius: 0px; /* Square corners */
/* Large click target */

K. Learn Now (Home Card - Compact)

background: #FDCA17;
color: #000000;
font: 400 12px "Readex Pro", sans-serif;
padding: 0px; /* Minimal */
border-radius: 8px;

Cards

Event Card - Homepage Upcoming Section

/* .event-card */
background: #FFFFFF;
border: 1.11px solid #D9DBE1;
border-radius: 16px;
padding: 16px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.08);
display: flex;
flex-direction: row;
gap: 16px;

/* Image */
width: 184px;
height: 200px;
border-radius: 10px;
object-fit: cover;

/* Card Typography */
.event-title: Readex Pro 18px/18px 600 #201B42
.event-subtitle: Readex Pro 12px/12px 600 #528DFF
.event-desc: Readex Pro 14px/16.8px 400 #9391A8
.icon (location/date): Readex Pro 16px/22px 400 #676767

Event Card - Mobile

display: flex;
flex-direction: column; /* Stacks vertically */
width: ~382px; /* Full container */
padding: 8px 8px 12px;
border-radius: 15px;
margin: 19.2px 0px;
/* Image becomes full-width above content */
/* "Learn Now" button becomes full-width */

Seminar Card - Weekend Seminars Carousel

/* .seminar-card */
background: #FFFFFF;
border: 1.11px solid #D9DBE1;
border-radius: 24px;
padding: 0px; /* Image bleeds to edge */
box-shadow: 0px 3px 10px rgba(0,0,0,0.08);
display: flex;
flex-direction: row;
gap: 30px;
width: ~882px;
overflow: hidden;

/* Card Typography */
.instructor-name-avatar: 14px 500 #333333
.seminar-title (H3): Readex Pro 24px/34px 500 #222222
.seminar-desc: Readex Pro 18px/22px 500 #9391A8
.padding-top-5 (meta): Readex Pro 18px/22px 500 #201B42

Mega Menu Event Card

border: 1.11px solid #D9DBE1;
border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
max-width: 300px;
padding: 0px;
overflow: visible;
/* Tailwind classes: !w-full !border !border-[#D9DBE1] !rounded-lg !shadow-sm !max-w-[300px] */

Course Catalog Card

/* .cc-card-img */
border-radius: 20px;
overflow: clip;
width: ~267px;
/* Image-only cards, no text content */
cursor: pointer;

Filter Pills

Catalog Category - Active

/* .btn-filter-1.active */
background: #811CE5;
color: #FFFFFF;
font: 600 14px "Readex Pro", sans-serif;
padding: 12px 24px;
border-radius: 40px;
border: none;
cursor: pointer;

Catalog Category - Inactive

/* .btn-filter-1 */
background: #F5F4F7;
color: #9391A8;
font: 600 14px "Readex Pro", sans-serif;
padding: 12px 24px;
border-radius: 40px;
border: none;
cursor: pointer;

Region Filter - Active

background: #FDCA17;
color: #000000;
font: 700 16px "Readex Pro", sans-serif;
padding: 10px 24px;
border-radius: 44px;
border: 1.11px solid #FDCA17;

Region Filter - Inactive

background: #FFFFFF;
color: #201B42;
font: 700 16px "Readex Pro", sans-serif;
padding: 10px 24px;
border-radius: 44px;
border: 1.11px solid #201B42;

Navigation

Desktop Header

#header-outer {
  height: ~83px;
  background: #FFFFFF;
  position: fixed;
  z-index: 9999;
  padding: 0;
  border-bottom: none;
  box-shadow: none;
}

Nav Menu Items

/* <button> with flex layout */
button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 8px;
  border-radius: 8px; /* rounded-lg */
  transition: colors;
  cursor: pointer;
}

/* <span> with text */
span {
  font-family: Lato, Poppins, "Open Sans", sans-serif; /* .font-primary */
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  /* Tailwind: !font-primary !text-[16px] !text-black group-hover:!text-[#811CE5] */
}

Mobile Header

height: ~57px;
background: #FFFFFF;
/* Hamburger icon: 3-line menu, right-aligned */
/* Logo: left-aligned, scaled down */

5. Layout Patterns

Page Structure

<body>
  <div id="header-outer"> /* fixed header, ~83px */
  <div class="ocm-effect-wrap">
    <div class="container-wrap"> /* bg: white */
      <div class="main-content"> /* max-width: 1416px, margin: 0 ~92px */
        <div class="vc_row full-width-section"> /* full-bleed rows */
        <div class="vc_row"> /* contained rows */
      </div>
    </div>
    <div class="nectar-global-section before-footer"> /* custom footer section */
  </div>
  <div id="footer-outer"> /* Nectar footer bar, 30px, bg: #313233 */
</body>

Grid System

• 12-column grid (WPBakery/Nectar): .vc_col-sm-{1-12}
• Default column padding: 0px 14.4px
• CSS Grid for Course Catalog: display: grid; grid-template-columns: repeat(5, ~267px); gap: 16px
• Flexbox for cards, nav, mega menu, and all modern React components

Section Patterns

Breakpoints (observed)

6. Mobile Patterns

Navigation

• Header height: ~57px (vs 83px desktop)
• Navigation items hidden; replaced with hamburger menu (3-line icon, right-aligned)
• Logo: left-aligned, scaled down
• Mega menu becomes slide-out full-screen overlay

Content Stacking

• Two-column layouts become single column
• Event cards: flex-direction: column (image on top, content below)
• Card border-radius: 15px (vs 16px desktop)
• Card padding: 8px 8px 12px (vs 16px desktop)
• "Learn Now" button: full-width within card

Typography Scaling

Footer on Mobile

• Column layout stacks: About Us + Contact Us side by side, Join Us below
• Logo spans full width at top
• Same dark geometric pattern background

7. Footer Specification

Layout

Full-Width Section (bg: Pattern.png dark navy geometric pattern)
  Logo Row: AlMaghrib white logo (left, sm-4)
  Content Row (padding: 56px 0 32px):
    Col sm-4: Logo
    Col sm-2: "About Us" (H3) + links
    Col sm-2: "Contact Us" (H3) + links
    Col sm-2: "Join Us" (H3) + links
  Copyright Row (padding: 32px 0 40px):
    HR divider
    Left: Copyright text
    Right: "Managed & Designed by AlMaghrib Institute"

Footer Styles

Footer Content

8. Icon System

Icon Libraries

Icon Usage by Context

9. Animation / Transition Patterns

CSS Transitions

Custom Easing Curves (CSS Variables)

--nectar-cubic-bezier-out: cubic-bezier(0.3, 1, 0.3, 1);
--nectar-cubic-bezier-in-out: cubic-bezier(0.76, 0, 0.24, 1);

Carousel (Swiper.js)

--swiper-navigation-size: 44px;
--swiper-theme-color: #007AFF;
/* Slide transition with pagination dots */

Mega Menu Animation

• Panels use .slide-out-from-right class (slide in from right side)
• Dark background overlay with warm glow: box-shadow: rgba(217,119,87,0.62) 0px 0px 13px inset, rgba(217,119,87,0.42) 0px 0px 23px inset, rgba(217,119,87,0.16) 0px 0px 33px inset
• Purple full-screen backdrop: background: #8E23B2

Page-Level

• Section color transitions: 0.8s (--page-color-change-section-transition-time)
• Scroll-triggered fade-in animations (Nectar/Salient theme built-in)
• Link underline animation on hover (footer, .nectar-link-underline-effect)

10. Border Radius Scale

11. Box Shadow Scale

12. Key Implementation Reference

Technology Stack

• CMS: WordPress
• Theme: Salient (Nectar) child theme (wp-theme-salient, wp-child-theme-salient-child)
• Page Builder: WPBakery (Visual Composer) - .vc_row, .vc_col-sm-*
• CSS Framework: Tailwind CSS (utility-first, with !important overrides via ! prefix)
• Carousel: Swiper.js
• Custom Components: React-based mega menu (#megamenu-root), event cards, filters
• Font Source: Google Fonts (Montserrat, Readex Pro, Lato, Open Sans, Poppins, Noto Sans, Kumbh Sans, Outfit, Raleway, Bitter)

Z-Index Layers

CSS Variable Summary

:root {
  --nectar-accent-color: #8E23B2;
  --nectar-extra-color-1: #F9EB22;
  --nectar-extra-color-2: #FCD823;
  --nectar-extra-color-3: #333333;
  --nectar-bg-color: #FFFFFF;
  --nectar-border-radius: 4px;
  --nectar-border-thickness: 2px;
  --nectar-body-line-height: 22px;
  --nectar-menu-item-spacing: 10px;
  --nectar-resp-container-padding: 90px;
  --nectar-header-hover-timing: 0.65s;
  --nectar-cubic-bezier-out: cubic-bezier(0.3, 1, 0.3, 1);
  --nectar-cubic-bezier-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --mobile-container-width: 88%;
  --nectar-font-light-color: #FFFFFF;
  --nectar-ocm-icon-width: 22px;
  --swiper-navigation-size: 44px;
  --swiper-theme-color: #007AFF;
}

Responsive Container Implementation

/* Desktop */
.main-content {
  max-width: 1416px;
  margin: 0 auto;
}

/* Full-bleed sections */
.full-width-section {
  width: 100vw;
}

/* Mobile */
/* Container width controlled by --mobile-container-width: 88% */