Couleurs

Rampe ink (niveaux de gris), accents d’état et palette data-visualisation.

Rampe ink

ink-050Page background

ink-100Raised surface, table header

ink-200Sunken surface, skeleton base

ink-300Hairline borders

ink-400Strong borders, disabled text

ink-500Muted text, placeholders

ink-600Secondary text

ink-700Body text

ink-800Headings

ink-850Primary control hover

ink-900Primary control active

ink-950Primary fill, display text

États sémantiques (≤ 5% de l’écran)

success

Paid, approved, on track

warn

Due soon, needs approval

danger

Overdue, error, destructive

info

Informational only

Data-visualisation (exempt du lint monochrome)

data-competence

data-discipline

data-performance

data-efficiency

data-creativity

data-series-1

data-series-2

data-series-3

data-series-4

Typographie

Échelle de taille, familles sans/serif/mono/arabe. text-13 (0.8125rem / 18px) est la taille de travail : libellés de contrôles, lignes de liste, éléments de menu et de barre latérale.

text-12Gestion des talents et des projets

text-13Gestion des talents et des projets— densité par défaut

text-14Gestion des talents et des projets

text-16Gestion des talents et des projets

text-20Gestion des talents et des projets

text-28Gestion des talents et des projets

text-40Gestion des talents et des projets

text-64Gestion des talents et des projets

Fraunces — titres éditoriaux et moments de marque

Space Mono — FCT-2026-0042 · identifiants et numéros de document

إدارة المواهب والمشاريع في مكان واحد

Rayons

radius-4 / 8 / 12 / 20 / full — l’intérieur est toujours rayon extérieur moins le padding.

4

8

12

20

full

Espacement

Unité de base 4px — échelle 4/8/12/16/20/24/32/40/48/64/96, plus les jetons de mise en page nommés.

4

8

12

16

20

24

32

40

48

64

96

spacing-sidebar: 220pxspacing-sidebar-collapsed: 64pxspacing-topbar: 40pxspacing-row: 32pxspacing-row-lg: 40pxspacing-touch: 44pxspacing-content: 1440px

Densité

La géométrie de référence, en un seul endroit : ligne de 32px, ligne confortable de 40px, topbar de 40px, rail de 220px. Les contrôles xs (24px) tiennent dans une ligne de 32px, les md (32px) dans la topbar. text-13 est la taille de travail.

Ligne de liste — h-row (32px), contrôles xs révélés au survol

Refonte du portail RHAmel Benali · 12 marsEn cours

Migration de la paie Q2Karim Toumi · 18 marsÀ revoir

Audit des accèsSonia Meddah · 2 avrilBrouillon

Ligne confortable — h-row-lg (40px), deux niveaux de texte

Refonte du portail RHAmel Benali · 12 marsEn cours

Migration de la paie Q2Karim Toumi · 18 marsÀ revoir

Audit des accèsSonia Meddah · 2 avrilBrouillon

Topbar — h-topbar (40px), contrôles md et sm

Rail latéral — w-sidebar (220px), libellés text-13

Zone de contenu

Contrôles compacts — xs (24px), au plancher de cible WCAG 2.5.8

Badge sm · 20pxBadge md · 24px

Mouvement

120–240ms ease-out pour l’état, 400–600ms pour panneaux/pages. Respecte prefers-reduced-motion.

state-fast 120ms (hover)

state 160ms (hover)

state-slow 240ms (hover)

panel 400ms (hover)

animate-shimmer

Button & IconButton

primary / secondary / ghost / danger × xs(24) / sm(28) / md(32) / lg(40) — md est la taille par défaut et utilise text-13.

Variantes

Tailles (adjacentes, même hauteur)

Icônes & IconButton

Formulaires

Input, Textarea, Select, Combobox, Checkbox, Switch, RadioGroup, DatePicker, Field.

Nom complet

Tel qu’il apparaîtra sur les documents.

Email professionnel

Adresse invalide.

Montant (DZD)

DZD

Note

Département

Responsable

Recherche asynchrone simulée.

Date d’entrée

Envoyer un e-mail de bienvenueCompte actifDésactive l’accès sans supprimer les données.

ModifierLecture seule

Overlays

Dialog, Sheet, Popover, DropdownMenu, Tooltip.

Tabs

Style soulignement, 120–160ms.

Vue tableau active.

Retour visuel

Badge, Avatar, Skeleton, Progress, Kbd.

Badges (jamais pleine largeur)

NeutrePayéeÉchéance procheEn retardInformation

Avatars

+2

Progress & Kbd

⌘K

Navigation

Breadcrumb, SegmentedControl, PageHeader.

Aperçu PageHeader

Un seul primaire, actions secondaires avant lui.

PersonCard, RoleBadge, StatChip

PersonCard — variante ligne

Amel BenaliAdmin

Responsable RHRH

