download design.md
V1 - 07/26

Brand guidelines

L'industrie rendue lisible, désirable, en mouvement. Ce brand book est vivant : il évolue avec la marque, pas un PDF figé.

Brand Light — machine industrielle révélée par le dégradé Notom
01 · Stratégie

Find your flow.La plateforme de marque.

Pendant longtemps, la performance industrielle s'est uniquement mesurée à la qualité et au volume. Mais le monde a changé.

La demande est mouvante, imprévisible, instantanée. Ce qui fait la différence désormais, ce n'est pas seulement ce que l'on produit — c'est la capacité à bouger avec le marché.

Permettre aux usines de suivre le marché, c'est révéler une nouvelle forme de performance. Une performance plus juste. Plus rapide. Plus durable.

La pyramide de marque
Why · Vision
Gagner, c'est bouger avec le marché.
How · Mission
Des usines flexibles et sans latence.
What · Offre
Une automatisation simplifiée & intelligente.
Brand idea · l'idée centrale qui aligne stratégie et expression

“Find your flow”

Avant, l'industrie c'était la rigidité — des lignes fixes, des changements lents. Maintenant, c'est une production qui s'adapte sans résistance. L'usine devient un flux. Elle ne force plus : elle trouve son flow.

Comme dans le sport, comme dans la danse, Notom incarne ce moment où tout s'aligne — où chaque instant est juste, fluide, sans friction. La marque célèbre le mouvement, le rythme et la maîtrise naturelle : un état d'esprit positif qui mêle performance et plaisir d'exécution.

La traduction créative · le Flow Lucide

L'industrie était opaque, technique, anxiogène. Notom la rend lisible — et la lisibilité débloque le flow. Un futur industriel désirable : lumineux, positif, en mouvement.

01

Lumineux par défaut

La base est claire. Le sombre ne sert que d'encre — jamais en grand aplat. On célèbre ce que Notom rend possible, pas la complexité qu'il retire.

02

Le dégradé est un événement

Pas un fond. Il apparaît comme un moment fort — un hero, un accent, un mot clé. Sa rareté fait sa force.

03

Le mouvement est doux

Rien ne stresse. La marque respire, elle ne clignote pas. Le futur est calme et sûr de lui.

02 · Positionnement

La compétitivité marché.Pas une solution de plus — un nouveau modèle d'usine.

Le marché de l'automatisation parle tech : un discours jargonneux et dense qui noie son public dans les protocoles, les compatibilités et les logiciels — et qui se définit en creux, par ce que la solution enlève. Notom prend le contre-pied : la marque se définit par ce qu'elle apporte — des avantages concrets et irrésistibles sur le marché.

L'approche stratégique

Ce qui fait envie, ce n'est pas l'automatisation. C'est la compétitivité.

L'industrie n'a pas envie d'y penser. Ni d'y passer. Plutôt que d'essayer de la convaincre, on lui donne envie — avec ce qui lui fait envie.

Notom parle d'un nouveau modèle — un modèle qui ne se définit pas par ce qu'il retire ni transforme, mais par des avantages sur le marché.

Partis pris · une rupture de perception
01

Un nouveau modèle

Notom n'est pas une solution de plus. Notom devient synonyme d'un modèle d'usine qui tourne et s'optimise en temps réel — un nouveau monde de performance et de fluidité.

02

De nouveaux usages

Notom ne soulage pas des usines. Notom crée de l'action et de nouveaux usages : voir, analyser, créer, optimiser.

03

Le temps réel

Annulant l'inertie et supprimant la latence, Notom est le choix de ceux qui veulent que ça se passe tout de suite.

Territoire notionnel · le fond du discours
ContrôleCompétitivitéRapidité & rythmeOptimisationRésilienceÉvolutif
Promesse · le bénéfice du point de vue de la cible

“Devenez une usine flexible,
une marque sans latence.”

03 · Mission

Gagner, c'est bouger avec le marché.Notre raison d'être.

Notom rend les usines plus intelligentes, connectées et automatisées. Là où tout n'était qu'attente, éparpillement et friction, l'usine, la ligne de prod ou l'atelier devient un système capable de :

01

S'adapter en continu

02

Réagir en temps réel à la demande

03

Orchestrer machines, données et humains

04

Suivre le rythme du marché — et devenir imbattable

What · la carte mentale de la solution
La plateforme
Une plateforme pour piloter toute votre usine.
Ce qu'elle permet
Optimiser la production, déployer de nouvelles automatisations, diminuer les pannes.
Sans friction
Quelles que soient vos machines, avec un déploiement rapide.

La tech et le process restent présents et peuvent être amplement détaillés — au service d'une vision plus large et de ce qu'ils rendent possible.

Valeurs
En cours de formalisation avec l'équipe Notom.
05 · Typographie

STK Bureau Sans.Titres en Light, labels trackés.

Une seule famille néo-grotesque. Les titres en Light apportent une légèreté éditoriale — l'opposé du gras industriel. Les labels très trackés (15%) donnent la précision technique.

Aa
Light · titres
Aa
Book · corps
Aa
SemiBold · emphase
H1 · Light 48
Rendre lisible l'industrie
H2 · Light 32
Un futur industriel désirable
H3 · Light 24
Lumineux, positif, en mouvement
Corps · Book 16
Notom traduit la complexité industrielle en une expérience claire. Le corps explique, détaille, rassure — pendant que les titres attirent et structurent.
Label · Book 14 / 15%
Get Started

