Le Flow
Lucide.
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.
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.
Crème par défaut.Accents par événement.
La crème occupe 70–80% de chaque surface. 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.
Gradient map — hero
La luminance d'un rendu neutre mappée sur la rampe. L'effet signature.
Accent
Violet→orange doux, en aplat contenu — une carte, jamais une page.
Typographique
Un titre clé porte le dégradé. 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
Survolez — le primaire passe orange.
Tag / Kicker
Get StartedCapitales, tracking 15%, point violet.
Carte accent
Le dégradé en aplat contenu — un moment, pas un fond. Base crème autour.
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.
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;
}