---
name: brand-guidelines
description: Apply Mawidi's official brand identity to frontend interfaces including colors, typography, logos, and visual patterns. Use when creating any Mawidi-branded UI elements, marketing pages, dashboards, or customer-facing features. Ensures consistent professional appearance across Arabic/English bilingual interfaces.
---

# Mawidi Brand Guidelines Skill

## Overview

Apply Mawidi's official brand identity consistently across all interfaces. This skill ensures visual consistency, professionalism, and trust—essential for a medical/healthcare B2B SaaS platform.

**Industry:** Medical Clinic Management (WhatsApp appointments)
**Market:** GCC (Gulf Cooperation Council)
**Languages:** Arabic (RTL) + English (LTR)

## Brand Identity

### Company Profile

- **Name:** Mawidi (مواعيدي - "My Appointments" in Arabic)
- **Tagline:** "Simplify Your Clinic's Scheduling"
- **Industry:** Healthcare Technology / Medical SaaS
- **Target:** Medical clinics, dental practices, beauty salons in GCC

### Brand Personality

- **Professional:** Trust-worthy, reliable, clinical precision
- **Modern:** Technology-forward, efficient, streamlined
- **Approachable:** Friendly, supportive, human-centered
- **Regional:** GCC-aware, Arabic-first, culturally respectful

## Color Palette

### Primary Colors

```css
:root {
  /* Primary Brand Green - Trust, Growth, Health */
  --mawidi-green: #10b981;
  --mawidi-green-hover: #059669;
  --mawidi-green-light: rgba(16, 185, 129, 0.1);

  /* Primary Ink - Sophistication, Professionalism */
  --mawidi-ink: #1e293b;
  --mawidi-ink-light: #334155;
  --mawidi-ink-dark: #0f172a;

  /* Neutral Sand - Warmth, Approachability */
  --mawidi-sand: #f5f5f5;
  --mawidi-sand-dark: #e5e5e5;
  --mawidi-sand-light: #fafafa;
}
```

### Semantic Colors

```css
:root {
  /* Success - Confirmed appointments, positive actions */
  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.1);

  /* Warning - Pending, attention needed */
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.1);

  /* Error - Cancellations, errors */
  --error: #ef4444;
  --error-light: rgba(239, 68, 68, 0.1);

  /* Info - Informational, neutral */
  --info: #3b82f6;
  --info-light: rgba(59, 130, 246, 0.1);
}
```

### Dark Mode Palette

```css
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border: rgba(255, 255, 255, 0.1);
  --border-focus: var(--mawidi-green);
}
```

### Usage Guidelines

| Context         | Color       | CSS Variable     |
| --------------- | ----------- | ---------------- |
| Primary buttons | Brand green | `--mawidi-green` |
| Text, headings  | Ink         | `--mawidi-ink`   |
| Backgrounds     | Sand        | `--mawidi-sand`  |
| Links           | Brand green | `--mawidi-green` |
| Success states  | Green       | `--success`      |
| Error states    | Red         | `--error`        |
| Warning states  | Amber       | `--warning`      |

## Typography

### Font Families

```css
:root {
  /* Display - Headlines, Hero text */
  --font-display:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Body - Regular text, paragraphs */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Arabic - Arabic text (loaded conditionally) */
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;

  /* Mono - Code, numbers, technical */
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}
```

### Google Fonts Loading

```html
<!-- English fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

<!-- Arabic fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>
```

### Type Scale

```css
:root {
  /* Desktop scale */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}
```

### Typography Classes

```css
/* Headlines */
.heading-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}

/* Body text */
.body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.body-regular {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
```

## RTL/LTR Support

### Direction-Aware Styling

```css
/* Base direction */
html[dir="ltr"] {
  direction: ltr;
}
html[dir="rtl"] {
  direction: rtl;
}

/* Directional spacing */
.space-start {
  margin-inline-start: 1rem;
}
.space-end {
  margin-inline-end: 1rem;
}
.padding-start {
  padding-inline-start: 1rem;
}
.padding-end {
  padding-inline-end: 1rem;
}

/* Text alignment */
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
```

### Tailwind RTL Utilities

```jsx
// Use Tailwind's RTL utilities
<div className="rtl:space-x-reverse flex space-x-4">
  <span className="rtl:text-right ltr:text-left">Text</span>
  <span className="rtl:ml-4 ltr:mr-4">Spacing</span>
</div>
```

