DESIGN.md · Analysis

ElOmraDZ

elomradz.com · 26 Oct 2026 · 47 colors · Poppins

ElOmraDZ

Algeria's first comparison platform for Omra and Hajj pilgrimage offers, connecting pilgrims with vetted travel agencies. Green-accented, trust-led, bilingual French and Arabic interface.

Colors

surface#fcfcfc

surface-dim#e5e7eb

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f9fafb

surface-container#f3f4f6

surface-container-high#e5e7eb

surface-container-highest#d1d5db

on-surface#020817

on-surface-variant#111111

inverse-surface#020817

inverse-on-surface#f8fafc

outline#9ca3af

outline-variant#e5e7eb

surface-tint#138808

primary#138808

on-primary#ffffff

primary-container#17980b

on-primary-container#111111

inverse-primary#4ade80

secondary#22c55e

on-secondary#052e16

secondary-container#dcfce7

on-secondary-container#14532d

tertiary#dc2626

on-tertiary#ffffff

tertiary-container#fee2e2

on-tertiary-container#7f1d1d

error#dc2626

on-error#ffffff

error-container#fee2e2

on-error-container#991b1b

primary-fixed#dcfce7

primary-fixed-dim#4ade80

on-primary-fixed#052e16

on-primary-fixed-variant#14532d

secondary-fixed#bbf7d0

secondary-fixed-dim#86efac

on-secondary-fixed#052e16

on-secondary-fixed-variant#166534

tertiary-fixed#fee2e2

tertiary-fixed-dim#fca5a5

on-tertiary-fixed#450a0a

on-tertiary-fixed-variant#991b1b

background#fcfcfc

on-background#020817

surface-variant#f1f5f9

Typography

display: fontFamily: Poppins · fontSize: 48px · fontWeight: 700 · lineHeight: 40px · letterSpacing: normal
headline-lg: fontFamily: Poppins · fontSize: 30px · fontWeight: 700 · lineHeight: 36px
headline-md: fontFamily: Poppins · fontSize: 24px · fontWeight: 700 · lineHeight: 32px
title-lg: fontFamily: Poppins · fontSize: 18px · fontWeight: 600 · lineHeight: 27px
body-lg: fontFamily: Poppins · fontSize: 18px · fontWeight: 400 · lineHeight: 27px
body-md: fontFamily: Poppins · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Poppins · fontSize: 14px · fontWeight: 500 · lineHeight: 20px
label-sm: fontFamily: Poppins · fontSize: 12px · fontWeight: 500 · lineHeight: 16px

Design guidance

Overview

