Système d’identité visuelle DPOS

01

Fondations

Les décisions qui permettent que chaque écran, document et message soit reconnaissable DPOS.

Clarté

Rendez la prochaine action et ses conséquences indubitables.

Confiance

Utilisez des états précis, des totaux lisibles et des commentaires calmes.

Continuité

Une grammaire visuelle de l'interface à la facture.

Efficacité

Réduire la décoration ; préserver la densité utile.

Un fonctionnement commercial clair, du point de vente à la décision.

02

Système de logos

Utilisez l’illustration source approuvée exactement telle que fournie. Ne recréez jamais le nom à côté.

Verrouillage primaire01

Icône principale02

Encre monochrome03

Blanc inversé04

Icône de l'application05

Échelle de favicon06

48

32

24

16

x

Espace libre

Gardez une unité d’ouverture d’icône de chaque côté.

140 px / 25 mm

Taille minimale

Utilisez l'icône seule en dessous de la taille minimale de verrouillage complet.

Alignement

Alignez-vous sur un véritable bord de grille, jamais sur le centre visuel d'un conteneur aléatoire.

CONTRAT MULTI-PLATEFORME

Le logo est contenu, centré et jamais rogné.

12.5% SAFE AREA

Correct : contenir

Faux : illustrations de cultures de couverture

Icône adaptative Android

Icône de l'application iOS

Écran de démarrage

En-tête de l'application

Reçu

Avatar social

.dpos-safe-logo > img {
  position: absolute; inset: 12.5%;
  width: 75%; height: 75%;
  object-fit: contain;
  object-position: center;
}

Faire

Utilisez les ressources SVG officielles.
Préservez les proportions et libérez l’espace.
Placer sur des surfaces calmes et très contrastées.

Ne le fais pas

Ne pas recolorer, étirer, recadrer ou faire pivoter.
N'ajoutez pas d'ombre, de contour ou de lueur.
Ne répétez pas DPOS sous forme de texte synthétique.

Oeuvre officielleCorrigé, révisé et prêt pour la production.

Mot-symbole SVG Icône SVG

03

Système de couleurs

Le logo bleu sarcelle est l'ancre de la marque. Les neutres transportent des informations ; les couleurs sémantiques n’ont que du sens.

Succès#168A4A

Réservez pour le statut réel et les commentaires.

Avertissement#D97706

Réservez pour le statut réel et les commentaires.

Erreur / destructeur#D64545

Réservez pour le statut réel et les commentaires.

Informations#087EA4

Réservez pour le statut réel et les commentaires.

ACCENT COMMERCIAL GOUVERNÉ

Orange n'attire l'attention que lorsqu'une décision commerciale est importante.

Sarcelle reste le primaire opérationnel. La conversion orange est réservée aux actions d'essai, d'achat, de mise à niveau, d'abonnement et de démonstration.

5.18:1Texte blanc · WCAG AA#C2410C

Primaire opérationnelle

Enregistrez, créez, confirmez, naviguez et effectuez votre travail quotidien.

Transformation commerciale

À utiliser une fois dans une zone de décision pour une action de revenus la plus claire.

Utiliser pour

Achetez maintenant, mettez à niveau un forfait ou abonnez-vous.
Démarrez un essai ou réservez une démonstration de produit.
Au maximum une action orange dans chaque zone de décision.

Ne jamais utiliser pour

Avertissements, actions destructrices ou erreurs de validation.
Enregistrez, créez et effectuez des actions de navigation de routine.
Plusieurs boutons concurrents dans une seule fenêtre.

Vérificateur de contraste

Le corps du texte doit atteindre 4,5:1 ; Les grandes interfaces utilisateur avec texte et non-texte doivent atteindre 3:1.

Premier plan Contexte

DPOS Clair et lisible

04

Typographie

Chaque langue sélectionnée est affichée dans sa police par défaut approuvée tandis que les numéros opérationnels restent stables.

Langue sélectionnée · valeur par défaut approuvée

Manrope

À Â Æ Ç É È Ê Ë Î Ï Ô Œ Ù Û Ü

Des opérations plus intelligentes commencent par une décision claire.

0123456789 · AED 12,450.00