### Language-Aware Font Selection

```tsx
// Auto-select font based on language
const fontClass = lang === "ar" ? "font-arabic" : "font-display";

<h1 className={`${fontClass} text-4xl font-bold`}>
  {lang === "ar" ? "مرحباً" : "Hello"}
</h1>;
```

## Editorial Design System Components

**IMPORTANT**: Mawidi uses an Editorial/Magazine design pattern. All components must follow these patterns for consistency.

### Section Headers (REQUIRED for all sections)

```jsx
{
  /* Standard Section Header with Number */
}
<div className="flex items-center gap-4 mb-8">
  <div className="flex items-center gap-3">
    <span className="text-[#10B981] font-mono text-sm tracking-wider">01</span>
    <div className="w-12 h-px bg-[#10B981]" />
  </div>
  <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
    Section Title
  </h2>
</div>;

{
  /* With description */
}
<div className="flex items-center gap-4 mb-12">
  <div className="flex items-center gap-3">
    <span className="text-[#10B981] font-mono text-sm tracking-wider">02</span>
    <div className="w-12 h-px bg-[#10B981]" />
  </div>
  <div>
    <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
      {isAr ? "عنوان القسم" : "Section Title"}
    </h2>
    <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
      {isAr ? "وصف القسم" : "Section description"}
    </p>
  </div>
</div>;
```

### Buttons - Editorial Style

```jsx
// Primary Button with Fill-Up Effect
<button className="
  group relative
  px-8 py-4
  bg-[#10B981]
  text-white
  font-semibold
  overflow-hidden
  transition-colors
">
  <span className="relative z-10">Get Started</span>
  <div className="
    absolute inset-0
    bg-[#059669]
    transform translate-y-full
    group-hover:translate-y-0
    transition-transform duration-300
  " />
</button>

// Secondary/Outline Button
<button className="
  px-8 py-4
  border-2 border-[#10B981]
  text-[#10B981]
  font-semibold
  hover:bg-[#10B981]/10
  transition-colors
">
  Learn More
</button>

// Ghost Button
<button className="
  px-6 py-3
  text-[#1E293B]
  hover:bg-[#FAFAFA]
  font-medium
  transition-colors
">
  Cancel
</button>
```

### Editorial Grid Cards

```jsx
{
  /* Grid with thin line separators */
}
<div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200">
  {items.map((item, idx) => (
    <div
      key={idx}
      className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
    >
      <div className="flex items-center gap-3 mb-4">
        <span className="text-[#10B981] font-mono text-xs">
          {String(idx + 1).padStart(2, "0")}
        </span>
        <h3 className="font-semibold text-[#1E293B]">{item.title}</h3>
      </div>
      <p className="text-[#64748B] mb-6">{item.description}</p>
      {/* Hover underline animation */}
      <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
    </div>
  ))}
</div>;

{
  /* Standard Card (no grid) */
}
<div
  className="
  group
  bg-white
  p-8
  border border-slate-200
  hover:border-[#10B981]
  transition-colors
"
>
  <h3 className="font-semibold text-[#1E293B]">Card Title</h3>
  <p className="text-[#64748B] mt-2">Card content</p>
  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
</div>;
```

### Feature Lists - Square Bullets

```jsx
{
  /* Use square bullets, NOT checkmarks */
}
<ul className="space-y-3">
  {features.map((feature, idx) => (
    <li key={idx} className="flex items-start gap-3">
      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
      <span className="text-[#64748B]">{feature}</span>
    </li>
  ))}
</ul>;

{
  /* Numbered feature list */
}
<ul className="space-y-4">
  {features.map((feature, idx) => (
    <li key={idx} className="flex items-start gap-4">
      <span className="text-[#10B981] font-mono text-xs mt-1">
        {String(idx + 1).padStart(2, "0")}
      </span>
      <span className="text-[#1E293B]">{feature}</span>
    </li>
  ))}
</ul>;
```

## Legacy Component Styling

### Buttons (Standard)

