Arab AI

Overview

Arab AI is the Arab world's definitive platform for artificial intelligence news, analysis, and education, serving Arabic-speaking technologists, researchers, and decision-makers. The design aesthetic embraces "Tech-Forward Clarity"—a fusion of modern minimalism with purposeful accent color, where a vibrant electric blue (#0052ff) punctuates a clean, light-neutral canvas (background #eeeff3, surface #ffffff). The brand personality is authoritative yet accessible: precise, data-driven, and unafraid to explain complex AI concepts in conversational Arabic. The UI evokes trust through clarity—generous whitespace, high-contrast typography in Cairo (a warm, geometric Arabic typeface), and strategic use of the primary blue to guide attention to calls-to-action and key navigation. Voice example: "OpenJarvis إطار محلي أولاً لبناء وكلاء ذكاء اصطناعي شخصي عمليين" (OpenJarvis: a local-first framework for building practical personal AI agents)—direct, technical, no fluff.

The tone is editorial and expert-friendly. Vocabulary leans technical but never gatekeeping: terms like "وكلاء ذكاء اصطناعي" (AI agents), "مشاريع مفتوحة" (open-source projects), and "شروحات تعليمية" (educational explanations) appear naturally. The brand avoids hype; instead, it delivers substance. Every headline, every CTA, every section is designed to answer a specific user need: "What's happening in AI right now?", "How do I learn this?", "Where can I find tools?" The design reinforces this by making navigation obvious, content scannable, and actions frictionless.

Colors

The color system is built on a light, neutral foundation with a single, commanding accent. **Primary (#0052ff)** is the electric blue used exclusively for CTAs ("اشترك مجاناً" buttons, newsletter signup), active navigation states, and brand moments—it appears sparingly but with maximum impact. **On-Primary (#ffffff)** ensures text on primary buttons maintains WCAG AAA contrast (21:1). **Primary-Container (#e0eaff)** and **On-Primary-Container (#001a4d)** are reserved for secondary emphasis and informational badges, creating a tonal hierarchy without introducing new colors. **Secondary (#6ea8ff)** and **Tertiary (#7ab3ff)** are lighter blue variants used for hover states, secondary badges, and supporting UI elements; they maintain the blue family while reducing visual weight. **Surface (#ff

Typography

The type system centers on **Cairo**, a warm, geometric Arabic typeface from Google Fonts that balances modernity with cultural authenticity. **Display (60px, weight 900)** is reserved for hero headlines and brand moments—its extreme weight and size command attention. **Headline-LG (40px, weight 900)** is used for main page titles and section headers, maintaining visual dominance. **Headline-MD (28px, weight 700)** breaks down to subsection titles and card headlines. **Title-LG (20px, weight 700)** is for smaller section headers and prominent labels. **Body-LG (18px, weight 400)** and **Body-MD (16px, weight 400)** form the reading hierarchy for article text and descriptions. **Label-MD (14px, weight 600)** and **Label-SM (13.5px, weight 500)** are used for buttons, badges, and UI labels.

Layout

The layout uses a **12-column grid** with a **1280px max-width container**, centered with `mx-auto`. The page rhythm is built on a **24px (md) spacing unit** for section separation, with **40px (lg)** used between major content blocks (hero to news section, etc.). Horizontal padding is consistently **40px (10 units in Tailwind)** on desktop, reducing to **24px** on tablet and **16px** on mobile. The grid is fluid below 1024px, stacking to single-column on mobile. **Gutter spacing** between cards and list items is 24px, creating visual breathing room without excessive whitespace. The hero section spans full-width with a dark overlay gradient (background: linear-gradient(135deg, #0a0b0d 0%, #0d1120 100%)) to contrast the light page background and showcase the primary blue accent. News cards

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dark overlays. **Level 1 (Base)**: The page background (#eeeff3) is a soft, neutral gray that recedes visually. **Level 2 (Standard Card)**: Cards use `box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)` with a 1px solid border in {colors.outline} (#d1d5db). This creates a barely-perceptible lift, suitable for news cards and content containers. **Level 3 (Elevated/Hover)**: On hover, cards transition to `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)` with a background shift to {colors.surface-container-high} (#f3f4f7), signaling interactiv

Shapes

The shape philosophy is **"Soft-Technical"**—rounded corners are present but restrained, reflecting the brand's balance between approachability and precision. **Buttons and CTAs** use `border-radius: 9999px` (full pill shape), creating a friendly, action-oriented appearance. **Cards and containers** use `border-radius: 1rem` (16px), a moderate curve that feels modern without being overly soft. **Input fields** use `border-radius: 10px` (0.625rem), slightly tighter than cards to signal they are interactive elements, not passive containers. **Badges and labels** use `border-radius: 9999px` (full

Components

Action Elements **Button-Primary** (#0052ff, 44px height, 11px 24px padding, border-radius: 9999px, font-weight: 700) is the dominant CTA—used for "اشترك مجاناً" (Subscribe Free), newsletter signups, and primary actions. On hover, the background shifts to #003da3 (a darker blue) with `transition: background-color 0.2s ease`, maintaining the pill shape. **Button-Secondary** uses a transparent background with a 1px outline border (#d1d5db) and primary text color, suitable for secondary actions like "استكشف المحتوى" (Explore Content). On hover, it fills with {colors.surface-container-high} (#f3f4f7) while keeping the border, creating a subtle press effect. **Button-Ghost** has no border or background, only text in {colors.on-surface-variant} (#6b7280); on hover, it gains a light backgroun

Do's and Don'ts

**Do**

• Do use the primary blue (#0052ff) exclusively for CTAs and active states—it's the brand's signature accent and loses impact if overused.
• Do maintain the 24px spacing unit throughout layouts; it creates rhythm and makes the design feel intentional, not arbitrary.
• Do apply Cairo typeface at weight 900 for headlines to leverage its geometric warmth; it's distinctly Arabic-first and modern.
• Do use the full pill shape (border-radius: 9999px) for all buttons to signal interactivity clearly and consistently.
• Do apply subtle shadows (0 1px 2px rgba(0, 0, 0, 0.06)) to cards at rest and elevate on hover (0 4px 12px rgba(0, 0, 0, 0.08)) to create depth without visual noise.
• Do keep the light background (#eeeff3) and white surfaces (#ffffff) as the foundation; they make the blue accent pop and ensure readability.
• Do use {colors.on-surface-variant} (#6b7280) for secondary text and captions to maintain hierarchy without introducing new colors.
• Do apply 0.2s ease transitions on all interactive elements (buttons, cards, links) for smooth, predictable feedback.

**Don't**

• Don't use the primary blue for body text or large background areas—it's an accent color, not a structural element.
• Don't mix Cairo with system fonts in the same component; always use Cairo for Arabic text and maintain consistency.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12) on cards; it breaks the clean, minimal aesthetic.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the design language.
• Don't reduce padding below 12px on interactive elements; it makes buttons and inputs feel cramped and hard to tap on mobile.
• Don't apply color transitions longer than 0.2s; they feel sluggish and reduce perceived responsiveness.
• Don't use more than three font weights in a single section; Cairo's 900, 700, and 400 are sufficient for all hierarchy needs.
• Don't place text directly on the hero gradient without a shadow or overlay; it reduces legibility and looks unfinished.