Mercato Design System

الأساسيات - Foundations

الألوان - Colors

color.dodger-blue.50brand.primary-on#EEF8FF
color.dodger-blue.100no semantic alias#D9EFFF
color.dodger-blue.200no semantic alias#BCE3FF
color.dodger-blue.300no semantic alias#8ED3FF
color.dodger-blue.400no semantic alias#59B8FF
color.dodger-blue.500brand.primary-hover#3399FF
color.dodger-blue.600brand.primary#1B79F5
color.dodger-blue.700no semantic alias#1463E1
color.dodger-blue.800no semantic alias#174FB6
color.dodger-blue.900no semantic alias#19458F
color.dodger-blue.950no semantic alias#142B57
color.black-oud.50brand.canvas#F7F8F8
color.black-oud.100brand.hairline#EDEDF1
color.black-oud.200no semantic alias#D7D9E0
color.black-oud.300brand.text-tertiary#B4B7C5
color.black-oud.400brand.status-neutral#8C92A4
color.black-oud.500brand.text-secondary#6D748A
color.black-oud.600no semantic alias#585E71
color.black-oud.700no semantic alias#484C5C
color.black-oud.800no semantic alias#3E414E
color.black-oud.900no semantic alias#30323B
color.black-oud.950brand.text-default#24252D
color.system-black.50brand.surface#F6F6F9
color.apple.50no semantic alias#EFFEF0
color.apple.100no semantic alias#D9FFDC
color.apple.200no semantic alias#B5FDBB
color.apple.300no semantic alias#7CF987
color.apple.400no semantic alias#3CEC4C
color.apple.500no semantic alias#12D525
color.apple.600brand.success#08AA18
color.apple.700no semantic alias#0B8A18
color.apple.800no semantic alias#0E6D18
color.apple.900no semantic alias#0E5918
color.apple.950no semantic alias#013208
color.blaze-orange.50no semantic alias#FFF8EC
color.blaze-orange.100no semantic alias#FFEFD3
color.blaze-orange.200no semantic alias#FFDCA5
color.blaze-orange.300no semantic alias#FFC26D
color.blaze-orange.400no semantic alias#FF9C32
color.blaze-orange.500brand.warning-low-stock#FF7F0A
color.blaze-orange.600no semantic alias#F96300
color.blaze-orange.700no semantic alias#CC4802
color.blaze-orange.800no semantic alias#A1380B
color.blaze-orange.900no semantic alias#82310C
color.blaze-orange.950no semantic alias#461604
color.red-ribbon.50no semantic alias#FFF0F1
color.red-ribbon.100no semantic alias#FFE2E4
color.red-ribbon.200no semantic alias#FFCACF
color.red-ribbon.300no semantic alias#FF9FA8
color.red-ribbon.400no semantic alias#FF697A
color.red-ribbon.500brand.danger-out#FF3450
color.red-ribbon.600brand.critical-expired#ED113A
color.red-ribbon.700no semantic alias#C90731
color.red-ribbon.800no semantic alias#A80930
color.red-ribbon.900no semantic alias#8F0C30
color.red-ribbon.950no semantic alias#500114
color.amber.goldbrand.rating#E5A14E
color.purple.50no semantic alias#f3f0ff
color.purple.100no semantic alias#eae5ff
color.purple.200no semantic alias#d8ceff
color.purple.300no semantic alias#bca6ff
color.purple.400no semantic alias#9d74ff
color.purple.500no semantic alias#803cff
color.purple.600no semantic alias#7415ff
color.purple.700no semantic alias#6906fe
color.purple.800no semantic alias#5602d5
color.purple.900no semantic alias#4904ae
color.purple.950no semantic alias#2a0077

الطباعة - Type

font.family.arabic (var(--font-arabic))

أبجد هوز - النص التجريبي

font.family.insight (var(--font-insight))

The quick brown fox jumps

المسافات - Spacing

