---
name: blog-post-design
description: Create visually stunning, engaging blog posts with professional typography, layout patterns, and visual elements. Use when writing blog content, creating article pages, or designing content for the Mawidi blog.
license: Complete terms in LICENSE.txt
---

# Blog Post Design Skill

## Overview

Create blog posts that captivate readers through exceptional typography, purposeful visuals, and engaging layouts. This skill transforms standard content into memorable reading experiences that reflect Mawidi's professional brand.

**Goals:**

- Capture attention in the first 3 seconds
- Guide readers through content effortlessly
- Create shareable, memorable articles
- Maintain Mawidi brand consistency
- Optimize for both Arabic and English

## When to Use

Use this skill when:

- Writing blog articles for Mawidi
- Creating content pages or landing pages
- Designing article templates
- Building a blog section in Next.js
- Improving existing blog post layouts

## Blog Post Anatomy

### The Perfect Structure

```
┌─────────────────────────────────────────────────┐
│  HERO ZONE                                      │
│  ├── Category badge                             │
│  ├── Headline (emotional, specific)             │
│  ├── Subheadline/deck                          │
│  ├── Author + date + read time                 │
│  └── Hero image/illustration                    │
├─────────────────────────────────────────────────┤
│  CONTENT ZONE                                   │
│  ├── Opening hook (problem/story/stat)         │
│  ├── Key insight callout                       │
│  ├── Body with visual breaks                   │
│  │   ├── H2 sections                           │
│  │   ├── Pull quotes                           │
│  │   ├── Images with captions                  │
│  │   ├── Code blocks (if technical)            │
│  │   └── Bullet/numbered lists                 │
│  └── Conclusion with CTA                       │
├─────────────────────────────────────────────────┤
│  ENGAGEMENT ZONE                                │
│  ├── Author bio card                           │
│  ├── Share buttons                             │
│  ├── Related articles                          │
│  └── Newsletter signup                         │
└─────────────────────────────────────────────────┘
```

## Typography Excellence

### Font Stack for Blog

```css
:root {
  /* Headlines - distinctive, memorable */
  --font-headline: "Playfair Display", "Noto Serif Arabic", Georgia, serif;

  /* Body - highly readable */
  --font-body: "Source Serif Pro", "IBM Plex Sans Arabic", Georgia, serif;

  /* UI elements - clean, modern */
  --font-ui: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Code blocks */
  --font-code: "JetBrains Mono", "Fira Code", monospace;
}

/* Arabic-optimized */
[lang="ar"] {
  --font-headline: "Noto Serif Arabic", "Amiri", serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
}
```

### Type Scale (Desktop)

```css
.blog-post {
  /* Headline hierarchy */
  --text-hero: clamp(2.5rem, 5vw, 4rem); /* Hero title */
  --text-h1: clamp(2rem, 4vw, 3rem); /* Article H1 */
  --text-h2: clamp(1.5rem, 3vw, 2rem); /* Section headers */
  --text-h3: clamp(1.25rem, 2.5vw, 1.5rem); /* Subsections */

  /* Body text */
  --text-body: clamp(
    1.125rem,
    2vw,
    1.25rem
  ); /* Main content - larger for readability */
  --text-lead: clamp(1.25rem, 2.5vw, 1.5rem); /* Opening paragraph */
  --text-small: 0.875rem; /* Captions, meta */

  /* Line heights for readability */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
}
```

### Reading Optimization

```css
.blog-content {
  /* Optimal reading width */
  max-width: 680px;
  margin: 0 auto;

  /* Generous line height */
  line-height: 1.8;

  /* Comfortable paragraph spacing */
  p {
    margin-bottom: 1.5em;
  }

  /* First paragraph styling */
  > p:first-of-type {
    font-size: var(--text-lead);
    color: var(--mawidi-ink);
    font-weight: 500;
  }

  /* Drop cap for editorial feel */
  > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-headline);
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    color: var(--mawidi-green);
  }
}
```

