Arval Design System × IA · Étude de cas

01 · LES FONDATIONS

Des tokens, jamais des valeurs en dur

50 tokens sémantiques pilotent chaque couleur, espacement et rayon. Du primitif au sémantique : une seule source de vérité, déclinable sur toutes les marques.

primary/100

#E2F4F2

primary/200

#A5ECCE

primary/300

#2ADB95

primary/500

#00AD71

primary/700

#008859

primary/900

#035A44

action/background

#008859

action/hover

#047957

action/pressed

#035A44

accent/low

#034242

accent/high

#98FF9B

text/error

#CC333D

surface/low

#FFFFFF

surface/high

#F3F5F7

surface/revert

#172328

border/low

#E1E3E6

border/medium

#D2D4D6

border/active

#008859

text/high

#172328

text/medium

#5C6166

text/low

#737477

content/white

#FFFFFF

content/revert

#98FF9B

text/primary

#008859

02 · LA BIBLIOTHÈQUE

40+ composants, une seule identité

Boutons, champs, cartes, navigation : chaque composant est documenté, cohérent et prêt pour la production. 100% Arval, pas une lib générique.

+40composants au total

03 · LA DOCUMENTATION

Documentée en FR et EN, jusqu'au moindre état

Chaque composant est livré avec sa documentation bilingue : anatomie, états, accessibilité, do's & don'ts, et ses dizaines de variantes. Le tout généré et structuré dans Figma via IA.

Composant Button : grille complète de variantes et documentation FR & EN dans Figma

Et de vrais écrans produit, de bout en bout

Du token au composant jusqu'à l'écran complet : la home du fleet manager myArval, entièrement maquettée dans Figma via IA, fidèle au design system.

Home du fleet manager myArval, écran produit complet généré dans Figma

04 · L'ASSIMILATION

L'IA apprend à parler notre langage

Tokens et composants sont poussés à l'IA, qui lit la structure du Design System (primitif, sémantique, variants) et la comprend comme un membre de l'équipe.

→Lecture des variables et des règles de composition

→Respect strict de l'identité Arval

→Prête à générer des écrans complets

05 · LE PASSAGE À L'ÉCHELLE

L'IA génère les écrans, en masse, dans Figma

À partir du Design System, l'IA construit des parcours complets, directement dans Figma, à la chaîne.

0

écrans générés

0

on-brand Arval

0

au lieu de mois

06 · LA TOUCHE HUMAINE

Le designer reprend la main

L'IA fait le gros œuvre ; le designer ajuste, affine et valide. L'humain garde le contrôle créatif et la décision finale.

✓Ajustements fins directement dans Figma

✓Finitions, ton et nuances de marque

07 · ET DEMAIN

Le même moteur génère le code

La même logique s'applique au Front-End : les composants Figma deviennent du vrai code Angular, fidèle au design, token pour token.

→Composants Figma mappés vers la lib Angular

→CSS fidèle au design, sans valeur en dur

arv-button.component.ts

De la maquette au code

Une chaîne de production design, industrialisée.

Un seul moteur, du Design System jusqu'au Front-End. Réplicable sur tous les projets Arval.

Propulsé par Figma + Claude Code