AIRE DE JEUX DE TYPE VIVANT

Testez les mots exacts avant approbation

L'aperçu suit la langue, la direction et la police par défaut approuvées.

Exemple de texte Taille 38px

MANROPE · FR

Des opérations plus intelligentes commencent par une décision claire.

Poids : 400 corps · 500 commandes · 600 rubriques · 700 affichage

Display

عنوان بارز

48 / 56700

H1

عنوان الصفحة

40 / 48700

H2

عنوان القسم

30 / 40700

H3

عنوان فرعي

22 / 30600

Body

نص أساسي واضح للقراءة المستمرة.

16 / 27400

Small

توضيح وبيانات مساندة

14 / 22400

Caption

تسمية قصيرة

12 / 18500

Montants

AED 12,450.00

Gardez la devise et la valeur isolées LTR.

Dates

25 Aug 2026 · 2026/08/25

Utilisez un format par contexte.

Identifiants

INV-2026-00124

Ne mettez jamais en miroir les codes ou les séries.

05

Disposition et géométrie

Une géométrie prévisible pour des interfaces opérationnelles denses et une communication apaisée.

Espacement de 8 px

481216243240486480

Rayon

0px4px8px12px16px24px

Élévation

0123

123456789101112

Grille de bureau à 12 colonnes

Gouttières de 24 px · Encart de page de 24 px · Largeur maximale du contenu 1440 px.

06

Bibliothèque d’icônes open source

Lucide fournit un système cohérent, vaste et évolutif pour les flux de travail du commerce, de l'inventaire, de la finance et de la plateforme.

BIBLIOTHÈQUELucideISC Open Source · 1,791 icons

PAR DÉFAUT24 px · 2 pxBouchons ronds et jointures

TOUCHER LA CIBLE44 × 44 pxLe glyphe peut rester de 20 à 24 px

Ouvrir la documentation Lucide ↗

États

Par défautSurvolezActifDésactivéDestructeur

Faire

Associez des icônes inconnues avec du texte.
Gardez une signification par icône.
Utilisez la couleur uniquement pour renforcer l’état.

Ne le fais pas

Ne mélangez pas les familles d'icônes.
N'étirez pas et ne remplissez pas les icônes de contour.
Ne reflète pas les icônes qui ont une signification indépendante de la direction.

07

Composants et états

Familles d'interfaces réutilisables avec états complets d'interaction, de validation, de chargement et d'autorisation.

6.1

Boutons

Hauteur minimale 44 px · 16 px en médaillon horizontal · une action principale par région.

VariantePar défautSurvolezPresséConcentrez-vousChargementDésactivé

Primaire

Secondaire

Calme

Destructeur

Icône uniquement

6.2

Champs et validation

Une étiquette est toujours visible. Le texte d'erreur explique la réparation, pas seulement la panne.

Par défaut Rempli Concentrez-vous SuccèsDisponible AvertissementUtilisez au moins 12 caractères. ErreurEntrez une valeur supérieure à zéro. Lecture seule Désactivé

Sélectionnez DeviseAED Date Zone de texte

6.3

Sélection et navigation

L’état sélectionné est communiqué par la forme, l’étiquette et la couleur – jamais uniquement par la couleur.

Option sélectionnée Option non cochée Option désactivée

Premier choix Deuxième choix

6.4

Statut et commentaires

Le statut est explicite, persistant lorsqu'il est conséquent et associé à une action suivante utile.

PayéEn attenteTraitementEn retardBrouillonRemboursé

Progrès linéaire64%

123

6.5

Calques et interface utilisateur transitoire

Les menus, info-bulles, tiroirs et boîtes de dialogue préservent le contexte et le contrôle du clavier.

Confirmer la suppression

Cette action ne peut pas être annulée. Supprimer la facture INV-00124 ?

Emballage réutilisable

Six familles gouvernées couvrent les actions, les formulaires, les commentaires, les données, le shell et les superpositions sur le Web, Flutter, le courrier électronique et l'impression.

Dix-sept références d'interface approuvées par le gestionnaire · aucune dépendance d'exécution.

Télécharger le composant CSS Télécharger le manifeste du composant

08

Données et opérations