Karim Zerrouki

Yanis CherifSenior

Développeur·seIngénierie

Amel Benali

PersonCard — variante carte

Sofia MezianeAnalysteFinance

Junior

Rayan HaddadChef de projetOpérations

Manager

RoleBadge

AdminSous-adminManagerSeniorJunior

StatChip

Score moyen82+3Retards4-1

Matrice d’états

Default / Disabled / Loading / Success / Error / Selected pour les contrôles clés.

Contrôle	Default	Disabled	Loading	Success	Error	Selected
Button						—
Input			—	—	Ce champ est requis.	—
Select			—	—	Sélection invalide.	—
Checkbox	Recevoir les notifications	Recevoir les notifications	—	—	—	Recevoir les notifications
Switch	Mode sombre	Mode sombre	—	—	—	Mode sombre
Tabs	Vue tableau					—

Hover, active et focus sont des pseudo-états d’interaction — vérifiés en direct (Tab/pointeur), pas dans un instantané statique.

DataTable

300 lignes générées — tri, groupement, sélection, filtres, vues enregistrées, vertu virtualisée.

300 résultats


Riad Saidi	Chargé·e de clientèle	RH	Admin	82	169 000	26/10/2022
Chaima Boudiaf	Coordinateur·rice	Ventes	Admin	79	176 000	21/12/2025
Rayan Haddad	Chef de projet	RH	Senior	66	163 000	09/06/2023
Sofia Kadi	Analyste	Finance	Senior	57	64 000	13/03/2025
Omar Cherif	Comptable	Ingénierie	Admin	65	169 000	18/12/2020
Riad Boudiaf	Comptable	Ventes	Manager	74	171 000	14/02/2025
Walid Amrani	Analyste	RH	Manager	51	129 000	27/06/2023
Amel Benali	Coordinateur·rice	Ingénierie	Sous-admin	64	130 000	13/05/2020
Walid Cherif	Analyste	Finance	Manager	68	178 000	03/06/2024
Riad Benali	Chargé·e de clientèle	Ingénierie	Admin	45	177 000	04/04/2021
Bilal Zerrouki	Développeur·se	Marketing	Manager	55	152 000	22/11/2022
Meriem Zerrouki	Chargé·e de clientèle	RH	Sous-admin	88	137 000	23/02/2024
Sami Haddad	Analyste	RH	Admin	78	161 000	18/05/2018
Yanis Boudiaf	Coordinateur·rice	Ingénierie	Manager	79	187 000	10/03/2024
Imene Cherif	Comptable	Ventes	Junior	54	141 000	09/09/2023
Riad Belkacem	Analyste	Finance	Sous-admin	71	175 000	04/04/2019
Sarah Meziane	Chargé·e de clientèle	Ventes	Senior	56	191 000	22/12/2024
Karim Zerrouki	Comptable	Ventes	Manager	66	144 000	06/01/2019
Ines Meziane	Chargé·e de clientèle	RH	Admin	63	173 000	07/09/2020
Rayan Belkacem	Coordinateur·rice	Finance	Junior	86	115 000	22/10/2018
Imene Zerrouki	Analyste	Finance	Junior	45	99 000	07/08/2024
Nour Kadi	Chef de projet	RH	Manager	95	106 000	20/06/2019
Yanis Zerrouki	Chef de projet	Opérations	Senior	88	194 000	27/05/2020
Karim Amrani	Comptable	Ingénierie	Admin	89	99 000	01/04/2021
Yanis Boudiaf	Analyste	Ventes	Junior	86	70 000	05/12/2022
Chaima Boudiaf	Comptable	Finance	Junior	43	100 000	02/06/2019
Meriem Saidi	Chargé·e de clientèle	Ingénierie	Sous-admin	60	98 000	07/07/2021
Nassim Meziane	Comptable	Opérations	Admin	76	157 000	08/02/2018
Ines Amrani	Développeur·se	Opérations	Admin	51	67 000	19/07/2021
Lina Zerrouki	Coordinateur·rice	Ventes	Manager	56	189 000	16/02/2024

				70.07	40,516,000

AppShell

Rendu dans un cadre 1280×720.

Aperçu du shell

AppShell rendu en direct — barre latérale, barre du haut, palette de commandes et navigation mobile.

Personnes actives

248+4%

Projets en cours

32

Factures impayées

1 240 000-2%

Command palette

⌘K, groupes, récents, provider async, glass + blur 24px.

OnboardingStepper

Étapes, barre de progression, retour/suivant/passer, clavier.

EmptyState

Titre serif, une phrase, un seul primaire — plein écran et compact.

Aucune personne pour l’instant

Invitez votre équipe pour commencer à suivre son activité.

Aucun résultat

Essayez un autre filtre.

Skeleton

text / row / card / avatar / page.

text

row

card

avatar

page

