Notom · Système de marque vivant

Brand
Book.

Le Flow Lucide — l'industrie rendue lisible, désirable, en mouvement. Ce document est vivant : il évolue avec la marque.

Fondations

Le Flow Lucide

L'industrie était opaque, technique, anxiogène. Notom la rend lisible — et la lisibilité débloque le flow. La marque incarne 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 et d'accent — jamais en grand aplat. On célèbre ce que Notom rend possible.

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.

Typographie

STK Bureau Sans

Une seule famille. Titres en Light (légèreté éditoriale), labels très trackés (précision technique). Le corps en Book.

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 de texte explique, détaille, rassure — pendant que les titres attirent et structurent.
Label · Book 14 / 15%
Get Started
Palette de couleurs

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.

Crème
#F2F0EB
Marron · encre
#322A2E
Orange
#F0803A
Violet
#B796FF
Blanc
#FAFAFA
Noir
#13100E
Orange clair
#FFB579
Violet clair
#D1CCFF
Combinaisons approuvées · lisibilité
Marron + Crème✓ Texte, titres, UI
Crème + Marron✓ Texte, titres, UI
Orange + Marron✓ Texte sur accent
Orange sur Crème⛔ Décoratif seulement
Violet sur Crème⛔ Décoratif seulement
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.

Le langage du dégradé · cœur de la marque

La lumière révélatrice

L'objet industriel voit sa luminance mappée sur la rampe de marque. Ombres → violet, lumières → orange. La machine opaque devient désirable.

Ombres · marronVioletOrangeLumières · blanc
Brand Light · outil live

Déposez un rendu neutre (PNG transparent), tracez un cadre, exportez en PNG ou en séquence. C'est ainsi qu'on produit les visuels hero du site, des decks et du social — de façon cohérente.

Composants & UI

Le hover révèle la couleur

La logique « brand light » jusque dans l'interface : au survol, la couleur se révèle. Rayon 10, profondeur par surface — jamais d'ombre lourde.

Boutons

Survolez — le primaire passe orange, le secondaire s'illumine.

Kicker de section

Get Started

Label capitales, tracking 15%, précédé d'un point violet.

Carte accent

Le dégradé de marque en aplat contenu — un moment, pas un fond. Base crème autour.

Projections

La marque en contexte

Section à peupler avec les mises en application réelles : supports print, social media, slides, livre blanc. Les assets existent dans le projet — à mettre en scène ici.
Ressources

Ta marque, consommable par 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 — couleurs, règles, intention.

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;
}