Les tableaux constituent la principale surface opérationnelle : lisibles, triables, sécurisés par le clavier et réactifs.

Numéro de facture ↓	Client	Date	Statut	Total	Payé	Solde
INV-2026-00124	Marché d'émeraude	25/08/2026	Payé	12,450.00 AED	12,450.00 AED	0.00 AED
INV-2026-00123	Technologie du Golfe	24/08/2026	Partielle	8,750.00 AED	5,000.00 AED	3,750.00 AED
INV-2026-00122	Commerce du Nord	23/08/2026	En retard	15,300.00 AED	0.00 AED	15,300.00 AED
INV-2026-00121	Groupe Rashed	22/08/2026	Brouillon	5,250.00 AED	0.00 AED	5,250.00 AED
INV-2026-00120	Usine syndicale	21/08/2026	Remboursé	9,800.00 AED	9,800.00 AED	0.00 AED
INV-2026-00119	Services Rayan	20/08/2026	Payé	3,200.00 AED	3,200.00 AED	0.00 AED

≥ 1280 pxBureau

Tableau complet, outils et actions groupées.

768–1279 pxTablette

Colonnes prioritaires ; détails sur demande.

< 768 pxLigne structurée mobile

INV-2026-00124Payé

Client: Marché d'émeraude
Total: 12,450.00 AED

Lignes de valeurs-clés, jamais de carte non structurée.

Vide

Pas encore de factures.

Aucun résultat

Aucune correspondance pour les filtres actuels.

Chargement

Préserver la géométrie de la table.

Erreur

Les données n'ont pas pu être chargées.

Autorisation refusée

Votre rôle ne peut pas afficher ces données.

Hors ligne/périmé

Affichage du dernier instantané sécurisé.

Revenu net

AED 284,650

↑ +12.4%par rapport à la période précédente

Sur la cible

Commandes

1,248

↑ +8.1%par rapport à la période précédente

96% satisfait

Panier moyen

AED 228.08

↓ -1.6%par rapport à la période précédente

Objectif 240 AED

Marge brute

38.6%

↑ +2.3%points de pourcentage

Au-dessus de la cible

Aperçu de la direction

Les revenus sont supérieurs de 8,7 % aux prévisions, grâce à la croissance des points de vente pendant la pointe du soir.

Meilleure période: jeu., de 18h à 21h
Opportunité: Panier moyen
Action: Revoir les offres groupées

TENDANCE + COMPARAISON

Performance des revenus

Période actuellePériode précédenteCible

300K225K150K75K0

Semaine 1Semaine 2Semaine 3Semaine 4Semaine 5

COMPOSITION

Revenus par canal

AED 284KTotal

Point de vente48%
Boutique en ligne27%
Factures17%
Autre8%

CLASSEMENT

Principales catégories de produits

Chiffre d'affaires/objectif

Électronique92K

Nourriture81K

Accueil68K

Mode54K

MODÈLE HORAIRE

Intensité des ventes

Faible → élevé

08:0012:0016:0020:00

MÉLANGE DE STATUTS

Exécution des commandes

Terminé72%

Terminé 72%
Traitement 19%
Retardé 9%

DEMANDE HORAIRE

Ventes à la journée

Pointe à 19h

249

3210

4711

5812

451

692

844

1007

769

5111

MÉLANGE DE PAIEMENT

Modes de paiement

Taux de réussite 98,4%

Cartes54%

Espèces28%

Portefeuilles numériques13%

Achetez maintenant, payez plus tard5%

PERFORMANCES DE L'EMPLACEMENT

Comparaison des succursales

Trié par chiffre d'affaires

Branche	Revenus	Commandes	Conversion	Tendance
Centre commercial de Dubaï	AED 82.4K	364	42.8%	+14.2%
Centre d'Abou Dhabi	AED 71.8K	318	39.6%	+9.7%
Ville de Charjah	AED 58.6K	279	37.1%	+5.4%
Boutique en ligne	AED 49.2K	287	31.9%	-1.2%

09

Identité des devises

Les codes ISO 4217 sont des données canoniques ; les symboles approuvés sont la présentation. Chaque valeur financière reste directionnellement isolée.

SYMBOLE OFFICIEL DU DIRHAM DES EAU