ElOmraDZ is an Algerian pilgrimage marketplace that aggregates Omra and Hajj packages from licensed travel agencies, letting pilgrims compare prices, itineraries and hotels before booking. The aesthetic is Trust-Led Clarity: a near-white canvas (#fcfcfc) carries a single saturated Algerian-flag green (#138808) reserved for action, with photographic Kaaba imagery providing the spiritual weight. The emotional response is reassurance and calm deliberation, not urgency.

The voice is bilingual, formal and respectful, using Arabic as the primary headline language ("ابحث عن عمرتك معنا") and French for operational detail. Sentences are short, declarative and benevolent. Example sentence: "Comparez les offres et réservez votre pèlerinage en toute confiance."

Colors

Primary (#138808) is the brand accent used exclusively for the primary CTA ("بوابة الوكالات"), the active search tab, and the search submit button; hover shifts to #17980b. Secondary (#22c55e) supports status and success highlights and the green glow on featured states. Tertiary (#dc2626) is reserved for the "جديد" badge and the mobile app download CTA, never for primary navigation. Surfaces stack from #ffffff (cards) over #fcfcfc (page) to #f3f4f6 (inputs and muted panels). Body text is #020817 on #fcfcfc, a contrast ratio above 18:1. Hero areas use a dark photographic overlay of rgba(0,0,0,0.4) to keep white type legible.

Typography

The system uses Poppins for Latin and Cairo for Arabic, paired so Arabic and French share weight and x-height. Display (48px / 700) is reserved for the hero heading; headline-md (24px / 700) for section titles; body-md (16px / 400) for descriptions; label-md (14px / 500) for buttons and navigation. Arizonia appears only as a decorative script accent. Apply line-height 40px to display to keep Arabic diacritics from colliding with the line above.

Layout

The layout is a fixed-width container of max-width 1024px, centered with 32px side padding, on a 12-column grid that collapses to a single column below 640px. Section separation uses xl (24px) vertical rhythm; within cards, md (12px) and lg (16px) spacing organize form fields. The page is generously white-spaced, with the search panel overlapping the hero bottom edge by roughly 60px to bridge imagery and content.

Elevation & Depth

Depth is conveyed through a restrained shadow stack. Level 1 (cards, inputs): 0 1px 2px rgba(0,0,0,0.05). Level 2 (raised search panel): 0 10px 15px -3px rgba(0,0,0,0.15). Level 3 (featured green highlight): 0 0 24px 7px rgba(34,197,94,0.6) combined with the Level 2 shadow, used sparingly on the active search or status badge. The header adds shadow-sm over a rgba(0,0,0,0.4) backdrop.

Shapes

Shape philosophy: Soft-Institutional. Buttons and inputs use a 6px radius (rounded.DEFAULT), giving a confident but approachable edge; cards and the search panel use 8px to 12px (rounded.lg and rounded.xl). Status badges and the floating WhatsApp action use full pill radius (9999px) to signal them as separate from structural content.

Components

Action Elements The primary button is a solid #138808 fill with white Poppins 14px / 500 text, 36px high, 6px radius, and 8px padding. Hover transitions to #17980b over the default 150ms ease-in-out. The secondary button inverts this for lower-emphasis actions and is 48px high with 16px horizontal padding. Focus rings use a 2px ring at 2px offset in #020817.

Containers & Surfaces Cards sit on #ffffff at 8px radius with 24px internal padding and the Level 1 shadow. Hover elevates them to #f9fafb. The search panel is a white card with the Level 2 shadow, overlapping the hero by about 60px.

Inputs & Interaction Input fields are 40px tall, 6px radius, 1px solid #e5e7eb border, and 8px padding. Focus replaces the border with #138808 and adds a 2px rgba(19,136,8,0.25) ring. Placeho

Do's and Don'ts

**Do**

Reserve #138808 for primary CTAs and active states only, so the action hierarchy stays unambiguous.
Pair every Arabic headline with the French equivalent in body copy to serve both audiences.
Keep the 1024px container and 32px gutters consistent across hero, search, and listing sections.
Use Poppins 700 for headings and Poppins 400 for body, avoiding intermediate weights outside the 500 label tier.

**Don't**

Don't use the red tertiary (#dc2626) for primary navigation or main CTAs; it signals alerts and new features.
Don't add gradients or glassmorphism; the brand relies on flat white surfaces and photographic imagery.
Don't set Arabic body text below 16px, since diacritics become illegible at smaller sizes.
Don't let the glow shadow (Level 3) appear on more than one element per viewport.

---
version: alpha
name: ElOmraDZ
description: >-
  Algeria's first comparison platform for Omra and Hajj pilgrimage offers, connecting pilgrims with vetted travel
  agencies. Green-accented, trust-led, bilingual French and Arabic interface.
logo:
  src: https://elomradz.com/logo.png
  srcDark: https://elomradz.com/logo-bg.png
colors:
  surface: '#fcfcfc'
  surface-dim: '#e5e7eb'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f9fafb'
  surface-container: '#f3f4f6'
  surface-container-high: '#e5e7eb'
  surface-container-highest: '#d1d5db'
  on-surface: '#020817'
  on-surface-variant: '#111111'
  inverse-surface: '#020817'
  inverse-on-surface: '#f8fafc'
  outline: '#9ca3af'
  outline-variant: '#e5e7eb'
  surface-tint: '#138808'
  primary: '#138808'
  on-primary: '#ffffff'
  primary-container: '#17980b'
  on-primary-container: '#111111'
  inverse-primary: '#4ade80'
  secondary: '#22c55e'
  on-secondary: '#052e16'
  secondary-container: '#dcfce7'
  on-secondary-container: '#14532d'
  tertiary: '#dc2626'
  on-tertiary: '#ffffff'
  tertiary-container: '#fee2e2'
  on-tertiary-container: '#7f1d1d'
  error: '#dc2626'
  on-error: '#ffffff'
  error-container: '#fee2e2'
  on-error-container: '#991b1b'
  primary-fixed: '#dcfce7'
  primary-fixed-dim: '#4ade80'
  on-primary-fixed: '#052e16'
  on-primary-fixed-variant: '#14532d'
  secondary-fixed: '#bbf7d0'
  secondary-fixed-dim: '#86efac'
  on-secondary-fixed: '#052e16'
  on-secondary-fixed-variant: '#166534'
  tertiary-fixed: '#fee2e2'
  tertiary-fixed-dim: '#fca5a5'
  on-tertiary-fixed: '#450a0a'
  on-tertiary-fixed-variant: '#991b1b'
  background: '#fcfcfc'
  on-background: '#020817'
  surface-variant: '#f1f5f9'
typography:
  display:
    fontFamily: Poppins
    fontSize: 48px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: normal
  headline-lg:
    fontFamily: Poppins
    fontSize: 30px
    fontWeight: '700'
    lineHeight: 36px
  headline-md:
    fontFamily: Poppins
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
  title-lg:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 27px
  body-lg:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 27px
  body-md:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label-md:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  label-sm:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
rounded:
  sm: 4px
  DEFAULT: 6px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  gutter: 16px
  container-max: 1024px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 10px 15px -3px rgba(0,0,0,0.15)
  lg: 0 0 24px 7px rgba(34,197,94,0.6), 0 10px 15px -3px rgba(0,0,0,0.15)
layout:
  containerMaxWidth: 1024px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    height: 36px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.title-lg}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  button-danger:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.lg}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    height: 40px
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#111111'
  badge:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