ScrollArea

Ascenseur restylé pour les listes longues (menus, panneaux).

Élément 1

Élément 2

Élément 3

Élément 4

Élément 5

Élément 6

Élément 7

Élément 8

Élément 9

Élément 10

Élément 11

Élément 12

Élément 13

Élément 14

Élément 15

Élément 16

Élément 17

Élément 18

Élément 19

Élément 20

KanbanBoard

Colonnes glissables, cartes, limites WIP, sélection multiple.

Couloirs par personneAfficher le squelette

Backlog

À faire

En cours

Revue

Limite dépassée

Terminé

MU-140—

Maquette du tableau de bord finance

MU-141▽

Migration des factures Devivite

Lina Cherif

MU-142▲

Calibrage des scores de compétence

people

Amina Benali
Yacine Meziane

MU-143▲

Page statut client partagée

Lina Cherif
Amina Benali

MU-144▽

Export PDF paginé A4

people

Lina Cherif

MU-148—

Vue charge de travail par personne

finance

Yacine Meziane

MU-150—

Numérotation fiscale par exercice

finance
design

Karim Haddad
Lina Cherif

MU-154▽

Taux de change figé à l'émission

design
people

Karim Haddad
Amina Benali

MU-152▽

Onboarding en quatre étapes

infra
finance

Yacine Meziane

MU-146▲

Import CSV des employés

projets
infra

Amina Benali
Lina Cherif

MU-147—

Rappels automatiques d'échéance

people
finance

Karim Haddad

MU-149▲

Audit d'accessibilité du shell

Lina Cherif
Yacine Meziane

MU-151▽

Graphe de connaissances temporel

design

Yacine Meziane

MU-145▽

Filtre en langage naturel

a11y

Amina Benali
Karim Haddad

MU-153▲

Palette de commandes ⌘K

infra
design

Amina Benali

Timeline

Gantt : table + barres, dépendances, jalons, zoom.

200 lignes (virtualisé)Lecture seule

Terminé
En cours
Planifié

NomResponsableDébutFinDurée

juil. 2026

août 2026

sept. 2026

oct. 2026

nov. 2026

déc. 2026

M 1

J 2

V 3

S 4

D 5

L 6

M 7

M 8

J 9

V 10

S 11

D 12

L 13

M 14

M 15

J 16

V 17

S 18

D 19

L 20

M 21

M 22

J 23

V 24

S 25

D 26

L 27

M 28

M 29

J 30

V 31

S 1

D 2

L 3

M 4

M 5

J 6

V 7

S 8

D 9

L 10

M 11

M 12

J 13

V 14

S 15

D 16

L 17

M 18

M 19

J 20

V 21

S 22

D 23

L 24

M 25

M 26

J 27

V 28

S 29

D 30

L 31

M 1

M 2

J 3

V 4

S 5

D 6

L 7

M 8

M 9

J 10

V 11

S 12

D 13

L 14

M 15

M 16

J 17

V 18

S 19

D 20

L 21

M 22

M 23

J 24

V 25

S 26

D 27

L 28

M 29

M 30

J 1

V 2

S 3

D 4

L 5

M 6

M 7

J 8

V 9

S 10

D 11

L 12

M 13

M 14

J 15

V 16

S 17

D 18

L 19

M 20

M 21

J 22

V 23

S 24

D 25

L 26

M 27

M 28

J 29

V 30

S 31

D 1

L 2

M 3

M 4

J 5

V 6

S 7

D 8

L 9

M 10

M 11

J 12

V 13

S 14

D 15

L 16

M 17

M 18

J 19

V 20

S 21

D 22

L 23

M 24

M 25

J 26

V 27

S 28

D 29

L 30

M 1

M 2

J 3

V 4

S 5

D 6

L 7

M 8

M 9

J 10

V 11

S 12

D 13

L 14

M 15

M 16

J 17

V 18

S 19

D 20

L 21

M 22

M 23

J 24

V 25

S 26

D 27

L 28

M 29

M 30

J 31

Aujourd'hui

BioCare — vidéo produitAmina Benali08/0727/0851 j

Cadrage08/0721/0714 j

Atelier de lancementKarim Haddad08/0714/077 j

Rédaction du briefLina Cherif15/0721/077 j

Production23/0710/0819 j

DéveloppementYacine Meziane24/0701/089 j

Tests utilisateursLina Cherif02/0810/089 j

Recette12/0827/0816 j

LivraisonYacine Meziane14/0816/083 j

FormationKarim Haddad19/0824/086 j

Atelier de lancementYacine Meziane25/0827/083 j

Migration DeviviteKarim Haddad08/0825/11110 j

Cadrage08/0817/0941 j

FormationKarim Haddad09/0816/088 j

Atelier de lancementKarim Haddad18/0827/0810 j

Rédaction du briefLina Cherif30/0807/099 j