Le nouveau symbole est la marque d'affichage par défaut pour le DAE.

Utilisez l’illustration officielle sans la redessiner. Stockez et échangez la valeur avec le code numérique AED et ISO 784.

AED7842 unités mineures

Source officielle du CBUAE ↗

SYMBOLE OFFICIEL DU RIYAL SAOUDIENLa marque approuvée 2025 remplace l'ancienne abréviation dans l'affichage visuel.

Conservez le SAR et le code numérique 682 dans les données, les exportations et les contextes ambigus.

Directives d'utilisation de SAMA ↗

Devise	ISO 4217	Numérique	Symbole approuvé	Unités mineures	Exemple d'affichage	Exemple comptable
United Arab Emirates Dirhammiddle-east	AED	784		2	1,234.56	AED 1,234.56
Saudi Riyalmiddle-east	SAR	682		2	1,234.56	SAR 1,234.56
Qatari Riyalmiddle-east	QAR	634	ر.ق	2	ر.ق1,234.56	QAR 1,234.56
Kuwaiti Dinarmiddle-east	KWD	414	د.ك	3	د.ك1,234.560	KWD 1,234.560
Bahraini Dinarmiddle-east	BHD	048	د.ب	3	د.ب1,234.560	BHD 1,234.560
Omani Rialmiddle-east	OMR	512	ر.ع	3	ر.ع1,234.560	OMR 1,234.560
Jordanian Dinarmiddle-east	JOD	400	د.أ	3	د.أ1,234.560	JOD 1,234.560
Egyptian Poundmiddle-east	EGP	818	ج.م	2	ج.م1,234.56	EGP 1,234.56
United States Dollarglobal	USD	840	$	2	$1,234.56	USD 1,234.56
Euroglobal	EUR	978	€	2	€1,234.56	EUR 1,234.56
Pound Sterlingglobal	GBP	826	£	2	£1,234.56	GBP 1,234.56
Swiss Francglobal	CHF	756	CHF	2	CHF1,234.56	CHF 1,234.56
Canadian Dollarglobal	CAD	124	CA$	2	CA$1,234.56	CAD 1,234.56
Australian Dollarglobal	AUD	036	A$	2	A$1,234.56	AUD 1,234.56
Indian Rupeeasia	INR	356	₹	2	₹1,234.56	INR 1,234.56
Pakistani Rupeeasia	PKR	586	₨	2	₨1,234.56	PKR 1,234.56
Chinese Yuanasia	CNY	156	¥	2	¥1,234.56	CNY 1,234.56
Japanese Yenasia	JPY	392	¥	0	¥1,235	JPY 1,235
Philippine Pesoasia	PHP	608	₱	2	₱1,234.56	PHP 1,234.56
New Zealand Dollarglobal	NZD	554	NZ$	2	NZ$1,234.56	NZD 1,234.56
Singapore Dollarasia	SGD	702	S$	2	S$1,234.56	SGD 1,234.56
Hong Kong Dollarasia	HKD	344	HK$	2	HK$1,234.56	HKD 1,234.56
South Korean Wonasia	KRW	410	₩	0	₩1,235	KRW 1,235
Turkish Liramiddle-east	TRY	949	₺	2	₺1,234.56	TRY 1,234.56
South African Randglobal	ZAR	710	R	2	R1,234.56	ZAR 1,234.56
Brazilian Realglobal	BRL	986	R$	2	R$1,234.56	BRL 1,234.56
Mexican Pesoglobal	MXN	484	MX$	2	MX$1,234.56	MXN 1,234.56
Swedish Kronaglobal	SEK	752	kr	2	kr1,234.56	SEK 1,234.56
Norwegian Kroneglobal	NOK	578	kr	2	kr1,234.56	NOK 1,234.56
Danish Kroneglobal	DKK	208	kr	2	kr1,234.56	DKK 1,234.56
Polish Zlotyglobal	PLN	985	zł	2	zł1,234.56	PLN 1,234.56
Thai Bahtasia	THB	764	฿	2	฿1,234.56	THB 1,234.56
Indonesian Rupiahasia	IDR	360	Rp	2	Rp1,234.56	IDR 1,234.56
Malaysian Ringgitasia	MYR	458	RM	2	RM1,234.56	MYR 1,234.56