## Visual Elements

### Hero Image Patterns

**Pattern 1: Full-Bleed Hero**

```tsx
<article>
  <header className="relative h-[70vh] min-h-[500px]">
    {/* Background image */}
    <img
      src={heroImage}
      alt=""
      className="absolute inset-0 w-full h-full object-cover"
    />

    {/* Gradient overlay */}
    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />

    {/* Content */}
    <div className="absolute bottom-0 left-0 right-0 p-8 md:p-16">
      <div className="max-w-4xl mx-auto">
        <span className="inline-block px-3 py-1 bg-[#25D366] text-white text-sm font-medium rounded-full mb-4">
          {category}
        </span>
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 font-headline leading-tight">
          {title}
        </h1>
        <p className="text-xl text-white/80 mb-6 max-w-2xl">{subtitle}</p>
        <div className="flex items-center gap-4 text-white/70">
          <img src={author.avatar} className="w-12 h-12 rounded-full" />
          <div>
            <p className="font-medium text-white">{author.name}</p>
            <p className="text-sm">
              {date} · {readTime} min read
            </p>
          </div>
        </div>
      </div>
    </div>
  </header>
</article>
```

**Pattern 2: Split Hero**

```tsx
<header className="grid md:grid-cols-2 min-h-[600px]">
  {/* Content side */}
  <div className="flex flex-col justify-center p-8 md:p-16 bg-[#F5F5F5]">
    <span className="text-[#25D366] font-medium text-sm uppercase tracking-wide mb-4">
      {category}
    </span>
    <h1 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6 font-headline leading-tight">
      {title}
    </h1>
    <p className="text-xl text-gray-600 mb-8">{subtitle}</p>
    <AuthorCard author={author} date={date} readTime={readTime} />
  </div>

  {/* Image side */}
  <div className="relative">
    <img
      src={heroImage}
      alt=""
      className="absolute inset-0 w-full h-full object-cover"
    />
  </div>
</header>
```

**Pattern 3: Minimal Hero (Text-First)**

```tsx
<header className="py-16 md:py-24 bg-white">
  <div className="max-w-3xl mx-auto px-6 text-center">
    <span className="inline-block px-4 py-2 bg-[#25D366]/10 text-[#25D366] font-medium rounded-full mb-6">
      {category}
    </span>
    <h1 className="text-4xl md:text-6xl font-bold text-[#1E293B] mb-6 font-headline">
      {title}
    </h1>
    <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">{subtitle}</p>
    <AuthorCard author={author} date={date} readTime={readTime} centered />
  </div>

  {/* Featured image below */}
  <div className="max-w-5xl mx-auto mt-12 px-6">
    <img
      src={heroImage}
      alt={imageAlt}
      className="w-full rounded-2xl shadow-2xl"
    />
  </div>
</header>
```

### Pull Quotes

```tsx
// Accent bar style
<blockquote className="relative my-12 py-8 px-8 md:px-12 border-l-4 border-[#25D366] bg-[#25D366]/5">
  <p className="text-2xl md:text-3xl font-headline text-[#1E293B] leading-relaxed italic">
    "{quote}"
  </p>
  {attribution && (
    <cite className="block mt-4 text-gray-600 not-italic">
      — {attribution}
    </cite>
  )}
</blockquote>

// Centered highlight style
<blockquote className="my-16 text-center max-w-2xl mx-auto">
  <div className="text-[#25D366] text-6xl font-serif leading-none mb-4">"</div>
  <p className="text-2xl md:text-3xl font-headline text-[#1E293B] leading-relaxed">
    {quote}
  </p>
  <div className="w-16 h-1 bg-[#25D366] mx-auto mt-6 mb-4" />
  {attribution && (
    <cite className="text-gray-600 not-italic">{attribution}</cite>
  )}
</blockquote>
```

### Callout Boxes