```jsx
// Primary Button
<button className="
  bg-mawidi-green
  hover:bg-mawidi-green-hover
  text-white
  font-semibold
  px-6 py-3
  rounded-lg
  transition-colors
  focus:ring-2
  focus:ring-mawidi-green
  focus:ring-offset-2
">
  Book Appointment
</button>

// Secondary Button
<button className="
  border-2
  border-mawidi-green
  text-mawidi-green
  hover:bg-mawidi-green-light
  font-semibold
  px-6 py-3
  rounded-lg
  transition-colors
">
  Learn More
</button>

// Ghost Button
<button className="
  text-mawidi-ink
  hover:bg-mawidi-sand
  font-medium
  px-4 py-2
  rounded-lg
  transition-colors
">
  Cancel
</button>
```

### Cards (Standard)

```jsx
// Standard Card
<div className="
  bg-white
  rounded-xl
  border
  border-gray-200
  p-6
  shadow-sm
  hover:shadow-md
  transition-shadow
">
  <h3 className="font-display text-xl font-semibold text-mawidi-ink">
    Card Title
  </h3>
  <p className="text-gray-600 mt-2">Card content</p>
</div>

// Feature Card (with accent)
<div className="
  bg-white
  rounded-xl
  border
  border-mawidi-green/20
  p-6
  relative
  overflow-hidden
">
  <div className="absolute top-0 left-0 w-1 h-full bg-mawidi-green" />
  <h3 className="font-display text-xl font-semibold text-mawidi-ink pl-4">
    Feature
  </h3>
</div>
```

### Form Inputs

```jsx
// Text Input
<input
  type="text"
  className="
    w-full
    px-4 py-3
    border border-gray-200
    rounded-lg
    focus:border-mawidi-green
    focus:ring-2
    focus:ring-mawidi-green/20
    outline-none
    transition-colors
  "
  placeholder="Enter text..."
/>

// Select
<select className="
  w-full
  px-4 py-3
  border border-gray-200
  rounded-lg
  focus:border-mawidi-green
  focus:ring-2
  focus:ring-mawidi-green/20
  outline-none
  bg-white
">
  <option>Option 1</option>
</select>
```

### Status Badges

```jsx
// Confirmed
<span className="px-3 py-1 rounded-full bg-success-light text-success text-sm font-medium">
  Confirmed
</span>

// Pending
<span className="px-3 py-1 rounded-full bg-warning-light text-warning text-sm font-medium">
  Pending
</span>

// Cancelled
<span className="px-3 py-1 rounded-full bg-error-light text-error text-sm font-medium">
  Cancelled
</span>
```

## Layout Patterns

### Page Container

```jsx
<div className="min-h-screen bg-mawidi-sand">
  <header className="bg-white border-b border-gray-200">
    {/* Navigation */}
  </header>

  <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {/* Content */}
  </main>

  <footer className="bg-mawidi-ink text-white">{/* Footer */}</footer>
</div>
```

### Dashboard Layout

```jsx
<div className="flex min-h-screen">
  {/* Sidebar */}
  <aside className="w-64 bg-white border-r border-gray-200 hidden lg:block">
    {/* Sidebar content */}
  </aside>

  {/* Main content */}
  <main className="flex-1 bg-mawidi-sand">
    <header className="bg-white border-b border-gray-200 px-6 py-4">
      {/* Top bar */}
    </header>
    <div className="p-6">{/* Page content */}</div>
  </main>
</div>
```

### Responsive Grid

```jsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Cards */}
</div>
```

## Background Rules

**CRITICAL**: Never use dark backgrounds for main content sections.

### Allowed Backgrounds

| Background | CSS            | Use Case              |
| ---------- | -------------- | --------------------- |
| White      | `bg-white`     | Primary content areas |
| Sand Light | `bg-[#FAFAFA]` | Alternating sections  |
| Sand       | `bg-[#F5F5F5]` | Secondary sections    |
| Slate 50   | `bg-slate-50`  | Very subtle variation |

### Forbidden Backgrounds

❌ **NEVER USE** for main content sections:

- `bg-[#1E293B]` (Ink)
- `bg-[#0F172A]` (Ink Dark)
- `bg-black` or any dark color
- Dark gradients

### Subtle Gradients (Hero sections only)

```jsx
{
  /* Light gradient for hero - acceptable */
}
<section className="bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4]">
  {/* Hero content */}
</section>;

{
  /* Green-tinted light background - acceptable */
}
<section className="bg-[#10B981]/[0.03]">{/* Featured section */}</section>;
```