34 devises prises en charge

1

ISO 4217

Conserver les codes alphabétiques et numériques ; ne conservez jamais un glyphe visuel comme identité.

2

Isolement directionnel

Enveloppez les montants dans bdi ou dans un LTR explicite exécuté dans le contenu RTL.

3

Symboles ambigus

Utilisez ISO à côté de $, ¥ et kr chaque fois que le contexte peut contenir plusieurs devises.

4

Sources faisant autorité

ISO 4217 / SIX ↗
SAMA / SAR ↗
Unicode currency symbols ↗

10

L'identité dans des applications réelles

Le même logo, la même hiérarchie et les mêmes états doivent être natifs sur le Web, sur mobile, sur ordinateur et sur papier.

WEB · DESKTOPEspace de travail de la plateforme

Bonjour Ahmed

Ventes nettes24,860.75 AEDCommandes148Magasins actifs12

Mot-symbole complet dans la coque permanente ; icône compacte uniquement lorsque la navigation se réduit.

FLUTTER · MOBILEPoint de vente mobile

Nouvelle vente•••

Rechercher des produits…

☕Café45.00🥤Gobelet72.50👜Sac6.00＋Plus

En-tête d'icône en premier, cibles de 44 px et une action principale indubitable.

PRINT · 80 MMReçu thermique

Marché d'émeraude

Grains de café ×2: 90.00
Gobelet de voyage: 72.50
Sac réutilisable: 6.00

Total176.93 AEDQR

Marque à contraste élevé, totaux sans danger pour le noir et aucune signification dépendant de la couleur.

APP ICONLanceur et favicon

1024

180

48

32

Utilisez l'icône seule, centrée optiquement avec une zone de sécurité silencieuse sur chaque plate-forme.

Contrat multiplateforme Même couleur primaireRôles du même typeMêmes états sémantiquesModèles de navigation natifs

11

Documents et factures

Un langage documentaire unifié pour les factures fiscales, les reçus, les devis, les notes de crédit et l’impression opérationnelle.

15 mmMarge sûre12Colonnes de documents40 pxEnv. ligne du tableau4.5:1Contraste d'impressionLTRMontants et identifiants

Facture fiscale

TAX INVOICE

VendeurTechnologie d'innovation numérique

Riyad, Arabie Saoudite
TRN 310987654300003
accounts@ditcpos.com

ClientMarché d'émeraude LLC

Dubaï, Émirats Arabes Unis
TRN 100234567800003
purchasing@emerald.example

Numéro de facture: INV-2026-00124
Date d'émission: 25/08/2026
Date d'échéance: 08/09/2026
Devise: AED

#	Descriptif	Quantité	Prix unitaire	TVA	Total
1	Abonnement point de vente	1	8,000.00	400.00	8,400.00
2	Service d'intégration des stocks	1	3,500.00	175.00	3,675.00
3	Configuration du reçu thermique	1	500.00	25.00	525.00

Remarques et conditions

Le paiement est dû dans les 14 jours. Indiquez le numéro de facture avec votre virement.

QR

Sous-total: 12,000.00 AED
TVA 5%: 600.00 AED
Remise: 150.00 AED
Total: 12,450.00 AED
Payé: 12,450.00 AED
Solde: 0.00 AED

Devis

Note de crédit

Bon de commande

Bon de livraison

Étiquette du produit

Papier à en-tête

Carte de visite

12

Communication

Les e-mails transactionnels, les notifications et la voix de la marque suivent la même hiérarchie et la même discipline sémantique.

Votre facture a été émise avec succès

Bonjour, votre facture fiscale est prête. Vérifiez les détails et téléchargez la copie approuvée en utilisant le bouton ci-dessous.

Afficher la facture

Le paiement est dû le 8 septembre 2026.

Facture: INV-2026-00124
Total: 12,450.00 AED
Statut: Payé

Succès

Paiement reçu

Afficher les détails

Rappel

La date d'échéance approche

Afficher les détails

En retard

Le paiement de la facture est en retard

Afficher les détails

Effacer

« Entrez un montant supérieur à zéro. »

Pas : « Entrée invalide ».