```tsx
// Tip/insight callout
<div className="my-8 p-6 bg-[#25D366]/10 border border-[#25D366]/20 rounded-xl">
  <div className="flex gap-4">
    <div className="flex-shrink-0 w-10 h-10 bg-[#25D366] rounded-lg flex items-center justify-center">
      <LightbulbIcon className="w-5 h-5 text-white" />
    </div>
    <div>
      <h4 className="font-bold text-[#1E293B] mb-2">Pro Tip</h4>
      <p className="text-gray-700">{content}</p>
    </div>
  </div>
</div>

// Key takeaway callout
<div className="my-8 p-6 bg-[#1E293B] text-white rounded-xl">
  <h4 className="text-[#25D366] font-bold mb-3 flex items-center gap-2">
    <SparklesIcon className="w-5 h-5" />
    Key Takeaway
  </h4>
  <p className="text-lg leading-relaxed">{content}</p>
</div>

// Warning callout
<div className="my-8 p-6 bg-amber-50 border border-amber-200 rounded-xl">
  <div className="flex gap-4">
    <AlertTriangleIcon className="w-6 h-6 text-amber-600 flex-shrink-0" />
    <div>
      <h4 className="font-bold text-amber-800 mb-2">Important Note</h4>
      <p className="text-amber-900">{content}</p>
    </div>
  </div>
</div>
```

### Image with Caption

```tsx
<figure className="my-12">
  <div className="relative overflow-hidden rounded-xl shadow-lg">
    <img
      src={imageSrc}
      alt={imageAlt}
      className="w-full"
    />
    {/* Optional overlay badge */}
    {badge && (
      <span className="absolute top-4 left-4 px-3 py-1 bg-white/90 text-sm font-medium rounded-full">
        {badge}
      </span>
    )}
  </div>
  <figcaption className="mt-4 text-center text-gray-500 text-sm italic">
    {caption}
  </figcaption>
</figure>

// Side-by-side images
<div className="my-12 grid md:grid-cols-2 gap-6">
  <figure>
    <img src={image1} alt="" className="rounded-xl" />
    <figcaption className="mt-2 text-sm text-gray-500">{caption1}</figcaption>
  </figure>
  <figure>
    <img src={image2} alt="" className="rounded-xl" />
    <figcaption className="mt-2 text-sm text-gray-500">{caption2}</figcaption>
  </figure>
</div>
```

### Code Blocks (Technical Posts)

```tsx
<div className="my-8 rounded-xl overflow-hidden bg-[#1E293B]">
  {/* Header with filename */}
  <div className="flex items-center justify-between px-4 py-3 bg-[#0F172A] border-b border-white/10">
    <div className="flex items-center gap-3">
      <div className="flex gap-1.5">
        <span className="w-3 h-3 rounded-full bg-red-500" />
        <span className="w-3 h-3 rounded-full bg-yellow-500" />
        <span className="w-3 h-3 rounded-full bg-green-500" />
      </div>
      <span className="text-gray-400 text-sm font-mono">{filename}</span>
    </div>
    <button className="text-gray-400 hover:text-white text-sm">Copy</button>
  </div>

  {/* Code content */}
  <pre className="p-6 overflow-x-auto">
    <code className="text-sm font-mono text-gray-300">{code}</code>
  </pre>
</div>
```

## Content Patterns

### Opening Hooks

**The Problem Hook:**

```markdown
Every clinic manager knows the frustration: it's Monday morning,
and your phone is already buzzing with WhatsApp messages asking
"Is Dr. Ahmed available today?"

By the time you've responded to ten messages, you've lost an hour.
There has to be a better way.
```

**The Statistic Hook:**

```markdown
83% of patients prefer booking appointments via messaging apps.
Yet only 12% of clinics in the GCC offer this option.

This gap represents both a problem and an opportunity.
```

**The Story Hook:**

```markdown
When Dr. Fatima opened her dental clinic in Doha, she spent more
time managing her calendar than treating patients. Three years later,
she runs a five-chair practice and hasn't touched a paper calendar
since 2022.

Here's what changed.
```

### Section Transitions

