Identité visuelle

SIA UI utilise un signe modulaire : un S construit par des blocs d'interface. Le message caché est volontairement simple : des composants séparés deviennent un système cohérent.

Le logo ne représente ni une devise, ni un secteur financier précis. Les composants liés aux montants doivent rester configurables : devise, locale, suffixe, précision et mode de formatage relèvent de l'application qui les utilise.

Fichiers

Fichier	Usage
sia-ui-logo.svg	logo horizontal vectoriel
sia-ui-logo-white.svg	logo horizontal vectoriel sur fond sombre
sia-ui-mark.svg	icône vectorielle
sia-ui-mark-mono.svg	icône vectorielle monochrome
sia-ui-logo.png	logo horizontal principal sur fond transparent
sia-ui-logo-white-bg.png	logo horizontal sur fond blanc
sia-ui-logo-dark-bg.png	logo horizontal sur fond sombre
sia-ui-mark.png	icône seule sur fond transparent
sia-ui-app-icon.png	avatar carré, GitHub, LinkedIn, npm
favicon.png	favicon compact

Les README des paquets npm pointent vers https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png. Ce chemin doit rester stable.

Surfaces

Surface	Intégration
Documentation VitePress	signe dans la navigation et favicon
Démonstration /preview/	signe dans la barre latérale, les exemples d'application et favicon
Catalogue /storybook/	logo horizontal dans le manager, signe dans les stories et favicon
README GitHub et npm	logo horizontal PNG servi depuis /brand/

La démonstration et Storybook servent les fichiers de docs/public/brand. Dans leurs composants, apps/docs/src/brand.ts résout l'URL depuis la page courante : le même code fonctionne à la racine en local et dans les sous-dossiers /preview/ et /storybook/ du site publié.

Règles

• Garder le signe lisible en petit.
• Ne pas ajouter de symbole de devise, de banque ou de carte.
• Ne pas transformer le logo en rendu 3D lourd.
• Garder une profondeur minimale : des faces simples, pas d'effet brillant.
• Préférer les couleurs teal, bleu et charbon, avec beaucoup de contraste.