Calme

"Nous n'avons pas encore pu enregistrer cela. Vos entrées sont toujours là."

Expliquez l’impact avant de blâmer.

Actionnable

"Reconnectez-vous, puis réessayez."

Fournissez toujours une prochaine étape utile.

13

Accessibilité & RTL

Le comportement inclusif fait partie du contrat d’identité et non d’un contrôle visuel final.

Contraste

AA pour le corps du texte ; 3:1 pour les textes volumineux, les icônes et les commandes.

Concentrez-vous

Un anneau visible de 2 px avec un décalage de 2 px sur chaque contrôle interactif.

Toucher la cible

44 × 44 px minimum même lorsque l'icône visible est plus petite.

Clavier

Ordre logique, pas de pièges, Escape ferme les couches transitoires.

RTL et LTR

Disposition miroir, pas d'identifiants, de devises, de graphiques ou de contrôles multimédias.

Mouvement

180 à 240 ms pour le retour et aucune information essentielle dans l'animation.

RTL

Détails de la facture

Numéro de facture: INV-00124
Total: AED 12,450.00

LTR

Invoice details

Invoice number: INV-00124
Total: AED 12,450.00

14

Laboratoire de mouvement

De petites interactions ciblées inspirées des principes de timing de Lottie, mises en œuvre de manière accessible et prêtes pour les ressources dotLottie où l'illustration est justifiée.

EXÉCUTION OPEN SOURCEMotion 13.1.1 · MIT

Animations Web prêtes pour la production avec protections contre les mouvements réduits et les fenêtres d'affichage.

Documentation de mouvement ↗

1

Vente terminée

Durée: 120–180 ms
Assouplissement: ease-out
Répéter: Une fois

2

Traitement des paiements

Durée: 600–900 ms
Assouplissement: linear
Répéter: Pendant qu'il est actif

3

Synchronisation des stocks

Durée: 240–320 ms
Assouplissement: ease-in-out
Répéter: Une fois

4

Impression de reçus

Durée: 180–240 ms
Assouplissement: ease-out
Répéter: Une fois

5

Numérisation de codes-barres

Durée: 180 ms
Assouplissement: linear
Répéter: Une fois

6

État vide utile

Durée: 600 ms
Assouplissement: ease-in-out
Répéter: Une fois

7

Arrivée des notifications

Durée: 240 ms
Assouplissement: ease-out
Répéter: Une fois

8

Transition de sections

Durée: 240–320 ms
Assouplissement: ease-in-out
Répéter: Une fois

9

Ajouté au panier

Durée: 220–300 ms
Assouplissement: spring
Répéter: Une fois

10

Remboursement confirmé

Durée: 260–360 ms
Assouplissement: ease-out
Répéter: Une fois

11

Approbation accordée

Durée: 180–240 ms
Assouplissement: ease-out
Répéter: Une fois

12

Action rejetée

Durée: 180–240 ms
Assouplissement: ease-out
Répéter: Une fois

13

Téléchargement de fichiers

Durée: 500–800 ms
Assouplissement: ease-in-out
Répéter: Pendant qu'il est actif

14

Téléchargement du rapport

Durée: 300–440 ms
Assouplissement: ease-out
Répéter: Une fois

15

Connexion rétablie

Durée: 300–500 ms
Assouplissement: ease-out
Répéter: Une fois

16

Avertissement hors ligne

Durée: 240–320 ms
Assouplissement: ease-in-out
Répéter: Une fois

17

Ouverture du tiroir

Durée: 240–320 ms
Assouplissement: ease-out
Répéter: Une fois

18

Message de pain grillé

Durée: 200–260 ms
Assouplissement: ease-out
Répéter: Une fois

20

Chargement du squelette

Durée: 900–1200 ms
Assouplissement: linear
Répéter: Pendant qu'il est actif

21

Mise à jour du compteur

Durée: 180–240 ms
Assouplissement: ease-out
Répéter: Une fois

22

Révélation du graphique

Durée: 420–600 ms
Assouplissement: ease-out
Répéter: Une fois

23

Ligne réorganisée

Durée: 220–300 ms
Assouplissement: spring
Répéter: Une fois

24

Action ciblée