Use visual breaks between major sections:

```tsx
// Simple divider
<div className="my-16 flex justify-center">
  <div className="flex items-center gap-4">
    <div className="w-12 h-px bg-gray-200" />
    <div className="w-2 h-2 bg-[#25D366] rounded-full" />
    <div className="w-12 h-px bg-gray-200" />
  </div>
</div>

// Numbered section headers
<h2 className="flex items-center gap-4 text-3xl font-bold font-headline mt-16 mb-8">
  <span className="flex items-center justify-center w-12 h-12 bg-[#25D366] text-white rounded-full text-lg">
    {sectionNumber}
  </span>
  {sectionTitle}
</h2>
```

### Conclusion CTA Patterns

```tsx
// Newsletter signup
<div className="my-16 p-8 md:p-12 bg-gradient-to-br from-[#25D366] to-[#128C7E] rounded-2xl text-white text-center">
  <h3 className="text-2xl md:text-3xl font-bold mb-4">
    Get insights like this in your inbox
  </h3>
  <p className="text-white/80 mb-6 max-w-lg mx-auto">
    Join 2,000+ clinic owners receiving weekly tips on growing their practice.
  </p>
  <form className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
    <input
      type="email"
      placeholder="Enter your email"
      className="flex-1 px-4 py-3 rounded-lg text-gray-900"
    />
    <button className="px-6 py-3 bg-white text-[#25D366] font-semibold rounded-lg hover:bg-gray-100">
      Subscribe
    </button>
  </form>
</div>

// Product CTA
<div className="my-16 p-8 border-2 border-[#25D366] rounded-2xl">
  <div className="flex flex-col md:flex-row items-center gap-8">
    <img
      src="/brand/logo-stacked.jpg"
      alt="Mawidi"
      className="w-24 h-24 rounded-xl"
    />
    <div className="flex-1 text-center md:text-left">
      <h3 className="text-2xl font-bold text-[#1E293B] mb-2">
        Ready to streamline your appointments?
      </h3>
      <p className="text-gray-600 mb-4">
        Try Mawidi free for 14 days. No credit card required.
      </p>
    </div>
    <a
      href="/signup"
      className="px-8 py-4 bg-[#25D366] text-white font-semibold rounded-lg hover:bg-[#128C7E] whitespace-nowrap"
    >
      Start Free Trial
    </a>
  </div>
</div>
```

## Author Card Patterns

```tsx
// Inline author card (for hero)
function AuthorCard({ author, date, readTime, centered = false }) {
  return (
    <div
      className={`flex items-center gap-4 ${centered ? "justify-center" : ""}`}
    >
      <img
        src={author.avatar}
        alt={author.name}
        className="w-12 h-12 rounded-full object-cover"
      />
      <div>
        <p className="font-medium text-[#1E293B]">{author.name}</p>
        <p className="text-sm text-gray-500">
          {date} · {readTime} min read
        </p>
      </div>
    </div>
  );
}

// Full author bio (for article end)
function AuthorBio({ author }) {
  return (
    <div className="my-16 p-8 bg-[#F5F5F5] rounded-2xl">
      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
        <img
          src={author.avatar}
          alt={author.name}
          className="w-24 h-24 rounded-full object-cover"
        />
        <div className="text-center sm:text-left">
          <p className="text-sm text-[#25D366] font-medium mb-1">Written by</p>
          <h4 className="text-xl font-bold text-[#1E293B] mb-2">
            {author.name}
          </h4>
          <p className="text-gray-600 mb-4">{author.bio}</p>
          <div className="flex gap-3 justify-center sm:justify-start">
            {author.twitter && (
              <a
                href={author.twitter}
                className="text-gray-400 hover:text-[#25D366]"
              >
                <TwitterIcon className="w-5 h-5" />
              </a>
            )}
            {author.linkedin && (
              <a
                href={author.linkedin}
                className="text-gray-400 hover:text-[#25D366]"
              >
                <LinkedInIcon className="w-5 h-5" />
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
```