## Animation Guidelines

**IMPORTANT**: Use CSS transitions only. Do NOT use Framer Motion or other animation libraries.

### Standard Transitions

```css
/* Fast transition - hover states */
.transition-fast {
  transition: all 0.2s ease-out;
}

/* Standard transition */
.transition-standard {
  transition: all 0.3s ease-out;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
```

### Editorial Hover Effects

```jsx
{
  /* Expanding underline - signature Mawidi animation */
}
<div className="group">
  <h3 className="font-semibold text-[#1E293B]">Title</h3>
  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-2 transition-all duration-300" />
</div>;

{
  /* Border highlight on hover */
}
<div className="border border-transparent hover:border-[#10B981] transition-colors duration-300">
  {/* Card content */}
</div>;

{
  /* Background change on hover */
}
<div className="bg-white hover:bg-[#FAFAFA] transition-colors duration-200">
  {/* Card content */}
</div>;
```

### Button Fill-Up Animation

```jsx
{
  /* Fill-up effect from bottom */
}
<button className="group relative overflow-hidden bg-[#10B981] text-white px-8 py-4">
  <span className="relative z-10">Get Started</span>
  <div
    className="
    absolute inset-0 bg-[#059669]
    transform translate-y-full
    group-hover:translate-y-0
    transition-transform duration-300
  "
  />
</button>;
```

### Motion Principles

- **CSS Only:** Do NOT use Framer Motion or animation libraries
- **Subtle:** Medical context requires professional, not playful animations
- **Fast:** 200-300ms for hover, 300ms max for transitions
- **Meaningful:** Only animate when it aids understanding
- **Consistent:** Same duration/easing throughout
- **Accessible:** Always respect `prefers-reduced-motion`

## Iconography

### Recommended Icon Libraries

1. **Lucide React** (Primary)

   ```tsx
   import { Calendar, User, CheckCircle } from "lucide-react";
   ```

2. **Heroicons** (Alternative)
   ```tsx
   import { CalendarIcon, UserIcon } from "@heroicons/react/24/outline";
   ```

### Icon Sizing

```jsx
// Small (inline with text)
<CheckCircle className="w-4 h-4" />

// Regular (buttons, lists)
<Calendar className="w-5 h-5" />

// Large (features, empty states)
<User className="w-8 h-8" />

// Hero (landing pages)
<Calendar className="w-12 h-12" />
```

### Icon Colors

```jsx
// Primary action
<Calendar className="w-5 h-5 text-mawidi-green" />

// Secondary/muted
<User className="w-5 h-5 text-gray-400" />

// Status icons
<CheckCircle className="w-5 h-5 text-success" />
<XCircle className="w-5 h-5 text-error" />
```

## Logo Assets

### Available Logo Files

Located in `public/brand/`:

| File                   | Use Case                         | Format                                 |
| ---------------------- | -------------------------------- | -------------------------------------- |
| `logo-horizontal.jpeg` | Primary logo - Header, marketing | Icon + "Mawidi" + "موعدي" side by side |
| `logo-icon.jpg`        | Favicon, small spaces, app icon  | Icon only (WhatsApp bubble with M)     |
| `logo-stacked.jpg`     | Square layouts, social profiles  | Icon above bilingual text              |

### Logo Design Elements

The Mawidi logo consists of:

1. **Icon Mark** - WhatsApp-style speech bubble in green gradient
   - White "M" letter inside
   - Three dots at bottom (typing indicator style)
   - Black checkmark badge (top right) - indicates verification/confirmation

2. **Wordmark** - "Mawidi" in dark charcoal/ink color
3. **Arabic Name** - "موعدي" in Mawidi green

### Logo Colors (from actual logo)

```css
:root {
  /* Logo icon gradient - WhatsApp-inspired green */
  --logo-green-light: #25d366;
  --logo-green-dark: #128c7e;

  /* Wordmark colors */
  --logo-text-dark: #333333; /* "Mawidi" text */
  --logo-text-arabic: #25d366; /* "موعدي" text */

  /* Checkmark badge */
  --logo-badge: #000000;
}
```

### Logo Usage in Code