Durée: 160–220 ms
Assouplissement: ease-out
Répéter: Une fois

Le sens avant le plaisir

Le mouvement confirme l'état, l'orientation ou la progression. Cela ne retarde jamais la tâche.

Motion + dotLottie

Utilisez Motion pour les commentaires sur l'interface et ouvrez les ressources .lottie pour une illustration complexe ; conserver l’état critique dans un HTML accessible.

Motion / MIT ↗
dotLottie Web / MIT ↗

prefers-reduced-motion

Les utilisateurs à mouvement réduit reçoivent immédiatement l’état final, sans perte d’informations.

Règle d'exécution

Suspendez le mouvement en boucle hors écran et lorsque la page est masquée.

15

Actifs, jetons et gouvernance

Un point de distribution pour les actifs examinés, les jetons d’implémentation et les contrôles de version.

SVG

Logos officiels

Verrouillage complet et icône de la source vectorielle approuvée.

Wordmark Icon

CSS

Jetons de conception

Couleurs, caractères, espacement, géométrie, élévation, mouvement et mise au point.

JSON

Manifeste de jeton

Contrat lisible par machine pour le Web, Flutter, le courrier électronique et l’impression.

UI

Paquet de composants

Actions, champs, statuts, données, familles de shell et de superposition réutilisables.

CSS Manifest

Numérique

sRGB
SVG / WebP / PNG
Logo minimum 140 px
Fond transparent si nécessaire

Imprimer

CMYK / PDF/X-4
Logo minimum 25 mm
Fond perdu de 3 mm le cas échéant
Intégrer ou décrire des polices sous licence

Documents

A4 / 80 mm
Marge de sécurité de 15 mm
Totaux de sécurité noire et QR
Ne pixellisez jamais un petit texte

1Source

Utilisez des illustrations et des jetons approuvés.

2Construire

Composez à partir de familles réutilisables.

3Examen

Vérifiez le contenu, le contraste, le RTL et les états.

4Libération

Enregistrez la décision et la version.

AVANT LA PUBLICATION

Contrôle en amont de la marque

Une version n'est pas conforme à la marque tant que chaque vérification applicable n'est pas réussie.

Logo officiel et primaire #125076
États complets par défaut, focus, erreur, chargement et désactivé
Les tableaux, totaux et identifiants restent lisibles
RTL arabe et LTR anglais vérifiés
Contraste AA, cibles 44 px et mouvement réduit
A4, reçu, e-mail et sortie réactive vérifiés

Une décision complète, un élément à la fois.

Une identité claire pour chaque expérience.

Espace libre

Taille minimale

Alignement

Faire

Ne le fais pas

Orange n'attire l'attention que lorsqu'une décision commerciale est importante.

Primaire opérationnelle

Transformation commerciale

Utiliser pour

Ne jamais utiliser pour

Vérificateur de contraste

Manrope

Testez les mots exacts avant approbation

Espacement de 8 px

Rayon

Élévation

États

Faire

Ne le fais pas

Emballage réutilisable

Le nouveau symbole est la marque d'affichage par défaut pour le DAE.

ISO 4217

Isolement directionnel

Symboles ambigus

Sources faisant autorité

Bonjour Ahmed

Votre facture a été émise avec succès

Effacer

Calme

Actionnable

Contraste

Concentrez-vous

Toucher la cible

Clavier

RTL et LTR

Mouvement

Vente terminée

Traitement des paiements

Synchronisation des stocks

Impression de reçus

Numérisation de codes-barres

État vide utile

Arrivée des notifications

Transition de sections

Ajouté au panier

Remboursement confirmé

Approbation accordée

Action rejetée

Téléchargement de fichiers

Téléchargement du rapport

Connexion rétablie

Avertissement hors ligne

Ouverture du tiroir

Message de pain grillé

Entrée modale

Chargement du squelette

Mise à jour du compteur

Révélation du graphique

Ligne réorganisée

Action ciblée

Le sens avant le plaisir

Motion + dotLottie

prefers-reduced-motion

Règle d'exécution

Logos officiels

Jetons de conception

Manifeste de jeton

Paquet de composants

Numérique

Imprimer

Documents

Contrôle en amont de la marque