## Related Articles Grid

```tsx
function RelatedArticles({ articles }) {
  return (
    <section className="my-16">
      <h3 className="text-2xl font-bold text-[#1E293B] mb-8">
        Continue Reading
      </h3>
      <div className="grid md:grid-cols-3 gap-8">
        {articles.map((article) => (
          <a key={article.id} href={article.url} className="group">
            <div className="relative overflow-hidden rounded-xl mb-4">
              <img
                src={article.image}
                alt=""
                className="w-full aspect-[16/10] object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <span className="absolute top-3 left-3 px-3 py-1 bg-white/90 text-sm font-medium rounded-full">
                {article.category}
              </span>
            </div>
            <h4 className="font-bold text-[#1E293B] group-hover:text-[#25D366] transition-colors line-clamp-2">
              {article.title}
            </h4>
            <p className="text-sm text-gray-500 mt-2">
              {article.readTime} min read
            </p>
          </a>
        ))}
      </div>
    </section>
  );
}
```

## Share Buttons

```tsx
function ShareButtons({ url, title }) {
  const shareLinks = {
    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
    whatsapp: `https://wa.me/?text=${encodeURIComponent(`${title} ${url}`)}`,
  };

  return (
    <div className="flex items-center gap-4">
      <span className="text-sm text-gray-500">Share:</span>
      <div className="flex gap-2">
        <a
          href={shareLinks.whatsapp}
          target="_blank"
          rel="noopener"
          className="w-10 h-10 bg-[#25D366] text-white rounded-full flex items-center justify-center hover:bg-[#128C7E]"
        >
          <WhatsAppIcon className="w-5 h-5" />
        </a>
        <a
          href={shareLinks.twitter}
          target="_blank"
          rel="noopener"
          className="w-10 h-10 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center hover:bg-gray-200"
        >
          <TwitterIcon className="w-5 h-5" />
        </a>
        <a
          href={shareLinks.linkedin}
          target="_blank"
          rel="noopener"
          className="w-10 h-10 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center hover:bg-gray-200"
        >
          <LinkedInIcon className="w-5 h-5" />
        </a>
      </div>
    </div>
  );
}
```

## Arabic Blog Post Considerations

### RTL Layout

```tsx
<article dir="rtl" lang="ar" className="font-arabic">
  <header className="text-right">
    <span className="inline-block px-3 py-1 bg-[#25D366]/10 text-[#25D366] rounded-full mb-4">
      {category}
    </span>
    <h1 className="text-4xl font-bold mb-4 leading-relaxed">{titleArabic}</h1>
  </header>

  <div className="blog-content text-right leading-loose">
    {/* Content flows RTL */}
  </div>
</article>
```

### Bilingual Toggle

```tsx
function BlogLanguageToggle({ currentLang, slug }) {
  return (
    <div className="flex items-center gap-2 text-sm">
      <a
        href={`/en/blog/${slug}`}
        className={
          currentLang === "en" ? "font-bold text-[#25D366]" : "text-gray-500"
        }
      >
        English
      </a>
      <span className="text-gray-300">|</span>
      <a
        href={`/ar/blog/${slug}`}
        className={
          currentLang === "ar" ? "font-bold text-[#25D366]" : "text-gray-500"
        }
      >
        العربية
      </a>
    </div>
  );
}
```

## Complete Blog Post Template

```tsx
// app/[lang]/blog/[slug]/page.tsx

import { getPost, getRelatedPosts } from "@/lib/blog";

