Brand guidelines
L'industrie rendue lisible, désirable, en mouvement. Ce brand book est vivant : il évolue avec la marque, pas un PDF figé.
Le Flow Lucide.Rendre l'industrie lisible.
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.
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.
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.
Le mouvement est doux
Rien ne stresse. La marque respire, elle ne clignote pas. Le futur est calme et sûr de lui.
La place de Notom.Sur son marché, dans les têtes.
Pourquoi Notom existe.La raison d'être.
Un logo qui vit.Sur tous les fonds.
Le logo garde toujours de l'air autour de lui. La zone de protection se calcule en fonction de x — la hauteur du logo.
Conçu pour rester lisible à toutes les tailles, du grand format au favicon.
Ne pas déformer
Ne pas incliner
Pas de fond faible contraste
Ne pas recolorer
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.
Fallback pour outils contraints (emailing) : Inter → system-ui. Corps jamais sous 14px.
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.
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.
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.
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.
Typographique
Titres et mots clés uniquement — jamais le texte courant. Un seul par vue, sinon l'effet se banalise.
Déposez un rendu neutre, tracez un cadre, exportez. Ainsi on produit les visuels hero du site, des decks et du social.
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.
Up and running
in under a month.
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
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.
La marque en contexte.Print, social, slides, livre blanc.
Ta marque, consommable.Par ton équipe et tes outils.
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.
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;
}