Marque
Un socle, trois expressions
Forme® parle d'une seule voix sur toutes ses surfaces : les applications, le site forme.ch, les présentations et les rapports. Ce qui est commun forme le socle de marque ; chaque surface l'exprime ensuite à son échelle.
Le socle
Sobre, typographique, sur une base noir et blanc. On sépare par le fond et l'espace plutôt que par le trait. La couleur a toujours un rôle : une phase de Forme®Process, une catégorie, une série de graphique ou un état. L'identité tient dans le noir, le blanc, trois gris, la palette Forme, Aeonik et le mot-symbole.
| Élément | Règle |
|---|---|
| Nom | Forme SA pour la société, Forme® pour la marque. Produits : Forme®AI, Forme®Frame, FormeType™. |
| Logo | Mot-symbole intouchable, noir ou blanc uniquement. Voir Logo & lockups. |
| Polices | Aeonik (Regular, Medium, Bold) pour le texte ; Aeonik Mono en capitales pour surtitres, métadonnées et étiquettes. |
| Graisses | Titres en Medium (500). Bold (700) réservé aux grands chiffres. |
| Couleur | Base monochrome. Palette Forme pour Forme®Process, les phases et catégories, les schémas et les graphiques. Palette Vif pour les états d'interface. |
| Rayons | 4 / 8 / 12 px. 9999 seulement pour les cercles (avatar, point) et les pastilles de marque ; le badge des applications garde 4 px. Voir Espacement & rayons. |
| Langue | Français de Suisse, apostrophe typographique, nombres et montants sans séparateur de milliers (13376.00). Voir Ton & rédaction. |
Couleurs primitives
Noir
#000000 · --forme-black
Texte, logo, aplats inversés
Blanc
#FFFFFF · --forme-white
Fond, logo sur noir
Gris 600
#767676 · --forme-gray-600
Texte secondaire, métadonnées
Gris 300
#DDDDDD · --forme-gray-300
Filets
Gris 100
#F7F7F7 · --forme-gray-100
Fonds de tuile, encadrés, pastilles
Les applications dérivent leurs neutres d'interface de cette gamme (texte #171717,
mode sombre en gris strictement neutres) : voir Couleurs.
Palette Forme
Six couleurs. Les cinq premières suivent un ordre fixe : celui de Forme®Process, notre méthode en double diamant. Le rouge complète la palette hors processus (sixième catégorie, sixième série, signal en présentation). Elles servent aussi à distinguer des phases ou des catégories (dans l'ERP, une phase de projet), à rythmer un schéma de présentation et à coder les séries d'un graphique.
Orange
#FFAA00 · --forme-orange
Challenge · texte blanc dessus
Rose
#FF82BE · --forme-rose
Découvrir · texte blanc dessus
Violet
#823CFF · --forme-violet
Définir · texte blanc dessus
Bleu
#00A0FF · --forme-bleu
Développer · texte blanc dessus
Vert
#00DC8C · --forme-vert
Délivrer · texte blanc dessus
Rouge
#AE0411 · --forme-rouge
Hors processus · texte blanc dessus
À faire
Aplat, pastille, trait ou point de couleur ; texte blanc dessus ; ordre du processus respecté ; une couleur = une phase ou une catégorie, partout la même.
À éviter
Colorer du texte courant ; dégradés décoratifs hors schéma Process ; utiliser la palette Forme pour un état (succès, erreur) : c'est le rôle de la palette Vif.
Trois niveaux par couleur : plein, light (--forme-*-light) et ultra-light
(--forme-*-ultra-light, fonds de boîtes) ; détail dans Couleurs.
Présentations : vert et rouge light pour comparer « à faire » et « à éviter ».
Dans les applications, les états passent par la palette Vif (Couleurs).
Trois expressions
@forme-ch/ui, mode clair et sombre.
Éditorial Site forme.ch
Vitrine de l'agence. Typographie fluide et généreuse, images de projets en grand,
boutons et étiquettes en mono capitales.
Documents Présentations & rapports
Diapositives 16:9 et documents A4. Une idée par page, pied de page en mono,
chiffres clés en grand.
D'où viennent les valeurs
Une seule source : le paquet @forme-ch/design-system. Il publie les
primitives de marque en CSS (css/brand.css, variables
--forme-*) et en JSON (brand.json). Le site
forme.ch, la bibliothèque Figma, le design system de Claude et cette documentation lisent ces
mêmes valeurs. On ne recopie pas une couleur à la main : on change la source.
Télécharger brand.json · Logo noir (SVG) · Logo blanc (SVG)