export default async function BlogPost({ params }) {
  const { lang, slug } = params;
  const post = await getPost(slug, lang);
  const related = await getRelatedPosts(slug, lang, 3);

  return (
    <article
      dir={lang === "ar" ? "rtl" : "ltr"}
      className={lang === "ar" ? "font-arabic" : ""}
    >
      {/* Hero */}
      <header className="relative h-[70vh] min-h-[500px]">
        <img
          src={post.heroImage}
          alt=""
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />

        <div className="absolute bottom-0 left-0 right-0 p-8 md:p-16">
          <div className="max-w-4xl mx-auto">
            <BlogLanguageToggle currentLang={lang} slug={slug} />

            <span className="inline-block px-3 py-1 bg-[#25D366] text-white text-sm font-medium rounded-full mt-4 mb-4">
              {post.category}
            </span>
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 font-headline leading-tight">
              {post.title}
            </h1>
            <p className="text-xl text-white/80 mb-6 max-w-2xl">
              {post.subtitle}
            </p>

            <AuthorCard
              author={post.author}
              date={post.publishedAt}
              readTime={post.readTime}
            />
          </div>
        </div>
      </header>

      {/* Content */}
      <div className="py-16">
        <div className="max-w-3xl mx-auto px-6">
          {/* Share buttons (sticky on desktop) */}
          <div className="hidden lg:block fixed left-8 top-1/2 -translate-y-1/2">
            <ShareButtons url={post.url} title={post.title} vertical />
          </div>

          {/* Article content */}
          <div className="blog-content prose prose-lg max-w-none">
            {/* Render MDX/HTML content */}
            <MDXContent content={post.content} />
          </div>

          {/* Mobile share */}
          <div className="lg:hidden mt-8">
            <ShareButtons url={post.url} title={post.title} />
          </div>

          {/* Author bio */}
          <AuthorBio author={post.author} />
        </div>
      </div>

      {/* Related articles */}
      <div className="bg-[#F5F5F5] py-16">
        <div className="max-w-6xl mx-auto px-6">
          <RelatedArticles articles={related} />
        </div>
      </div>

      {/* Newsletter CTA */}
      <div className="py-16">
        <div className="max-w-3xl mx-auto px-6">
          <NewsletterSignup lang={lang} />
        </div>
      </div>
    </article>
  );
}
```

## Blog Post Checklist

### Before Publishing

- [ ] Compelling headline (specific, emotional, useful)
- [ ] Strong opening hook (first 2 sentences)
- [ ] Clear section headers (scannable)
- [ ] At least one visual per 300 words
- [ ] Pull quote or callout box
- [ ] Internal links to related content
- [ ] External links to authoritative sources
- [ ] Meta description written
- [ ] Social share image created
- [ ] Author bio complete

### Design Quality

- [ ] Hero image is high quality (min 1200px wide)
- [ ] Typography is readable (body ≥18px)
- [ ] Sufficient contrast
- [ ] Works on mobile
- [ ] RTL support (if Arabic)
- [ ] Fast loading (images optimized)

### Mawidi Branding

- [ ] Uses brand colors (#25D366, #1E293B)
- [ ] Logo in navigation
- [ ] Consistent with site design
- [ ] CTA includes product mention

## Quick Reference

### Mawidi Blog Colors

| Element         | Color            | Usage            |
| --------------- | ---------------- | ---------------- |
| Category badges | `#25D366`        | Primary accent   |
| Headlines       | `#1E293B`        | Dark ink         |
| Body text       | `#374151`        | Gray-700         |
| Captions        | `#6B7280`        | Gray-500         |
| Backgrounds     | `#F5F5F5`        | Light sand       |
| Quotes          | `#25D366` border | Accent highlight |

### Image Dimensions

| Image Type   | Dimensions    | Aspect Ratio |
| ------------ | ------------- | ------------ |
| Hero         | 1920 × 1080px | 16:9         |
| In-content   | 1200 × 800px  | 3:2          |
| Thumbnails   | 800 × 500px   | 16:10        |
| Social share | 1200 × 630px  | ~1.9:1       |

## See Also

- [frontend-design](../frontend-design/SKILL.md) - UI design principles
- [brand-guidelines](../brand-guidelines/SKILL.md) - Mawidi branding
- [seo-optimization](../seo-optimization/SKILL.md) - Blog SEO
- [i18n-management](../i18n-management/SKILL.md) - Bilingual content
