Reeq Al Nahl Design System

Overview

Reeq Al Nahl (ريق النحل — "Bee's Nectar") is a Saudi Arabian e-commerce brand specializing in natural honey and bee-derived products. The visual system conveys organic authenticity through a warm, earthy palette dominated by honey-gold ({colors.accent}) and deep crimson ({colors.primary}), set against crisp white ({colors.canvas}) and cream ({colors.surface-warm}) surfaces that evoke the purity of raw honeycomb.

The brand's typographic identity rests entirely on Bahij TheSans Arabic, a proprietary Arabic typeface that delivers modern legibility with warm, humanist proportions. This single typeface carries every role from display headlines to body copy, creating a unified voice that feels both trustworthy and approachable. The weight spectrum is deliberately restrained—body text sits at a comfortable 400 weight while headlines push into 600–700 territory, never resorting to the aggressive heaviness common in promotional retail.

Shape language favors generosity: cards and modals employ {rounded.xl} (20px) to {rounded.pill} radii, softening the digital experience into something that feels tactile and handcrafted. The signature modal—visible in the screenshot as a location selector—exemplifies this philosophy: a floating white island with ample internal padding ({spacing.modal-padding} = 52px), rounded corners, and a subtle drop shadow that lifts it from the dimmed backdrop.

Color voltage is strategically placed. The honey-gold {colors.accent} (#b17122) anchors the entire navigation header, creating an immersive brand band at the top of every page. Crimson red {colors.primary} (#d21818) is reserved exclusively for calls-to-action and error states, ensuring it commands attention without overwhelming the warm palette. Success states glow with an organic green ({colors.success} = #73a955) that complements rather than clashes with the gold-red foundation.

The system is built for RTL (right-to-left) layouts, with all spacing, alignment, and component logic respecting Arabic reading direction. Floating action buttons (WhatsApp support, customer service) anchor the bottom-right corner—a placement that feels natural in RTL contexts.

Key Characteristics:

• Single typeface ({typography.body-md}) across all roles, weights 400–700, with Tahoma fallback
• Honey-gold nav bar ({component.top-nav}) establishing brand presence above the fold
• Crimson CTAs ({component.button-cta}) as sole high-voltage action color
• Generous rounding ({rounded.xl}, {rounded.pill}) on all containers and buttons
• Cream-warm surface ({colors.surface-warm}) for subtle section differentiation
• Modal system with 52px internal padding and dark overlay ({component.modal-overlay})
• Custom IcoMoon icon set matching the brand's organic aesthetic
• RTL-first layout logic throughout all components

Colors

Brand & Accent

• Primary ({colors.primary} — #d21818): Deep crimson red used exclusively for CTAs, sale badges, error states, and high-priority actions. This is the single highest-voltage color in the system.
• Primary Hover ({colors.primary-hover} — #b81414): Darkened crimson for hover/interaction states on primary buttons.
• Primary Active ({colors.primary-active} — #9e1010): Deepest crimson for pressed/active button states.
• Accent ({colors.accent} — #b17122): Honey-gold brand color dominating the top navigation bar, primary submit buttons in forms, and brand-anchored decorative elements.
• Accent Dark ({colors.accent-dark} — #8a5619): Deeper brown-gold for active states on accent-colored buttons and subtle text emphasis.
• Accent Light ({colors.surface-warm} — #fff6eb): Pale cream-warm background for highlighted sections, feature callouts, and subtle surface differentiation.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white base for modals, cards, main content areas, and product displays.
• Surface Soft ({colors.surface-soft} — #b17122): Gold-toned surface (identical to accent) used for the persistent top navigation header.
• Surface Warm ({colors.surface-warm} — #fff6eb): Cream-white for alternate content bands, feature highlights, and soft background treatments.
• Surface Success ({colors.success} — #73a955): Organic green for success badges, in-stock indicators, and positive status signals.
• Surface Dark ({colors.surface-dark} — #000000): Pure black for footer backgrounds, overlay regions, and maximum-contrast containers.
• Overlay ({colors.overlay} — rgba(0, 0, 0, 0.55)): 55% opacity black for modal and dialog backdrops, providing strong focus isolation.
• Overlay Subtle ({colors.overlay-subtle} — rgba(0, 0, 0, 0.2)): 20% opacity black for gentle depth layering on cards and elevated surfaces.

Text

• Ink ({colors.ink} — #161616): Near-black primary text color for headings, labels, and body copy on light surfaces. The workhorse text color.
• Body ({colors.body} — #000000): Absolute black for maximum-weight text like modal titles and pricing.
• Muted ({colors.muted} — #666666): Medium gray for secondary text, placeholders, captions, and de-emphasized information.
• Muted Strong ({colors.muted-strong} — #333333): Dark gray for tertiary headings (h3-level) and sub-labels requiring more weight than muted but less than ink.
• On Primary ({colors.on-primary} — #ffffff): White text on crimson primary backgrounds, satisfying AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text on dark/accent backgrounds (nav bar, footer, dark overlays).
• On Accent ({colors.on-accent} — #ffffff): White text on honey-gold accent buttons.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(92, 92, 92, 0.3)): Subtle gray border at 30% opacity for input fields, dividers, and container outlines.
• Border Subtle ({colors.border-subtle} — rgba(0, 0, 0, 0.1)): Very faint border for card edges and delicate separators.

Semantic

• Link ({colors.link} — #007bff): Standard blue for hyperlinks and clickable text elements.
• Link Hover ({colors.link-hover} — #0056b3): Darker blue for link interaction states.
• Success ({colors.success} — #73a955): Organic green for success messages, in-stock badges, and confirmation states.
• Error ({colors.error} — #d21818): Crimson red (aligned with primary) for validation errors and destructive actions.

Typography

Font Family

The entire system runs on Bahij TheSans Arabic (reeq-alnahl), a contemporary Arabic typeface served as a custom WOFF2 font from the brand's CDN. The font-face declarations define two weights: 400 (Regular/Plain) and 800 (ExtraBold), with the CSS leveraging font synthesis for intermediate weights (500, 600, 700).

The fallback stack prioritizes Tahoma (the most widely-available Arabic-compatible system font), followed by Segoe UI and Arial. A special reeq-alnahl-fallback face uses size-adjust: 98% and metric overrides to ensure Tahoma matches the custom font's proportions nearly identically, preventing layout shift during font loading.

Icons use IcoMoon (icomoon), a custom icon font packaged with the brand's asset pipeline, ensuring iconography shares the same loading strategy and fallback behavior as the typeface.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 36px | 700 | 1.3 | normal | Hero headlines, major campaign titles | | {typography.display-lg} | 28px | 600 | 1.2 | normal | Section headers, modal titles, page titles | | {typography.title-md} | 28px | 600 | 1.2 | normal | Card titles, prominent sub-headings | | {typography.title-sm} | 18px | 500 | 1.2 | normal | Tertiary headings (h3), filter labels | | {typography.body-md} | 15px | 400 | 1.5 | normal | Primary body copy, descriptions, paragraphs | | {typography.body-sm} | 14px | 400 | 1.5 | normal | Secondary text, input values, metadata | | {typography.caption} | 12px | 400 | 1.4 | normal | Badges, timestamps, legal text, icon buttons | | {typography.button} | 14px | 500 | 1.25 | normal | Button labels, CTA text | | {typography.nav-link} | 18px | 400 | 1.4 | normal | Navigation menu items, header links | | {typography.label} | 14px | 400 | 1.5 | normal | Form field labels, select options |

Principles

The typography system trusts size and weight to establish hierarchy, reserving color contrast for semantic signaling (error red, success green, link blue). Headlines at {typography.display-lg} (28px/600) create clear visual separation from body text at 15px/400 without resorting to extreme size jumps—the ratio is modest (1.87×), reflecting the brand's restrained, trustworthy voice.

Arabic script's inherent complexity means line heights are generous: 1.5 for body text ensures diacritical marks and character ascenders/descenders never collide. Display text tightens slightly to 1.2–1.3, allowing headlines to feel compact without crowding.

Letter spacing remains normal throughout—Arabic typefaces are meticulously spaced by their designers, and manual adjustment typically degrades readability. The system rejects uppercase transformations (irrelevant for Arabic) and avoids italic styling (not culturally conventional for Arabic UI text).

Note on Font Substitutes

Bahij TheSans Arabic is a proprietary commercial typeface not available on Google Fonts. For development environments without access to the brand's CDN-hosted WOFF2 files, the following Google Fonts substitute is recommended:

• Primary substitute: Cairo (weights 400, 500, 600, 700) — a Google Fonts Arabic typeface with similar humanist proportions and excellent screen rendering.
• Fallback: Tajawal as secondary fallback.

Define CSS variables for font substitution:

:root {
  --font-family-brand: 'Cairo', 'Tajawal', Tahoma, 'Segoe UI', Arial, sans-serif;
}

Production implementations must use the brand's reeq-alnahl font-face with the provided CDN URLs to maintain exact visual fidelity.

Layout

Spacing System

• Base unit: 4px (with 2px and 5px micro-adjustments for specific contexts).

• Tokens:

  • {spacing.xxs} (2px): Tight internal gaps, hairline offsets
  • {spacing.xs} (4px): Icon-text gaps, inline element spacing
  • {spacing.sm} (5px): Micro-spacing for compact components
  • {spacing.md} (8px): Most common spacing—card internals, element stacks, grid gaps
  • {spacing.lg} (10px): Button padding vertical, form field spacing
  • {spacing.xl} (12px): Section-internal padding, card margins
  • {spacing.xx l} (16px): Container padding, larger card internals
  • {spacing.section-xl} (20px): Component group margins
  • {spacing.section-xxl} (24px): Section vertical padding
  • {spacing.section-xxxl} (32px): Major section breaks
  • {spacing.modal-padding} (52px): Generous modal internal padding (signature brand moment)

• Section padding (vertical): {spacing.section-xxl} (24px) for standard content sections; {spacing.modal-padding} (52px) for modal dialogs.

• Card internal padding: {spacing.md} (8px) for dense product cards; {spacing.lg} (10px)–{spacing.xxl} (16px) for feature cards.

• Gutters: 8–16px between grid items in product listings; 24px+ between major page sections.

Grid & Container

• Max content width: 1440px for the main application shell (main element), 1408px for article/content areas, 650px for focused content sections (like the modal shown in the screenshot).
• Density choice: Marketplace-dense product grids with generous whitespace around individual cards, balancing e-commerce conversion needs with the brand's premium positioning.
• Grid behavior (desktop): Product grids likely use 3–4 column layouts within the 1408px content area; the modal centers itself at 650px max-width with significant horizontal margin.
• Hero column splits: Typical landing page hero would use a 2-column layout (text left/right per RTL convention) within the 1408px constraint.

Whitespace Philosophy

The system embraces generous whitespace as a luxury signal. The 52px modal padding is a deliberate brand statement—this is not a cramped discount retailer but a premium purveyor of natural products. Whitespace frames content rather than filling it, with the cream-warm {colors.surface-warm} background providing subtle warmth in areas that might otherwise feel empty.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [👤] [♡] [🛒]  ┌──────────────────────┐ [🔍]   لوجو ريق النحل │
│ icons         │  البحث عن منتجات     │ toggle     Logo       │
│               └──────────────────────┘                      │
│  الأعسال  المكملات  روتينك  العروض  المستخدمة  rzوات  ...    │
│  ← nav links (18px, white on gold)                           │
└─────────────────────────────────────────────────────────────────┘
↑ backgroundColor: {colors.accent} (#b17122)
↑ height: 64px
↑ maxWidth: 1440px

Modal / Location Selector (Screenshot Focal Point)

┌───────────────────────────────────────────┐
│                                           │
│           إختيار منطقة تسليمك             │  ← {typography.title-md}
│                                           │
│   اختر المنطقة المفضلة لديك والتوصيل      │  ← {typography.body-md}
│                                           │
│   ┌─────────────────┐  ┌─────────────────┐ │
│   │ المدينة     ▼   │  │ المنطقة    ▼   │ │  ← {component.select-input}
│   └─────────────────┘  └─────────────────┘ │
│                                           │
│   ┌──────────┐                            │
│   │   بحث    │                            │  ← {component.button-primary}
│   └──────────┘                            │
│                                           │
└───────────────────────────────────────────┘
↑ backgroundColor: {colors.canvas}
↑ rounded: {rounded.xl} (20px)
↑ padding: 52px all sides
↑ shadow: {extensions.shadows.sm}
↑ centered on {colors.overlay} backdrop

Floating Action Buttons (Bottom Right)

                    ┌─────┐
                    │ 📞  │  ← {component.fab-support} (crimson, 56px circle)
                    └─────┘
         ┌─────┐
         │ 💬  │  ← {component.fab-whatsapp} (green, 56px circle)
         └─────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base surfaces, footer, nav bar | | 1 (Hairline) | {colors.hairline} border (rgba 0.3) | Input fields, dividers | | 2 (Soft lift) | {extensions.shadows.sm} — 0 2px 4px rgba(0,0,0,0.25) | Cards, modal container | | 3 (Modal) | {colors.overlay} backdrop + Level 2 shadow | Modal dialogs, location picker | | 4 (FAB) | Shadow implied by circle + color contrast | Floating action buttons |

The elevation philosophy is layered but restrained. Unlike Western SaaS products with multi-tiered shadow systems, Reeq Al Nahl uses essentially one shadow token ({extensions.shadows.sm}) for anything that floats above the canvas. Depth is communicated primarily through the dark overlay behind modals and through the warm-to-cool color progression (cream → white → overlay black). Shadows are neutral-toned (no blue or warm tints), keeping focus on the content rather than the atmosphere.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Input fields, compact tags | | {rounded.DEFAULT} | 10px | Buttons (primary, CTA), select inputs | | {rounded.md} | 12px | Feature cards, badge containers | | {rounded.lg} | 16px | Product cards, image containers | | {rounded.xl} | 20px | Modals, prominent panels, hero cards | | {rounded.pill} | 9999px | Search inputs, pills, badges | | {rounded.circle} | 50% | Avatar placeholders, FABs, icon circles |

The shape language consistently rounds toward friendliness and approachability. Even "sharp" corners (8px) are noticeably softened. The pill shape ({rounded.pill}) is used strategically for search bars and status badges, evoking the organic curves of honey droplets. Circular FABs at 56px provide generous touch targets that feel playful yet purposeful.

Photography Geometry

Product imagery (inferred from e-commerce context) would use:

• Aspect ratios: 1:1 (square) for product thumbnails in grids, 4:3 or 3:4 for detail views.
• Corner rounding: {rounded.lg} (16px) on product card images, creating a soft frame that matches the card container.
• Treatment: Full-bleed images within cards, no borders, subtle {extensions.shadow.sm} on hover (inferred).

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g., {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Actions

{component.top-nav-icon-button} — Transparent icon buttons in the header (user account, favorites/wishlist, cart). Background transparent, text {colors.on-dark} (white), using {typography.caption} at 12px. These are 24×24px touch targets with no visible border or rounding, sitting flush against the gold nav bar. Icons are from the custom IcoMoon set.

{component.nav-link} — Navigation menu items in the top bar ("الأعسال", "المكملات", "روتينك", etc.). Background transparent, text white ({colors.on-dark}), typography {typography.nav-link} at 18px/400. Padding is {spacing.md} (8px) on all sides. Links have no underlines in default state; hover likely triggers color lightening or underline appearance.

{component.button-primary} — Honey-gold primary action button, as seen in the location modal ("بحث"). Background {colors.accent} (#b17122), text white ({colors.on-accent}), typography {typography.button} at 14px/500. Rounded {rounded.DEFAULT} (10px), padding {spacing.lg} horizontally (10px) × {spacing.section-xl} vertically (24px). This is the default submission button for forms and modals. Active state: {component.button-primary-active} darkens to {colors.accent-dark}.

{component.button-cta} — Crimson CTA button for high-conversion actions (Add to Cart, Buy Now). Background {colors.primary} (#d21818), text {colors.on-primary} (white), same dimensions and rounding as {component.button-primary}. Active state: {component.button-cta-active} at {colors.primary-active}. This button should be used sparingly—only for the single most important action on any given screen.

{component.fab-whatsapp} — Green WhatsApp floating action button fixed to bottom-right (or bottom-left per RTL). Background #7fba57 (WhatsApp brand green), white icon, 56×56px diameter ({rounded.circle}). Provides direct WhatsApp support access.

{component.fab-support} — Crimson customer support FAB, positioned above the WhatsApp FAB. Background {colors.primary}, white icon, 56×56px diameter. Likely opens a chat widget or support panel.

Cards & Containers

{component.modal-card} — The central modal container shown in the screenshot (location picker). Background {colors.canvas} (white), text {colors.ink}, rounded {rounded.xl} (20px), padding {spacing.modal-padding} (52px) on all sides. Shadow {extensions.shadows.sm} lifts it from the {colors.overlay} backdrop. Max-width 650px, centered horizontally and vertically via flexbox. Contains {component.modal-title}, {component.modal-subtitle}, form elements, and {component.button-primary}.

{component.modal-overlay} — Full-viewport backdrop behind modals. Background {colors.overlay} (rgba 0,0,0,0.55), capturing click events to dismiss the modal. Covers the entire app shell including the navigation header.

{component.card-product} — Standard product card for e-commerce listings. White background, {colors.ink} text, {rounded.lg} (16px) corners, {spacing.md} (8px) internal padding. Would contain product image, title, price ({component.price-tag}), and add-to-cart button. Shadow appears on hover (implied).

{component.card-surface-warm} — Feature highlight card or callout block. Background {colors.surface-warm} (cream #fff6eb), providing subtle visual separation from the white canvas. Used for promotional banners, feature explanations, or testimonial blocks.

Inputs & Forms

{component.search-input-header} — Pill-shaped search bar in the navigation header. Background transparent (letting the gold nav show through), text white, {rounded.pill} (9999px), padding 10px 48px 10px 20px (extra right padding for search icon in RTL). Height 44px, border {colors.hairline} at 30% opacity. Typography {typography.body-md} at 15px.

{component.search-input-inline} — Secondary search input for in-page or mobile search. Transparent background, white text, no border (border 0px), padding 6px 0px 6px 36px. Height 40px. Simpler treatment than the header search.

{component.select-input} — Dropdown/select form fields as seen in the modal (المدينة/المنطقة). Background transparent, text {colors.ink}, {rounded.DEFAULT} (10px), padding 12px 8px, height 48px. Border is none (0px) in the extracted CSS, suggesting custom-styled or library-rendered selects. Typography {typography.label} at 14px.

{component.text-input} — Standard text input field. Transparent background, {colors.ink} text, {rounded.sm} (8px), padding 12px 8px, height 44px. Border defaults to none; focus state ({component.text-input-focus}) likely shows {colors.hairline} border or accent-color ring.

{component.label-text} — Form field label above inputs. Transparent background, {colors.ink} color, {typography.label} at 14px/400. Positioned above its associated input with {spacing.xs} (4px) gap.

Navigation

{component.top-nav} — Persistent top navigation bar spanning full viewport width. Background {colors.accent} (honey-gold #b17122), text white ({colors.on-dark}), height 64px. Contains logo (left-aligned in RTL), icon buttons (account, wishlist, cart), search bar, and navigation links. Max-width 1440px internally centered. This is the brand's most visible real estate—every page view reinforces the honey-gold identity.

{component.breadcrumb} — Breadcrumb navigation trail below the header. Transparent background, {colors.muted} text (#666666), {typography.caption} at 12px. Separators likely use / or > glyphs.

Text Elements

{component.modal-title} — Large title inside modals ("إختيار منطقة تسليمك"). White background (inherits from modal card), {colors.body} (pure black) text, {typography.title-md} at 28px/600. Center-aligned in the modal context.

{component.modal-subtitle} — Descriptive paragraph beneath modal title. White background, {colors.ink} text (#161616), {typography.body-md} at 15px/400. Center-aligned, explaining the purpose of the modal.

{component.price-tag} — Product price display in SAR. Transparent background, {colors.primary} (crimson) text, {typography.title-sm} at 18px/500. Draws eye to pricing with brand-red emphasis.

{component.price-original} — Struck-through original price for discounted items. Transparent background, {colors.muted} text, {typography.body-sm} at 14px. Typically preceded by {component.price-tag} showing sale price.

{component.badge-success} — In-stock or success indicator badge. Background {colors.success} (green), white text, {typography.caption} at 12px, {rounded.pill} shape, padding 4px 12px. Used for "متوفر" (available) status tags.

Footer

{component.footer} — Page footer spanning full width. Background {colors.surface-dark} (black), text {colors.muted} (gray), {typography.body-sm} at 14px. Padding {spacing.section-xxl} (24px). Contains links, contact info, social media, and legal text in white-on-dark treatment.

Do's and Don'ts

Do

• Do use {colors.accent} (#b17122) for the top navigation bar and primary form submission buttons—it's the brand's signature honey-gold.
• Do reserve {colors.primary} (#d21818) exclusively for high-conversion CTAs (Add to Cart, Buy Now); its crimson intensity demands scarcity.
• Do apply {rounded.xl} (20px) to all modal and dialog containers with {spacing.modal-padding} (52px) internal padding—the generous whitespace is a brand signature.
• Do use {typography.body-md} (15px/400) as the default body text size; Arabic readability benefits from this comfortable size.
• Do set dir="rtl" and lang="ar" on the root element—every layout assumption in this system assumes RTL flow.
• Do use {rounded.pill} (9999px) for search inputs and status badges to echo organic, droplet-like shapes.
• Do place FABs ({component.fab-whatsapp}, {component.fab-support}) at the bottom-right of the viewport (bottom-left in visual LTR terms) for RTL ergonomics.
• Do leverage {colors.surface-warm} (#fff6eb) for alternating content sections to add warmth without introducing new colors.
• Do use {colors.overlay} (55% opaque black) for modal backdrops—this provides strong focus isolation while maintaining readability of the underlying page.
• Do keep button padding asymmetrical where needed (e.g., {component.search-input-header}'s 10px 48px 10px 20px) to accommodate icons within the RTL flow.

Don't

• Don't use {colors.primary} for the navigation bar or general branding—that's {colors.accent}'s role; crimson is for action only.
• Don't round corners less than {rounded.sm} (8px)—even "sharp" elements in this system are softly curved.
• Don't use font weights below 400 for body text; the typeface's 400 weight is already optimally light for Arabic screen reading.
• Don't add gradients to the navigation bar—the {colors.accent} solid fill is intentional and part of the brand's flat, honest aesthetic.
• Don't place text directly on {colors.overlay} without testing contrast; always use elevated surfaces ({component.modal-card}) for content.
• Don't mix English and Arabic typefaces arbitrarily—keep {typography.body-md}'s font stack consistent across all languages.
• Don't exceed {typography.display-xl} (36px) for on-screen text; the brand voice is confident, not shouty.
• Don't use {colors.link} blue for primary actions—that's {colors.primary}'s job; blue is only for contextual hyperlinks.
• Don't reduce modal padding below 32px—the 52px value in {component.modal-card} is a deliberate premium signal.
• Don't forget the IcoMoon icon font—standard icon libraries (Lucide, Heroicons) won't match the brand's custom iconography.

Motion & Animation

Transition Tokens

--transition-all: all ease 200ms;
--transition-color: color ease 200ms;
--transition-transform: transform ease 200ms;
--transition-opacity: opacity ease 350ms;
--opacity-fast: opacity ease 200ms;
--transform-shadow: transform ease 200ms, box-shadow ease 250ms;

Keyframe Animations

• fadeIn / fadeOut — Opacity-based entrance/exit for modals, toasts, and overlay appearances.
• slideFromBottom / slideToBottom — Vertical slide for bottom sheets, keyboards, and up-sliding panels.
• slideFromTop / slideToTop — Top-down slide for notification banners and dropdown reveals.
• slideFromLeft / slideToLeft / slideFromRight / slideToRight — Horizontal slides for carousels, drawer panels, and RTL-aware off-canvas navigation.
• swipe-out-left/right/up/down — Gesture-driven dismissal animations for touch interactions (toasts, list items).
• sonner-fade-in/out/spin — Toast notification animations (Sonner library integration).
• mui-auto-fill/cancel — Browser autofill animation overrides for MUI-formatted inputs.

Interaction Patterns

• Modal reveal: Backdrop {component.modal-overlay} fades in (opacity 0→1 over ~200ms) while {component.modal-card} scales from 0.95→1 and fades in simultaneously.
• Button press: {component.button-primary} and {component.button-cta} darken to their -active variants on mousedown/touchstart with 200ms color transition.
• Input focus: {component.text-input} and {component.select-input} likely gain a subtle {colors.accent} or {colors.hairline} border/shadow ring on focus, transitioning over 200ms.
• FAB interaction: Floating action buttons likely scale slightly (1.0→1.05) on hover/focus with shadow elevation increase.
• Nav link hover: {component.nav-link} items may lighten in opacity or gain an underline with 200ms color/transform transition.
• Search toggle: Header search bar likely expands/collapses with width transition (transform or width property over 200–250ms).
• Toast notifications: Sonner-powered toasts slide in from top-right (RTL: top-left) with fade + slight Y-translate, auto-dismiss with swipe-out animation.
• Dropdown menus: Navigation sub-menus (indicated by chevron icons in nav items) likely slide down with slideFromTop keyframe and fade.

The overall motion level is subtle—transitions are fast (200ms base), easing is simple ease (no complex beziers in extracted data), and animations serve functional clarity (modal focus, feedback acknowledgment) rather than decorative flourish. This aligns with the brand's straightforward, honest positioning.

Imagery Style

• Photography style: Product photography is expected to be clean, well-lit, with warm color temperature complementing the honey-gold palette. Natural wood, honey dipper props, and golden-hour lighting would reinforce the organic narrative.
• Background treatment: Product images likely sit on pure white or very light cream backgrounds, avoiding busy contexts that compete with the UI.
• Illustration style: If present (not visible in screenshot), illustrations would likely use the brand's {colors.accent}, {colors.primary}, and {colors.success} palette in a flat, warm, organic style—no cold geometric abstraction.
• Iconography: Custom IcoMoon SVG icons with consistent stroke width, likely 2px strokes, rendered in currentColor for theme adaptability. Sizes: 16px (inline), 20px (button accompaniment), 24px (standalone).
• Image role: Supporting rather than dominant—the screenshot shows a text-heavy modal state, suggesting the brand trusts typography and layout to carry messaging, with imagery serving product verification and emotional texture.
• Logo treatment: The brand mark (bee/honeycomb motif visible in header) combines a graphic symbol with Arabic wordmark, rendered in white on the gold nav bar and likely in {colors.accent} or {colors.ink} on light backgrounds.

Icon System

• Library: Custom IcoMoon icon font (icomoon), served as WOFF2 from the brand's CDN (https://static.zid.store/75ebdd17/icomoon.woff2). This is not a public icon library—icons are bespoke to the brand.
• Specific icons observed:
  • User/account (person silhouette) — header left
  • Heart/favorites — header
  • Shopping cart — header
  • Search (magnifying glass) — header search trigger
  • Chevron down — navigation dropdown indicators, select inputs
  • Location pin — implied by location modal context
  • WhatsApp — FAB (green circle)
  • Phone/headset — support FAB (crimson circle)
  • Bee/honeycomb — brand logo mark
• Treatment: Stroke-based icons (inferred from IcoMoon typical output), currentColor fill/stroke, no hardcoded colors. Alignment is middle-baseline with adjacent text. Sizes scale with context: 16px for inline, 20–24px for standalone buttons.
• Accessibility: Icons accompanying text (cart count, favorite status) should include aria-label or visually-hidden text for screen reader users, especially critical for the cart and wishlist icons which convey state.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix, with strong i18n/rtl support
- Styling:        Tailwind CSS v3+ with RTL plugin (tailwindcss-rtl) or CSS Modules
- Fonts:          Self-hosted Bahij TheSans Arabic WOFF2 from brand CDN; Cairo (Google Fonts) as dev fallback
- Animation:      Framer Motion (React) or GSAP for complex sequences; vanilla CSS transitions suffice for most interactions
- Icons:          Custom IcoMoon font (provided); Lucide React for any supplementary icons needed during development
- Component lib:  Radix UI Primitives (for accessible modals, selects, dialogs) + custom styling
- Forms:          React Hook Form + Zod validation, styled to match {component.select-input} and {component.text-input}
- i18n:           next-intl or react-i18next with Arabic (ar-SA) as default locale, RTL layout enforcement

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column, hamburger nav, stacked modal, FABs visible, simplified header | | Tablet | 640–1024px | Two-column product grid, condensed nav (icon + text), modal at 90% width | | Desktop | 1024–1440px | Full nav bar visible, 3-4 column product grid, modal at 650px centered | | Wide | > 1440px | Max-width container (1440px) centered, additional whitespace |

Touch Targets

• {component.button-primary} / {component.button-cta}: ~44px height (padding 10px + text ≈ 24px) — meets WCAG AAA minimum.
• {component.text-input} / {component.select-input}: 44–48px height — exceeds 44px minimum comfortably.
• {component.search-input-header}: 44px height — compliant.
• {component.fab-whatsapp} / {component.fab-support}: 56px diameter (44×44mm minimum exceeded by 27%) — excellent touch targets.
• {component.nav-link}: 8px padding + 18px text ≈ 34px visual height — may need vertical padding increase to 12px for mobile compliance.

Collapsing Strategy

• Navigation: Full horizontal nav links ({component.nav-link}) collapse into a hamburger menu on mobile, triggering an off-canvas drawer (using slideFromRight/slideFromLeft animation per RTL). Search bar may move into the drawer or become an icon-only toggle.
• Modal: The 650px-wide {component.modal-card} scales to 90–95% viewport width on mobile with reduced padding (from 52px to 24px). Form fields stack vertically (region above city, rather than side-by-side).
• Hero section: Two-column hero (text + image) stacks to single column on mobile, with text above image.
• Product grid: 4-column → 2-column → 1-column as viewport narrows, maintaining {rounded.lg} card rounding throughout.
• FABs: Remain fixed bottom-right on all breakpoints; may stack vertically on very small screens.
• Header search: Expanding search bar collapses to icon-only toggle on mobile, expanding to full-width input on tap (using width or transform transition).

Image Behavior

• Hero illustrations: Scale down proportionally, maintaining aspect ratio; may switch to portrait orientation or stack below headline on mobile.
• Product card images: Maintain 1:1 aspect ratio, scale with grid column width, {rounded.lg} preserved at all sizes.
• Logo: Reduces in size on mobile but remains fully visible; wordmark may hide leaving only icon on very small screens.
• FAB icons: Fixed 24–28px regardless of viewport (inside 56px circle).

Iteration Guide

1. Scaffold with RTL-first mindset. Set <html dir="rtl" lang="ar-SA"> as your root element before writing any CSS. Use Tailwind's RTL plugin or logical properties (margin-inline-start instead of margin-left) to ensure automatic direction flipping.

2. Load the brand typeface first. Add the three @font-face declarations (reeq-alnahl 400, reeq-alnahl 800, reeq-alnahl-fallback, icomoon) to your global stylesheet with font-display: swap. Define --font-family-brand CSS variable pointing to the full stack. Never use system fonts in production—they're fallbacks only.

3. Build the navigation bar as your foundational component. Implement {component.top-nav} first: 64px height, {colors.accent} background, white text/icons, 1440px max-width inner container. Get the logo placement, icon buttons, search input, and nav links flowing correctly in RTL. This component sets the tone for everything else.

4. Implement the modal system early. The location-picker modal ({component.modal-card}) is the screenshot's focal point and exercises your rounded corners (20px), padding (52px!), shadow, overlay, and centering logic. Build it as a reusable primitive—all future modals (quick-view, confirm-dialog, auth) will inherit from this pattern.

5. Use tokens for every value. Reference {colors.x}, {typography.y}, {rounded.z}, {spacing.w} from the YAML frontmatter. If you need a value that doesn't exist in the tokens (e.g., a specific margin), propose adding it to the frontmatter rather than hardcoding it. The only acceptable literals are compound values like "10px 24px" padding that don't map cleanly to a single token.

6. Implement state variants as separate components. When building {component.button-primary}, also create {component.button-primary-active} and {component.button-primary-disabled} as distinct style entries (even if they share 90% of properties). This mirrors the frontmatter structure and makes variant management explicit.

7. Match the warm color story exactly. The {colors.accent} → {colors.surface-warm} → {colors.canvas} progression (gold → cream → white) is the brand's thermal gradient. Don't introduce cool grays or blues into surfaces—warmth is intentional. Reserve cool colors for {colors.link} (blue) and semantic states only.

8. Test with Arabic content immediately. Don't placeholder with Latin text. Use real Arabic product names, prices in SAR (ر.س), and Arabic UI labels from day one. Arabic text has different rhythm, line-height needs, and character widths that expose layout bugs invisible in English.

9. Validate touch target sizes. Every interactive element must meet 44×44px minimum. The {component.nav-link} at current spec (8px padding + 18px text ≈ 34px) needs padding bump to 12px for mobile. FABs at 56px are exemplary.

10. Run the linter. After completing your implementation, run npx @google/design.md lint DESIGN.md (when available) to catch broken token references, orphaned components, and contrast ratio issues. Manual review: scroll every breakpoint, test every button state, verify every modal opens/closes with the correct overlay and animation.

Font Setup

For development without access to the brand's CDN:

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

:root {
  --font-family-brand: 'Cairo', 'Tajawal', Tahoma, 'Segoe UI', Arial, sans-serif;
}

Production requires these exact font-face declarations (extracted from the live site):

@font-face {
  font-family: 'reeq-alnahl';
  src: url('https://static.zid.store/75ebdd17/BahijTheSansArabic-Plain.woff2?v=v1.0.218') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'reeq-alnahl';
  src: url('https://static.zid.store/75ebdd17/BahijTheSansArabic-ExtraBold.woff2?v=v1.0.218') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'reeq-alnahl-fallback';
  src: local('Tahoma');
  size-adjust: 98%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-_override: 0%;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'icomoon';
  src: url('https://static.zid.store/75ebdd17/icomoon.woff2?d668y32?v=v1.0.218') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred rather than extracted. Implementation teams must define hover color shifts (typically 10–15% darkness increase) and transform scales per component.
• Loading/skeleton states: No loading skeletons, spinners, or shimmer effects were visible in the screenshot. Recommend implementing skeleton cards with {colors.surface-warm} background and {rounded.lg} for product listing load states.
• Form validation states: Beyond {component.text-input-focus}, error states (red border, error message text) and success states (green checkmark) are not represented in the extracted CSS. Map to {colors.error} and {colors.success} tokens respectively.
• Authenticated/user dashboard surfaces: The screenshot shows a pre-auth or modal-only state. Member dashboard, order history, and account settings surfaces were not available for extraction.
• Product detail page (PDP): No PDP was captured. Image gallery, quantity selector, tabbed description/reviews, and related products components remain to be designed from the system tokens.
• Checkout flow: Cart page, shipping address form, payment method selection, and order confirmation screens are extrapolated from the modal pattern but not verified.
• Responsive intermediate states: Exact tablet breakpoints (navigation collapse point, grid column reduction thresholds) are estimated from standard e-commerce patterns, not observed.
• Dark mode: The site is light-mode only (extensions.mode: "light"). No dark mode token mappings exist; if required, they must be derived by inverting surface/text relationships while preserving {colors.accent} and {colors.primary} brand colors.
• Accessibility contrast specifics: While {colors.on-primary} (#ffffff on #d21818) passes AA, exact ratios for {colors.muted} (#666666) on {colors.canvas} (#ffffff) (4.53:1 — passes AA large text) and edge cases like {colors.ink} on {colors.surface-warm} should be verified with a contrast checker during implementation.
• CSS variable naming mismatches: The source uses class-based styling (BEM-ish: reeq-header__action, reeq-header__nav-link) rather than design-token CSS variables. Implementers mapping this system to CSS custom properties should use the kebab-case token names from this spec (e.g., --color-primary, --spacing-md) rather than reverse-engineering the original class names.