Fallback pour outils contraints (emailing) : Inter → system-ui. Corps jamais sous 14px.

06 · Couleurs

Base claire.Accents par événement.

Le blanc et la crème occupent 70–80% de chaque surface — le blanc en fond, la crème en surfaces tonales. Le marron est l'encre. Violet et orange n'apparaissent jamais l'un sans l'autre — leur rencontre est la signature.

Blanc · fond
#FAFAFA
Crème · surfaces
#F2F0EB
Marron · encre
#322A2E
Noir
#13100E
Orange
#F0803A
Orange clair
#FFB579
Violet
#B796FF
Violet clair
#D1CCFF
Dégradés · les 6 presets — toujours verticaux
Gradient 1 · rampe complète
orange → violet → crème
Gradient 2 · rampe inversée
violet → orange → crème
Gradient 3 · bande orange
orange → crème
Gradient 4 · bande violet
violet → crème
Gradient 5 · clairs
violet clair → orange clair → crème
Gradient 6 · clairs inversé
orange clair → violet clair → crème
Proportions
Blanc 52% · le fond Crème 22% · surfaces Marron 12% · encre Orange 7% · accent Violet 4% · accent Clairs 3%
Combinaisons approuvées · lisibilité
AaL'industrie rendue lisible et désirable.
Marron sur Blanc✓ Texte, titres, UI
AaL'industrie rendue lisible et désirable.
Marron sur Crème✓ Texte, titres, UI
AaL'industrie rendue lisible et désirable.
Crème sur Marron✓ Texte, titres, UI
AaL'industrie rendue lisible et désirable.
Marron sur Orange✓ Texte sur accent
AaL'industrie rendue lisible et désirable.
Marron sur Orange clair✓ Texte sur accent
AaL'industrie rendue lisible et désirable.
Marron sur Violet clair✓ Texte sur accent
AaGrands titres décoratifs uniquement.
Orange sur Crème⛔ Décoratif seulement
AaGrands titres décoratifs uniquement.
Violet sur Crème⛔ Décoratif seulement
AaDécoration pure, rien à lire.
Ton sur ton⛔ Décoratif seulement

La règle : dès qu'un contenu doit être lu, c'est marron sur clair ou clair sur marron. Les accents ne portent jamais de petite copy.

07 · Système graphique

La lumière révélatrice.Le cœur de la marque.

L'objet industriel voit sa luminance mappée sur la rampe de marque. Ombres → violet, lumières → orange. La machine opaque devient désirable. Le dégradé s'utilise toujours à la verticale — de haut en bas ou de bas en haut, jamais en diagonale.

Ombres · marronVioletOrangeLumières · blanc
Trois usages, un système

Gradient map — hero

La luminance d'un rendu neutre mappée sur la rampe. L'effet signature.

Bande

Seules deux bandes existent : violet + crème (Gradient 4) et orange + crème (Gradient 3). Toujours verticales, jamais une page entière.

Aa

Typographique

Titres et mots clés uniquement — jamais le texte courant. Un seul par vue, sinon l'effet se banalise.

Brand Light · outil live

Déposez un rendu neutre, tracez un cadre, exportez. Ainsi on produit les visuels hero du site, des decks et du social.

08 · Motion

La marque respire.Elle ne clignote pas.

La dominante du dégradé oscille lentement (violet ↔ orange, cycle ~4–8s). Courbe douce par défaut. Jamais de flash, de clignotement, de scan agressif.

Respiration — la dominante oscille

Courbe douce

Easing lent, jamais d'à-coups. Les transitions accompagnent, elles ne surprennent pas.

Le futur est calme

Rien ne stresse. Le mouvement projette une confiance tranquille — sûr de lui.

Exemples en mouvement
Brand reveal · vidéo MP4 à intégrer
Logo animé · Lottie à intégrer
Respiration du hero · vidéo MP4 à intégrer
Le dégradé typographique · titres & mots clés · survolez

Up and running
in under a month.

09 · Interface

Le hover révèle la couleur.Brand light jusque dans l'interface.

Rayon 10, profondeur par surface — jamais d'ombre lourde. Au survol, la couleur se révèle.

Boutons

Le hover révèle la couleur : primaire → orange, secondaire s'assombrit, link → la puce apparaît.

Tag / Kicker

Connect Interact

Capitales, tracking 15%, sphère dégradée violet ou orange.

Bande accent

Le dégradé entre par la tranche de la carte et fond vers le blanc. Un moment, pas un fond.

10 · Projections

La marque en contexte.Print, social, slides, livre blanc.

À peupler avec les mises en application réelles. Les assets existent dans le projet — mise en scène à faire ici.
11 · Ressources

Ta marque, consommable.Par ton équipe et tes outils.

Get started

design.md

La marque en format lisible par ton équipe et tes outils IA. Colle-le dans Cursor ou un agent, il produit du on-brand direct.

Télécharger le design.md
Tokens

Variables CSS

Prêtes à brancher. Version complète (CSS / JSON / Tailwind) dans le design.md.

:root{
  --notom-cream:#F2F0EB; --notom-white:#FAFAFA;
  --notom-brown:#322A2E; --notom-black:#13100E;
  --notom-orange:#F0803A; --notom-orange-light:#FFB579;
  --notom-violet:#B796FF; --notom-violet-light:#D1CCFF;
  --notom-radius:10px; --notom-font:"STK Bureau Sans","Inter",system-ui,sans-serif;
}