Internal demo only

MOKAWALA • DESIGN FOUNDATION V1

Quiet Decision OS

Visual QA for the Mokawala design system. All programme names, amounts, conditions and results on this page are illustrative demo content only.

FOUNDATION

Color system

Warm canvas, restrained orange, graphite structure and functional state colors.

Canvas#F7F4EF
Surface#FFFFFF
Surface soft#F0ECE6
Ink#171717
Muted#62605C
Border#DDD8D0
Accent#F25A24
Accent soft#FFF0E9

AR • FR • EN

Multilingual typography

Arabic uses IBM Plex Sans Arabic. French and English use Inter. Direction is explicit per language sample.

العربية • RTL

من الفكرة إلى القرار

المعلومة وحدها لا تكفي. الهدف هو مساعدة المقاول على فهم الخيارات والمقارنة بينها واتخاذ الخطوة التالية بوضوح.

وزن 400وزن 500وزن 600وزن 700

Français • LTR

De l’information à la décision

Mokawala doit aider à comprendre les options, les comparer et identifier la prochaine étape utile.

Poids 400Poids 500Poids 600Poids 700

English • LTR

From information to decision

The interface should help entrepreneurs understand options, compare them and identify a useful next step.

Weight 400Weight 500Weight 600Weight 700

CONTROLS

Actions and inputs

Buttons

Helper text for context or format.

Example validation message.

STATUS

Chips, alerts and tabs

Success Needs review Not eligible Information
Demo positive state

Use status colors to communicate meaning, not decoration.

Demo review state

Conditions must be verified before a real decision.

DECISION OBJECTS

Programme, tool and opportunity

The three objects must not look like copies of the same generic card.

DEMO • PROGRAMME

Financing programme example

Illustrative layout only. No real eligibility rule is stated here.

Review example

DEMO • TOOL

Cash-flow simulator

A product-like surface for calculators and decision tools.

DEMO • OPPORTUNITY

B2B maintenance layer

Example of a layer-derived opportunity, not a market recommendation.

DECISION UI

Facts, eligibility and next step

Quick facts • demo values

Investment
Demo amount
Business stage
Example stage
Location
Example region
Evidence
Demo only

Eligibility rows • demo

Criterion A

Example answer

Criterion B

Needs verification

DEMO RESULT

A decision result should explain why

The real product must show evidence, uncertainty and what the user should verify next.

NEXT STEP

Move from answer to action

A next-step object should be concrete, limited and useful.

DATA

Metrics and comparison

Demo metric 24
Demo metric 72%
CriterionOption AOption B
Use caseDemo valueDemo value
EvidenceIllustrativeIllustrative
Next actionVerifyCompare

TRUST & DISCLOSURE

Source and FAQ patterns

DEMO SOURCE PRESENTATION

Official source title would appear here

Authority • publication/update date • evidence level

View source pattern
What should a useful answer contain?
A concise answer, its conditions, evidence and the next useful step.
Are these programme conditions real?
No. This entire page is an internal visual demo.

SYSTEM STATES

Empty, success, error and loading

Nothing to show yet

An empty state should explain what can happen next.

Demo completed

Success should remain calm and informative.

Demo needs attention

Errors should identify the problem without blaming the user.

Loading skeleton