موقع الشيخ طالبي

Overview

موقع الشيخ طالبي is a scholarly Arabic-language platform that embodies 'Typographic Minimalism'—a design philosophy centered on the power of clear hierarchy, generous whitespace, and restrained color accents to guide readers through complex religious and educational content. The aesthetic is deliberately austere, rejecting decorative flourishes in favor of a grid-based, text-first layout that prioritizes legibility and intellectual clarity. The brand personality is authoritative yet approachable: precise, measured, and deeply respectful of the reader's time and attention. The UI communicates through typography alone—weight, scale, and spatial relationships—rather than relying on visual ornament. Voice example: 'الدراسة العميقة تتطلب واجهة واضحة' (Deep study requires a clear interface).

Colors

The color system operates on a principle of 'Scholarly Restraint': a neutral white-to-gray surface stack (surface #ffffff, surface-container #eeeeee, surface-container-highest #dddddd) provides the canvas, while three accent colors serve specific communicative roles. Primary (#0693e3, a confident cyan-blue) is reserved for interactive elements—links, buttons, and focus states—signaling actionable content and maintaining visual continuity with WordPress admin conventions. Secondary (#ff6900, a warm orange) appears sparingly on highlights, badges, and secondary CTAs, creating visual rhythm without competing for attention. Tertiary (#9b51e0, a deep purple) supports status indicators and supplementary information. The on-surface color (#111111) provides maximum contrast for body text at 16–18p

Typography

The type system is built on Manrope, a geometric sans-serif that balances warmth with technical precision—ideal for bilingual (Arabic/English) content. Display (60px, weight 700) anchors hero sections and major headings; Headline-lg (40px, weight 600) introduces article sections; Headline-md (28px, weight 600) marks subsections; and Body-md (16px, weight 400, line-height 24px) serves as the primary reading size, optimized for sustained engagement. Letter-spacing decreases with size (display uses -0.02em to tighten large text, body uses 0.01em for clarity). All interactive labels use weight 600 at 14px with 0.02em tracking to ensure button text reads distinctly. For small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) to preserve legibility without adding visual

Layout

The layout follows a 12-column grid with a fixed max-width of 1280px, centered on larger screens. Spacing is semantic and hierarchical: lg (40px) separates major sections (header, hero, content blocks), md (24px) divides article paragraphs and card groups, and sm (12px) provides breathing room within components. The gutter is consistently 24px, creating a 1:1 ratio between content width and margin on desktop. On mobile (< 768px), the grid collapses to 4 columns with gutter reduced to 16px, maintaining readability without cramping. Whitespace is treated as a first-class design element—never fill empty space with decoration. Container max-width of 1280px ensures that line lengths remain between 60–80 characters for optimal reading comfort, particularly important for Arabic text which benefit

Elevation & Depth

Depth is conveyed through subtle shadows and surface-container layering rather than dramatic drop shadows. Level 1 (Base): white surface (#ffffff) with no shadow, establishing the primary reading plane. Level 2 (Cards & Containers): surface-container (#eeeeee) with a 1px border in outline-variant (#cccccc) and a soft shadow (0 3px 8px rgba(0,0,0,0.15)), creating gentle separation from the base. Level 3 (Modals & Overlays): surface-container-high (#e8e8e8) with a stronger shadow (0 8px 24px rgba(0,0,0,0.12)) and a 2px border in outline (#999999), signaling modal priority. Hover states transitio

Shapes

The shape philosophy is 'Architectural Clarity': rounded corners are used sparingly and purposefully to soften functional elements without introducing visual noise. Buttons use rounded.lg (1rem / 16px) to signal interactivity while maintaining a structured, professional appearance. Cards and input fields use rounded.DEFAULT (0.5rem / 8px), a subtle radius that prevents harsh corners without drawing attention. Navigation items and badges use rounded.full (9999px) only when they represent discrete, self-contained units (e.g., status badges). The rationale: larger radii (lg) on high-interaction e

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses {colors.primary} (#0693e3) with white text, 48px height, 12px vertical / 24px horizontal padding, and rounded.lg (16px). On hover, the background darkens to #0578c7 (a 10% shade shift) over 200ms. Focus states add a 2px outline in {colors.primary-container} (#cce5f7) with 2px offset, providing clear keyboard navigation feedback. button-secondary uses a transparent background with a 1px border in {colors.outline} (#999999), allowing secondary actions to coexist without visual competition. Disabled states reduce opacity to 0.5 and remove cursor interactivity.

Containers & Surfaces Cards use {colors.surface-container} (#eeeeee) with 1px border in outline-variant (#cccccc) and padding of 24px (md spacin

Do's and Don'ts

**Do**

• Do use the primary color (#0693e3) exclusively for interactive elements—links, buttons, focus states—to create a consistent, predictable interaction model.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to support the scholarly, print-like aesthetic and reduce cognitive load.
• Do apply Manrope at weight 600 for all interactive labels (14px, 0.02em tracking) to ensure buttons and navigation items read distinctly from body text.
• Do use the surface-container stack (surface #ffffff → surface-container #eeeeee → surface-container-high #e8e8e8) to create clear visual hierarchy without relying on color.
• Do transition all interactive states over 200ms using ease-in-out timing to provide smooth, professional feedback without feeling sluggish.

**Don't**

• Don't use secondary (#ff6900) or tertiary (#9b51e0) colors on primary CTAs—reserve them for badges, highlights, and supporting information only.
• Don't apply border-radius larger than rounded.lg (16px) on buttons or cards; the minimalist aesthetic requires crisp, architectural proportions.
• Don't add drop shadows larger than 0 8px 24px rgba(0,0,0,0.12); excessive depth contradicts the flat, text-centric design philosophy.
• Don't reduce line-height below 24px for body text; the 1.5x ratio (16px × 1.5 = 24px) is essential for legibility, especially in Arabic.
• Don't mix font families—Manrope is the sole typeface; using Fira Code or system fonts breaks the cohesive, scholarly voice.