```jsx
// Navigation - Horizontal logo
<img
  src="/brand/logo-horizontal.jpeg"
  alt="Mawidi - موعدي"
  className="h-10 w-auto"
/>

// Favicon / Small spaces - Icon only
<img
  src="/brand/logo-icon.jpg"
  alt="Mawidi"
  className="h-8 w-8 rounded"
/>

// Square contexts - Stacked logo
<img
  src="/brand/logo-stacked.jpg"
  alt="Mawidi - موعدي"
  className="h-24 w-auto"
/>

// Next.js Image component (recommended)
import Image from 'next/image';

<Image
  src="/brand/logo-horizontal.jpeg"
  alt="Mawidi - موعدي"
  width={180}
  height={60}
  priority
/>
```

### Logo Sizing Guidelines

| Context              | Logo Variant    | Recommended Height |
| -------------------- | --------------- | ------------------ |
| Navigation (desktop) | horizontal      | 40-48px            |
| Navigation (mobile)  | icon            | 32-40px            |
| Footer               | horizontal      | 32-40px            |
| Social/Avatar        | icon or stacked | 64-128px           |
| Marketing hero       | stacked         | 80-120px           |
| Email signature      | horizontal      | 100px width        |

### Logo Clear Space

Maintain minimum padding around the logo equal to the height of the "M" in the icon.

```
┌────────────────────────────┐
│         (padding)          │
│    ┌──────────────┐        │
│    │   [M] Mawidi │        │
│    │       موعدي  │        │
│    └──────────────┘        │
│         (padding)          │
└────────────────────────────┘
```

### Logo Don'ts

- ❌ Don't stretch or distort the aspect ratio
- ❌ Don't rotate the logo
- ❌ Don't change the logo colors
- ❌ Don't add shadows, outlines, or effects
- ❌ Don't use on busy backgrounds without sufficient contrast
- ❌ Don't separate the icon from the text (use icon-only version instead)
- ❌ Don't recreate the logo in different fonts

## Bilingual Content

### Translation Patterns

```tsx
const content = {
  en: {
    welcome: "Welcome to Mawidi",
    bookNow: "Book Now",
    appointments: "Appointments",
  },
  ar: {
    welcome: "مرحباً بكم في مواعيدي",
    bookNow: "احجز الآن",
    appointments: "المواعيد",
  },
};

// Usage
<h1 className={lang === "ar" ? "font-arabic" : "font-display"}>
  {content[lang].welcome}
</h1>;
```

### Number Formatting

```tsx
// Arabic numerals for Arabic locale
const formatNumber = (num: number, lang: "ar" | "en") => {
  return new Intl.NumberFormat(lang === "ar" ? "ar-SA" : "en-US").format(num);
};

// Date formatting
const formatDate = (date: Date, lang: "ar" | "en") => {
  return new Intl.DateTimeFormat(lang === "ar" ? "ar-SA" : "en-US", {
    dateStyle: "full",
  }).format(date);
};
```

## Tailwind Config

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        mawidi: {
          green: "#10B981",
          "green-hover": "#059669",
          "green-light": "rgba(16, 185, 129, 0.1)",
          ink: "#1E293B",
          "ink-light": "#334155",
          "ink-dark": "#0F172A",
          sand: "#F5F5F5",
          "sand-dark": "#E5E5E5",
          "sand-light": "#FAFAFA",
        },
        success: "#10B981",
        warning: "#F59E0B",
        error: "#EF4444",
        info: "#3B82F6",
      },
      fontFamily: {
        display: ["Plus Jakarta Sans", "sans-serif"],
        body: ["Inter", "sans-serif"],
        arabic: ["IBM Plex Sans Arabic", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
    },
  },
};
```

## Quick Reference Checklist

### Before Starting

- [ ] Loaded correct fonts (Plus Jakarta Sans, Inter, IBM Plex Sans Arabic)
- [ ] Set up Mawidi color variables
- [ ] Configured RTL support in layout
- [ ] Set correct direction based on language

### During Implementation

- [ ] Using Mawidi green for primary actions
- [ ] Using ink for text and headings
- [ ] Using sand for backgrounds
- [ ] Correct font family for language
- [ ] Proper RTL/LTR spacing utilities

### Final Check

- [ ] All buttons use correct variants
- [ ] Form inputs have focus states
- [ ] Cards have consistent styling
- [ ] Animations are subtle and professional
- [ ] Works in both Arabic and English
- [ ] Responsive across breakpoints