space.1004px
space.2008px
space.30012px
space.40016px
space.50020px
space.60024px
space.80032px
space.120048px

الحركة - Motion

motion.duration.0 0msmotion.duration.50 50msmotion.duration.100 100msmotion.duration.150 150msmotion.duration.200 200msmotion.duration.250 250msmotion.duration.300 300msmotion.duration.350 350msmotion.duration.400 400msmotion.duration.450 450msmotion.duration.500 500msmotion.duration.5000 5000ms
motion.easing.linear cubic-bezier(0, 0, 1, 1)motion.easing.ease cubic-bezier(0.25, 0.1, 0.25, 1)motion.easing.ease-in cubic-bezier(0.42, 0, 1, 1)motion.easing.ease-out cubic-bezier(0.19, 0.91, 0.38, 1)motion.easing.ease-in-out cubic-bezier(0.42, 0, 0.58, 1)

المكونات - Components

Banner

experimentalfeedbackrtl: logical
info-accentsuccess-accentwarning-accentcritical-accentsurfacetext

الحالات - States

  • default
  • focus

النصوص - Copy (Arabic-first)

  • label: one clear sentence naming the issue plus a specific next step, never a description alone. See references/content-system.md (Error Messages) and references/component-vocabulary.md (Banner rules).
  • action: verb-first CTA when an action is offered, e.g. راجع، أرسل. See references/content-system.md (Button & CTA Labels).

افعل - Do

  • Show one banner at a time, collapse multiple issues into one banner with a list.
  • Always include a specific action or next step, not just a description.

لا تفعل - Do not

  • Do not stack more than one banner on the same screen.
  • Do not make a banner dismissible while the underlying issue is unresolved.

Button

experimentalactionrtl: logical
filltextpressedsurface

الحالات - States

  • default
  • hover
  • active
  • disabled
  • loading

النصوص - Copy (Arabic-first)

  • label: verb-first; never نعم/لا; see content-system.md (Button labels)
  • loading: keep the same verb, do not switch to a gerund; spinner replaces label, see content-system.md

افعل - Do

  • Use one primary button per screen.
  • Put the destructive action last (leftmost in RTL, furthest from the main action).

لا تفعل - Do not

  • Do not use a plain button as a link substitute.
  • Do not put more than one primary variant on the same screen.

FilterChip

experimentalactionrtl: logical
active-fillactive-textinactive-borderinactive-textsurface

الحالات - States

  • default
  • active
  • focus

النصوص - Copy (Arabic-first)

  • label: short noun, no punctuation, most commonly used first, الكل always first. See references/content-system.md (Lists, Chip filter lists).

افعل - Do

  • Place الكل first in every chip set.
  • Show a count badge when helpful, e.g. جديد (14).

لا تفعل - Do not

  • Do not use tabs where chips are appropriate, chips filter without hiding content.
  • Do not allow more than one chip selected at a time in a single-select set.

Modal

experimentaloverlayrtl: logical
surfacetextdestructive-accent

الحالات - States

  • default
  • focus

النصوص - Copy (Arabic-first)

  • title: name the action being confirmed, never a bare question. See references/content-system.md (Button & CTA Labels, avoid نعم/لا).
  • description: state the consequence plainly, including whether it is reversible, e.g. لا يمكن التراجع عن هذا الإجراء. See references/component-vocabulary.md (Modal).
  • confirm: specific verb plus noun naming the destructive action, never نعم, e.g. إلغاء الطلبية الفرعية. See references/content-system.md (Button & CTA Labels).
  • cancel: specific alternative, never لا, e.g. الاحتفاظ بها. See references/content-system.md (Button & CTA Labels).

افعل - Do

  • Reserve the modal for destructive confirmations, e.g. cancelling a sub-order.
  • Always show both a confirm action and a cancel action.

لا تفعل - Do not

  • Do not dismiss a destructive modal on backdrop click.
  • Do not use a modal for a multi-step flow, or for more than one action.

OrderCard