The primary button is a solid #138808 fill with white Poppins 14px / 500 text, 36px high, 6px radius, and 8px padding. Hover transitions to #17980b over the default 150ms ease-in-out. The secondary button inverts this for lower-emphasis actions and is 48px high with 16px horizontal padding. Focus rings use a 2px ring at 2px offset in #020817.

### Containers & Surfaces
Cards sit on #ffffff at 8px radius with 24px internal padding and the Level 1 shadow. Hover elevates them to #f9fafb. The search panel is a white card with the Level 2 shadow, overlapping the hero by about 60px.

### Inputs & Interaction
Input fields are 40px tall, 6px radius, 1px solid #e5e7eb border, and 8px padding. Focus replaces the border with #138808 and adds a 2px rgba(19,136,8,0.25) ring. Placeho

## Do's and Don'ts

**Do**
- Reserve #138808 for primary CTAs and active states only, so the action hierarchy stays unambiguous.
- Pair every Arabic headline with the French equivalent in body copy to serve both audiences.
- Keep the 1024px container and 32px gutters consistent across hero, search, and listing sections.
- Use Poppins 700 for headings and Poppins 400 for body, avoiding intermediate weights outside the 500 label tier.

**Don't**
- Don't use the red tertiary (#dc2626) for primary navigation or main CTAs; it signals alerts and new features.
- Don't add gradients or glassmorphism; the brand relies on flat white surfaces and photographic imagery.
- Don't set Arabic body text below 16px, since diacritics become illegible at smaller sizes.
- Don't let the glow shadow (Level 3) appear on more than one element per viewport.

Edit, then copy or download.