MaquettesYacine Meziane09/0917/099 j

Production19/0919/1031 j

MaquettesYacine Meziane21/0929/099 j

DéveloppementYacine Meziane01/1003/103 j

Tests utilisateursKarim Haddad04/1010/107 j

CorrectionsYacine Meziane12/1019/108 j

Recette21/1025/1136 j

CorrectionsYacine Meziane23/1030/108 j

LivraisonLina Cherif31/1005/116 j

FormationYacine Meziane08/1115/118 j

Atelier de lancementYacine Meziane18/1125/118 j

Portail RH SonatrachLina Cherif05/0929/1186 j

Cadrage05/0901/1027 j

LivraisonLina Cherif06/0916/0911 j

FormationLina Cherif18/0921/094 j

Atelier de lancementYacine Meziane22/0901/1010 j

Production03/1023/1021 j

Rédaction du briefLina Cherif03/1013/1011 j

MaquettesLina Cherif16/1020/105 j

DéveloppementLina Cherif21/1023/103 j

Recette25/1029/1136 j

Atelier de lancement

Rédaction du brief

Développement

Tests utilisateurs

Livraison

Formation

Atelier de lancement

Formation

Atelier de lancement

Rédaction du brief

Maquettes

Développement

Tests utilisateurs

Corrections

Livraison

Formation

Atelier de lancement

Livraison

Formation

Atelier de lancement

Rédaction du brief

Maquettes

Développement

Jalon 1

Jalon 2

Jalon 3

ScoreRadar

Polygones self vs cible, intervalle de confiance.

Radar des cinq dimensions
Dimension	Score	IC bas	IC haut	Cible
Compétence	72	64	80	70
Discipline	58	46	70	65
Performance	81	75	87	70
Efficacité	64	52	76	70
Créativité	47	30	64	55

Score
Cible du rôle
Intervalle de confiance

Amina Benali
Dimension	Score	IC bas	IC haut
Compétence	72	64	80
Discipline	58	46	70
Performance	81	75	87
Efficacité	64	52	76
Créativité	47	30	64

KnowledgeGraph

Graphe de personnes, compétences, projets et documents.

Au17 oct. 202640 nœuds · 79 liens

InvoiceBuilder

Formulaire + aperçu du document en direct.

Facture

Client

NIF: 000216001234567
RC: 16/00-1234567 B 20
Adresse: Zone industrielle, Rouiba, 16000 Alger

Date d'émission

Échéance

RéférenceFacultatif

Devise

Lignes

Entrée : nouvelle ligne · Alt + ↑/↓ : réordonner

#	PU HT	Remise	Total HT
1	DZD	%	450 000,00
2	DZD	%	378 000,00
3	DZD	%	560 000,00

Conditions

Mode de paiement

Remise globale

%

Ajustement

DZD

Montant signé appliqué après taxes (arrondi, geste commercial).

NotesFacultatif

Conditions de paiementFacultatif

DocumentPreview

Canevas paginé A4 avec rail de métadonnées.

Simuler le chargementSimuler une erreur

Page 1 sur 3

RTL — exemple arabe

Propriétés logiques (ps-/pe-/ms-/me-/start-/end-) — aucun changement de code entre LTR et RTL.

لوحة الأشخاص

إدارة الفريق والأدوار والصلاحيات في مساحة عمل واحدة.

نشطقيد المراجعة

أمال بن عليAdmin

مسؤولة الموارد البشريةالموارد البشرية

Couleurs

Rampe ink

États sémantiques (≤ 5% de l’écran)

Data-visualisation (exempt du lint monochrome)

Typographie

Rayons

Espacement

Densité

Ligne de liste — h-row (32px), contrôles xs révélés au survol

Ligne confortable — h-row-lg (40px), deux niveaux de texte

Topbar — h-topbar (40px), contrôles md et sm

Rail latéral — w-sidebar (220px), libellés text-13

Contrôles compacts — xs (24px), au plancher de cible WCAG 2.5.8

Mouvement

Button & IconButton

Variantes

Tailles (adjacentes, même hauteur)

Icônes & IconButton

Formulaires

Overlays

Tabs

Retour visuel

Badges (jamais pleine largeur)

Avatars

Progress & Kbd

Navigation

PersonCard, RoleBadge, StatChip

PersonCard — variante ligne

PersonCard — variante carte

RoleBadge

StatChip

Matrice d’états

DataTable

AppShell

Command palette

OnboardingStepper

Nommez votre organisation

EmptyState

Aucune personne pour l’instant

Aucun résultat

Skeleton

ScrollArea

KanbanBoard

Backlog

À faire

En cours

Revue

Terminé

Timeline

ScoreRadar

KnowledgeGraph

InvoiceBuilder

Facture

Lignes

Conditions

DocumentPreview

RTL — exemple arabe