experimentaldata-displayrtl: logical
surfacehairlinetexttext-secondary

الحالات - States

  • default
  • hover
  • active
  • loading
  • empty
  • error

النصوص - Copy (Arabic-first)

  • empty: three-part empty state: what is missing, why it matters for first-time users only, what to do next, e.g. لا توجد طلبيات بعد / ابدأ بإنشاء طلبيتك الأولى. See references/content-system.md (Empty States).
  • error: state exactly what failed to load and the retry action, never حدث خطأ alone. See references/content-system.md (Error Messages).
  • label: pharmacy name, order reference, and date are data fields, not authored copy; the status field follows the StatusBadge contract.

افعل - Do

  • Show order reference, pharmacy name, status badge, date, and value in the compact list view.
  • Load list data with one API call per list page, never let a card trigger its own request.

لا تفعل - Do not

  • Do not omit the status badge from the compact list view.
  • Do not clip the pharmacy name with an ellipsis, wrap it instead.

OverflowMenu

experimentalactionrtl: logical
surfacetextdestructive-texthairline

الحالات - States

  • default
  • active
  • focus

النصوص - Copy (Arabic-first)

  • label: verb only when context is clear, verb plus noun when ambiguous, e.g. تعديل، تغيير الحالة. See references/content-system.md (Labels & Menu Actions).

افعل - Do

  • Order items most common and safe first.
  • Place a divider before the destructive action and keep it last.

لا تفعل - Do not

  • Do not put a destructive action anywhere but last.
  • Do not use a bare إلغاء label when more than one cancel-like action exists in the same menu.

SearchField

experimentalformrtl: logical
surfacetextplaceholdericonfocus-ring

الحالات - States

  • default
  • focus
  • loading
  • empty

النصوص - Copy (Arabic-first)

  • placeholder: name what is searchable, not a generic verb alone, e.g. ابحث عن صيدلية، طلبية، مادة... See references/component-vocabulary.md (Search Field).
  • empty: reusable no-results block, never blank space, e.g. لا توجد نتائج لـ "[query]" then جرّب كلمة مختلفة. See references/content-system.md (Empty States).

افعل - Do

  • Debounce results at roughly 300ms as the user types.
  • Show the reusable no-results block when a query returns nothing.

لا تفعل - Do not

  • Do not place the clear action at the start edge, it belongs at the end edge.
  • Do not leave blank space when there are no results.

StatusBadge

experimentalfeedbackrtl: logical
newprocessingcompletedcancelledon-holdavailableunavailableunlinkedtext-on-fillsurface

الحالات - States

  • default

النصوص - Copy (Arabic-first)

  • label: short noun only, the exact status word from references/component-vocabulary.md (Badge): جديد، قيد المعالجة، مكتمل، ملغي، معلّق، متوفر، غير متوفر، غير مرتبط. See references/content-system.md (Capitalization in Arabic UI, Status badges).

افعل - Do

  • Choose the status set (order vs product/warehouse) that matches the resource, never mix the two enums on one card.
  • Keep the badge height and type scale fixed at 20px, Rubik 12px medium, across every screen.

لا تفعل - Do not

  • Do not render the badge with color only and no label.
  • Do not invent new status words, use the exact term from references/component-vocabulary.md.

Toast

experimentalfeedbackrtl: mirror
success-accenterror-accentsurfacetext

الحالات - States

  • default
  • error

النصوص - Copy (Arabic-first)

  • default: one short sentence stating what happened, e.g. تم إرسال الطلبية. See references/content-system.md (Toasts).
  • error: one short sentence stating what went wrong plus the recovery action, e.g. فشل الإرسال. تحقق من اتصالك. See references/content-system.md (Toasts, Error Messages).

افعل - Do

  • Auto-dismiss success toasts after 4 seconds.
  • Keep error toasts persistent, with a clear action link when recovery is possible.

لا تفعل - Do not

  • Do not use a toast for form validation errors, those go inline on the field.
  • Do not show more than one toast at a time.